/* ============================================================
   排桌入座｜樣式（/assets/app.css）

   設計規範在 docs/DESIGN.md（v1.0）：「找到你了」——黃、黑、白。
   黃色＝「這裡」（現在這一步、最該按的鈕、被標記的名字、選中的桌），其他東西不准用黃；黃色不當字色。
   紅橘綠是狀態，部門色是資料，都不拿來裝飾。
   所有輸入框字級 ≥16px（iOS 小於 16px 會自動放大畫面）。
   平面圖匯出的顏色在 export.js 的 THEMES 還有一份（canvas 讀不到 CSS 變數），改一邊要改另一邊。
   ============================================================ */

/* 色彩、字、圓角、陰影的變數在 tokens.css（頁面要先載入它） */

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.num { font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 螢光筆：黃色底刷在字的下半部 */
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .02em; height: .56em; z-index: -1;
  background: var(--yellow); clip-path: polygon(1.5% 14%, 100% 0, 98.5% 86%, 0 100%); transform: rotate(-1.5deg);
}

/* ---------- 頂欄與步驟 ---------- */

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 76rem; min-height: 60px; margin: 0 auto; padding: .6rem 1.5rem;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-size: 1.2rem; font-weight: 900; letter-spacing: .02em; }
.brand-name .hl { color: var(--ink); }
.brand-name .hl::before { height: auto; top: .12em; bottom: .02em; left: -.12em; right: -.12em; }
.top-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: rgba(255, 255, 255, .72); text-align: right; }
.top-note svg { width: 15px; height: 15px; flex: none; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

/* ---------- 共用元件 ---------- */

.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .grid-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--shadow-1);
}
.card h2 { font-size: 1.15rem; font-weight: 700; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem 1.25rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: 1rem; font-weight: 700; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--fill); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { min-height: 40px; padding: .35rem 1rem; font-size: .94rem; }
.btn-lg { width: 100%; min-height: 54px; font-size: 1.1rem; margin: 1rem 0 .6rem; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #2b2b28; border-color: #2b2b28; }
/* 焦點鈕：每頁最多一顆 */
.btn-go { background: var(--yellow); border-color: var(--yellow); color: var(--ink); min-height: 48px; padding: .5rem 1.6rem; }
.btn-go:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.btn-go:focus-visible { outline-color: var(--ink); }
.btn-danger { color: var(--err); border-color: #efb8b2; }
.btn-danger:hover { background: var(--err-soft); border-color: var(--err); color: #B3261E; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.count {
  display: inline-block; min-width: 1.35rem; padding: 0 .4rem; margin-left: .4rem; border-radius: 1rem;
  background: var(--ink); color: #fff; font-family: var(--font-num); font-size: .78rem; line-height: 1.35rem; text-align: center; font-weight: 700;
}

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.field label { font-size: .94rem; font-weight: 700; }
.field .opt { margin-left: .5rem; font-weight: 400; color: var(--ink-3); font-size: .84rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .9rem; font-size: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  caret-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
textarea.roster {
  display: block; min-height: 18rem; resize: vertical; line-height: 1.7; tab-size: 12;
  font-family: var(--font); white-space: pre; overflow: auto;
}
.check { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.check input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; accent-color: var(--ink); flex: none; }
.check small { color: var(--ink-3); font-size: .86rem; }

.hint { font-size: .88rem; color: var(--ink-3); margin-top: .5rem; }
.hint.is-warn { color: var(--err); font-weight: 700; }
.hint.center { text-align: center; margin: 1rem 0 1.5rem; }
.muted { color: var(--ink-3); font-size: .9rem; }
.note-warn { margin-top: .6rem; padding: .65rem .9rem; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: .9rem; }
.note-err { margin-top: .5rem; padding: .65rem .9rem; border-radius: var(--r-md); background: var(--err-soft); color: var(--err); font-size: .92rem; font-weight: 700; }

.roster-sum { margin-top: 1rem; font-weight: 700; font-size: 1.05rem; }
.dept-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.dept-chip, .legend-item {
  display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .75rem;
  border-radius: var(--r-pill); background: var(--fill); font-size: .88rem;
}
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink-4); flex: none; }
.dot-lg { width: 1rem; height: 1rem; border: 2px solid transparent; }

.empty { text-align: center; padding: 4rem 1rem; color: var(--ink-3); }
.empty p { margin-bottom: 1rem; font-size: 1.05rem; }
.next { display: flex; justify-content: flex-end; margin-top: 1.75rem; }

/* ---------- 分桌 ---------- */

.bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.checks { display: grid; gap: .4rem; margin-bottom: 1rem; }
.check-ok { padding: .75rem 1rem; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); }
.checks .check {
  display: flex; gap: .7rem; align-items: baseline; padding: .65rem 1rem; border-radius: var(--r-md);
  border: 0; cursor: default; font-size: .96rem;
}
.checks .check.is-error { background: var(--err-soft); color: #A3221A; }
.checks .check.is-warn { background: var(--warn-soft); color: var(--warn); }
.checks .check.is-info { background: var(--fill); color: var(--ink-3); }
.check-tag { flex: none; font-size: .78rem; font-weight: 700; padding: .05rem .55rem; border-radius: 1rem; background: rgba(255, 255, 255, .8); }

.find { margin-bottom: 1rem; max-width: 24rem; }

.pool {
  background: var(--surface); border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.pool:not(.is-empty) { border-color: var(--warn); background: #FFFBF6; }
.pool-head { display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pool-head h2 { font-size: 1.05rem; font-weight: 700; }
.pool-head .hint { margin: 0; }
.pool .count { background: var(--warn); }
.pool.is-empty .chips { display: none; }
.pool.is-empty .pool-head { margin: 0; }
.tip-drag { margin: 0 0 1rem; }
.pool-head .btn { margin-left: auto; }
.pool-away { border-style: solid; border-color: var(--line); background: var(--fill); }
.pool-away .count { background: var(--ink-3); }
.chip.is-away { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.pick-away { margin-top: .5rem; border-style: dashed; }

.tables { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tcard {
  background: var(--surface); border: 2px solid transparent; border-radius: var(--r-lg);
  padding: 1rem 1rem 1.1rem; box-shadow: var(--shadow-1); min-height: 8rem;
}
.tcard.is-vip { background: var(--ink); color: #fff; }
.tcard.is-over { border-color: var(--err); }
.tcard.is-over .tseats { color: #fff; background: var(--err); }
.tcard-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tname {
  display: inline-flex; align-items: baseline; gap: .5rem;
  border: 0; background: none; padding: .15rem .35rem; margin-left: -.35rem; border-radius: var(--r-sm); cursor: pointer;
  font-size: 1.08rem; font-weight: 700; text-align: left; min-width: 0;
}
.tname:hover { background: var(--fill); }
.tcard.is-vip .tname:hover { background: rgba(255, 255, 255, .12); }
.tseats {
  flex: none; font-family: var(--font-num); font-size: .88rem; font-weight: 700; color: var(--ink-2);
  padding: .1rem .6rem; border-radius: 1rem; background: var(--fill); font-variant-numeric: tabular-nums;
}
.tcard.is-vip .tseats { background: rgba(255, 255, 255, .16); color: #fff; }
.tmix { font-size: .82rem; color: var(--ink-3); margin: .1rem 0 .4rem; }
.tcard.is-vip .tmix { color: rgba(255, 255, 255, .65); }
/* 坐滿程度：一人一點 */
.tdots { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 .7rem; }
.tdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.tdots i.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tdots i.is-over { background: var(--err); }
.tcard.is-vip .tdots i { background: #fff; }
.tcard.is-vip .tdots i.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .25rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  font-size: .95rem; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.chip:hover { border-color: var(--ink-4); }
.tcard.is-vip .chip { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
.tcard.is-vip .chip:hover { border-color: rgba(255, 255, 255, .6); }
.chip-note { font-size: .74rem; font-weight: 700; color: var(--ink-2); background: var(--fill); padding: 0 .4rem; border-radius: 6px; }
.tcard.is-vip .chip-note { background: rgba(255, 255, 255, .16); color: #fff; }
/* 螢光筆態：搜尋命中、拖曳中 */
.chip.is-hit, .chip.is-ghost { border-color: transparent; color: var(--ink); }
.chip.is-hit::before, .chip.is-ghost::before {
  content: ""; position: absolute; inset: 3px -2px; z-index: -1; border-radius: 6px;
  background: var(--yellow); transform: rotate(-1.2deg);
}
.tcard.is-vip .chip.is-hit { color: var(--ink); border-color: transparent; }
.chip.is-dim { opacity: .3; }
.chip.is-lifted { opacity: .3; }
.chip.is-ghost {
  position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg);
  background: var(--surface); box-shadow: var(--shadow-2); opacity: 1;
}
body.is-dragging { cursor: grabbing; user-select: none; }
body.is-dragging .chip { cursor: grabbing; }
.is-drop { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--yellow); }
@media (prefers-reduced-motion: no-preference) {
  .chip.is-hit::before { animation: pz-swipe .22s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pz-swipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ---------- 平面圖 ---------- */

.floor-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .floor-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .insp { position: sticky; top: 6.5rem; } }
.floor-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; box-shadow: var(--shadow-1); min-width: 0; }
.floor-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.floor-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.legend-item.muted { background: none; padding-left: 0; }
/* 部門聚光燈：圖例是按鈕，點了只亮那個部門 */
.legend-btn { min-height: 40px; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .9rem; color: var(--ink); }
.legend-btn:hover { border-color: var(--ink-4); }
.legend-btn.is-on { background: var(--ink); color: #fff; }
.spot-bar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: 1rem; }
.spot-bar input { max-width: 20rem; }
.spot-bar .hint { margin: 0; }
.spot-sum { display: flex; align-items: center; gap: .3rem .6rem; flex-wrap: wrap; margin-top: .7rem; padding: .6rem .9rem; border-radius: var(--r-md); background: var(--yellow-soft); font-size: .95rem; }
.fl-table.is-dim { opacity: .28; }
.fl-seat.is-spot { stroke-width: .09; }
.insp-row-note { font-size: .88rem; color: var(--ink-3); margin: -.4rem 0 .7rem; }

.fl-svg { display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.fl-svg.is-zoomed { cursor: default; }
.floor-view { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.floor-view .floor-scroll { width: 100%; }
.zoom {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
}
.zoom-btn { min-width: 40px; height: 40px; padding: 0 .5rem; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font-size: 1.1rem; font-weight: 700; }
.zoom-btn:hover:not(:disabled) { background: var(--fill); }
.zoom-btn:disabled { opacity: .35; cursor: not-allowed; }
.zoom-fit { font-size: .88rem; }
.zoom-n { min-width: 3.2rem; text-align: center; font-family: var(--font-num); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tool-select { width: auto; min-height: 40px; padding: .3rem 2rem .3rem 1rem; border-radius: var(--r-pill); font-size: 16px; font-weight: 700; }
.btn-toggle.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fl-guide { stroke: var(--ink); stroke-width: .06; stroke-dasharray: .3 .2; opacity: .55; pointer-events: none; }
.fl-marquee { fill: rgba(20, 20, 20, .06); stroke: var(--ink); stroke-width: .06; stroke-dasharray: .25 .18; pointer-events: none; }
@media (max-width: 40rem) { .fl-svg { max-height: 68vh; } }
.fl-table.is-compact .fl-name { font-size: .8px; }
.fl-table.is-compact .fl-name.is-long { font-size: .6px; }
.fl-table.is-compact .fl-cnt { font-size: .42px; }
/* 分段選擇（桌型） */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--fill); }
.seg-btn { min-height: 38px; padding: 0 .9rem; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font-size: .92rem; font-weight: 700; color: var(--ink-3); }
.seg-btn.is-on { background: var(--ink); color: #fff; }
.insp-row { align-items: center; margin-bottom: .8rem; }
.fl-item { cursor: grab; touch-action: none; outline: none; }
.fl-item.is-drag { cursor: grabbing; }
.fl-top { fill: var(--fl-top, #fff); stroke: var(--fl-top-line, rgba(20, 20, 20, .28)); stroke-width: .07; }
.fl-shadow { fill: var(--fl-shadow, transparent); pointer-events: none; }
.fl-ring { fill: none; stroke-width: .14; pointer-events: none; }
.fl-plate { fill: none; stroke: var(--fl-top-line); stroke-width: .035; opacity: .7; pointer-events: none; }
.fl-table.is-vip .fl-plate { stroke: var(--fl-vip-ink); }
.fl-seat { fill: var(--fl-seat, #fff); stroke: var(--fl-seat-line, var(--ink)); stroke-width: .07; }
.fl-seat.is-on { fill: var(--fl-seat-on, var(--ink)); }
.style-blueprint .fl-table.is-vip .fl-seat.is-on:not(.is-cell), .style-gala .fl-table.is-vip .fl-seat.is-on:not(.is-cell) { fill: var(--fl-vip); }
.fl-seat.is-over { fill: var(--fl-warn, var(--err)); stroke: var(--fl-warn, var(--err)); }
.fl-name { font-family: var(--fl-num, var(--font-num)); font-stretch: 125%; font-size: 1.15px; font-weight: var(--fl-num-weight, 800); fill: var(--fl-ink, var(--ink)); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.fl-name.is-long { font-family: var(--font); font-stretch: normal; font-size: .78px; font-weight: 900; }
.style-gala .fl-name:not(.is-long), .style-blueprint .fl-name:not(.is-long) { font-stretch: normal; font-size: 1.05px; }
.fl-cnt { font-family: var(--fl-num, var(--font-num)); font-size: .58px; font-weight: 700; fill: var(--fl-soft, var(--ink-3)); text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.fl-cnt.is-over { fill: var(--fl-warn, var(--err)); }
.fl-table.is-vip .fl-top { fill: var(--fl-vip, var(--ink)); stroke: var(--fl-vip, var(--ink)); }
.fl-table.is-vip .fl-name, .fl-table.is-vip .fl-cnt { fill: var(--fl-vip-ink, #fff); }
.fl-table.is-clash .fl-top { stroke: var(--fl-warn, var(--err)); stroke-width: .18; stroke-dasharray: .4 .25; }
.fl-table.is-sel .fl-top, .fl-table:focus-visible .fl-top { stroke: var(--yellow); stroke-width: .3; paint-order: stroke; }
/* 場地元件四種畫法（export.js 的 TONES 同一套）：dash 虛線框、line 實線框、dark 近黑實心、solid 灰色實心 */
.fl-fix-box { fill: var(--fl-fix, #fff); stroke: var(--fl-fix-line, rgba(20, 20, 20, .32)); stroke-width: .07; stroke-dasharray: .35 .22; }
.fl-fix.tone-line .fl-fix-box { stroke-dasharray: none; }
.fl-fix.tone-dark .fl-fix-box { fill: var(--fl-dark, var(--ink)); stroke: none; }
.fl-fix.tone-solid .fl-fix-box { fill: var(--fl-solid, var(--line-2)); stroke: none; }
.fl-fix-art { pointer-events: none; }
.fl-fix.fl-carpet .fl-fix-label { fill: var(--fl-carpet); }
.fl-fix-label { font-size: .9px; font-weight: 700; fill: var(--fl-fix-ink, var(--ink-3)); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.fl-fix-label.is-v { writing-mode: vertical-rl; }
.fl-fix.tone-dark .fl-fix-label { fill: var(--fl-dark-ink, #fff); font-weight: 900; }
.fl-fix.tone-solid .fl-fix-label { fill: var(--fl-solid-ink, var(--ink-2)); }
.fl-handle { cursor: nwse-resize; }
.fl-handle[data-h="ne"], .fl-handle[data-h="sw"] { cursor: nesw-resize; }
.fl-handle-hit { fill: transparent; }
.fl-handle-dot { fill: #fff; stroke: var(--ink); stroke-width: .1; }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; margin-top: 1rem; }
.kind { min-height: 48px; padding: .4rem .6rem; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: 1rem; font-weight: 700; }
.kind:hover:not(:disabled) { border-color: var(--ink); background: var(--yellow-soft); }
.kind:disabled { opacity: .4; cursor: not-allowed; }
.insp-row2 { margin-top: .5rem; }
.insp .field { margin-bottom: .8rem; }
.fl-fix.is-sel .fl-fix-box, .fl-fix:focus-visible .fl-fix-box { stroke: var(--yellow); stroke-width: .25; stroke-dasharray: none; }

/* 座位圖：一張桌子、桌邊每個位子坐誰 */
.sm { margin: 0 0 .6rem; }
.sm-svg { display: block; width: 100%; height: auto; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.sm-top { fill: var(--fill); stroke: var(--line-2); stroke-width: .05; }
.sm-title { font-family: var(--font-num); font-stretch: 125%; font-size: .9px; font-weight: 800; fill: var(--ink-4); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sm-seat { cursor: pointer; outline: none; }
.sm-dot { fill: #fff; stroke: var(--line-2); stroke-width: .06; stroke-dasharray: .16 .12; }
.sm-seat.is-on .sm-dot { fill: var(--ink); stroke: none; }
.sm-seat.is-over .sm-dot { fill: var(--err); stroke: none; }
.sm-num { font-family: var(--font-num); font-size: .4px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sm-seat.is-on .sm-num, .sm-seat.is-over .sm-num { fill: #fff; }
.sm-name { font-size: .5px; font-weight: 700; fill: var(--ink); pointer-events: none; }
.sm-name.is-v { writing-mode: vertical-rl; }
.sm-seat.is-picked .sm-dot, .sm-seat.is-target .sm-dot { fill: var(--yellow) !important; stroke: var(--ink); stroke-width: .08; stroke-dasharray: none; }
.sm-seat.is-picked .sm-num, .sm-seat.is-target .sm-num { fill: var(--ink); }
.sm-seat:focus-visible .sm-dot { stroke: var(--ink); stroke-width: .1; stroke-dasharray: none; }
.sm-seat.is-lifted { opacity: .35; }
.sm-tip { margin: .5rem 0 .6rem; }
.insp-sub { font-size: .85rem; font-weight: 700; color: var(--ink-3); margin: .9rem 0 .4rem; }
.tcard-side { display: inline-flex; align-items: center; gap: .4rem; flex: none; }
.tlink { min-height: 32px; padding: 0 .7rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: none; cursor: pointer; font-size: .82rem; font-weight: 700; color: inherit; }
.tlink:hover { background: var(--fill); }
.tcard.is-vip .tlink { border-color: rgba(255, 255, 255, .35); }
.tcard.is-vip .tlink:hover { background: rgba(255, 255, 255, .12); }

.insp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.insp-name { font-size: 1.15rem; font-weight: 900; }
.insp-seats { font-family: var(--font-num); font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.insp-seats.is-over { color: var(--err); }
.insp-warn { padding: .55rem .8rem; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: .88rem; margin-bottom: .7rem; }

/* ---------- 匯出 ---------- */

.ex p { color: var(--ink-3); margin: .5rem 0 1.1rem; }
.ex p.hint { margin: .8rem 0 0; }
.preview-box { max-height: min(50vh, 30rem); overflow: auto; margin-top: .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill); }
.preview-cvs { display: block; width: 100%; height: auto; }
/* ---------- 視窗與提示 ---------- */

.dlg {
  width: min(26rem, calc(100vw - 2rem)); max-height: min(42rem, calc(100dvh - 2rem));
  border: 0; border-radius: var(--r-lg); padding: 1.4rem; color: var(--ink); background: var(--surface);
  box-shadow: 0 24px 64px rgba(20, 20, 20, .28);
}
.dlg-wide { width: min(40rem, calc(100vw - 2rem)); }
.dlg::backdrop { background: rgba(20, 20, 20, .5); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dlg-head h2 { font-size: 1.15rem; font-weight: 900; line-height: 1.4; }
.dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.dlg-foot .hint { margin: 0; flex: 1 1 12rem; }
#dlg-confirm .dlg-foot { justify-content: flex-end; }
.cf-text { font-size: 1.05rem; }
.x {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fill);
  font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink-3);
}
.x:hover { background: var(--line); color: var(--ink); }

.pick-list { display: grid; gap: .4rem; }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px;
  padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  font-size: 1rem; font-weight: 700; text-align: left;
}
.pick:hover:not(:disabled) { border-color: var(--ink); background: var(--yellow-soft); }
.pick:disabled { opacity: .5; cursor: default; }
.pick-note { font-size: .85rem; font-weight: 400; color: var(--ink-3); }
.pick.is-full .pick-note { color: var(--err); }

.rule-form { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); align-items: end; margin-top: 1rem; }
.rule-form .field { margin: 0; }
@media (min-width: 40rem) { .rule-form { grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr) auto; } }
.rule-list { display: grid; gap: .4rem; margin-top: 1rem; }
.rule { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.rule-text { flex: 1; font-size: .95rem; }
.rule.is-bad { border-color: #F1C9A0; background: var(--warn-soft); }
.rule-flag { font-size: .78rem; font-weight: 700; color: var(--warn); white-space: nowrap; }

@media (max-width: 40rem) {
  .top { padding: .5rem 1rem; min-height: 54px; }
  .top-note .top-note-t, .top-note #saved-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-note svg { width: 18px; height: 18px; }
  .wrap { padding: 1.25rem 1rem 2.5rem; }
  .card { padding: 1.1rem; }
  .tables { grid-template-columns: minmax(0, 1fr); }
  .tip-drag { font-size: .84rem; }
}

/* ---------- 競品對照這一輪：鎖定、需求、名單表格、方案、匯入 ---------- */

/* 名單框：拖檔案進來時 */
textarea.roster.is-drop { outline: 3px dashed var(--ink); outline-offset: 2px; background: var(--yellow-soft); }

/* 鎖頭 */
.lock-ico, .chip-lock { display: inline-flex; width: .85rem; height: .85rem; flex: none; }
.lock-ico svg, .chip-lock svg { width: 100%; height: 100%; }
.chip-lock { color: var(--ink-3); width: .75rem; height: .75rem; }
.tcard.is-vip .chip-lock { color: rgba(255, 255, 255, .7); }
.tlock { display: inline-flex; align-items: center; gap: .3rem; }
.tlock.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tcard.is-vip .tlock.is-on { background: #fff; border-color: #fff; color: var(--ink); }
.pick-lock span:first-child { display: inline-flex; align-items: center; gap: .45rem; }
.pick-lock.is-on { border-color: var(--ink); }

/* 每桌的素食與特殊需求 */
.tneeds { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: .05rem .55rem; border-radius: 6px; margin: -.15rem 0 .5rem; }
.tcard.is-vip .tneeds { color: #fff; background: rgba(255, 255, 255, .16); }

/* 找人＋桌卡／名單切換 */
.find { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; max-width: none; }
.find-in { flex: 1 1 16rem; max-width: 24rem; }

/* 名單表格 */
.plist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem; margin-bottom: 1rem; }
.plist-tools { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding: .25rem .25rem .75rem; }
.plist-tools .hint { margin: 0 0 0 auto; }
.prow {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(6.5rem, auto) 44px;
  align-items: center; gap: .5rem; padding: .3rem .25rem .3rem .5rem; border-top: 1px solid var(--line);
}
.prow-head { border-top: 0; font-size: .8rem; font-weight: 700; color: var(--ink-3); padding-top: 0; padding-bottom: .3rem; }
.prow-head span:last-child { text-align: center; }
.prow.is-alone { background: var(--warn-soft); border-radius: var(--r-sm); }
.prow-name { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.prow-name strong { font-weight: 700; }
.prow-dept { color: var(--ink-3); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-table {
  min-height: 40px; padding: 0 .9rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface);
  cursor: pointer; font-size: .94rem; font-weight: 700; white-space: nowrap;
}
.prow-table:hover { border-color: var(--ink); background: var(--yellow-soft); }
.prow-table.is-none { border-color: var(--warn); color: var(--warn); }
.prow-table.is-away { border-style: dashed; color: var(--ink-3); }
.prow-lock {
  width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-md); background: none; cursor: pointer; color: var(--line-2);
}
.prow-lock svg { width: 16px; height: 16px; }
.prow-lock:hover:not(:disabled) { color: var(--ink-3); background: var(--fill); }
.prow-lock.is-on { color: var(--ink); background: var(--fill); }
.prow-lock:disabled { cursor: default; opacity: .4; }
.plist-empty { padding: 1rem .5rem; }
@media (max-width: 40rem) {
  .prow { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "name table lock" "dept table lock"; row-gap: 0; }
  .prow-head { display: none; }
  .prow-name { grid-area: name; }
  .prow-dept { grid-area: dept; font-size: .82rem; }
  .prow-table { grid-area: table; }
  .prow-lock { grid-area: lock; }
  .plist-tools .tool-select { flex: 1 1 9rem; }
  .plist-tools .hint { margin: 0; flex-basis: 100%; }
}

/* 方案 */
.plan-list { display: grid; gap: .5rem; margin-top: 1rem; }
.plan { display: flex; align-items: center; gap: .75rem; padding: .7rem .6rem .7rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.plan.is-now { border-color: var(--ink); background: var(--yellow-soft); }
.plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.plan-meta { font-size: .85rem; color: var(--ink-3); }
.plan-diff { font-size: .85rem; font-weight: 700; }
.plan-form { display: grid; gap: .6rem; align-items: end; margin-top: 1.1rem; }
.plan-form .field { margin: 0; }
@media (min-width: 40rem) { .plan-form { grid-template-columns: minmax(0, 1fr) auto; } }

/* ============================================================
   2026-11-13 改版：體驗與視覺升級
   步驟進度軌、首屏插畫、自動儲存燈、統計列、桌卡大桌號、
   底部行動列（狀態＋下一步）、復原提示、匯出成品預覽、深色預告區、頁尾。
   規則不變：黃＝「這裡」、黃不當白底上的字、輸入框 ≥16px。
   ============================================================ */

.btn .i, .i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost { border-color: transparent; background: none; color: var(--ink-3); }
.btn-ghost:hover { color: var(--ink); background: var(--fill); }
.btn-go { box-shadow: 0 1px 0 rgba(20, 20, 20, .08), 0 6px 18px rgba(255, 214, 10, .45); }
.btn-go:active, .btn-primary:active, .btn:active { transform: translateY(1px); }

/* ---------- 頂欄：自動儲存燈 ---------- */
.top-note { gap: .55rem; }
.saved { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem .2rem .55rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); font-size: .8rem; }
.saved i { width: 7px; height: 7px; border-radius: 50%; background: #5BD68A; flex: none; }
.saved.is-fail i { background: #FF7A6B; }
.saved.is-pulse i { animation: pz-pulse .9s ease-out; }
@keyframes pz-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 214, 138, .7); } 100% { box-shadow: 0 0 0 9px rgba(91, 214, 138, 0); } }

/* ---------- 步驟進度軌 ---------- */
.steps {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 250, 247, .9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.steps-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 76rem; margin: 0 auto; padding: .6rem 1.5rem; }
.step {
  position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0;
  min-height: 56px; padding: .45rem 1rem .45rem .5rem; border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer; text-align: left; color: var(--ink-3);
  transition: background .16s, color .16s;
}
.step:hover { background: var(--fill); color: var(--ink); }
.step-n {
  position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--surface); color: var(--ink-3);
  font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  transition: background .2s, color .2s, box-shadow .2s;
}
.step-n svg { position: absolute; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.step-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.step-l { font-size: 1.02rem; font-weight: 900; color: inherit; }
.step-s { font-size: .78rem; font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.step.is-on { background: var(--yellow); color: var(--ink); }
.step.is-on .step-n { background: var(--ink); color: var(--yellow); box-shadow: none; }
.step.is-on .step-s { color: var(--ink-2); }
.step.is-done { color: var(--ink); }
.step.is-done .step-n { background: var(--ink); color: #fff; box-shadow: none; }
.step.is-done .step-n b { opacity: 0; }
.step.is-done .step-n svg { opacity: 1; transform: none; }
.step-badge {
  position: absolute; top: 4px; left: 32px;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 1rem; box-shadow: 0 0 0 2px var(--paper);
  background: var(--err); color: #fff; font-family: var(--font-num); font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.steps-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.steps-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 換步驟的進場 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .panel.is-enter { animation: pz-panel .38s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pz-panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- 首屏 ---------- */
.hero { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: center; margin: .5rem 0 2.5rem; }
@media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); margin-top: 1rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--yellow); }
.hero h1 {
  margin-top: 1rem; font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
}
.hero h1 .hl::before { height: .5em; bottom: .04em; }
.lede { margin-top: 1.25rem; max-width: 34rem; font-size: 1.12rem; color: var(--ink-3); line-height: 1.75; }
.trust { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 36rem; }
.trust li { display: flex; flex-direction: column; gap: .55rem; padding-top: 1rem; border-top: 1.5px solid var(--ink); font-size: .86rem; color: var(--ink-3); line-height: 1.45; }
.trust svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust strong { display: block; color: var(--ink); font-size: 1rem; }
.hero-art { min-width: 0; }
.hero-art svg { display: block; width: 100%; height: auto; max-width: 600px; margin-left: auto; overflow: visible; }
.hero.is-compact { grid-template-columns: minmax(0, 1fr); margin: 0 0 1.5rem; }
.hero.is-compact .hero-art, .hero.is-compact .trust, .hero.is-compact .eyebrow { display: none; }
.hero.is-compact h1 { margin-top: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
.hero.is-compact .lede { margin-top: .5rem; font-size: 1rem; }

/* 首屏插畫（svg 在 app.js 的 heroArt() 生出來） */
.ha-stage-t { fill: #fff; font-size: 14px; font-weight: 900; text-anchor: middle; dominant-baseline: central; letter-spacing: .3em; }
.ha-seat { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.ha-seat.is-empty { fill: #fff; stroke: var(--line-2); stroke-width: 1.6; }
.ha-table.is-vip .ha-seat { fill: var(--ink); }
.ha-top { stroke: rgba(20, 20, 20, .12); stroke-width: 1; }
.ha-num { font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: 22px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.ha-num.is-cn { font-family: var(--font); font-stretch: normal; font-weight: 900; font-size: 15px; fill: #fff; letter-spacing: .1em; }
.ha-table.is-you .ha-top { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; }
.ha-seat.is-me { stroke: var(--ink); stroke-width: 2.5; fill: #fff; }
.ha-card rect:first-child { filter: drop-shadow(0 12px 24px rgba(20, 20, 20, .12)); }
.ha-name { font-size: 15px; font-weight: 700; fill: var(--ink); dominant-baseline: central; }
.ha-mark { fill: var(--yellow); transform-box: fill-box; transform-origin: left center; transform: rotate(-1.5deg); }
.ha-path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 7; }
.ha-tag-t { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
@media (prefers-reduced-motion: no-preference) {
  .ha-table { animation: ha-fade .5s ease-out both; animation-delay: var(--d); }
  .ha-seat { animation: ha-pop .42s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: var(--d); }
  .ha-card { animation: ha-slide .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .ha-mark { animation: ha-swipe .32s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
  .ha-path { stroke-dasharray: 2 7; animation: ha-fade .5s ease-out 1.8s both; }
  .ha-table.is-you .ha-top { animation: ha-you .45s cubic-bezier(.2, .8, .2, 1) 2.05s both; }
  .ha-seat.is-me { animation: ha-pop .42s cubic-bezier(.2, .9, .3, 1.35) both, ha-me .5s ease-out 2.05s both; }
  .ha-tag { animation: ha-rise .5s cubic-bezier(.2, .8, .2, 1) 2.3s both; }
  @keyframes ha-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ha-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
  @keyframes ha-slide { from { opacity: 0; transform: translate(-24px, 14px) rotate(-4deg); } to { opacity: 1; transform: none; } }
  @keyframes ha-swipe { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
  @keyframes ha-you { from { fill: #FCE4EF; stroke-width: 1; stroke: rgba(20, 20, 20, .12); } to { fill: var(--yellow); stroke-width: 2.5; stroke: var(--ink); } }
  @keyframes ha-me { from { fill: #E5488A; stroke-width: 0; } to { fill: #fff; stroke-width: 2.5; } }
  @keyframes ha-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------- 名單那一步 ---------- */
.card h2 { display: flex; align-items: center; }
.kicker {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: .6rem; border-radius: 8px;
  background: var(--ink); color: #fff; font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: .78rem;
}
.roster-wrap { position: relative; }
textarea.roster {
  background-color: var(--surface);
  background-image: linear-gradient(to bottom, transparent calc(1.7em - 1px), var(--fill) calc(1.7em - 1px));
  background-size: 100% 1.7em; background-position: 0 .6rem; background-attachment: local;
}
.roster-empty {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .7rem .7rem .7rem 1.1rem; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.roster-empty p { font-weight: 700; font-size: .95rem; }
.roster-sum.is-on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: var(--ok); vertical-align: .15em; }
.card-set { position: relative; }
@media (min-width: 60rem) { .card-set { position: sticky; top: 6.25rem; } }
.plan-viz { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -.25rem 0 0; min-height: 0; }
.plan-viz:empty { display: none; }
.plan-viz i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
.plan-viz i.is-vip { background: var(--ink); }
.plan-more { font-size: .8rem; color: var(--ink-3); font-weight: 700; }
.plan-n { margin-left: .4rem; font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .plan-viz i { animation: ha-pop .3s cubic-bezier(.2, .9, .3, 1.35) both; }
}

/* ---------- 分桌：統計列與工具列 ---------- */
.bar { align-items: flex-end; margin-bottom: 1.25rem; }
.stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat b { font-size: 2.4rem; line-height: 1; letter-spacing: -.01em; }
.stat span { font-size: .82rem; font-weight: 700; color: var(--ink-3); }
.stat.is-warn b { color: var(--warn); }
.stat.is-ok span::after { content: " ✓"; color: var(--ok); }
.bar-title h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 900; letter-spacing: -.02em; }
.bar-title .hint { margin-top: .3rem; }
.tool-group { display: inline-flex; gap: .5rem; }

/* 桌卡：大桌號、圖示鈕 */
.tcard { transition: box-shadow .2s, transform .2s; }
.tcard:hover { box-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 10px 28px rgba(20, 20, 20, .09); }
.tname { align-items: baseline; gap: .2rem; }
.tname-n { font-size: 2rem; line-height: 1; letter-spacing: -.02em; }
.tname-l { font-size: .95rem; font-weight: 700; color: var(--ink-3); }
.tname-t { font-size: 1.15rem; font-weight: 900; }
.tcard.is-vip .tname-l { color: rgba(255, 255, 255, .6); }
.tico {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: none; cursor: pointer; color: var(--ink-3);
  transition: background .12s, color .12s, border-color .12s;
}
.tico svg { width: 16px; height: 16px; }
.tico:hover { color: var(--ink); border-color: var(--ink); }
.tico.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tcard.is-vip .tico { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .78); }
.tcard.is-vip .tico:hover { border-color: #fff; color: #fff; }
.tcard.is-vip .tico.is-on { background: #fff; border-color: #fff; color: var(--ink); }

/* 名條：剛移動的人留著螢光筆；自動分桌後依桌飛進來 */
.chip.is-moved { border-color: transparent; color: var(--ink); }
.chip.is-moved::before { content: ""; position: absolute; inset: 3px -2px; z-index: -1; border-radius: 6px; background: var(--yellow); transform: rotate(-1.2deg); }
.tcard.is-vip .chip.is-moved { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .chip.is-moved::before { animation: pz-swipe .22s cubic-bezier(.2, .8, .2, 1) both; }
  .tcard.is-fly { animation: pz-card .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
  .chip.is-fly { animation: pz-chip .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) + 120ms); }
  @keyframes pz-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pz-chip { from { opacity: 0; transform: translate(-6px, 10px) scale(.9); } to { opacity: 1; transform: none; } }
}

/* ---------- 底部行動列 ---------- */
.dock {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 150;
  width: min(44rem, calc(100vw - 2rem)); transform: translateX(-50%);
}
.dock-in {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem .4rem .4rem .6rem; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; box-shadow: 0 18px 44px rgba(20, 20, 20, .32), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.dock-sum {
  display: inline-flex; align-items: center; gap: .55rem; min-width: 0; min-height: 44px; padding: 0 .8rem;
  border: 0; border-radius: var(--r-pill); background: none; color: #fff; font-size: .98rem; cursor: pointer; text-align: left;
}
.dock-sum:disabled { cursor: default; }
.dock-sum:not(:disabled):hover { background: rgba(255, 255, 255, .08); }
.dock-sum strong { font-weight: 700; white-space: nowrap; }
.dock-sum span { color: rgba(255, 255, 255, .6); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; }
.dock-sum.is-ok .dock-dot { background: #5BD68A; }
.dock-sum.is-warn .dock-dot { background: #FFA552; box-shadow: 0 0 0 4px rgba(255, 165, 82, .2); }
.dock .btn-go { flex: none; box-shadow: none; }
.dock .btn-go::after { content: "→"; font-family: var(--font-num); margin-left: .15rem; }
.dock :focus-visible { outline-color: #fff; }
body.has-dock .wrap { padding-bottom: 7.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .dock:not([hidden]) { animation: pz-dock .45s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pz-dock { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- 提示（帶復原） ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: .9rem; max-width: calc(100vw - 2rem);
  padding: .55rem .55rem .55rem 1.25rem; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: .95rem; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.toast:has(.toast-act[hidden]) { padding-right: 1.3rem; padding-top: .75rem; padding-bottom: .75rem; }
.toast-act {
  flex: none; min-height: 36px; padding: 0 1rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .9rem;
}
.toast-act:hover { background: var(--yellow-hover); }
body.has-dock .toast { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  .toast.is-in { animation: pz-toast .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pz-toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- 空狀態 ---------- */
.empty { padding: 5rem 1rem; }
.empty-art { display: block; width: 180px; height: auto; margin: 0 auto 1.5rem; }
.empty p { color: var(--ink); font-weight: 700; font-size: 1.15rem; }

/* ---------- 匯出 ---------- */
.ex-head { margin: .5rem 0 1.5rem; }
.ex-title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; }
.ex-sub { margin-top: .5rem; color: var(--ink-3); font-size: 1.08rem; }
.ex-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 60rem) { .ex-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.ex-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.ex-stage {
  position: relative; height: 320px; padding: 2rem 2rem 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background-color: var(--fill);
  background-image: radial-gradient(circle, rgba(20, 20, 20, .13) 1.2px, transparent 1.4px); background-size: 22px 22px;
}
.ex-paper, .ex-sheet {
  position: relative; width: min(88%, 30rem); height: 100%; overflow: hidden; background: #fff;
  border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 22px 44px rgba(20, 20, 20, .16);
  transform: rotate(-1.6deg) translateY(14px); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ex-sheet { transform: rotate(1.4deg) translateY(14px); display: flex; flex-direction: column; }
.ex-card:hover .ex-paper, .ex-card:hover .ex-sheet { transform: rotate(0) translateY(4px); }
.ex-cvs { display: block; width: 100%; height: auto; }
.ex-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; }
.xs-grid { flex: 1; font-size: .74rem; overflow: hidden; }
.xs-row { display: grid; grid-template-columns: 26px 1fr .55fr 1.1fr 1fr; border-bottom: 1px solid var(--line); }
.xs-row span { padding: .38rem .5rem; border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-row .xs-n { background: var(--fill); color: var(--ink-4); text-align: center; padding-left: 0; padding-right: 0; font-family: var(--font-num); }
.xs-row.is-head span:not(.xs-n) { font-weight: 700; background: #F7F7F3; }
.xs-tabs { display: flex; gap: 2px; padding: 0 .5rem; background: var(--fill); border-top: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.xs-tabs span { padding: .4rem .8rem; }
.xs-tabs .is-on { background: #fff; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ex-body { display: flex; flex-direction: column; gap: .2rem; padding: 1.5rem 1.6rem 1.6rem; }
.ex-kind { font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }
.ex-body h3 { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.ex-body > p:not(.ex-kind):not(.hint) { color: var(--ink-3); margin: .3rem 0 1.1rem; }
.ex-body .hint { margin-top: .9rem; }

/* 預告區：深色、留白多 */
.soon { margin-top: 3rem; padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.soon-head { max-width: 40rem; }
.soon-tag { display: inline-block; padding: .15rem .75rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 700; }
.soon h2 { margin-top: 1rem; font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); font-weight: 900; line-height: 1.25; letter-spacing: -.03em; text-wrap: balance; }
.soon .hl { color: var(--ink); }
.soon .hl::before { top: .06em; height: auto; bottom: 0; }
.soon-list { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.soon-list li { padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .62); font-size: .92rem; line-height: 1.7; }
.soon-list strong { display: block; margin-bottom: .35rem; color: #fff; font-size: 1.05rem; }
.soon-n { display: block; margin-bottom: .6rem; font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: .85rem; color: rgba(255, 255, 255, .45); }

/* ---------- 頁尾 ---------- */
.foot { border-top: 1px solid var(--line); }
.foot-in { display: grid; gap: 1rem 2.5rem; grid-template-columns: minmax(0, 1fr); max-width: 76rem; margin: 0 auto; padding: 2.25rem 1.5rem 2.75rem; font-size: .86rem; color: var(--ink-3); }
@media (min-width: 60rem) { .foot-in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.foot-brand { display: flex; align-items: center; gap: .65rem; }
.foot-brand svg { width: 28px; height: 28px; flex: none; }
.foot-brand strong { color: var(--ink); font-weight: 900; }
.foot-privacy { max-width: 40rem; }
.foot-privacy a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.foot-meta { font-family: var(--font-num); font-weight: 700; color: var(--ink-4); }
body.has-dock .foot-in { padding-bottom: 7rem; }

/* ---------- 手機 ---------- */
@media (max-width: 40rem) {
  .steps-in { gap: .25rem; padding: .4rem .5rem; }
  .step { flex-direction: column; gap: .2rem; min-height: 0; padding: .45rem .2rem .4rem; border-radius: 16px; text-align: center; }
  .step-n { width: 30px; height: 30px; font-size: .72rem; }
  .step-l { font-size: .86rem; }
  .step-s { display: none; }
  .step-badge { top: 2px; left: calc(50% + 6px); }
  .saved { padding: .2rem .45rem; background: none; }
  .hero { margin: 0 0 1.5rem; gap: 1.25rem; }
  .hero h1 { margin-top: .75rem; }
  .lede { font-size: 1rem; margin-top: .9rem; }
  .hero-art { display: none; }
  .trust { margin-top: 1.25rem; gap: .6rem; }
  .trust li { padding-top: .7rem; font-size: .78rem; gap: .35rem; }
  .trust svg { width: 24px; height: 24px; }
  .trust strong { font-size: .9rem; }
  .bar { align-items: stretch; }
  .stats { gap: .5rem 1.4rem; }
  .stat b { font-size: 1.9rem; }
  .tools-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 4px; scrollbar-width: none; }
  .tools-row::-webkit-scrollbar { display: none; }
  .floor-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem .75rem; padding: 0 1rem 2px; }
  .floor-tools::-webkit-scrollbar { display: none; }
  .floor-card { padding: .75rem; }
  .floor-tools { margin-left: -.75rem; margin-right: -.75rem; padding-left: .75rem; padding-right: .75rem; }
  .dock { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 1.25rem); }
  .dock-sum { padding: 0 .4rem 0 .6rem; font-size: .92rem; }
  .dock-sum span { display: none; }
  .dock .btn-go { padding: .5rem 1.15rem; font-size: .96rem; }
  .ex-stage { height: 230px; padding: 1.25rem 1.25rem 0; }
  .ex-body { padding: 1.25rem; }
  .ex-body .btn-row .btn { flex: 1 1 auto; }
  .foot-in { padding: 1.75rem 1rem 2rem; }
  .empty { padding: 3rem 1rem; }
}

/* 自查修正 */
.step { justify-self: start; }
#count-hint { margin: .5rem 0 1rem; }
.ex-sheet { height: calc(100% - 16px); }
.toast { left: 0; right: 0; margin: 0 auto; width: max-content; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .toast.is-in { animation-name: pz-toast2; }
  @keyframes pz-toast2 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 40rem) {
  .step { justify-self: stretch; }
  .m-hide { display: none; }
  .toast { font-size: .9rem; }
}
/* 平面圖右側：還沒選東西 */
.insp-art svg { display: block; width: 120px; height: auto; margin-bottom: .75rem; }
.insp-title { font-size: 1.15rem; font-weight: 900; }
.insp-tips { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.insp-tips li { display: flex; flex-direction: column; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--paper); font-size: .86rem; color: var(--ink-3); line-height: 1.5; }
.insp-tips strong { color: var(--ink); font-size: .92rem; }

/* ---------- 使用情境：頁尾連結、場景模式的說明 ---------- */
.foot-scenes { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.foot-scenes-h { font-weight: 700; color: var(--ink-2); margin-bottom: .5rem; }
.foot-scenes-h a { color: inherit; text-underline-offset: 3px; }
.foot-scenes ul { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.foot-scenes li a { color: var(--ink-3); text-decoration: none; }
.foot-scenes li a:hover, .foot-scenes li a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 使用情境：名單頁最上面，現在是哪個場合；攤開看 18 個場合的平面圖 */
.scene-pick { min-width: 0; max-width: 100%; margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink); }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.sp-head h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: 1.1rem; font-weight: 900; }
.sp-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.sp-note { flex: 1 1 20rem; margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }
.sp-how { margin-left: .5rem; color: var(--ink); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.sp-toggle { margin-left: auto; }
.sp-toggle[aria-expanded="false"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sp-list { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line-2); display: grid; gap: 1rem; animation: sp-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.sp-list[hidden] { display: none; }
@keyframes sp-in { from { opacity: 0; transform: translateY(-6px); } }
.sp-group { min-width: 0; }
.sp-cat { margin: 0 0 .45rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.sp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; }
.sp-card {
  position: relative; display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .45rem .45rem .65rem; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: border-color .18s, transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.sp-card:hover { border-color: var(--ink-4); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.sp-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sp-card.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); cursor: default; transform: none; }
.sp-plan { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--fill); }
.sp-plan img, .sp-plan svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-t { display: flex; flex-direction: column; gap: .15rem; padding: 0 .2rem; }
.sp-t b { font-size: .95rem; }
.sp-t small { font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.sp-now-tag { position: absolute; top: .8rem; left: .8rem; padding: .1rem .5rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; }
@media (max-width: 40rem) {
  .scene-pick { padding: .8rem .9rem; }
  .sp-toggle { margin-left: 0; }
  .sp-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 9.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .3rem; }
  .sp-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sp-list, .sp-card { animation: none; transition: none; } .sp-card:hover { transform: none; } }
/* 換情境的選擇視窗 */
.dsc-plan { display: block; width: 100%; height: auto; max-height: 15rem; object-fit: contain; border-radius: var(--r-md); background: var(--fill); margin-bottom: .6rem; }
.dsc-plan[hidden] { display: none; }
.dsc-opts { display: grid; gap: .6rem; margin-top: .8rem; }
.dsc-opt { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1rem; text-align: left; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: .95rem; }
.dsc-opt span { font-size: .86rem; color: var(--ink-3); line-height: 1.55; }
.dsc-opt:hover, .dsc-opt:focus-visible { border-color: var(--ink); background: var(--yellow-soft); }
.dsc-opt[hidden] { display: none; }

/* ---------- 場地版型：地板、房間／車／試場、搬人 ----------
   畫法跟 venues.js 的 svg()（場景頁縮圖）與 export.js（匯出 PNG）同一套；改一邊要改另外兩邊。 */
.fl-gridline { fill: none; stroke: rgba(20, 20, 20, .09); stroke-width: .04; }
.fl-gridline.is-wide { stroke-width: .06; stroke: rgba(20, 20, 20, .1); }
.fl-grass { fill: none; stroke: rgba(60, 90, 40, .24); stroke-width: .07; stroke-linecap: round; }
.fl-hatch-line { stroke: var(--fl-fix-line, rgba(20, 20, 20, .3)); stroke-width: .08; }
.fl-hatch-bg { fill: var(--fl-fix, #fff); }
.fl-ground { pointer-events: none; }

.fl-fix.tone-hatch .fl-fix-box { fill: url(#fl-hatch); stroke: var(--fl-fix-line, rgba(20, 20, 20, .32)); stroke-dasharray: none; }
.fl-fix.tone-hatch .fl-fix-label { fill: var(--fl-ink, var(--ink)); font-weight: 900; paint-order: stroke; stroke: var(--fl-fix, #fff); stroke-width: .18px; }
.fl-fix.tone-text .fl-fix-box { fill: transparent; stroke: none; }
.fl-fix.tone-text .fl-fix-label { fill: var(--fl-ink, var(--ink)); font-weight: 900; letter-spacing: .04em; }
.fl-fix.tone-paint .fl-fix-box { fill: #fff; stroke: none; }
.style-blueprint .fl-fix.tone-paint .fl-fix-box { fill: var(--fl-ink); }
.fl-fix.tone-paint .fl-fix-label { display: none; }
.fl-fix.tone-text.is-sel .fl-fix-box, .fl-fix.tone-text:focus-visible .fl-fix-box { stroke: var(--yellow); stroke-width: .2; }

/* 人坐在裡面的：牆／車身粗線、格子是床位或座位 */
.fl-top.fl-wall { fill: var(--fl-wall-fill, #fff); stroke: var(--fl-wall, var(--ink)); stroke-width: .14; }
.fl-top.fl-wall.is-tent { fill: var(--fl-tent, #EEF1E4); }
.fl-table.is-sel .fl-top.fl-wall, .fl-table:focus-visible .fl-top.fl-wall { stroke: var(--fl-wall, var(--ink)); stroke-width: .14; outline: none; }
.fl-table.is-inside.is-sel .fl-tag { fill: var(--yellow); }
.fl-table.is-inside.is-sel .fl-tag-t, .fl-table.is-inside.is-sel .fl-tag-n { fill: var(--ink); }
.fl-table.is-inside.is-clash .fl-top.fl-wall { stroke: var(--fl-warn, var(--err)); stroke-dasharray: .4 .25; }
.fl-seat.is-cell { fill: var(--fl-cell, #fff); stroke: var(--fl-cell-line, rgba(20, 20, 20, .28)); stroke-width: .05; }
.fl-seat.is-cell.is-on { stroke: var(--fl-wall, var(--ink)); stroke-width: .06; }
.fl-seat.is-cell.is-on:not([style]) { fill: var(--fl-cell-on, var(--line-2)); }
.fl-seat.is-cell.is-over { fill: var(--fl-warn-soft, var(--err-soft)); stroke: var(--fl-warn, var(--err)); }
.fl-table.is-vip .fl-seat.is-cell.is-on { fill: var(--fl-vip, var(--ink)); }
.fl-pillow { fill: var(--fl-pillow, #fff); stroke: var(--fl-cell-line, rgba(20, 20, 20, .22)); stroke-width: .035; pointer-events: none; }
.fl-deco { stroke: var(--fl-line, rgba(20, 20, 20, .3)); stroke-width: .06; pointer-events: none; }
.fl-gap { stroke: var(--fl-wall-fill, #fff); stroke-width: .24; pointer-events: none; }
.fl-deco-fill { fill: var(--fl-wall, var(--ink)); pointer-events: none; }
.fl-deco-box { fill: var(--fl-wall-fill, #fff); stroke: var(--fl-line, rgba(20, 20, 20, .3)); stroke-width: .05; pointer-events: none; }
.fl-table.is-vip .fl-gap { stroke: var(--fl-vip, var(--ink)); }
.fl-table.is-inside .fl-top.is-tent ~ .fl-gap { stroke: var(--fl-tent); }
.fl-tag { fill: var(--fl-tag, var(--ink)); }
.fl-tag-t { font-family: var(--fl-num, var(--font-num)); font-stretch: 125%; font-size: .5px; font-weight: 800; fill: var(--fl-tag-ink, #fff); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fl-tag.is-over { fill: var(--fl-warn, var(--err)); }
.fl-tag.is-over + .fl-tag-t { fill: #fff; }
.fl-tag-n { font-family: var(--font-num); font-size: .44px; font-weight: 700; fill: rgba(255, 255, 255, .72); text-anchor: end; dominant-baseline: central; pointer-events: none; }
.fl-tag-n.is-over { fill: #FF9C92; }
/* 營地：小隊是一塊地墊，不是桌子 */
.fl-top.is-mat { stroke: var(--fl-ink, var(--ink)); stroke-width: .07; stroke-dasharray: .28 .18; }

/* 名字：放大到 180% 以上才出現 */
.fl-names { display: none; pointer-events: none; }
.fl-svg.is-near .fl-names { display: inline; }
.style-blueprint .fl-pname { --fl-halo: rgba(19, 48, 107, .92); }
.style-gala .fl-pname { --fl-halo: rgba(16, 14, 11, .92); }
.fl-pname { font-weight: 700; fill: var(--fl-ink, var(--ink)); paint-order: stroke; stroke: var(--fl-halo, rgba(255, 255, 255, .92)); stroke-width: .1px; stroke-linejoin: round; }
.fl-pname.is-v { writing-mode: vertical-rl; }
.fl-table.is-inside .fl-pname { stroke: none; }

/* 搬人 */
.fl-seat.is-grab { cursor: grab; }
.fl-seat-hit { fill: transparent; cursor: grab; }
.fl-table.is-sel .fl-seat.is-grab:not(.is-cell) { stroke: var(--yellow); stroke-width: .12; paint-order: stroke; }
.fl-svg.is-picking .fl-table { cursor: copy; }
.fl-table.is-drop-target .fl-top { stroke: var(--ink); stroke-width: .28; stroke-dasharray: none; }
.fl-table.is-drop-target .fl-top.fl-wall { stroke-width: .3; }
.fl-seat.is-target { fill: var(--yellow) !important; stroke: var(--ink) !important; stroke-width: .12 !important; }
body.is-carrying, body.is-carrying * { cursor: grabbing !important; }
.chip.is-ghost.is-over { box-shadow: 0 8px 22px rgba(20, 20, 20, .22); }

.fl-pick {
  position: absolute; z-index: 3; left: .75rem; right: .75rem; top: .75rem;
  display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem 1rem;
  border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .92rem; box-shadow: var(--shadow-2);
}
.fl-pick strong { color: var(--yellow); }
.fl-pick span { flex: 1; min-width: 0; }
.fl-pick .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.floor-view { position: relative; }

/* 平面圖上方：還沒排的人 */
.fl-pool { padding: .1rem 0 .9rem; margin-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.fl-pool.is-drop-target { background: var(--yellow-soft); border-radius: var(--r-md); }
.flp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .95rem; }
.flp-h .count { margin-left: -.2rem; }
.flp-hint { color: var(--ink-3); font-size: .86rem; }
.flp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; max-height: 9.5rem; overflow: auto; }
.flp-chip { touch-action: none; cursor: grab; }

/* 加場地元件：這個場地常用的排前面 */
.kinds-h { margin: 1rem 0 .4rem; font-size: .86rem; font-weight: 700; color: var(--ink-3); }
.kinds-h:first-child { margin-top: .25rem; }
.kinds-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.kinds { display: block; }

/* 座位圖：房間、車、試場一格一個人 */
.sm-wall { fill: #fff; stroke: var(--ink); stroke-width: .12; }
.sm-gap { stroke: #fff; stroke-width: .2; }
.sm-deco { stroke: var(--line-2); stroke-width: .05; }
.sm-deco-fill { fill: var(--ink); }
.sm-deco-box { fill: #fff; stroke: var(--line-2); stroke-width: .05; }
.sm-cell { fill: #fff; stroke: var(--line-2); stroke-width: .05; stroke-dasharray: .16 .12; }
.sm-seat.is-on .sm-cell { stroke: var(--ink); stroke-width: .06; stroke-dasharray: none; }
.sm-seat.is-over .sm-cell { fill: var(--err-soft); stroke: var(--err); }
.sm-seat.is-picked .sm-cell, .sm-seat.is-target .sm-cell { fill: var(--yellow) !important; stroke: var(--ink); stroke-width: .08; stroke-dasharray: none; }
.sm-cnum { font-family: var(--font-num); font-size: .3px; font-weight: 700; fill: var(--ink-3); dominant-baseline: hanging; pointer-events: none; }
.sm-name.is-in { font-size: .46px; }
.sm-name.is-empty { fill: var(--ink-4); font-weight: 400; }

/* ---------- 平面圖風格（四選一，色票在 venues.js 的 STYLES） ---------- */
.fl-styles-wrap { margin: 0 0 .9rem; }
.fl-styles-h { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; font-size: .95rem; }
.fl-styles-h span { color: var(--ink-3); font-size: .85rem; }
.fl-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.style-opt {
  display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .45rem .45rem .6rem; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: border-color .18s, transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.style-opt:hover { border-color: var(--ink-4); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.style-opt.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.style-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.style-art { display: block; border-radius: 8px; overflow: hidden; line-height: 0; }
.style-art svg { width: 100%; height: auto; display: block; }
.style-t { display: flex; flex-direction: column; gap: .1rem; padding: 0 .2rem; min-width: 0; }
.style-t b { font-size: .95rem; }
.style-t small { font-size: .75rem; line-height: 1.35; color: var(--ink-3); }
@media (max-width: 40rem) {
  .fl-styles { grid-template-columns: repeat(4, 7.2rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .3rem; }
  .style-opt { scroll-snap-align: start; }
  .style-t small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .style-opt, .style-opt:hover { transition: none; transform: none; } }
/* 深色風格：平面圖外框也跟著變深，不會一圈白邊 */
.fl-svg.style-blueprint, .fl-svg.style-gala { filter: drop-shadow(0 10px 24px rgba(20, 20, 20, .18)); }

/* ---------- 付費鎖：超過 30 人的平面圖預覽 ---------- */
.floor-view { position: relative; }
.floor-grid.is-locked { grid-template-columns: minmax(0, 1fr); }
.floor-grid.is-locked .insp, .floor-grid.is-locked .fl-pool, .floor-grid.is-locked .floor-tools, .floor-grid.is-locked .spot-bar, .floor-grid.is-locked .zoom { display: none; }
.floor-grid.is-locked .floor-scroll { filter: blur(2.5px) saturate(.85); opacity: .9; pointer-events: none; user-select: none; }
.floor-grid.is-locked .floor-view { min-height: 34rem; align-items: stretch; }
.fl-lock { position: absolute; inset: 0; display: grid; place-items: start center; padding: clamp(2rem, 9vh, 5rem) 1rem 1rem; background: radial-gradient(120% 70% at 50% 30%, rgba(250, 250, 247, .15), rgba(250, 250, 247, .7)); }
.fl-lock[hidden] { display: none; }
.fl-lock-card {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: .5rem 1.5rem; width: min(46rem, 100%);
  padding: 1.5rem 1.75rem 1.5rem 1rem; border-radius: var(--r-lg); background: var(--ink); color: #fff;
  box-shadow: 0 30px 80px rgba(20, 20, 20, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: lock-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes lock-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .fl-lock-card { animation: none; } }
.fl-lock-art { position: relative; display: block; align-self: end; margin: -2.5rem 0 -1.5rem; }
.fl-lock-art::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 8%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
.fl-lock-art img { position: relative; }
.fl-lock-art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.fl-lock-eyebrow { margin: 0 0 .4rem; font-size: .85rem; letter-spacing: .06em; color: rgba(255, 255, 255, .62); }
.fl-lock-eyebrow b { color: var(--yellow); font-family: var(--font-num); font-size: 1rem; }
.fl-lock-card h3 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; }
.fl-lock-p { margin: 0 0 .9rem; color: rgba(255, 255, 255, .74); font-size: .95rem; line-height: 1.65; }
.fl-lock-price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.fl-lock-price .num { font-family: var(--font-num); font-stretch: 125%; font-weight: 800; font-size: 2.1rem; color: var(--yellow); line-height: 1; }
.fl-lock-price span:last-child { font-size: .88rem; color: rgba(255, 255, 255, .7); }
.fl-lock-list { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .9rem; color: rgba(255, 255, 255, .86); }
.fl-lock-list li { position: relative; padding-left: 1.4rem; }
.fl-lock-list li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .7rem; height: .38rem; border-left: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(-45deg); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 40rem) {
  .floor-grid.is-locked .floor-view { min-height: 0; }
  .fl-lock { position: static; padding: 0; margin-top: -40%; background: none; }
  .fl-lock-card { grid-template-columns: 1fr; padding: 1.2rem 1.1rem 1.3rem; }
  .fl-lock-art { width: 9rem; margin: -4.5rem auto -.5rem; }
  .fl-lock-card .btn-row .btn { flex: 1 1 100%; }
}

/* 解鎖視窗 */
.dlg-unlock .unlock-lede { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1rem; }
.dlg-unlock .unlock-lede b { font-family: var(--font-num); }
.unlock-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.unlock-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--fill); font-size: .95rem; }
.unlock-list li:last-child { background: var(--ok-soft); }
.unlock-soon { margin: 0; padding: .75rem .9rem; border-radius: var(--r-md); background: var(--yellow-soft); font-size: .95rem; line-height: 1.6; }
.fl-seat.is-pickable { cursor: copy; }