/* ================================================================
   RESTORAN — ASOSIY STIL
   Glassmorphism + Gradient dizayn
   ================================================================ */

/* ── 1. CSS O'ZGARUVCHILAR ────────────────────────────────── */
:root {
    --brand:          #e8500a;
    --brand-2:        #f97316;
    --brand-3:        #fb923c;
    --brand-bg:       rgba(232, 80, 10, 0.09);
    --brand-border:   rgba(232, 80, 10, 0.22);

    --gold:           #f59e0b;
    --gold-bg:        rgba(245, 158, 11, 0.10);

    --surface:        rgba(255, 255, 255, 0.90);
    --surface-2:      rgba(255, 255, 255, 0.60);
    --surface-glass:  rgba(255, 255, 255, 0.82);
    --border:         rgba(0, 0, 0, 0.08);
    --border-soft:    rgba(0, 0, 0, 0.04);

    --text:           #18120e;
    --text-2:         #5a3d2b;
    --text-3:         #9a7a66;

    --green:          #16a34a;
    --green-bg:       rgba(22, 163, 74, 0.10);
    --yellow:         #ca8a04;
    --yellow-bg:      rgba(202, 138, 4, 0.10);
    --red:            #dc2626;
    --red-bg:         rgba(220, 38, 38, 0.08);
    --blue:           #1d4ed8;
    --blue-bg:        rgba(29, 78, 216, 0.08);

    --r-xs:  5px;
    --r-sm:  8px;
    --r:    13px;
    --r-lg: 18px;
    --r-xl: 24px;

    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh:    0 4px 18px rgba(0,0,0,.09);
    --sh-lg: 0 8px 36px rgba(0,0,0,.12);
    --sh-brand: 0 4px 18px rgba(232,80,10,.30);

    --ease: .18s ease;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    min-height: 100vh;
    background-image: url('../images/fon_taom_rasmi.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(242, 234, 224, 0.58);
}

a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── 3. LAYOUT ────────────────────────────────────────────── */
.dashboard_konteyner {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 70px;
}

/* ── 4. HEADER ────────────────────────────────────────────── */
.yuqori_panel {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 60px;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 14px rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
}

.logo {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .2px;
}

.foydalanuvchi_ism {
    font-size: 13px;
    color: var(--text-3);
    margin-right: 10px;
}

/* ── 5. TUGMALAR ──────────────────────────────────────────── */
.tugma {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: all var(--ease);
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: .1px;
}

.tugma:active { transform: scale(.96); }

/* Asosiy tugma — gradient */
.tugma_asosiy {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: var(--sh-brand);
}
.tugma_asosiy:hover {
    background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(232,80,10,.38);
}

/* Chiqish / kulrang */
.tugma_chiqish {
    background: rgba(0,0,0,.05);
    color: var(--text-2);
    border: 1.5px solid rgba(0,0,0,.09);
}
.tugma_chiqish:hover {
    background: rgba(0,0,0,.09);
    color: var(--text);
    border-color: rgba(0,0,0,.15);
}

/* Xavfli */
.tugma_xavf {
    background: var(--red-bg);
    color: var(--red);
    border: 1.5px solid rgba(220,38,38,.18);
}
.tugma_xavf:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: translateY(-1px);
}

/* Orqaga (ghost) */
.tugma_orqaga {
    background: transparent;
    color: var(--text-3);
    border: 1.5px solid var(--border);
    padding: 7px 16px;
}
.tugma_orqaga:hover {
    background: var(--surface-2);
    color: var(--brand);
    border-color: var(--brand-border);
}

.tugma_kichik { padding: 6px 14px; font-size: 12px; }
.tugma_tolik  { width: 100%; justify-content: center; padding: 13px; font-size: 14px; }

/* ── 6. KARTALAR ──────────────────────────────────────────── */
.bolim {
    background: var(--surface-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    margin-bottom: 20px;
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--ease);
}
.bolim:hover { box-shadow: var(--sh); }

.bolim_sarlavha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.bolim_sarlavha h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

/* Sahifa sarlavhasi + orqaga tugmasi */
.sahifa_sarlavha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sahifa_sarlavha h1 {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
}

/* ── 7. SUPER QIDIRUV KOMPONENTI ─────────────────────────── */

/* Tashqi wrapper */
.qidiruv_blok {
    margin-bottom: 22px;
}

