/* ───────────── Tokens（design-system.md §2；dark first）───────────── */
:root {
  --brand-50:#fdf6e6; --brand-100:#fbe9bd; --brand-300:#ecc878; --brand-500:#d4a84b; --brand-600:#b88a32; --brand-700:#946a23;
  --bg:#0a0f1c; --s1:#0f172a; --s2:#1e293b; --s2-hover:#273449;
  --line:#334155; --line-strong:#475569;
  --text:#f1f5f9; --text-2:#cbd5e1; --muted:#94a3b8; --faint:#94a3b8;
  --gold-text:var(--brand-300);
  --ink:#cbd5e1;              /* 印章／裝訂線墨色 = slate，非新 accent */
  --ok:#34d399; --ok-bg:#022c22; --ok-line:#065f46;
  --warn:#fbbf24; --warn-bg:#451a03; --warn-line:#92400e;
  --err:#f87171; --err-text:#fca5a5; --err-bg:#450a0a; --err-line:#991b1b;
  --drag:#fbbf24;
  --scrim:rgba(2,6,23,.72);
  --font-sans:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Cinzel","Noto Serif TC","Songti TC","PMingLiU",ui-serif,serif;
  --t-200: 200ms;
}
:root[data-theme="light"] {
  --bg:#fbf7ee; --s1:#fffcf3; --s2:#faf6ec; --s2-hover:#f3ecdc;
  --line:#e2e8f0; --line-strong:#cbd5e1;
  --text:#0f172a; --text-2:#334155; --muted:#475569; --faint:#64748b;
  --gold-text:var(--brand-700);
  --ink:#334155;
  --ok:#047857; --ok-bg:#ecfdf5; --ok-line:#a7f3d0;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --err:#dc2626; --err-text:#b91c1c; --err-bg:#fef2f2; --err-line:#fecaca;
  --drag:#f59e0b;
  --scrim:rgba(15,23,42,.45);
}
@media (prefers-reduced-motion: reduce) { :root { --t-200: 0ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 70% 55% at 0% 0%, rgba(212,168,75,.18), transparent 65%),
              radial-gradient(ellipse 55% 40% at 100% 100%, rgba(180,140,60,.08), transparent 70%); }
:root[data-theme="light"] body::before {
  background: radial-gradient(ellipse 70% 55% at 0% 0%, rgba(212,168,75,.16), transparent 65%),
              radial-gradient(ellipse 55% 40% at 100% 100%, rgba(180,140,60,.06), transparent 70%); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
:root[data-theme="light"] body::after { opacity:.22; mix-blend-mode:multiply; }
body > * { position: relative; z-index: 1; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ttl { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; }
.ttl-cjk { font-weight: 900; }
.tnum { font-variant-numeric: tabular-nums; }
.t-xs { font-size: 12px; } .t-label { font-size: 11px; letter-spacing: .08em; line-height: 1.2; } .t-meta { font-size: 10px; letter-spacing: .06em; line-height: 1.3; }

/* ───────────── Mockup 外框（非產品 UI）───────────── */
.mock-strip {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding:8px 16px; border-bottom:1px dashed var(--line-strong);
  background: var(--s1); color: var(--muted); font-size:12px;
}
.mock-strip strong { color: var(--text-2); font-weight:600; }
.mock-strip fieldset { display:flex; flex-wrap:wrap; gap:4px 10px; border:0; margin:0; padding:0; }
.mock-strip legend { float:left; margin-right:6px; padding:0; line-height:32px; color: var(--text-2); }
.mock-strip label { display:inline-flex; align-items:center; gap:4px; min-height:32px; cursor:pointer; }
.mock-strip .hint { flex-basis:100%; }

/* ───────────── App shell ───────────── */
.app { max-width: 1320px; margin: 0 auto; padding: 16px 24px 120px; display:flex; flex-direction:column; gap:16px; }
@media (max-width: 640px) { .app { padding: 12px 16px 140px; } }

.tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); }
.tab { border:0; background:none; padding:8px 12px; min-height:36px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; border-radius:6px 6px 0 0; }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand-500); font-weight:600; }
.tab:hover { color: var(--text); background: var(--s2); }

