/* ===== Theme tokens: change the brand palette here ===== */
:root {
  --bg: #080a10;
  --surface: #11141d;
  --surface-2: #171b27;
  --line: #252a38;
  --text: #f2f4ff;
  --muted: #9098ad;
  --primary: #7c5cff;
  --primary-2: #20d9ff;
  --green: #38e89d;
  --red: #ff5575;
  --yellow: #ffc95c;
  --radius: 18px;
}
* { box-sizing: border-box }
html { color-scheme: dark; background: var(--bg) }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, color-mix(in srgb,var(--primary) 11%,transparent), transparent 35%), var(--bg); color: var(--text); font-family: Vazirmatn,Tahoma,sans-serif; line-height: 1.7 }
a { color: inherit; text-decoration: none }
button,input,select,textarea { font: inherit }
.ambient { position: fixed; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(130px); opacity: .07; pointer-events: none; z-index: -1 }
.ambient-one { top: 5%; right: -10%; background: var(--primary) }
.ambient-two { bottom: -15%; left: -10%; background: var(--primary-2) }
.topbar { min-height: 76px; padding: 0 max(24px,calc((100vw - 1280px)/2)); display: flex; align-items: center; gap: 38px; border-bottom: 1px solid var(--line); background: rgba(8,10,16,.8); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20 }
.brand { display: flex; align-items: center; gap: 11px; margin-left: auto }
.brand span:last-child { display: grid; line-height: 1.25 }.brand small { color: var(--muted); font-size: 10px; letter-spacing: .02em }
.logo-placeholder { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb,var(--primary) 70%,white); border-radius: 12px; color: white; background: linear-gradient(145deg,var(--primary),#3f2b87); font-weight: 900; box-shadow: 0 0 24px color-mix(in srgb,var(--primary) 35%,transparent) }
.topbar nav { display: flex; gap: 4px }.topbar nav a { padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: 14px }.topbar nav a:hover { color: white; background: var(--surface-2) }
.userbox { display: flex; align-items: center; gap: 9px; font-size: 13px }.userbox form { display: inline }.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green) }
.link-button { background: none; border: 0; color: var(--muted); cursor: pointer }.link-button:hover { color: var(--red) }
.shell { width: min(1280px,calc(100% - 40px)); margin: 0 auto; padding: 38px 0 70px }
h1,h2,h3,p { margin-top: 0 }h1 { margin-bottom: 8px; font-size: clamp(28px,4vw,46px); line-height: 1.2 }h2 { font-size: 19px }h3 { font-size: 22px }
.eyebrow { color: var(--primary-2); font-weight: 700; font-size: 12px; letter-spacing: .08em; margin-bottom: 10px }
.muted,.page-head p,.hero p,.section-head p { color: var(--muted) }
.hero,.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px }.hero.compact { padding: 35px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(110deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),var(--surface) 60%) }.hero.compact h1 { font-size: clamp(27px,3.4vw,41px) }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap }
.btn { border: 1px solid transparent; padding: 11px 17px; border-radius: 11px; color: white; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 650; transition: .16s ease }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1) }.btn.primary { background: var(--primary); box-shadow: 0 8px 28px color-mix(in srgb,var(--primary) 25%,transparent) }.btn.ghost { background: var(--surface-2); border-color: var(--line) }.btn.danger { background: color-mix(in srgb,var(--red) 18%,var(--surface)); border-color: color-mix(in srgb,var(--red) 50%,var(--line)); color: #ff9aae }.btn.small { padding: 7px 11px; border-radius: 8px; font-size: 12px }.btn.wide { width: 100% }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17,20,29,.92); padding: 24px }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }.section-head { display: flex; justify-content: space-between; align-items: center; margin: 25px 0 14px }.panel>.section-head { margin-top: 0 }.section-head h2 { margin: 0 }.section-head a { color: var(--primary-2); font-size: 13px }
.reservation-row { display: flex; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line) }.reservation-row:last-child { border: 0 }.reservation-row>span:nth-child(2) { display: grid; flex: 1 }.reservation-row small { color: var(--muted) }.station-icon { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px; font-size: 10px }
.badge { display: inline-flex; width: max-content; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-style: normal }.badge.success { color: var(--green); background: color-mix(in srgb,var(--green) 10%,transparent) }.badge.warning { color: var(--yellow); background: color-mix(in srgb,var(--yellow) 10%,transparent) }.badge.danger { color: var(--red); background: color-mix(in srgb,var(--red) 10%,transparent) }.badge.info { color: var(--primary-2); background: color-mix(in srgb,var(--primary-2) 10%,transparent) }.badge.muted,.badge.neutral { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line) }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 30px }.metric { min-height: 120px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); display: grid; grid-template-columns: 1fr auto; align-items: center }.metric small { color: var(--muted) }.metric b { font-size: 34px; grid-row: 2 }.metric-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; grid-row: span 2 }.metric-icon.green { color: var(--green); background: color-mix(in srgb,var(--green) 12%,transparent) }.metric-icon.red { color: var(--red); background: color-mix(in srgb,var(--red) 12%,transparent) }.metric-icon.purple { color: var(--primary); background: color-mix(in srgb,var(--primary) 12%,transparent) }.metric-icon.cyan { color: var(--primary-2); background: color-mix(in srgb,var(--primary-2) 12%,transparent) }
.station-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px }.station-card { text-align: right; color: var(--text); min-height: 230px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,var(--surface-2),var(--surface)); display: flex; flex-direction: column; align-items: stretch; position: relative; overflow: hidden }.station-card:before { content:""; position:absolute; right:0; top:0; width:3px; height:100%; background:var(--muted) }.station-card.free:before { background: var(--green); box-shadow:0 0 14px var(--green) }.station-card.busy:before { background: var(--red); box-shadow:0 0 14px var(--red) }.station-card.upcoming:before { background: var(--yellow); box-shadow:0 0 14px var(--yellow) }.station-card.disabled { opacity:.5 }.station-top { display:flex; align-items:center; gap:8px }.station-top>small { margin-right:auto;color:var(--muted) }.status-dot { width:8px;height:8px;border-radius:50%;background:var(--muted) }.free .status-dot { background:var(--green);box-shadow:0 0 9px var(--green) }.busy .status-dot { background:var(--red);box-shadow:0 0 9px var(--red) }.upcoming .status-dot { background:var(--yellow);box-shadow:0 0 9px var(--yellow) }.station-card h3 { margin: 20px 0 2px }.station-card>small,.station-card>em { color:var(--muted);font-style:normal }.station-state { margin:0;color:var(--muted);font-size:12px }.card-actions { display:flex;gap:8px;margin-top:auto;padding-top:20px }
.station-grid.mini { grid-template-columns: repeat(3,1fr) }.station-grid.mini .station-card { min-height: 135px; cursor: pointer }.station-grid.mini .station-card:hover,.station-grid.mini .station-card.selected,.station-grid.mini .station-card:has(.station-native-check:checked) { border-color:var(--primary);background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 16%,var(--surface-2)),var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 32%,transparent) }.station-grid.mini .station-card b { font-size:17px;margin:5px 0 }.station-grid.mini .station-card small { margin:0 }.station-native-check { position:absolute;opacity:0;pointer-events:none }.selection-mark { position:absolute;top:12px;left:12px;width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:transparent;font-size:13px;transition:.16s ease }.station-native-check:checked+.selection-mark { color:white;background:var(--primary);border-color:var(--primary);box-shadow:0 0 14px color-mix(in srgb,var(--primary) 45%,transparent) }
.station-section-head { display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px }.station-section-head>div { display:flex;align-items:center;gap:10px }.station-section-head h3 { margin:0;font-size:16px;color:var(--text) }.station-section-head small { color:var(--muted) }.station-section-head.vip-section,.station-section-head.tier-section { margin-top:30px }.section-symbol { min-width:38px;height:32px;padding:0 7px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--primary) 15%,var(--surface-2));color:#c9c1ff;font-size:10px;font-weight:700 }.selected-summary { display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));font-size:12px }.selected-summary span:last-child { color:var(--primary-2);font-weight:700 }
.booking-head { align-items:center }.booking-steps { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap }.booking-steps span { padding:7px 10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line) }.booking-steps span.active { color:white;background:color-mix(in srgb,var(--primary) 20%,var(--surface-2));border-color:color-mix(in srgb,var(--primary) 60%,var(--line)) }.booking-steps i { width:18px;height:1px;background:var(--line) }.booking-layout { display:grid;grid-template-columns:1.35fr 1fr;gap:20px }.booking-layout .section-head p { margin:5px 0 0;font-size:12px }.form-title { display:flex;align-items:center;gap:10px;margin-bottom:20px }.form-title>span { width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--primary);font-size:13px;font-weight:700 }.form-title h2 { margin:0 }.form-title p { margin:2px 0 0;color:var(--muted);font-size:12px }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:17px }.form-grid label,.stack label { color:#c7ccdc;font-size:13px;display:grid;gap:7px }.form-grid .full { grid-column:1/-1 }
input,select,textarea { width:100%;border:1px solid var(--line);background:#0c0f17;color:var(--text);padding:12px 13px;border-radius:10px;outline:none }.form-grid input:focus,.form-grid select:focus,textarea:focus,.stack input:focus { border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent) }.form-grid label>small { color:var(--muted) }.errorlist { margin:0;padding:0;list-style:none;color:#ff8aa1;font-size:11px }.summary { display:flex;justify-content:space-between;background:var(--surface-2);padding:14px;border-radius:10px }.summary span { color:var(--muted) }.narrow { max-width:760px;margin:auto }.stack { display:grid;gap:18px }.stack p { margin:0 }
.login-shell { min-height:100vh;display:grid;place-items:center;padding:30px }.login-card { width:min(430px,100%);border:1px solid var(--line);border-radius:24px;padding:38px;background:rgba(17,20,29,.95);box-shadow:0 28px 100px rgba(0,0,0,.45) }.login-brand { text-align:center;margin-bottom:30px }.login-brand p { color:var(--muted);letter-spacing:.3em;font-size:9px }.logo-large { width:68px;height:68px;font-size:27px;border-radius:18px }.login-card h1 { font-size:34px }.login-card>small { display:block;text-align:center;margin-top:20px }
.messages { position:fixed;top:90px;left:25px;z-index:50;width:min(400px,calc(100% - 50px)) }.alert { padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);margin-bottom:8px }.alert.success { border-color:color-mix(in srgb,var(--green) 50%,var(--line));color:var(--green) }.alert.error { border-color:color-mix(in srgb,var(--red) 50%,var(--line));color:#ff9aae }
.table-wrap { overflow:auto;padding:0 }table { width:100%;border-collapse:collapse;white-space:nowrap }th,td { padding:15px 18px;text-align:right;border-bottom:1px solid var(--line) }th { color:var(--muted);font-size:12px;font-weight:500 }td { font-size:13px }.mono { font-family:Consolas,monospace;color:var(--primary-2) }.empty { color:var(--muted);text-align:center;padding:32px }
.tabs { display:flex;background:var(--surface);border:1px solid var(--line);padding:4px;border-radius:11px }.tabs a { padding:8px 13px;border-radius:8px;color:var(--muted) }.tabs a.active { background:var(--primary);color:white }.detail-card { max-width:820px;margin:auto;text-align:center }.confirmation-mark { width:58px;height:58px;display:grid;place-items:center;margin:0 auto 15px;border-radius:50%;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green);font-size:26px }.detail-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0 }.detail-grid div { display:grid;gap:6px;padding:15px;background:var(--surface-2);border-radius:11px }.detail-grid small { color:var(--muted) }.payment-note { background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:#c9c1ff;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));padding:13px;border-radius:11px }.admin-note { text-align:right;margin-top:16px;padding:15px;background:#15120c;border:1px solid #3a3020;border-radius:11px }.cancel-form { display:flex;gap:10px;margin-top:22px }
.quick-links { display:flex;gap:10px;flex-wrap:wrap;margin-top:20px }.quick-links a { color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:9px }.live-pill { display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:11px;background:color-mix(in srgb,var(--green) 8%,transparent);padding:5px 9px;border-radius:20px }.live-pill i { width:6px;height:6px;border-radius:50%;background:var(--green) }
.inline-filter { display:flex;gap:7px;align-items:center }.inline-filter input { width:150px;padding:7px 9px;font-size:12px }
.schedule { overflow:auto }.schedule-row { min-width:850px;display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line);padding:12px 0 }.schedule-station { display:grid }.schedule-station small { color:var(--muted) }.schedule-track { min-height:48px;display:flex;gap:6px;align-items:center;position:relative;padding:0 10px }.track-line { position:absolute;inset:50% 0 auto;border-top:1px dashed var(--line) }.schedule-block { position:relative;background:color-mix(in srgb,var(--primary) 22%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 55%,var(--line));padding:7px 10px;border-radius:8px;font-size:11px }.schedule-empty { position:relative;color:var(--muted);font-size:11px }.searchbar { display:flex;gap:10px;margin-bottom:15px }.guide { color:var(--muted);line-height:2.2 }.import-result { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px }.import-result>div { padding:12px;background:var(--surface-2);border-radius:10px;display:grid }.import-result b { font-size:24px }.import-result small { color:var(--muted) }.error-text { color:var(--red);grid-column:1/-1 }.stat-row { display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0 }.stat-row b { color:var(--primary-2) }
.kiosk-shell { min-height:100vh;display:grid;place-items:center;padding:28px }.kiosk-card { width:min(720px,100%);padding:45px;border:1px solid var(--line);border-radius:30px;background:var(--surface);text-align:center;position:relative;overflow:hidden }.kiosk-card:before { content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--green);box-shadow:0 0 30px var(--green) }.kiosk-card.busy:before { background:var(--red);box-shadow:0 0 30px var(--red) }.kiosk-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:35px }.kiosk-card h1 { font-size:64px }.kiosk-state { color:var(--green);font-size:18px }.kiosk-card.busy .kiosk-state { color:var(--red) }.next-box { display:flex;align-items:center;gap:20px;margin-top:40px;padding:18px;background:var(--surface-2);border-radius:13px }.next-box b { margin-right:auto }.error-code { font-size:80px;font-weight:900;color:var(--primary) }
@media (max-width:1000px) { .topbar nav { display:none }.metric-grid,.station-grid { grid-template-columns:repeat(2,1fr) }.booking-layout { grid-template-columns:1fr } }
@media (max-width:650px) { .shell { width:min(100% - 24px,1280px);padding-top:22px }.topbar { padding:0 14px }.brand { margin-left:auto }.userbox { font-size:0 }.hero,.page-head { align-items:flex-start;flex-direction:column }.booking-steps { width:100%;overflow:auto;padding-bottom:3px }.hero.compact { padding:23px }.metric-grid { grid-template-columns:1fr 1fr }.metric { min-height:95px }.metric b { font-size:25px }.station-grid,.station-grid.mini,.split { grid-template-columns:1fr }.form-grid { grid-template-columns:1fr }.form-grid .full { grid-column:auto }.detail-grid { grid-template-columns:1fr 1fr }.cancel-form { flex-direction:column }.login-card { padding:28px 22px }.kiosk-card h1 { font-size:44px }.import-result { grid-template-columns:1fr 1fr } }