/* Asosiy qidiruv qutisi */
.qidiruv_forma {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid rgba(0, 0, 0, 0.07);
    border-radius: 60px;
    padding: 6px 8px 6px 20px;
    gap: 12px;
    transition: all 0.22s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    position: relative;
}

/* Focus holatida rang o'zgarishi */
.qidiruv_forma:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(232,80,10,.10),
                0 4px 20px rgba(232,80,10,.12);
    background: #fff;
}

/* Lupa iconi */
.qidiruv_icon {
    color: var(--text-3);
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}
.qidiruv_forma:focus-within .qidiruv_icon {
    color: var(--brand);
    transform: scale(1.1);
}

/* Matn kiritish maydoni */
.qidiruv_input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text);
    outline: none;
    min-width: 0;
}
.qidiruv_input::placeholder {
    color: #b0a090;
    font-weight: 400;
}

/* Gradient "Qidirish" tugmasi */
.qidiruv_tugma {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(232,80,10,.25);
    letter-spacing: .2px;
}
.qidiruv_tugma:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(232,80,10,.38);
}
.qidiruv_tugma:active {
    transform: scale(.97);
}

/* Tozalash tugmasi */
.qidiruv_tozala {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(220,38,38,.08);
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.18s ease;
    text-decoration: none;
}
.qidiruv_tozala:hover {
    background: var(--red);
    color: #fff;
    transform: rotate(90deg);
}

/* Qidiruv natijasi ko'rsatgichi */
.qidiruv_natija {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--brand-bg), var(--gold-bg));
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--brand-border);
    font-weight: 500;
}
.qidiruv_natija strong {
    color: var(--brand);
    font-weight: 800;
}

/* Qidiruv bo'sh holatda */
.qidiruv_bosh {
    text-align: center;
    padding: 48px 20px;
}
.qidiruv_bosh svg {
    margin: 0 auto 14px;
    color: var(--text-3);
    opacity: .4;
}
.qidiruv_bosh p {
    font-size: 15px;
    color: var(--text-3);
    font-weight: 500;
}
.qidiruv_bosh span {
    display: block;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 4px;
    opacity: .7;
}

/* ── 8. JADVAL ────────────────────────────────────────────── */
.jadval_wrap {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    text-align: left;
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .7px;
    background: rgba(0,0,0,.03);
    border-bottom: 1.5px solid var(--border);
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr {
    transition: background var(--ease);
}
tbody tr:hover { background: rgba(232,80,10,.04); }

/* Jadval ichidagi rasm — kichik */
.jadval_rasm {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.jadval_rasm_yoq {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    border: 1px solid var(--brand-border);
}

/* ── 9. AMALLAR USTUNI ─────────────────────────────────────── */
.amallar_blok {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── 10. ADMIN MENYU KARTALARI ────────────────────────────── */
.admin_menyu_royxati {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.admin_menyu_band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    border: 1.5px solid rgba(255,255,255,.55);
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    box-shadow: var(--sh-sm);
    transition: all .22s ease;
    position: relative;
    overflow: hidden;
}

.admin_menyu_band::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--gold));
    opacity: 0;
    transition: opacity var(--ease);
}

.admin_menyu_band:hover {
    border-color: var(--brand-border);
    box-shadow: var(--sh), 0 0 0 3px var(--brand-bg);
    transform: translateY(-3px);
}
.admin_menyu_band:hover::before { opacity: 1; }

.admin_menyu_band_ikon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-bg), var(--gold-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand);
    border: 1px solid var(--brand-border);
}

.ikon { width: 22px; height: 22px; }

.admin_menyu_band_matn h3 {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}
.admin_menyu_band_matn p { font-size: 12px; color: var(--text-3); }

/* ── 11. STATUS BADGES ────────────────────────────────────── */
.status_yorliq, .belgi_yorliq {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1px;
}

.status_yangi          { background: #f1f5f9; color: #475569; }
.status_tayyorlanmoqda { background: var(--yellow-bg); color: var(--yellow); }
.status_tayyor         { background: var(--green-bg); color: var(--green); }
.belgi_yorliq          {
    background: linear-gradient(135deg, var(--brand-bg), var(--gold-bg));
    color: var(--brand);
    border: 1px solid var(--brand-border);
}

/* ── 12. FORMA ELEMENTLARI ────────────────────────────────── */
.forma_maydon { margin-bottom: 18px; }

.forma_maydon label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 7px;
}

