/* 騎士天氣 — Mobile-first、深色、戶外強光下可讀
   單手操作：主要按鈕高度 ≥ 48px，卡片可橫向捲動 */

:root{
  color-scheme: dark;
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2129; --line:#2a3038;
  --fg:#e9f0f7; --dim:#9aa4af;
  --ok:#3fb950; --warn:#e3a72c; --bad:#ff5c50; --crit:#ff3b30;
  --accent:#58a6ff;
  --r:14px;
  --tap:48px;
  --pad:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}
[hidden]{display:none !important}
a{color:var(--accent)}

.topbar{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px var(--pad);
  padding-top:calc(10px + env(safe-area-inset-top));
  background:#0d1117e8; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar h1{margin:0; font-size:19px; letter-spacing:.5px}
.icon-btn{
  min-width:var(--tap); min-height:var(--tap);
  background:var(--panel2); border:1px solid var(--line); color:var(--fg);
  border-radius:10px; font-size:19px; cursor:pointer;
}

main{display:flex; flex-direction:column; gap:12px; padding:12px var(--pad) 40px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad)}

h2.ptitle{margin:0 0 2px; font-size:17px}
h3.sub-title{margin:18px 0 6px; font-size:15px; color:var(--fg)}
p.phint{margin:2px 0 0; color:var(--dim); font-size:13.5px}
.cnt{color:var(--accent); font-weight:700}
.bad{color:var(--bad)}
.warn{color:var(--warn)}
.ok{color:var(--ok)}