.head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.head h1 { margin:0; font-size:20px; font-weight:600; }
.head-meta { margin:4px 0 0; color: var(--muted); font-size:12px; }
.head-meta b { color: var(--text-2); }
.actions { display:flex; flex-wrap:wrap; gap:8px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:4px 12px; border-radius:6px; border:1px solid transparent; font-size:14px; font-weight:500; transition: background var(--t-200) ease-out, border-color var(--t-200) ease-out; }
.btn-primary { background: var(--brand-500); color:#0f172a; font-weight:600; }
.btn-primary:hover:not(:disabled) { background: var(--brand-300); }
.btn-secondary { background: var(--s2); border-color: var(--line); color: var(--text-2); }
.btn-secondary:hover:not(:disabled) { background: var(--s2-hover); }
.btn-tertiary { background:none; color: var(--text-2); }
.btn-tertiary:hover:not(:disabled) { background: var(--s2); }
.btn-danger { background: var(--err-bg); border-color: var(--err-line); color: var(--err-text); }
.btn-danger:hover:not(:disabled) { border-color: var(--err); }
.btn-sm { min-height:32px; padding:2px 10px; font-size:12px; }
.btn[aria-pressed="true"] { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(212,168,75,.4); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:11px; letter-spacing:.04em; }
.pill .dot { width:6px; height:6px; border-radius:50%; }
.pill[data-s="idle"] { background: var(--s2); color: var(--text-2); } .pill[data-s="idle"] .dot { background: var(--faint); }
.pill[data-s="saving"] { background: var(--warn-bg); color: var(--warn); } .pill[data-s="saving"] .dot { background: var(--drag); animation: pulse 1s infinite; }
.pill[data-s="saved"] { background: var(--ok-bg); color: var(--ok); } .pill[data-s="saved"] .dot { background: var(--ok); }
.pill[data-s="error"] { background: var(--err-bg); color: var(--err-text); } .pill[data-s="error"] .dot { background: var(--err); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .pill .dot { animation: none !important; opacity:.7; } }

/* ───────────── Banner（失敗／儲存錯誤／綁定模式提示）───────────── */
.banner { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:10px 12px; border-radius:6px; border:1px solid var(--line); background: var(--s1); font-size:14px; }
.banner.err { border-color: var(--err-line); background: var(--err-bg); color: var(--err-text); }
.banner.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }

