:root{
  --bg:#0e1420; --panel:#161d2b; --panel-2:#1c2536; --line:#2a3446;
  --ink:#eef2f8; --ink-soft:#9aa7bd; --ink-faint:#64718a;
  --sky:#38a8e0; --warn:#f5a524; --crit:#ef4d4d; --good:#37c98b;
  --radius:14px; --gap:12px; color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#eef1f6; --panel:#fff; --panel-2:#f4f6fa; --line:#dde3ec;
  --ink:#131a26; --ink-soft:#54607a; --ink-faint:#8a95ac; --sky:#0d84c4; color-scheme:light;}}
:root[data-theme="dark"]{--bg:#0e1420;--panel:#161d2b;--panel-2:#1c2536;--line:#2a3446;--ink:#eef2f8;--ink-soft:#9aa7bd;--ink-faint:#64718a;--sky:#38a8e0;color-scheme:dark;}
:root[data-theme="light"]{--bg:#eef1f6;--panel:#fff;--panel-2:#f4f6fa;--line:#dde3ec;--ink:#131a26;--ink-soft:#54607a;--ink-faint:#8a95ac;--sky:#0d84c4;color-scheme:light;}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang HK","PingFang TC","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow:hidden}

.topbar{display:flex;align-items:center;gap:16px;padding:8px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:700;letter-spacing:.02em;font-size:15px}
.brand span{color:var(--ink-faint);font-weight:600}
.brand .ver{font-size:10px;color:var(--ink-faint);font-weight:600;opacity:.7}
.topbar .spacer{flex:1}
.clock{font-size:21px;font-weight:650;line-height:1.05}
.date{color:var(--ink-soft);font-size:12px;text-align:right}
.refresh{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.iconbtn{background:transparent;border:0;color:var(--ink-soft);cursor:pointer;padding:5px;display:flex;align-items:center;border-radius:8px}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover,.iconbtn:focus-visible{color:var(--ink);background:var(--panel-2);outline:none}
.nightdim{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60;transition:opacity 3s linear}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite}}

.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);padding:var(--gap);height:calc(100dvh - 43px)}
/* 防 burn-in：極慢極微移位 */
@keyframes burnin{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,1px)}50%{transform:translate(-1px,2px)}75%{transform:translate(-2px,-1px)}}
@media (prefers-reduced-motion:no-preference){.grid{animation:burnin 149s ease-in-out infinite}}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.col > iframe{border:0;width:100%;height:100%;display:block;background:#fff;flex:1}
.col-cap{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;padding:7px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;flex:none}
.col-cap b{color:var(--ink-soft);font-weight:700;text-transform:none;letter-spacing:0;font-size:12px}
.cap-dot{width:8px;height:8px;border-radius:2px;flex:none}
.cap-pick{margin-left:auto;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:0;text-transform:none}
.cap-pick:hover,.cap-pick:focus-visible{color:var(--ink);border-color:var(--ink-faint);outline:none}

/* ---- 天氣欄（深藍漸變，hktraffictime 風）---- */
.wx-col{background:linear-gradient(165deg,#1f4780 0%,#123056 52%,#0a1930 100%);border-color:#26406e}
.wx-col .col-cap{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.12)}
.wx-col .col-cap b{color:rgba(255,255,255,.9)}
.wx-col .cap-pick{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.wx-col .cap-pick:hover{color:#fff;border-color:#fff}
.wx-body{padding:14px 16px 14px;overflow-y:auto;flex:1;min-height:0;color:#fff;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.wx-loading{color:rgba(255,255,255,.6);font-size:13px;padding:24px 0;text-align:center}

/* 頂：天氣警告信號（官方圖標） */
.wx-warnrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-bottom:10px}
.wx-sigimg{width:46px;height:46px;object-fit:contain}
.wx-sigtx{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#141414;background:#ffc41f}
.wx-sigtx svg{width:15px;height:15px}
.wx-sigtx.crit{background:#ff4d4d;color:#fff}

/* 貼士（頂） */
.wx-tip{align-self:stretch;padding:10px 15px;border-radius:12px;background:rgba(255,255,255,.1);
  border-left:5px solid #ffc41f;font-size:clamp(19px,5.6vw,26px);font-weight:700;letter-spacing:.02em;line-height:1.35}

/* 大溫度（置中） */
.wx-bigtemp{width:100%;text-align:center;font-size:clamp(104px,29vw,158px);font-weight:200;
  line-height:.82;letter-spacing:-.03em;margin-top:8px}
.wx-bigtemp .deg{font-size:.42em;font-weight:300;opacity:.55;vertical-align:top;margin-left:.02em}
.wx-today{margin-top:1px;font-size:12.5px;color:rgba(255,255,255,.7);font-weight:500}
.wx-today b{font-weight:800}

/* 大天氣圖示 + 狀態（置中） */
.wx-status{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
.wx-status-ic{width:clamp(96px,26vw,124px);height:clamp(96px,26vw,124px);object-fit:contain;
  filter:brightness(0) invert(1)}
.wx-status-tx{font-size:clamp(20px,5.5vw,26px);font-weight:700}

/* 體感 / 濕度 / 紫外線 */
.wx-meta{align-self:stretch;margin-top:8px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.06);
  font-size:14px;color:rgba(255,255,255,.82);font-weight:500}

/* 7 日橫排預報（置底） */
.wx-fc{align-self:stretch;display:flex;gap:3px;margin-top:auto;padding-top:10px;overflow:hidden}
.fc-d{flex:1 0 0;min-width:36px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:10px;background:rgba(255,255,255,.05)}
.fc-day{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72)}
.fc-ic{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1)}
.fc-hi{font-size:14px;font-weight:700}
.fc-lo{font-size:12px;color:rgba(255,255,255,.55)}
.fc-psr{width:70%;height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:2px}
.fc-psr i{display:block;height:100%;background:#5cc8ff;border-radius:3px}

/* ---- 分區揀選 overlay ---- */
.picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:20}
.picker-overlay.hidden{display:none}
.picker-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(420px,86vw);max-height:76vh;display:flex;flex-direction:column;overflow:hidden}
.picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.picker-head button{background:transparent;border:0;color:var(--ink-soft);font-size:18px;cursor:pointer;line-height:1}
.picker-list{list-style:none;margin:0;padding:8px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.picker-list li{padding:11px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);cursor:pointer;font-size:14px;text-align:center}
.picker-list li:hover{border-color:var(--sky);color:var(--sky)}
.picker-list li.active{background:var(--sky);color:#fff;border-color:var(--sky);font-weight:700}

.hidden{display:none}

@media (max-width:820px){
  body{overflow:auto}
  .grid{grid-template-columns:1fr;height:auto}
  .col{height:80vh}
}