/* ============================================================
   桌訓 ERP — 樣式
   淺色為基準，深色由 prefers-color-scheme 與 data-theme 覆寫
   ============================================================ */
:root{
  --bg:#F4F7F9; --panel:#FFFFFF; --panel2:#EDF2F6; --sidebar:#16212B;
  --ink:#16232E; --ink2:#5A6B78; --ink3:#8395A3;
  --line:#D8E2E9; --line-soft:#E6EDF2;
  --accent:#2168B0; --accent-ink:#FFFFFF; --accent-soft:#E1ECF6;
  --good:#1F7A4C; --good-soft:#DFF0E7;
  --warn:#9A6410; --warn-soft:#FBEEDA;
  --crit:#B3352F; --crit-soft:#FBE4E2;
  --chip:#E7EEF3; --chip-ink:#3A4B58;
  --cat1:#2168B0; --cat2:#B8622C; --cat3:#2E8B57; --cat4:#8B5BA8;
  --shadow:0 1px 2px rgba(22,35,46,.06), 0 6px 18px rgba(22,35,46,.06);
  --side-ink:#C6D4DF; --side-ink2:#7D93A6; --side-active:#25384A;
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F171E; --panel:#16212B; --panel2:#1C2A35; --sidebar:#0B1218;
    --ink:#E7EEF4; --ink2:#93A6B4; --ink3:#6D8090;
    --line:#273845; --line-soft:#1F2E3A;
    --accent:#4E93D9; --accent-ink:#0F171E; --accent-soft:#1D3A54;
    --good:#4FBE86; --good-soft:#122E22;
    --warn:#D9A344; --warn-soft:#33260F;
    --crit:#E4726C; --crit-soft:#361A19;
    --chip:#22313E; --chip-ink:#B7C6D1;
    --cat1:#4E93D9; --cat2:#C9803A; --cat3:#2E9E88; --cat4:#9B84D6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
    --side-ink:#AFC1CE; --side-ink2:#6A8093; --side-active:#1B2A36;
  }
}
:root[data-theme="dark"]{
  --bg:#0F171E; --panel:#16212B; --panel2:#1C2A35; --sidebar:#0B1218;
  --ink:#E7EEF4; --ink2:#93A6B4; --ink3:#6D8090;
  --line:#273845; --line-soft:#1F2E3A;
  --accent:#4E93D9; --accent-ink:#0F171E; --accent-soft:#1D3A54;
  --good:#4FBE86; --good-soft:#122E22;
  --warn:#D9A344; --warn-soft:#33260F;
  --crit:#E4726C; --crit-soft:#361A19;
  --chip:#22313E; --chip-ink:#B7C6D1;
  --cat1:#4E93D9; --cat2:#C9803A; --cat3:#2E9E88; --cat4:#9B84D6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  --side-ink:#AFC1CE; --side-ink2:#6A8093; --side-active:#1B2A36;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }
button{font:inherit; font-size:14px; cursor:pointer; border:none; background:none; color:inherit; padding:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px}
input,select,textarea{
  font:inherit; font-size:14px; color:var(--ink); width:100%;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 11px;
}
textarea{resize:vertical; min-height:70px}
input[type="range"]{padding:0; background:none; border:none; accent-color:var(--accent)}
input[type="checkbox"],input[type="radio"]{width:auto; accent-color:var(--accent)}
h1,h2,h3{margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------- 登入畫面 ---------------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.auth-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:30px 28px;
}
.auth-card .logo{font-size:24px; font-weight:800; letter-spacing:.04em; margin-bottom:4px}
.auth-card .logo .dot{color:var(--accent)}
.auth-card .tag{font-size:12px; color:var(--ink2); letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px}
.auth-card .fld{margin-bottom:14px}
.auth-card label{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px}
.auth-msg{font-size:13px; margin-top:12px; min-height:18px}
.auth-msg.err{color:var(--crit)}
.auth-alt{margin-top:16px; font-size:13px; color:var(--ink2); text-align:center}
.auth-alt button{color:var(--accent); font-weight:700; font-size:13px}
.demo-badge{
  background:var(--warn-soft); color:var(--warn); border-radius:8px;
  padding:9px 12px; font-size:12.5px; line-height:1.5; margin-bottom:18px;
}

/* ---------------- 版面 ---------------- */
.app{display:grid; grid-template-columns:216px 1fr; min-height:100vh}
.side{background:var(--sidebar); color:var(--side-ink); display:flex; flex-direction:column; padding:16px 12px}
.side .brand{padding:6px 10px 18px; color:#fff; font-size:17px; font-weight:800; letter-spacing:.04em}
.side .brand .dot{color:var(--accent)}
.nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; border-radius:9px; color:var(--side-ink); font-size:14px; font-weight:500;
}
.nav button .ic{width:18px; text-align:center; opacity:.85; font-size:15px}
.nav button:hover{background:var(--side-active); color:#fff}
.nav button[aria-current="page"]{background:var(--side-active); color:#fff; font-weight:700}
.nav .badge{
  margin-left:auto; background:var(--crit); color:#fff; border-radius:999px;
  font-size:11px; font-weight:700; padding:1px 7px; min-width:19px; text-align:center;
}
.side .foot{border-top:1px solid rgba(255,255,255,.09); padding:12px 10px 2px; font-size:12.5px; color:var(--side-ink2)}
.side .foot .who{color:#fff; font-weight:700; font-size:13.5px}
.side .foot button{color:var(--side-ink2); font-size:12.5px; margin-top:7px}
.side .foot button:hover{color:#fff}

.main{min-width:0; max-width:100vw; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 26px 12px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.topbar h1{font-size:19px; font-weight:800; letter-spacing:.02em}
.topbar .sub{font-size:12.5px; color:var(--ink2)}
.topbar .grow{flex:1}
.content{padding:20px 26px 56px; max-width:1400px; width:100%; min-width:0}
.topbar .m-brand{display:none}

/* ===== 手機版：底部導覽列 ===== */
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    flex-direction:row; align-items:stretch; gap:0;
    padding:5px 2px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -2px 14px rgba(0,0,0,.22);
  }
  .side .brand,
  .side .foot{display:none}
  .nav{flex-direction:row; gap:0; justify-content:space-between; width:100%}
  .nav button{
    position:relative; flex:1 1 0; min-width:0;
    flex-direction:column; align-items:center; justify-content:center; gap:1px;
    padding:6px 1px; font-size:10.5px; font-weight:500; border-radius:9px; text-align:center;
  }
  .nav button .ic{display:block; width:auto; font-size:17px; line-height:1.1}
  .nav button[aria-current="page"]{background:var(--side-active); color:#fff}
  .nav .badge{
    position:absolute; top:1px; left:50%; margin-left:5px;
    font-size:10px; padding:0 5px; min-width:16px; line-height:16px;
  }
  .topbar{padding:11px 14px 9px; position:sticky; top:0; z-index:20}
  .topbar h1{font-size:17px}
  .topbar .m-brand{
    display:block; width:100%; font-size:11px; font-weight:700; letter-spacing:.1em;
    color:var(--ink3); text-transform:uppercase; margin-bottom:1px;
  }
  .content{padding:14px 12px 92px}
  .panel{padding:15px 14px; border-radius:11px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(98px,1fr)); gap:9px}
  .kpi{padding:9px 11px}
  .kpi .v{font-size:18px}
  /* iOS 聚焦時不自動放大 */
  input,select,textarea{font-size:16px}
  .btn{padding:9px 15px}
  .btn.sm{padding:7px 12px; font-size:13px}
  table.tbl th,table.tbl td{padding:8px 9px}
  .grid2,.grid3{gap:12px}
}

/* ===== 手機版：對話框改為底部彈出 ===== */
@media (max-width:640px){
  .backdrop{padding:0; align-items:flex-end}
  .modal{
    max-width:100%; max-height:93vh; border-radius:16px 16px 0 0;
    padding:18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .modal h2{font-size:17px}
  .m-actions{
    position:sticky; bottom:calc(-1 * env(safe-area-inset-bottom, 0px)); z-index:2;
    background:var(--panel); margin:16px -16px 0; padding:12px 16px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line-soft);
  }
  .row3{grid-template-columns:1fr 1fr}
  .ck{padding:7px 13px}
  #toast{bottom:84px}
}

/* ---------------- 面板／卡片 ---------------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px}
.panel>h2{font-size:16px; margin-bottom:2px}
.panel>.desc{font-size:12.5px; color:var(--ink2); margin:0 0 14px}
.panel-head{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.panel-head h2{font-size:16px; flex:1}
.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.grid2>*,.grid3>*{min-width:0}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start}
@media (max-width:980px){ .grid2{grid-template-columns:1fr} }
.empty{color:var(--ink2); font-size:13px; padding:10px 0; margin:0}

/* ---------------- 按鈕與標籤 ---------------- */
.btn{border-radius:9px; padding:8px 15px; font-weight:700; font-size:14px; background:var(--chip); color:var(--chip-ink); white-space:nowrap}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:none; color:var(--ink2)}
.btn.ghost:hover{color:var(--accent); background:var(--accent-soft)}
.btn.danger{background:none; color:var(--crit); border:1px solid var(--crit)}
.btn.sm{padding:5px 11px; font-size:13px; border-radius:7px}
.icon-btn{width:32px; height:32px; border-radius:8px; background:var(--chip); color:var(--chip-ink); display:inline-flex; align-items:center; justify-content:center}
.icon-btn:hover{background:var(--accent-soft); color:var(--accent)}
.pill{display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; background:var(--chip); color:var(--chip-ink); white-space:nowrap}
.pill.t-good{background:var(--good-soft); color:var(--good)}
.pill.t-warning{background:var(--warn-soft); color:var(--warn)}
.pill.t-critical{background:var(--crit-soft); color:var(--crit)}
.pill.t-accent{background:var(--accent-soft); color:var(--accent)}
.pill.t-muted{background:var(--chip); color:var(--ink3)}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--chip); color:var(--chip-ink);
  border-radius:999px; padding:6px 13px; font-size:13.5px; font-weight:500; border:1.5px solid transparent}
.chip .cdot{width:9px; height:9px; border-radius:50%; background:var(--tc,var(--ink2)); flex:none}
.chip[aria-pressed="true"]{background:var(--panel); border-color:var(--tc,var(--accent)); color:var(--ink); box-shadow:var(--shadow)}
.tabs{display:flex; gap:2px; background:var(--chip); padding:3px; border-radius:10px}
.tabs button{padding:6px 15px; border-radius:8px; font-weight:700; font-size:13.5px; color:var(--ink2)}
.tabs button[aria-selected="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}

/* ---------------- KPI ---------------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:12px; margin-bottom:4px}
.kpi{background:var(--panel2); border-radius:10px; padding:11px 14px}
.kpi .k{font-size:11.5px; color:var(--ink2)}
.kpi .v{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:1px}
.kpi .v small{font-size:11.5px; font-weight:400; color:var(--ink2); margin-left:3px}

/* ---------------- 表格 ---------------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
table.tbl{border-collapse:collapse; width:100%; font-size:13.5px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line-soft); padding:9px 12px; text-align:left; vertical-align:middle}
table.tbl th{font-size:12px; color:var(--ink2); font-weight:700; white-space:nowrap; background:var(--panel2)}
table.tbl th:first-child{border-radius:8px 0 0 8px}
table.tbl th:last-child{border-radius:0 8px 8px 0}
table.tbl td.num,table.tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--panel2)}
.rowlink{color:var(--accent); font-weight:700; cursor:pointer; background:none}
.rowlink:hover{text-decoration:underline}

/* ---------------- 長條圖 ---------------- */
.barlist{display:flex; flex-direction:column; gap:9px}
.bl-row{display:grid; grid-template-columns:minmax(56px,auto) 1fr minmax(56px,auto); gap:10px; align-items:center; font-size:13px}
.bl-lab{color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bl-track{background:var(--chip); border-radius:4px; height:9px; overflow:hidden}
.bl-track i{display:block; height:100%; border-radius:4px; background:var(--accent)}
.bl-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}

/* ---------------- 排程版面（左側日期 + 週課表） ---------------- */
.sched{display:grid; grid-template-columns:212px minmax(0,1fr); gap:16px; align-items:start}
.sched>*{min-width:0}
@media (max-width:900px){ .sched{grid-template-columns:minmax(0,1fr)} }

/* 小月曆 */
.mini-head{display:flex; align-items:center; gap:4px; margin-bottom:10px}
.mini-head b{flex:1; font-size:14px; font-variant-numeric:tabular-nums}
.mini-head button{width:26px; height:26px; border-radius:7px; color:var(--ink2); display:inline-flex; align-items:center; justify-content:center; font-size:12px}
.mini-head button:hover{background:var(--chip); color:var(--accent)}
.mini-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.mini-grid .dw{font-size:10.5px; color:var(--ink3); text-align:center; padding:2px 0}
.mini-grid button{
  position:relative; aspect-ratio:1; border-radius:50%; font-size:11.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.mini-grid button:hover{background:var(--chip)}
.mini-grid button.out{color:var(--ink3); opacity:.55}
.mini-grid button.inweek{background:var(--accent-soft); border-radius:0}
.mini-grid button.inweek.wk-s{border-radius:50% 0 0 50%}
.mini-grid button.inweek.wk-e{border-radius:0 50% 50% 0}
.mini-grid button.today{color:var(--accent); font-weight:800}
.mini-grid button.sel{background:var(--accent); color:var(--accent-ink); font-weight:700; border-radius:50%}
.mini-grid button .hasdot{position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:3.5px; height:3.5px; border-radius:50%; background:var(--ink3)}
.mini-grid button.sel .hasdot{background:var(--accent-ink)}
.side-list{display:flex; flex-direction:column; gap:3px; margin-top:4px}
.side-list button{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; font-size:13px; color:var(--ink2); text-align:left; width:100%}
.side-list button:hover{background:var(--chip)}
.side-list button[aria-pressed="true"]{background:var(--chip); color:var(--ink); font-weight:700}
.side-list .cdot{width:9px; height:9px; border-radius:50%; flex:none}
.side-sub{font-size:11.5px; font-weight:700; color:var(--ink3); letter-spacing:.06em; margin:14px 0 4px}

/* 檢視切換與可收合區塊 */
.vswitch{display:flex; gap:2px; background:var(--chip); padding:3px; border-radius:9px}
.vswitch button{padding:5px 13px; border-radius:7px; font-size:13px; font-weight:700; color:var(--ink2)}
.vswitch button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.collapse>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--ink2); padding:2px 0;
}
.collapse>summary::-webkit-details-marker{display:none}
.collapse>summary::after{content:"▾"; margin-left:auto; font-size:11px; transition:transform .15s}
.collapse[open]>summary::after{transform:rotate(180deg)}
.collapse>summary .sm-val{color:var(--ink); font-weight:500}
.collapse>div{padding-top:12px}

/* 手機日期橫條 */
.dayline{display:none; align-items:center; gap:6px}
.dayline .dnav{width:30px; height:44px; border-radius:8px; color:var(--ink2); flex:none;
  display:inline-flex; align-items:center; justify-content:center; background:var(--chip)}
.dayline-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; flex:1; min-width:0}
.dchip{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:6px 0 5px; border-radius:10px; background:var(--panel2); min-width:0; position:relative;
}
.dchip .dw{font-size:10.5px; color:var(--ink2); line-height:1.2}
.dchip b{font-size:15px; font-variant-numeric:tabular-nums; line-height:1.2}
.dchip .dot{width:4px; height:4px; border-radius:50%; background:var(--ink3); margin-top:1px}
.dchip.today b{color:var(--crit)}
.dchip[aria-pressed="true"]{background:var(--accent); }
.dchip[aria-pressed="true"] .dw{color:var(--accent-ink); opacity:.85}
.dchip[aria-pressed="true"] b{color:var(--accent-ink)}
.dchip[aria-pressed="true"] .dot{background:var(--accent-ink)}

