/* ============================================================
   空調保養 — 視覺系統（v97 起：看盤風）
   參考 TradingView 深色主題：深藍黑底、實心面板、1px 格線、
   藍色當「可以按」的重點，數字一律等寬數字（tabular-nums）上下對齊。
   預設狀態色：綠＝完成、橘＝要留意、紅＝會抹掉東西。
   v99 起每個人可以在「⋯ → 外觀與顏色」換上升色、完成色、重點色，並切深色／淺色：
   深淺兩套的底色寫在這裡；自訂的顏色由 app.js 寫到 <html> 的 style 上，蓋過這裡的預設。
   會跟著換的顏色一律寫成 rgb(var(--xxx-rgb) / 透明度)，不要再寫死 rgba(…)。
   識別碼一律等寬字（AH3O / AH30、EF1-8 / EF18 這類編號要能一眼分辨）。
   ============================================================ */
:root{
  --bg:#131722; --panel:#1e222d; --panel-2:#2a2e39; --panel-3:#363a45;
  --line:#2a2e39; --line-2:#363a45;
  --fg:#d1d4dc; --hi:#f0f3fa; --dim:#b2b5be; --dim2:#868993; --dim3:#5d606b;
  --bg-rgb:19 23 34; --grid-rgb:54 58 69;
  /* 可以自訂的三個顏色（-text 是拿來當字的版本，-on 是放在這個顏色上的字） */
  --accent:#2962ff; --accent-rgb:41 98 255; --accent-text:#5b8cff; --on-accent:#fff;
  --brand:#22ab94; --brand-rgb:34 171 148; --brand-text:#22ab94; --brand-dim:#089981; --on-brand:#fff;
  --up:#22ab94;
  --warn:#ff9800; --warn-rgb:255 152 0; --warn-text:#ffb74d;
  --bad:#f23645; --bad-rgb:242 54 69;
  --shadow:0 10px 30px rgba(0,0,0,.55); --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  --r:8px; --r-sm:6px;
  --gutter:#0b0e15;   /* 電腦版三欄之間的縫 */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --safe-top:env(safe-area-inset-top); --safe-bot:env(safe-area-inset-bottom);
}
/* 淺色：TradingView 淺色主題的配色。頂樓大太陽下比較看得清楚 */
html[data-theme="light"]{
  --bg:#f0f3fa; --panel:#ffffff; --panel-2:#e9ecf2; --panel-3:#dce0e8;
  --line:#e0e3eb; --line-2:#cfd3dc;
  --fg:#2a2e39; --hi:#131722; --dim:#434651; --dim2:#666a75; --dim3:#9598a1;
  --bg-rgb:240 243 250; --grid-rgb:196 201 212;
  --accent-text:#2962ff;
  --brand:#089981; --brand-rgb:8 153 129; --brand-text:#067a67; --brand-dim:#089981;
  --up:#067a67;
  --warn:#ef6c00; --warn-rgb:239 108 0; --warn-text:#b23c00;
  --bad:#e0293a; --bad-rgb:224 41 58;
  --shadow:0 10px 30px rgba(19,23,34,.16); --shadow-lg:0 20px 60px rgba(19,23,34,.24);
  --gutter:#d3d8e2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{background:var(--bg);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
/* body 刻意透明：背景格線（body::before，z-index:-1）要畫在 html 底色之上、內容之下 */
body{margin:0;padding:0;color:var(--fg);font-size:15px;line-height:1.5;background:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS","PingFang TC","Helvetica Neue",sans-serif;
  overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased}
/* 看盤軟體的圖表格線：只在畫面上半部隱約看得到，往下淡掉，不干擾閱讀 */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(90% 42% at 50% -6%, rgb(var(--accent-rgb) / .14), transparent 70%),
    linear-gradient(rgb(var(--grid-rgb) / .34) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--grid-rgb) / .34) 1px, transparent 1px);
  background-size:100% 100%, 100% 28px, 28px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 240px,transparent 520px);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 240px,transparent 520px)}
button,input,select{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------------- 登入 ---------------- */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:24px;background-color:var(--bg);
  background-image:
    radial-gradient(80% 50% at 50% 0%, rgb(var(--accent-rgb) / .16), transparent 70%),
    linear-gradient(rgb(var(--grid-rgb) / .3) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--grid-rgb) / .3) 1px, transparent 1px);
  background-size:100% 100%, 100% 28px, 28px 100%}
.gate-box{width:100%;max-width:320px}
.gate-logo{font-size:26px;font-weight:700;letter-spacing:-.01em;text-align:center;color:var(--hi)}
/* 標題下的一小段走勢線，登入頁就看得出這是「看進度」的 App */
.gate-logo::after{content:'';display:block;width:84px;height:18px;margin:10px auto 0;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cpolyline points='1,16 14,13 24,14 36,8 47,10 58,5 70,6 83,2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cpolyline points='1,16 14,13 24,14 36,8 47,10 58,5 70,6 83,2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.gate-sub{text-align:center;color:var(--dim2);margin:8px 0 34px;font-size:13.5px}
.gate-err{color:var(--bad);text-align:center;min-height:22px;font-size:13.5px;margin:14px 0 0}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12.5px;color:var(--dim);margin-bottom:7px}
.field input,.field select{width:100%;padding:13px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);appearance:none;color:var(--hi);
  transition:border-color .13s,box-shadow .13s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}
.field-label{font-size:12.5px;color:var(--dim);margin:0 0 10px}
/* 選人用整列按鈕，比下拉選單好按，也看得到全部人 */
.user-pick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 15px;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--hi);transition:background .12s}
.user-pick:active{background:var(--panel-2)}
.user-pick .av{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--accent-rgb) / .16);color:var(--accent-text);font-size:12.5px;font-weight:700;font-family:var(--mono)}

/* ---------------- 頂列 ---------------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;
  padding:calc(var(--safe-top) + 8px) 6px 8px;
  background:rgb(var(--bg-rgb) / .86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.topbar-title{flex:1;min-width:0;text-align:center}
.topbar h1{font-size:16px;margin:0;font-weight:650;letter-spacing:-.01em;color:var(--hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar p{margin:1px 0 0;font-size:11.5px;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:40px;height:40px;flex:none;border:0;background:none;color:var(--dim);
  font-size:23px;line-height:1;border-radius:var(--r-sm);transition:background .13s,color .13s}
.icon-btn:active{background:var(--panel-2);color:var(--hi)}
.icon-btn.placeholder{visibility:hidden}

/* 記錄的不是這個月（或雙月模式）時才出現：橘色，提醒現在記在別的月份 */
.monthbar{display:block;width:100%;border:0;border-bottom:1px solid rgb(var(--warn-rgb) / .26);
  padding:8px 16px;font-size:12.5px;font-weight:600;
  background:rgb(var(--warn-rgb) / .09);color:var(--warn);text-align:center}
.monthbar:active{background:rgb(var(--warn-rgb) / .16)}
/* 同步狀態列：像看盤軟體底下那條連線狀態，前面一顆狀態燈 */
.syncbar{padding:6px 16px;font-size:11.5px;text-align:center;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  background:rgb(var(--bg-rgb) / .92);color:var(--warn);border-bottom:1px solid var(--line)}
.syncbar::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:1px}
.syncbar.ok{color:var(--brand-text)}

main{padding:14px 14px calc(var(--safe-bot) + 36px);max-width:620px;margin:0 auto}

/* ---------------- 面板 ---------------- */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:16px;
  background:var(--panel)}
.card + .card{margin-top:8px}
.card.warn{border-color:rgb(var(--warn-rgb) / .32);background:linear-gradient(90deg,rgb(var(--warn-rgb) / .08),transparent 70%),var(--panel)}
.card.bad{border-color:rgb(var(--bad-rgb) / .34);background:linear-gradient(90deg,rgb(var(--bad-rgb) / .08),transparent 70%),var(--panel)}

/* 清單列：連在一起的一整塊（像看盤軟體的自選股清單），列與列之間一條細線。
   瀏覽器不支援 :has() 的話，退回一列一張卡、中間留空隙，一樣能用 */
.row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin:0 0 8px;min-height:56px;
  transition:background .12s,border-color .12s}
.row:active{background:var(--panel-2)}
@supports selector(:has(+ *)){
  .row:has(+ .row){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .row + .row{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
}
/* 要留意的那一列：左邊一條色帶，不改框線（框線在清單裡是共用的） */
.row.warn{box-shadow:inset 3px 0 0 var(--warn)}
.row.info{box-shadow:inset 3px 0 0 var(--accent)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:600;font-size:15px;letter-spacing:-.005em;color:var(--hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-title.mono{font-size:14.5px;font-weight:600}
.row-sub{font-size:12px;color:var(--dim2);margin-top:2px}
.row-right{text-align:right;font-size:12.5px;color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.chev{color:var(--dim3);font-size:19px;flex:none;margin-left:-2px}

/* 分組標題：小字大寫＋一條延伸到右邊的細線 */
.group-head{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--dim2);
  margin:22px 2px 8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.group-head::after{content:'';flex:1;min-width:12px;height:1px;background:var(--line)}
main > .group-head:first-child{margin-top:4px}

/* ---------------- 進度環 ---------------- */
@property --p{syntax:'<number>';initial-value:0;inherits:false}
.hero{display:flex;align-items:center;gap:19px}
.ring{--p:0;width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--panel-2) 0);
  transition:--p 1.1s cubic-bezier(.34,1.3,.5,1)}   /* 6 衝過頭再彈回來 */
.ring.partial{background:conic-gradient(var(--warn) calc(var(--p)*1%),var(--panel-2) 0)}
.ring > div{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);color:var(--hi);
  font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 小圓環：同一套 conic-gradient，只是尺寸縮一半 */
.ring.sm{width:52px;height:52px}
.ring.sm > div{width:44px;height:44px;font-size:13px}
.hero-txt b{display:block;font-size:17px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em;color:var(--hi)}
.hero-txt span{font-size:12.5px;color:var(--dim2);line-height:1.8}

.bar{height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden;margin-top:9px}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:2px;transition:width .45s ease}
.bar.partial>i{background:var(--warn)}
.muted{color:var(--dim2);font-size:12.5px}
/* 單相提示：比一般說明再醒目一點，新人才不會照三相亂填 */
.hint-phase{margin:0 0 10px;padding:8px 11px;border-radius:var(--r-sm);
  background:rgb(var(--warn-rgb) / .08);border:1px solid rgb(var(--warn-rgb) / .26);
  color:var(--warn-text);font-size:12.5px;line-height:1.6}
.hint-phase b{color:var(--warn);font-weight:700}

/* ---------------- 狀態 ---------------- */
.pill{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;
  white-space:nowrap;border:1px solid transparent;background:var(--panel-2);color:var(--dim)}
.pill.done{background:rgb(var(--brand-rgb) / .14);color:var(--brand-text);border-color:rgb(var(--brand-rgb) / .28)}
.pill.doing{background:rgb(var(--warn-rgb) / .13);color:var(--warn);border-color:rgb(var(--warn-rgb) / .3)}
.pill.todo{background:var(--panel-2);color:var(--dim2);border-color:var(--line-2)}
.dot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--dim3)}
.dot.done{background:var(--brand);box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .16)}
.dot.doing{background:var(--warn);box-shadow:0 0 0 3px rgb(var(--warn-rgb) / .16)}

/* ---------------- 表單 ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp{display:block}
.inp>span{display:block;font-size:11.5px;color:var(--dim2);margin-bottom:6px}
.inp input{width:100%;padding:12px 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--bg);color:var(--hi);font-size:18px;text-align:center;font-family:var(--mono);
  transition:border-color .13s,box-shadow .13s}
.inp input::placeholder,.field input::placeholder,.searchbox input::placeholder{color:var(--dim3)}
.inp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}

.btn{border:1px solid var(--line-2);background:var(--panel-2);border-radius:var(--r-sm);color:var(--fg);
  padding:13px 16px;font-weight:600;font-size:14.5px;transition:background .13s,opacity .13s}
.btn:active{background:var(--panel-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:active{filter:brightness(.88)}
/* 「標記完成」：整個 App 最重要的一顆，用完成的綠色 */
.btn.ok{background:var(--brand-dim);border-color:var(--brand-dim);color:var(--on-brand);
  font-size:15.5px;padding:15px}
.btn.ok:active{filter:brightness(.88)}
.btn.ghost{background:none;border-color:transparent;color:var(--dim2)}
.btn.block{width:100%;display:block;margin-top:8px}
.btn[disabled]{opacity:.4}
.btn-row{display:flex;gap:9px}
.btn-row>*{flex:1}

.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}
.thumb{position:relative;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.7);color:#fff;border:0;font-size:13px;line-height:26px;padding:0}
.thumb .up{position:absolute;bottom:5px;left:5px;font-size:10px;background:rgba(0,0,0,.72);
  padding:2px 6px;border-radius:4px;color:var(--warn);font-family:var(--mono)}

/* ---------------- 照片全螢幕檢視 ----------------
   縮圖是裁切過的，看不出邊緣拍到沒、白板字清不清楚，
   所以放大一律用 contain 完整顯示。 */
.viewer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;
  animation:fade .15s ease;touch-action:pan-y}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  animation:zoomIn .18s cubic-bezier(.32,.9,.4,1)}
.viewer-x{position:absolute;top:calc(var(--safe-top) + 10px);right:12px;z-index:2;
  width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;line-height:42px;padding:0;
  backdrop-filter:blur(8px)}
.viewer-x:active{background:rgba(255,255,255,.24)}
.viewer-nav{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;pointer-events:none;padding:0 8px}
.viewer-nav button{pointer-events:auto;width:44px;height:64px;border:0;border-radius:var(--r);
  background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:64px;padding:0;
  backdrop-filter:blur(8px)}
.viewer-nav button:active{background:rgba(255,255,255,.2)}
.viewer-cap{position:absolute;bottom:calc(var(--safe-bot) + 16px);left:0;right:0;
  text-align:center;color:rgba(255,255,255,.75);font-size:13px;
  font-family:var(--mono);pointer-events:none}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ---------------- 底部面板 ---------------- */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(6,8,13,.66);display:flex;align-items:flex-end;
  animation:fade .16s ease}
.sheet-panel{width:100%;max-height:86vh;background:var(--panel);border-top:1px solid var(--line-2);
  border-radius:14px 14px 0 0;padding:4px 15px calc(var(--safe-bot) + 20px);overflow:auto;
  animation:rise .2s cubic-bezier(.32,.9,.4,1)}
.sheet-panel::before{content:'';display:block;width:36px;height:4px;border-radius:2px;
  background:var(--panel-3);margin:6px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0 12px}
.sheet-head strong{font-size:15px;font-weight:650;color:var(--hi)}
/* 面板本身就是面板色，裡面的清單列要再深一階才分得出來 */
.sheet .row{background:var(--bg)}
.sheet .row:active{background:var(--panel-2)}
@keyframes rise{from{transform:translateY(12%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-bot) + 28px);transform:translateX(-50%);
  background:var(--panel-2);color:var(--hi);border:1px solid var(--line-2);border-left:3px solid var(--accent);
  padding:11px 18px;border-radius:var(--r-sm);font-weight:600;
  font-size:14px;z-index:60;box-shadow:var(--shadow);max-width:88vw;text-align:center;
  animation:toastIn .18s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.empty{text-align:center;color:var(--dim2);padding:54px 16px;font-size:14.5px}
.btn.danger{background:rgb(var(--bad-rgb) / .08);color:var(--bad);border-color:rgb(var(--bad-rgb) / .32)}
.btn.danger:active{background:rgb(var(--bad-rgb) / .16)}

/* ---------------- 搜尋 / 路線 / 異常 ---------------- */
.searchbox{margin-bottom:12px}
.searchbox input{width:100%;padding:12px 14px 12px 38px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);font-size:15px;color:var(--hi);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23868993' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23868993' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 13px 50%/16px no-repeat;
  transition:border-color .13s,box-shadow .13s;appearance:none}
.searchbox input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}
.searchbox input::-webkit-search-cancel-button{-webkit-appearance:none;height:16px;width:16px;
  background:var(--dim2);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2'/></svg>") center/12px no-repeat}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);color:var(--dim);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;font-weight:500}
.chip:active{background:var(--panel-2)}
/* 選中的頁籤：藍框＋淡藍底，跟看盤軟體切週期的按鈕一樣 */
.chip.on{background:rgb(var(--accent-rgb) / .15);border-color:var(--accent);color:var(--hi);font-weight:600}
.chip b{color:var(--warn);font-weight:700;font-size:12.5px}

.issue-row{box-shadow:inset 3px 0 0 var(--warn);
  background:linear-gradient(90deg,rgb(var(--warn-rgb) / .08),transparent 70%),var(--panel)}

/* 上次數值：貼在輸入框下方當參考，不佔版面 */
.prev{display:block;margin-top:5px;font-size:11px;color:var(--dim2);text-align:center}
/* 規格卡片可點擊，補上按鈕的樣式重置 */
button.card{font:inherit;color:inherit;cursor:pointer;transition:background .12s,border-color .12s}
button.card:active{background:var(--panel-2);border-color:var(--line-2)}

/* ---------------- 操作記錄時間軸 ----------------
   左側圖示串成一條線，動作類型用色彩分辨：
   綠＝完成、藍＝物料、橘＝要留意、紅＝會抹掉東西 */
.day-head{display:flex;align-items:center;gap:10px;margin:22px 0 12px;
  font-size:12px;color:var(--dim2);font-weight:600;letter-spacing:.06em}
.day-head::after{content:'';flex:1;height:1px;background:var(--line)}

.act{display:flex;gap:13px;position:relative;padding-bottom:14px}
/* 串起圖示的細線，最後一筆不畫 */
.act::before{content:'';position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--line)}
.act:last-child::before{display:none}
.act-icon{width:35px;height:35px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:17px;background:var(--panel-2);border:1px solid var(--line-2);z-index:1}
.act-ok   .act-icon{background:rgb(var(--brand-rgb) / .12);border-color:rgb(var(--brand-rgb) / .38)}
.act-info .act-icon{background:rgb(var(--accent-rgb) / .12);border-color:rgb(var(--accent-rgb) / .4)}
.act-warn .act-icon{background:rgb(var(--warn-rgb) / .12);border-color:rgb(var(--warn-rgb) / .38)}
.act-bad  .act-icon{background:rgb(var(--bad-rgb) / .12);border-color:rgb(var(--bad-rgb) / .4)}

.act-body{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px}
.act-ok   .act-body{box-shadow:inset 2px 0 0 var(--brand)}
.act-info .act-body{box-shadow:inset 2px 0 0 var(--accent)}
.act-warn .act-body{box-shadow:inset 2px 0 0 var(--warn)}
.act-bad  .act-body{box-shadow:inset 2px 0 0 var(--bad)}
.act-top{display:flex;align-items:baseline;gap:8px}
.act-top b{flex:1;font-size:14.5px;font-weight:600;color:var(--hi)}
.act-time{font-size:11.5px;color:var(--dim2);flex:none}
.act-where{font-size:12.5px;color:var(--dim);margin-top:3px}
.act-detail{font-size:12.5px;color:var(--dim2);margin-top:4px;white-space:normal;line-height:1.55}
.act-who{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--dim2)}
.act-who .av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--accent-rgb) / .16);color:var(--accent-text);font-size:10px;font-weight:700;font-family:var(--mono)}

/* 密碼欄的顯示／隱藏切換：現場打錯字時看得到自己輸入什麼 */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px !important}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:none;font-size:17px;line-height:1;
  border-radius:var(--r-sm);opacity:.6}
.pw-eye:active{opacity:1;background:var(--panel-2)}

/* ---- 現在動態：作業中的人 ---- */
.live-dot{width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--dim2);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.live-dot.ok{background:var(--brand);box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .18);
  animation:live-pulse 2s ease-in-out infinite}
.live-dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgb(var(--warn-rgb) / .16)}
@keyframes live-pulse{
  0%,100%{box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .18)}
  50%    {box-shadow:0 0 0 7px rgb(var(--brand-rgb) / 0)}
}
.card.live-ok{border-color:rgb(var(--brand-rgb) / .3);box-shadow:inset 3px 0 0 var(--brand)}
.card.live-warn{border-color:rgb(var(--warn-rgb) / .26);box-shadow:inset 3px 0 0 var(--warn)}

/* ============================================================
   儀表板（看盤風）
   首頁最上面：整體進度＋這個月每天累積完成的走勢圖，
   下面一格一格是各類設備（空調箱、排風機…）各做完幾 %。
   ============================================================ */
.dash{display:block;width:100%;text-align:left;padding:13px 14px 10px}
.dash-top{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim2);
  font-weight:600;letter-spacing:.02em}
.dash-top .go{margin-left:auto;color:var(--accent-text);font-weight:700}
.dash-top .live{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;
  animation:live-pulse 2s ease-in-out infinite}
.dash-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-top:5px}
.dash-pct{font-size:36px;line-height:1.08;font-weight:700;color:var(--hi);letter-spacing:-.025em}
.dash-pct small,.tile-pct small{font-size:.5em;font-weight:600;color:var(--dim2);margin-left:2px;letter-spacing:0}
.chg{font-size:12.5px;font-weight:700;color:var(--dim2);font-variant-numeric:tabular-nums;white-space:nowrap}
.chg.up{color:var(--up)}
.dash-sub{margin-top:2px;font-size:12.5px;color:var(--dim2)}
.dash-sub b{color:var(--fg);font-weight:600}
.dash-sub + .dash-sub{margin-top:1px}

