:root {
    --bg:#f5f7fb;
    --surface:#fff;
    --ink:#101828;
    --muted:#667085;
    --line:#e7eaf0;
    --primary:#635bff;
    --primary-dark:#5148e5;
    --success:#12b76a;
    --warning:#f79009;
    --shadow:0 12px 35px rgba(16,24,40,.07);
}

* { box-sizing:border-box; }
body {
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--ink);
}
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }

.sidebar {
    width:250px; background:#111426; color:#fff; padding:22px 16px;
    display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
}
.brand { display:flex; gap:12px; align-items:center; padding:4px 10px 30px; }
.brand-mark {
    width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,#7c6cff,#4b43d8);font-weight:800;
    box-shadow:0 8px 25px rgba(99,91,255,.35);
}
.brand strong { display:block;font-size:15px; }
.brand small { color:#98a2b3;font-size:11px; }
nav { display:grid; gap:6px; }
.nav-item {
    border:0;background:transparent;color:#98a2b3;text-align:left;
    padding:12px 13px;border-radius:10px;display:flex;gap:12px;align-items:center;
    transition:.2s;
}
.nav-item:hover,.nav-item.active { background:rgba(255,255,255,.08);color:#fff; }
.nav-item.active { box-shadow:inset 3px 0 var(--primary); }
.sidebar-bottom { margin-top:auto;padding:12px 10px;color:#667085;font-size:11px; }
.live { color:#a7f3d0;margin-bottom:8px; }
.live i { display:inline-block;width:7px;height:7px;background:#12b76a;border-radius:50%;margin-right:6px;box-shadow:0 0 0 4px rgba(18,183,106,.12); }

.main { margin-left:250px;width:calc(100% - 250px);padding:32px 40px 50px; }
.topbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:28px; }
.eyebrow { font-size:10px;font-weight:800;letter-spacing:.12em;color:#98a2b3; }
h1 { margin:5px 0 0;font-size:28px;letter-spacing:-.03em; }
h2 { margin:0;font-size:18px;letter-spacing:-.02em; }
p { color:var(--muted);margin:6px 0 0;font-size:13px; }

.primary-btn,.ghost-btn {
    border:0;border-radius:10px;padding:11px 16px;font-weight:700;
    transition:.2s;display:inline-flex;align-items:center;gap:8px;
}
.primary-btn { color:#fff;background:var(--primary);box-shadow:0 8px 18px rgba(99,91,255,.22); }
.primary-btn:hover { background:var(--primary-dark);transform:translateY(-1px); }
.ghost-btn { background:#fff;border:1px solid var(--line);color:#475467; }
.full { width:100%;justify-content:center;margin-top:22px; }

.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.stat-card {
    background:var(--surface);border:1px solid var(--line);border-radius:15px;
    padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat-card:after { content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;background:#f1efff; }
.stat-icon { width:34px;height:34px;border-radius:9px;background:#f1efff;color:var(--primary);display:grid;place-items:center;font-size:14px;margin-bottom:15px; }
.stat-card span { display:block;font-size:12px;color:var(--muted); }
.stat-card strong { display:block;font-size:26px;margin:2px 0; }
.stat-card small { color:#98a2b3;font-size:11px; }

.section-head { display:flex;justify-content:space-between;align-items:center;margin:32px 0 14px; }
.table-card,.form-card,.info-card,.retrieve-card { background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); }
.table-wrap { overflow:auto; }
table { width:100%;border-collapse:collapse;min-width:720px; }
th,td { padding:14px 18px;text-align:left;border-bottom:1px solid #f0f1f4;font-size:12px; }
th { color:#98a2b3;font-size:10px;text-transform:uppercase;letter-spacing:.08em; }
td { color:#344054; }
.ticket { color:var(--primary);font-weight:800; }
.status { display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800; }
.status.PARKED { background:#ecfdf3;color:#027a48; }
.status.REQUESTED { background:#fff7ed;color:#c2410c; }
.status.READY { background:#eef4ff;color:#3538cd; }

.form-layout { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px; }
.form-card { padding:26px; }
.card-heading { display:flex;justify-content:space-between;gap:20px;margin-bottom:24px; }
.step-pill { color:var(--primary);background:#f1efff;padding:6px 9px;border-radius:7px;font-size:9px;font-weight:800;height:max-content; }
.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
label { display:grid;gap:7px;color:#475467;font-size:11px;font-weight:700; }
input,select {
    width:100%;border:1px solid #dfe3ea;background:#fbfcfe;border-radius:9px;
    padding:11px 12px;outline:0;color:#101828;transition:.2s;
}
input:focus,select:focus { border-color:#8d86ff;box-shadow:0 0 0 3px rgba(99,91,255,.1);background:#fff; }
.info-card { padding:24px; }
.mini-label { font-size:9px;font-weight:800;letter-spacing:.1em;color:#98a2b3;margin-bottom:22px; }
.timeline { display:grid;gap:18px; }
.timeline div { display:flex;gap:12px;align-items:center;font-size:12px;color:#475467; }
.timeline b { width:28px;height:28px;border-radius:8px;background:#f1efff;color:var(--primary);display:grid;place-items:center;font-size:9px; }

.retrieve-card { padding:30px; }
.retrieve-top { display:flex;justify-content:space-between;align-items:end;gap:30px; }
.search-box { display:flex;gap:8px;width:min(480px,100%); }
.search-box input { background:#fff; }
.vehicle-result {
    margin-top:28px;border:1px solid var(--line);border-radius:13px;padding:22px;
    min-height:170px;display:grid;align-content:center;gap:5px;
}
.vehicle-result.empty { text-align:center;place-items:center; }
.empty-icon { width:42px;height:42px;border-radius:12px;background:#f4f3ff;color:var(--primary);display:grid;place-items:center;font-size:22px;margin:auto; }
.vehicle-main { display:flex;justify-content:space-between;gap:20px;align-items:start; }
.vehicle-number { font-size:24px;font-weight:850;letter-spacing:.03em; }
.vehicle-meta { display:flex;gap:20px;margin-top:14px;flex-wrap:wrap; }
.vehicle-meta div { display:grid;gap:3px; }
.vehicle-meta small { color:#98a2b3;font-size:9px;text-transform:uppercase;letter-spacing:.07em; }
.vehicle-meta strong { font-size:13px; }
.action-row { display:flex;gap:8px;margin-top:22px; }

.hidden { display:none !important; }
.toast {
    position:fixed;right:25px;bottom:25px;background:#111426;color:#fff;padding:13px 17px;
    border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.2);font-size:12px;
    transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;
}
.toast.show { transform:translateY(0);opacity:1; }

@media(max-width:900px) {
    .sidebar { width:70px;padding:18px 10px; }
    .brand { padding:4px 5px 25px; }
    .brand>div:last-child,.nav-item:not(.active)::after,.nav-item span + * { display:none; }
    .nav-item { justify-content:center;font-size:0; }
    .nav-item span { font-size:18px; }
    .main { margin-left:70px;width:calc(100% - 70px);padding:24px; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .form-layout { grid-template-columns:1fr; }
}
@media(max-width:600px) {
    .main { padding:18px; }
    .topbar { align-items:flex-start;gap:12px; }
    .topbar .primary-btn { font-size:0;padding:11px; }
    .topbar .primary-btn:first-letter { font-size:18px; }
    .stats-grid { grid-template-columns:1fr 1fr;gap:10px; }
    .field-grid { grid-template-columns:1fr; }
    .retrieve-top { display:block; }
    .search-box { margin-top:18px; }
    .vehicle-main { display:block; }
}
@media (max-width: 900px) {
    .nav-item[data-view="park"] {
        font-size: 0;
        justify-content: center;
    }

    .nav-item[data-view="park"] span {
        font-size: 22px;
        line-height: 1;
    }
}