/* ============================================================
   Super Optom — Prixod nazorati (chek-list), mobil-first.
   Ranglar va shrift info.superoptom.uz bilan bir oilada: kumush-kulrang asos, oq sirt, bitta amber urg'u.
   Bajarilgan bosqich = yashil belgi, navbatdagi = amber halqa, hali ochilmagan = xira.
   CSP: inline style yo'q (JS faqat class va CSSOM orqali ishlaydi).
   ============================================================ */
:root{
  color-scheme: light;
  --bg:#eef0f3; --surface:#ffffff; --sunken:#f3f5f7;
  --hair:rgba(21,26,36,.08); --hair-firm:rgba(21,26,36,.16);
  --glass:rgba(246,247,249,.9);
  --text:#14171c; --muted:#5f6874; --faint:#838b97;
  --ink:#171a20; --ink-on:#ffffff;
  --accent:#e0951f; --accent-hi:#eda330; --accent-ink:#241703; --accent-soft:rgba(224,149,31,.18);
  --good:#0a6b2c; --good-fill:#17a34a; --good-soft:rgba(23,163,74,.12);
  --bad:#b3261e; --bad-soft:rgba(192,57,47,.10);
  --warn-bg:#fff6e5; --warn-line:#f1d9a6; --warn-ink:#5c4308;
  --info:#1f5fb8; --info-soft:rgba(42,120,214,.12);
  --shadow:0 1px 1px rgba(21,26,36,.04), 0 14px 30px -22px rgba(21,26,36,.3);
  --shadow-float:0 0 0 1px var(--hair), 0 18px 40px -22px rgba(21,26,36,.4);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.32,.72,0,1);
  --tabbar-h:62px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#0c0e11; --surface:#181b20; --sunken:#1f2329;
    --hair:rgba(255,255,255,.08); --hair-firm:rgba(255,255,255,.18);
    --glass:rgba(20,23,28,.9);
    --text:#f2f4f7; --muted:#a6adb8; --faint:#7f8793;
    --ink:#f2f4f7; --ink-on:#14171c;
    --accent:#eda330; --accent-hi:#f3b04a; --accent-soft:rgba(237,163,48,.22);
    --good:#4cd06a; --good-fill:#1f9d49; --good-soft:rgba(47,191,74,.16);
    --bad:#f07b72; --bad-soft:rgba(240,123,114,.14);
    --warn-bg:#2a2313; --warn-line:#4d3f1a; --warn-ink:#f1d9a6;
    --info:#7fb2f5; --info-soft:rgba(57,135,229,.18);
    --shadow:0 1px 2px rgba(0,0,0,.45);
    --shadow-float:0 0 0 1px var(--hair), 0 18px 40px -20px rgba(0,0,0,.8);
  }
}

*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--text);
  font-family:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,p{ margin:0 }
h1{ font-size:24px; font-weight:600; letter-spacing:-.03em }
h2{ font-size:19px; font-weight:600; letter-spacing:-.02em }
h3{ font-size:16px; font-weight:600; letter-spacing:-.01em }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer }
.muted{ color:var(--muted) }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.pos{ color:var(--good) } .neg{ color:var(--bad) }
svg.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ---------- sarlavha va bo'limlar ---------- */
/* Xiralashtirish ::before da: backdrop-filter .top ning o'zida bo'lsa, ichidagi position:fixed (.tabs) ekranga emas, shu blokka yopishadi */
.top{ position:sticky; top:0; z-index:20; border-bottom:1px solid var(--hair) }
.top::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.top__in{ max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px }
.brand{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0 }
.brand img{ border-radius:10px; flex:none }
.brand span{ display:grid; line-height:1.15 }
.brand b{ font-weight:600; letter-spacing:-.02em; white-space:nowrap }
.brand small{ color:var(--faint); font-size:12px }
.user{ margin-left:auto; display:grid; justify-items:end; line-height:1.15; background:none; border:0; padding:6px 10px; border-radius:var(--r-sm); max-width:46vw }
.user:hover{ background:var(--hair) }
.user__name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.user small{ color:var(--faint); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }

.tabs{ position:fixed; z-index:25; left:10px; right:10px; bottom:max(8px, env(safe-area-inset-bottom)); height:var(--tabbar-h);
  display:flex; padding:6px; gap:4px; border-radius:22px; background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--shadow-float) }