/* ---------------- 週課表 ---------------- */
.cal-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.cal{min-width:880px}
.cal.oneday{min-width:0}
.cal.oneday .cal-head{grid-template-columns:52px minmax(0,1fr)}
.cal.oneday .cal-body{grid-template-columns:52px minmax(0,1fr)}
.cal.oneday .dh{font-size:13px}
.cal.oneday .sess{font-size:13px}
.cal.oneday .sess .st{font-size:12.5px}
.cal-head{display:grid; grid-template-columns:56px repeat(7,minmax(112px,1fr)); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; background:var(--panel); border-radius:var(--r) var(--r) 0 0}
.cal-head .dh{padding:10px 8px 8px; text-align:center; border-left:1px solid var(--line-soft); font-size:12.5px; color:var(--ink2)}
.cal-head .dh b{display:block; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums}
.cal-head .dh.today b{color:var(--crit)}
.cal-body{display:grid; grid-template-columns:56px repeat(7,minmax(112px,1fr))}
.tcol{position:relative}
.tcol .tl{position:absolute; right:8px; transform:translateY(-50%); font-size:11.5px; color:var(--ink3); font-variant-numeric:tabular-nums}
.dcol{position:relative; border-left:1px solid var(--line-soft);
  background:repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line-soft) 47px, var(--line-soft) 48px)}
