:root {
  --scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs: 17px;
  --h1: 20px;
  --h2: 18px;
  --hpad: 12px;
  --maxw: 1100px;
  --gap: 16px;
  --cgap: 12px;
  --cpad: 16px;
  --r: 16px;
  --rb: 12px;
  --bw: 1px;
  --bw-btn: 0px;
  --shadow: none;
  --tile-shadow: 0 1px 2px rgba(0,0,0,.05);
  --btn-h: 52px;
  --login-h: 58px;
  --tile-h: 104px;
  --tile-min: 210px;
  --stage-min: 190px;
  --cat-min: 168px;
  --pcard-h: 220px;
  --seg-h: 48px;
  --th-fs: 14px;
  --td-pad: 10px 8px;
  --pimg-s: 60%;
  --pimg-l: 91%;
  --pini-s: 55%;
  --pini-l: 28%;
  --zebra: transparent;
  --btn-line: transparent;
  --hbtn-line: transparent;
  --cnt-bg: rgba(127,127,127,.18);
  --cnt-on: rgba(255,255,255,.25);
  --hbtn: rgba(255,255,255,.14);
  --bg: #f5f5f2;
  --card: #ffffff;
  --tile-bg: #ffffff;
  --tile-line: #dcdcd4;
  --text: #1b1b18;
  --muted: #585851;
  --line: #e2e2db;
  --field: #ffffff;
  --field-line: #7b7b72;
  --primary: var(--stage);
  --primary-ink: #ffffff;
  --primary-text: var(--stage);
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-btn: #b91c1c;
  --danger-ink: #fff;
  --ok: #166534;
  --ok-bg: #eaf7ef;
  --okbtn: #15803d;
  --ok-ink: #fff;
  --warn: #92400e;
  --warn-bg: #fffbeb;
  --head: var(--stage);
  --head-ink: #ffffff;
  --focus: var(--stage);
  --btn-bg: #ebebe4;
  --btn-ink: #1b1b18;
  --seg-bg: #ffffff;
  --sum-bg: #ffffff;
  --sum-ink: #1b1b18;
  --sum-line: var(--stage);
  --sum-pay: #166534;
  --okbtn: #15803d; --warn: #92400e; --warn-bg: #fffbeb;
}
/* ===== umumiy qatlam: hamma qiymat o'zgaruvchilardan ===== */
html { color-scheme: var(--scheme); }
body { font-family: var(--font); font-size: var(--fs); background: var(--bg); color: var(--text); }
header.top { background: var(--head); color: var(--head-ink); padding: var(--hpad) 16px; }
header.top h1 { font-size: var(--h1); }
header.top .btn { background: var(--hbtn); color: var(--head-ink); border: 1px solid var(--hbtn-line); }
main { max-width: var(--maxw); gap: var(--gap); padding: var(--gap); }
.card { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--cpad); }
.card h2 { font-size: var(--h2); }
.muted, label, th { color: var(--muted); }
.btn { border-radius: var(--rb); min-height: var(--btn-h); background: var(--btn-bg); color: var(--btn-ink); border: var(--bw-btn) solid var(--btn-line); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.danger { background: var(--danger-btn); color: var(--danger-ink); border-color: var(--danger-btn); }
.btn.ok { background: var(--okbtn); color: var(--ok-ink); border-color: var(--okbtn); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--field-line); }
.btn.small { min-height: 44px; }
.xbtn { width: 44px; height: 44px; border-color: var(--field-line); }
.tabs .btn.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
input, textarea, select { background: var(--field); border: 1px solid var(--field-line); border-radius: var(--rb); color: var(--text); }
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, .tile:focus-visible, .stage-card:focus-visible, .row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pcard:focus-visible { outline-color: var(--focus); }
.alarm { background: var(--danger-bg); border-color: var(--danger); border-radius: var(--r); }
.alarm h2, .alarm-mini { color: var(--danger); }
.allgood { background: var(--ok-bg); color: var(--ok); border-radius: var(--r); }
.stage-card, .tile, .pcard { background: var(--tile-bg); border: var(--bw) solid var(--tile-line); border-radius: var(--r); box-shadow: var(--tile-shadow); color: var(--text); }
.stage-card.bad { border: 2px solid var(--danger); background: var(--danger-bg); }
.stage-card .n, .tile .t-sub, .stage-card .muted { color: var(--muted); }
.stage-card.bad .badge { color: var(--danger); }
.tile { min-height: var(--tile-h); }
.stages { grid-template-columns: repeat(auto-fill, minmax(var(--stage-min), 1fr)); gap: var(--gap); }
.tiles { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); }
.catalog { grid-template-columns: repeat(auto-fill, minmax(var(--cat-min), 1fr)); gap: var(--cgap); }
.pcard { min-height: var(--pcard-h); }
.pimg { background: hsl(var(--h) var(--pimg-s) var(--pimg-l)); border-radius: calc(var(--r) - 4px); }
.pini { color: hsl(var(--h) var(--pini-s) var(--pini-l)); }
.seg { background: var(--seg-bg); border: var(--bw) solid var(--line); border-radius: var(--r); }
.seg button { color: var(--muted); border-radius: calc(var(--r) - 4px); min-height: var(--seg-h); }
.seg button.on { background: var(--primary); color: var(--primary-ink); }
.seg .cnt { background: var(--cnt-bg); color: inherit; }
.seg button.on .cnt { background: var(--cnt-on); }
.sumbar { background: var(--sum-bg); color: var(--sum-ink); border: var(--bw) solid var(--sum-line); border-radius: var(--r); }
.sumbar .pay { color: var(--sum-pay); }
.searchbar { background: var(--card); }
.search { border-radius: var(--rb); }
.rows, .addmat-list { border-color: var(--line); }
.row { background: var(--card); border-color: var(--line); }
th { font-size: var(--th-fs); }
th, td { padding: var(--td-pad); border-bottom-color: var(--line); }
tbody tr:nth-child(even) td { background: var(--zebra); }
.total-row td, tbody tr.total-row:nth-child(even) td { background: transparent; }
.pay, .status-done, .pok, .earn, .paybox { color: var(--ok); }
.earn, .paybox { background: var(--ok-bg); border-radius: var(--r); }
.w, td.w, .tile.short .t-sub.w { color: var(--warn); }
.tile.short { border-color: var(--warn); }
.mats .mat-in.changed, .target select.changed, .flow select.changed { background: var(--warn-bg); border-color: var(--warn); }
.status-failed, .err, .pill.open { color: var(--danger); }
.pill.open { background: var(--danger-bg); }
.pill.resolved { background: var(--ok-bg); color: var(--ok); }
.chips button { background: var(--field); border: 1px solid var(--field-line); border-radius: var(--rb); color: var(--text); }
.chips button.on { background: var(--danger-btn); color: var(--danger-ink); border-color: var(--danger-btn); }
.qbtn { background: var(--field); border: 1px solid var(--field-line); color: var(--text); border-radius: var(--rb); }
.flow-from { background: var(--line); color: var(--text); }
.flow-arrow { color: var(--primary-text); }
dialog { background: var(--card); color: var(--text); border-radius: var(--r); border: var(--bw) solid var(--line); }
.toast { background: var(--okbtn); color: var(--ok-ink); }
.toast.bad { background: var(--danger-btn); color: var(--danger-ink); }
.login-card { border-radius: calc(var(--r) + 6px); }
.login-logo { background: var(--primary); color: var(--primary-ink); border-radius: calc(var(--r) + 2px); }
.phone-grp, .pass-grp { border: 2px solid var(--field-line); background: var(--field); border-radius: var(--rb); }
.phone-grp:focus-within, .pass-grp:focus-within { border-color: var(--primary-text); }
.phone-pre, .eye { background: var(--card); color: var(--muted); }
.fld-lbl { color: var(--text); }
.login-btn { min-height: var(--login-h); }
.stock-rows .srow, .srow { border-top-color: var(--line); }
details.card > summary { color: var(--text); }
.num { font-variant-numeric: tabular-nums; }
/* ---- Rangli bo'lim kodlari: o'ziga xos qatlam ---- */
:root { --stage: #1b1b18; }
html[data-stage="1"] { --stage: #1d4ed8; }
html[data-stage="2"] { --stage: #c2410c; }
html[data-stage="3"] { --stage: #6d28d9; }
html[data-stage="4"] { --stage: #0f766e; }
html[data-stage="5"] { --stage: #be185d; }
html[data-stage="x"] { --stage: #6b7280; } /* qo'shilgan bo'limlar (6+) */
body { border-top: 0; }
.sumbar { border-width: 2px; border-left-width: 10px; }
.tile { border-left: 6px solid var(--stage); }
.seg button.on { background: var(--stage); }
.pcard { border-top: 5px solid var(--stage); }
.stages .stage-card { border-left: 10px solid #999; }
.stages .stage-card:nth-child(1) { border-left-color: #1d4ed8; }
.stages .stage-card:nth-child(2) { border-left-color: #c2410c; }
.stages .stage-card:nth-child(3) { border-left-color: #6d28d9; }
.stages .stage-card:nth-child(4) { border-left-color: #0f766e; }
.stages .stage-card:nth-child(5) { border-left-color: #be185d; }
.stages .stage-card.bad { border-left-color: #b91c1c; }
.stages .stage-card .name { font-size: 20px; }
.tabs .btn.on { background: #1b1b18; border-color: #1b1b18; }
header.top .btn { color: #fff; }
.login-logo { background: linear-gradient(135deg,#1d4ed8 0 20%,#c2410c 20% 40%,#6d28d9 40% 60%,#0f766e 60% 80%,#be185d 80%); color: #fff; }
.login .btn.primary { background: #1b1b18; border-color: #1b1b18; }
.tabs .btn[data-tab^="stage-"] { border-bottom: 5px solid #999; }
.tabs .btn[data-tab="stage-1"] { border-bottom-color: #1d4ed8; }
.tabs .btn[data-tab="stage-2"] { border-bottom-color: #c2410c; }
.tabs .btn[data-tab="stage-3"] { border-bottom-color: #6d28d9; }
.tabs .btn[data-tab="stage-4"] { border-bottom-color: #0f766e; }
.tabs .btn[data-tab="stage-5"] { border-bottom-color: #be185d; }

/* ---- Kirish sahifasi: rasm fon + shisha (glass) kartochka ---- */
.login { max-width: none; width: 100%; margin: 0; padding: 24px 16px; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  background-color: #14181d; /* rasm kelguncha / yuklanmasa */
  background-image: linear-gradient(180deg, rgba(10,12,16,.30), rgba(10,12,16,.55)), url("/img/login-bg.jpg");
  background-size: cover; background-position: 40% center; background-repeat: no-repeat; color: #fff; }
.login .login-card { width: min(100%, 440px); margin: 0; color: #fff; border: 1px solid rgba(255,255,255,.28);
  background: rgba(20,24,30,.78); box-shadow: 0 12px 48px rgba(0,0,0,.45); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login .login-card { background: rgba(20,24,30,.50); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
}
.login .login-head h1 { color: #fff; }
.login .login-head .muted, .login .fld-lbl { color: #eef0f3; }
.login .phone-grp, .login .pass-grp { background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.5); }
.login .phone-grp input, .login .pass-grp input { color: #1b1b18; }
.login .phone-grp input::placeholder, .login .pass-grp input::placeholder { color: #585851; opacity: 1; }
.login .phone-pre, .login .eye { background: #ecece6; color: #3d3d37; }
.login .phone-grp:focus-within, .login .pass-grp:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.login .login-err { color: #ffd0d0; }
.login .btn.primary { background: #fff; color: #14181d; border-color: #fff; }
.login .btn.primary:disabled { opacity: .7; }
.login .btn:focus-visible { outline-color: #fff; }

/* Kontrast (WCAG AA): rangli sarlavhada tugma va hisoblagich foni qoraytiriladi, oqartirilmaydi */
:root { --hbtn: rgba(0,0,0,.22); --cnt-on: rgba(0,0,0,.25); }
@media (max-width: 520px) { header.top h1 { white-space: normal; font-size: 17px; line-height: 1.15; } }

/* Mahsulot rasmlari: ro'yxatlardagi kichik rasm + telefonda ixcham gorizontal karta */
.thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pimg img { display: block; }
@media (max-width: 520px) {
  .catalog { grid-template-columns: 1fr; gap: 8px; }
  .pcard { min-height: 0; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; padding: 8px; align-items: start; }
  .pcard .pimg { grid-row: 1 / span 2; width: 76px; height: 76px; aspect-ratio: auto; }
  .pcard .pname { font-size: 15px; }
}