.forma_maydon input,
.forma_maydon select,
.forma_maydon textarea {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.75);
    color: var(--text);
    outline: none;
    transition: all var(--ease);
}

.forma_maydon input:focus,
.forma_maydon select:focus,
.forma_maydon textarea:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--brand-bg);
}

/* Fayl input (rasm) */
.forma_maydon input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

/* Kichik yordam matni */
.forma_izoh {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 5px;
}

.xato_xabari {
    background: var(--red-bg);
    border: 1px solid rgba(220,38,38,.18);
    color: var(--red);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 13. LOGIN SAHIFASI ───────────────────────────────────── */
.login_konteyner {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login_karta {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--r-xl);
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(255,255,255,.70);
    box-shadow: var(--sh-lg);
    animation: fadeUp .45s ease-out;
    position: relative;
    overflow: hidden;
}

/* Tepadagi rang chizig'i */
.login_karta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--gold), var(--brand-2));
}

.login_karta h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 5px;
}
.izoh_matn { font-size: 13px; color: var(--text-3); margin-bottom: 26px; }

/* ── 14. DIREKTOR STATISTIKA ─────────────────────────────── */
.dir_stat_qator {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.dir_stat_karta {
    background: var(--surface-glass);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--sh-sm);
    position: relative;
    overflow: hidden;
}
.dir_stat_karta::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--gold));
}

.dir_stat_icon { color: var(--brand); flex-shrink: 0; }
.dir_stat_matn p  { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.dir_stat_matn h2 { font-size: 22px; font-weight: 900; color: var(--text); }

/* ── 15. BAR CHARTLAR ─────────────────────────────────────── */
.chart_qator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.chart_nom {
    min-width: 110px;
    font-size: 12px;
    color: var(--text-2);
    text-align: right;
    font-weight: 600;
}
.chart_bar_konteyner {
    flex: 1;
    height: 28px;
    background: rgba(0,0,0,.05);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.chart_bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    min-width: 32px;
}
.chart_bar_ovqat  { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.chart_bar_ishchi { background: linear-gradient(90deg, #15803d, #22c55e); }

/* ── 16. YULDUZ BAHOSI ────────────────────────────────────── */
.baho_blok {
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--r);
    padding: 18px;
    margin-bottom: 12px;
    text-align: center;
}
.baho_nom { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.baho_ism { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }

.yulduz_guruh { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.yulduz_guruh input[type="radio"] { display: none; }
.yulduz_guruh label {
    font-size: 36px;
    color: #d1d5db;
    cursor: pointer;
    transition: color .12s ease;
    line-height: 1;
}
.yulduz_guruh input:checked ~ label,
.yulduz_guruh label:hover,
.yulduz_guruh label:hover ~ label { color: #f59e0b; }

/* ── 17. STOLLAR ──────────────────────────────────────────── */
.stollar_panjarasi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.stol_karta {
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: all .2s ease;
}
.stol_karta:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.stol_karta.stol_bosh          { border-color: rgba(22,163,74,.35); }
.stol_karta.stol_band          { border-color: rgba(220,38,38,.35); background: rgba(255,240,240,.70); }
.stol_karta.stol_oldindan_band { border-color: rgba(202,138,4,.35); background: rgba(255,250,235,.70); }

.stol_raqam  { font-size: 26px; font-weight: 900; color: var(--text); }
.stol_nomi   { font-size: 11px; color: var(--text-3); }
.stol_sig    { font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.stol_amallar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.stol_holat_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.stol_holat_bosh          { background: var(--green-bg); color: var(--green); }
.stol_holat_band          { background: var(--red-bg); color: var(--red); }
.stol_holat_oldindan_band { background: var(--yellow-bg); color: var(--yellow); }

/* Stol tanlash */
.stol_tanlash_label {
    cursor: pointer;
    display: block;
    background: var(--surface-glass);
    border-radius: var(--r-lg);
    padding: 14px;
    text-align: center;
    border: 2px solid var(--border);
    transition: all var(--ease);
}
.stol_tanlash_label input[type="radio"] { display: none; }
.stol_tanlash_label:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-bg);
    box-shadow: 0 0 0 3px rgba(232,80,10,.10);
}
.stol_tanlash_label.stol_band { opacity: .44; cursor: not-allowed; }
.stol_tanlash_label.stol_bosh { border-color: rgba(22,163,74,.35); }

/* ── 18. BILDIRISHNOMA ────────────────────────────────────── */
.bildirishnoma_banner {
    background: linear-gradient(90deg, var(--red), #b91c1c);
    color: #fff;
    text-align: center;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    animation: blink 1.3s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.56} }

/* ── 19. TRADING CHART ────────────────────────────────────── */
.trading-wrap {
    background: rgba(255,255,255,.60);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 16px 10px;
    overflow: hidden;
}
.trading-bars-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    position: relative;
    margin-bottom: 8px;
}
.trading-bars-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        transparent calc(33.3% - 1px),
        rgba(0,0,0,.04) calc(33.3% - 1px),
        rgba(0,0,0,.04) 33.3%
    );
    pointer-events: none;
}
.t-ustun {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}
.t-bar {
    width: 100%;
    background: linear-gradient(to top, var(--brand), var(--brand-2));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    cursor: pointer;
    position: relative;
    transition: filter var(--ease);
}
.t-bar:hover { filter: brightness(1.1); }
.t-bar:hover .t-tooltip { display: block; }
.t-tooltip {
    display: none;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
}
.t-nom {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    text-align: center;
}

/* ── 20. DAVR TANLASH ─────────────────────────────────────── */
.davr_label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 40px;
    border: 1.5px solid var(--border);
    background: rgba(255,255,255,.70);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-2);
    transition: all var(--ease);
    font-family: inherit;
}
.davr_label input[type="radio"] { width: 13px; height: 13px; accent-color: var(--brand); }
.davr_label:hover { border-color: var(--brand); color: var(--brand); }
.davr_aktiv { border-color: var(--brand)!important; background: var(--brand-bg)!important; color: var(--brand); }