.dcol.today{background-color:color-mix(in srgb, var(--accent) 4%, transparent)}
.sess{position:absolute; border-radius:7px; overflow:hidden; padding:4px 7px; font-size:12px; line-height:1.35;
  cursor:pointer; background:color-mix(in srgb, var(--tc) 14%, var(--panel)); border-left:3px solid var(--tc)}
:root[data-theme="dark"] .sess{background:color-mix(in srgb, var(--tc) 26%, var(--panel))}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sess{background:color-mix(in srgb, var(--tc) 26%, var(--panel))} }
.sess:hover{filter:brightness(.96); z-index:4}
.sess .st{font-weight:700; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.sess .sn{font-weight:700; color:var(--ink)}
.sess .sf{color:var(--ink2)}
.sess .mk{font-size:10.5px; font-weight:700; color:var(--tc)}
.sess.warn-court{box-shadow:inset 0 0 0 1.5px var(--crit)}

/* 拖曳搬移與縮放 */
.cal-body{position:relative}
.sess{touch-action:none; user-select:none}
.sess .rz{position:absolute; left:0; right:0; bottom:0; height:8px; cursor:ns-resize}
.sess .rz::after{content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:22px; height:3px; border-radius:2px; background:var(--tc); opacity:0; transition:opacity .12s}
.sess:hover .rz::after{opacity:.5}
.sess.is-source{opacity:.32}
.cal.dragging{cursor:grabbing}
.cal.dragging .sess{pointer-events:none}
.sess-ghost{
  position:absolute; z-index:20; border-radius:7px; padding:4px 7px; font-size:12px; line-height:1.35;
  background:color-mix(in srgb, var(--tc) 24%, var(--panel)); border-left:3px solid var(--tc);
  box-shadow:0 6px 18px rgba(0,0,0,.24); pointer-events:none; outline:1.5px solid var(--tc);
}
.sess-ghost .gt{font-weight:700; font-size:11.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.sess-ghost .gn{color:var(--ink2)}
.sess-ghost.clash{outline-color:var(--crit)}
.sess-ghost.clash .gt{color:var(--crit)}
/* Ctrl／⌘ 拖曳＝複製：原卡不淡出（因為它會留著），改用虛線幽靈卡表示「多出一份」 */
.cal.copying{cursor:copy}
.cal.copying .sess{pointer-events:none}
.sess-ghost.copying{outline-style:dashed; outline-width:2px;
  background:color-mix(in srgb, var(--tc) 16%, var(--panel))}
.sess-ghost .gcopy{margin-top:2px; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--tc)}
.drop-hint.copying{background:var(--accent); color:#fff}

.drop-hint{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
  background:var(--sidebar); color:#fff; border-radius:9px; padding:7px 15px; font-size:12.5px;
  font-variant-numeric:tabular-nums; pointer-events:none; box-shadow:var(--shadow)}
.scope-opt{display:block; width:100%; text-align:left; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 14px; margin-bottom:9px; background:var(--panel2)}
.scope-opt:hover{border-color:var(--accent); background:var(--accent-soft)}
.scope-opt b{display:block; font-size:14px}
.scope-opt span{font-size:12.5px; color:var(--ink2)}

/* ---------------- 學員檔案 ---------------- */
.prof-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.avatar{width:52px; height:52px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--tc) 16%, var(--panel)); border:1.5px solid var(--tc);
  font-size:21px; font-weight:800; color:var(--tc)}
.prof-head .who{flex:1; min-width:200px}
.prof-head h2{font-size:21px; font-weight:800; letter-spacing:.02em}
.prof-head .meta{font-size:12.5px; color:var(--ink2); margin-top:3px}
.skill{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.skill:last-of-type{border-bottom:none}
.skill .sk-info{grid-column:1; grid-row:1}
.skill .sk-n{font-weight:700; font-size:13.5px}
.skill .sk-t{font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums}
.sk-meter{grid-column:1; grid-row:2; height:6px; border-radius:3px; background:var(--chip); overflow:hidden; align-self:center}
.sk-meter i{display:block; height:100%; border-radius:3px; background:var(--accent)}
.dots{grid-column:2; grid-row:1/3; display:flex; gap:4px; align-items:center}
.dot-btn{width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line); background:var(--panel2); flex:none}
.dot-btn.on{background:var(--accent); border-color:var(--accent)}
.dot-btn:disabled{cursor:default}
.sk-lab{font-size:11.5px; color:var(--ink2); min-width:34px; text-align:right; white-space:nowrap}
.radar-wrap{display:flex; justify-content:center; padding:4px 0}
.hist{max-height:440px; overflow-y:auto}
.hrow{display:grid; grid-template-columns:76px 1fr auto; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px; align-items:start}
.hrow:last-child{border-bottom:none}
.hrow .hd{font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums}
.hrow .hd b{display:block; color:var(--ink); font-size:13px}
.tagrow{display:flex; flex-wrap:wrap; gap:5px; margin-top:4px}

/* ---------------- 點名 ---------------- */
.roll{border:1px solid var(--line-soft); border-radius:10px; margin-bottom:12px; overflow:hidden}
.roll>header{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--panel2); flex-wrap:wrap}
.roll>header b{font-size:14px}
.roll>header .rt{font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.roll>header .grow{flex:1}
.rstu{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line-soft); flex-wrap:wrap}
.rstu .rn{font-weight:700; font-size:13.5px; min-width:88px}
.rstu .rp{font-size:12px; color:var(--ink2); flex:1; min-width:120px}
.seg{display:flex; gap:2px; background:var(--chip); padding:3px; border-radius:9px}
.seg button{padding:5px 12px; border-radius:7px; font-size:13px; font-weight:700; color:var(--ink2); white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.seg button[aria-pressed="true"][data-v="present"]{color:var(--good)}
.seg button[aria-pressed="true"][data-v="leave"]{color:var(--warn)}
.seg button[aria-pressed="true"][data-v="absent"]{color:var(--crit)}
.seg button[aria-pressed="true"][data-v="makeup"]{color:var(--accent)}

/* ---------------- 對話框 ---------------- */
.backdrop{position:fixed; inset:0; background:rgba(10,18,25,.48); z-index:60; display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; overflow-y:auto}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  width:100%; max-width:470px; max-height:90vh; overflow-y:auto; padding:22px 24px}
.modal.wide{max-width:680px}
/* 側邊抽屜：靠右、滿高，左邊的清單還看得到，編輯球路時比置中視窗好對照 */
.backdrop.side{justify-content:flex-end; padding:0; align-items:stretch; background:rgba(10,18,25,.28)}
.modal.side{max-width:560px; max-height:100vh; height:100vh; border-radius:0; border-width:0 0 0 1px; margin:0 0 0 auto;
  padding:22px 24px 28px; box-shadow:-12px 0 36px rgba(0,0,0,.25)}
