:root {
    --purple: #7c3aed;
    --purple2: #a78bfa;
    --orange: #ff9500;
    --green:  #00ff90;
    --red:    #ff3b30;
    --bg:     #06050f;
    --bg2:    #0d0b1a;
    --bg3:    #13102a;
    --border: rgba(124,58,237,.15);
    --text:   #f0f4ff;
    --text2:  rgba(240,244,255,.55);
    --text3:  rgba(240,244,255,.25);
    --sw:     230px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:14px; overflow:hidden; }

/* Windows da input/select/date default oq ko'rinishini oldini olish */
input, select, textarea {
    color-scheme: dark;
    background-color: rgba(255,255,255,.05) !important;
    color: var(--text) !important;
}
input[type="color"] { background:none !important; padding:2px !important; }
select option { background:#0d0b1a; color:#f0f4ff; }
input::placeholder { color:rgba(240,244,255,.3) !important; }
input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.5); cursor:pointer; }
body { opacity:0; animation:fi .4s ease .05s forwards; }
@keyframes fi { to { opacity:1; } }

.bg-orb { position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.o1 { width:500px;height:500px; background:rgba(124,58,237,.08); top:-150px;left:-100px; }
.o2 { width:400px;height:400px; background:rgba(167,139,250,.05); bottom:-100px;right:-80px; }
.bg-grid {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(124,58,237,.025)1px,transparent 1px),
        linear-gradient(90deg,rgba(124,58,237,.025)1px,transparent 1px);
    background-size:44px 44px;
}

/* ── Sidebar ── */
.sidebar {
    position:fixed; top:0;left:0;bottom:0; width:var(--sw);
    background:rgba(6,5,15,.92); border-right:1px solid var(--border);
    display:flex; flex-direction:column; z-index:100; backdrop-filter:blur(16px);
}
.sidebar-logo { padding:20px 18px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
.logo-icon { width:38px;height:38px; border-radius:11px; background:rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.3); display:flex;align-items:center;justify-content:center; color:var(--purple2); font-size:17px; flex-shrink:0; }
.sidebar-logo h1 { font-size:13px; font-weight:800; line-height:1.3; }
.sidebar-logo h1 span { color:var(--purple2); }

.badge-row { padding:10px 14px 4px; }
.pending-badge { display:inline-flex;align-items:center;gap:6px; background:rgba(255,149,0,.12); border:1px solid rgba(255,149,0,.25); border-radius:20px; padding:5px 12px; font-size:11px;font-weight:700; color:var(--orange); }
.pending-badge span { font-size:14px; }

.sidebar-nav { flex:1; padding:6px 10px; overflow-y:auto; }
.nav-label { font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:10px 10px 5px; }
.nav-item { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px; }
.nav-item i { width:16px;text-align:center;font-size:13px; }
.nav-item:hover { background:rgba(124,58,237,.08);color:var(--text); }
.nav-item.active { background:rgba(124,58,237,.15);color:var(--purple2);border:1px solid rgba(124,58,237,.2); }

.sidebar-footer { padding:12px 10px; border-top:1px solid var(--border); display:flex;flex-direction:column;gap:6px; }
.footer-btn { display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;border:none;text-decoration:none;font-family:'Inter',sans-serif;transition:all .15s; }
.go-back { background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);color:var(--purple2); }
.go-admin { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--text2); }
.go-back:hover { background:rgba(124,58,237,.18); }
.go-admin:hover { background:rgba(255,255,255,.08); }

/* ── Main ── */
.main-content { margin-left:var(--sw); height:100vh; display:flex;flex-direction:column; overflow:hidden; position:relative;z-index:1; }
.topbar { display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-bottom:1px solid var(--border);background:rgba(6,5,15,.7);backdrop-filter:blur(10px);flex-shrink:0; }
.topbar-title { font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px; }
.topbar-right { display:flex;align-items:center;gap:14px; }
.topbar-clock { font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--purple2);font-weight:600; }
.topbar-date { font-size:12px;color:var(--text3); }

.page { display:none; flex:1;overflow-y:auto;padding:18px 22px; }
.page.active { display:flex;flex-direction:column;gap:14px; }

/* Filter bar */
.filter-bar { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0; }
.filter-group { display:flex;gap:8px; }
.filter-input { background:rgba(255,255,255,.05);border:1px solid rgba(124,58,237,.15);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--text);outline:none;font-family:'Inter',sans-serif;cursor:pointer; }
.filter-input:focus { border-color:rgba(124,58,237,.4); }
.btn-refresh { display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);border-radius:10px;font-size:12px;font-weight:600;color:var(--purple2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s; }
.btn-refresh:hover { background:rgba(124,58,237,.2); }