/* ===== Figma Make design sync ===== */
:root {
  --bg: #080A10;
  --surface: #11141D;
  --surface-2: #171B27;
  --surface-deep: #0E1019;
  --line: #252A38;
  --text: #E8EAEF;
  --muted: #8891A8;
  --dim: #4A5168;
  --primary: #7C5CFF;
  --primary-soft: #9B7BFF;
  --primary-2: #20D9FF;
  --green: #38E89D;
  --red: #FF5575;
  --yellow: #FFC95C;
}
html { background:var(--bg) }
body { background:var(--bg);color:var(--text);font-feature-settings:"ss02";line-height:1.65 }
body:before { content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,rgba(124,92,255,.035),transparent 35%);z-index:-1 }
.ambient { display:none }
.shell { width:min(1200px,calc(100% - 40px));margin:0 auto;padding:24px 0 64px }
h1 { font-size:22px;line-height:1.3;font-weight:800 } h2 { font-size:16px;font-weight:700 } h3 { font-size:15px;font-weight:700 }
.panel { background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px }
.btn { min-height:38px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;transform:none }
.btn:hover { transform:none;filter:brightness(1.08) }
.btn.primary { background:linear-gradient(135deg,var(--primary),var(--primary-soft));box-shadow:0 4px 16px rgba(124,92,255,.22) }
.btn.secondary,.btn.ghost { background:var(--surface-2);border-color:var(--line);color:var(--text) }
.btn.ghost { background:transparent;color:var(--muted) }.btn.bordered { border:1px solid var(--line) }
.btn.danger { background:rgba(255,85,117,.1);border-color:rgba(255,85,117,.25);color:var(--red) }
.btn.small { min-height:32px;padding:0 12px;border-radius:9px;font-size:12px }
input,select,textarea { background:var(--surface-deep);border:1px solid var(--line);color:var(--text);border-radius:10px;min-height:42px;padding:0 14px }
textarea { padding:10px 14px }.form-grid label,.stack label,.field-label,.choice-field>label { color:var(--muted);font-size:13px;font-weight:500 }
input:focus,select:focus,textarea:focus { border-color:var(--primary);box-shadow:none;outline:2px solid rgba(124,92,255,.14) }