@media (max-width:860px){ .backdrop.side{align-items:flex-end} .modal.side{height:auto; max-height:93vh; border-radius:16px 16px 0 0} }
.modal h2{font-size:18px; font-weight:800; letter-spacing:.02em; margin-bottom:16px; text-wrap:balance}
.fld{margin-bottom:14px}
.fld>label{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px; letter-spacing:.03em}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row3{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:10px}
@media (max-width:520px){ .row3{grid-template-columns:1fr 1fr} }
.hint{font-size:12px; color:var(--ink2); margin-top:4px}
.hint.err{color:var(--crit)}
.hint.warnbox{background:var(--crit-soft); color:var(--crit); border-radius:7px; padding:8px 11px; margin-top:8px; line-height:1.5}
.hint.notebox{background:var(--warn-soft); color:var(--warn); border-radius:7px; padding:8px 11px; margin-top:8px; line-height:1.5}
.checks{display:flex; flex-wrap:wrap; gap:7px}
.ck{display:inline-flex; align-items:center; gap:6px; font-size:13px; background:var(--chip); color:var(--chip-ink);
  border-radius:999px; padding:5px 12px; cursor:pointer; border:1.5px solid transparent; user-select:none}
.ck.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:700}
.ck .ckx{color:var(--ink3); font-weight:700; padding:0 2px}
.ck .ckx:hover{color:var(--crit)}
.addrow{display:flex; gap:8px; margin-top:8px}
.addrow input,.addrow select{flex:1}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.sw{width:26px; height:26px; border-radius:50%; border:2.5px solid transparent}
.sw.on{border-color:var(--ink)}
.m-actions{display:flex; gap:10px; margin-top:20px; align-items:center; flex-wrap:wrap}
.m-actions .spacer{flex:1}

/* ---------------- 提示訊息 ---------------- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  background:var(--sidebar); color:#fff; border-radius:10px; padding:10px 18px; font-size:13.5px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:80; max-width:88vw;
}
#toast.show{opacity:1; transform:translate(-50%, 0)}
#toast[data-kind="error"]{background:var(--crit); color:#fff}

/* ---------------- PCT ---------------- */
.tech-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px}
.tech{border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; text-align:left; background:var(--panel2)}
.tech .code{font-size:11px; font-weight:700; color:var(--ink2); letter-spacing:.06em}
.tech b{display:block; font-size:14.5px; margin:1px 0 2px}
.tech .tb{font-size:12px; color:var(--ink2); line-height:1.4}
.tech.on{border-color:var(--accent); background:var(--accent-soft)}
.tech.on .code{color:var(--accent)}
.params{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:14px 22px}
.param label{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:6px}
.param .pval{color:var(--ink); font-variant-numeric:tabular-nums}
.pathbar{display:grid; grid-template-columns:52px 1fr 76px; gap:10px; align-items:center; margin-bottom:10px}
.pathbar .pl{font-size:12.5px; font-weight:700; color:var(--ink2)}
.pathbar .pt{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.pbar{display:flex; gap:2px; height:26px}
.pseg{border-radius:4px; display:flex; align-items:center; justify-content:center; min-width:3px; font-size:11px;
  font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .pseg{color:#0F171E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pseg{color:#0F171E} }
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px; font-size:12px; color:var(--ink2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.verdict{font-size:13.5px; background:var(--panel2); border-left:3px solid var(--accent); border-radius:7px; padding:9px 13px; margin-bottom:16px}
.verdict.neg{border-left-color:var(--crit)}
.stage{border:1px solid var(--line-soft); border-radius:10px; margin-bottom:12px; overflow:hidden}
.stage>header{display:flex; align-items:baseline; gap:10px; padding:10px 14px; background:var(--panel2); font-weight:700; font-size:14px; flex-wrap:wrap}
.stage>header .mins{margin-left:auto; font-size:12.5px; color:var(--ink2); font-weight:400; font-variant-numeric:tabular-nums}
.stage .item{padding:10px 14px; border-top:1px solid var(--line-soft); font-size:13px}
.stage .item .d{color:var(--ink2); font-size:12.5px; margin-top:2px; line-height:1.5}
details.ref{margin-top:10px}
details.ref summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--accent)}
details.ref>div{margin-top:10px}

/* ============================================================
   手機版排程表
   ============================================================ */
@media (max-width:860px){
  .sched{grid-template-columns:minmax(0,1fr); gap:12px}
  .dayline{display:flex}
  /* 觸控：長按才進入拖曳，平常可正常捲動 */
  .sess{touch-action:pan-y}
  .sess.drag-armed{touch-action:none; box-shadow:0 0 0 2px var(--tc), 0 6px 16px rgba(0,0,0,.3); z-index:6}
  .sess .rz{height:18px}
  .sess .rz::after{opacity:.45; width:28px; height:4px}
  .cal-head{font-size:12px}
  .drop-hint{bottom:96px; font-size:13px; padding:9px 16px}
  .scope-opt{padding:13px 15px}
}
@media (max-width:520px){
  .dchip .dw{font-size:9.5px}
  .dchip b{font-size:14px}
  .dayline .dnav{width:26px}
}

/* 手機：日曆優先，日期／篩選收合區移到下方；時間軸限高並自動捲到第一堂課 */
@media (max-width:860px){
  .sched{display:flex; flex-direction:column; align-items:stretch}
  .sched>.sched-side{order:2}
  .sched>.sched-main{order:1}
  .cal-wrap{max-height:64vh; overflow-y:auto; overscroll-behavior:contain}
  .cal.oneday .cal-head{display:none}
  .cal-head{position:sticky; top:0}
  .dchip{min-height:46px}
  .panel-head .vswitch{order:-1}
}

/* ============================================================
   訓練內容：球桌落點圖與球路編輯
   ============================================================ */
.dg-wrap{--dg-w:300px; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:100%}
.dg-lab{font-size:11px; color:var(--ink3); letter-spacing:.06em}
.dg{
  width:var(--dg-w); max-width:100%; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel2);
}
.dg-far{height:calc(var(--dg-w) * .34); background:var(--chip); position:relative}
.dg-far::after{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line)}
.dg-net{height:3px; background:var(--ink3)}
.dg-near{
  position:relative; padding:7px 6px;
  background:var(--chip);
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.dg-near::after{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); pointer-events:none}
.spot{
  aspect-ratio:1; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--ink3);
  font-size:10px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center; padding:0; position:relative;
}
.spot:hover{border-color:var(--accent); color:var(--accent)}
.spot.on{color:#fff; border-color:transparent; font-weight:700; font-size:11px}
.dg.ro .spot{pointer-events:none}
.dg.ro .spot:not(.on){opacity:.35}
.dg-side{display:flex; justify-content:space-between; width:var(--dg-w); max-width:100%; font-size:11px; color:var(--ink3)}

/* 球路步驟列 */
.steps{display:flex; flex-direction:column; gap:7px; margin-top:10px}
/* 對話框只有 ~470px 寬，六欄擠在一行一定會把下拉壓扁，
   所以固定拆兩行：上行是手法／旋轉／刪除，下行是來球落點與回擊點。 */
.step{
  display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) auto;
  gap:6px 8px; align-items:center;
  background:var(--panel2); border-radius:9px; padding:7px 9px;
}
.step > .idx{grid-area:1 / 1}
.step > select[data-f="stroke"]{grid-area:1 / 2}
.step > select[data-f="spin"]{grid-area:1 / 3}
.step > .del{grid-area:1 / 4; justify-self:end}
.step > .spot-btn, .step > .spot-edit[data-f="in"]{grid-area:2 / 2 / 3 / 3}
.step > .hit-btn,  .step > .spot-edit[data-f="hit"]{grid-area:2 / 3 / 3 / 5}
.step .idx{
  width:28px; height:28px; border-radius:50%; color:#fff; font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; user-select:none; border:none; padding:0;
}
/* 29px 太矮，滑鼠與觸控都不好按；加高到 38px 並放大字 */
.step select{padding:8px; font-size:13.5px; min-height:38px; cursor:pointer}
.step select:hover{border-color:var(--accent)}
.step .spot-btn{
  font-size:12.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border-radius:7px; padding:8px 10px; min-height:34px; white-space:nowrap;
  display:flex; align-items:center;
}
.step .del{color:var(--ink3); padding:6px 8px; border-radius:7px; min-width:30px; min-height:30px}
.step .del:hover{color:var(--crit); background:var(--crit-soft)}
@media (max-width:520px){
  /* 更窄的時候再拆成三行，落點與回擊各自佔滿 */
  .step{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) auto}
  .step > .spot-btn, .step > .spot-edit[data-f="in"]{grid-area:2 / 2 / 3 / 5}
  .step > .hit-btn,  .step > .spot-edit[data-f="hit"]{grid-area:3 / 2 / 4 / 5}
}

