/* 配色の方針：暖かみのある黒＋くすんだシャンパンゴールド。状態の色は「面」ではなく「線・数字・札」にだけ使う
   （2026-10-16 ChatGPTの提案を採用。記録：AI調査/_raw/キャバクラPOS_UI相談_ChatGPT_20261016.md） */
:root {
  --bg: #0D0D0F; --bg-elevated: #121214;
  --surface-1: #171719; --surface-2: #1D1D20; --surface-3: #252529;
  --border-subtle: #29292E; --border: #35353B; --border-strong: #47474F;
  --text: #F2F0EB; --text-2: #B5B1AA; --text-3: #77747A;
  --accent: #C9A66B; --accent-hover: #D7B77D; --accent-muted: #806B49; --accent-bg: #272117; --accent-fg: #17130C;
  --st-active: #5C82B8; --st-active-bg: #17202C;
  --st-15: #C8A95D; --st-15-bg: #292316;
  --st-10: #D58A4B; --st-10-bg: #2A1D14;
  --st-5: #DC6262; --st-5-bg: #2B1719;
  --st-over: #D0709D; --st-over-bg: #2B1822;
  --st-ext: #9876C8; --st-ext-bg: #211B2C;
  --st-checkout: #6EAE8A; --st-checkout-bg: #17251D;
  --st-free: #626269; --st-free-bg: #141416;
  --danger: #DE6666; --danger-bg: #32191B; --success: #72B58E;
  --control: #242428; --control-hover: #2D2D32; --control-active: #37373D;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
  --font: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* .modal / .panel の display:flex が hidden 属性に勝って、空の黒い板が全面にかぶさるのを防ぐ */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; }
body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- 部品 ---------- */
button { font: inherit; font-weight: 600; color: var(--text); cursor: pointer; border: 1px solid var(--border); background: var(--control); border-radius: var(--r-md); padding: 10px 16px; min-height: 48px; transition: background .12s; }
button:hover { background: var(--control-hover); }
button:active { background: var(--control-active); }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 700; }
button.primary:hover { background: var(--accent-hover); }
button.danger { background: transparent; border-color: #5a2a2c; color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--surface-2); color: var(--text); }
button.sm { min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); border-radius: 8px; }
button.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-muted); }
button:disabled { opacity: .35; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-height: 46px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-muted); box-shadow: 0 0 0 3px rgba(201,166,107,.15); }
textarea { min-height: 80px; resize: vertical; }
label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin: 12px 0 4px; }
label.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--text); }
label.check input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--accent); }
h2 { font-size: var(--fs-xl); font-weight: 700; margin: 4px 0 16px; letter-spacing: .02em; }
h3 { font-size: var(--fs-sm); font-weight: 600; margin: 20px 0 8px; color: var(--text-3); letter-spacing: .06em; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.right { text-align: right; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.hidden { display: none !important; }
/* 絞り込みのボタンの段と、その下の表がくっつかないように空ける（営業リスト・顧客など） */
.chips + .row { margin-top: 12px; }
.chips + .card, .row + .card { margin-top: 16px; }
#opts:empty { display: none; }
.err { color: var(--danger); min-height: 1.2em; margin: 8px 0; font-size: var(--fs-sm); }

/* ---------- ヘッダー ---------- */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px; background: rgba(13,13,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); }
.brand { font-weight: 700; color: var(--accent); white-space: nowrap; letter-spacing: .04em; }
nav { display: flex; gap: 2px; flex: 1; align-items: center; }
nav button { min-height: 40px; padding: 6px 14px; background: transparent; border-color: transparent; color: var(--text-2); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
/* 幅が狭いときは文字を折らずに横へずらせるようにする */
nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.brand, .who { flex-shrink: 0; }
@media (max-width: 1000px) { .clock { display: none; } nav button { padding: 6px 10px; } }
nav button.on { color: var(--text); background: var(--surface-2); border-color: var(--border-subtle); }
.more { position: relative; }
.more-menu { position: fixed; min-width: 180px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 20; }
.more-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; }
.more-menu button:hover, .more-menu button.on { background: var(--surface-3); }
.who { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-2); }
.clock { font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; }
main { padding: 16px 24px 32px; max-width: 1400px; margin: 0 auto; }
.offline { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--danger-bg); border-bottom: 1px solid var(--danger); color: var(--danger); text-align: center; padding: 8px; font-weight: 700; }