/* 走勢圖：左邊畫圖、右邊一條刻度欄，最新的數字用藍色小框標在刻度上 */
.chart{position:relative;display:flex;height:92px;margin-top:12px}
.chart .plot{position:relative;flex:1;min-width:0;border-bottom:1px solid var(--line-2)}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.chart .pt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .28);animation:ptpulse 2s ease-in-out infinite}
@keyframes ptpulse{50%{box-shadow:0 0 0 7px rgb(var(--accent-rgb) / 0)}}
.chart .yax{position:relative;flex:none;width:38px;font-size:10px;color:var(--dim2);
  border-left:1px solid var(--line)}
.chart .yax>*{position:absolute;left:5px;transform:translateY(-50%);line-height:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chart .yax b{left:-1px;right:0;padding:0 3px;text-align:center;background:var(--accent);color:var(--on-accent);
  font-weight:700;border-radius:2px;z-index:1}
.chart-x{position:relative;height:17px;margin-right:38px;font-size:10px;color:var(--dim2)}
.chart-x span{position:absolute;top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-x span + span{transform:translateX(-50%)}

/* 各類設備的格子：兩欄，洗水塔月份多一格橫跨兩欄 */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.tiles>.card{margin:0}
.tile{display:block;width:100%;min-width:0;text-align:left;padding:11px 12px 10px}
.tile.wide{grid-column:1 / -1}
.tile-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:13.5px;font-weight:650;color:var(--hi)}
.tile-h span + span{font-size:11px;font-weight:500;color:var(--dim3);white-space:nowrap}
.tile-pct{margin-top:3px;font-size:26px;line-height:1.12;font-weight:700;color:var(--hi);letter-spacing:-.025em}
.tile-pct.up{color:var(--brand-text)}
.tile-pct.flat{color:var(--dim2)}
/* 疊加進度條：綠＝完成、橘＝填了一半 */
.sbar{display:flex;height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden;margin:8px 0 8px}
.sbar i{display:block;height:100%;flex:none;transition:width .5s ease}
.sbar .d{background:var(--brand)}
.sbar .g{background:var(--warn)}
.tile-f{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:11.5px;color:var(--dim2)}
.tile-f b{color:var(--fg);font-weight:600}
.tile-f .chg{font-size:11.5px}

/* 單一類別頁 */
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dim2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--panel-3);margin-right:6px}
.legend i.d{background:var(--brand)}
.legend i.g{background:var(--warn)}
.legend b{color:var(--fg);font-weight:600}
.chipset{display:flex;flex-wrap:wrap;gap:6px}
.chipset .pill{padding:6px 10px;font-size:12px}
.cat-card{padding:12px 14px}
.floor-h{font-weight:600;margin-bottom:10px;font-size:13.5px;color:var(--hi)}
.floor-h span{font-weight:400;color:var(--dim2)}
/* 一層一列：左邊樓層、右邊這層還沒做的編號 */
.fl-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.fl-row:last-child{padding-bottom:0}
.fl{flex:none;width:42px;padding-top:5px;font-size:12px;color:var(--dim2)}
.fl-row .chipset{flex:1;min-width:0}

/* ---- 里程碑慶祝：完成率每跨過 20% 跳一次，100% 彩帶多一倍、停久一點 ---- */
#cheer{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:24px;
  background:rgba(6,8,13,.58);animation:fade .2s ease}
#cheer.out{animation:cheerOut .3s ease forwards}
@keyframes cheerOut{to{opacity:0}}
.cheer-card{position:relative;z-index:1;width:100%;max-width:290px;padding:24px 20px 20px;text-align:center;
  background:var(--panel);border:1px solid rgb(var(--accent-rgb) / .5);border-radius:14px;
  box-shadow:var(--shadow-lg),0 0 48px rgb(var(--accent-rgb) / .28);
  animation:cheerPop .55s cubic-bezier(.34,1.56,.64,1)}
#cheer.all .cheer-card{border-color:rgb(var(--brand-rgb) / .6);box-shadow:var(--shadow-lg),0 0 56px rgb(var(--brand-rgb) / .32)}
@keyframes cheerPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.cheer-card .ring{margin:0 auto 14px}
.cheer-card .k{display:block;font-size:12px;font-weight:600;color:var(--dim2);letter-spacing:.02em}
.cheer-card b{display:block;margin-top:2px;font-size:24px;font-weight:700;color:var(--hi);letter-spacing:-.01em}
.cheer-card .k + b + span{display:block;margin-top:4px;font-size:13px;color:var(--dim2)}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;left:50%;top:44%;width:8px;height:12px;margin:-6px 0 0 -4px;border-radius:2px;
  opacity:0;animation:confetti 1.7s cubic-bezier(.2,.7,.3,1) var(--d) forwards}
#cheer.all .confetti i{animation-duration:2.6s}
@keyframes confetti{
  0%  {opacity:1;transform:translate(0,0) rotate(0)}
  35% {opacity:1;transform:translate(var(--x1),var(--y1)) rotate(calc(var(--r) * .4))}
  100%{opacity:0;transform:translate(var(--x2),var(--y2)) rotate(var(--r))}}

/* ---- 慶祝影片：直式滿版，字疊在下緣（寬螢幕改成完整顯示、不裁切） ---- */
#cheer.vid{display:block;padding:0;background:#000;animation:none;opacity:0;transition:opacity .25s ease}
#cheer.vid.on{opacity:1}
#cheer.vid.out{animation:cheerOut .3s ease forwards}
#cheer.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* 開聲音：右上角一顆，手指好按（44px 高），蓋在影片上面 */
#cheer.vid .cheer-snd{position:absolute;top:calc(var(--safe-top) + 14px);right:14px;z-index:2;display:flex;align-items:center;gap:6px;
  height:44px;padding:0 16px;border-radius:22px;border:1px solid rgb(255 255 255 / .4);background:rgb(0 0 0 / .45);color:#fff;
  font:600 15px/1 -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#cheer.vid .cheer-snd:active{background:rgb(0 0 0 / .65)}
@media (min-aspect-ratio:3/4){#cheer.vid video{object-fit:contain}}
.cheer-cap{position:absolute;left:0;right:0;bottom:0;padding:56px 20px calc(var(--safe-bot) + 40px);
  text-align:center;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  animation:capIn .6s cubic-bezier(.2,.8,.3,1) .2s backwards}
.cheer-cap .k{display:block;font-size:13px;font-weight:600;opacity:.85}
.cheer-cap b{display:block;margin-top:2px;font-size:34px;font-weight:800;letter-spacing:-.01em}
.cheer-cap .k + b + span{display:block;margin-top:4px;font-size:14px;opacity:.92}
@keyframes capIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- 管理員：慶祝影片清單 ---- */
.cv-row{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"thumb main" "thumb btns";
  column-gap:10px;row-gap:6px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.cv-row>.cv-thumb{grid-area:thumb}
.cv-row>.cv-main{grid-area:main}
.cv-main{flex:1;min-width:0}
.cv-main b{display:block;font-size:14.5px;font-weight:650;color:var(--hi)}
.cv-main span{display:block;font-size:11.5px;color:var(--dim2)}
.cv-btns{grid-area:btns;display:flex;gap:6px;flex-wrap:wrap}
.cv-btns .btn{flex:none;padding:6px 12px;font-size:13px}
/* 影片小縮圖（直式）；還沒有縮圖的放 🎬 */
.cv-thumb{width:44px;height:78px;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);
  display:grid;place-items:center;flex:none}
.cv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cv-thumb img[hidden]{display:none}
.cv-thumb i{font-style:normal;font-size:18px;opacity:.6}
/* 上傳前取名的小框 */
.cv-new{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel-2)}
.cv-new[hidden]{display:none}
.cv-new-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cv-new-main b{font-size:14px;font-weight:650;color:var(--hi)}
.cv-new-btns{display:flex;gap:8px}
.cv-new-btns .btn{flex:1}
/* 改名頁上面那一列 */
.cv-ren{display:flex;gap:12px;align-items:center}
/* ---- 管理員：慶祝影片「什麼時候播」（2026-10-05） ---- */
.cs-row{display:flex;gap:8px;align-items:center}
.cs-in{flex:1;min-width:0;padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg);color:var(--hi);font-size:16px}
.cs-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}
.cs-in.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgb(var(--bad-rgb) / .18)}
.cs-in:disabled{opacity:.55}
.cs-row .btn{flex:none;padding:11px 18px}
.linkish{border:0;background:none;padding:0;margin-left:2px;color:var(--accent-text);font:inherit;text-decoration:underline;cursor:pointer}
.cv-progress{position:relative;height:28px;margin-top:10px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg);border:1px solid var(--line-2)}
.cv-progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgb(var(--accent-rgb) / .35);transition:width .2s}
.cv-progress span{position:relative;display:block;line-height:26px;text-align:center;font-size:12.5px;
  font-weight:600;color:var(--hi);font-variant-numeric:tabular-nums}

/* ---- 外觀與顏色（⋯ 選單裡的設定） ---- */
.seg{display:flex;gap:3px;padding:3px;margin-bottom:14px;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--line-2)}
.seg-b{flex:1;border:0;background:none;padding:9px 0;border-radius:4px;font-weight:600;color:var(--dim2)}
.seg-b.on{background:var(--panel-2);color:var(--hi);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tc-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tc-swatch{position:relative;flex:none;width:42px;height:42px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:inset 0 0 0 2px rgb(255 255 255 / .14)}
/* 原生的調色盤藏在色塊底下：點色塊就打開 */
.tc-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}
.tc-main{flex:1;min-width:0}
.tc-main b{display:block;font-size:14.5px;font-weight:650;color:var(--hi)}
.tc-main span{display:block;font-size:11.5px;color:var(--dim2);line-height:1.45}
.tc-hex{flex:none;width:100px;padding:9px 6px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--bg);color:var(--hi);font-size:16px;text-align:center;text-transform:uppercase}
.tc-hex:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}
.tc-hex.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgb(var(--bad-rgb) / .18)}
.tc-demo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.tc-demo .chip{padding:5px 10px;font-size:12.5px}
.tc-btn{text-align:center;pointer-events:none}

/* ============================================================
   動效層
   規則：只動 transform / opacity / box-shadow，不動 layout；
   系統開了「減少動態效果」全部自動關掉（檔案最末的 media query）。
   ============================================================ */
/* 這裡刻意「沒有」任何 overflow 宣告。
   換頁位移一律 ≤12px，剛好被 main 的 14px 內距吃掉，不會超出畫面，
   所以不需要 overflow-x:hidden／clip 去擦屁股。
   （overflow-x:hidden 會把 <html> 變成捲動容器，頂列的 position:sticky
   直接失效，iOS Safari 甚至整頁捲不動 —— 這是 v52 的災情，別再加回來。） */

/* 1 漣漪：從手指按到的那一點擴散。用 currentColor —— 深色按鈕會是淺的、
   彩色按鈕會是白的，兩種底色都看得見 */
.btn,.row,.chip,.user-pick,button.card,.monthbar,.icon-btn,.thumb{
  position:relative;overflow:hidden}
.rp{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;z-index:0;
  background:currentColor;opacity:.16;animation:rp .55s ease-out forwards}
@keyframes rp{to{transform:scale(2.6);opacity:0}}

/* 2 按壓凹陷＋鬆手光暈。光暈是元素自己的 box-shadow，
   不會被上面的 overflow:hidden 切掉（overflow 只切子元素）。
   清單列不縮：連成一塊的清單，單獨一列縮小會露出縫 */
.btn{transition:background .13s,opacity .13s,transform .11s cubic-bezier(.2,.8,.3,1)}
.btn:active{transform:scale(.955)}
.chip:active,.user-pick:active,button.card:active{transform:scale(.978)}
.chip,.user-pick,button.card{transition:background .12s,border-color .12s,
  transform .11s cubic-bezier(.2,.8,.3,1)}
.btn.glow{animation:glow .5s ease-out}
@keyframes glow{
  from{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .42)}
  to  {box-shadow:0 0 0 11px rgb(var(--accent-rgb) / 0)}}
.btn.ok.glow{animation:glowp .5s ease-out}
@keyframes glowp{
  from{box-shadow:0 0 0 0 rgb(var(--brand-rgb) / .55)}
  to  {box-shadow:0 0 0 13px rgb(var(--brand-rgb) / 0)}}

/* 3 標記完成時，勾勾一筆畫出來 */
#tickfx{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none;opacity:0}
#tickfx.go{animation:tfade .95s ease}
@keyframes tfade{0%{opacity:0}12%{opacity:1}68%{opacity:1}100%{opacity:0}}
#tickfx svg{width:104px;height:104px;filter:drop-shadow(0 0 24px rgb(var(--brand-rgb) / .45))}
#tickfx circle{stroke:rgb(var(--brand-rgb) / .5);stroke-width:1.4;fill:rgb(var(--bg-rgb) / .94);
  transform-origin:center;transform:scale(.3);opacity:0}
#tickfx.go circle{animation:tpop .45s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes tpop{to{transform:scale(1);opacity:1}}
#tickfx path{stroke:var(--brand);stroke-width:2.4;fill:none;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
#tickfx.go path{animation:tdraw .42s cubic-bezier(.65,0,.35,1) .13s forwards}
@keyframes tdraw{to{stroke-dashoffset:0}}

/* 4 長按才算數：紅圈繞完一圈才執行，手滑點到不會誤刪 */
@property --hp{syntax:'<number>';initial-value:0;inherits:false}
.holdbtn{display:block;width:100%;--hp:0;padding:2px;border:0;border-radius:var(--r-sm);
  background:conic-gradient(var(--bad) calc(var(--hp)*1%),var(--line-2) 0);
  transition:--hp 0s;touch-action:none}
.holdbtn.on{--hp:100;transition:--hp .85s linear}
.holdbtn>b{display:block;background:var(--panel-2);border-radius:5px;padding:14px;
  font-size:15px;font-weight:600;color:var(--bad)}
.holdbtn.done>b{background:rgb(var(--bad-rgb) / .16)}

/* 5 剛做完的那一台：一道綠光掃過去 */
.row.swept{border-color:rgb(var(--brand-rgb) / .45)}
.row.swept::after{content:'';position:absolute;inset:0;pointer-events:none;
  transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,rgb(var(--brand-rgb) / .24) 50%,transparent 80%);
  animation:sweep .85s cubic-bezier(.3,0,.2,1) .12s}
@keyframes sweep{to{transform:translateX(110%)}}

/* 8 一整層做完：全螢幕閃一下 */
#flashfx{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:65;
  background:radial-gradient(circle at 50% 52%,rgb(var(--brand-rgb) / .3),transparent 68%)}
#flashfx.go{animation:flashfx .75s ease-out}
@keyframes flashfx{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* 9＋11 進場：項目由上往下依序浮出，同時帶出往前／往後的方向。
   位移一定要套在 main 的「子項」上，不能套 main 本身 ——
   main 是滿版寬度，位移 12px 就超出畫面產生橫向捲動；
   子項左右各被 14px 內距包著，12px 剛好吃得下。 */
main.nav-fwd>*,main.nav-back>*,main.nav-fade>*{
  animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.3,1);
  animation-fill-mode:backwards}
main.nav-fwd >*{animation-name:kidf}
main.nav-back>*{animation-name:kidb}
main.nav-fade>*{animation-name:kidd}
@keyframes kidf{from{opacity:0;transform:translate(12px,7px)}to{opacity:1;transform:none}}
@keyframes kidb{from{opacity:0;transform:translate(-12px,7px)}to{opacity:1;transform:none}}
@keyframes kidd{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* 12 同步中：一道光持續由左往右流 */
.syncbar{position:relative;overflow:hidden}
.syncbar.syncing{color:var(--accent-text)}
.syncbar.syncing::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .2),transparent);
  animation:flow 1.15s linear infinite}
@keyframes flow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 13 待上傳筆數變多時彈一下 */
.pend{display:inline-block;font-family:var(--mono);font-weight:600}
.pend.bump{animation:bump .42s cubic-bezier(.34,1.7,.5,1)}
@keyframes bump{40%{transform:scale(1.45)}}

/* 14 離線時很慢很淡地呼吸，不吵人但知道現在沒網路 */
.syncbar.offline{animation:breath 2.4s ease-in-out infinite}
@keyframes breath{50%{color:var(--warn);background:rgb(var(--warn-rgb) / .06)}}

/* 7 完成台數滾動：舊的往上滑走、新的滑進來 */
/* 框高必須「正好等於一行」，差一點數字就跟旁邊的字不平行。
   行高在不同位置不一樣（首頁這裡被 .hero-txt span 設成 1.8），
   所以不要寫死 em——用 1lh 讓瀏覽器自己取當下的行高；
   位移用 -100%（等於 u 自己的高度），跟單位無關。 */
.roll{display:inline-block;height:1.8em;overflow:hidden;vertical-align:bottom}
@supports (height:1lh){.roll{height:1lh}}
.roll u{display:block;text-decoration:none}
.roll.go u{animation:rollup .5s cubic-bezier(.3,1.2,.4,1) forwards}
@keyframes rollup{to{transform:translateY(-100%)}}

/* 15 有人開始作業：卡片掉進來，綠光擴散一次 */
.card.joined{animation:join .6s cubic-bezier(.2,.9,.3,1)}
@keyframes join{
  0%  {transform:translateY(-14px);opacity:0}
  55% {transform:none;opacity:1}
  100%{transform:none;opacity:1}}

/* 系統開啟「減少動態效果」就全部關掉 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;animation-iteration-count:1 !important;
    transition-duration:.001s !important}
}

/* ---- 近 6 個月趨勢：迷你折線 ---- */
.trend-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.trend-row + .trend-row{border-top:1px solid var(--line)}
.trend-lab{font-size:13px;color:var(--dim);flex:none;width:88px}
.spark{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.spark svg{flex:1;height:26px;min-width:0}
.spark-lab{font-size:11px;color:var(--dim2);flex:none;text-align:right;white-space:nowrap}
.spark-lab b{font-weight:600;margin-left:4px}

/* ---- 異常追蹤 ---- */
.issue-card + .issue-card{margin-top:10px}
.issue-card.overdue{border-color:rgb(var(--bad-rgb) / .34);
  background:linear-gradient(90deg,rgb(var(--bad-rgb) / .07),transparent 70%),var(--panel)}

/* ---- 冷卻水塔：清洗前／清洗後兩區分色 ---- */
.card.stage-before{border-left:3px solid var(--dim2)}
.card.stage-after{border-left:3px solid var(--brand)}

/* ---- 新功能教學：一頁講一件事 ---- */
.tut{text-align:center;padding:18px 6px 6px}
.tut-icon{font-size:52px;line-height:1;margin-bottom:14px;
  filter:drop-shadow(0 6px 18px rgb(var(--accent-rgb) / .25))}
.tut-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;color:var(--hi)}
.tut-body{font-size:14.5px;line-height:1.75;color:var(--dim);margin:0 0 11px;text-align:left}
.tut-tip{margin-top:16px;padding:13px 14px;border-radius:var(--r);text-align:left;
  background:linear-gradient(90deg,rgb(var(--accent-rgb) / .1),transparent 80%),var(--panel);
  border:1px solid rgb(var(--accent-rgb) / .3);box-shadow:inset 3px 0 0 var(--accent);
  font-size:13px;line-height:1.7;color:var(--dim)}
.tut-tip b{display:block;color:var(--accent-text);font-size:11px;font-weight:700;
  letter-spacing:.08em;margin-bottom:5px}
.tut-dots{display:flex;justify-content:center;gap:6px;margin-top:22px}
.tut-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);
  transition:background .2s,width .2s}
.tut-dots i.on{background:var(--accent);width:18px;border-radius:3px}

/* 登入頁角落的版本號：組員回報問題時說得出自己是 v 幾 */
.gate-ver{text-align:center;color:var(--dim3);font-size:11px;margin-top:20px;letter-spacing:.04em}

/* ============================================================
   電腦版（視窗 1024 以上，body.desk）：三欄
   左邊固定選單、中間清單、右邊內容；面板之間留 4px 深色縫（看盤軟體的版面）。
   手機版完全不受影響：下面每一條都限定在 body.desk 或電腦版專用的 class。
   ============================================================ */
body.desk{overflow:hidden}
body.desk::before{display:none}
body.desk .topbar,body.desk #monthbar,body.desk #syncbar{display:none !important}
body.desk main#view{max-width:none;margin:0;padding:0;height:100vh;height:100dvh}
.dk{height:100%;display:grid;gap:4px;padding:4px;background:var(--gutter);
  grid-template-columns:clamp(176px,15vw,216px) minmax(0,1fr) clamp(360px,32vw,500px);
  grid-template-rows:48px minmax(0,1fr)}
.dk.single{grid-template-columns:clamp(176px,15vw,216px) minmax(0,1fr)}
.dk>*{background:var(--bg);border-radius:6px;min-width:0;min-height:0}
.dk .dk-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dk ::-webkit-scrollbar{width:10px;height:10px}
.dk ::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:5px;border:2px solid var(--bg)}
.dk ::-webkit-scrollbar-track{background:transparent}
.dk button{cursor:pointer}

