/* ═══════════════════════════════════════════════════════════════════════
   Masterchistka — brend dizayn qatlami (brend-dizayn skili, 2026-10-05)
   style.css dan KEYIN ulanadi: sahifalar, klasslar va JS mantiqi o'zgarmaydi,
   faqat ko'rinish — logodagi bitta rang (#ED1C24) + oq, Nunito, 3D emoji,
   kun/tun rejimi. Rang yozmang — var(--...) ishlating.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BREND TOKENLARI (scripts/brand_colors.py --color "#ED1C24") ── */
:root {
  --brand: #ED1C24; --brand-2: #c4161c; --brand-3: #ff5f55; --on-brand: #ffffff;
  --bg: #fff4f2; --surface: #ffffff; --surface-2: #fffaf9; --sunken: #fcecea;
  --line: #f5e5e3; --line-2: #ebd0cd;
  --ink: #22110f; --ink-2: #6d5450; --ink-3: #9e8682;
  --accent: #e6091c; --accent-2: #c10f19;
  --ok: #15803d; --warn: #b45309; --info: #1d4ed8; --pink: #be185d; --bad: #dc2626;
  --s-brand: #ED1C24; --s-warn: #eda100; --s-ok: #008300; --s-info: #2a78d6; --s-pink: #e87ba4; --s-bad: #e34948;
  --s-muted: #e1cbc8; --s-prev: #cab1ad; --grid: #f6ecea; --axis: #e1d0cd;
  --shadow: 0 1px 2px rgba(85,17,15,0.05), 0 10px 30px -14px rgba(85,17,15,0.2);
  --shadow-lg: 0 2px 6px rgba(85,17,15,0.06), 0 26px 50px -20px rgba(85,17,15,0.35);
  --side-bg: linear-gradient(165deg, #ff5f55 0%, #ED1C24 45%, #c4161c 100%);
}
[data-theme=dark] {
  --bg: #140908; --surface: #1d100e; --surface-2: #221412; --sunken: #2b1a18;
  --line: #311e1c; --line-2: #452b28;
  --ink: #faefed; --ink-2: #cdb4b0; --ink-3: #917a77;
  --accent: #fc4741; --accent-2: #fb7c70;
  --ok: #4ade80; --warn: #fbbf24; --info: #7aa2ff; --pink: #f472b6; --bad: #f87171;
  --s-brand: #fc4741; --s-warn: #c98500; --s-ok: #008300; --s-info: #3987e5; --s-pink: #d55181; --s-bad: #e66767;
  --s-muted: #44302d; --s-prev: #654f4c; --grid: #261918; --axis: #3c2826;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 32px -18px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 28px 56px -22px rgba(0,0,0,.8);
  --side-bg: linear-gradient(165deg, #b01117 0%, #8c010c 50%, #5d0206 100%);
  color-scheme: dark;
}

/* ── O'zgarmas tokenlar + style.css dagi eski nomlar shu tokenlarga ulanadi ── */
:root {
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --radius: 16px; --sidebar: 248px;
  --panel: var(--surface); --panel-soft: var(--surface-2); --card: var(--surface);
  --muted: var(--ink-3);
  --brand-dark: var(--brand-2);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --danger: var(--bad);
  --ink-btn: var(--brand); --ink-btn-dark: var(--brand-2);
  --shadow-sm: var(--shadow); --shadow-md: var(--shadow-lg); --shadow-card: var(--shadow);
}
[data-theme=dark] {
  /* Bosqich ranglari tun rejimida yorqinroq — to'q fonda o'qilsin */
  --st-yangi: #60a5fa; --st-prioritet: #fc4741; --st-boglanmadi: #fbbf24; --st-qayta_aloqa: #a78bfa;
  --st-sifatli: #4ade80; --st-bajarildi: #86efac; --st-eski_mijoz: #2dd4bf; --st-sifatsiz: #fb7185;
  --st-manzil_uzoq: #94a3b8; --st-xodim_raqami: #94a3b8; --st-notogri_raqam: #fb7185;
}

/* ── Palitra (egasi 2026-10-05 tanladi): #E63946 · #F1FAEE · #A8DADC · #457B9D · #1D3557 ──
   Qizil — faqat aksent (asosiy tugma, faol band, prioritet/xato). Fon — #F1FAEE, yumshoq joylar — #A8DADC tusi,
   ikkinchi darajali matn va grafik — #457B9D, asosiy matn va yon menyu — #1D3557. */
:root {
  --brand: #E63946; --brand-2: #c92c39; --brand-3: #ef6b74; --accent: #E63946; --accent-2: #c92c39;
  --bg: #F1FAEE; --surface: #ffffff; --surface-2: #f8fcf7; --sunken: #e3f2f1;
  --line: #d8ebea; --line-2: #c0dedf;
  --ink: #1D3557; --ink-2: #3a5f80; --ink-3: #6a8aa6;
  --info: #457B9D; --s-brand: #457B9D;
  --shadow: 0 1px 2px rgba(29,53,87,.06), 0 8px 24px -14px rgba(29,53,87,.22);
  --shadow-lg: 0 2px 6px rgba(29,53,87,.07), 0 22px 44px -20px rgba(29,53,87,.32);
  --side-bg: linear-gradient(180deg, #1D3557 0%, #172b47 100%);
}
[data-theme=dark] {
  --brand: #E63946; --brand-2: #c92c39; --brand-3: #ef6b74; --accent: #f06470; --accent-2: #f58a92;
  --bg: #0e1a2b; --surface: #15243a; --surface-2: #192b44; --sunken: #1e334f;
  --line: #243b59; --line-2: #31496b;
  --ink: #F1FAEE; --ink-2: #A8DADC; --ink-3: #7f9db8;
  --info: #8cc4d4; --s-brand: #7fb3c9;
  --side-bg: linear-gradient(180deg, #0b1626 0%, #0e1c31 100%);
}

/* ── Asos ── */
body {
  font-family: var(--font); font-size: 14px; color: var(--ink); -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
b, strong, h1, h2, h3, h4 { font-weight: 800; }
.muted { color: var(--ink-3); }

/* 3D emoji */
.em { width: 1.3em; height: 1.3em; display: inline-block; vertical-align: -.28em; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* ── Tugmalar: oddiy tugma — brend gradient (asosiy amal), ghost — oq ── */
button { font-family: inherit; font-weight: 700; border-radius: 12px; position: relative; overflow: hidden;
  transition: transform .2s var(--spring), background .15s, color .15s, border-color .15s, box-shadow .2s; }
button:not(.ghost):not(.danger):not(.x):not(.icon-btn):not(.nav-toggle):not(.chip):not(.lc-st):not(.lc-link):not(.bxf-x):not(.of-slot):not(.seg button):not(.bxf-preset button) {
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-color: transparent; color: var(--on-brand);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--brand) 75%, transparent);
}
button:not(.ghost):not(.danger):not(.x):not(.icon-btn):not(.nav-toggle):not(.chip):not(.lc-st):not(.lc-link):not(.bxf-x):not(.of-slot):not(.seg button):not(.bxf-preset button):hover {
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--brand) 85%, transparent);
}
button::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
button:hover::after { left: 140%; }
button.ghost, button.danger, .chip, .lc-st, .lc-link, .bxf-x, .of-slot, .x, .icon-btn, .nav-toggle { box-shadow: none; }
button.ghost::after, button.danger::after, .chip::after, .lc-st::after, .lc-link::after, .bxf-x::after, .of-slot::after,
.x::after, .icon-btn::after, .nav-toggle::after, .seg button::after, .bxf-preset button::after { display: none; }
button.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
button.ghost:hover { background: var(--sunken); color: var(--ink); }
button.danger { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
button.danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
button:active { transform: scale(.96); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .2; transform: scale(0); animation: ripple .6s var(--ease) forwards; pointer-events: none; }

.nav-toggle, .icon-btn { color: var(--ink-2); border-radius: 12px; }
.nav-toggle:hover, .icon-btn:hover { background: var(--sunken); color: var(--ink); }

/* ── Maydonlar ── */
input, select, textarea {
  font-family: inherit; font-weight: 600; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
label { color: var(--ink-2); font-weight: 700; }
[data-theme=dark] input[type=date], [data-theme=dark] input[type=time], [data-theme=dark] input[type=datetime-local] { color-scheme: dark; }

/* ── Kirish oynasi: brend gradient, suzuvchi emojilar ── */
.login-screen { background: var(--side-bg); position: relative; overflow: hidden; }
.login-screen .blob { position: absolute; border-radius: 50%; pointer-events: none; animation: blob 12s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), rgba(255,255,255,.03)); }
.login-screen .b1 { width: 440px; height: 440px; left: -140px; top: -150px; }
.login-screen .b2 { width: 340px; height: 340px; right: -90px; bottom: -110px; animation-delay: -4s; }
.login-screen .b3 { width: 170px; height: 170px; right: 24%; top: 6%; animation-delay: -8s; }
.login-screen .fl { position: absolute; width: var(--s); height: var(--s); pointer-events: none; z-index: 1;
  animation: drift var(--d, 7s) ease-in-out infinite alternate; filter: drop-shadow(0 18px 24px rgba(70,0,20,.35)); }
@media (max-width: 640px) { .login-screen .fl { --s: 62px !important; opacity: .6; } }
.login-card { position: relative; z-index: 2; background: var(--surface); color: var(--ink); border-radius: 26px;
  box-shadow: 0 40px 90px -24px rgba(60,0,20,.6); animation: popIn .6s var(--spring) both; }
.login-card h1 { font-weight: 900; font-size: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-card .wave { width: 28px; height: 28px; transform-origin: 70% 80%; animation: wave 2.4s ease-in-out 1s infinite; }
.login-logo { width: 78px; height: 78px; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--brand) 70%, transparent);
  animation: pop .8s var(--spring) .15s backwards; }
.login-card button[type=submit] { height: 46px; font-size: 15px; }
.shake { animation: shake .45s ease !important; }

/* ── Karkas: tepadagi panel ── */
.topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: none; padding: 10px 16px; }
.brand-logo { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.brand-name { font-weight: 900; font-size: 17px; letter-spacing: -.01em; }
.topbar-sep { background: var(--line-2); }
.topbar h2 { color: var(--ink); font-weight: 900; font-size: 18px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.topbar h2 .em { width: 28px; height: 28px; animation: pop .6s var(--spring) backwards; }
.who b { font-weight: 800; }
.lang-select { border-radius: 12px; }
.theme-btn svg { animation: spinIn .5s var(--spring); }
[data-theme=dark] .theme-btn .i-sun, :root:not([data-theme=dark]) .theme-btn .i-moon { display: none; }

/* ── Yon menyu: brend gradient, oq bandlar, 3D emoji ── */
.sidebar { background: var(--side-bg); color: var(--on-brand); }
@media (min-width: 861px) { .sidebar { top: 59px; height: calc(100vh - 59px); } }
.sidebar::before, .sidebar::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; animation: blob 14s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(168,218,220,.12), transparent 70%); }
.sidebar::before { width: 280px; height: 280px; right: -150px; bottom: -60px; }
.sidebar::after { width: 170px; height: 170px; left: -100px; top: 34%; animation-delay: -6s; }
#nav { position: relative; z-index: 1; padding: 14px 12px; }
#nav a { color: color-mix(in srgb, #fff 82%, transparent); font-weight: 800; font-size: 14.5px; border-left: none; border-radius: 14px; margin-bottom: 4px;
  padding: 8px 12px; gap: 12px; transition: background .2s, color .2s, transform .3s var(--spring), box-shadow .2s; }
