/* ══════════════════════════════════════════════════════════════════
   CM LAB v2 後台殼樣式

   視覺方向來自使用者提供的深色參考圖:黑灰底、螢光綠作狀態與框線、
   暖黃作主動作與重點、終端／實驗室語彙、模組卡片與手機底部導覽。
   ⚠️ 參考圖只是方向,不是資料。圖上的 12／83%／3 cups／2 new／72%
      在這裡一個都沒有 —— 首頁只顯示能從 lab-catalog.json 算出來的數字。
   ⚠️ 圖示一律用程式可重現的簡單圖形(inline SVG／CSS),
      不從參考圖裁角色或圖示(簡報 §五 禁止)。
   ⚠️ 底部導覽不得壓縮全螢幕原型的測試 viewport —— 它只存在於後台殼這一頁,
      測試是 top-level 另開,殼層不跟著進去。
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#12100D;          /* 近黑的暖灰底 */
  --panel:#1A1713;
  --panel-2:#211D18;
  --line:#33302A;
  --ink:#E8E2D4;
  --muted:#9A9384;
  --dim:#6E6A60;
  --green:#7BE495;       /* 螢光綠:狀態與框線 */
  --green-dim:#3E6B4B;
  --amber:#E8C87A;       /* 暖黃:主動作與重點 */
  --red:#E08A6F;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  --nav-h:60px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:14px/1.7 var(--sans);
  /* ⚠️ 底部導覽是 fixed,內容要讓開它 + 安全區,否則最後一張卡點不到。 */
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;                 /* 375／393 不得橫向溢出(驗收 1) */
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* 所有可觸控入口至少 44×44(驗收 1)。 */
.hit{min-width:44px;min-height:44px}

.wrap{max-width:560px;margin:0 auto;padding:0 16px}   /* 16px 邊距:375 寬也不貼邊 */

/* ── 頂列 ───────────────────────────────────────────────────── */
.top{
  display:flex;align-items:flex-start;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 10px;
}
.mark{
  flex:0 0 auto;width:74px;height:60px;border:1.5px solid var(--ink);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:700 17px/1 var(--mono);letter-spacing:.06em;
}
.mark u{text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-top:3px}
.top .who{flex:1 1 auto;min-width:0;font:600 11px/1.45 var(--mono);letter-spacing:.14em;color:var(--muted)}
.top .who em{display:block;font-style:normal;color:var(--amber);letter-spacing:.06em;margin-top:6px;font-size:10.5px}
.netbox{flex:0 0 auto;text-align:right;font:600 11px/1.3 var(--mono);letter-spacing:.12em}
.netbox .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.netbox small{display:block;color:var(--dim);font-size:10px;letter-spacing:.06em;font-weight:400;margin-top:2px}
.net-online{color:var(--green)} .net-online .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.net-offline{color:var(--amber)} .net-offline .dot{background:var(--amber)}
.net-probing{color:var(--dim)} .net-probing .dot{background:var(--dim)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;border:1px solid var(--green-dim);border-radius:14px;
  background:linear-gradient(160deg,#1C2019 0%,#16130F 60%);
  padding:16px;margin:4px 0 14px;overflow:hidden;
}
.hero .cue{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--green)}
.hero h1{margin:8px 0 2px;font:800 34px/1 var(--mono);letter-spacing:.02em;color:var(--ink)}
.hero .tag{margin:0 0 10px;font:400 14px/1.4 var(--mono);color:var(--ink);opacity:.9}
.hero .strip{font:600 10.5px/1.6 var(--mono);letter-spacing:.14em;color:var(--muted);
  border-top:1px solid var(--line);padding-top:9px}
.hero .strip b{color:var(--green);font-weight:600}
.hero .notcm{margin:9px 0 0;font:400 11.5px/1.6 var(--sans);color:var(--amber)}
/* 右側的燒杯:純 SVG,程式可重現;不是從參考圖裁出來的角色。 */
.hero .beaker{position:absolute;right:12px;top:14px;width:62px;height:76px;opacity:.9;pointer-events:none}

/* ── 區塊標題 ───────────────────────────────────────────────── */
.sect{display:flex;align-items:baseline;gap:8px;margin:18px 0 9px}
.sect h2{margin:0;font:700 12px/1.3 var(--mono);letter-spacing:.14em;color:var(--green)}
.sect .hint{margin-left:auto;font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;color:var(--dim)}