/* 頂列 */
.dk-top{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:0 8px 0 12px}
.dk-logo{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--hi);font-size:14.5px;white-space:nowrap}
.dk-mark{width:24px;height:24px}
.dk-mark rect{fill:rgb(var(--accent-rgb) / .16)}
.dk-mark polyline{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-sep{width:1px;height:22px;background:var(--line);flex:none}
.dk-sp{flex:1}
.dk-month{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 9px 0 10px;border:1px solid var(--line-2);
  border-radius:6px;font-weight:600;color:var(--hi);font-size:13px;background:var(--panel);white-space:nowrap}
.dk-month:hover{border-color:var(--accent)}
.dk-month.alt{border-color:rgb(var(--warn-rgb) / .55);color:var(--warn);background:rgb(var(--warn-rgb) / .08)}
.dk-search{position:relative;display:flex;align-items:center;gap:8px;width:clamp(200px,22vw,320px);height:32px;padding:0 10px;
  border:1px solid var(--line-2);border-radius:6px;background:var(--panel);color:var(--dim3)}
.dk-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .2)}
.dk-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--hi);font-size:13px;padding:0}
.dk-search input::placeholder{color:var(--dim3)}
.dk-search input::-webkit-search-cancel-button{display:none}
.dk-qres{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:30;background:var(--panel);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;padding:4px}
.dk-qi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:6px;
  text-align:left;color:var(--fg);font-size:13px}
.dk-qi:hover,.dk-qi.on{background:rgb(var(--accent-rgb) / .14)}
.dk-qi b{color:var(--hi);font-weight:600}
.dk-qi span:last-child{color:var(--dim2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-qe{padding:12px;color:var(--dim2);font-size:13px}
.dk-kpi{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim2);white-space:nowrap}
.dk-kpi b{font-size:15px;color:var(--hi)}
.dk-kpi .sbar{width:110px;margin:0}
.dk-sync{max-width:300px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:none;
  font-size:12px;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-sync::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:0}
.dk-sync.ok{color:var(--brand-text)}
.dk-sync.offline{color:var(--dim2)}
.dk-sync.syncing{color:var(--accent-text)}
.dk-user{display:flex;align-items:center;gap:7px;height:32px;padding:0 9px 0 4px;border-radius:16px;background:var(--panel);
  border:1px solid var(--line);font-size:12.5px;color:var(--hi);font-weight:600;white-space:nowrap}
.dk-user:hover{border-color:var(--line-2)}
.dk-av{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--accent-rgb) / .18);color:var(--accent-text);font-size:11.5px;font-weight:700}
.dk-ib{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;border:0;background:none;color:var(--dim)}
.dk-ib:hover{background:var(--panel)}
@media (max-width:1279px){
  .dk-kpi .lab,.dk-kpi .sbar{display:none}
  .dk-sync{max-width:170px}
}

/* 左選單 */
.dk-nav{display:flex;flex-direction:column;padding:8px;gap:1px;overflow:auto}
.dk-nav .sec{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--dim3);padding:14px 10px 6px}
.dk-nav .sec:first-child{padding-top:6px}
.dk-ni{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:6px;background:none;
  color:var(--dim);font-size:13.5px;font-weight:500;position:relative;text-align:left;white-space:nowrap}
.dk-ni>span:not(.n):not(.bd){overflow:hidden;text-overflow:ellipsis}
.dk-ni:hover{background:var(--panel);color:var(--hi)}
.dk-ni .n{margin-left:auto;font-size:11px;color:var(--dim2);font-variant-numeric:tabular-nums}
.dk-ni .bd{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:700;line-height:18px;
  text-align:center;background:rgb(var(--warn-rgb) / .16);color:var(--warn);font-variant-numeric:tabular-nums}
.dk-ni .bd.ok{background:rgb(var(--brand-rgb) / .16);color:var(--brand-text)}
.dk-ni.on{background:rgb(var(--accent-rgb) / .14);color:var(--hi);font-weight:600}
.dk-ni.on::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.dk-ni.on .dk-i{color:var(--accent-text)}
.dk-nav .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:6px}
.dk-nav .foot .dk-ni{min-height:32px;font-size:12.5px;color:var(--dim2)}

/* 中間與右邊的面板 */
.dk-pane{display:flex;flex-direction:column;overflow:hidden}
.dk-ph{flex:none;min-height:46px;display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--line)}
.dk-ph h2{font-size:14.5px;font-weight:650;color:var(--hi);margin:0;white-space:nowrap}
.dk-phs{font-size:12px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dk-pb{flex:1;overflow:auto;padding:14px 16px 20px;min-height:0}
.dk-pb.flush{padding:0}
.dk-main.dk-single,.dk.single .dk-main .dk-pb>*{max-width:760px}
.dk.single .dk-main .dk-pb{padding:20px 28px 40px}
.dk-foot{flex:none;padding:10px 16px 12px;border-top:1px solid var(--line);background:var(--bg)}
.dk-foot .dev-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dk-foot .dev-actions .btn.block{flex:1;width:auto;margin:0}
.dk-foot .dev-actions .btn.ok{flex:1.3}
.dk-foot .dev-actions p{flex-basis:100%;margin:2px 0 0 !important}
.dk-tools{flex:none;padding:10px 16px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.dk-note{font-size:12.5px;color:var(--dim2);line-height:1.6}
.dk-seg{display:inline-flex;flex:none;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--panel)}
.dk-seg button{padding:4px 11px;border:0;background:none;font-size:12px;color:var(--dim2);white-space:nowrap}
.dk-seg button+button{border-left:1px solid var(--line-2)}
.dk-seg button:hover{color:var(--hi)}
.dk-seg button.on{background:rgb(var(--accent-rgb) / .16);color:var(--hi);font-weight:600}
.dk-btabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.dk-btab{display:flex;align-items:baseline;gap:7px;padding:5px 12px 9px;border:0;background:none;font-size:13px;color:var(--dim);
  position:relative;white-space:nowrap}
.dk-btab span{font-size:11px;color:var(--dim2)}
.dk-btab:hover{color:var(--hi)}
.dk-btab.on{color:var(--hi);font-weight:600}
.dk-btab.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.dk-fchips{display:flex;flex-wrap:wrap;gap:5px}
.dk-fc{display:inline-flex;align-items:baseline;gap:6px;height:28px;padding:5px 10px 0;border:1px solid var(--line-2);border-radius:5px;
  font-size:12.5px;color:var(--dim);background:var(--panel);white-space:nowrap}
.dk-fc span{font-size:11px;color:var(--dim2)}
.dk-fc.ok span{color:var(--brand-text)}
.dk-fc:hover{border-color:var(--accent)}
.dk-fc.on{background:rgb(var(--accent-rgb) / .15);border-color:var(--accent);color:var(--hi);font-weight:600}
.dk-fc.on span{color:var(--hi)}

/* 表格：自選股清單的密度，一列一台 */
.dk-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.dk-tbl th{position:sticky;top:0;z-index:1;background:var(--bg);text-align:left;font-size:11px;font-weight:600;color:var(--dim2);
  padding:0 10px;height:32px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.03em}
.dk-tbl td{padding:0 10px;height:38px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--fg)}
.dk-tbl th:first-child,.dk-tbl td:first-child{padding-left:16px}
.dk-tbl th:last-child,.dk-tbl td:last-child{padding-right:16px}
.dk-tbl .r{text-align:right}
.dk-tbl tr[data-go],.dk-tbl tr[data-isel]{cursor:pointer}
.dk-tbl tr[data-go]:hover td,.dk-tbl tr[data-isel]:hover td{background:var(--panel)}
.dk-tbl tr.grp td{height:28px;background:var(--panel);font-size:11.5px;font-weight:600;color:var(--dim2);letter-spacing:.04em}
.dk-tbl tr.sel td,.dk-tbl tr.sel:hover td{background:rgb(var(--accent-rgb) / .14)}
.dk-tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.dk-tbl tr.off td{opacity:.42}
.dk-tbl tr.swept td{animation:dkswept 1.1s ease-out}
@keyframes dkswept{from{background:rgb(var(--brand-rgb) / .3)}}
.dk-tbl td.id{font-family:var(--mono);font-weight:600;color:var(--hi);font-variant-numeric:tabular-nums}
.dk-tbl td.id .dim{font-family:inherit;font-weight:400}
.dk-tbl td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dk-tbl td.wrap{white-space:normal;line-height:1.45;padding-top:7px;padding-bottom:7px;min-width:180px}
.dk-tbl td.cut{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.dk-tbl .nw{white-space:nowrap}
.dk-tbl .dim{color:var(--dim2)}
.dk-tbl .dim3{color:var(--dim3)}
.dk-tbl .w{color:var(--warn);font-weight:700}
.dk-tbl .dot{display:inline-block;vertical-align:1px}
.dk-tbl .pill{font-size:10.5px;padding:2px 7px}
.dk-tbl.tall td{height:44px}
.dk-none{text-align:center;color:var(--dim2);padding:28px 10px !important}

/* 右欄 */
.dk-dh{flex:none;display:flex;align-items:flex-start;gap:12px;padding:13px 16px 12px;border-bottom:1px solid var(--line)}
.dk-did{font:650 22px/1.15 var(--mono);color:var(--hi)}
.dk-dsub{font-size:12.5px;color:var(--dim2);margin-top:3px}
.dk-dh>.pill{margin-left:auto;margin-top:4px}
.dk-hint{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  color:var(--dim2);padding:30px 24px;font-size:13.5px;line-height:1.7}
.dk-hint .dk-i{width:34px;height:34px;color:var(--dim3);stroke-width:1.4}
.dk-hint p{margin:0;max-width:300px}
.dk-det .grid2{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.dk-det .dk-pb>.btn.block:first-child{margin-top:0}
/* 水塔：清洗前／清洗後左右並排，前後一眼對照 */
.dk-det .dk-pb.tower{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.dk-det .dk-pb.tower>*{grid-column:1 / -1;margin:0 !important}
.dk-det .dk-pb.tower>.stage-before{grid-column:1}
.dk-det .dk-pb.tower>.stage-after{grid-column:2}
.dk-det .dk-pb.tower .thumbs{grid-template-columns:repeat(2,1fr)}
/* 照片：拖進來或點一下選檔案 */
.dk-drop{display:flex;align-items:center;justify-content:center;gap:12px;min-height:74px;padding:14px;margin-top:2px;
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);color:var(--dim2);font-size:13px;line-height:1.5;text-align:left;
  cursor:pointer;background:rgb(var(--accent-rgb) / .04);transition:background .12s,border-color .12s}
.dk-drop:hover{border-color:var(--accent)}
.dk-drop b{color:var(--accent-text);font-weight:600}
.dk-drop small{display:block;font-size:11.5px;color:var(--dim3)}
.dk-drop .dk-i{width:22px;height:22px;color:var(--accent-text)}
.dk-drop.over{border-color:var(--accent);background:rgb(var(--accent-rgb) / .14);color:var(--hi)}
/* 換濾網：從哪裡領，直接攤開 */
.dk-take{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.dk-take-h{font-size:11.5px;font-weight:600;color:var(--dim2);margin:0 0 8px;letter-spacing:.03em}
.dk-take .row{background:var(--bg);min-height:auto;padding:9px 12px}
.dk-take .row:hover{border-color:var(--accent)}

/* 右欄的區塊（儀表板的待處理） */
.dk-block{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:11px 12px 4px;margin-bottom:10px}
.dk-block.warn{border-color:rgb(var(--warn-rgb) / .32);background:linear-gradient(90deg,rgb(var(--warn-rgb) / .07),transparent 70%),var(--panel)}
.dk-block.info{border-color:rgb(var(--accent-rgb) / .3);background:linear-gradient(90deg,rgb(var(--accent-rgb) / .08),transparent 70%),var(--panel)}
.dk-bh{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--hi);min-height:24px;padding-bottom:6px}
.dk-bh b{font-weight:650;white-space:nowrap}
.dk-tag{font-size:11px;font-weight:600;color:var(--warn);background:rgb(var(--warn-rgb) / .12);border-radius:4px;padding:0 6px;white-space:nowrap}
.dk-more{margin-left:auto;border:0;background:none;padding:2px 0;font-size:12px;color:var(--accent-text);font-weight:600;white-space:nowrap}
.dk-bsub{font-size:12px;color:var(--dim2);margin:-4px 0 6px 15px}
.dk-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:8px 2px;
  border:0;border-top:1px solid var(--line);background:none;text-align:left;font-size:12.5px;color:var(--fg)}
.dk-li:hover{background:var(--panel-2)}
.dk-li.four{grid-template-columns:auto auto minmax(0,1fr) auto}
.dk-li.empty{display:block;color:var(--dim2);cursor:default}
.dk-li.empty:hover{background:none}
.dk-li .id{font-family:var(--mono);font-weight:600;color:var(--hi);white-space:nowrap}
.dk-li.tx .id{font-family:inherit}
.dk-li .t{color:var(--dim2)}
.dk-li .pl{color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-li .rt{color:var(--dim2);font-size:12px;white-space:nowrap}
.dk-li .rt .w{color:var(--warn)}

/* 儀表板（首頁）在中間：走勢圖拉高、四類一排 */
.dk-main .dash .chart{height:200px}
.dk-main .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dk-main .tile.wide{grid-column:auto}
.dk-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.dk-2col>.card{margin:0}
.dk-bld{display:grid;grid-template-columns:72px minmax(60px,1fr) 64px 52px 10px;align-items:center;gap:10px;width:100%;
  min-height:40px;padding:0;border:0;border-top:1px solid var(--line);background:none;text-align:left;font-size:13px;color:var(--fg)}
.dk-bld:hover{background:var(--panel-2)}
.dk-bld .nm{color:var(--hi);font-weight:600}
.dk-bld .sbar{margin:0}
.dk-bld .v{text-align:right;font-size:12.5px}
.dk-bld .p{text-align:right;color:var(--dim2);font-size:12px}
.dk-bld .chev{font-size:16px}

/* 異常追蹤：右欄的狀態進度 */
.dk-steps{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.dk-steps span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--dim3);white-space:nowrap}
.dk-steps span::before{content:'';width:9px;height:9px;border-radius:50%;border:2px solid currentColor}
.dk-steps span.on{color:var(--warn)}
.dk-steps span.on::before{background:var(--warn)}
.dk-steps i{flex:1;height:1px;background:var(--line-2)}
.dk-quote{font-size:16px;line-height:1.6;color:var(--hi);font-weight:600}
.dk-mt{width:100%;border-collapse:collapse;font-size:12.5px}
.dk-mt th{font-size:11px;font-weight:600;color:var(--dim2);text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)}
.dk-mt th:first-child{text-align:left}
.dk-mt td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);color:var(--fg)}
.dk-mt td:first-child{text-align:left;font-family:inherit;color:var(--dim)}
.dk-mt tr:last-child td{border-bottom:0}

/* 電腦版的各種清單：滑鼠移過去要有反應 */
body.desk .row:hover,body.desk button.card:hover{background:var(--panel-2)}
body.desk .chip:hover{border-color:var(--accent)}
/* 跳出來的面板在電腦上改成畫面中間的視窗 */
body.desk .sheet{align-items:center;justify-content:center}
body.desk .sheet-panel{width:min(560px,92vw);max-height:84vh;border-radius:12px;border:1px solid var(--line-2);
  padding:4px 18px 20px;animation:fade .16s ease}
body.desk .sheet-panel::before{display:none}

/* ---- 外觀與顏色：配色組合（一顆一組：三個小色點＋名字，自己存的多一個 ✕） ---- */
.tsets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.tset{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);overflow:hidden}
.tset.on{border-color:var(--accent);background:rgb(var(--accent-rgb) / .14)}
.tset-b{display:inline-flex;align-items:center;gap:4px;padding:8px 11px;border:0;background:none;color:var(--fg);font-size:13.5px}
.tset-b i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px rgb(255 255 255 / .2)}
.tset-b b{margin-left:5px;font-weight:600;color:var(--hi)}
.tset.on .tset-b b{color:var(--hi)}
.tset-x{border:0;border-left:1px solid var(--line-2);background:none;color:var(--dim2);padding:0 10px;font-size:12px}
.tset-x:active{background:rgb(var(--bad-rgb) / .12);color:var(--bad)}

/* ============================================================
   管理員：指揮中心（2026-10 起，html.admin-ui）
   Willie 選的 A 款：深色格線底、發光、四角框；時鐘、倒數、呼吸燈、走勢圖掃光、超過 50% 的列閃紅。
   只有深色。發光色（＝重點色）、完成色、上升色可以自己換（applyTheme 寫在 <html> 上蓋過這裡）；
   橘色（要留意）、紅色（異常）固定。
   組員畫面完全不受影響：下面每一條都限定在 html.admin-ui、.sa（電腦）、.sam（手機）或 .sa-prev（顏色預覽）。
   ============================================================ */
html.admin-ui{
  --bg:#02050b; --panel:#07101d; --panel-2:#0c1a2c; --panel-3:#13263d;
  --line:rgb(var(--accent-rgb) / .13); --line-2:rgb(var(--accent-rgb) / .3);
  --fg:#d6ecff; --hi:#ffffff; --dim:#a9c3dc; --dim2:#7d9ab6; --dim3:#4a6782;
  --bg-rgb:2 5 11; --grid-rgb:0 90 140;
  --accent:#00d4ff; --accent-rgb:0 212 255; --accent-text:#00d4ff; --on-accent:#00121c;
  --brand:#00f0a0; --brand-rgb:0 240 160; --brand-text:#00f0a0; --brand-dim:#00f0a0; --on-brand:#00140c;
  --up:#00f0a0;
  --warn:#ffb020; --warn-rgb:255 176 32; --warn-text:#ffc24d;
  --bad:#ff3b5c; --bad-rgb:255 59 92;
  --shadow:0 10px 30px rgba(0,0,0,.7); --shadow-lg:0 20px 60px rgba(0,0,0,.75);
  --gutter:#010308;
  color-scheme:dark}
html.admin-ui body::before{
  background-image:
    radial-gradient(70% 40% at 15% 0%,rgb(var(--accent-rgb) / .2),transparent 70%),
    radial-gradient(60% 40% at 100% 100%,rgb(var(--brand-rgb) / .07),transparent 70%),
    linear-gradient(rgb(var(--accent-rgb) / .05) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--accent-rgb) / .05) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,24px 24px,24px 24px;
  -webkit-mask-image:none;mask-image:none}
html.admin-ui .sheet-panel{border:1px solid var(--line-2);box-shadow:0 0 30px rgb(var(--accent-rgb) / .12),var(--shadow-lg)}

/* 共用的顏色變數：--c 發光、--g 完成、--w 橘、--r 紅（-t 是拿來當字的版本） */
.sa,.sam,.sa-prev{--c:var(--accent);--c-rgb:var(--accent-rgb);--ct:var(--accent-text);
  --g:var(--brand);--g-rgb:var(--brand-rgb);--gt:var(--brand-text);
  --w:var(--warn);--w-rgb:var(--warn-rgb);--r:var(--bad);--r-rgb:var(--bad-rgb);
  --tx:var(--fg);--tx2:var(--dim2);--tx3:var(--dim3);
  --ln:rgb(var(--c-rgb) / .17);--pan:rgb(5 13 25 / .88);
  color:var(--tx);font-size:13px;line-height:1.5;text-align:left}
:where(.sa,.sam,.sa-prev) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.sa .dk-i,.sam .dk-i,.sa-prev .dk-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sa ::-webkit-scrollbar{width:8px;height:8px}
.sa ::-webkit-scrollbar-thumb{background:rgb(var(--c-rgb) / .22);border-radius:4px}
.sa ::-webkit-scrollbar-track{background:transparent}

/* 發光框：四個角各一截亮線 */
.sa-box{position:relative;background:var(--pan);border:1px solid var(--ln);border-radius:3px;min-width:0;min-height:0}
.sa-box::before,.sa-box::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none;z-index:3}
.sa-box::before{left:-1px;top:-1px;border-left:2px solid var(--c);border-top:2px solid var(--c);filter:drop-shadow(0 0 3px var(--c))}
.sa-box::after{right:-1px;bottom:-1px;border-right:2px solid var(--c);border-bottom:2px solid var(--c);filter:drop-shadow(0 0 3px var(--c))}
.sa-fill{flex:1;min-height:0;display:flex;flex-direction:column}
.sa-scroll{flex:1;min-height:0;overflow:auto}
.sa-h{display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-bottom:1px solid var(--ln);flex:none;
  background:linear-gradient(90deg,rgb(var(--c-rgb) / .11),transparent 65%)}
.sa-h .k{font:700 10px var(--mono);letter-spacing:.2em;color:var(--ct);text-shadow:0 0 8px rgb(var(--c-rgb) / .75)}
.sa-h .k.red{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .8)}
.sa-h b{font-size:13.5px;color:var(--hi);font-weight:650;white-space:nowrap}
.sa-h .r{margin-left:auto;font:11px var(--mono);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sa-note{padding:10px 14px;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--ln);line-height:1.6;flex:none}
.sa-empty{padding:34px 16px;text-align:center;color:var(--tx2);font-size:13px;line-height:1.7}
.sa-empty small{color:var(--tx3);font-size:12px}
.sa-empty.sm{padding:14px;font-size:12.5px}
.sa-empty.loading{animation:sablink 1.6s ease-in-out infinite}
.sa-empty .sa-btn{margin:12px auto 0;padding:0 18px;display:inline-flex}
.sa-hint{margin:8px 0 0;font-size:12px;color:var(--tx2)}
.sa-hintbox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;
  text-align:center;color:var(--tx2);font-size:13px;line-height:1.7}