/* ───────────── 側欄條：待定區 + 固定組合 ───────────── */
.strips { display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width: 960px) { .strips { grid-template-columns: minmax(0,1fr); } }
.panel { background: var(--s1); border:1px solid var(--line); border-radius:8px; padding:12px; min-width:0; }
.panel-h { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.panel-h h2 { margin:0; font-size:11px; letter-spacing:.08em; font-weight:600; color: var(--text-2); }
.panel-h .count { margin-left:auto; color: var(--muted); font-size:11px; }
.panel-note { margin:0 0 8px; color: var(--muted); font-size:12px; }
.panel.drop-ok { border-color: var(--drag); box-shadow: 0 0 0 2px rgba(251,191,36,.45); }

.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:2px 10px 2px 6px; border-radius:6px; border:1px solid var(--line); background: var(--s2); cursor:grab; max-width:100%; }
.chip .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ───────────── 團隊 / 隊伍 / 成員 ───────────── */
.board { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); }
.team { background: var(--s1); border:1px solid var(--line); border-radius:8px; overflow:hidden; min-width:0; }
.team-h { position:relative; display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
.team-h h2 { margin:0; flex:1; min-width:0; font-size:14px; color: var(--gold-text); letter-spacing:.04em; }
.team-h .cnt { font-size:11px; letter-spacing:.06em; }
.team-h .fill { position:absolute; left:0; bottom:0; height:2px; background: var(--brand-500); transform-origin:left; }
.team.drop-ok .team-h { box-shadow: inset 0 0 0 2px var(--drag); }
.team.drop-no .team-h { box-shadow: inset 0 0 0 2px var(--err); }
.squads { display:flex; flex-direction:column; gap:10px; padding:10px; }

.squad { border:1px solid transparent; border-radius:6px; padding:6px; display:flex; flex-direction:column; gap:6px; transition: border-color var(--t-200) ease-out, background var(--t-200) ease-out; }
.squad-h { display:flex; align-items:center; gap:8px; min-height:24px; padding:0 2px; }
.squad-h .nm { font-size:11px; letter-spacing:.08em; color: var(--muted); font-weight:600; }
.squad-h .cnt { margin-left:auto; font-size:10px; letter-spacing:.06em; }
.fit:empty { display:none; }
.squad .fit { font-size:11px; font-weight:600; padding:1px 6px; border-radius:4px; }
.squad.drop-ok { border-color: var(--drag); box-shadow: 0 0 0 2px rgba(251,191,36,.35); }
.squad.drop-ok .fit { color: var(--warn); background: var(--warn-bg); }
.squad.drop-no { border-color: var(--err); background: var(--err-bg); }
.squad.drop-no .fit { color: var(--err-text); }
.squad.rejected { border-color: var(--err); background: var(--err-bg); animation: nudge .32s ease-out 1; }
.squad.landed { border-color: var(--ok-line); }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .squad.rejected { animation: none; } }

.tone-neutral { color: var(--faint); } .tone-warning { color: var(--warn); } .tone-complete { color: var(--ok); } .tone-overflow { color: var(--err); }