/* 訓練內容清單 */
.dcat{margin-bottom:16px}
.dcat>header{display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap}
.dcat>header .bar{width:4px; height:17px; border-radius:2px; background:var(--cc)}
.dcat>header h3{font-size:15.5px}
.drill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:11px}
/* 卡片：左上角勾選框＝加入清單；整張卡其餘部分是開啟編輯的按鈕 */
.drill-card{position:relative}
.drill-card .drill-open{display:block; width:100%; text-align:left; padding:12px 12px 12px 34px; background:none; border:none; color:inherit; font:inherit; cursor:pointer; border-radius:inherit}
.drill-card .pick{position:absolute; left:9px; top:11px; z-index:1; display:flex; cursor:pointer; padding:2px}
.drill-card .pick input{width:16px; height:16px; margin:0; cursor:pointer}
.drill-card.picked{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.drill-card{
  border:1px solid var(--line); border-radius:11px; padding:0; background:var(--panel2);
  text-align:left; display:flex; flex-direction:column; gap:6px;
}
.drill-card .drill-open{display:flex; flex-direction:column; gap:6px}
.drill-card:hover{border-color:var(--accent)}
.drill-card .dn{font-weight:700; font-size:14px}
.drill-card .dmeta{font-size:12px; color:var(--ink2); display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.mini-tbl{
  width:74px; display:grid; grid-template-columns:repeat(7,1fr); gap:1.5px;
  padding:4px; background:var(--chip); border-radius:5px; border-top:2px solid var(--ink3);
}
.mini-tbl i{aspect-ratio:1; border-radius:50%; background:var(--line)}
.mini-tbl i.on{background:var(--cc, var(--accent))}
/* 有回擊點時上下半台各一組，中間一條球網 */
.mini-tbl.twin{border-top:none; row-gap:1.5px}
.mini-tbl.twin i.far{opacity:.55}
.mini-tbl.twin i.far:nth-child(28){box-shadow:0 3px 0 -1px var(--ink3)}

/* 導覽列標籤：桌機用完整名稱，手機用短名 */
.lbl-short{display:none}
@media (max-width:860px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
}

/* 模組開關列 */
.mod-row{display:flex; align-items:flex-start; gap:14px; background:var(--panel2);
  border-radius:10px; padding:13px 15px; flex-wrap:wrap}
.mod-row>div{flex:1; min-width:220px}
.mod-row b{font-size:14.5px}

/* ---------------- 浮動說明卡 ---------------- */
.pop{
  position:fixed; z-index:70; width:300px; max-width:calc(100vw - 16px);
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.28); overflow:auto;
}
.pop-head{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--line-soft); background:var(--panel2);
  position:sticky; top:0; border-radius:12px 12px 0 0;
}
.pop-head b{flex:1; font-size:14px}
.pop-x{color:var(--ink3); padding:2px 5px; border-radius:6px; font-size:13px}
.pop-x:hover{color:var(--crit); background:var(--crit-soft)}
.pop-body{padding:12px}
.pop-body .dg-wrap{margin:6px 0}
.pop-row{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px}
.pop-sec{font-size:11.5px; font-weight:700; color:var(--ink3); margin:10px 0 4px; letter-spacing:.05em}
.pop-txt{font-size:12.5px; color:var(--ink2); line-height:1.55}
.pop-steps{display:flex; flex-direction:column; gap:5px}
.pop-step{display:flex; align-items:center; gap:8px; font-size:12.5px; background:var(--panel2); border-radius:7px; padding:5px 8px}
.pop-step .n{width:19px; height:19px; border-radius:50%; color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:none}