.tab{ flex:1; min-width:0; display:grid; justify-items:center; align-content:center; gap:2px; border:0; background:none; border-radius:16px;
  color:var(--muted); font-size:11.5px; font-weight:500; transition:background .25s var(--ease), color .25s var(--ease) }
.tab span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.tab.on{ background:var(--ink); color:var(--ink-on) }
.wrap{ max-width:1180px; margin:0 auto; padding:18px 14px calc(var(--tabbar-h) + 40px); overflow-x:clip }

@media (min-width:860px){
  .tabs{ position:static; height:auto; flex:none; padding:4px; border-radius:14px; background:var(--hair); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; margin-left:10px }
  .tab{ flex:none; display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:11px; font-size:14px }
  .tab.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow) }
  .wrap{ padding:26px 20px 60px }
}

/* ---------- umumiy bloklar ---------- */
.head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.head p{ font-size:13.5px; margin-top:2px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 16px; border-radius:13px;
  border:1px solid var(--hair-firm); background:var(--surface); font-weight:600; white-space:nowrap; transition:transform .15s var(--ease), background .2s }
.btn:active{ transform:scale(.97) }
.btn:disabled{ opacity:.5; cursor:default }
.btn--primary{ background:var(--accent); border-color:transparent; color:var(--accent-ink) }
.btn--primary:hover{ background:var(--accent-hi) }
.btn--dark{ background:var(--ink); border-color:transparent; color:var(--ink-on) }
.btn--danger{ color:var(--bad); border-color:var(--bad-soft); background:var(--bad-soft) }
.btn--ghost{ background:none; border-color:transparent; color:var(--muted) }
.btn--sm{ min-height:34px; padding:0 12px; border-radius:10px; font-size:13.5px }
.btn--block{ width:100% }
.icon-btn{ display:grid; place-items:center; width:36px; height:36px; flex:none; border:0; border-radius:10px; background:none; color:var(--muted) }
.icon-btn:hover{ background:var(--hair); color:var(--text) }

.chips{ display:flex; gap:7px; overflow-x:auto; padding:2px 14px 10px; margin:0 -14px; scrollbar-width:none }
.chips::-webkit-scrollbar{ display:none }
.chip{ flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px;
  border:1px solid var(--hair-firm); background:var(--surface); color:var(--muted); font-weight:500; font-size:14px }
.chip b{ font-weight:600; font-size:12.5px; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--hair); color:var(--text); text-align:center }
.chip.on{ background:var(--ink); border-color:var(--ink); color:var(--ink-on) }
.chip.on b{ background:rgba(255,255,255,.2); color:inherit }
.chip.warn b{ background:var(--accent-soft); color:var(--warn-ink) }
.chip.on.warn b{ background:var(--accent); color:var(--accent-ink) }

.bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.seg{ display:flex; padding:3px; border-radius:12px; background:var(--hair); overflow-x:auto; scrollbar-width:none; max-width:100% }
.seg button{ flex:none; border:0; background:none; padding:7px 12px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--muted) }
.seg button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow) }
.ctl{ height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--hair-firm); background:var(--surface); min-width:0 }
select.ctl{ padding-right:8px }
input.ctl[type=search]{ flex:1 1 180px }
input.ctl[type=date]{ flex:0 1 150px }

.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--hair) }
.card__title{ padding:14px 16px 0; display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.card__title small{ color:var(--faint); font-size:13px }
/* minmax(0,1fr): aks holda keng jadval grid ustunini (va butun sahifani) ekrandan kengaytirib yuboradi */
.stack{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px }
.empty{ padding:38px 18px; text-align:center; color:var(--muted) }
.empty b{ display:block; color:var(--text); font-size:16px; margin-bottom:4px }
.more{ margin:14px auto 0; display:flex }
.note{ padding:10px 14px; border-radius:var(--r-md); background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); font-size:13.5px }

