:root {
  --bg: #f5f4ef;
  --card: #fff;
  --line: #d8d5ca;
  --text: #222;
  --muted: #6c6b66;
  --primary: #1f6f43;
  --danger: #a12d2d;
  --free: #9a9a92;
  --taken: #ff7a00;
  --open: #ffd400;
  --fooddone: #0fa13d;
  --drinkdone: #005cff;
  --billing: #8c17ff;
  --food: #6a8f3e;
  --drink: #3b78c2;
  --pink: #bd5087;
  --green: #276b3f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 12px; padding: 11px 14px; background: var(--primary); color: #fff; }
button.secondary { background: #ece9df; color: #222; }
button.done { background: #2b7a3b; }
button.danger { background: var(--danger); }
button.icon-btn { background: transparent; color: var(--text); font-size: 22px; padding: 6px 10px; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(245,244,239,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.topbar-left { display:flex; align-items:center; gap: 10px; }
.subtitle-only { font-size: 22px; font-weight: 700; }
.status-cluster { display:flex; align-items:center; gap: 8px; flex-wrap: wrap; justify-content: end; }
.connection-indicator,.queue-indicator { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: #ece9df; }
.connection-indicator.online { background: #dff3e3; color: #0e6730; }
.connection-indicator.offline { background: #f5dfdf; color: #8f2929; }
main { padding: 14px; }
.view { display:none; }
.view.active { display:block; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.inner-card { background: #fcfcfb; }
.stack { display:grid; gap: 12px; }
.page-grid { display:grid; gap: 14px; grid-template-columns: 1.6fr 1fr; }
.billing-grid { grid-template-columns: 1fr 1.2fr; }
.section-head,.order-topline,.button-row { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
h2,h3 { margin: 0; }
.small { color: var(--muted); font-size: 13px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.26); z-index: 20; }
.drawer { position: fixed; inset: 0 auto 0 0; width: 290px; background: #fff; border-right: 1px solid var(--line); z-index: 21; padding: 14px; transform: translateX(-100%); transition: transform .2s ease; }
.drawer.open { transform: translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.drawer-nav,.submenu { display:grid; gap:8px; }
.drawer-link { width:100%; text-align:left; }
.drawer-link.child { margin-left: 12px; width: calc(100% - 12px); }
.submenu { display:none; }
.submenu.open { display:grid; }
.legend { display:flex; gap:6px; flex-wrap:wrap; }
.tiny-legend .legend-item { font-size: 10px; padding: 3px 6px; }
.legend-item { padding: 5px 9px; border-radius: 999px; font-size: 12px; color:#fff; }
.legend-item.free{background:var(--free)} .legend-item.taken{background:var(--taken)} .legend-item.open{background:var(--open); color:#222} .legend-item.fooddone{background:var(--fooddone)} .legend-item.drinkdone{background:var(--drinkdone)} .legend-item.billing{background:var(--billing)} .legend-item.splitdone{background:linear-gradient(90deg,var(--drinkdone) 0 50%,var(--fooddone) 50% 100%)}
.table-plan { display:grid; grid-template-columns: repeat(auto-fit, minmax(92px,1fr)); gap: 10px; }
.table-chip { min-height: 92px; border:1px solid rgba(0,0,0,.08); border-radius: 14px; text-align:center; padding: 8px; display:grid; gap:3px; align-content:center; color:#fff; box-shadow: inset 0 -3px rgba(0,0,0,.12); transition: transform .12s ease, box-shadow .12s ease; }
.table-chip:active { transform: scale(.97); }
.table-chip.free { background: var(--free); }
.table-chip.taken { background: var(--taken); }
.table-chip.open { background: var(--open); color:#222; }
.table-chip.fooddone { background: var(--fooddone); }
.table-chip.drinkdone { background: var(--drinkdone); }
.table-chip.billing { background: var(--billing); }
.table-chip.splitdone { background: linear-gradient(90deg, var(--drinkdone) 0 50%, var(--fooddone) 50% 100%); }
.table-chip.active { outline: 3px solid #093f22; }
.table-code { font-weight:700; font-size: 24px; }
.table-state,.table-count,.table-time { font-size: 12px; }
.choice-card { max-width: 720px; margin: 0 auto; }
.choice-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.choice-button { min-height: 140px; font-size: 28px; font-weight: 700; }
.choice-button.drink-choice { background: var(--drinkdone); }
.choice-button.food-choice { background: var(--fooddone); }
.menu-root { display:grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 12px; margin-top: 12px; }
.menu-section { border:1px solid var(--line); border-radius:14px; padding: 12px; background:#fcfcfb; }
.section-title { margin:0 0 8px; color: var(--green); font-size: 28px; font-family: Georgia, serif; }
.section-title.pink { color: var(--pink); }
.menu-items { display:grid; gap:8px; }
.menu-item,.billing-item { width:100%; padding: 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; }
.menu-item { background:#fff; color:#111; border:1px solid #d2d2cc; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.menu-item.pressed { transform: scale(.97); box-shadow: 0 0 0 3px rgba(31,111,67,.2); background:#e6f5eb; }
.menu-split { display:grid; grid-template-columns: 92px 1fr; gap:8px; border:1px solid #d2d2cc; border-radius: 12px; background:#fff; padding:8px; transition: box-shadow .12s ease, transform .12s ease; }
.menu-split.favorite-item { border-color:#f2ca52; }
.menu-split .menu-main-btn, .menu-split .menu-note-btn, .menu-split .menu-mini-btn { border-radius: 10px; min-height: 64px; }
.menu-split .menu-main-btn { display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; background:#fff; color:#111; border:1px solid #d9d8d1; width:100%; }
.menu-split .menu-note-btn, .menu-split .menu-mini-btn { background:#eef3ec; color:#1e5332; border:1px solid #c8d8ca; width:100%; }
.menu-split .menu-main-btn.pressed, .menu-split .menu-note-btn.pressed, .menu-split .menu-mini-btn.pressed { transform:scale(.97); box-shadow:0 0 0 3px rgba(31,111,67,.18); background:#e6f5eb; }
.drink-split { grid-template-columns: minmax(110px, 33%) 1fr; }
.drink-split .menu-mini-btn { font-size: 26px; font-weight:700; }
.food-split { grid-template-columns: 86px 1fr; }
.food-split .menu-note-btn { font-size: 15px; font-weight:700; }
.drink-split .size-btn { display:grid; gap:4px; justify-items:center; align-content:center; font-weight:700; }
.drink-split .size-btn span { font-size: 12px; font-weight:600; }
.menu-item.favorite-item { border-color: #f2ca52; }
.star-inline { color:#d99a00; }
.quick-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.quick-btn { background:#e9f3ed; color:#143e28; border:1px solid #b9d5c4; }
.selected-row,.ticket,.order,.notice,.admin-section,.admin-item,.qr-card { border:1px solid var(--line); border-radius: 12px; padding: 12px; background:#fff; }
.selected-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.item-note { margin-top: 4px; font-size: 13px; color:#1f6f43; font-weight:600; }
.qty-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.qty-controls .secondary { min-width: 40px; }
.grouped-items h3 { margin-bottom: 6px; }
.summary-box { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 12px; padding-top: 12px; border-top:1px solid var(--line); }
.manual-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap:10px; }
.badge { display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; color:#fff; }
.badge.food { background:var(--food); } .badge.drink { background:var(--drink); }
ul.clean { list-style:none; padding:0; margin:8px 0 0; display:grid; gap: 5px; }
.billing-item.selected { background:#eef6ff; border:1px solid #a9c9ef; color:#111; }
.menu-admin-layout { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-item-fields { display:grid; grid-template-columns: 46px 46px 46px 1.7fr 110px auto; gap: 8px; }
.admin-section-top { display:grid; grid-template-columns: 46px 46px 46px 1.5fr 120px auto auto; gap: 8px; }
.archive-actions { display:flex; align-items:center; gap:10px; }
.qr-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
.qr-card img { width: 100%; max-width: 180px; display:block; margin: 8px auto; }
.role-dark { background: #121416; min-height: calc(100vh - 80px); margin: -14px; padding: 14px; }
.role-dark .card { background:#1a1d20; border-color:#2b3238; color:#f5f5f5; }
.role-dark .small { color:#aab3ba; }
.role-dark .ticket { background:#23292e; border-color:#323b44; }
.role-dark button.secondary { background:#2b3238; color:#f5f5f5; }
.tablet-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.tablet-list .ticket { padding: 18px; border-radius: 16px; }
.tablet-list .ticket strong { font-size: 34px; line-height: 1.1; }
.tablet-list .ticket .small { font-size: 16px; }
.tablet-list .ticket li { font-size: 24px; padding: 3px 0; }
.tablet-list .ticket button { width: 100%; min-height: 70px; font-size: 24px; font-weight: 700; margin-top:12px; }
@media (max-width: 1000px) { .page-grid,.billing-grid,.menu-admin-layout,.manual-grid,.admin-item-fields,.admin-section-top,.choice-grid { grid-template-columns: 1fr; } .section-title { font-size:24px; } }

.drag-handle { min-width: 46px; padding-inline: 0; font-weight: 700; }
.admin-section.drag-target, .admin-item.drag-target { outline: 3px dashed rgba(31,111,67,.35); outline-offset: 2px; }
.admin-section.dragging, .admin-item.dragging { opacity: .55; }


body.theme-dark {
  --bg: #11161a;
  --card: #1b2228;
  --line: #313a42;
  --text: #eef3f6;
  --muted: #aeb7bf;
}
body.theme-dark input, body.theme-dark select { background:#13181c; color:var(--text); }
body.theme-dark .topbar { background: rgba(17,22,26,.96); }
body.theme-dark .drawer { background:#182026; }
body.theme-dark .menu-section, body.theme-dark .inner-card, body.theme-dark .selected-row, body.theme-dark .ticket, body.theme-dark .order, body.theme-dark .notice, body.theme-dark .admin-section, body.theme-dark .admin-item, body.theme-dark .qr-card, body.theme-dark .menu-item, body.theme-dark .menu-split { background:#1b2228; color:var(--text); border-color:var(--line); }
body.theme-dark .menu-split .menu-main-btn { background:#161c21; color:var(--text); border-color:var(--line); }
body.theme-dark .menu-split .menu-note-btn, body.theme-dark .menu-split .menu-mini-btn, body.theme-dark button.secondary { background:#24303a; color:var(--text); border-color:#3a4955; }
body.theme-dark .quick-btn { background:#24303a; color:var(--text); border-color:#3a4955; }
body.theme-dark .section-title { color:#6ed391; }
body.theme-dark .section-title.pink { color:#f08bb7; }
body.theme-dark .table-chip.open { color:#111; }
.setting-row { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; }
.theme-toggle { display:flex; gap:8px; }
.theme-toggle button.active { background: var(--primary); color:#fff; }

body[data-view="login"] .topbar { display:none; }
body[data-view="login"] main { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { max-width: 520px; margin: 40px auto; width:100%; }
.role-login-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.role-login-btn { min-height:72px; font-size:20px; }
.role-login-btn.active { outline:3px solid rgba(31,111,67,.25); background:#2b8551; }
.remember-row { display:flex; align-items:center; gap:10px; color:var(--text); }
.remember-row input { width:auto; }
.danger-link { background:#f5dfdf; color:#8f2929; }



/* V15 refinements */
.submenu.empty { display:none !important; }
.drawer-link.active-route { background: var(--primary); color: #fff; }
.tablet-role-card { min-height: calc(100vh - 110px); }
body[data-view="kitchen"] .topbar,
body[data-view="bar"] .topbar { position: sticky; }
@supports (height: 100dvh) {
  .role-dark { min-height: 100dvh; }
  .tablet-role-card { min-height: calc(100dvh - 110px); }
}
body.theme-dark {
  --primary: #2f9c63;
  --card: #182027;
  --bg: #0d1216;
  --line: #2a3640;
  --text: #f4f7fa;
  --muted: #9cabba;
}
body.theme-dark .app-shell { background: linear-gradient(180deg, #0d1216 0%, #10171c 100%); }
body.theme-dark .card,
body.theme-dark .menu-section,
body.theme-dark .inner-card,
body.theme-dark .selected-row,
body.theme-dark .ticket,
body.theme-dark .order,
body.theme-dark .notice,
body.theme-dark .admin-section,
body.theme-dark .admin-item,
body.theme-dark .qr-card,
body.theme-dark .menu-item,
body.theme-dark .menu-split,
body.theme-dark .login-card,
body.theme-dark .summary-box { background:#182027; color:var(--text); border-color:var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
body.theme-dark .topbar { background: rgba(10,14,18,.96); border-color:#22303a; }
body.theme-dark .drawer { background:#121920; border-color:#26333d; }
body.theme-dark .drawer-link { background:#1a242d; color:var(--text); border:1px solid #2b3944; }
body.theme-dark .drawer-link.child { background:#131b22; }
body.theme-dark .drawer-link.has-children { background:#22303a; }
body.theme-dark .danger-link { background:#412225; color:#ffd9dd; border-color:#6f353b; }
body.theme-dark button.secondary,
body.theme-dark .quick-btn,
body.theme-dark .menu-split .menu-note-btn,
body.theme-dark .menu-split .menu-mini-btn { background:#22303a; color:var(--text); border-color:#38505f; }
body.theme-dark .menu-split .menu-main-btn,
body.theme-dark .menu-item { background:#11181e; color:var(--text); border-color:#31414d; }
body.theme-dark .connection-indicator,
body.theme-dark .queue-indicator { background:#172129; border-color:#30414e; color:#d9e3ea; }
body.theme-dark .connection-indicator.online { background:#13331f; color:#b6f1c9; }
body.theme-dark input, body.theme-dark select { background:#10161b; color:var(--text); border-color:#30414e; }
body.theme-dark input::placeholder { color:#7f919f; }
body.theme-dark .section-title { color:#84e0a7; }
body.theme-dark .section-title.pink { color:#f2a9cc; }
body.theme-dark .small, body.theme-dark .table-state, body.theme-dark .table-count, body.theme-dark .table-time { color:#c8d2d8; }
body.theme-dark .badge.food { background:#527a2b; }
body.theme-dark .badge.drink { background:#2d5f9d; }
body.theme-dark .billing-item.selected { background:#193246; border-color:#2e5f86; color:#eef7ff; }
body.theme-dark .table-chip.active { outline-color:#8ad9aa; }
body.theme-dark .theme-toggle button.active { background:#2f9c63; color:#fff; }
body.theme-dark .role-login-btn.active { outline-color: rgba(132,224,167,.35); background:#2f9c63; }
body.theme-dark .legend-item.open { color:#111; }
body.theme-dark .menu-item.pressed,
body.theme-dark .menu-split .menu-main-btn.pressed,
body.theme-dark .menu-split .menu-note-btn.pressed,
body.theme-dark .menu-split .menu-mini-btn.pressed { background:#1e3f2f; box-shadow:0 0 0 3px rgba(132,224,167,.2); }
body.theme-dark .tablet-list .ticket { background:#11181e; border-color:#2d3e4a; }
body.theme-dark .tablet-list .ticket button { box-shadow:none; }