.sa-hintbox .dk-i{width:34px;height:34px;color:var(--ct);filter:drop-shadow(0 0 6px var(--c));stroke-width:1.4}
.sa-hintbox p{margin:0;max-width:280px}
.sa-more{display:block;width:100%;padding:8px 14px;text-align:right;font-size:12px;color:var(--ct)}

/* ---------- 電腦版外框：頂列＋左選單＋中間＋右邊＋狀態列 ---------- */
body.desk .sa{height:100%}
.sa{display:grid;grid-template-columns:clamp(178px,14vw,212px) minmax(0,1fr) clamp(340px,30vw,452px);
  grid-template-rows:54px minmax(0,1fr) 28px;gap:8px;padding:8px;overflow:hidden;
  background:
    radial-gradient(55% 45% at 18% 0%,rgb(var(--c-rgb) / .2),transparent 70%),
    radial-gradient(45% 40% at 100% 100%,rgb(var(--g-rgb) / .07),transparent 70%),
    linear-gradient(rgb(var(--c-rgb) / .05) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgb(var(--c-rgb) / .05) 1px,transparent 1px) 0 0/24px 24px,
    var(--bg)}
.sa.single{grid-template-columns:clamp(178px,14vw,212px) minmax(0,1fr)}
.sa-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 14px;min-width:0}
.sa-logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--hi);font-size:15px;white-space:nowrap}
.sa-logo .mk{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgb(var(--c-rgb) / .55);border-radius:6px;color:var(--ct);
  box-shadow:0 0 14px rgb(var(--c-rgb) / .35),inset 0 0 10px rgb(var(--c-rgb) / .2)}
.sa-tag{font:700 10px var(--mono);letter-spacing:.2em;color:var(--ct);border:1px solid rgb(var(--c-rgb) / .5);padding:2px 7px;border-radius:3px;
  text-shadow:0 0 8px rgb(var(--c-rgb) / .8);box-shadow:inset 0 0 10px rgb(var(--c-rgb) / .18);white-space:nowrap}
.sa-sep{width:1px;height:24px;background:var(--ln);flex:none}
.sa-clock{font:12px var(--mono);color:var(--tx2);white-space:nowrap}
.sa-clock b{color:var(--hi);font-size:17px;font-weight:600;margin-left:8px;text-shadow:0 0 12px rgb(var(--c-rgb) / .65);font-variant-numeric:tabular-nums}
.sa-sp{flex:1;min-width:0}
.sa-chip{display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--ln);border-radius:3px;font-size:12px;
  color:var(--tx2);background:rgb(var(--c-rgb) / .04);white-space:nowrap;flex:none}
.sa-chip b{color:var(--hi);font-family:var(--mono);font-variant-numeric:tabular-nums}
button.sa-chip b{font-family:inherit}
button.sa-chip:hover,.sa-user:hover{border-color:rgb(var(--c-rgb) / .55);color:var(--hi)}
.sa-chip.alt{border-color:rgb(var(--w-rgb) / .55);color:var(--w)}
.sa-chip.alt b{color:var(--w)}
.sa-chip.bad{border-color:rgb(var(--r-rgb) / .6);color:var(--r);background:rgb(var(--r-rgb) / .08)}
.sa-dot{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);animation:sablink 1.6s ease-in-out infinite;flex:none}
.sa-dot.bad{background:var(--r);box-shadow:0 0 8px var(--r);animation-duration:.8s}
@keyframes sablink{50%{opacity:.3}}
.cdring{width:16px;height:16px;transform:rotate(-90deg);flex:none}
.cdring circle{fill:none;stroke-width:3}
.cdring .bg{stroke:rgb(255 255 255 / .12)}
.cdring .cdarc{stroke:var(--c);stroke-dasharray:44 44;transition:stroke-dashoffset .9s linear}
.sa-user{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 5px;border:1px solid rgb(var(--c-rgb) / .35);border-radius:15px;
  color:var(--hi);font-weight:600;font-size:12.5px;background:rgb(var(--c-rgb) / .06);white-space:nowrap;flex:none}
.sa-user i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 -apple-system,"PingFang TC",sans-serif;
  font-style:normal;background:var(--c);color:var(--on-accent);box-shadow:0 0 10px rgb(var(--c-rgb) / .6)}

.sa-nav{padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow:hidden auto;scrollbar-width:none}
.sa-nav::-webkit-scrollbar{display:none}
.sa-nav .sec{font:700 10px var(--mono);letter-spacing:.24em;color:var(--tx3);padding:10px 10px 6px}
.sa-ni{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:3px;color:var(--tx2);font-size:13.5px;
  position:relative;width:100%}
.sa-ni>span:first-of-type{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-ni:hover{color:var(--hi);background:rgb(var(--c-rgb) / .06)}
.sa-ni .n{margin-left:auto;font:600 11px var(--mono);color:var(--tx3);flex:none}
.sa-ni .bd{margin-left:auto;font:700 11px/18px var(--mono);padding:0 6px;border-radius:3px;color:var(--w);
  background:rgb(var(--w-rgb) / .12);border:1px solid rgb(var(--w-rgb) / .32);flex:none}
.sa-ni .bd.g{color:var(--gt);background:rgb(var(--g-rgb) / .1);border-color:rgb(var(--g-rgb) / .32)}
.sa-ni.on{color:var(--hi);background:linear-gradient(90deg,rgb(var(--c-rgb) / .24),rgb(var(--c-rgb) / .03));box-shadow:inset 0 0 0 1px rgb(var(--c-rgb) / .3)}
.sa-ni.on::before{content:'';position:absolute;left:-8px;top:6px;bottom:6px;width:3px;background:var(--c);box-shadow:0 0 10px var(--c)}
.sa-ni.on .dk-i{color:var(--ct);filter:drop-shadow(0 0 4px var(--c))}
.sa-nav .foot{margin-top:auto;border-top:1px solid var(--ln);padding-top:6px}

/* <main> 有組員版的 max-width／置中，這裡要蓋掉 */
.sa-main,.sa-side{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:auto;padding:1px;max-width:none;margin:0}
.sa-side>.sa-box:not(.sa-fill):not(.sa-logbox){flex:none}

/* 狀態列 */
.sa-status{grid-column:1/-1;display:flex;align-items:center;padding:0 10px;font:11px var(--mono);color:var(--tx2);border:1px solid var(--ln);
  background:rgb(var(--c-rgb) / .04);border-radius:3px;white-space:nowrap;overflow:hidden;min-width:0}
.sa-status>span{padding:0 12px;border-left:1px solid var(--ln)}
.sa-status>span:first-child{border-left:0;padding-left:2px;color:var(--gt);text-shadow:0 0 8px rgb(var(--g-rgb) / .6)}
.sa-status>span.bad:first-child{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .6)}
.sa-status>span.r{margin-left:auto}
.sa-status b{color:var(--hi);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 儀表板 ---------- */
.sa-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:none}
.sa-kpi{padding:11px 14px;overflow:hidden}
.sa-kpi .l{font:700 10px var(--mono);letter-spacing:.16em;color:var(--tx2);white-space:nowrap}
.sa-kpi .l span{font:600 12px -apple-system,"PingFang TC",sans-serif;letter-spacing:0;color:var(--tx);margin-left:6px}
.sa-kpi .sa-vr{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.sa-kpi .v{font:700 34px/1.12 var(--mono);color:var(--hi);text-shadow:0 0 18px rgb(var(--c-rgb) / .5);margin-top:5px;letter-spacing:-.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sa-kpi .v small{font:600 14px -apple-system,"PingFang TC",sans-serif;color:var(--tx2);margin-left:4px;text-shadow:none;letter-spacing:0}
.sa-kpi .s{font:600 11.5px var(--mono);color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-kpi .s.g{color:var(--gt)}
.sa-kpi .s.up{color:var(--up)}
.sa-kpi .s.r{color:var(--r)}
.sa-kpi.alert .v{text-shadow:0 0 18px rgb(var(--r-rgb) / .65)}
.sa-kpi .mini{flex:none;width:74px;height:30px;margin-bottom:7px}
.mini polyline{fill:none;stroke:var(--c);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--c))}
.mini.g polyline{stroke:var(--g);filter:drop-shadow(0 0 3px var(--g))}
.sa-chartp{flex:1;min-height:230px;display:flex;flex-direction:column}
.sa-chartp .sa-b{flex:1;padding:12px 14px 6px;display:flex;flex-direction:column;min-height:0}
.sa .chart,.sam .chart{flex:1;height:auto;margin-top:0;min-height:120px}
.sa .chart .ln,.sam .chart .ln{filter:drop-shadow(0 0 4px var(--c))}
.sa .chart .plot,.sam .chart .plot{overflow:hidden}
/* 走勢圖上一道光由左往右掃過去 */
.sa .chart .plot::after,.sam .chart .plot::after{content:'';position:absolute;top:0;bottom:0;width:90px;left:-90px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--c-rgb) / .17),transparent);animation:sasweep 6s linear infinite}
@keyframes sasweep{to{left:100%}}
.sa .chart .yax,.sam .chart .yax{font-family:var(--mono)}
.sa-row{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;flex:none}
.sa-gs{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:8px 14px}
.sa-g{display:flex;align-items:center;gap:14px;min-height:118px;padding:4px 6px;border-radius:3px;width:100%}
.sa-g:hover{background:rgb(var(--c-rgb) / .06)}
.sa-g.on{background:rgb(var(--c-rgb) / .1);box-shadow:inset 0 0 0 1px rgb(var(--c-rgb) / .35)}
.sa-ring{position:relative;width:96px;height:96px;flex:none}
.sa-ring svg{position:absolute;inset:0;width:100%;height:100%}
.sa-ring .tk{stroke:rgb(var(--c-rgb) / .38);stroke-width:1}
.sa-ring .bg{fill:none;stroke:rgb(var(--c-rgb) / .1);stroke-width:7}
.sa-ring .fg{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--c));transition:stroke-dasharray .6s ease}
.sa-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 19px var(--mono);color:var(--hi);text-shadow:0 0 10px rgb(var(--c-rgb) / .6)}
.sa-ring b small{font-size:11px;color:var(--tx2)}
.sa-ring>b{display:flex;align-items:center;justify-content:center}
.sa-gt{min-width:0}
.sa-gt b{display:block;font-size:15px;color:var(--hi);font-weight:650}
.sa-gt span{display:block;font:12px var(--mono);color:var(--tx2);margin-top:3px;white-space:nowrap}
.sa-gt em{font-style:normal;color:var(--up)}
.sa-blds{padding:6px 14px}
.sa-bld{display:grid;grid-template-columns:64px 1fr;gap:4px 12px;align-items:center;padding:9px 0 8px;border-bottom:1px solid var(--ln)}
.sa-bld:last-child{border-bottom:0}
.sa-bld .n{color:var(--hi);font-weight:600;font-size:13px;white-space:nowrap}
.sa-bld .m{grid-column:2;display:flex;justify-content:space-between;font:11.5px var(--mono);color:var(--tx2)}
.sa-bld .m b{color:var(--hi)}
.sa-led{display:flex;gap:2px;height:14px;min-width:0}
.sa-led i{flex:1;background:rgb(var(--c-rgb) / .07);border-radius:1px}
.sa-led i.on{background:var(--c);box-shadow:0 0 6px rgb(var(--c-rgb) / .7)}
.sa-led i.mid{background:var(--w);box-shadow:0 0 6px rgb(var(--w-rgb) / .6)}

/* 現在動態：雷達點（作業中的人一圈一圈往外擴） */
.sa-live{display:grid;grid-template-columns:20px 84px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 14px;width:100%;
  border-bottom:1px solid var(--ln);font-size:12.5px}
.sa-live:last-child{border-bottom:0}
.sa-live:hover,.sa-live.on{background:rgb(var(--c-rgb) / .07)}
.sa-live b{color:var(--hi);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-live .pl{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-live .ago{color:var(--tx3);font:11px var(--mono);white-space:nowrap}
.sa-live.joined,.sa-tbl tr.joined td{animation:sajoin 1.6s ease-out 1}
@keyframes sajoin{0%{background:rgb(var(--g-rgb) / .3)}100%{background:transparent}}
.sa-radar{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g);margin-left:3px;flex:none;vertical-align:middle}
.sa-radar::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--g);animation:saping 2s ease-out infinite}
.sa-radar.warn{background:var(--w);box-shadow:0 0 10px var(--w)}
.sa-radar.warn::after,.sa-radar.off::after{display:none}
.sa-radar.off{background:var(--tx3);box-shadow:none}
@keyframes saping{from{transform:scale(.35);opacity:1}to{transform:scale(1.4);opacity:0}}

/* 數值異常：左邊一條橘線，超過 50% 變紅並慢慢閃 */
.sa-al{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:1px 10px;padding:8px 14px 8px 17px;border-bottom:1px solid var(--ln);
  position:relative;font-size:12.5px;width:100%}
.sa-al:last-of-type{border-bottom:0}
.sa-al:hover{background:rgb(var(--c-rgb) / .06)}
.sa-al::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--w);box-shadow:0 0 8px var(--w)}
.sa-al.hi::before{background:var(--r);box-shadow:0 0 10px var(--r)}
.sa-al.hi{animation:saalarm 2.4s ease-in-out infinite}
@keyframes saalarm{0%,100%{background:linear-gradient(90deg,rgb(var(--r-rgb) / .14),transparent 60%)}50%{background:linear-gradient(90deg,rgb(var(--r-rgb) / .03),transparent 60%)}}
.sa-al b{font:700 13px var(--mono);color:var(--hi);grid-row:span 2;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-al .f{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-al .ch{grid-column:2;font:12px var(--mono);color:var(--tx2);white-space:nowrap}
.sa-al .ch em{font-style:normal;color:var(--w);font-weight:700}
.sa-al.hi .ch em{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .6)}
.sa-al .pct{grid-row:1/span 2;grid-column:3;align-self:center;font:700 13.5px var(--mono);color:var(--w);white-space:nowrap}
.sa-al.hi .pct{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .65)}

/* 操作記錄（儀表板右下那一小塊） */
.sa-logbox{flex:1;min-height:150px;overflow:hidden;display:flex;flex-direction:column}
.sa-logs{flex:1;min-height:0;overflow:auto}
.sa-log{display:grid;grid-template-columns:62px 52px 72px minmax(0,1fr);gap:8px;align-items:center;padding:6px 14px;width:100%;
  font:11.5px var(--mono);color:var(--tx2);border-bottom:1px dashed rgb(var(--c-rgb) / .09)}
.sa-log:hover{background:rgb(var(--c-rgb) / .06)}
.sa-log .t{color:var(--tx3)}
.sa-log .w{color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:12px -apple-system,"PingFang TC",sans-serif}
.sa-log .x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:12px -apple-system,"PingFang TC",sans-serif}
.sa-log .x b{font-family:var(--mono);color:var(--hi);font-weight:600}
.sa-log.new{animation:sanew 3s ease-in-out infinite}
@keyframes sanew{0%,100%{background:linear-gradient(90deg,rgb(var(--c-rgb) / .14),transparent)}50%{background:linear-gradient(90deg,rgb(var(--c-rgb) / .04),transparent)}}
.tag2{display:inline-block;font:700 9.5px/16px var(--mono);letter-spacing:.08em;text-align:center;border:1px solid currentColor;border-radius:2px;
  padding:0 4px;white-space:nowrap;vertical-align:middle}
.tag2.ok{color:var(--gt)}
.tag2.info{color:var(--ct)}
.tag2.warn{color:var(--w)}
.tag2.red{color:var(--r);text-shadow:0 0 6px rgb(var(--r-rgb) / .5)}
.tag2.off{color:var(--tx3)}

/* 今天各人完成 */
.sa-todaybox{flex:none;max-height:42%;display:flex;flex-direction:column}
.sa-tbs{padding:4px 14px 8px;overflow:auto;min-height:0}
.sa-tb{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr) 56px;gap:12px;align-items:center;padding:8px 0;
  border-bottom:1px dashed rgb(var(--c-rgb) / .1)}
.sa-tb:last-child{border-bottom:0}
.sa-tb .ids{font-size:11.5px;color:var(--tx2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-tb .c{font:700 18px var(--mono);color:var(--hi);text-align:right;text-shadow:0 0 10px rgb(var(--c-rgb) / .5)}
.sa-tb .c small{font:12px -apple-system,"PingFang TC",sans-serif;color:var(--tx2);text-shadow:none}

/* ---------- 清單表格 ---------- */
.sa-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.sa-tbl th{position:sticky;top:0;z-index:1;background:#07111f;text-align:left;font:700 10px var(--mono);letter-spacing:.16em;color:var(--tx2);
  padding:0 12px;height:32px;border-bottom:1px solid var(--ln);white-space:nowrap}
.sa-tbl td{padding:0 12px;height:40px;border-bottom:1px solid rgb(var(--c-rgb) / .08);white-space:nowrap;color:var(--tx)}
.sa-tbl tr.tall td{height:54px}
.sa-tbl th:first-child,.sa-tbl td:first-child{padding-left:16px}
.sa-tbl td.id{font:700 13px var(--mono);color:var(--hi)}
.sa-tbl td.hi{color:var(--hi)}
.sa-tbl .dim{color:var(--tx2)}
.sa-tbl td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sa-tbl td.clip{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.sa-tbl .r{text-align:right}
.sa-tbl td.red{color:var(--r);font-weight:700;font-family:var(--mono);text-shadow:0 0 8px rgb(var(--r-rgb) / .5)}
.sa-tbl td.amb{color:var(--w);font-weight:700;font-family:var(--mono)}
.sa-tbl tbody tr[data-ajump],.sa-tbl tbody tr[data-wwho]{cursor:pointer}
.sa-tbl tbody tr[data-ajump]:hover td,.sa-tbl tbody tr[data-wwho]:hover td{background:rgb(var(--c-rgb) / .05)}
.sa-tbl tr.sel td{background:rgb(var(--c-rgb) / .11)}
.sa-tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--c)}
.sa-tbl tr.grp td{height:30px;background:rgb(var(--c-rgb) / .05);font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--ct)}
/* 超過 50% 的整列一起閃紅，左邊一條紅線 */
.sa-tbl tr.hi td{animation:sarow 2.4s ease-in-out infinite}
.sa-tbl tr.hi td:first-child{box-shadow:inset 3px 0 0 var(--r)}
@keyframes sarow{0%,100%{background-color:rgb(var(--r-rgb) / .13)}50%{background-color:rgb(var(--r-rgb) / .03)}}
.sa-tbl tr.hi.sel td{animation:none;background:rgb(var(--c-rgb) / .11)}
.sa-tbl tr.hi.sel td:first-child{box-shadow:inset 3px 0 0 var(--c)}
.sa .who,.sam .who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0;max-width:100%}
.sa .who .nm,.sam .who .nm{overflow:hidden;text-overflow:ellipsis}
.sa-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 -apple-system,"PingFang TC",sans-serif;
  color:var(--ct);border:1px solid rgb(var(--c-rgb) / .5);background:rgb(var(--c-rgb) / .08);flex:none}
.sa-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--ln);flex:none}
.sa-chips .r{margin-left:auto;font:11px var(--mono);color:var(--tx2);white-space:nowrap}
.sa-c2{height:28px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--ln);border-radius:3px;font-size:12.5px;
  color:var(--tx2);background:rgb(var(--c-rgb) / .03);white-space:nowrap}
.sa-c2:hover{color:var(--hi);border-color:rgb(var(--c-rgb) / .45)}
.sa-c2.on{border-color:var(--c);color:var(--hi);background:rgb(var(--c-rgb) / .16);box-shadow:0 0 12px rgb(var(--c-rgb) / .3)}
.sa-wbar{display:flex;align-items:center;gap:12px}
.sa-wbar .sa-led{width:min(220px,18vw);flex:none}
.sa-wbar b{font:700 18px var(--mono);color:var(--hi);text-shadow:0 0 10px rgb(var(--c-rgb) / .5)}

