/* =====================================================================
   ACE CRM — asosiy stil. Manba: docs/draft/ACE_CRM_.html maketi (1:1).
   Maket CSS o'zgarishsiz saqlanadi; loyiha qo'shimchalari FAYL OXIRIDA
   («PROJECT ADDITIONS») — auth-*, pf-*, flash-*, lang-* prefikslari.
   ===================================================================== */
/* ===================================================== */
/* ===== TEMA: kulrang tuslar o'zgaruvchilar orqali ===== */
/* Qorong'i tema — asl qiymatlar; yorug' tema — teskarisi */
/* ===================================================== */
:root {
    --shadow: rgba(0,0,0,.85);
    --g7f8c8d:#7f8c8d;
    --g000000:#000000;
    --g090909:#090909;
    --g0a0a0b:#0a0a0b;
    --g0b0b0c:#0b0b0c;
    --g0d0d0f:#0d0d0f;
    --g0e0e0f:#0e0e0f;
    --g0f0f0f:#0f0f0f;
    --g0f0f10:#0f0f10;
    --g0f1a12:#0f1a12;
    --g101010:#101010;
    --g101011:#101011;
    --g101111:#101111;
    --g111111:#111111;
    --g111112:#111112;
    --g121212:#121212;
    --g131313:#131313;
    --g131314:#131314;
    --g131315:#131315;
    --g14140c:#14140c;
    --g141414:#141414;
    --g141415:#141415;
    --g141416:#141416;
    --g141515:#141515;
    --g151515:#151515;
    --g151516:#151516;
    --g161616:#161616;
    --g161617:#161617;
    --g171715:#171715;
    --g171717:#171717;
    --g171718:#171718;
    --g171719:#171719;
    --g17171a:#17171a;
    --g181710:#181710;
    --g181818:#181818;
    --g181819:#181819;
    --g191919:#191919;
    --g1a1a1a:#1a1a1a;
    --g1a1a1b:#1a1a1b;
    --g1a1a1c:#1a1a1c;
    --g1b1b1b:#1b1b1b;
    --g1b1c1d:#1b1c1d;
    --g1c1a0a:#1c1a0a;
    --g1c1c1c:#1c1c1c;
    --g1c1c1d:#1c1c1d;
    --g1d1a0c:#1d1a0c;
    --g1d1d1e:#1d1d1e;
    --g1e1e1e:#1e1e1e;
    --g1e1e1f:#1e1e1f;
    --g1e1e22:#1e1e22;
    --g1f1f1f:#1f1f1f;
    --g202020:#202020;
    --g222222:#222222;
    --g232323:#232323;
    --g232324:#232324;
    --g242424:#242424;
    --g242425:#242425;
    --g242426:#242426;
    --g252525:#252525;
    --g262626:#262626;
    --g262628:#262628;
    --g272727:#272727;
    --g282828:#282828;
    --g292929:#292929;
    --g2a2a2a:#2a2a2a;
    --g2a2a2c:#2a2a2c;
    --g2a2a2d:#2a2a2d;
    --g2a2a30:#2a2a30;
    --g2c2c2c:#2c2c2c;
    --g2d2d2d:#2d2d2d;
    --g2e2e2e:#2e2e2e;
    --g2f2f2f:#2f2f2f;
    --g333333:#333333;
    --g33333a:#33333a;
    --g343434:#343434;
    --g373737:#373737;
    --g3a3a3a:#3a3a3a;
    --g3a3a3d:#3a3a3d;
    --g444444:#444444;
    --g454545:#454545;
    --g4a4a4a:#4a4a4a;
    --g4a4a50:#4a4a50;
    --g555555:#555555;
    --g5a5a60:#5a5a60;
    --g5f5f5f:#5f5f5f;
    --g666666:#666666;
    --g6a6a6a:#6a6a6a;
    --g6a6a70:#6a6a70;
    --g6f6f75:#6f6f75;
    --g75757a:#75757a;
    --g777777:#777777;
    --g787880:#787880;
    --g7a7a7a:#7a7a7a;
    --g7a7a80:#7a7a80;
    --g7c7c82:#7c7c82;
    --g7d7d7d:#7d7d7d;
    --g7d7d81:#7d7d81;
    --g818181:#818181;
    --g888888:#888888;
    --g8a8a8a:#8a8a8a;
    --g8a8a8e:#8a8a8e;
    --g8a8a90:#8a8a90;
    --g8d8d8d:#8d8d8d;
    --g999999:#999999;
    --g9a9a9a:#9a9a9a;
    --g9a9aa0:#9a9aa0;
    --g9a9aa2:#9a9aa2;
    --g9ca3af:#9ca3af;
    --ga8a8ad:#a8a8ad;
    --gaaaaaa:#aaaaaa;
    --gbbbbbb:#bbbbbb;
    --gbdbdbd:#bdbdbd;
    --gc5c5ca:#c5c5ca;
    --gc6c6c6:#c6c6c6;
    --gc9c9cf:#c9c9cf;
    --gcccccc:#cccccc;
    --gd0d0d0:#d0d0d0;
    --gd3d3d3:#d3d3d3;
    --gd5d5da:#d5d5da;
    --gdcdcdc:#dcdcdc;
    --gdddddd:#dddddd;
    --ge6e6e6:#e6e6e6;
    --ge8e8e8:#e8e8e8;
    --geeeeee:#eeeeee;
    --gf0f0f0:#f0f0f0;
    --gf0f0f2:#f0f0f2;
    --gffffff:#ffffff;
}
:root {
    --tb04200d:#04200d;
    --tb071723:#071723;
    --tb071c0e:#071c0e;
    --tb071c23:#071c23;
    --tb0b3d1e:#0b3d1e;
    --tb0d1f30:#0d1f30;
    --tb0f2a1c:#0f2a1c;
    --tb0f3826:#0f3826;
    --tb0f383c:#0f383c;
    --tb102e50:#102e50;
    --tb10351f:#10351f;
    --tb122c4c:#122c4c;
    --tb12321f:#12321f;
    --tb132a3a:#132a3a;
    --tb1a1600:#1a1600;
    --tb1c1800:#1c1800;
    --tb1e1a00:#1e1a00;
    --tb1f1a08:#1f1a08;
    --tb20200a:#20200a;
    --tf20e86d:#20e86d;
    --tb211400:#211400;
    --tf21df68:#21df68;
    --tb241d05:#241d05;
    --tf24e56b:#24e56b;
    --tf26ced6:#26ced6;
    --tb27230f:#27230f;
    --tb2a0808:#2a0808;
    --tb2a0a1e:#2a0a1e;
    --tb2a1414:#2a1414;
    --tb2a2100:#2a2100;
    --tf2ecc71:#2ecc71;
    --tb331212:#331212;
    --tb332a06:#332a06;
    --tb332b00:#332b00;
    --tb361f49:#361f49;
    --tf39e978:#39e978;
    --tb3a1414:#3a1414;
    --tb3d3418:#3d3418;
    --tf3dd27a:#3dd27a;
    --tf3fd06a:#3fd06a;
    --tb453b12:#453b12;
    --tb472911:#472911;
    --tb473a10:#473a10;
    --tf48d477:#48d477;
    --tb4a3f0a:#4a3f0a;
    --tf4a9eff:#4a9eff;
    --tf4bb8e0:#4bb8e0;
    --tf4bd77e:#4bd77e;
    --tf4bd783:#4bd783;
    --tf4ca8ff:#4ca8ff;
    --tf5597ff:#5597ff;
    --tf59b6ff:#59b6ff;
    --tf5aa9ff:#5aa9ff;
    --tf5fa6ff:#5fa6ff;
    --tfb86cff:#b86cff;
    --tfe3a83c:#e3a83c;
    --tfff6b6b:#ff6b6b;
    --tfff6b9d:#ff6b9d;
    --tfff8080:#ff8080;
    --tfff8b8b:#ff8b8b;
    --tfff8d2b:#ff8d2b;
    --tfff9b9b:#ff9b9b;
    --tfff9f0a:#ff9f0a;
    --tfffb020:#ffb020;
    --tfffd400:#ffd400;
    --tfffd47a:#ffd47a;
    --tfffd76b:#ffd76b;
}
body.theme-light {
    --tb04200d:#d7f4e0;
    --tb071723:#d7e8f4;
    --tb071c0e:#d7f4e1;
    --tb071c23:#d7edf4;
    --tb0b3d1e:#d7f4e2;
    --tb0d1f30:#d7e6f4;
    --tb0f2a1c:#d9f2e5;
    --tb0f3826:#d7f4e7;
    --tb0f383c:#d7f1f4;
    --tb102e50:#d7e5f4;
    --tb10351f:#d8f3e3;
    --tb122c4c:#d7e4f4;
    --tb12321f:#daf2e3;
    --tb132a3a:#d9e8f2;
    --tb1a1600:#f4efd7;
    --tb1c1800:#f4f0d7;
    --tb1e1a00:#f4f0d7;
    --tb1f1a08:#f4edd7;
    --tb20200a:#f3f3d8;
    --tf20e86d:#109944;
    --tb211400:#f4e8d7;
    --tf21df68:#159344;
    --tb241d05:#f4edd7;
    --tf24e56b:#129643;
    --tf26ced6:#198a8f;
    --tb27230f:#f1edda;
    --tb2a0808:#f4d7d7;
    --tb2a0a1e:#f4d7e9;
    --tb2a1414:#efdcdc;
    --tb2a2100:#f4eed7;
    --tf2ecc71:#1f894c;
    --tb331212:#f2d9d9;
    --tb332a06:#f4eed7;
    --tb332b00:#f4efd7;
    --tb361f49:#e6dbf0;
    --tf39e978:#119741;
    --tb3a1414:#f2d9d9;
    --tb3d3418:#f1ebda;
    --tf3dd27a:#20894b;
    --tf3fd06a:#21873f;
    --tb453b12:#f4eed7;
    --tb472911:#f4e4d7;
    --tb473a10:#f4edd7;
    --tf48d477:#208843;
    --tb4a3f0a:#f4efd7;
    --tf4a9eff:#0d4f9c;
    --tf4bb8e0:#197090;
    --tf4bd77e:#1f8a46;
    --tf4bd783:#1f8a49;
    --tf4ca8ff:#0d569c;
    --tf5597ff:#0d449c;
    --tf59b6ff:#0d5d9c;
    --tf5aa9ff:#0d519c;
    --tf5fa6ff:#0d4c9c;
    --tfb86cff:#570d9c;
    --tfe3a83c:#936715;
    --tfff6b6b:#9c0d0d;
    --tfff6b9d:#9c0d3d;
    --tfff8080:#9c0d0d;
    --tfff8b8b:#9c0d0d;
    --tfff8d2b:#9c4f0d;
    --tfff9b9b:#9c0d0d;
    --tfff9f0a:#9c640d;
    --tfffb020:#9c690d;
    --tfffd400:#9c840d;
    --tfffd47a:#9c6d0d;
    --tfffd76b:#9c750d;
    --g000000:#fcfcfc;
    --g090909:#f3f3f3;
    --g0a0a0b:#f2f2f1;
    --g0b0b0c:#f1f1f0;
    --g0d0d0f:#f0f0ee;
    --g0e0e0f:#efefee;
    --g0f0f0f:#eeeeee;
    --g0f0f10:#eeeeed;
    --g0f1a12:#eee3eb;
    --g101010:#ededed;
    --g101011:#ededec;
    --g101111:#edecec;
    --g111111:#ececec;
    --g111112:#ececeb;
    --g121212:#ebebeb;
    --g131313:#eaeaea;
    --g131314:#eaeae9;
    --g131315:#eaeae8;
    --g14140c:#e9e9f0;
    --g141414:#e9e9e9;
    --g141415:#e9e9e8;
    --g141416:#e9e9e7;
    --g141515:#e9e8e8;
    --g151515:#e8e8e8;
    --g151516:#e8e8e7;
    --g161616:#e7e7e7;
    --g161617:#e7e7e6;
    --g171715:#e6e6e8;
    --g171717:#e6e6e6;
    --g171718:#e6e6e5;
    --g171719:#e6e6e4;
    --g17171a:#e6e6e3;
    --g181710:#e5e6ed;
    --g181818:#e5e5e5;
    --g181819:#e5e5e4;
    --g191919:#e4e4e4;
    --g1a1a1a:#e3e3e3;
    --g1a1a1b:#e3e3e2;
    --g1a1a1c:#e3e3e1;
    --g1b1b1b:#e2e2e2;
    --g1b1c1d:#e2e1e0;
    --g1c1a0a:#e1e3f2;
    --g1c1c1c:#e1e1e1;
    --g1c1c1d:#e1e1e0;
    --g1d1a0c:#e0e3f0;
    --g1d1d1e:#e0e0df;
    --g1e1e1e:#dfdfdf;
    --g1e1e1f:#dfdfde;
    --g1e1e22:#dfdfdb;
    --g1f1f1f:#dedede;
    --g202020:#dddddd;
    --g222222:#dbdbdb;
    --g232323:#dadada;
    --g232324:#dadad9;
    --g242424:#d9d9d9;
    --g242425:#d9d9d8;
    --g242426:#d9d9d8;
    --g252525:#d8d8d8;
    --g262626:#d8d8d8;
    --g262628:#d8d8d6;
    --g272727:#d7d7d7;
    --g282828:#d6d6d6;
    --g292929:#d5d5d5;
    --g2a2a2a:#d4d4d4;
    --g2a2a2c:#d4d4d2;
    --g2a2a2d:#d4d4d1;
    --g2a2a30:#d4d4ce;
    --g2c2c2c:#d2d2d2;
    --g2d2d2d:#d1d1d1;
    --g2e2e2e:#d0d0d0;
    --g2f2f2f:#cfcfcf;
    --g333333:#cbcbcb;
    --g33333a:#cbcbc4;
    --g343434:#cacaca;
    --g373737:#c7c7c7;
    --g3a3a3a:#c4c4c4;
    --g3a3a3d:#c4c4c1;
    --g444444:#bbbbbb;
    --g454545:#bababa;
    --g4a4a4a:#b5b5b5;
    --g4a4a50:#b5b5af;
    --g555555:#aaaaaa;
    --g5a5a60:#a6a6a0;
    --g5f5f5f:#a1a1a1;
    --g666666:#9a9a9a;
    --g6a6a6a:#969696;
    --g6a6a70:#969690;
    --g6f6f75:#91918c;
    --g75757a:#8c8c87;
    --g777777:#8a8a8a;
    --g787880:#898981;
    --g7a7a7a:#878787;
    --g7a7a80:#878781;
    --g7c7c82:#85857f;
    --g7d7d7d:#848484;
    --g7d7d81:#848480;
    --g818181:#808080;
    --g888888:#797979;
    --g8a8a8a:#787878;
    --g8a8a8e:#787874;
    --g8a8a90:#787872;
    --g8d8d8d:#757575;
    --g999999:#696969;
    --g9a9a9a:#686868;
    --g9a9aa0:#686862;
    --g9a9aa2:#686860;
    --g9ca3af:#666054;
    --ga8a8ad:#5b5b56;
    --gaaaaaa:#595959;
    --gbbbbbb:#484848;
    --gbdbdbd:#474747;
    --gc5c5ca:#3f3f3a;
    --gc6c6c6:#3e3e3e;
    --gc9c9cf:#3b3b35;
    --gcccccc:#383838;
    --gd0d0d0:#343434;
    --gd3d3d3:#313131;
    --gd5d5da:#30302b;
    --gdcdcdc:#292929;
    --gdddddd:#282828;
    --ge6e6e6:#1f1f1f;
    --ge8e8e8:#1d1d1d;
    --geeeeee:#181818;
    --gf0f0f0:#161616;
    --gf0f0f2:#161614;
    --gffffff:#070707;
}

/* ===================================================== */
/* ===== UMUMIY SOZLAMALAR (Общие настройки) ============ */
/* Bu qiymatlar «Настройка» bo'limidan real vaqtda o'zgaradi */
:root {
    --acc:      #ffc107;   /* dizayn rangi (urg'u) — keyin foydalanuvchi sozlamasidan */
    --acc-2:    #ffd147;   /* urg'uning ochiq soyasi (hover) */
    --acc-55:   #ffc10755; /* urg'u — yarim shaffof chegara */
    --acc-44:   #ffc10744;
    --bg:       #0d0d0d;   /* umumiy fon */
    --font:     'Segoe UI', Arial, sans-serif;
    --cl-yellow: var(--acc);
    --kb-yellow: var(--acc);
}
* { margin:0; padding:0; box-sizing:border-box; font-family: var(--font); }
body { background:var(--bg); color:var(--gffffff); display:flex; height:100vh; overflow:hidden; }

/* ============ SIDEBAR ============ */
.sidebar {
    width: 260px; background:var(--g111111); border-right:1px solid var(--g222222);
    padding:24px 18px; display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden; flex-shrink:0; position:relative;
    transition:width .32s ease, padding .32s ease, border-color .32s ease;
    white-space:nowrap;
}
.sidebar.collapsed { width:0; padding:24px 0; border-right-color:transparent; }
.sidebar.collapsed .sidebar-head,
.sidebar.collapsed .menu-item,
.sidebar.collapsed .submenu { opacity:0; pointer-events:none; }

/* Logo qatori: chapda logotip, o'ngda yig'ish tugmasi */
.sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding-left:6px; }
.sidebar-toggle {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    background:none; border:0; color:var(--g888888); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.18s;
}
.sidebar-toggle svg { width:19px; height:19px; }
.sidebar-toggle:hover { color:var(--acc); background:var(--g1a1a1a); }

/* Panel yopilganda uni ochish tugmasi — topbar ichida, sarlavhadan oldin */
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.sidebar-open-btn {
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:none; border:0; color:var(--g888888); cursor:pointer;
    display:none; align-items:center; justify-content:center; transition:.18s;
}
.sidebar-open-btn svg { width:19px; height:19px; }
.sidebar-open-btn:hover { color:var(--acc); background:var(--g1a1a1a); }
.sidebar-open-btn.show { display:flex; }

.logo { display:flex; align-items:baseline; gap:3px; }
.logo .ad { color:var(--gffffff); font-weight:800; font-size:22px; letter-spacing:.5px; text-shadow:0 0 10px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.22); }
.logo .crm { color:var(--gd0d0d0); font-size:13px; font-weight:600; margin-left:2px; letter-spacing:.5px; text-shadow:0 0 8px rgba(255,255,255,.3); }

.menu-item {
    display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:4px;
    border-radius:8px; cursor:pointer; color:var(--gaaaaaa); font-size:14px; font-weight:500;
    border:1px solid transparent; transition:.2s; position:relative;
}
.menu-item:hover { color:var(--gffffff); background:var(--g1a1a1a); }
.menu-item.active { background:var(--g1c1c1c); color:var(--acc); border:1px solid var(--acc); border-radius:12px; box-shadow:0 0 14px var(--acc-44); }
.menu-item .ic { width:20px; height:20px; text-align:center; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gaaaaaa); }
.menu-item .ic svg { width:20px; height:20px; }
.menu-item.active .ic { color:var(--acc); }
.menu-item:hover .ic { color:var(--gdddddd); }

/* Ichki bo'limlar ro'yxati (Воронка продаж ostida) */
.submenu {
    overflow:hidden; max-height:0; opacity:0;
    transition:max-height .3s ease, opacity .25s ease, margin .3s ease;
    margin:0 0 0 20px; padding-left:12px; position:relative;
}
.submenu.open { max-height:600px; opacity:1; margin:4px 0 10px 20px; }
/* Uzluksiz vertikal chiziq */
.submenu::before {
    content:""; position:absolute; left:0; top:4px; bottom:4px; width:1.5px;
    background:var(--g2a2a2a); border-radius:2px;
}

.submenu-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:3px;
    border-radius:8px; cursor:pointer; color:var(--g9a9aa0); font-size:13px; font-weight:500;
    border:1px solid transparent; transition:.18s; position:relative;
}
.submenu-item:hover { color:var(--gffffff); background:var(--g1a1a1a); }
.submenu-item.active {
    background:var(--g1c1c1c); color:var(--acc); border-color:#5a4708;
    box-shadow:0 0 10px var(--acc-44);
}
/* Faol bo'lim yonida sariq marker */
.submenu-item.active::before {
    content:""; position:absolute; left:-13px; top:50%; transform:translateY(-50%);
    width:1.5px; height:18px; background:var(--acc); border-radius:2px;
}
.submenu-item .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; transition:.18s; }
.submenu-item.active .dot { box-shadow:0 0 6px currentColor; }

/* ==== Jadvalda kompaniya ostida ochiladigan brendlar ==== */
.cl-row-caret { display:inline-flex; width:13px; color:var(--g6a6a6a); font-size:9px;
    transition:transform .22s ease; flex-shrink:0; }
.cl-row-caret.open { transform:rotate(180deg); color:var(--cl-yellow); }
#page-clients tr.cl-brands-row > td { background:var(--g0b0b0c) !important; padding:0 !important;
    border-bottom:1px solid var(--g202020); }
#page-clients tr.cl-brands-row:hover > td { background:var(--g0b0b0c) !important; }
.cl-brands-wrap { padding:11px 16px 13px 60px; display:flex; flex-direction:column; gap:6px; position:relative; }
.cl-brands-wrap::before { content:""; position:absolute; left:44px; top:14px; bottom:14px;
    width:1.5px; background:var(--g282828); border-radius:2px; }
.cl-brands-head { font-size:9px; color:var(--g777777); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.cl-brand-item { display:flex; align-items:center; gap:11px; padding:9px 13px; background:var(--g131314);
    border:1px solid var(--g242424); border-radius:8px; cursor:pointer; transition:.16s; }
.cl-brand-item:hover { border-color:var(--cl-yellow); background:var(--g171715); }
.cl-brand-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cl-brand-name { font-size:11.5px; color:var(--geeeeee); font-weight:600; }
.cl-brand-sub { font-size:9px; color:var(--g777777); margin-top:2px; }
.cl-brand-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.cl-brand-sum { font-size:11px; color:var(--tf39e978); font-weight:600; white-space:nowrap; }
.cl-brand-st { padding:3px 8px; border-radius:5px; font-size:8.5px; white-space:nowrap; }
.cl-brand-st.active { background:var(--tb04200d); color:var(--tf24e56b); border:1px solid #095826; }
.cl-brand-st.done { background:var(--g1a1a1a); color:var(--g9a9a9a); border:1px solid var(--g2c2c2c); }
.cl-brands-empty { font-size:10.5px; color:var(--g5f5f5f); padding:4px 2px; }
.cl-open-card { align-self:flex-start; margin-top:3px; background:var(--g161616); border:1px solid var(--g2e2e2e);
    color:var(--gcccccc); padding:7px 12px; border-radius:7px; font-size:10.5px; cursor:pointer; font-family:inherit; }
.cl-open-card:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }

/* ============ MAIN ============ */
.main { flex:1; display:flex; flex-direction:column; overflow-y:auto; min-width:0; }

/* ============ TOPBAR (global) ============ */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 30px; }
.topbar-title { font-size:20px; color:var(--geeeeee); }
.topbar-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.topbar-settings-btn {
    width:42px; height:42px; border-radius:50%; background:var(--g161616); border:1px solid var(--g2a2a2a);
    display:flex; align-items:center; justify-content:center; color:var(--gaaaaaa); cursor:pointer; transition:.2s; flex-shrink:0;
}
.topbar-settings-btn svg { width:20px; height:20px; }
.topbar-settings-btn:hover { border-color:var(--acc); color:var(--acc); transform:rotate(45deg); }
.topbar-settings-btn.disabled { opacity:.35; cursor:not-allowed; }
.topbar-settings-btn.disabled:hover { border-color:var(--g2a2a2a); color:var(--gaaaaaa); transform:none; }
.bell-wrap { position:relative; cursor:pointer; }
/* Bildirishnomalar va profil menyusi */
.tb-drop { display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:400; width:330px;
    background:var(--g101011); border:1px solid var(--g333333); border-radius:12px; box-shadow:0 20px 60px var(--shadow); overflow:hidden; }