/* Navigation */
.topbar { min-height:60px;height:60px;padding:0 24px;gap:20px;background:rgba(8,10,16,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(16px) }
.brand { margin:0;gap:10px;flex-shrink:0 }.brand span:last-child { line-height:1.1 }.brand b { font-size:14px;font-weight:800;letter-spacing:.02em }.brand small { color:var(--dim);font-size:10px;margin-top:4px }
.logo-placeholder { width:36px;height:36px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:13px;font-weight:800;box-shadow:0 0 20px rgba(124,92,255,.4) }
.topbar nav { display:flex;align-items:center;justify-content:center;gap:2px;flex:1 }
.topbar nav a { padding:6px 14px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:500 }.topbar nav a:hover { color:var(--text);background:rgba(255,255,255,.04) }.topbar nav a.active { color:var(--primary);background:rgba(124,92,255,.12);font-weight:600 }
.topbar-actions { display:flex;align-items:center;gap:10px;flex-shrink:0 }.topbar-actions form { display:flex }.topbar-user { color:var(--muted);font-size:12px }
.icon-button { width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);cursor:pointer }.icon-button:hover { color:var(--text);border-color:var(--primary) }
.mobile-menu-button { display:none }

/* Login */
.login-shell { min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden }
.login-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(37,42,56,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(37,42,56,.3) 1px,transparent 1px);background-size:40px 40px }
.login-glow { position:absolute;border-radius:50%;pointer-events:none }.login-glow-primary { width:600px;height:600px;top:10%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(124,92,255,.08),transparent 70%) }.login-glow-cyan { width:300px;height:300px;bottom:5%;right:8%;background:radial-gradient(circle,rgba(32,217,255,.05),transparent 70%) }
.login-card { width:min(420px,100%);padding:40px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.6);position:relative;z-index:1 }
.login-brand { text-align:center;margin-bottom:36px }.logo-large { width:64px;height:64px;border-radius:14px;font-size:24px;margin:0 auto 16px }.login-brand h1 { margin:0 0 4px;font-size:26px;letter-spacing:.05em;background:linear-gradient(135deg,var(--text),var(--muted));background-clip:text;color:transparent }.login-brand p { margin:0;color:var(--dim);font-size:13px;letter-spacing:0 }
.login-form { gap:16px }.login-submit { min-height:46px;margin-top:4px }.login-notice { margin-top:28px;padding:12px 16px;background:rgba(32,217,255,.05);border:1px solid rgba(32,217,255,.1);border-radius:10px;color:var(--dim);font-size:12px;line-height:1.7;text-align:center }.login-version { display:block;text-align:center;margin-top:20px;color:var(--line);font-size:11px }