/* ---------- ログイン ---------- */
.login { max-width: 420px; margin: 10vh auto; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 28px; }
.login .logo { color: var(--accent); font-weight: 700; letter-spacing: .08em; font-size: var(--fs-sm); margin-bottom: 4px; }
.login .tabs { display: flex; gap: 6px; margin-bottom: 8px; background: var(--bg-elevated); padding: 4px; border-radius: var(--r-md); }
.login .tabs button { flex: 1; min-height: 40px; background: transparent; border-color: transparent; color: var(--text-2); }
.login .tabs button.on { background: var(--surface-3); color: var(--text); }
.login form button[type=submit] { width: 100%; margin-top: 8px; }
.castpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pinpad button { font-size: var(--fs-xl); min-height: 64px; font-variant-numeric: tabular-nums; }
.pindots { font-size: 28px; letter-spacing: 14px; text-align: center; min-height: 44px; color: var(--accent); }

/* ---------- 営業中の数字（4つだけ） ---------- */
.kpis { display: flex; align-items: stretch; gap: 0; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-bottom: 16px; }
.kpi { flex: 1; padding: 10px 18px; border-right: 1px solid var(--border-subtle); }
.kpi:last-child { border-right: 0; }
.kpi .k { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .06em; }
.kpi .v { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); margin-left: 6px; }
.kpi.warn .v { color: var(--st-checkout); }

/* ---------- 卓一覧 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-xs); color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.floorbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.floor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (min-width: 1300px) { .floor { grid-template-columns: repeat(5, 1fr); } }

/* 状態ごとの色（--sc＝線と数字、--sb＝札の背景） */
.s-free { --sc: var(--st-free); --sb: var(--st-free-bg); }
.s-active { --sc: var(--st-active); --sb: var(--st-active-bg); }
.s-w15 { --sc: var(--st-15); --sb: var(--st-15-bg); }
.s-w10 { --sc: var(--st-10); --sb: var(--st-10-bg); }
.s-w5 { --sc: var(--st-5); --sb: var(--st-5-bg); }
.s-over { --sc: var(--st-over); --sb: var(--st-over-bg); }
.s-ext { --sc: var(--st-ext); --sb: var(--st-ext-bg); }
.s-checkout { --sc: var(--st-checkout); --sb: var(--st-checkout-bg); }