.tb-drop.open { display:block; }
.tb-drop-head { padding:12px 15px; border-bottom:1px solid var(--g232323); display:flex; justify-content:space-between; align-items:center; }
.tb-drop-head h4 { font-size:13px; font-weight:700; }
.tb-drop-head a { font-size:11px; color:var(--acc); cursor:pointer; }
.tb-drop-body { max-height:340px; overflow-y:auto; }
.tb-note { display:flex; gap:11px; padding:11px 15px; border-bottom:1px solid var(--g1c1c1c); cursor:pointer; }
.tb-note:last-child { border-bottom:0; }
.tb-note:hover { background:var(--g171717); }
.tb-note.unread { background:var(--g14140c); }
.tb-note-ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.tb-note-b { flex:1; min-width:0; }
.tb-note-t { font-size:12px; color:var(--ge6e6e6); margin-bottom:2px; }
.tb-note-s { font-size:10.5px; color:var(--g7d7d7d); }
.tb-note-dot { width:7px; height:7px; border-radius:50%; background:var(--acc); flex-shrink:0; margin-top:6px; }
.tb-drop-empty { padding:26px 15px; text-align:center; color:var(--g666666); font-size:12px; }
.tb-menu-item { display:flex; align-items:center; gap:10px; padding:11px 15px; font-size:12.5px; color:var(--gdddddd); cursor:pointer; border-bottom:1px solid var(--g1c1c1c); }
.tb-menu-item:last-child { border-bottom:0; }
.tb-menu-item:hover { background:var(--g171717); color:var(--acc); }
.tb-user { padding:14px 15px; border-bottom:1px solid var(--g232323); display:flex; gap:11px; align-items:center; }
.tb-user-ava { width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,var(--tb3d3418),var(--g1d1a0c));
    border:1px solid var(--acc-55); color:var(--acc); display:grid; place-items:center; font-weight:800; font-size:13px; }
.tb-user-n { font-size:13px; font-weight:700; }
.tb-user-r { font-size:11px; color:var(--g888888); }
.bell {
    width:42px; height:42px; border-radius:50%; background:none; border:1.5px solid var(--g3a3a3d);
    display:flex; align-items:center; justify-content:center; color:var(--acc); transition:.18s;
}
.bell svg { width:20px; height:20px; }
.bell-wrap:hover .bell { border-color:var(--acc); background:var(--tb1a1600); }
.bell-badge {
    position:absolute; top:-3px; right:-3px; background:var(--acc); color:var(--g000000); font-size:11px;
    font-weight:800; width:20px; height:20px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; border:2px solid var(--bg);
}
.topbar .avatar {
    width:42px; height:42px; border-radius:50%; background:none; border:1.5px solid var(--g3a3a3d);
    display:flex; align-items:center; justify-content:center; color:var(--gc9c9cf);
    cursor:pointer; transition:.18s;
}
.topbar .avatar svg { width:20px; height:20px; }
.topbar .avatar:hover { border-color:var(--acc); color:var(--acc); }

/* ============ PAGE WRAPPER ============ */
.page { display:none; padding: 0 30px 30px; flex-direction:column; gap:22px; }
.page.active { display:flex; }

/* ===================================================== */
/* ================ DASHBOARD PAGE ================ */
/* ===================================================== */
.welcome { background:var(--g141414); border:1px solid var(--g232323); border-radius:16px; padding:26px 30px; display:flex; align-items:center; gap:24px; }
.welcome-icon {
    width:70px; height:70px; border-radius:14px; border:2px solid var(--acc); display:flex;
    flex-direction:column; align-items:center; justify-content:center; color:var(--acc);
    font-weight:800; font-size:20px; position:relative;
}
.welcome-icon:after { content:''; position:absolute; bottom:-10px; width:26px; height:3px; background:var(--acc); border-radius:2px; }
.welcome h1 { font-size:22px; margin-bottom:10px; }
.welcome .meta { display:flex; gap:20px; color:var(--g999999); font-size:13.5px; margin-bottom:16px; }
.welcome .meta span { display:flex; align-items:center; gap:6px; }
.start-btn {
    background:var(--acc); color:var(--g000000); border:none; padding:11px 22px; border-radius:8px;
    font-weight:700; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.start-btn:hover { background:var(--acc-2); }

.grid-top { display:grid; grid-template-columns: 1fr 1.7fr; gap: 22px; align-items:start; }
.col-left { display:flex; flex-direction:column; gap:22px; }
.col-right { display:flex; flex-direction:column; gap:22px; }

.panel { background:var(--g141414); border:1px solid var(--g232323); border-radius:16px; padding:22px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-head h3 { font-size:16px; font-weight:700; }
.panel-head a { color:var(--acc); font-size:12.5px; text-decoration:none; font-weight:600; }

.task-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--g1e1e1e); font-size:13.5px; }
.task-row:last-child { border-bottom:none; padding-bottom:0; }
.task-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; }
.task-row .name { flex:1; color:var(--geeeeee); }
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.task-time { color:var(--g999999); font-size:12.5px; min-width:38px; text-align:right; }