/* ---------- 右欄：設備、人、類別 ---------- */
.sa-dh{padding:14px 16px 12px;border-bottom:1px solid var(--ln);display:flex;align-items:flex-start;gap:10px;flex:none}
.sa-dhm{flex:1;min-width:0}
.sa-dh .id{font:700 26px/1.15 var(--mono);color:var(--hi);text-shadow:0 0 14px rgb(var(--c-rgb) / .55);overflow-wrap:anywhere}
.sa-dh .id.txt{font-family:-apple-system,"PingFang TC",sans-serif;font-size:22px}
.sa-dh .sub{font-size:12.5px;color:var(--tx2);margin-top:4px}
.sa-dh .sub2{font-size:12.5px;color:var(--tx);margin-top:3px}
.sa-dh .tag2{margin-top:6px;font-size:10.5px;padding:2px 7px;line-height:16px;flex:none}
.sa-x{flex:none;width:30px;height:30px;margin:-2px -6px 0 0;display:grid;place-items:center;border-radius:3px;color:var(--tx2);font-size:15px}
.sa-x:hover{color:var(--hi);background:rgb(var(--c-rgb) / .1)}
.sa-pad{padding:12px 14px}
.sa-grp{padding:10px 14px 4px;font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--ct)}
.sa-mt{width:100%;border-collapse:collapse;font-size:12.5px}
.sa-mt th{font:700 10px var(--mono);letter-spacing:.14em;color:var(--tx2);text-align:right;padding:6px 8px;border-bottom:1px solid var(--ln)}
.sa-mt th:first-child{text-align:left}
.sa-mt td{padding:8px;border-bottom:1px solid rgb(var(--c-rgb) / .08);text-align:right;font-family:var(--mono);color:var(--tx);white-space:nowrap}
.sa-mt td:first-child{text-align:left;font-family:-apple-system,"PingFang TC",sans-serif;color:var(--tx2)}
.sa-mt tr:last-child td{border-bottom:0}
.sa-mt tr.on td{background:rgb(var(--c-rgb) / .08)}
.sa-mt .red{color:var(--r);font-weight:700;text-shadow:0 0 8px rgb(var(--r-rgb) / .55)}
.sa-mt .amb{color:var(--w);font-weight:700}
.sa-mt.kv td{text-align:left;white-space:normal;font-family:inherit}
.sa-mt.kv td:first-child{width:56px;color:var(--tx3)}
.sa-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border:1px solid rgb(var(--c-rgb) / .45);border-radius:3px;
  color:var(--ct);font-weight:650;font-size:13.5px;background:rgb(var(--c-rgb) / .06);text-shadow:0 0 8px rgb(var(--c-rgb) / .5);white-space:nowrap}
.sa-fchips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 0}
.sa-fchips .sa-c2{height:26px;padding:0 10px;font-size:12px}
.sa-t6{padding-top:20px}
.sa-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
.sa-thumbs figure{margin:0;min-width:0}
.sa-thumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;border:1px solid rgb(var(--c-rgb) / .25);cursor:zoom-in;
  background:rgb(var(--c-rgb) / .05)}