/* ── 卡片(模組／測試／報告共用)─────────────────────────────── */
.card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:12px;margin:0 0 9px;min-height:64px;
}
.card.link:active{background:var(--panel-2)}
.card .ico{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--amber);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--amber)}
.card .body{flex:1 1 auto;min-width:0}
.card .body h3{margin:0;font:600 16px/1.3 var(--mono);letter-spacing:.01em}
.card .body p{margin:2px 0 0;font:400 12px/1.5 var(--mono);color:var(--muted);
  /* 一行就是一行:tagline 換行會把卡片撐高、和參考圖的節奏對不上。
     ⚠️ 要 nowrap 才有 ellipsis —— 只寫 text-overflow 是無效的。 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .chev{flex:0 0 auto;color:var(--dim);font-size:17px;padding-left:2px}

/* 狀態藥丸。⚠️ 顏色只反映登錄資料算得出來的狀態,不替下一層冒充。 */
.pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:5px 9px;font:600 10px/1.2 var(--mono);letter-spacing:.1em;white-space:nowrap;
  border:1px solid currentColor}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.pill.ok{color:var(--green)} .pill.warn{color:var(--amber)} .pill.off{color:var(--dim)}
.pill.no{color:var(--red)}

/* ── LAB status ─────────────────────────────────────────────── */
.status{border:1px solid var(--green-dim);border-radius:12px;padding:12px;margin:14px 0 0}
.status h2{margin:0 0 10px;font:700 11px/1.3 var(--mono);letter-spacing:.14em;color:var(--green)}
.status .grid{display:flex;gap:10px}
.status .cell{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:10px}
.status .cell:first-child{border-left:0;padding-left:0}
.status .cell span{display:block;font:600 9.5px/1.35 var(--mono);letter-spacing:.08em;color:var(--muted)}
.status .cell b{display:block;margin-top:3px;font:700 21px/1.1 var(--mono);color:var(--green)}
.status .cell b em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.06em}
.status .foot{margin:10px 0 0;font:400 10.5px/1.6 var(--sans);color:var(--dim)}

/* ── 測試卡的細節列 ─────────────────────────────────────────── */
.exp{display:block;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:12px;margin:0 0 10px}
.exp .hd{display:flex;align-items:flex-start;gap:10px}
.exp .hd h3{margin:0;font:600 15px/1.35 var(--sans);flex:1 1 auto;min-width:0}
.exp .sum{margin:6px 0 0;font:400 12.5px/1.6 var(--sans);color:var(--muted)}
.exp .meta{margin:9px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.exp .meta span{font:600 10px/1.2 var(--mono);letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:5px 7px}
.exp .lines{margin:9px 0 0;padding:0;list-style:none;font:400 11.5px/1.7 var(--sans)}
.exp .lines li{padding-left:15px;position:relative;color:var(--muted)}
.exp .lines li:before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;border-radius:50%}
.exp .lines li.yes:before{background:var(--green)}
.exp .lines li.no:before{background:var(--amber)}
.exp .acts{display:flex;gap:8px;margin:11px 0 0}
.exp .acts .btn{flex:1 1 auto}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel-2);
  font:600 13px/1.2 var(--sans);text-align:center}
.btn.go{background:var(--amber);border-color:var(--amber);color:#1B1814}
.btn.ghost{color:var(--muted)}
.btn[disabled]{opacity:.45;cursor:default}
.btn:active{filter:brightness(1.12)}

/* ── 提示／警示 ─────────────────────────────────────────────── */
.note{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;
  background:var(--panel);padding:11px 12px;margin:0 0 12px;font:400 12.5px/1.65 var(--sans);color:var(--muted)}
.note b{color:var(--ink)}
.note.bad{border-left-color:var(--red)}
.note.good{border-left-color:var(--green)}

/* ── 診斷區 ────────────────────────────────────────────────── */
details.diag{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:12px 0 0}
details.diag>summary{list-style:none;padding:13px 12px;min-height:44px;
  font:600 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--green)}
details.diag>summary::-webkit-details-marker{display:none}
details.diag pre{margin:0;padding:0 12px 12px;white-space:pre-wrap;word-break:break-all;
  font:11px/1.7 var(--mono);color:var(--muted)}

.foot{margin:20px 0 6px;font:400 11px/1.75 var(--sans);color:var(--dim)}
.foot code{font:11px/1.6 var(--mono);color:var(--muted)}

/* ── 底部導覽 ───────────────────────────────────────────────── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:rgba(18,16,13,.96);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.nav button{
  flex:1;min-height:var(--nav-h);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:var(--dim);
  font:600 10px/1.2 var(--mono);letter-spacing:.1em;
}
.nav button[aria-current="page"]{color:var(--amber)}
.nav svg{width:20px;height:20px}

@media (max-width:359px){
  .hero h1{font-size:28px}
  .mark{width:62px;height:52px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}