/* Loyihalar analitikasi — yorug' dizayn tizimi
   Layout: chap tomonda yumaloq ikonkali panel, tepada yo'l + sana; kartalar — yarim shaffof shisha,
   asosiy harakatlar — laym rangli pill, raqamlar — katta va yengil */
:root {
  color-scheme: light;
  --bg: #eef1f7;
  --bg-glow-1: rgba(76, 125, 255, .16);
  --bg-glow-2: rgba(150, 200, 40, .10);
  --side: rgba(255, 255, 255, .8);
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #ffffff;
  --surface-2: rgba(15, 25, 50, .05);
  --surface-3: rgba(15, 25, 50, .09);
  --border: rgba(15, 25, 50, .09);
  --border-strong: rgba(15, 25, 50, .18);
  --text: #0e1426;
  --text-2: #475069;
  --text-3: #7a829a;
  --accent: #b6ea3c;
  --accent-ink: #0b1205;
  --accent-soft: rgba(120, 170, 20, .15);
  --blue: #2f63f0;
  --blue-soft: rgba(47, 99, 240, .12);
  --brand: var(--accent);
  --brand-ink: var(--accent-ink);
  --brand-soft: var(--accent-soft);
  --series-1: #2a6be0;
  --series-2: #e8642d;
  --series-3: #17a673;
  --series-4: #d99a00;
  --good: #1a7f37; --good-bg: rgba(26, 127, 55, .1);
  --warn: #93600a; --warn-bg: rgba(200, 140, 10, .13);
  --crit: #c22a2a; --crit-bg: rgba(194, 42, 42, .1);
  --info: #1c5cab; --info-bg: rgba(28, 92, 171, .1);
  --gold: #a5650a; --gold-soft: rgba(165, 101, 10, .12);
  --shadow: 0 20px 40px rgba(20, 30, 60, .12);
  --radius: 22px;
  --radius-sm: 14px;
  --blur: blur(18px);
  --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font);
  font-size: 15px;
}


* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background:
    radial-gradient(900px 600px at 85% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: 34px; font-weight: 600; line-height: 1.15; }