.sa-thumbs figcaption{font-size:10.5px;color:var(--tx3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-warnbox{margin:12px 14px 0;padding:11px 13px;border:1px solid rgb(var(--r-rgb) / .45);border-radius:3px;
  background:linear-gradient(90deg,rgb(var(--r-rgb) / .12),transparent 75%);box-shadow:inset 3px 0 0 var(--r)}
.sa-warnbox b{color:var(--hi);font-size:13.5px}
.sa-warnbox div{font-size:12px;color:var(--tx2);margin-top:3px}
.sa-person{display:flex;align-items:center;gap:14px;padding:16px}
.sa-person .nm{font-size:21px;font-weight:700;color:var(--hi);overflow-wrap:anywhere}
.sa-person .pl{font-size:12.5px;color:var(--tx2);margin-top:2px}
.sa-person .tag2{font-size:10.5px;padding:2px 7px;line-height:16px;flex:none}
.sa-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);flex:none}
.sa-stats>div{padding:10px 14px;min-width:0}
.sa-stats>div+div{border-left:1px solid var(--ln)}
.sa-stats span{display:block;font:700 10px var(--mono);letter-spacing:.14em;color:var(--tx2)}
.sa-stats b{display:block;font:700 24px/1.25 var(--mono);color:var(--hi);text-shadow:0 0 12px rgb(var(--c-rgb) / .5)}
.sa-stats b small{font:600 12px -apple-system,"PingFang TC",sans-serif;color:var(--tx2);margin-left:3px;text-shadow:none}
.sa-tl{padding:4px 14px}
.sa-tli{display:grid;grid-template-columns:62px 54px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed rgb(var(--c-rgb) / .1);width:100%}
.sa-tli:last-child{border-bottom:0}
.sa-tli .t{font:12px var(--mono);color:var(--tx3)}
.sa-tli .x{min-width:0}
.sa-tli .x b{color:var(--hi);font-weight:600}
.sa-tli .x b span{font-family:var(--mono)}
.sa-tli .x>span{display:block;font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-dev{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:7px 14px;border-bottom:1px dashed rgb(var(--c-rgb) / .08);
  font-size:12.5px;width:100%}
.sa-dev:hover{background:rgb(var(--c-rgb) / .06)}
.sa-dev b{font:600 13px var(--mono);color:var(--hi)}
.sa-dev span{font:12px var(--mono);color:var(--tx2)}
.sa-dev i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g)}
/* 類別明細：一棟一塊，編號排成小方塊（綠＝完成、橘＝進行中） */
.sa-cb{margin:6px 14px 10px;padding:8px 10px;border:1px solid rgb(var(--c-rgb) / .1);border-radius:3px;background:rgb(var(--c-rgb) / .025)}
.sa-cbh{font-weight:650;color:var(--hi);font-size:13px;margin-bottom:6px}
.sa-cbh span{color:var(--tx3);font-weight:400}
.sa-fr{display:flex;gap:10px;align-items:flex-start;padding:3px 0}
.sa-fr .fl{flex:none;width:38px;padding:0;font:600 11.5px/24px var(--mono);color:var(--tx2)}
.sa-ids{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.sa-id{height:24px;padding:0 7px;border:1px solid rgb(var(--c-rgb) / .3);border-radius:2px;font:600 11.5px/22px var(--mono);color:var(--tx);
  background:rgb(var(--c-rgb) / .04);white-space:nowrap}
.sa-id:hover{border-color:var(--c);color:var(--hi)}
.sa-id.done{border-color:rgb(var(--g-rgb) / .5);color:var(--gt);background:rgb(var(--g-rgb) / .08)}
.sa-id.doing{border-color:rgb(var(--w-rgb) / .6);color:var(--w);background:rgb(var(--w-rgb) / .08)}
/* 近 6 個月大圖 */
.sa .chart.t6,.sam .chart.t6{height:180px;flex:none;margin-top:4px;min-height:0}
.chart.t6 .plot,.chart-x.t6x{margin:0 22px}
.sa .chart.t6 .plot,.sam .chart.t6 .plot{overflow:visible}
.sa .chart.t6 .plot::after,.sam .chart.t6 .plot::after{display:none}
.t6 .rated{stroke:var(--r);stroke-dasharray:5 4;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.9}
.t6 .rated-lab{position:absolute;left:0;transform:translateY(-130%);font-size:10.5px;color:var(--r);font-weight:600;white-space:nowrap}
.t6 .pt2{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.t6 .pt2.cur{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-shadow:0 0 0 4px rgb(var(--c-rgb) / .22),0 0 10px var(--c)}
.t6 .pt2.bad{background:var(--r);box-shadow:0 0 0 4px rgb(var(--r-rgb) / .25),0 0 10px var(--r)}
.t6 .vlab{position:absolute;transform:translate(-50%,-165%);font:600 10.5px var(--mono);color:var(--tx2);white-space:nowrap}
.t6 .vlab.cur{color:var(--hi)}
.t6 .vlab.bad{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .6)}
.chart-x.t6x span{transform:translateX(-50%)}

/* 更新說明、教學在電腦版指揮中心裡：中間一大欄 */
.sa-doc{padding:16px 22px 28px}
.sa-doc>*{max-width:720px}

/* 窄一點的電腦（1024～1360）：縮小字、拿掉小折線，KPI 改兩排 */
@media (max-width:1359px){
  .sa-kpi .mini{display:none}
  .sa-clock{font-size:0}
  .sa-clock b{font-size:16px;margin-left:0}
}
@media (max-width:1199px){
  .sa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-kpi .v{font-size:28px}
  .sa-row{grid-template-columns:1fr}
  .sa-logo .sa-tag,.sa-top>.sa-sep{display:none}
  .sa-gs{grid-template-columns:1fr 1fr}
}

/* ---------- 手機版（一欄）：自己的頂列、頁籤、最下面一條狀態 ---------- */
body.adm-phone .topbar,body.adm-phone #monthbar,body.adm-phone #syncbar{display:none !important}
body.adm-phone main#view{max-width:none;padding:0}
body.adm-phone .toast{bottom:calc(var(--safe-bot) + 46px)}
.sam{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--safe-bot) + 40px)}
.sam-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:var(--safe-top) 6px 0 2px;
  height:calc(50px + var(--safe-top));border-bottom:1px solid var(--ln);
  background:linear-gradient(90deg,rgb(var(--c-rgb) / .12),transparent 70%),rgb(var(--bg-rgb) / .94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sam-top .bk{width:40px;height:44px;font-size:30px;line-height:1;color:var(--tx2);display:grid;place-items:center;flex:none}
.sam-top .mk{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgb(var(--c-rgb) / .55);border-radius:6px;color:var(--ct);
  box-shadow:0 0 10px rgb(var(--c-rgb) / .35);flex:none}
.sam-top .mk .dk-i{width:15px;height:15px}
.sam-top .ttl{font-size:16px;color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sam-top .sa-tag{font-size:9px;padding:1px 5px;letter-spacing:.14em}
.sam-top .clk2{margin-left:auto;font:600 14px var(--mono);color:var(--hi);text-shadow:0 0 10px rgb(var(--c-rgb) / .6);flex:none;font-variant-numeric:tabular-nums}
.sam-top .mn{width:40px;height:44px;font-size:22px;color:var(--tx2);display:grid;place-items:center;flex:none}
.sam-tabs{display:flex;gap:6px;padding:9px 12px;overflow-x:auto;flex:none;border-bottom:1px solid var(--ln);scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.sam-tabs::-webkit-scrollbar{display:none}
.sam-tabs button{height:30px;padding:0 11px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ln);border-radius:3px;font-size:13px;
  color:var(--tx2);white-space:nowrap;flex:none}
.sam-tabs button.on{border-color:var(--c);color:var(--hi);background:rgb(var(--c-rgb) / .16);box-shadow:0 0 12px rgb(var(--c-rgb) / .3)}
.sam-tabs b{font:700 11px var(--mono);color:var(--w)}
.sam-tabs b.g{color:var(--gt)}
.sam-tabs .sam-mo{color:var(--tx)}
.sam-tabs .sam-mo .dk-i{width:14px;height:14px}
.sam-tabs .sam-mo.alt{border-color:rgb(var(--w-rgb) / .55);color:var(--w)}
.sam-body{flex:1;width:100%;max-width:720px;margin:0 auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sam-body>*{flex:none}
.sam .sa-scroll{overflow:visible}
.sam .sa-fill{flex:none}
.sam-status{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;
  height:calc(30px + var(--safe-bot));padding:0 14px var(--safe-bot);font:10.5px var(--mono);color:var(--tx2);white-space:nowrap;overflow:hidden;
  border-top:1px solid var(--ln);background:linear-gradient(90deg,rgb(var(--c-rgb) / .08),transparent),rgb(var(--bg-rgb) / .96)}
.sam-status span:first-child{color:var(--gt);text-shadow:0 0 8px rgb(var(--g-rgb) / .6)}
.sam-status span.bad:first-child{color:var(--r);text-shadow:0 0 8px rgb(var(--r-rgb) / .6)}
.sam-status .r{margin-left:auto}
.sam-status b{color:var(--hi)}
.sam-kpis{grid-template-columns:1fr 1fr}
.sam-kpis .sa-kpi{padding:9px 11px}
.sam-kpis .sa-kpi .l{font-size:9.5px;letter-spacing:.14em}
.sam-kpis .sa-kpi .l span{font-size:11.5px;margin-left:4px}
.sam-kpis .sa-kpi .v{font-size:26px;margin-top:3px}
.sam-kpis .sa-kpi .v small{font-size:12px}
.sam-kpis .sa-kpi .s{font-size:10.5px}
.sam-kpis .sa-kpi .mini{display:none}
.sam-chart{display:flex;flex-direction:column}
.sam-chart .sa-b{padding:8px 10px 4px;display:flex;flex-direction:column}
.sam-chart .chart{height:140px;flex:none}
.sam .chart .yax{width:34px;font-size:9.5px}
.sam .chart-x{margin-right:34px;font-size:9.5px}
.sam .chart-x.t6x{margin:0 22px}
.sam-gs{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:6px 8px 8px}
.sam-gs .sa-g{gap:10px;min-height:74px;padding:4px}
.sam-gs .sa-ring{width:62px;height:62px}
.sam-gs .sa-ring b{font-size:13px}
.sam-gs .sa-ring b small{font-size:9px}
.sam-gs .sa-gt b{font-size:13px}
.sam-gs .sa-gt span{font-size:11px;margin-top:1px}
.sam .sa-al{padding:9px 12px 9px 15px}
.sam .sa-live{grid-template-columns:18px minmax(0,1fr) auto;padding:11px 12px;row-gap:2px}
.sam .sa-live .ago{grid-column:3;grid-row:1}
.sam .sa-live .pl{grid-column:2/span 2;grid-row:2}
.sam .sa-log{grid-template-columns:58px 50px minmax(0,1fr);padding:7px 12px}
.sam .sa-log .w{grid-column:3}
.sam .sa-log .x{grid-column:1/-1;padding-left:0}
.sam .sa-tb{grid-template-columns:96px minmax(0,1fr) 46px}
.sam .sa-todaybox{max-height:none}
.sam .sa-dh .id{font-size:24px}
.sam .sa-stats b{font-size:21px}
.sam .sa-tli{grid-template-columns:56px 50px minmax(0,1fr) auto;gap:8px;text-align:left}
.sam .sa-tli .t{font-size:11px}
.sam .sa-tli .chev{color:var(--tx3);font-size:18px}
.sam .sa-tli .x .by{color:var(--tx3);font-size:11.5px}
.sa-tl .sa-grp{padding-left:0;padding-right:0}
.sam .sa-dev{padding:10px 14px}
.sam-chips{border:0;padding:0 0 2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.sam-chips::-webkit-scrollbar{display:none}
.sam-chips .sa-c2{height:30px;flex:none}
.sam-sum{display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
.sam-sum span{font-size:12px;color:var(--tx2)}
.sam-sum b{font:700 30px var(--mono);color:var(--hi)}
.sam-sum b.r{text-shadow:0 0 14px rgb(var(--r-rgb) / .6)}
.sam-sum b small{font:13px -apple-system,"PingFang TC",sans-serif;color:var(--tx2)}
.sam-foot{margin:2px 4px 6px;font-size:12px;color:var(--tx3);line-height:1.6}
.sa-wk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:11px 14px;width:100%;
  border-bottom:1px solid var(--ln)}
.sa-wk:last-child{border-bottom:0}
.sa-wk .c{font:700 20px var(--mono);color:var(--hi);text-shadow:0 0 10px rgb(var(--c-rgb) / .5)}
.sa-wk .c small{font:12px -apple-system,"PingFang TC",sans-serif;color:var(--tx2);text-shadow:none}
.sa-wk .sa-led{grid-column:1/-1}
.sa-wk .s{grid-column:1/-1;font-size:11.5px;color:var(--tx2)}
#adm-person{scroll-margin-top:calc(var(--safe-top) + 104px)}
.sam .empty{padding:44px 16px}

/* 外觀與顏色的預覽（放在跳出來的面板裡） */
.sa-prev{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:6px;
  background:linear-gradient(rgb(var(--c-rgb) / .05) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgb(var(--c-rgb) / .05) 1px,transparent 1px) 0 0/20px 20px,var(--bg)}
.sa-prev .sam-gs .sa-g{cursor:default}

/* 不想看動畫的人（系統設定「減少動態效果」）：全部停下來 */
@media (prefers-reduced-motion:reduce){
  .sa *,.sam *,.sa-prev *{animation:none !important;transition:none !important}
}

/* ============================================================
   管理員：「原本」主題（2026-10-04 起，html.admin-classic）
   版面、功能跟指揮中心完全一樣，只是樣子回到組員那套看盤風：
   實心面板、細線條、沒有格線底、沒有發光、沒有四角框、不閃；英文代號換成中文；深色、淺色都能用。
   之後要加主題：照這一段的寫法，用 html.<主題的 class> 開頭蓋過去就好（app.js 的 THEMES 加一筆）。
   ============================================================ */
html.admin-classic :is(.sa,.sam,.sa-prev){--ln:var(--line);--pan:var(--panel)}
html.admin-classic .sa-prev{background:var(--bg)}
/* 不閃、不發光 */
html.admin-classic :is(.sa,.sam,.sa-prev) :is(*,*::before,*::after){animation:none !important;text-shadow:none !important;filter:none !important}
/* 外框：實心面板、圓角，沒有格線底、沒有四角框 */
html.admin-classic .sa{background:var(--bg)}
html.admin-classic .sa-box{border-color:var(--line);border-radius:var(--r-sm)}
html.admin-classic .sa-box::before,html.admin-classic .sa-box::after{display:none}
html.admin-classic .sa-h{background:none}
html.admin-classic .sa-h .k,html.admin-classic .sa-tag{display:none}
html.admin-classic :is(.sa-logo .mk,.sam-top .mk){box-shadow:none;border-color:var(--line-2);color:var(--accent-text)}
html.admin-classic :is(.sa-chip,.sa-user){background:var(--panel);border-color:var(--line-2)}
html.admin-classic .sa-user i,html.admin-classic .sa-dot{box-shadow:none}
html.admin-classic .cdring .bg{stroke:var(--line-2)}
html.admin-classic .sa-ni.on{background:rgb(var(--accent-rgb) / .14);box-shadow:none}
html.admin-classic .sa-ni.on::before{box-shadow:none}
html.admin-classic .sa-ni.on .dk-i{color:var(--accent-text)}
html.admin-classic .sa-status{background:var(--panel);border-color:var(--line)}
html.admin-classic .sa-status>span{border-left-color:var(--line)}
html.admin-classic .sam-top{background:rgb(var(--bg-rgb) / .94)}
html.admin-classic .sam-status{background:rgb(var(--bg-rgb) / .96);border-top-color:var(--line)}
html.admin-classic :is(.sa-c2.on,.sam-tabs button.on){box-shadow:none}
/* 英文代號換成中文（app.js 在那些元素上放了 data-zh） */
html.admin-classic .sa-kpi .l{font-size:0;letter-spacing:0}
html.admin-classic .sa-kpi .l span{font-size:12.5px;margin-left:0;color:var(--dim)}
html.admin-classic .sam-kpis .sa-kpi .l span{font-size:12px}
html.admin-classic .tag2[data-zh]{font-size:0;letter-spacing:0}
html.admin-classic .tag2[data-zh]::after{content:attr(data-zh);font:600 11px/16px -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}
html.admin-classic .sa-nav .sec[data-zh]{font-size:0;letter-spacing:0}
html.admin-classic .sa-nav .sec[data-zh]::after{content:attr(data-zh);font:600 12px/1.4 -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;letter-spacing:.06em}
html.admin-classic :is(.sa-status,.sam-status)>span[data-zh]{font-size:0}
html.admin-classic :is(.sa-status,.sam-status)>span[data-zh]::after{content:attr(data-zh);font:600 11.5px -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}
/* 進度：跟組員一樣，完成用完成色（綠）、做一半用橘色；圓環不要刻度 */
html.admin-classic .sa-ring .tk{display:none}
html.admin-classic .sa-ring .bg{stroke:var(--panel-2)}
html.admin-classic .sa-ring .fg{stroke:var(--brand)}
html.admin-classic .sa-led i{background:var(--panel-2);box-shadow:none}
html.admin-classic .sa-led i.on{background:var(--brand)}
html.admin-classic .sa-led i.mid{background:var(--warn)}
html.admin-classic .sa-g.on{background:rgb(var(--accent-rgb) / .1)}
/* 人、異常、記錄：只留顏色，不發光、不擴散、不閃 */
html.admin-classic .sa-radar,html.admin-classic .sa-dev i,html.admin-classic .sa-al::before{box-shadow:none}
html.admin-classic .sa-radar::after{display:none}
html.admin-classic .sa-al.hi{background:rgb(var(--bad-rgb) / .07)}
html.admin-classic .sa-log.new{background:rgb(var(--accent-rgb) / .07)}
html.admin-classic .sa-tbl th{background:var(--panel)}
html.admin-classic .sa-tbl tr.hi td{background:rgb(var(--bad-rgb) / .07)}
html.admin-classic .sa-tbl tr.hi.sel td{background:rgb(var(--accent-rgb) / .11)}
html.admin-classic :is(.sa,.sam) .chart .plot::after{display:none}
html.admin-classic .t6 .pt2,html.admin-classic .t6 .pt2.cur,html.admin-classic .t6 .pt2.bad{box-shadow:none}

/* ============================================================
   管理員：ONCE 主題（TWICE，2026-10-04 起，html.admin-once）
   以「原本」的樸素外觀為底（html 同時掛 admin-classic），再加 TWICE 的配色與 Lovely 娃娃。
   官方色：杏桃 #FCC89B、霓虹桃紅 #FF5FA2；重點色／完成色／上升色由 app.js 寫在 <html> 上（本命的顏色）。
   娃娃都是 CSS 背景圖：只有選 ONCE 時才會下載，別的主題不會多讀任何圖。
   狀態色的意思不變：綠＝完成、橘＝要留意、紅＝刪除。
   ============================================================ */
html.admin-once{
  --bg:#0d1030; --panel:#161a42; --panel-2:#20255a; --panel-3:#2b3170;
  --line:#272c62; --line-2:#363c7c;
  --fg:#ece8ff; --hi:#ffffff; --dim:#cbc6ef; --dim2:#a09ad2; --dim3:#706ba7;
  --bg-rgb:13 16 48; --grid-rgb:88 92 170;
  --warn:#ffa940; --warn-rgb:255 169 64; --warn-text:#ffc078;
  --bad:#ff4d6d; --bad-rgb:255 77 109;
  --gutter:#080a22; --once-a:#fcc89b; --once-a-rgb:252 200 155;
  color-scheme:dark}
html.admin-once[data-theme="light"]{
  --bg:#fff6ee; --panel:#ffffff; --panel-2:#fff0e2; --panel-3:#fde2ca;
  --line:#f5dcc7; --line-2:#ecc7a6;
  --fg:#3a2733; --hi:#24131e; --dim:#5d4553; --dim2:#8b6f7e; --dim3:#b89ca9;
  --bg-rgb:255 246 238; --grid-rgb:252 200 155;
  --warn:#ef6c00; --warn-rgb:239 108 0; --warn-text:#b23c00;
  --bad:#e0293a; --bad-rgb:224 41 58;
  --gutter:#f2dac4; --once-a:#e8935a; --once-a-rgb:232 147 90;
  color-scheme:light}
/* 底色：左上一點杏桃、右下一點重點色 */
html.admin-once body::before{
  background-image:radial-gradient(70% 45% at 12% 0%,rgb(var(--once-a-rgb) / .2),transparent 70%),
    radial-gradient(60% 45% at 100% 100%,rgb(var(--accent-rgb) / .12),transparent 70%);
  background-size:100% 100%;-webkit-mask-image:none;mask-image:none}
html.admin-once .sa{background:radial-gradient(55% 40% at 10% 0%,rgb(var(--once-a-rgb) / .16),transparent 70%),
  radial-gradient(45% 40% at 100% 100%,rgb(var(--accent-rgb) / .10),transparent 70%),var(--bg)}
html.admin-once .sa-box{border-radius:14px;box-shadow:0 1px 0 rgb(var(--once-a-rgb) / .28)}
html.admin-once .sa-h b::before{content:'♥';color:var(--accent);margin-right:6px;font-size:.85em}
html.admin-once :is(.sa-logo,.sam-top) .mk{border-color:rgb(var(--once-a-rgb) / .7);border-radius:50%}
html.admin-once :is(.sa-logo,.sam-top) .mk .dk-i{display:none}
html.admin-once :is(.sa-logo,.sam-top) .mk::after{content:'♥';color:var(--accent);font-size:15px;line-height:1}
html.admin-once .sa-ni.on{background:rgb(var(--accent-rgb) / .16)}
html.admin-once .sa-ring .bg{stroke:rgb(var(--once-a-rgb) / .22)}
html.admin-once .sa-g .sa-ring .fg{stroke:var(--m, var(--brand))}
html.admin-once :is(.sa-bld,.sa-tb,.sa-wk,.sa-tbl tr) .sa-led i.on{background:var(--m, var(--brand))}
html.admin-once .sa-led i{background:rgb(var(--once-a-rgb) / .16)}

/* Lovely 娃娃：平常藏起來，ONCE 才顯示 */
i.doll{display:none}
html.admin-once i.doll{display:inline-block;width:18px;height:25px;flex:none;vertical-align:-6px;font-style:normal;
  background:center/contain no-repeat}
html.admin-once i.doll.mini{width:15px;height:21px;margin-right:6px;vertical-align:-4px}
html.admin-once[data-theme="light"] i.doll,
html.admin-once[data-theme="light"] :is(.sa,.sam,.sa-prev) i.doll{filter:drop-shadow(0 1px 1.5px rgb(0 0 0 / .2)) !important}
html.admin-once :is(i.doll,.sa-av)[data-doll="nayeon"]{background-image:url(img/once/nayeon.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="jeongyeon"]{background-image:url(img/once/jeongyeon.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="momo"]{background-image:url(img/once/momo.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="sana"]{background-image:url(img/once/sana.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="jihyo"]{background-image:url(img/once/jihyo.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="mina"]{background-image:url(img/once/mina.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="dahyun"]{background-image:url(img/once/dahyun.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="chaeyoung"]{background-image:url(img/once/chaeyoung.png)}
html.admin-once :is(i.doll,.sa-av)[data-doll="tzuyu"]{background-image:url(img/once/tzuyu.png)}
/* 人的頭像：圓圈裡放那個人輪到的娃娃的頭 */
html.admin-once .sa-av[data-doll]{font-size:0;border-color:var(--m, rgb(var(--once-a-rgb) / .7));background-color:var(--panel-2);
  background-size:165%;background-position:50% 18%;background-repeat:no-repeat}
/* 沒資料的空白頁、右欄還沒選東西：放一隻娃娃（本命；沒選本命就每天換一位） */
html.admin-once :is(.sa-empty,.sa-hintbox)::before{content:'';display:block;width:58px;height:80px;margin:0 auto 10px;background:center/contain no-repeat}
html.admin-once .sa-empty.sm::before{width:34px;height:47px;margin-bottom:6px}
html.admin-once .sa-hintbox .dk-i{display:none}
html.admin-once[data-doll="nayeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/nayeon.png)}
html.admin-once[data-doll="jeongyeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/jeongyeon.png)}
html.admin-once[data-doll="momo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/momo.png)}
html.admin-once[data-doll="sana"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/sana.png)}
html.admin-once[data-doll="jihyo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/jihyo.png)}
html.admin-once[data-doll="mina"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/mina.png)}
html.admin-once[data-doll="dahyun"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/dahyun.png)}
html.admin-once[data-doll="chaeyoung"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/chaeyoung.png)}
html.admin-once[data-doll="tzuyu"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once/tzuyu.png)}

/* 首頁頂端的橫幅：本命一大隻、九位排一排 */
.once-banner{display:flex;align-items:center;gap:14px;padding:10px 16px;flex:none;min-height:70px;
  background:linear-gradient(100deg,rgb(var(--once-a-rgb) / .3),rgb(var(--accent-rgb) / .16) 60%,transparent) var(--panel) !important}
.once-banner .doll.hero{width:46px;height:64px}
.once-banner .ob-t b{display:block;font-size:19px;letter-spacing:.08em;color:var(--hi);font-weight:800}
.once-banner .ob-t b em{font-style:normal;color:var(--accent)}
.once-banner .ob-t span{font-size:12.5px;color:var(--dim)}
.once-banner .ob-row{margin-left:auto;display:flex;gap:5px;align-items:flex-end}
.once-banner .ob-row .doll{width:24px;height:33px;opacity:.88}
.once-banner .ob-row .doll.on{width:32px;height:44px;opacity:1}
.sam .once-banner{flex-wrap:wrap;row-gap:6px}
.sam .once-banner .ob-row{margin-left:0;width:100%;justify-content:space-between}
.sam .once-banner .ob-row .doll{width:22px;height:30px}
.sam .once-banner .ob-row .doll.on{width:28px;height:39px}
.sa-prev .once-banner{border-radius:12px}

/* 外觀與顏色：選本命（娃娃當按鈕） */
.once-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 2px}
.once-pick .op{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--bg);color:var(--fg);font-size:12px;white-space:nowrap;cursor:pointer}
.once-pick .op b{font-weight:600}
.once-pick .op.on{border-color:var(--m, var(--accent));background:rgb(var(--accent-rgb) / .12);box-shadow:inset 0 0 0 1px var(--m, var(--accent))}
.once-pick .op .doll{width:28px;height:39px}
.once-pick .op-all{width:28px;height:39px;display:grid;place-items:center;font-size:21px;color:var(--accent)}

/* ---------------- ONCE：娃娃款式（2026-10-05）----------------
   html[data-dollset] 決定用哪一套圖：lovely＝img/once/、baby＝球衣寶寶 img/once-baby2/、pixel＝像素 img/once-pixel2/。
   一樣都是 CSS 背景圖：沒選到的那一套不會下載。 */
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="nayeon"]{background-image:url(img/once-baby2/nayeon.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="jeongyeon"]{background-image:url(img/once-baby2/jeongyeon.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="momo"]{background-image:url(img/once-baby2/momo.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="sana"]{background-image:url(img/once-baby2/sana.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="jihyo"]{background-image:url(img/once-baby2/jihyo.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="mina"]{background-image:url(img/once-baby2/mina.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="dahyun"]{background-image:url(img/once-baby2/dahyun.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="chaeyoung"]{background-image:url(img/once-baby2/chaeyoung.png)}
html.admin-once[data-dollset="baby"] :is(i.doll,.sa-av)[data-doll="tzuyu"]{background-image:url(img/once-baby2/tzuyu.png)}
html.admin-once[data-dollset="baby"][data-doll="nayeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/nayeon.png)}
html.admin-once[data-dollset="baby"][data-doll="jeongyeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/jeongyeon.png)}
html.admin-once[data-dollset="baby"][data-doll="momo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/momo.png)}
html.admin-once[data-dollset="baby"][data-doll="sana"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/sana.png)}
html.admin-once[data-dollset="baby"][data-doll="jihyo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/jihyo.png)}
html.admin-once[data-dollset="baby"][data-doll="mina"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/mina.png)}
html.admin-once[data-dollset="baby"][data-doll="dahyun"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/dahyun.png)}
html.admin-once[data-dollset="baby"][data-doll="chaeyoung"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/chaeyoung.png)}
html.admin-once[data-dollset="baby"][data-doll="tzuyu"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-baby2/tzuyu.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="nayeon"]{background-image:url(img/once-pixel2/nayeon.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="jeongyeon"]{background-image:url(img/once-pixel2/jeongyeon.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="momo"]{background-image:url(img/once-pixel2/momo.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="sana"]{background-image:url(img/once-pixel2/sana.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="jihyo"]{background-image:url(img/once-pixel2/jihyo.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="mina"]{background-image:url(img/once-pixel2/mina.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="dahyun"]{background-image:url(img/once-pixel2/dahyun.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="chaeyoung"]{background-image:url(img/once-pixel2/chaeyoung.png)}
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av)[data-doll="tzuyu"]{background-image:url(img/once-pixel2/tzuyu.png)}
html.admin-once[data-dollset="pixel"][data-doll="nayeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/nayeon.png)}
html.admin-once[data-dollset="pixel"][data-doll="jeongyeon"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/jeongyeon.png)}
html.admin-once[data-dollset="pixel"][data-doll="momo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/momo.png)}
html.admin-once[data-dollset="pixel"][data-doll="sana"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/sana.png)}
html.admin-once[data-dollset="pixel"][data-doll="jihyo"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/jihyo.png)}
html.admin-once[data-dollset="pixel"][data-doll="mina"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/mina.png)}
html.admin-once[data-dollset="pixel"][data-doll="dahyun"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/dahyun.png)}
html.admin-once[data-dollset="pixel"][data-doll="chaeyoung"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/chaeyoung.png)}
html.admin-once[data-dollset="pixel"][data-doll="tzuyu"] :is(.sa-empty,.sa-hintbox)::before{background-image:url(img/once-pixel2/tzuyu.png)}
/* 像素版：放大縮小都維持像素的銳利邊 */
html.admin-once[data-dollset="pixel"] :is(i.doll,.sa-av,.sa-empty,.sa-hintbox),
html.admin-once[data-dollset="pixel"] :is(.sa-empty,.sa-hintbox)::before{image-rendering:pixelated}
/* 球衣寶寶：圖比較小、邊緣有一點白，描一圈白邊做成貼紙的樣子 */
html.admin-once[data-dollset="baby"] i.doll,
html.admin-once[data-dollset="baby"] :is(.sa,.sam,.sa-prev,.once-pick) i.doll{
  filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px rgb(0 0 0 / .25)) !important}

/* ============================================================
   管理員：「像素」主題（2026-10-05 起，html.admin-pixel）
   ONCE 的功能（本命、九位輪流、娃娃、橫幅）＋像素外觀：粉紅格子底、方角粗框、硬陰影、像素娃娃、像素糖果。
   html 上同時有 admin-classic（樸素底）、admin-once（ONCE 的東西）、admin-pixel（這一段，寫在後面蓋過去）。
   狀態色的意思不變：綠＝完成、橘＝要留意、紅＝刪除。
   ============================================================ */
html.admin-once.admin-pixel[data-theme="light"]{
  --bg:#ffeaf1; --panel:#ffffff; --panel-2:#fff1f6; --panel-3:#ffd9e6;
  --line:#f6bfd2; --line-2:#e48aad;
  --fg:#4a2337; --hi:#2d0f20; --dim:#6e3c55; --dim2:#9a6680; --dim3:#c79ab0;
  --bg-rgb:255 234 241; --grid-rgb:246 191 210;
  --warn:#ef6c00; --warn-rgb:239 108 0; --warn-text:#b23c00;
  --bad:#e0293a; --bad-rgb:224 41 58;
  --gutter:#f9cfe0; --once-a:#ff9fc0; --once-a-rgb:255 159 192;
  color-scheme:light}
html.admin-once.admin-pixel[data-theme="dark"]{
  --bg:#160d2a; --panel:#241a44; --panel-2:#2e2257; --panel-3:#3a2c6b;
  --line:#4a3a85; --line-2:#8a6ad6;
  --fg:#f3e8ff; --hi:#ffffff; --dim:#d6c3f3; --dim2:#a993d4; --dim3:#7462a3;
  --bg-rgb:22 13 42; --grid-rgb:74 58 133;
  --warn:#ffa940; --warn-rgb:255 169 64; --warn-text:#ffc078;
  --bad:#ff4d6d; --bad-rgb:255 77 109;
  --gutter:#0e0820; --once-a:#ff7fb0; --once-a-rgb:255 127 176; --gg:.11;
  color-scheme:dark}
/* 粉紅格子底（橫、直兩條半透明的條紋疊起來，交叉的地方比較深） */
html.admin-pixel body::before{
  background-image:linear-gradient(90deg,rgb(var(--once-a-rgb) / var(--gg,.17)) 50%,transparent 50%),linear-gradient(rgb(var(--once-a-rgb) / var(--gg,.17)) 50%,transparent 50%);
  background-size:48px 48px;-webkit-mask-image:none;mask-image:none}
html.admin-pixel .sa{background:linear-gradient(90deg,rgb(var(--once-a-rgb) / var(--gg,.17)) 50%,transparent 50%) 0 0/48px 48px,
  linear-gradient(rgb(var(--once-a-rgb) / var(--gg,.17)) 50%,transparent 50%) 0 0/48px 48px,var(--bg)}
/* 方角、粗框、硬陰影（沒有模糊的影子＝像素風） */
html.admin-pixel .sa-box{border-radius:0;border:3px solid var(--line-2);box-shadow:4px 4px 0 rgb(var(--once-a-rgb) / .5)}
html.admin-pixel .sa-h{border-bottom:3px solid var(--line-2)}
html.admin-pixel .sa-h b{letter-spacing:.04em}
html.admin-pixel :is(.sa-c2,.sam-tabs button,.sa-chip,.sa-user,.sa-user i,.tag2,.sa-id,.sa-ni,.sa-av,.sa-btn,.sa-x,.sam-top .mk,.sa-logo .mk){border-radius:0}
html.admin-pixel :is(.sa-c2.on,.sam-tabs button.on){box-shadow:3px 3px 0 rgb(var(--once-a-rgb) / .55)}
html.admin-pixel .sa-ni.on{box-shadow:inset 0 0 0 2px rgb(var(--accent-rgb) / .5)}
html.admin-pixel .sa-ring .fg{stroke-linecap:butt}
html.admin-pixel .sa-led i{border-radius:0}
html.admin-pixel .sa-status{border-radius:0;border-width:3px}
html.admin-pixel .sa-kpi .v,html.admin-pixel .sa-stats b,html.admin-pixel .sa-dh .id,
html.admin-pixel .once-banner .ob-t b{text-shadow:2px 2px 0 rgb(var(--once-a-rgb) / .65) !important;letter-spacing:.02em}
html.admin-pixel .once-banner{border-radius:0}

/* 橫幅兩邊放像素糖果、棒棒糖 */
html.admin-pixel .once-banner{position:relative}
html.admin-pixel .once-banner::after{content:'';position:absolute;right:10px;top:6px;width:33px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='18' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='30' y='0' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='0' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='9' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='12' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='15' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='18' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='21' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='27' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='30' y='3' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='0' y='6' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='3' y='6' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='6' y='6' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='9' y='6' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='12' y='6' width='3' height='3' fill='%238ee8cc'/%3E%3Crect x='15' y='6' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='18' y='6' width='3' height='3' fill='%238ee8cc'/%3E%3Crect x='21' y='6' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='24' y='6' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='27' y='6' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='30' y='6' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='0' y='9' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='3' y='9' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='6' y='9' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%238ee8cc'/%3E%3Crect x='12' y='9' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='15' y='9' width='3' height='3' fill='%238ee8cc'/%3E%3Crect x='18' y='9' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='21' y='9' width='3' height='3' fill='%238ee8cc'/%3E%3Crect x='24' y='9' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='27' y='9' width='3' height='3' fill='%23ff9fc0'/%3E%3Crect x='30' y='9' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='0' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='3' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='9' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='12' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='15' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='18' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='21' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='27' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='30' y='12' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='0' y='15' width='3' height='3' fill='%235b3a8a'/%3E%3Crect x='30' y='15' width='3' height='3' fill='%235b3a8a'/%3E%3C/svg%3E") center/contain no-repeat;
  image-rendering:pixelated;opacity:.95;display:block;border:0;filter:none}
/* 電腦版：九位排在右邊，糖果往上貼一點，不要碰到娃娃 */
html.admin-pixel .sa .once-banner::after{top:3px}
html.admin-pixel .once-banner .ob-t{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:8px}
html.admin-pixel .once-banner .ob-t::before{content:'';grid-row:1 / span 2;width:24px;height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='36' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='9' y='0' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='12' y='0' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='15' y='0' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='6' y='3' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='9' y='3' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='12' y='3' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='15' y='3' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='18' y='3' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='0' y='6' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='6' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='6' y='6' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='9' y='6' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='12' y='6' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='15' y='6' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='18' y='6' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='21' y='6' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='0' y='9' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='9' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='6' y='9' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='12' y='9' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='15' y='9' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='18' y='9' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='21' y='9' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='0' y='12' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='12' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='6' y='12' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='9' y='12' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='12' y='12' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='15' y='12' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='18' y='12' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='21' y='12' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='0' y='15' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='15' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='6' y='15' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='9' y='15' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='12' y='15' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='15' y='15' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='18' y='15' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='21' y='15' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='3' y='18' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='6' y='18' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='9' y='18' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='12' y='18' width='3' height='3' fill='%23ffffff'/%3E%3Crect x='15' y='18' width='3' height='3' fill='%23ff6fa5'/%3E%3Crect x='18' y='18' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='6' y='21' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='9' y='21' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='12' y='21' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='15' y='21' width='3' height='3' fill='%238a3a5c'/%3E%3Crect x='9' y='24' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='12' y='24' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='9' y='27' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='12' y='27' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='9' y='30' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='12' y='30' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='9' y='33' width='3' height='3' fill='%23f4d9a8'/%3E%3Crect x='12' y='33' width='3' height='3' fill='%23f4d9a8'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated}

/* ---------------- 桌寵（2026-10-05）：像素 Lovelys 在畫面最下面走來走去 ----------------
   疊在畫面上、選單和跳出來的面板下面（z-index 30）；整條不擋點擊，只有娃娃本身點得到 */
#pets{position:fixed;left:0;right:0;bottom:38px;height:60px;z-index:30;pointer-events:none}
body.adm-phone #pets{bottom:calc(var(--safe-bot) + 32px);height:48px}
.pet{position:absolute;left:0;bottom:0;width:40px;height:56px;padding:0;margin:0;border:0;background:none;pointer-events:auto;cursor:pointer;
  transition-property:transform;transition-timing-function:linear;-webkit-tap-highlight-color:transparent}
body.adm-phone .pet{width:30px;height:42px}
/* 手機：最下面多留一點空間，捲到底時最後一格不會被桌寵擋住 */
body.adm-phone:has(#pets) .sam{padding-bottom:calc(var(--safe-bot) + 86px)}
.pet-body{display:block;width:100%;height:100%;background:center bottom/contain no-repeat;image-rendering:pixelated;
  transform:scaleX(var(--dir,1));filter:drop-shadow(0 2px 0 rgb(0 0 0 / .22))}
.pet.walk .pet-body{animation:petstep .32s steps(2) infinite}
@keyframes petstep{50%{translate:0 -3px}}
.pet.hop .pet-body{animation:pethop .55s cubic-bezier(.3,.7,.4,1)}
@keyframes pethop{0%,100%{translate:0 0}40%{translate:0 -20px}}
.pet-say{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border-radius:10px;
  background:var(--panel);color:var(--hi);border:2px solid var(--accent);font:600 12.5px/1.25 -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;
  box-shadow:0 3px 0 rgb(0 0 0 / .18);pointer-events:none}
.pet-say::after{content:'';position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--accent)}
.pet-say.l{left:0;transform:none}
.pet-say.l::after{left:16px}
.pet-say.r{left:auto;right:0;transform:none}
.pet-say.r::after{left:auto;right:10px}
.pet[data-doll="nayeon"] .pet-body{background-image:url(img/once-pixel2/nayeon.png)}
.pet[data-doll="jeongyeon"] .pet-body{background-image:url(img/once-pixel2/jeongyeon.png)}
.pet[data-doll="momo"] .pet-body{background-image:url(img/once-pixel2/momo.png)}
.pet[data-doll="sana"] .pet-body{background-image:url(img/once-pixel2/sana.png)}
.pet[data-doll="jihyo"] .pet-body{background-image:url(img/once-pixel2/jihyo.png)}
.pet[data-doll="mina"] .pet-body{background-image:url(img/once-pixel2/mina.png)}
.pet[data-doll="dahyun"] .pet-body{background-image:url(img/once-pixel2/dahyun.png)}
.pet[data-doll="chaeyoung"] .pet-body{background-image:url(img/once-pixel2/chaeyoung.png)}
.pet[data-doll="tzuyu"] .pet-body{background-image:url(img/once-pixel2/tzuyu.png)}
@media (prefers-reduced-motion:reduce){.pet{transition:none !important}.pet .pet-body{animation:none !important}}

/* ---------- 設備管理（管理員，v113） ---------- */
.dev-tag{display:inline-block;font-size:11px;font-weight:600;line-height:1.6;padding:0 7px;margin-left:6px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--dim);vertical-align:2px;white-space:nowrap}
.dev-tag.add{border-color:var(--accent);color:var(--accent-text)}
.dev-tag.off{border-style:dashed;color:var(--dim2)}
.dev-warn{margin:0 0 10px;padding:9px 11px;border-radius:var(--r-sm);background:rgb(var(--warn-rgb) / .1);
  border:1px solid rgb(var(--warn-rgb) / .35);color:var(--hi);font-size:13.5px}
.dev-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dev-form .two[hidden]{display:none}
.dev-form textarea{width:100%;padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg);
  color:var(--hi);font:inherit;font-size:16px;resize:vertical}
.dev-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .22)}
.dev-fixed{padding:11px 12px;border-radius:var(--r-sm);background:var(--panel-2);color:var(--hi);font-size:14.5px;line-height:1.5}
.dev-fixed small{color:var(--dim);font-size:12px}
.dev-err{color:var(--bad);font-size:13.5px;min-height:1.2em;margin:2px 0 10px}

/* ---------- 清洗記錄（v114） ---------- */
/* 管理員清單：最後多一欄箭頭（電腦版原本只有三欄，箭頭會掉到下一行） */
.sa-tli.sa-cl{grid-template-columns:62px 54px minmax(0,1fr) auto;text-align:left;cursor:pointer}
.sam .sa-tli.sa-cl{grid-template-columns:56px 50px minmax(0,1fr) auto}
.sa-tli.sa-cl .chev{color:var(--tx3);font-size:18px}
.sa-tli.sa-cl .x .by{color:var(--tx3);font-size:11.5px}
.sa-tli.sa-cl.on{background:rgb(var(--c-rgb) / .08)}

/* ---------- 下載照片的進度條娃娃（v116，ONCE／像素主題） ----------
   --dlp：0～1（下載進度；不能叫 --p，那個名字被進度圓環註冊成不會往下傳）；--k：排第幾個（0＝本命帶頭，後面的每隻往左退 22px，退到最左邊就疊在起點）。
   樣子用 i.doll 的圖（html[data-dollset] 決定 Lovely／球衣寶寶／像素）。 */
.pd-run{position:relative;height:42px;margin:4px 0 2px;--dw:28px}
html.admin-once .pd-run i.pd-r{display:block;position:absolute;bottom:0;width:var(--dw);height:38px;
  left:max(0px, calc((100% - var(--dw)) * var(--dlp) - var(--k) * 22px));z-index:calc(20 - var(--k));
  transition:left .45s ease;animation:pdhop .42s ease-in-out infinite;animation-delay:calc(var(--k) * -.09s);
  transform-origin:50% 100%}
html.admin-once[data-dollset="pixel"] .pd-run i.pd-r{animation-timing-function:steps(2)}
@keyframes pdhop{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
html.admin-once .pd-run.done i.pd-r{animation:pdjump .75s ease-out 1 both;animation-delay:calc(var(--k) * .06s)}
@keyframes pdjump{0%{transform:none}35%{transform:translateY(-16px) scale(1.08)}60%{transform:none}78%{transform:translateY(-5px)}100%{transform:none}}
.pd-run .pd-say{position:absolute;right:-2px;bottom:calc(100% + 6px);white-space:nowrap;font-size:12px;font-weight:600;line-height:1.2;font-style:normal;
  color:var(--on-accent);background:var(--accent);padding:4px 9px;border-radius:10px;box-shadow:0 2px 8px rgb(0 0 0 / .25);animation:pdsay .3s ease-out both}
.pd-run .pd-say::after{content:'';position:absolute;right:12px;top:100%;border:5px solid transparent;border-top-color:var(--accent)}
.pd-run .pd-say[hidden]{display:none}
@keyframes pdsay{from{opacity:0;transform:translateY(4px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.admin-once .pd-run i.pd-r{animation:none !important;transition:none !important}.pd-run .pd-say{animation:none}}

/* ---------- ONCE 照片與小卡（v118 管理員的橫幅；小卡 v119 起組員也有） ---------- */
.once-banner.photo{min-height:150px;align-items:flex-end;padding:14px 16px;
  background:linear-gradient(90deg,rgb(8 10 30 / .78),rgb(8 10 30 / .2) 62%,rgb(8 10 30 / .05)),var(--ob-img) center 30%/cover no-repeat !important}   /* 原本的橫幅底色有 !important */
.once-banner.photo .ob-t b{color:#fff}
.once-banner.photo .ob-t span{color:rgb(255 255 255 / .85)}
.once-banner.photo .doll.hero{filter:drop-shadow(0 2px 6px rgb(0 0 0 / .45))}   /* 照片上本命娃娃照樣站著 */
.once-banner .ob-draw{display:block;margin-top:6px;border:0;border-radius:12px;padding:5px 11px;font-size:12.5px;font-weight:600;line-height:1.2;font-family:inherit;
  background:var(--accent);color:var(--on-accent);cursor:pointer;box-shadow:0 2px 10px rgb(0 0 0 / .25)}
/* ---------- ONCE 小卡：拆卡包（v119：組員、管理員都有） ----------
   卡包晃 → .torn 上面那條撕掉飛走 → .rise 小卡從卡包裡升起來 → .drop 卡包掉下去、小卡回中間 → .flip 翻面＋.shown 光芒、愛心、NEW! */
.cardraw{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgb(6 8 24 / .84);backdrop-filter:blur(4px);
  animation:fade .25s ease-out;overflow:hidden}
.cardraw.out{opacity:0;transition:opacity .25s}
.cd-in{width:min(320px,86vw);text-align:center;color:#fff}
.cd-k{margin:0;font-size:13px;opacity:.8}
.cd-t{display:block;font-size:22px;margin:4px 0 40px;letter-spacing:.04em}
.cd-stage{position:relative;width:min(200px,52vw);aspect-ratio:55/85;margin:0 auto}
/* 組員沒有 ONCE 主題：卡包、卡背上的娃娃在這裡另外給圖（管理員照自己選的娃娃款式） */
.cardraw i.doll{display:inline-block;background:center/contain no-repeat;font-style:normal}
.cardraw i.doll[data-doll="nayeon"]{background-image:url(img/once/nayeon.png)}
.cardraw i.doll[data-doll="jeongyeon"]{background-image:url(img/once/jeongyeon.png)}
.cardraw i.doll[data-doll="momo"]{background-image:url(img/once/momo.png)}
.cardraw i.doll[data-doll="sana"]{background-image:url(img/once/sana.png)}
.cardraw i.doll[data-doll="jihyo"]{background-image:url(img/once/jihyo.png)}
.cardraw i.doll[data-doll="mina"]{background-image:url(img/once/mina.png)}
.cardraw i.doll[data-doll="dahyun"]{background-image:url(img/once/dahyun.png)}
.cardraw i.doll[data-doll="chaeyoung"]{background-image:url(img/once/chaeyoung.png)}
.cardraw i.doll[data-doll="tzuyu"]{background-image:url(img/once/tzuyu.png)}
/* 小卡：韓專小卡的比例 55:85、圓角；一開始藏在卡包後面 */
.cd-card{position:absolute;inset:0;z-index:1;perspective:900px;transform:translateY(10%) scale(.9);transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.cd-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  transition:transform .75s cubic-bezier(.3,.7,.3,1);box-shadow:0 12px 34px rgb(0 0 0 / .5)}
/* 卡背（v126）：粉紅＋遊戲卡那套框，樣式在最後面的 .gb */
.cd-back{background:none}
.cd-front{transform:rotateY(180deg);background:none}   /* v125：翻開是遊戲小卡（.gc），自己有框 */
.cd-front img{width:100%;height:100%;object-fit:cover;display:block}
/* 照片讀不到：翻成娃娃＋說明（v121，以前是一張黑卡） */
.cd-noimg{display:none}
.cd-front.noimg img{display:none}
.cd-front.noimg .cd-noimg{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;
  background:radial-gradient(circle at 30% 20%,rgb(255 255 255 / .12),transparent 45%),linear-gradient(160deg,#3a2d5c,#1c1630)}
.cardraw .cd-noimg i.doll{width:56px;height:78px}
.cd-noimg em{font-style:normal;font-size:13px;line-height:1.6;color:rgb(255 255 255 / .9)}
.cd-card.flip .cd-back{transform:rotateY(180deg)}
.cd-card.flip .cd-front{transform:rotateY(360deg)}
.cd-shine{position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(115deg,transparent 35%,rgb(255 255 255 / .6) 48%,transparent 61%)}
.cd-card.flip .cd-shine{animation:cdshine 1.1s .6s ease-out forwards}
@keyframes cdshine{to{transform:translateX(130%)}}
/* 卡包（v127）：粉紅鋁箔，上下是鋸齒封口（用 mask 挖半圓），上面那條是要撕掉的封口。
   陰影改用 filter 加在整包上（mask 會把 box-shadow 切掉） */
.cd-pack{position:absolute;inset:-8% -10%;z-index:2;border:0;padding:0;background:none;cursor:pointer;font-family:inherit;color:#fff;
  filter:drop-shadow(0 14px 24px rgb(0 0 0 / .55));
  animation:cdwiggle 1.6s ease-in-out infinite;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .45s}
@keyframes cdwiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.cd-strip{position:absolute;left:0;right:0;top:0;height:12%;
  background:repeating-linear-gradient(90deg,rgb(255 255 255 / .5) 0 1.5px,transparent 1.5px 4px),linear-gradient(160deg,#ffb0d8,#e070cf);
  -webkit-mask:radial-gradient(4px at 50% 0,#0000 97%,#000) 50% / 8px 100%;mask:radial-gradient(4px at 50% 0,#0000 97%,#000) 50% / 8px 100%}
.cd-body{position:absolute;inset:12.5% 0 0;border-radius:2px;display:grid;place-items:center;align-content:center;gap:6px;
  background:linear-gradient(105deg,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / .55) 45%,rgb(255 255 255 / 0) 60%) -150% 0 / 250% 100% no-repeat,
    repeating-linear-gradient(90deg,rgb(255 255 255 / .32) 0 1.5px,transparent 1.5px 4px) 0 100% / 100% 9% no-repeat,
    linear-gradient(170deg,#ff4f9a 0%,#ffa0d2 20%,#d36bff 42%,#ffb6e3 60%,#ff5fa2 80%,#ffc9a8 100%);
  -webkit-mask:radial-gradient(4px at 50% 100%,#0000 97%,#000) 50% / 8px 100%;mask:radial-gradient(4px at 50% 100%,#0000 97%,#000) 50% / 8px 100%;
  animation:cdfoil 2.6s ease-in-out infinite}
.cd-body::before{content:'';position:absolute;left:5%;right:5%;top:5px;border-top:2px dashed rgb(255 255 255 / .55)}   /* 撕開線 */
@keyframes cdfoil{to{background-position:150% 0,0 100%,0 0}}   /* 只移反光那層；底下的封口紋路、底色不動 */
.cardraw .cd-body i.doll{width:52px;height:72px;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .3))}
/* ONCE：跟卡背一樣的白字＋桃紅粗外框 */
.cd-body b.pk-word{position:relative;font:800 36px/1 "Avenir Next","Avenir","Helvetica Neue",sans-serif;letter-spacing:.06em;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .3))}
.pk-word::before,.pk-word::after{content:attr(data-t);position:absolute;left:0;top:0}
.pk-word::before{-webkit-text-stroke:5px #8a1f5a;color:#8a1f5a}
.pk-word::after{-webkit-text-stroke:2px #fff;color:#fff}
.pk-word span{position:relative;z-index:1;background:linear-gradient(180deg,#fff,#ffe1ef 45%,#ffb8d6 55%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-body em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.34em;opacity:.95;text-shadow:0 1px 2px rgb(120 20 70 / .5)}
.cd-body small{font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;background:linear-gradient(180deg,#fff2c0,#f2b53a);color:#5a2d08;
  box-shadow:0 2px 5px rgb(0 0 0 / .25)}   /* 金色貼紙 */
.pk-tag{position:absolute;top:12px;right:10px;padding:2px 7px;border-radius:6px;font:800 10px/1.4 "Avenir Next","Avenir",sans-serif;font-style:normal;
  letter-spacing:.08em;color:#fff;background:rgb(120 20 90 / .45)}
.cardraw.torn .cd-pack{animation:none}
.cardraw.torn .cd-strip{transform:translate(80%,-160%) rotate(32deg);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .4s .12s}
.cardraw.rise .cd-card{transform:translateY(-60%) scale(.92)}
.cardraw.drop .cd-pack{transform:translateY(140%) rotate(-8deg);opacity:0;pointer-events:none}
.cardraw.drop .cd-card{z-index:3;transform:none;transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
.cardraw.drop:not(.shown) .cd-back{animation:cdwait 1s ease-in-out infinite}   /* 還在抽：卡背一閃一閃 */
@keyframes cdwait{50%{filter:brightness(1.25)}}
/* 翻開：後面一圈光芒慢慢轉、愛心星星噴出去、新的蓋 NEW! */
.cd-burst{position:absolute;left:50%;top:50%;z-index:0;width:300%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(rgb(255 214 236 / .6) 0 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 14%,transparent 60%);mask:radial-gradient(circle,#000 14%,transparent 60%)}
.cardraw.shown .cd-burst{animation:cdburst 2.4s ease-out forwards,cdspin 14s linear infinite}
@keyframes cdburst{0%{opacity:0;scale:.3}22%{opacity:1;scale:1}100%{opacity:.5;scale:1}}
@keyframes cdspin{to{rotate:360deg}}
.cd-fx{position:absolute;left:50%;top:50%;z-index:4;pointer-events:none}
.cd-fx i{position:absolute;left:0;top:0;font-style:normal;line-height:1;font-size:calc(17px * var(--s));translate:-50% -50%;opacity:0;
  text-shadow:0 0 8px rgb(255 255 255 / .65);animation:cdpop 1.3s var(--d) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes cdpop{0%{opacity:1;transform:translate(0,0) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
.cd-new{position:absolute;top:-5%;right:-12%;z-index:5;padding:4px 11px;border-radius:10px;font-size:15px;font-weight:900;letter-spacing:.06em;color:#fff;
  background:linear-gradient(135deg,#ff3d8b,#ff8a3d);box-shadow:0 4px 14px rgb(255 61 139 / .55);transform:rotate(12deg);
  animation:cdstamp .45s .4s cubic-bezier(.3,1.6,.5,1) both}
.cd-new[hidden]{display:none}
@keyframes cdstamp{from{opacity:0;transform:rotate(12deg) scale(2.2)}to{opacity:1;transform:rotate(12deg) scale(1)}}
.cd-sub{min-height:20px;margin:42px 0 8px;font-size:14px}
.cd-act{display:flex;gap:8px;justify-content:center;min-height:42px}
.cd-act .btn{flex:1}
html.admin-pixel .cardraw :is(.cd-face,.cd-body,.cd-strip){border-radius:0}
html.admin-pixel .cardraw i.doll{image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){
  .cardraw :is(.cd-card,.cd-face,.cd-pack,.cd-strip){transition:none !important}
  .cardraw :is(.cd-pack,.cd-body,.cd-back,.cd-burst,.cd-shine,.cd-new){animation:none !important}
  .cardraw.shown .cd-burst{opacity:.5}
}
/* 收藏冊：上面一排每位收集幾張（收齊的亮起來）；抽到的是亮面小卡，還沒抽到的是那張照片糊掉、壓暗的剪影 */
.ocg-sum{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ocg-c{font-size:12px;padding:3px 9px;border-radius:10px;background:var(--panel-2);color:var(--dim2);font-variant-numeric:tabular-nums}
.ocg-c b{color:var(--fg);font-weight:600}
.ocg-c.full{background:rgb(var(--accent-rgb) / .18);color:var(--accent-text)}
.once-grid .oc figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 6px 4px;font-size:11px;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgb(0 0 0 / .62));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 照片取名（v124） */
.once-grid .oc-nm{position:absolute;left:4px;right:4px;bottom:4px;z-index:2;height:26px;padding:0 7px;border:0;border-radius:8px;cursor:pointer;
  background:rgb(0 0 0 / .62);color:rgb(255 255 255 / .8);font:inherit;font-size:11.5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.once-grid .oc-nm.has{color:#fff;font-weight:600}
.onm-pic{width:120px;aspect-ratio:55/85;margin:0 auto 12px;border-radius:10px;overflow:hidden;background:var(--panel-2)}
.onm-pic img{width:100%;height:100%;object-fit:cover;display:block}
#onm-in{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--hi);font:inherit;font-size:16px}
.once-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.once-grid .oc{position:relative;margin:0;aspect-ratio:55/85;border-radius:8px;overflow:hidden;background:var(--panel-2)}
.once-grid .oc.got{box-shadow:0 2px 8px rgb(0 0 0 / .25),inset 0 0 0 1px rgb(255 255 255 / .12)}
.once-grid .oc.got::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgb(255 255 255 / .24),transparent 36%,transparent 72%,rgb(255 255 255 / .08))}   /* 小卡亮面 */
.once-grid .oc img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.once-grid .oc.miss{background:#0d0f1a}
.once-grid .oc-sh{position:absolute;inset:-14%;background:var(--sh) center/cover no-repeat;filter:blur(7px) grayscale(.5) brightness(.42) contrast(1.25)}
.once-grid .oc.miss em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:22px;font-weight:800;color:rgb(255 255 255 / .55)}
.once-grid .oc.noimg img{visibility:hidden}
.once-grid .oc.noimg::before{content:'♥';position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:rgb(var(--accent-rgb) / .6)}
/* 管理分類 */
.otg-list{display:grid;gap:6px}
.otg-row{display:grid;grid-template-columns:32px 32px 1fr auto 36px;gap:6px;align-items:center}
.otg-mv,.otg-del{height:36px;border:1px solid var(--line, rgb(var(--grid-rgb)));border-radius:8px;background:var(--panel-2);color:var(--fg);cursor:pointer;font-size:15px}
.otg-mv:disabled,.otg-del:disabled{opacity:.3;cursor:default}
.otg-name{min-width:0;height:36px;padding:0 10px;border:1px solid var(--line, rgb(var(--grid-rgb)));border-radius:8px;background:var(--panel);color:var(--hi);font:inherit;font-size:15px}
.otg-n{font-size:12px;color:var(--dim2);font-variant-numeric:tabular-nums;white-space:nowrap}
.otg-add{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.otg-add input{min-width:0;height:40px;padding:0 10px;border:1px solid var(--line, rgb(var(--grid-rgb)));border-radius:8px;background:var(--panel);color:var(--hi);font:inherit;font-size:15px}
.once-grid .oc-n{position:absolute;top:4px;right:4px;z-index:2;font-size:11px;padding:1px 6px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
.once-grid .oc-x{position:absolute;top:4px;right:4px;z-index:2;width:26px;height:26px;border:0;border-radius:50%;background:rgb(0 0 0 / .6);color:#fff;cursor:pointer}

/* ===== 遊戲小卡（v125）：照遊戲卡的樣子重畫。外層 .gc 當容器，卡上尺寸都用 cqw（卡寬的 1%），大卡、收藏冊小卡同比例。
   變數都用 --gc 開頭（App 自己的 --line 是框線色，不能拿來用）。設計稿：docs/2026-10-23-遊戲小卡設計稿/index-v3.html ===== */
.gc{position:relative;width:100%;aspect-ratio:55/85;container-type:inline-size;text-align:left;
  --gcpd:4.6cqw;--gcpb:9.6cqw;--mx:.5;--my:.5;--rx:0deg;--ry:0deg;--glare:0}
.gc-in{position:absolute;inset:0;border-radius:5.5cqw;overflow:hidden;isolation:isolate;background:#111;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .55s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 2.5cqw 7cqw rgb(0 0 0 / .5),var(--gcw,0 0 0 transparent)}
.gc.live .gc-in{transition:transform .08s linear}
.gc-base{position:absolute;inset:0;background:var(--gcb)}
.gc-gl{position:absolute;inset:0;opacity:var(--gcg,.7);mix-blend-mode:screen;
  background:url(img/card/glitter.png) calc(var(--mx) * 6cqw) calc(var(--my) * 6cqw) / 34cqw,url(img/card/glitter.png) calc(11cqw - var(--mx) * 9cqw) calc(17cqw - var(--my) * 9cqw) / 55cqw}
.gc-foil{display:none;position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:calc(var(--foil,.16) + var(--glare) * .3);
  background:repeating-linear-gradient(115deg,#ff6fb1 0%,#ffd36b 8%,#7dffb6 16%,#6fd3ff 24%,#b18cff 32%,#ff6fb1 40%) calc(var(--mx) * 100%) calc(var(--my) * 100%) / 260% 260%}
.gc[data-r="ssr"] .gc-foil,.gc[data-r="ur"] .gc-foil{display:block}
.gc-win{position:absolute;top:var(--gcpd);left:var(--gcpd);right:var(--gcpd);bottom:var(--gcpb);border-radius:3.2cqw;overflow:hidden;background:#000;
  box-shadow:0 0 0 .6cqw var(--gcl),0 0 0 1.4cqw rgb(0 0 0 / .26),0 0 3cqw 1cqw rgb(0 0 0 / .4)}
.gc .gc-win img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.gc-win::before{content:'';position:absolute;inset:1.5cqw;border:.28cqw solid rgb(255 255 255 / .38);border-radius:2cqw;z-index:2;pointer-events:none}
.gc-win::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 58%,var(--gcs) 100%);pointer-events:none}
.gc-orn{position:absolute;inset:0;width:100%;height:100%;z-index:3;fill:var(--gcl);stroke:var(--gcl);pointer-events:none;
  filter:drop-shadow(0 0 .8cqw rgb(255 255 255 / .55))}
/* 稀有度大字：深色粗外框 → 淺色細外框 → 漸層字 */
.gc-rar{position:absolute;left:2.2cqw;top:.6cqw;z-index:4;font:800 var(--rs,27cqw)/1 "Avenir Next","Avenir","Helvetica Neue",sans-serif;letter-spacing:-.035em;
  filter:drop-shadow(0 .7cqw 1cqw rgb(0 0 0 / .55)) var(--rglow,drop-shadow(0 0 0 transparent))}
.gc-rar::before,.gc-rar::after,.gc-num::before,.gc-num::after{content:attr(data-t);position:absolute;left:0;top:0}
.gc-rar::before,.gc-num::before{-webkit-text-stroke:2.6cqw var(--rk);color:var(--rk)}
.gc-rar::after,.gc-num::after{-webkit-text-stroke:1.1cqw var(--re);color:var(--re)}
.gc-rar span,.gc-num span{position:relative;z-index:1;background:var(--rf);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.gc-sign{position:absolute;top:3.4cqw;right:4.2cqw;width:27cqw;aspect-ratio:420/176;z-index:4;transform:rotate(-5deg);pointer-events:none;
  background:url(img/card/we11lin-sign.png) center/contain no-repeat;filter:drop-shadow(0 0 1.1cqw rgb(255 255 255 / .6)) drop-shadow(0 .3cqw .6cqw rgb(0 0 0 / .55))}
/* 左下：星星＋等級（重複抽到升星） */
.gc-lv{position:absolute;left:1.6cqw;bottom:7.2cqw;z-index:4;width:15cqw;display:grid;justify-items:center}
.gc-lv svg{width:14cqw;height:14cqw;fill:#ffd85e;stroke:#5a2d08;stroke-width:1.5;paint-order:stroke;filter:drop-shadow(0 0 1.4cqw rgb(255 214 92 / .75)) drop-shadow(0 .4cqw .6cqw rgb(0 0 0 / .5))}
.gc-num{position:relative;margin-top:-1.4cqw;font:800 11cqw/1 "Avenir Next","Avenir","Helvetica Neue",sans-serif;
  --rk:#4a2508;--re:#fff3c4;--rf:linear-gradient(180deg,#fff8d0,#ffe07a 30%,#f2b53a 52%,#b8741a 56%,#f6c860 80%,#fff0b0);filter:drop-shadow(0 .5cqw .8cqw rgb(0 0 0 / .5))}
/* 底部名牌：屬性字＋名字（中文用思源黑體 Black，沒載到用蘋方） */
.gc-plate{position:absolute;left:16cqw;right:var(--gcpd);bottom:var(--gcpb);z-index:3;padding:1.6cqw 3.4cqw 2cqw 6cqw;text-align:right;
  border-radius:0 0 3.2cqw 0;background:linear-gradient(90deg,transparent,var(--gcp) 22%)}
.gc-plate::before{content:'';position:absolute;left:0;right:0;top:0;height:.3cqw;background:linear-gradient(90deg,transparent,var(--gcl) 30%,var(--gcl))}
.gc-plate em{display:block;font:italic 600 6.4cqw/1.15 Georgia,"Times New Roman",serif;color:#f6f0ff;text-shadow:0 .3cqw .7cqw rgb(0 0 0 / .7);white-space:nowrap}
.gc-plate strong{position:relative;z-index:0;display:block;white-space:nowrap;font:800 var(--ns,10.6cqw)/1.08 "Avenir Next","Avenir","Helvetica Neue","Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.06em;color:#fff}
.gc-plate strong::before{content:attr(data-t);position:absolute;inset:0;z-index:-1;-webkit-text-stroke:1.1cqw rgb(16 8 36 / .92);color:transparent}
/* 最下面：編號＋系列名 */
.gc-meta{position:absolute;left:calc(var(--gcpd) + 1cqw);right:calc(var(--gcpd) + 1cqw);bottom:2.7cqw;z-index:3;display:flex;justify-content:space-between;gap:2cqw;
  font:700 3.3cqw/1 "Avenir Next","Avenir","Helvetica Neue","PingFang TC",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gcl);
  text-shadow:0 .25cqw .5cqw rgb(0 0 0 / .6);white-space:nowrap}
.gc-meta span:last-child{overflow:hidden;text-overflow:ellipsis}
/* 反光：白色斜光跟著手指／滑鼠（SSR、UR 外框多一層彩虹箔，只在框上、不染照片） */
.gc-glare{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:overlay;opacity:calc(.25 + var(--glare) * .75);
  background:linear-gradient(115deg,transparent 30%,rgb(255 255 255 / .85) 47%,rgb(255 255 255 / .85) 51%,transparent 68%) calc(var(--mx) * 100%) calc(var(--my) * 100%) / 300% 300%}
/* ---- 四種稀有度 ---- */
.gc[data-r="r"]{--gcl:#f1e6ff;--gcs:rgb(26 10 60 / .55);--gcp:rgb(30 12 70 / .8);--gcg:.7;--rs:27cqw;
  --gcb:radial-gradient(120% 55% at 18% 0%,#9a5ce6,transparent 60%),radial-gradient(100% 60% at 92% 100%,#e0489a,transparent 60%),linear-gradient(165deg,#2a1866,#4d2598 45%,#25135a);
  --rk:#4a2508;--re:#fff3c4;--rf:linear-gradient(180deg,#fff8d0,#ffe07a 30%,#f2b53a 52%,#b8741a 56%,#f6c860 80%,#fff0b0)}
.gc[data-r="sr"]{--gcl:#f2f8ff;--gcs:rgb(6 20 50 / .55);--gcp:rgb(8 24 58 / .82);--gcg:.75;--rs:22cqw;
  --gcb:radial-gradient(120% 55% at 18% 0%,#8fd3ff,transparent 58%),radial-gradient(100% 60% at 92% 100%,#d4e4f6,transparent 58%),linear-gradient(165deg,#0b2150,#1f5398 50%,#0a1d44);
  --rk:#0c1f45;--re:#eef6ff;--rf:linear-gradient(180deg,#fff,#e3edf8 30%,#a3b8d2 52%,#5c7594 56%,#cbdbee 80%,#fff)}
.gc[data-r="ssr"]{--gcl:#fff0b8;--gcs:rgb(50 24 2 / .55);--gcp:rgb(52 26 4 / .82);--gcg:.8;--rs:17.5cqw;--foil:.16;
  --gcb:radial-gradient(120% 50% at 18% 0%,#fff0b0,transparent 55%),radial-gradient(100% 55% at 92% 100%,#ffb347,transparent 58%),linear-gradient(165deg,#6b3f06,#d79a22 36%,#ffe590 50%,#c7871a 64%,#5a3305);
  --rk:#5a0f0a;--re:#fff2c2;--rf:linear-gradient(180deg,#fffbe0,#ffd75e 30%,#ff9d1e 52%,#c2410c 56%,#ffc247 80%,#fff3b5);
  --rglow:drop-shadow(0 0 2.2cqw rgb(255 200 90 / .8));--gcw:0 0 0 .5cqw rgb(255 222 130 / .55),0 0 7cqw rgb(255 190 70 / .45)}
.gc[data-r="ur"]{--gcl:#ffffff;--gcs:rgb(30 14 60 / .5);--gcp:rgb(34 16 70 / .78);--gcg:.9;--rs:22cqw;--foil:.35;
  --gcb:linear-gradient(rgb(24 10 56 / .42),rgb(24 10 56 / .42)),conic-gradient(from 210deg,#ff3d9a,#ff9f3d,#ffe83d,#3dff9c,#3dc2ff,#8f5bff,#ff3d9a);
  --rk:#2a1250;--re:#fff;--rf:linear-gradient(100deg,#ff7ab6,#ffc36b 20%,#fff27a 38%,#7dffb6 55%,#6fd3ff 72%,#b18cff 88%,#ff7ab6);
  --rglow:drop-shadow(0 0 2.2cqw rgb(255 255 255 / .7));--gcw:0 0 0 .5cqw rgb(255 255 255 / .6),0 0 7cqw rgb(190 140 255 / .55)}
.gc[data-r="ur"] .gc-base{animation:gc-hue 7s linear infinite}
.gc[data-r="ur"] .gc-rar span{background-size:220% 100%;animation:gc-slide 4s linear infinite}
@keyframes gc-hue{to{filter:hue-rotate(360deg)}}
@keyframes gc-slide{to{background-position:220% 0}}
/* 還沒抽到：中性灰框、照片暗影、問號，不露稀有度 */
.gc[data-r="miss"]{--gcl:rgb(255 255 255 / .28);--gcs:transparent;--gcg:.22;--gcb:linear-gradient(165deg,#22262f,#14161d 60%,#1b1e26)}
.gc[data-r="miss"] .gc-sign{opacity:.3}
.gc[data-r="miss"] .gc-win em{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font:800 26cqw/1 "Avenir Next","Avenir",sans-serif;font-style:normal;color:rgb(255 255 255 / .5)}
/* 收藏冊：一格＝一張遊戲小卡＋下面的名字（×次數在右下） */
.once-grid .oc.gcard{aspect-ratio:auto;overflow:visible;border-radius:0;background:none;box-shadow:none}
.once-grid .oc.gcard::after{display:none}
.once-grid .oc.gcard figcaption{position:static;padding:4px 28px 0 2px;background:none;color:var(--fg)}
.once-grid .oc.gcard .oc-n{top:auto;bottom:0;right:0}
.once-grid .oc.gcard.noimg::before{inset:0 0 auto;aspect-ratio:55/85;z-index:5}
/* 管理頁縮圖左上：稀有度 */
.once-grid .oc-rr{position:absolute;top:4px;left:4px;z-index:2;padding:0 6px;border-radius:7px;font:800 10.5px/1.6 "Avenir Next","Avenir",sans-serif;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#4d2598,#b03a8e)}
.once-grid .oc-rr[data-r="sr"]{background:linear-gradient(135deg,#1f5398,#8fbbe6)}
.once-grid .oc-rr[data-r="ssr"]{background:linear-gradient(135deg,#b8741a,#ffd45e);color:#3a2306}
.once-grid .oc-rr[data-r="ur"]{background:linear-gradient(90deg,#ff6fb1,#ffc36b,#7dffb6,#6fd3ff,#b18cff);color:#2a1250}
/* 卡片設定、共用設定 */
.onm-card{width:150px;margin:0 auto 14px}
.onm-txt{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--hi);font:inherit;font-size:16px}
.onm-r .seg-b{display:grid;line-height:1.25;padding:6px 0}
.onm-r .seg-b small{font-size:10px;font-weight:500;opacity:.7}
/* 看大圖：整張遊戲卡 */
.once-view .ov-card{width:min(340px,80vw,calc((100vh - 150px) * 55 / 85))}
.once-view .gc .gc-win img{max-width:none;max-height:none;animation:none}
.once-view .viewer-nav{pointer-events:none}
/* 拆卡包：SSR、UR 撕開那一下從撕口冒光（R、SR 跟以前一樣） */
.cardraw[data-lk="ssr"]{--lk:255 210 100;--lk2:#fff3b0}
.cardraw[data-lk="ur"]{--lk:200 160 255;--lk2:#ffffff}
.cd-leak{position:absolute;left:50%;top:6.5%;z-index:3;width:330%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from -90deg,rgb(var(--lk, 255 210 100) / .95) 0 4deg,transparent 4deg 11deg);
  -webkit-mask:linear-gradient(#000 50%,transparent 50%),radial-gradient(closest-side,#000 6%,transparent 72%);-webkit-mask-composite:source-in;
  mask:linear-gradient(#000 50%,transparent 50%) intersect,radial-gradient(closest-side,#000 6%,transparent 72%)}
.cardraw[data-lk="ur"] .cd-leak{background:repeating-conic-gradient(from -90deg,#ff6fb1 0 4deg,transparent 4deg 9deg,#ffe27a 9deg 13deg,transparent 13deg 18deg,
  #7dffb6 18deg 22deg,transparent 22deg 27deg,#6fd3ff 27deg 31deg,transparent 31deg 36deg,#b18cff 36deg 40deg,transparent 40deg 45deg)}
.cd-seam{position:absolute;left:-14%;right:-14%;top:6.5%;z-index:3;height:14px;translate:0 -50%;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0,var(--lk2, #fff3b0) 35%,rgb(var(--lk, 255 210 100) / .8) 60%,transparent 100%);filter:blur(1.5px)}
.cd-flash{position:absolute;inset:0;z-index:2;background:#fff;opacity:0;pointer-events:none}
.cardraw.leak .cd-leak{animation:lkray 1.5s ease-out forwards,lkturn 3s ease-in-out infinite alternate}
.cardraw.leak .cd-seam{animation:lkseam 1.2s ease-out forwards}
.cardraw.leak.torn .cd-pack{animation:lkshake .14s linear 6}
.cardraw.leak.rise .cd-back{box-shadow:0 0 26px 8px rgb(var(--lk) / .85),0 12px 34px rgb(0 0 0 / .5);filter:brightness(1.15)}
.cardraw.leak.drop .cd-leak{animation:lkout .5s ease-in forwards}
.cardraw[data-lk="ur"].leak .cd-leak{animation:lkray 1.5s ease-out forwards,lkturn 3s ease-in-out infinite alternate,lkhue 2.4s linear infinite}
.cardraw[data-lk="ur"].leak .cd-flash{animation:lkflash .8s ease-out}
.cardraw[data-lk="ur"].leak.rise .cd-back{animation:lkhue 2.4s linear infinite}
@keyframes lkray{0%{opacity:0;scale:.15}30%{opacity:1;scale:1}100%{opacity:.9;scale:1.06}}
@keyframes lkturn{from{rotate:-4deg}to{rotate:4deg}}
@keyframes lkseam{0%{opacity:0;scale:.2 1}25%{opacity:1;scale:1 1.4}100%{opacity:.8;scale:1 1}}
@keyframes lkout{to{opacity:0;scale:1.25}}
@keyframes lkshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,1px) rotate(-1.2deg)}75%{transform:translate(3px,-1px) rotate(1.2deg)}}
@keyframes lkflash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}
@keyframes lkhue{to{filter:hue-rotate(360deg)}}
/* 翻開時：SSR 金色光芒、UR 彩虹光芒；左上跳「SSR!」「UR!!」 */
.cardraw.shown[data-lk="ssr"] .cd-burst{background:repeating-conic-gradient(rgb(255 214 110 / .75) 0 7deg,transparent 7deg 22deg)}
.cardraw.shown[data-lk="ur"] .cd-burst{background:repeating-conic-gradient(#ff6fb1 0 6deg,transparent 6deg 15deg,#ffe27a 15deg 21deg,transparent 21deg 30deg,#7dffb6 30deg 36deg,transparent 36deg 45deg,#6fd3ff 45deg 51deg,transparent 51deg 60deg);
  animation:cdburst 2.4s ease-out forwards,cdspin 14s linear infinite,lkhue 3s linear infinite}
.cd-rr{position:absolute;left:-18%;top:-6%;z-index:5;rotate:-12deg;font:800 28px/1 "Avenir Next","Avenir",sans-serif;letter-spacing:.04em;
  color:var(--lk2, #fff3b0);text-shadow:0 0 14px rgb(var(--lk, 255 210 100) / .95),0 2px 0 rgb(0 0 0 / .4);animation:cdstamp2 .5s .35s cubic-bezier(.3,1.6,.5,1) both}
.cd-rr[hidden]{display:none}
@keyframes cdstamp2{from{opacity:0;scale:2.4}to{opacity:1;scale:1}}
.cardraw[data-lk="ur"] .cd-rr{background:linear-gradient(90deg,#ff7ab6,#ffc36b,#fff27a,#7dffb6,#6fd3ff,#b18cff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 10px rgb(255 255 255 / .8))}
@media (prefers-reduced-motion:reduce){
  .gc *{animation:none !important}
  .cardraw :is(.cd-leak,.cd-seam,.cd-flash,.cd-rr,.cd-back){animation:none !important}
  .cardraw.leak .cd-leak{opacity:.8}
}

/* ===== 卡背（v126）：粉紅（跟卡包同色）＋卡面那套框。尺寸一樣用 cqw ===== */
.gb{position:relative;display:block;width:100%;height:100%;container-type:inline-size}
.gb-in{position:absolute;inset:0;display:block;border-radius:5.5cqw;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 28% 18%,rgb(255 255 255 / .35),transparent 42%),linear-gradient(145deg,#ff5fa2,#ff8fb1 55%,#ffd3a8)}
.gb-gl{position:absolute;inset:0;opacity:.55;mix-blend-mode:screen;background:url(img/card/glitter.png) 0 0 / 34cqw,url(img/card/glitter.png) 11cqw 17cqw / 55cqw}
.gb-fr{position:absolute;inset:4.6cqw;border-radius:3.2cqw;box-shadow:0 0 0 .6cqw #fff,0 0 0 1.4cqw rgb(0 0 0 / .14),inset 0 0 6cqw rgb(120 20 70 / .25)}
.gb-fr::before{content:'';position:absolute;inset:1.5cqw;border:.28cqw solid rgb(255 255 255 / .55);border-radius:2cqw}
.gb .gb-orn{--gcl:#fff}
.gb-c{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:1.6cqw;text-align:center}
.cardraw .cd-back i.gb-doll{width:24cqw;height:auto;aspect-ratio:52/72;margin:0;vertical-align:0;filter:drop-shadow(0 1cqw 1.6cqw rgb(0 0 0 / .3))}
.gb-word{position:relative;font:800 19cqw/1 "Avenir Next","Avenir","Helvetica Neue",sans-serif;letter-spacing:.06em;filter:drop-shadow(0 .7cqw 1cqw rgb(0 0 0 / .35))}
.gb-word::before,.gb-word::after{content:attr(data-t);position:absolute;left:0;top:0}
.gb-word::before{-webkit-text-stroke:2.6cqw #8a1f5a;color:#8a1f5a}
.gb-word::after{-webkit-text-stroke:1.1cqw #fff;color:#fff}
.gb-word span{position:relative;z-index:1;background:linear-gradient(180deg,#fff,#ffe1ef 45%,#ffb8d6 55%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb-sub{font:700 3.8cqw/1 "Avenir Next","Avenir",sans-serif;letter-spacing:.42em;margin-right:-.42em;color:#fff;text-shadow:0 .3cqw .6cqw rgb(120 20 70 / .5)}
.gb-sign{position:absolute;left:50%;bottom:10cqw;width:30cqw;aspect-ratio:420/176;translate:-50% 0;background:url(img/card/we11lin-sign.png) center/contain no-repeat;
  filter:drop-shadow(0 0 1.1cqw rgb(255 255 255 / .6)) drop-shadow(0 .3cqw .6cqw rgb(120 20 70 / .5))}
.gb-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(125deg,rgb(255 255 255 / .28),transparent 36%,transparent 72%,rgb(255 255 255 / .1))}
/* ===== 組員卡包（v128，管理員）：每個組員還沒拆幾包、勾人送卡包 ===== */
.ocw-list{display:grid;gap:6px;margin:0 0 10px}
.ocw-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.ocw-row input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.ocw-row .n{font-weight:600;color:var(--hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocw-row .c{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim2);font-size:12px}
.ocw-row .c b{font-size:18px;color:var(--hi)}
.ocw-row .c small{display:block;font-size:11px;color:var(--dim2)}
.ocw-row.on{border-color:var(--accent);background:rgb(var(--accent-rgb) / .1)}
.ocw-n{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ocw-n button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--hi);font:inherit;font-size:20px;cursor:pointer}
.ocw-n b{min-width:3.2em;text-align:center;font-size:17px;color:var(--hi)}
.ocw-log{margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--dim2)}
.ocw-log li{padding:7px 0;border-bottom:1px solid var(--line)}