/* 訓練內容晶片：方框打勾、文字看說明 */
.ck.split{padding:0; gap:0; overflow:hidden; align-items:stretch}
.ck.split .ck-box{margin:0; padding:6px 5px 6px 11px; display:flex; align-items:center; cursor:pointer}
.ck.split .ck-box input{margin:0}
.ck.split .ck-name{
  padding:6px 11px 6px 6px; font-size:13px; color:inherit; font-weight:inherit;
  border-left:1px solid transparent; text-align:left;
}
.ck.split .ck-name:hover{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
.ck.split .ck-name::after{content:"ⓘ"; font-size:10.5px; opacity:.5; margin-left:5px}
.ck.split .ckx{padding:6px 9px 6px 0}

/* 代班教練 */
.mk.cover{color:var(--warn)}
.sess .sf.cov{font-weight:700; opacity:.9}
.ck .ck-tag{margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:1px 5px; border-radius:5px; background:var(--accent-soft); color:var(--accent)}
.roll .rt .cov{color:var(--accent); font-weight:700}

/* 不定點（一球多落點） */
.dg .spot.rnd{box-shadow:inset 0 0 0 2px color-mix(in srgb, #fff 78%, transparent)}
.dg .spot.pending{color:var(--panel); opacity:.85; box-shadow:inset 0 0 0 2px var(--line)}
.step .idx.rnd{box-shadow:inset 0 0 0 2px color-mix(in srgb, #fff 78%, transparent)}
.step .spot-btn.rnd{background:var(--accent-soft); color:var(--accent); font-weight:700}
.pendbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px;
  padding:9px 12px; border:1.5px dashed var(--line); border-radius:9px;
  background:var(--panel2); font-size:12.5px}
.pendbar .spacer{flex:1}
.tabs.rmode button{font-size:12.5px}

/* 主機版的登入提示 */
.demo-badge.ok{background:var(--good-soft); color:var(--good)}


/* ============================================================
   回擊點（對方半台）與重複落點
   ============================================================ */
/* 上半台原本是空的裝飾區；要選回擊點時把它變成跟下半台一樣的格子 */
.dg.has-far .dg-far{
  height:auto; padding:7px 6px;
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.dg.has-far .dg-far::after{content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:var(--line); pointer-events:none}
.dg-far.empty{}
.dg{position:relative}
/* 來球 → 回擊 的連線；蓋在格子上面但不吃點擊 */
.dg-links{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.dg .spot{z-index:1}
.dg-side.far{color:var(--ink3); opacity:.85}

/* 同一格被好幾球用到（正正反＝6、2、6）：字要縮小才塞得下 1·3 */
.dg .spot.on.multi{font-size:9.5px; letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #fff 55%, transparent)}

/* 球路列：選中的那一球，回擊點會配到它身上 */
.step{cursor:pointer; border:1.5px solid transparent}
.step.sel{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.step select{min-width:0}
.step .hit-btn{
  font-size:11.5px; padding:3px 8px; border-radius:6px; white-space:nowrap;
  background:var(--chip); color:var(--ink2); cursor:pointer;
}
.step .hit-btn.rnd{background:var(--accent-soft); color:var(--accent); font-weight:700}
.step .hit-btn.none{color:var(--ink3); opacity:.75}
.step .hit-btn:hover{outline:1px solid var(--line)}

/* 大項拖曳排序 */
.dcat-grip{
  width:18px; text-align:center; color:var(--ink3); cursor:grab;
  font-size:15px; line-height:1; user-select:none; touch-action:none;
  border-left:3px solid var(--cc); padding-left:5px;
}
.dcat-grip:hover{color:var(--accent)}
.dcat.movable.dragging{opacity:.55; outline:2px dashed var(--accent); border-radius:10px}
.cat-dragging{cursor:grabbing}
.cat-dragging .drill-card{pointer-events:none}

/* ============================================================
   球路列就地編輯
   ============================================================ */
/* 編輯中的球桌圖：外框變色，讓人一眼看出「現在點格子不是新增」 */
.dg.editing{outline:2px solid var(--accent); outline-offset:2px}
.dg.editing.edit-near .dg-far,
.dg.editing.edit-far  .dg-near{opacity:.5}
.editbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px;
  padding:8px 11px; border-radius:9px; font-size:12.5px;
  background:var(--accent-soft); color:var(--accent);
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.editbar .idx{
  width:21px; height:21px; border-radius:50%; color:#fff; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.editbar .spacer{flex:1}

.step.editing{border-color:var(--accent); background:var(--accent-soft)}
/* input 預設會用 size 屬性撐出約 180px，放在 auto 欄會把手法／旋轉擠扁，
   所以要明確給寬度 */
.step .spot-edit{
  min-width:0; width:100%; font-size:13.5px; padding:8px; min-height:38px;
  font-variant-numeric:tabular-nums;
}
/* 落點欄與回擊欄都限寬，長字串不能把手法／旋轉的下拉擠扁 */
.step .spot-btn, .step .hit-btn{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.step .spot-btn{cursor:pointer; border:1px solid transparent; text-align:left}
.step .spot-btn:hover{border-color:var(--accent); color:var(--accent)}
.step .hit-btn{display:inline-flex; align-items:center; gap:2px; padding:0 3px 0 0; min-height:34px; justify-self:start}
.step .hit-lbl{padding:8px 10px; min-height:34px; display:flex; align-items:center}
.step .hit-lbl{font:inherit; color:inherit; cursor:pointer}
.step .hit-x{
  color:var(--ink3); font-size:10px; padding:1px 4px; border-radius:4px; line-height:1;
}
.step .hit-x:hover{color:var(--crit); background:var(--crit-soft)}

/* 主機資訊：平板要連的網址要一眼看到（.app 沒有終端機視窗） */
.urlrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.bigurl{
  font-size:15px; font-weight:700; letter-spacing:.01em;
  padding:9px 14px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent);
  font-variant-numeric:tabular-nums; user-select:all;
}


/* 球路列：拖編號可以調整球的先後順序 */
.step .idx:hover{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent)}
.step.dragging{opacity:.5; outline:2px dashed var(--accent); outline-offset:1px}
.steps.reordering{cursor:grabbing}
.steps.reordering select, .steps.reordering .spot-btn,
.steps.reordering .hit-btn, .steps.reordering .del{pointer-events:none}
.step .mv{color:var(--ink3); padding:4px 6px; border-radius:6px; min-width:28px; min-height:28px; font-size:11px}
.step .mv:hover{color:var(--accent); background:var(--accent-soft)}
.step .mv[disabled]{opacity:.3}

/* ---------------- 共用篩選列（全台圖與影片） ---------------- */
.fbar{display:flex; flex-wrap:wrap; gap:8px 14px; margin:2px 0 12px}
.fbar.compact{margin-bottom:10px}
.seg{display:inline-flex; flex-wrap:wrap; max-width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px}
.seg button{padding:5px 11px; border-radius:7px; font-size:12.5px; color:var(--ink2); background:none; border:none; cursor:pointer; font:inherit; min-height:30px}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel); color:var(--accent); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------------- 全台訓練分佈 ---------------- */
.heat-body{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:18px 26px; align-items:start}
.heat-dg .dg-wrap{--dg-w:min(440px, calc(100vw - 72px))}
.heat-dg{display:flex; flex-direction:column; align-items:center; gap:8px}
.heat-legend{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink3)}
.heat-legend i{width:120px; height:8px; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--accent))}
.dg.heat .spot{border-radius:9px; font-size:10.5px; font-weight:600}
.dg.heat .spot.on{color:#fff}
.dg.heat .spot.on.lo{color:var(--ink)}
.dg.heat .spot:not(.on){opacity:.55}
.dg.heat .spot:hover{opacity:1; border-color:var(--accent)}
.dg.heat .spot.sel{box-shadow:0 0 0 3px var(--accent); border-color:transparent; opacity:1}
.dg.heat .spot .rt{position:absolute; right:2px; top:1px; font-size:8px; font-style:normal; font-weight:700;
  background:rgba(0,0,0,.35); color:#fff; padding:0 3px; border-radius:5px; line-height:12px}
.dg.heat .spot.lo .rt{background:var(--warn-soft); color:var(--warn)}
.heat-detail{min-width:0}
.heat-detail .hd-top{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px}
.heat-detail .rowbtn{width:100%; text-align:left; font:inherit; color:inherit; background:none; cursor:pointer}
.heat-detail .rowbtn:hover{background:var(--panel2)}
@media (max-width:860px){ .heat-body{grid-template-columns:1fr} }

/* ---------------- 訓練影片（YouTube） ---------------- */
.vgrid{display:grid; gap:12px; margin-top:6px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr))}
.vcard{display:block; text-align:left; padding:0; cursor:pointer; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; color:inherit; font:inherit}
.vcard:hover{border-color:var(--accent); box-shadow:0 3px 12px rgba(0,0,0,.12)}
.vthumb{position:relative; aspect-ratio:16/9; background:#0B1218; display:flex; align-items:center; justify-content:center; overflow:hidden}
.vthumb img{width:100%; height:100%; object-fit:cover; display:block}
.vthumb .vplay{position:absolute; left:8px; bottom:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; padding-left:2px}
.vthumb .vkind{position:absolute; right:8px; top:8px; font-size:11px; padding:2px 7px; border-radius:99px; background:rgba(0,0,0,.55); color:#fff}
.vcard:hover .vplay{background:var(--accent); color:var(--accent-ink)}
.vmeta{display:block; padding:9px 11px 11px}
.vmeta b{display:block; font-size:13.5px; line-height:1.35; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vmeta .sk-t{display:block}
.vplayer{margin:-4px 0 14px; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9}
.vplayer iframe{display:block; width:100%; height:100%; border:0}
.vprev{display:flex; align-items:center; gap:10px; margin:-4px 0 12px}
.vprev img{width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#000}

/* ---------------- 清單托盤與套餐 ---------------- */
.tray{
  position:sticky; bottom:12px; z-index:5; margin-top:14px;
  background:var(--panel); border:1px solid var(--accent); border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.18); padding:10px 14px 12px;
}
.tray-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tray-total{font-size:13px; color:var(--ink2)}
.tray-items{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tray-it{display:inline-flex; align-items:center; gap:4px; background:var(--chip); color:var(--chip-ink); border-radius:9px; padding:4px 4px 4px 10px; font-size:13px}
.tray-it .tn{font-weight:600}
.tmin{width:58px; padding:4px 6px; font-size:13px; text-align:right; border-radius:6px}
.tray-it .tx, .mrow .tx{background:none; border:none; color:var(--ink3); font-size:15px; padding:2px 6px; cursor:pointer; border-radius:6px; line-height:1}
.tray-it .tx:hover, .mrow .tx:hover{color:var(--crit); background:var(--crit-soft)}
body.has-tray .page{padding-bottom:40px}
.menu-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); margin-top:6px}
.menu-card{display:flex; flex-direction:column; background:var(--panel2); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.menu-card:hover{border-color:var(--accent)}
.menu-card .menu-open{flex:1; text-align:left; background:none; border:none; color:inherit; font:inherit; padding:12px; cursor:pointer}
.menu-card .dn{font-weight:700; font-size:14px; margin-bottom:4px}
.menu-card .dmeta{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px}
.menu-items{display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink2)}
.menu-items span{display:flex; justify-content:space-between; gap:8px}
.menu-items i{font-style:normal; font-variant-numeric:tabular-nums; color:var(--ink3)}
.menu-items i::after{content:" 分"}
.menu-act{padding:0 12px 12px; display:flex; justify-content:flex-end}
.mlist{display:flex; flex-direction:column; gap:4px}
.mrow{display:grid; grid-template-columns:24px 1fr 64px auto auto auto auto; gap:6px; align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:5px 8px; font-size:13px}
.mrow .idx{color:var(--ink3); font-size:12px; text-align:center}
.mrow .tn{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mrow .mv{background:none; border:none; color:var(--ink3); padding:3px 5px; cursor:pointer; border-radius:6px; font-size:11px}
.mrow .mv:hover{color:var(--accent); background:var(--accent-soft)}
.mrow .mv[disabled]{opacity:.3; cursor:default}
.ck.split .ck-min{width:52px; margin:4px 6px 4px 0; padding:3px 5px; font-size:12px; text-align:right; border-radius:6px; align-self:center}
/* 清單檢視：表格要佔滿整列，不能被卡片格線切成一欄 */
.drill-grid.as-list{display:block}
.dtbl td{vertical-align:middle}
.dtbl tr.picked td{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.dtbl .rowlink{font-weight:700}
.dtbl .dstu{font-size:12px; color:var(--ink2)}
.drill-card .dstu{color:var(--ink2)}
.tabs.rmode .serve-btn{margin-left:auto; color:var(--accent); font-weight:700}

/* ============================================================
   外觀主題（skin）—— 設定頁可切換，存在這台裝置
   classic：原本的樣子｜arena：球館夜賽｜lab：運動科學實驗室｜court：明亮球桌
   每個 skin 自己決定深淺色，不跟系統的深色模式連動
   ============================================================ */
.ball-dot{display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--ball, var(--accent)); margin-left:.12em; vertical-align:.12em; box-shadow:0 0 .5em var(--ball, transparent)}

/* ---------- ARENA：夜間賽場（深藍球桌＋橘色球） ---------- */
:root[data-skin="arena"]{
  color-scheme:dark;
  --bg:#060C17; --panel:rgba(14,25,43,.94); --panel2:rgba(130,170,230,.07); --sidebar:#050E1D;
  --ink:#EAF1FB; --ink2:#9DB1CA; --ink3:#647A95;
  --line:rgba(120,165,230,.17); --line-soft:rgba(120,165,230,.09);
  --accent:#3D8BFF; --accent-ink:#03101F; --accent-soft:rgba(61,139,255,.17);
  --ball:#FF7A1A;
  --good:#3FD18C; --good-soft:rgba(63,209,140,.14);
  --warn:#FFB547; --warn-soft:rgba(255,181,71,.14);
  --crit:#FF6B6B; --crit-soft:rgba(255,107,107,.14);
  --chip:rgba(130,170,230,.10); --chip-ink:#C9D8EC;
  --cat1:#3D8BFF; --cat2:#FF7A1A; --cat3:#2FD3A0; --cat4:#B48CFF;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.38);
  --side-ink:#B9CBE2; --side-ink2:#6F87A5; --side-active:rgba(61,139,255,.16);
  --r:16px;
}
:root[data-skin="arena"] body{
  background:
    radial-gradient(900px 600px at 100% -10%, rgba(61,139,255,.22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(255,122,26,.10), transparent 60%),
    #060C17;
  background-attachment:fixed;
}
/* 背景淡淡的一張球桌（俯視：外框、中線、球網） */
:root[data-skin="arena"] body::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  right:-120px; bottom:-90px; width:760px; height:430px; transform:rotate(-8deg); opacity:.06;
  background:
    linear-gradient(#fff,#fff) center/3px 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 2px no-repeat;
  border:4px solid #fff; border-radius:6px;
}
:root[data-skin="arena"] .app{position:relative; z-index:1}
:root[data-skin="arena"] .side{
  background:linear-gradient(180deg,#0C2C5C 0%,#08193A 48%,#050E1D 100%);
  border-right:1px solid rgba(120,165,230,.14);
}
:root[data-skin="arena"] .side .brand{font-size:19px; letter-spacing:.08em; text-shadow:0 2px 14px rgba(61,139,255,.45)}
:root[data-skin="arena"] .side .brand .dot{color:var(--ball); text-shadow:0 0 12px var(--ball)}
:root[data-skin="arena"] .nav button{position:relative; border-radius:10px}
:root[data-skin="arena"] .nav button[aria-current="page"]{background:linear-gradient(90deg, rgba(61,139,255,.28), rgba(61,139,255,.06))}
:root[data-skin="arena"] .nav button[aria-current="page"]::before{
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:4px; border-radius:0 4px 4px 0;
  background:var(--ball); box-shadow:0 0 12px var(--ball);
}
:root[data-skin="arena"] .topbar{background:rgba(6,12,23,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:sticky; top:0; z-index:20}
:root[data-skin="arena"] .topbar h1{font-size:21px; letter-spacing:.06em}
:root[data-skin="arena"] .panel, :root[data-skin="arena"] .mcal{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
:root[data-skin="arena"] .panel-head h2, :root[data-skin="arena"] .panel>h2{letter-spacing:.04em}
:root[data-skin="arena"] .kpi{position:relative; overflow:hidden; border:1px solid var(--line-soft); border-radius:12px; padding:13px 16px}
:root[data-skin="arena"] .kpi::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent 70%)}
:root[data-skin="arena"] .kpi .v{font-family:"Barlow Condensed","Noto Sans TC",sans-serif; font-size:30px; font-weight:700; letter-spacing:.01em; line-height:1.15}
:root[data-skin="arena"] .btn.primary{background:linear-gradient(180deg,#5AA0FF,#2F7BF0); color:#fff; box-shadow:0 6px 18px rgba(61,139,255,.35)}
:root[data-skin="arena"] .modal{background:#0E1A2C}
:root[data-skin="arena"] .auth-card{background:rgba(15,27,46,.85); backdrop-filter:blur(14px)}
:root[data-skin="arena"] .auth-card .logo .dot{color:var(--ball)}

/* ---------- LAB：運動科學實驗室（方格紙＋螢光綠數據） ---------- */
:root[data-skin="lab"]{
  color-scheme:dark;
  --bg:#0A0C0F; --panel:#101317; --panel2:#151A1F; --sidebar:#07090B;
  --ink:#E8ECEF; --ink2:#8C98A3; --ink3:#5B6670;
  --line:#1F262D; --line-soft:#181E24;
  --accent:#B8F23A; --accent-ink:#0A0C0F; --accent-soft:rgba(184,242,58,.12);
  --ball:#B8F23A;
  --good:#5BE49B; --good-soft:rgba(91,228,155,.12);
  --warn:#FFC857; --warn-soft:rgba(255,200,87,.12);
  --crit:#FF5C7A; --crit-soft:rgba(255,92,122,.12);
  --chip:#1A2026; --chip-ink:#C2CCD4;
  --cat1:#B8F23A; --cat2:#36C5F0; --cat3:#FF8A5B; --cat4:#C792EA;
  --shadow:none;
  --side-ink:#9AA7B2; --side-ink2:#56616B; --side-active:#12171C;
  --r:6px;
}
:root[data-skin="lab"] body{
  background-color:#0A0C0F;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-attachment:fixed;
}
:root[data-skin="lab"] .side{border-right:1px solid var(--line)}
:root[data-skin="lab"] .side .brand{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:16px; letter-spacing:.12em}
:root[data-skin="lab"] .nav button{border-radius:4px; font-size:13.5px}
:root[data-skin="lab"] .nav button[aria-current="page"]{background:var(--side-active); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
:root[data-skin="lab"] .topbar{background:rgba(10,12,15,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20}
:root[data-skin="lab"] .topbar h1{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:18px; letter-spacing:.04em}
:root[data-skin="lab"] .panel{border-color:var(--line)}
:root[data-skin="lab"] .panel-head h2, :root[data-skin="lab"] .panel>h2{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink2)}
:root[data-skin="lab"] .kpi{background:transparent; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:4px}
:root[data-skin="lab"] .kpi .k{text-transform:uppercase; letter-spacing:.1em; font-size:10.5px}
:root[data-skin="lab"] .kpi .v{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:24px; color:var(--accent); font-weight:600}
:root[data-skin="lab"] .pill, :root[data-skin="lab"] .tbl td.num, :root[data-skin="lab"] .num{font-family:"JetBrains Mono",ui-monospace,monospace}
:root[data-skin="lab"] .btn{border-radius:4px}
:root[data-skin="lab"] .btn.primary{box-shadow:0 0 0 1px var(--accent), 0 0 18px rgba(184,242,58,.25)}
:root[data-skin="lab"] .modal{border-radius:8px}

/* ---------- COURT：明亮球桌（暖白底、球桌藍側欄、膠皮紅） ---------- */
:root[data-skin="court"]{
  color-scheme:light;
  --bg:#F4F0E9; --panel:#FFFFFF; --panel2:#F7F4EF; --sidebar:#0F3D7A;
  --ink:#1A2230; --ink2:#5C6676; --ink3:#8A93A1;
  --line:#E6DFD4; --line-soft:#EFE9E0;
  --accent:#D7263D; --accent-ink:#FFFFFF; --accent-soft:#FCE4E7;
  --ball:#FF8A1F;
  --good:#1E8A5A; --good-soft:#DFF3E8;
  --warn:#B9770E; --warn-soft:#FBEFD9;
  --crit:#C2253A; --crit-soft:#FCE4E7;
  --chip:#F0EBE3; --chip-ink:#4A5363;
  --cat1:#0F3D7A; --cat2:#D7263D; --cat3:#1E8A5A; --cat4:#7A4FB5;
  --shadow:0 1px 2px rgba(60,40,10,.05), 0 10px 30px rgba(60,40,10,.07);
  --side-ink:#D6E2F3; --side-ink2:#8FA9CC; --side-active:rgba(255,255,255,.14);
  --r:18px;
}
:root[data-skin="court"] body{
  background:
    radial-gradient(800px 500px at 110% -10%, rgba(215,38,61,.08), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(15,61,122,.08), transparent 60%),
    #F4F0E9;
  background-attachment:fixed;
}
/* 側欄就是一張球桌：藍色桌面＋白色邊線＋中線 */
:root[data-skin="court"] .side{
  background:linear-gradient(180deg,#134A92,#0C3466);
  box-shadow:inset 0 0 0 5px #0C3466, inset 0 0 0 8px rgba(255,255,255,.9);
}
@media (max-width:860px){ :root[data-skin="court"] .side{background:#0F3D7A; box-shadow:none} }
:root[data-skin="court"] .side .brand{padding-top:12px; font-size:18px; letter-spacing:.08em}
:root[data-skin="court"] .side .brand .dot{color:var(--ball)}
:root[data-skin="court"] .nav{padding:0 4px}
:root[data-skin="court"] .nav button{background:rgba(12,52,102,.85)}
:root[data-skin="court"] .nav button:hover{background:#1A5AA8}
:root[data-skin="court"] .nav button[aria-current="page"]{background:#fff; color:#0F3D7A}
:root[data-skin="court"] .nav button[aria-current="page"] .ic{color:var(--accent); opacity:1}
:root[data-skin="court"] .side .foot{background:rgba(12,52,102,.85); border-radius:10px; margin:0 4px 4px; border-top:0}
:root[data-skin="court"] .topbar{background:transparent; border-bottom:0; padding-top:22px}
:root[data-skin="court"] .topbar h1{font-size:24px; letter-spacing:.04em}
:root[data-skin="court"] .panel{border-color:transparent}
:root[data-skin="court"] .kpi{background:var(--panel2); border-radius:14px; position:relative; padding:13px 16px 13px 20px}
:root[data-skin="court"] .kpi::before{content:""; position:absolute; left:8px; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--accent)}
:root[data-skin="court"] .kpi:nth-child(3n+2)::before{background:#0F3D7A}
:root[data-skin="court"] .kpi:nth-child(3n)::before{background:var(--ball)}
:root[data-skin="court"] .kpi .v{font-family:"Barlow","Noto Sans TC",sans-serif; font-size:26px; font-weight:800}
:root[data-skin="court"] .btn{border-radius:999px}
:root[data-skin="court"] .btn.primary{box-shadow:0 6px 16px rgba(215,38,61,.25)}

/* 設定頁的外觀選擇卡 */
.skin-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-top:6px}
.skin-card{border:2px solid var(--line); border-radius:14px; overflow:hidden; text-align:left; background:var(--panel2); padding:0; cursor:pointer}
.skin-card.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.skin-card .sw{height:74px; display:grid; grid-template-columns:38px 1fr}
.skin-card .sw i{display:block}
.skin-card .sw b{display:block; margin:12px 10px; border-radius:8px}
.skin-card .nm{padding:9px 12px 11px; font-weight:700; font-size:13.5px}
.skin-card .nm small{display:block; font-weight:400; color:var(--ink2); font-size:11.5px; margin-top:1px}

/* ---------------- 排程表：月檢視 ---------------- */
.mcal{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.mcal-head{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line)}
.mcal-head div{padding:9px 8px; font-size:12px; color:var(--ink2); text-align:center; font-weight:700}
.mcal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.mc{border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:6px 6px 8px; min-width:0; cursor:pointer; display:flex; flex-direction:column; gap:3px}
.mc:nth-child(7n){border-right:0}
.mc:hover{background:var(--panel2)}
.mc.out{opacity:.42}
.mc-top{display:flex; align-items:center; justify-content:space-between; gap:4px}
.mc-d{font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; width:26px; height:26px; border-radius:50%; display:grid; place-items:center}
.mc-d:hover{background:var(--accent-soft); color:var(--accent)}
.mc.today .mc-d{background:var(--accent); color:var(--accent-ink)}
.mc-sum{font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums}
.mc-list{display:flex; flex-direction:column; gap:3px; min-width:0}
.mc-s{display:block; width:100%; text-align:left; font-size:12px; line-height:1.35; padding:3px 6px; border-radius:6px;
  background:color-mix(in srgb, var(--tc) 18%, transparent); border-left:3px solid var(--tc); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mc-s b{font-variant-numeric:tabular-nums; font-weight:700}
.mc-s:hover{background:color-mix(in srgb, var(--tc) 32%, transparent)}
.mc-more{font-size:11.5px; color:var(--accent); text-align:left; padding:1px 6px}
@media (max-width:860px){
  .mc{padding:4px 3px 5px}
  .mc-s{font-size:10.5px; padding:2px 4px}
  .mc-s b{display:none}
  .mc-sum{display:none}
}