#nav a .em { width: 28px; height: 28px; flex: none; transition: transform .4s var(--spring); filter: drop-shadow(0 4px 6px rgba(60,0,15,.25)); }
#nav a:hover { background: rgba(168,218,220,.1); color: #fff; padding-left: 12px; transform: translateX(4px); }
#nav a:hover .em { transform: scale(1.15) rotate(-10deg); }
#nav a.active { background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
#nav a.active .em { animation: pop .55s var(--spring); }
#nav .badge { background: var(--brand); color: #fff; font-weight: 900; }
#nav a.active .badge { background: #fff; color: var(--brand-2); }
.sidebar a.on { box-shadow: none; }
@media (max-width: 860px) {
  .sidebar { top: 0; height: 100vh; height: 100dvh; box-shadow: 12px 0 40px -20px rgba(80,0,25,.5); }
  .nav-overlay { background: rgba(30,5,12,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

/* ── Sahifa bloklari ketma-ket paydo bo'ladi ── */
.view > * { animation: fadeUp .5s var(--ease) backwards; }

/* ── Kartalar ── */
.card, .lc-sec, .table-wrap, .bxf-pop { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.card { border-radius: 18px; }
.card:hover { box-shadow: var(--shadow-lg); }
.card > h3:first-child { font-weight: 900; border-bottom-color: var(--line); }
.card > h3:first-child > .ic { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--accent); border-radius: 10px; }
.card > h3 .em { width: 28px; height: 28px; }

/* Ko'rsatkich kartalari — emoji o'ng burchakda, raqam qalin */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px 18px;
  transform: none; transition: transform .35s var(--spring), box-shadow .3s, border-color .2s; }
.stat::before { height: 4px; }
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.stat::after { content: ''; position: absolute; inset: auto; width: 130px; height: 130px; border-radius: 50%; right: -46px; top: -46px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--accent)) 22%, transparent), transparent 70%);
  transform: none; transition: transform .6s var(--ease); pointer-events: none; }
