* { box-sizing: border-box; }
:root {
  --bg: #f3f5f8;
  --panel: rgba(255,255,255,.86);
  --panel-strong: #ffffff;
  --panel-dark: #171a1f;
  --text: #0f172a;
  --muted: #6b7280;
  --line: rgba(148,163,184,.2);
  --red: #ef4444;
  --red-dark: #dc2626;
  --green: #16a34a;
  --yellow: #f59e0b;
  --shadow: 0 20px 40px rgba(15,23,42,.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}
html { overflow-x: hidden; overscroll-behavior: none; }
html, body { margin:0; min-height:100%; font-family: Inter, Arial, sans-serif; background: radial-gradient(circle at top left, #fff 0, #f8fafc 35%, #eef2f7 100%); color: var(--text); }
body.login-page { display:grid; place-items:center; padding:24px; }
.app { display:flex; min-height:100vh; align-items:stretch; }
.sidebar { width:270px; background: linear-gradient(180deg,#171a1f 0%,#22262d 100%); color:#fff; padding:22px 0; box-shadow: 12px 0 30px rgba(0,0,0,.16); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.brand { padding: 0 24px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-title { font-size:30px; font-weight:900; letter-spacing:.02em; }
.brand-title span { color: var(--red); }
.brand-subtitle { color: rgba(255,255,255,.65); margin-top:8px; font-size:13px; }
.menu { padding: 14px 10px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; }
.menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; margin:0 10px; border-radius:16px; color: rgba(255,255,255,.76); text-decoration:none; font-weight:600; transition:.2s ease; }
.menu-item:hover { background: rgba(255,255,255,.07); color:#fff; transform: translateX(2px); }
.menu-item.active { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.04)); color:#fff; box-shadow: inset 0 0 0 1px rgba(239,68,68,.18); }
.sidebar-footer { margin-top:auto; padding:0 20px; }
.user-card { margin: 18px 10px 0; border-radius:20px; padding:16px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.content { flex:1; padding:26px; overflow:auto; min-height:100vh; }
.content > * { animation: fadeInPage .18s ease; }
@keyframes fadeInPage { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.topbar h1 { margin:0; font-size:34px; line-height:1.05; }
.topbar p { margin:8px 0 0; color: var(--muted); font-size:14px; max-width:720px; }
.top-actions, .actions-row { display:flex; flex-wrap:wrap; gap:12px; }
.btn { border:none; background:#fff; color:var(--text); border-radius:18px; padding:13px 18px; font-weight:700; cursor:pointer; box-shadow: var(--shadow); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--red), var(--red-dark)); color:white; box-shadow: 0 20px 30px rgba(239,68,68,.22); }
.btn-ghost { background:transparent; border:1px solid var(--line); box-shadow:none; }
.hero { background: linear-gradient(135deg,#fff 0,#fff 45%,#fff2f2 100%); border-radius: 34px; padding: 26px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.6); margin-bottom:22px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-80px; top:-80px; width:220px; height:220px; background: radial-gradient(circle, rgba(239,68,68,.18), transparent 65%); }
.hero-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap:18px; align-items:stretch; }
.hero-card, .card { background: var(--panel); backdrop-filter: blur(10px); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding:22px; border:1px solid rgba(255,255,255,.75); }
.hero-title { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px; margin-bottom:10px; }
.hero-value { font-size: clamp(34px,4vw,56px); font-weight:900; margin:0; }
.hero-sub { color: var(--muted); margin-top:8px; }
.mini-kpis, .stats-row, .grid-3, .grid-2 { display:grid; gap:16px; }
.mini-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:18px; }
.stats-row { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom:18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: 1.4fr 1fr; }
.kpi { background: #fff; border-radius:22px; padding:18px; border:1px solid var(--line); box-shadow: var(--shadow); }
.kpi .label { color:var(--muted); font-size:13px; margin-bottom:10px; }
.kpi .value { font-size:34px; font-weight:900; }
.kpi .sub { color:var(--muted); font-size:13px; margin-top:10px; }
.quick-actions { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.quick-card { background: rgba(255,255,255,.8); border-radius:22px; padding:18px; border:1px solid var(--line); font-weight:700; text-align:center; box-shadow: var(--shadow); }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:20px 0 16px; flex-wrap:wrap; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn { border:none; background:#fff; border-radius:16px; padding:11px 15px; font-weight:700; cursor:pointer; box-shadow: var(--shadow); }
.filter-btn.active { background:#111827; color:#fff; }
.search, .input, select, textarea { width:100%; background:#fff; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:14px 16px; font:inherit; outline:none; box-shadow: 0 8px 24px rgba(15,23,42,.04); }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:16px; }
.pc-card { background: rgba(255,255,255,.92); border-radius:26px; padding:18px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.7); }
.pc-head, .row-between, .card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pc-name { font-size:22px; font-weight:800; }
.pc-sub, .muted, .table-meta { color:var(--muted); font-size:13px; }
.badge, .status-badge, .role-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px; }
.badge.free, .status-free, .status-completed, .role-admin { background:#e8fff0; color:#18794e; }
.badge.busy, .status-active, .status-confirmed, .role-operator { background:#fff1f1; color:#c62828; }
.status-cancelled, .role-client { background:#fff7df; color:#a16207; }
.session-box { margin:14px 0; padding:14px; border-radius:18px; background:#f8fafc; border:1px solid var(--line); }
.money { font-size:24px; font-weight:900; margin-top:8px; }
.timer { margin-top:10px; font-size:26px; font-weight:900; letter-spacing:.04em; }
.pc-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.pc-actions button, .chip-btn { border:none; border-radius:14px; padding:10px 12px; background:#111827; color:#fff; cursor:pointer; font-weight:700; }
.pc-actions button:nth-child(1), .chip-btn.primary { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.table-card { background: rgba(255,255,255,.88); border-radius:28px; box-shadow: var(--shadow); overflow:hidden; border:1px solid rgba(255,255,255,.74); }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:16px 18px; text-align:left; border-bottom:1px solid rgba(148,163,184,.12); }
.table th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.table tr:last-child td { border-bottom:none; }
.split { display:grid; grid-template-columns: 1.3fr 1fr; gap:18px; }
.modal-backdrop { position:fixed; inset:0; background: rgba(15,23,42,.44); display:none; align-items:center; justify-content:center; padding:20px; z-index:30; }
.modal { width:min(600px, 100%); background:#fff; border-radius:28px; padding:24px; box-shadow: 0 30px 60px rgba(15,23,42,.2); }
.modal h3 { margin:0 0 16px; font-size:24px; }
.modal-grid { display:grid; gap:12px; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; flex-wrap:wrap; }
.chart-bars { display:flex; gap:10px; align-items:flex-end; min-height:220px; padding-top:16px; }
.bar-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bar { width:100%; border-radius:18px 18px 8px 8px; background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(239,68,68,.3)); min-height:16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.bar-label { font-size:12px; color:var(--muted); }
.rings { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.ring { aspect-ratio:1/1; border-radius:50%; display:grid; place-items:center; background: conic-gradient(var(--red) 0 var(--p), rgba(15,23,42,.08) var(--p) 100%); }
.ring-inner { width:74%; height:74%; background:#fff; border-radius:50%; display:grid; place-items:center; text-align:center; padding:10px; font-weight:800; }
.login-shell { width:min(1040px,100%); display:grid; grid-template-columns: 1.2fr .9fr; gap:22px; }
.login-showcase { background: linear-gradient(135deg,#171a1f,#2a303a); color:#fff; border-radius:34px; padding:34px; position:relative; overflow:hidden; box-shadow: 0 30px 60px rgba(15,23,42,.28); }
.login-showcase::after { content:''; position:absolute; inset:auto -60px -60px auto; width:220px; height:220px; background: radial-gradient(circle, rgba(239,68,68,.35), transparent 60%); }
.login-panel { background: rgba(255,255,255,.9); border-radius:34px; padding:34px; box-shadow: var(--shadow); }
.login-demo { display:grid; gap:12px; margin-top:18px; }
.login-demo .demo-item { padding:14px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-header h2 { margin:0; font-size:24px; }
.empty { padding:26px; text-align:center; color:var(--muted); }
.toast { position:fixed; right:20px; bottom:20px; background:#111827; color:#fff; padding:14px 16px; border-radius:16px; box-shadow: 0 20px 30px rgba(0,0,0,.2); z-index:40; display:none; }
@media (max-width: 1100px) { .quick-actions{grid-template-columns: repeat(3,1fr);} .stats-row{grid-template-columns: repeat(2,1fr);} .split,.hero-grid,.grid-2,.login-shell{grid-template-columns:1fr;} .sidebar{width:230px;} }
@media (max-width: 760px) { .sidebar{display:none;} .content{padding:18px;} .quick-actions,.stats-row,.grid-3,.rings{grid-template-columns:1fr;} .hero{padding:20px;} .topbar h1{font-size:28px;} }


/* Client LANGAME-style desktop panel */
.client-body {
  background: linear-gradient(180deg, #f2f2f3 0%, #e9ebef 100%);
}
.client-shell {
  display: grid;
  grid-template-columns: 116px 1.6fr 280px;
  gap: 24px;
  min-height: 100vh;
  padding: 22px;
}
.client-sidebar {
  background: linear-gradient(180deg,#f4f4f5 0%,#ececec 100%);
  border-radius: 28px;
  box-shadow: 0 20px 35px rgba(15,23,42,.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
}
.client-sidebar-top {
  padding: 16px 10px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.client-back-btn {
  display:flex; align-items:center; gap:8px; justify-content:center;
  width:100%; padding:10px 8px; border:none; border-radius:16px;
  background: linear-gradient(135deg,#7c7c7d,#5a5a5e); color:#fff; font-weight:800; cursor:pointer;
  box-shadow: 0 16px 24px rgba(0,0,0,.12);
}
.client-logo {
  display:grid; place-items:center; gap:4px; margin-top:14px; font-weight:900; color:#1f2937; font-size:14px;
}
.client-logo span { color:#dc2626; }
.client-nav { padding: 10px 0; display:flex; flex-direction:column; gap:2px; }
.client-nav-item {
  display:grid; justify-items:center; gap:10px; text-decoration:none; color:#4b5563; padding:18px 8px; font-weight:700; font-size:13px;
  border-left:3px solid transparent; transition:.2s ease;
}
.client-nav-item:hover { background: rgba(15,23,42,.04); color:#111827; }
.client-nav-item.active { background: rgba(255,255,255,.7); border-left-color:#ef4444; color:#111827; }
.client-nav-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#fff; box-shadow: 0 10px 18px rgba(15,23,42,.06); font-size:18px; }
.client-sidebar-bottom { margin-top:auto; padding:14px 12px; }
.client-date-chip { background: linear-gradient(135deg,#838386,#6d6d72); color:#fff; text-align:center; border-radius:18px; padding:14px 10px; font-size:13px; font-weight:800; }
.client-main {
  background: rgba(255,255,255,.56); border-radius: 34px; padding: 26px; box-shadow: 0 24px 40px rgba(15,23,42,.06); border:1px solid rgba(255,255,255,.75);
}
.client-topline { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; }
.client-user { display:flex; align-items:center; gap:14px; }
.client-avatar { width:52px; height:52px; border-radius:50%; background: linear-gradient(135deg,#475569,#111827); color:#fff; display:grid; place-items:center; font-weight:900; font-size:18px; box-shadow: 0 16px 26px rgba(15,23,42,.14); }
.client-user-name { font-size:22px; font-weight:800; }
.client-user-sub { color:#6b7280; font-size:14px; margin-top:6px; }
.client-status-card { min-width:340px; background:#fff; border-radius:22px; padding:18px 20px; box-shadow: var(--shadow); border:1px solid rgba(148,163,184,.14); }
.client-status-grid { display:grid; grid-template-columns:1fr auto; gap:10px 18px; font-size:14px; }
.client-status-grid .label { color:#6b7280; }
.client-status-grid .value { font-weight:800; }
.client-dashboard-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:18px; }
.client-panel { background:#fff; border-radius:24px; padding:22px; box-shadow: var(--shadow); border:1px solid rgba(148,163,184,.12); }
.client-panel.dark { background: linear-gradient(180deg,#404041,#2b2b2f); color:#fff; }
.client-panel-title { font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-weight:800; }
.client-panel.dark .client-panel-title { color: rgba(255,255,255,.72); }
.client-two-col { display:grid; grid-template-columns: 1fr auto; gap:16px 20px; align-items:start; }
.client-stat-list { display:grid; gap:14px; }
.client-stat-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(148,163,184,.12); }
.client-panel.dark .client-stat-row { border-bottom:1px solid rgba(255,255,255,.08); }
.client-stat-row:last-child { border-bottom:none; padding-bottom:0; }
.client-stat-key { color:#6b7280; }
.client-panel.dark .client-stat-key { color: rgba(255,255,255,.74); }
.client-stat-value { font-weight:800; }
.client-balance-amount { font-size:48px; font-weight:900; line-height:1; }
.client-bonus-chip { display:inline-flex; align-items:center; gap:8px; background:#f3f4f6; color:#111827; border-radius:14px; padding:10px 14px; font-size:13px; font-weight:800; margin-left:10px; vertical-align:middle; }
.client-recharge-btn { margin-top:18px; width:100%; border:none; background: linear-gradient(180deg,#ff1717,#df0000); color:#fff; border-radius:999px; padding:16px 18px; font-size:16px; font-weight:900; cursor:pointer; box-shadow: 0 18px 28px rgba(220,38,38,.24); }
.client-recharge-btn:hover { transform: translateY(-1px); }
.client-banner-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.client-banner { min-height:220px; border-radius:24px; padding:22px; position:relative; overflow:hidden; color:#fff; box-shadow: var(--shadow); }
.client-banner.yellow { background: linear-gradient(135deg,#ecef00 0%, #fde900 42%, #0c0c4c 100%); color:#0f172a; }
.client-banner.blue { background: linear-gradient(135deg,#111827 0%, #1e3a8a 60%, #94a3b8 120%); }
.client-banner .tag { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.18); font-weight:800; font-size:12px; backdrop-filter: blur(12px); }
.client-banner.yellow .tag { background: rgba(255,255,255,.44); }
.client-banner h3 { margin:18px 0 12px; font-size:38px; line-height:.98; }
.client-banner p { max-width:260px; margin:0; font-weight:600; }
.client-banner .banner-corner { position:absolute; right:18px; top:18px; display:flex; gap:8px; }
.client-banner .banner-dot { width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.75); display:grid; place-items:center; color:#111827; font-weight:900; }
.client-banner-art { position:absolute; right:-10px; bottom:-8px; width:160px; height:160px; border-radius:32px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), rgba(255,255,255,0) 60%); transform: rotate(-18deg); }
.client-banner.blue .client-banner-art { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%); }
.client-actions { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px; margin-top:22px; }
.client-action { border-radius:22px; padding:22px 16px; background:#eef2ff; display:grid; justify-items:center; gap:10px; text-align:center; font-weight:800; border:1px solid rgba(148,163,184,.12); box-shadow: var(--shadow); cursor:pointer; }
.client-action:nth-child(1){ background:#edf5ff; }
.client-action:nth-child(2){ background:#f2eaff; }
.client-action:nth-child(3){ background:#fff3dd; }
.client-action:nth-child(4){ background:#e7fff0; }
.client-action:nth-child(5){ background:#ffe9e9; }
.client-action-icon { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; font-size:22px; background: rgba(255,255,255,.9); box-shadow: 0 10px 18px rgba(15,23,42,.08); }
.client-right { display:grid; gap:18px; }
.client-tariffs-list { display:grid; gap:14px; }
.client-tariff-row { display:grid; grid-template-columns:1fr auto; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.client-tariff-row:last-child { border-bottom:none; }
.client-tariff-name { color: rgba(255,255,255,.76); font-size:14px; }
.client-tariff-price { font-size:24px; font-weight:900; }
.client-mini-note { color:#94a3b8; font-size:13px; margin-top:10px; }
.client-history-list, .client-settings-list, .client-support-list { display:grid; gap:14px; }
.client-list-item { background:#fff; border-radius:20px; padding:18px; box-shadow: var(--shadow); border:1px solid rgba(148,163,184,.12); }
.client-list-item .title { font-weight:800; }
.client-list-item .sub { color:#6b7280; font-size:14px; margin-top:6px; }
.client-list-item .meta { margin-top:10px; display:flex; justify-content:space-between; gap:10px; color:#111827; font-weight:700; }
.client-section-title { font-size:28px; font-weight:900; margin:0 0 8px; }
.client-section-sub { color:#6b7280; margin:0 0 20px; }
.client-empty-box { padding:30px; border-radius:24px; background:#fff; border:1px dashed rgba(148,163,184,.34); text-align:center; color:#6b7280; }
@media (max-width: 1280px) {
  .client-shell { grid-template-columns: 96px 1fr; }
  .client-right { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .client-shell { grid-template-columns: 1fr; }
  .client-sidebar { flex-direction:row; height:auto; }
  .client-nav { flex-direction:row; overflow:auto; }
  .client-dashboard-grid, .client-banner-grid, .client-actions, .client-right, .client-topline { grid-template-columns:1fr; display:grid; }
  .client-status-card { min-width:0; }
}

.client-mini-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.client-mini-kpi{background:#f8fafc;border:1px solid rgba(148,163,184,.16);border-radius:18px;padding:14px 16px}.client-mini-kpi span{display:block;color:#64748b;font-size:12px;margin-bottom:6px}.client-mini-kpi b{font-size:15px}.client-action.danger{background:linear-gradient(180deg,#fff3f3,#ffe2e2);color:#991b1b}.client-booking-layout,.client-support-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:18px;align-items:start}.booking-form-panel{position:sticky;top:20px}.busy-card{opacity:.82}.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.game-card{background:#fff;border:1px solid rgba(148,163,184,.12);box-shadow:var(--shadow);border-radius:24px;padding:18px;display:grid;gap:14px}.game-cover{height:150px;border-radius:20px;background:linear-gradient(135deg,#111827,#334155);color:#fff;display:grid;place-items:center;font-size:42px;font-weight:900;letter-spacing:.06em}.game-title{font-size:20px;font-weight:800}.game-sub{font-size:14px;color:#64748b}.stack-right{display:grid;justify-items:end;gap:8px}.client-history-list.compact{max-height:520px;overflow:auto}.status-open{background:#ecfdf5;color:#047857}.status-closed{background:#f1f5f9;color:#475569}.status-confirmed{background:#eff6ff;color:#1d4ed8}.status-active{background:#fff7ed;color:#c2410c}.status-completed{background:#eef2ff;color:#4338ca}.status-cancelled{background:#fef2f2;color:#dc2626}@media (max-width: 1180px){.client-booking-layout,.client-support-layout,.games-grid{grid-template-columns:1fr}.client-dashboard-grid{grid-template-columns:1fr}.client-shell{grid-template-columns:112px 1fr}.client-main,.client-right{grid-column:span 2}}


.client-action.start{background:linear-gradient(180deg,#e9fff3,#d7ffe8);color:#166534}.client-tariff-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:inherit}.client-tariff-row.disabled{opacity:.65;cursor:not-allowed}.client-modal.hidden{display:none}.client-modal{position:fixed;inset:0;z-index:60}.client-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(6px)}.client-modal-card{position:relative;max-width:560px;margin:10vh auto 0;background:#fff;border-radius:28px;box-shadow:0 30px 90px rgba(15,23,42,.25);padding:24px}.client-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.client-modal-head h3{margin:0;font-size:28px}.client-modal-close{width:40px;height:40px;border:none;border-radius:14px;background:#eef2ff;cursor:pointer}.client-modal-list{display:grid;gap:12px}.client-modal-tariff{display:flex;align-items:center;justify-content:space-between;border:none;border-radius:20px;padding:16px 18px;background:linear-gradient(135deg,#111827,#1f2937);color:#fff;font:inherit;font-weight:800;cursor:pointer}.client-modal-tariff:hover{transform:translateY(-1px)}

/* ===== Lumina-inspired theme refresh ===== */
:root {
  --bg: #050816;
  --panel: rgba(10, 18, 45, 0.78);
  --panel-strong: rgba(12, 25, 64, 0.96);
  --panel-dark: #050816;
  --text: #eaf4ff;
  --muted: #8ea4c8;
  --line: rgba(120, 170, 255, 0.16);
  --red: #6eb6ff;
  --red-dark: #3e8dff;
  --green: #84d9ff;
  --yellow: #a7d7ff;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(130, 180, 255, 0.06) inset;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}
html, body {
  background:
    radial-gradient(circle at 50% -8%, rgba(130,190,255,.30), transparent 34%),
    radial-gradient(circle at 50% 8%, rgba(72,130,255,.22), transparent 28%),
    linear-gradient(180deg, #071125 0%, #050816 42%, #07142d 100%);
  color: var(--text);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(139, 194, 255, 0.14) 0.75px, transparent 0.75px),
    radial-gradient(circle at center, rgba(130,190,255,.08), transparent 58%);
  background-size: 18px 18px, auto;
  background-position: center, center;
  opacity: .34;
}
body.login-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(143, 208, 255, 0.28), transparent 35%),
    linear-gradient(180deg, #071125 0%, #050816 100%);
}
.sidebar {
  background: linear-gradient(180deg, rgba(6,12,31,.92), rgba(7,15,38,.88));
  border-right: 1px solid rgba(120,170,255,.12);
  box-shadow: 16px 0 48px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.brand {
  border-bottom: 1px solid rgba(120,170,255,.10);
}
.brand-title span { color: #8fd0ff; text-shadow: 0 0 18px rgba(143,208,255,.45); }
.brand-subtitle, .menu-item, .muted, .table-meta, .pc-sub, .topbar p, .hero-sub, .client-section-sub, .client-user-sub, .client-stat-key, .client-mini-note, .client-panel-title {
  color: var(--muted) !important;
}
.menu-item {
  background: transparent;
  border: 1px solid transparent;
}
.menu-item:hover {
  background: rgba(120,170,255,.08);
  box-shadow: inset 0 0 0 1px rgba(120,170,255,.08);
  transform: translateX(0);
}
.menu-item.active {
  background: linear-gradient(90deg, rgba(74,125,255,.22), rgba(143,208,255,.08));
  box-shadow: inset 0 0 0 1px rgba(120,170,255,.14), 0 0 28px rgba(67,114,255,.14);
}
.user-card, .hero-card, .card, .pc-card, .table-card, .kpi, .modal, .login-panel, .client-main, .client-panel, .client-list-item, .client-empty-box, .client-status-card {
  background: linear-gradient(180deg, rgba(11,22,53,.84), rgba(8,16,38,.88)) !important;
  border: 1px solid rgba(120,170,255,.14) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(120,170,255,.04);
  backdrop-filter: blur(16px);
}
.client-panel.dark {
  background: linear-gradient(180deg, rgba(8,16,36,.94), rgba(5,10,24,.96)) !important;
}
.hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 214, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(8,18,44,.90), rgba(5,10,22,.94));
  border: 1px solid rgba(120,170,255,.16);
  box-shadow: 0 28px 64px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero::after {
  background: radial-gradient(circle, rgba(110,182,255,.28), transparent 65%);
  opacity: .9;
}
.topbar h1, .page-header h2, .hero-value, .pc-name, .client-user-name, .client-section-title, .client-balance-amount, .client-banner h3, .client-tariff-price, .client-modal-head h3 {
  color: #f2f8ff;
  text-shadow: 0 0 24px rgba(118, 190, 255, .08);
}
.hero-title {
  color: #9ad0ff;
}
.btn, .filter-btn, .pc-actions button, .chip-btn {
  background: linear-gradient(180deg, rgba(14,29,70,.96), rgba(8,17,41,.96));
  color: #eff6ff;
  border: 1px solid rgba(120,170,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:hover, .filter-btn:hover, .pc-actions button:hover, .chip-btn:hover {
  box-shadow: 0 14px 30px rgba(0,0,0,.32), 0 0 24px rgba(80,142,255,.12);
}
.btn-primary, .pc-actions button:nth-child(1), .chip-btn.primary, .client-recharge-btn, .login-submit-btn {
  background: linear-gradient(180deg, #9fd3ff, #6eb6ff 58%, #3b82f6) !important;
  color: #051122 !important;
  border: 1px solid rgba(191, 228, 255, 0.85) !important;
  box-shadow: 0 20px 35px rgba(50, 120, 255, .22), 0 0 38px rgba(110,182,255,.20);
}
.btn-ghost {
  background: rgba(9,16,38,.45);
  color: #cfe5ff;
}
.filter-btn.active {
  background: linear-gradient(180deg, #9fd3ff, #63b0ff) !important;
  color: #071125 !important;
}
.search, .input, select, textarea {
  background: rgba(7,14,34,.72);
  color: #eff6ff;
  border: 1px solid rgba(120,170,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.18);
}
.search::placeholder, .input::placeholder, textarea::placeholder { color: #7890b6; }
.table th, .table td {
  border-bottom: 1px solid rgba(120,170,255,.08);
}
.table th { color: #8fb7e6; }
.table tr:hover td {
  background: rgba(120,170,255,.035);
}
.quick-card, .session-box, .client-mini-kpi, .client-bonus-chip, .client-action, .client-nav-icon, .client-modal-close, .client-date-chip {
  background: linear-gradient(180deg, rgba(13,25,59,.82), rgba(8,15,38,.90)) !important;
  color: #edf6ff;
  border: 1px solid rgba(120,170,255,.13);
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.quick-card, .client-action-title, .client-action, .client-logo { color: #edf6ff !important; }
.client-action.start, .action-success {
  background: linear-gradient(180deg, rgba(90, 167, 255, .24), rgba(75, 129, 255, .18)) !important;
  color: #dff2ff !important;
}
.action-danger, .client-action.danger {
  background: linear-gradient(180deg, rgba(255, 95, 140, .16), rgba(162, 59, 132, .12)) !important;
  color: #ffd6ec !important;
}
.client-sidebar {
  background: linear-gradient(180deg, rgba(8,14,35,.92), rgba(5,10,24,.94));
  border: 1px solid rgba(120,170,255,.10);
}
.client-back-btn {
  background: linear-gradient(180deg, rgba(18,34,82,.94), rgba(9,17,42,.96));
  border: 1px solid rgba(120,170,255,.16);
}
.client-nav-item { color: #8ea4c8; }
.client-nav-item.active {
  background: rgba(120,170,255,.08);
  border-left-color: #8fd0ff;
  color: #eff6ff;
}
.client-main {
  background:
    radial-gradient(circle at 50% 0%, rgba(130,190,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(8,16,38,.64), rgba(6,12,28,.72)) !important;
}
.client-status-card, .client-list-item, .client-empty-box, .client-panel {
  background: linear-gradient(180deg, rgba(9,18,42,.82), rgba(7,13,31,.9)) !important;
}
.client-banner.yellow {
  background: linear-gradient(135deg, #0d1838 0%, #193a73 50%, #8fd0ff 140%) !important;
  color: #eef7ff;
}
.client-banner.blue {
  background: linear-gradient(135deg, #071125 0%, #11214c 50%, #3f75ff 130%) !important;
}
.client-banner .tag {
  background: rgba(255,255,255,.10);
  color: #edf6ff;
  border: 1px solid rgba(255,255,255,.08);
}
.client-banner .banner-dot {
  background: rgba(255,255,255,.16);
  color: #e9f4ff;
}
.client-panel.dark .client-tariff-row,
.client-modal-tariff {
  background: linear-gradient(135deg, rgba(13,25,62,.98), rgba(6,14,36,.98));
  border: 1px solid rgba(120,170,255,.16);
}
.client-tariff-name { color: #b8cbea; }
.client-tariff-price, .money, .kpi .value, .client-balance-amount { color: #f5fbff; }
.badge.free, .status-free, .status-completed, .role-admin {
  background: rgba(97, 212, 255, 0.10);
  color: #a7ebff;
}
.badge.busy, .status-active, .status-confirmed, .role-operator {
  background: rgba(110, 182, 255, 0.16);
  color: #cfeaff;
}
.status-cancelled, .role-client {
  background: rgba(167, 211, 255, 0.14);
  color: #d8edff;
}
.ring {
  background: conic-gradient(#8fd0ff 0 var(--p), rgba(120,170,255,.08) var(--p) 100%);
}
.ring-inner {
  background: rgba(7,14,33,.96);
  color: #eff6ff;
}
.bar {
  background: linear-gradient(180deg, rgba(154,217,255,.95), rgba(62,141,255,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 22px rgba(62,141,255,.18);
}
.login-shell {
  max-width: 1180px;
}
.login-showcase,
.login-brand-card {
  background:
    radial-gradient(circle at 50% 8%, rgba(130,190,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(8,16,38,.92), rgba(4,9,21,.96)) !important;
  border: 1px solid rgba(120,170,255,.12);
}
.login-showcase::after, .login-brand-card::after {
  background: radial-gradient(circle, rgba(142,214,255,.28), transparent 58%);
}
.login-panel, .login-form-card {
  background: linear-gradient(180deg, rgba(7,14,34,.82), rgba(9,17,39,.92)) !important;
}
.login-demo .demo-item, .demo-account-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(120,170,255,.08);
  color: #eff6ff;
}
.login-form input, .login-form-card input { color: #eff6ff; }
.toast {
  background: linear-gradient(180deg, rgba(9,18,42,.94), rgba(6,13,31,.98));
  border: 1px solid rgba(120,170,255,.16);
  color: #eff6ff;
}
.modal-backdrop, .client-modal-backdrop {
  background: rgba(2, 6, 18, 0.64);
  backdrop-filter: blur(10px);
}
.modal, .client-modal-card {
  background: linear-gradient(180deg, rgba(9,18,42,.96), rgba(6,12,29,.98)) !important;
  color: #eff6ff;
}
.client-modal-close { color: #eff6ff; }
.page-header, .card-head, .row-between, .pc-head, .client-topline { position: relative; z-index: 1; }
@media (max-width: 760px) {
  body::before { opacity: .18; }
}

/* ===== Client dark refresh ===== */
body.client-body {
  background:
    radial-gradient(circle at 50% -10%, rgba(130,190,255,.24), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(76,132,255,.18), transparent 22%),
    linear-gradient(180deg, #061022 0%, #040814 46%, #07142d 100%) !important;
}
body.client-body::before {
  opacity: .28;
}
.client-shell {
  background: transparent !important;
}
.client-sidebar {
  background: linear-gradient(180deg, rgba(9,18,42,.92), rgba(7,14,34,.96)) !important;
  border-right: 1px solid rgba(120,170,255,.12);
  box-shadow: 14px 0 38px rgba(0,0,0,.28);
}
.client-back-btn {
  background: linear-gradient(180deg, rgba(18,34,78,.96), rgba(10,20,46,.96)) !important;
  border: 1px solid rgba(120,170,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.26), 0 0 24px rgba(78,140,255,.12);
}
.client-logo {
  color: #f2f8ff;
}
.client-logo span {
  color: #8fd0ff;
  text-shadow: 0 0 16px rgba(143,208,255,.35);
}
.client-nav-item {
  color: #c9dbf4;
}
.client-nav-item:hover {
  background: rgba(120,170,255,.08) !important;
}
.client-nav-item.active {
  background: linear-gradient(90deg, rgba(74,125,255,.20), rgba(143,208,255,.06)) !important;
  border-left-color: #8fd0ff !important;
  color: #f2f8ff !important;
}
.client-nav-icon,
.client-action-icon,
.client-banner .banner-dot,
.client-modal-close {
  background: linear-gradient(180deg, rgba(18,33,75,.94), rgba(10,18,42,.96)) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(120,170,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
.client-date-chip {
  background: linear-gradient(180deg, rgba(16,30,70,.98), rgba(8,17,41,.98)) !important;
  border: 1px solid rgba(120,170,255,.16);
  color: #eff6ff;
}
.client-main,
.client-right,
.client-panel,
.client-status-card,
.client-list-item,
.client-empty-box {
  background: linear-gradient(180deg, rgba(11,22,53,.82), rgba(7,14,34,.90)) !important;
}
.client-mini-kpi {
  background: rgba(14, 26, 61, .72) !important;
  border-color: rgba(120,170,255,.12) !important;
}
.client-bonus-chip {
  background: rgba(120,170,255,.08) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(120,170,255,.12);
}
.client-recharge-btn {
  background: linear-gradient(180deg, #6eb6ff, #3e8dff) !important;
  color: #061022 !important;
  box-shadow: 0 20px 30px rgba(62,141,255,.24), 0 0 34px rgba(110,182,255,.16);
}
.client-banner.yellow {
  background: linear-gradient(135deg, rgba(17,30,66,.96) 0%, rgba(24,56,124,.96) 50%, rgba(128,201,255,.46) 140%) !important;
  color: #f8fbff !important;
}
.client-banner.blue {
  background: linear-gradient(135deg, rgba(8,16,36,.98) 0%, rgba(22,48,118,.98) 56%, rgba(120,170,255,.34) 130%) !important;
  color: #f8fbff !important;
}
.client-banner.yellow .tag,
.client-banner.blue .tag {
  background: rgba(255,255,255,.08) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(255,255,255,.10);
}
.client-banner-art {
  opacity: .95;
}
.client-action {
  background: linear-gradient(180deg, rgba(13,26,61,.86), rgba(8,16,38,.92)) !important;
  color: #f2f8ff !important;
  border: 1px solid rgba(120,170,255,.14) !important;
  box-shadow: 0 20px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.client-action.start {
  background: linear-gradient(180deg, rgba(49,126,255,.30), rgba(10,20,48,.92)) !important;
  color: #dff2ff !important;
}
.client-action.danger {
  background: linear-gradient(180deg, rgba(146,44,82,.26), rgba(36,12,24,.92)) !important;
  color: #ffd4e2 !important;
}
.client-modal-card {
  background: linear-gradient(180deg, rgba(11,22,53,.96), rgba(7,14,34,.98)) !important;
  border: 1px solid rgba(120,170,255,.16);
  color: #eff6ff;
}
.client-tariff-row,
.client-modal-tariff {
  background: linear-gradient(180deg, rgba(14,29,70,.96), rgba(8,17,41,.96)) !important;
  border: 1px solid rgba(120,170,255,.14) !important;
  color: #eff6ff !important;
}
.client-tariff-row:hover,
.client-modal-tariff:hover {
  box-shadow: 0 12px 28px rgba(62,141,255,.14), 0 0 0 1px rgba(120,170,255,.16);
}
.client-history-list .client-list-item,
.games-grid .game-card {
  background: linear-gradient(180deg, rgba(11,22,53,.82), rgba(7,14,34,.90)) !important;
  border: 1px solid rgba(120,170,255,.14) !important;
}
.game-cover {
  background: linear-gradient(135deg, #0b1737, #17377f) !important;
}

/* ==== Client finance / package refinement ==== */
.client-panel.glow,
.client-panel.balance-panel,
.latest-finance-panel,
.support-form-panel,
.booking-form-panel {
  position: relative;
  overflow: hidden;
}
.client-panel.glow::before,
.client-panel.balance-panel::before,
.latest-finance-panel::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(89,170,255,.18), transparent 70%);
  pointer-events: none;
}
.client-balance-actions,
.confirm-actions.inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.client-ghost-btn,
.client-btn-secondary,
.client-btn-primary,
.client-btn-danger {
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
}
.client-btn-primary,
.client-recharge-btn {
  background: linear-gradient(135deg, #84d2ff, #5aa9ff);
  color: #061325;
  box-shadow: 0 10px 30px rgba(90,169,255,.28);
}
.client-btn-secondary,
.client-ghost-btn {
  background: rgba(255,255,255,.04);
  color: #d7ebff;
  border: 1px solid rgba(132,210,255,.18);
}
.client-btn-danger {
  background: linear-gradient(135deg, #ff7c9a, #ff4f73);
  color: white;
}
.client-bonus-line {
  color: #b7d8ff;
  margin-top: 8px;
  font-size: 15px;
}
.client-finance-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.client-mini-kpi.big {
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,25,60,.88), rgba(5,10,25,.95));
  border: 1px solid rgba(132,210,255,.14);
}
.client-mini-kpi.big span { display:block; color:#97b6df; margin-bottom:8px; }
.client-mini-kpi.big b { font-size: 28px; color:#f3f8ff; }
.page-head-row {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px;
}
.client-topup-grid,
.client-modal-list.two-col {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
}
.client-modal-card.wide { max-width: 760px; width: calc(100vw - 64px); }
.client-modal-card.small { max-width: 420px; width: calc(100vw - 64px); }
.client-confirm-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(132,210,255,.14);
}
.client-confirm-box.hidden { display:none; }
.confirm-title { font-size: 18px; font-weight: 800; color: #f4f8ff; margin-bottom: 8px; }
.confirm-sub { color:#b8cce8; line-height:1.5; }
.confirm-actions { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.confirm-actions.stack { flex-direction:column; align-items:stretch; }
.client-text-input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(132,210,255,.14);
  background: rgba(4,10,24,.76);
  color: #eef6ff;
  padding: 14px 16px;
  outline: none;
}
.client-promo-note {
  margin-top: 14px; color:#95b6df; font-size: 13px;
}
.client-tariff-desc,
.client-section-sub,
.client-list-item .sub,
.game-meta { color:#98b5d8; }
.client-history-list.compact .client-list-item { padding: 14px 16px; }
.client-list-item .title { font-weight: 700; color:#f4f8ff; }
.client-list-item .meta { color:#d7e7ff; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.client-banner-grid { margin: 22px 0; }
.client-action.primary { background: linear-gradient(135deg, rgba(92,172,255,.22), rgba(30,95,210,.26)); }
.client-action.danger { background: linear-gradient(135deg, rgba(255,91,123,.18), rgba(160,40,70,.24)); }
.game-card {
  padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(10,20,48,.86), rgba(5,10,26,.95)); border:1px solid rgba(132,210,255,.14); display:flex; flex-direction:column; gap:12px;
}
.game-thumb {
  width: 64px; height: 64px; border-radius: 18px; display:flex; align-items:center; justify-content:center; font-weight:800; background: linear-gradient(135deg, #84d2ff, #5aa9ff); color:#081323;
}
.games-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.client-modal.hidden { display:none; }
@media (max-width: 1100px) {
  .client-topup-grid, .client-modal-list.two-col, .client-finance-hero { grid-template-columns: 1fr; }
  .page-head-row { flex-direction:column; }
}

/* admin refresh + notifications */
.menu-pill{margin-left:auto;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:rgba(110,182,255,.18);color:#dff0ff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.quick-link{text-decoration:none;color:inherit;display:grid;place-items:center}
.mini-link{color:var(--text);text-decoration:none;font-weight:700;font-size:13px;opacity:.82}
.mini-link:hover{opacity:1}
.hero-operations,.hero-notify{background:linear-gradient(135deg,rgba(10,18,45,.92),rgba(9,18,41,.78));border:1px solid rgba(120,170,255,.14)}
.command-center{background:linear-gradient(180deg,rgba(14,27,69,.7),rgba(8,16,36,.8))}
.admin-insights-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-bottom:18px}
.notification-list{display:grid;gap:12px}.notification-list.padded{padding:20px 22px 22px}.notification-list.compact{max-height:260px;overflow:auto}
.notification-item{display:grid;grid-template-columns:10px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(120,170,255,.12)}
.notification-dot{width:10px;height:10px;border-radius:50%;background:#7dc7ff;box-shadow:0 0 18px rgba(110,182,255,.66)}
.notification-item.ticket .notification-dot{background:#ff8a8a;box-shadow:0 0 18px rgba(255,138,138,.55)}
.notification-item.booking .notification-dot{background:#ffd76c;box-shadow:0 0 18px rgba(255,215,108,.5)}
.notification-item.finance .notification-dot,.notification-item.tx .notification-dot{background:#79f0c4;box-shadow:0 0 18px rgba(121,240,196,.5)}
.notification-title{font-weight:800}.notification-sub{color:var(--muted);font-size:13px;margin-top:4px}.notification-tag{font-size:12px;font-weight:800;color:#d8ecff;background:rgba(110,182,255,.12);border:1px solid rgba(110,182,255,.18);padding:8px 10px;border-radius:999px}
.focus-stack{display:grid;gap:12px}.focus-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(120,170,255,.12)}
.focus-item span{color:var(--muted);font-size:14px}.focus-item b{font-size:16px}
.table-card .notification-item,.command-center .notification-item,.hero-notify .focus-item,.hero-notify .notification-item{background:rgba(255,255,255,.04)}
@media (max-width: 1180px){.admin-insights-grid{grid-template-columns:1fr}}


/* admin cash + tickets refresh */
.table-actions{display:flex;gap:8px;flex-wrap:wrap;}
.modal-wide{max-width:820px;width:min(820px,92vw);}
.table-link-btn{background:none;border:none;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:0;text-align:left;}
.row-active td{background:rgba(110,182,255,.08);}
.ticket-details .detail-stack{display:flex;flex-direction:column;gap:14px;}
.ticket-details .detail-row{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(110,182,255,.14);border-radius:14px;background:rgba(255,255,255,.02);}
.ticket-details .detail-row span{color:var(--muted,#9fb4d8);}
.ticket-details .detail-message{padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(110,182,255,.12);line-height:1.5;}
.empty-card{padding:20px;border:1px dashed rgba(110,182,255,.2);border-radius:16px;color:var(--muted,#9fb4d8);}
.menu-pill{margin-left:8px;}

.quick-booking-grid,
.quick-hours-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.client-modal-tariff strong,
.client-modal-tariff b { pointer-events:none; }


.map-content { background: radial-gradient(circle at top left, rgba(75,115,255,0.12), transparent 30%), #060b17; }
.club-map-shell { display:grid; grid-template-columns:1.5fr 420px; gap:24px; align-items:start; }
.club-map-board,.club-map-sidepanel,.card-glass { background:linear-gradient(180deg, rgba(13,23,48,.96), rgba(7,13,30,.96)); border:1px solid rgba(120,160,255,.12); border-radius:24px; box-shadow:0 18px 60px rgba(0,0,0,.24); }
.club-map-board{padding:24px;} .club-map-sidepanel{padding:24px; position:sticky; top:24px;}
.club-map-header{display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; flex-wrap:wrap;}
.club-map-legend{display:flex; gap:16px; align-items:center; flex-wrap:wrap; color:#a8b4cc; font-size:14px;}
.legend-dot{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:8px;} .legend-dot.free{background:#23c16b;} .legend-dot.busy{background:#ff5d68;} .legend-dot.warning{background:#ffbe3b;}
.club-layout{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
.map-zone{background:rgba(255,255,255,.03); border:1px solid rgba(120,160,255,.08); border-radius:22px; padding:18px;}
.map-zone-title{color:#e7efff; font-size:18px; font-weight:700; margin-bottom:16px;}
.pc-layout-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;}
.map-pc-card{border:none; padding:16px; border-radius:18px; text-align:left; cursor:pointer; transition:.2s ease; color:#fff; min-height:104px;}
.map-pc-card.free{background:linear-gradient(135deg, #1f8f4e, #176837);} .map-pc-card.busy{background:linear-gradient(135deg, #bc3742, #8d2330);} .map-pc-card.warning{background:linear-gradient(135deg, #d4a017, #a67a10);} .map-pc-card.selected{outline:2px solid #8ed0ff; transform:translateY(-2px);}
.map-pc-top{display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px;} .map-pc-name{font-size:16px; font-weight:800;} .map-pc-user{font-size:14px; font-weight:600; margin-bottom:8px;} .map-pc-time{font-size:13px; opacity:.9;}
.hidden{display:none !important;} .pc-inspector-empty{display:grid; place-items:center; text-align:center; min-height:420px; color:#a6b2cc;} .pc-inspector-icon{font-size:42px; margin-bottom:12px;}
.pc-inspector-head{display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:18px;} .pc-inspector-head h2{margin:4px 0 0; color:#eef4ff;} .pc-zone-label{color:#8fb3ff; font-size:12px; text-transform:uppercase; letter-spacing:.08em;}
.status-badge{padding:8px 12px; border-radius:999px; font-size:13px; font-weight:700;} .status-badge.free{background:rgba(35,193,107,.16); color:#6fe19f;} .status-badge.busy{background:rgba(255,93,104,.16); color:#ff9198;} .status-badge.warning{background:rgba(255,190,59,.16); color:#ffd56a;}
.pc-inspector-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px;} .pc-stat-box{padding:14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(120,160,255,.08);} .pc-stat-box span{display:block; font-size:12px; color:#9aa8c5; margin-bottom:8px;} .pc-stat-box strong{color:#f2f6ff; font-size:16px;}
.pc-inspector-meta{display:grid; gap:10px; color:#b0bdd7; margin-bottom:18px;} .pc-inspector-meta div{display:flex; justify-content:space-between; gap:16px;}
.pc-inspector-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;} .btn-danger{background:linear-gradient(135deg, #cc4a55, #8d2832); color:#fff;}

/* ===== Club map designer ===== */
.designer-page{padding-bottom:28px}
.designer-topbar{align-items:flex-start;gap:18px}
.designer-top-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.designer-select{min-width:220px}
.designer-shell{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:20px;align-items:start}
.designer-main{display:grid;gap:18px}
.designer-canvas,.designer-footer,.designer-sidebar{background:var(--panel-strong);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.designer-canvas{padding:18px}
.designer-canvas-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.designer-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;font-weight:700}
.club-map-stage{overflow:auto;border-radius:20px;background:linear-gradient(180deg,rgba(3,11,77,.74),rgba(4,10,40,.96));padding:18px;min-height:720px;border:1px solid rgba(119,168,255,.14)}
.club-map-stage.has-background-image{background-size:cover;background-position:center}
.club-map-board-pro{position:relative;background:var(--map-bg,#030b4d);border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 28px 40px rgba(0,0,0,.24);overflow:hidden;background-size:cover;background-position:center}
.club-map-board-pro::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04));pointer-events:none}
.map-designer-item{position:absolute;display:grid;align-content:center;justify-items:center;gap:2px;border-radius:8px;color:#fff;font-weight:900;cursor:pointer;user-select:none;transition:transform .16s ease, box-shadow .16s ease, outline-color .16s ease;outline:1px solid rgba(255,255,255,.12)}
.map-designer-item:hover{transform:translateY(-1px)}
.map-designer-item.selected{box-shadow:0 0 0 3px rgba(255,255,255,.18),0 16px 24px rgba(0,0,0,.22)}
.map-designer-item.computer,.map-designer-item.vipComputer{background:var(--accent,#f97316);padding:6px 5px;text-align:center}
.map-designer-item.vipComputer{border-radius:10px}
.map-designer-item.zone,.map-designer-item.text{background:var(--accent,#334155);padding:6px 8px;text-align:center}
.map-designer-item.zone{letter-spacing:.02em}
.map-designer-item.wall{background:var(--accent,#22d3ee);border-radius:999px;padding:0;outline:none}
.map-designer-item.door{background:transparent;outline:none;border-left:2px solid var(--accent,#94a3b8)}
.map-designer-item.door span{display:block;width:100%;height:100%;border-top:2px solid var(--accent,#94a3b8);border-radius:0 100% 0 0;opacity:.9}
.map-item-title{font-size:15px;line-height:1}
.map-item-sub{font-size:10px;font-weight:700;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.map-item-meta{font-size:10px;font-weight:800;opacity:.94}
.map-designer-item.status-free{box-shadow:inset 0 -3px 0 rgba(16,185,129,.68)}
.map-designer-item.status-busy{box-shadow:inset 0 -3px 0 rgba(239,68,68,.75)}
.map-designer-item.status-warning{box-shadow:inset 0 -3px 0 rgba(245,158,11,.78)}
.map-designer-item.status-offline{opacity:.58;filter:grayscale(.18)}
.designer-footer{padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.designer-footer-title{font-size:18px;font-weight:900;color:var(--text)}
.designer-footer-sub{font-size:13px;color:var(--muted);max-width:720px;margin-top:4px}
.designer-status-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.status-chip{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;font-weight:800;font-size:13px;border:1px solid rgba(255,255,255,.06)}
.status-chip.free{background:rgba(16,185,129,.16);color:#9ff0cf}.status-chip.busy{background:rgba(239,68,68,.16);color:#ffc2c2}.status-chip.warning{background:rgba(245,158,11,.17);color:#ffe0a7}.status-chip.offline{background:rgba(148,163,184,.14);color:#d5deed}
.designer-sidebar{padding:18px;display:grid;gap:16px;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto}
.designer-section{border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:16px;background:rgba(8,15,38,.5)}
.designer-section-title{font-size:18px;font-weight:900;color:var(--text);margin-bottom:14px}
.switch-row{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--text);font-weight:700}
.switch-row input{width:22px;height:22px;accent-color:#4f7cff}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool-btn{border:1px solid rgba(120,170,255,.18);background:#0d183b;color:var(--text);border-radius:14px;padding:12px 10px;cursor:pointer;font-weight:800}
.tool-btn:hover{border-color:rgba(120,170,255,.32);transform:translateY(-1px)}
.form-grid.compact{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid.compact label{display:grid;gap:6px}.form-grid.compact span{font-size:12px;color:var(--muted);font-weight:700}.span-2{grid-column:1 / -1}
.stack-actions{display:grid;gap:10px;margin-top:12px}.file-like{position:relative;overflow:hidden}.file-like input{position:absolute;inset:0;opacity:0;cursor:pointer}
.hint-text,.hint-box{font-size:12px;line-height:1.5;color:var(--muted)}.hint-box{padding:14px;border-radius:14px;background:rgba(148,163,184,.08);border:1px dashed rgba(148,163,184,.18)}
.btn-danger-soft{background:rgba(127,29,29,.18);border:1px solid rgba(239,68,68,.28);color:#fecaca}.btn-danger-soft:hover{background:rgba(127,29,29,.26)}
.pc-inspector-empty.slim{padding:18px 10px}.pc-inspector-empty.slim p{margin:0;color:var(--muted);text-align:center}
.map-edit-mode .map-designer-item{cursor:move}
@media (max-width: 1280px){.designer-shell{grid-template-columns:1fr}.designer-sidebar{position:static;max-height:none}.designer-footer{flex-direction:column;align-items:flex-start}.designer-status-list{justify-content:flex-start}}
@media (max-width: 720px){.designer-top-actions,.designer-legend,.tool-grid,.form-grid.compact{grid-template-columns:1fr;display:grid}.designer-canvas,.designer-footer,.designer-sidebar{padding:14px}.club-map-stage{min-height:560px;padding:10px}}

/* ===== Club map designer refresh ===== */
.designer-page-pro{padding-top:18px}
.designer-page-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.designer-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.designer-page-pro h1{margin:0;font-size:34px;line-height:1.05;color:#f3f7ff}
.live-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(16,185,129,.16);color:#9cf0cb;font-size:13px;font-weight:800;border:1px solid rgba(16,185,129,.25)}
.pro-actions{justify-content:flex-end}
.designer-select{min-width:170px;background:#071735;border-color:#153260;color:#f3f7ff}
.pro-shell{grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.designer-canvas-pro{padding:14px;border-radius:18px;background:linear-gradient(180deg,#071633,#06142e)}
.designer-canvas-head-pro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 4px 12px 4px}
.designer-legend span{display:inline-flex;align-items:center;gap:8px;color:#bfd0ec;font-weight:700}
.legend-dot{width:11px;height:11px;border-radius:999px;display:inline-block;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.legend-dot.free{background:#25d07f}.legend-dot.busy{background:#ff4d57}.legend-dot.warning{background:#ffb628}.legend-dot.offline{background:#8c97ae}
.board-top-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zoom-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#08172f;border:1px solid rgba(123,158,223,.14)}
.zoom-pill button{width:28px;height:28px;border:none;border-radius:8px;background:#0d2143;color:#fff;font-size:18px;cursor:pointer}
.zoom-pill span{min-width:50px;text-align:center;color:#dfe8fb;font-weight:800;font-size:13px}
.grid-toggle{display:inline-flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:#08172f;border:1px solid rgba(123,158,223,.14);color:#d7e3fb;font-size:13px;font-weight:800}
.grid-toggle input{accent-color:#4d7cff;width:16px;height:16px}
.map-workbench{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:start}
.map-tools-rail{display:grid;gap:10px;padding:10px;border-radius:16px;background:#08172f;border:1px solid rgba(123,158,223,.12)}
.map-rail-btn{height:44px;border-radius:12px;border:1px solid rgba(123,158,223,.12);background:#0c1d3c;color:#eef4ff;font-weight:900;cursor:pointer;font-size:16px}
.map-rail-btn.active,.map-rail-btn:hover{background:linear-gradient(180deg,#2f6dff,#2758e3);border-color:rgba(110,160,255,.6)}
.map-stage-wrap{min-width:0}
.club-map-stage-pro{padding:14px;border-radius:18px;border:1px solid rgba(123,158,223,.14);background:linear-gradient(180deg,rgba(5,16,46,.96),rgba(3,12,33,.98));min-height:860px;overflow:auto;overflow-x:hidden}
.club-map-stage-pro.with-grid{background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(180deg,rgba(5,16,46,.96),rgba(3,12,33,.98));background-size:28px 28px,28px 28px,100% 100%}
.club-map-stage-pro.has-background-image{background-size:cover,cover;background-position:center}
.map-board-viewport{position:relative;margin:0 auto}
.club-map-board-pro{background:radial-gradient(circle at top left, rgba(55,95,255,.08), transparent 28%), var(--map-bg,#061540);border-radius:14px}
.club-map-board-pro::before{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.map-designer-item{outline:none;box-shadow:0 8px 16px rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.08)}
.map-designer-item.computer,.map-designer-item.vipComputer{border-radius:10px;padding:6px 6px 4px;background:var(--accent);min-height:44px}
.map-designer-item.vipComputer{border-radius:12px}
.map-designer-item.zone{border-radius:12px;font-size:14px;white-space:pre-line;line-height:1.1}
.map-designer-item.text{background:#1b2b4f;border-radius:12px}
.map-designer-item.wall{background:#25d0f6;box-shadow:none;border:none}
.map-designer-item.door{border-left:3px solid var(--accent,#94a3b8)}
.map-item-title{font-size:16px;line-height:1;font-weight:900;letter-spacing:.01em}
.map-item-sub{font-size:11px;max-width:100%;color:rgba(255,255,255,.92)}
.map-item-meta{font-size:11px;font-weight:900;color:rgba(255,255,255,.98)}
.map-designer-item.status-free{box-shadow:inset 0 0 0 999px rgba(34,197,94,.18),0 8px 16px rgba(0,0,0,.16)}
.map-designer-item.status-busy{box-shadow:inset 0 0 0 999px rgba(239,68,68,.18),0 8px 16px rgba(0,0,0,.16)}
.map-designer-item.status-warning{box-shadow:inset 0 0 0 999px rgba(245,158,11,.18),0 8px 16px rgba(0,0,0,.16)}
.map-designer-item.status-offline{box-shadow:inset 0 0 0 999px rgba(148,163,184,.2),0 8px 16px rgba(0,0,0,.16)}
.designer-sidebar-pro{padding:12px;border-radius:18px;background:linear-gradient(180deg,#08172f,#071428);position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto}
.designer-sidebar-pro .designer-section{border-radius:16px;padding:16px;background:#08172f;border:1px solid rgba(123,158,223,.12)}
.switch-row-pro input{width:20px;height:20px}
.tool-grid-pro .tool-btn{background:#091a36;border-color:rgba(123,158,223,.16);padding:12px;border-radius:12px}
.tool-grid-pro .tool-btn:hover{background:#0d254b}
.designer-sidebar-pro .input,.designer-sidebar-pro select{background:#071735;border:1px solid rgba(123,158,223,.16);color:#edf4ff}
.designer-sidebar-pro .btn.btn-primary{background:linear-gradient(180deg,#3673ff,#2557e5);border:none}
.pc-inspector-empty.slim{background:#071735;border-radius:14px;border:1px dashed rgba(123,158,223,.16)}
@media (max-width: 1320px){.pro-shell{grid-template-columns:1fr}.designer-sidebar-pro{position:static;max-height:none}.club-map-stage-pro{min-height:700px}}
@media (max-width: 760px){.map-workbench{grid-template-columns:1fr}.map-tools-rail{grid-template-columns:repeat(4,1fr);display:grid}.club-map-stage-pro{min-height:520px}.designer-page-pro h1{font-size:28px}}


.pc-hover-tooltip{position:fixed;z-index:70;min-width:280px;max-width:320px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(7,14,34,.96),rgba(5,10,22,.98));border:1px solid rgba(120,170,255,.16);box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);pointer-events:none;backdrop-filter:blur(14px)}
.pc-hover-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.pc-hover-title-row strong{font-size:15px;color:#f5f9ff}.pc-hover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.pc-hover-grid span,.pc-quick-meta span{display:block;font-size:11px;color:#8ea4c8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.pc-hover-grid b,.pc-quick-meta b{color:#f3f7ff;font-size:13px}
.pc-quick-actions{position:fixed;z-index:72;width:300px;padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(7,14,34,.97),rgba(5,10,22,.99));border:1px solid rgba(120,170,255,.16);box-shadow:0 26px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(16px)}
.pc-quick-actions-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.pc-quick-subtitle{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8ea4c8}.pc-quick-actions-head h3{margin:4px 0 0;font-size:20px;color:#f4f8ff}.icon-btn{width:36px;height:36px;border:none;border-radius:12px;background:rgba(120,170,255,.08);color:#d8e8ff;cursor:pointer}.icon-btn:hover{background:rgba(120,170,255,.16)}
.pc-quick-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.pc-quick-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.map-designer-item.status-busy.computer,.map-designer-item.status-busy.vipComputer{background:linear-gradient(180deg,#ff7373,#ef4444)!important;color:#fff;box-shadow:0 14px 28px rgba(239,68,68,.22), inset 0 -3px 0 rgba(127,29,29,.55)}
.map-designer-item.status-warning.computer,.map-designer-item.status-warning.vipComputer{background:linear-gradient(180deg,#ffd96a,#f59e0b)!important;color:#111827;box-shadow:0 14px 28px rgba(245,158,11,.20), inset 0 -3px 0 rgba(146,64,14,.55)}
.map-designer-item.status-free.computer,.map-designer-item.status-free.vipComputer{background:linear-gradient(180deg,#34d399,#10b981)!important;color:#06281d;box-shadow:0 14px 28px rgba(16,185,129,.18), inset 0 -3px 0 rgba(6,95,70,.45)}
.map-designer-item.status-busy .map-item-sub,.map-designer-item.status-busy .map-item-meta{color:rgba(255,255,255,.92)}
.map-designer-item.status-warning .map-item-sub,.map-designer-item.status-warning .map-item-meta,.map-designer-item.status-free .map-item-sub,.map-designer-item.status-free .map-item-meta{color:rgba(15,23,42,.82)}
.map-designer-item.status-warning .map-item-title,.map-designer-item.status-free .map-item-title{color:#08111f}
#pcInspector{scroll-margin-top:20px}
@media (max-width: 860px){.pc-hover-tooltip,.pc-quick-actions{display:none !important}}


/* ===== AI assistant ===== */
.ai-card-shell{padding:22px; display:flex; flex-direction:column; gap:16px;}
.ai-chat{min-height:460px; max-height:65vh; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:8px;}
.ai-message{border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px 16px; max-width:82%; box-shadow:0 10px 30px rgba(0,0,0,.16);}
.ai-message.user{align-self:flex-end; background:linear-gradient(180deg, rgba(91,141,239,.24), rgba(91,141,239,.12));}
.ai-message.assistant{align-self:flex-start; background:rgba(255,255,255,.03);}
.ai-message-role{font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.66; margin-bottom:8px; font-weight:800;}
.ai-message-text{white-space:pre-wrap; line-height:1.55;}
.ai-input-row{display:flex; flex-direction:column; gap:12px;}
.ai-input{min-height:96px; resize:vertical;}
.ai-actions{display:flex; justify-content:flex-end; gap:10px;}
.chip{display:inline-flex; align-items:center; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#dbe5ff; font-weight:700;}
@media (max-width: 900px){.ai-message{max-width:100%;}}


/* ===== Admin sidebar usability fix ===== */
.sidebar { overflow: hidden; }
.menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 20px; }
.sidebar-footer { position: static; margin-top: 0; flex: 0 0 auto; padding: 16px 20px 20px; background: linear-gradient(180deg, rgba(23,26,31,.02), rgba(23,26,31,.28)); border-top: 1px solid rgba(120,170,255,.08); }
.sidebar::-webkit-scrollbar, .menu::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-thumb, .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.sidebar::-webkit-scrollbar-track, .menu::-webkit-scrollbar-track { background: transparent; }
.menu-pill { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background: rgba(239,68,68,.18); color:#fff; font-size:12px; font-weight:800; margin-left:auto; }
.auth-switch { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; color: var(--muted); }

/* ===== Analytics page ===== */
.analytics-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.analytics-card { background: rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.74); border-radius: 28px; padding: 22px; box-shadow: var(--shadow); }
.analytics-card.dark { background: linear-gradient(135deg,#111827,#1f2937); color:#fff; }
.analytics-card .eyebrow { color: var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.analytics-card.dark .eyebrow { color: rgba(255,255,255,.72); }
.analytics-value { margin-top:10px; font-size:36px; font-weight:900; line-height:1; }
.analytics-note { margin-top:10px; color: var(--muted); font-size:14px; }
.analytics-card.dark .analytics-note { color: rgba(255,255,255,.76); }
.analytics-trend { margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eef2ff; font-weight:800; font-size:13px; }
.analytics-card.dark .analytics-trend { background: rgba(255,255,255,.12); }
.analytics-two-col { display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; margin-top:18px; }
.analytics-three-col { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top:18px; }
.metric-list { display:grid; gap:12px; }
.metric-row { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(148,163,184,.12); }
.metric-row:last-child { border-bottom:none; padding-bottom:0; }
.metric-row b { font-size:15px; }
.segment-list { display:grid; gap:12px; margin-top:14px; }
.segment-item { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.progress-track { grid-column:1 / -1; height:12px; border-radius:999px; background: rgba(148,163,184,.14); overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--red), var(--red-dark)); }
.heatmap { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:10px; margin-top:14px; }
.heat-cell { border-radius:20px; padding:14px 12px; min-height:118px; background:#f8fafc; border:1px solid rgba(148,163,184,.14); display:flex; flex-direction:column; justify-content:space-between; }
.heat-cell strong { font-size:15px; }
.heat-cell .muted { font-size:12px; }
.heat-intensity-1 { background: linear-gradient(180deg,#f8fafc,#eef2ff); }
.heat-intensity-2 { background: linear-gradient(180deg,#eef2ff,#dbeafe); }
.heat-intensity-3 { background: linear-gradient(180deg,#dbeafe,#bfdbfe); }
.heat-intensity-4 { background: linear-gradient(180deg,#bfdbfe,#93c5fd); }
.heat-intensity-5 { background: linear-gradient(180deg,#93c5fd,#60a5fa); color:#0f172a; }
.sparkline { display:flex; align-items:flex-end; gap:8px; min-height:120px; margin-top:16px; }
.spark-col { flex:1; display:grid; justify-items:center; gap:8px; }
.spark-bar { width:100%; border-radius:14px 14px 8px 8px; min-height:12px; background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(17,24,39,.24)); }
.spark-label { font-size:12px; color: var(--muted); }
.insight-box { border-radius:24px; padding:18px; background: linear-gradient(135deg,#fff7ed,#fff1f2); border:1px solid rgba(251,146,60,.18); }
.insight-box h4 { margin:0 0 10px; font-size:18px; }
.insight-list { display:grid; gap:10px; margin-top:12px; }
.insight-item { background:#fff; border-radius:18px; padding:14px 16px; border:1px solid rgba(148,163,184,.12); }
@media (max-width: 1280px) { .analytics-grid{grid-template-columns:repeat(2, minmax(0,1fr));} .analytics-two-col,.analytics-three-col{grid-template-columns:1fr;} }
@media (max-width: 760px) { .analytics-grid,.heatmap{grid-template-columns:1fr;} }


/* ===== Premium analytics redesign ===== */
body.analytics-page {
  background:
    radial-gradient(circle at top left, rgba(80, 131, 255, .24), transparent 26%),
    radial-gradient(circle at top right, rgba(34, 211, 238, .12), transparent 24%),
    linear-gradient(180deg, #020814 0%, #061327 48%, #08162d 100%);
  color: #edf4ff;
}
body.analytics-page .content.analytics-content {
  padding: 24px 28px 34px;
}
body.analytics-page .topbar h1,
body.analytics-page .topbar p,
body.analytics-page .muted { color: #dce9ff; }
body.analytics-page .analytics-topbar { margin-bottom: 20px; }
body.analytics-page .analytics-topbar p { color: rgba(220,233,255,.72); max-width: 780px; }
body.analytics-page .analytics-action-btn {
  min-width: 210px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  background: rgba(7,20,40,.88);
  border: 1px solid rgba(116,165,255,.24);
  color: #edf4ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 38px rgba(1,7,18,.28);
}
body.analytics-page .analytics-action-btn.btn-primary {
  background: linear-gradient(135deg, #69b7ff, #4980ff 58%, #2f66ff 100%);
  color: #071426;
  border: none;
  box-shadow: 0 20px 40px rgba(64,121,255,.34);
}
body.analytics-page .analytics-premium-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
body.analytics-page .analytics-span-12 { grid-column: span 12; }
body.analytics-page .analytics-span-7 { grid-column: span 7; }
body.analytics-page .analytics-span-5 { grid-column: span 5; }
body.analytics-page .analytics-span-4 { grid-column: span 4; }
body.analytics-page .analytics-kpis-row,
body.analytics-page .analytics-mini-row {
  grid-column: span 12;
  display: grid;
  gap: 18px;
}
body.analytics-page .analytics-kpis-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.analytics-page .analytics-mini-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.analytics-page .analytics-stat-card,
body.analytics-page .analytics-mini-card,
body.analytics-page .analytics-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(109, 156, 255, .16);
  background: linear-gradient(180deg, rgba(5,18,40,.92) 0%, rgba(5,22,49,.96) 100%);
  box-shadow: 0 24px 48px rgba(1, 7, 18, .34), inset 0 1px 0 rgba(255,255,255,.03);
}
body.analytics-page .analytics-stat-card::after,
body.analytics-page .analytics-panel::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(95, 153, 255, .12), transparent 64%);
  pointer-events: none;
}
body.analytics-page .analytics-stat-card {
  padding: 20px 20px 18px;
  min-height: 144px;
}
body.analytics-page .analytics-stat-icon,
body.analytics-page .analytics-mini-icon,
body.analytics-page .analytics-insight-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(47,124,255,.22), rgba(47,124,255,.1));
  border: 1px solid rgba(113,168,255,.18);
  color: #9fcbff;
  font-size: 22px;
  font-weight: 800;
}
body.analytics-page .analytics-stat-label,
body.analytics-page .analytics-mini-label,
body.analytics-page .analytics-panel-title {
  color: rgba(211,227,255,.78);
  font-size: 13px;
  margin-top: 14px;
}
body.analytics-page .analytics-stat-value,
body.analytics-page .analytics-mini-value,
body.analytics-page .analytics-side-number {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
  color: #f7fbff;
}
body.analytics-page .analytics-stat-value { font-size: 28px; }
body.analytics-page .analytics-stat-delta,
body.analytics-page .analytics-mini-note,
body.analytics-page .analytics-stat-note,
body.analytics-page .analytics-panel-subtitle,
body.analytics-page .analytics-side-note,
body.analytics-page .analytics-rank-sub,
body.analytics-page .analytics-segment-row span,
body.analytics-page .analytics-heat-sessions,
body.analytics-page .analytics-insight-text {
  color: rgba(202,220,251,.68);
}
body.analytics-page .analytics-stat-delta {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}
body.analytics-page .analytics-stat-delta.up,
body.analytics-page .analytics-bar-metrics .up { color: #39e58f; }
body.analytics-page .analytics-stat-delta.down,
body.analytics-page .analytics-bar-metrics .down { color: #ff7676; }
body.analytics-page .analytics-stat-note,
body.analytics-page .analytics-mini-note,
body.analytics-page .analytics-panel-subtitle,
body.analytics-page .analytics-side-note,
body.analytics-page .analytics-rank-sub,
body.analytics-page .analytics-segment-row span,
body.analytics-page .analytics-heat-sessions,
body.analytics-page .analytics-insight-text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}
body.analytics-page .analytics-panel { padding: 22px; }
body.analytics-page .analytics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
body.analytics-page .analytics-panel-title {
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
  font-size: 26px;
  color: #eff5ff;
  font-weight: 800;
}
body.analytics-page .analytics-panel-subtitle { margin-top: 8px; font-size: 14px; }
body.analytics-page .analytics-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(215,228,255,.78);
  font-size: 13px;
}
body.analytics-page .analytics-legend span { display: inline-flex; align-items: center; gap: 8px; }
body.analytics-page .legend-dot {
  width: 14px; height: 6px; border-radius: 999px; display: inline-block;
}
body.analytics-page .legend-dot.current { background: linear-gradient(90deg,#2f7cff,#7dc1ff); }
body.analytics-page .legend-dot.previous { background: rgba(158,189,255,.45); }
body.analytics-page .analytics-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 240px;
  gap: 18px;
  align-items: stretch;
}
body.analytics-page .analytics-bars-wrap {
  border-radius: 24px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, rgba(9,25,52,.82), rgba(5,15,33,.92));
  border: 1px solid rgba(111,162,255,.12);
}
body.analytics-page .analytics-bars {
  min-height: 320px;
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 12px;
  align-items: end;
}
body.analytics-page .analytics-bar-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}
body.analytics-page .analytics-bar-topvalue {
  min-height: 34px;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: #eef4ff;
}
body.analytics-page .analytics-bar-stack {
  height: 180px;
  display: flex;
  align-items: end;
  gap: 8px;
}
body.analytics-page .analytics-bar {
  flex: 1;
  border-radius: 16px 16px 8px 8px;
  min-height: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
body.analytics-page .analytics-bar.previous { background: linear-gradient(180deg, rgba(144,180,255,.56), rgba(80,111,182,.28)); }
body.analytics-page .analytics-bar.current { background: linear-gradient(180deg, #2f7cff, #184fc6); }
body.analytics-page .analytics-bar-bottom {
  display: grid;
  gap: 4px;
  text-align: center;
}
body.analytics-page .analytics-bar-day {
  font-size: 13px;
  color: rgba(202,220,251,.78);
}
body.analytics-page .analytics-bar-growth {
  font-size: 12px;
  font-weight: 800;
}
body.analytics-page .analytics-x-axis {
  display: none;
}
body.analytics-page .analytics-x-axis span { text-align: center; font-size: 13px; color: rgba(202,220,251,.78); }
body.analytics-page .analytics-side-summary {
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(13,28,56,.9), rgba(7,20,40,.98));
  border: 1px solid rgba(111,162,255,.12);
}
body.analytics-page .analytics-summary-badge {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #edf4ff;
  font-weight: 800;
  font-size: 13px;
}
body.analytics-page .analytics-side-number { font-size: 56px; margin-top: 18px; }
body.analytics-page .analytics-side-note { font-size: 14px; margin-top: 12px; }
body.analytics-page .analytics-donut-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
body.analytics-page .analytics-donut {
  width: 210px;
  height: 210px;
  margin: 8px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 32px rgba(0,0,0,.26);
}
body.analytics-page .analytics-donut-center {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #071426;
  box-shadow: inset 0 0 0 1px rgba(140,181,255,.12);
  text-align: center;
}
body.analytics-page .analytics-donut-center span {
  color: #f8fbff;
  font-size: 28px;
  font-weight: 900;
}
body.analytics-page .analytics-donut-center small {
  color: rgba(202,220,251,.68);
  font-size: 12px;
  margin-top: 4px;
}
body.analytics-page .analytics-donut-list,
body.analytics-page .analytics-table-shell,
body.analytics-page .analytics-insights-grid,
body.analytics-page .analytics-heat-grid { display: grid; gap: 12px; }
body.analytics-page .analytics-segment-row,
body.analytics-page .analytics-rank-row,
body.analytics-page .analytics-insight-card,
body.analytics-page .analytics-heat-cell,
body.analytics-page .analytics-mini-card {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(9,25,52,.84), rgba(5,15,33,.9));
  border: 1px solid rgba(111,162,255,.12);
}
body.analytics-page .analytics-segment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
body.analytics-page .analytics-segment-main,
body.analytics-page .analytics-segment-side {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.analytics-page .analytics-segment-main strong,
body.analytics-page .analytics-rank-top strong,
body.analytics-page .analytics-heat-day,
body.analytics-page .analytics-insight-title,
body.analytics-page .analytics-rank-top b,
body.analytics-page .analytics-segment-side b {
  color: #eff5ff;
}
body.analytics-page .analytics-segment-main div,
body.analytics-page .analytics-segment-side { display: grid; gap: 4px; }
body.analytics-page .analytics-segment-side { text-align: right; }
body.analytics-page .analytics-segment-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 6px rgba(255,255,255,.03);
}
body.analytics-page .analytics-mini-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
body.analytics-page .analytics-mini-label { margin-top: 0; }
body.analytics-page .analytics-mini-value { font-size: 38px; margin-top: 10px; }
body.analytics-page .analytics-mini-icon { width: 54px; height: 54px; font-size: 24px; }
body.analytics-page .analytics-rank-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
}
body.analytics-page .analytics-rank-index {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(47,124,255,.24), rgba(47,124,255,.1));
  color: #9fcbff;
  font-weight: 900;
}
body.analytics-page .analytics-rank-body { display: grid; gap: 10px; min-width: 0; }
body.analytics-page .analytics-rank-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
body.analytics-page .analytics-rank-top strong,
body.analytics-page .analytics-rank-top b { font-size: 15px; }
body.analytics-page .analytics-rank-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
body.analytics-page .analytics-rank-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f7cff, #7dc1ff);
}
body.analytics-page .analytics-heat-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
body.analytics-page .analytics-heat-cell {
  padding: 16px 12px;
  min-height: 152px;
  display: grid;
  gap: 10px;
  align-content: start;
  text-align: center;
}
body.analytics-page .analytics-heat-cell.intensity-1 { background: linear-gradient(180deg, rgba(9,25,52,.78), rgba(5,15,33,.9)); }
body.analytics-page .analytics-heat-cell.intensity-2 { background: linear-gradient(180deg, rgba(14,44,88,.9), rgba(6,24,53,.94)); }
body.analytics-page .analytics-heat-cell.intensity-3 { background: linear-gradient(180deg, rgba(18,74,129,.94), rgba(7,28,61,.98)); }
body.analytics-page .analytics-heat-cell.intensity-4 { background: linear-gradient(180deg, rgba(21,109,150,.96), rgba(7,32,63,1)); }
body.analytics-page .analytics-heat-cell.intensity-5 { background: linear-gradient(180deg, rgba(35,196,131,.92), rgba(11,48,77,.98)); }
body.analytics-page .analytics-heat-day { font-size: 18px; font-weight: 800; }
body.analytics-page .analytics-heat-main {
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  color: #f7fbff;
}
body.analytics-page .analytics-heat-meta {
  display: grid;
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(202,220,251,.78);
}
body.analytics-page .analytics-heat-scale {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(202,220,251,.68);
  font-size: 12px;
}
body.analytics-page .analytics-scale-line {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(9,25,52,.9), rgba(18,74,129,.95), rgba(35,196,131,.95));
}
body.analytics-page .analytics-insights-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.analytics-page .analytics-insight-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}
body.analytics-page .analytics-insight-title {
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}
body.analytics-page .analytics-empty {
  padding: 24px;
  border-radius: 20px;
  background: rgba(9,25,52,.62);
  border: 1px dashed rgba(111,162,255,.18);
  color: rgba(202,220,251,.68);
  text-align: center;
}
@media (max-width: 1480px) {
  body.analytics-page .analytics-kpis-row,
  body.analytics-page .analytics-mini-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.analytics-page .analytics-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  body.analytics-page .analytics-span-7,
  body.analytics-page .analytics-span-5,
  body.analytics-page .analytics-span-4 { grid-column: span 12; }
  body.analytics-page .analytics-chart-layout,
  body.analytics-page .analytics-donut-layout { grid-template-columns: 1fr; }
  body.analytics-page .analytics-side-summary { order: -1; }
  body.analytics-page .analytics-heat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.analytics-page .analytics-kpis-row,
  body.analytics-page .analytics-mini-row,
  body.analytics-page .analytics-insights-grid,
  body.analytics-page .analytics-heat-grid { grid-template-columns: 1fr; }
  body.analytics-page .analytics-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body.analytics-page .analytics-stat-value { font-size: 24px; }
  body.analytics-page .analytics-side-number { font-size: 42px; }
  body.analytics-page .analytics-heat-cell { min-height: 132px; }
  body.analytics-page .analytics-heat-main { font-size: 26px; }
}

/* ===== Food admin page ===== */
.food-page .client-modal{overflow-y:auto;padding:12px 0 24px}.food-page .client-modal-backdrop{position:fixed}
.food-page .content{padding-bottom:32px}
.food-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px}
.food-kpi-card,.food-panel,.food-category-card{background:linear-gradient(180deg,rgba(5,18,48,.92),rgba(4,12,31,.96));border:1px solid rgba(123,158,223,.16);box-shadow:var(--shadow);border-radius:24px}
.food-kpi-card{padding:22px;display:grid;gap:8px}
.food-kpi-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,#1847c9,#0d2e8a);font-size:24px;color:#fff}
.food-kpi-label,.food-kpi-note,.food-panel-head p,.food-item-desc,.food-order-items-preview,.food-category-meta,.food-side-body span,.food-order-foot{color:#8ea4c8}
.food-kpi-value{font-size:34px;font-weight:900;color:#eef5ff;line-height:1.05}
.food-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.food-category-card{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;color:#eef5ff}
.food-category-card.dashed{border-style:dashed;background:rgba(5,18,48,.56)}
.food-category-name{font-weight:800;font-size:20px}.food-category-emoji{font-size:42px}.food-category-plus{font-size:30px;color:#7fb5ff}
.food-main-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.9fr);gap:18px;align-items:start}
.food-panel{padding:20px}.food-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.food-panel-head h3{margin:0 0 6px;font-size:32px;color:#f5f9ff}.food-inline-actions{display:flex;gap:12px;align-items:center}.food-search{min-width:280px}
.food-table-wrap{overflow:auto}.food-table{width:100%;border-collapse:collapse}.food-table th,.food-table td{padding:14px 12px;border-bottom:1px solid rgba(123,158,223,.12);vertical-align:middle}.food-table th{text-align:left;color:#8ea4c8;font-weight:700}.food-table td{color:#eef5ff}
.food-item-cell{display:flex;align-items:center;gap:14px;min-width:270px}.food-item-emoji{width:56px;height:56px;border-radius:18px;background:rgba(43,92,188,.2);display:grid;place-items:center;font-size:28px;flex:0 0 auto}.food-item-emoji.small{width:44px;height:44px;border-radius:14px;font-size:22px}.food-item-name{font-weight:800;font-size:18px}
.food-actions-inline{display:flex;gap:8px;flex-wrap:wrap}.mini-btn{border:none;background:#0f2d75;color:#edf5ff;padding:10px 12px;border-radius:12px;font-weight:800;cursor:pointer}.mini-btn:disabled{opacity:.45;cursor:not-allowed}
.food-status{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}.food-status-ok{background:rgba(20,184,110,.18);color:#55f0aa}.food-status-warn{background:rgba(245,158,11,.16);color:#ffcf6c}.food-status-danger{background:rgba(239,68,68,.14);color:#ff8f8f}.food-status-muted{background:rgba(148,163,184,.16);color:#c7d2fe}
.food-side-stack{display:grid;gap:18px}.food-list-stack{display:grid;gap:12px}.food-side-card,.food-order-card{background:rgba(8,23,53,.78);border:1px solid rgba(123,158,223,.12);border-radius:18px;padding:14px 16px}.food-side-card{display:flex;align-items:center;gap:12px}.food-side-rank{width:36px;height:36px;border-radius:12px;background:#163d96;display:grid;place-items:center;font-weight:900;color:#fff}.food-side-body{display:grid;gap:3px}.food-order-top,.food-order-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.food-order-top{margin-bottom:8px}.food-order-customer{font-weight:800;color:#f7fbff;margin-bottom:6px}
.food-modal-card{max-width:760px;width:min(760px,calc(100vw - 48px));max-height:min(88vh,980px);margin:6vh auto 0;background:linear-gradient(180deg,#07142d,#071022);color:#eef5ff;display:flex;flex-direction:column;overflow:hidden}.food-modal-card .client-modal-head{position:sticky;top:0;z-index:2;padding-bottom:14px;background:linear-gradient(180deg,#07142d 0%,rgba(7,20,45,.96) 76%,rgba(7,20,45,0) 100%)}.food-modal-card .client-modal-head h3{font-size:24px;line-height:1.1}.food-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.food-form-grid.compact{flex:0 0 auto}.food-form-grid textarea{grid-column:1/-1;min-height:100px;resize:vertical}.food-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;position:sticky;bottom:0;padding-top:14px;padding-bottom:2px;background:linear-gradient(180deg,rgba(7,16,34,0),rgba(7,16,34,.92) 24%,#071022 100%)}.food-order-modal{max-width:920px;width:min(920px,calc(100vw - 48px))}.food-order-items{display:grid;gap:10px;margin-top:16px;overflow:auto;max-height:calc(88vh - 360px);padding-right:6px}.food-order-item-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:16px;background:rgba(8,23,53,.76);border:1px solid rgba(123,158,223,.12)}.food-order-item-main{display:flex;align-items:center;gap:12px;min-width:0}.food-order-item-main strong{display:block;font-size:18px;line-height:1.2;color:#eef5ff}.food-order-item-main span{display:block;color:#8ea4c8;margin-top:6px;font-size:15px;line-height:1.35}.food-qty-box{display:flex;align-items:center;gap:12px;flex:0 0 auto}.food-qty-box span{min-width:22px;text-align:center;font-size:24px;font-weight:800;color:#eef5ff}.food-order-total{margin-top:18px;font-size:24px;font-weight:800;color:#eef5ff}.food-page .topbar h1{font-size:48px;line-height:1.06}.food-page .topbar p{font-size:17px;line-height:1.5;max-width:860px}.food-page .btn{font-size:15px}.food-page .input,.food-page select,.food-page textarea{font-size:16px;line-height:1.4}.food-kpi-label,.food-kpi-note,.food-panel-head p,.food-item-desc,.food-order-items-preview,.food-category-meta,.food-side-body span,.food-order-foot{font-size:14px;line-height:1.45}.food-kpi-label{font-weight:700}.food-category-meta{margin-top:6px}.food-panel-head h3{margin:0 0 8px;font-size:28px;line-height:1.15;color:#f5f9ff}.food-table th{font-size:13px;letter-spacing:.02em}.food-table td{font-size:15px;line-height:1.45}.food-item-name{font-weight:800;font-size:18px;line-height:1.2}.food-item-desc{margin-top:4px;max-width:520px}.food-side-body strong{font-size:17px;line-height:1.2;color:#eef5ff}.food-order-customer{font-size:16px;line-height:1.25}.mini-btn{border:none;background:#0f2d75;color:#edf5ff;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;min-width:44px;min-height:44px;font-size:16px}.mini-btn:disabled{opacity:.45;cursor:not-allowed}.food-status{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}.food-order-card{display:grid;gap:10px}.food-order-foot{font-size:14px;line-height:1.45}
@media (max-width: 1380px){.food-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.food-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.food-main-grid{grid-template-columns:1fr}.food-panel-head{flex-direction:column}.food-inline-actions{width:100%;flex-wrap:wrap}.food-search{min-width:0;width:100%}}
@media (max-width: 900px){.food-kpi-grid,.food-categories,.food-form-grid{grid-template-columns:1fr}.food-top-actions{display:grid;grid-template-columns:1fr;gap:10px}.food-item-cell{min-width:220px}.food-order-modal,.food-modal-card{width:min(calc(100vw - 20px),920px);max-height:92vh;margin:2vh auto 0;padding:18px}.food-order-items{max-height:calc(92vh - 340px)}.food-page .topbar h1{font-size:36px}.food-panel-head h3{font-size:24px}.food-order-item-row{align-items:flex-start}.food-qty-box span{font-size:20px}}

.food-order-actions{display:flex;justify-content:flex-end}.mini-btn-danger{background:rgba(125,22,33,.95)}.mini-btn-danger:hover{background:rgba(155,31,45,.98)}

/* ===== Theme Engine vars fallback ===== */
:root {
  --accent: var(--red, #6eb6ff);
  --accent-dark: var(--red-dark, #3e8dff);
  --accent-glow: rgba(110,182,255,0.22);
}

/* ===== Settings page ===== */
.theme-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.theme-card:hover { transform: translateY(-3px); }

/* ===== Receipt styles ===== */
@media print {
  body > *:not(.receipt) { display: none !important; }
}

/* ===== Food image ===== */
.food-item-img { width:40px; height:40px; object-fit:cover; border-radius:10px; }

/* ===== Audit log ===== */
.audit-action { font-size:11px; }

/* ===== Pagination ===== */
.pagination { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.page-btn { border:none; background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:8px 14px; font-weight:700; cursor:pointer; }
.page-btn.active { background:var(--accent); color:#051122; border-color:var(--accent); }

/* ===== Map: sidebar hidden when not in edit mode ===== */
.designer-shell.pro-shell {
  transition: grid-template-columns .25s ease;
}
#designerSidebar[style*="display:none"],
#designerSidebar[style*="display: none"] {
  display: none !important;
}
/* When sidebar hidden, canvas takes full width */
.pro-shell:not(:has(#designerSidebar:not([style*="none"]))) .designer-main {
  grid-column: 1 / -1;
}

/* Inspector free-PC state — show a friendly message instead */
.pc-inspector-actions[style*="display:none"] + .pc-inspector-free-hint { display: block; }
.pc-inspector-free-hint { display: none; color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; }

/* ===== Edit mode toggle button in map header ===== */
.edit-mode-toggle-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.edit-mode-toggle-label input[type="checkbox"] {
  display: none;
}
.edit-mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: .2s ease;
  white-space: nowrap;
}
.edit-mode-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* When checkbox is checked — button turns accent color */
.edit-mode-toggle-label input:checked + .edit-mode-toggle-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #051122;
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-glow);
}

/* ===== Map PC Quick Action Buttons ===== */
.pc-quick-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.pc-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: .15s ease;
  white-space: nowrap;
}
.pc-action-btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
.pc-action-btn.start    { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.28); color: #4ade80; }
.pc-action-btn.start:hover { background: rgba(74,222,128,.22); }
.pc-action-btn.booking  { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.28); color: #60a5fa; }
.pc-action-btn.booking:hover { background: rgba(96,165,250,.22); }
.pc-action-btn.history  { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.28); color: #a78bfa; }
.pc-action-btn.history:hover { background: rgba(167,139,250,.22); }
.pc-action-btn.reboot   { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.28); color: #fbbf24; }
.pc-action-btn.reboot:hover { background: rgba(251,191,36,.20); }
.pc-action-btn.shutdown { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.24); color: #f87171; }
.pc-action-btn.shutdown:hover { background: rgba(239,68,68,.20); }
.pc-action-btn.poweron  { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.34); color: #4ade80; grid-column: 1 / -1; }
.pc-action-btn.poweron:hover { background: rgba(74,222,128,.25); }

/* ========== Multi-select PCs ========== */
.map-designer-item.multi-selected {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 24px var(--accent-glow) !important;
  animation: multiSelPulse 1.6s ease-in-out infinite;
}
@keyframes multiSelPulse {
  0%, 100% { outline-color: var(--accent); }
  50% { outline-color: rgba(255,255,255,.85); }
}

.multi-select-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 22px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 30px var(--accent-glow);
  z-index: 90;
  backdrop-filter: blur(14px);
  max-width: calc(100vw - 40px);
}
.multi-select-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  font-size: 13px;
  min-width: 0;
}
.multi-select-info strong { font-size: 16px; color: var(--accent); }
.multi-select-info span {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.multi-select-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Multi-start modal rows */
.multi-start-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.multi-start-pc { display: grid; gap: 4px; min-width: 0; }
.multi-start-pc strong { font-size: 14px; color: var(--text); }
.multi-start-pc span { font-size: 12px; color: var(--muted); }
.multi-start-user { width: 100%; }

/* Task Manager action button color */
.pc-action-btn.taskmgr {
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.28);
  color: #22d3ee;
}
.pc-action-btn.taskmgr:hover { background: rgba(34,211,238,.22); }

/* Hint about Ctrl+click */
.map-multi-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
  z-index: 5;
  pointer-events: none;
}