.tcard { position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 12px 18px; min-height: 148px; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-left: 4px solid var(--sc); font-weight: 400; }
.tcard:hover { background: var(--surface-2); }
/* 対応が要る状態だけ、左から色を薄くにじませる */
.tcard.s-w5, .tcard.s-over, .tcard.s-checkout { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 45%), var(--surface-1); }
.tcard .c-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tcard .tname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .02em; }
.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-sm); color: var(--sc); background: var(--sb); white-space: nowrap; }
.s-over .badge, .badge.s-over { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.tcard .c-cust { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .c-cust .n { color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); margin-left: 6px; }
.tcard .c-cast { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 4px; margin-left: 2px; border-radius: 4px; vertical-align: 1px; border: 1px solid currentColor; }
.mk.NOMINATION { color: #D99BB8; } .mk.INHOUSE { color: #8FB0D6; } .mk.DOUHAN { color: var(--accent); }
.tcard .c-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; }
.tcard .c-time { font-size: 27px; font-weight: 700; color: var(--sc); font-variant-numeric: tabular-nums; line-height: 1.1; }
.s-active .c-time { color: var(--text); }
.tcard .c-total { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tcard .c-sub { font-size: var(--fs-xs); color: var(--text-3); }
.tcard.s-free { background: var(--st-free-bg); border-style: dashed; border-left-style: solid; color: var(--text-3); }
.tcard.s-free .tname { color: var(--text-2); }
.tcard.s-free .c-empty { margin-top: auto; font-size: var(--fs-sm); }
.tcard.mine { box-shadow: 0 0 0 2px var(--accent-muted); }
.tcard.notmine { opacity: .45; }
.vip { color: var(--accent); font-weight: 700; font-size: var(--fs-xs); border: 1px solid var(--accent-muted); border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: 2px; }

.att { min-height: 150px; }
.att .c-bottom button { width: 100%; min-height: 52px; }
.date-in { max-width: 200px; }
.mt { margin-top: 20px; }

.ride { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 4px; border: 1px solid currentColor; }
.ride.r-TODO { color: var(--st-5); animation: pulse 1.8s ease-in-out infinite; }
.ride.r-ARRANGED { color: var(--st-15); }
.ride.r-ARRIVED { color: var(--st-checkout); }
.ride-warn { color: var(--st-5) !important; }
.ride-steps { margin: 8px 0; }
.callbtn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; margin: 6px 0; padding: 8px 14px; border-radius: var(--r-md);
  background: var(--st-checkout-bg); border: 1px solid #2f5a41; color: var(--st-checkout); font-weight: 700; text-decoration: none; }
.callbtn span { font-weight: 500; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }

.area-head { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; }
.area-head h3 { margin: 0; font-size: var(--fs-md); color: var(--text-2); }
.floor.counter { grid-template-columns: repeat(6, 1fr); }
.floor.counter .tcard { min-height: 128px; padding: 12px 12px 10px 14px; }
.floor.counter .tcard .c-time { font-size: 22px; }
.floor.counter .tcard .c-total { font-size: var(--fs-md); }
.num-in { width: 80px; min-height: 36px; padding: 4px 8px; }
@media (max-width: 1000px) { .floor.counter { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .floor.counter { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 見取り図 ---------- */
.seg { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 2px; }
.seg button { border-color: transparent; background: transparent; min-height: 32px; color: var(--text-2); }
.seg button.on { background: var(--surface-3); color: var(--text); border-color: transparent; }
.fmap { position: relative; width: 100%; background-color: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: var(--cell, 40px) var(--cell, 40px); background-position: -1px -1px; }
.tcard.mapcard { position: absolute; min-height: 0; padding: 8px 10px 6px 12px; overflow: hidden; gap: 0; }
.tcard.mapcard .tname { font-size: var(--fs-md); }
.tcard.mapcard .c-top { margin-bottom: 2px; }
.tcard.mapcard .c-cust { font-size: var(--fs-sm); }
.tcard.mapcard .c-time { font-size: 18px; }
.tcard.mapcard .c-total { font-size: 12px; }
.tcard.mapcard.tiny .c-cast, .tcard.mapcard.tiny .c-sub, .tcard.mapcard.tiny .c-cust .n, .tcard.mapcard.tiny .c-total, .tcard.mapcard.tiny .c-empty { display: none; }
.tcard.mapcard.tiny .badge { font-size: 9px; padding: 1px 5px; }
.tcard.mapcard.tiny .c-time { font-size: 16px; }
.tcard.mapcard.s-free .c-empty { font-size: var(--fs-xs); }
.tcard.mapcard .c-top { gap: 4px; min-width: 0; }
.tcard.mapcard .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard.mapcard .badge { flex-shrink: 0; }
.tcard.mapcard .c-bottom { flex-wrap: nowrap; column-gap: 4px; }
/* 高さが足りないときは下から切れるだけにして、行どうしを重ねない */
.tcard.mapcard > * { flex-shrink: 0; }
.tcard.mapcard.tiny { padding: 6px 6px 4px 8px; }
.tcard.mapcard.tiny .tname { font-size: var(--fs-sm); }
.tcard.mapcard.tiny .badge { display: none; }

/* 配置を動かす画面 */
.layout-ov { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 12px 20px 16px; }
.lay-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lay-head .inl { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.lay-head .inl input { width: 64px; min-height: 34px; padding: 4px 6px; }
.lay-help { margin: 6px 0 10px; }
.lay-wrap { flex: 1; min-height: 0; overflow: auto; }
.lay-canvas { position: relative; background-color: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: var(--cell, 40px) var(--cell, 40px); background-position: -1px -1px; touch-action: none; }
.lay-item { position: absolute; box-sizing: border-box; border: 2px solid var(--st-active); border-radius: 8px; background: var(--st-active-bg); color: var(--text);
  display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: grab; user-select: none; touch-action: none; overflow: hidden; padding: 2px; }
.lay-item.area-カウンター { border-color: var(--st-15); background: var(--st-15-bg); }
.lay-item.area-VIP, .lay-item.area-個室 { border-color: var(--accent); background: var(--accent-bg); }
.lay-item .ln { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.lay-item .la { font-size: 10px; color: var(--text-2); }
.lay-item.dragging { cursor: grabbing; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 2; }
.lay-item.bad { border-color: var(--danger); background: var(--danger-bg); }
.lay-item .rs { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--text-2) 50%); border-bottom-right-radius: 6px; }
.lay-open { justify-content: flex-start; margin: 0 0 8px; }

/* ---------- 小窓 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5,5,6,.7); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.sheet { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); width: 100%; max-width: 720px; padding: 20px 22px; box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25); }
.sheet.wide { max-width: 1000px; }
.sheet .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet .head h2 { margin: 0; font-size: var(--fs-lg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips button { min-width: 84px; }
.grid-btn { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grid-btn button { min-height: 68px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--surface-2); border-color: var(--border-subtle); }
.grid-btn button .p { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.grid-btn button.on { background: var(--accent-bg); border-color: var(--accent-muted); color: var(--accent); }
.grid-btn button.on .p { color: var(--accent-muted); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 52px; font-size: 20px; padding: 0; }
.stepper .v { font-size: var(--fs-xl); min-width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.list { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-elevated); }
.list .li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
.list .li:last-child { border-bottom: 0; }
.list .li.void { opacity: .4; text-decoration: line-through; }
.list .li.click { cursor: pointer; }
.list .li.click:hover { background: var(--surface-2); }
.list .empty { padding: 14px; color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- 卓の詳細 ---------- */
.panel { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; }
.panel .phead { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.panel .phead .tname { font-size: var(--fs-xl); font-weight: 700; }
.panel .pbody { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(270px, 300px) 1fr 1fr; gap: 12px; padding: 16px 24px; }
.panel .col { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 16px; overflow: auto; }
.panel .col h3:first-child { margin-top: 0; }
.panel .cust-name { font-size: var(--fs-lg); font-weight: 700; }
.panel .bigline { font-size: var(--fs-md); }
.panel .pbar { display: flex; gap: 8px; padding: 12px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.panel .pbar button { min-height: 58px; padding: 0 18px; font-size: var(--fs-md); flex: 1; }
.panel .pbar .sp { flex: .4; }
/* 使う回数で強弱：注文・延長＝強、キャスト・指名＝普通、顧客・割引・卓移動＝弱、会計＝金 */
.pbar .t1 { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.pbar .t2 { background: var(--control); }
.pbar .t3 { background: transparent; border-color: var(--border-subtle); color: var(--text-2); }
.pbar .tpay { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); flex: 1.3; }
.timer-label { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .06em; }
.bigtime { font-size: 64px; font-weight: 650; line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--sc, var(--text)); margin: 6px 0 8px; }
.s-active .bigtime { color: var(--text); }
.bigtotal { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.bill { margin-top: 8px; }
.bill .bl { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; font-size: var(--fs-md); color: var(--text-2); }
.bill .bl span:last-child { color: var(--text); }
.bill .bl.sub { border-top: 1px solid var(--border-subtle); margin-top: 6px; padding-top: 8px; font-weight: 600; }
.bill .bl.minus span { color: var(--danger); }
.bill .bl.total { border-top: 1px solid var(--accent-muted); margin-top: 8px; padding-top: 10px; font-size: var(--fs-lg); font-weight: 700; }
.bill .bl.total span { color: var(--accent); }
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border); margin: 0 4px 4px 0; }
.tag.NOMINATION { color: #D99BB8; border-color: #5a3447; background: #241820; }
.tag.INHOUSE { color: #8FB0D6; border-color: #34465a; background: #182029; }
.tag.DOUHAN { color: var(--accent); border-color: var(--accent-muted); background: var(--accent-bg); }
.tag.FREE { color: var(--text-2); }
.alertbox { background: var(--accent-bg); border: 1px solid var(--accent-muted); color: var(--accent); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 12px; font-weight: 600; font-size: var(--fs-sm); }

/* ---------- 表・カード ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.t th, table.t td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
table.t th { color: var(--text-3); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; position: sticky; top: 0; background: var(--surface-1); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: var(--surface-2); }
.card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 16px; overflow-x: auto; }
.card > h3:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stat { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 14px; }
.stat .k { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
.stat .v { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.form2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.note { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 8px; white-space: pre-wrap; }
.note .by { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.editrow input, .editrow select { min-height: 38px; padding: 6px 8px; }

/* ---------- 知らせ ---------- */
.toasts { position: fixed; right: 24px; bottom: 96px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
.toast { background: var(--surface-3); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 12px 16px; font-weight: 600; font-size: var(--fs-md); box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.toast.warn { border-left-color: var(--st-5); }
.toast.err { border-left-color: var(--danger); color: #f0a9a6; }

/* ---------- 狭い画面（スマホ・縦のiPad） ---------- */
@media (max-width: 1000px) {
  .floor { grid-template-columns: repeat(3, 1fr); }
  .panel .pbody { grid-template-columns: 1fr 1fr; }
  .panel .pbody .col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  header { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 8px; }
  nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  main { padding: 12px 16px 24px; }
  .floor { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tcard { min-height: 132px; padding: 12px 12px 10px 14px; }
  .tcard .c-time { font-size: 22px; }
  .kpis { flex-wrap: wrap; }
  .kpi { flex-basis: 50%; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .panel .pbody { grid-template-columns: 1fr; padding: 12px 16px; }
  .panel .pbar { flex-wrap: wrap; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
  .panel .pbar button { flex: 1 1 22%; min-height: 50px; padding: 0 8px; font-size: var(--fs-sm); }
  .panel .pbar .sp { display: none; }
  .bigtime { font-size: 48px; }
  .toasts { left: 16px; right: 16px; bottom: 16px; }
}