h1 .grad { background: linear-gradient(90deg, #7aa2ff, #4c7dff 45%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
.num, td.n, .kpi .value, .f-conv, .pbar-nums, .big { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--text-3); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Karkas ---------- */
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 16px; background: var(--side); border-right: 1px solid var(--border);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; padding: 2px 8px 26px; color: var(--text); font-size: 18px; letter-spacing: -.01em; }
.logo small { display: block; font-weight: 500; font-size: 11px; color: var(--text-3); letter-spacing: .02em; }
.logo-mark { width: 38px; height: 38px; border-radius: 12px; background: conic-gradient(from 210deg, #4c7dff, #7aa2ff, var(--accent), #4c7dff); display: grid; place-items: center; flex: none; box-shadow: 0 0 24px rgba(76, 125, 255, .45); }
.logo-mark svg { width: 20px; height: 20px; stroke: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .55)); }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 5px; border-radius: 999px; margin-bottom: 4px;
  color: var(--text-2); font-weight: 600; font-size: 14.5px;
}
.nav a .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); flex: none; transition: background .2s, box-shadow .2s; }
.nav a svg { width: 18px; height: 18px; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a:hover .ic { background: var(--surface-3); }
.nav a.active { color: var(--text); background: linear-gradient(90deg, var(--blue-soft), transparent 85%); }
.nav a.active .ic { background: radial-gradient(circle at 30% 30%, #7aa2ff, #3159e8); border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(76, 125, 255, .6); }
.nav .badge { margin-left: auto; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.side-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; }
.side-user { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 14px; font-weight: 700; padding: 8px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.side-user small { display: block; color: var(--text-3); font-weight: 500; font-size: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: linear-gradient(135deg, #4c7dff, #8a5cff); color: #fff; flex: none; }
.side-actions { display: flex; gap: 6px; }
.side-actions button { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px; border-radius: 999px; cursor: pointer; }
.side-actions button:hover { color: var(--text); background: var(--surface-3); }

.main { padding: 22px 30px 64px; max-width: 1400px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13.5px; font-weight: 600; flex-wrap: wrap; }
.crumbs b { color: var(--text-2); font-weight: 600; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.circle-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; backdrop-filter: var(--blur); position: relative; }
.circle-btn:hover { background: var(--surface-3); text-decoration: none; }
.circle-btn svg { width: 18px; height: 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head > * { min-width: 0; }
.page-head .sub { color: var(--text-2); font-size: 14.5px; margin-top: 8px; max-width: 62ch; }
.back { font-size: 13px; color: var(--text-3); display: inline-flex; gap: 4px; margin-bottom: 8px; }

/* ---------- Boshqaruv elementlari ---------- */
.btn {
  appearance: none; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 rgba(198, 245, 90, 0); }
.btn.primary:hover { box-shadow: 0 0 24px rgba(198, 245, 90, .35); background: var(--accent); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.icon { padding: 8px; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 13px; width: 100%; min-width: 0;
}
select option { background: var(--surface-solid); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type="color"] { padding: 4px; height: 42px; cursor: pointer; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea { resize: vertical; min-height: 64px; }
label.field, div.field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 600; align-content: start; }
label.field .hint, div.field .hint { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { width: auto; border-radius: 999px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; backdrop-filter: var(--blur); }
.seg button { flex: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- Kartalar va panjaralar ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; min-width: 0;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head .muted { font-size: 12.5px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.stack { display: grid; gap: 16px; align-content: start; }
.mt { margin-top: 16px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* KPI tiles — katta yengil raqamlar */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 14px; display: grid; gap: 2px; min-width: 0; backdrop-filter: var(--blur); }
.kpi .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi .label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.kpi .value { font-size: 30px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.kpi .value small { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.kpi .sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delta { font-size: 12px; font-weight: 700; display: inline-flex; gap: 2px; align-items: center; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.delta.up { color: var(--good); background: var(--good-bg); }
.delta.down { color: var(--crit); background: var(--crit-bg); }
.delta.flat { color: var(--text-3); background: var(--surface-2); }

/* Funnel */

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Progress — chiziqli (rasmdagi «Progress» kabi) */
.plans { display: grid; gap: 16px; }
.pbar { display: grid; gap: 7px; }
.pbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pbar-top b { font-weight: 700; }
.pbar-nums { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.ptrack { position: relative; height: 12px; border-radius: 99px; background: var(--surface-3); overflow: visible; }
.pfill { height: 100%; border-radius: 99px; max-width: 100%;
  background: repeating-linear-gradient(135deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 70%, transparent) 6px 12px); }
.pfill.risk { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, color-mix(in srgb, var(--warn) 65%, transparent) 6px 12px); }
.pfill.behind { background: repeating-linear-gradient(135deg, var(--crit) 0 6px, color-mix(in srgb, var(--crit) 65%, transparent) 6px 12px); }
.pfill.over { background: repeating-linear-gradient(135deg, var(--series-2) 0 6px, color-mix(in srgb, var(--series-2) 65%, transparent) 6px 12px); }
.pmark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); border-radius: 2px; opacity: .7; }
.pfoot { font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plan-empty { display: grid; gap: 10px; justify-items: start; color: var(--text-2); font-size: 14px; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { text-align: left; font-weight: 700; font-size: 12px; color: var(--text-3); padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th.n, td.n { text-align: right; }
td { padding: 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
td.wrap { white-space: normal; min-width: 220px; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:hover td:first-child { border-radius: 12px 0 0 12px; }
tbody tr:hover td:last-child { border-radius: 0 12px 12px 0; }
tfoot td { font-weight: 800; border-top: 1px solid var(--border); border-bottom: 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; flex: none; box-shadow: 0 0 8px currentColor; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; border: 1px solid var(--border); }
.pill.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.crit { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.pill.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pill.lime { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Insights */

.insight { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 13px; border-radius: 14px; font-size: 14px; align-items: start; }
.insight .ic { font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; }
.insight.warning { background: var(--warn-bg); } .insight.warning .ic { color: var(--warn); background: var(--warn-bg); }
.insight.good { background: var(--good-bg); } .insight.good .ic { color: var(--good); background: var(--good-bg); }
.insight.info { background: var(--info-bg); } .insight.info .ic { color: var(--info); background: var(--info-bg); }
.chart-box { position: relative; height: 240px; }

/* Discipline */

.cell { height: 22px; border-radius: 7px; background: var(--surface-3); }
.cell.none { background: var(--crit-bg); outline: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); outline-offset: -1px; }
.cell.today { outline: 2px dashed var(--text-3); outline-offset: -2px; }

/* ---------- Direktor paneli: loyiha kartalari ---------- */

.status-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.status-chips button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.status-chips button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Entry */

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.who { font-size: 11px; color: var(--text-3); }
details summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text-2); padding: 4px 0; }

/* AI */
.ai-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--blue-soft); border: 1px solid rgba(47, 99, 240, .18); margin: 14px 0 12px; }
.ai-bar .ai-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-solid); font-size: 20px; }
.ai-bar > div { display: grid; gap: 2px; min-width: 0; }
.ai-bar.off { background: var(--surface-2); border-color: var(--border); grid-template-columns: auto minmax(0, 1fr); }
.ai-bar.stale { background: var(--warn-bg); border-color: rgba(200, 140, 10, .3); }
.ai-bar .ai-warn { color: var(--warn); font-weight: 700; font-size: 13.5px; }
.ai-bar .btn .spinner { width: 14px; height: 14px; }
.ai-tag { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 99px; padding: 1px 8px; vertical-align: 1px; }
textarea.ai-filled { border-color: rgba(47, 99, 240, .45); background: rgba(47, 99, 240, .04); }
@media (max-width: 640px) { .ai-bar { grid-template-columns: auto minmax(0, 1fr); } .ai-bar .btn { grid-column: 1 / -1; justify-content: center; } }

.spinner { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 16px; gap: 16px; }
.login-art { border-radius: 28px; background: linear-gradient(160deg, rgba(49, 89, 232, .55), rgba(12, 17, 32, .8) 60%); border: 1px solid rgba(122, 162, 255, .3); color: var(--text-2); padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.login-art h2 { color: #fff; font-size: 38px; line-height: 1.12; max-width: 15ch; font-weight: 600; letter-spacing: -.03em; }
.login-art .flow-demo { display: grid; gap: 10px; font-size: 14px; max-width: 380px; }
.login-art .flow-demo div { display: grid; grid-template-columns: 100px 1fr 52px; gap: 10px; align-items: center; color: #dbe3ff; }
.login-art .flow-demo i { height: 10px; border-radius: 99px; background: repeating-linear-gradient(135deg, #c6f55a 0 6px, rgba(198,245,90,.6) 6px 12px); display: block; }
.login-form { display: grid; place-items: center; padding: 24px 16px; }
.login-form form { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.error { color: var(--crit); font-size: 13px; min-height: 18px; }

/* Toast, modal */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--accent); color: var(--accent-ink);
  padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .25s, visibility .25s; z-index: 80;
  max-width: calc(100% - 32px); visibility: hidden; box-shadow: var(--shadow);
}
#toast.show { transform: translateX(-50%) translateY(0); visibility: visible; }
#toast.err { background: var(--crit); color: #fff; }

.tabs { display: inline-flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; max-width: 100%; }
.tabs button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-2); padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: var(--accent); color: var(--accent-ink); }
.code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 2px 7px; border-radius: 7px; word-break: break-all; }
pre.tg { font-family: var(--font); white-space: pre-wrap; background: var(--surface-2); border-radius: 16px; padding: 14px; margin: 0; font-size: 13.5px; line-height: 1.5; max-height: 460px; overflow-y: auto; }
.empty { text-align: center; padding: 36px 16px; color: var(--text-3); }

.mobile-top, .mobile-nav { display: none; }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .main { padding: 14px 16px 100px; }
  .topbar { display: none; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .kpis, .kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px; }
  .kpi .value { font-size: 23px; }
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  h1 { font-size: 27px; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .mobile-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
    background: var(--side); backdrop-filter: var(--blur); border-bottom: 1px solid var(--border); padding: 10px 16px; font-weight: 700;
  }
  .mobile-top .logo { padding: 0; font-size: 16px; }
  .mobile-top .logo-mark { width: 30px; height: 30px; }
  .mobile-top button { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
  .mobile-nav {
    display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); position: fixed; bottom: 10px; left: 10px; right: 10px;
    background: var(--side); backdrop-filter: var(--blur); border: 1px solid var(--border-strong); border-radius: 24px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 40; box-shadow: var(--shadow);
  }
  .mobile-nav a { display: grid; justify-items: center; gap: 2px; font-size: 10px; color: var(--text-3); padding: 4px 2px; font-weight: 700; text-decoration: none; }
  .mobile-nav a .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
  .mobile-nav a svg { width: 20px; height: 20px; }
  .mobile-nav a.active { color: var(--text); }
  .mobile-nav a.active .ic { background: radial-gradient(circle at 30% 30%, #7aa2ff, #3159e8); color: #fff; box-shadow: 0 0 16px rgba(76, 125, 255, .6); }
  .mobile-nav .badge { display: none; }
  .filters { width: 100%; }
  .filters select, .filters input { flex: 1 1 140px; }
}

/* Ixcham ochiladigan menyu (demo: kim sifatida) */

.menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; backdrop-filter: var(--blur); }
.menu-btn:hover { background: var(--surface-3); }
.tag-demo { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 3px 8px; border-radius: 99px; }
.demo-mobile { display: none; margin-bottom: 14px; }
@media (max-width: 860px) { .demo-mobile { display: block; } }

/* Ixcham ro'yxatlar */

.clist { display: grid; gap: 6px; }
.citem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.cname { display: grid; min-width: 0; }
.cname b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-chips button.auto { box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 860px) { .citem { grid-template-columns: auto minmax(0, 1fr) auto; } .citem .circle-btn { display: none; } }

/* Signallar */

.assign { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.assign:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.assign svg { width: 14px; height: 14px; }
/* Jadval rejimida kiritish */
.grid-entry td { padding: 6px 6px; }
.grid-entry th.n { text-align: center; }
.cell-in { width: 96px; padding: 8px 10px; text-align: right; border-radius: 10px; font-variant-numeric: tabular-nums; }
.cell-in::placeholder { color: var(--text-3); opacity: .7; }

input[type="file"] { padding: 6px; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; font-size: 13px; border: 0; border-radius: 999px; padding: 7px 14px; margin-right: 10px; background: var(--surface-3); color: var(--text); cursor: pointer; }

/* ---------- PM: 4 qadamli kunlik hisobot ---------- */
.stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.stepper button { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 700; font-size: 14px; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer; white-space: nowrap; backdrop-filter: var(--blur); }
.stepper .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 13px; }
.stepper .num svg { width: 15px; height: 15px; }
.stepper button.ok .num { background: var(--good-bg); color: var(--good); }
.stepper button.on { color: var(--text); border-color: transparent; background: linear-gradient(135deg, rgba(91,140,255,.45), rgba(49,89,232,.25)); }
.stepper button.on .num { background: var(--accent); color: var(--accent-ink); }
.stepper i { flex: 1 0 16px; max-width: 48px; height: 2px; background: var(--border-strong); border-radius: 2px; }
.step { display: grid; gap: 18px; padding: 24px; }
.step-head { display: grid; gap: 6px; }
.step-head h2 { font-size: 22px; }
.step-head p { margin: 0; color: var(--text-2); font-size: 15px; max-width: 70ch; }
.step-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; }
.btn.big { padding: 13px 22px; font-size: 15px; }
.grid-entry .cell-in { width: 130px; font-size: 16px; padding: 10px 12px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.check-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.check-top b { font-size: 15.5px; display: inline-flex; align-items: center; }
.meaning { margin: 0; font-size: 14px; color: var(--text); }
.nums { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.check details { display: grid; gap: 8px; }
.check details[open] { gap: 8px; }
.check details summary { font-size: 13px; color: var(--text-3); }
.check details .status-chips { margin: 8px 0; }
.done-card { text-align: center; justify-items: center; padding: 40px 24px; }
.done-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 40px rgba(198, 245, 90, .35); }
.done-icon svg { width: 34px; height: 34px; }
.done-card h2 { font-size: 24px; }
.done-card p { margin: 0; }
.big-nums { justify-content: center; gap: 12px; }
.big-nums span { display: grid; gap: 2px; min-width: 110px; padding: 12px 16px; background: var(--surface-2); border-radius: 16px; font-size: 12px; color: var(--text-3); }
.big-nums b { font-size: 22px; font-weight: 600; color: var(--text); }
.citem.arch { width: 100%; border: 1px solid var(--border); cursor: pointer; font: inherit; color: inherit; text-align: left; grid-template-columns: minmax(0, 1fr) auto auto; padding: 14px 16px; }
.citem.arch:hover { background: var(--surface-3); }
@media (max-width: 860px) {
  .checks { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 18px 16px; }
  .stepper button { padding: 5px 10px 5px 5px; font-size: 13px; }
  .stepper button:not(.on) span:not(.num) { display: none; }
  .grid-entry .cell-in { width: 92px; }
  .step-foot .btn.primary { flex: 1 1 auto; justify-content: center; }
}

/* Telefonda: har bir loyiha — kichik karta, maydon nomi ustida */
@media (max-width: 860px) {
  .grid-entry thead { display: none; }
  .grid-entry, .grid-entry tbody { display: block; }
  .grid-entry tr { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .grid-entry tr:last-child { border-bottom: 0; }
  .grid-entry td { display: block; padding: 0; border: 0; }
  .grid-entry td:first-child { grid-column: 1 / -1; font-weight: 700; }
  .grid-entry td:last-child:not(.n) { display: none; }
  .grid-entry td.n::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--text-3); text-align: left; margin-bottom: 4px; }
  .grid-entry .cell-in { width: 100%; }
  tbody tr:hover td { background: none; }
}

.onb-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.onb-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; }
.onb-list .muted { font-size: 13px; }

/* PM: so'raladigan savollar, izohlar, muammolar, direktor yechimi */
.step-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 18px; align-items: start; }
.ask { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; font-size: 13.5px; }
.ask ol { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 2px; }
.ask .btn { justify-self: start; }
/* 1-qadam: shu kunning dollar kursi */
.rate-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.rate-in label { display: grid; gap: 1px; }
.rate-in .cell-in { width: 150px; font-size: 16px; font-weight: 700; }
.rate-in .cell-in::placeholder { font-size: 14px; font-weight: 400; }
.rate-in.need { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.rate-in .need-tag { color: var(--warn); }
@media (max-width: 640px) { .rate-in { grid-template-columns: minmax(0, 1fr) auto; } .rate-in > span { grid-column: 1 / -1; } }
.lead-pair { margin: 2px 0 0; }
/* Kiritishlar tarixi (har bir o'zgarish) */
.history { margin-top: 14px; }
.history > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.history > summary::before { content: '›'; display: inline-block; transition: transform .15s; color: var(--text-3); }
.history[open] > summary::before { transform: rotate(90deg); }
.history .hist-body { margin-top: 10px; }
table.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hist th { text-align: left; font-size: 11.5px; color: var(--text-3); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border); }
table.hist td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.hist .n { text-align: right; font-variant-numeric: tabular-nums; }
table.hist .nowrap { white-space: nowrap; color: var(--text-2); }
.grid-entry.wide .cell-in { width: 108px; }
.grid-entry td.calc { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-entry .cell-in.txt { width: 100%; min-width: 180px; text-align: left; font-size: 14px; }
.text-entry th { text-align: left; }
details.extra > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 4px 0; }
details.extra[open] > summary { margin-bottom: 8px; }
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.problems li { display: flex; gap: 8px; align-items: baseline; }
.who { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.who.target { background: var(--warn-bg, rgba(255,190,80,.14)); color: var(--warn, #ffbe50); }
.who.sales { background: var(--crit-bg, rgba(255,107,107,.14)); color: var(--crit, #ff6b6b); }
.check textarea { font-size: 14px; font-weight: 500; line-height: 1.45; resize: vertical; overflow: hidden; }
.reply-banner { border: 1px solid rgba(198, 245, 90, .35); background: rgba(198, 245, 90, .07); border-radius: 16px; padding: 12px 16px; margin-bottom: 16px; display: grid; gap: 4px; }
.reply-banner p { margin: 0; font-size: 14.5px; }
@media (max-width: 860px) {
  .step-top { grid-template-columns: minmax(0, 1fr); }
  .text-entry .cell-in.txt { min-width: 0; }
}
.note-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.who.director { background: var(--blue-soft); color: var(--text); }

/* ---------- Loyihalar: yig'iladigan ro'yxat ---------- */
.mb { margin-bottom: 16px; }
.neg { color: var(--crit); }
.pos { color: var(--good); }
.insight.critical { background: var(--crit-bg); } .insight.critical .ic { color: var(--crit); background: var(--crit-bg); }
.chart-box.short { height: 200px; }
.proj-list { display: grid; gap: 10px; }
.proj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: var(--blur); overflow: hidden; }
.proj.open { border-color: var(--border-strong); }
.proj-head { width: 100%; display: grid; grid-template-columns: minmax(170px, 1.4fr) repeat(5, minmax(0, 1fr)) auto 22px; align-items: center; gap: 12px;
  padding: 14px 18px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.proj-head:hover { background: var(--surface-2); }
.proj-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.proj-name b { font-size: 16px; }
.proj-name small { color: var(--text-3); font-size: 11.5px; font-weight: 600; flex-basis: 100%; padding-left: 18px; margin-top: -4px; }
.proj-m { display: grid; gap: 1px; min-width: 0; }
.proj-m small { font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-m b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { font-size: 18px; color: var(--text-3); transition: transform .2s; justify-self: end; line-height: 1; }
.proj.open .chev { transform: rotate(180deg); }
.proj-body:empty { display: none; }
.proj-body { padding: 4px 18px 18px; display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sub-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.sub-card h3 { font-size: 14px; margin: 0 0 10px; }
.sub-card h4 { font-size: 12.5px; margin: 14px 0 8px; color: var(--text-2); }
.sub-card .card-head h3 { margin: 0; }
details.sub-card > summary { cursor: pointer; }
details.sub-card[open] > summary { margin-bottom: 10px; }
/* Pul: tushumdan sof foydagacha */
.wf { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.wf > span { color: var(--text-2); }
.wf > i { height: 8px; border-radius: 4px; background: var(--series-2); opacity: .85; }
.wf.in > i { background: var(--series-1); }
.wf > i.none { background: none; }
.wf > b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.wf > em { font-style: normal; color: var(--text-3); text-align: right; font-size: 12px; }
.wf.pos > b, .wf.pos > span { color: var(--good); } .wf.neg > b, .wf.neg > span { color: var(--crit); }
.wf.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 7px; font-weight: 700; font-size: 14px; }
/* Voronka va sabablar — bitta rang (miqdor) */
.fn, .rb { display: grid; gap: 6px; }
.fn-row, .rb-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto 50px; align-items: center; gap: 8px; font-size: 13px; }
.rb-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 40px; }
.fn-row > span, .rb-row > span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-row > i, .rb-row > i { height: 8px; border-radius: 4px; background: var(--series-1); }
.fn-row > b, .rb-row > b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fn-row > em { font-style: normal; color: var(--text-3); font-size: 12px; text-align: right; }
.unit { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.unit span { display: grid; gap: 1px; }
.unit small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.unit b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Lid sifati: sifatli / potensial / sifatsiz — holat ranglari, yozuv bilan */
.qbar { display: flex; gap: 2px; height: 14px; border-radius: 6px; overflow: hidden; }
.qbar i { min-width: 3px; }
.q-good { background: var(--good); } .q-mid { background: var(--warn); } .q-bad { background: var(--crit); }
.qlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.qlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
/* Narx tavsiyasi */
.price { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.price .pi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.price.good .pi { background: var(--good-bg); color: var(--good); } .price.warn .pi { background: var(--warn-bg); color: var(--warn); }
.price.info .pi { background: var(--info-bg); color: var(--info); } .price.crit .pi { background: var(--crit-bg); color: var(--crit); }
.price p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.notes { display: grid; gap: 6px; font-size: 13px; }
.notes > div { display: flex; flex-wrap: wrap; gap: 3px 12px; }
@media (max-width: 1100px) {
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .proj-head { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 13px 14px; }
  .proj-name { grid-column: 1 / 3; }
  .proj-head .pill { grid-column: 3; grid-row: 1; justify-self: end; }
  .chev { display: none; }
  .proj-body { padding: 12px; }
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .wf { grid-template-columns: 104px minmax(0, 1fr) auto 34px; }
}

.tbl-title { font-size: 15px; margin: 4px 0 -6px; }
.reasons-in { display: grid; gap: 14px; }
.rin { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
.rin > b { display: flex; align-items: center; }
.rin-kind { display: grid; gap: 6px; }
.rin-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.rin-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.rin-grid label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rin-grid .cell-in { width: 100%; }
@media (max-width: 1100px) { .rin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Ixcham chap menyu (CRM dagi kabi) ---------- */
@media (min-width: 861px) {
  .layout { grid-template-columns: 100px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
  .sidebar > .logo { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 0; }
  .sidebar > .logo .brand-word { display: none; }
  .sidebar .nav, .sidebar .side-foot { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 8px; display: grid; gap: 4px; backdrop-filter: var(--blur); margin: 0; }
  .sidebar .side-foot { margin-top: 10px; padding: 0; background: none; border: 0; backdrop-filter: none; }
  .sidebar .nav a { position: relative; flex-direction: column; gap: 4px; width: 66px; padding: 8px 2px; font-size: 10.5px; line-height: 1.15; text-align: center; border-radius: 18px; }
  .sidebar .nav a.active { background: var(--surface-3); }
  .sidebar .nav .badge { position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 6px; }
  .sidebar .side-user { display: none; }
  .main { max-width: 1560px; }
}

/* ---------- Doska: har bir loyiha — ustun ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.totals { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.totals span { display: grid; gap: 0; padding: 6px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-width: 92px; }
.totals small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.totals b { font-size: 15px; font-variant-numeric: tabular-nums; }
.totals .arch-note { background: var(--surface-2); border-style: dashed; }
.totals .arch-note b { font-size: 13px; color: var(--text-2); }
.board { display: grid; grid-template-columns: var(--cols, repeat(4, minmax(260px, 1fr))); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.col { --tint: color-mix(in srgb, var(--pc) 34%, #2b2f36); background: var(--tint); border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  min-height: calc(100vh - 190px); cursor: pointer; scroll-snap-align: start; transition: transform .15s, box-shadow .15s; outline: none; }
.col:hover, .col:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.col:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.col-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 2px 4px 4px; color: #fff; }
.col-head h2 { font-size: 19px; margin: 0; color: #fff; letter-spacing: -.01em; }
.col-head small { font-size: 11.5px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.col-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); flex: none; }
.tile { background: rgba(18, 20, 24, .86); color: #f1f3f7; border-radius: 18px; padding: 12px 14px; display: grid; gap: 5px; }
.tile > small { font-size: 11px; font-weight: 700; color: #9aa3b2; text-transform: uppercase; letter-spacing: .05em; }
.tile .big { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile .kv { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; font-size: 13.5px; }
.tile .kv:has(em) { grid-template-columns: 1fr auto auto; }
.tile .kv span { color: #b8c0cc; }
.tile .kv b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tile .kv em { font-style: normal; font-size: 12px; color: #9aa3b2; min-width: 64px; text-align: right; }
.tile .why { margin: 2px 0 0; font-size: 12.5px; color: #c9d0da; }
.tile p { margin: 0; font-size: 13px; line-height: 1.4; color: #dfe4ea; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile.issue.critical { box-shadow: inset 3px 0 0 #ff7a7a; } .tile.issue.critical > small { color: #ff9b9b; }
.tile.issue.warning { box-shadow: inset 3px 0 0 #f6c453; } .tile.issue.warning > small { color: #f6c453; }
.tile .pos { color: #7ee08a; } .tile .neg { color: #ff8a8a; }
.qbar.sm { height: 8px; margin: 2px 0 3px; }
.col-foot { margin-top: auto; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); padding: 6px; }
.col { --tint: color-mix(in srgb, var(--pc) 22%, #ffffff); }
.col-head, .col-head h2 { color: #10131a; }
.col-head small, .col-foot { color: #4a5262; }
@media (max-width: 860px) {
  .totals { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: var(--cols-m, repeat(4, 84vw)); margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 16px; }
  .col { min-height: 0; }
}

/* ---------- Loyiha sahifasi ---------- */
.ptitle-big { display: flex; align-items: center; gap: 12px; }
.pswitch { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; }
.pswitch a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-weight: 700; font-size: 13px; text-decoration: none; }
.pswitch a .col-dot { width: 10px; height: 10px; box-shadow: none; }
.pswitch a.on { background: color-mix(in srgb, var(--pc) 30%, var(--surface)); color: var(--text); border-color: transparent; }
.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pgrid > div { display: grid; min-width: 0; }
.pgrid > div > .sub-card { height: 100%; box-sizing: border-box; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-12 { grid-column: span 12; }
.pgrid .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .span-4 { grid-column: span 6; } }
@media (max-width: 860px) { .span-4, .span-6 { grid-column: span 12; } }
.col-head .pill { background: rgba(10, 12, 16, .55); }
.col-head .pill { background: rgba(255, 255, 255, .75); }
.tile .kv b { min-width: 52px; text-align: right; }
.tile .kv em { min-width: 76px; }

/* ---------- Yorug' rejim aniqliklari ---------- */
body { background: radial-gradient(900px 600px at 85% -10%, rgba(76, 125, 255, .10), transparent 60%), var(--bg); background-attachment: fixed; }
h1 .grad { background: linear-gradient(90deg, #2f63f0, #6a4cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 700; }
.kpi .value { font-weight: 600; }
.card, .kpi, .proj, .sub-card, .seg, .totals span { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card, .kpi { background: #fff; }
.sub-card { background: #fff; }
.nav a.active .ic, .mobile-nav a.active .ic { box-shadow: 0 4px 12px rgba(49, 89, 232, .3); }
/* Doska: ustun — loyiha rangining ochiq tusi, kartochkalar — oq */
.col { --tint: color-mix(in srgb, var(--pc) 16%, #ffffff); border: 1px solid color-mix(in srgb, var(--pc) 22%, #ffffff); }
.col:hover, .col:focus-visible { box-shadow: 0 10px 24px rgba(16, 24, 40, .10); }
.col-head, .col-head h2 { color: #10131a; }
.col-head small, .col-foot { color: #4a5262; }
.col-dot { box-shadow: 0 0 0 3px #fff; }
.col-head .pill { background: #fff; }
.tile { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.tile > small { color: var(--text-3); }
.tile .kv span { color: var(--text-2); }
.tile .kv em, .tile .why { color: var(--text-3); }
.tile p { color: var(--text); }
.tile .pos { color: var(--good); } .tile .neg { color: var(--crit); }
.tile.issue.critical { box-shadow: inset 3px 0 0 var(--crit), 0 1px 2px rgba(16, 24, 40, .06); } .tile.issue.critical > small { color: var(--crit); }
.tile.issue.warning { box-shadow: inset 3px 0 0 #d99a00, 0 1px 2px rgba(16, 24, 40, .06); } .tile.issue.warning > small { color: var(--warn); }
/* Raqamlar bir xil kenglikda */
body, input, textarea, select, button { font-family: var(--font); }
.kv b, .proj-m b, .tile .big, .kpi .value, td.n, .wf b, .fn-row b, .rb-row b, .unit b, .totals b { font-variant-numeric: tabular-nums; }
/* Tahlil kartasi: 4 ta raqam, 3 tagacha muammo, taklif */
.check { gap: 12px; padding: 16px 18px; background: #fff; }
.check-top b { font-size: 16px; }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.mini > div { display: grid; gap: 1px; min-width: 0; }
.mini small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.mini b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.check .problems { gap: 7px; font-size: 13.5px; line-height: 1.4; }
.check .problems li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.check .who { text-align: center; }
.ok-line { margin: 0; color: var(--good); font-weight: 600; font-size: 13.5px; }
.nodata { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.check.is-empty { background: var(--surface-solid); }
.check textarea { font-weight: 400; }
.check details > summary { cursor: pointer; }
.check details[open] { display: grid; gap: 8px; }
.note-line { margin: 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 560px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check { align-content: start; }

/* ---------- Kalendar ---------- */
input, select, textarea { color-scheme: light; }
.date-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: #fff;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.date-btn:hover { border-color: var(--blue); }
.date-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.date-btn svg { width: 16px; height: 16px; color: var(--blue); }
.range { display: inline-flex; align-items: center; gap: 6px; }
.month-nav { display: inline-flex; align-items: center; gap: 8px; }
.month-nav b { min-width: 120px; text-align: center; font-size: 14px; }
.cal { position: absolute; z-index: 76; width: 296px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .16); padding: 12px; display: grid; gap: 8px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.cal-head b { font-size: 15px; }
.cal-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; }
.cal-nav:hover:not([disabled]) { background: var(--surface-2); }
.cal-nav[disabled] { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 4px 0 6px; }
.cal-day { height: 36px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-day:hover:not([disabled]) { background: var(--surface-2); }
.cal-day.out { color: var(--text-3); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 700; }
.cal-day.sel { background: var(--blue); color: #fff; font-weight: 700; }
.cal-day[disabled] { color: #c5cad6; cursor: default; }
.cal-day:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cal-foot { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.cal-foot button { flex: 1; border: 0; background: var(--surface-2); border-radius: 10px; padding: 8px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.cal-foot button:hover:not([disabled]) { background: var(--surface-3); }
.cal-foot button[disabled] { opacity: .4; cursor: default; }

/* ---------- Tanlash ro'yxati va rang ---------- */
.sel { display: inline-block; position: relative; min-width: 0; }
.sel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 150px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text); background: #fff; border: 1px solid var(--border-strong); border-radius: 12px; padding: 9px 12px; cursor: pointer; text-align: left; }
.sel-btn:hover { border-color: var(--blue); }
.sel-btn:focus-visible, .swatch-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sel-btn svg { color: var(--text-3); flex: none; }
.field .sel, .field .color-pick { display: block; }
.menu-pop { position: absolute; z-index: 76; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
  padding: 6px; display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; }
.menu-item.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.tick-mark { font-weight: 700; }
.swatch-btn { width: 44px; height: 38px; border-radius: 12px; border: 1px solid var(--border-strong); background: #fff; padding: 5px; cursor: pointer; display: grid; }
.swatch-btn::after { content: ''; border-radius: 8px; background: var(--c); }
.color-menu { min-width: 0 !important; padding: 10px; }
.swatches { display: grid; grid-template-columns: repeat(6, 30px); gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.swatch:hover, .swatch:focus-visible { transform: scale(1.12); outline: none; }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.sel-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Glow: soya o'rniga elementning o'z rangida yorug'lik ---------- */
.dot { background: var(--dc, var(--series-1)); box-shadow: 0 0 8px color-mix(in srgb, var(--dc, var(--series-1)) 65%, transparent); }
.col-dot { box-shadow: 0 0 0 3px #fff, 0 0 14px color-mix(in srgb, var(--pc) 70%, transparent); }
.pswitch a .col-dot { box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 70%, transparent); }
.nav a.active .ic, .mobile-nav a.active .ic { box-shadow: 0 0 18px rgba(49, 89, 232, .45); }
.logo-mark { box-shadow: 0 0 20px rgba(76, 125, 255, .4); }
.btn.primary:hover { box-shadow: 0 0 20px rgba(150, 210, 40, .45); }
.done-icon { box-shadow: 0 0 36px rgba(150, 210, 40, .45); }
.cal-day.sel { box-shadow: 0 0 12px rgba(47, 99, 240, .4); }
.swatch:hover { box-shadow: 0 0 12px var(--c); }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c), 0 0 14px var(--c); }
.stepper button.on .num { box-shadow: 0 0 14px rgba(150, 210, 40, .55); }
.stepper button.ok .num { box-shadow: 0 0 10px color-mix(in srgb, var(--good) 35%, transparent); }
.price .pi { box-shadow: 0 0 14px currentColor; }
.price.good .pi { box-shadow: 0 0 14px color-mix(in srgb, var(--good) 35%, transparent); }
.price.warn .pi { box-shadow: 0 0 14px color-mix(in srgb, var(--warn) 35%, transparent); }
.price.info .pi { box-shadow: 0 0 14px color-mix(in srgb, var(--info) 35%, transparent); }
.price.crit .pi { box-shadow: 0 0 14px color-mix(in srgb, var(--crit) 35%, transparent); }

/* ---------- Oylik reja: doska va loyiha sahifasi ---------- */
.plan-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); box-shadow: 0 0 18px rgba(47, 99, 240, .10); font-size: 14px; }
.plan-banner > span { font-size: 20px; }
.plan-banner > div { flex: 1; }
.pm-row { display: grid; grid-template-columns: 54px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.pm-row > span { color: var(--text-2); }
.pm-row > b { text-align: right; font-variant-numeric: tabular-nums; }
.pm-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: visible; }
.pm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.pm-fill.good { background: var(--good); } .pm-fill.warn { background: #d99a00; } .pm-fill.crit { background: var(--crit); }
.pm-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.plan-warn { margin: 4px 0 0 !important; font-size: 12.5px !important; }
.plan-warn.critical { color: var(--crit) !important; } .plan-warn.warning { color: var(--warn) !important; }
.plan-ok { margin: 4px 0 0 !important; color: var(--good) !important; font-weight: 600; font-size: 13px !important; }
.tile .btn.small { justify-self: start; margin-top: 2px; }
.need-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); font-size: 13.5px; }
.plan-alerts { display: grid; gap: 8px; }
@media (max-width: 860px) { .plan-banner { flex-wrap: wrap; } }
.plan-intro { margin-bottom: 14px; }
.plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plan-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.plan-card .card-head { flex-wrap: wrap; gap: 6px; }
.plan-card h3 { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.plan-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.plan-derived { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.pd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.pd-head b { font-size: 14px; }
.pd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pd-table th { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: left; padding: 4px 6px; }
.pd-table th.n, .pd-table td.n { text-align: right; }
.pd-table td { padding: 6px; border-top: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.pd-table td small { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; }
.pd-table .pill { white-space: nowrap; }
.pd-note { margin: 8px 0 0; }
@media (max-width: 1000px) { .plan-cards { grid-template-columns: minmax(0, 1fr); } }
/* Kanallar va LTV */
.ch-table td, .ch-table th { padding: 8px 10px; }
.best { color: var(--good); font-weight: 700; }
.worst { color: var(--crit); font-weight: 700; }
.conv-note { margin: 10px 0 0; }
.ltv-ratio { margin: 12px 0 0; font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { border: 1px solid var(--border-strong); background: #fff; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 12px rgba(47, 99, 240, .35); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); font-weight: 700; cursor: pointer; text-decoration: underline; }
/* Dinamika */
#dynProj { margin: 0 0 16px; }
#dynProj .chip { display: inline-flex; align-items: center; gap: 6px; }
.dyn-table td:first-child { font-weight: 600; white-space: nowrap; }
.dyn-table td.n { white-space: nowrap; line-height: 1.35; }
.plan-card, .plan-cards > * { min-width: 0; }
.pd-m { display: none; }
@media (max-width: 640px) {
  .pd-table .pd-v { display: none; }
  .pd-m { display: inline-block; margin-top: 4px; }
}
@media (max-width: 640px) {
  .pd-table { table-layout: fixed; }
  .pd-table th:first-child { width: 48%; }
  .pd-table td.n { white-space: normal; font-size: 13px; }
  .pd-table td.n b { font-size: 13.5px; }
}
/* Doska: pul — tushum va sof foyda alohida ajralib turadi */
.tile.money { gap: 6px; }
.m-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; }
.m-hero::after { content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, var(--mh-glow) 0%, transparent 70%); pointer-events: none; }
.m-hero > div { display: grid; gap: 1px; min-width: 0; }
.m-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--mh-c); box-shadow: 0 4px 14px var(--mh-glow); }
.m-hero small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mh-c); opacity: .9; }
.m-hero b { font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--mh-ink); white-space: nowrap; }
.m-hero b i { font-style: normal; font-size: 13px; font-weight: 600; margin-left: 4px; letter-spacing: 0; opacity: .7; }
.m-sub { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.m-hero.rev { --mh-c: #2f6bff; --mh-ink: #173f9e; --mh-glow: rgba(47, 107, 255, .28); background: linear-gradient(135deg, #f1f6ff 0%, #e3edff 100%); border-color: #d6e3ff; }
.m-hero.profit { --mh-c: #16a34a; --mh-ink: #116b33; --mh-glow: rgba(22, 163, 74, .26); background: linear-gradient(135deg, #f0fbf3 0%, #ddf5e5 100%); border-color: #c9ecd5; }
.m-hero.loss { --mh-c: #e5484d; --mh-ink: #a8242a; --mh-glow: rgba(229, 72, 77, .26); background: linear-gradient(135deg, #fff4f4 0%, #fde3e3 100%); border-color: #f7cfd0; }
.tile.money .kv { padding: 0 4px; }
/* Doska: voronka — workflow (bosqichlar va o'tish foizi) */
.fv { list-style: none; margin: 2px 0 0; padding: 0; display: grid; }
.fv-node { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--pc) 9%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 28%, #fff); font-size: 13.5px; }
.fv-node .fv-l { color: var(--text-2); font-weight: 600; }
.fv-node b { font-variant-numeric: tabular-nums; font-weight: 700; }
.fv-node em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--text-3); }
.fv-node.last { background: color-mix(in srgb, var(--pc) 18%, #fff); border-color: color-mix(in srgb, var(--pc) 45%, #fff); }
.fv-link { position: relative; height: 22px; margin-left: 22px; border-left: 2px solid color-mix(in srgb, var(--pc) 45%, #fff); }
.fv-link::after { content: ''; position: absolute; left: -6px; bottom: 0; border: 5px solid transparent; border-top-color: color-mix(in srgb, var(--pc) 60%, #fff); border-bottom: 0; }
.fv-link span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--text-2);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
/* Doska: ustunni yig'ish — faqat loyiha nomi qoladi */
.col-head { grid-template-columns: auto auto 1fr auto; }
.col-toggle { transform: rotate(90deg); width: 28px; height: 28px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--pc) 30%, #fff); background: #fff; color: #4a5262; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s; }
.col-toggle:hover { color: #10131a; box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 45%, transparent); }
.col.collapsed { align-self: start; min-height: 0; cursor: pointer; }
.col.collapsed:hover { transform: none; }
.col.collapsed > :not(.col-head) { display: none; }
.col.collapsed .col-toggle { transform: rotate(-90deg); }
/* Ko'p reklama = ko'p foydami? */
.sd-answer { margin: 4px 0 10px; font-size: 14.5px; }
.sd-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.sd-rank { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); display: grid; gap: 2px; }
.sd-rank small { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.sd-rank b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sd-rank.good { background: #e9f7ee; border-color: #c9ecd5; } .sd-rank.good b { color: #17803a; }
.sd-rank.mid { background: #fff7e6; border-color: #f5e1b5; } .sd-rank.mid b { color: #9a6200; }
.sd-rank.bad { background: #fdeeee; border-color: #f7cfd0; } .sd-rank.bad b { color: #c52a2a; }
.sd-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.sd-grid h4 { margin: 0 0 6px; font-size: 13.5px; }
.sd-table td, .sd-table th { padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.sd-table tr.sd-max td { background: #fff7e6; }
.sd-both { color: #e8a200; }
.sd-sum { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.sd-sum p { margin: 4px 0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 860px) { .sd-grid { grid-template-columns: minmax(0, 1fr); } .sd-rank b { font-size: 17px; } }
@media (max-width: 600px) { .sd-table .sd-rev { display: none; } }
.m-hero.ad { --mh-c: #ea6a1f; --mh-ink: #a1440c; --mh-glow: rgba(234, 106, 31, .26); background: linear-gradient(135deg, #fff6ef 0%, #ffe9d9 100%); border-color: #fbd8bf; }
/* Voronka tashxisi */
.fv-link.low span { background: #fdecec; border-color: #f4b9ba; color: #b42323; }
.fv-link.high span { background: #e7f6ec; border-color: #bfe5cc; color: #17803a; }
.fv-diag { margin: 8px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: #fdecec; color: #8f1f1f !important; font-size: 12.5px !important; line-height: 1.4; -webkit-line-clamp: 4 !important; }
.fv-diag b { color: #b42323; }
.fdiag { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.fdiag h4 { margin: 0 0 6px; font-size: 13.5px; }
.fd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 82px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.fd-row b { font-variant-numeric: tabular-nums; }
.fd-row em { font-style: normal; color: var(--text-3); font-size: 12px; }
.fd-row .pill { justify-self: end; }
.fd-verdict { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fdecec; display: grid; gap: 3px; font-size: 13px; }
.fd-verdict b { color: #a8242a; } .fd-verdict span { color: var(--text-2); }
/* Dinamika jadvali: qiymat va o'zgarish bir qatorda, o'ngga tekislangan */
.dyn-table { min-width: 860px; }
.dyn-table th.n { white-space: nowrap; }
.dyn-table td.n { white-space: nowrap; line-height: 1.3; }
.dyn-table td.n .dv { font-variant-numeric: tabular-nums; font-weight: 600; }
.dyn-table td.n .dd { display: inline-block; min-width: 58px; margin-left: 8px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dyn-table td.n .dd.pos { color: var(--good); } .dyn-table td.n .dd.neg { color: var(--crit); }
.dyn-table tr.dyn-sec td { padding: 14px 8px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue, #2f63f0); border-bottom: 1px solid var(--border); background: transparent; }
.dyn-table tr:not(.dyn-sec) td:first-child { padding-left: 14px; }
/* Oy yakuni (Dinamika → Oy): lidlar tarkibi va konversiya, reja ↔ fakt */
.rv-card { margin-bottom: 16px; }
.rv-card .rv-h { margin: 20px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue, #2f63f0); }
.rv-card .card-head + .rv-h { margin-top: 0; }
.rv-table td small { font-size: 11.5px; margin-left: 4px; }
.rv-table tr.rv-total td { font-weight: 700; background: var(--surface-2); }
.rv-proj { margin-top: 14px; max-width: 880px; }
.rv-proj .dp-head { margin-bottom: 4px; }
.rv-verdict { margin-top: 12px; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Dinamika: chapdan o'ngga bir tekis; bo'lim sarlavhalari kattaroq */
.dyn-table th.n, .dyn-table td.n { text-align: left; }
.dyn-table td.n .dd { min-width: 0; margin-left: 6px; text-align: left; }
.dyn-table tr.dyn-sec td { font-size: 14px; letter-spacing: .05em; padding-top: 18px; }
.ad-split { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 4px 18px; font-size: 12px; color: var(--text-3); }
.ad-split b { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Doska: umumiy reklama xarajati — bosilsa turlari ochiladi */
.m-hero.ad { grid-template-columns: auto 1fr auto; cursor: pointer; }
.m-chev { color: var(--mh-c); transition: transform .2s; align-self: center; }
.m-hero.ad.open .m-chev { transform: rotate(180deg); }
.m-hero.ad .ad-break { display: none; grid-column: 1 / -1; gap: 5px; padding-top: 8px; border-top: 1px dashed #f3c9a8; position: relative; z-index: 1; }
.m-hero.ad.open .ad-break { display: grid; }
.m-hero.ad > .m-chev { display: block; }
.ab-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px; font-size: 12.5px; }
.ab-row span { color: #7a3a10; font-weight: 600; }
.ab-row > i { height: 6px; border-radius: 3px; background: rgba(234, 106, 31, .15); overflow: hidden; }
.ab-row > i > i { display: block; height: 100%; background: #ea6a1f; border-radius: 3px; }
.ab-row b { font-variant-numeric: tabular-nums; color: #a1440c; }
.ab-row em { font-style: normal; text-align: right; color: var(--text-3); font-size: 11.5px; }
.ab-row.zero { opacity: .5; }
.ab-unit { font-size: 12px; font-weight: 700; color: #a1440c; margin-top: 2px; }
.ab-unit span { font-weight: 500; color: var(--text-3); }
.m-hero .ab-row b { font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.3; white-space: nowrap; }
.ab-row { grid-template-columns: minmax(86px, auto) minmax(30px, 1fr) auto 32px; }
/* Telegram ID ro'yxati */
.id-list { display: grid; gap: 4px; }
.id-rows { display: grid; gap: 6px; margin-top: 4px; }
.id-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.id-row .btn { font-size: 18px; line-height: 1; color: var(--text-3); }
.id-add { justify-self: start; margin-top: 2px; }
/* Lid manbalari */
.src-list { display: grid; gap: 6px; margin-top: 10px; }
.src-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.src-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.src-row span i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.src-row b { font-variant-numeric: tabular-nums; } .src-row em { font-style: normal; color: var(--text-3); text-align: right; font-size: 12.5px; }
.tile .src-line { margin: 2px 0 0; font-size: 12px; color: var(--text-3); }
/* Kichik jadvallar (lichkadan lid, qayta sotuv): ixcham, har ustun sarlavhasi o'z katagi ustida ajralib turadi */
.grid-mini { width: auto; min-width: 0; }
.grid-mini th:first-child, .grid-mini td:first-child { min-width: 150px; padding-right: 24px; }
.grid-mini th.n { text-align: left; padding: 8px 10px 6px; }
.grid-mini th.n span, .grid-mini th.n { white-space: nowrap; }
.grid-mini thead th.n { color: var(--text); font-size: 12.5px; }
.grid-mini thead th.n::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--blue, #2f63f0); vertical-align: 1px; }
.grid-mini td.n { text-align: left; padding: 6px 10px; }
.grid-mini .cell-in { width: 170px; text-align: left; }
@media (max-width: 860px) { .grid-mini .cell-in { width: 100%; } .grid-mini { width: 100%; } }
/* Doska: ustunni sudrab almashtirish */
.col-head { grid-template-columns: auto auto auto 1fr auto; }
.col-grip { width: 22px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #8a93a3; cursor: grab; padding: 0; border-radius: 7px; touch-action: none; }
.col-grip:hover, .col-grip:focus-visible { color: #10131a; background: rgba(255, 255, 255, .7); }
.col.dragging { cursor: grabbing; z-index: 2; }
.col.dragging .col-grip { cursor: grabbing; }
.col.collapsed .col-head { grid-template-columns: auto auto auto 1fr auto; }
.col-head { column-gap: 6px; }
.col-head .col-name { min-width: 0; }
.col-head .col-name h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head .pill { white-space: nowrap; font-size: 11px; padding-inline: 8px; }
.col-head { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.col-head .col-name { flex: 1 1 110px; }
.col-head .col-name small { white-space: nowrap; }
.col-head .pill { margin-left: auto; }
/* Doska: arxivlash (ko'z belgisi) */
.col-hide { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: #8a93a3; border-radius: 8px; cursor: pointer; padding: 0; }
.col-hide:hover, .col-hide:focus-visible { color: #c52a2a; background: rgba(255, 255, 255, .8); }
.arch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.arch-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; }
.arch-chip:hover { border-style: solid; border-color: var(--blue); color: var(--text); }
.arch-chip .col-dot { width: 9px; height: 9px; box-shadow: none; }
.arch-bar { margin: 0 0 12px; }
/* Doska: «Arxiv» papkasi */
.arch-wrap { position: relative; }
.arch-btn { display: inline-flex; align-items: center; gap: 6px; }
.arch-btn.empty { opacity: .7; }
.arch-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue, #2f63f0); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.arch-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; padding: 10px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); display: grid; gap: 6px; }
.arch-pop[hidden] { display: none; }
.arch-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13.5px; }
.arch-item .col-dot { width: 10px; height: 10px; box-shadow: none; }
.arch-item .btn { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 860px) { .arch-pop { right: auto; left: 0; min-width: min(300px, calc(100vw - 32px)); } }
.arch-pop { background: #fff; }
/* Dinamika: har loyiha — reklama, tushum, sof foyda kartalari va kichik grafik */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 14px; }
.dp-card { display: grid; gap: 8px; padding: 14px; border-top: 4px solid var(--pc); }
.dp-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.dp-head .muted { margin-left: auto; }
.dp-hero { grid-template-columns: auto 1fr auto; }
.dp-d { font-weight: 800; } .dp-d.up { color: #17803a; } .dp-d.down { color: #c52a2a; }
.dp-spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; width: 74px; position: relative; z-index: 1; }
.dp-spark i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--mh-c); opacity: .35; }
.dp-spark i.last { opacity: 1; }
.dp-spark i.neg { background: #e5484d; }
.dp-hero { grid-template-columns: auto 1fr; }
.dp-hero .dp-spark { grid-column: 1 / -1; width: 100%; height: 26px; margin-top: 2px; }
.dp-hero b { font-size: 21px; }
/* Dinamika: bir hafta — 7 qator */
.wk-nav { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.wk-table { width: 100%; font-size: 13px; }
.wk-table th, .wk-table td { padding: 7px 8px; white-space: nowrap; }
.wk-table td small { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; }
.wk-table td.n, .wk-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.wk-table tr.wk-future td { color: var(--text-3); }
.wk-table tfoot td { border-top: 2px solid var(--border-strong); font-weight: 800; }
.dp-grid:has(.wk-table) { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
/* Hafta: har kun — uchta karta yonma-yon */
.dp-grid:has(.wk-rows) { grid-template-columns: minmax(0, 1fr); }
.wk-rows { display: grid; gap: 8px; }
.wk-row { display: grid; grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.wk-day { display: grid; align-content: center; gap: 2px; padding: 0 4px; }
.wk-day b { font-size: 14px; } .wk-day small { font-size: 12px; color: var(--text-3); }
.wk-hero { padding: 9px 12px; gap: 10px; }
.wk-hero .m-ic { width: 32px; height: 32px; border-radius: 10px; }
.wk-hero .m-ic svg { width: 16px; height: 16px; }
.wk-hero b { font-size: 18px; }
.wk-hero b i { font-size: 11.5px; }
.wk-hero small { font-size: 10px; }
.wk-empty { grid-column: 2 / -1; display: grid; place-items: center; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-3); font-size: 13px; min-height: 58px; }
.wk-row.future .wk-day { opacity: .55; }
.wk-row.total { border-top: 2px solid var(--border); padding-top: 10px; margin-top: 2px; }
.wk-row.total .wk-hero { box-shadow: inset 0 0 0 2px var(--mh-c); }
@media (max-width: 860px) {
  .wk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wk-day { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; padding: 4px 2px 0; }
  .wk-hero { grid-template-columns: 1fr; padding: 8px; gap: 4px; }
  .wk-hero .m-ic { display: none; }
  .wk-hero b { font-size: 14px; white-space: normal; }
  .wk-hero .m-sub { display: none; }
  .wk-empty { grid-column: 1 / -1; min-height: 40px; }
}
@media (max-width: 860px) { .wk-hero b i { display: none; } .wk-hero b { font-size: 13.5px; overflow-wrap: anywhere; } .wk-hero small { font-size: 9.5px; } }
/* Hafta kartasi: 7 ta ustun, ostida kun nomi */
.dp-grid:has(.wk-bars) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.wk-bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; position: relative; z-index: 1; }
.wk-bar { display: grid; gap: 3px; justify-items: stretch; }
.wk-bar span { height: 34px; display: flex; align-items: flex-end; }
.wk-bar span i { width: 100%; border-radius: 3px 3px 0 0; background: var(--mh-c); opacity: .38; }
.wk-bar span i.last { opacity: 1; }
.wk-bar span i.neg { background: #e5484d; }
.wk-bar em { font-style: normal; font-size: 10.5px; font-weight: 700; text-align: center; color: var(--text-3); }
.wk-bar.future em { opacity: .45; }
/* Hafta: har loyiha — 7 kun kartasi + hafta jami */
.dp-grid:has(.wd-proj) { grid-template-columns: minmax(0, 1fr); }
.wd-proj { border-top: 4px solid var(--pc); display: grid; gap: 10px; padding: 14px; }
.wd-grid { display: grid; grid-template-columns: repeat(8, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.wd-card { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 16px; border: 1px solid var(--border); background: #fff; scroll-snap-align: start; }
.wd-card.total { border: 2px solid var(--pc); }
.wd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 2px; }
.wd-head b { font-size: 14px; } .wd-head span { font-size: 12px; color: var(--text-3); }
.wd-hero { padding: 8px 10px; gap: 8px; }
.wd-hero .m-ic { width: 30px; height: 30px; border-radius: 9px; }
.wd-hero .m-ic svg { width: 15px; height: 15px; }
.wd-hero b { font-size: 17px; }
.wd-hero b i { font-size: 11px; }
.wd-hero small { font-size: 10px; }
.wd-hero .m-sub { font-size: 11px; }
.wd-none { display: grid; place-items: center; min-height: 230px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-3); font-size: 13px; text-align: center; }
.wd-card.empty .wd-head { opacity: .6; }
.wd-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; }
.wd-hero { position: relative; }
.wd-delta { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: 999px; }
.wd-delta:not(.up):not(.down) { color: var(--text-3); }
.wd-none { min-height: 220px; }
@media (max-width: 860px) { .wd-grid { grid-template-columns: minmax(0, 1fr); } .wd-none { min-height: 50px; } }
@media (min-width: 1100px) { .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wd-head { justify-content: flex-start; gap: 8px; }
.wd-head b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wd-head span { font-size: 12.5px; font-weight: 600; }
.wd-head { justify-content: space-between; }
/* Hafta / oy: bir qatorda 7 kun (dushanba–yakshanba), jami — pastda gorizontal */
.wd-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px; overflow: visible; }
.wd-blank { border-radius: 16px; background: transparent; }
.wd-card { padding: 8px; gap: 5px; }
.wd-head b { font-size: 14.5px; } .wd-head span { font-size: 11px; }
.wd-grid .wd-hero { grid-template-columns: 1fr; padding: 7px 8px; gap: 2px; }
.wd-grid .wd-hero .m-ic { display: none; }
.wd-grid .wd-hero b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-grid .wd-hero b i { font-size: 10px; margin-left: 2px; }
.wd-grid .wd-hero small { font-size: 9.5px; letter-spacing: .04em; }
.wd-grid .wd-hero .m-sub { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-grid .wd-delta { position: static; display: inline-block; margin-top: 2px; font-size: 10.5px; padding: 0 5px; }
.wd-grid .wd-hero .m-sub .wd-delta { display: block; width: max-content; }
.wd-grid .wd-none { min-height: 170px; font-size: 12px; }
.wd-total-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd-total { margin-top: 2px; }
@media (max-width: 1100px) {
  .wd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wd-blank { display: none; }
}
@media (max-width: 600px) {
  .wd-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wd-grid .wd-none { min-height: 40px; }
  .wd-total-row { grid-template-columns: minmax(0, 1fr); }
}
/* 2-qadam: 10 ustunli lid jadvali — ixcham */
.grid-entry.xwide .cell-in { width: 84px; padding: 9px 8px; font-size: 15px; }
.grid-entry.xwide th.n { font-size: 11px; line-height: 1.25; white-space: normal; min-width: 70px; }
.grid-entry.xwide .cell-in[name="revenue"] { width: 120px; }
.lead-st { margin-top: 12px; display: grid; gap: 5px; } .lead-st h4 { margin: 0 0 2px; font-size: 13px; }
.rin-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; }
.rin-grid label span { white-space: normal; line-height: 1.25; }
@media (max-width: 1100px) { .rin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reason-pick { display: grid; gap: 4px; margin-top: 6px; }
/* Oraliq kalendari: boshlanish va tugash — to'q ko'k, orasi — och ko'k chiziq */
.cal-hint { margin: 0; font-size: 12px; color: var(--text-3); text-align: center; }
.cal-hint b { color: var(--text); }
.cal-range .cal-grid { gap: 2px 0; }
.cal-range .cal-day { border-radius: 0; }
.cal-range .cal-day.r-in { background: #cfe0ff; color: #13306e; }
.cal-range .cal-day.r-start, .cal-range .cal-day.r-end, .cal-range .cal-day.r-one { background: var(--blue); color: #fff; font-weight: 800; }
.cal-range .cal-day.r-start { border-radius: 10px 0 0 10px; }
.cal-range .cal-day.r-end { border-radius: 0 10px 10px 0; }
.cal-range .cal-day.r-one { border-radius: 10px; }
.cal-range .cal-day:not(.r-in):not(.r-start):not(.r-end):not(.r-one) { border-radius: 10px; }
.range-btn span { font-variant-numeric: tabular-nums; font-weight: 700; }
.fv-node em b { color: var(--text); font-weight: 800; }
.seg-sm button { padding: 6px 11px; font-size: 12.5px; } #dynMc { margin-right: 8px; }
/* Dinamika: bo'limlar + oy tugmalari (1–12) bir qatorda; oylar bir nechtasi belgilanib solishtiriladi */
.dyn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: -8px 0 16px; }
.dyn-bar .seg { align-items: center; }
.mon-seg { gap: 3px; }
.mon-seg .mp-year { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 2px; margin-right: 2px; border-right: 1px solid var(--border); }
.mon-seg .mp-year b { font-size: 13px; font-variant-numeric: tabular-nums; padding: 0 2px; }
.mon-seg .mp-year button { padding: 4px 7px; font-size: 14px; }
.mon-seg .mp-year button[disabled] { opacity: .3; cursor: default; }
.mon-seg .mp-m { display: grid; justify-items: center; gap: 0; padding: 3px 8px; min-width: 38px; line-height: 1.15; border-radius: 12px; }
.mon-seg .mp-m b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mon-seg .mp-m small { font-size: 9.5px; font-weight: 600; color: var(--text-3); }
.mon-seg .mp-m.on { background: var(--blue); color: #fff; }
.mon-seg .mp-m.on small { color: rgba(255, 255, 255, .85); }
.mon-seg .mp-m[disabled] { opacity: .3; cursor: default; }
/* Dinamika «Oylar»: tanlangan oylar yonma-yon (6 tadan ko'p bo'lsa keyingi qatorga) */
.wd-grid.mon-grid { grid-template-columns: repeat(var(--mc, 6), minmax(0, 1fr)) !important; }
.mon-grid .wd-head b { text-transform: capitalize; }
@media (max-width: 860px) { .wd-grid.mon-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.mp-caret { display: inline-block; margin-left: 5px; transition: transform .2s; }
.mp-caret.open { transform: rotate(180deg); }
.mon-seg.mp-in { animation: mpIn .28s ease-out; transform-origin: left center; }
@keyframes mpIn { from { opacity: 0; transform: translateX(-14px) scaleX(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mon-seg.mp-in { animation: none; } .mp-caret { transition: none; } }
/* Dinamika: umumiy «Sana tanlash» — Yil · Oy · Kun */
.pp-btn.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.pp-btn.on svg { stroke: #fff; }
.pp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
.pp-tabs button { border: 0; background: none; border-radius: 9px; padding: 7px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.pp-tabs button.on { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }
.cal-pp .pp-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cal-pp .pp-grid .cal-day { height: 44px; font-weight: 600; }
.cal-pp .pp-grid .cal-day { font-size: 13px; }
.cal-pp .cal-hint { margin: 2px 0 0; }
.pp-tabs button small { display: block; font-size: 11px; font-weight: 700; color: var(--blue); }
.pp-foot { flex-wrap: wrap; }
.pp-foot .pp-go { flex: 1 1 100%; background: var(--blue); color: #fff; }
.pp-foot .pp-go:hover:not([disabled]) { background: var(--blue); filter: brightness(1.08); }
.cal-day.sel:hover:not([disabled]) { background: var(--blue); color: #fff; filter: brightness(1.08); }
/* Doska: loyihani belgilash (galochka) — tepadagi jami faqat belgilanganlar bo'yicha */
.col-pick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 2px solid var(--border-strong); background: #fff; color: transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.col-pick:hover { border-color: var(--pc); }
.col-pick[aria-checked="true"] { background: var(--pc); border-color: var(--pc); color: #fff; }
.col-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.col.picked { outline: 2.5px solid var(--pc); outline-offset: -2.5px; } /* ichkariga chiziladi — doska chetida kesilmaydi */
.totals.picked > span { border-color: #b9cdfa; background: #f3f7ff; }
.tot-sel { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 8px 12px; border-radius: 999px; border: 1px solid #b9cdfa; background: #e8f0ff; color: #1d3f9a; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tot-sel i { width: 9px; height: 9px; border-radius: 50%; margin-right: -2px; }
.tot-sel em { font-style: normal; font-size: 16px; line-height: 1; margin-left: 2px; }
/* Oraliq kalendari: kun bosilsa darhol ko'rinadi; «Oraliq tanlash» — alohida rejim */
.rc-foot { flex-wrap: wrap; }
.rc-foot .rc-mode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #e8f0ff; color: #1d3f9a; }
.rc-foot .rc-mode svg { width: 15px; height: 15px; }
.cal-range.rc-range { box-shadow: 0 0 0 2px #b9cdfa, 0 12px 32px rgba(16, 24, 40, .14); }
.rc-foot .pp-go { flex: 2 1 0; background: var(--blue); color: #fff; }
.rc-foot .pp-go[disabled] { background: var(--surface-2); color: var(--text-3); }
/* Oraliq kalendari keng ekranda o'ng chetga yopishadi; sahifa chapga suriladi — hech narsa to'silmaydi */
.cal.cal-dock { position: fixed; right: 16px; left: auto; z-index: 76; }
.main.cal-docked { padding-right: 340px; }
.cal-x { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text-2); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 24, 40, .12); }
.cal-x:hover { color: var(--text); background: var(--surface-2); }
/* Rollar: targetolog / ROP holati PM sahifasida, xodimning «yuborildi» belgisi, xodimlar kartalari */
.staff-box { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.staff-box > p { margin: 0; }
.staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.staff-row.ok { border-color: #bfe5cc; }
.part-sent { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: 18px; background: #e9f8ef; border: 1px solid #bfe5cc; }
.part-sent > div { display: grid; gap: 2px; }
.part-sent .done-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1f9d55; color: #fff; flex: none; }
.part-sent .done-dot svg { width: 18px; height: 18px; }
.demo-as button { padding: 5px 10px; }
/* Korzinka: bekor bo'lish sabablari va sifatsiz lidlar — alohida, rangi bilan ajraladigan bo'limlar */
.rsn-sec { border-radius: 18px; padding: 4px 14px 14px; border: 1px solid var(--border); border-left: 5px solid var(--rc); background: color-mix(in srgb, var(--rc) 5%, #fff); }
.rsn-sec + .rsn-sec { margin-top: 12px; }
.rsn-sec > summary { color: var(--rc-ink); }
.rsn-lost { --rc: #e5484d; --rc-ink: #b42318; }
.rsn-bad { --rc: #f59e0b; --rc-ink: #9a5b00; }
.rsn-sec .rin { background: #fff; }
/* Sotuv xodimlari: oylik jadval (Excel uslubida), kunlik kiritish, ro'yxat */
.sl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.sl-bar .filters { margin: 0; }
.sl-when { font-size: 15px; }
.sl-card { border-top: 4px solid var(--pc); padding: 14px 16px; margin-bottom: 14px; }
.sl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.sl-head > b { display: inline-flex; align-items: center; font-size: 17px; }
.sl-month { font-style: italic; font-weight: 700; color: var(--text-2); }
.sl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sl-table th { background: color-mix(in srgb, var(--pc) 12%, #fff); font-size: 12.5px; font-weight: 800; color: var(--text); padding: 8px 10px; white-space: nowrap; }
.sl-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sl-table tbody td:first-child { background: color-mix(in srgb, var(--pc) 6%, #fff); }
.sl-table tbody td:not(:first-child) { background: #eef7ea; }
.sl-table tfoot td { font-weight: 800; border-top: 2px solid var(--border-strong); border-bottom: 0; }
.sl-table tr.off td { opacity: .6; }
.sl-table td.sl-best { background: #c9f0d4 !important; font-weight: 800; color: #146c2e; }
.sl-table .mono, .sl-entry .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.sl-entry tfoot td { font-weight: 800; padding-top: 8px; }
/* PM: xodim qismi — faqat ko'rish, tasdiqlash / qaytarish */
.ro-mode .cell-in[readonly] { background: transparent; border-color: transparent; box-shadow: none; cursor: default; color: var(--text); font-weight: 600; }
.ro-mode .cell-in[readonly]::placeholder { color: transparent; }
.ro-mode .rate-in .cell-in[readonly] { background: #fff; }
.staff-row .ret-note { flex-basis: 100%; color: #9a5b00; }
.ret-form { display: flex; gap: 6px; flex-basis: 100%; }
.ret-form input { flex: 1; min-width: 0; }
.approved-line { margin: 0; font-weight: 700; color: #1f7a3d; font-size: 13px; }
.part-back { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 16px; border-radius: 18px; background: #fff4e5; border: 1px solid #f5c98a; }
.part-back p { margin: 0; font-weight: 600; }
/* Korzinka loyiha bo'yicha: loyiha kartasi ichida ikki guruh — rangi bilan ajralgan */
.rsn-proj { border-left: 4px solid var(--pc); gap: 10px; }
.rsn-proj > b { font-size: 16px; }
.rsn-kind { --rc: #e5484d; --rc-ink: #b42318; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--rc); background: color-mix(in srgb, var(--rc) 6%, #fff); }
.rsn-kind.rsn-bad { --rc: #f59e0b; --rc-ink: #9a5b00; }
.rsn-title { font-size: 13px; font-weight: 800; color: var(--rc-ink); }
.rsn-title .muted { font-weight: 500; }
/* Yangi versiya eslatmasi (saqlanmagan raqam bo'lsa) */
.update-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #1d2433; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* ---------- Yangi tuzilma: menyu guruhlari, ko'rish rejimi, ruxsatlar ---------- */
.nav-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 12px 10px 6px; }
@media (min-width: 861px) {
  .sidebar { justify-content: flex-start; overflow-y: auto; scrollbar-width: none; }
  .sidebar > .nav-label { width: 82px; text-align: center; padding: 10px 0 4px; font-size: 9px; letter-spacing: .06em; }
  .sidebar > .nav + .nav-label { margin-top: 6px; }
  .sidebar > .logo { position: static; transform: none; padding: 0 0 6px; }
}
.nav a.own .ic { box-shadow: inset 0 0 0 2px var(--accent); }
.mobile-nav .m-more { cursor: pointer; }
.m-sheet { position: fixed; inset: 0; z-index: 70; background: rgba(15, 20, 40, .35); display: flex; align-items: flex-end; }
.m-sheet[hidden] { display: none; }
.m-sheet-in { width: 100%; max-height: 80vh; overflow-y: auto; background: var(--surface-solid); border-radius: 24px 24px 0 0; padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
.m-sheet .nav a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; color: var(--text); font-weight: 600; }
.m-sheet .nav a.active { background: var(--surface-2); }
.m-sheet .nav a .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.m-sheet .nav a svg { width: 18px; height: 18px; }
.m-sheet .badge { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 800; }
.view-note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; border-radius: 16px; background: var(--info-bg); color: var(--text); }
.view-note svg { width: 20px; height: 20px; flex: none; color: var(--info); margin-top: 2px; }
.view-note div { display: grid; gap: 2px; }
.view-note span { font-size: 13px; color: var(--text-2); }
.who-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ro-mode .cell-in[readonly], .ro-mode input[readonly] { background: transparent; border-color: transparent; box-shadow: none; cursor: default; color: var(--text); font-weight: 600; }
.ro-mode input[readonly]::placeholder { color: transparent; }
.acc-chips .chip.on { font-weight: 800; }
.acc-matrix th.c, .acc-matrix td.c { text-align: center; white-space: normal; min-width: 90px; }
.acc-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--good-bg); color: var(--good); font-weight: 800; }
.acc-no { color: var(--text-3); }
.demo-as-wrap { display: inline-flex; align-items: center; gap: 6px; }
.demo-as-wrap .sel-btn { min-width: 132px; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* ---------- Marketing va Moliya ---------- */
.exp-act { white-space: nowrap; text-align: right; }
.exp-act .btn { padding: 6px 8px; }
.exp-act .btn.confirm { background: var(--crit-bg); color: var(--crit); font-size: 12px; }
.cat-bars { display: grid; gap: 8px; }
.cat-bar { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 1.4fr) auto 40px; gap: 10px; align-items: center; font-size: 13px; }
.cat-bar > span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar > i { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; display: block; }
.cat-bar > i > i { display: block; height: 100%; border-radius: 99px; background: var(--series-1); }
.cat-bars.opex .cat-bar > i > i { background: var(--series-4); }
.cat-bar > b { font-variant-numeric: tabular-nums; text-align: right; }
.cat-bar > em { font-style: normal; color: var(--text-3); text-align: right; font-size: 12px; }
.econ-mini td, .econ-mini th { white-space: nowrap; }
.pl { display: grid; gap: 4px; }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.pl-row > span { display: flex; align-items: center; gap: 10px; font-weight: 600; flex-wrap: wrap; }
.pl-row > span i { width: 10px; height: 10px; border-radius: 3px; background: var(--text-3); }
.pl-row small { color: var(--text-3); font-weight: 500; font-size: 12px; }
.pl-row b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-row b em { font-style: normal; font-size: 12px; color: var(--text-3); font-weight: 600; }
.pl-in > span i { background: var(--series-1); } .pl-ad > span i { background: var(--series-2); } .pl-mk > span i { background: #e8a33c; }
.pl-var > span i { background: #9aa3b5; } .pl-opex > span i { background: var(--series-4); }
.pl-total { background: var(--good-bg); margin-top: 6px; }
.pl-total.neg { background: var(--crit-bg); }
.pl-total b { font-size: 22px; }
.pl-total.pos b { color: var(--good); } .pl-total.neg b { color: var(--crit); }
.cost-stack { display: flex; height: 18px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.cost-stack i, .cost-legend i { display: block; }
.cs-ad { background: var(--series-2); } .cs-mk { background: #e8a33c; } .cs-var { background: #9aa3b5; } .cs-opex { background: var(--series-4); }
.cost-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.cost-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cost-legend i { width: 10px; height: 10px; border-radius: 3px; }
.mt { margin-top: 16px; }
h4.mt { margin-bottom: 10px; font-size: 13.5px; }
@media (max-width: 560px) { .cat-bar { grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) auto; } .cat-bar > em { display: none; } }

/* ---------- Nazorat ---------- */
.verdict { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 22px; margin-bottom: 16px; background: var(--warn-bg); }
.verdict.good { background: var(--good-bg); } .verdict.crit { background: var(--crit-bg); }
.verdict .v-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; color: var(--warn); }
.verdict.good .v-ic { color: var(--good); } .verdict.crit .v-ic { color: var(--crit); }
.verdict .v-ic svg { width: 22px; height: 22px; }
.verdict > div { display: grid; gap: 6px; min-width: 0; }
.verdict b { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; }
.v-who { display: flex; flex-wrap: wrap; gap: 6px; }
.v-who .pill { background: #fff; }
.ctl-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.owner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.owner { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--good); }
.owner.warn { box-shadow: inset 0 3px 0 #e8a33c; } .owner.crit { box-shadow: inset 0 3px 0 var(--crit); }
.owner header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.owner header > div { display: grid; min-width: 0; }
.owner header b { font-size: 15px; }
.owner header small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text-2); }
.o-ic svg { width: 18px; height: 18px; }
.o-score { --c: var(--good); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--s) * 1%), var(--surface-3) 0); }
.o-score b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 13px; font-weight: 800; }
.owner.warn .o-score { --c: #e8a33c; } .owner.crit .o-score { --c: var(--crit); }
.o-duty { margin: 0; font-size: 12px; color: var(--text-3); }
.o-ok { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--good); font-weight: 700; font-size: 13.5px; }
.o-ok svg { width: 16px; height: 16px; }
.iss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iss { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 12px; background: #fff; }
.iss-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--info); }
.iss.crit .iss-dot { background: var(--crit); } .iss.warn .iss-dot { background: #e8a33c; }
.iss-more summary { font-size: 12.5px; color: var(--text-3); }
.iss-more[open] summary { margin-bottom: 6px; }
.econ td { vertical-align: top; }
.econ td.n b { display: block; }
.cac-bar { position: relative; display: block; width: 90px; height: 6px; margin: 6px 0 0 auto; border-radius: 99px; background: var(--surface-3); }
.cac-bar i { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.cac-bar.over i { background: var(--crit); } .cac-bar.low i { background: var(--series-1); }
.cac-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); border-radius: 2px; }
.fc-in { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 14px; }
.fc-in input[type="range"] { accent-color: var(--series-1); padding: 0; height: 42px; background: none; border: 0; }
.fc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fc-cell { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); min-width: 0; }
.fc-cell small { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.fc-cell b { font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cell span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.fc-cell span.pos { color: var(--good); } .fc-cell span.neg { color: var(--crit); }
.fc-best { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); font-size: 13.5px; }
.fc-best svg { width: 20px; height: 20px; flex: none; }
.fc-best span { flex: 1 1 320px; }
.disc td { vertical-align: middle; }
.disc .warn-t { color: var(--warn); font-weight: 700; }
.disc-bar { display: flex; width: 110px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin-bottom: 4px; }
.disc-bar i { display: block; }
.disc-bar .ok { background: var(--good); } .disc-bar .late { background: #e8a33c; } .disc-bar .miss { background: var(--crit); }
.adv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: adv; }
.adv-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.adv-list li .pill { flex: none; }
.ai-box { padding: 14px 16px; border-radius: 16px; background: var(--info-bg); margin-bottom: 12px; display: grid; gap: 8px; }
.ai-box p { margin: 0; }
.ai-box .adv-list li { background: #fff; }
@media (max-width: 1240px) { .owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ctl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .owner-grid { grid-template-columns: minmax(0, 1fr); }
  .fc-in { grid-template-columns: minmax(0, 1fr); }
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdict b { font-size: 16px; }
}

/* ---------- Dinamika: ixcham hafta jadvali va oy kalendari ---------- */
.wt-card { padding: 16px 18px; margin-bottom: 14px; }
.wt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wt-head b { font-size: 16px; }
.wt-head .muted { margin-left: auto; }
table.wt { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.wt th, table.wt td { padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); }
table.wt thead th { font-size: 12px; color: var(--text-3); vertical-align: bottom; font-weight: 600; }
table.wt thead th b { display: block; font-size: 13px; color: var(--text); font-weight: 800; }
table.wt thead th small { font-size: 11px; }
table.wt thead th.future b { color: var(--text-3); }
table.wt tbody th { text-align: left; font-size: 13px; color: var(--text-2); font-weight: 600; position: sticky; left: 0; background: var(--surface-solid); z-index: 1; }
table.wt td { text-align: right; font-size: 14px; }
table.wt tbody tr:last-child th, table.wt tbody tr:last-child td { border-bottom: 0; }
table.wt .wt-sum { background: var(--surface-2); font-weight: 800; }
table.wt td.none, table.wt td.future { color: var(--text-3); }
table.wt tr.wt-revenue td { font-weight: 600; }
table.wt td.pos-c { color: var(--good); font-weight: 700; }
table.wt td.neg-c { color: var(--crit); font-weight: 700; background: var(--crit-bg); }
.ar { font-style: normal; font-size: 9px; margin-left: 4px; vertical-align: 2px; color: var(--text-3); cursor: help; }
.ar.up { color: var(--good); } .ar.down { color: var(--crit); }
.wm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); margin-bottom: 8px; font-weight: 600; }
.wm-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.wm-legend .l-rev::before { background: var(--series-1); } .wm-legend .l-net::before { background: var(--good); } .wm-legend .l-ad::before { background: var(--series-2); }
.wm-legend .muted { margin-left: auto; font-weight: 500; } .wm-legend .muted::before { display: none; }
.wm-wd, .wm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wm-wd { font-size: 11px; font-weight: 800; color: var(--text-3); text-align: center; margin-bottom: 4px; }
.wm-cell { display: grid; gap: 1px; align-content: start; min-width: 0; min-height: 76px; padding: 7px 8px; border-radius: 12px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.wm-cell.blank { background: transparent; }
.wm-cell.none, .wm-cell.future { opacity: .5; }
.wm-cell.neg { background: var(--crit-bg); }
.wm-d { font-size: 11px; font-weight: 800; color: var(--text-3); }
.wm-rev { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-net { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-net.pos { color: var(--good); } .wm-net.neg { color: var(--crit); }
.wm-ad { font-size: 11px; color: var(--text-3); }
.wt-total { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.wt-total b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }
.wt-total small { color: var(--text-3); margin-left: 4px; }
.wt-total b.pos { color: var(--good); } .wt-total b.neg { color: var(--crit); }
@media (max-width: 860px) {
  .wt-card { padding: 14px 12px; }
  table.wt th, table.wt td { padding: 8px 7px; }
  .wm-wd { display: none; }
  .wm-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wm-cell { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; min-height: 0; column-gap: 8px; }
  .wm-cell.blank, .wm-cell.future { display: none; }
  .wm-ad { display: none; }
}

/* ---------- Kiritish jadvallari: ustunlar guruhi, ixcham dollar kursi ---------- */
.cell-in::placeholder { opacity: .45; }
.rate-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 10px 14px; }
.rate-in label { display: block; }
.rate-in .cell-in { width: 130px; }
.rate-in .need-tag { font-size: 12px; font-weight: 700; color: var(--warn); }
.step-head:empty { display: none; }
.sl-head { justify-content: space-between; }
.dp-grid:has(.wt-card) { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ---------- Kabinet: bugun, ko'rsatkichlar, kamchiliklar, jamoa ---------- */
.kab-h { font-size: 15px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--border); color: var(--text); text-decoration: none; position: relative; transition: transform .15s, box-shadow .15s; }
.task:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.task .t-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.task .t-ic svg { width: 19px; height: 19px; }
.task > div { display: grid; gap: 4px; min-width: 0; }
.task b { font-size: 15px; }
.task .pill { justify-self: start; }
.task small { color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task .t-go { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--blue); }
.task.warn { box-shadow: inset 3px 0 0 var(--warn); } .task.good { box-shadow: inset 3px 0 0 var(--good); }
.kab-kpis { margin-bottom: 0; }
.kab-mine .card-head { align-items: center; }
.imp { font-style: normal; font-weight: 800; font-size: 12px; color: var(--good); white-space: nowrap; margin-left: auto; padding-left: 8px; }
.kab-mine .iss { grid-template-columns: 10px minmax(0, 1fr) auto; background: var(--surface-2); }
.kab-verdict { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-weight: 700; background: var(--warn-bg); }
.kab-verdict.good { background: var(--good-bg); } .kab-verdict.crit { background: var(--crit-bg); }
.team-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.tm > div { display: grid; gap: 1px; min-width: 0; }
.tm small { color: var(--text-3); font-size: 12px; }
.tm span { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.disc-me { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 14px; }
.disc-me b { font-size: 20px; margin-right: 4px; }
/* Birinchi navbatda */
.prio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pr; }
.prio-list li { counter-increment: pr; display: grid; grid-template-columns: 28px auto minmax(0, 1fr) 140px auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.prio-list li::before { content: counter(pr); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); font-weight: 800; font-size: 12px; color: var(--text-2); }
.pr-text { min-width: 0; }
.pr-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.pr-imp { color: var(--good); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Pul taqsimoti */
.al-rows { display: grid; gap: 6px; margin-bottom: 12px; }
.al-row { display: grid; grid-template-columns: 150px auto 20px auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.al-l { font-weight: 700; }
.al-now, .al-rec { font-size: 16px; font-weight: 700; white-space: nowrap; }
.al-now { color: var(--text-2); font-weight: 600; }
.al-row small { font-size: 12px; color: var(--text-3); font-weight: 600; margin-left: 2px; }
.al-note { font-size: 12.5px; color: var(--text-3); text-align: right; }
.al-up { color: var(--good); font-size: 12px; } .al-down { color: var(--crit); font-size: 12px; }
.al-profit { background: var(--good-bg); }
.al-proj td.c { text-align: center; }
@media (max-width: 860px) {
  .prio-list li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .prio-list .pr-who, .prio-list .pr-bar { display: none; }
  .al-row { grid-template-columns: minmax(0, 1fr) auto 16px auto; }
  .al-note { grid-column: 1 / -1; text-align: left; }
}
.owner-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .owner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .owner-grid { grid-template-columns: minmax(0, 1fr); } }

.kab-mine .o-score { --c: var(--good); }
.kab-mine.warn .o-score { --c: #e8a33c; } .kab-mine.crit .o-score { --c: var(--crit); }

/* ---------- O'ng panel: qo'shish va tuzatish formalari ---------- */
html.drawer-lock { overflow: hidden; }
.drawer-wrap { position: fixed; inset: 0; z-index: 65; }
.drawer-bg { position: absolute; inset: 0; background: rgba(16, 20, 40, .34); opacity: 0; transition: opacity .25s; }
.drawer { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); margin: 0; display: flex; flex-direction: column;
  background: var(--surface-solid); border-radius: 26px; box-shadow: -24px 0 60px -24px rgba(16, 20, 60, .45); transform: translateX(calc(100% + 24px));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.drawer-wrap.open .drawer-bg { opacity: 1; }
.drawer-wrap.open .drawer { transform: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 8px; }
.drawer-head h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.drawer-head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px; }
.drawer-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.drawer-x:hover { background: var(--surface-2); }
.drawer-x svg { width: 18px; height: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 22px 20px; display: grid; gap: 16px; align-content: start; }
.drawer-body .field input:not([type=hidden]), .drawer-body .sel-btn, .drawer-body .date-btn { width: 100%; }
.drawer-body .date-btn { justify-content: flex-start; }
.drawer-body .chips { margin-top: 2px; }
.drawer-body .d-cur { margin-top: -8px; }
.drawer-body .d-cur .chip { font-size: 12.5px; padding: 5px 11px; }
.d-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-hint { margin: -8px 0 0; }
.drawer-foot { display: flex; gap: 10px; padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.drawer-foot .btn.primary { flex: 1; justify-content: center; min-height: 48px; font-size: 15px; }
.drawer-foot .btn.ghost { min-height: 48px; }
.in-big { position: relative; display: block; }
.in-big input { font-size: 22px !important; font-weight: 800; padding-right: 64px !important; min-height: 56px; font-variant-numeric: tabular-nums; }
.in-big em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--text-3); pointer-events: none; }
.reason-pick { display: grid; gap: 4px; margin-top: 6px; }
@media (max-width: 600px) {
  .drawer { top: 8px; right: 0; bottom: 0; width: 100%; border-radius: 24px 24px 0 0; }
  .drawer-head { padding: 18px 16px 6px; }
  .drawer-body { padding: 8px 16px 18px; }
  .drawer-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-bg { transition: none; } }
/* Bosiladigan ro'yxatlar (loyihalar, xodimlar, sotuvchilar) — qator bosilsa panel ochiladi */
table.click-list tbody tr { cursor: pointer; }
table.click-list tbody tr:hover td { background: var(--surface-2); }
table.click-list tbody tr.off { opacity: .55; }
table.click-list td .dot { margin-right: 8px; }
.sl-proj { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; white-space: nowrap; }
.page-head .filters .btn.primary { white-space: nowrap; }
.field[hidden] { display: none !important; }
.f-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.f-l .hint { font-weight: 500; }

/* ---------- Kiritish kartalari: har loyiha — karta, maydonlar rangli guruhlarda ---------- */
.pcards { display: grid; gap: 12px; margin: 4px 0 16px; }
.pcard { position: relative; padding: 14px 16px 16px 20px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); }
.pcard::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pc); }
.pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; min-height: 28px; }
.pc-name { font-size: 16px; letter-spacing: -.01em; }
.pc-none { display: none; }
.pc-calc { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.calc-chip { font-size: 12px; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-chip b { color: var(--text); font-weight: 800; margin-left: 2px; }
.pc-state { margin-left: auto; }
.pc-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--good); background: var(--good-bg); padding: 4px 11px 4px 8px; border-radius: 999px; }
.pc-ok svg { width: 14px; height: 14px; }
.pc-body { display: flex; flex-wrap: wrap; gap: 10px; }
.pod { --tc: #6a4ff0; --tb: #f2efff; flex: var(--n) 1 calc(var(--n) * 92px + 20px); min-width: 0; margin: 0; padding: 10px; border: 0; border-radius: 16px; background: var(--tb); }
.pod:has(.pin.wide) { flex-basis: calc(var(--n) * 92px + 80px); }
.pod legend { float: left; width: 100%; padding: 0 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tc); }
.pod-in { clear: both; display: flex; gap: 8px; }
.pin { flex: 1 1 0; display: grid; gap: 4px; min-width: 0; }
.pin.wide { flex-grow: 1.8; }
.pin > span { font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin .cell-in { width: 100%; min-width: 0; text-align: left; font-size: 16px; font-weight: 700; padding: 9px 10px; border-radius: 12px; background: var(--surface-solid); border: 1px solid transparent; box-shadow: 0 1px 0 rgba(20, 20, 60, .05); }
.pin .cell-in:focus { outline: none; border-color: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); }
.pin .cell-in::placeholder { font-weight: 500; }
.pod.t-violet { --tc: #6a4ff0; --tb: #f2efff; }
.pod.t-sky { --tc: #2f78e6; --tb: #ebf4ff; }
.pod.t-lime { --tc: #4c7600; --tb: #f2fadb; }
.pod.t-coral { --tc: #e0602a; --tb: #fff0e8; }
.pod.t-amber { --tc: #a86400; --tb: #fff5e0; }
.pod.t-mint { --tc: #12875a; --tb: #e6f7ef; }
/* Ko'rish rejimi: kataklar — oddiy raqam; bo'sh loyiha — bitta qator */
.ro-mode .pin .cell-in[readonly] { background: transparent; box-shadow: none; border-color: transparent; padding: 2px 2px 0; font-size: 19px; font-weight: 800; }
.ro-mode .pin input[readonly]::placeholder { color: var(--text-3); }
.ro-mode .pcard.is-empty { opacity: .7; padding-bottom: 14px; }
.ro-mode .pcard.is-empty .pc-head { margin: 0; }
.ro-mode .pcard.is-empty .pc-body, .ro-mode .pcard.is-empty .pc-calc, .ro-mode .pcard.is-empty .pc-state { display: none; }
.ro-mode .pcard.is-empty .pc-none { display: inline; font-size: 13px; color: var(--text-3); }
@media (max-width: 640px) {
  .pcard { padding: 12px 12px 12px 16px; }
  .pod { flex-basis: 100%; }
  .pod-in { flex-wrap: wrap; }
  .pin { flex: 1 1 88px; }
  .pin.wide { flex: 2 1 150px; }
}

/* ---------- Sotuvchilar reytingi ---------- */
.lb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-2); }
.lb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.b-sale { background: #1fae6b; } .b-wip { background: #8ec9ff; } .b-canc { background: #ffb347; } .b-unq { background: #d4d1e3; } .b-rest { background: #ecebf3; }
.lb-card { padding: 16px 18px 12px; margin-bottom: 14px; }
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.lb-proj { display: inline-flex; align-items: center; font-size: 17px; }
.lb-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-sum span { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.lb-sum b { margin-right: 3px; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.lb-sum .lb-tc { background: color-mix(in srgb, var(--pc) 15%, #fff); }
.lb-cols, .lb-list li { display: grid; grid-template-columns: 30px minmax(130px, 1.1fr) minmax(170px, 2fr) 48px 52px 92px 78px 74px; gap: 12px; align-items: center; }
.lb-cols { padding: 0 12px 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.lb-cols .n, .lb-list .n { text-align: right; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-list li { padding: 10px 12px; border-radius: 16px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.lb-list li.off { opacity: .55; }
.lb-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--text-3); background: var(--surface-solid); }
.lb-rank.m1 { background: linear-gradient(135deg, #ffe07a, #f5a524); color: #5a3a00; }
.lb-rank.m2 { background: linear-gradient(135deg, #f1f3f8, #c3c9d8); color: #3d4357; }
.lb-rank.m3 { background: linear-gradient(135deg, #ffd5b3, #e0874a); color: #5a2a08; }
.lb-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name small { font-size: 11px; color: var(--text-3); }
.lb-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--ac, var(--pc)); }
.lb-track { display: grid; gap: 4px; min-width: 0; }
.lb-bar { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; }
.lb-bar i { display: block; min-width: 3px; }
.lb-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-num { font-size: 15px; }
.lb-conv { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-solid); font-style: normal; font-size: 14px; font-weight: 800; }
.lb-conv.top { background: #1fae6b; color: #fff; }
.lb-q { font-size: 13px; color: var(--text-2); }
.lb-call { font-size: 12.5px; color: var(--text-2); font-family: 'JetBrains Mono', ui-monospace, monospace; }
@media (max-width: 900px) {
  .lb-cols { display: none; }
  .lb-list li { grid-template-columns: 28px repeat(4, minmax(0, 1fr)); grid-template-areas: "r n n n c" "t t t t t" ". a b q k"; gap: 8px 10px; }
  .lb-rank { grid-area: r; } .lb-name { grid-area: n; } .lb-track { grid-area: t; }
  .lb-list li > .n:nth-of-type(4) { grid-area: a; } .lb-list li > .n:nth-of-type(5) { grid-area: b; }
  .lb-list li > .n:nth-of-type(6) { grid-area: c; } .lb-list li > .n:nth-of-type(7) { grid-area: q; } .lb-list li > .n:nth-of-type(8) { grid-area: k; }
  .lb-list li > [data-l] { text-align: left; font-size: 13px; }
  .lb-list li > [data-l]::before { content: attr(data-l); display: block; font-family: var(--font); font-size: 10.5px; font-weight: 700; color: var(--text-3); }
}

/* ---------- Xarajatlar lentasi: kunlar bo'yicha ---------- */
.feed { display: grid; gap: 16px; }
.feed-date { display: flex; align-items: center; gap: 10px; margin: 0 6px 6px; font-size: 13px; }
.feed-date b { white-space: nowrap; }
.feed-date i { flex: 1; height: 1px; background: var(--border); }
.feed-date span { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-it { display: grid; grid-template-columns: 42px minmax(0, 1.7fr) minmax(0, 1fr) 64px minmax(120px, auto) 76px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; transition: background .15s; }
.feed-it:hover { background: var(--surface-2); }
.feed-ic { --ic: #6b6889; --icb: #f0eff5; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--ic); background: var(--icb); }
.feed-ic svg { width: 20px; height: 20px; }
.feed-ic.t-violet { --ic: #6a4ff0; --icb: #f0ecff; } .feed-ic.t-coral { --ic: #e0602a; --icb: #fff0e8; } .feed-ic.t-sky { --ic: #2f78e6; --icb: #ebf4ff; }
.feed-ic.t-lime { --ic: #4c7600; --icb: #f0f9d6; } .feed-ic.t-amber { --ic: #a86400; --icb: #fff4dc; } .feed-ic.t-teal { --ic: #0f8a86; --icb: #e3f7f5; }
.feed-ic.t-rose { --ic: #d6335b; --icb: #ffeaf0; }
.feed-main { display: grid; gap: 2px; min-width: 0; }
.feed-main b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-main > span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-proj { display: inline-flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.feed-gen { color: var(--text-3); }
.feed-by { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-sum { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.feed-sum b { font-size: 15px; white-space: nowrap; }
.feed-sum small { font-size: 12px; color: var(--text-3); }
.feed-act { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity .15s; }
.feed-act .btn { padding: 6px 8px; }
.feed-act .btn.confirm { background: var(--crit-bg); color: var(--crit); font-size: 12px; }
.feed-it:hover .feed-act, .feed-it:focus-within .feed-act, .feed-act:has(.confirm) { opacity: 1; }
@media (hover: none) { .feed-act { opacity: 1; } }
@media (max-width: 760px) {
  .feed-it { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "i m s" "i p a"; gap: 4px 10px; padding: 10px 6px; }
  .feed-ic { grid-area: i; width: 40px; height: 40px; } .feed-main { grid-area: m; } .feed-sum { grid-area: s; }
  .feed-proj { grid-area: p; } .feed-act { grid-area: a; } .feed-by { display: none; }
}

/* Direktorga boradigan xabar — Telegram ko'rinishida: loyiha bloklari (blockquote), yig'ma tafsilotlar */
pre.tg blockquote { margin: 6px 0 2px; padding: 8px 12px; border-left: 3px solid var(--blue); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--blue) 7%, var(--surface-solid)); white-space: pre-wrap; }
pre.tg blockquote[expandable] { margin-top: 4px; border-left-color: var(--text-3); background: var(--surface-solid); color: var(--text-2); font-size: 12.5px; }
pre.tg blockquote[expandable] { position: relative; cursor: pointer; }
pre.tg blockquote[expandable].fold { max-height: 4.4em; overflow: hidden; }
pre.tg blockquote[expandable].fold::after { content: '▾ batafsil'; position: absolute; right: 0; bottom: 0; left: 0; padding: 14px 12px 4px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: linear-gradient(transparent, var(--surface-solid) 60%); }

/* ---------- Kabinet: loyihalar — ochiladigan kartalar ---------- */
.pa-list { display: grid; gap: 12px; }
.pa { border-radius: 22px; background: var(--surface-solid); border: 1px solid var(--border); overflow: hidden; }
.pa[open] { box-shadow: var(--shadow); }
.pa-head { list-style: none; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(300px, auto) 28px; align-items: center; gap: 12px 22px; padding: 16px 20px; cursor: pointer; }
.pa-head::-webkit-details-marker { display: none; }
.pa-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pa-id > i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 22%, transparent); }
.pa-id > span { display: grid; gap: 2px; min-width: 0; }
.pa-id b { font-size: 17px; letter-spacing: -.01em; }
.pa-verd { font-size: 12px; font-weight: 700; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-verd.good { color: var(--good); } .pa-verd.warn { color: var(--warn); } .pa-verd.crit { color: var(--crit); }
/* Bo'limlar holati — bitta tasma */
.pa-health { display: inline-flex; padding: 3px; gap: 3px; border-radius: 14px; background: var(--surface-2); }
.ph { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 11px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--good); background: var(--good-bg); }
.ph svg { width: 14px; height: 14px; }
.ph.warn { color: var(--warn); background: var(--warn-bg); } .ph.crit { color: var(--crit); background: var(--crit-bg); }
.ph em { font-style: normal; }
.pa-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: 0; }
.pa-nums > span { display: grid; gap: 1px; padding: 0 14px; border-left: 1px solid var(--border); text-align: right; }
.pa-nums > span:first-child { border-left: 0; }
.pa-nums small { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.pa-nums b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-chev { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); position: relative; transition: transform .25s; }
.pa-chev::before { content: ''; position: absolute; left: 10px; top: 9px; width: 6px; height: 6px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); }
.pa[open] .pa-chev { transform: rotate(180deg); }
.pa-body { display: grid; gap: 14px; padding: 4px 20px 20px; }
/* Pul oqimi */
.pa-flow { display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); }
.pf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pf-title { display: inline-flex; align-items: center; gap: 10px; }
.pf-title b { font-size: 15px; }
.pf-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-solid); }
.pf-ic svg { width: 16px; height: 16px; }
.pf-sum { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--text-2); margin-left: auto; }
.pf-sum b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-sum i { font-style: normal; color: var(--text-3); }
.pf-sum em { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-solid); }
.pf-go { font-size: 13px; font-weight: 700; text-decoration: none; }
.pf-bar { display: flex; gap: 3px; height: 16px; border-radius: 99px; overflow: hidden; }
.pf-bar i { display: block; min-width: 3px; }
.pf-leg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pf-leg > span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-solid); font-size: 12px; color: var(--text-2); }
.pf-leg > span > i { width: 10px; height: 10px; border-radius: 3px; grid-row: span 2; }
.pf-leg b { grid-column: 2; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-leg em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-3); }
.cs-profit { background: var(--good); } .cs-loss { background: var(--crit); }
/* Bo'lim kartalari */
.pa-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pd { position: relative; display: grid; align-content: start; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-2); min-width: 0; }
.pd header { display: flex; align-items: center; gap: 10px; }
.pd-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-solid); }
.pd-ic svg { width: 17px; height: 17px; }
.pd-t { display: grid; min-width: 0; }
.pd-t b { font-size: 15px; }
.pd-t small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-st { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--good); background: var(--good-bg); white-space: nowrap; }
.pd-st.warn { color: var(--warn); background: var(--warn-bg); } .pd-st.crit { color: var(--crit); background: var(--crit-bg); }
.pd-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-solid); }
.pd-hero small { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.pd-hero b { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-hero b small { font-size: 13px; font-weight: 600; margin-left: 4px; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.pd-hero .tr { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; justify-self: end; }
.pd-hero .tr.up { color: var(--good); background: var(--good-bg); } .pd-hero .tr.down { color: var(--crit); background: var(--crit-bg); }
.pd-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pd-tile { grid-column: span 2; }
.pd-tile { display: grid; gap: 1px; padding: 9px 11px; border-radius: 12px; background: var(--surface-solid); min-width: 0; }
.pd-tile.wide { grid-column: span 3; }
.pd-tile small { font-size: 11px; font-weight: 700; color: var(--text-3); }
.pd-tile b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-tile em { font-style: normal; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-plan { display: flex; align-items: center; gap: 12px; }
.pd-ring { --rc: var(--good); flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--surface-3) 0); position: relative; }
.pd-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-2); }
.pd-ring b { position: relative; font-size: 12px; font-variant-numeric: tabular-nums; }
.pd-plan.risk .pd-ring { --rc: #e8a33c; } .pd-plan.behind .pd-ring, .pd-plan.over .pd-ring { --rc: var(--crit); } .pd-plan.early .pd-ring, .pd-plan.ok .pd-ring { --rc: var(--blue); }
.pd-plan > span:last-child { display: grid; gap: 1px; min-width: 0; }
.pd-plan > span:last-child b { font-size: 13px; }
.pd-plan small { font-size: 11.5px; color: var(--text-3); }
.pd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-cats span { display: inline-flex; gap: 6px; padding: 5px 9px; border-radius: 9px; background: var(--surface-solid); font-size: 12px; color: var(--text-2); }
.pd-cats b { color: var(--text); }
.pd-empty { margin: 0; font-size: 13px; color: var(--text-3); }
.pd-iss { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pd-iss li { padding: 7px 10px 7px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); background: var(--warn-bg); box-shadow: inset 3px 0 0 #e8a33c; }
.pd-iss li.crit { background: var(--crit-bg); box-shadow: inset 3px 0 0 var(--crit); } .pd-iss li.info { background: var(--surface-solid); box-shadow: inset 3px 0 0 var(--text-3); }
.pd-go { justify-self: start; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--text-2); }
.pd-go span { display: inline-block; transition: transform .15s; }
.pd-go:hover { text-decoration: none; color: var(--blue); }
.pd-go:hover span { transform: translateX(3px); }
/* Nima qilish kerak */
.pa-todo { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); }
.pt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-solid); }
.pt-ic svg { width: 16px; height: 16px; }
.pt-head b { font-size: 15px; }
.pt-head small { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.pa-todo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa-todo li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-solid); font-size: 13.5px; }
.pt-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--surface-2); }
.pt-imp { padding: 5px 11px; border-radius: 999px; font-size: 13.5px; color: var(--good); background: var(--good-bg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-imp small { font-size: 11px; font-weight: 600; margin-left: 1px; opacity: .8; }
@media (max-width: 1250px) { .pa-head { grid-template-columns: minmax(0, 1fr) auto 28px; } .pa-nums { grid-column: 1 / -1; grid-row: 2; justify-content: start; } .pa-nums > span { text-align: left; } .pa-nums > span:first-child { padding-left: 0; } .pf-leg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .pa-depts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pa-head { grid-template-columns: minmax(0, 1fr) 28px; padding: 14px; }
  .pa-health { grid-column: 1 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; }
  .pa-nums { grid-row: 3; }
  .pa-chev { grid-column: 2; grid-row: 1; }
  .ph em { display: none; }
  .pa-body { padding: 4px 12px 14px; }
  .pf-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-sum { margin-left: 0; }
}
@media (max-width: 760px) { .pa-todo li { grid-template-columns: 28px minmax(0, 1fr); } .pt-imp { grid-column: 2; justify-self: start; } .pt-head small { margin-left: 0; } }

/* ---------- Egasi uchun: yuqori panel tugmalari ---------- */
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-2); cursor: pointer; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .badge, .m-acts .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--crit); color: #fff; box-shadow: 0 0 0 2px var(--surface-solid); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.m-acts { display: flex; gap: 8px; }
.m-acts button { position: relative; }
/* Kompaniya holati */
.own-hero { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; align-items: center; padding: 22px 24px; margin-bottom: 18px; border-radius: 24px; background: var(--surface-solid); border: 1px solid var(--border); }
.oh-ring { --rc: var(--good); width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; align-content: center; position: relative; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--surface-3) 0); }
.oh-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface-solid); }
.oh-ring b, .oh-ring small { position: relative; }
.oh-ring b { font-size: 32px; line-height: 1; letter-spacing: -.03em; }
.oh-ring small { font-size: 11px; color: var(--text-3); }
.own-hero.warn .oh-ring { --rc: #e8a33c; } .own-hero.crit .oh-ring { --rc: var(--crit); }
.oh-eyebrow { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.oh-eyebrow small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.oh-main h2 { margin: 2px 0 10px; font-size: 26px; letter-spacing: -.02em; }
.oh-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.oh-main li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.oh-main li::before { content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.oh-main li.warn::before { background: #e8a33c; } .oh-main li.crit::before { background: var(--crit); } .oh-main li.gold::before { background: var(--gold, #e8a33c); }
.oh-main li em { font-style: normal; font-weight: 800; color: var(--good); white-space: nowrap; }
.oh-fc { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); }
.fc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; }
.fc-row span { font-size: 13px; color: var(--text-2); }
.fc-row b { font-size: 19px; font-variant-numeric: tabular-nums; }
.fc-row em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--text-3); }
.fc-row > i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.fc-row > i > i { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.fc-net { padding-top: 8px; border-top: 1px dashed var(--border-strong); }
.pf-note { font-size: 12px; color: var(--text-3); font-weight: 600; }
/* Ishni boshlash */
.setup { margin-bottom: 18px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); overflow: hidden; }
.setup > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(120px, 220px) auto; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.setup > summary::-webkit-details-marker { display: none; }
.su-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); }
.su-ic svg { width: 18px; height: 18px; }
.setup summary b { display: block; font-size: 15px; }
.setup summary small { font-size: 12.5px; color: var(--text-3); }
.su-prog { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.su-prog i { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.setup summary em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.su-steps { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.su-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 4px 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.su-steps li .btn { grid-column: 2; justify-self: start; }
.su-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--border-strong); }
.su-n svg { width: 14px; height: 14px; }
.su-steps li.ok .su-n { border: 0; background: var(--good); color: #fff; }
.su-steps li.next { box-shadow: inset 0 0 0 2px var(--blue); }
.su-steps b { font-size: 13.5px; } .su-steps small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.35; }
/* Tejash va o'sish */
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sv-col { display: grid; align-content: start; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.sv-col header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sv-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-solid); }
.sv-ic svg { width: 20px; height: 20px; }
.sv-col header b { display: block; font-size: 15px; } .sv-col header small { font-size: 12px; color: var(--text-3); }
.sv-col header strong { text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-col header strong small { display: block; font-size: 11px; font-weight: 600; }
.sv-list { display: grid; gap: 7px; }
.sv-it { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-solid); color: var(--text); text-decoration: none; transition: transform .15s; }
.sv-it:hover { text-decoration: none; transform: translateX(2px); }
.sv-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-2); }
.sv-t { display: grid; gap: 1px; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.sv-t b { font-size: 13.5px; color: var(--text); }
.sv-t small { font-size: 11.5px; color: var(--text-3); }
.sv-it > em { font-style: normal; font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-it > em small { font-size: 11px; font-weight: 600; opacity: .75; }
.sv-empty { margin: 0; font-size: 13px; color: var(--text-3); }
.sv-cats { margin-top: 14px; display: grid; gap: 8px; }
.sv-cats-h { font-size: 13px; font-weight: 700; } .sv-cats-h small { font-weight: 500; color: var(--text-3); margin-left: 6px; }
.sv-cats-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sv-cat { display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.sv-cat small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-cat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sv-cat em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--text-3); }
.sv-cat em.up { color: var(--crit); } .sv-cat em.down { color: var(--good); }
/* Ogohlantirishlar paneli */
.al-g { display: grid; gap: 7px; }
.al-g h3 { margin: 4px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.al-g h3 small { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); }
.al-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--surface-2); color: var(--text); text-decoration: none; box-shadow: inset 3px 0 0 #e8a33c; }
.al-it.crit { box-shadow: inset 3px 0 0 var(--crit); } .al-it.info { box-shadow: inset 3px 0 0 var(--text-3); }
.al-it:hover { text-decoration: none; background: var(--surface-3); }
.al-who { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.al-txt { font-size: 13.5px; line-height: 1.4; }
.al-it em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--good); white-space: nowrap; align-self: center; }
.al-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 10px; text-align: center; color: var(--text-3); }
.al-empty svg { width: 34px; height: 34px; color: var(--good); }
.al-empty b { color: var(--text); font-size: 16px; }
/* Yordam */
.hp-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.hp-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-solid); }
.hp-ic svg { width: 19px; height: 19px; }
.hp-page p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hp-flow > b, .hp-gl > b { display: block; margin-bottom: 8px; font-size: 14px; }
.flow4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: f; }
.flow4 li { position: relative; display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.flow4 li span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); }
.flow4 li span svg { width: 16px; height: 16px; }
.flow4 b { font-size: 12.5px; } .flow4 small { font-size: 11px; color: var(--text-3); line-height: 1.3; }
.flow4 li:not(:last-child)::after { content: '→'; position: absolute; right: -7px; top: 22px; font-weight: 800; color: var(--text-3); z-index: 1; }
.hp-gl dl { margin: 0; display: grid; gap: 6px; }
.hp-gl dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.hp-gl dt { font-weight: 800; font-size: 13px; } .hp-gl dd { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
/* Tanishtiruv */
.tour { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 10, 22, .5); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.tour.open { opacity: 1; }
.tour-card { position: relative; width: min(520px, 100%); display: grid; gap: 12px; padding: 28px; border-radius: 28px; background: var(--surface-solid); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tour.open .tour-card { transform: none; }
.tour-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); }
.tour-ic svg { width: 26px; height: 26px; }
.tour-step { position: absolute; top: 28px; right: 28px; font-size: 12px; font-weight: 800; color: var(--text-3); }
.tour-card h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.02em; }
.tour-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--surface-3); transition: width .2s; }
.tour-dots i.on { width: 24px; background: var(--blue); }
.tour-foot { display: flex; justify-content: space-between; gap: 10px; }
.tour-foot .btn.primary { min-width: 140px; justify-content: center; }
@media (max-width: 1200px) { .own-hero { grid-template-columns: auto minmax(0, 1fr); } .oh-fc { grid-column: 1 / -1; } .sv-cats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .own-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; text-align: left; }
  .oh-score { justify-self: start; }
  .setup > summary { grid-template-columns: auto minmax(0, 1fr) auto; } .su-prog { display: none; }
  .su-steps, .sv-cats-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow4 li:nth-child(2)::after { display: none; }
  .hp-gl dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.fc-row b .pos, .fc-row b .neg { font-size: inherit; }

/* ---------- Bo'lim holati (Target, Sotuv): umumiy manzara ---------- */
.dept-tabs { margin: -6px 0 18px; }
.dv-kpis { margin-bottom: 16px; }
.dv-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; margin-bottom: 22px; }
.dv-owner { display: grid; gap: 14px; align-content: start; }
.dv-o-top { display: flex; align-items: center; gap: 14px; }
.dv-o-top > div { display: grid; gap: 1px; min-width: 0; }
.dv-o-top small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.dv-o-top b { font-size: 18px; }
.dv-o-top span { font-size: 13px; color: var(--text-2); }
.dv-owner .o-score { width: 58px; height: 58px; }
.dv-owner .o-score b { width: 46px; height: 46px; font-size: 16px; }
.dv-owner.warn .o-score { --c: var(--warn); } .dv-owner.crit .o-score { --c: var(--crit); }
.dv-disc { display: grid; gap: 6px; }
.dv-disc > div { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.dv-disc span { color: var(--text-2); font-size: 12.5px; }
.dv-disc i { font-style: normal; font-weight: 800; }
.dv-disc i.g { color: var(--good); } .dv-disc i.w { color: var(--warn); } .dv-disc i.c { color: var(--crit); }
.dv-chr { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 80px 44px; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }
.dv-chr > span { font-weight: 600; }
.dv-chr > i { display: block; height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dv-chr > i > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.dv-chr b { text-align: right; font-variant-numeric: tabular-nums; }
.dv-chr em { font-style: normal; font-size: 12.5px; color: var(--text-3); text-align: right; }
.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 22px; }
.dv-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow); }
.dv-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--pc); }
.dv-card header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-card header b { font-size: 16px; }
.dv-card header small { font-size: 12px; color: var(--text-3); }
.dv-card header .pill { margin-left: auto; }
.dv-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.dv-hero small { flex-basis: 100%; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.dv-hero b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv-hero .tr { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.dv-hero .tr.up { color: var(--good); background: var(--good-bg); } .dv-hero .tr.down { color: var(--crit); background: var(--crit-bg); }
.dv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dv-stat { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.dv-stat small { font-size: 11px; font-weight: 600; color: var(--text-3); }
.dv-stat b { font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-stat em { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-plan { display: grid; gap: 5px; }
.dv-plan > span { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dv-plan > i { display: block; height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dv-plan > i > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.dv-plan.behind > i > i, .dv-plan.over > i > i { background: var(--crit); }
.dv-plan em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.dv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-tags span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.dv-note { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; background: var(--warn-bg); color: var(--text); }
.dv-note.crit { background: var(--crit-bg); } .dv-note.info { background: var(--surface-2); }
.dv-iss { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dv-iss li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; box-shadow: inset 3px 0 0 var(--warn); }
.dv-iss li.crit { box-shadow: inset 3px 0 0 var(--crit); } .dv-iss li.info { box-shadow: inset 3px 0 0 var(--text-3); }
.dv-iss em { font-style: normal; font-weight: 800; color: var(--good); white-space: nowrap; }
.dv-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--good); font-weight: 600; }
.dv-ok svg { width: 18px; height: 18px; }
.dv-sl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dv-sl-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 70px 90px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.dv-sl-list li > span:nth-child(2) { display: grid; min-width: 0; }
.dv-sl-list small { font-size: 11.5px; color: var(--text-3); display: inline-flex; align-items: center; }
.dv-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-solid); }
.dv-num { display: grid; text-align: right; } .dv-num b { font-variant-numeric: tabular-nums; }
/* Marketing: kimga qancha */
.vend { display: grid; gap: 8px; }
.vend-it { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.vend-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--info-bg); color: var(--info); }
.vend-it.none .vend-ava { background: var(--surface-2); color: var(--text-3); }
.vend-t { display: grid; gap: 3px; min-width: 0; }
.vend-t b { font-size: 14px; } .vend-t small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vend-t > i { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.vend-t > i > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.vend-s { display: grid; text-align: right; } .vend-s b { font-variant-numeric: tabular-nums; } .vend-s small { font-size: 11.5px; color: var(--text-3); }
.feed-vendor { margin-left: 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--blue); }
@media (max-width: 1000px) { .dv-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dv-chr { grid-template-columns: minmax(0, 1fr) 70px 36px; } .dv-chr > i { grid-column: 1 / -1; grid-row: 2; } .dv-sl-list li { grid-template-columns: 26px minmax(0, 1fr) 60px; } .dv-sl-list li > .dv-num:last-child { display: none; } }
.dv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-stat { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
.dv-stat small { grid-column: 1 / -1; }
.dv-stat em { text-align: right; }
.dv-num small { display: block; }

/* ---------- Loyiha sahifasi: yuqoridan pastga bitta hikoya ---------- */
.ps-hero { display: grid; gap: 12px; padding: 20px 22px; margin-bottom: 16px; border-radius: 22px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow), inset 4px 0 0 var(--good); }
.ps-hero.warn { box-shadow: var(--shadow), inset 4px 0 0 var(--warn); } .ps-hero.crit { box-shadow: var(--shadow), inset 4px 0 0 var(--crit); }
.ph-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.ph-top h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ph-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.ph-list li.crit::before { background: var(--crit); } .ph-list li.info::before { background: var(--text-3); }
.ph-ok { margin: 0; color: var(--text-2); }
.ph-do { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--info-bg); }
.ph-do span { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--info); }
.ph-do b { font-size: 14.5px; font-weight: 600; }
.ps-kpis { margin-bottom: 16px; }
.ps { margin-bottom: 16px; padding: 20px 22px; }
.ps-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ps-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--text); color: #fff; }
.ps-h h2 { margin: 0; font-size: 18px; }
.ps-h small { font-size: 12.5px; color: var(--text-3); }
.ps h4 { margin: 18px 0 8px; font-size: 13px; color: var(--text-2); }
.ps-plan > .card-head { display: none; }
.ps-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.ps-two.one { grid-template-columns: minmax(0, 1fr); }
.pm { display: grid; gap: 4px; }
.pm-row { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 130px 44px; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed var(--border); }
.pm-row > span { display: grid; font-weight: 600; }
.pm-row > span small { font-size: 11.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row > i { display: block; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pm-row > i > i { display: block; height: 100%; border-radius: 99px; background: var(--text-3); }
.pm-row.in > i > i { background: var(--blue); } .pm-row.ad > i > i { background: #0e1116; } .pm-row.mk > i > i { background: #9cc3f5; } .pm-row.opex > i > i { background: #5b9cf0; }
.pm-row b { text-align: right; font-variant-numeric: tabular-nums; }
.pm-row em { font-style: normal; font-size: 12px; color: var(--text-3); text-align: right; }
.pm-total { border-bottom: 0; margin-top: 4px; padding: 10px 12px; border-radius: 14px; background: var(--good-bg); }
.pm-total.neg { background: var(--crit-bg); }
.pm-total > span { font-weight: 800; } .pm-total b { font-size: 17px; }
.pm-total.pos b { color: var(--good); } .pm-total.neg b { color: var(--crit); }
.pm-total > i { visibility: hidden; }
.pm-ch-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .pm-ch-h small { color: var(--text-3); font-size: 12px; }
.ps-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ps-m { display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.ps-m small { font-size: 11.5px; font-weight: 600; color: var(--text-3); } .ps-m b { font-size: 17px; font-variant-numeric: tabular-nums; } .ps-m em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.ps-bar, .ps-fr { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 80px 48px; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.ps-bar > i, .ps-fr > i { display: block; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ps-bar > i > i, .ps-fr > i > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.ps-bar b, .ps-fr b { text-align: right; font-variant-numeric: tabular-nums; } .ps-bar em, .ps-fr em { font-style: normal; font-size: 12px; color: var(--text-3); text-align: right; }
.ps-fn { margin-bottom: 6px; }
.ps-tbl td, .ps-tbl th { white-space: nowrap; }
.ps-notes { display: grid; gap: 6px; }
.ps-notes > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.ps-notes small { color: var(--text-3); } .ps-notes .good { color: var(--good); } .ps-notes .bad { color: var(--crit); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chips span { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.ps-chips b { color: var(--text); margin-left: 4px; }
.ps-waste { margin-left: auto; }
.ps-src { margin: 14px 0 0; font-size: 13px; color: var(--text-2); }
.ps-more { margin-bottom: 16px; padding: 0; overflow: hidden; }
.ps-more > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 16px 22px; cursor: pointer; }
.ps-more > summary::-webkit-details-marker { display: none; }
.ps-more > summary::after { content: '▾'; margin-left: auto; color: var(--text-3); transition: transform .2s; }
.ps-more[open] > summary::after { transform: rotate(180deg); }
.ps-more > summary b { font-size: 16px; } .ps-more > summary small { color: var(--text-3); font-size: 12.5px; }
.ps-more > .table-wrap, .ps-deep { padding: 0 22px 20px; }
.ps-deep { display: grid; gap: 14px; }
@media (max-width: 900px) { .ps-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pm-row { grid-template-columns: minmax(0, 1fr) auto 38px; } .pm-row > i { grid-column: 1 / -1; grid-row: 2; } .pm-total > i { display: none; }
  .ps-bar, .ps-fr { grid-template-columns: minmax(0, 1fr) 70px 40px; } .ps-bar > i, .ps-fr > i { grid-column: 1 / -1; grid-row: 2; }
  .ps, .ps-hero { padding: 16px; }
}

/* ---------- Uchqun Yordamchi (AI): tugma, suhbat oynasi, ekranda ko'rsatish ---------- */
.as-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 7px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font: inherit; text-align: left; background: linear-gradient(135deg, #3b7ce6 0%, #1f4f9c 55%, #0b2a5b 100%);
  box-shadow: 0 14px 32px rgba(11, 42, 91, .38), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .2s, box-shadow .2s; isolation: isolate; }
.as-fab::before { content: ''; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgba(91, 156, 240, .55), rgba(47, 111, 214, 0)); filter: blur(10px); opacity: .8; animation: as-glow 3.2s ease-in-out infinite; }
@keyframes as-glow { 50% { opacity: .35; transform: scale(.97); } }
.as-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11, 42, 91, .45), inset 0 1px 0 rgba(255, 255, 255, .28); }
.as-fab.on { transform: scale(.95); }
.as-fab-orb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff 0%, #dbe8fb 45%, #9cc3f5 100%); color: #1f4f9c; box-shadow: inset 0 -3px 6px rgba(31, 79, 156, .25); }
.as-fab-orb svg { width: 24px; height: 24px; animation: as-twinkle 4s ease-in-out infinite; }
@keyframes as-twinkle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(18deg) scale(1.12); } 90% { transform: rotate(-6deg) scale(.96); } }
.as-fab-t { display: grid; line-height: 1.1; } .as-fab-t b { font-size: 15.5px; letter-spacing: -.01em; } .as-fab-t small { font-size: 11.5px; font-weight: 600; opacity: .78; }
.as-fab[hidden], body:has(.login) .as-fab, body:has(.login) .as-panel { display: none; }

.as-panel { position: fixed; right: 22px; bottom: 94px; z-index: 70; width: min(410px, calc(100vw - 24px)); height: min(640px, calc(100vh - 124px)); display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--text); border: 1px solid rgba(15, 35, 70, .08); border-radius: 28px; box-shadow: 0 30px 70px rgba(11, 42, 91, .28), 0 4px 14px rgba(11, 42, 91, .08); animation: as-in .26s cubic-bezier(.2, .9, .3, 1.2); transform-origin: bottom right; }
.as-panel[hidden] { display: none; }
@keyframes as-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* Sarlavha — ko'k gradient, ustida yumshoq nur */
.as-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 16px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #4a8cf0 0%, rgba(74, 140, 240, 0) 55%), radial-gradient(90% 120% at 100% 0%, rgba(156, 195, 245, .45) 0%, rgba(156, 195, 245, 0) 60%), linear-gradient(135deg, #2f6fd6 0%, #1d3f78 70%, #0b2a5b 100%); }
.as-head::after { content: ''; position: absolute; right: -30px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 0 0 22px rgba(255, 255, 255, .04), 0 0 0 46px rgba(255, 255, 255, .03); pointer-events: none; }
.as-orb { flex: none; position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #1f4f9c;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #dbe8fb 50%, #9cc3f5 100%); box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 6px 16px rgba(5, 20, 50, .35); }
.as-orb svg { width: 23px; height: 23px; }
.as-ttl { flex: 1; min-width: 0; display: grid; gap: 2px; position: relative; z-index: 1; }
.as-ttl b { font-size: 16.5px; letter-spacing: -.01em; }
.as-ttl small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9cc3f5; box-shadow: 0 0 0 3px rgba(156, 195, 245, .3); animation: as-live 2s infinite; }
@keyframes as-live { 50% { box-shadow: 0 0 0 6px rgba(156, 195, 245, 0); } }
.as-ic { flex: none; position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.as-ic svg { width: 18px; height: 18px; } .as-ic:hover { background: rgba(255, 255, 255, .24); }

.as-body { position: relative; flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain;
  background: linear-gradient(180deg, #f3f7fd 0%, #fff 220px); }
/* Bo'sh suhbat: salom, 3 qadam, ko'p so'raladigan savollar */
.as-hello { display: grid; gap: 14px; }
.as-hero { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #e3ebf7; box-shadow: 0 8px 22px rgba(31, 79, 156, .08); }
.as-hero-orb { flex: none; width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3b7ce6, #1d3f78); box-shadow: 0 8px 18px rgba(31, 79, 156, .32); }
.as-hero-orb svg { width: 28px; height: 28px; animation: as-twinkle 4s ease-in-out infinite; }
.as-hero h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.as-hero p { margin: 3px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.as-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.as-how li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 4px; border-radius: 14px; background: #eef4fd; color: #1d3f78; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.as-how b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #2f6fd6; color: #fff; font-size: 12px; }
.as-cap { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 2px 2px 0; }
.as-cards { display: grid; gap: 8px; }
.as-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border: 1px solid #e3ebf7; border-radius: 16px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.as-card:hover { border-color: #9cc3f5; box-shadow: 0 8px 20px rgba(31, 79, 156, .12); transform: translateY(-1px); }
.as-card-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #eef4fd; color: #2f6fd6; }
.as-card-ic svg { width: 18px; height: 18px; }
.as-card-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.as-card > svg { flex: none; width: 16px; height: 16px; color: #9cb0cc; transition: transform .15s, color .15s; }
.as-card:hover > svg { color: #2f6fd6; transform: translateX(2px); }
/* Suhbat */
.as-u { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, #3b7ce6, #1f4f9c); color: #fff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 6px 16px rgba(31, 79, 156, .22); }
.as-row { display: flex; align-items: flex-start; gap: 8px; }
.as-mini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3b7ce6, #1d3f78); box-shadow: 0 4px 10px rgba(31, 79, 156, .28); }
.as-mini svg { width: 16px; height: 16px; }
.as-b { flex: 1; min-width: 0; display: grid; gap: 12px; padding: 14px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid #e3ebf7; box-shadow: 0 6px 18px rgba(31, 79, 156, .07); font-size: 14px; line-height: 1.5; }
.as-a { margin: 0; font-weight: 600; color: var(--text); }
.as-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.as-steps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.as-steps li:last-child { padding-bottom: 0; }
.as-steps li:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(#9cc3f5, #e3ebf7); }
.as-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3b7ce6, #1f4f9c); box-shadow: 0 3px 8px rgba(31, 79, 156, .25); }
.as-steps p { margin: 3px 0 0; color: var(--text); font-size: 13.5px; }
.as-go { margin-top: 4px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 3px 10px; background: #eef4fd; color: #2f6fd6; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.as-go::after { content: '→'; margin-left: 4px; } .as-go:hover { background: #dbe8fb; }
.as-tour { justify-self: stretch; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; padding: 8px 14px 8px 8px; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #2f6fd6, #0b2a5b); box-shadow: 0 10px 22px rgba(11, 42, 91, .28); transition: transform .15s, box-shadow .15s; }
.as-tour:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(11, 42, 91, .34); }
.as-tour small { margin-left: auto; font-size: 12px; font-weight: 600; opacity: .75; }
.as-play { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.as-play svg { width: 15px; height: 15px; }
.as-tip { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #f3f7fd; color: var(--text-2); font-size: 13px; }
.as-tip span { flex: none; color: #2f6fd6; } .as-tip svg { width: 16px; height: 16px; margin-top: 1px; }
.as-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.as-sug button { text-align: left; border: 1px solid #d5e3f6; background: #fff; color: #1d3f78; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.as-sug button:hover { border-color: #2f6fd6; background: #eef4fd; }
.as-b .as-cards .as-card { padding: 8px 10px 8px 8px; } .as-b .as-cards .as-card-ic { width: 30px; height: 30px; border-radius: 10px; }
.as-typing { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; padding: 12px 14px; }
.as-dots { display: inline-flex; gap: 4px; } .as-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2f6fd6; animation: as-dot 1s infinite ease-in-out; }
.as-dots i:nth-child(2) { animation-delay: .15s; } .as-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Yozish maydoni: tugma maydon ichida */
.as-form { display: grid; gap: 6px; padding: 10px 14px 10px; border-top: 1px solid #eef2f8; background: #fff; }
.as-field { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 14px; border: 1.5px solid #dbe4f1; border-radius: 22px; background: #f7f9fd; transition: border-color .15s, box-shadow .15s, background .15s; }
.as-field:focus-within { border-color: #2f6fd6; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 214, .12); }
.as-panel .as-field textarea { flex: 1; resize: none; min-height: 36px; max-height: 96px; margin: 0; padding: 8px 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; }
.as-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; background: linear-gradient(135deg, #3b7ce6, #1f4f9c); box-shadow: 0 4px 12px rgba(31, 79, 156, .3); transition: transform .15s; }
.as-send svg { width: 18px; height: 18px; } .as-send:hover { transform: scale(1.06); }
.as-note { text-align: center; color: var(--text-3); font-size: 11px; }
/* Ekranda ko'rsatish: atrofi xiralashadi, kerakli joy ko'k halqa bilan yonadi; pastda — qadam paneli */
/* Yoritish: atrof xiralashadi; joy atrofida ikki nur (ko'k → oq) aylanib yuguradi, orqasida yumshoq porlash */
@property --as-a { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
.as-spot { position: fixed; z-index: 85; pointer-events: none; border-radius: 16px; --as-a: 0deg; animation: as-spin 2.6s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(156, 195, 245, .55), 0 0 0 9999px rgba(8, 18, 40, .5); transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes as-spin { to { --as-a: 360deg; } }
.as-ring { position: absolute; inset: -3px; border-radius: 19px; }
.as-ring > i { position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--as-a), rgba(47, 111, 214, 0) 0deg, #5b9cf0 50deg, #fff 95deg, #2f6fd6 130deg, rgba(47, 111, 214, 0) 175deg, rgba(47, 111, 214, 0) 180deg, #9cc3f5 230deg, #fff 275deg, #2f6fd6 310deg, rgba(47, 111, 214, 0) 355deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.as-ring.blur { inset: -8px; border-radius: 24px; filter: blur(9px); opacity: .95; }
.as-ring.blur > i { padding: 8px; }
.as-spot::before { content: ''; position: absolute; inset: -14px; border-radius: 30px; box-shadow: 0 0 34px 6px rgba(47, 111, 214, .35); animation: as-breathe 2.6s ease-in-out infinite; }
@keyframes as-breathe { 50% { box-shadow: 0 0 46px 10px rgba(91, 156, 240, .5); } }
.as-spot.pop { animation: as-spin 2.6s linear infinite, as-focus .55s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes as-focus { from { opacity: 0; transform: scale(1.15); } 60% { opacity: 1; } }
/* «Shu yerda» belgisi — joyning tepasida (joy yo'q bo'lsa — pastida yoki ichida) */
.as-tag { position: absolute; left: 0; bottom: calc(100% + 12px); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; white-space: nowrap;
  color: #fff; font-size: 12.5px; font-weight: 700; background: linear-gradient(135deg, #3b7ce6, #1d3f78); box-shadow: 0 8px 20px rgba(11, 42, 91, .4), 0 0 0 1px rgba(255, 255, 255, .18) inset; animation: as-bob 1.6s ease-in-out infinite; }
.as-tag svg { width: 14px; height: 14px; }
.as-tag::after { content: ''; position: absolute; left: 18px; top: 100%; border: 6px solid transparent; border-top-color: #2a5eb8; }
.as-spot.below .as-tag { bottom: auto; top: calc(100% + 12px); }
.as-spot.below .as-tag::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #3b7ce6; }
.as-spot.inside .as-tag { bottom: auto; top: 10px; left: 10px; }
.as-spot.inside .as-tag::after { display: none; }
@keyframes as-bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .as-spot, .as-spot.pop, .as-spot::before, .as-tag { animation: none; } }
.as-bar { position: fixed; left: 50%; bottom: 22px; z-index: 88; transform: translateX(-50%); width: min(580px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 16px 10px; --as-a: 0deg;
  color: #fff; border-radius: 22px; background: linear-gradient(135deg, #1d3f78 0%, #0b2a5b 60%, #0e1116 100%); box-shadow: 0 22px 54px rgba(11, 22, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .12); animation: as-bar-in .3s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes as-bar-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.97); } }
/* Qadam paneli: chetida sekin aylanuvchi nur va pastda qadamlar chizig'i */
.as-bar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--as-a), rgba(47, 111, 214, 0) 0deg, #5b9cf0 50deg, #fff 95deg, #2f6fd6 130deg, rgba(47, 111, 214, 0) 175deg, rgba(47, 111, 214, 0) 180deg, #9cc3f5 230deg, #fff 275deg, #2f6fd6 310deg, rgba(47, 111, 214, 0) 355deg); opacity: .9; animation: as-spin 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.as-bar-prog { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.as-bar-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b9cf0, #fff); box-shadow: 0 0 8px rgba(156, 195, 245, .8); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.as-bar-n { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 30% 25%, #fff, #dbe8fb 55%, #9cc3f5); color: #1f4f9c; font-weight: 800; font-size: 18px; line-height: 1; }
.as-bar-n small { font-size: 10.5px; opacity: .75; font-weight: 700; }
.as-bar-t { flex: 1; min-width: 0; }
.as-bar-who { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9cc3f5; }
.as-bar-who svg { width: 12px; height: 12px; }
.as-bar-t p { margin: 1px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; }
.as-bar-t small { display: block; margin-top: 2px; color: #9cc3f5; font-size: 12px; }
.as-bar-a { flex: none; display: flex; gap: 6px; }
.as-bar-a button { height: 40px; min-width: 40px; border-radius: 13px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.as-bar-a button:hover { background: rgba(255, 255, 255, .2); }
.as-bar-a .next { padding: 0 15px; background: #fff; color: #0b2a5b; font-size: 13.5px; }
.as-bar-a .next:hover { background: #e8f0fc; }
/* O'ngdan panel ochiq bo'lsa — qadam paneli chapga suriladi, «Saqlash» ni yopmasin */
@media (min-width: 861px) { body:has(.drawer-wrap.open) .as-bar { left: calc(50% - 250px); } }
@media (max-width: 860px) {
  .as-fab { right: 14px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); height: 56px; padding: 0 6px; }
  .as-fab-t { display: none; }
  .as-ttl-x { display: none; }
  .as-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(80vh, 660px); border-radius: 26px; }
  .as-bar { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .as-bar-t { flex-basis: calc(100% - 62px); }
  .as-bar-a { margin-left: auto; }
}

/* ---------- Harakat: sahifa ochilganda bloklar navbat bilan chiqadi, chiziqlar to'ladi (motion.js) ---------- */
@keyframes mo-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.mo-in { animation: mo-rise .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--mo-i, 0) * 60ms); }
@keyframes mo-grow { from { transform: scaleX(0); } }
.mo-go i[style*="width"], .mo-go .lb-bar, .mo-go .pm-fill { transform-origin: left center; animation: mo-grow .95s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--mo-i, 0) * 60ms + 220ms); }
/* «Zararda» — bir necha marta e'tibor tortadi, keyin tinchiydi */
@keyframes mo-alert { from { box-shadow: 0 0 0 0 rgba(217, 58, 63, .45); } to { box-shadow: 0 0 0 9px rgba(217, 58, 63, 0); } }
.mo-go .pill.crit { animation: mo-alert 1.5s ease-out .7s 3; }
.col-toggle { transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .15s; }
/* Bosilganda — tugma sal botib, javob berganini sezdiradi */
.btn:active, .hn:active, .as-card:active, .as-tour:active, .col-pick:active, .col-toggle:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .mo-in, .mo-go i[style*="width"], .mo-go .lb-bar, .mo-go .pm-fill, .mo-go .pill.crit { animation: none !important; }
}

/* ---------- Loyihalar: har loyiha — hamyon. Ichidan kartalar chiqib turadi, old cho'ntak — shisha ---------- */
.board { align-items: start; }
.col.wallet { display: block; padding: 0; gap: 0; min-height: 0; background: none; border: 0; border-radius: 30px; box-shadow: none; overflow: visible; cursor: default; }
.col.wallet:hover, .col.wallet:focus-visible { transform: none; box-shadow: none; }
.wl { position: relative; z-index: 1; padding-top: 152px; border-radius: 30px; isolation: isolate; transition: margin .5s cubic-bezier(.2, .8, .2, 1); }
/* Orqa qism — to'q ko'k, tepasida loyiha rangidan yengil nur */
.wl::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: box-shadow .3s;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--pc) 45%, transparent) 0%, transparent 62%), linear-gradient(180deg, #16305f 0%, #0b1d3f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.col.wallet.picked .wl::before { box-shadow: 0 0 0 3px #5b9cf0, inset 0 1px 0 rgba(255, 255, 255, .14); }
/* Kartalar: uchtasining tepasi ko'rinib turadi, pasti — cho'ntak ortida xira ko'rinadi */
.wl-card { position: absolute; top: calc(14px + var(--k) * 46px); left: calc(22px - var(--k) * 6px); right: calc(22px - var(--k) * 6px); z-index: calc(var(--k) + 1); height: 104px;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 14px; border-radius: 18px; cursor: pointer;
  box-shadow: 0 -8px 18px -6px rgba(5, 14, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; transition-delay: calc((2 - var(--k)) * 45ms); }
.wc-ad { background: linear-gradient(120deg, #2f6fd6 0%, #5b9cf0 100%); color: #fff; --r: -4deg; --up: -8px; }
.wc-rev { background: linear-gradient(120deg, #ffffff 0%, #f1f6fd 100%); color: var(--text); --r: 3deg; --up: -12px; }
.wc-fn { background: linear-gradient(120deg, #dbe8fb 0%, #b9d3f6 100%); color: #0b2a5b; --r: -1.5deg; --up: -18px; }
.wc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.wc-ic svg { width: 16px; height: 16px; }
.wc-ad .wc-ic { background: rgba(255, 255, 255, .2); } .wc-rev .wc-ic { background: #eef4fd; color: #2f6fd6; }
.wc-fn .wc-ic { background: #fff; color: #2f6fd6; box-shadow: 0 0 0 2px #2f6fd6; } .wc-fn.bad .wc-ic { color: var(--crit); box-shadow: 0 0 0 2px var(--crit); }
.wc-t { display: grid; min-width: 0; line-height: 1.15; }
.wc-t small { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
.wc-t em { font-style: normal; font-size: 11.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wl-card > b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; }
.wl-card > b i { font-style: normal; font-size: 11px; font-weight: 600; opacity: .7; margin-left: 2px; }
/* Sichqoncha ustiga kelsa — kartalar sal mo'ralaydi */
.col.wallet:not(.open) .wl:hover .wl-card { transform: translateY(calc(-3px - var(--k) * 2px)); }
/* Old cho'ntak — xira shisha, ichki chok chizig'i */
.wl-pocket { position: relative; z-index: 5; display: grid; gap: 10px; margin: 0 6px 6px; padding: 14px 16px 16px; border-radius: 26px; color: #fff; cursor: pointer; outline: none;
  background: linear-gradient(180deg, rgba(40, 80, 150, .5) 0%, rgba(12, 30, 66, .86) 70%); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 -12px 26px -14px rgba(0, 0, 0, .5); }
.wl-pocket::before { content: ''; position: absolute; inset: 7px; border-radius: 20px; border: 1.5px dashed rgba(255, 255, 255, .13); pointer-events: none; }
.wl-pocket:focus-visible { box-shadow: 0 0 0 3px #9cc3f5, inset 0 1px 0 rgba(255, 255, 255, .28); }
.wl-bar { position: relative; display: flex; align-items: center; gap: 6px; }
.wl-bar .pill { margin-left: auto; }
.wl-bar .col-pick, .wl-bar .col-grip, .wl-bar .col-hide { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); box-shadow: none; }
.wl-bar .col-pick svg { opacity: 0; } .col.wallet.picked .wl-bar .col-pick { background: #5b9cf0; border-color: #5b9cf0; color: #fff; } .col.wallet.picked .wl-bar .col-pick svg { opacity: 1; }
.wl-bar .col-grip { cursor: grab; } .wl-bar button:hover { background: rgba(255, 255, 255, .2); }
.wl-id { position: relative; display: flex; align-items: center; gap: 10px; }
.wl-id .col-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.wl-id h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; color: #fff; }
.wl-id small { color: rgba(255, 255, 255, .6); font-size: 12px; }
.wl-sum { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 10px; }
.wl-sum small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.wl-sum b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-sum b i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .6; margin-left: 4px; }
.wl-sum.pos b { color: #fff; } .wl-sum.neg b { color: #ffb4b6; } .wl-sum.none b { color: rgba(255, 255, 255, .45); }
.wl-sum em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.wl-pocket { transition: box-shadow .25s, transform .25s; }
.wl-pocket:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 -12px 26px -14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(156, 195, 245, .35); }
.wl-pocket:active { transform: scale(.985); }
/* Ochilganda: kartalar cho'ntakdan chiqib, yelpig'ichdek yoyiladi */
.col.wallet.open .wl { margin-top: 22px; }
.col.wallet.open .wl-card { transform: translateY(var(--up)) rotate(var(--r)); transition-delay: calc(var(--k) * 70ms); box-shadow: 0 -10px 24px -6px rgba(5, 14, 34, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* Ostidan batafsil — patnis sirpanib chiqadi, ichidagilar navbat bilan paydo bo'ladi */
.wl-more { position: relative; z-index: 0; display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1), margin-top .55s cubic-bezier(.2, .8, .2, 1); }
/* Ochiq patnis hamyon ostiga kirib turadi; yopiqda — ustun balandligi kesilmasin */
.col.wallet.open .wl-more { grid-template-rows: 1fr; margin-top: -26px; }
.wl-more-in { min-height: 0; overflow: hidden; }
.wl-tray { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 12px; padding: 38px 10px 12px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, #dbe6f6 0%, #eef4fc 40%, #f5f8fd 100%);
  box-shadow: inset 0 14px 18px -14px rgba(11, 29, 63, .45); }
.wl-tray > * { min-width: 0; opacity: 0; transform: translateY(-12px) scale(.98); transition: opacity .25s, transform .3s; }
.col.wallet.open .wl-tray > * { opacity: 1; transform: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.col.wallet.open .wl-tray > :nth-child(1) { transition-delay: .18s; } .col.wallet.open .wl-tray > :nth-child(2) { transition-delay: .24s; }
.col.wallet.open .wl-tray > :nth-child(3) { transition-delay: .3s; } .col.wallet.open .wl-tray > :nth-child(4) { transition-delay: .36s; }
.col.wallet.open .wl-tray > :nth-child(5) { transition-delay: .42s; } .col.wallet.open .wl-tray > :nth-child(n+6) { transition-delay: .48s; }
/* Hamyon ichi: raqamli bo'limlar — 1 Reklama puli → 2 Voronka → 3 Lid sifati → 4 Oylik reja → 5 Nima qilish kerak */
.wt-sec { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.wt-sec h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.wt-sec h4 b { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; color: #fff; background: linear-gradient(135deg, #3b7ce6, #1d3f78); }
.wt-none, .wt-ok, .wt-note, .wt-key { margin: 0; font-size: 12.5px; color: var(--text-3); }
.wt-ok { color: #1d3f78; font-weight: 600; } .wt-note { color: var(--text-2); } .wt-note b { color: var(--text); }
/* Bo'lingan chiziq va izoh */
.wt-split { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; background: #eef2f8; }
.wt-split i { display: block; min-width: 6px; }
.wt-split .c0, .wt-legend .c0 { background: #2f6fd6; } .wt-split .c1, .wt-legend .c1 { background: #5b9cf0; } .wt-split .c2, .wt-legend .c2 { background: #0b2a5b; }
.wt-split .q-good, .wt-legend .q-good { background: #2f6fd6; } .wt-split .q-mid, .wt-legend .q-mid { background: #9cc3f5; } .wt-split .q-bad, .wt-legend .q-bad { background: var(--crit); }
.wt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.wt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wt-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wt-legend b { color: var(--text); font-weight: 700; } .wt-legend em { font-style: normal; color: var(--text-3); font-size: 11.5px; }
/* Bitta natija narxi — kichik kataklar */
.wt-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.wt-units span { display: grid; gap: 1px; padding: 7px 10px; border-radius: 12px; background: #f3f7fd; }
.wt-units small { font-size: 11px; color: var(--text-3); } .wt-units b { font-size: 14px; font-variant-numeric: tabular-nums; }
/* Voronka: torayib boradigan chiziqlar, orasida o'tish foizi */
.wt-fn { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
.wt-step { position: relative; width: var(--w); height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px; color: #fff; font-size: 13px; font-weight: 600; }
.wt-step > i { position: absolute; inset: 0; border-radius: 11px; background: #5b9cf0; }
.wt-step.s1 > i { background: #3b7ce6; } .wt-step.s2 > i { background: #1f4f9c; } .wt-step.s3 > i { background: #0b2a5b; }
.wt-step span, .wt-step b { position: relative; white-space: nowrap; } .wt-step b { font-variant-numeric: tabular-nums; }
.wt-rate { position: relative; height: 24px; display: grid; place-items: center; }
.wt-rate::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #d5e3f6; }
.wt-rate em { position: relative; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 99px; background: #eef4fd; color: #1d3f78; box-shadow: 0 0 0 2px #fff; }
.wt-rate.low em { background: var(--crit-bg); color: var(--crit); }
/* Oylik reja: chiziq va «bugungacha kerak edi» belgisi */
.wt-pl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; font-size: 13px; color: var(--text-2); }
.wt-pl b { color: var(--text); font-variant-numeric: tabular-nums; } .wt-pl.crit b { color: var(--crit); }
.wt-track { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: #eef2f8; }
.wt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #2f6fd6; }
.wt-pl.warn .wt-fill { background: #0b2a5b; } .wt-pl.crit .wt-fill { background: var(--crit); }
.wt-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: #0e1116; }
.wt-key { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .wt-key i { width: 2px; height: 11px; border-radius: 2px; background: #0e1116; }
/* Nima qilish kerak */
.wt-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wt-todo li { display: grid; gap: 2px; padding: 8px 10px 8px 13px; border-radius: 12px; background: #f3f7fd; box-shadow: inset 3px 0 0 #2f6fd6; font-size: 13px; font-weight: 600; color: var(--text); }
.wt-todo li.crit { background: var(--crit-bg); box-shadow: inset 3px 0 0 var(--crit); } .wt-todo li.warn { box-shadow: inset 3px 0 0 #0b2a5b; }
.wt-todo small { font-size: 12px; font-weight: 500; color: var(--text-2); }
/* Ochilganda: chiziqlar to'ladi, voronka bosqichlari birin-ketin kengayadi, foizlar «chiqib» keladi */
.wt-split i, .wt-fill { transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.col.wallet.open .wt-split i, .col.wallet.open .wt-fill { transform: none; transition-delay: .4s; }
.wt-step > i { transform: scaleX(.25); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.3, .64, 1), opacity .25s; }
.wt-step span, .wt-step b { opacity: 0; transition: opacity .3s; }
.col.wallet.open .wt-step > i { transform: none; opacity: 1; transition-delay: calc(.35s + var(--j) * .1s); }
.col.wallet.open .wt-step span, .col.wallet.open .wt-step b { opacity: 1; transition-delay: calc(.55s + var(--j) * .1s); }
.wt-rate em { transform: scale(.5); opacity: 0; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.col.wallet.open .wt-rate em { transform: none; opacity: 1; transition-delay: calc(.5s + var(--j) * .1s); }
.wt-mark { opacity: 0; transition: opacity .3s; } .col.wallet.open .wt-mark { opacity: 1; transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .wt-split i, .wt-fill, .wt-step > i, .wt-step span, .wt-step b, .wt-rate em, .wt-mark { transition: none !important; } }
.wl-go { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: 14px; background: #0e1116; color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background .2s; }
.wl-go:hover { background: #1d3f78; } .wl-go span { transition: transform .2s; } .wl-go:hover span { transform: translateX(3px); }
/* Sahifa ochilganda — kartalar yuqoridan hamyonga tushadi */
@keyframes wl-drop { from { opacity: 0; transform: translateY(-34px) rotate(var(--r)); } }
.mo-in .wl-card { animation: wl-drop .7s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(var(--mo-i, 0) * 60ms + var(--k) * 90ms + 120ms); }
@media (prefers-reduced-motion: reduce) { .wl-card, .wl-more, .wl-tray > *, .wl, .wl-pocket { transition: none !important; animation: none !important; } }

/* ---------- Kreativlar va izohlar: har loyiha — karta; tarix va pastki qator — bir uslubda ---------- */
details.tx, details.tx-like { margin-top: 6px; border-radius: 20px; background: #f6f8fc; border: 1px solid #e8eef7; }
details.history.tx-like { background: var(--surface-solid, #fff); border-color: transparent; }
details.tx > summary, details.tx-like > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; border-radius: 20px; transition: background .15s; }
details.tx > summary::-webkit-details-marker, details.tx-like > summary::-webkit-details-marker { display: none; }
details.tx-like > summary::before { display: none; }
details.tx > summary:hover, details.tx-like > summary:hover { background: rgba(47, 111, 214, .06); }
.tx-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #2f6fd6; background: #e8f0fc; }
.tx-ic svg { width: 19px; height: 19px; }
.tx-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tx-t b { font-size: 15px; color: var(--text); } .tx-t small { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.tx-n { flex: none; font-size: 13px; font-weight: 800; color: var(--text-3); padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #e3ebf7; font-variant-numeric: tabular-nums; }
.tx-n small { font-weight: 600; font-size: 11.5px; } .tx-n.on { color: #1d3f78; background: #e8f0fc; border-color: #d5e3f6; }
.tx-chev { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); background: #fff; border: 1px solid #e3ebf7; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
details[open] > summary .tx-chev { transform: rotate(180deg); color: #2f6fd6; }
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 2px 12px 12px; }
.tx-card { display: grid; gap: 10px; align-content: start; padding: 12px 14px 14px; border-radius: 16px; background: #fff; border: 1px solid #e8eef7; box-shadow: inset 0 3px 0 var(--pc), 0 1px 2px rgba(16, 24, 40, .04); }
details.tx[open] .tx-card { animation: mo-rise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.tx-card header { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tx-card header .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dc); }
.tx-card:not(.has) header::after { content: "bo'sh"; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3); }
.tx-f { display: grid; gap: 5px; }
.tx-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.tx-l i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.tx-f.good .tx-l i { background: #e8f0fc; color: #2f6fd6; } .tx-f.bad .tx-l i { background: var(--crit-bg); color: var(--crit); }
.tx-f.warn .tx-l i { background: #e6ebf3; color: #0b2a5b; } .tx-f.info .tx-l i { background: #e8f0fc; color: #1d3f78; }
.tx .cell-in.txt { width: 100%; min-width: 0; height: 40px; padding: 0 12px; text-align: left; font-size: 14px; border-radius: 12px; background: #f6f8fc; border: 1px solid #edf1f7; box-shadow: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.tx .cell-in.txt:focus { outline: none; background: #fff; border-color: #2f6fd6; box-shadow: 0 0 0 3px rgba(47, 111, 214, .14); }
.tx .cell-in.txt:not(:placeholder-shown) { background: #fff; border-color: #dbe4f1; }
.tx-f.good .cell-in.txt:not(:placeholder-shown) { box-shadow: inset 3px 0 0 #2f6fd6; } .tx-f.bad .cell-in.txt:not(:placeholder-shown) { box-shadow: inset 3px 0 0 var(--crit); }
.tx-f.warn .cell-in.txt:not(:placeholder-shown) { box-shadow: inset 3px 0 0 #0b2a5b; }
.ro-mode .tx .cell-in.txt { background: transparent; border-color: transparent; padding: 0; height: auto; }
/* Pastki qator: izoh chapda, tugmalar o'ngda — yumshoq panelda */
.step-foot { border-top: 0; margin-top: 4px; padding: 10px 10px 10px 16px; border-radius: 18px; background: #f6f8fc; border: 1px solid #e8eef7; }
.sf-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.sf-hint i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #b3bccb; padding: 2px 8px; border-radius: 7px; background: #fff; border: 1px solid #e3e8f0; }
@media (max-width: 640px) { .tx-grid { grid-template-columns: minmax(0, 1fr); padding: 2px 8px 8px; } .tx-n small { display: none; } details.tx > summary, details.tx-like > summary { padding: 10px; } }
details.rsn-tx { margin-top: 10px; }
details.rsn-tx > .reasons-in { padding: 2px 12px 12px; }

/* ---------- Dinamika: 1 Umumiy natija → 2 Kunma-kun → 3 Loyihalar bo'yicha → Batafsil ---------- */
.dy { display: grid; gap: 16px; }
.dy-sec { display: grid; gap: 14px; }
.dy-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dy-tile { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #f6f8fc; border: 1px solid #e8eef7; overflow: hidden; }
.dy-tile::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #9cc3f5; }
.dy-tile.sales::before { background: #5b9cf0; } .dy-tile.revenue::before { background: #2f6fd6; } .dy-tile.net_profit::before { background: #0b2a5b; } .dy-tile.neg::before { background: var(--crit); }
.dy-tile small { font-size: 12px; font-weight: 700; color: var(--text-2); }
.dy-tile b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dy-tile b i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.dy-tile.neg b { color: var(--crit); }
.dy-tile > span { font-size: 12px; color: var(--text-3); }
.dy-tile em { font-style: normal; font-weight: 800; color: var(--text-2); } .dy-tile em.up { color: #2f6fd6; } .dy-tile em.down { color: var(--crit); }
.dy-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dy-facts li { padding: 7px 12px 7px 26px; border-radius: 12px; background: #f3f7fd; font-size: 13px; color: var(--text-2); position: relative; }
.dy-facts li::before { content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #9cb0cc; }
.dy-facts li.up::before { background: #2f6fd6; } .dy-facts li.down { background: var(--crit-bg); } .dy-facts li.down::before { background: var(--crit); }
.dy-facts b { color: var(--text); }
/* Ustunli grafik: ustun — tushum, chiziqcha — xarajat */
.dy-chart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; align-items: end; height: 240px; padding: 6px 4px 0; }
.dy-chart.many { gap: 3px; }
.dy-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 6px; min-width: 0; text-align: center; }
.dy-net { font-style: normal; font-size: 11.5px; font-weight: 800; color: #1d3f78; font-variant-numeric: tabular-nums; }
.dy-col.loss .dy-net { color: var(--crit); }
.dy-bars { position: relative; border-radius: 10px 10px 4px 4px; background: linear-gradient(#f3f6fb, #f3f6fb) bottom / 100% 100% no-repeat; }
.dy-bars .rev { position: absolute; left: 14%; right: 14%; bottom: 0; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, #5b9cf0, #2f6fd6); transform-origin: bottom; }
.dy-chart.many .dy-bars .rev { left: 6%; right: 6%; border-radius: 4px 4px 2px 2px; }
.dy-col.loss .dy-bars .rev { background: linear-gradient(180deg, #f2a3a6, var(--crit)); }
.dy-bars .cost { position: absolute; left: 4%; right: 4%; height: 3px; margin-bottom: -1.5px; border-radius: 3px; background: #0e1116; }
.dy-l { font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.1; }
.dy-l small { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.dy-chart.many .dy-l small { display: none; } .dy-chart.many .dy-l { font-size: 9.5px; }
.dy-col.future .dy-l, .dy-col.none .dy-l { color: var(--text-3); }
.dy-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); }
.dy-key span { display: inline-flex; align-items: center; gap: 6px; }
.dy-key i { width: 12px; height: 12px; border-radius: 4px; } .dy-key i.rev { background: #2f6fd6; } .dy-key i.cost { height: 3px; background: #0e1116; } .dy-key i.loss { background: var(--crit); }
/* Jonlanish: ustunlar pastdan o'sadi */
@keyframes dy-grow { from { transform: scaleY(0); } }
.dy-bars .rev { animation: dy-grow .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms + .15s); }
.dy-bars .cost { animation: mo-rise .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 45ms + .55s); }
/* Loyiha jadvali: har qator — bitta kun; ustunlar — reklama → sotuv → tushum → foyda */
.dy-projs { display: grid; gap: 10px; }
details.dy-proj { border-radius: 18px; border: 1px solid #e8eef7; background: #fff; box-shadow: inset 0 3px 0 var(--pc); overflow: hidden; }
details.dy-proj > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
details.dy-proj > summary::-webkit-details-marker { display: none; }
details.dy-proj > summary > b { font-size: 16px; }
details.dy-proj > summary .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dc); }
.dy-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.dy-chips > span { font-size: 12px; color: var(--text-3); padding: 4px 10px; border-radius: 999px; background: #f3f7fd; }
.dy-chips b { color: var(--text); font-variant-numeric: tabular-nums; } .dy-chips .neg b { color: var(--crit); } .dy-chips .pos b { color: #1d3f78; }
details.dy-proj > summary .tx-chev, details.dy-more > summary .tx-chev { font-size: 18px; font-weight: 700; transition: transform .3s; }
details.dy-proj[open] > summary .tx-chev, details.dy-more[open] > summary .tx-chev { transform: rotate(90deg); }
.dy-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.dy-t th, .dy-t td { padding: 9px 14px; border-top: 1px solid #eef2f8; text-align: left; font-weight: 500; }
.dy-t thead th { border-top: 0; padding-top: 4px; vertical-align: bottom; }
.dy-t thead th b { display: block; font-size: 12.5px; color: var(--text); } .dy-t thead th small { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; }
.dy-t tbody th { font-weight: 800; color: var(--text); white-space: nowrap; }
.dy-t tbody th small { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--text-3); }
.dy-t .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dy-t td.dy-rev { position: relative; min-width: 150px; }
.dy-t td.dy-rev span { position: relative; z-index: 1; font-weight: 700; }
.dy-t td.dy-rev i { position: absolute; right: 14px; bottom: 5px; height: 4px; border-radius: 3px; background: #9cc3f5; max-width: calc(100% - 28px); }
.dy-net-c { font-weight: 800; } .dy-net-c.pos { color: #1d3f78; } .dy-net-c.neg { color: var(--crit); background: var(--crit-bg); }
.dy-t tr.dy-sum th, .dy-t tr.dy-sum td { background: #f3f7fd; font-weight: 800; border-top: 1px solid #dbe4f1; }
.dy-t tr.future th, .dy-t tr.none th { color: var(--text-3); }
.dy-empty { color: var(--text-3); font-size: 12.5px; text-align: center !important; }
.dy-cal + .dy-cal { margin-top: 14px; }
details.dy-more { padding: 0; }
details.dy-more > .table-wrap { padding: 0 14px 14px; }
@media (max-width: 900px) { .dy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dy-chips { margin-left: 0; width: 100%; } }
@media (max-width: 640px) {
  .dy-tile b { font-size: 18px; } .dy-tile b i { display: none; } .dy-tile { padding: 12px 12px 12px 14px; } .dy-chart { height: 200px; gap: 5px; } .dy-net { font-size: 10px; }
  /* Telefonda jadval — har kun bitta kartochka: tepada kun va foyda, ostida reklama · sotuv · tushum */
  .dy-t thead { display: none; }
  .dy-t, .dy-t tbody { display: block; }
  .dy-t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "day day net" "ad sl rev"; gap: 4px 10px; padding: 10px 12px; border-top: 1px solid #eef2f8; }
  .dy-t th, .dy-t td { border: 0; padding: 0; background: none; }
  .dy-t tbody th { grid-area: day; align-self: center; }
  .dy-t td[data-l="Reklama"] { grid-area: ad; } .dy-t td[data-l="Sotuv"] { grid-area: sl; } .dy-t td.dy-rev { grid-area: rev; min-width: 0; }
  .dy-t td.dy-net-c { grid-area: net; align-self: center; } .dy-t td.dy-net-c.neg { background: none; }
  .dy-t td { text-align: left !important; font-size: 13px; }
  .dy-t td.dy-net-c { text-align: right !important; }
  .dy-t td[data-l]:not(.dy-net-c)::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
  .dy-t td.dy-rev i { left: 0; right: auto; bottom: -5px; max-width: 100%; }
  .dy-t tr.dy-sum { background: #f3f7fd; } .dy-t tr.dy-sum th, .dy-t tr.dy-sum td { border: 0; background: none; }
  .dy-t .dy-empty { grid-column: 1 / -1; text-align: left !important; }
}
@media (prefers-reduced-motion: reduce) { .dy-bars .rev, .dy-bars .cost { animation: none; } }

/* ---------- Sarlavha shrifti: sahifa va bo'lim sarlavhalari, loyiha nomlari, katta raqamlar ----------
   Faktum (pullik) — fayli qo'shilsa avtomatik ishlaydi; hozircha unga eng o'xshash bepul Albert Sans.
   Mayda yozuvlar, jadvallar, tugmalar — asosiy shriftda qoladi */
:root { --font-display: "Faktum", "Albert Sans", var(--font); }
h1, h2, h3,
.wl-id h2, .pc-name, .pa-id b, .dv-card > header > b, .tx-card header b, details.dy-proj > summary > b, .wt-head b, .dp-head b, .lb-name > b,
.hdr-logo b, .logo > span, .as-ttl b, .as-hero h3, .tx-t b, .wt-sec h4,
.kpi .value, .kp-big, .wl-sum b, .wl-card > b, .dy-tile b, .ps-m b, .dv-num b, .m-hero b, #totals b, .oh-score {
  font-family: var(--font-display);
}
h1 { letter-spacing: -.025em; } h2 { letter-spacing: -.015em; }
.wl-id h2, .pa-id b, .dv-card > header > b, details.dy-proj > summary > b { letter-spacing: -.01em; }
.kpi .value, .kp-big, .wl-sum b, .dy-tile b { letter-spacing: -.02em; }

/* ---------- Hamyonni sudrash: qator bo'ylab yumshoq suzadi, faqat soya bilan ko'tariladi ---------- */
.board { position: relative; padding-top: 16px; padding-bottom: 56px; margin-top: -16px; margin-bottom: -56px; }
.board.is-dragging { scroll-snap-type: none; user-select: none; -webkit-user-select: none; cursor: grabbing; }
.board.is-dragging * { cursor: grabbing !important; }
.col.wallet.dragging { position: relative; z-index: 30; will-change: transform; transition: none !important; animation: none !important; }
.col.wallet .wl::before { transition: box-shadow .3s ease; }
.col.wallet.dragging .wl::before { box-shadow: 0 26px 44px -24px rgba(11, 29, 63, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
/* Uya — yumshoq, chiziqsiz; hamyon uzoqlashgan sari ko'rinadi */
.drag-slot { position: absolute; z-index: 0; border-radius: 30px; pointer-events: none; opacity: 0;
  background: rgba(47, 111, 214, .06); box-shadow: inset 0 0 0 1.5px rgba(47, 111, 214, .14);
  transition: left .32s cubic-bezier(.22, .8, .24, 1), top .32s cubic-bezier(.22, .8, .24, 1), height .3s, opacity .2s; }
.drag-slot.out { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .drag-slot { transition: none; } }

/* Davr oralig'i (14.06.26 — 10.11.26) — ko'k fon ustida ham aniq o'qiladi: oq tabletka, to'q ko'k raqam */
.period-span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: #1d3f78; background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(11, 42, 91, .08), inset 0 0 0 1px rgba(255, 255, 255, .6); }

/* O'ngdagi panel pastidagi tugmalar: sig'masa — keyingi qatorga o'tadi, yozuv kesilmaydi */
.drawer-foot { flex-wrap: wrap; }
.drawer-foot .btn, .drawer-foot .btn.primary { flex: 1 1 auto; justify-content: center; min-height: 48px; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }

/* ---------- Hisobot yuborilgan: holat → direktor javobi → kun natijasi → loyihalar → xato bo'lsa ---------- */
.dn { display: grid; gap: 16px; padding: 24px; }
.dn-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dn-badge { flex: none; position: relative; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #3b7ce6, #1d3f78); box-shadow: 0 10px 24px -8px rgba(29, 63, 120, .55); }
.dn-badge svg { width: 30px; height: 30px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: dn-draw .5s .25s cubic-bezier(.3, .8, .3, 1) forwards; }
.dn-badge::after { content: ''; position: absolute; inset: -6px; border-radius: 24px; border: 2px solid rgba(91, 156, 240, .5); opacity: 0; animation: dn-ring 1.2s .5s ease-out; }
@keyframes dn-draw { to { stroke-dashoffset: 0; } }
@keyframes dn-ring { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.dn-t { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.dn-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #2f6fd6; }
.dn-t h2 { margin: 0; font-size: 24px; }
.dn-t p { margin: 0; font-size: 13.5px; color: var(--text-3); }
.dn-state { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #eef4fd; color: #1d3f78; }
.dn-state i { width: 8px; height: 8px; border-radius: 50%; background: #2f6fd6; }
.dn-state.wait { background: #f3f5f9; color: var(--text-2); } .dn-state.wait i { background: #9cb0cc; animation: as-live 2s infinite; }
/* Direktor javobi — suhbat pufagi */
.dn-reply { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: #f3f7fd; border: 1px solid #e3ebf7; }
.dn-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: #0e1116; }
.dn-reply small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2f6fd6; }
.dn-reply p { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.45; }
/* Kun natijasi — 5 ta katak, oxirgisi (sof foyda) ajralib turadi */
.dn-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px; }
.dn-n { display: grid; gap: 3px; align-content: start; padding: 14px 16px; border-radius: 18px; background: #f6f8fc; border: 1px solid #e8eef7; animation: mo-rise .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 60ms + .1s); }
.dn-n small { font-size: 12px; font-weight: 700; color: var(--text-2); }
.dn-n b { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.dn-n b i { font-style: normal; color: var(--text-3); font-weight: 600; }
.dn-n > span { font-size: 11.5px; color: var(--text-3); }
.dn-n.pos { background: linear-gradient(135deg, #2f6fd6, #1d3f78); border-color: transparent; color: #fff; }
.dn-n.pos small, .dn-n.pos > span { color: rgba(255, 255, 255, .78); }
.dn-n.neg { background: var(--crit-bg); border-color: transparent; } .dn-n.neg b { color: var(--crit); }
/* Loyihalar bo'yicha — ixcham jadval */
.dn-proj { display: grid; border-radius: 16px; border: 1px solid #e8eef7; overflow: hidden; }
.dn-ph, .dn-pr { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 10px 16px; }
.dn-ph { background: #f6f8fc; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.dn-ph span:not(:first-child), .dn-pr span { text-align: right; }
.dn-pr { border-top: 1px solid #eef2f8; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dn-pr b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); }
.dn-pr .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }
.dn-pr .pos { color: #1d3f78; font-weight: 700; } .dn-pr .neg { color: var(--crit); font-weight: 700; }
/* Xato bo'lsa nima qilish — izoh va tugmalar bitta panelda */
.dn-act { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 12px 12px 16px; border-radius: 18px; background: #f6f8fc; border: 1px solid #e8eef7; }
.dn-act-t { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.dn-act-t b { font-size: 14px; } .dn-act-t small { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.dn-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-next { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.dn-next svg { width: 15px; height: 15px; flex: none; color: #2f6fd6; }
@media (max-width: 900px) { .dn-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dn-n.pos, .dn-n.neg { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .dn { padding: 18px 16px; }
  .dn-ph { display: none; }
  .dn-pr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "nm nm net" "ad sl rev"; gap: 6px 10px; }
  .dn-pr b { grid-area: nm; } .dn-pr span[data-l="Foyda"] { grid-area: net; text-align: right; }
  .dn-pr span[data-l="Reklama"] { grid-area: ad; } .dn-pr span[data-l="Sotuv"] { grid-area: sl; } .dn-pr span[data-l="Tushum"] { grid-area: rev; }
  .dn-pr span:not([data-l="Foyda"]) { text-align: left; } .dn-pr span:not([data-l="Foyda"])::before { content: attr(data-l); display: block; font-size: 10.5px; color: var(--text-3); font-weight: 600; }
  .dn-btns, .dn-btns .btn { width: 100%; justify-content: center; } .dn-btns .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .dn-badge svg { animation: none; stroke-dashoffset: 0; } .dn-badge::after, .dn-n { animation: none; } }

/* ---------- Perfo brend logotipi (brend qo'llanmasi): belgi + «perfo» (Space Grotesk Bold) ---------- */
/* O'lchamlar qo'llanmadan: belgi balandligi = 3,46 M; belgi va yozuv orasi 1,25 M (0,36); yozuv qutisi 0,803 (x-balandlik 1,5 M) */
.brand { --bh: 32px; display: inline-flex; align-items: center; gap: calc(var(--bh) * .361); color: #0B1C42; line-height: 1; text-decoration: none; }
.brand-mark { height: var(--bh); width: auto; flex: none; display: block; }
.brand-word { height: calc(var(--bh) * .803); width: auto; flex: none; display: block; }
/* Ko'k fonda: chap kataklar oq, o'ngdagilar — och ko'k; to'q fonda — muz va shabnam */
.brand.on-blue { --bm1: #fff; --bm2: #A9CBF7; --bm3: #fff; --bm4: #D6E5FB; --bm5: #fff; color: #fff; }
.brand.on-dark { --bm1: #fff; --bm2: #6FA6F0; --bm3: #fff; --bm4: #A9CBF7; --bm5: #fff; color: #fff; }
a.logo, a.logo:hover { text-decoration: none; }
.logo .brand { --bh: 34px; }
.mobile-top .brand { --bh: 26px; }
.login-logo .brand { --bh: 40px; }
.sidebar .logo .brand { --bh: 30px; }
/* Logo ustiga sichqoncha kelsa — kataklar bir zum to'lqinlanadi (shakli o'zgarmaydi) */
.brand-mark path { transform-box: fill-box; transform-origin: center; }
a:hover > .brand .brand-mark path { animation: br-wave .5s ease-out; }
a:hover > .brand .brand-mark .bc2 { animation-delay: .05s; } a:hover > .brand .brand-mark .bc3 { animation-delay: .1s; }
a:hover > .brand .brand-mark .bc4 { animation-delay: .15s; } a:hover > .brand .brand-mark .bc5 { animation-delay: .2s; }
@keyframes br-wave { 40% { opacity: .55; } }

/* ---------- Kirish animatsiyasi: ilova belgisi sakrab chiqadi → kataklar tushadi → nur, halqalar, uchqunlar → «perfo» → yo'qoladi ----------
   Vaqtlar ovoz bilan bir xil (sound.js): «shuv» 0–0,5 s, «tup» 0,33 s, kataklar 0,66 + 0,1 × n, akkord 1,15 s */
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 44%, #ffffff 0%, #f1f5fc 52%, #e2eaf7 100%); transition: opacity .55s ease, visibility .55s; }
#splash::before { content: ''; position: absolute; left: 50%; top: 44%; width: 520px; height: 520px; margin: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 120, 236, .22), rgba(58, 120, 236, 0) 62%); opacity: 0; animation: sp-glow 1.6s ease-out .2s forwards; }
@keyframes sp-glow { 40% { opacity: 1; } 100% { opacity: .55; } }
#splash.enter { animation: sp-fadein .22s ease both; }
@keyframes sp-fadein { from { opacity: 0; } }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-stage { transform: scale(1.14); filter: blur(6px); }
.sp-stage { position: relative; display: grid; justify-items: center; gap: 26px; transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s; }
.sp-wrap { --s: 132px; position: relative; width: var(--s); height: var(--s); }
/* Ilova belgisi: ko'k gradientli kvadrat — pastdan sakrab, xira holdan aniq bo'ladi; akkordda bir «uradi» */
.sp-icon { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22.5%; overflow: hidden;
  background: linear-gradient(135deg, #3A78EC 0%, #1F4FC0 100%); box-shadow: 0 26px 50px -20px rgba(31, 79, 192, .6), 0 10px 22px -12px rgba(31, 79, 192, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: sp-pop .66s cubic-bezier(.34, 1.56, .64, 1) both, sp-beat .5s cubic-bezier(.3, 1.6, .5, 1) 1.15s; }
@keyframes sp-pop { 0% { opacity: 0; transform: translateY(46px) scale(.3); filter: blur(8px); } 50% { opacity: 1; filter: blur(0); } 100% { transform: none; } }
@keyframes sp-beat { 40% { transform: scale(1.09); } 100% { transform: none; } }
/* Belgi: oq kataklar birin-ketin yuqoridan tushib, yerga tekkanda sal yassilanadi */
.sp-mark { height: calc(var(--s) * .46); width: calc(var(--s) * .46 * 223 / 346); display: block; overflow: visible; --bm1: #fff; --bm2: #A9CBF7; --bm3: #fff; --bm4: #D6E5FB; --bm5: #fff; }
.sp-mark path { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: sp-cell .5s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.sp-mark .bc1 { animation-delay: .45s; } .sp-mark .bc2 { animation-delay: .55s; } .sp-mark .bc3 { animation-delay: .65s; }
.sp-mark .bc4 { animation-delay: .75s; } .sp-mark .bc5 { animation-delay: .85s; }
@keyframes sp-cell { 0% { opacity: 0; transform: translateY(-160%) scale(.55); } 42% { opacity: 1; transform: translateY(6%) scale(1.1, .86); }
  68% { transform: translateY(-4%) scale(.96, 1.05); } 100% { opacity: 1; transform: none; } }
/* Nur — belgi ustidan qiyshiq yorug'lik o'tadi */
.sp-shine { position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translateX(-130%); animation: sp-shine .85s cubic-bezier(.4, 0, .2, 1) 1.15s forwards; pointer-events: none; }
@keyframes sp-shine { to { transform: translateX(130%); } }
/* Halqalar — belgi shaklida tashqariga tarqaladi */
.sp-rings i { position: absolute; inset: 0; border-radius: 26%; border: 2px solid rgba(47, 111, 214, .5); opacity: 0; animation: sp-ring 1.2s cubic-bezier(.2, .8, .2, 1) 1.15s forwards; }
.sp-rings i + i { border-color: rgba(141, 186, 243, .7); animation-delay: 1.32s; }
@keyframes sp-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
/* Uchqunlar — kichik kataklar (belgining o'z shaklidan) har tomonga sochiladi */
.sp-burst i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 4px; background: var(--c); opacity: 0;
  animation: sp-spark 1s cubic-bezier(.15, .75, .3, 1) calc(1.15s + var(--j) * 12ms) forwards; }
.sp-burst i:nth-child(odd) { border-radius: 4px 11px 4px 4px; }
@keyframes sp-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(40px) scale(1); } 70% { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(90deg) scale(.35); } }
/* «perfo» — belgi ostida pastdan chiqadi */
.sp-word { height: 34px; width: auto; color: #0B1C42; opacity: 0; animation: sp-up .55s cubic-bezier(.2, .8, .2, 1) 1.35s forwards; }
@keyframes sp-up { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 640px) { .sp-wrap { --s: 108px; } .sp-word { height: 28px; } .sp-burst i { width: 11px; height: 11px; margin: -5.5px; } }
@media (prefers-reduced-motion: reduce) {
  #splash::before, .sp-icon, .sp-mark path, .sp-word { animation: none; opacity: 1; }
  .sp-shine, .sp-rings, .sp-burst { display: none; }
}

/* Profil → Kirish ovozi */
.snd-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.snd-row > span { flex: 1; display: grid; gap: 2px; } .snd-row small { color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
.snd-row input { position: absolute; opacity: 0; pointer-events: none; }
.snd-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 99px; background: #dce3ee; transition: background .2s; }
.snd-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 28, 66, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.snd-row input:checked + .snd-sw { background: #2B63D9; } .snd-row input:checked + .snd-sw::after { transform: translateX(18px); }
.snd-row input:focus-visible + .snd-sw { box-shadow: 0 0 0 3px rgba(47, 111, 214, .3); }

/* ---------- Uchqun Yordamchi — Apple uslubi: xira shisha, iOS guruhlangan ro'yxat, iMessage xabarlari ---------- */
.as-panel { --ap-bg: rgba(242, 242, 247, .94); --ap-bar: rgba(249, 249, 251, .8); --ap-sep: rgba(60, 60, 67, .16); --ap-l2: rgba(60, 60, 67, .6); --ap-l3: rgba(60, 60, 67, .3);
  --ap-fill: rgba(118, 118, 128, .12); --ap-blue: #2B63D9; --ap-tint: rgba(43, 99, 217, .1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: var(--ap-bg); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0; border-radius: 24px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 30px 80px -24px rgba(0, 0, 0, .38), 0 8px 24px -12px rgba(0, 0, 0, .18);
  animation: ap-in .32s cubic-bezier(.2, .9, .3, 1.05); }
@keyframes ap-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.as-panel .as-ttl b, .as-panel .as-hero h3, .as-panel .as-tour, .as-panel .as-a { font-family: inherit; }
/* Sarlavha — shaffof navigatsiya qatori */
.as-panel .as-head { gap: 10px; padding: 11px 12px 11px 14px; color: #000; background: var(--ap-bar); border-bottom: .5px solid var(--ap-sep);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.as-panel .as-head::after { display: none; }
.as-panel .as-orb { width: 34px; height: 34px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #3A78EC, #1F4FC0); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35); }
.as-panel .as-orb svg { width: 19px; height: 19px; }
.as-panel .as-ttl b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #000; }
.as-panel .as-ttl small { font-size: 12px; color: var(--ap-l2); gap: 5px; }
.as-panel .as-live { width: 6px; height: 6px; background: var(--ap-blue); box-shadow: none; animation: none; }
.as-panel .as-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--ap-fill); color: var(--ap-l2); }
.as-panel .as-ic svg { width: 15px; height: 15px; stroke-width: 2.4; }
.as-panel .as-ic:hover { background: rgba(118, 118, 128, .2); color: #3c3c43; }
.as-panel .as-ic:active { transform: scale(.92); }
/* Tana: fon — panelning o'zi; ingichka o'tkinchi aylantirgich */
.as-panel .as-body { background: transparent; padding: 18px 16px 16px; gap: 12px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .18) transparent; }
.as-panel .as-body::-webkit-scrollbar { width: 6px; } .as-panel .as-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; }
.as-panel .as-body::-webkit-scrollbar-track { background: transparent; }
/* Salomlashuv — markazda, ilova belgisi kabi */
.as-panel .as-hello { gap: 16px; }
.as-panel .as-hero { flex-direction: column; text-align: center; gap: 10px; padding: 6px 12px 2px; background: none; border: 0; box-shadow: none; }
.as-panel .as-hero-orb { width: 62px; height: 62px; border-radius: 15px; background: linear-gradient(135deg, #3A78EC, #1F4FC0); box-shadow: 0 12px 26px -12px rgba(31, 79, 192, .55), inset 0 .5px 0 rgba(255, 255, 255, .35); }
.as-panel .as-hero-orb svg { width: 32px; height: 32px; }
.as-panel .as-hero h3 { font-size: 22px; font-weight: 700; letter-spacing: -.022em; color: #000; }
.as-panel .as-hero p { margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: var(--ap-l2); max-width: 300px; margin-inline: auto; }
/* 3 qadam — bitta oq guruhda, ingichka ajratgichlar bilan */
.as-panel .as-how { gap: 0; background: #fff; border-radius: 12px; overflow: hidden; }
.as-panel .as-how li { background: none; border-radius: 0; padding: 11px 6px; gap: 6px; font-size: 12px; font-weight: 500; color: #1c1c1e; }
.as-panel .as-how li + li { box-shadow: inset .5px 0 0 var(--ap-sep); }
.as-panel .as-how b { width: 24px; height: 24px; background: var(--ap-tint); color: var(--ap-blue); font-size: 12.5px; font-weight: 700; }
/* «Ko'p so'raladi» — iOS sozlamalaridagi guruhlangan ro'yxat */
.as-panel .as-cards { gap: 0; }
.as-panel .as-cap { margin: 4px 16px 7px; font-size: 12.5px; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; color: var(--ap-l2); }
.as-panel .as-card { position: relative; gap: 12px; min-height: 46px; padding: 9px 12px 9px 12px; border: 0; border-radius: 0; background: #fff; box-shadow: none; transition: background .12s; }
.as-panel .as-card:hover { background: #fafafc; border: 0; box-shadow: none; transform: none; }
.as-panel .as-card:active { background: #e5e5ea; transform: none; }
.as-panel .as-cap + .as-card, .as-panel .as-cards > .as-card:first-child { border-radius: 12px 12px 0 0; }
.as-panel .as-cards > .as-card:last-child { border-radius: 0 0 12px 12px; }
.as-panel .as-cap + .as-card:last-child, .as-panel .as-cards > .as-card:only-child { border-radius: 12px; }
.as-panel .as-card + .as-card::before { content: ''; position: absolute; top: 0; left: 54px; right: 0; height: .5px; background: var(--ap-sep); }
.as-panel .as-card-ic { width: 30px; height: 30px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #3A78EC, #1F4FC0); }
.as-panel .as-card-ic svg { width: 16px; height: 16px; stroke-width: 2.2; }
.as-panel .as-card-t { font-size: 15px; font-weight: 400; line-height: 1.3; color: #000; letter-spacing: -.01em; }
.as-panel .as-card > svg { width: 14px; height: 14px; color: var(--ap-l3); transition: none; }
.as-panel .as-card:hover > svg { color: var(--ap-l3); transform: none; }
/* Xabarlar — iMessage */
.as-panel .as-u { padding: 8px 13px; border-radius: 18px 18px 5px 18px; background: var(--ap-blue); font-size: 15px; line-height: 1.38; box-shadow: none; max-width: 78%; animation: ap-msg .28s cubic-bezier(.2, .9, .3, 1.1); }
.as-panel .as-row { gap: 8px; align-items: flex-end; animation: ap-msg .3s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes ap-msg { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.as-panel .as-mini { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; background: linear-gradient(135deg, #3A78EC, #1F4FC0); }
.as-panel .as-mini svg { width: 15px; height: 15px; }
.as-panel .as-b { padding: 12px 14px; gap: 10px; border: 0; border-radius: 18px 18px 18px 5px; background: #fff; box-shadow: 0 .5px 1px rgba(0, 0, 0, .06); font-size: 15px; }
.as-panel .as-a { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #000; }
.as-panel .as-steps li { gap: 10px; padding-bottom: 10px; }
.as-panel .as-steps li:not(:last-child)::before { top: 26px; left: 11px; width: .5px; background: var(--ap-sep); }
.as-panel .as-n { width: 22px; height: 22px; background: var(--ap-tint); color: var(--ap-blue); box-shadow: none; font-size: 12px; font-weight: 700; }
.as-panel .as-steps p { margin-top: 1px; font-size: 14.5px; line-height: 1.38; color: #1c1c1e; }
.as-panel .as-go { margin-top: 3px; padding: 0; border-radius: 0; background: none; color: var(--ap-blue); font-size: 13.5px; font-weight: 600; }
.as-panel .as-go::after { content: '›'; margin-left: 3px; font-size: 16px; line-height: 0; }
.as-panel .as-go:hover { background: none; opacity: .7; }
/* «Ekranda ko'rsat» — iOS to'ldirilgan tugmasi */
.as-panel .as-tour { justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--ap-blue); box-shadow: none; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.as-panel .as-tour:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.as-panel .as-tour:active { transform: scale(.98); filter: brightness(.95); }
.as-panel .as-play { width: auto; height: auto; background: none; }
.as-panel .as-play svg { width: 14px; height: 14px; }
.as-panel .as-tour small { margin-left: 2px; font-size: 13px; font-weight: 500; opacity: .7; }
.as-panel .as-tip { padding: 10px 12px; border-radius: 12px; background: rgba(118, 118, 128, .08); box-shadow: none; font-size: 13.5px; color: #3c3c43; }
.as-panel .as-tip span { color: var(--ap-blue); }
.as-panel .as-sug { gap: 6px; }
.as-panel .as-sug button { border: 0; border-radius: 999px; padding: 7px 13px; background: var(--ap-tint); color: var(--ap-blue); font-size: 14px; font-weight: 500; }
.as-panel .as-sug button:hover { background: rgba(43, 99, 217, .16); border: 0; }
.as-panel .as-b .as-cards .as-card { min-height: 42px; padding: 8px 10px; }
.as-panel .as-b .as-cards .as-card + .as-card::before { left: 48px; }
.as-panel .as-b .as-cards { border-radius: 12px; box-shadow: 0 0 0 .5px var(--ap-sep); }
/* «Yozyapti…» — iMessage uch nuqtasi */
.as-panel .as-typing { flex: none; padding: 12px 14px; gap: 0; background: #e9e9eb; box-shadow: none; }
.as-panel .as-dots { gap: 5px; } .as-panel .as-dots i { width: 8px; height: 8px; background: rgba(60, 60, 67, .45); animation: ap-dot 1.2s infinite ease-in-out; }
.as-panel .as-dots i:nth-child(2) { animation-delay: .18s; } .as-panel .as-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ap-dot { 0%, 60%, 100% { opacity: .35; transform: scale(.85); } 30% { opacity: 1; transform: scale(1); } }
.as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Yozish maydoni — iMessage kapsulasi */
.as-panel .as-form { gap: 5px; padding: 9px 12px 9px; background: var(--ap-bar); border-top: .5px solid var(--ap-sep); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.as-panel .as-field { padding: 3px 3px 3px 14px; border: .5px solid rgba(60, 60, 67, .29); border-radius: 20px; background: #fff; box-shadow: none; }
.as-panel .as-field:focus-within { border-color: rgba(43, 99, 217, .6); box-shadow: 0 0 0 3px rgba(43, 99, 217, .12); }
.as-panel .as-field textarea { min-height: 30px; padding: 5px 0 !important; font-size: 15px !important; }
.as-panel .as-field textarea::placeholder { color: rgba(60, 60, 67, .3); }
.as-panel .as-send { width: 30px; height: 30px; background: rgba(118, 118, 128, .24); box-shadow: none; transition: background .18s, transform .18s; }
.as-panel .as-send.on { background: var(--ap-blue); }
.as-panel .as-send svg { width: 16px; height: 16px; stroke-width: 2.6; }
.as-panel .as-send:hover { transform: none; } .as-panel .as-send.on:active { transform: scale(.9); }
.as-panel .as-note { font-size: 11px; color: rgba(60, 60, 67, .45); }
/* Telefonda — iOS pastki varaq: pastga yopishgan, tepasida tutqich */
@media (max-width: 860px) {
  .as-panel { left: 0; right: 0; bottom: 0; width: auto; height: min(86vh, 700px); border-radius: 22px 22px 0 0; animation: ap-sheet .38s cubic-bezier(.2, .9, .3, 1); }
  @keyframes ap-sheet { from { transform: translateY(100%); } }
  .as-panel .as-head { padding-top: 18px; position: relative; }
  .as-panel .as-head::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(60, 60, 67, .3); }
  .as-panel .as-form { padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .as-panel, .as-panel .as-u, .as-panel .as-row { animation: none; } }