/* Admin dashboard */
.day-header { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px }.day-header h1 { margin:0 0 4px }.day-header p { margin:0;color:var(--dim);font-size:13px }
.figma-metrics { grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px }.figma-metrics .metric { min-height:126px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;align-items:flex-start;justify-content:space-between }.figma-metrics .metric>div { display:flex;flex-direction:column }.figma-metrics .metric small { color:var(--muted);font-size:13px;font-weight:500;order:0 }.figma-metrics .metric b { color:var(--text);font-size:30px;line-height:1;margin:10px 0 0;order:1 }.figma-metrics .metric em { color:var(--dim);font-size:12px;font-style:normal;margin-top:6px;order:2 }.figma-metrics .metric-icon { width:44px;height:44px;border-radius:12px;order:2 }
.figma-system-section { margin-bottom:36px }.figma-section-title { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px }.figma-section-title>div { display:flex;align-items:center;gap:10px }.figma-section-title h2 { margin:0;font-size:14px }.figma-section-title>span { color:var(--dim);font-size:13px }.figma-section-title i { width:4px;height:18px;border-radius:2px;background:var(--primary) }.eco-section .figma-section-title i,.eco-category .figma-section-title i { background:var(--primary-2) }.vip-section .figma-section-title i,.vip-category .figma-section-title i { background:var(--yellow) }
.dashboard-station-grid { grid-template-columns:repeat(3,1fr);gap:14px }
.system-card { position:relative;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden }.system-card.busy { border-color:rgba(255,85,117,.2) }.category-stripe { position:absolute;top:0;right:0;width:3px;height:40%;min-height:24px;background:var(--primary);border-radius:0 14px 0 0 }.category-eco .category-stripe { background:var(--primary-2) }.category-vip .category-stripe { background:var(--yellow) }
.system-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;padding-right:8px }.system-card-top h3 { margin:0 0 4px;color:var(--text) }.system-meta { display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px }.category-chip { padding:2px 8px;border-radius:6px;color:var(--primary);background:rgba(124,92,255,.08);font-size:11px;font-weight:600 }.category-eco .category-chip { color:var(--primary-2);background:rgba(32,217,255,.08) }.category-vip .category-chip { color:var(--yellow);background:rgba(255,201,92,.08) }
.status-badge { display:inline-flex;align-items:center;gap:5px;width:max-content;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap }.status-badge i { width:6px;height:6px;border-radius:50%;background:currentColor }.status-badge.success { color:var(--green);background:rgba(56,232,157,.1) }.status-badge.danger { color:var(--red);background:rgba(255,85,117,.1) }.status-badge.warning { color:var(--yellow);background:rgba(255,201,92,.1) }.status-badge.neutral { color:var(--muted);background:rgba(136,145,168,.1) }.status-badge.large { padding:6px 14px;border:1px solid rgba(255,201,92,.2) }
.system-current { display:flex;align-items:center;gap:6px;padding:7px 10px;margin:0 0 10px;background:var(--surface-deep);border-radius:8px;color:var(--muted);font-size:12px }.system-current b { color:var(--text);font-weight:600 }.danger-dot { color:var(--red);font-size:10px }.warning-dot { color:var(--yellow);font-size:10px }
.system-actions { display:flex;gap:8px;margin-top:12px }.system-actions .btn { flex:1 }
.quick-links { border-top:1px solid var(--line);padding-top:18px }

/* Customer dashboard */
.customer-shell { max-width:780px;margin:0 auto;padding:8px 0 }.customer-welcome { position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px;margin-bottom:28px;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:20px }.customer-welcome:before { content:"";position:absolute;width:180px;height:180px;left:-30px;top:-30px;background:radial-gradient(circle,rgba(124,92,255,.12),transparent 70%) }.customer-welcome>div,.customer-welcome>a { position:relative }.customer-welcome small { color:var(--dim);font-size:13px }.customer-welcome h1 { margin:6px 0 4px;font-size:24px }.customer-welcome p { margin:0;color:var(--muted);font-size:13px }
.customer-reservation-section { margin-bottom:28px }.customer-section-title { display:flex;align-items:center;gap:8px;margin-bottom:14px }.customer-section-title>span { padding:2px 8px;border-radius:6px;background:rgba(255,201,92,.12);color:var(--yellow);font-size:12px;font-weight:600 }.customer-section-title h2 { margin:0 }.customer-section-title>a { margin-right:auto;color:var(--primary-2);font-size:12px }.customer-reservation-list { display:flex;flex-direction:column;gap:12px }
.customer-reservation-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:.18s }.customer-reservation-row:hover { border-color:var(--primary);background:rgba(19,23,34,.8) }.customer-reservation-row>i { width:4px;height:44px;border-radius:2px;background:var(--yellow);flex-shrink:0 }.history-row { opacity:.72 }.history-row>i { background:var(--dim) }.reservation-main { flex:1;min-width:0 }.reservation-main>div { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px }.reservation-main b { font-size:13px }.reservation-main span { padding:1px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:11px }.reservation-main small { color:var(--dim);font-size:12px }.reservation-side { display:flex;flex-direction:column;align-items:flex-end;gap:6px }.reservation-side>b { font-size:14px }.reservation-side>small { color:var(--dim) }

/* Reservation details */
.figma-detail-shell { max-width:620px;margin:0 auto;padding:8px 0 }.reservation-id-head { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px }.reservation-id-head small { color:var(--dim);font-size:13px }.reservation-id-head h1 { margin:4px 0 0;font-size:26px;background:linear-gradient(135deg,var(--primary),var(--primary-2));background-clip:text;color:transparent }.figma-detail-card { margin-bottom:16px }.detail-section-label { color:var(--dim);font-size:12px;font-weight:600;margin-bottom:10px }.reserved-systems { display:flex;flex-direction:column;gap:8px }.reserved-system-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--surface-deep);border-radius:10px }.reserved-system-row>div { display:flex;align-items:center;gap:10px }.reserved-system-row>div>i { width:8px;height:8px;border-radius:50%;background:var(--primary) }.reserved-system-row.category-eco>div>i { background:var(--primary-2) }.reserved-system-row.category-vip>div>i { background:var(--yellow) }.reserved-system-row span { display:flex;flex-direction:column }.reserved-system-row b { font-size:14px }.reserved-system-row small { color:var(--dim);font-size:11px }.reserved-system-row em { color:var(--muted);font-size:13px;font-style:normal }.figma-divider { height:1px;background:var(--line);margin:20px 0 }.figma-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px }.figma-detail-grid div { display:flex;flex-direction:column;gap:4px }.figma-detail-grid small,.detail-total small,.detail-note small { color:var(--dim);font-size:11px;font-weight:600 }.figma-detail-grid b { font-size:14px }.purple-text { color:var(--primary) }.cyan-text { color:var(--primary-2) }.detail-total { display:flex;align-items:center;justify-content:space-between;gap:16px }.detail-total>div { display:flex;flex-direction:column }.detail-total strong { font-size:24px;background:linear-gradient(135deg,var(--primary),var(--primary-2));background-clip:text;color:transparent }.detail-total>span { padding:8px 14px;border:1px solid rgba(255,201,92,.2);border-radius:10px;background:rgba(255,201,92,.08);color:var(--yellow);font-size:12px }.payment-alert,.selection-alert { display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid rgba(32,217,255,.2);border-radius:10px;background:rgba(32,217,255,.08);font-size:13px }.payment-alert>span,.selection-alert>span { color:var(--primary-2);font-weight:700 }.detail-note { margin-top:16px }.detail-note p { margin:6px 0 0;color:var(--muted);font-size:13px }

/* Three-step booking */
.figma-booking { scroll-margin-top:80px }.booking-page-header { margin-bottom:28px }.booking-page-header h1 { margin:0 0 4px }.booking-page-header p { margin:0;color:var(--dim);font-size:13px }.figma-progress { display:flex;align-items:center;margin-bottom:32px }.progress-step { display:flex;align-items:center;gap:10px;cursor:default }.progress-step span { width:34px;height:34px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;background:var(--surface-2);color:var(--dim);font-size:13px;font-weight:700 }.progress-step b { color:var(--dim);font-size:13px;font-weight:500;white-space:nowrap }.progress-step.active span { background:var(--primary);border-color:var(--primary-soft);color:white;box-shadow:0 0 12px rgba(124,92,255,.4) }.progress-step.active b { color:var(--text);font-weight:700 }.progress-step.done { cursor:pointer }.progress-step.done span { background:var(--green);color:white }.progress-step.done b { color:var(--green) }.figma-progress>i { flex:1;height:2px;margin:0 12px;background:var(--line);border-radius:1px }.figma-progress>i.done { background:var(--green) }
.figma-booking-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start }.booking-step-content [hidden],.booking-summary-panel [hidden] { display:none!important }.booking-category { margin-bottom:28px }.booking-system-grid { display:grid;gap:12px }.booking-system-grid.three-columns { grid-template-columns:repeat(3,1fr) }.booking-system-grid.two-columns { grid-template-columns:repeat(2,1fr) }
.booking-system-card { position:relative;display:flex;flex-direction:column;min-height:132px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;overflow:hidden;transition:.18s }.booking-system-card.busy { border-color:rgba(255,85,117,.2) }.booking-system-card.selected,.booking-system-card:has(.station-native-check:checked) { background:rgba(124,92,255,.06);border:1.5px solid var(--primary);box-shadow:0 0 0 1px var(--primary),0 0 20px rgba(124,92,255,.15) }.booking-system-card.inactive { opacity:.55;cursor:not-allowed }.booking-system-card .selection-mark { top:16px;left:16px;width:22px;height:22px;border:2px solid var(--line);background:transparent }.booking-system-info { padding-right:8px;margin-bottom:auto }.booking-system-info>b { display:block;margin-bottom:5px;font-size:15px }.booking-system-info>div { display:flex;align-items:center;gap:6px }.booking-system-info small { color:var(--dim);font-size:11px }.booking-system-card>.status-badge { margin-top:10px }
.booking-form-card>h2,.booking-summary-card>h2 { margin:0 0 20px }.booking-form-card { display:flex;flex-direction:column;gap:20px }.field-label { display:flex;flex-direction:column;gap:6px }.field-label small { color:var(--dim) }.choice-field { display:flex;flex-direction:column;gap:8px }.time-choice-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px }.time-choice-grid button { min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-deep);color:var(--muted);font:inherit;font-size:12px;cursor:pointer }.time-choice-grid button.selected { border:1.5px solid var(--primary);background:rgba(124,92,255,.12);color:var(--primary);font-weight:700 }.native-choice-select { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0) }.duration-dropdown { position:relative }.duration-dropdown select { width:100%;min-height:48px;padding:0 16px 0 46px;border:1px solid var(--line);border-radius:10px;appearance:none;background:var(--surface-deep);color:var(--text);font:inherit;cursor:pointer;outline:none }.duration-dropdown select:hover { border-color:rgba(124,92,255,.55) }.duration-dropdown select:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,255,.13) }.duration-dropdown>span { position:absolute;left:16px;top:50%;transform:translateY(-55%);color:var(--primary);font-size:22px;pointer-events:none }.end-time-display { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid rgba(32,217,255,.15);border-radius:10px;background:rgba(32,217,255,.06) }.end-time-display span { color:var(--muted);font-size:13px }.end-time-display b { color:var(--primary-2);font-size:16px }.booking-info-grid { gap:16px }.booking-info-grid label { display:flex;flex-direction:column;gap:6px }.booking-summary-panel { position:sticky;top:80px;display:flex;flex-direction:column;gap:16px }.selected-system-summary { display:flex;flex-direction:column;gap:8px;margin-bottom:16px }.summary-empty { padding:24px 0;text-align:center;color:var(--dim);font-size:13px }.selected-system-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--surface-deep);border-radius:8px }.selected-system-row span { display:flex;flex-direction:column }.selected-system-row b { font-size:13px }.selected-system-row small { color:var(--dim);font-size:11px }.selected-system-row em { color:var(--muted);font-size:12px;font-style:normal }.summary-time { display:flex;flex-direction:column;gap:6px;padding:10px 12px;margin-bottom:16px;background:var(--surface-deep);border-radius:8px }.summary-time>div { display:flex;justify-content:space-between;font-size:12px }.summary-time span { color:var(--dim) }.summary-time b { color:var(--text) }.summary-time>div:nth-child(3) b { color:var(--primary-2) }.summary-total { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line) }.summary-total span { color:var(--muted);font-size:13px }.summary-total b { font-size:18px;background:linear-gradient(135deg,var(--primary),var(--primary-2));background-clip:text;color:transparent }.booking-actions { display:flex;flex-direction:column;gap:10px }.selection-alert { margin-bottom:16px }

@media (max-width:1000px) {
  .figma-metrics { grid-template-columns:repeat(2,1fr) }
  .dashboard-station-grid { grid-template-columns:repeat(2,1fr) }
  .figma-booking-layout { grid-template-columns:1fr }
  .booking-summary-panel { position:static }
}
@media (max-width:768px) {
  .topbar nav { display:none;position:absolute;top:60px;right:0;left:0;padding:12px;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch }
  .topbar.mobile-open nav { display:flex }.topbar nav a { text-align:right }
  .mobile-menu-button { display:grid }.topbar-user { display:none }.nav-reserve { display:none }
  .customer-reservation-row { align-items:flex-start;flex-wrap:wrap }.reservation-side { width:100%;padding-right:20px;flex-direction:row;justify-content:space-between;align-items:center }
  .figma-progress b { display:none }.figma-progress>i { margin:0 8px }
  .booking-system-grid.three-columns,.booking-system-grid.two-columns { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px) {
  .shell { width:min(100% - 24px,1200px);padding-top:20px }.topbar { padding:0 12px }.topbar-actions { gap:6px }
  .login-card { padding:30px 22px }
  .figma-metrics { grid-template-columns:1fr 1fr;gap:10px }.figma-metrics .metric { min-height:108px;padding:14px }.figma-metrics .metric b { font-size:25px }.figma-metrics .metric-icon { width:36px;height:36px }
  .dashboard-station-grid,.booking-system-grid.three-columns,.booking-system-grid.two-columns { grid-template-columns:1fr }
  .figma-section-title { align-items:flex-start }.figma-section-title>span { font-size:11px }
  .customer-welcome { padding:22px }.customer-reservation-row { padding:14px }
  .figma-detail-grid { grid-template-columns:1fr 1fr }.detail-total { align-items:flex-start;flex-direction:column }.reserved-system-row { align-items:flex-start;flex-direction:column }
  .time-choice-grid { grid-template-columns:repeat(4,1fr) }.booking-info-grid { grid-template-columns:1fr }.booking-info-grid .full { grid-column:auto }
}

/* ===== Game Era brand assets and systems showcase ===== */
.brand-logo-frame { width:46px;height:46px;display:block;overflow:hidden;border:1px solid rgba(193,59,147,.32);border-radius:12px;background:#000;box-shadow:0 0 22px rgba(193,59,147,.2) }
.brand-logo { width:100%;height:100%;object-fit:cover;transform:scale(1.95) translateY(-2%);transform-origin:center;display:block }
.login-logo-frame { width:min(280px,82vw);height:175px;display:block;margin:0 auto 16px;overflow:hidden;border-radius:18px;background:#000;box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 40px rgba(193,59,147,.12) }
.login-logo { width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block }
.login-brand p { color:#d0d2d6;letter-spacing:.08em;font-size:12px }

.systems-hero { min-height:300px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:28px;margin-bottom:22px;padding:34px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 18% 20%,rgba(193,59,147,.18),transparent 36%),linear-gradient(135deg,#15111b,var(--surface) 58%,#0d0f16);overflow:hidden }
.systems-hero-copy { position:relative;z-index:1 }.systems-hero h1 { max-width:650px;margin-bottom:10px;font-size:clamp(30px,4.5vw,54px) }.systems-hero p { max-width:640px;margin-bottom:24px;color:var(--muted) }
.systems-counts { display:flex;gap:12px;flex-wrap:wrap }.systems-counts span { min-width:138px;padding:10px 14px;border:1px solid rgba(193,59,147,.18);border-radius:12px;background:rgba(0,0,0,.24);color:var(--muted);font-size:12px }.systems-counts b { margin-left:5px;color:#e966bd;font-size:18px }
.systems-logo-panel { min-height:230px;overflow:hidden;border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.32) }.systems-logo-panel img { width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block }

.pc-build-panel { display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.5fr);gap:18px;margin-bottom:36px }.pc-build-intro,.pc-spec-grid { border:1px solid var(--line);border-radius:18px;background:var(--surface) }.pc-build-intro { padding:24px;background:linear-gradient(145deg,rgba(193,59,147,.09),var(--surface) 46%) }.build-chip { display:inline-flex;padding:5px 10px;margin-bottom:14px;border:1px solid rgba(193,59,147,.25);border-radius:999px;background:rgba(193,59,147,.08);color:#e966bd;font-size:11px;font-weight:700 }.pc-build-intro h2 { margin-bottom:8px;font-size:20px }.pc-build-intro>p { margin-bottom:20px;color:var(--muted);font-size:13px }
.pc-photo-slot { min-height:88px;display:flex;align-items:center;gap:14px;padding:14px;border:1px dashed rgba(193,59,147,.3);border-radius:14px;background:rgba(0,0,0,.18) }.pc-photo-slot>span { width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#c13b93;color:white;font:800 13px/1 Consolas,monospace;box-shadow:0 0 24px rgba(193,59,147,.25) }.pc-photo-slot>div { display:grid }.pc-photo-slot b { font-size:13px }.pc-photo-slot small { color:var(--dim);font-size:11px }
.pc-spec-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;overflow:hidden;background:var(--line) }.pc-spec-card { min-height:90px;display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface) }.pc-spec-card:last-child { grid-column:1/-1 }.pc-spec-card>span { min-width:54px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(193,59,147,.1);color:#e966bd;font:700 10px/1 Consolas,monospace }.pc-spec-card>div { min-width:0;display:grid;gap:3px }.pc-spec-card small { color:var(--dim);font-size:11px }.pc-spec-card b { overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap;text-align:right }
.inventory-toolbar { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:4px }.inventory-toolbar h2 { margin:0;font-size:22px }.inventory-toolbar .eyebrow { margin-bottom:4px }
.inventory-tier { scroll-margin-top:80px }.inventory-grid { grid-template-columns:repeat(3,1fr) }.station-inventory-card { min-height:250px }.station-inventory-card.tier-eco:before { background:var(--primary-2);box-shadow:0 0 14px var(--primary-2) }.station-inventory-card.tier-vip:before { background:var(--yellow);box-shadow:0 0 14px var(--yellow) }.station-availability { margin-right:auto;color:var(--green);font-size:11px }.disabled .station-availability { color:var(--muted) }
.station-machine-mark { height:58px;display:grid;place-items:center;margin-top:16px;border-radius:12px;background:radial-gradient(circle,rgba(193,59,147,.14),transparent 70%),var(--surface-deep) }.station-machine-mark>span { width:42px;height:28px;border:2px solid #c13b93;border-radius:5px;position:relative;box-shadow:0 0 18px rgba(193,59,147,.2) }.station-machine-mark>span:before { content:"";position:absolute;width:12px;height:2px;right:13px;bottom:-7px;background:#c13b93 }.station-machine-mark>span:after { content:"";position:absolute;width:24px;height:2px;right:7px;bottom:-10px;background:#c13b93 }.station-inventory-card h3 { margin:14px 0 0 }.station-code { margin:0;color:var(--dim);font:11px/1.4 Consolas,monospace;text-align:right }.station-price { margin-top:10px;color:#e966bd;font-size:16px }.station-price small { color:var(--muted);font-size:10px;font-weight:500 }.station-inventory-card .card-actions { padding-top:16px }

@media (max-width:1000px) {
  .systems-hero { grid-template-columns:1fr }.systems-logo-panel { min-height:210px }.pc-build-panel { grid-template-columns:1fr }.inventory-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  .brand-logo-frame { width:42px;height:42px }.brand span:last-child { display:none }.systems-hero { padding:24px }.systems-logo-panel { min-height:180px }.pc-spec-grid { grid-template-columns:1fr }.pc-spec-card:last-child { grid-column:auto }.inventory-toolbar { align-items:flex-start;flex-direction:column }.inventory-grid { grid-template-columns:1fr }
}
@media (max-width:560px) {
  .login-logo-frame { height:150px }.systems-hero { min-height:0;padding:20px }.systems-counts span { flex:1 }.systems-logo-panel { min-height:150px }.pc-build-intro { padding:18px }.pc-spec-card { padding:14px }.station-section-head { align-items:flex-start;gap:12px }.station-section-head>span { max-width:130px;text-align:left }
}