:root {
  --ink: #181716;
  --muted: #706d68;
  --line: #e7e2dc;
  --paper: #f8f5f1;
  --surface: #ffffff;
  --brand: #8a3f2b;
  --brand-dark: #633020;
  --accent: #f0dfd6;
  --success: #2d6a4f;
  --warning: #9a6700;
  --danger: #a33a32;
  --shadow: 0 12px 35px rgba(37, 29, 23, .08);
  --radius: 18px;
  --radius-sm: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
code { padding: .15rem .35rem; border-radius: 6px; background: #f0ece7; font-size: .9em; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; min-height: 72px; padding: 0 3vw; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 900; letter-spacing: .08em; }
.brand-large { font-size: 1.25rem; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: var(--brand); color: white; font-family: Georgia, serif; font-size: 1.2rem; }
.topnav { display: flex; align-items: center; gap: 1.35rem; }
.topnav a { color: var(--muted); font-weight: 650; }
.topnav a:hover { color: var(--ink); }
.user-chip { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.user-chip form { margin: 0; }
.page-shell { width: min(1440px, 94vw); margin: 0 auto; padding: 2.4rem 0 5rem; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.15rem, 4vw, 4.2rem); line-height: 1.03; letter-spacing: -.035em; }
h2 { margin-bottom: .4rem; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.025em; }
h3 { margin-bottom: .3rem; }
.eyebrow { margin-bottom: .45rem; color: var(--brand); font-size: .75rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.muted { color: var(--muted); }
small { color: var(--muted); }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.page-heading h1 { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.heading-actions { display: flex; gap: .8rem; }
.section-block { margin-top: 2.5rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.1rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .72rem 1rem; border: 1px solid transparent; border-radius: 12px; font-weight: 800; transition: transform .15s ease, background .15s ease, border .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--brand); color: white; }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { background: white; border-color: var(--line); color: var(--ink); }
.button-light { background: rgba(255,255,255,.94); color: var(--ink); }
.button-block { width: 100%; }
.link-button { appearance: none; padding: 0; border: 0; background: transparent; color: var(--brand); font-weight: 800; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f2eee9; font-size: 1.4rem; }
.icon-action { border: 1px solid var(--line); border-radius: 8px; background: white; padding: .4rem .55rem; font-weight: 750; }
.inline-actions { display: flex; gap: .4rem; }

label { display: grid; gap: .45rem; color: var(--muted); font-size: .88rem; font-weight: 750; }
input, textarea, select { width: 100%; min-height: 44px; padding: .72rem .8rem; border: 1px solid #d7d0c8; border-radius: 10px; background: white; color: var(--ink); }
textarea { min-height: 86px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(138,63,43,.15); border-color: var(--brand); }
.stack-form { display: grid; gap: 1rem; }
.form-hint { margin: .8rem 0 0; color: var(--muted); font-size: .82rem; }

.alert { padding: .8rem 1rem; border-radius: 11px; background: #f6f0e8; color: #5e5145; }
.alert-danger { background: #fbe9e7; color: #8d2e28; }
.success-panel { padding: 1rem; border-radius: 12px; background: #eaf5ee; color: var(--success); font-weight: 800; }
.warning-text { color: var(--warning); font-weight: 750; }

.auth-page { background: radial-gradient(circle at 10% 20%, #ead3c6 0, transparent 35%), #f5efe9; }
.auth-shell { display: grid; grid-template-columns: 1.15fr minmax(340px, .85fr); align-items: center; gap: 7vw; width: min(1100px, 90vw); min-height: 100vh; margin: auto; padding: 5rem 0; }
.auth-panel h1 { max-width: 700px; }
.auth-panel p.muted { max-width: 570px; font-size: 1.15rem; line-height: 1.6; }
.auth-card { max-width: 470px; width: 100%; padding: 2rem; }
.auth-card h2 { margin-bottom: 1.3rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.metric-card { display: grid; gap: .35rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; }
.metric-card span { color: var(--muted); font-size: .85rem; font-weight: 700; }
.metric-card strong { font-size: 1.75rem; }
.metric-card.compact { min-width: 200px; }

.table-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.table-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 7px 22px rgba(37,29,23,.05); }
.table-card.needs-attention { border-color: #e3ad67; box-shadow: 0 0 0 3px rgba(227,173,103,.16); }
.table-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.table-card h3 { margin: 0; font-size: 2rem; }
.table-label { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.table-meta { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: .8rem 0; color: var(--muted); font-size: .82rem; }
.assignment-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .86rem; }
.request-stack { display: grid; gap: .45rem; margin-top: .8rem; }
.request-alert { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem; border-radius: 10px; background: #fff5e7; }
.request-alert small { display: block; }
.manual-payment-form { display: grid; grid-template-columns: minmax(0,1fr) 95px auto; align-items: end; gap: .55rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }

.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .58rem; border-radius: 999px; background: #efede9; color: #5e5a55; font-size: .73rem; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.status-success, .status-served, .status-paid { background: #e5f3ea; color: var(--success); }
.status-danger, .status-cancelled, .status-failed { background: #f8e5e3; color: var(--danger); }
.status-ready { background: #e8f0ff; color: #315a9f; }
.status-in_preparation { background: #fff1d7; color: #8a5b00; }
.status-new, .status-received { background: #f1e8ff; color: #6f45a8; }

.guest-page { background: #f7f4ef; }
.guest-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 230px; padding: 3.2rem max(5vw, calc((100vw - 1180px)/2)); background: linear-gradient(130deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #1b1715)); color: white; }
.guest-header.compact { min-height: 180px; }
.guest-header .eyebrow { color: rgba(255,255,255,.75); }
.guest-header h1 { margin: 0; color: white; }
.guest-table { margin: .55rem 0 0; color: rgba(255,255,255,.82); font-weight: 700; }
.guest-shell { width: min(1180px, 92vw); margin: 0 auto; padding: 1.4rem 0 7rem; }
.category-nav { position: sticky; top: 0; z-index: 10; display: flex; gap: .65rem; overflow-x: auto; padding: 1rem 0; background: rgba(247,244,239,.93); backdrop-filter: blur(10px); scrollbar-width: none; }
.category-nav a { flex: 0 0 auto; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: white; font-weight: 750; }
.menu-category { scroll-margin-top: 80px; padding: 2rem 0; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.product-card { display: grid; grid-template-columns: 130px 1fr; min-height: 150px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.product-card > img { width: 100%; height: 100%; object-fit: cover; }
.product-card:not(:has(img)) { grid-template-columns: 1fr; }
.product-copy { display: grid; align-content: start; gap: .65rem; padding: 1rem; }
.product-copy p { margin: 0; color: var(--muted); line-height: 1.45; }
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-title-row h3 { margin: 0; }
.product-copy .button { justify-self: start; margin-top: auto; }
.product-card.is-unavailable { opacity: .6; }
.cart-button { position: fixed; z-index: 25; left: 50%; bottom: 1rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; width: min(560px, calc(100vw - 2rem)); min-height: 60px; padding: .7rem 1rem; transform: translateX(-50%); border: 0; border-radius: 18px; background: var(--ink); color: white; box-shadow: 0 16px 40px rgba(0,0,0,.25); font-weight: 800; }
.cart-button strong { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; color: var(--ink); }

.cart-dialog { width: min(590px, calc(100vw - 1.5rem)); max-height: 88vh; overflow: auto; padding: 1.4rem; border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.cart-dialog::backdrop { background: rgba(18,15,13,.55); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 1rem; right: 1rem; }
.dialog-heading { padding-right: 3rem; margin-bottom: 1rem; }
.cart-items { display: grid; gap: .65rem; margin-bottom: 1rem; }
.cart-line { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.cart-line-main { display: grid; gap: .3rem; }
.cart-line-main small { display: block; }
.line-notes { min-height: 36px; padding: .45rem .55rem; font-size: .82rem; }
.quantity-control { display: grid; grid-template-columns: 34px 26px 34px; align-items: center; text-align: center; }
.quantity-control button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: white; }
.cart-summary { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0; padding-top: 1rem; border-top: 2px solid var(--ink); font-size: 1.15rem; }
.modifier-list { display: grid; gap: .55rem; margin-bottom: 1rem; }
.modifier-option { grid-template-columns: auto 1fr auto; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.modifier-option input { width: 20px; min-height: 20px; }

.status-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.status-layout .bill-card { grid-column: 1 / -1; }
.bill-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 1rem 0; }
.bill-metrics > div { display: grid; gap: .2rem; padding: .8rem; border-radius: 12px; background: #f7f4f0; }
.bill-metrics span { color: var(--muted); font-size: .8rem; }
.bill-metrics strong { font-size: 1.25rem; }
.payment-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.status-items { display: grid; }
.status-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.status-item:last-child { border-bottom: 0; }
.status-item input { width: 20px; min-height: 20px; }
.status-item small { display: block; margin-top: .15rem; }
.request-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; }
.request-button { min-height: 58px; border: 1px solid var(--line); border-radius: 12px; background: white; font-weight: 800; }

.station-tabs { display: flex; flex-wrap: wrap; gap: .55rem; }
.station-tabs a { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: white; font-weight: 750; }
.station-tabs a.active { background: var(--ink); color: white; border-color: var(--ink); }
.kds-page { background: #ece9e4; }
.kds-grid { display: grid; grid-template-columns: repeat(4, minmax(260px,1fr)); align-items: start; gap: .9rem; }
.kds-ticket { overflow: hidden; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kds-ticket header { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: var(--ink); color: white; }
.kds-ticket header span { color: #c8c2bb; font-size: .8rem; }
.kds-ticket header h2 { margin: .15rem 0 0; }
.kds-ticket time { font-weight: 900; }
.kds-items { display: grid; }
.kds-item { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.kds-item:last-child { border-bottom: 0; }
.kds-item small, .kds-item em { display: block; margin-top: .2rem; }
.kds-item em { color: var(--danger); font-style: normal; font-weight: 800; }
.kds-action { min-width: 80px; background: #f0ece7; }

.empty-state { padding: 2rem; border: 1px dashed #cfc7be; border-radius: var(--radius); text-align: center; color: var(--muted); }
.empty-state.wide { grid-column: 1 / -1; }
.result-shell { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.result-card { max-width: 580px; text-align: center; padding: 2.5rem; }
.result-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: #f8e5e3; color: var(--danger); font-size: 2rem; font-weight: 900; }
.result-icon.success { background: #e5f3ea; color: var(--success); }
.toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; max-width: min(420px, calc(100vw - 2rem)); padding: .85rem 1rem; transform: translateY(30px); border-radius: 12px; background: var(--ink); color: white; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: var(--shadow); }
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast[popover] { margin: 0; border: 0; overflow: visible; inset: auto 1rem 1rem auto; width: auto; height: auto; }
.toast[data-kind="error"] { background: var(--danger); }

@media (max-width: 1050px) {
  .table-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kds-grid { grid-template-columns: repeat(2,minmax(260px,1fr)); }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .topnav { grid-column: 1 / -1; order: 3; overflow-x: auto; padding-bottom: .65rem; }
  .user-chip > span { display: none; }
  .page-shell { width: min(94vw, 680px); padding-top: 1.5rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .auth-shell { grid-template-columns: 1fr; gap: 2rem; width: min(92vw, 520px); padding: 3rem 0; }
  .auth-panel h1 { font-size: 3rem; }
  .table-grid, .metric-grid { grid-template-columns: 1fr; }
  .manual-payment-form { grid-template-columns: 1fr 100px; }
  .manual-payment-form .button { grid-column: 1 / -1; }
  .guest-header { min-height: 190px; padding: 2rem 4vw; align-items: flex-start; flex-direction: column; }
  .guest-header h1 { font-size: 2.6rem; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 100px 1fr; }
  .status-layout { grid-template-columns: 1fr; }
  .status-layout .bill-card { grid-column: auto; }
  .bill-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .status-item { grid-template-columns: auto minmax(0,1fr) auto; }
  .status-item > strong:last-child { grid-column: 2 / -1; }
  .kds-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .bill-metrics { grid-template-columns: 1fr; }
  .request-grid { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 1fr; }
  .product-card > img { height: 180px; }
  .cart-line { grid-template-columns: minmax(0,1fr) auto; }
  .cart-line > strong:last-child { grid-column: 1 / -1; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
[hidden] { display: none !important; }
.service-portions { margin: 1rem 0; }
.service-portions .status-item { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.service-portions small { display: block; margin-top: .25rem; }
.dish-review { padding: 1rem 0; border-bottom: 1px solid #e4ded6; }
.dish-review-form { display: grid; gap: .75rem; max-width: 38rem; }
.dish-review-form label { display: grid; gap: .35rem; }
.dish-review-form textarea { min-height: 5rem; }
.floor-summary { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-bottom:1rem; padding:1rem 1.3rem; border-radius:16px; background:#e6eee7; color:#274f3b; }
.floor-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:.8rem; margin-bottom:1rem; }
.floor-toolbar label { min-width:160px; }
.floor-toolbar #floorSync { margin-left:auto; font-size:.8rem; color:#656c65; }
.floor-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:1.3rem; align-items:start; }
.floor-scroll { overflow:auto; border:1px solid #d9d5cc; border-radius:18px; background:#faf8f3; }
.floor-canvas { position:relative; width:1000px; height:650px; background-image:radial-gradient(#cfcbbf 1px,transparent 1px); background-size:22px 22px; }
.floor-reference { position:absolute; top:10px; left:20px; color:#6a6e66; font-size:.65rem; letter-spacing:.15em; }
.map-table { position:absolute; width:168px; min-height:108px; border:2px solid #648474; border-radius:16px; background:#edf4ee; box-shadow:0 5px 12px #243c2712; }
.map-table.round { border-radius:48%; }
.map-table.occupied { border-color:#b77724; background:#fff2d8; }
.map-table.grouped { border-color:#547a99; background:#e7f1fa; }
.map-table.selected { outline:3px solid #8a3f2b; outline-offset:4px; }
.table-select { display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent; border:0; width:100%; min-height:105px; padding:12px 5px 22px; cursor:pointer; color:#223529; }
.table-select strong { font-size:1.4rem; }
.table-select small { color:#5e6862; }
.table-drag { position:absolute; bottom:-9px; left:calc(50% - 17px); width:34px; height:25px; border:1px solid #758176; border-radius:8px; background:white; cursor:grab; touch-action:none; }
.floor-detail { min-width:0; }
.floor-detail h2 { margin-top:0; }
.floor-detail h3 { margin-top:1.5rem; }
.floor-detail form { display:grid; gap:.65rem; }
.floor-detail label { display:grid; gap:.25rem; }
.floor-detail .join-option { display:flex; align-items:center; gap:.5rem; }
.join-option input { width:auto; }
.floor-detail .button { white-space:normal; }
.floor-actions { display:grid; gap:1rem; border-top:1px solid #ddd; margin-top:1.5rem; }
.floor-activity { margin-top:1rem; }
.floor-activity ul { padding-left:1.2rem; }
.floor-activity li { margin:.6rem 0; font-size:.85rem; }
.floor-activity small { display:block; color:#69736c; }
.floor-coordinates { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
#tableForm { display:grid; gap:.8rem; }
#tableForm label { display:grid; gap:.3rem; }
.seat-map { position:relative; height:270px; margin:1rem 0; }
.seat-table { position:absolute; left:20%; right:20%; top:27%; bottom:27%; border:2px solid #87998b; border-radius:12px; background:#f0f3ec; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.3rem; font-weight:bold; }
.seat-table small { font-size:.65rem; font-weight:normal; }
.seat-map.round .seat-table { border-radius:50%; }
.seat-person { position:absolute; transform:translate(-50%,-50%); width:35px; height:44px; border:1px solid #648474; border-radius:16px 16px 8px 8px; background:#e4efe5; color:#234d35; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; line-height:1; }
.seat-person span { font-size:11px; margin-bottom:3px; }
.seat-person.vacant { background:#fafaf7; border-style:dashed; color:#73776e; }
.seat-person:focus { outline:3px solid #8a3f2b; }
.seat-assignment { padding:1rem 0; border-bottom:1px solid #ddd; }
.seat-assignment small { color:#68716a; }
#seatDishes { background:#f3f0e9; border-radius:10px; padding:1rem; font-size:.85rem; }
#seatDishes h3 { margin:0 0 .5rem; }
.seat-map.many-seats { display:flex; height:auto; flex-wrap:wrap; gap:10px; padding:10px; }
.seat-map.many-seats .seat-table { position:static; width:100%; min-height:65px; }
.seat-map.many-seats .seat-person { position:static; transform:none; }
.metric-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
@media(max-width:1100px) { .floor-layout { grid-template-columns:1fr; } .floor-detail { max-width:650px; width:100%; } }
html:has(dialog[open]) .toast[popover] { top: 1rem; bottom: auto; }