.row {
  position:relative; display:flex; align-items:center; gap:8px; min-height:32px; min-width:0;
  padding:4px 4px 4px 8px; border-radius:6px; border:1px solid var(--line);
  background: var(--s2); cursor:grab; user-select:none;
  transition: border-color var(--t-200) ease-out, opacity var(--t-200) ease-out;
}
.row:hover { border-color: var(--line-strong); background: var(--s2-hover); }
.row .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--text); }
.row .job { color: var(--muted); font-size:12px; white-space:nowrap; }
.row.selected { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(212,168,75,.4); }
.row.drag-over { border-color: var(--drag); box-shadow: 0 0 0 2px rgba(251,191,36,.45); }
.row.dragging { opacity:.4; }
.row.picked { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(212,168,75,.4); }
.row.locked { opacity:.55; cursor:not-allowed; }
.row.picked .check { background: var(--brand-500); border-color: var(--brand-500); color:#0f172a; }
.row .lock-note { font-size:11px; color: var(--muted); white-space:nowrap; }
.row.blocked-flash { border-color: var(--err); box-shadow: 0 0 0 2px rgba(248,113,113,.4); }
.row .move { flex:none; min-width:32px; min-height:28px; border:0; background:none; border-radius:4px; color: var(--muted); opacity:0; }
.row:hover .move, .row:focus-within .move, .row:focus .move { opacity:1; }
.row .move:hover { background: var(--s1); color: var(--text); }
@media (hover: none) { .row .move { opacity:1; } }

.glyph { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; flex:none; }
.stripe { position:absolute; left:-1px; top:4px; bottom:4px; width:3px; border-radius:2px; }

.empty-squad { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 8px; border:1px dashed var(--line); border-radius:6px; color: var(--faint); font-size:11px; letter-spacing:.08em; }
.empty-squad .cnt { margin-left:auto; font-size:10px; }
.empty-squad.drop-ok { border-color: var(--drag); border-style:solid; box-shadow: 0 0 0 2px rgba(251,191,36,.35); color: var(--warn); }

/* ───────────── Toast ───────────── */
.toasts { position:fixed; z-index:30; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; width:min(380px, calc(100vw - 32px)); }
.toast { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background: var(--s1); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size:14px; }
.toast .ic { flex:none; width:20px; height:20px; border-radius:4px; display:grid; place-items:center; font-size:12px; font-weight:700; }
.toast.ok { border-color: var(--ok-line); } .toast.ok .ic { background: var(--ok-bg); color: var(--ok); }
.toast.err { border-color: var(--err-line); } .toast.err .ic { background: var(--err-bg); color: var(--err-text); }
.toast .body { flex:1; min-width:0; }
.toast .body b { display:block; font-weight:600; }
.toast .body span { color: var(--muted); font-size:12px; }
.toast .x { border:0; background:none; min-width:32px; min-height:32px; border-radius:4px; color: var(--muted); }
@media (max-width: 640px) { .toasts { left:16px; right:16px; width:auto; } }

/* ───────────── Dialog（集合位置／移動到／組合詳情）───────────── */
dialog[open] { display:flex; flex-direction:column; }
dialog { border:1px solid var(--line); border-radius:8px; padding:0; background: var(--s1); color: var(--text); width:min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: var(--scrim); }
.dlg-h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.dlg-h h2 { margin:0; font-size:16px; font-weight:600; flex:1; }
.dlg-b { padding:12px 16px; display:flex; flex-direction:column; gap:10px; overflow:auto; min-height:0; flex:1 1 auto; }
.dlg-b p { margin:0; color: var(--text-2); }
.dlg-f { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.dlg-f .spacer { flex:1; }
.opts { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; border:0; }
.opt { display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background: var(--s2); cursor:pointer; }
.opt:has(input:checked) { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(212,168,75,.4); }
.opt.disabled { cursor:not-allowed; opacity:.6; }
.opt .what { flex:1; }
.opt .room { font-size:12px; color: var(--muted); }
.opt.disabled .room { color: var(--err-text); }
.opt.current .room { color: var(--muted); }
.opt input { accent-color: var(--brand-500); width:16px; height:16px; }
.team-label { margin:6px 0 0; font-size:11px; letter-spacing:.08em; color: var(--gold-text); font-weight:600; }
.mlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mlist li { display:flex; align-items:center; gap:8px; min-height:36px; padding:2px 4px 2px 8px; border-radius:6px; background: var(--s2); }
.mlist li .nm { flex:1; }
.inline-confirm { padding:10px; border:1px solid var(--err-line); background: var(--err-bg); color: var(--err-text); border-radius:6px; display:flex; flex-direction:column; gap:8px; }
.inline-confirm .row-btns { display:flex; gap:8px; justify-content:flex-end; }

@media (max-width: 640px) {
  dialog { position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:100%; max-height:85dvh; border-radius:12px 12px 0 0; border-bottom:0; }
}

/* ───────────── 載入 / 錯誤 ───────────── */
.skel { background: var(--s2); border-radius:6px; }
.skel-team { height: 420px; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: pulse 1.4s ease-in-out infinite; } }
.fail-card { display:flex; gap:12px; align-items:flex-start; padding:20px; background: var(--s1); border:1px solid var(--line); border-radius:8px; }
.fail-card .ic { width:28px; height:28px; border-radius:6px; display:grid; place-items:center; background: var(--warn-bg); color: var(--warn); font-weight:700; flex:none; }
.fail-card h2 { margin:0 0 4px; font-size:16px; }
.fail-card p { margin:0 0 12px; color: var(--muted); }

.drag-ghost { position:fixed; top:-200px; left:-200px; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; border:1px solid var(--drag); background: var(--s1); color: var(--text); font-size:12px; font-weight:600; }

/* 方案 B／C：畫面區塊間距 */
#view { display:flex; flex-direction:column; gap:16px; min-width:0; }