/* Platform page: the app shell. Loads after lidra.css and reuses its tokens.
   This is product UI, so the craft is information density, not display type. */

:root{
  --app-side:248px;
  --ui:14px;          /* the app's base size - deliberately smaller than the page */
  --ui-sm:12.5px;
  --ui-xs:11px;
}

/* ---------- page head ---------- */
.p-hero{padding-top:clamp(34px,4.5vw,64px);padding-bottom:clamp(26px,3vw,44px)}
.p-hero .lead{max-width:56ch}
.p-note{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.87rem;color:var(--ink-3)}
.p-note span{display:flex;align-items:center;gap:8px}
.p-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:var(--app-side) minmax(0,1fr);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(11,27,51,.5);min-height:660px}

/* sidebar - dark, so the mockup reads as an application and not as more page */
.side{background:var(--night-2);padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.who{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.av{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:14px}
.who b{display:block;font-size:var(--ui);color:#fff;line-height:1.25}
.who i{font-style:normal;font-size:var(--ui-xs);color:#8AA3C4}
.snavs{display:flex;flex-direction:column;gap:2px}
/* guruh sarlavhasi - sakkizta tekis tugma o'rniga uchta o'qiladigan blok */
.sgrp{margin:15px 0 5px;padding:0 11px;font-size:.65rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.sgrp:first-child{margin-top:2px}
.snav{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#B4C6DD;
  font-family:var(--body);font-size:var(--ui);
  transition:background var(--d-fast) linear,color var(--d-fast) linear}
.snav svg{flex:none;opacity:.8}
.snav:hover{background:rgba(255,255,255,.07);color:#fff}
.snav.on{background:var(--accent);color:#fff;font-weight:700}
.snav.on svg{opacity:1}
/* son - ish qayerda kutayotgani. Bosmasdan ko'rinadi. */
.sbadge{margin-left:auto;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  font-size:.72rem;font-weight:800;background:rgba(255,255,255,.16);color:#fff;line-height:1}
.snav.on .sbadge{background:rgba(255,255,255,.3)}
.sbadge.warn{background:var(--warn);color:#3A2500}
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--ui-xs);color:#7E96B8;line-height:1.5}

/* main column */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:baseline;gap:9px;min-width:0}
#scr-grp{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
#scr-grp::after{content:"/";margin-left:9px;color:var(--line);font-weight:400;letter-spacing:0}
.topbar h3{margin:0;font-family:var(--display);font-size:1.02rem;letter-spacing:-.03em}
.topbar .when{font-size:var(--ui-sm);color:var(--ink-3);margin-left:2px}
.topbar .spacer{margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 12px;font-size:var(--ui-sm);color:var(--ink-2);background:var(--surface)}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(10,125,87,.5);animation:beat 2.4s var(--e-out-quart) infinite}
@keyframes beat{70%{box-shadow:0 0 0 8px rgba(10,125,87,0)}100%{box-shadow:0 0 0 0 rgba(10,125,87,0)}}

.body{padding:22px 24px 26px;font-size:var(--ui);color:var(--ink-2)}
.scr{display:none}
.scr.on{display:block;animation:scrIn var(--d-slow) var(--e-out-expo)}
@keyframes scrIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* "bu ekran nima uchun" - eng ko'p o'qiladigan qator, shuning uchun kulrang mayda emas */
.sd{font-size:var(--ui);color:var(--ink-2);line-height:1.6;margin:0 0 18px;max-width:68ch}

/* ---------- shared UI pieces ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{border-top:2px solid var(--line);padding:12px 0 0}
.kpi.hi{border-top-color:var(--accent)}
.kpi b{display:block;font-family:var(--display);font-size:1.65rem;letter-spacing:-.045em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.kpi.hi b{color:var(--accent)}
/* direct child only: the counter inside <b> is a span too */
.kpi>span{display:block;margin-top:6px;font-size:var(--ui-xs);color:var(--ink-3)}
.kpi em{font-style:normal;font-size:1rem;letter-spacing:-.02em;color:var(--ink-3);margin-left:3px}

.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.panel-h{display:flex;align-items:baseline;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}
.panel-h b{font-size:var(--ui);color:var(--ink)}
.panel-h span{font-size:var(--ui-xs);color:var(--ink-3);margin-left:auto}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}

/* chart: one hue, thin marks, the peak carries its own label */
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:22px 15px 0}
.chart i{flex:1;background:#BFD4F2;border-radius:4px 4px 0 0;position:relative;
  transition:height var(--d-slowest) var(--e-out-expo)}
.chart i.top{background:var(--accent)}
.chart i.top::after{content:attr(data-v);position:absolute;left:50%;bottom:100%;margin-bottom:6px;
  transform:translateX(-50%);font-family:var(--display);font-size:var(--ui-xs);color:var(--accent)}
.chart-x{display:flex;gap:6px;padding:8px 15px 13px}
.chart-x span{flex:1;text-align:center;font-size:var(--ui-xs);color:var(--ink-3)}

/* horizontal ranking bars, value direct-labelled */
.hbars{padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.hbar{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:baseline}
.hbar span{font-size:var(--ui-sm);color:var(--ink-2)}
.hbar b{font-size:var(--ui-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.hbar i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--sunk);display:block;position:relative;overflow:hidden}
.hbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);border-radius:3px;background:var(--accent);
  transition:width var(--d-slowest) var(--e-out-expo)}
.hbar:nth-child(n+2) i::after{background:#7FB0F5}
.hbar:nth-child(n+3) i::after{background:#A8C7F7}

/* activity feed: time rail on the left, action on the right */
.feed{padding:4px 15px 14px}
.feed div{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:10px 0 10px 0;position:relative}
.feed div::before{content:"";position:absolute;left:59px;top:0;bottom:0;width:1.5px;background:var(--line)}
.feed div:first-child::before{top:18px}
.feed div:last-child::before{bottom:auto;height:18px}
.feed div::after{content:"";position:absolute;left:56px;top:16px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface)}
.feed b{font-size:var(--ui-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:1px}
.feed span{font-size:var(--ui-sm);color:var(--ink-2);padding-left:14px}
.feed span i{font-style:normal;color:var(--ink);font-weight:700}

/* rows: inbox, payments, roster */
.rows{display:flex;flex-direction:column}
.row{display:grid;gap:4px 14px;align-items:center;padding:12px 15px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-inbox{grid-template-columns:34px minmax(0,1fr) auto auto}
.row-pay{grid-template-columns:minmax(0,1fr) auto auto auto}
.row-team{grid-template-columns:34px minmax(0,1fr) auto auto auto}
.row-know{grid-template-columns:minmax(0,1fr) auto}
/* the hard rules read as a list, not as data - no borders competing with the panel left of it */
.rules{padding:13px 15px;display:flex;flex-direction:column;gap:13px}
.rule b{display:block;font-size:var(--ui-sm);color:var(--ink);font-weight:700;line-height:1.3;
  padding-left:20px;position:relative}
.rule b::before{content:"";position:absolute;left:0;top:.28em;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--bad);background:
    linear-gradient(var(--bad),var(--bad)) center/6px 1.5px no-repeat}
.rule span{display:block;margin:3px 0 0 20px;font-size:var(--ui-xs);color:var(--ink-3);line-height:1.45}
.nm{display:block;font-size:var(--ui);color:var(--ink);font-weight:700;line-height:1.3}
.ms{display:block;margin-top:2px;font-size:var(--ui-sm);color:var(--ink-3);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tm{font-size:var(--ui-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.row .sum{font-size:var(--ui-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.ava{width:34px;height:34px;border-radius:10px;background:var(--sunk);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-size:var(--ui-sm);font-weight:700}

/* status chip: colour never carries meaning alone, the word does */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--ui-xs);font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent);
  background:color-mix(in srgb,var(--bad) 7%,transparent)}
.chip.acc{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background:var(--accent-soft)}

/* filter row sits above the data, one line */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filt{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  padding:7px 14px;font-size:var(--ui-sm);color:var(--ink-2);cursor:pointer;
  transition:border-color var(--d-fast) linear,color var(--d-fast) linear}
.filt:hover{border-color:var(--ink-3)}
.filt.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}

/* note strip */
.note{border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;
  padding:13px 16px;font-size:var(--ui-sm);color:var(--ink-2);margin-top:18px}
.note b{color:var(--ink)}
.note.flag{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}

/* ---------- pipeline ---------- */
.kan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.kcol{background:var(--sunk);border-radius:var(--r);padding:11px;min-height:290px}
.kcol-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.kcol-h b{font-size:var(--ui-sm);color:var(--ink)}
.kcol-h span{font-size:var(--ui-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px}
.kcard b{display:block;font-size:var(--ui-sm);color:var(--ink)}
.kcard span{display:block;margin-top:3px;font-size:var(--ui-xs);color:var(--ink-3)}
.kcard .amt{margin-top:7px;font-size:var(--ui-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.kcard.hot{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* ---------- channel studio ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.post{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.post-img{aspect-ratio:4/3;background:linear-gradient(155deg,#12315E,#0A1A33 60%,#173B70);position:relative}
.post-img::after{content:attr(data-k);position:absolute;left:12px;bottom:12px;color:#CFE0FA;
  font-family:var(--display);font-size:var(--ui-sm);letter-spacing:-.02em}
.post-b{padding:11px 12px}
.post-b b{display:block;font-size:var(--ui-sm);color:var(--ink);margin-bottom:4px}
.post-b span{font-size:var(--ui-xs);color:var(--ink-3)}
.post-b .foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}

/* ---------- ROP report ---------- */
.rep{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.rep .ln{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 15px;border-top:1px solid var(--line);font-size:var(--ui-sm)}
.rep .ln:first-child{border-top:0}
.rep .ln b{color:var(--ink);font-variant-numeric:tabular-nums}
.rep .ln.head{background:var(--sunk);font-weight:700;color:var(--ink)}

/* ---------- attendance ---------- */
.att{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:16px}
.shift{display:grid;grid-template-columns:34px minmax(0,1fr) 62px 62px auto;gap:4px 12px;align-items:center;
  padding:11px 15px;border-top:1px solid var(--line)}
.shift:first-child{border-top:0}
.shift .t{font-size:var(--ui-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.shift .t.miss{color:var(--ink-3)}
.face{position:relative}
.face::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--ok);border:2px solid var(--surface)}
.face.late::after{background:var(--warn)}
.face.off::after{background:var(--ink-3)}
/* month grid: the normal day is quiet, the exceptions carry the colour.
   Presence is also in each cell's title, so it is never colour-alone. */
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:14px 15px;max-width:290px}
.month i{aspect-ratio:1;border-radius:4px;background:var(--sunk)}
.month i.p{background:#BFD4F2}
.month i.l{background:var(--warn)}
.month i.a{background:color-mix(in srgb,var(--bad) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--bad)}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:0 15px 14px;font-size:var(--ui-xs);color:var(--ink-3)}
.legend>span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}

/* ---------- connect: one integration per row, guide inside ---------- */
.prog{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.prog-bar{flex:1;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ok);
  transition:width var(--d-slower) var(--e-out-expo)}
.prog b{font-size:var(--ui-sm);color:var(--ink);font-variant-numeric:tabular-nums}

.conn{display:grid;gap:10px}
.cn{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.cn.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cn-h{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  width:100%;text-align:left;padding:14px 15px;border:0;background:transparent;cursor:pointer;
  font-family:var(--body);transition:background var(--d-fast) linear}
.cn-h:hover{background:var(--sunk)}
.cn-n{width:28px;height:28px;border-radius:9px;background:var(--sunk);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:var(--ui-xs)}
.cn.done .cn-n{background:var(--ok);color:#fff}
.cn-h .nm{font-size:var(--ui)}
.cn-h .ms{white-space:normal}
.cn-cv{width:11px;height:11px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--d-norm) var(--e-out-expo)}
.cn.open .cn-cv{transform:rotate(-135deg) translateY(-3px)}

.cn-b{display:none;padding:2px 15px 16px;border-top:1px solid var(--line)}
.cn.open .cn-b{display:block}
.steps{counter-reset:st;margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.steps li{counter-increment:st;position:relative;padding-left:28px;font-size:var(--ui-sm);
  color:var(--ink-2);line-height:1.5}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:6px;
  background:var(--sunk);color:var(--ink-2);font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.steps code,.cn-b code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--sunk);border-radius:5px;padding:1px 6px;color:var(--ink)}

.cn-in{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.cn-in input{flex:1;min-width:220px;padding:11px 13px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--ui-sm);transition:border-color var(--d-fast) linear}
.cn-in input:focus{outline:none;border-color:var(--accent)}
.cn-in input.bad{border-color:var(--bad)}
.cn-in input.good{border-color:var(--ok)}
.cn-in button{padding:11px 20px;border-radius:10px;border:1.5px solid var(--ink);background:var(--ink);
  color:#fff;font-size:var(--ui-sm);font-weight:700;cursor:pointer;white-space:nowrap;
  transition:opacity var(--d-fast) linear}
.cn-in button:disabled{opacity:.45;cursor:default}
.cn-msg{margin-top:10px;font-size:var(--ui-sm);display:none;align-items:flex-start;gap:8px;line-height:1.45}
.cn-msg.show{display:flex}
.cn-msg.err{color:var(--bad)}
.cn-msg.ok{color:var(--ok)}
.cn-msg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;margin-top:7px}

/* the mistake people actually make, spelled out next to the field */
.pitfall{margin-top:14px;border-left:2px solid var(--warn);padding:2px 0 2px 12px;
  font-size:var(--ui-sm);color:var(--ink-2);line-height:1.5}
.pitfall b{color:var(--ink)}

/* ---------- settings ---------- */
.fields{display:grid;gap:10px}
.fld{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;background:var(--surface)}
.fld>span{font-size:var(--ui-sm);color:var(--ink-2)}
.fld code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--ui-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- architecture page ---------- */
.sev{display:inline-flex;align-items:center;gap:6px;font-size:var(--ui-xs);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:5px;white-space:nowrap}
.sev.s1{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.sev.s2{background:color-mix(in srgb,var(--warn) 14%,transparent);color:#8A6A00}
.sev.s3{background:var(--sunk);color:var(--ink-2)}

.find{display:grid;gap:12px}
.fi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  border-top:1px solid var(--line);padding-top:16px}
.fi:first-child{border-top:0;padding-top:0}
.fi h3{font-size:1.02rem;margin:0 0 6px}
.fi p{font-size:.94rem;margin:0 0 8px}
.fi .now{font-size:.87rem;color:var(--ink-3);border-left:2px solid var(--line);padding-left:11px;margin:0}
.fi .now b{color:var(--ink)}
.fi code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--sunk);border-radius:5px;padding:1px 6px}

/* pipeline diagram, drawn with boxes and rails */
.flowmap{background:var(--night-2);border-radius:var(--r-lg);padding:clamp(22px,3vw,38px);color:#EAF1FB;
  overflow-x:auto}
.fm-row{display:flex;align-items:stretch;gap:0;min-width:820px}
.fm-step{flex:1;min-width:0;position:relative;padding-right:26px}
.fm-step:last-child{padding-right:0}
.fm-step::after{content:"";position:absolute;right:9px;top:26px;width:8px;height:8px;
  border-right:1.5px solid #5FA5FF;border-top:1.5px solid #5FA5FF;transform:rotate(45deg)}
.fm-step:last-child::after{display:none}
.fm-box{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 14px;height:100%;
  background:rgba(255,255,255,.045)}
.fm-box b{display:block;font-family:var(--display);font-size:.86rem;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.fm-box span{display:block;font-size:.79rem;color:#B4C6DD;line-height:1.45}
.fm-box .ms-t{display:inline-block;margin-top:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:#7FBAFF;background:rgba(31,111,235,.16);border-radius:5px;padding:2px 7px}
.fm-side{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;min-width:820px}
.fm-side div{border:1px dashed rgba(255,255,255,.2);border-radius:10px;padding:10px 12px}
.fm-side b{display:block;font-size:.8rem;color:#fff;margin-bottom:3px}
.fm-side span{font-size:.75rem;color:#8AA3C4}

/* agent cards */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ag{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px 18px 16px;
  display:flex;flex-direction:column}
.ag-n{font-family:var(--display);font-size:.78rem;color:var(--accent);margin-bottom:10px}
.ag h3{font-size:1.05rem;margin:0 0 8px}
.ag>p{font-size:.9rem;margin:0 0 14px}
.ag dl{margin:auto 0 0;padding-top:13px;border-top:1px solid var(--line);display:grid;gap:7px}
.ag dl div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px}
.ag dt{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding-top:1px}
.ag dd{margin:0;font-size:.85rem;color:var(--ink-2);line-height:1.4}

/* number table */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto}

/* staged roadmap */
.stages{display:grid;gap:0}
.stage{display:grid;grid-template-columns:104px minmax(0,1fr);gap:22px;padding:20px 0;
  border-top:1px solid var(--line)}
.stage:first-child{border-top:0}
.stage-n{font-family:var(--display);font-size:.8rem;color:var(--ink-3)}
.stage-n b{display:block;color:var(--accent);font-size:1.5rem;letter-spacing:-.04em;line-height:1;margin-bottom:5px}
.stage h3{font-size:1.08rem;margin:0 0 8px}
.stage p{font-size:.94rem;margin:0 0 10px}
.stage ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.stage li{font-size:.89rem;color:var(--ink-2);padding-left:18px;position:relative}
.stage li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;
  background:var(--accent)}

@media (max-width:900px){
  .agents{grid-template-columns:1fr}
  .fm-side{grid-template-columns:1fr 1fr}
  .stage{grid-template-columns:1fr;gap:10px}
  .fi{grid-template-columns:1fr;gap:8px}
}

/* person memory card */
.agents.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.memcard{background:var(--night-2);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);color:#EAF1FB}
.memcard h3{color:#fff;font-size:1.02rem;margin:0 0 4px}
.memcard .mc-sub{font-size:.8rem;color:#8AA3C4;margin:0 0 20px}
.memcard dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;margin:0}
.memcard dl div{display:grid;grid-template-columns:126px minmax(0,1fr);gap:12px;
  border-bottom:1px solid rgba(255,255,255,.09);padding:8px 0}
.memcard dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:#7FBAFF;padding-top:2px}
.memcard dd{margin:0;font-size:.86rem;color:#D2E0F2}
.memcard .mc-foot{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.15);
  font-size:.85rem;color:#B4C6DD}
.memcard .mc-foot b{color:#fff}
@media (max-width:760px){.memcard dl{grid-template-columns:1fr}.agents.two-up{grid-template-columns:1fr}}

/* checklist */
.st{display:inline-flex;align-items:center;font-size:var(--ui-xs);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:5px;white-space:nowrap}
.st.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.st.half{background:color-mix(in srgb,var(--warn) 17%,transparent);color:#8A6A00}
.st.no{background:var(--sunk);color:var(--ink-3)}
.ck-g{margin-top:34px}
.ck-g:first-child{margin-top:0}
.ck-g>h3{font-size:1.05rem;margin:0 0 5px}
.ck-g>p{font-size:.9rem;color:var(--ink-2);margin:0 0 6px;max-width:62ch}
.ck-i{display:grid;grid-template-columns:38px minmax(0,1fr) 92px;gap:14px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line)}
.ck-i>b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--ink-3);padding-top:3px}
.ck-i p{margin:0;font-size:.94rem}
.ck-i p span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:3px}
.ck-i>.st{justify-self:end;margin-top:2px}
@media(max-width:700px){
  .ck-i{grid-template-columns:32px minmax(0,1fr)}
  .ck-i>.st{grid-column:2;justify-self:start;margin-top:7px}
}

/* ---------- auth ---------- */
.auth-wrap{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{position:relative;background:var(--night);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,3.4vw,52px)}
.auth-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.auth-side::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(31,111,235,.24),transparent 44%,rgba(6,16,36,.86))}
.auth-side>*{position:relative;z-index:1}
.auth-side .brand{color:#fff}
.auth-quote{max-width:26ch}
.auth-quote b{display:block;font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);letter-spacing:-.04em;line-height:1.08;margin-bottom:14px}
.auth-quote p{color:#B4C6DD;font-size:.98rem;margin:0}
.auth-trust{display:grid;gap:9px}
.auth-trust span{display:flex;align-items:flex-start;gap:10px;color:#B4C6DD;font-size:.88rem;line-height:1.45}
.auth-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:#7FBAFF;flex:none;margin-top:7px}

.auth-main{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,60px) 24px;
  background:var(--page)}
.auth-card{width:100%;max-width:412px}
.auth-card h1{font-size:clamp(1.7rem,1.4rem + 1.2vw,2.15rem);line-height:1.06;margin-bottom:10px}
.auth-card>p{font-size:.97rem;margin-bottom:26px}

.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--sunk);border-radius:12px;
  padding:4px;margin-bottom:22px}
.tabs2 button{border:0;background:transparent;border-radius:9px;padding:10px;cursor:pointer;
  font-family:var(--body);font-size:.92rem;font-weight:700;color:var(--ink-3);
  transition:background var(--d-fast) linear,color var(--d-fast) linear}
.tabs2 button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(11,27,51,.08)}

.pane{display:none}
.pane.on{display:block}
.lbl{display:block;font-size:.8rem;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.inp{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);font-family:var(--body);font-size:1rem;transition:border-color var(--d-fast) linear}
.inp:focus{outline:none;border-color:var(--accent)}
.inp.bad{border-color:var(--bad)}
.auth-card .btn{width:100%;margin-top:14px}
.hint{font-size:.83rem;color:var(--ink-3);margin:14px 0 0;line-height:1.5}
.msg{display:none;margin:12px 0 0;font-size:.87rem;line-height:1.45}
.msg.show{display:flex;align-items:flex-start;gap:8px}
.msg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;margin-top:6px}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--ok)}

/* 6-digit code: one box per digit, paste-friendly */
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:4px}
.code input{width:100%;aspect-ratio:1/1.16;text-align:center;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:var(--display);font-size:1.28rem;
  font-variant-numeric:tabular-nums;transition:border-color var(--d-fast) linear}
.code input:focus{outline:none;border-color:var(--accent)}
.code.bad input{border-color:var(--bad)}
.resend{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  font-size:.84rem;color:var(--ink-3)}
.resend button{border:0;background:none;color:var(--accent-ink);font-family:var(--body);font-size:.84rem;
  font-weight:700;cursor:pointer;padding:0}
.resend button:disabled{color:var(--ink-3);cursor:default}
.back{border:0;background:none;color:var(--ink-3);font-family:var(--body);font-size:.86rem;cursor:pointer;
  padding:8px 0;margin-top:6px}
.back:hover{color:var(--ink)}

.auth-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);line-height:1.55}
.auth-foot a{color:var(--accent-ink);font-weight:700}

@media (max-width:900px){
  .auth-wrap{grid-template-columns:1fr;min-height:0}
  .auth-side{min-height:280px;gap:26px}
  .auth-trust{display:none}
}

/* ---------- page sections below the app ---------- */
.rails{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.rail{border-top:2px solid var(--ink);padding-top:18px}
.rail h3{font-size:1.1rem}
.rail p{font-size:.94rem;margin:0}
/* dark security band */
.sec-dark h2{color:#fff}
.sec-dark p,.sec-dark .fine{color:#B4C6DD}
.sec-dark .eyebrow{color:#7FBAFF}
.sec-dark .sec-head.split>div:last-child{border-top-color:#5FA5FF}
.sec-dark .rail{border-top-color:#5FA5FF}
.sec-dark .rail h3{color:#fff}
/* tables and notes keep their own ink on the dark ground */
.sec-dark .tbl th{color:#8AA3C4;border-bottom-color:#5FA5FF}
.sec-dark .tbl td{color:#C6D6EA;border-bottom-color:rgba(255,255,255,.13)}
.sec-dark .tbl td:first-child{color:#fff}
.sec-dark .note{background:rgba(31,111,235,.18);border-left-color:#5FA5FF;color:#D2E0F2}
.sec-dark .note p{color:#D2E0F2}
.sec-dark .note b{color:#fff}
.sec-dark .rails{row-gap:clamp(26px,3vw,44px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* minmax(0,1fr) - oddiy 1fr ustunni kichraytirmaydi va menyu lentasi
     .side ni 1011px gacha cho'zib yuboradi. */
  .app{grid-template-columns:minmax(0,1fr)}
  .side{padding:14px;min-width:0}
  .who{padding-bottom:12px;margin-bottom:10px}
  /* Telefonda menyu - bitta gorizontal lenta. Avval to'rt qatorli uyum bo'lardi
     va qaysi punkt qayerdaligi ko'rinmasdi. */
  /* min-width:0 shart - aks holda flex punkt kontent kengligiga cho'ziladi (1011px)
     va .app ning overflow:hidden i uni kesib tashlaydi, surish esa ishlamaydi. */
  .snavs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;
    min-width:0;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .snavs::-webkit-scrollbar{display:none}
  .sgrp{display:none}
  .snav{width:auto;flex:none;white-space:nowrap}
  .side-foot{display:none}
  .kan{grid-template-columns:repeat(3,1fr)}
  .att,.two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar{flex-wrap:wrap;gap:8px 12px}
  .crumbs{width:100%}
}
@media (max-width:820px){
  .kpis{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr}
  .kan{grid-template-columns:1fr 1fr}
  .rails{grid-template-columns:1fr}
  .fld{grid-template-columns:1fr;gap:6px}
  .row-inbox{grid-template-columns:34px minmax(0,1fr) auto}
  .row-inbox .tm{display:none}
  .body{padding:18px 16px 22px}
  .topbar{padding:13px 16px}
}
@media (max-width:560px){
  .kan{grid-template-columns:1fr}
  .shift{grid-template-columns:34px minmax(0,1fr) auto;row-gap:6px}
  .shift .t{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .scr.on{animation:none}
  .pill.live::before{animation:none}
}