:root{
  --bg:#0d1117; --bg2:#151b23; --bg3:#1c242e;
  --line:#2a3441; --line2:#3a4756;
  --fg:#e6edf3; --fg2:#9fb0c3; --fg3:#6b7c90;
  --accent:#4aa8ff; --accent2:#7ee0c0;
  --warn:#ffb454; --danger:#ff6b6b; --ok:#5ac97a;
  --r:10px;
  --mono:"Cascadia Mono",Consolas,"Noto Sans Mono CJK TC",monospace;
}
*{box-sizing:border-box}
/* 工地現場常在強光下、離螢幕遠，而且看的人多半有老花，預設字級開得很大；
   所有字級都是 rem，改這一行就全站跟著縮放。 */
html{font-size:27px}
html[data-fs="s"]{font-size:22px}
html[data-fs="l"]{font-size:32px}
html[data-fs="xl"]{font-size:38px}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Noto Sans TC","Microsoft JhengHei",-apple-system,"Segoe UI",sans-serif;
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.wrap{max-width:min(2200px,97vw);margin:0 auto;padding:0 14px 64px}

/* ---------- header ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(13,17,23,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:min(2200px,97vw);margin:0 auto;padding:10px 14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.0625rem;letter-spacing:.5px;white-space:nowrap}
.brand small{display:block;font-weight:400;font-size:0.6875rem;color:var(--fg3);letter-spacing:0}
.selectors{display:flex;gap:8px;flex-wrap:wrap;flex:1}
select,input,button{
  font-family:inherit;font-size:0.875rem;color:var(--fg);
  background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;
}
select{min-width:110px;cursor:pointer}
button{cursor:pointer;transition:.15s}
button:hover{border-color:var(--accent);color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#06121f;font-weight:600}
button.primary:hover{filter:brightness(1.1);color:#06121f}
.ghost{background:transparent}

/* ---------- tabs ---------- */
nav.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px}
nav.tabs button{
  background:none;border:none;border-bottom:2px solid transparent;border-radius:0;
  padding:12px 14px;color:var(--fg2);white-space:nowrap;font-size:0.9062rem;
}
nav.tabs button:hover{color:var(--fg)}
nav.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
section.panel{display:none;padding-top:20px}
section.panel.on{display:block}

/* ---------- cards ---------- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.card h2{margin:0 0 4px;font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .sub{font-size:0.75rem;font-weight:400;color:var(--fg3)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stat .k{font-size:0.75rem;color:var(--fg3)}
.stat .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.stat .v small{font-size:0.8125rem;font-weight:400;color:var(--fg2)}

/* ---------- 24h rain chart ---------- */
.rainchart{display:flex;gap:3px;align-items:flex-end;height:190px;padding:8px 0 0;overflow-x:auto}
.rb{flex:1;min-width:34px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.rb .bar{width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent),#1d5f9e);min-height:3px;position:relative;transition:.3s}
.rb .pct{font-size:0.75rem;font-variant-numeric:tabular-nums;color:var(--fg2)}
.rb .hr{font-size:0.6875rem;color:var(--fg3);white-space:nowrap}
.rb.hi .bar{background:linear-gradient(180deg,var(--warn),#a35f0e)}
.rb.vhi .bar{background:linear-gradient(180deg,var(--danger),#8e2b2b)}

/* ---------- imagery ---------- */
.imgbox{position:relative;background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center}
.imgbox img{max-width:100%;max-height:78vh;object-fit:contain;display:block}
.imgbox .stamp{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.72);padding:4px 9px;border-radius:6px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.5px}
.imgbox .badge{position:absolute;right:10px;top:10px;background:rgba(255,180,84,.16);border:1px solid var(--warn);color:var(--warn);padding:3px 9px;border-radius:6px;font-size:0.7188rem}
.imgbox .empty{color:var(--fg3);font-size:0.875rem;padding:40px;text-align:center;line-height:1.8}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.controls input[type=range]{flex:1;min-width:160px;accent-color:var(--accent);background:none;border:none;padding:0}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{border:none;border-radius:0;background:var(--bg3);padding:7px 12px;font-size:0.8125rem}
.seg button.on{background:var(--accent);color:#06121f;font-weight:600}

/* ---------- rain level table ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:0.875rem}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--bg3);color:var(--fg2);font-weight:600;white-space:nowrap}
td.lv{font-weight:700;white-space:nowrap}
.chip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:0.75rem;border:1px solid;white-space:nowrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* ---------- alerts ---------- */
.alert{border-left:4px solid var(--warn);background:rgba(255,180,84,.08);padding:11px 14px;border-radius:6px;margin-bottom:10px;font-size:0.875rem}
.alert.danger{border-color:var(--danger);background:rgba(255,107,107,.09)}
.alert.ok{border-color:var(--ok);background:rgba(90,201,122,.08)}
.note{font-size:0.7812rem;color:var(--fg3);line-height:1.75}
.note strong{color:var(--fg2)}
.rowline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
label.f{font-size:0.8125rem;color:var(--fg2);display:flex;gap:7px;align-items:center}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
footer{border-top:1px solid var(--line);margin-top:32px;padding-top:16px}
.hide{display:none}

/* ---------- 即時影像 ---------- */
.camgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cam{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.15s}
.cam:hover{border-color:var(--accent)}
.cam .thumb{position:relative;background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.cam .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cam .thumb .ph{color:var(--fg3);font-size:0.75rem}
.cam .meta{padding:8px 10px}
.cam .nm{font-size:0.8125rem;line-height:1.45;word-break:break-all}
.cam .sub2{font-size:0.7188rem;color:var(--fg3);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.srcbadge{padding:0 6px;border-radius:4px;font-size:0.6562rem;border:1px solid}
.s-wra{color:#7ee0c0;border-color:#7ee0c0}
.s-thb{color:#4aa8ff;border-color:#4aa8ff}
.s-nfb{color:#ffb454;border-color:#ffb454}
#camModal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:20px}
#camModal.on{display:flex}
#camModal .inner{max-width:940px;width:100%}
#camModal .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
#camModal .frame{background:#000;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;position:relative;min-height:200px;display:flex;align-items:center;justify-content:center}
#camModal .frame img{max-width:100%;max-height:70vh;display:block}

/* ---------- 雷達圖上的地點標註 ---------- */
/* 回波圖是正方形，先把容器尺寸固定住，圖還沒載入時標記也不會跑位 */
.radarwrap{position:relative;line-height:0;width:min(100%,78vh);aspect-ratio:1/1}
.radarwrap img{width:100%;height:100%;display:block}
#radarPin{position:absolute;inset:0;pointer-events:none}
.geopin{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
/* 回波本身就有紅色，所以紅框外面包一層白邊再包一層黑邊，
   不管底下是強回波、綠色還是白底都分得出來 */
.gp-box{
  width:17px;height:17px;border:1.5px solid #ff2d20;border-radius:2px;
  box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(0,0,0,.55),0 0 10px rgba(255,45,32,.9);
  animation:gppulse 1.8s ease-in-out infinite;
}
/* 從紅框往四方延伸的十字線，回波很雜時才找得到框在哪 */
.gp-box::before,.gp-box::after{content:"";position:absolute;background:#ff2d20;box-shadow:0 0 0 .7px #fff,0 0 0 1.3px rgba(0,0,0,.5)}
.gp-box::before{left:50%;top:-12px;width:1.2px;height:calc(100% + 24px);margin-left:-.6px}
.gp-box::after{top:50%;left:-12px;height:1.2px;width:calc(100% + 24px);margin-top:-.6px}
@keyframes gppulse{0%,100%{opacity:1}50%{opacity:.55}}
.gp-label{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  white-space:nowrap;font-size:0.62rem;line-height:1.6;color:#fff;font-weight:600;
  background:rgba(255,45,32,.92);padding:0 8px;border-radius:4px;
  box-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ---------- 一週預報 ---------- */
.weekgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.wday{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:12px 10px;text-align:center}
.wday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wd-date{font-size:0.9375rem;font-weight:700}
.wd-date span{display:block;font-size:0.7188rem;font-weight:400;color:var(--fg3)}
.wd-wx{font-size:0.7812rem;color:var(--fg2);margin:8px 0;min-height:2.6em;line-height:1.3;display:flex;align-items:center;justify-content:center}
.wd-temp{font-variant-numeric:tabular-nums;margin-bottom:8px}
.wd-temp b{font-size:1.25rem}
.wd-temp span{font-size:0.875rem;color:var(--fg3);margin-left:5px}
.wd-bar{height:5px;background:var(--line);border-radius:99px;overflow:hidden}
.wd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--danger));border-radius:99px}
.wd-poptxt{font-size:0.7188rem;color:var(--fg2);margin-top:5px;font-variant-numeric:tabular-nums}
.wd-uv{font-size:0.6875rem;color:var(--fg3);margin-top:4px}
.wd-tag{margin-top:9px;font-size:0.7188rem;border:1px solid;border-radius:99px;padding:1px 6px;display:inline-block}
td.nowrap,th.nowrap{white-space:nowrap}
td.wide{min-width:240px}
.wd-tag.est{border-style:dashed;opacity:.85}

/* 字級切換 */
.fsseg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.fsseg button{border:none;border-radius:0;background:var(--bg3);padding:6px 10px;line-height:1}
.fsseg button.on{background:var(--accent);color:#06121f;font-weight:700}
.fsseg button:nth-child(1){font-size:.8rem}
.fsseg button:nth-child(2){font-size:.95rem}
.fsseg button:nth-child(3){font-size:1.1rem}
.fsseg button:nth-child(4){font-size:1.3rem}

/* ---------- AI 施工建議 ---------- */
.aibar{margin-top:16px}
.ai-row{display:flex;gap:8px;flex-wrap:wrap}
.ai-row input{flex:1;min-width:240px;font-size:1.02rem;padding:10px 12px}
.ai-row button{font-size:1.02rem;padding:10px 18px;white-space:nowrap}
.ai-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
button.aiq{font-size:.86rem;padding:5px 11px;border-radius:99px;color:var(--fg2);background:var(--bg3)}
button.aiq:hover{border-color:var(--accent);color:var(--accent)}
#aiAnswer{margin-top:14px}
.ai-loading{color:var(--fg2);font-size:.95rem;padding:10px 0}
.ai-ans{background:var(--bg3);border:1px solid var(--line2);border-left:4px solid var(--accent2);
  border-radius:var(--r);padding:14px 16px;font-size:1.03rem;line-height:1.85}
.ai-ans p{margin:0 0 .7em}
.ai-ans p:last-child{margin-bottom:0}
.ai-foot{font-size:.76rem;color:var(--fg3);margin-top:7px}
.ai-err{background:rgba(255,107,107,.09);border-left:4px solid var(--danger);
  border-radius:6px;padding:11px 14px;font-size:.95rem;line-height:1.8}

/* ---------- 複製資料 ---------- */
#aiCopy{font-size:1.02rem;padding:10px 16px;white-space:nowrap}
.ai-copied{background:var(--bg3);border:1px solid var(--line2);border-left:4px solid var(--ok);
  border-radius:var(--r);padding:14px 16px;font-size:1rem;line-height:1.8}
.ai-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ai-links a{display:inline-block;padding:6px 14px;border:1px solid var(--line2);
  border-radius:99px;font-size:.9rem;text-decoration:none;background:var(--bg3)}
.ai-links a:hover{border-color:var(--accent)}
.ai-raw{width:100%;min-height:280px;background:var(--bg3);color:var(--fg);
  border:1px solid var(--line2);border-radius:var(--r);padding:12px;
  font-family:var(--mono);font-size:.82rem;line-height:1.7}

/* ---------- 複製資料說明 ---------- */
.steps{display:flex;gap:10px;flex-wrap:wrap}
.step{flex:1;min-width:190px;background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;font-size:.95rem;line-height:1.6}
.step b{display:inline-flex;width:1.5em;height:1.5em;align-items:center;justify-content:center;
  background:var(--accent);color:#06121f;border-radius:50%;font-size:.85rem;margin-right:8px}
#btnCopyAll{font-size:1.05rem;padding:11px 20px}

/* ---------- 颱風動態 ---------- */
.calm{text-align:center;padding:34px 16px}
.calm-icon{font-size:2.6rem;line-height:1}
.calm-t{font-size:1.15rem;margin:10px 0 8px}
.tycard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.ty-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ty-badge{color:#0d1117;font-weight:700;padding:2px 11px;border-radius:99px;font-size:.9rem}
.ty-name{font-size:1.3rem}
.ty-dist{background:var(--bg3);border:1px solid var(--line2);border-left:4px solid var(--ok);
  border-radius:var(--r);padding:12px 14px;margin-top:12px}
.ty-dist.d15{border-left-color:var(--warn)}
.ty-dist.d25{border-left-color:var(--danger)}
.ty-dist .k{font-size:.8rem;color:var(--fg3)}
.ty-dist .v{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.ty-dist .v small{font-size:.95rem;font-weight:400;color:var(--fg2)}
.tymap{background:#0a1018;border:1px solid var(--line);border-radius:var(--r);margin-top:14px;padding:6px}
.tymap svg{width:100%;height:auto;display:block}
.tymap .grid{stroke:#2a3441;stroke-width:.12}
.tymap .glab{fill:#5b6b7d}
.tymap .twland{fill:rgba(126,224,192,.18);stroke:#7ee0c0;stroke-width:.22}
.tymap .past{fill:none;stroke:#9fb0c3}
.tymap .pastdot{fill:#9fb0c3}
.tymap .now{fill:#ff2d20;stroke:#fff}
.tymap .fc{fill:none;stroke:#ffb454}
.tymap .fcdot{fill:#ffb454}
.tymap .fclab{fill:#ffb454}
.tymap .r15{fill:rgba(255,180,84,.10);stroke:#ffb454;stroke-width:.25;stroke-dasharray:.8 .6}
.tymap .r25{fill:rgba(255,45,32,.14);stroke:#ff2d20;stroke-width:.25}
.tymap .site{fill:#4aa8ff;stroke:#fff}
.tymap .sitelab{fill:#cfe6ff;font-weight:700}
.ty-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:.78rem;color:var(--fg3)}
.ty-legend i{display:inline-block;width:14px;height:3px;margin-right:5px;vertical-align:2px;border-radius:2px}
.lg-past{background:#9fb0c3}
.lg-fc{background:#ffb454}
.lg-r15{background:rgba(255,180,84,.5);border:1px solid #ffb454}
.lg-site{background:#4aa8ff;width:8px!important;height:8px!important;border-radius:50%!important}
.lg-r15f{background:rgba(255,180,84,.14);border:1px dashed #ffb454}
.lg-r25{background:rgba(255,45,32,.3);border:1px solid #ff2d20}
.lg-tw{background:rgba(126,224,192,.3);border:1px solid #7ee0c0}
.wsec{margin-top:10px}
.wsec b{color:var(--accent2)}

/* ---------- 災害快訊 ---------- */
.hzitem{border-top:1px solid var(--line);padding:13px 0}
.hzitem:first-of-type{border-top:none}
.hz-t{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.hz-t b{font-size:1.05rem}
.note.pre{white-space:normal;line-height:1.85}
.hzitem.eq{display:flex;gap:13px;align-items:flex-start}
.eq-mag{flex:0 0 auto;width:58px;height:58px;border-radius:10px;color:#0d1117;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.eq-mag b{font-size:1.35rem}
.eq-mag span{font-size:.62rem}
.eq-body{flex:1;min-width:0}
.eq-t{margin-bottom:4px;font-variant-numeric:tabular-nums}
.ichip{color:#0d1117;padding:1px 8px;border-radius:99px;font-size:.78rem;font-weight:700;white-space:nowrap}
.eq-img{flex:0 0 auto;width:88px;border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.eq-img img{width:100%;display:block}
.hzlinks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.hzlinks a{display:flex;gap:11px;align-items:center;background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--fg);transition:.15s}
.hzlinks a:hover{border-color:var(--accent)}
.hl-i{font-size:1.5rem;line-height:1}
.hl-t b{display:block;font-size:.97rem}
.hl-t small{color:var(--fg3);font-size:.78rem}

.tymap .r15f{fill:rgba(255,180,84,.055);stroke:rgba(255,180,84,.45);stroke-width:.18;stroke-dasharray:.6 .5}

/* ---------- 定量降水預報 ---------- */
.qpfwrap{position:relative;display:inline-block;line-height:0;max-width:100%}
.qpfwrap img{max-width:100%;max-height:80vh;display:block}
#qpfPin{position:absolute;inset:0;pointer-events:none}
.qpin{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.qpin-dot{width:11px;height:11px;border-radius:50%;background:#ff2d20;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.5),0 0 9px rgba(255,45,32,.9);
  animation:gppulse 1.8s ease-in-out infinite}
.qpin-lab{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);
  white-space:nowrap;font-size:.62rem;font-weight:700;color:#fff;background:rgba(255,45,32,.92);
  padding:0 6px;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.6);line-height:1.6}
#qpfHours{gap:6px}
#qpfHours button{font-size:.85rem;padding:6px 11px}
#qpfHours button.on{background:var(--accent);border-color:var(--accent);color:#06121f;font-weight:700}

/* ---------- 健康檢查 ---------- */
#healthBox table{min-width:640px}
#healthBox tr.hok td:first-child{color:var(--ok);font-weight:700;text-align:center}
#healthBox tr.hbad td:first-child{color:var(--danger);font-weight:700;text-align:center}
#healthBox tr.hbad td{background:rgba(255,107,107,.07)}

/* ---------- 雨天工期紀錄月曆 ---------- */
.calwrap{margin-top:12px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-head div{text-align:center;font-size:1rem;color:var(--fg3);padding:3px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-c{min-height:5.2em;border-radius:7px;border:1px solid var(--line);background:var(--bg3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:default}
.cal-c.empty{border:none;background:none}
.cal-c.none{opacity:.4}
.cal-c.dry{border-color:#2f7f5f}
.cal-c.rain{background:rgba(255,45,32,.16);border-color:#ff5252}
.cal-c.today{box-shadow:0 0 0 2px var(--accent) inset}
.cal-d{font-size:1.15rem;font-weight:700;line-height:1.1}
.cal-mm{font-size:.95rem;color:var(--fg2);font-variant-numeric:tabular-nums;line-height:1}
.cal-c.rain .cal-mm{color:#ffb3b3;font-weight:700}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.92rem;color:var(--fg3);align-items:center}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px;border:1px solid}
.lc-rain{background:rgba(255,45,32,.16);border-color:#ff5252}
.lc-dry{background:var(--bg3);border-color:#2f7f5f}
.lc-none{background:var(--bg3);border-color:var(--line);opacity:.4}

.rdstation{background:var(--bg3);border:1px solid var(--line2);border-left:4px solid var(--accent2);
  border-radius:var(--r);padding:12px 14px;margin-bottom:14px;font-size:1rem;line-height:1.75}

/* 工地設定：併在雨天工期紀錄卡片最上方，與結果用底線分隔 */
.rdset{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.rdset .rowline{margin:6px 0}
.cal-lv{font-size:.82rem;line-height:1.15;font-weight:700;margin-top:2px}

/* 品牌：安全帽 + 站名 */
.brand{display:flex;align-items:center;gap:10px}
.brand .helmet{width:2.1em;height:auto;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* =========================================================================
 * 手機版
 * 根字級在電腦上是 27px，那是給遠距看板用的；同樣尺寸放到手機上會爆版，
 * 所以手機版另外一組字級，四個檔位都對應調整。
 * ========================================================================= */
html[data-view="mobile"]{font-size:19px}
html[data-view="mobile"][data-fs="s"]{font-size:16px}
html[data-view="mobile"][data-fs="l"]{font-size:23px}
html[data-view="mobile"][data-fs="xl"]{font-size:27px}

[data-view="mobile"] .wrap{max-width:760px;padding:0 10px 48px}
[data-view="mobile"] .top-in{max-width:760px;padding:8px 10px;gap:8px}

/* 標題列在手機上佔滿一行，選單自己一行並平分寬度 */
[data-view="mobile"] .brand{width:100%;gap:8px}
[data-view="mobile"] .brand small{display:none}
[data-view="mobile"] .brand .helmet{width:1.7em}
/* 手機上把控制項改成網格：三個地區選單擠在同一行會被壓成一個字寬，
   實機看根本點不到。改成縣市／鄉鎮各半行、里獨佔一行。 */
[data-view="mobile"] .selectors{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
[data-view="mobile"] .selectors select{width:100%;min-width:0;padding:10px 8px}
[data-view="mobile"] #selVillage{grid-column:1 / -1}
[data-view="mobile"] #btnRefresh,[data-view="mobile"] #btnSettings{width:100%;padding:10px 8px}
[data-view="mobile"] .viewseg,[data-view="mobile"] .fsseg{grid-column:1 / -1;display:flex}
[data-view="mobile"] .viewseg button,[data-view="mobile"] .fsseg button{flex:1;padding:9px 6px}
[data-view="mobile"] .viewseg button{font-size:.9rem}

/* 特報日期時間不要在中間斷行 */
[data-view="mobile"] .alert b + *,[data-view="mobile"] .alert{overflow-wrap:break-word}
[data-view="mobile"] #ovWarn .alert{line-height:1.9}

[data-view="mobile"] .card{padding:12px}
[data-view="mobile"] nav.tabs button{padding:10px 11px}
[data-view="mobile"] .grid.g4{grid-template-columns:repeat(2,1fr)}
[data-view="mobile"] .grid.g2{grid-template-columns:1fr}
[data-view="mobile"] .camgrid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
[data-view="mobile"] .weekgrid{grid-template-columns:repeat(auto-fit,minmax(102px,1fr))}
[data-view="mobile"] .hzlinks{grid-template-columns:1fr}
[data-view="mobile"] .steps{flex-direction:column}
[data-view="mobile"] .ai-row input{min-width:0}

/* 月曆在窄螢幕要縮，否則七欄擠不下 */
[data-view="mobile"] .cal-c{min-height:4.1em}
[data-view="mobile"] .cal-grid{gap:3px}
[data-view="mobile"] .cal-d{font-size:.95rem}
[data-view="mobile"] .cal-mm{font-size:.72rem}
[data-view="mobile"] .cal-lv{font-size:.62rem}
[data-view="mobile"] .cal-head div{font-size:.8rem}

/* 圖片類的高度限制放寬，手機是直的，讓圖佔滿寬度就好 */
[data-view="mobile"] .imgbox img{max-height:none}
[data-view="mobile"] .radarwrap{width:100%}
[data-view="mobile"] .qpfwrap img{max-height:none}

/* 版型切換鈕 */
.viewseg button{padding:6px 10px;font-size:.82rem;white-space:nowrap}
.viewseg button.on{background:var(--accent);color:#06121f;font-weight:700}
.nowrap{white-space:nowrap}

/* 手機版：表頭不釘住。
   標題＋三個選單＋按鈕＋兩組切換鈕在手機上有五排，釘在頂端等於永遠吃掉半個
   螢幕，下面的內容就沒空間了。改成往下捲時整個帶走。
   反過來把分頁列釘住 —— 捲到一半想換分頁時，那才是真正需要隨時點得到的。 */
[data-view="mobile"] header.top{position:static}
[data-view="mobile"] nav.tabs{
  position:sticky;top:0;z-index:40;
  background:rgba(13,17,23,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;
}