.tag{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--hair); color:var(--muted) }
.tag--wait{ background:var(--accent-soft); color:var(--warn-ink) }
.tag--done{ background:var(--good-soft); color:var(--good) }
.tag--info{ background:var(--info-soft); color:var(--info) }
.tag--bad{ background:var(--bad-soft); color:var(--bad) }
.diff{ display:inline-block; margin-top:2px; padding:1px 7px; border-radius:999px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.diff.neg{ background:var(--bad-soft) } .diff.pos{ background:var(--info-soft); color:var(--info) }

/* ---------- hujjat kartasi: chek-list ---------- */
.docs{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px }
@media (min-width:860px){ .docs{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start } }
@media (min-width:1240px){ .wrap, .top__in{ max-width:1500px } .docs{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
.doc__head{ display:flex; align-items:flex-start; gap:10px; padding:14px 8px 10px 16px }
.doc__id{ min-width:0; flex:1 }
.doc__id h3{ overflow-wrap:anywhere }
.doc__id p{ font-size:13px; margin-top:2px }
.doc__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.age{ font-size:12.5px; color:var(--faint); white-space:nowrap }
.age.late{ color:var(--warn-ink); font-weight:600 } .age.very{ color:var(--bad); font-weight:600 }

.steps{ list-style:none; margin:0; padding:0 6px 6px }
.step{ position:relative; width:100%; display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:12px; align-items:center;
  padding:10px; border:0; border-radius:var(--r-md); background:none; text-align:left }
button.step:hover{ background:var(--sunken) }
.step + .step::before, li + li > .step::before{ content:''; position:absolute; left:23px; top:-9px; width:2px; height:18px; background:var(--hair-firm) }
li.done + li > .step::before{ background:var(--good-fill) }
.step__check{ width:28px; height:28px; border-radius:50%; border:2px solid var(--hair-firm); display:grid; place-items:center; color:transparent; background:var(--surface); position:relative; z-index:1 }
.step__check svg{ width:16px; height:16px; stroke-width:2.6 }
.step__body{ min-width:0; display:grid }
.step__body b{ font-weight:600 }
.step__body small{ color:var(--faint); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.step__sum{ text-align:right; display:grid; justify-items:end }
.step__sum b{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.step__go{ display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:13.5px; white-space:nowrap }
li.done .step__check{ background:var(--good-fill); border-color:var(--good-fill); color:#fff }
li.next .step__check{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft) }
li.locked .step{ opacity:.5 }
.doc__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 14px 14px; border-top:1px solid var(--hair) }
.doc__foot .btn{ margin-left:auto }

/* ---------- ko'rsatkich plitalari, jadval ---------- */
.tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:14px }
@media (min-width:860px){ .tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)) } .tiles--3{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
.tile{ padding:14px 16px; text-align:left; display:grid; gap:2px; width:100% }
button.tile.on{ outline:2px solid var(--accent); outline-offset:-1px }
.tile small{ color:var(--muted); font-size:13px }
.tile b{ font-size:21px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tile span{ font-size:12.5px; color:var(--faint) }

.flow{ padding:14px 16px 16px; display:grid; gap:12px }
.flow__row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; align-items:baseline }
.flow__row > span{ font-weight:500 }
.flow__bar{ grid-column:1 / -1; height:10px; border-radius:999px; background:var(--sunken); overflow:hidden }
.flow__bar i{ display:block; height:100%; border-radius:inherit; background:var(--accent); width:0; transition:width .6s var(--ease) }
.flow__row.is-2 i{ background:#2a78d6 } .flow__row.is-3 i{ background:var(--good-fill) }

.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl{ width:100%; border-collapse:collapse; font-size:14px }
.tbl th, .tbl td{ padding:10px 12px; text-align:right; white-space:nowrap; border-top:1px solid var(--hair); font-variant-numeric:tabular-nums }
.tbl th{ border-top:0; color:var(--muted); font-weight:500; font-size:12.5px }
.tbl th:first-child, .tbl td:first-child{ text-align:left; padding-left:16px; white-space:normal; min-width:180px }
.tbl td:last-child, .tbl th:last-child{ padding-right:16px }
.tbl tfoot td{ font-weight:600; border-top:2px solid var(--hair-firm) }

.rows{ display:grid }
.row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; align-items:center; padding:12px 8px 12px 16px; border-top:1px solid var(--hair) }
.row:first-child{ border-top:0 }
.row__main{ min-width:0; display:grid; gap:3px }
.row__main b{ font-weight:600; overflow-wrap:anywhere }
.row__main small{ color:var(--faint); font-size:12.5px }
.row__side{ display:flex; align-items:center; gap:4px }
.row__side b{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; margin-right:6px }
.row.off{ opacity:.5 }

/* ---------- oyna (telefonda pastdan chiqadi) ---------- */
.sheet{ border:0; padding:0; background:none; color:inherit; width:100%; max-width:100%; max-height:100dvh; margin:auto 0 0; overflow:visible }
.sheet::backdrop{ background:rgba(10,12,15,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.sheet__in{ background:var(--surface); border-radius:24px 24px 0 0; max-height:92dvh; display:flex; flex-direction:column; box-shadow:var(--shadow-float); animation:rise .32s var(--ease) both }
.sheet__in > form{ display:flex; flex-direction:column; min-height:0; flex:1 }
.sheet__head{ display:flex; align-items:flex-start; gap:10px; padding:18px 12px 10px 20px }
.sheet__head > div{ flex:1; min-width:0 }
.sheet__head p{ font-size:13.5px; margin-top:3px }
.sheet__body{ padding:6px 20px 16px; overflow-y:auto; display:grid; gap:14px; min-height:0 }
.sheet__foot{ display:flex; gap:8px; padding:12px 20px max(16px, env(safe-area-inset-bottom)); border-top:1px solid var(--hair) }
.sheet__foot .btn--primary, .sheet__foot .btn--dark{ flex:1 }
@keyframes rise{ from{ transform:translateY(24px); opacity:0 } }
@media (min-width:640px){
  .sheet{ margin:auto; width:min(520px, calc(100% - 32px)) }
  .sheet__in{ border-radius:24px; max-height:88dvh }
}

.field{ display:grid; gap:6px }
.field > span{ font-size:13px; font-weight:500; color:var(--muted) }
.field input, .field select, .field textarea{ width:100%; min-height:46px; padding:10px 13px; border-radius:13px; border:1px solid var(--hair-firm); background:var(--sunken); outline:0 }
.field textarea{ min-height:64px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.field .sum-input{ font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; min-height:56px }
.field__hint{ font-size:13px; color:var(--muted) }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }
.check{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:13px; border:1px solid var(--hair-firm); background:var(--sunken); font-weight:500 }
.check input{ width:20px; height:20px; accent-color:var(--good-fill); flex:none }
.checks{ display:grid; gap:8px }
.err{ color:var(--bad); font-size:14px }

.suggest-wrap{ position:relative }
.suggest{ position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); max-height:240px; overflow-y:auto; background:var(--surface); border-radius:13px; box-shadow:var(--shadow-float); padding:4px }
.suggest button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 11px; border:0; border-radius:9px; background:none; text-align:left }
.suggest button:hover{ background:var(--sunken) }
.suggest small{ flex:none; font-size:11px; font-weight:600; padding:1px 6px; border-radius:6px; background:var(--info-soft); color:var(--info) }

.cands{ display:grid; gap:6px }
.cand{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 10px; align-items:center; padding:10px 13px; border-radius:13px; border:1px solid var(--hair-firm); background:var(--sunken); text-align:left }
.cand.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface) }
.cand small{ color:var(--faint); font-size:12.5px }
.cand b{ font-variant-numeric:tabular-nums; white-space:nowrap }