/* ── 表單 ── */
.fld{display:block; margin-bottom:12px}
.fld.inline{margin:0; min-width:180px}
.fld>span{display:block; font-size:13.5px; color:var(--dim); margin-bottom:6px}
.fld small{color:#78828d; margin-left:6px}
.fld em{color:var(--accent); font-style:normal; font-weight:700}
input[type=text],input[type=url],input[type=password],input[type=datetime-local],
input:not([type]),select{
  width:100%; min-height:var(--tap);
  background:var(--panel2); border:1px solid var(--line); color:var(--fg);
  border-radius:10px; padding:10px 12px; font:inherit; font-size:16px;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
input[type=range]{width:100%; accent-color:var(--accent); min-height:32px}
.via-in{margin-bottom:8px}
.row{display:flex; gap:8px; align-items:center}
.row input{flex:1; min-width:0}
.grid3{display:grid; grid-template-columns:1fr; gap:0}
.chk{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dim); cursor:pointer;
  min-height:var(--tap)}
.chk input{width:22px; height:22px; accent-color:var(--accent)}

button{
  font:inherit; font-size:15px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); min-height:var(--tap); padding:10px 16px;
  background:var(--panel2); color:var(--fg);
}
button.primary{background:var(--accent); border-color:var(--accent); color:#04121f; font-weight:700}
button.big{font-size:16px; min-height:52px}
button.block{width:100%; margin-top:4px}
button.small{min-height:38px; padding:6px 12px; font-size:13.5px}
button.icon{min-width:var(--tap); padding:10px 12px}
button:active{transform:scale(.985)}
button:disabled{opacity:.5; cursor:default}
button.on{background:var(--bad); border-color:var(--bad); color:#fff}

.status{margin:10px 0 0; font-size:13.5px; color:var(--dim); min-height:1.3em}

/* ── 即時追蹤 ── */
.live{border-color:#2f4a6b}
.live-head{display:flex; flex-direction:column; gap:10px}
.live-opts{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px}
.alarm{
  background:linear-gradient(180deg,#5c1512,#3d0f0d);
  border:1px solid var(--bad); border-radius:12px; padding:14px; margin-bottom:12px;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #ff5c5040}50%{box-shadow:0 0 0 10px #ff5c5000}}
@media (prefers-reduced-motion:reduce){.alarm{animation:none}}
.alarm-t{font-size:20px; font-weight:800; color:#ffb4ae}
.alarm-b{font-size:15px; color:#ffd6d2; margin-top:2px}
.alarm-s{font-size:13.5px; color:#ffb4ae; margin-top:6px}
.offline-box{background:#3a2d0c; border:1px solid #8a6d15; border-radius:12px;
  padding:12px 14px; margin-bottom:12px; color:#e3b341; font-size:14.5px; line-height:1.6}
.gps-ok{background:#12331c; border:1px solid #2d6b3d; border-radius:12px;
  padding:12px 14px; margin-bottom:12px; color:#9ae6a8; font-size:15px}
.gps-rows{display:grid; grid-template-columns:1fr; gap:2px; font-size:13.5px}
.gps-rows div{display:flex; gap:10px}
.gps-rows dt{color:#78828d; min-width:76px; margin:0}
.gps-rows dd{margin:0; color:var(--fg)}
.scan{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px}
.scan-cell{border-radius:9px; padding:8px 2px; text-align:center; border:1px solid var(--line);
  background:var(--panel2)}
.scan-cell .d{display:block; font-size:11px; color:var(--dim)}
.scan-cell .v{display:block; font-size:19px; font-weight:800; line-height:1.2}
.scan-cell .n{display:block; font-size:10.5px; color:var(--dim)}
.scan-cell.l1{background:#123a24; border-color:#2d6b3d}
.scan-cell.l2{background:#4a3b0c; border-color:#8a6d15}
.scan-cell.l3{background:#5c1512; border-color:var(--bad)}

/* ── 範本 ── */
.tpl-box{margin-bottom:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2)}
.tpl-box summary{padding:12px 14px; cursor:pointer; font-size:14.5px; font-weight:600;
  min-height:var(--tap); display:flex; align-items:center}
.tpl-grid{display:grid; grid-template-columns:1fr; gap:8px; padding:0 10px 10px}
.tpl{display:block; text-align:left; padding:11px 13px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; width:100%}
.tpl.on{border-color:var(--accent); background:#12253c}
.tpl-n{display:block; font-size:15px; font-weight:700}
.tpl-r{display:inline-block; font-size:11.5px; color:#79c0ff; background:#12304a;
  padding:1px 8px; border-radius:99px; margin-top:3px}
.tpl-d{display:block; font-size:12.5px; color:var(--dim); margin-top:3px}

/* ── 地圖 ── */
.map-panel{padding:0; overflow:hidden}
#map{height:44vh; min-height:280px; background:#0b0f14}
.leaflet-container{font:inherit; background:#0b0f14}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel2); color:var(--fg)}
.leaflet-popup-content{margin:11px 14px; font-size:13.5px}
.leaflet-control-layers{background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:10px}
.leaflet-control-layers-toggle{filter:invert(.9)}
.leaflet-control-layers-expanded{padding:10px 14px; font-size:14px}
.leaflet-control-layers-separator{border-top-color:var(--line)}
.leaflet-bar a{background:var(--panel2); color:var(--fg); border-bottom-color:var(--line);
  width:34px; height:34px; line-height:34px}
.leaflet-bar a:hover{background:#2a3038; color:var(--fg)}
.cam-pin{font-size:17px; line-height:26px; text-align:center;
  background:#161b22dd; border:1.5px solid var(--accent); border-radius:7px}

/* ── 摘要 ── */
.sum-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.badge{font-size:26px; font-weight:800; padding:6px 16px; border-radius:11px; line-height:1.25;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent)}
.sum-meta{color:var(--dim); font-size:14px; flex:1; min-width:200px}
.sum-meta b{color:var(--fg); font-weight:700}
.meta-line{margin:10px 0 0; font-size:13px; color:var(--dim)}
.meta-line b{color:var(--fg)}
.warn-box{margin:10px 0 0; padding:10px 13px; border-radius:10px; font-size:14px;
  background:#4a1d1a; color:#ffb4ae; border-left:3px solid var(--bad)}
.alerts{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.alerts li{font-size:14px; padding:9px 12px; border-radius:9px; background:var(--panel2);
  border-left:3px solid var(--line)}
.alerts li.lv2{border-left-color:var(--warn)}
.alerts li.lv3{border-left-color:var(--bad)}
.alerts li.lv4{border-left-color:var(--crit)}

/* ── 時間軸（手機橫捲、桌機格狀）── */
.tl-panel{overflow:hidden}
.timeline{
  display:flex; gap:12px; margin-top:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:thin;
}
.tl-card{
  flex:0 0 82vw; max-width:310px; scroll-snap-align:center;
  background:var(--panel2); border:1px solid var(--line); border-left:5px solid var(--line);
  border-radius:12px; padding:13px 14px; cursor:pointer;
}
.tl-card.lv0{border-left-color:var(--ok)}
.tl-card.lv1{border-left-color:#7dbb4f}
.tl-card.lv2{border-left-color:var(--warn)}
.tl-card.lv3{border-left-color:var(--bad)}
.tl-card.lv4{border-left-color:var(--crit)}
.tl-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.tl-time{font-size:23px; font-weight:800; letter-spacing:.5px}
.tl-km{font-size:12px; color:var(--dim)}
.tl-place{font-size:13px; color:var(--dim); margin:2px 0 8px; min-height:1.3em}
.tl-place .elev{color:#79c0ff}
.tl-main{display:flex; align-items:center; gap:9px; margin-bottom:8px}
.tl-icon{font-size:30px; line-height:1}
.tl-desc{font-size:15px}
.tl-temp{margin-left:auto; font-size:24px; font-weight:700}
.tl-surface{font-size:14px; font-weight:600; padding:7px 10px; border-radius:9px;
  background:#21262d; margin-bottom:9px}
.tl-surface.ok{color:#9ae6a8}
.tl-surface.warn{color:#e3b341; background:#3a2d0c}
.tl-surface.bad{color:#ff9b93; background:#4a1d1a}
.tl-rows{margin:0; display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--dim)}
.tl-rows>div{display:flex; gap:8px}
.tl-rows dt{color:#78828d; min-width:56px; flex:0 0 auto; margin:0}
.tl-rows dd{margin:0}
.tl-rows .warn dd{color:var(--warn)}
.tl-rows .bad dd{color:var(--bad)}
.tl-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.tag{font-size:11.5px; padding:3px 9px; border-radius:99px; background:#21262d; color:var(--dim)}
.tag.lv2{background:#3a2d0c; color:#e3b341}
.tag.lv3{background:#4a1d1a; color:#ff9b93}
.tag.lv4{background:#6b1410; color:#ffb4ae}

/* ── 管制 ── */
.ctrl-list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.ctrl{background:var(--panel2); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:11px; padding:11px 13px}
.ctrl.lv1{border-left-color:var(--accent)}
.ctrl.lv2{border-left-color:var(--warn)}
.ctrl.lv3{border-left-color:var(--bad)}
.ctrl-head{font-size:15px; font-weight:600}
.ctrl-status{font-size:13.5px; color:var(--dim); margin-top:3px}
.ctrl-win{font-size:13px; color:#79c0ff; margin-top:5px}
.ctrl-eta{margin:8px 0 0; font-size:13.5px; padding:8px 11px; border-radius:9px; background:#21262d}
.ctrl-eta.ok{color:#9ae6a8}
.ctrl-eta.bad{color:#ffb4ae; background:#4a1d1a}
.ctrl-km{font-size:12px; color:#78828d; margin-top:5px}

/* ── 裝備 ── */
.gear-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.gear-list li{background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:10px 13px}
.gear-list li.must{border-color:#8a3a33; background:#2a1614}
.g-txt{display:block; font-size:15px; font-weight:600}
.gear-list li.must .g-txt{color:#ffb4ae}
.g-why{display:block; font-size:12.5px; color:var(--dim); margin-top:2px}

/* ── 分享 ── */
.share-row{display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; margin-bottom:10px}

/* ── 監視器 ── */
.cctv-head{display:flex; flex-direction:column; gap:12px; margin-bottom:12px}
.cam-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.cam{display:block; padding:0; text-align:left; background:var(--panel2);
  border:1px solid var(--line); border-radius:11px; overflow:hidden; min-height:0}
.cam-thumb{position:relative; display:block; aspect-ratio:4/3; background:#0b0f14}
.cam-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cam-thumb .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#3d444d; font-size:26px}
.cam-seq{position:absolute; top:6px; left:6px; background:#0d1117cc; border-radius:99px;
  font-size:11px; padding:1px 8px}
.cam-eta{position:absolute; top:6px; right:6px; background:var(--accent); color:#04121f;
  font-size:12px; font-weight:800; padding:1px 8px; border-radius:99px}
.cam-body{display:block; padding:9px 11px 11px}
.cam-name{display:block; font-size:13px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cam-sub{display:block; font-size:11.5px; color:var(--dim); margin-top:3px}
.cam-src{display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:99px;
  background:#21262d; color:var(--dim)}
.cam-src.road{background:#12304a; color:#79c0ff}

/* ── 彈窗 ── */
.modal{position:fixed; inset:0; background:#000000d8; z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:14px; overflow-y:auto}
.modal-inner{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  max-width:760px; width:100%; padding:16px; position:relative; max-height:92vh; overflow-y:auto}
.modal-close{position:absolute; top:10px; right:12px; min-height:40px; padding:6px 14px; z-index:1}
.modal-title{font-size:17px; font-weight:700; margin:0 52px 10px 2px}
.modal-meta{color:var(--dim); font-size:12.5px; margin-top:9px}
.lb-stage{background:#000; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center}
.lb-stage img{width:100%; height:100%; object-fit:contain}
.lb-stage .msg{color:var(--dim); font-size:14px}

/* ── 騎乘滿版儀表板 ──
   手機架在車把上、戶外強光、車體震動的條件下要讀得到，
   所以字級遠大於一般網頁，並用整面底色傳達等級。 */
body.dash-on{overflow:hidden}
#dash{
  position:fixed; inset:0; z-index:9500;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dash,#30363d) 34%, #000) 0%, #000 78%);
  display:flex; flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
#dash-close{
  align-self:flex-end; background:#ffffff1a; border:1px solid #ffffff3a; color:#fff;
  font-size:15px; min-height:44px; padding:8px 16px; border-radius:10px;
}
#dash-body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px}
.d-wait{text-align:center; font-size:22px; color:#c9d4de; line-height:1.6}
.d-alarm{
  background:var(--dash,#30363d); color:#0b0f14; font-weight:900;
  font-size:clamp(20px,6.4vw,34px); line-height:1.25;
  padding:16px 18px; border-radius:14px; text-align:center;
}
.d-alarm.off{background:#30363d; color:#e9f0f7}
.d-count{text-align:center}
.d-label{font-size:clamp(15px,4.2vw,20px); color:#9aa4af; letter-spacing:1px}
.d-big{
  font-size:clamp(72px,26vw,150px); font-weight:900; line-height:.95;
  color:var(--dash,#e9f0f7); font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px color-mix(in srgb, var(--dash,#fff) 40%, transparent);
}
.d-big .u{font-size:.3em; margin-left:.12em; font-weight:700}
.d-big.d-ok{font-size:clamp(52px,18vw,110px)}
.d-sub{font-size:clamp(15px,4.4vw,21px); color:#c9d4de; margin-top:6px}
.d-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.d-cell{background:#ffffff12; border:1px solid #ffffff20; border-radius:14px;
  padding:12px 10px; text-align:center}
.d-k{font-size:clamp(12px,3.4vw,15px); color:#9aa4af}
.d-v{font-size:clamp(34px,11vw,54px); font-weight:900; line-height:1.1;
  font-variant-numeric:tabular-nums}
.d-u{font-size:clamp(11px,3.2vw,14px); color:#9aa4af}
.scan-mode{margin:8px 0 0; font-size:12.5px; color:#79c0ff; line-height:1.5}
.d-stale{text-align:center; font-size:14px; color:#e3a72c}

footer{padding:0 var(--pad) 30px; color:#78828d; font-size:12px; text-align:center; line-height:1.9}
footer a{color:#78828d}

/* ── 平板以上 ── */
@media(min-width:700px){
  main{max-width:1180px; margin:0 auto; padding:16px 20px 40px}
  .topbar{padding-inline:20px}
  .topbar h1{font-size:22px}
  .grid3{grid-template-columns:1fr 1fr 1fr; gap:12px}
  .live-head{flex-direction:row; align-items:center; justify-content:space-between}
  .live-head button{width:auto}
  #map{height:440px}
  .tpl-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .timeline{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr));
    overflow:visible; margin-inline:0; padding-inline:0}
  .tl-card{flex:none; max-width:none}
  .share-row{grid-template-columns:1fr 1fr}
  .cctv-head{flex-direction:row; justify-content:space-between; align-items:flex-end}
  .cam-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  button.block{width:auto; min-width:220px}
}