.stat:hover::after { transform: scale(1.4); }
.stat > .em { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; z-index: 1;
  transition: transform .5s var(--spring); filter: drop-shadow(0 6px 8px rgba(0,0,0,.14)); animation: pop .7s var(--spring) .15s backwards; }
.stat:hover > .em { transform: translateY(-4px) rotate(-12deg) scale(1.14); }
.stat .label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-right: 46px; }
.stat .value { font-size: 28px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .sub { font-weight: 700; color: var(--ink-3); }
.stat.brand { --tone: var(--accent); } .stat.ok { --tone: var(--ok); } .stat.warn { --tone: var(--warn); } .stat.danger { --tone: var(--bad); }

/* ── Jadvallar ── */
.table-wrap { border-radius: 16px; }
th { background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--line); }
td { border-bottom-color: var(--line); font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover, tbody tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

/* ── Teglar (pillalar) ── */
.tag, .tag.ok, .tag.warn, .tag.danger, .tag.brand, .tag.gray { font-weight: 800; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--ink-3)) 13%, var(--surface));
  color: var(--c, var(--ink-2)); border: 1px solid color-mix(in srgb, var(--c, var(--ink-3)) 24%, transparent); }
.tag.ok { --c: var(--ok); } .tag.warn { --c: var(--warn); } .tag.danger { --c: var(--bad); } .tag.brand { --c: var(--ink-2); } .tag.gray { --c: var(--ink-3); }

/* ── Modal oynalar ── */
.modal-back { background: rgba(30,6,14,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .25s ease backwards; }
.modal { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 80px -20px rgba(40,0,15,.5); animation: popIn .5s var(--spring) backwards; }
.modal.lead-modal { background: var(--bg); }
.modal-head h3 { font-weight: 900; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.modal-head, .modal-foot { border-color: var(--line); }
.lead-modal .modal-head, .lead-modal .modal-foot { background: var(--surface); }
.lead-modal .modal-head { border-radius: 22px 22px 0 0; }
.lead-modal .modal-foot { border-radius: 0 0 22px 22px; }
.x { color: var(--ink-3); }
.x:hover { color: var(--ink); }
@media (max-width: 860px) {
  .modal, .modal.wide { border-radius: 0; }
  .modal-head, .modal-foot { background: var(--surface); }
}

/* ── Xabarlar ── */
.toast { background: var(--ink); color: var(--surface); border-radius: 14px; font-weight: 700; animation: msgIn .45s var(--spring) both; }
.toast.ok { background: var(--ok); color: #fff; } .toast.err { background: var(--bad); color: #fff; }

/* ── Chiplar va segmentlar ── */
.chip { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); font-weight: 700; }
.chip:hover { background: var(--sunken); color: var(--ink); }
.chip.on { background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: var(--on-brand); border-color: transparent;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 75%, transparent); }
.seg { background: var(--sunken); border: none; border-radius: 13px; padding: 4px; gap: 3px; box-shadow: none; }
.seg button { background: transparent; color: var(--ink-2); border: none; border-radius: 9px; font-weight: 800; }
.seg button + button { border-left: none; }
.seg button:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); }
.seg button.on, .seg button.on:hover { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* ── Kanban ── */
.kanban .col { background: var(--surface-2); border-color: var(--line); border-radius: 18px; }
.kanban .col h4 { background: var(--surface); border-radius: 18px 18px 0 0; color: var(--st, var(--ink-2)); font-weight: 900; }
.kanban .col.over { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.kanban .item { background: var(--surface); border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink);
  transition: transform .3s var(--spring), border-color .2s, box-shadow .25s; }
.kanban .item:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.kanban .item .t { font-weight: 800; }

/* Bo'sh jadval qatori (style.css dagi och chiziqlar) */
tbody td[colspan] { background: repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); color: var(--ink-3); }