.hist{ display:grid; gap:0; margin:0; padding:0; list-style:none }
.hist li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 10px; padding:9px 0; border-top:1px solid var(--hair); font-size:14px }
.hist li:first-child{ border-top:0 }
.hist small{ color:var(--faint); font-size:12.5px; grid-column:1 / -1 }
.kv{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 14px; font-size:14px }
.kv dt{ color:var(--muted) } .kv dd{ margin:0; text-align:right; overflow-wrap:anywhere }
.secret{ padding:14px; border-radius:13px; background:var(--sunken); font:600 20px/1.2 ui-monospace, Menlo, monospace; letter-spacing:.04em; text-align:center; user-select:all }

.toast{ position:fixed; z-index:60; left:50%; bottom:calc(var(--tabbar-h) + 26px); transform:translateX(-50%); max-width:calc(100% - 28px);
  padding:11px 16px; border-radius:14px; background:var(--ink); color:var(--ink-on); font-weight:500; font-size:14px; box-shadow:var(--shadow-float); animation:rise .3s var(--ease) both }
.toast.bad{ background:var(--bad); color:#fff }
@media (min-width:860px){ .toast{ bottom:28px } }

/* ---------- kirish ---------- */
.login{ min-height:100dvh; display:grid; place-items:center; padding:20px }
.login__card{ width:min(380px, 100%); display:grid; gap:14px; padding:28px 24px; background:var(--surface); border-radius:26px; box-shadow:var(--shadow-float) }
.login__logo{ border-radius:14px }
.login__card h1{ margin-top:4px } .login__card .muted{ margin-top:-10px }
.noscript{ padding:20px; text-align:center }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }