:root{color-scheme:light;--bg: #f7f4ee;--panel: #ffffff;--ink: #172026;--muted: #5c6870;--line: #d8d2c7;--soft: #ece6da;--teal: #0f766e;--teal-dark: #0b5d56;--shadow: 0 18px 50px rgba(23, 32, 38, .12);--radius: 8px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans TC,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#ffffffc2,#fff0 360px),var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}[hidden]{display:none!important}.shell{width:min(1240px,calc(100vw - 32px));margin:0 auto;padding:28px 0 40px}header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;margin-bottom:18px}h1{margin:0;font-size:clamp(28px,5vw,48px);line-height:1.06;letter-spacing:0}.subhead{max-width:700px;margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.7}.top-tools{display:grid;justify-items:end;gap:10px;min-width:230px}.top-tools label{width:100%}.status-pill{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#ffffffbd;color:var(--muted);font-size:13px;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}.auth-panel{width:100%;display:grid;gap:6px}.auth-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.auth-actions button,.auth-actions a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-decoration:none;font-size:13px;font-weight:800}.auth-actions a.primary-link{border-color:var(--teal);background:var(--teal);color:#fff}.sync-status{min-height:18px;color:var(--muted);font-size:12px;line-height:1.4;text-align:right}.user-chip{display:none;min-width:0;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#ffffffd1;color:var(--muted);font-size:12px;font-weight:800}.user-chip.visible{display:flex}.user-chip img{width:22px;height:22px;border-radius:50%;flex:0 0 auto}.user-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timezone-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-bottom:18px;padding:18px;border:1px solid #bfd8d4;border-radius:var(--radius);background:#eef8f6;box-shadow:0 12px 32px #0f766e1c}.banner-kicker{margin:0 0 6px;color:#2d6f69;font-size:13px;font-weight:800}.banner-title{margin:0;font-size:clamp(28px,5vw,54px);line-height:1.03;letter-spacing:0;font-weight:900}.banner-meta{margin:8px 0 0;color:#245f5a;font-size:14px;font-weight:720;line-height:1.55}.banner-clock{min-width:180px;text-align:right;font-size:clamp(26px,4vw,44px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums}main{display:grid;grid-template-columns:minmax(300px,410px) minmax(0,1fr);gap:18px;align-items:start}.controls,.output{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.controls{padding:18px;position:sticky;top:16px}.section-title{margin:0 0 14px;font-size:15px;font-weight:780}.field-grid{display:grid;gap:12px}label,.control-label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:680}input,select{width:100%;min-height:46px;border:1px solid #c9c1b4;border-radius:7px;background:#fff;color:var(--ink);padding:10px 11px;outline:none;transition:border-color .16s ease,box-shadow .16s ease}input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0f766e29}.inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-times,.quick-zones,.zone-actions,.mobile-zone-toolbar{display:grid;gap:8px}.quick-times{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:15px}.quick-zones,.zone-actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}.mobile-zone-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));margin:10px 0}.quick-times button,.quick-zones button,.zone-actions button,.mobile-zone-toolbar button,.action-row button{min-height:42px;border:1px solid var(--line);border-radius:7px;background:#fbfaf7;color:var(--ink);font-weight:740;transition:background .16s ease,border-color .16s ease,color .16s ease}.quick-times button:hover,.quick-zones button:hover,.zone-actions button:hover,.mobile-zone-toolbar button:hover,.action-row button:hover{border-color:var(--teal);color:var(--teal-dark);background:#eef8f6}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.action-row .primary{border-color:var(--teal);background:var(--teal);color:#fff}.action-row .primary:hover{background:var(--teal-dark);color:#fff}.divider{height:1px;margin:16px 0;background:var(--line)}.hint{margin:14px 0 0;padding:12px;border-left:3px solid var(--teal);background:#eef8f6;color:#245f5a;font-size:13px;line-height:1.55}.zone-picker{display:grid;gap:8px;max-height:292px;margin-top:10px;padding-right:4px;overflow:auto}.zone-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:7px;background:#fbfaf7;color:var(--ink)}.zone-option input{width:20px;min-height:20px;accent-color:var(--teal)}.option-name{min-width:0;font-size:13px;font-weight:780;line-height:1.35}.option-zone{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-code{padding:4px 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:820}.copy-toast{min-height:20px;margin-top:10px;color:var(--teal-dark);font-size:13px;font-weight:740}.output{overflow:hidden}.summary{display:flex;justify-content:space-between;gap:16px;padding:18px 18px 16px;border-bottom:1px solid var(--line);background:#fbfaf7}.summary strong{display:block;margin-bottom:4px;font-size:16px}.summary span{color:var(--muted);font-size:13px;line-height:1.5}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.zone-card{min-height:184px;padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto;gap:13px}.zone-card:nth-child(2n){border-right:0}.zone-card.source{background:#f2fbf9}.zone-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.city{margin:0;font-size:16px;font-weight:820;line-height:1.35}.timezone{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:650}.badge{min-width:54px;padding:5px 8px;border-radius:999px;background:var(--soft);color:var(--muted);text-align:center;font-size:12px;font-weight:820;white-space:nowrap}.source .badge{background:#ccebe5;color:#11645d}.time-block{align-self:center}.date-line{margin:0 0 6px;color:var(--muted);font-size:14px;font-weight:740}.time-line{margin:0;font-size:clamp(30px,4vw,42px);line-height:1;font-weight:900;letter-spacing:0;font-variant-numeric:tabular-nums}.end-line{margin:7px 0 0;color:var(--muted);font-size:13px;font-weight:680}.meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.meta{padding:6px 8px;border-radius:999px;background:#f5f1e9;color:var(--muted);font-size:12px;font-weight:760}.meta.daytime{background:#edf7f2;color:#17715c}.meta.evening{background:#eef3ff;color:#2657b8}.meta.late{background:#fff4e0;color:#916018}.meta.bad{background:#fff1f2;color:#b0183d}@media(max-width:960px){header,.timezone-banner{grid-template-columns:1fr;align-items:flex-start}.top-tools{width:100%;justify-items:stretch}.banner-clock{text-align:left}main{grid-template-columns:1fr}.controls{position:static}}@media(max-width:640px){.shell{width:min(1240px,calc(100vw - 20px));padding-top:18px}.inline-fields,.summary,.result-grid{grid-template-columns:1fr}.summary{display:grid}.zone-card,.zone-card:nth-child(2n){border-right:0}.quick-times,.quick-zones,.zone-actions,.action-row,.mobile-zone-toolbar{grid-template-columns:1fr 1fr}.quick-times button,.quick-zones button,.zone-actions button,.mobile-zone-toolbar button,.action-row button,input,select{min-height:52px}.banner-title{font-size:clamp(27px,12vw,44px)}.zone-picker{max-height:380px}}