:root {
  color-scheme: dark;
  --bg: #090908;
  --surface: #151410;
  --surface-2: #1d1a15;
  --surface-3: #252018;
  --line: #393229;
  --line-soft: #2b2720;
  --text: #f7f1e8;
  --muted: #aaa196;
  --orange: #e88b2d;
  --orange-deep: #9f5114;
  --gold: #f2c274;
  --green: #55b978;
  --yellow: #e9b94a;
  --red: #ed6560;
  --violet: #a986ef;
  --blue: #64a4e8;
  --shadow: 0 22px 70px rgba(0, 0, 0, .4);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(232,139,45,.17), transparent 30rem),
    radial-gradient(circle at 90% 20%, rgba(242,194,116,.07), transparent 26rem),
    var(--bg);
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { touch-action: manipulation; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .serif { font-family: Georgia, "Times New Roman", serif; }
h1 { font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.05; }
h3 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; font-weight: 900; }
.hidden { display: none !important; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.boot-screen h1 { font-size: clamp(2rem, 8vw, 4rem); }
.brand-mark { width: 72px; height: 72px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; font: 700 2.4rem Georgia,serif; color: var(--gold); box-shadow: 0 0 40px rgba(232,139,45,.25); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 30; min-height: 72px; display: flex; align-items: center; gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(9,9,8,.89); backdrop-filter: blur(18px);
}
.topbar .logo { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar .brand-mark { width: 42px; height: 42px; font-size: 1.35rem; flex: 0 0 auto; }
.topbar-title { font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { color: var(--muted); font-size: .78rem; }
.topbar-actions { margin-left: auto; display: flex; gap: 9px; }
.page { width: min(1480px, 100%); margin: 0 auto; padding: clamp(20px,4vw,48px) max(16px, env(safe-area-inset-right)) 120px; }
.hero { padding: clamp(32px,7vw,88px) 0 32px; max-width: 850px; }
.hero p { font-size: clamp(1rem,2vw,1.2rem); color: var(--muted); max-width: 650px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 32px 0 18px; }
.section-head h2 { margin-bottom: 0; }

.grid { display: grid; gap: 16px; }
.role-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.role-card, .card, .metric, .table-tile, .job-card, .product-card {
  background: linear-gradient(145deg, rgba(29,26,21,.96), rgba(17,16,13,.98));
  border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 16px 45px rgba(0,0,0,.19);
}
.role-card {
  min-height: 210px; border: 1px solid var(--line); padding: 22px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease,border-color .2s ease,background .2s ease;
}
.role-card:hover, .role-card:focus-visible { transform: translateY(-4px); border-color: var(--orange); background: linear-gradient(145deg,#2a2117,#17130e); outline: 0; }
.role-icon { font-size: 2rem; }
.role-card strong { display: block; font: 700 1.45rem Georgia,serif; }
.role-card span { color: var(--muted); font-size: .88rem; }
.card { padding: clamp(18px,3vw,30px); }
.card + .card { margin-top: 16px; }

.btn {
  min-height: 48px; padding: 0 17px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2);
  font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, filter .15s ease, border-color .15s ease; text-decoration: none;
}
.btn:hover { border-color: #68543c; }
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn-primary { color: #1b0e04; border-color: transparent; background: linear-gradient(135deg,var(--gold),var(--orange) 55%,#b55d18); box-shadow: 0 10px 30px rgba(232,139,45,.16); }
.btn-danger { background: #411b1a; border-color: #7b3430; color: #ffb4ae; }
.btn-success { background: #183b25; border-color: #2d6942; color: #a7e9ba; }
.btn-violet { background: #291d42; border-color: #4d3972; color: #cfb9ff; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.icon-btn { min-width: 48px; width: 48px; padding: 0; font-size: 1.15rem; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 800; font-size: .9rem; }
.input, select, textarea {
  width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px;
  background: #0d0c0a; color: var(--text); outline: 0;
}
.input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,139,45,.12); }
textarea { resize: vertical; min-height: 92px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }

.table-picker { grid-template-columns: repeat(10,minmax(58px,1fr)); }
.table-button {
  min-height: 68px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer;
  font-size: 1.35rem; font-weight: 900;
}
.table-button:hover, .table-button.selected { border-color: var(--orange); background: #33200f; color: var(--gold); }
.table-button:disabled { opacity: .35; cursor: not-allowed; }
.confirm-table { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: #241c13; border: 1px solid #4d3a24; }
.confirm-table input { width: 24px; height: 24px; accent-color: var(--orange); flex: 0 0 auto; }

.customer-layout { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 20px; align-items: start; }
.menu-toolbar { position: sticky; top: 72px; z-index: 20; padding: 12px 0; background: linear-gradient(var(--bg) 75%,transparent); }
.category-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 9px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.chip { min-height: 42px; white-space: nowrap; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.chip.active { background: var(--orange); border-color: var(--orange); color: #1a0d04; font-weight: 900; }
.product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.product-card { padding: 18px; display: flex; flex-direction: column; min-height: 230px; }
.product-card.unavailable { opacity: .52; }
.product-card h3 { font-size: 1.16rem; margin-bottom: 7px; }
.product-card p { color: var(--muted); font-size: .88rem; flex: 1; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.price { color: var(--gold); font: 700 1.35rem Georgia,serif; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: .7rem; font-weight: 900; background: #28221a; color: #c9bda9; }
.tag.bar { color: #b5d6ff; background: #18283c; }
.tag.shisha { color: #ffd3a3; background: #3a2515; }
.tag.alcohol { color: #e1c5ff; background: #2b1f39; }
.cart-panel { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow: auto; }
.cart-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line strong { display: block; }
.cart-line small { color: var(--muted); }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-3); cursor: pointer; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0; font-size: 1.15rem; }
.cart-total strong { color: var(--gold); font: 700 1.8rem Georgia,serif; }
.cart-mobile { display: none; position: fixed; z-index: 35; left: 16px; right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); box-shadow: var(--shadow); }

.status-list { display: grid; gap: 14px; }
.order-card { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--surface); }
.order-head { display: flex; justify-content: space-between; gap: 12px; }
.status-pill { display: inline-flex; min-height: 30px; align-items: center; border-radius: 999px; padding: 0 10px; font-size: .72rem; font-weight: 900; background: #302820; }
.status-pill.new { color: #bdd9ff; background: #1c2c41; }
.status-pill.progress { color: #ffe2a3; background: #40301a; }
.status-pill.ready { color: #baf2ca; background: #193923; }
.status-pill.problem { color: #ffb8b4; background: #421c1b; }
.station-progress { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.station-mini { padding: 11px; border: 1px solid var(--line-soft); border-radius: 13px; background: #11100d; }

.metrics { grid-template-columns: repeat(7,minmax(0,1fr)); }
.metric { padding: 16px; min-height: 112px; }
.metric strong { display: block; font: 700 2rem Georgia,serif; color: var(--gold); }
.metric span { color: var(--muted); font-size: .78rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.jobs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.job-card { position: relative; overflow: hidden; padding: 20px; border-width: 2px; }
.job-card.warning { border-color: var(--yellow); box-shadow: 0 0 25px rgba(233,185,74,.12); }
.job-card.critical { border-color: var(--red); box-shadow: 0 0 32px rgba(237,101,96,.18); }
.job-card.alarm { border-color: var(--red); background: linear-gradient(145deg,#3a1715,#18100d); animation: pulse 1.25s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 38px rgba(237,101,96,.3); } }
.job-table { font: 700 clamp(2.6rem,6vw,4.5rem) Georgia,serif; color: var(--gold); line-height: 1; }
.job-time { position: absolute; top: 20px; right: 20px; font-weight: 900; }
.job-items { list-style: none; padding: 0; margin: 18px 0; }
.job-items li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.job-note { color: #ffd29e; font-size: .84rem; }
.swipe-zone { min-height: 72px; display: grid; place-items: center; margin-top: 14px; border: 1px dashed #675036; border-radius: 15px; color: var(--muted); touch-action: pan-x; user-select: none; }
.undo-banner { border: 1px solid #326a43; background: #173722; padding: 12px; border-radius: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.request-list { display: grid; gap: 12px; }
.request-card { padding: 15px; border: 1px solid var(--line); background: #15130f; border-radius: 15px; }
.request-card.payment { border-color: var(--violet); background: #21182f; }
.request-card .table-no { color: var(--gold); font-size: 1.5rem; font-weight: 900; }
.table-grid { grid-template-columns: repeat(10,minmax(80px,1fr)); }
.table-tile { min-height: 116px; padding: 13px; cursor: pointer; border-width: 2px; text-align: left; }
.table-tile.free { border-color: #383838; color: #888; }
.table-tile.occupied { border-color: var(--blue); }
.table-tile.open { border-color: var(--orange); }
.table-tile.ready { border-color: var(--green); }
.table-tile.problem { border-color: var(--red); }
.table-tile.payment { border-color: var(--violet); background: linear-gradient(145deg,#2d2043,#17131d); }
.table-tile strong { display: block; font: 700 2rem Georgia,serif; }
.table-tile small { color: var(--muted); }

.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 18px; }
.tabs button { min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 0 14px; white-space: nowrap; cursor: pointer; }
.tabs button.active { color: #1a0e05; background: var(--orange); border-color: var(--orange); font-weight: 900; }
.data-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 18px; }
.data-table { border-collapse: collapse; width: 100%; min-width: 760px; background: rgba(18,17,14,.86); }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.data-table th { color: var(--gold); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }
.data-table tr:last-child td { border-bottom: 0; }
.inline-input { min-height: 40px; width: 100px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.78); backdrop-filter: blur(9px); display: grid; place-items: center; padding: 16px; }
.modal { width: min(720px,100%); max-height: calc(100vh - 32px); overflow: auto; background: #171511; border: 1px solid var(--line); border-radius: 26px; padding: clamp(20px,4vw,34px); box-shadow: var(--shadow); }
.modal.wide { width: min(1040px,100%); }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 20px; }
.modal-head h2 { margin: 0; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }
.empty { padding: 36px 18px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.notice { padding: 14px 16px; border: 1px solid #59452c; border-radius: 14px; background: #241b11; color: #e8d3b7; }
.notice.error { border-color: #773431; background: #351716; color: #ffc1bd; }
.notice.success { border-color: #306942; background: #173622; color: #b8efc8; }
.loading-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0,0,0,.68); }
.loading-card { background: #171511; border: 1px solid var(--line); border-radius: 20px; padding: 24px 30px; display: grid; justify-items: center; gap: 14px; box-shadow: var(--shadow); }
.toast-region { position: fixed; z-index: 150; top: 88px; right: 18px; display: grid; gap: 10px; width: min(390px,calc(100vw - 36px)); pointer-events: none; }
.toast { padding: 14px 16px; border: 1px solid var(--line); background: #1d1a15; border-radius: 14px; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--green); }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } }
.network-banner { position: fixed; z-index: 80; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(520px,calc(100vw - 32px)); padding: 12px 16px; text-align: center; border-radius: 14px; background: #481b19; border: 1px solid #8a3d38; }

@media (max-width: 1180px) {
  .role-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-grid, .jobs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .table-grid, .table-picker { grid-template-columns: repeat(6,minmax(64px,1fr)); }
}
@media (max-width: 860px) {
  .customer-layout, .dashboard-grid { grid-template-columns: 1fr; }
  .cart-panel { display: none; }
  .cart-panel.mobile-open { display: block; position: fixed; z-index: 70; inset: 72px 0 0; max-height: none; overflow: auto; border-radius: 0; padding-bottom: 110px; }
  .cart-mobile { display: flex; }
  .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .table-grid { grid-template-columns: repeat(4,minmax(68px,1fr)); }
}
@media (max-width: 620px) {
  .page { padding-top: 18px; }
  .topbar { min-height: 64px; }
  .topbar-sub { display: none; }
  .role-grid, .product-grid, .jobs { grid-template-columns: 1fr; }
  .role-card { min-height: 150px; }
  .table-picker { grid-template-columns: repeat(5,minmax(48px,1fr)); }
  .table-button { min-height: 58px; border-radius: 14px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .table-grid { grid-template-columns: repeat(3,minmax(70px,1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .station-progress { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { border-radius: 24px 24px 0 0; max-height: 92vh; }
}