/* 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; }
.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 > span:not(.logo-mark) { 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; }
.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: 60; 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: 60; 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; }
.proj-card { display: grid; gap: 12px; }
/* 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; }
/* 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 { opacity: .85; box-shadow: 0 16px 36px rgba(16, 24, 40, .18); transform: scale(1.01); 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; } }