/* ── 21. BOSH SAHIFA ──────────────────────────────────────── */
.bosh_body { overflow: hidden; }

.bosh_nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.22);
    animation: slideDown .5s ease-out;
}
@keyframes slideDown { from{transform:translateY(-100%)} to{transform:none} }

.bosh_nav_logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
    letter-spacing: .3px;
}

.bosh_nav_kirish {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.96);
    color: #1a0a04;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 16px rgba(0,0,0,.20);
    transition: all var(--ease);
}
.bosh_nav_kirish:hover {
    background: #fff;
    color: #1a0a04;
    transform: translateY(-1px);
    box-shadow: 0 4px 22px rgba(0,0,0,.25);
}

.bosh_main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bosh_kontent { text-align: center; max-width: 540px; }

.bosh_kichik_matn {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand), var(--gold));
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    animation: fadeUp .6s ease-out both;
}

.bosh_sarlavha {
    font-size: 56px;
    font-weight: 900;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 14px;
    text-shadow: 0 4px 28px rgba(0,0,0,.4);
    animation: fadeUp .6s .08s ease-out both;
}

.bosh_tavsif {
    font-size: 16px;
    color: rgba(255,255,255,.70);
    margin-bottom: 36px;
    animation: fadeUp .6s .16s ease-out both;
}

.bosh_menyu_tugma {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 46px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 8px 32px rgba(232,80,10,.52);
    transition: all .22s ease;
    animation: fadeUp .6s .24s ease-out both;
}
.bosh_menyu_tugma:hover {
    background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 42px rgba(232,80,10,.58);
}

@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }

/* ── 22. MISC ─────────────────────────────────────────────── */
.bosh_xabar {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-3);
    font-size: 14px;
}

/* ── 23. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 640px) {
    .bosh_sarlavha       { font-size: 36px; }
    .bosh_menyu_tugma    { padding: 14px 28px; font-size: 14px; }
    .dir_stat_qator      { grid-template-columns: 1fr 1fr; }
    .admin_menyu_royxati { grid-template-columns: 1fr; }
    .dashboard_konteyner { padding: 16px 12px 60px; }
    .bolim               { padding: 16px 14px; }
    .login_karta         { padding: 28px 18px; }
    .bosh_nav            { padding: 0 16px; }
    .stollar_panjarasi   { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
    .qidiruv_tugma       { padding: 6px 14px; font-size: 12px; }
}

/* Eski o'zgaruvchi nomlari (moslik uchun) */
.asosiy-rang      { color: var(--brand); }
.matn-xira        { color: var(--text-3); }
.chegara-rangi    { border-color: var(--border); }