.chat-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--g1e1e1e); }
.chat-row:last-child { border-bottom:none; padding-bottom:0; }
.chat-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gffffff); flex-shrink:0; }
.chat-body { flex:1; min-width:0; }
.chat-body .name { font-size:13.5px; font-weight:600; margin-bottom:2px; }
.chat-body .msg { font-size:12px; color:var(--g999999); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-right { text-align:right; flex-shrink:0; }
.chat-time { font-size:11.5px; color:var(--g777777); margin-bottom:4px; }
.chat-badge { background:var(--acc); color:var(--g000000); font-size:10.5px; font-weight:800; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }

.tabs { display:flex; align-items:center; gap:18px; font-size:13px; color:var(--g999999); }
.tabs .active { color:var(--acc); font-weight:700; border-bottom:2px solid var(--acc); padding-bottom:2px; }
.tabs .range { color:var(--g777777); font-size:12px; margin-left:6px; }

.contacts-row { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; margin-bottom:16px; }
.contact-box { background:var(--g1a1a1a); border:1px solid var(--g262626); border-radius:12px; padding:14px 16px; }
.contact-box .label { font-size:12px; color:var(--g999999); margin-bottom:10px; }
.contact-box .value { display:flex; align-items:center; justify-content:space-between; }
.contact-box .num { font-size:26px; font-weight:800; }
.contact-box .icon { font-size:18px; }

.stats-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat-box { background:var(--g1a1a1a); border:1px solid var(--g262626); border-radius:12px; padding:14px 16px; }
.stat-box .label { font-size:12px; color:var(--g999999); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.stat-box .num { font-size:26px; font-weight:800; }
.stat-box .sub { font-size:11.5px; color:var(--g777777); margin-top:4px; }

.grid-bottom { display:grid; grid-template-columns: 1.7fr 1fr; gap:22px; }
.chart-legend { display:flex; gap:16px; font-size:12px; color:var(--g999999); }
.chart-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.chart-box { height:230px; margin-top:14px; }

.payments-num { font-size:30px; font-weight:800; margin:6px 0 2px; }
.payments-sub { color:var(--g999999); font-size:12.5px; margin-bottom:18px; }
.check-circle { width:34px; height:34px; border-radius:50%; border:2px solid var(--tf2ecc71); display:flex; align-items:center; justify-content:center; color:var(--tf2ecc71); font-size:16px; }
.payments-top { display:flex; justify-content:space-between; align-items:flex-start; }

.donut-wrap { display:flex; align-items:center; gap:18px; margin-top:10px; }
.donut-canvas-box { position:relative; width:120px; height:120px; flex-shrink:0; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center .amt { font-size:13px; font-weight:800; }
.donut-center .lbl { font-size:10px; color:var(--g888888); }
.legend-list { display:flex; flex-direction:column; gap:8px; font-size:12px; }
.legend-list li { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.legend-list li .l { display:flex; align-items:center; gap:8px; color:var(--gcccccc); }
.legend-list li .p { color:var(--gffffff); font-weight:600; }

/* ===================================================== */
/* ================ VORONKA (FUNNEL) PAGE ================ */
/* ===================================================== */
.fn-header { display:flex; justify-content:space-between; align-items:center; }
.fn-header h1 { font-size:26px; margin-bottom:8px; }
.fn-header p { color:var(--g999999); font-size:13.5px; max-width:560px; }
.fn-create { background:var(--acc); border:0; border-radius:10px; padding:14px 22px; font-weight:700; font-size:14px; cursor:pointer; color:var(--g000000); flex-shrink:0; }
.fn-create:hover { background:var(--acc-2); }

/* ===================================================== */
/* ============ НАСТРОЙКИ ADBUS (MODAL) ================ */
/* ===================================================== */
/* ===================================================== */
/* ====== YARATISH FORMALARI (umumiy modal uslubi) ====== */
/* ===================================================== */
/* ===================================================== */
/* ===== FILTRLARNI BOSHQARISH (Изменить) OYNASI ======== */
/* ===================================================== */
.qf-row { display:flex; align-items:center; gap:10px; background:var(--g161617); border:1px solid var(--g262626); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.qf-row .qf-order { display:flex; flex-direction:column; gap:2px; }
.qf-order-btn { width:22px; height:18px; border-radius:4px; background:var(--g1e1e1e); border:1px solid var(--g333333); color:var(--g999999); font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.qf-order-btn:hover:not(:disabled) { border-color:var(--acc); color:var(--acc); }
.qf-order-btn:disabled { opacity:.3; cursor:not-allowed; }
.qf-row .qf-name { flex:1; color:var(--geeeeee); font-size:13px; font-weight:600; }
.qf-row .qf-del { width:28px; height:28px; border-radius:7px; background:var(--tb2a1414); border:1px solid #4a1e1e; color:var(--tfff8080); cursor:pointer; flex-shrink:0; }
.qf-row .qf-del:hover { background:var(--tb3a1414); }
.qf-empty { text-align:center; padding:30px; color:var(--g666666); font-size:12.5px; }

/* ===================================================== */
/* ====== ТЕКУЩАЯ ЗАДАЧА (Выполнить) — forma ============ */
/* ===================================================== */
.tz-group {
    background:var(--g131315); border:1px solid var(--g242426); border-radius:12px;
    padding:18px 20px; margin-bottom:14px;
}
.tz-group:last-child { margin-bottom:0; }
.tz-label { display:block; color:var(--gc9c9cf); font-size:13.5px; margin-bottom:10px; font-weight:400; }
.tz-hint { color:var(--g6f6f75); font-size:10.5px; margin-top:6px; line-height:1.5; }
.tz-input {
    width:100%; background:var(--g0d0d0f); border:1px solid var(--g2a2a2d); color:var(--geeeeee);
    padding:12px 14px; border-radius:9px; font-size:13px; font-family:inherit;
    transition:border-color .16s;
}
.tz-input::placeholder { color:var(--g5a5a60); }
/* «Текущая задача» — vazifani tanlash ro'yxati */
.tz-pick-wrap { position:relative; }
.tz-pick-wrap .tz-input { padding-right:42px; }
.tz-pick-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border:0; border-radius:7px; background:var(--g1e1e22); color:var(--g9a9aa2);
    cursor:pointer; font-size:11px; display:grid; place-items:center; }
.tz-pick-btn:hover { background:var(--g2a2a30); color:var(--acc); }
.tz-pick-drop { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:250;
    max-height:250px; overflow-y:auto; background:var(--g0f0f10); border:1px solid var(--g3a3a3a);
    border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.75); }
.tz-pick-drop.open { display:block; }
.tz-pick-head { font-size:8.5px; color:var(--g777777); text-transform:uppercase; letter-spacing:.6px;
    padding:9px 13px 6px; border-bottom:1px solid var(--g232323); }
.tz-pick-item { display:flex; align-items:center; gap:10px; padding:10px 13px; cursor:pointer;
    border-bottom:1px solid var(--g1b1b1b); }
.tz-pick-item:last-child { border-bottom:0; }
.tz-pick-item:hover, .tz-pick-item.active { background:var(--g1a1a1a); }
.tz-pick-info { flex:1; min-width:0; }
.tz-pick-t { font-size:12.5px; color:var(--ge8e8e8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tz-pick-s { font-size:10.5px; color:var(--g777777); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tz-pick-empty { padding:16px 13px; text-align:center; color:var(--g666666); font-size:11.5px; }
.tz-pick-hint { font-size:10.5px; color:var(--tfffb020); margin-top:6px; display:none; }
.tz-pick-hint.show { display:block; }
/* Kartochka «Задачи» bo'limidagi kichkina «+» tugmasi */
.kb-task-run { width:22px; height:22px; border-radius:6px; border:1px solid var(--acc-55);
    background:var(--tb332a06); color:var(--acc); font-size:14px; line-height:1; cursor:pointer;
    display:grid; place-items:center; flex-shrink:0; padding:0; }
.kb-task-run:hover { background:var(--acc); color:var(--g111111); border-color:var(--acc); }
.tz-input:focus { outline:none; border-color:var(--acc); }
.tz-textarea { min-height:110px; resize:vertical; }
.tz-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px){ .tz-grid{ grid-template-columns:1fr; } }

.cr-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:600; }
.cr-modal.show { display:flex; }
.cr-card { width:720px; max-width:94%; max-height:92vh; display:flex; flex-direction:column; background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:16px; box-shadow:0 20px 80px var(--shadow); }
.cr-head { display:flex; align-items:flex-start; gap:14px; padding:20px 24px; border-bottom:1px solid var(--g2a2a2a); }
.cr-head-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.cr-head-ic svg { width:22px; height:22px; }
.cr-head-txt { flex:1; }
.cr-head h2 { font-size:19px; margin-bottom:4px; }
.cr-head p { color:var(--g888888); font-size:12px; }
.cr-close { background:none; border:0; color:var(--gaaaaaa); font-size:26px; cursor:pointer; line-height:1; }
.cr-close:hover { color:var(--gffffff); }

.cr-body { padding:20px 24px; overflow-y:auto; flex:1; }
.cr-section { margin-bottom:20px; }
.cr-section:last-child { margin-bottom:0; }
.cr-section-title { font-size:11px; color:var(--g777777); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--g232323); }
.cr-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.cr-field { display:flex; flex-direction:column; gap:6px; }
.cr-field.full { grid-column:span 2; }
.cr-field label { color:var(--g999999); font-size:11.5px; }
.cr-field label .req { color:var(--tfff6b6b); }
.cr-field input, .cr-field select, .cr-field textarea {
    background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--geeeeee); padding:10px 12px;
    border-radius:8px; font-size:12.5px; font-family:inherit; width:100%;
}
.cr-field textarea { resize:vertical; min-height:70px; }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus { outline:none; border-color:var(--acc); }
.cr-field input.cr-invalid, .cr-field select.cr-invalid { border-color:var(--tfff6b6b); }
.cr-hint { color:var(--g666666); font-size:10.5px; }

/* Chip tanlagich (status, prioritet va h.k.) */
/* Tanlanmagan select — matn kulrang, ya'ni «Выбрать» placeholder kabi ko'rinadi */
.cr-field select.cr-empty { color:var(--g6a6a6a); }
.cr-field select.cr-empty option { color:var(--gdddddd); }
.cr-field select.cr-empty option[value=""] { color:var(--g6a6a6a); }

/* ===================================================== */
/* ===== UMUMIY SOZLAMALAR SAHIFASI ==================== */
/* ===================================================== */
.st-wrap { padding:22px 24px 40px; overflow-y:auto; height:100%; }
.st-head h1 { font-size:21px; margin-bottom:4px; }
.st-head p { color:var(--g777777); font-size:12px; margin-bottom:20px; }
.st-card { background:var(--g131314); border:1px solid var(--g262626); border-radius:12px;
    padding:20px 22px; margin-bottom:16px; max-width:860px; }
.st-card h3 { font-size:14.5px; margin-bottom:4px; }
.st-card .sub { color:var(--g777777); font-size:11.5px; margin-bottom:16px; }
.st-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* O'lcham tugmalari */
.st-opt { padding:9px 16px; border-radius:8px; border:1px solid var(--g333333); background:var(--g1a1a1a);
    color:var(--gbbbbbb); font-size:12.5px; cursor:pointer; font-family:inherit; transition:.15s; }
.st-opt:hover { border-color:var(--g555555); color:var(--geeeeee); }
.st-opt.active { background:var(--acc); border-color:var(--acc); color:var(--g111111); font-weight:700; }

/* Rang doiralari */
.st-color { width:38px; height:38px; border-radius:10px; border:2px solid transparent;
    cursor:pointer; position:relative; transition:.15s; }
.st-color:hover { transform:translateY(-2px); }
.st-color.active { border-color:var(--gffffff); }
.st-color.active::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
    color:var(--g111111); font-size:16px; font-weight:800; }

/* Fon namunalari */
.st-bg { width:74px; height:52px; border-radius:9px; border:2px solid var(--g2c2c2c); cursor:pointer;
    display:grid; place-items:center; font-size:9.5px; color:var(--g888888); transition:.15s; }
.st-bg:hover { border-color:var(--g555555); }
.st-bg.active { border-color:var(--acc); color:var(--acc); }

/* Shrift namunalari */
.st-font { padding:10px 16px; border-radius:8px; border:1px solid var(--g333333); background:var(--g1a1a1a);
    color:var(--gcccccc); font-size:13px; cursor:pointer; transition:.15s; }
.st-font:hover { border-color:var(--g555555); color:var(--gffffff); }
.st-font.active { border-color:var(--acc); color:var(--acc); background:var(--tb1f1a08); }

.st-sep { font-size:10.5px; color:var(--g777777); text-transform:uppercase; letter-spacing:.6px;
    margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--g232323); }
.st-picker { width:44px; height:36px; padding:2px; border:1px solid var(--g333333);
    border-radius:7px; background:var(--g171717); cursor:pointer; }
.st-color .st-del { position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
    background:#e04747; color:#fff; font-size:10px; line-height:16px; text-align:center; display:none; }
.st-color.custom:hover .st-del { display:block; }
.st-bg-preview { margin-top:14px; height:120px; border-radius:10px; border:1px solid var(--g262626);
    background-size:cover; background-position:center; }
/* Fon rasmi — butun ilova ostida */
body.has-bg-img { background-image:var(--bg-img); background-size:cover;
    background-position:center; background-attachment:fixed; }
body.has-bg-img::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:var(--bg); opacity:var(--bg-dim, .55); }
body.has-bg-img > * { position:relative; z-index:1; }

.st-preview { margin-top:18px; padding:16px 18px; border:1px solid var(--g262626); border-radius:10px;
    background:var(--bg); }
.st-preview .t { font-size:13px; margin-bottom:10px; }
.st-actions { display:flex; gap:10px; margin-top:6px; }
.st-hex { width:110px; height:36px; background:var(--g171717); border:1px solid var(--g333333); border-radius:7px;
    color:var(--gdddddd); padding:0 10px; font-size:12px; font-family:inherit; }

/* ===================================================== */
/* ===== TEMA GALEREYASI (Общие настройки → Тема) ======= */
/* ===================================================== */
.st-th-group { font-size:10.5px; color:var(--g777777); text-transform:uppercase; letter-spacing:.6px;
    margin:16px 0 10px; }
.st-th-group:first-child { margin-top:2px; }
.st-th-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:12px; }
.st-th { border:2px solid var(--g2c2c2c); border-radius:12px; padding:8px 8px 9px; cursor:pointer;
    background:var(--g171718); transition:.16s; }
.st-th:hover { border-color:var(--g555555); transform:translateY(-2px); }
.st-th.active { border-color:var(--acc); }
.st-th-prev { height:74px; border-radius:8px; overflow:hidden; display:flex; gap:5px; padding:5px; }
.st-th-side { width:22px; border-radius:5px; padding:4px 3px; display:flex; flex-direction:column; gap:4px; }
.st-th-side i { display:block; height:5px; border-radius:2px; }
.st-th-main { flex:1; display:flex; flex-direction:column; gap:5px; }
.st-th-card { flex:1; border-radius:6px; padding:5px 6px; display:flex; flex-direction:column;
    justify-content:center; gap:4px; }
.st-th-card b { display:block; height:5px; width:46%; border-radius:2px; }
.st-th-card u { display:block; height:4px; width:78%; border-radius:2px; opacity:.75; }
.st-th-name { font-size:11.5px; margin-top:8px; color:var(--geeeeee); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-th.active .st-th-name { color:var(--acc); }
.st-th-sub { font-size:10px; color:var(--g777777); margin-top:3px; line-height:1.4; }
/* Dizayn kartochkalari kengroq — tavsif ikki qatorga sig'sin */
#stDesignRow { grid-template-columns:repeat(auto-fill, minmax(215px, 230px)); }
#stDesignRow .st-th-prev { height:88px; }

/* Qora/oq almashtirgich — bitta tugma */
.st-toggle { display:flex; align-items:center; gap:14px; padding:12px 16px; cursor:pointer;
    background:var(--g1a1a1a); border:1px solid var(--g333333); border-radius:12px;
    color:var(--geeeeee); font-family:inherit; min-width:330px; transition:.18s; }
.st-toggle:hover { border-color:var(--acc); }
.st-toggle-ic { font-size:20px; line-height:1; }
.st-toggle-tx { flex:1; text-align:left; }
.st-toggle-tx b { display:block; font-size:13.5px; }
.st-toggle-tx i { display:block; font-size:10.5px; color:var(--g888888); font-style:normal; margin-top:2px; }
.st-toggle-sw { width:44px; height:24px; border-radius:20px; background:var(--g333333);
    position:relative; flex-shrink:0; transition:background .2s; }
.st-toggle-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:var(--gdddddd); transition:transform .2s, background .2s; }
body.theme-light .st-toggle-sw { background:var(--acc); }
body.theme-light .st-toggle-knob { transform:translateX(20px); background:#ffffff; }

/* Fon tonlari */
.st-bg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; }
.st-tone { border:2px solid var(--g2c2c2c); border-radius:11px; padding:6px 6px 7px; cursor:pointer;
    background:var(--g171718); transition:.16s; }
.st-tone:hover { border-color:var(--g555555); transform:translateY(-2px); }
.st-tone.active { border-color:var(--acc); }
.st-tone-prev { height:44px; border-radius:7px; display:flex; align-items:center; gap:5px; padding:6px; }
.st-tone-prev i { display:block; height:100%; border-radius:4px; }
.st-tone-prev i.a { width:26%; }
.st-tone-prev i.b { flex:1; }
.st-tone-n { font-size:11px; margin-top:6px; color:var(--gdddddd); text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-tone.active .st-tone-n { color:var(--acc); font-weight:600; }
.st-tone { position:relative; }
.st-tone .st-del { position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:50%;
    background:#e04747; color:#fff; font-size:10px; line-height:17px; text-align:center; display:none; }
.st-tone.custom:hover .st-del { display:block; }

/* Yuqori paneldagi qora/oq tugmasi */
.topbar-mode-btn { width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:var(--g161616); border:1px solid var(--g2a2a2a); color:var(--gaaaaaa); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px; transition:.18s; }
.topbar-mode-btn:hover { border-color:var(--acc); }

/* ===================================================== */
/* ===== YUMSHOQ RELYEF (neumorfizm) — tema qo'shimchasi  */
/* Chegaralar o'rniga yorug'lik/soya. Qiymatlar JS orqali */
/* body ga inline o'rnatiladi (--rf-*).                   */
/* ===================================================== */
body.relief {
    --rf-up:  var(--rf-o) var(--rf-o) var(--rf-b) var(--rf-dk),
              calc(-1 * var(--rf-o)) calc(-1 * var(--rf-o)) var(--rf-b) var(--rf-lt);
    --rf-up2: var(--rf-o2) var(--rf-o2) var(--rf-b2) var(--rf-dk),
              calc(-1 * var(--rf-o2)) calc(-1 * var(--rf-o2)) var(--rf-b2) var(--rf-lt);
    --rf-in:  inset var(--rf-o2) var(--rf-o2) var(--rf-b2) var(--rf-dk),
              inset calc(-1 * var(--rf-o2)) calc(-1 * var(--rf-o2)) var(--rf-b2) var(--rf-lt);
}

/* --- A. Katta yuzalar: panellar, kartochkalar, modal oynalar --- */
body.relief .panel,
body.relief .stat-box,
body.relief .contact-box,
body.relief .st-card,
body.relief .cr-card,
body.relief .fn-card,
body.relief .vz-panel,
body.relief .vz-list-card,
body.relief .vz-manager-box,
body.relief .vz-filters,
body.relief .kb-column,
body.relief .kb-filters,
body.relief .kb-summary-accordion,
body.relief .cl-table-wrap,
body.relief .tb-drop,
body.relief .kb-modal-card,
body.relief .vz-modal-card,
body.relief .ks-modal-card,
body.relief .fs-modal-card,
body.relief .cr-modal-card {
    border-color:transparent !important;
    border-radius:var(--rf-r) !important;
    box-shadow:var(--rf-up) !important;
}

/* --- B. Boshqaruv elementlari: tugmalar, chiplar --- */
body.relief .st-opt,
body.relief .st-font,
body.relief .st-picker,
body.relief .cr-btn,
body.relief .cr-chip,
body.relief .fs-btn,
body.relief .fs-order-btn,
body.relief .vz-btn,
body.relief .vz-nav-btn,
body.relief .vz-add-btn,
body.relief .vz-day-back,
body.relief .kb-back,
body.relief .kb-tool-btn,
body.relief .kb-add-deal,
body.relief .kb-f-btn,
body.relief .kb-view-toggle,
body.relief .tz-pick-btn,
body.relief .qf-order-btn,
body.relief .cl-open-card,
body.relief .cl-brand-item,
body.relief .cl-tool-btn,
body.relief .cl-filter-btn,
body.relief .cl-quick-filter,
body.relief .cl-page,
body.relief .mg-btn,
body.relief .mg-add-btn,
body.relief .topbar-settings-btn,
body.relief .st-bg,
body.relief .vz-sub-pagination button {
    border-color:transparent !important;
    border-radius:var(--rf-rs) !important;
    box-shadow:var(--rf-up2) !important;
}
body.relief .st-opt:active,
body.relief .cr-btn:active,
body.relief .fs-btn:active,
body.relief .vz-btn:active,
body.relief .kb-tool-btn:active,
body.relief .kb-add-deal:active,
body.relief .kb-f-btn:active { box-shadow:var(--rf-in) !important; }

/* --- C. Kiritish maydonlari: botiq (inset) relyef --- */
body.relief .cr-field input,
body.relief .cr-field select,
body.relief .cr-field textarea,
body.relief .fs-field input,
body.relief .fs-field select,
body.relief .fs-field textarea,
body.relief .fs-hex-input,
body.relief .st-hex,
body.relief .ms-field,
body.relief .kb-search,
body.relief .kb-select,
body.relief .cl-search,
body.relief .vz-search,
body.relief .kb-f-group select,
body.relief .kb-f-group input,
body.relief .vz-filters select,
body.relief .vz-field-edit,
body.relief .vz-deadline-edit input,
body.relief .vz-comment textarea {
    border-color:transparent !important;
    border-radius:var(--rf-rs) !important;
    box-shadow:var(--rf-in) !important;
}

/* --- D. Kanban kartochkalari va yon panel — yengil relyef --- */
body.relief .kb-card {
    border-color:transparent !important;
    border-radius:var(--rf-rs) !important;
    box-shadow:var(--rf-up2) !important;
}
body.relief .kb-card:hover { box-shadow:var(--rf-in) !important; }
body.relief .sidebar { border-right-color:transparent !important; box-shadow:var(--rf-up) !important; }
body.relief .menu-item.active { border-radius:var(--rf-rs) !important; box-shadow:var(--rf-up2) !important; }

/* ===================================================== */
/* ===== KO'P TANLOVLI MAYDON (teglar + ro'yxat) ======== */
/* ===================================================== */
.ms { position:relative; }
.ms-field { min-height:44px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    padding:8px 34px 8px 10px; background:var(--g151515); border:1px solid var(--g333333); border-radius:8px;
    cursor:text; transition:border-color .15s; }
.ms-field:hover { border-color:var(--g454545); }
.ms.open .ms-field { border-color:var(--acc); }
.ms-chip { display:inline-flex; align-items:center; gap:7px; padding:4px 7px 4px 9px;
    border-radius:6px; background:var(--tb332a06); border:1px solid var(--acc-55); color:var(--acc);
    font-size:11.5px; line-height:1.2; white-space:nowrap; }
.ms-chip .x { cursor:pointer; font-weight:700; opacity:.75; font-size:13px; line-height:1; }
.ms-chip .x:hover { opacity:1; color:var(--gffffff); }
/* Umumiy .cr-field input / .tz-input uslublarini bekor qilamiz */
.ms .ms-input, .cr-field .ms .ms-input {
    flex:1 1 90px; min-width:70px; width:auto; height:auto;
    background:none !important; border:0 !important; border-radius:0;
    outline:none; box-shadow:none;
    color:var(--gdddddd); font-size:12.5px; font-family:inherit; padding:2px 0; margin:0;
}
.ms .ms-input:focus { border:0 !important; outline:none; }
.ms-input::placeholder { color:var(--g5a5a60); }
.ms-caret { position:absolute; right:12px; top:14px; color:var(--g7a7a7a); font-size:10px; pointer-events:none; }
.ms-drop { display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:300;
    max-height:238px; overflow-y:auto; background:var(--g0f0f10); border:1px solid var(--g3a3a3a);
    border-radius:9px; box-shadow:0 18px 50px rgba(0,0,0,.75); }
.ms.open .ms-drop { display:block; }
.ms-opt { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer;
    font-size:12.5px; color:var(--gdcdcdc); border-bottom:1px solid var(--g171717); }
.ms-opt:last-child { border-bottom:0; }
.ms-opt:hover, .ms-opt.active { background:var(--g1a1a1a); }
.ms-opt.sel { color:var(--acc); }
.ms-box { width:15px; height:15px; border:1px solid var(--g4a4a4a); border-radius:4px; flex-shrink:0;
    display:grid; place-items:center; font-size:10px; color:transparent; line-height:1; }
.ms-opt.sel .ms-box { background:var(--acc); border-color:var(--acc); color:var(--g111111); }
.ms-all { border-bottom:1px solid var(--g2a2a2a); background:var(--g131313); font-weight:600; color:var(--gbdbdbd); }
.ms-all:hover { background:var(--g1c1c1c); }
.ms-empty { padding:16px 12px; text-align:center; color:var(--g666666); font-size:11.5px; }

/* ===== Qidiruvli maydon (kompaniya nomi) ===== */
.cr-ac-wrap { position:relative; }
.cr-ac-drop { display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:200;
    max-height:270px; overflow-y:auto; background:var(--g0f0f10); border:1px solid var(--g3a3a3a);
    border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.75); }
.cr-ac-drop.open { display:block; }
.cr-ac-head { font-size:8.5px; color:var(--g777777); text-transform:uppercase; letter-spacing:.6px;
    padding:9px 13px 6px; border-bottom:1px solid var(--g232323); }
.cr-ac-item { display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer;
    border-bottom:1px solid var(--g1b1b1b); }
.cr-ac-item:last-child { border-bottom:0; }
.cr-ac-item:hover, .cr-ac-item.active { background:var(--g1a1a1a); }
.cr-ac-ava { width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
    font-size:10.5px; font-weight:800; color:var(--gffffff); flex-shrink:0; }
.cr-ac-info { flex:1; min-width:0; }
.cr-ac-nm { font-size:12.5px; color:var(--ge8e8e8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-ac-nm b { color:var(--acc); font-weight:800; }
.cr-ac-sub { font-size:10.5px; color:var(--g777777); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-ac-tag { font-size:9.5px; padding:3px 7px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.cr-ac-tag.funnel { background:var(--tb332a06); color:var(--acc); border:1px solid var(--acc-44); }
.cr-ac-tag.base   { background:var(--tb12321f); color:var(--tf4bd783); border:1px solid #4bd78344; }
.cr-ac-tag.arch   { background:var(--g242424); color:var(--g8a8a8a); border:1px solid var(--g3a3a3a); }
.cr-ac-new { display:flex; align-items:center; gap:10px; padding:10px 13px; cursor:pointer;
    border-top:1px solid var(--g262626); background:var(--g121212); }
.cr-ac-new:hover, .cr-ac-new.active { background:var(--g1c1c1c); }
.cr-ac-new .plus { width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
    background:var(--tb332a06); color:var(--acc); font-size:15px; flex-shrink:0; }
.cr-ac-new .txt { font-size:12.5px; color:var(--acc); }
.cr-ac-empty { padding:16px 13px; text-align:center; color:var(--g666666); font-size:11.5px; }
/* Mavjud kompaniya tanlanganda maydon ostidagi eslatma */
.cr-ac-note { font-size:10.5px; margin-top:5px; display:none; }
.cr-ac-note.show { display:block; }
.cr-ac-note.warn { color:var(--tfffb020); }
.cr-ac-note.ok   { color:var(--tf4bd783); }

.cr-chips { display:flex; gap:8px; flex-wrap:wrap; }
.cr-chip { padding:8px 14px; border-radius:20px; border:1px solid var(--g2d2d2d); background:var(--g141414); color:var(--g999999); font-size:12px; cursor:pointer; transition:.15s; }
.cr-chip:hover { border-color:var(--g555555); color:var(--gdddddd); }
.cr-chip.active { background:var(--acc); border-color:var(--acc); color:var(--g111111); font-weight:700; }

.cr-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); }
.cr-error.show { margin-right:auto; }
.cr-actions-right { display:flex; gap:10px; }
.cr-btn { padding:11px 20px; border-radius:9px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:13px; font-family:inherit; }
.cr-btn:hover { border-color:var(--acc); color:var(--acc); }
.cr-btn.primary { background:var(--acc); color:var(--g111111); border:0; font-weight:800; }
.cr-btn.primary:hover { background:var(--acc-2); color:var(--g111111); }
.cr-error { color:var(--tfff6b6b); font-size:11.5px; display:none; }
.cr-error.show { display:block; }

@media(max-width:700px){ .cr-grid{ grid-template-columns:1fr; } .cr-field.full{ grid-column:span 1; } }

.fs-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:500; }
.fs-modal.show { display:flex; }
.fs-modal-card { width:860px; max-width:94%; max-height:90vh; display:flex; flex-direction:column; background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:15px; box-shadow:0 20px 80px var(--shadow); }
.fs-modal-head { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid var(--g2a2a2a); }
.fs-modal-head h2 { font-size:20px; margin-bottom:5px; }
.fs-modal-head p { color:var(--g888888); font-size:12.5px; }
.fs-close { background:none; border:0; color:var(--gaaaaaa); font-size:26px; cursor:pointer; line-height:1; }
.fs-close:hover { color:var(--gffffff); }
.fs-modal-body { padding:18px 24px; overflow-y:auto; flex:1; }
.fs-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); }
.fs-btn { padding:11px 20px; border-radius:8px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:13px; }
.fs-btn.primary { background:var(--acc); color:var(--g111111); border:0; font-weight:800; }
.fs-btn:hover { border-color:var(--acc); }
.fs-btn.primary:hover { background:var(--acc-2); }

/* Sozlamalar oynasi: tablar */
.fs-tabs { display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--g2a2a2a); }
.fs-tab {
    padding:13px 16px; border:0; border-bottom:2px solid transparent; background:none;
    color:var(--g8a8a8a); font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.fs-tab:hover:not(.active) { color:var(--gcccccc); }
.fs-tab.active { color:var(--gffffff); border-color:var(--acc); }
.fs-pane { display:none; }
.fs-pane.active { display:block; }

/* Qo'shish tugmasi */
.fs-add-btn {
    width:100%; padding:13px; border:1px dashed var(--g3a3a3a); border-radius:10px;
    background:none; color:var(--g888888); cursor:pointer; font-size:12.5px; font-family:inherit; margin-top:6px;
}
.fs-add-btn:hover { border-color:var(--acc); color:var(--acc); }

/* Metrikalar ro'yxati */
.fs-metric-row {
    display:flex; align-items:center; gap:12px; background:var(--g141416); border:1px solid var(--g262626);
    border-radius:10px; padding:12px 14px; margin-bottom:8px;
}
.fs-metric-row .fs-metric-name { flex:1; color:var(--geeeeee); font-size:13px; font-weight:600; }
.fs-metric-row .fs-metric-sub { color:var(--g777777); font-size:11px; margin-top:2px; }
.fs-switch {
    width:38px; height:21px; border-radius:11px; background:var(--g2a2a2a); position:relative;
    cursor:pointer; flex-shrink:0; transition:background .18s;
}
.fs-switch::after {
    content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px;
    border-radius:50%; background:var(--g777777); transition:.18s;
}
.fs-switch.on { background:var(--tb4a3f0a); }
.fs-switch.on::after { left:19.5px; background:var(--acc); }

.fs-hint { display:flex; gap:12px; align-items:center; background:var(--tb1a1600); border:1px solid #5a4c14; border-radius:9px; padding:12px 14px; margin-bottom:16px; color:var(--tfffd76b); font-size:12px; }
.fs-hint span { font-size:16px; }

/* Bo'lim qatori */
.fs-row { background:var(--g101011); border:1px solid var(--g262626); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.fs-row-head { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; }
.fs-row-head:hover { background:var(--g151516); }
.fs-order-btns { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.fs-order-btn { width:22px; height:18px; border-radius:4px; background:var(--g1e1e1e); border:1px solid var(--g333333); color:var(--g999999); font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.fs-order-btn:hover { border-color:var(--acc); color:var(--acc); }
.fs-order-btn:disabled { opacity:.3; cursor:not-allowed; }
.fs-circle { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.fs-row-info { flex:1; min-width:0; }
.fs-row-title { font-size:14px; font-weight:700; color:var(--geeeeee); }
.fs-row-sub { font-size:11.5px; color:var(--g888888); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-row-toggle { color:var(--g666666); font-size:13px; transition:.2s; flex-shrink:0; }
.fs-row.open .fs-row-toggle { transform:rotate(180deg); color:var(--acc); }

.fs-row-body { display:none; padding:16px; border-top:1px solid var(--g232323); background:var(--g0a0a0b); }
.fs-row.open .fs-row-body { display:block; }
.fs-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fs-field { display:flex; flex-direction:column; gap:6px; }
.fs-field.full { grid-column:span 2; }
.fs-field label { color:var(--g999999); font-size:11px; }
.fs-field input, .fs-field select, .fs-field textarea {
    background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--geeeeee); padding:9px 12px;
    border-radius:7px; font-size:12.5px; font-family:inherit;
}
.fs-field textarea { resize:vertical; min-height:60px; }
.fs-field input:focus, .fs-field select:focus, .fs-field textarea:focus { outline:none; border-color:var(--acc); }

/* Rang tanlash */
.fs-colors { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fs-color-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.fs-color-add {
    width:30px; height:30px; border-radius:8px; cursor:pointer; border:1.5px dashed var(--g555555);
    display:flex; align-items:center; justify-content:center; color:var(--g888888); font-size:16px; flex-shrink:0;
}
.fs-color-add:hover { border-color:var(--acc); color:var(--acc); }
.fs-color-picker { position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.fs-hex-input {
    background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--geeeeee); padding:7px 10px;
    border-radius:7px; font-size:12px; font-family:'Courier New',monospace; width:110px;
}
.fs-hex-input:focus { outline:none; border-color:var(--acc); }
.fs-color { width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.fs-color.selected { border-color:var(--gffffff); box-shadow:0 0 0 2px var(--acc); }

@media(max-width:800px){ .fs-field-grid{ grid-template-columns:1fr; } .fs-field.full{ grid-column:span 1; } }

.fn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fn-card { background:linear-gradient(145deg,var(--g181818),var(--g111111)); border:1px solid var(--g262626); border-radius:16px; padding:20px; cursor:pointer; transition:.2s; }
.fn-card:hover { border-color:var(--acc); transform:translateY(-2px); }
.fn-card.clickable::after {
    content:'Нажмите, чтобы открыть →'; display:block; margin-top:12px; font-size:11px; color:var(--acc); font-weight:600;
}
.fn-top { display:flex; align-items:flex-start; gap:14px; }
.fn-circle { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:24px; flex-shrink:0; border:1.5px solid currentColor; transition:box-shadow .3s ease; }
.fn-circle svg { width:26px; height:26px; }
/* PDF: ikonka sukut holatda statik, kursor olib borilganda qisqa silliq animatsiya */
.fn-card:hover .fn-circle svg { animation:fnIconPulse .65s ease; }
.fn-card:hover .fn-circle { box-shadow:0 0 0 6px rgba(255,255,255,.035); }
@keyframes fnIconPulse {
    0%   { transform:scale(1) rotate(0deg); }
    35%  { transform:scale(1.18) rotate(-8deg); }
    65%  { transform:scale(1.07) rotate(5deg); }
    100% { transform:scale(1) rotate(0deg); }
}
.fs-circle svg { width:20px; height:20px; }
.fn-yellow { background:var(--tb453b12); color:var(--acc); }
.fn-blue { background:var(--tb122c4c); color:var(--tf5597ff); }
.fn-green { background:var(--tb0f3826); color:var(--tf3dd27a); }
.fn-orange { background:var(--tb472911); color:var(--tfff8d2b); }
.fn-purple { background:var(--tb361f49); color:var(--tfb86cff); }
.fn-cyan { background:var(--tb0f383c); color:var(--tf26ced6); }
.fn-title { flex:1; }
.fn-title h2 { font-size:17px; margin:6px 0; }
.fn-title p { color:var(--g999999); font-size:12.5px; line-height:1.5; }

.fn-stats { display:flex; justify-content:space-between; margin-top:22px; }
.fn-stats small { color:var(--g888888); display:block; margin-bottom:5px; font-size:11.5px; }
.fn-stats strong { font-size:24px; }
.fn-stats .r { text-align:right; }
.fn-stats .r strong { font-size:15px; }

.fn-progress { height:6px; background:var(--g232323); border-radius:10px; margin:13px 0 18px; overflow:hidden; }
.fn-bar { height:100%; border-radius:10px; }
.fn-bar-yellow { background:var(--acc); }
.fn-bar-blue { background:#4388ee; }
.fn-bar-green { background:#38c875; }
.fn-bar-orange { background:#f88728; }
.fn-bar-purple { background:#a953dc; }
.fn-bar-cyan { background:#25c4cf; }

.fn-footer { border-top:1px solid var(--g262626); padding-top:14px; display:flex; justify-content:space-between; align-items:flex-end; }
.fn-footer small { color:var(--g888888); font-size:11px; }
.fn-manager { display:flex; align-items:center; gap:9px; margin-top:7px; }
.fn-avatar { width:38px; height:38px; border-radius:50%; background:var(--g2a2a2a); border:1px solid var(--g3a3a3a); color:var(--acc); display:grid; place-items:center; font-weight:700; font-size:11px; flex-shrink:0; }
.fn-manager strong { display:block; font-size:13px; }
.fn-manager span { display:block; color:var(--g888888); font-size:10px; margin-top:2px; }
.fn-people { text-align:center; }
.fn-people strong { display:block; font-size:26px; margin-top:5px; color:var(--acc); }

/* ===================================================== */
/* ================ VAZIFALAR (TASKS) PAGE ================ */
/* prefixed with vz- to avoid clashes                    */
/* ===================================================== */
.vz-topbar2 { display:flex; justify-content:space-between; align-items:center; }
.vz-topbar2 h1 { font-size:26px; margin-bottom:6px; }
.vz-topbar2 p { color:var(--g8d8d8d); font-size:13.5px; }
.vz-top-actions { display:flex; align-items:center; gap:12px; }
.vz-add-btn { background:var(--acc); color:var(--g111111); border:0; height:40px; padding:0 18px; border-radius:9px; font-weight:700; cursor:pointer; font-size:13px; }
.vz-add-btn:hover { background:var(--acc-2); }

.vz-filters {
    position:absolute; top:52px; right:0; z-index:60;
    background:var(--g161616); border:1px solid var(--g2f2f2f); border-radius:12px; padding:14px;
    display:none; gap:10px; flex-wrap:wrap; width:640px; max-width:90vw;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.vz-filters.open { display:flex; }
.vz-filters select { background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--gdddddd); padding:10px 14px; border-radius:7px; font-size:13px; flex:1; min-width:150px; }

/* Kalendar har doim to'liq kenglikda */
.vz-content { display:grid; grid-template-columns:1fr; gap:18px; }


/* Kun ichiga kirilgan ko'rinish (kalendarni to'liq almashtiradi) */
.vz-day-view { padding:0; }
.vz-day-view-header { display:flex; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--g232323); }
.vz-day-back { background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--gdddddd); padding:9px 15px; border-radius:8px; font-size:12.5px; cursor:pointer; flex-shrink:0; }
.vz-day-back:hover { border-color:var(--cl-yellow, var(--acc)); color:var(--cl-yellow, var(--acc)); }
.vz-day-view-header h2 { font-size:18px; margin-bottom:4px; }
.vz-day-view-header p { color:var(--g8d8d8d); font-size:12.5px; }
.vz-day-view-body { padding:8px 20px 0; }
.vz-day-view-body .vz-task:last-child { border-bottom:1px solid var(--g292929); }

/* ===================================================== */
/* ================ RO'YXAT KO'RINISHI ================== */
/* (Сегодня / Скоро / Просроченные) — rasmga mos katta panel */
/* ===================================================== */
/* ===================================================== */
/* ============ RO'YXAT KO'RINISHI (yangi dizayn) ======= */
/* (Сегодня / Скоро / Просроченные)                      */
/* ===================================================== */
.vz-list-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.vz-list-card {
    background:var(--g131313); border:1px solid var(--g232323); border-radius:16px; padding:20px;
    min-height:460px; position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.vz-list-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--vzc,var(--g444444)); }
.vz-list-card.today { --vzc:var(--tf4bd783); }
.vz-list-card.soon { --vzc:var(--acc); }
.vz-list-card.overdue { --vzc:var(--tfff6b6b); }

.vz-list-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.vz-list-card-head .label { color:var(--g999999); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.vz-list-card-head .num { font-size:36px; font-weight:800; color:var(--geeeeee); line-height:1; }
.vz-list-card-head .num.overdue-num { color:var(--tfff6b6b); }
.vz-list-card-head .num.soon-num { color:var(--acc); }

.vz-list-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vz-list-ic svg { width:22px; height:22px; }
.vz-list-ic.today { background:var(--tb0f2a1c); color:var(--tf4bd783); }
.vz-list-ic.soon { background:var(--tb332a06); color:var(--acc); }
.vz-list-ic.overdue { background:var(--tb331212); color:var(--tfff6b6b); }

.vz-list-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:20px 10px; gap:14px; }
.vz-list-empty .face {
    width:64px; height:64px; border-radius:50%; background:var(--tb0f2a1c); border:1px solid #1e4a30;
    display:flex; align-items:center; justify-content:center; color:var(--tf4bd783);
}
.vz-list-empty .face svg { width:30px; height:30px; }
.vz-list-empty p { color:var(--g888888); font-size:12.5px; text-align:center; line-height:1.6; }
.vz-list-empty .hint { color:var(--acc); font-size:11.5px; cursor:pointer; }
.vz-list-empty .hint:hover { text-decoration:underline; }

.vz-list-items { margin-top:16px; max-height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.vz-list-item {
    display:flex; align-items:flex-start; gap:13px; padding:14px 12px;
    border-bottom:1px solid var(--g1c1c1d); cursor:pointer; transition:background .15s;
    border-radius:8px;
}
.vz-list-item:last-child { border-bottom:0; }
.vz-list-item:hover { background:var(--g1a1a1b); }
.vz-list-item .bar {
    width:3px; align-self:stretch; min-height:34px; border-radius:3px;
    background:var(--vzc,var(--g444444)); flex-shrink:0;
}
.vz-list-item .l { min-width:0; flex:1; }
.vz-list-item .l .title { color:var(--gf0f0f2); font-weight:700; font-size:14px; letter-spacing:-.2px; }
.vz-list-item .l .sub { color:var(--g8a8a90); font-size:12px; margin-top:4px; line-height:1.45; }
.vz-list-item .r { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.vz-list-item .r .when {
    font-size:11.5px; font-weight:700; border:1px solid; border-radius:8px;
    padding:4px 11px; display:inline-block; white-space:nowrap;
}
.vz-list-item .r .person {
    color:var(--g7a7a80); font-size:11px; display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.vz-list-item .r .person svg { width:12px; height:12px; flex-shrink:0; }

.vz-list-items::-webkit-scrollbar { width:5px; }
.vz-list-items::-webkit-scrollbar-thumb { background:var(--g2c2c2c); border-radius:10px; }

@media(max-width:1100px){ .vz-list-grid{ grid-template-columns:1fr; } }

.vz-panel { background:var(--g141414); border:1px solid var(--g232323); border-radius:14px; }
.vz-calendar-panel { padding:20px; }
.vz-calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.vz-calendar-header h2 { font-size:19px; }
.vz-calendar-controls { display:flex; align-items:center; gap:10px; }
.vz-nav-btn { width:34px; height:34px; border-radius:7px; background:var(--g1a1a1a); color:var(--gdddddd); border:1px solid var(--g333333); cursor:pointer; }
.vz-month { font-size:15.5px; font-weight:bold; margin:0 8px; }

.vz-weekdays { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--g262626); }
.vz-weekdays div { padding:10px; color:var(--g888888); font-size:12.5px; text-align:center; }

.vz-calendar { display:grid; grid-template-columns:repeat(7,1fr); }
/* Barcha kunlar bir xil balandlikda — vazifalar soniga bog'liq emas */
.vz-day {
    height:118px; border-right:1px solid var(--g222222); border-bottom:1px solid var(--g222222);
    padding:8px; cursor:pointer; transition:background .2s; overflow:hidden;
}
.vz-day:hover { background:var(--g181818); }

/* Joriy hafta — butun qator bo'ylab sariq ramka, biroz balandroq */
.vz-day.current-week {
    height:150px;
    border-top:1px solid var(--acc-55);
    border-bottom:1px solid var(--acc-55);
    border-right:1px solid var(--g222222);
}
.vz-day.current-week.week-start {
    border-left:3px solid var(--acc);
    border-top-left-radius:10px; border-bottom-left-radius:10px;
}
.vz-day.current-week.week-end {
    border-right:1px solid var(--acc-55);
    border-top-right-radius:10px; border-bottom-right-radius:10px;
}

/* Joriy kun — faqat raqam belgilanadi, katak foni odatiy qoladi */
.vz-day.today .vz-day-number {
    background:var(--acc); color:var(--g111111); width:30px; height:30px;
    display:grid; place-items:center; border-radius:9px; font-size:15px;
}

/* Boshqa oy kunlari — punktir belgilash */
.vz-day.other {
    opacity:.5; background:transparent;
    border-right:1px dashed var(--g262626); border-bottom:1px dashed var(--g262626);
    cursor:default;
}
.vz-day.other:hover { background:transparent; }
.vz-day.other .vz-day-number { color:var(--g555555); font-weight:500; }
.vz-month-hint { font-size:10px; color:var(--g555555); font-weight:500; margin-left:5px; }

.vz-day.selected { background:var(--tb27230f); box-shadow:inset 0 0 0 1px var(--acc); }
.vz-day-number { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--gf0f0f2); }
.vz-day.selected .vz-day-number { background:var(--acc); color:var(--g111111); width:25px; height:25px; display:grid; place-items:center; border-radius:50%; }
.vz-event {
    font-size:11px; margin:6px 0; color:var(--gc5c5ca); line-height:1.35;
    display:flex; align-items:flex-start; gap:7px;
}
.vz-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:3.5px; }
.vz-green{background:#40c878} .vz-yellow{background:#ffd129} .vz-blue{background:#4388ee} .vz-red{background:#ed554b} .vz-purple{background:#a75be0}

.vz-tasks-header { padding:20px; border-bottom:1px solid var(--g232323); }
.vz-tasks-header h2 { font-size:18px; margin-bottom:4px; }
.vz-tasks-header p { color:var(--g888888); font-size:12.5px; }

.vz-task { padding:16px; border-bottom:1px solid var(--g202020); cursor:pointer; transition:.2s; }
.vz-task:hover { background:var(--g191919); }
.vz-task-top { display:flex; justify-content:space-between; gap:14px; }
.vz-task-time { font-size:15px; font-weight:bold; min-width:52px; color:var(--acc); }
.vz-task-content { flex:1; }
.vz-task-title { font-weight:700; font-size:14px; margin-bottom:5px; }
.vz-task-company { color:var(--g8d8d8d); font-size:11.5px; }
.vz-status { padding:6px 9px; border-radius:6px; font-size:10.5px; height:max-content; white-space:nowrap; }
.vz-status.plan { background:var(--tb102e50); color:var(--tf5fa6ff); }
.vz-status.work { background:var(--tb10351f); color:var(--tf48d477); }
.vz-status.done { background:var(--g1a1a1a); color:var(--g888888); }
.vz-status.wait { background:var(--tb473a10); color:#ffd129; }
.vz-task-details { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; font-size:11px; color:var(--g777777); }
.vz-task-details strong { color:var(--gbbbbbb); }

.vz-manager-box { margin:15px; background:var(--g181710); border:1px solid #5c4f15; border-radius:9px; padding:14px; display:flex; gap:12px; align-items:center; }
.vz-manager-icon { width:38px; height:38px; background:var(--acc); color:var(--g111111); display:grid; place-items:center; border-radius:50%; flex-shrink:0; }
.vz-manager-box p { color:var(--gaaaaaa); font-size:11.5px; line-height:1.5; }

/* MODAL */
.vz-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:200; }
.vz-modal.show { display:flex; }
.vz-modal-card { width:800px; max-width:92%; height:66vh; min-height:430px; max-height:86vh;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:15px; box-shadow:0 20px 80px var(--shadow); }
.vz-modal-card > .vz-modal-head,
.vz-modal-card > .vz-toptabs,
.vz-modal-card > .vz-modal-actions { flex-shrink:0; }
.vz-modal-head { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--g2a2a2a); }
.vz-modal-head h2 { font-size:20px; }
.vz-head-logo {
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center; font-size:15px; font-weight:700; color:var(--gffffff);
}
.vz-head-stage { color:var(--acc); font-size:12.5px; margin-top:3px; }
.vz-close { background:none; border:0; color:var(--gaaaaaa); font-size:24px; cursor:pointer; }
.vz-modal-body { padding:24px; flex:1 1 auto; min-height:0; overflow-y:auto; }
.vz-company { color:var(--acc); font-size:13px; margin-bottom:6px; }
.vz-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.vz-info { background:var(--g1b1c1d); border:1px solid var(--g2a2a2a); border-radius:9px; padding:13px; }
.vz-info small { color:var(--g777777); display:block; margin-bottom:6px; font-size:11px; }

/* Vazifa logikasi: 6 ta maydon (Vazifa/Ijrochi/Nazoratchi/Yaratilgan/Dedlayn/Изменить) */
.vz-field-row {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px 0; border-bottom:1px solid var(--g202020);
}
.vz-field-row:last-of-type { border-bottom:none; }
.vz-field-label { color:var(--g888888); font-size:12px; min-width:150px; flex-shrink:0; }
.vz-field-view { color:var(--geeeeee); font-size:13.5px; font-weight:600; text-align:right; flex:1; }
.vz-field-view.static { color:var(--g999999); font-weight:500; }
.vz-field-edit {
    flex:1; background:var(--g1a1a1a); border:1px solid var(--acc); color:var(--geeeeee);
    padding:8px 12px; border-radius:7px; font-size:13px; font-family:inherit; text-align:right;
}
select.vz-field-edit { text-align:left; }
.vz-deadline-edit { display:flex; gap:8px; justify-content:flex-end; }
.vz-deadline-edit input { background:var(--g1a1a1a); border:1px solid var(--acc); color:var(--geeeeee); padding:8px 10px; border-radius:7px; font-size:12.5px; font-family:inherit; }

.vz-comment { margin-top:18px; }

/* ===================================================== */
/* ========= VAZIFA MODALI: YUQORIDAGI MATN TAB'LARI ==== */
/* (Vazifa / Kompaniya haqida / Muloqot / va h.k.)       */
/* ===================================================== */
.vz-toptabs {
    display:flex; gap:4px; overflow-x:auto; padding:0 24px;
    border-bottom:1px solid var(--g262626); background:var(--g101010);
}
.vz-toptab {
    flex:none; padding:14px 14px; border:0; border-bottom:2px solid transparent;
    background:none; color:var(--g888888); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.vz-toptab:hover:not(.active) { color:var(--gcccccc); }
.vz-toptab.active { color:var(--gffffff); border-color:var(--cl-yellow, var(--acc)); }

.vz-subpane { display:none; }
.vz-subpane.active { display:block; }

.vz-sub-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.vz-sub-header h3 { font-size:15px; color:var(--geeeeee); }
.vz-sub-header a { color:var(--tf4a9eff); font-size:12.5px; text-decoration:none; }
.vz-sub-header a:hover { text-decoration:underline; }

.vz-sub-placeholder { text-align:center; padding:40px 15px; color:var(--g666666); font-size:12.5px; line-height:1.8; }
.vz-sub-placeholder span { color:var(--g555555); font-size:11px; }

/* Kontakt shaxslar ro'yxati */
.vz-contact-row { padding:12px 0; border-bottom:1px solid var(--g202020); }
.vz-contact-row:last-child { border-bottom:none; }
.vz-contact-top { display:flex; align-items:center; justify-content:space-between; }
.vz-contact-name { color:var(--geeeeee); font-weight:700; font-size:13.5px; }
.vz-contact-name .role { color:var(--g888888); font-weight:400; font-size:12px; }
.vz-contact-edit { color:var(--tf4a9eff); cursor:pointer; font-size:13px; }
.vz-contact-phone { display:flex; align-items:center; gap:7px; margin-top:6px; color:var(--tf3fd06a); font-size:12.5px; }

/* Vazifalar tarixi ro'yxati (Задачи) */
.vz-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--g202020); }
.vz-history-row:last-child { border-bottom:none; }
.vz-history-l { min-width:0; }
.vz-history-l .t { color:var(--tf4a9eff); font-size:13px; font-weight:600; cursor:pointer; }
.vz-history-l .s { color:var(--g888888); font-size:11px; margin-top:3px; }
.vz-history-r { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vz-history-date { color:var(--gcccccc); font-size:12px; text-align:right; min-width:120px; }
.vz-history-status { padding:5px 10px; border-radius:6px; font-size:10.5px; white-space:nowrap; }
.vz-history-status.progress { background:var(--tb0b3d1e); color:var(--tf4bd77e); }
.vz-history-status.done { background:var(--g2a2a2a); color:var(--gaaaaaa); }
.vz-history-plus { width:26px; height:26px; border-radius:6px; background:#1878e0; color:var(--gffffff); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; flex-shrink:0; }

/* Muloqot (chat / qo'ng'iroqlar tarixi) */
.vz-chat-row { background:var(--g181818); border-radius:9px; padding:12px 14px; margin-bottom:10px; }
.vz-chat-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.vz-chat-name { color:var(--geeeeee); font-weight:700; font-size:13px; }
.vz-chat-name .role { color:var(--g888888); font-weight:400; font-size:11.5px; }
.vz-chat-date { color:var(--g777777); font-size:10.5px; }
.vz-chat-msg { color:var(--gcccccc); font-size:12.5px; line-height:1.6; display:flex; gap:8px; }
.vz-chat-msg .ic { flex-shrink:0; }

.vz-sub-pagination { display:flex; gap:6px; justify-content:center; margin-top:16px; }
.vz-sub-pagination button { width:28px; height:28px; border-radius:6px; background:var(--g1a1a1a); border:1px solid var(--g2f2f2f); color:var(--gaaaaaa); font-size:11.5px; cursor:pointer; }
.vz-sub-pagination button.active { background:#1878e0; border-color:#1878e0; color:var(--gffffff); }
.vz-sub-pagination button:hover:not(.active) { border-color:var(--g555555); color:var(--gdddddd); }
.vz-comment textarea { width:100%; height:90px; background:var(--g101111); border:1px solid var(--g333333); border-radius:8px; color:var(--gdddddd); padding:12px; resize:none; font-family:inherit; }
.vz-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); flex-wrap:wrap; }
.vz-btn { padding:10px 15px; border-radius:7px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:12.5px; }
.vz-btn.complete { background:var(--acc); color:var(--g111111); border:0; font-weight:700; }

/* ===================================================== */
/* ================ PLACEHOLDER PAGE ================ */
/* ===================================================== */
.placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:60vh; text-align:center; color:var(--g777777); gap:14px; }
.placeholder .ic { font-size:50px; }
.placeholder h2 { color:var(--gcccccc); font-size:20px; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:var(--g333333); border-radius:3px; }

@media(max-width:1200px){ .fn-grid{ grid-template-columns:repeat(2,1fr);} .vz-content{grid-template-columns:1fr;} }

/* ===================================================== */
/* ================ SAVDO KANBAN BOARD ================== */
/* prefixed with kb- / scoped under #page-funnel-board   */
/* ===================================================== */
#page-funnel-board { --kb-yellow:var(--acc); --kb-green:#42d77d; --kb-blue:#45a7ff; --kb-red:#ff4d4d; }
.kb-title-row { margin-bottom:10px; }
.kb-title-row h1 { font-size:22px; }
.kb-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.kb-back { display:flex; align-items:center; gap:8px; background:var(--g161616); border:1px solid var(--g2a2a2a); color:var(--gdddddd); padding:9px 16px; border-radius:9px; font-size:13px; cursor:pointer; flex-shrink:0; }
.kb-back:hover { border-color:var(--kb-yellow); color:var(--kb-yellow); }

.kb-header-tools { display:flex; align-items:center; gap:10px; flex:1; min-width:280px; }
.kb-search { display:flex; align-items:center; gap:9px; background:var(--g141414); border:1px solid var(--g2a2a2a); border-radius:9px; padding:0 14px; height:40px; width:280px; }
.kb-search-wide { flex:1; width:auto; min-width:180px; }
.kb-search span { color:var(--g888888); }
.kb-search input { flex:1; background:transparent; border:0; outline:0; color:var(--geeeeee); font-size:12.5px; }
.kb-select, .kb-tool-btn {
    background:var(--g141414); border:1px solid var(--g2a2a2a); color:var(--gdddddd); height:40px;
    padding:0 14px; border-radius:9px; font-size:12.5px; cursor:pointer; font-family:inherit; flex-shrink:0;
}
.kb-select:hover, .kb-tool-btn:hover { border-color:var(--g444444); }
.kb-add-deal { background:var(--acc); color:var(--g111111); border:0; height:40px; padding:0 18px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; }

/* Kanban/Список ko'rinish almashtirgichi */
.kb-view-toggle { display:flex; background:var(--g141414); border:1px solid var(--g2a2a2a); border-radius:9px; padding:3px; height:40px; flex-shrink:0; }
/* ==== ADBUS filtr paneli (PDF talabiga muvofiq) ==== */
.kb-filters {
    display:none; position:absolute; top:48px; right:0; z-index:90; width:560px; max-width:88vw;
    background:var(--g161616); border:1px solid var(--g2f2f2f); border-radius:12px; padding:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.kb-filters.open { display:block; }
.kb-filters h3 { font-size:14px; margin-bottom:14px; }
.kb-f-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kb-f-group label { display:block; color:var(--g8a8a8a); font-size:10px; margin-bottom:6px; }
.kb-f-group select, .kb-f-group input {
    width:100%; height:36px; border:1px solid var(--g333333); border-radius:7px;
    background:var(--g171717); color:var(--gdddddd); padding:0 10px; font-size:12px; font-family:inherit; outline:none;
}
.kb-f-group select:focus, .kb-f-group input:focus { border-color:var(--acc); }
.kb-f-actions { display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; }
.kb-f-btn { flex:1; min-width:120px; height:38px; border-radius:8px; border:1px solid var(--g333333);
    background:var(--g1a1a1a); color:var(--gdddddd); font-size:12px; cursor:pointer; font-family:inherit; }
.kb-f-btn:hover { border-color:var(--g555555); }
.kb-f-btn.primary { background:var(--acc); border:0; color:var(--g111111); font-weight:700; }
.kb-f-btn.save { background:var(--g1e1e1e); border-color:var(--acc); color:var(--acc); }

.kb-view-opt { background:none; border:0; color:var(--g999999); padding:0 13px; border-radius:7px; font-size:12.5px; cursor:pointer; font-family:inherit; height:100%; }
.kb-view-opt.active { background:var(--acc); color:var(--g111111); font-weight:700; }
.kb-view-opt:hover:not(.active) { color:var(--gdddddd); }

/* Статистика: yig'ish/yoyish (akkordeon) */
.kb-summary-accordion {
    background:var(--g131314); border:1px solid var(--g242425); border-radius:14px;
    overflow:hidden; margin-bottom:16px; transition:border-color .2s; position:relative;
}
.kb-summary-accordion.collapsed:hover { border-color:var(--g33333a); }

/* Ochilgan holatda tugma faqat kichik "−" belgisi sifatida o'ng yuqorida turadi */
.kb-summary-accordion:not(.collapsed) .kb-stats-toggle-btn {
    position:absolute; top:6px; right:6px; width:auto; padding:8px 10px; z-index:3;
}
.kb-summary-accordion:not(.collapsed) .kb-stats-toggle-left { display:none; }

.kb-stats-collapse { overflow:hidden; max-height:400px; opacity:1; transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.kb-summary-accordion.collapsed .kb-stats-collapse { max-height:0; opacity:0; }

.kb-stats-toggle-btn {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:none; border:0; color:var(--ga8a8ad); cursor:pointer; padding:15px 20px;
    font-family:inherit; font-size:13px; transition:color .18s;
}
.kb-stats-toggle-btn:hover { color:var(--geeeeee); }
.kb-stats-toggle-left { display:flex; align-items:center; gap:11px; }
.kb-stats-toggle-left svg { width:17px; height:17px; color:var(--g7a7a80); transition:color .18s; }
.kb-stats-toggle-btn:hover .kb-stats-toggle-left svg { color:var(--acc); }
.kb-stats-toggle-sign { color:var(--g7a7a80); font-size:19px; font-weight:300; line-height:1; transition:color .18s; }
.kb-stats-toggle-btn:hover .kb-stats-toggle-sign { color:var(--acc); }

/* ===== Akkordeon ichidagi kartalar ===== */
.kb-summary-accordion .kb-stats { display:flex; gap:0; margin-bottom:0; }
.kb-summary-accordion .kb-stat-card {
    position:relative; flex:1; min-width:0; align-items:flex-start; gap:15px;
    background:none; border:0; border-radius:0; padding:22px 22px 20px;
    transform:none !important; transition:background .18s;
}
/* Ustunlar orasidagi nozik ajratuvchi (yuqori/pastda to'liq tegmaydi) */
.kb-summary-accordion .kb-stat-card::after {
    content:""; position:absolute; right:0; top:20px; bottom:20px; width:1px; background:var(--g242425);
}
.kb-summary-accordion .kb-stat-card:last-child::after { display:none; }
.kb-summary-accordion .kb-stat-card:hover { background:var(--g171719); }

.kb-summary-accordion .kb-stat-ic { width:50px; height:50px; border-radius:13px; }
.kb-summary-accordion .kb-stat-ic svg { width:23px; height:23px; }

.kb-summary-accordion .kb-stat-label {
    color:var(--g8a8a90); font-size:12px; font-weight:500; margin-bottom:7px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kb-summary-accordion .kb-stat-num {
    font-size:26px; font-weight:700; color:var(--gf0f0f2); line-height:1.1; letter-spacing:-.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kb-summary-accordion .kb-stat-sub { font-size:11.5px; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Kartaning matn qismi kengligi cheklansin — raqamlar kesilmasin */
.kb-summary-accordion .kb-stat-card > div:last-child { min-width:0; flex:1; }

/* ===================================================== */
/* ============ SPISOK KO'RINISHI (yangi dizayn) ======== */
/* ===================================================== */

/* 1-daraja: bosqichlar ro'yxati — ikonka doira + nom + tavsif + son/summa */
.kb-stage-list { border:1px solid var(--g232323); border-radius:14px; overflow:hidden; background:var(--g111112); }
.kb-stage-row {
    display:flex; align-items:center; gap:14px; padding:12px 18px;
    cursor:pointer; transition:background .15s; position:relative;
    border-bottom:1px solid var(--g1c1c1d);
}
.kb-stage-row:last-child { border-bottom:0; }
.kb-stage-row:hover { background:var(--g17171a); }
.kb-stage-row .stage-ic { width:38px; height:38px; min-width:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.kb-stage-row .stage-ic svg { width:18px; height:18px; }
.kb-stage-row .name { font-size:14px; font-weight:700; color:var(--geeeeee); white-space:nowrap; flex-shrink:0; }
.kb-stage-row .desc { color:var(--g787880); font-size:11.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-stage-row .count-badge { font-size:13px; font-weight:800; flex-shrink:0; white-space:nowrap; }
.kb-stage-row .arrow { color:var(--g555555); font-size:15px; transition:transform .15s, color .15s; flex-shrink:0; }
.kb-stage-row:hover .arrow { color:var(--acc); transform:translateX(2px); }

/* 2-daraja: tanlangan bosqichdagi kompaniyalar — Kanban kartasiga uyg'un */
.kb-stage-back { margin-bottom:14px; }
.kb-stage-companies-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.kb-stage-companies-head .kb-stage-dot { width:9px; height:9px; border-radius:50%; }
.kb-stage-companies-head h3 { font-size:16px; }
.kb-stage-companies-count { color:var(--g888888); font-size:11.5px; background:var(--g1a1a1a); border:1px solid var(--g2a2a2a); padding:3px 10px; border-radius:20px; }

.kbl-company-list { border:1px solid var(--g232323); border-radius:14px; overflow:hidden; background:var(--g111112); }
.kbl-company-row {
    display:flex; align-items:center; gap:13px; padding:11px 16px 11px 0; cursor:pointer;
    border-bottom:1px solid var(--g1c1c1d); transition:background .15s;
}
.kbl-company-row:last-child { border-bottom:0; }
.kbl-company-row:hover { background:var(--g17171a); }
.kbl-company-row .accent { width:4px; align-self:stretch; flex-shrink:0; border-radius:0 3px 3px 0; }
.kbl-logo { width:34px; height:34px; min-width:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gffffff); }
.kbl-company-main { min-width:0; flex:1; }
.kbl-sep { color:var(--g4a4a50); margin:0 7px; }
.kbl-company-name { font-size:13px; font-weight:700; color:var(--geeeeee); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kbl-company-sub { color:var(--g777777); font-size:10.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kbl-company-task { color:var(--gc9c9cf); font-weight:600; }
.kbl-company-deadline { display:flex; align-items:center; gap:6px; color:var(--gc6c6c6); font-size:11px; flex-shrink:0; min-width:110px; justify-content:flex-end; }
.kbl-company-deadline .dot { width:7px; height:7px; border-radius:50%; background:var(--acc); }
.kbl-company-row .arrow { color:var(--g555555); font-size:14px; flex-shrink:0; transition:transform .15s, color .15s; }
.kbl-company-row:hover .arrow { color:var(--acc); transform:translateX(2px); }

@media(max-width:800px){ .kb-stage-row .desc, .kbl-company-sub { display:none; } }

/* Kalendar tugmasi + mini-kalendar popup */
.kb-calendar-wrap { position:relative; flex-shrink:0; }
.kb-cal-btn { width:40px; padding:0; display:flex; align-items:center; justify-content:center; }
.kb-cal-btn svg { width:18px; height:18px; }
.kb-mini-cal {
    display:none; position:absolute; top:48px; right:0; z-index:80;
    background:var(--g161616); border:1px solid var(--g2f2f2f); border-radius:12px; padding:14px;
    width:270px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.kb-mini-cal.open { display:block; }
.kb-mini-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kb-mini-cal-head span { font-size:13px; font-weight:700; color:var(--geeeeee); }
.kb-mini-cal-nav { background:var(--g1e1e1e); border:1px solid var(--g333333); color:var(--gaaaaaa); width:26px; height:26px; border-radius:6px; cursor:pointer; font-size:12px; }
.kb-mini-cal-nav:hover { border-color:var(--kb-yellow); color:var(--kb-yellow); }
.kb-mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.kb-mini-cal-grid .wd { color:var(--g777777); font-size:9.5px; text-align:center; padding:4px 0; }
.kb-mini-cal-day { text-align:center; padding:6px 0; font-size:11.5px; color:var(--gcccccc); border-radius:6px; cursor:pointer; }
.kb-mini-cal-day:hover { background:var(--g242424); }
.kb-mini-cal-day.other { color:var(--g444444); }
.kb-mini-cal-day.selected { background:var(--kb-yellow); color:var(--g111111); font-weight:700; }
.kb-add-deal:hover { background:var(--acc-2); }

/* Yuqori statistika kartalari */
.kb-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kb-stats.kb-stats-5 { grid-template-columns:repeat(5,1fr); }
.kb-stat-card { display:flex; align-items:center; gap:14px; background:var(--g141414); border:1px solid var(--g232323); border-radius:14px; padding:18px; cursor:pointer; transition:.18s; }
.kb-stat-card:hover { border-color:var(--acc); transform:translateY(-2px); }
@media(max-width:1500px){ :not(.kb-summary-accordion) > .kb-stats.kb-stats-5{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ :not(.kb-summary-accordion) > .kb-stats.kb-stats-5{ grid-template-columns:repeat(2,1fr);} }

/* ===================================================== */
/* ====== СТАТИСТИКА: СПИСОК (modal) =================== */
/* ===================================================== */
.ks-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:450; }
.ks-modal.show { display:flex; }
.ks-modal-card { width:1000px; max-width:95%; max-height:90vh; display:flex; flex-direction:column; background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:15px; box-shadow:0 20px 80px var(--shadow); }
.ks-modal-head { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--g2a2a2a); }
.ks-head-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.ks-head-ic svg { width:24px; height:24px; }
.ks-modal-head h2 { font-size:19px; margin-bottom:4px; }
.ks-modal-head p { color:var(--g888888); font-size:12.5px; }
.ks-close { background:none; border:0; color:var(--gaaaaaa); font-size:26px; cursor:pointer; line-height:1; }
.ks-close:hover { color:var(--gffffff); }

/* Сводка — akkordeon (Воронка продаж bilan bir xil) */
.ks-summary-wrap { padding:14px 24px 0; }
.ks-summary { display:flex; gap:0; }
.ks-sum-box {
    position:relative; flex:1; min-width:0; background:none; border:0;
    border-radius:0; padding:20px 22px;
}
/* Nozik ajratuvchi (yuqori/pastdan ichkarida) */
.ks-sum-box::after {
    content:""; position:absolute; right:0; top:18px; bottom:18px; width:1px; background:var(--g242425);
}
.ks-sum-box:last-child::after { display:none; }
.ks-sum-label {
    color:var(--g8a8a90); font-size:12px; font-weight:500; margin-bottom:7px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ks-sum-value {
    font-size:24px; font-weight:700; color:var(--gf0f0f2); line-height:1.1; letter-spacing:-.4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ks-sum-value.up, .ks-sum-value.warn { color:var(--gf0f0f2); }
.ks-sum-num { font-size:24px; font-weight:700; color:var(--gf0f0f2); }

/* Быстрый доступ + qidiruv + kalendar + filtr qatori */
.ks-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; padding:14px 24px; border-bottom:1px solid var(--g232323); flex-wrap:wrap; }
.ks-toolbar-left { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ks-toolbar-label { font-size:10px; color:var(--g777777); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.ks-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ks-toolbar.search-mode .ks-chips > *:not([data-filter="all"]) { display:none; }
.ks-toolbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ks-search-box { display:flex; align-items:center; gap:8px; background:var(--g141414); border:1px solid var(--g2a2a2a); border-radius:9px; height:40px; padding:0 14px; width:160px; transition:width .25s ease; }
.ks-search-box span { color:var(--g888888); }
.ks-search-box input { background:transparent; border:0; outline:0; color:var(--geeeeee); font-size:12.5px; flex:1; min-width:0; }
.ks-toolbar.search-mode .ks-search-box { width:320px; }

.ks-modal-body { overflow-y:auto; flex:1; padding:0 24px; }
.ks-table { width:100%; border-collapse:collapse; }
.ks-table thead { position:sticky; top:0; z-index:2; }
.ks-table th { text-align:left; padding:12px 10px; font-size:10.5px; color:var(--g888888); background:var(--g141515); border-bottom:1px solid var(--g2a2a2a); font-weight:600; cursor:pointer; user-select:none; white-space:nowrap; }
.ks-table th:hover { color:var(--gdddddd); }
.ks-sort-ic { display:inline-flex; flex-direction:column; margin-left:5px; vertical-align:middle; line-height:1; }
.ks-arrow { font-size:7px; color:var(--g3a3a3a); }
.ks-arrow.active { color:var(--gffffff); }
.ks-table td { padding:12px 10px; border-bottom:1px solid var(--g1e1e1e); font-size:12.5px; color:var(--gdddddd); }
.ks-table tbody tr:hover { background:var(--g191919); }
.ks-table tbody tr.ks-row-click { cursor:pointer; }
.ks-table tbody tr.ks-row-click:hover { background:var(--tb20200a); }
.ks-table tbody tr.ks-row-click:hover .ks-strong { color:var(--acc); }
.ks-company-cell { display:flex; align-items:center; gap:10px; }
.ks-logo { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; color:var(--gffffff); flex-shrink:0; }
.ks-money { color:var(--tf4bd783); font-weight:700; }
.ks-money.red { color:var(--tfff6b6b); }
.ks-badge { padding:4px 9px; border-radius:6px; font-size:10px; white-space:nowrap; }
.ks-badge.stage { background:var(--tb132a3a); color:var(--tf4bb8e0); border:1px solid #1d4358; }
.ks-badge.hot { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
.ks-badge.warm { background:var(--tb2a2100); color:var(--tfffd47a); border:1px solid #6b5a1a; }
.ks-badge.cold { background:var(--tb071723); color:var(--tf59b6ff); border:1px solid #17466b; }
.ks-badge.done { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.ks-badge.refused { background:var(--tb2a0808); color:var(--tfff8b8b); border:1px solid #6b1a1a; }

.ks-modal-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); }
.ks-actions-right { display:flex; gap:10px; }
.ks-count { color:var(--g888888); font-size:12px; margin-right:auto; }
.ks-btn { padding:10px 18px; border-radius:8px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:12.5px; }
.ks-btn.primary { background:var(--acc); color:var(--g111111); border:0; font-weight:700; }
.ks-btn:hover { border-color:var(--acc); }
.ks-btn.primary:hover { background:var(--acc-2); }

@media(max-width:800px){ .ks-summary{ flex-wrap:wrap; } .ks-sum-box{ flex:1 1 50%; } }
.kb-stat-ic { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.kb-stat-ic svg { width:24px; height:24px; }
.kb-stat-label { color:var(--g999999); font-size:12px; margin-bottom:5px; }
.kb-stat-num { font-size:22px; font-weight:800; color:var(--geeeeee); }
.kb-stat-sub { font-size:11px; margin-top:4px; }
.kb-stat-sub.up { color:var(--tf4bd783); }
.kb-stat-sub.warn { color:var(--tfffb020); }

.kb-board-wrap { overflow-x:auto; overflow-y:hidden; padding-bottom:10px; }
.kb-board { display:grid; grid-auto-flow:column; grid-auto-columns:250px; gap:12px; }

/* Vazifa taxtasi uchun qisqa hisob chizig'i */
/* Yangi bo'lim qo'shish tugmasi */
.fn-add-row { margin:18px 30px 30px; }
.fn-add-btn { display:flex; align-items:center; gap:14px; width:100%; padding:18px 22px; cursor:pointer;
    background:var(--g111111); border:1.5px dashed var(--g333333); border-radius:16px;
    color:var(--gcccccc); font-family:inherit; text-align:left; transition:.18s; }
.fn-add-btn:hover { border-color:var(--acc); color:var(--acc); background:var(--g141414); }
.fn-add-plus { font-size:24px; line-height:1; width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--g1a1a1a); border:1px solid var(--g2c2c2c); }
.fn-add-btn:hover .fn-add-plus { border-color:var(--acc); }
.fn-add-btn b { display:block; font-size:14px; }
.fn-add-btn i { display:block; font-size:11.5px; color:var(--g888888); font-style:normal; margin-top:3px; }

/* Uzun bo'lim nomlari yon menyuda ikki qatorga tushsin */
.submenu-item { white-space:normal; line-height:1.35; }

/* Yangi bo'lim formasi: bosqichlar ro'yxati */
.ns-stage-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ns-stage-row input { flex:1; background:var(--g1a1a1a); border:1px solid var(--g333333);
    color:var(--geeeeee); padding:10px 12px; border-radius:8px; font-size:12.5px; font-family:inherit; }
.ns-stage-row input:focus { outline:none; border-color:var(--acc); }
.ns-stage-del { width:32px; height:32px; flex-shrink:0; border-radius:8px; cursor:pointer;
    background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--g888888); font-size:13px; }
.ns-stage-del:hover { border-color:#e04747; color:#ff8080; }
.ns-stage-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }

.kb-tstats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px; }
.kb-tstat { background:var(--g131314); border:1px solid var(--g242425); border-radius:12px; padding:14px 16px; }
.kb-tstat-l { font-size:11px; color:var(--g888888); margin-bottom:6px; }
.kb-tstat-v { font-size:22px; font-weight:700; color:var(--geeeeee); }
.kb-tstat-v.up { color:var(--tf39e978); }

.kb-column { border:1px solid var(--g232323); border-radius:12px; background:var(--g0f0f10); display:flex; flex-direction:column; overflow:hidden; }
/* Ustun tepasidagi rangli chiziq */
.kb-column::before { content:""; display:block; height:3px; background:var(--kb-dot,#42d77d); }
.kb-col-header { padding:14px; }
.kb-col-title-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.kb-col-dot { width:8px; height:8px; border-radius:50%; background:var(--kb-dot,#42d77d); flex-shrink:0; }
.kb-col-title { font-size:13.5px; font-weight:700; flex:1; line-height:1.3; }
.kb-col-count { font-size:14px; font-weight:700; color:var(--gcccccc); flex-shrink:0; }
.kb-col-desc { color:var(--g7d7d81); font-size:10.5px; line-height:1.5; }

.kb-cards { padding:0 10px 12px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 400px); overflow-y:auto; flex:1; min-height:110px; }
.kb-card { padding:12px; border:1px solid var(--g262628); border-radius:10px; background:var(--g161617); cursor:pointer; transition:.18s; }
.kb-card:hover { border-color:var(--kb-yellow); transform:translateY(-2px); }
.kb-company { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.kb-logo { width:30px; height:30px; min-width:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gffffff); }
.kb-company-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kb-card-sum { font-size:13px; font-weight:700; color:var(--geeeeee); margin-bottom:4px; padding-left:39px; }
.kb-card-stage-date { font-size:10px; color:var(--g777777); margin-bottom:8px; padding-left:39px; }
.kb-card-manager { color:var(--g8a8a8e); font-size:10.5px; padding-top:9px; border-top:1px solid var(--g232324); }
.kb-deadline { margin-top:7px; display:flex; align-items:center; justify-content:flex-end; gap:6px; color:var(--gc6c6c6); font-size:10.5px; }
.kb-deadline-dot { width:7px; height:7px; border-radius:50%; background:var(--kb-yellow); }

/* Bo'sh ustun uchun ko'rsatma */
.kb-empty-hint {
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:90px; border:1px dashed var(--g2a2a2a); border-radius:10px;
    color:var(--g5a5a60); font-size:11px; padding:10px; line-height:1.5;
}

/* ===== Kanban drag & drop vizual holatlari ===== */
.kb-card { cursor:grab; }
.kb-card:active { cursor:grabbing; }
.kb-card.kb-dragging {
    opacity:.45; transform:rotate(1.5deg) scale(.98);
    border-color:var(--acc); cursor:grabbing;
}
.kb-cards.kb-drop-over {
    background:var(--acc-44);
    outline:1.5px dashed var(--acc-44);
    outline-offset:-4px; border-radius:10px;
}

@media(max-width:1300px){ .kb-stats{ grid-template-columns:repeat(2,1fr);} }

/* Batafsil modal */
.kb-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:300; }
.kb-modal.show { display:flex; }
/* Kartochka balandligi TURG'UN: sarlavha va tablar joyida qoladi,
   faqat ichki qism aylanadi — bo'limlar almashtirilganda oyna sakramaydi */
.kb-modal-card { width:640px; max-width:92%; height:66vh; min-height:430px; max-height:86vh;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:15px; box-shadow:0 20px 80px var(--shadow); }
.kb-modal-card > .kb-modal-head,
.kb-modal-card > .cl-tabs,
.kb-modal-card > .kb-modal-actions { flex-shrink:0; }
.kb-modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
.kb-modal-head { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--g2a2a2a); position:relative; }
.kb-modal-logo { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--gffffff); flex-shrink:0; }
.kb-modal-head h2 { font-size:20px; }
.kb-modal-head .kb-modal-stage { font-size:11px; color:var(--acc); margin-top:3px; }
.kb-modal-close { position:absolute; top:16px; right:18px; background:none; border:0; color:var(--gaaaaaa); font-size:24px; cursor:pointer; }
.kb-modal-body { padding:22px 24px; }
.kb-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kb-modal-info { background:var(--g1b1c1d); border:1px solid var(--g2a2a2a); border-radius:9px; padding:13px; }
.kb-modal-info small { color:var(--g777777); display:block; margin-bottom:6px; font-size:10.5px; }
.kb-modal-info strong { font-size:13px; }
.kb-modal-section { margin-top:18px; }

/* Комментарии (Воронка продаж bitim oynasi) */
.kb-comment-add { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.kb-comment-add textarea {
    background:var(--g141414); border:1px solid var(--g2a2a2a); border-radius:9px; color:var(--geeeeee); padding:10px 12px;
    font-size:12.5px; font-family:inherit; min-height:64px; resize:vertical;
}
.kb-comment-add textarea:focus { outline:none; border-color:var(--acc); }
.kb-comment-add .kb-modal-btn { align-self:flex-end; }
.kb-comment-item { background:var(--g141414); border:1px solid var(--g232323); border-radius:9px; padding:11px 13px; margin-bottom:8px; }
.kb-comment-item:last-child { margin-bottom:0; }
.kb-comment-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:10px; }
.kb-comment-author { color:var(--geeeeee); font-size:12px; font-weight:700; }
.kb-comment-time { color:var(--g777777); font-size:10.5px; flex-shrink:0; }
.kb-comment-text { color:var(--gcccccc); font-size:12.5px; line-height:1.5; }
.kb-comment-empty { text-align:center; color:var(--g666666); font-size:12px; padding:16px; }
.kb-modal-section h3 { font-size:13px; margin-bottom:10px; color:var(--gdddddd); }
.kb-timeline-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--g202020); font-size:12px; }
.kb-timeline-item:last-child { border-bottom:none; }
.kb-timeline-ic { width:28px; height:28px; border-radius:50%; background:var(--g1d1d1e); border:1px solid var(--g333333); display:grid; place-items:center; flex-shrink:0; font-size:13px; }
.kb-timeline-body { flex:1; }
.kb-timeline-body .t { color:var(--geeeeee); font-weight:600; }
.kb-timeline-body .s { color:var(--g888888); font-size:10.5px; margin-top:2px; }
.kb-timeline-time { color:var(--g777777); font-size:10px; }
.kb-modal-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); flex-wrap:wrap; }
.kb-actions-left, .kb-actions-right { display:flex; gap:10px; flex-wrap:wrap; }
.kb-modal-btn { padding:10px 15px; border-radius:8px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:12.5px; }
.kb-modal-btn.primary { background:var(--acc); color:var(--g111111); border:0; font-weight:700; }
.kb-modal-btn:hover { border-color:#ffc400; }
.kb-modal-btn.primary:hover { background:var(--acc-2); }

/* ===================================================== */
/* ================ BAZA KLIENTOV (CLIENTS) PAGE ========= */
/* prefixed with cl- / scoped under #page-clients          */
/* ===================================================== */
#page-clients {
    --cl-yellow:var(--acc); --cl-green:#00df6f; --cl-orange:var(--tfff9f0a); --cl-blue:var(--tf4ca8ff); --cl-red:#ff4d4f;
    font-size:13px;
    margin-top:-10px;
}
#page-clients button, #page-clients input, #page-clients select { font-family:inherit; }
#page-clients button { cursor:pointer; }

.cl-wrap { display:flex; height:calc(100vh - 110px); border:1px solid var(--g232323); border-radius:16px; overflow:hidden; background:var(--g0b0b0c); position:relative; }

.cl-clients { width:100%; height:100%; display:flex; flex-direction:column; }

/* Kartochka jadval o'rniga ochilishi (to'liq ekran, ichkariga kirish) */
.cl-card-area {
    position:absolute;
    inset:0;
    background:var(--g0b0b0c);
    z-index:40;
    padding:20px;
    overflow:auto;
    display:none;
}
.cl-wrap.show-card .cl-card-area { display:block; }
.cl-wrap.show-card .cl-clients { display:none; }
/* Backdrop endi kerak emas */
.cl-backdrop { display:none; }
.cl-page-head { padding:22px 20px 12px; }
.cl-page-head.cl-page-head-compact { padding:16px 20px 10px; }
.cl-page-head h1 { font-size:21px; margin-bottom:4px; }
.cl-page-head.cl-page-head-compact h1 { margin-bottom:0; }
.cl-page-head p { color:var(--g777777); font-size:12px; }

.cl-search-row { display:flex; gap:9px; padding:0 20px 12px; flex-wrap:wrap; }
.cl-search { height:40px; flex:1; min-width:220px; display:flex; align-items:center; border:1px solid var(--g2a2a2a); background:var(--g141414); border-radius:9px; padding:0 14px; }
.cl-search span { color:var(--g888888); margin-right:9px; }
.cl-search input { flex:1; border:0; outline:0; background:transparent; color:var(--geeeeee); font-size:12.5px; }
.cl-filter-btn { height:40px; display:flex; align-items:center; border:1px solid var(--g2a2a2a); background:var(--g141414); color:var(--gdddddd); border-radius:9px; padding:0 16px; font-size:12.5px; flex-shrink:0; cursor:pointer; font-family:inherit; }
.cl-filter-btn:hover { border-color:var(--g444444); }

.cl-quick-filters { padding:0 20px 12px; display:flex; gap:6px; overflow:auto; }
.cl-quick-filter { position:relative; white-space:nowrap; padding:7px 11px; border-radius:15px; border:1px solid var(--g2d2d2d); background:var(--g101010); color:var(--g999999); font-size:11px; }

/* ===== "Изменить" — inline o'chirish rejimi (standart, hamma joyda) ===== */
.qf-minus {
    display:none; position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:50%;
    background:#ff4d4d; color:var(--gffffff); font-size:12px; font-weight:800; line-height:1;
    align-items:center; justify-content:center; cursor:pointer; border:2px solid var(--bg); z-index:2;
}
.qf-minus:hover { background:#ff2e2e; transform:scale(1.1); }
.qf-edit-mode .qf-minus { display:flex; }
.qf-edit-mode .cl-chip-del { display:inline-flex !important; }
#vzEditBtn.active, #clEditBtn.active, #ksEditBtn.active { background:var(--acc); border-color:var(--acc); color:var(--g111111); font-weight:700; }
.cl-quick-filter.active { color:var(--acc); border-color:var(--acc-55); background:color-mix(in srgb, var(--acc) 12%, var(--g0f0f0f)); }

/* Foydalanuvchi saqlagan filter chip'lari */
.cl-quick-filter.custom {
    display:inline-flex; align-items:center; gap:8px; padding:0 6px 0 11px; cursor:default;
}
.cl-quick-filter.custom .cl-chip-label { cursor:pointer; padding:7px 0; }
.cl-quick-filter.custom .cl-chip-del {
    width:20px; height:20px; border-radius:50%; display:none; align-items:center; justify-content:center;
    background:var(--g2a2a2a); color:var(--gaaaaaa); font-size:11px; line-height:1; cursor:pointer; flex-shrink:0;
}
.cl-quick-filter.custom .cl-chip-del:hover { background:#ff4d4d; color:var(--gffffff); }
.cl-add-filter-btn { border-style:dashed; color:var(--g888888); }
.cl-add-filter-btn:hover { color:var(--cl-yellow); border-color:var(--cl-yellow); }
.cl-dot { width:6px; height:6px; display:inline-block; border-radius:50%; margin-right:4px; }
.cl-green-dot { background:#20d66b; }

.cl-table-wrap { flex:1; overflow:auto; margin:0 20px; border:1px solid var(--g252525); border-radius:8px; background:var(--g090909); }
#page-clients table { width:100%; border-collapse:collapse; }
#page-clients thead { position:sticky; top:0; z-index:2; }
#page-clients th { text-align:left; padding:12px; font-size:10px; color:var(--g777777); background:var(--g0e0e0f); border-bottom:1px solid var(--g272727); font-weight:500; }
#page-clients td { padding:12px; border-bottom:1px solid var(--g1e1e1e); }
#page-clients tbody tr { cursor:pointer; transition:.15s; }
#page-clients tbody tr:hover { background:var(--g111111); }
#page-clients tbody tr.cl-selected { background:var(--g141414); }

.cl-company-cell { display:flex; align-items:center; gap:10px; }
.cl-company-logo { width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--geeeeee); color:var(--g111111); font-size:10px; font-weight:900; }
.cl-company-name { font-weight:700; font-size:12px; }

.cl-manager { display:flex; gap:8px; align-items:center; }
.cl-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--gd3d3d3),var(--g555555)); border:1px solid var(--g555555); flex-shrink:0; }
.cl-manager-name { font-size:11px; }
.cl-manager-role { font-size:9px; color:var(--g777777); margin-top:2px; }

.cl-tag { display:inline-flex; align-items:center; padding:5px 7px; border-radius:5px; border:1px solid; font-size:9px; line-height:1.25; }
.cl-tag.yellow { color:var(--cl-yellow); border-color:#705e00; background:var(--tb1c1800); }
.cl-tag.blue { color:var(--tf59b6ff); border-color:#17466b; background:var(--tb071723); }
.cl-tag.green { color:var(--tf39e978); border-color:#146c35; background:var(--tb071c0e); }
.cl-tag.orange { color:var(--tfff9f0a); border-color:#704900; background:var(--tb211400); }

.cl-status { padding:5px 8px; border-radius:5px; font-size:9px; display:inline-flex; align-items:center; gap:5px; }
.cl-status.client { background:var(--tb04200d); color:var(--tf24e56b); border:1px solid #095826; }
.cl-status.potential { background:var(--tb211400); color:var(--tfff9f0a); border:1px solid #704500; }
.cl-status.cold { background:var(--tb071723); color:var(--tf59b6ff); border:1px solid #17466b; }
.cl-status.hot { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }

/* Yangi ustunlar: Kontakt, Eslatma, Qiziqish */
.cl-contact-cell { font-size:11px; }
.cl-contact-cell.today { color:var(--tf39e978); }
.cl-contact-cell.fresh { color:var(--tf59b6ff); }
.cl-contact-cell.none { color:var(--g666666); }
.cl-reminder { font-size:14px; }
.cl-interest { font-size:10.5px; padding:3px 8px; border-radius:5px; }
.cl-interest.high { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.cl-interest.mid { background:var(--tb211400); color:var(--tfff9f0a); border:1px solid #704500; }
.cl-interest.none { color:var(--g666666); }

.cl-table-footer { height:58px; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; color:var(--g777777); font-size:11px; }
.cl-pagination { display:flex; gap:5px; }
.cl-page { width:28px; height:28px; border:1px solid var(--g292929); background:var(--g111111); color:var(--gaaaaaa); border-radius:5px; }
.cl-page.active { background:var(--cl-yellow); color:var(--g000000); font-weight:800; }

.cl-client-card { min-height:100%; border:1px solid var(--g373737); background:var(--g0b0b0c); border-radius:14px; overflow:hidden; }
/* Bo'sh holat (mijoz tanlanmagan) */
.cl-empty-card { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--g666666); gap:14px; padding:40px; }
.cl-empty-card .cl-empty-ic { font-size:48px; opacity:.5; }
.cl-empty-card h2 { font-size:17px; color:var(--g999999); }
.cl-empty-card p { font-size:12px; color:var(--g666666); max-width:280px; line-height:1.6; }

.cl-card-header { padding:16px 18px; display:flex; justify-content:space-between; border-bottom:1px solid var(--g272727); flex-wrap:wrap; gap:12px; position:relative; }
.cl-card-close { padding:8px 12px; border-radius:7px; background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--gdddddd); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.cl-card-close:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.cl-card-company { display:flex; gap:13px; }
.cl-big-logo { width:100%; border-radius:10px; background:var(--g111111); border:1px solid var(--g272727); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--cl-yellow); font-size:30px; flex-shrink:0; padding:14px 0; }
.cl-big-logo small { color:var(--geeeeee); font-size:12px; margin-top:8px; letter-spacing:1px; }
.cl-card-title { display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
.cl-card-title h2 { font-size:16px; }
.cl-mini-status { color:var(--tf20e86d); border:1px solid #165c2e; background:var(--tb071c0e); padding:4px 8px; border-radius:5px; font-size:9px; }
.cl-meta-tags { display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; }
.cl-meta { padding:4px 7px; background:var(--g151515); border:1px solid var(--g292929); border-radius:5px; color:var(--g888888); font-size:9px; }
.cl-header-contact { min-width:200px; display:grid; gap:8px; color:var(--gaaaaaa); font-size:10px; }
.cl-contact-line { display:flex; gap:8px; }

/* ==== Kartochka header: chap ustun + menejer avatar + Договор/КП ==== */
.cl-card-leftcol { display:flex; flex-direction:column; gap:8px; width:132px; flex-shrink:0; }
.cl-card-deal { display:flex; flex-direction:column; gap:2px; background:var(--g101011); border:1px solid var(--g282828); border-radius:8px; padding:8px 10px; }
.cl-card-deal-label { font-size:9px; color:var(--g888888); text-transform:uppercase; letter-spacing:.5px; }
.cl-card-deal-sum { font-size:13px; font-weight:700; }
.cl-card-deal.contract .cl-card-deal-sum { color:var(--tf39e978); }
.cl-card-deal.kp .cl-card-deal-sum { color:var(--g9ca3af); }
.cl-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.cl-manager-badge { display:flex; flex-direction:column; align-items:center; gap:5px; }
.cl-manager-ava { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--g242424),var(--g343434)); border:1px solid var(--g454545); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--cl-yellow); }
.cl-manager-info { display:flex; flex-direction:column; align-items:center; gap:1px; }
.cl-manager-info strong { font-size:12px; color:var(--geeeeee); }
.cl-manager-info span { font-size:9px; color:var(--g888888); }
/* Kontaktlar + Договор — oddiy jadval ko'rinishi (asosiy ustunda) */
/* Договор/КП — tepadagi teglar o'lchamiga moslangan (ixcham) */
#page-clients table.cl-contact-table { width:auto; margin-top:10px; border-collapse:collapse;
    background:var(--g151515); border:1px solid var(--g292929); border-radius:6px; overflow:hidden; }
#page-clients .cl-contact-table td { padding:4px 8px; border-bottom:0; font-size:9px; }
.cl-ct-lbl { color:var(--g888888); white-space:nowrap; padding-right:10px !important; font-weight:600; }
.cl-ct-val { color:var(--gdddddd); white-space:nowrap; }
.cl-contact-deal .cl-ct-lbl, .cl-contact-deal .cl-ct-val { font-weight:700; }
.cl-contact-deal.contract .cl-ct-lbl, .cl-contact-deal.contract .cl-ct-val { color:var(--tf39e978); }
.cl-contact-deal.kp .cl-ct-lbl, .cl-contact-deal.kp .cl-ct-val { color:var(--g9ca3af); }


.cl-person-label { color:var(--g777777); font-size:10.5px; flex-shrink:0; }
.cl-person { display:flex; align-items:center; gap:9px; }
.cl-person .cl-avatar { width:32px; height:32px; }
.cl-person strong { font-size:13px; display:block; }
.cl-person small { color:var(--g777777); font-size:10px; }

.cl-tabs { display:flex; border-bottom:1px solid var(--g292929); overflow-x:auto; padding:0 10px; }
.cl-tab { flex:none; padding:12px 11px; border:0; border-bottom:2px solid transparent; background:none; color:var(--g8a8a8a); font-size:10px; }
.cl-tab.active { color:var(--gffffff); border-color:var(--cl-yellow); }

.cl-tab-content { padding:14px; }
.cl-tab-pane { display:none; }
.cl-tab-pane.active { display:block; }

.cl-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; }
.cl-box { background:var(--g101011); border:1px solid var(--g282828); border-radius:8px; padding:13px; }
.cl-box h3 { font-size:11px; margin-bottom:13px; }
.cl-info-row { display:grid; grid-template-columns:105px 1fr; margin:9px 0; font-size:10px; }
.cl-info-label { color:var(--g777777); }
.cl-info-value { color:var(--gdddddd); line-height:1.5; }
.cl-priority { color:var(--geeeeee); }
.cl-priority::before { content:""; display:inline-block; width:6px; height:6px; background:var(--cl-yellow); border-radius:50%; margin-right:6px; }
.cl-finance-value { color:var(--geeeeee); font-weight:600; }
.cl-green-text { color:var(--tf21df68); }
.cl-additional { margin-top:10px; }
.cl-additional-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; }

.cl-activity { display:flex; gap:12px; margin:13px 0; }
.cl-activity-icon { width:30px; height:30px; border-radius:50%; background:var(--g1d1d1e); border:1px solid var(--g333333); display:flex; align-items:center; justify-content:center; flex:none; }
.cl-activity-title { font-size:10px; font-weight:700; }
.cl-activity-text { color:var(--g888888); font-size:9px; margin-top:3px; line-height:1.5; }

.cl-placeholder { min-height:300px; }
.cl-placeholder h2 { font-size:15px; margin-bottom:8px; }
.cl-placeholder p { color:var(--g888888); line-height:1.6; font-size:12px; }
.cl-demo-list { margin-top:18px; display:grid; gap:8px; }
.cl-demo-row { border:1px solid var(--g282828); background:var(--g101011); padding:12px; border-radius:7px; display:flex; justify-content:space-between; font-size:12px; }
.cl-demo-row span { color:var(--g777777); }

/* ==== YANGI: Toolbar ( common actions) ==== */
.cl-tool-btn { display:flex; align-items:center; gap:6px; background:var(--g141414); border:1px solid var(--g2a2a2a); color:var(--gcccccc); height:40px; padding:0 15px; border-radius:9px; font-size:12.5px; flex-shrink:0; cursor:pointer; font-family:inherit; }
.cl-tool-btn:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.cl-tool-btn.primary { background:var(--cl-yellow); color:var(--g111111); border:0; font-weight:700; padding:0 18px; }
.cl-bulkbar { display:none; align-items:center; gap:10px; padding:9px 20px; margin:0 20px 10px; background:var(--tb1e1a00); border:1px solid #796800; border-radius:8px; font-size:11px; color:var(--cl-yellow); }
.cl-bulkbar.show { display:flex; }
.cl-bulkbar .cl-bulk-actions { margin-left:auto; display:flex; gap:8px; }
.cl-bulkbar button { background:var(--g141414); border:1px solid var(--g3a3a3a); color:var(--gdddddd); padding:6px 10px; border-radius:6px; font-size:11px; }
.cl-bulkbar button:hover { border-color:var(--cl-yellow); }

/* ==== YANGI: checkbox ustuni ==== */
#page-clients th.cl-check-col, #page-clients td.cl-check-col { width:34px; padding-left:14px; padding-right:0; }
#page-clients input[type=checkbox] { width:15px; height:15px; accent-color:var(--cl-yellow); cursor:pointer; }
#page-clients th.cl-sortable { cursor:pointer; user-select:none; }
#page-clients th.cl-sortable:hover { color:var(--cl-yellow); }
#page-clients th.cl-sortable .cl-sort-ic { font-size:9px; opacity:.6; }

/* ==== YANGI: LTV, teg, voronka bosqichi ==== */
.cl-ltv { font-size:11px; font-weight:600; }
.cl-ltv.contract { color:var(--tf39e978); }   /* Договор заключён — yashil */
.cl-ltv.kp { color:var(--g9ca3af); }          /* Составлено КП — kulrang */
/* ==== Voronka bosqichi ustuni (Этап) ==== */
.cl-stage-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; font-size:10px; font-weight:600; background:var(--g161616); border:1px solid var(--g262626); white-space:nowrap; }
.cl-stage-pip { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cl-labels { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.cl-label { padding:2px 7px; border-radius:4px; font-size:8.5px; font-weight:700; }
.cl-label.vip { background:var(--tb332b00); color:var(--tfffd400); border:1px solid #796800; }
.cl-label.new { background:var(--tb071c23); color:var(--tf59b6ff); border:1px solid #17466b; }
.cl-label.problem { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
.cl-label.big { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.cl-stage { display:inline-flex; align-items:center; gap:5px; background:var(--g151515); border:1px solid var(--g2a2a2a); border-radius:20px; padding:4px 10px; font-size:9px; color:var(--gbbbbbb); margin-top:8px; }
.cl-stage-dot { width:7px; height:7px; border-radius:50%; }

/* ==== YANGI: tezkor amal tugmalari (kartochka) ==== */
.cl-quick-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cl-qa-btn { display:flex; align-items:center; gap:6px; background:var(--g141414); border:1px solid var(--g2a2a2a); color:var(--gdddddd); padding:8px 12px; border-radius:7px; font-size:11px; }

/* ==== Kontakt ro'yxati (Позвонить / Telegram tugmalari ostida) ==== */
.cl-qa-wrap { position:relative; }
.cl-qa-drop { display:none; position:absolute; top:calc(100% + 7px); right:0; z-index:120; min-width:262px;
    background:var(--g161616); border:1px solid var(--g2f2f2f); border-radius:10px; padding:6px;
    box-shadow:0 18px 50px rgba(0,0,0,.6); }
.cl-qa-drop.open { display:block; }
.cl-qa-drop.left { right:auto; left:0; }
.cl-qa-drop.up { top:auto; bottom:calc(100% + 7px); }
.cl-qa-val.mail { color:var(--tfe3a83c); }
.cl-qa-drop-head { font-size:8.5px; color:var(--g777777); text-transform:uppercase; letter-spacing:.6px;
    padding:5px 9px 8px; border-bottom:1px solid var(--g242424); margin-bottom:4px; }
.cl-qa-item { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:7px; cursor:pointer; transition:.15s; }
.cl-qa-item:hover { background:var(--g1f1f1f); }
.cl-qa-ava { width:28px; height:28px; border-radius:50%; background:var(--g1f1f1f); border:1px solid var(--g2e2e2e);
    display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.cl-qa-info { min-width:0; }
.cl-qa-nm { font-size:10.5px; color:var(--geeeeee); font-weight:600; white-space:nowrap; }
.cl-qa-rl { font-size:8.5px; color:var(--g777777); margin-top:2px; white-space:nowrap; }
.cl-qa-val { font-size:10px; margin-left:auto; white-space:nowrap; font-weight:600; }
.cl-qa-val.tel { color:var(--tf39e978); }
.cl-qa-val.tg { color:var(--tf4ca8ff); }
.cl-qa-empty { padding:14px 10px; text-align:center; color:var(--g666666); font-size:10px; }
.cl-qa-btn:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.cl-qa-btn.call { border-color:#146c35; color:var(--tf39e978); }
.cl-qa-btn.call:hover { background:var(--tb071c0e); }

/* ==== YANGI: LTV / signal box ==== */
.cl-alert { display:flex; align-items:center; gap:10px; background:var(--tb2a0808); border:1px solid #6b1a1a; border-radius:8px; padding:11px 13px; margin-top:10px; font-size:11px; color:var(--tfff9b9b); }
.cl-alert.warn { background:var(--tb2a2100); border-color:#6b5a1a; color:var(--tfffd47a); }
.cl-alert .cl-alert-ic { font-size:16px; }

/* ==== YANGI: integratsiya / xarita mini ==== */
.cl-integrations { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.cl-int-item { display:flex; align-items:center; gap:8px; background:var(--g101011); border:1px solid var(--g282828); border-radius:7px; padding:9px 11px; font-size:11px; }
.cl-int-item .cl-int-ic { width:24px; height:24px; border-radius:5px; display:grid; place-items:center; font-size:12px; flex-shrink:0; }
.cl-int-status { margin-left:auto; font-size:9px; padding:2px 6px; border-radius:4px; }
.cl-int-status.on { background:var(--tb071c0e); color:var(--tf39e978); }
.cl-int-status.off { background:var(--tb211400); color:var(--tfff9f0a); }
.cl-map { height:130px; border-radius:8px; margin-top:10px; border:1px solid var(--g282828); background:linear-gradient(135deg,var(--g0f1a12),var(--g101011)); display:flex; align-items:center; justify-content:center; color:#5a7a5a; font-size:11px; position:relative; overflow:hidden; }
.cl-map .cl-map-pin { font-size:26px; }
.cl-map .cl-map-label { position:absolute; bottom:8px; left:10px; background:rgba(0,0,0,.6); padding:4px 8px; border-radius:5px; color:var(--gcccccc); font-size:9px; }

/* ==== YANGI: avtomatlashtirish ==== */
.cl-auto-item { display:flex; align-items:center; gap:10px; background:var(--g101011); border:1px solid var(--g282828); border-radius:7px; padding:11px; margin-top:8px; font-size:11px; }
.cl-auto-item .cl-auto-ic { width:28px; height:28px; border-radius:6px; display:grid; place-items:center; font-size:13px; background:var(--tb1a1600); color:var(--cl-yellow); flex-shrink:0; }
.cl-auto-item .cl-auto-body { flex:1; }
.cl-auto-item .cl-auto-title { color:var(--geeeeee); font-weight:600; }
.cl-auto-item .cl-auto-sub { color:var(--g777777); font-size:9px; margin-top:2px; }
.cl-switch { width:36px; height:20px; border-radius:11px; background:var(--g333333); position:relative; cursor:pointer; flex-shrink:0; transition:.2s; }
.cl-switch.on { background:var(--cl-yellow); }
.cl-switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--gffffff); transition:.2s; }
.cl-switch.on::after { transform:translateX(16px); }

/* ==== YANGI: dup ogohlantirish ==== */
.cl-dup-warn { background:var(--tb2a2100); border:1px solid #6b5a1a; color:var(--tfffd47a); font-size:9px; padding:2px 6px; border-radius:4px; margin-left:6px; }

.cl-filter-panel { position:absolute; width:310px; background:var(--g101011); border:1px solid var(--g333333); border-radius:10px; padding:15px; z-index:50; left:20px; top:100px; box-shadow:0 20px 60px var(--shadow); display:none; }

/* ===================================================== */
/* ================ CONTRACTS (SHARTNOMALAR) ============ */
/* ===================================================== */
.ct-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:20px; }
@media(max-width:1400px){ .ct-stats{ grid-template-columns:repeat(3,1fr);} }
.ct-stat-box { background:var(--g101011); border:1px solid var(--g282828); border-radius:9px; padding:13px; }
.ct-stat-label { font-size:10.5px; color:var(--g777777); margin-bottom:6px; }
.ct-stat-num { font-size:20px; font-weight:800; color:var(--geeeeee); }

.ct-list { display:flex; flex-direction:column; gap:12px; }
.ct-card { background:var(--g101011); border:1px solid var(--g2a2a2a); border-radius:12px; overflow:hidden; transition:.2s; }
.ct-card:hover { border-color:var(--g3a3a3a); }
.ct-card-head { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; user-select:none; }
.ct-card-head:hover { background:var(--g141416); }
.ct-brand-logo { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--gffffff); flex-shrink:0; }
.ct-brand-info { flex:1; min-width:0; }
.ct-brand-name { font-size:14px; font-weight:700; color:var(--geeeeee); }
.ct-brand-sub { font-size:10.5px; color:var(--g888888); margin-top:2px; }
.ct-brand-sum { color:var(--tf39e978); font-weight:700; font-size:13px; }
.ct-brand-status { padding:4px 8px; border-radius:5px; font-size:9.5px; }
.ct-brand-status.active { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.ct-brand-status.done { background:var(--g151515); color:var(--g888888); border:1px solid var(--g333333); }
.ct-brand-status.pending { background:var(--tb211400); color:var(--tfff9f0a); border:1px solid #704500; }
.ct-toggle { color:var(--g666666); font-size:14px; transition:.2s; }
.ct-card.open .ct-toggle { transform:rotate(180deg); color:var(--cl-yellow); }

.ct-details { display:none; padding:14px 16px 16px; border-top:1px solid var(--g232323); background:var(--g0a0a0b); }
.ct-card.open .ct-details { display:block; }
.ct-detail-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.ct-detail-row { background:var(--g141416); border:1px solid var(--g262626); border-radius:8px; padding:10px 12px; }
.ct-detail-label { color:var(--g777777); font-size:10px; margin-bottom:5px; }
.ct-detail-value { color:var(--geeeeee); font-size:12.5px; font-weight:600; }
.ct-detail-value.money { color:var(--tf39e978); }
.ct-detail-value.warning { color:var(--tfff9f0a); }

/* Fayllar bo'limi shartnoma ichida */
.ct-files { margin-top:14px; padding-top:14px; border-top:1px solid var(--g232323); }
.ct-files-title { font-size:11px; color:var(--g999999); margin-bottom:9px; font-weight:600; }
.ct-file-row { display:flex; align-items:center; gap:10px; padding:8px 11px; background:var(--g141416); border:1px solid var(--g262626); border-radius:7px; margin-bottom:6px; font-size:11.5px; }
.ct-file-row .ct-file-ic { font-size:14px; }
.ct-file-row .ct-file-size { margin-left:auto; color:var(--g777777); font-size:10px; }
.ct-file-row:hover { border-color:var(--cl-yellow); cursor:pointer; }

/* Yangi shartnoma modali */
.ct-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:400; }
.ct-modal.show { display:flex; }
.ct-modal-card { width:720px; max-width:92%; max-height:90vh; overflow-y:auto; background:var(--g141515); border:1px solid var(--g3a3a3a); border-radius:14px; box-shadow:0 20px 80px var(--shadow); }
.ct-modal-head { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--g2a2a2a); }
.ct-modal-head h2 { font-size:19px; }
.ct-modal-close { background:none; border:0; color:var(--gaaaaaa); font-size:24px; cursor:pointer; }
.ct-modal-body { padding:20px 24px; }
.ct-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ct-form-group { display:flex; flex-direction:column; gap:5px; }
.ct-form-group.full { grid-column:span 2; }
.ct-form-group label { color:var(--g999999); font-size:11px; }
.ct-form-group input, .ct-form-group select { background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--geeeeee); padding:9px 12px; border-radius:7px; font-size:12.5px; font-family:inherit; }
.ct-form-group input:focus, .ct-form-group select:focus { outline:none; border-color:var(--cl-yellow); }
.ct-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--g2a2a2a); }
.ct-btn { padding:10px 18px; border-radius:7px; border:1px solid var(--g3a3a3a); background:var(--g1e1e1e); color:var(--gdddddd); cursor:pointer; font-size:12.5px; }
.ct-btn.primary { background:var(--cl-yellow); color:var(--g111111); border:0; font-weight:800; }

/* ===== KONTAKTLAR (yangi dizayn) ===== */
.cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cc-card { background:var(--g101011); border:1px solid var(--g262626); border-radius:12px; padding:18px; display:flex; gap:16px; align-items:center; transition:.2s; }
.cc-card:hover { border-color:var(--g3a3a3a); }
.cc-photo { width:90px; height:90px; border-radius:10px; object-fit:cover; flex-shrink:0; background:linear-gradient(135deg,var(--g333333),var(--g1a1a1a)); display:grid; place-items:center; font-size:30px; color:var(--g666666); }
.cc-body { flex:1; min-width:0; }
.cc-name { font-size:16px; font-weight:700; color:var(--geeeeee); margin-bottom:6px; }
.cc-role { display:flex; align-items:center; gap:7px; color:var(--cl-yellow); font-size:12px; margin-bottom:14px; }
.cc-contacts { display:flex; flex-direction:column; gap:9px; }
.cc-contact-row { display:flex; align-items:center; gap:9px; font-size:12px; }
.cc-contact-ic { width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:13px; flex-shrink:0; }
.cc-contact-ic.phone { background:var(--tb071c0e); color:var(--tf39e978); }
.cc-contact-ic.tg { background:var(--tb071c23); color:var(--tf59b6ff); }
.cc-contact-ic.ig { background:var(--tb2a0a1e); color:var(--tfff6b9d); }
.cc-contact-info .v { color:var(--geeeeee); }
.cc-contact-info .l { color:var(--g777777); font-size:9.5px; }
@media(max-width:1000px){ .cc-grid{ grid-template-columns:1fr;} }

/* ===== Договор ichki kartochkasi (Общая информация | Счёт-фактура | Оплата) ===== */
.ctd-view { background:var(--g0a0a0b); border:1px solid var(--g2a2a2a); border-radius:12px; overflow:hidden; }
.ctd-header { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--g232323); }
.ctd-back { background:var(--g161616); border:1px solid var(--g333333); color:var(--gdddddd); padding:8px 14px; border-radius:7px; font-size:12px; cursor:pointer; }
.ctd-back:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.ctd-logo { width:38px; height:38px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--gffffff); flex-shrink:0; }
.ctd-title { flex:1; }
.ctd-title h2 { font-size:16px; color:var(--geeeeee); }
.ctd-title .ctd-sub { font-size:11px; color:var(--g888888); margin-top:2px; }
.ctd-status { padding:4px 9px; border-radius:5px; font-size:10px; }
.ctd-status.active { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.ctd-status.done { background:var(--g151515); color:var(--g888888); border:1px solid var(--g333333); }
.ctd-status.pending { background:var(--tb211400); color:var(--tfff9f0a); border:1px solid #704500; }

.ctd-tabs { display:flex; padding:0 18px; border-bottom:1px solid var(--g232323); gap:0; }
.ctd-tab { padding:13px 18px; border:0; border-bottom:2px solid transparent; background:none; color:var(--g8a8a8a); font-size:12.5px; cursor:pointer; font-family:inherit; }
.ctd-tab.active { color:var(--gffffff); border-color:var(--cl-yellow); }
.ctd-tab:hover:not(.active) { color:var(--gcccccc); }

.ctd-content { padding:18px; }
.ctd-pane { display:none; }
.ctd-pane.active { display:block; }

/* Общая информация — 15 ta maydon */
.ctd-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ctd-field { background:var(--g141416); border:1px solid var(--g262626); border-radius:8px; padding:11px 13px; }
.ctd-field-label { color:var(--g777777); font-size:10px; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.ctd-field-label .n { color:var(--cl-yellow); font-weight:700; }
.ctd-field-value { color:var(--geeeeee); font-size:13px; font-weight:600; }
.ctd-field-value.money { color:var(--tf39e978); }
.ctd-field-value.warn { color:var(--tfff9f0a); }
.ctd-field-value.debt { color:var(--tfff6b6b); }
.ctd-field-value.empty { color:var(--g555555); font-weight:400; }
.ctd-field.highlight { background:linear-gradient(145deg,var(--g1c1a0a),var(--g141416)); border-color:#5a4c14; }

/* Placeholder for Счёт-фактура va Оплата */
.ctd-placeholder { text-align:center; padding:40px 20px; color:var(--g777777); }
.ctd-placeholder .ic { font-size:36px; margin-bottom:10px; opacity:.5; }
.ctd-placeholder h3 { color:var(--gcccccc); font-size:15px; margin-bottom:6px; }
.ctd-placeholder p { font-size:12px; }
.cl-filter-panel.open { display:block; }
.cl-filter-panel h3 { margin-bottom:15px; font-size:14px; }
.cl-filter-group { margin:12px 0; }
.cl-filter-group label { display:block; color:var(--g777777); font-size:10px; margin-bottom:6px; }
.cl-filter-group select { width:100%; height:36px; border:1px solid var(--g333333); border-radius:6px; background:var(--g171717); color:var(--gdddddd); padding:0 8px; }
.cl-apply-filter { width:100%; border:0; background:var(--cl-yellow); color:var(--g000000); font-weight:800; padding:10px; border-radius:6px; margin-top:8px; }

@media(max-width:1300px){ .cl-card-area{ width:92%; max-width:none; } }

/* ===================================================== */
/* ===== BOSQICH ICHI: JADVAL KO'RINISHI ================ */
/* ===================================================== */
.sl-head, .sl-row {
    display:grid;
    grid-template-columns: minmax(220px,1.5fr) minmax(150px,1fr) minmax(150px,1fr) 120px 90px 60px;
    gap:14px; align-items:center; padding:14px 18px;
}
.sl-head {
    color:var(--g7a7a80); font-size:11.5px; border-bottom:1px solid var(--g232324);
}
.sl-row { border-bottom:1px solid var(--g1c1c1d); transition:background .15s; }
.sl-row:last-child { border-bottom:0; }
.sl-row:hover { background:var(--g171719); }

.sl-task { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.sl-time { color:var(--acc); font-size:13.5px; font-weight:700; flex-shrink:0; padding-top:1px; }
.sl-task-main { min-width:0; cursor:pointer; }
.sl-title { color:var(--gf0f0f2); font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-company { color:var(--g8a8a90); font-size:11.5px; margin-top:3px; }
.sl-funnel { color:var(--g6a6a70); font-size:11px; margin-top:2px; }

.sl-person { display:flex; align-items:center; gap:9px; color:var(--gd5d5da); font-size:12.5px; min-width:0; }
.sl-avatar {
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center; font-size:10.5px; font-weight:700; color:var(--gffffff);
}
.sl-date { color:var(--gc5c5ca); font-size:12px; line-height:1.5; }
.sl-date span { color:var(--g75757a); }

.sl-deadline {
    background:none; border:1px solid #2c5a8a; color:var(--tf5aa9ff);
    padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:.16s; white-space:nowrap;
}
.sl-deadline:hover { border-color:var(--tf5aa9ff); background:var(--tb0d1f30); }

.sl-done {
    width:38px; height:34px; border-radius:8px; background:none;
    border:1px solid var(--tb4a3f0a); color:var(--acc); font-size:15px;
    cursor:pointer; transition:.16s; display:grid; place-items:center;
}
.sl-done:hover { background:var(--tb1e1a00); border-color:var(--acc); }

@media(max-width:1100px){
    .sl-head { display:none; }
    .sl-row { grid-template-columns:1fr; gap:8px; }
}

/* ===================================================== */
/* ===== VAZIFALAR RO'YXATI (kun ichi / bosqich ichi) === */
/* ===================================================== */
.tl-row {
    display:flex; align-items:center; gap:13px; padding:12px 14px;
    border-bottom:1px solid var(--g1e1e1f); transition:background .15s; position:relative;
}
.tl-row:last-child { border-bottom:0; }
.tl-row:hover { background:var(--g181819); }
.tl-accent { width:3px; align-self:stretch; border-radius:3px; flex-shrink:0; background:#4388ee; }
.tl-accent.work { background:#40c878; }
.tl-accent.done { background:var(--g555555); }
.tl-main { flex:1; min-width:0; cursor:pointer; }
.tl-title { color:var(--geeeeee); font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-sub { color:var(--g7c7c82); font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tl-deadline {
    display:flex; align-items:center; gap:7px; flex-shrink:0;
    background:var(--g1a1a1c); border:1px solid var(--g2a2a2c); color:var(--gcccccc);
    padding:7px 13px; border-radius:8px; font-size:12px; cursor:pointer;
    font-family:inherit; transition:.16s;
}
.tl-deadline .dot { width:6px; height:6px; border-radius:50%; background:var(--acc); }
.tl-deadline:hover { border-color:var(--acc); color:var(--acc); }

.tl-done {
    flex-shrink:0; background:var(--acc); color:var(--g111111); border:0;
    padding:8px 15px; border-radius:8px; font-size:12px; font-weight:700;
    cursor:pointer; font-family:inherit; transition:.16s;
}
.tl-done:hover { background:var(--acc-2); }

/* ===================================================== */
/* ===== SPOTLIGHT: kursor ortidan yuruvchi yumshoq nur == */
/* Pseudo-elementlar band bo'lgani uchun background-image  */
/* qatlamidan foydalanamiz — mavjud stillarga tegmaydi.    */
/* ===================================================== */
.menu-item,
.submenu-item,
.fn-card,
.kb-card,
.kb-stat-card,
.kb-stage-row,
.kbl-company-row,
.vz-list-card,
.vz-list-item,
.vz-task,
.cl-quick-filter,
.kb-tool-btn,
.kb-add-deal,
.kb-view-opt,
.cl-tool-btn,
.cl-filter-btn,
.vz-add-btn,
.topbar-settings-btn,
.bell,
.topbar .avatar,
.sidebar-toggle,
.sidebar-open-btn,
.kb-stats-toggle-btn,
.cc-card,
.ct-card,
.cr-btn,
.fs-row-head,
.ks-sum-box,
.vz-day {
    background-image:
        radial-gradient(
            var(--spot-size, 130px) circle at var(--mx, -999px) var(--my, -999px),
            rgba(255,255,255,.038),
            rgba(255,255,255,.013) 45%,
            transparent 70%
        );
    background-repeat:no-repeat;
}

/* Kichik dumaloq ikonkalar uchun nur ham kichikroq */
.bell, .topbar .avatar, .topbar-settings-btn,
.sidebar-toggle, .sidebar-open-btn, .kb-view-opt,
.cl-quick-filter, .kb-tool-btn {
    --spot-size:60px;
}

/* Katta kartalar uchun kengroq, yumshoqroq nur */
.fn-card, .vz-list-card, .kb-stat-card, .cc-card, .ct-card {
    --spot-size:220px;
}

/* Sariq (asosiy) tugmalarda nur biroz kuchliroq — qora fon ustida ko'rinsin */
.kb-add-deal, .vz-add-btn, .cl-tool-btn.primary, .cr-btn.primary {
    background-image:
        radial-gradient(
            90px circle at var(--mx, -999px) var(--my, -999px),
            rgba(255,255,255,.20),
            rgba(255,255,255,.07) 45%,
            transparent 70%
        );
    background-repeat:no-repeat;
}

/* ==================================================== */
/* ============ МЕНЕДЖЕРЫ (xodimlar) ================== */
/* ==================================================== */
#page-managers { padding:0 30px 26px; --cl-yellow:var(--acc); }
.mg-wrap { position:relative; }
/* .page bilan bir xil ichki masofa (standart) */
.mg-main { display:flex; flex-direction:column; gap:22px; }
.mg-wrap.show-card .mg-main { display:none; }

/* ================= STRUKTURA (org-chart) ============= */
.mg-tree-wrap { overflow-x:auto; padding:12px 0 26px; }
.mg-tree { display:flex; justify-content:center; min-width:min-content; --ln:var(--acc-55); }
.mg-node { display:flex; flex-direction:column; align-items:center; }
.mg-children { display:flex; justify-content:center; position:relative; padding-top:40px; }
.mg-children::before { content:''; position:absolute; top:0; left:calc(50% - 1px); width:2px; height:20px; background:var(--ln); }
.mg-children > .mg-node { position:relative; padding:20px 9px 0; }
.mg-children > .mg-node::before,
.mg-children > .mg-node::after { content:''; position:absolute; top:0; width:50%; height:20px; border-top:2px solid var(--ln); }
.mg-children > .mg-node::before { right:50%; }
.mg-children > .mg-node::after  { left:50%; }
.mg-children > .mg-node:first-child::before { border-top:0; }
.mg-children > .mg-node:last-child::after  { border-top:0; }
/* vertikal chiziq + sariq nuqta */
.mg-children > .mg-node > .mg-card::before { content:''; position:absolute; top:-20px; left:calc(50% - 1px);
    width:2px; height:20px; background:var(--ln); }
.mg-children > .mg-node > .mg-card::after { content:''; position:absolute; top:-24px; left:calc(50% - 4px);
    width:8px; height:8px; border-radius:50%; background:var(--cl-yellow); box-shadow:0 0 7px var(--acc-55); }

/* --- kartochka --- */
.mg-card { position:relative; background:var(--g131314); border:1px solid var(--g262626); border-radius:14px; padding:18px 20px 14px;
    min-width:186px; text-align:center; cursor:pointer; transition:.2s; }
.mg-card:hover { border-color:var(--cl-yellow); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.45); }
.mg-ava { width:58px; height:58px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
    font-size:19px; font-weight:700; color:var(--gffffff); border:2px solid var(--g2e2e2e); }
.mg-card .mg-name { font-size:14px; font-weight:700; color:var(--gf0f0f0); }
.mg-card .mg-role { font-size:11px; margin-top:4px; }
.mg-card .mg-count { margin-top:11px; padding-top:10px; border-top:1px solid var(--g242424); color:var(--g8a8a8a); font-size:10.5px;
    display:flex; align-items:center; justify-content:center; gap:6px; }
.mg-card .mg-count svg { width:13px; height:13px; }
/* rahbar (root) */
.mg-card.chief { border:1.5px solid var(--cl-yellow); box-shadow:0 0 24px var(--acc-44); min-width:216px; }
.mg-card.chief .mg-ava { width:66px; height:66px; font-size:21px; border-color:#5a4708; }
.mg-crown { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
    background:var(--tb241d05); border:1px solid #5a4708; display:flex; align-items:center; justify-content:center; font-size:13px; }
/* rangli rol ikonkasi (2-daraja) */
.mg-role-ic { position:absolute; top:14px; left:14px; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; }
.mg-role-ic svg { width:15px; height:15px; }
/* 3-daraja — kichikroq */
.mg-card.small { min-width:156px; padding:14px 16px 11px; }
.mg-card.small .mg-ava { width:44px; height:44px; font-size:15px; margin-bottom:8px; }
.mg-card.small .mg-name { font-size:12.5px; }
.mg-card.small .mg-role { font-size:10px; }
.mg-card.small .mg-count { margin-top:9px; padding-top:8px; font-size:10px; }

/* --- pastki yig'indi paneli --- */
.mg-summary { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    background:var(--g111112); border:1px solid #2b2612; border-radius:14px; padding:16px 22px; }
.mg-sum-item { display:flex; align-items:center; gap:12px; padding:0 26px; }
.mg-sum-item + .mg-sum-item { border-left:1px solid var(--g242424); }
.mg-sum-ic { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--cl-yellow); }
.mg-sum-ic svg { width:26px; height:26px; }
.mg-sum-num { font-size:19px; font-weight:800; color:var(--gffffff); line-height:1.1; }
.mg-sum-label { font-size:10.5px; color:var(--g8a8a8a); margin-top:2px; }

/* ================= SPISOK (jadval) ================== */
.mg-list-wrap { background:var(--g111112); border:1px solid var(--g232323); border-radius:14px; overflow:hidden; margin-bottom:18px; }
.mg-list-wrap table { width:100%; border-collapse:collapse; }
.mg-list-wrap th { text-align:left; padding:13px 14px; font-size:10.5px; color:var(--g8a8a8a); font-weight:600;
    border-bottom:1px solid var(--g232323); background:var(--g141415); white-space:nowrap; }
.mg-list-wrap td { padding:12px 14px; font-size:11.5px; color:var(--gdddddd); border-bottom:1px solid var(--g1c1c1c); }
.mg-list-wrap tr:last-child td { border-bottom:0; }
.mg-list-wrap tbody tr { cursor:pointer; transition:.15s; }
.mg-list-wrap tbody tr:hover { background:var(--g171718); }
.mg-emp-cell { display:flex; align-items:center; gap:10px; }
.mg-emp-cell .mg-ava { width:34px; height:34px; font-size:12px; margin:0; border-width:1.5px; }
.mg-emp-name { font-size:12px; font-weight:600; color:var(--geeeeee); }
.mg-emp-sub { font-size:9.5px; color:var(--g777777); margin-top:2px; }
.mg-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:6px; font-size:9.5px;
    background:var(--g161616); border:1px solid var(--g272727); white-space:nowrap; }
.mg-badge .dot { width:6px; height:6px; border-radius:50%; }
.mg-money { color:var(--tf39e978); font-weight:600; font-size:11.5px; }
.mg-status { padding:4px 9px; border-radius:6px; font-size:9.5px; }
.mg-status.active { background:var(--tb04200d); color:var(--tf24e56b); border:1px solid #095826; }
.mg-status.vacation { background:var(--tb211400); color:var(--tfff9f0a); border:1px solid #704500; }

/* ================= XODIM SAHIFASI =================== */
.mg-card-area { display:none; }
.mg-wrap.show-card .mg-card-area { display:block; }
.mg-emp-page { background:var(--g0f0f10); border:1px solid var(--g232323); border-radius:16px; overflow:hidden; }
.mg-emp-header { padding:18px 22px; display:flex; justify-content:space-between; gap:18px;
    border-bottom:1px solid var(--g262626); flex-wrap:wrap; }
.mg-emp-left { display:flex; gap:16px; }
.mg-emp-leftcol { display:flex; flex-direction:column; gap:10px; width:150px; flex-shrink:0; }
.mg-back-btn { padding:9px 12px; border-radius:8px; background:var(--g1a1a1a); border:1px solid var(--g333333); color:var(--gdddddd);
    font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.mg-back-btn:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.mg-emp-bigava { width:150px; height:150px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:46px; font-weight:800; color:var(--gffffff); border:1px solid var(--g2c2c2c); }
.mg-emp-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mg-emp-title h2 { font-size:19px; }
.mg-emp-meta { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.mg-meta-tag { padding:4px 9px; background:var(--g151515); border:1px solid var(--g292929); border-radius:6px; color:var(--g999999); font-size:9.5px; }
.mg-emp-kpi-row { display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.mg-kpi-mini { background:var(--g131314); border:1px solid var(--g262626); border-radius:9px; padding:9px 14px; min-width:112px; }
.mg-kpi-mini .lbl { font-size:9px; color:var(--g818181); text-transform:uppercase; letter-spacing:.4px; }
.mg-kpi-mini .val { font-size:15px; font-weight:800; margin-top:3px; color:var(--geeeeee); }
.mg-emp-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.mg-emp-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mg-act-btn { display:flex; align-items:center; gap:6px; background:var(--g161616); border:1px solid var(--g2e2e2e); color:var(--gdddddd);
    padding:9px 14px; border-radius:9px; font-size:11.5px; cursor:pointer; font-family:inherit; }
.mg-act-btn:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }
.mg-act-btn.call { border-color:#1d5c33; color:var(--tf39e978); }
.mg-act-btn.call:hover { background:var(--tb04200d); }

.mg-tabs { display:flex; border-bottom:1px solid var(--g292929); padding:0 12px; overflow-x:auto; }
.mg-tab { flex:none; padding:13px 14px; border:0; border-bottom:2px solid transparent; background:none;
    color:var(--g8a8a8a); font-size:11.5px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.mg-tab.active { color:var(--gffffff); border-color:var(--cl-yellow); }
.mg-tab-content { padding:16px; }
.mg-pane { display:none; }
.mg-pane.active { display:block; }

.mg-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mg-box { background:var(--g101011); border:1px solid var(--g282828); border-radius:10px; padding:15px; }
.mg-box h3 { font-size:12px; margin-bottom:14px; color:var(--geeeeee); }
.mg-info-row { display:grid; grid-template-columns:150px 1fr; margin:10px 0; font-size:11px; }
.mg-info-label { color:var(--g777777); }
.mg-info-value { color:var(--gdddddd); line-height:1.5; }
.mg-info-value.green { color:var(--tf39e978); font-weight:600; }

/* KPI kartalari */
.mg-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:13px; }
.mg-kpi-card { background:var(--g101011); border:1px solid var(--g282828); border-radius:10px; padding:14px; }
.mg-kpi-card .ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.mg-kpi-card .ic svg { width:18px; height:18px; }
.mg-kpi-card .lbl { font-size:10px; color:var(--g818181); }
.mg-kpi-card .val { font-size:19px; font-weight:800; color:var(--gffffff); margin-top:4px; }
.mg-kpi-card .sub { font-size:9.5px; margin-top:4px; color:var(--g777777); }
.mg-kpi-card .sub.up { color:var(--tf39e978); }
/* reja/fakt */
.mg-plan-row { display:flex; align-items:center; justify-content:space-between; font-size:11px; margin-bottom:8px; }
.mg-progress { height:9px; background:var(--g1c1c1c); border-radius:6px; overflow:hidden; }
.mg-progress-bar { height:100%; border-radius:6px; background:linear-gradient(90deg,#e0a800,var(--acc)); }

/* hujjatlar */
.mg-doc-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--g242424);
    background:var(--g101011); border-radius:9px; margin-bottom:8px; }
.mg-doc-ic { width:34px; height:34px; border-radius:8px; background:var(--g1a1a1a); border:1px solid var(--g2a2a2a);
    display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.mg-doc-body { flex:1; min-width:0; }
.mg-doc-name { font-size:11.5px; color:var(--geeeeee); font-weight:600; }
.mg-doc-sub { font-size:9.5px; color:var(--g777777); margin-top:2px; }
.mg-doc-dl { background:var(--g161616); border:1px solid var(--g2e2e2e); color:var(--gbbbbbb); padding:6px 11px; border-radius:7px;
    font-size:10.5px; cursor:pointer; font-family:inherit; flex-shrink:0; }
.mg-doc-dl:hover { border-color:var(--cl-yellow); color:var(--cl-yellow); }

@media(max-width:1100px){ .mg-grid2 { grid-template-columns:1fr; } .mg-kpi-grid { grid-template-columns:repeat(2,1fr); } }
/* =====================================================================
   PROJECT ADDITIONS
   ===================================================================== */
/* Sidebar punktlari endi <a> */
a.menu-item, a.menu-item:hover { text-decoration:none; }
/* Profil menyusi: <a> va <button> ko'rinishi div bilan bir xil */
a.tb-menu-item { text-decoration:none; color:inherit; }
.tb-menu-btn { width:100%; background:none; border:0; text-align:left; font-family:inherit; font-size:12.5px; color:var(--gdddddd); cursor:pointer; }
.tb-drop-user { width:260px; }
.tb-menu-lang { justify-content:space-between; cursor:default; }
.tb-menu-lang:hover { color:inherit; }
.topbar-mode-btn { width:42px; height:42px; border-radius:50%; background:var(--g161616); border:1px solid var(--g2a2a2a);
    display:flex; align-items:center; justify-content:center; color:var(--gaaaaaa); cursor:pointer; transition:.2s; flex-shrink:0; font-size:17px; }
.topbar-mode-btn:hover { border-color:var(--acc); color:var(--acc); }

/* Til almashtirgich */
.lang-switch { display:inline-flex; gap:4px; }
.lang-btn { padding:4px 9px; border-radius:6px; border:1px solid var(--g333333); background:var(--g171717);
    color:var(--g999999); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.lang-btn:hover { border-color:var(--acc); color:var(--acc); }
.lang-btn.active { background:var(--acc); border-color:var(--acc); color:var(--g111111); }

/* Flash xabarlar */
.flash-list { display:flex; flex-direction:column; gap:8px; }
.flash { padding:11px 16px; border-radius:9px; font-size:13px; border:1px solid var(--g2a2a2a); background:var(--g161616); color:var(--gdddddd); }
.flash-success { border-color:#39e97855; color:#39e978; background:#0f1a12; }
.flash-error, .flash-danger { border-color:#ff6b6b55; color:#ff6b6b; background:#1c0f0f; }
.flash-warning { border-color:var(--acc-55); color:var(--acc); background:var(--g14140c); }

/* Forma tugmalari qatori */
.cr-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
a.cr-btn { text-decoration:none; display:inline-flex; align-items:center; }
.cr-field .cr-error.show { margin-top:2px; }

/* ============ AUTH (login) ============ */
.auth-body { display:flex; align-items:center; justify-content:center; height:100vh; overflow:auto; }
.auth-wrap { width:100%; max-width:420px; padding:24px; display:flex; flex-direction:column; gap:18px; }
.auth-card { background:var(--g141414); border:1px solid var(--g232323); border-radius:16px; padding:34px 34px 30px; box-shadow:0 20px 60px var(--shadow); }
.auth-logo { display:flex; align-items:baseline; gap:3px; justify-content:center; margin-bottom:22px; }
.auth-logo .ad { color:var(--gffffff); font-weight:800; font-size:30px; letter-spacing:.5px; text-shadow:0 0 10px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.22); }
.auth-logo .crm { color:var(--gd0d0d0); font-size:15px; font-weight:600; margin-left:2px; letter-spacing:.5px; text-shadow:0 0 8px rgba(255,255,255,.3); }
.auth-title { font-size:20px; text-align:center; margin-bottom:6px; }
.auth-sub { color:var(--g777777); font-size:12px; text-align:center; margin-bottom:22px; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-submit { width:100%; padding:12px; font-size:14px; margin-top:6px; }
.auth-foot { display:flex; justify-content:center; }

/* ============ PROFILE ============ */
.pf-grid { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
.pf-grid-single { grid-template-columns:minmax(0, 620px); }
.pf-card { display:flex; flex-direction:column; gap:18px; }
.pf-head { display:flex; gap:14px; align-items:center; }
.pf-ava { width:56px; height:56px; border-radius:14px; background:linear-gradient(145deg,var(--tb3d3418),var(--g1d1a0c));
    border:1px solid var(--acc-55); color:var(--acc); display:grid; place-items:center; font-weight:800; font-size:18px; flex-shrink:0; }
.pf-name { font-size:15px; font-weight:700; }
.pf-role { font-size:12px; color:var(--g888888); margin-top:2px; }
.pf-id { font-size:11px; color:var(--g666666); margin-top:4px; }
.pf-btn { justify-content:center; }
.pf-form .cr-grid { gap:14px; }
@media (max-width: 900px) { .pf-grid { grid-template-columns:1fr; } }

/* ============ STAFF (Сотрудники) ============ */
.mg-view { display:none; }
.mg-wrap[data-view="tree"] [data-view-pane="tree"],
.mg-wrap[data-view="list"] [data-view-pane="list"] { display:block; }
a.mg-card { text-decoration:none; color:inherit; display:block; }
.mg-card.dim { opacity:.28; filter:grayscale(.4); }
.mg-card.dim:hover { opacity:.7; }
.mg-tree { gap:40px; }
.mg-empty { padding:40px; color:var(--g666666); font-size:13px; }
.kb-tool-btn.open { border-color:var(--acc); color:var(--acc); }
.kb-view-opt svg { width:14px; height:14px; vertical-align:-2px; margin-right:4px; }
a.cl-quick-filter { text-decoration:none; }
.cl-quick-filter.chip-x { padding-right:26px; }
.qf-x { position:absolute; top:50%; right:7px; transform:translateY(-50%); width:15px; height:15px; border-radius:50%;
    background:var(--acc); color:var(--g111111); font-size:12px; font-weight:800; line-height:1; text-decoration:none;
    display:flex; align-items:center; justify-content:center; }
.qf-x:hover { background:#ff4d4d; color:var(--gffffff); }
.cl-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.vz-filters select { width:100%; }
a.cl-apply-filter { text-decoration:none; text-align:center; display:inline-block; }
.cl-apply-filter.mg-reset { background:var(--g1e1e1e); color:var(--acc); border:1px solid var(--acc); }
a.mg-back-btn, a.mg-act-btn { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.mg-tree-wrap { max-width:100%; }

/* ============ SETTINGS ============ */
.set-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.set-card { display:flex; align-items:center; gap:14px; background:var(--g131314); border:1px solid var(--g262626); border-radius:14px;
    padding:18px; text-decoration:none; color:inherit; transition:.18s; }
.set-card:hover { border-color:var(--acc); transform:translateY(-2px); }
.set-card.disabled { opacity:.5; pointer-events:none; }
.set-card-ic { width:46px; height:46px; border-radius:12px; background:var(--g1c1c1c); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.set-card-body { flex:1; min-width:0; }
.set-card-title { font-size:14px; font-weight:700; color:var(--geeeeee); }
.set-card-sub { font-size:11.5px; color:var(--g888888); margin-top:3px; }
.set-card-count { font-size:20px; font-weight:800; color:var(--acc); }
.set-card-count.muted { font-size:11px; color:var(--g666666); font-weight:600; }
.set-btn { padding:6px 10px; font-size:11.5px; }
.set-btn.danger:hover { border-color:#ff4d4d; color:#ff6b6b; }
.cr-field select { appearance:auto; }

/* ============ ROLE EDITOR (permissions) ============ */
.permsec { background:var(--g131314); border:1px solid var(--g262626); border-radius:14px; margin-bottom:12px; overflow:visible; }
.permsec-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--g232323); position:relative; }
.permsec-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.permsec-toggle input, .permitem input { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; flex-shrink:0; }
.permsec-title { font-size:14px; font-weight:700; color:var(--geeeeee); }
.permsec-hint { font-size:11.5px; color:var(--g777777); flex:1; }
.permsec-count { font-size:11px; color:var(--g888888); font-variant-numeric:tabular-nums; }
.permsec-body { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:4px; padding:10px 12px; }
.permitem { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; transition:.15s; }
.permitem:hover { background:var(--g1a1a1a); }
.permitem input { margin-top:2px; }
.permitem-text { display:flex; flex-direction:column; gap:2px; }
.permitem-label { font-size:12.5px; color:var(--gdddddd); }
.permitem-hint { font-size:10.5px; color:var(--g777777); }
.info-btn { position:relative; width:22px; height:22px; border-radius:50%; border:1px solid var(--g333333); background:var(--g1a1a1a);
    color:var(--g999999); cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; font-family:inherit; }
.info-btn:hover, .info-btn.open { border-color:var(--acc); color:var(--acc); }
.info-btn .popover { display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:320px; text-align:left;
    background:var(--g101011); border:1px solid var(--g333333); border-radius:10px; padding:12px 14px; font-size:11.5px; color:var(--gcccccc);
    line-height:1.5; box-shadow:0 20px 60px var(--shadow); cursor:default; }
.info-btn .popover b { display:block; color:var(--geeeeee); margin-bottom:5px; font-size:12px; }
.info-btn.open .popover { display:block; }
.pw-box { display:flex; align-items:center; gap:10px; background:var(--g0f0f10); border:1px solid var(--g2a2a2a); border-radius:9px; padding:12px 14px; }
.pw-box code { flex:1; font-size:18px; letter-spacing:1px; color:var(--acc); font-family:'Courier New', monospace; }
.mg-emp-actions form { display:inline; }

/* ============ ICON BUTTONS ============ */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px;
    background:var(--g1e1e1e); border:1px solid var(--g3a3a3a); color:var(--gcccccc); cursor:pointer; vertical-align:middle;
    text-decoration:none; font-family:inherit; margin-left:4px; transition:.15s; }
.icon-btn svg { width:15px; height:15px; }
.icon-btn:hover { border-color:var(--acc); color:var(--acc); }
.icon-btn.danger:hover { border-color:#ff4d4d; color:#ff6b6b; }
.set-btn svg { width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
.mg-act-btn svg { width:14px; height:14px; }
.mg-list-wrap td.nowrap { white-space:nowrap; }
.mg-list-wrap { overflow-x:auto; }
.status-form { display:inline; }
.mg-status.toggle { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit; transition:.15s; }
.mg-status.toggle svg { width:10px; height:10px; opacity:.75; }
.mg-status.toggle:hover { filter:brightness(1.25); box-shadow:0 0 0 2px var(--acc-44); }
.mg-status.toggle:hover svg { transform:rotate(90deg); transition:.25s; }
.mg-status.disabled { background:var(--g1a1a1a); color:var(--g888888); border:1px solid var(--g333333); display:inline-flex; align-items:center; gap:5px; }
.mg-status.disabled svg { width:10px; height:10px; }
.mg-card.disabled { border-style:dashed; opacity:.55; }
.mg-card.disabled .mg-ava { filter:grayscale(1); }
.mg-off { display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:9.5px; color:var(--g8a8a8a); }
.mg-off svg { width:10px; height:10px; }
.mg-act-btn.danger { border-color:#5c1d1d; color:#ff6b6b; }
.mg-act-btn.danger:hover { background:#1c0f0f; border-color:#ff4d4d; }
.mg-info-value.red { color:#ff6b6b; font-weight:600; }
.icon-btn.ok { border-color:#1d5c33; color:#39e978; }
/* Xodim kartochkasi — amal tugmalari 2 ustunli setka, sig'maganda pastga tushmaydi */
.mg-emp-header { flex-wrap:nowrap; }
.mg-emp-left { flex:1; min-width:0; }
.mg-emp-right { flex-shrink:0; }
.mg-emp-actions { display:grid; grid-template-columns:repeat(2, minmax(150px, 1fr)); gap:8px; }
.mg-emp-actions .mg-act-btn, .mg-emp-actions form { width:100%; }
.mg-emp-actions .mg-act-btn { justify-content:center; white-space:nowrap; }
.mg-emp-actions form .mg-act-btn { width:100%; }
@media (max-width:1100px) { .mg-emp-header { flex-wrap:wrap; } .mg-emp-actions { grid-template-columns:1fr 1fr; } }

/* ============ CLIENTS (База клиентов) ============ */
.cl-wrap { height:auto; min-height:calc(100vh - 110px); }
.cl-search-row form, form.cl-search-row { position:relative; }
.cl-filter-wrap { position:relative; }
.cl-filter-panel { top:calc(100% + 8px); left:auto; right:0; }
.cl-filter-btn.open { border-color:var(--acc); color:var(--acc); }
.cl-quick-filters { align-items:center; }
.cl-count { margin-left:auto; color:var(--g666666); font-size:11px; white-space:nowrap; }
.cl-company-sub { font-size:9.5px; color:var(--g777777); margin-top:2px; }
.cl-avatar { width:26px; height:26px; border-radius:50%; background:var(--g1a1a1a); border:1px solid var(--g333333); display:grid; place-items:center; font-size:9px; font-weight:800; }
.cl-temp { font-size:10.5px; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.cl-temp.hot { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
.cl-temp.cold { background:var(--tb071723); color:var(--tf59b6ff); border:1px solid #17466b; }
.cl-mini-status.archived { background:var(--g1a1a1a); color:var(--g888888); border:1px solid var(--g333333); padding:3px 8px; border-radius:5px; font-size:10px; }
tr.cl-archived td { opacity:.55; }
.cl-check { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--gcccccc); cursor:pointer; }
.cl-check input { width:15px; height:15px; accent-color:var(--acc); }
.cl-label-checks { display:flex; flex-wrap:wrap; gap:6px 14px; padding:8px 0; }
.cl-label-checks label { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gcccccc); cursor:pointer; }
.cl-label-checks input { accent-color:var(--acc); width:14px; height:14px; }
.cl-label-checks ul, .cl-label-checks li, .cl-label-checks > div, .cl-label-checks > div > div { list-style:none; margin:0; padding:0; display:contents; }
.cl-dup-box { font-size:11px; color:var(--tfffd47a); }
.cl-dup-box:empty { display:none; }
.cl-dup-box a { color:var(--acc); }
.cl-dup-title { margin:6px 0 2px; font-weight:600; }
.cl-shared-warn { margin-top:8px; padding:8px 12px; border-radius:8px; background:var(--tb2a2100); border:1px solid #6b5a1a; color:var(--tfffd47a); font-size:11px; line-height:1.5; }
.cl-shared-warn a { color:var(--acc); }
.cl-link { color:var(--acc); text-decoration:none; }
.cl-primary { font-size:9px; padding:2px 6px; border-radius:4px; background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; vertical-align:middle; }
.cl-detail .cl-big-logo { height:132px; font-size:34px; font-weight:800; }
.cl-detail .cl-tab-content { padding:16px; }
.cl-tab-n { display:inline-block; min-width:16px; padding:0 5px; border-radius:8px; background:var(--g222222); color:var(--g999999); font-size:9px; text-align:center; margin-left:3px; }
.cl-tab.active .cl-tab-n { background:var(--acc); color:var(--g111111); }
.cl-pane-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.cl-pane-head h2 { font-size:15px; margin-bottom:4px; }
.cl-pane-head p { color:var(--g888888); font-size:12px; margin:0; }
.cl-empty-note { text-align:center; padding:32px; color:var(--g666666); font-size:12px; line-height:1.7; }
.cl-qa-btn.danger { border-color:#5c1d1d; color:#ff6b6b; }
.cl-qa-btn.danger:hover { background:#1c0f0f; }
.cl-quick-actions form { display:inline; }
a.cl-qa-btn, a.cl-card-close, a.cl-quick-filter { text-decoration:none; }
.cl-qa-btn svg { width:13px; height:13px; }
.cl-ct-val a { color:var(--geeeeee); text-decoration:none; }
/* общение */
.cl-comm-list { display:grid; gap:8px; }
.cl-comm-row { display:flex; gap:12px; border:1px solid var(--g282828); background:var(--g101011); padding:12px 14px; border-radius:9px; }
.cl-comm-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; background:var(--g1a1a1a); color:var(--gcccccc); }
.cl-comm-ic svg { width:16px; height:16px; }
.cl-comm-ic.type-call { background:var(--tb071c0e); color:var(--tf39e978); }
.cl-comm-ic.type-no_answer { background:var(--tb2a0808); color:var(--tfff6b6b); }
.cl-comm-ic.type-meeting { background:var(--tb2a2100); color:var(--acc); }
.cl-comm-ic.type-messenger { background:var(--tb071723); color:var(--tf59b6ff); }
.cl-comm-ic.type-email { background:#1c2440; color:#7a9cff; }
.cl-comm-body { flex:1; min-width:0; }
.cl-comm-top { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gdddddd); flex-wrap:wrap; }
.cl-comm-meta { margin-left:auto; font-size:10.5px; color:var(--g777777); }
.cl-comm-text { margin-top:5px; font-size:12px; color:var(--gcccccc); line-height:1.5; white-space:pre-line; }
/* контакты */
.cc-photo { display:grid; place-items:center; font-size:26px; font-weight:800; color:var(--acc); }
.cc-role svg { width:13px; height:13px; }
.cc-contact-ic svg { width:13px; height:13px; }
.cc-contact-ic.mail { background:#1c2440; color:#7a9cff; }
.cc-contact-ic.wa { background:var(--tb071c0e); color:var(--tf39e978); }
.cc-contact-ic.bd { background:var(--tb2a2100); color:var(--acc); }
.cc-contact-info .v a { color:var(--geeeeee); text-decoration:none; }
.cc-note { font-size:11px; color:var(--g888888); font-style:italic; }
.cc-actions { margin-top:12px; display:flex; gap:4px; }
.cc-actions .icon-btn { margin-left:0; }
/* юр. лица */
.cl-le-results { margin-top:10px; max-height:260px; overflow:auto; display:grid; gap:6px; }
.cl-le-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--g2a2a2a); border-radius:8px; background:var(--g141414); cursor:pointer; font-size:12px; color:var(--gdddddd); }
.cl-le-item:hover { border-color:var(--g444444); }
.cl-le-item.active { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, var(--g141414)); }
.cl-le-item.active .cl-le-pick { opacity:1; }
.cl-le-pick { opacity:0; color:var(--acc); font-weight:800; }
.cl-le-sub { font-size:10.5px; color:var(--g777777); margin-top:2px; }
.cl-le-empty { padding:14px; text-align:center; color:var(--g666666); font-size:11.5px; }
/* история */
.cl-hist-list { display:grid; gap:8px; }
.cl-hist-row { display:flex; gap:12px; border:1px solid var(--g282828); background:var(--g101011); padding:11px 14px; border-radius:9px; }
.cl-hist-ic { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; flex-shrink:0; background:var(--g1e1e1e); color:var(--gcccccc); }
.cl-hist-ic.act-create { background:var(--tb071c0e); color:var(--tf39e978); }
.cl-hist-ic.act-update { background:var(--tb2a2100); color:var(--acc); }
.cl-hist-ic.act-delete { background:var(--tb2a0808); color:var(--tfff6b6b); }
.cl-hist-title { font-size:12px; color:var(--gdddddd); }
.cl-hist-obj { color:var(--g999999); }
.cl-hist-changes { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; font-size:10.5px; color:var(--g999999); }
.cl-hist-changes b { color:var(--gcccccc); font-weight:600; }
.cl-hist-meta { margin-top:4px; font-size:10.5px; color:var(--g777777); }
.cl-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:4px; }
.cr-field input[type=color] { height:40px; padding:4px; }
.cr-field input[type=datetime-local] { color-scheme:dark; }
.cr-field input[type=date] { color-scheme:dark; }
.cl-company-name { white-space:nowrap; display:flex; align-items:center; gap:6px; }
.tab-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
.tab-page-info { font-size:11px; color:var(--g777777); }
a.set-btn { text-decoration:none; }

/* ============ ADBUS ============ */
.fn-head h1 { font-size:21px; margin-bottom:4px; }
.fn-head p { color:var(--g777777); font-size:12px; }
.fn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.fn-card { display:flex; flex-direction:column; gap:14px; background:var(--g141414); border:1px solid var(--g232323); border-radius:16px; padding:20px; text-decoration:none; color:inherit; transition:.18s; }
.fn-card:hover { border-color:var(--acc-55); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.4); }
.fn-card-top { display:flex; gap:13px; align-items:flex-start; }
.fn-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.fn-ic svg { width:22px; height:22px; }
.fn-card-txt h3 { font-size:15px; color:var(--geeeeee); }
.fn-card-txt p { font-size:11.5px; color:var(--g888888); margin-top:4px; line-height:1.5; }
.fn-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fn-card-stats .lbl { font-size:10px; color:var(--g777777); text-transform:uppercase; letter-spacing:.4px; }
.fn-card-stats .val { font-size:17px; font-weight:800; color:var(--geeeeee); margin-top:3px; }
.fn-card-stats .val.money { font-size:13.5px; }
.fn-progress { height:8px; background:var(--g1c1c1c); border-radius:6px; overflow:hidden; }
.fn-progress-bar { height:100%; border-radius:6px; }
.fn-card-foot { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--g888888); }
.fn-card-actions { display:flex; gap:4px; }
.fn-add-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:180px;
    background:none; border:2px dashed var(--g333333); border-radius:16px; color:var(--g888888); cursor:pointer; font-family:inherit; transition:.18s; }
.fn-add-card:hover { border-color:var(--acc); color:var(--acc); }
.fn-add-card .plus { font-size:26px; }
.fn-add-card b { font-size:14px; }
.fn-add-card i { font-size:11px; font-style:normal; color:var(--g666666); max-width:240px; }
.money { color:var(--tf39e978); }

/* Board */
.kb-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.kb-head-left { display:flex; gap:14px; align-items:flex-start; }
.kb-title { font-size:19px; display:flex; align-items:center; gap:8px; }
.kb-sub { font-size:12px; color:var(--g888888); margin:6px 0 8px; }
.kb-head-left .fn-progress { width:280px; }
.kb-head-right { display:flex; gap:8px; align-items:center; }
a.kb-tool-btn { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
a.kb-tool-btn svg { width:14px; height:14px; }
.kb-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.kb-col { min-width:250px; width:250px; flex-shrink:0; background:var(--g111112); border:1px solid var(--g232323); border-radius:12px; }
.kb-col-head { padding:10px 12px; border-bottom:1px solid var(--g1f1f1f); border-radius:12px 12px 0 0; }
.kb-col-title { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:700; color:var(--geeeeee); }
.kb-col-count { font-size:10.5px; color:var(--g888888); background:var(--g1c1c1c); border-radius:9px; padding:1px 8px; }
.kb-col-flags { margin-top:4px; display:flex; gap:4px; }
.kb-col-sum { margin-top:5px; font-size:11px; color:var(--tf39e978); font-weight:700; }
.kb-cards { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:70px; }
.kb-cards.over { background:color-mix(in srgb, var(--acc) 6%, transparent); border-radius:0 0 12px 12px; }
.kb-card { display:block; background:var(--g1a1a1b); border:1px solid var(--g2a2a2a); border-radius:10px; padding:11px 12px; cursor:grab; text-decoration:none; color:inherit; transition:.15s; }
.kb-card:hover { border-color:var(--acc-55); }
.kb-card.dragging { opacity:.4; }
.kb-card-title { font-size:12.5px; font-weight:700; color:var(--geeeeee); line-height:1.35; }
.kb-card-client { font-size:11px; color:var(--g999999); margin-top:3px; }
.kb-card-sum { font-size:12px; color:var(--tf39e978); font-weight:700; margin-top:6px; }
.kb-card-foot { display:flex; align-items:center; gap:8px; margin-top:8px; }
.kb-card-mgr { width:22px; height:22px; border-radius:50%; background:var(--g242424); border:1px solid var(--g333333); display:grid; place-items:center; font-size:8.5px; font-weight:800; color:var(--gcccccc); }
.kb-card-tasks { font-size:10px; color:var(--tf59b6ff); }
.kb-card-date { margin-left:auto; font-size:10px; color:var(--g777777); }
.kb-card-date.overdue { color:#ff6b6b; }
.kb-card-edit { margin-left:4px; color:var(--g777777); text-decoration:none; font-size:11px; }
.kb-card-edit:hover { color:var(--acc); }
.kb-empty { border:1px dashed var(--g2c2c2c); border-radius:9px; padding:16px 10px; text-align:center; color:var(--g555555); font-size:10.5px; }
.stage-flag { display:inline-block; padding:2px 6px; border-radius:4px; font-size:8.5px; font-weight:800; }
.stage-flag.kp { background:var(--tb071723); color:var(--tf59b6ff); border:1px solid #17466b; }
.stage-flag.ct { background:var(--tb2a2100); color:var(--acc); border:1px solid #6b5a1a; }
.stage-flag.fin { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.stage-flag.can { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
/* move dialog */
.mv-tasks { display:grid; gap:6px; }
.mv-task { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--g2a2a2a); border-radius:8px; background:var(--g141414); cursor:pointer; font-size:12px; }
.mv-task input { width:15px; height:15px; accent-color:var(--acc); }
.mv-task-t { flex:1; color:var(--gdddddd); }
.mv-task-m { font-size:10.5px; color:var(--g777777); }
.mv-req { border:1px solid var(--acc-44); border-radius:10px; padding:12px; background:var(--g131313); }
#moveModal textarea { width:100%; background:var(--g171717); border:1px solid var(--g333333); border-radius:8px; color:var(--gdddddd); padding:10px 12px; font-family:inherit; font-size:12.5px; }
.vz-status { padding:3px 8px; border-radius:5px; font-size:9.5px; white-space:nowrap; }
.vz-status.open { background:var(--tb071723); color:var(--tf59b6ff); border:1px solid #17466b; }
.vz-status.finished { background:var(--tb071c0e); color:var(--tf39e978); border:1px solid #146c35; }
.vz-status.cancelled { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
.vz-row { align-items:center; }
.vz-row.closed { opacity:.6; }
.vz-row-actions { display:flex; gap:4px; }

/* ============ TASKS (kalendar/ro'yxat) ============ */
.vz-cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.vz-cal-head h2 { font-size:16px; }
.vz-cal-nav { display:flex; align-items:center; gap:10px; }
.vz-cal-month { font-size:13px; font-weight:700; color:var(--geeeeee); min-width:130px; text-align:center; }
.vz-cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.vz-dow { text-align:center; font-size:10.5px; color:var(--g777777); padding:4px 0; text-transform:uppercase; }
.vz-day { min-height:96px; background:var(--g111112); border:1px solid var(--g232323); border-radius:9px; padding:6px; }
.vz-day.other { background:transparent; border-color:var(--g1a1a1a); }
.vz-day.today { border-color:var(--acc); box-shadow:0 0 10px var(--acc-44); }
.vz-day-n { font-size:10.5px; color:var(--g888888); margin-bottom:4px; }
.vz-day.today .vz-day-n { color:var(--acc); font-weight:800; }
.vz-day-task { display:block; font-size:9.5px; color:var(--gcccccc); background:var(--g1c1c1d); border-left:2px solid var(--tf59b6ff); border-radius:4px; padding:3px 5px; margin-bottom:3px; text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.vz-day-task:hover { color:var(--acc); }
.vz-day-task.prio-high { border-left-color:#ff6b6b; }
.vz-day-task.prio-low { border-left-color:var(--g555555); }
.vz-day-more { font-size:9px; color:var(--g777777); }
.vz-lists { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
@media(max-width:1100px){ .vz-lists { grid-template-columns:1fr; } }
.vz-list-block { padding:0; overflow:hidden; }
.vz-list-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid var(--g232323); }
.vz-list-head h3 { font-size:13px; }
.vz-list-head .num { font-size:12px; font-weight:800; color:var(--g888888); }
.vz-list-head.today h3 { color:var(--tf39e978); }
.vz-list-head.overdue h3 { color:#ff6b6b; }
.vz-list-head.soon h3 { color:var(--tf59b6ff); }
.vz-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--g1c1c1c); }
.vz-item:last-child { border-bottom:0; }
.vz-item.closed { opacity:.6; }
.vz-item-body { flex:1; min-width:0; }
.vz-item-t { font-size:12.5px; color:var(--gdddddd); }
.vz-item-t a { color:inherit; text-decoration:none; }
.vz-item-t a:hover { color:var(--acc); }
.vz-item-m { font-size:10.5px; color:var(--g777777); margin-top:3px; }
.vz-prio { font-size:9px; padding:2px 6px; border-radius:4px; vertical-align:middle; }
.vz-prio.high { background:var(--tb2a0808); color:var(--tfff6b6b); border:1px solid #6b1a1a; }
.vz-prio.normal { background:var(--g1a1a1a); color:var(--g999999); border:1px solid var(--g2c2c2c); }
.vz-prio.low { background:var(--g161616); color:var(--g777777); border:1px solid var(--g2a2a2a); }
a.kb-view-opt { text-decoration:none; display:inline-flex; align-items:center; }
.fn-card { cursor:pointer; }
a.submenu-item { text-decoration:none; }
.fn-card-leader { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--g999999); }
.fn-card-leader i { font-style:normal; color:var(--g666666); }
.kb-title-ic svg { width:20px; height:20px; vertical-align:-3px; }
.kb-count { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 7px; border-radius:5px;
    background:var(--g1c1c1d); color:var(--g999999); border:1px solid var(--g2c2c2c); white-space:nowrap; }
.kb-count.soon { color:var(--acc); border-color:var(--acc-55); background:var(--tb2a2100); }
.kb-count.today { color:var(--acc); border-color:var(--acc-55); background:var(--tb2a2100); }
.kb-count.overdue { color:#ff6b6b; border-color:#6b1a1a; background:var(--tb2a0808); }
.kb-card-count { margin-top:6px; }
.kb-card-mgr-name { font-size:10px; color:var(--g999999); }
#dealCardModal .cr-head-ic { font-size:15px; font-weight:800; }
/* Django 6 CheckboxSelectMultiple: <div id><div><label> — ichki divlarni setkaga ochamiz */
.cl-label-checks.checks-2col { display:block; padding:8px 2px; }
.cl-label-checks.checks-2col > div { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.cl-label-checks.checks-2col > div > div { display:contents; }
.cl-label-checks.checks-2col label { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gcccccc); cursor:pointer; }
.kb-card-sum.kp { color:var(--tf59b6ff); }

/* ===== WORK SESSION (правки #8 T01) ===== */
.start-btn.finish { background:transparent; color:#ff6b6b; border:1.5px solid #ff6b6b; }
.start-btn.finish:hover { background:#ff6b6b1a; }
.welcome .meta .ws-since { color:var(--acc); }

/* ===== STAFF HISTORY (правки #8 T02) ===== */
.ws-filter { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.ws-filter label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g999999); }
.ws-filter input[type="date"] { background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:8px; color:var(--gcccccc); padding:7px 10px; font-size:13px; }
.ws-row { cursor:pointer; }
.ws-open-badge { color:#2ecc71; font-size:12.5px; }
.ws-more { background:none; border:none; color:var(--acc); cursor:pointer; font-size:13px; padding:0; }
.ws-more:hover { text-decoration:underline; }
.ws-details-box { padding:6px 4px; }
.ws-actions-head { color:var(--g999999); font-size:12.5px; margin-bottom:8px; }
.ws-action-row { display:flex; gap:12px; padding:5px 0; border-bottom:1px dashed var(--g232323); font-size:13px; }
.ws-action-row:last-child { border-bottom:none; }
.ws-action-time { color:var(--g666666); flex:0 0 40px; }
.ws-action-kind { color:var(--acc); flex:0 0 90px; }
.ws-action-text { color:var(--gcccccc); }
.ws-action-empty { color:var(--g666666); font-size:13px; padding:6px 0; }

/* ===== WORKSPACE ICON PICKER (правки #8 T03) ===== */
.ip-open { display:flex; align-items:center; gap:10px; width:100%; background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:10px; color:var(--gcccccc); padding:8px 12px; font-size:13.5px; cursor:pointer; }
.ip-open:hover { border-color:var(--acc); }
.ip-preview { display:flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--acc); }
.ip-preview svg, .ip-preview img { width:22px; height:22px; }
.ip-search { width:100%; background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:10px; color:var(--gcccccc); padding:9px 12px; font-size:13.5px; margin-bottom:12px; }
.ip-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:8px; max-height:320px; overflow-y:auto; }
.ip-item { display:flex; align-items:center; justify-content:center; height:52px; background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:10px; color:var(--gcccccc); cursor:pointer; }
.ip-item svg { width:24px; height:24px; }
.ip-item:hover { border-color:var(--acc); color:var(--acc); }
.ip-item.active { border-color:var(--acc); color:var(--acc); background:#332a0633; }
.ip-file input[type="file"] { font-size:12.5px; color:var(--g999999); }
.ws-icon-img { width:1.35em; height:1.35em; object-fit:contain; vertical-align:-0.25em; }
.fn-ic .ws-icon-img, .kb-title-ic .ws-icon-img { width:22px; height:22px; }
.ip-item[hidden] { display:none; }

/* ===== UNIFIED TASK CARD (правки #8 T04) ===== */
#taskEditModal { z-index:650; } /* boshqa modal (sdelka kartochkasi) ustida ochiladi */
.vz-stage-badge { display:inline-block; border:1px solid; border-radius:20px; padding:1px 9px; font-size:11.5px; margin-left:6px; }

/* ===== TASK TRANSITION DIALOG (правки #8 T05) ===== */
#transitionModal { z-index:660; } /* task modal ustida ham ochiladi */
.tr-chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tr-chip { background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:20px; padding:5px 12px; font-size:12.5px; color:var(--g999999); }
.tr-chip b { color:var(--gcccccc); }
.tr-chip.next { border-color:var(--acc); }
.tr-chip.next b { color:var(--acc); }
.tr-arrow { color:var(--g666666); }
.tk-comments { display:flex; flex-direction:column; gap:8px; }
.tk-comment { background:var(--g1a1a1a); border:1px solid var(--g232323); border-radius:10px; padding:8px 12px; }
.tk-comment-top { display:flex; gap:10px; font-size:12px; color:var(--g999999); margin-bottom:3px; flex-wrap:wrap; }
.tk-comment-top b { color:var(--gcccccc); }
.tk-comment-move { color:var(--acc); }
.tk-comment-text { font-size:13px; color:var(--gcccccc); white-space:pre-line; }

/* ===== CALENDAR DAY VIEW (правки #8 T06) ===== */
.vz-day { position:relative; }
.vz-day-cover { position:absolute; inset:0; z-index:0; }
.vz-day .vz-day-task { position:relative; z-index:1; }
.vz-day:hover { border-color:var(--acc); }
.vz-daylist .mg-back-btn { margin-bottom:14px; display:inline-block; }
.vz-daylist-head { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.vz-daylist-head h2 { font-size:20px; }
.vz-daylist-head p { color:var(--g999999); font-size:13.5px; flex:1; }
.vz-dayrow-t { font-size:14px; color:var(--gcccccc); }
.vz-dayrow-t b { color:var(--acc); margin-right:4px; }
.vz-dayrow-m { font-size:12.5px; color:var(--g777777); margin-top:2px; }
.vz-dayrow.closed { opacity:.55; }

/* ===== UNIFIED TOOLBAR / SAVED FILTERS / GLOBAL SEARCH (правки #8 T07) ===== */
.topbar-search { display:flex; align-items:center; gap:8px; background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:10px; padding:6px 12px; margin-left:18px; min-width:220px; }
.topbar-search span { color:var(--g666666); }
.topbar-search input { background:none; border:none; outline:none; color:var(--gcccccc); font-size:13px; width:100%; }
.vz-toolbar { flex-wrap:wrap; gap:10px; }
.vz-toolbar-search { min-width:280px; flex:0 1 340px; }
.kb-search { min-width:200px; }
.kb-search input { width:100%; }
.sf-save { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--g2e2e2e); }
.sf-save input { flex:1; background:var(--g1a1a1a); border:1px solid var(--g2e2e2e); border-radius:8px; color:var(--gcccccc); padding:7px 10px; font-size:13px; }
.sf-chip { display:inline-flex; align-items:center; gap:5px; }
.sf-chip a { color:inherit; text-decoration:none; }
.sf-chip .qf-x { background:none; border:none; cursor:pointer; color:var(--g666666); font-size:14px; padding:0; }
.sf-chip .qf-x:hover { color:#ff6b6b; }
.gs-page { max-width:900px; }
.gs-form { display:flex; gap:10px; margin:18px 0 10px; }
.gs-form .cl-search { flex:1; }
.gs-total { color:var(--g999999); font-size:13px; margin-bottom:14px; }
.gs-group { margin-bottom:14px; padding:14px 18px; }
.gs-group h3 { font-size:14.5px; margin-bottom:8px; }
.gs-group .num { color:var(--g666666); font-weight:normal; font-size:12.5px; }
.gs-row { display:block; padding:8px 10px; border-radius:8px; color:var(--gcccccc); text-decoration:none; font-size:13.5px; }
.gs-row:hover { background:var(--g1a1a1a); }
.gs-meta { color:var(--g777777); font-size:12.5px; margin-left:8px; }
.gs-text { color:var(--g999999); font-size:12.5px; margin-top:2px; }