@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
/* =========================================================================
   KAMOL DIGITAL TIZIM — yagona dizayn tizimi  (ui.css)
   Shablon A "Buxgalter" zichligi + Facebook palitrasi.

   ISHLATISH: har bir sahifaning <head> ida, o'z <style> idan KEYIN:
       <link rel="stylesheet" href="/ui.css">
   Yangi modul qo'shilsa — shu bitta qatorni qo'shish kifoya.

   Barcha qoidalar `html` bilan boshlanadi: shu tufayli sahifadagi ichki
   <style> ni ustma-ust yozadi, lekin !important kerak emas va modul o'z
   maxsus stilini bemalol qo'sha oladi.
   ========================================================================= */

/* ----------------------------- TOKENLAR ----------------------------- */
:root{
  /* yuza */
  --kd-bg:#F0F2F5;          /* sahifa foni (Facebook) */
  --kd-surface:#FFFFFF;     /* karta, panel, jadval */
  --kd-surface-2:#F2F3F5;   /* ikkilamchi yuza, hover, th */
  --kd-surface-3:#E4E6EB;   /* bosilgan holat, chip */
  /* matn */
  --kd-ink:#050505;
  --kd-ink-2:#65676B;
  --kd-ink-3:#8A8D91;
  /* chiziq */
  --kd-line:#CED0D4;
  --kd-line-2:#E4E6EB;
  /* asosiy rang */
  --kd-blue:#1877F2;
  --kd-blue-hi:#166FE5;
  --kd-blue-dn:#0E5FCC;     /* matn/havola uchun — oq fonda 4.5:1 dan yuqori */
  --kd-blue-soft:#E7F0FE;
  --kd-on-blue:#FFFFFF;
  /* holat ranglari (aksentdan alohida, doim yozuv bilan birga) */
  --kd-good:#1B7F3B;   --kd-good-bg:#E3F3E7;  --kd-good-line:#BEE0C7;
  --kd-warn:#8A6100;   --kd-warn-bg:#FCF3DE;  --kd-warn-line:#EBDCB2;
  --kd-bad:#C42B3B;    --kd-bad-bg:#FCE9EB;   --kd-bad-line:#F0C9CE;
  --kd-info:#0E5FCC;   --kd-info-bg:#E7F0FE;  --kd-info-line:#C7DDFA;
  /* shakl */
  --kd-r:8px;          /* karta/panel */
  --kd-r-sm:6px;       /* tugma, input */
  --kd-r-pill:999px;
  --kd-sh:0 1px 2px rgba(0,0,0,.07);
  --kd-sh-2:0 2px 8px rgba(0,0,0,.09);
  /* shrift */
  --kd-font:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --kd-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html:root[data-theme="dark"]{
  --kd-bg:#18191A; --kd-surface:#242526; --kd-surface-2:#303132; --kd-surface-3:#3A3B3C;
  --kd-ink:#E4E6EB; --kd-ink-2:#B0B3B8; --kd-ink-3:#8A8D91;
  --kd-line:#3E4042; --kd-line-2:#303132;
  --kd-blue:#2D88FF; --kd-blue-hi:#4E9CFF; --kd-blue-dn:#8AC0FF; --kd-blue-soft:#1E3350; --kd-on-blue:#0B1220;
  --kd-good:#5CCB78; --kd-good-bg:#16301E; --kd-good-line:#265535;
  --kd-warn:#E3B341; --kd-warn-bg:#332A14; --kd-warn-line:#5A4A22;
  --kd-bad:#F0757F;  --kd-bad-bg:#33191C;  --kd-bad-line:#5C2C32;
  --kd-info:#8AC0FF; --kd-info-bg:#1E3350; --kd-info-line:#2C4C72;
  --kd-sh:0 1px 2px rgba(0,0,0,.4); --kd-sh-2:0 2px 10px rgba(0,0,0,.5);
}

/* ------------------------------ ASOS -------------------------------- */
html body{
  background:var(--kd-bg); color:var(--kd-ink);
  font-family:var(--kd-font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
html h1,html h2,html h3{letter-spacing:-.015em;font-weight:700;color:var(--kd-ink)}
html a{color:var(--kd-blue-dn)}
html .dim,html .hint,html .tv,html .sub,html .empty{color:var(--kd-ink-2)}
/* raqamlar doim mono + bir tekis ustun */
html .n,html td.n,html th.n,html .v,html .val,html input.e,html .card .v,html .kstat .v{
  font-family:var(--kd-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"
}
html :focus-visible{outline:2px solid var(--kd-blue);outline-offset:2px}

/* ------------------------- CHAP MENYU (ERP) ------------------------- */
html .side{
  background:var(--kd-surface); color:var(--kd-ink);
  border-right:1px solid var(--kd-line); width:224px;
}
html .side .logo{
  border-bottom:1px solid var(--kd-line-2); color:var(--kd-ink);
  font-weight:700; padding:16px 16px 13px;
}
html .side .logo small{color:var(--kd-ink-2)}
html .side nav{padding:8px 8px 6px}
html .mitem{
  color:var(--kd-ink); font-size:14px; font-weight:500;
  border-radius:var(--kd-r-sm); padding:8px 10px; position:relative;
}
html .mitem:hover{background:var(--kd-surface-2)}
html .mitem.on{background:var(--kd-blue-soft);color:var(--kd-blue-dn);font-weight:650}
html .mitem.on::before{
  content:""; position:absolute; left:-8px; top:18%; bottom:18%;
  width:3px; border-radius:3px; background:var(--kd-blue);
}
html .mitem.sub{padding-left:32px;opacity:1;color:var(--kd-ink-2)}
html .mitem.sub.on{color:var(--kd-blue-dn)}
/* emoji belgilar — yumshoq ko'k plitkada, tasodifiy emas, tanlangandek ko'rinadi */
html .mitem .ik{
  width:24px;height:24px;border-radius:6px;background:var(--kd-surface-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0
}
html .mitem.on .ik{background:#fff}
html:root[data-theme="dark"] .mitem.on .ik{background:var(--kd-surface)}
html .side .foot{border-top:1px solid var(--kd-line-2);padding:10px 12px}
html .sidetog{background:var(--kd-surface-2);border:1px solid var(--kd-line);color:var(--kd-ink-2)}
html .sidetog:hover{background:var(--kd-surface-3)}
html #sideOpen{background:var(--kd-surface);color:var(--kd-ink);border:1px solid var(--kd-line);box-shadow:var(--kd-sh)}
html .burger{background:var(--kd-blue);color:#fff}

/* ------------------------------ TUGMA ------------------------------- */
html .btn{
  background:var(--kd-surface-2); color:var(--kd-ink);
  border:1px solid var(--kd-line); border-radius:var(--kd-r-sm);
  font-weight:600; font-size:13px; padding:7px 13px; font-family:var(--kd-font);
}
html .btn:hover{background:var(--kd-surface-3);border-color:var(--kd-line)}
html .btn.p{background:var(--kd-blue);border-color:var(--kd-blue);color:var(--kd-on-blue)}
html .btn.p:hover{background:var(--kd-blue-hi);border-color:var(--kd-blue-hi)}
html .btn.xavf,html .btn.danger{background:var(--kd-bad-bg);border-color:var(--kd-bad-line);color:var(--kd-bad)}
html .btn.xavf:hover,html .btn.danger:hover{background:var(--kd-bad);border-color:var(--kd-bad);color:#fff}
html .side .btn{background:var(--kd-surface-2);color:var(--kd-ink);border-color:var(--kd-line)}
html .side .btn.p{background:var(--kd-blue);color:var(--kd-on-blue);border-color:var(--kd-blue)}
html .del{color:var(--kd-bad)}

/* --------------------------- PANEL / KARTA -------------------------- */
html .panel,html .head,html .card,html .mkarta,html .lockbar{
  background:var(--kd-surface); border:1px solid var(--kd-line-2);
  border-radius:var(--kd-r); box-shadow:var(--kd-sh);
}
html .panel{margin:12px 0}
html .card .l,html .kstat .l{
  color:var(--kd-ink-2);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700
}
html .card .v{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--kd-ink)}
html .card .n{color:var(--kd-ink-2);font-family:var(--kd-font)}
html .card.pos .v,html .gain,html .ok{color:var(--kd-good)}
html .card.neg .v,html .loss,html .fail,html .kstat .bad{color:var(--kd-bad)}
html .card.blue .v{color:var(--kd-blue-dn)}
html .card.hero{background:var(--kd-blue);border-color:var(--kd-blue)}
html .card.hero .l,html .card.hero .n{color:rgba(255,255,255,.82)}
html .card.hero .v{color:#fff}
html .mkarta{padding:16px;border-radius:var(--kd-r)}
html .mkarta:hover{border-color:var(--kd-blue);box-shadow:var(--kd-sh-2)}
html .mkarta .ik{
  width:38px;height:38px;border-radius:10px;background:var(--kd-blue-soft);
  display:flex;align-items:center;justify-content:center;font-size:20px
}
html .mkarta .nm{color:var(--kd-ink);font-weight:650;margin-top:10px}
html .mhead h1,html .head h1{color:var(--kd-ink)}

/* ------------------------------ JADVAL ------------------------------ */
html th{
  background:var(--kd-surface-2); color:var(--kd-ink-2);
  border-bottom:1px solid var(--kd-line); font-size:10.5px; letter-spacing:.06em;
  padding:8px 11px; font-weight:700;
}
html td{border-bottom:1px solid var(--kd-line-2);padding:7px 11px;color:var(--kd-ink)}
html tbody tr:hover td{background:var(--kd-surface-2)}
html tr.tot td{background:var(--kd-surface-2);font-weight:700}
html tr.srl td,html tr.sub td{background:var(--kd-surface-2)}
html tr.grp td{background:var(--kd-blue-soft);color:var(--kd-blue-dn);font-weight:700}
html tr.grp2 td{background:var(--kd-surface-2);font-weight:650}
html .auto{background:var(--kd-blue-soft);color:var(--kd-blue-dn);font-weight:600}

/* ----------------------------- FORMALAR ----------------------------- */
html .form{background:var(--kd-surface);border-bottom:1px solid var(--kd-line-2)}
html .form label{color:var(--kd-ink-2);font-size:10.5px;letter-spacing:.06em;font-weight:700}
html .form input,html .form select,html .form textarea,html input.e,html .editor{
  background:var(--kd-surface); color:var(--kd-ink);
  border:1px solid var(--kd-line); border-radius:var(--kd-r-sm);
  font-family:var(--kd-font);
}
html input.e{background:var(--kd-surface-2)}
html .form input:focus,html .form select:focus,html .form textarea:focus,
html input.e:focus,html .editor:focus{
  outline:none; border-color:var(--kd-blue); box-shadow:0 0 0 3px var(--kd-blue-soft);
}
html input.e:disabled{background:var(--kd-surface-2);color:var(--kd-ink-3);border-color:var(--kd-line-2)}

/* ------------------------- IZOH BLOKLARI ---------------------------- */
html .note{border-radius:var(--kd-r);border:1px solid;font-size:13.5px}
html .note.i{background:var(--kd-info-bg);border-color:var(--kd-info-line);color:var(--kd-ink)}
html .note.g{background:var(--kd-good-bg);border-color:var(--kd-good-line);color:var(--kd-ink)}
html .note.w{background:var(--kd-warn-bg);border-color:var(--kd-warn-line);color:var(--kd-ink)}
html .note.r{background:var(--kd-bad-bg);border-color:var(--kd-bad-line);color:var(--kd-ink)}
html .note b{color:var(--kd-ink)}
html .steps{
  background:var(--kd-surface-2);border-left:3px solid var(--kd-blue);
  font-family:var(--kd-mono);color:var(--kd-ink);border-radius:0 var(--kd-r-sm) var(--kd-r-sm) 0
}
html .lockbar{color:var(--kd-ink-2)}

/* ----------------------------- TABLAR ------------------------------- */
/* Moliya sahifasidagi asosiy tablar (.top ichida) — pastki chiziqli */
html .top .tabs{gap:2px;border-bottom:1px solid var(--kd-line);margin-top:14px}
html .top .tab{
  background:transparent; color:var(--kd-ink-2); border:none; border-radius:0;
  font-weight:600; font-size:14px; padding:11px 16px;
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
html .top .tab:hover{background:var(--kd-surface-2);color:var(--kd-ink)}
html .top .tab.on{background:transparent;color:var(--kd-blue-dn);border-bottom-color:var(--kd-blue)}
/* Boshqa sahifalardagi tablar (Sotuv statistikasi) — dumaloq tugma */
html .tab{
  background:var(--kd-surface); color:var(--kd-ink-2);
  border:1px solid var(--kd-line); border-radius:var(--kd-r-pill);
  font-weight:600; padding:7px 15px;
}
html .tab:hover{background:var(--kd-surface-2);color:var(--kd-ink)}
html .tab.on{background:var(--kd-blue);border-color:var(--kd-blue);color:#fff}
html .tab .st{background:var(--kd-surface-3);color:var(--kd-ink-2)}
html .tab.on .st{background:var(--kd-blue-soft);color:var(--kd-blue-dn)}
html .tab.on .st.a{background:var(--kd-good-bg);color:var(--kd-good)}
html .tab.on .st.o{background:var(--kd-warn-bg);color:var(--kd-warn)}
html .tab.on .st.ar{background:var(--kd-surface-3);color:var(--kd-ink-2)}
html .tab2{
  background:var(--kd-surface-2);color:var(--kd-ink-2);border:1px solid var(--kd-line-2);
  border-radius:var(--kd-r-pill);font-weight:600
}
html .tab2:hover{background:var(--kd-surface-3)}
html .tab2.on{background:var(--kd-blue-soft);color:var(--kd-blue-dn);border-color:var(--kd-blue-soft);font-weight:700}
html .seg{background:var(--kd-surface-2);border:1px solid var(--kd-line);border-radius:var(--kd-r-sm)}
html .seg button{color:var(--kd-ink-2)}
html .seg button.on{background:var(--kd-blue);color:var(--kd-on-blue)}

/* ------------------- YUQORI PANEL (Moliya sahifasi) ----------------- */
html .top{
  background:var(--kd-surface); color:var(--kd-ink);
  border-bottom:1px solid var(--kd-line); padding:14px 0 0;
}
html .top .brand{color:var(--kd-ink);font-weight:700}
html .top .brand .as{color:var(--kd-ink-2)}
html .top .btn{background:var(--kd-surface-2);color:var(--kd-ink);border-color:var(--kd-line)}
html .top .btn.p{background:var(--kd-blue);color:var(--kd-on-blue);border-color:var(--kd-blue)}

/* ------------------------ LOYIHALAR DOSKASI ------------------------- */
html .ly-col,html .ly-box{background:var(--kd-surface-2);border:1px solid var(--kd-line-2);border-radius:var(--kd-r)}
html .ly-card{background:var(--kd-surface);border:1px solid var(--kd-line-2);border-radius:var(--kd-r-sm);box-shadow:var(--kd-sh)}
html .ly-card:hover{border-color:var(--kd-blue)}
html .ly-colhead{color:var(--kd-ink-2);font-weight:700}
html .ly-prog i,html .ly-prog>span{background:var(--kd-blue)}
html .ly-meta{color:var(--kd-ink-2)}

/* --------------------------- MOBIL MENYU ---------------------------- */
@media(max-width:700px){
  html #mnav{
    background:var(--kd-surface); border-top:1px solid var(--kd-line);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  html #mnav button{color:var(--kd-ink-2)}
  html #mnav button:active{color:var(--kd-blue)}
  html .scroll th:first-child,html .scroll td:first-child,
  html .xtable th:nth-child(2),html .xtable td:nth-child(2){
    background:var(--kd-surface);box-shadow:2px 0 0 var(--kd-line-2)
  }
  html .scroll th:first-child,html .xtable th:nth-child(2){background:var(--kd-surface-2)}
  html tr.grp td:first-child{background:var(--kd-blue-soft)}
  html tr.grp2 td:first-child,html tr.tot td:first-child,html tr.sub td:first-child{background:var(--kd-surface-2)}
}

/* ------------------------------ TOAST ------------------------------- */
html #toast{background:var(--kd-ink);color:var(--kd-bg);border-radius:var(--kd-r-sm);font-weight:500}
html:root[data-theme="dark"] #toast{background:var(--kd-surface-3);color:var(--kd-ink)}

/* --------------------------- QULAYLIKLAR ---------------------------- */
@media(prefers-reduced-motion:reduce){html *{transition:none!important;animation:none!important}}

/* ==========================================================================
   QORONG'I REJIM — sahifalarning eski qat'iy ranglarini qoplash
   (sahifa ichidagi `:root[data-theme="dark"] X` qoidalari (0,3,0) bilan
   kelishmasligi uchun bu yerda `html:root[...]` (0,3,1) ishlatiladi)
   ========================================================================== */
html:root[data-theme="dark"] body{background:var(--kd-bg);color:var(--kd-ink)}
html:root[data-theme="dark"] a{color:var(--kd-blue-dn)}
html:root[data-theme="dark"] h2 .hint,
html:root[data-theme="dark"] .dim,
html:root[data-theme="dark"] .empty,
html:root[data-theme="dark"] .head .sub,
html:root[data-theme="dark"] .card .n,
html:root[data-theme="dark"] .card .l,
html:root[data-theme="dark"] .kstat .l{color:var(--kd-ink-2)}
html:root[data-theme="dark"] .side{background:var(--kd-surface);border-right:1px solid var(--kd-line)}
html:root[data-theme="dark"] .side .logo{color:var(--kd-ink);border-bottom-color:var(--kd-line)}
html:root[data-theme="dark"] .panel,
html:root[data-theme="dark"] .head,
html:root[data-theme="dark"] .card,
html:root[data-theme="dark"] .mkarta,
html:root[data-theme="dark"] .kstat,
html:root[data-theme="dark"] .lockbar{background:var(--kd-surface);border-color:var(--kd-line);color:var(--kd-ink)}
html:root[data-theme="dark"] .card.hero{background:var(--kd-blue);border-color:var(--kd-blue)}
html:root[data-theme="dark"] .card.hero .v{color:#fff}
html:root[data-theme="dark"] .card.hero .l,
html:root[data-theme="dark"] .card.hero .n{color:rgba(255,255,255,.85)}
html:root[data-theme="dark"] .mkarta:hover{border-color:var(--kd-blue);box-shadow:var(--kd-sh-2)}
html:root[data-theme="dark"] .kstat>div{border-right-color:var(--kd-line-2)}
html:root[data-theme="dark"] th{background:var(--kd-surface-2);color:var(--kd-ink-2);border-bottom-color:var(--kd-line)}
html:root[data-theme="dark"] td{border-bottom-color:var(--kd-line-2);color:var(--kd-ink)}
html:root[data-theme="dark"] tr.tot td,
html:root[data-theme="dark"] tr.srl td,
html:root[data-theme="dark"] tr.sub td,
html:root[data-theme="dark"] tr.grp2 td{background:var(--kd-surface-2)}
html:root[data-theme="dark"] tr.grp td{background:var(--kd-blue-soft);color:var(--kd-blue-dn)}
html:root[data-theme="dark"] .auto{background:var(--kd-blue-soft);color:var(--kd-blue-dn)}
html:root[data-theme="dark"] .form,
html:root[data-theme="dark"] .form input,
html:root[data-theme="dark"] .form select,
html:root[data-theme="dark"] .form textarea,
html:root[data-theme="dark"] .editor{background:var(--kd-surface);border-color:var(--kd-line);color:var(--kd-ink)}
html:root[data-theme="dark"] input.e{background:var(--kd-surface-2);border-color:var(--kd-line);color:var(--kd-ink)}
html:root[data-theme="dark"] input.e:disabled{background:var(--kd-surface);color:var(--kd-ink-3);border-color:var(--kd-line-2)}
html:root[data-theme="dark"] .note.i{background:var(--kd-info-bg);border-color:var(--kd-info-line);color:var(--kd-ink)}
html:root[data-theme="dark"] .note.g{background:var(--kd-good-bg);border-color:var(--kd-good-line);color:var(--kd-ink)}
html:root[data-theme="dark"] .note.w{background:var(--kd-warn-bg);border-color:var(--kd-warn-line);color:var(--kd-ink)}
html:root[data-theme="dark"] .note.r{background:var(--kd-bad-bg);border-color:var(--kd-bad-line);color:var(--kd-ink)}
html:root[data-theme="dark"] .steps{background:var(--kd-surface-2);border-left-color:var(--kd-blue);color:var(--kd-ink)}
html:root[data-theme="dark"] .tab{color:var(--kd-ink-2);background:transparent}
html:root[data-theme="dark"] .tab.on{color:var(--kd-blue-dn);background:transparent;border-bottom-color:var(--kd-blue)}
html:root[data-theme="dark"] .tab2{background:var(--kd-surface-2);color:var(--kd-ink-2);border-color:var(--kd-line)}
html:root[data-theme="dark"] .tab2.on{background:var(--kd-blue-soft);color:var(--kd-blue-dn);border-color:var(--kd-blue-soft)}
html:root[data-theme="dark"] .sidetog,
html:root[data-theme="dark"] #sideOpen{background:var(--kd-surface-2);border-color:var(--kd-line);color:var(--kd-ink)}

/* ==================== KICHIK SAYQALLAR ==================== */
/* tugmadagi emoji va matn orasida bo'shliq */
html .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
html .form .btn,html #mnav button{display:inline-flex}
/* ERP: bo'lim sarlavhasi va zapusk paneli */
html .mhead h1{font-size:20px;display:flex;align-items:center;gap:8px}
html #zapusk-bar{
  background:var(--kd-surface);border:1px solid var(--kd-line-2);border-radius:var(--kd-r);
  padding:8px 12px;margin:0 0 14px;box-shadow:var(--kd-sh)
}
html #zapusk-sel{
  background:var(--kd-surface);border:1px solid var(--kd-line)!important;color:var(--kd-ink);
  border-radius:var(--kd-r-sm);font-family:var(--kd-font)
}

/* ==========================================================================
   KIRISH SAHIFASI  (app.py ichidagi LOGIN_HTML shu klasslarni ishlatadi)
   ========================================================================== */
html body.kd-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--kd-bg)
}
html .kd-login-card{
  background:var(--kd-surface);border:1px solid var(--kd-line-2);border-radius:12px;
  padding:30px 28px;width:100%;max-width:396px;box-shadow:0 2px 12px rgba(0,0,0,.10)
}
html .kd-login-mark{
  width:44px;height:44px;border-radius:11px;background:var(--kd-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:16px
}
html .kd-login-card h1{font-size:21px;margin:0 0 4px}
html .kd-login-sub{color:var(--kd-ink-2);font-size:13.5px;margin:0 0 22px}
html .kd-login-card label{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--kd-ink-2);font-weight:700;margin:14px 0 6px
}
html .kd-login-card input{
  width:100%;background:var(--kd-surface);border:1px solid var(--kd-line);border-radius:var(--kd-r-sm);
  padding:11px 13px;color:var(--kd-ink);font-size:15px;font-family:var(--kd-font)
}
html .kd-login-card input:focus{outline:none;border-color:var(--kd-blue);box-shadow:0 0 0 3px var(--kd-blue-soft)}
html .kd-login-card button{
  width:100%;margin-top:22px;background:var(--kd-blue);border:1px solid var(--kd-blue);
  border-radius:var(--kd-r-sm);padding:12px;color:#fff;font-size:15px;font-weight:650;
  cursor:pointer;font-family:var(--kd-font)
}
html .kd-login-card button:hover{background:var(--kd-blue-hi);border-color:var(--kd-blue-hi)}
html .kd-login-card .err{
  background:var(--kd-bad-bg);border:1px solid var(--kd-bad-line);color:var(--kd-bad);
  border-radius:var(--kd-r-sm);padding:10px 13px;font-size:13px;margin-bottom:6px
}

/* ==========================================================================
   KO'PRIK — eski modullar o'z o'zgaruvchi nomlarini ishlatadi.
   Ular ui.css dan KEYIN emas, OLDIN yuklanadi, shuning uchun bu yerda
   qayta belgilanadi va butun tizim bitta palitraga tushadi.
     · Sotuv AI            /sotuvai   (static/app.css)
     · Sotuv statistikasi  /sotuv     (index.html ichida)
   ========================================================================== */
:root{
  /* — Sotuv AI — */
  --bg:var(--kd-bg); --panel:var(--kd-surface); --panel2:var(--kd-surface-2);
  --border:var(--kd-line-2); --fg:var(--kd-ink); --muted:var(--kd-ink-2); --dim:var(--kd-ink-3);
  --accent:var(--kd-blue); --accent-glow:rgba(24,119,242,.16); --dark:var(--kd-blue);
  --btn:var(--kd-surface-2); --btnfg:var(--kd-ink); --btnb:var(--kd-line);
  --success:var(--kd-good); --warning:var(--kd-warn); --error:var(--kd-bad); --purple:#7A5AF8;
  --tab:var(--kd-surface-2); --tabfg:var(--kd-ink-2); --input:var(--kd-surface);
  /* — Sotuv statistikasi — */
  --card:var(--kd-surface); --ink:var(--kd-ink); --mut:var(--kd-ink-2);
  --line:var(--kd-line-2); --acc:var(--kd-blue); --warn:var(--kd-warn);
  --good:var(--kd-good); --bad:var(--kd-bad);
  /* grafik ranglari — tekshiruvdan o'tgan (yorug'lik, to'yinganlik, rang ko'rmaslik, kontrast) */
  --c1:#1877F2; --c2:#E8710A; --c3:#0E9E6E; --c4:#C13FBF;
  --c5:#B26A00; --c6:#7A5AF8; --c7:#D6455B;
}
html:root[data-theme="dark"]{
  --bg:var(--kd-bg); --panel:var(--kd-surface); --panel2:var(--kd-surface-2);
  --border:var(--kd-line); --fg:var(--kd-ink); --muted:var(--kd-ink-2); --dim:var(--kd-ink-3);
  --accent:var(--kd-blue); --accent-glow:rgba(45,136,255,.24); --dark:var(--kd-blue);
  --btn:var(--kd-surface-2); --btnfg:var(--kd-ink); --btnb:var(--kd-line);
  --success:var(--kd-good); --warning:var(--kd-warn); --error:var(--kd-bad);
  --tab:var(--kd-surface-2); --tabfg:var(--kd-ink-2); --input:var(--kd-surface);
  --card:var(--kd-surface); --ink:var(--kd-ink); --mut:var(--kd-ink-2);
  --line:var(--kd-line); --acc:var(--kd-blue); --warn:var(--kd-warn);
  --good:var(--kd-good); --bad:var(--kd-bad);
  --c1:#4E9CFF; --c2:#F08A3C; --c3:#3CBE8E; --c4:#D96FD6;
  --c5:#D19A3E; --c6:#9B85FF; --c7:#F0757F;
}
/* modul-maxsus mayda tuzatishlar */
html .btn.primary{background:var(--kd-blue);border-color:var(--kd-blue);color:#fff}
html .chip.on{background:var(--kd-blue);color:#fff}
html nav.top .tabs a.on{background:var(--kd-blue);color:#fff}
html .goalbar .fill{background:var(--kd-blue)}
html .b-blue{background:var(--kd-blue-soft);color:var(--kd-blue-dn)}
html .b-green{background:var(--kd-good-bg);color:var(--kd-good)}
html .b-red{background:var(--kd-bad-bg);color:var(--kd-bad)}
html .b-yellow{background:var(--kd-warn-bg);color:var(--kd-warn)}
html .b-muted{background:var(--kd-surface-2);color:var(--kd-ink-2)}
/* davr filtri — chip ko'rinishida qoladi (pastki chiziqli tab emas) */
html .per .tab{
  border:1px solid var(--kd-line);border-radius:var(--kd-r-pill);
  padding:5px 12px;margin:0;background:var(--kd-surface);color:var(--kd-ink-2)
}
html .per .tab.on{background:var(--kd-blue);border-color:var(--kd-blue);color:#fff}

/* karta ichidagi .note — bu yerda ogohlantirish emas, izoh matni (Sotuv statistikasi) */
html .card .note{
  background:none;border:none;padding:0;margin:4px 0 0;border-radius:0;
  color:var(--kd-ink-2);font-size:12.5px
}