/* Reservation cards */
.res-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; transition:border-color .2s;
}
.res-card:hover { border-color:rgba(124,58,237,.3); }
.res-card-header { display:flex;align-items:center;gap:12px;padding:14px 16px; cursor:pointer; }
.res-card-header:hover { background:rgba(124,58,237,.04); }
.res-num { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0; }
.res-info { flex:1;min-width:0; }
.res-name { font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.res-time { font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace; }
.res-meta { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
.status-pill { font-size:10px;font-weight:700;padding:2px 9px;border-radius:4px; }
.sp-pending  { background:rgba(255,200,0,.12);color:#ffc800;border:1px solid rgba(255,200,0,.2); }
.sp-confirmed { background:rgba(0,255,144,.1);color:#00ff90;border:1px solid rgba(0,255,144,.2); }
.sp-suggested { background:rgba(255,149,0,.1);color:#ff9500;border:1px solid rgba(255,149,0,.2); }
.sp-rejected,.sp-cancelled { background:rgba(255,59,48,.08);color:#ff6b6b;border:1px solid rgba(255,59,48,.15); }
.sp-completed { background:rgba(255,255,255,.06);color:var(--text3);border:1px solid rgba(255,255,255,.08); }
.res-phone { font-size:11px;color:var(--text3); }

.res-body { padding:0 16px 14px;border-top:1px solid rgba(124,58,237,.06);display:none; }
.res-card.open .res-body { display:block; }
.res-details { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:12px 0; }
.rd-item { background:rgba(255,255,255,.03);border-radius:9px;padding:9px 12px; }
.rd-label { font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px; }
.rd-value { font-size:13px;font-weight:600; }
.res-actions { display:flex;gap:8px;flex-wrap:wrap;padding-top:10px; }
.action-btn { display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:all .15s; }
.ab-confirm { background:rgba(0,255,144,.12);border:1px solid rgba(0,255,144,.2);color:#00ff90; }
.ab-confirm:hover { background:rgba(0,255,144,.2); }
.ab-suggest { background:rgba(255,149,0,.1);border:1px solid rgba(255,149,0,.2);color:#ff9500; }
.ab-suggest:hover { background:rgba(255,149,0,.18); }
.ab-cancel  { background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.15);color:#ff6b6b; }
.ab-cancel:hover  { background:rgba(255,59,48,.14); }
.ab-complete { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text2); }

/* Loading */
.loading-wrap { display:flex;align-items:center;justify-content:center;padding:48px; }
.spinner { width:26px;height:26px;border:2px solid rgba(124,58,237,.2);border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px;color:var(--text3);text-align:center; }
.empty-state .ico { font-size:36px;margin-bottom:6px;opacity:.4; }

/* Page header */
.page-header { display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.page-header h2 { font-size:16px;font-weight:700; }
.btn-add { display:flex;align-items:center;gap:7px;padding:9px 16px;background:var(--purple);border:none;border-radius:10px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity .2s; }
.btn-add:hover { opacity:.85; }

/* Zone cards */
.zones-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px; }
.zone-card { background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .2s; }
.zone-card:hover { border-color:rgba(124,58,237,.3); }
.zone-card-header { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.zone-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.zone-title { font-size:14px;font-weight:700; }
.zone-meta { font-size:12px;color:var(--text3);margin-bottom:12px; }
.zone-actions { display:flex;gap:8px; }
.zb { padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:'Inter',sans-serif; }
.zb-edit { background:rgba(124,58,237,.15);color:var(--purple2); }
.zb-del  { background:rgba(255,59,48,.08);color:#ff6b6b; }

/* Tariff table */
.tariff-table { background:var(--bg3);border:1px solid var(--border);border-radius:14px;overflow:hidden; }
.tt-head { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 100px;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em; }
.tt-row  { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 100px;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(124,58,237,.05);font-size:13px;align-items:center; }
.tt-row:last-child { border-bottom:none; }
.tt-row:hover { background:rgba(124,58,237,.04); }
.type-badge { font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px; }
.type-hourly  { background:rgba(124,58,237,.15);color:var(--purple2); }
.type-package { background:rgba(0,212,255,.12);color:#00d4ff; }
.tt-actions { display:flex;gap:6px; }

/* Calendar */
.cal-grid { background:var(--bg3);border:1px solid var(--border);border-radius:14px;overflow:hidden; }
.cal-head { display:flex;gap:0;border-bottom:1px solid var(--border); }
.cal-pc-col { width:60px;flex-shrink:0;padding:10px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase; }
.cal-hour { flex:1;padding:9px 4px;font-size:10px;color:var(--text3);text-align:center;border-left:1px solid rgba(124,58,237,.06);min-width:44px; }
.cal-row { display:flex;align-items:stretch;border-bottom:1px solid rgba(124,58,237,.04);min-height:44px; }
.cal-row:last-child { border-bottom:none; }
.cal-pc-label { width:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text3);border-right:1px solid rgba(124,58,237,.08); }
.cal-cell { flex:1;border-left:1px solid rgba(124,58,237,.04);position:relative;min-width:44px; }
.cal-block { position:absolute;inset:3px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;overflow:hidden;cursor:pointer; }

/* Publish */
.publish-wrap { display:flex;align-items:center;justify-content:center;padding:20px 0;flex:1; }
.publish-card { background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:36px;max-width:540px;width:100%;text-align:center; }
.publish-icon { width:64px;height:64px;border-radius:18px;background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--purple2);margin:0 auto 20px; }
.publish-card h2 { font-size:20px;font-weight:800;margin-bottom:10px; }
.publish-card p { font-size:13px;color:var(--text2);margin-bottom:24px;line-height:1.6; }
.info-check { display:flex;flex-direction:column;gap:6px;margin-bottom:22px;text-align:left; }
.check-item { display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 12px;border-radius:9px; }
.check-ok  { background:rgba(0,255,144,.08);color:#00c97a; }
.check-warn { background:rgba(255,200,0,.08);color:#e6ac00; }
.check-err  { background:rgba(255,59,48,.08);color:#ff6b6b; }
.ngrok-input { text-align:left;margin-bottom:20px; }
.ngrok-input label { font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:6px; }
.ngrok-input small { font-size:11px;color:var(--text3);display:block;margin-top:5px; }
.pub-input { width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(124,58,237,.2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--text);outline:none;font-family:'Inter',sans-serif; }
.pub-input:focus { border-color:rgba(124,58,237,.5); }
.btn-publish { display:flex;align-items:center;gap:8px;justify-content:center;width:100%;padding:14px;background:var(--purple);border:none;border-radius:12px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity .2s;margin-bottom:14px; }
.btn-publish:hover { opacity:.85; }
.btn-publish:disabled { opacity:.4;cursor:not-allowed; }
.publish-status { background:rgba(255,200,0,.08);border:1px solid rgba(255,200,0,.2);border-radius:10px;padding:12px 16px;font-size:13px;color:#ffc800;margin-bottom:12px; }
.publish-link { background:rgba(0,255,144,.08);border:1px solid rgba(0,255,144,.2);border-radius:10px;padding:14px 18px;font-size:14px; }
.publish-link a { color:#00ff90;font-weight:700;word-break:break-all; }

/* Modal */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px); }
.modal { background:#0f0d20;border:1px solid rgba(124,58,237,.3);border-radius:18px;padding:28px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.6); }
.modal-title { font-size:16px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:8px; }
.form-group { margin-bottom:14px; }
.form-label { display:block;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px; }
.form-input { width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(124,58,237,.15);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--text);outline:none;font-family:'Inter',sans-serif;transition:border-color .2s; }
.form-input:focus { border-color:rgba(124,58,237,.45); }
.color-input { height:40px;padding:4px;cursor:pointer; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:20px; }
.btn-cancel { padding:9px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif; }
.btn-save   { display:flex;align-items:center;gap:6px;padding:9px 18px;background:var(--purple);border:none;border-radius:10px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity .2s; }
.btn-save:hover { opacity:.85; }

/* Ngrok quick update */
.ngrok-quick {
    background:rgba(255,149,0,.06);
    border:1px solid rgba(255,149,0,.2);
    border-radius:12px;
    padding:16px;
    margin-bottom:14px;
    text-align:left;
}
.ngrok-quick-title {
    font-size:13px;
    font-weight:700;
    color:#ff9500;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}
.quick-badge {
    background:rgba(255,149,0,.15);
    border:1px solid rgba(255,149,0,.25);
    border-radius:4px;
    padding:1px 7px;
    font-size:10px;
}
.ngrok-quick p { font-size:12px; color:rgba(240,244,255,.5); }
.btn-quick-update {
    padding:10px 16px;
    background:#ff9500;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    color:#050a12;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:opacity .2s;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
}
.btn-quick-update:hover { opacity:.85; }
.btn-quick-update:disabled { opacity:.4; cursor:not-allowed; }
.quick-status {
    margin-top:8px;
    font-size:12px;
    padding:7px 12px;
    border-radius:8px;
}
.quick-status.ok  { background:rgba(0,255,144,.1); color:#00ff90; }
.quick-status.err { background:rgba(255,59,48,.1); color:#ff6b6b; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,.25);border-radius:2px; }