/* ── Grafiklar ── */
.ch-fn-bar, .bar { background: var(--sunken); }
.ch-center { fill: var(--ink); font-weight: 900; }
.skeleton { background: linear-gradient(90deg, var(--sunken) 25%, var(--surface-2) 50%, var(--sunken) 75%); background-size: 200% 100%; }
.spinner { border-color: var(--line-2); border-top-color: var(--brand); }

/* ── Lid kartasi va filtr (qattiq oq ranglar tokenga) ── */
.lc-st { background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.lc-st:hover { background: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.lc-st.past { background: color-mix(in srgb, var(--c) 28%, var(--surface)); }
.lc-st.past:hover { background: color-mix(in srgb, var(--c) 38%, var(--surface)); }
.lc-tl li.izoh > div:first-child { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.lc-view .lc-f + .lc-f { border-top-color: var(--line); }
.lc-view:hover { background: var(--surface-2); }
.lc-call { background: var(--surface-2); border-color: var(--line); }
.bxf-box, .bxf-multi, .tel-in, .of-slot { background: var(--surface); border-color: var(--line-2); }
.bxf-box:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line-2)); }
.bxf-chip { background: var(--sunken); color: var(--ink); }
.bxf-chip.on, .bxf-preset.on { background: color-mix(in srgb, var(--brand) 13%, var(--surface)); color: var(--accent); }
.bxf-preset.on button { color: var(--accent); }
.bxf-preset:hover { background: var(--sunken); }
.bxf-preset button { color: var(--ink); }
.bxf-side { background: var(--surface-2); border-color: var(--line); }
.tel-in > span { background: var(--surface-2); border-color: var(--line); }
.of-hint.warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--warn); }
.of-hint.err { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.of-slot { color: var(--ink); }
.of-slot.full, .of-slot[disabled] { background: var(--surface-2); color: var(--ink-3); }

/* ── Chat (tun rejimi uchun tokenlar) ── */
.chat-item:hover { background: var(--sunken); }
.chat-item.active { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.chat-msg-in { background: var(--sunken); color: var(--ink); }
.chat-msg-out { background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: var(--on-brand); }

/* ── Tun rejimida style.css dagi oq fonlar ── */
[data-theme=dark] .login-card, [data-theme=dark] .table-wrap, [data-theme=dark] .modal-head, [data-theme=dark] .modal-foot { background: var(--surface); }
[data-theme=dark] .kanban .col h4 { background: var(--surface); }
[data-theme=dark] .kanban .item { background: var(--surface); border-color: var(--line); }
[data-theme=dark] .kanban .col h4 span:last-child,
[data-theme=dark] .kanban .col h4 > :last-child { background: color-mix(in srgb, var(--st, var(--ink-3)) 22%, var(--surface)); color: var(--st, var(--ink)); }

/* ── Animatsiyalar ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(22px) scale(.93); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.14) rotate(4deg); } 100% { transform: none; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes drift { from { transform: translate(0, 0) rotate(-7deg); } to { transform: translate(var(--dx, 14px), var(--dy, -26px)) rotate(9deg); } }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22px, -18px) scale(1.08); } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(18deg); } 20%, 40% { transform: rotate(-10deg); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
@keyframes spinIn { from { opacity: 0; transform: rotate(-120deg) scale(.4); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Telefonda sahifa nomi tepadagi panelda ko'rinmaydi (style.css dagidek) — joy tor */
@media (max-width: 860px) { .topbar h2 { display: none; } }

/* ═══ Fon: premium «aurora» + don (grain) — palitra ranglarida, yumshoq, ko'zni charchatmaydi ═══ */
/* 1) Aurora — katta, xira yorug'lik dog'lari; juda sekin suzadi */
body::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 42% at 90% 4%, rgba(168,218,220,.95), transparent 70%),
    radial-gradient(40% 40% at 18% 52%, rgba(168,218,220,.38), transparent 70%),
    radial-gradient(38% 36% at 4% 100%, rgba(69,123,157,.30), transparent 70%),
    radial-gradient(32% 30% at 98% 96%, rgba(230,57,70,.13), transparent 70%);
  filter: blur(30px);
  animation: aurora 40s ease-in-out infinite alternate;
}
[data-theme=dark] body::before {
  background:
    radial-gradient(42% 38% at 88% 8%, rgba(69,123,157,.42), transparent 70%),
    radial-gradient(36% 34% at 6% 96%, rgba(168,218,220,.10), transparent 70%),
    radial-gradient(30% 28% at 96% 92%, rgba(230,57,70,.12), transparent 70%);
}
@keyframes aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2.5%, 2%) scale(1.05); } }
/* 2) Don — juda mayda tekstura, fonga «qimmat qog'oz» hissi */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; opacity: .06; mix-blend-mode: multiply;
}
[data-theme=dark] body::after { opacity: .08; mix-blend-mode: screen; }
/* Kirish sahifasining o'z foni bor */
body:has(#login:not(.hidden))::after { display: none; }
/* Yon menyu: oq naqsh brend gradienti ustida */
.sidebar { background: radial-gradient(120% 40% at 0% 0%, rgba(168,218,220,.14), transparent 70%), var(--side-bg); }
/* Kontent ostidagi och fonli joylar shaffofroq — naqsh ko'rinsin */
.kanban .col { background: color-mix(in srgb, var(--surface-2) 82%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* Grafik ustunlari — qizil tinchroq, yuqorisi yumaloq */
.ch-bar-track > i { background: linear-gradient(180deg, #A8DADC, var(--info)) !important; border-radius: 10px 10px 4px 4px; }
.ch-bar-val { font-weight: 800; color: var(--ink-2); }

/* Kirish sahifasi: suzuvchi emojilar o'rniga gilam medalyoni gravyurasi (premium, sahifalar foni bilan bir uslubda) */
.login-screen::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: min(120vh, 1100px); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%;
  background: #A8DADC; opacity: .16;
  -webkit-mask: url(/bg/medalyon.svg) center / contain no-repeat; mask: url(/bg/medalyon.svg) center / contain no-repeat;
  animation: medalyon 300s linear infinite;
}
.login-screen .blob { background: radial-gradient(circle at 30% 30%, rgba(168,218,220,.14), rgba(168,218,220,.02)); }

/* Shisha kartalar — ortidagi aurora xira o'tib ko'rinadi */
.card, .stat, .table-wrap, .lc-sec { background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.kanban .col { background: color-mix(in srgb, var(--surface-2) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topbar { background: color-mix(in srgb, var(--surface) 72%, transparent); }
@keyframes medalyon { to { rotate: 360deg; } }

/* Yon menyudagi eski yumaloq dog'lar kerak emas — menyu toza */
.sidebar::before, .sidebar::after { display: none; }

/* ═══════════ Soft UI (neumorfizm) — ajratilgan bloklar bo'rtib chiqadi (egasi namunasi, 2026-10-05) ═══════════
   Bo'rtiq: tepa-chapda yorug' chet, past-o'ngda yumshoq soya; maydonlar — ichkariga botgan; faol holat — nur. */
:root {
  --neu-hi: rgba(255,255,255,.95);
  --neu-lo: rgba(29,53,87,.16);
  --neu-edge: rgba(255,255,255,.75);
  --neu-face: linear-gradient(150deg, #ffffff 0%, #f6faf6 100%);
  --neu-well: color-mix(in srgb, var(--sunken) 70%, var(--bg));
  --raised: -6px -6px 14px var(--neu-hi), 8px 10px 24px var(--neu-lo), inset 0 1px 0 var(--neu-edge);
  --raised-sm: -3px -3px 8px var(--neu-hi), 4px 5px 12px var(--neu-lo), inset 0 1px 0 var(--neu-edge);
  --inset: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  --glow: 0 0 0 2px color-mix(in srgb, var(--info) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--info) 22%, transparent), 0 0 26px color-mix(in srgb, var(--info) 55%, transparent);
}
[data-theme=dark] {
  --neu-hi: rgba(255,255,255,.035);
  --neu-lo: rgba(0,0,0,.5);
  --neu-edge: rgba(255,255,255,.06);
  --neu-face: linear-gradient(150deg, #192b44 0%, #14233a 100%);
  --neu-well: #112036;
}

/* Bo'rtiq bloklar */
.card, .stat, .table-wrap, .lc-sec, .bxf-pop, .modal {
  background: var(--neu-face); border: 1px solid var(--neu-edge); box-shadow: var(--raised);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.card:hover, .stat:hover { box-shadow: -8px -8px 18px var(--neu-hi), 12px 14px 30px var(--neu-lo), inset 0 1px 0 var(--neu-edge); }
.stat { border-radius: 20px; }
.table-wrap { border-radius: 18px; }
.modal { border-radius: 24px; }
.modal.lead-modal { background: var(--bg); }
.lead-modal .modal-head, .lead-modal .modal-foot { background: var(--neu-face); }

/* Kanban: ustun — botiq chuqurcha, kartalar uning ichida bo'rtadi */
.kanban .col { background: var(--neu-well); border: none; box-shadow: var(--inset); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kanban .col h4 { background: transparent; border-bottom-color: color-mix(in srgb, var(--line-2) 60%, transparent); }
.kanban .item { background: var(--neu-face); border-color: var(--neu-edge); box-shadow: var(--raised-sm); }
.kanban .item:hover { box-shadow: -5px -5px 12px var(--neu-hi), 8px 10px 20px var(--neu-lo), inset 0 1px 0 var(--neu-edge); }

/* Kiritish maydonlari — ichkariga botgan, fokusda ko'k nur */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .bxf-box, .bxf-multi, .tel-in {
  background: var(--neu-well); border-color: transparent; box-shadow: var(--inset);
}
.bxf-multi select, .tel-in > input, .bxf-box input { box-shadow: none; background: transparent; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus, .bxf-box:focus-within, .tel-in:focus-within {
  border-color: transparent; box-shadow: var(--inset), var(--glow);
}

/* Tugmalar — bo'rtiq; asosiy (qizil) — yaltiroq va nurli; bosilganda botadi */
button.ghost, .chip, .icon-btn, .nav-toggle, .lang-select {
  background: var(--neu-face); border-color: var(--neu-edge); box-shadow: var(--raised-sm);
}
button.ghost:hover, .chip:hover, .icon-btn:hover, .nav-toggle:hover { background: var(--neu-face); box-shadow: -4px -4px 10px var(--neu-hi), 6px 7px 16px var(--neu-lo), inset 0 1px 0 var(--neu-edge); }
button:not(.ghost):not(.danger):not(.x):not(.icon-btn):not(.nav-toggle):not(.chip):not(.lc-st):not(.lc-link):not(.bxf-x):not(.of-slot):not(.seg button):not(.bxf-preset button), .chip.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff) 0%, var(--brand) 48%, var(--brand-2) 100%);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.12);
}
button:active, .chip:active { box-shadow: var(--inset) !important; transform: scale(.98); }
.seg { background: var(--neu-well); box-shadow: var(--inset); }
.seg button.on, .seg button.on:hover { background: var(--neu-face); box-shadow: var(--raised-sm); }

/* Teglar — kichik bo'rtiq tabletkalar */
.tag, .tag.ok, .tag.warn, .tag.danger, .tag.brand, .tag.gray { box-shadow: -1px -1px 3px var(--neu-hi), 2px 2px 5px var(--neu-lo); }

/* Yon menyu — chetdan ajralgan suzuvchi panel, faol band — yaltiroq plitka */
@media (min-width: 861px) {
  .sidebar { margin: 12px 0 12px 12px; border-radius: 24px; top: 71px; height: calc(100vh - 83px);
    box-shadow: 10px 12px 30px -8px rgba(29,53,87,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  body.nav-collapsed .sidebar { margin: 0; }
}
#nav a.active { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.15); }
#nav a .em { padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.25); width: 32px; height: 32px; }
#nav a.active .em { background: rgba(255,255,255,.18); }

/* Tepadagi panel — bo'rtiq chiziq */
.topbar { background: var(--neu-face); border-bottom: 1px solid var(--neu-edge); box-shadow: 0 6px 18px -10px var(--neu-lo); }

/* ═══ Fon: macOS uslubidagi original wallpaper (to'lqinlanuvchi lentalar, palitra ranglarida) ═══
   Aurora o'rnini bosadi; don (body::after) ustida qoladi. */
body::before {
  inset: 0; filter: none; animation: none;
  background: url(/bg/wallpaper.svg) center / cover no-repeat;
}
[data-theme=dark] body::before { background: url(/bg/wallpaper-tun.svg) center / cover no-repeat; }

/* ═══ Apple uslubidagi bo'rtiqlik — «material»: muzlatilgan shisha, yarim piksellik yorug' chet,
   katta yumshoq soya. Soft UI ning ikki tomonlama soyasini almashtiradi. ═══ */
:root {
  --mat: rgba(255,255,255,.62);
  --mat-strong: rgba(255,255,255,.78);
  --mat-edge: rgba(255,255,255,.7);
  --mat-blur: blur(28px) saturate(180%);
  --raised: 0 0 0 .5px rgba(29,53,87,.10), 0 1px 1px rgba(29,53,87,.04), 0 12px 32px -12px rgba(29,53,87,.22), inset 0 .5px 0 rgba(255,255,255,.95);
  --raised-sm: 0 0 0 .5px rgba(29,53,87,.10), 0 1px 2px rgba(29,53,87,.06), 0 4px 12px -6px rgba(29,53,87,.18), inset 0 .5px 0 rgba(255,255,255,.95);
  --inset: inset 0 0 0 .5px rgba(29,53,87,.12), inset 0 1px 2px rgba(29,53,87,.06);
  --neu-face: var(--mat);
  --neu-well: rgba(29,53,87,.045);
  --glow: 0 0 0 4px color-mix(in srgb, var(--info) 35%, transparent);
}
[data-theme=dark] {
  --mat: rgba(24,40,64,.58);
  --mat-strong: rgba(24,40,64,.78);
  --mat-edge: rgba(255,255,255,.08);
  --raised: 0 0 0 .5px rgba(255,255,255,.08), 0 14px 36px -12px rgba(0,0,0,.6), inset 0 .5px 0 rgba(255,255,255,.12);
  --raised-sm: 0 0 0 .5px rgba(255,255,255,.08), 0 4px 12px -6px rgba(0,0,0,.5), inset 0 .5px 0 rgba(255,255,255,.12);
  --inset: inset 0 0 0 .5px rgba(255,255,255,.08), inset 0 1px 2px rgba(0,0,0,.3);
  --neu-well: rgba(0,0,0,.22);
}
.card, .stat, .table-wrap, .lc-sec, .bxf-pop, .kanban .item, button.ghost, .chip, .icon-btn, .nav-toggle, .lang-select, .seg button.on {
  background: var(--mat); border: 1px solid var(--mat-edge);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
}
.card, .stat, .table-wrap, .lc-sec, .bxf-pop { box-shadow: var(--raised); }
.card:hover, .stat:hover { box-shadow: 0 0 0 .5px rgba(29,53,87,.12), 0 20px 44px -14px rgba(29,53,87,.30), inset 0 .5px 0 rgba(255,255,255,.95); }
[data-theme=dark] .card:hover, [data-theme=dark] .stat:hover { box-shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 22px 46px -14px rgba(0,0,0,.7), inset 0 .5px 0 rgba(255,255,255,.14); }
.kanban .item, button.ghost, .chip, .icon-btn, .nav-toggle, .lang-select, .seg button.on { box-shadow: var(--raised-sm); }
.modal, .lead-modal .modal-head, .lead-modal .modal-foot { background: var(--mat-strong); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
.modal.lead-modal { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.kanban .col { background: rgba(255,255,255,.28); box-shadow: var(--inset); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
[data-theme=dark] .kanban .col { background: rgba(0,0,0,.18); }
.topbar { background: var(--mat-strong); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); border-bottom: .5px solid rgba(29,53,87,.12); box-shadow: none; }
/* Maydonlar — Apple: yumshoq to'q to'ldirilgan, fokusda ko'k halqa */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .bxf-box, .bxf-multi, .tel-in { background: var(--neu-well); box-shadow: var(--inset); border-color: transparent; }
/* Asosiy tugma — tekis rang, tepasida nozik yorug'lik, yumshoq rangli soya */
button:not(.ghost):not(.danger):not(.x):not(.icon-btn):not(.nav-toggle):not(.chip):not(.lc-st):not(.lc-link):not(.bxf-x):not(.of-slot):not(.seg button):not(.bxf-preset button), .chip.on, #nav a.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff), var(--brand));
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 .5px 0 rgba(255,255,255,.5);
}
button:active { box-shadow: var(--inset) !important; transform: scale(.98); }
/* Yon menyu — to'q dengiz shisha (ortidagi fon xira ko'rinadi) */
.sidebar { background: rgba(29,53,87,.86); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  border: .5px solid rgba(255,255,255,.08); }
[data-theme=dark] .sidebar { background: rgba(10,20,36,.72); }
#nav a .em { background: transparent; box-shadow: none; padding: 0; width: 28px; height: 28px; }
.tag, .tag.ok, .tag.warn, .tag.danger, .tag.brand, .tag.gray { box-shadow: none; }

/* ═══ Kirish sahifasi — ichki sahifalar bilan bir uslubda: lentali fon (tungi variant) + shisha karta ═══ */
.login-screen { background: url(/bg/wallpaper-tun.svg) center / cover no-repeat, #0f1d31; }
.login-screen::before { display: none; }
.login-screen .blob { display: none; }
.login-card {
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 .5px rgba(29,53,87,.12), 0 30px 70px -20px rgba(5,12,24,.65), inset 0 .5px 0 rgba(255,255,255,.95);
}
[data-theme=dark] .login-card { background: rgba(24,40,64,.62); border-color: rgba(255,255,255,.1); }

/* ═══ Kirish sahifasi: fon harakatlanadi (lentalar sekin suzadi, yorug'lik qarama-qarshi oqadi) ═══ */
.login-screen { background: #0f1d31; isolation: isolate; }
.login-screen::before, .login-screen::after {
  content: ''; display: block; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  translate: none; width: auto; aspect-ratio: auto; opacity: 1; -webkit-mask: none; mask: none;
}
.login-screen::before { background: url(/bg/wallpaper-tun.svg) center / cover no-repeat; animation: kirishLenta 26s ease-in-out infinite alternate; }
.login-screen::after {
  background: url(/bg/wallpaper-tun.svg) center / cover no-repeat; transform: scaleX(-1);
  mix-blend-mode: screen; opacity: .35; animation: kirishNur 34s ease-in-out infinite alternate;
}
@keyframes kirishLenta {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-4%, 3%) scale(1.08) rotate(-2deg); }
  100% { transform: translate(3%, -2%) scale(1.04) rotate(1.5deg); }
}
@keyframes kirishNur {
  0%   { transform: scaleX(-1) translate(0, 0) scale(1.05); opacity: .2; }
  50%  { transform: scaleX(-1) translate(5%, -4%) scale(1.12); opacity: .42; }
  100% { transform: scaleX(-1) translate(-3%, 3%) scale(1.06); opacity: .28; }
}
.login-card { z-index: 2; }

/* ═══ Lid kartasi: Bitrix24 dagidek joyida tahrirlash ═══ */
.lc-view { cursor: default; }
.lc-view:hover { background: transparent; }
.lc-edit { position: relative; cursor: pointer; border-radius: 8px; margin: 0 -8px; padding-left: 8px !important; padding-right: 8px !important;
  transition: background .15s, box-shadow .15s; outline: none; }
.lc-edit:hover, .lc-edit:focus-visible { background: color-mix(in srgb, var(--info) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent); }
.lc-edit .lc-v { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.lc-pen { margin-left: auto; color: var(--info); opacity: 0; transition: opacity .15s; flex: none; display: inline-flex; }
.lc-edit:hover .lc-pen, .lc-edit:focus-visible .lc-pen { opacity: 1; }
.lc-edit.editing { background: color-mix(in srgb, var(--info) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 35%, transparent); cursor: default; }
.lc-edit.editing .lc-v > input, .lc-edit.editing .lc-v > select { width: 100%; min-height: 32px; padding: 5px 9px; font-size: 13.5px; }
.lc-edit.saved { animation: saqlandi 1.2s ease; }
@keyframes saqlandi { 0% { background: color-mix(in srgb, var(--ok) 22%, transparent); } 100% { background: transparent; } }

/* Ochiladigan ro'yxat variantlari: maydon foni shaffof bo'lgani uchun brauzer ro'yxatni oq fonda
   chizardi, tun rejimida matn ham oq bo'lib qolardi — variantlarga aniq rang beriladi */
select option, select optgroup { background-color: #ffffff; color: #1D3557; }
[data-theme=dark] select option, [data-theme=dark] select optgroup { background-color: #112036; color: #F1FAEE; }

/* ── Scrollbarlar — butun sayt (2026-10-08, egasi tanladi: lidlar taxtasidagi qizil uslub) ──
   Surilgich brend qizilida: ochdan to'qqa gradient, yaltiroq, uch nuqta; yo'lak yarim shaffof.
   Gorizontalda gradient va nuqtalar yonma-yon, tikda ustma-ust. Chrome 121+ da scrollbar-width/color
   berilsa ::-webkit-scrollbar e'tiborsiz qoladi — shuning uchun .kanban da auto. */
:root {
  --sb-track: color-mix(in srgb, var(--ink) 9%, transparent);
  --sb-edge: color-mix(in srgb, var(--ink) 14%, transparent);
  --sb-1: color-mix(in srgb, var(--brand-3) 70%, #ffffff);
  --sb-2: var(--brand);
  --sb-3: var(--brand-2);
  --sb-dot: rgba(255, 255, 255, .8);
}
[data-theme=dark] {
  --sb-track: color-mix(in srgb, #000 28%, transparent);
  --sb-edge: color-mix(in srgb, var(--line-2) 70%, transparent);
  --sb-1: var(--brand-3);
  --sb-2: var(--brand);
  --sb-3: color-mix(in srgb, var(--brand-2) 85%, var(--surface));
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 999px; box-shadow: inset 0 1px 2px var(--sb-edge); }
::-webkit-scrollbar-track:horizontal { margin: 0 8px; }
::-webkit-scrollbar-track:vertical { margin: 6px 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
  background-color: var(--sb-2); background-repeat: no-repeat;
}
::-webkit-scrollbar-thumb:horizontal {
  background-image: radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--sb-1), var(--sb-2) 55%, var(--sb-3));
  background-size: 5px 5px, 5px 5px, 5px 5px, 100% 100%, 100% 100%;
  background-position: calc(50% - 8px) 50%, 50% 50%, calc(50% + 8px) 50%, 0 0, 0 0;
}
::-webkit-scrollbar-thumb:vertical {
  background-image: radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px),
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--sb-1), var(--sb-2) 55%, var(--sb-3));
  background-size: 5px 5px, 5px 5px, 5px 5px, 100% 100%, 100% 100%;
  background-position: 50% calc(50% - 8px), 50% 50%, 50% calc(50% + 8px), 0 0, 0 0;
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background-image: radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px),
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--sb-2), var(--sb-3));
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-image: radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px), radial-gradient(circle, var(--sb-dot) 0 1.4px, transparent 1.9px),
    linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--sb-2), var(--sb-3));
}
/* Lidlar taxtasining pastki scrollbari — qalinroq; ustun ichidagisi ingichkaroq (kartalardan joy olmasin) */
.kanban { scrollbar-width: auto; scrollbar-color: auto; padding-bottom: 14px; }
.kanban::-webkit-scrollbar { height: 16px; }
.kanban .col-body::-webkit-scrollbar { width: 10px; }
/* Firefox ::-webkit-scrollbar ni bilmaydi — u yerda brend rangida oddiy chiziq */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--sb-2) var(--sb-track); }
}

/* ── Tezlik (2026-10-09): «shisha» xiralashtirishi (backdrop-filter) faqat kam sonli katta elementlarda ──
   Taxtada 300+ kartochka, tugma va chipning har biri blur(28px) bilan chizilardi — aylantirish/sudrashda
   kuchsiz kompyuterda sahifa qotardi. Ko'p sonli mayda elementlarga zichroq fon, xiralashtirishsiz. */
.kanban .item, .kanban .col, button.ghost, .chip, .icon-btn, .nav-toggle, .lang-select, .seg button.on,
.stat, .table-wrap, .lc-sec, .lc-call {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.kanban .item, .lc-sec, .table-wrap, .stat { background: color-mix(in srgb, var(--surface) 94%, transparent); }
button.ghost, .chip, .icon-btn, .nav-toggle, .lang-select, .seg button.on { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.kanban .col { background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
/* Sudralayotgan va ko'tarilayotgan kartada GPU qatlami oldindan tayyor turadi */
.kanban .col-body { contain: content; }

/* Telefonda aylantirish chizig'i kerak emas: barmoq bilan suriladi, chiziq esa ekrandan 12px joy olardi (egasi 2026-10-31) */
@media (max-width: 760px) { ::-webkit-scrollbar { width: 0; height: 0; } }

/* Sozlamalar bo'limlari yon menyuda (egasi 2026-10-31) */
#nav a.nav-sub { margin: 1px 0; padding: 7px 12px 7px 54px; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, #fff 74%, transparent); background: none; box-shadow: none; }
#nav a.nav-sub:hover { padding-left: 54px; color: #fff; background: rgba(255,255,255,.08); transform: none; }
#nav a.nav-sub.active { color: #fff; background: rgba(255,255,255,.16); box-shadow: none; }