/* Mercuriy Team — uslub.
   Namuna: C:\ALL PACK\Impuls Web\COMUNITY (20 ta dizayn maketi)
   Tashqi kutubxona yo'q, hammasi shu faylda. */

:root {
  --fon: #0b0f12;
  --panel: #10161a;
  --panel-2: #0d1317;
  --panel-3: #141c21;
  --chiziq: #1e272e;
  --chiziq-och: #263139;
  --matn: #e8edf2;
  --xira: #8a98a5;
  --xira-2: #5f6d79;

  --asosiy: #2dd4bf;
  --asosiy-quyuq: #14b8a6;
  --asosiy-och: rgba(45, 212, 191, .12);

  --yashil: #34d399;
  --yashil-och: rgba(52, 211, 153, .12);
  --sariq: #f5b544;
  --sariq-och: rgba(245, 181, 68, .12);
  --qizil: #f87171;
  --qizil-och: rgba(248, 113, 113, .12);
  --binafsha: #a78bfa;
  --binafsha-och: rgba(167, 139, 250, .12);
  --kok: #60a5fa;
  --kok-och: rgba(96, 165, 250, .12);

  --soya: 0 1px 2px rgba(0, 0, 0, .4);
  --radius: 14px;
  --menyu-eni: 248px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--matn);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--asosiy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================= Tuzilma ================= */

.qobiq { display: flex; min-height: 100vh; }

/* --- Chap menyu --- */
.yon {
  width: var(--menyu-eni);
  flex: none;
  background: var(--panel-2);
  border-right: 1px solid var(--chiziq);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brend {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 20px 26px;
  color: var(--matn); font-weight: 700; font-size: 15px; letter-spacing: 1.2px;
}
.brend:hover { text-decoration: none; }
.brend-osti {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 2px;
  color: var(--xira-2); margin-top: 3px;
}
.brend .nishon {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--asosiy); color: var(--asosiy);
  display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: 0;
}

nav.menyu { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; overflow-y: auto; }
nav.menyu a {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 10px; min-height: 50px;
  color: var(--xira); font-weight: 500; font-size: 15px;
  border-left: 3px solid transparent;
}
nav.menyu a:hover { background: var(--panel-3); color: var(--matn); text-decoration: none; }
nav.menyu a.faol {
  background: var(--asosiy-och); color: var(--asosiy);
  border-left-color: var(--asosiy); border-radius: 0 10px 10px 0;
}
nav.menyu a .belgicha { font-size: 16px; width: 20px; text-align: center; flex: none; }
nav.menyu a .son-belgi {
  margin-left: auto; font-size: 12px; font-weight: 700;
  background: var(--panel-3); color: var(--xira); padding: 1px 8px; border-radius: 10px;
}
nav.menyu a.faol .son-belgi { background: rgba(45,212,191,.18); color: var(--asosiy); }

.yon-oyoq { border-top: 1px solid var(--chiziq); padding: 16px 20px; }
.kim { display: flex; align-items: center; gap: 11px; }
.kim .ism { font-weight: 600; font-size: 14px; line-height: 1.3; }
.kim .rol { font-size: 12.5px; color: var(--xira); }
.yon-oyoq .havolalar { display: flex; gap: 14px; margin-top: 12px; font-size: 12.5px; }
.yon-oyoq .havolalar a { color: var(--xira-2); }
.yon-oyoq .havolalar a:hover { color: var(--matn); }

/* --- O'ng qism --- */
.asos { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tepa {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--chiziq);
  position: sticky; top: 0; background: var(--fon); z-index: 10;
}
.qidiruv { flex: 1; max-width: 640px; position: relative; }
.qidiruv input {
  width: 100%; padding: 12px 16px 12px 42px;
  background: var(--panel); border: 1px solid var(--chiziq); border-radius: 12px;
  color: var(--matn); font: inherit; font-size: 14px;
}
.qidiruv input::placeholder { color: var(--xira-2); }
.qidiruv .ikona {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--xira-2); font-size: 14px;
}

main { padding: 26px 28px 70px; max-width: 1500px; width: 100%; }

/* ================= Sarlavha ================= */

.sarlavha { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.6px; font-weight: 700; }
h2 { font-size: 17px; margin: 0 0 16px; font-weight: 600; letter-spacing: -.2px; }
.sarlavha .osti { color: var(--xira); font-size: 14px; }
.sarlavha .ong { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= Kartalar ================= */

.karta {
  background: var(--panel); border: 1px solid var(--chiziq);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px;
}
.karta > h2 { display: flex; align-items: center; gap: 10px; }
.karta > h2 .son { color: var(--xira-2); font-weight: 500; font-size: 15px; }

.setka { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.setka-2 { display: grid; gap: 18px; grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 1100px) { .setka-2 { grid-template-columns: 1fr; } }

/* --- Raqam kartalari --- */
.raqamlar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 22px; }
.raqam {
  background: var(--panel); border: 1px solid var(--chiziq);
  border-radius: var(--radius); padding: 20px 22px;
}
.raqam .k { font-size: 14px; color: var(--xira); }
.raqam .v { font-size: 42px; font-weight: 700; letter-spacing: -1.5px; margin: 6px 0 8px; line-height: 1; }
.raqam .havola { font-size: 13.5px; color: var(--asosiy); }
.raqam.ogoh .v { color: var(--qizil); }
.raqam.ogoh .havola { color: var(--qizil); }

/* ================= Jadval ================= */

.jadval-orash { overflow-x: auto; margin: 0 -22px -20px; padding: 0 22px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 12.5px; color: var(--xira-2);
  font-weight: 600; padding: 0 12px 12px; border-bottom: 1px solid var(--chiziq);
  white-space: nowrap;
}
td { padding: 18px 12px; border-bottom: 1px solid var(--chiziq); vertical-align: middle; }
td a { display: inline-block; padding: 2px 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-3); }
td b, th:first-child { color: var(--matn); }

/* ================= Belgilar (konturli) ================= */

.belgi {
  display: inline-block; padding: 4px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor; background: transparent;
}
.b-yangi   { color: var(--binafsha); background: var(--binafsha-och); }
.b-rejada  { color: var(--kok);      background: var(--kok-och); }
.b-ishda   { color: var(--sariq);    background: var(--sariq-och); }
.b-tekshir { color: var(--asosiy);   background: var(--asosiy-och); }
.b-mijoz   { color: var(--kok);      background: var(--kok-och); }
.b-tasdiq  { color: var(--yashil);   background: var(--yashil-och); }
/* Baho tugmalari */
.baho-qator { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.baho-qator .tugma { min-width: 46px; padding: 8px 0; }
.baho-belgi { font-weight: 700; color: var(--sariq); }
.b-qayt    { color: var(--qizil);    background: var(--qizil-och); }
.b-bekor   { color: var(--xira-2);   background: transparent; text-decoration: line-through; }
.b-kech    { color: var(--qizil);    background: var(--qizil-och); }
.b-loyiha  { color: var(--xira);     background: transparent; border-color: var(--chiziq-och); font-weight: 500; }

/* ================= Tugmalar ================= */

.tugma {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; min-height: 48px; min-width: 130px;
  border-radius: 12px; border: 1px solid var(--chiziq-och); background: var(--panel);
  color: var(--matn); font-size: 15.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.tugma:hover { background: var(--panel-3); text-decoration: none; border-color: var(--xira-2); }
.tugma.asosiy { background: var(--asosiy); border-color: var(--asosiy); color: #05201d; }
.tugma.asosiy:hover { background: var(--asosiy-quyuq); border-color: var(--asosiy-quyuq); }
.tugma.yashil { background: var(--yashil); border-color: var(--yashil); color: #04231a; }
.tugma.qizil { background: transparent; border-color: var(--qizil); color: var(--qizil); }
.tugma.qizil:hover { background: var(--qizil-och); }
.tugma.kichik { padding: 9px 16px; min-height: 38px; min-width: 0; font-size: 13.5px; border-radius: 10px; }
/* Butun kenglikni egallaydigan tugma — formalarda va telefonda */
.tugma.keng { width: 100%; }
.tugma:active { transform: translateY(1px); }

/* ================= Forma ================= */

.qator { margin-bottom: 18px; }
.qator label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--matn); }
.qator .yordam { font-size: 12.5px; color: var(--xira-2); margin-top: 6px; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: 14px 16px; min-height: 50px;
  border: 1px solid var(--chiziq); border-radius: 12px;
  background: var(--panel-2); color: var(--matn); font: inherit; font-size: 15.5px;
}
input[type=datetime-local] { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--xira-2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--asosiy); box-shadow: 0 0 0 3px var(--asosiy-och);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--xira) 50%),
         linear-gradient(135deg, var(--xira) 50%, transparent 50%);
         background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
         background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.forma-setka { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .forma-setka { grid-template-columns: 1fr; } }

/* ================= Xabarlar ================= */

.xabar {
  padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
  font-size: 14.5px; font-weight: 500; border: 1px solid;
  display: flex; align-items: center; gap: 10px;
}
.xabar.ok { background: var(--yashil-och); color: var(--yashil); border-color: rgba(52,211,153,.3); }
.xabar.xato { background: var(--qizil-och); color: var(--qizil); border-color: rgba(248,113,113,.3); }
.xabar.ogoh { background: var(--sariq-och); color: var(--sariq); border-color: rgba(245,181,68,.3); }
.xabar a { color: inherit; text-decoration: underline; }

/* ================= Ro'yxatlar ================= */

.qatorlar { display: flex; flex-direction: column; }
.satr {
  display: flex; gap: 14px; padding: 15px 0;
  border-bottom: 1px solid var(--chiziq); align-items: center;
}
.satr:first-child { padding-top: 0; }
.satr:last-child { border-bottom: 0; padding-bottom: 0; }
.satr .asos { flex: 1; min-width: 0; }
.satr .nom { font-weight: 500; font-size: 14.5px; }
.satr .izoh { font-size: 13px; color: var(--xira); margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.satr .ong { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.bosh { color: var(--xira-2); font-size: 14px; padding: 26px 0; text-align: center; }

/* ================= Izoh oqimi ================= */

.oqim { display: flex; flex-direction: column; gap: 20px; }
.oqim .element { display: flex; gap: 13px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--asosiy-och); color: var(--asosiy); border: 1px solid rgba(45,212,191,.35);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}
.oqim .tan { flex: 1; min-width: 0; }
.oqim .bosh-qator { font-size: 13px; color: var(--xira-2); }
.oqim .bosh-qator b { color: var(--matn); font-size: 14px; }
.oqim .matn { white-space: pre-wrap; margin-top: 4px; }
.oqim .element.tizim .matn { color: var(--xira); font-size: 13.5px; }

/* ================= Kirish sahifasi ================= */

.kirish-fon { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.kirish-karta {
  width: 100%; max-width: 420px; background: var(--panel);
  border: 1px solid var(--chiziq); border-radius: 18px; padding: 38px 34px;
}
.kirish-karta .logo {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px;
  font-size: 19px; font-weight: 700; letter-spacing: 1.5px;
}
.kirish-karta .logo .nishon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--asosiy); color: var(--asosiy);
  display: flex; align-items: center; justify-content: center; font-size: 17px; letter-spacing: 0;
}
.kirish-karta .osti { text-align: center; color: var(--xira); font-size: 13.5px; margin-bottom: 28px; }

/* ================= Mayda ================= */

.xira { color: var(--xira); }
.kichik { font-size: 13px; }
.ong { text-align: right; }
.qator-tugma { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtr { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filtr .qator { margin-bottom: 0; }
.filtr select, .filtr input { min-width: 165px; }
hr { border: 0; border-top: 1px solid var(--chiziq); margin: 18px 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--matn); }
details summary::marker { color: var(--xira-2); }
/* Huquq katakchalari — rol sozlash ekrani */
.huquq-setka { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.huquq {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--chiziq); border-radius: 11px;
  background: var(--panel-2); font-size: 14.5px; min-height: 48px;
}
.huquq:hover { border-color: var(--xira-2); }
.huquq input[type=checkbox] {
  width: 20px; height: 20px; min-height: 0; accent-color: var(--asosiy);
  margin: 0; flex: none; cursor: pointer;
}
.huquq:has(input:checked) { border-color: var(--asosiy); background: var(--asosiy-och); }

/* Muddat uchun tez tanlash tugmalari */
.tez-tanlov { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tez-tanlov .tugma { font-weight: 500; }

.progress { height: 5px; background: var(--panel-3); border-radius: 4px; overflow: hidden; min-width: 90px; }
.progress i { display: block; height: 100%; background: var(--asosiy); border-radius: 4px; }

/* ================= Telefon ================= */

/* ⚠️ Eslatma: avval menyu telefonda pastki panel edi. Bo'limlar 14 taga
   yetgach (va guruhlar qo'shilgach) u tor bo'lib qoldi — endi chetdan
   chiqadigan panel (drawer). Drawer qoidalari fayl oxirida. */

@media (max-width: 900px) {
  .tepa { padding: 12px 16px; gap: 10px; }
  main { padding: 18px 16px; }
  /* Telefonda barmoq bilan bosish qulay bo'lsin */
  .tugma { min-height: 52px; font-size: 16px; padding: 15px 22px; }
  .sarlavha .ong { width: 100%; }
  .sarlavha .ong .tugma { flex: 1; }
  form > .qator-tugma .tugma, form > button.tugma { width: 100%; }
  input, select, textarea { font-size: 16px; }  /* iOS avtomatik kattalashtirmasin */
  .tez-tanlov .tugma { flex: 1 1 45%; }
  h1 { font-size: 24px; }
  .raqam .v { font-size: 34px; }
  .jadval-orash { margin: 0 -22px; padding: 0 22px; }
}


/* ================= Loyihalar bo'limi ================= */

.loyiha-setka {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.loyiha-karta {
  position: relative;
  background: var(--panel); border: 1px solid var(--chiziq);
  border-left: 4px solid var(--loyiha-rang, var(--asosiy));
  border-radius: var(--radius); padding: 20px 22px;
  transition: border-color .12s, transform .08s;
}
.loyiha-karta:hover { border-color: var(--loyiha-rang, var(--asosiy)); }
.loyiha-karta:hover .menyu-ishora { opacity: 1; }
.loyiha-karta .qopqoq { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.loyiha-karta > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }

.loyiha-karta .bosh { display: flex; align-items: flex-start; gap: 12px; }
.loyiha-karta .nuqta {
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--loyiha-rang, var(--asosiy));
}
.loyiha-karta .nomi { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }

.loyiha-karta .raqam-qator { display: flex; gap: 18px; flex-wrap: wrap; }
.loyiha-karta .raqam-qator > div { display: flex; flex-direction: column; }
.loyiha-karta .raqam-qator b { font-size: 21px; font-weight: 700; line-height: 1.1; }
.loyiha-karta .raqam-qator span { font-size: 12px; color: var(--xira-2); margin-top: 2px; }
.loyiha-karta .raqam-qator .ogoh b { color: var(--qizil); }
.loyiha-karta .raqam-qator .kok b { color: var(--kok); }

.menyu-ishora { margin-top: 14px; opacity: .35; transition: opacity .12s; }

/* --- O'ng tugma menyusi --- */
.kontekst {
  position: fixed; z-index: 100; min-width: 218px;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--panel-3); border: 1px solid var(--chiziq-och);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.kontekst .kontekst-bosh {
  padding: 9px 12px 10px; font-size: 12.5px; color: var(--xira-2);
  border-bottom: 1px solid var(--chiziq); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kontekst a {
  display: block; padding: 11px 12px; border-radius: 9px;
  color: var(--matn); font-size: 14.5px; cursor: pointer; text-decoration: none;
}
.kontekst a:hover { background: var(--asosiy-och); color: var(--asosiy); text-decoration: none; }
.kontekst a.xavfli:hover { background: var(--qizil-och); color: var(--qizil); }
.kontekst hr { margin: 5px 0; }

/* --- Kontent plan kalendari --- */
.plan-tor { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.plan-tor .kun-nomi { font-size: 12px; color: var(--xira-2); text-align: center; padding-bottom: 4px; }
.plan-kun {
  min-height: 108px; background: var(--panel-2); border: 1px solid var(--chiziq);
  border-radius: 10px; padding: 8px;
}
.plan-kun.boshqa-oy { opacity: .4; }
.plan-kun.bugun { border-color: var(--asosiy); }
.plan-kun .sana { font-size: 12.5px; color: var(--xira); margin-bottom: 6px; }
.plan-kun.bugun .sana { color: var(--asosiy); font-weight: 700; }
.plan-element {
  display: block; font-size: 11.5px; line-height: 1.3; padding: 5px 7px; margin-bottom: 5px;
  border-radius: 7px; background: var(--panel-3); border-left: 3px solid var(--asosiy);
  color: var(--matn); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-element:hover { text-decoration: none; background: var(--chiziq); }
.plan-element.kech { border-left-color: var(--qizil); }
.plan-element.yakun { border-left-color: var(--yashil); opacity: .65; }

/* --- Chat --- */
.chat-oyna {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 62vh; overflow-y: auto; padding-right: 6px;
}
.chat-xabar { display: flex; gap: 12px; }
.chat-xabar .tan { background: var(--panel-2); border: 1px solid var(--chiziq);
  border-radius: 12px; padding: 11px 14px; max-width: 78%; }
.chat-xabar.meniki { flex-direction: row-reverse; }
.chat-xabar.meniki .tan { background: var(--asosiy-och); border-color: rgba(45,212,191,.3); }
.chat-xabar .kim { font-size: 12.5px; color: var(--xira-2); margin-bottom: 4px; }
.chat-xabar .matn { white-space: pre-wrap; }

/* --- Analiz ustunlari --- */
.ustun-qator { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.ustun-qator .nom { width: 130px; flex: none; font-size: 13.5px; }
.ustun-qator .chiziq { flex: 1; height: 22px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.ustun-qator .chiziq i { display: block; height: 100%; background: var(--asosiy); border-radius: 6px; }
.ustun-qator .son { width: 38px; text-align: right; font-weight: 700; font-size: 14px; }

@media (max-width: 700px) {
  .loyiha-setka { grid-template-columns: 1fr; }
  .plan-tor { grid-template-columns: repeat(2, 1fr); }
  .plan-tor .kun-nomi { display: none; }
  .ustun-qator .nom { width: 92px; font-size: 12.5px; }
}


/* ================= Xodimlar bo'limi ================= */

.xodim-setka { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.xodim-karta {
  position: relative;
  background: var(--panel); border: 1px solid var(--chiziq);
  border-radius: var(--radius); padding: 20px 22px;
  transition: border-color .12s;
}
.xodim-karta:hover { border-color: var(--xira-2); }
.xodim-karta.yopilgan { opacity: .55; }
.xodim-karta .qopqoq { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.xodim-karta > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }

.xodim-karta .bosh { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.xodim-karta .nomi { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.xodim-karta .rol-qatori { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.xodim-karta .raqam-qator { display: flex; gap: 20px; flex-wrap: wrap; }
.xodim-karta .raqam-qator > div { display: flex; flex-direction: column; }
.xodim-karta .raqam-qator b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.xodim-karta .raqam-qator span { font-size: 11.5px; color: var(--xira-2); margin-top: 2px; }
.xodim-karta .raqam-qator .ogoh b { color: var(--qizil); }
.xodim-karta .raqam-qator .sariq b { color: var(--sariq); }
.xodim-karta .oyoq { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--chiziq); }

/* --- Bot holati: neon chiroq --- */
.bot-belgi { display: flex; align-items: center; gap: 6px; flex: none; color: var(--xira-2); }
.bot-nuqta { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.bot-nuqta.ulangan {
  background: #2bff88;
  box-shadow: 0 0 6px #2bff88, 0 0 14px rgba(43, 255, 136, .75), 0 0 26px rgba(43, 255, 136, .35);
}
.bot-nuqta.uzilgan {
  background: #ff3b3b;
  box-shadow: 0 0 6px #ff3b3b, 0 0 14px rgba(255, 59, 59, .75), 0 0 26px rgba(255, 59, 59, .35);
  animation: bot-pulse 1.8s ease-in-out infinite;
}
@keyframes bot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.bot-katta { display: flex; align-items: center; gap: 14px; }
.bot-katta .bot-nuqta { width: 16px; height: 16px; }

/* --- Kontekst menyuda rollar ro'yxati --- */
.kontekst-sarlavha {
  padding: 8px 12px 6px; font-size: 11.5px; letter-spacing: .4px;
  color: var(--xira-2); text-transform: uppercase;
}
.kontekst-rollar { max-height: 260px; overflow-y: auto; }
.kontekst-rollar a { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kontekst-rollar .belgisi {
  width: 17px; height: 17px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--chiziq-och); position: relative;
}
.kontekst-rollar a.tanlangan .belgisi { background: var(--asosiy); border-color: var(--asosiy); }
.kontekst-rollar a.tanlangan .belgisi::after {
  content: "\2713"; position: absolute; inset: 0; color: #05201d;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kontekst-rollar a.tanlangan { color: var(--asosiy); }

@media (max-width: 700px) { .xodim-setka { grid-template-columns: 1fr; } }


/* ================= Rollar bo'limi ================= */

.rol-royxat { display: flex; flex-direction: column; }

.rol-satr {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; border-bottom: 1px solid var(--chiziq);
  transition: background .12s;
}
.rol-satr:last-child { border-bottom: 0; }
.rol-satr:hover { background: var(--panel-3); }
.rol-satr .qopqoq { position: absolute; inset: 0; z-index: 1; }
.rol-satr > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }

.rol-satr .chap { flex: 1; min-width: 190px; }
.rol-satr .nomi { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rol-satr .panellar { flex: 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rol-satr .ong-qism { width: 62px; text-align: center; flex: none; }
.rol-satr .ong-qism .son { font-size: 20px; font-weight: 700; }
.rol-satr .strelka { color: var(--xira-2); font-size: 22px; flex: none; }

/* --- Rol sozlamasi: panellar --- */
.panel-satr {
  border: 1px solid var(--chiziq); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px; background: var(--panel-2);
}
.panel-satr.ochiq { border-color: rgba(45, 212, 191, .35); }
.panel-bosh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-nom { font-size: 15.5px; font-weight: 600; }
.panel-huquqlar {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.huquq.qulf { opacity: .6; cursor: default; }

@media (max-width: 800px) {
  .rol-satr { flex-wrap: wrap; gap: 10px; }
  .rol-satr .panellar { justify-content: flex-start; }
  .rol-satr .strelka { display: none; }
}


/* --- O'ng burchakdagi + tugmasi --- */
.tugma-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--asosiy); color: #05201d;
  font-size: 30px; font-weight: 300; line-height: 1;
  box-shadow: 0 0 14px rgba(45, 212, 191, .35);
  order: 9;
}
.tugma-plus:hover { background: var(--asosiy-quyuq); text-decoration: none; transform: scale(1.05); }

/* --- To'lov usuli tanlovi --- */
.tolov-tanlov { display: grid; gap: 10px; }
.tolov {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 16px 18px; border: 1px solid var(--chiziq); border-radius: 12px;
  background: var(--panel-2);
}
.tolov:hover { border-color: var(--xira-2); }
.tolov input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--asosiy); margin: 0; }
.tolov span { display: flex; flex-direction: column; gap: 3px; }
.tolov:has(input:checked) { border-color: var(--asosiy); background: var(--asosiy-och); }


/* ================= Kontent brifi ================= */

.mjb { color: var(--qizil); }

/* --- Ko'p tanlovli ochiladigan ro'yxat --- */
.kop-tanlov { position: relative; }
.kt-tugma {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-height: 50px;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px;
  color: var(--matn); font: inherit; font-size: 15px; cursor: pointer; text-align: left;
}
.kt-tugma:hover { border-color: var(--xira-2); }
.kt-strelka { color: var(--xira-2); }
.kt-royxat {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 300px; overflow-y: auto;
  background: var(--panel-3); border: 1px solid var(--chiziq-och); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.kt-band {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 9px; cursor: pointer; font-size: 14.5px;
}
.kt-band:hover { background: var(--asosiy-och); }
.kt-band input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--asosiy); }
.kt-chiplar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kt-chip {
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  background: var(--asosiy-och); color: var(--asosiy); border: 1px solid rgba(45,212,191,.3);
}

/* --- Auditoriya segmentlari --- */
.segment {
  border: 1px solid var(--chiziq); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px; background: var(--panel-2);
}
.segment-bosh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* --- Ohang tanlovi --- */
.ohang-tanlov { display: flex; gap: 8px; flex-wrap: wrap; }
.ohang { cursor: pointer; }
.ohang input { display: none; }
.ohang span {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--chiziq); background: var(--panel-2); font-size: 14px;
}
.ohang input:checked + span {
  border-color: var(--asosiy); background: var(--asosiy-och); color: var(--asosiy); font-weight: 600;
}

/* --- Kalendardagi plan elementlari --- */
.plan-element.reels { border-left-color: #f0567a; }
.plan-element.stories { border-left-color: #a78bfa; }
.plan-element.post { border-left-color: #60a5fa; }
.plan-element.vazifa { border-left-color: var(--xira-2); opacity: .75; }
.plan-belgi {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; opacity: .85;
}


/* ================= Kontent kalendari (yangi ko'rinish) ================= */

.kal-bosh {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.kal-oraliq { flex: 1 1 auto; }
.kal-oy { font-size: 20px; font-weight: 700; line-height: 1.2; }

/* Oy o'qlari */
.kal-oq { display: inline-flex; gap: 4px; }
.kal-oq a {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 10px;
  color: var(--xira); font-size: 20px; line-height: 1; text-decoration: none;
}
.kal-oq a:hover { border-color: var(--asosiy); color: var(--asosiy); text-decoration: none; }

/* Ko'rinish almashtirgich */
.kal-almash {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 11px;
}
.kal-almash button {
  padding: 9px 16px; border: 0; border-radius: 9px; background: none;
  color: var(--xira); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.kal-almash button:hover { color: var(--matn); }
.kal-almash button.tanlangan { background: var(--asosiy-och); color: var(--asosiy); }

.kal-legenda { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* --- Oy to'ri --- */
.kal-tor { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.kal-nom {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--xira-2); text-align: center; padding-bottom: 8px;
}
.kal-kun {
  position: relative; min-height: 108px; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 11px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  transition: border-color .12s, background .12s, transform .12s;
}
.kal-kun.tashqi { opacity: .32; }
.kal-kun.dam .kun-raqam { color: #d98a8a; }
.kal-kun .kun-raqam { font-size: 15px; font-weight: 700; color: var(--xira); }
.kal-kun.bugun { border-color: var(--asosiy); background: rgba(45, 212, 191, .05); }
.kal-kun.bugun .kun-raqam { color: var(--asosiy); }
.kal-kun.bor { cursor: pointer; }
.kal-kun.bor:hover, .kal-kun.bor:focus-visible {
  border-color: var(--asosiy); background: var(--panel-3);
  transform: translateY(-2px); outline: none;
}

.kal-pillar { display: flex; flex-wrap: wrap; gap: 5px; }
.kal-p {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 8px;
}
.kal-p i { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .75; }
.kal-p.reels { background: rgba(240, 86, 122, .14); color: #f0567a; }
.kal-p.stories { background: var(--binafsha-och); color: var(--binafsha); }
.kal-p.post { background: var(--kok-och); color: var(--kok); }
.kal-p.vazifa { background: rgba(138, 152, 165, .12); color: var(--xira); }

/* Kun ostidagi mayda chiziqchalar — kunning to'lganini ko'rsatadi */
.kal-chiziq { margin-top: auto; display: flex; gap: 3px; }
.kal-chiziq i { height: 4px; flex: 1; max-width: 22px; border-radius: 3px; background: var(--chiziq-och); }
.kal-chiziq i.reels { background: #f0567a; }
.kal-chiziq i.stories { background: var(--binafsha); }
.kal-chiziq i.post { background: var(--kok); }
.kal-chiziq i.vazifa { background: var(--xira-2); }

.kal-izoh { margin-top: 16px; }

/* --- Ro'yxat (agenda) ko'rinishi --- */
.agenda-kun {
  display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--chiziq);
}
.agenda-kun:last-child { border-bottom: 0; }
.agenda-sana { width: 132px; flex: none; }
.agenda-sana b { font-size: 26px; font-weight: 700; display: block; line-height: 1.1; }
.agenda-sana span { font-size: 13px; color: var(--xira); display: block; }
.agenda-sana em { font-size: 12px; color: var(--xira-2); font-style: normal; }
.agenda-kun.bugun .agenda-sana b { color: var(--asosiy); }
.agenda-tan { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.agenda-satr {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--xira-2); border-radius: 10px;
  color: var(--matn); text-decoration: none;
}
.agenda-satr:hover { text-decoration: none; border-color: var(--chiziq-och); background: var(--panel-3); }
.agenda-satr.reels { border-left-color: #f0567a; }
.agenda-satr.stories { border-left-color: var(--binafsha); }
.agenda-satr.post { border-left-color: var(--kok); }
.agenda-satr.vazifa { border-left-color: var(--xira-2); opacity: .8; }
.agenda-vaqt { width: 46px; flex: none; font-weight: 700; font-size: 13.5px; color: var(--xira); }
.agenda-mavzu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-rub { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tur belgisi */
.tur-belgi {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--chiziq); color: var(--xira);
}
.tur-belgi.reels { background: rgba(240, 86, 122, .16); color: #f0567a; }
.tur-belgi.stories { background: var(--binafsha-och); color: var(--binafsha); }
.tur-belgi.post { background: var(--kok-och); color: var(--kok); }

/* --- Kun oynasi (o'ng tomondan chiqadi) --- */
.drw-fon {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 7, 9, .62);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.drw-fon.ochiq { opacity: 1; pointer-events: auto; }
.drw {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(470px, 96vw); z-index: 61;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--chiziq-och);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
  transform: translateX(103%); transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.drw.ochiq { transform: none; }
.drw-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid var(--chiziq);
}
.drw-sana { font-size: 21px; font-weight: 700; }
.drw-oq { display: flex; gap: 6px; }
.drw-oq button {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 10px;
  color: var(--xira); font-size: 17px; line-height: 1; cursor: pointer;
}
.drw-oq button:hover:not(:disabled) { border-color: var(--asosiy); color: var(--asosiy); }
.drw-oq button:disabled { opacity: .3; cursor: default; }
.drw-tan { flex: 1; overflow-y: auto; padding: 20px 22px 44px; }

.tl { display: flex; gap: 14px; margin-bottom: 12px; }
.tl-vaqt {
  width: 44px; flex: none; text-align: right; padding-top: 13px;
  font-size: 13px; font-weight: 700; color: var(--xira);
}
.tl-karta {
  flex: 1; min-width: 0; display: block; padding: 13px 15px;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--xira-2); border-radius: 12px;
  color: var(--matn); text-decoration: none;
}
.tl-karta:hover { text-decoration: none; background: var(--panel-3); border-color: var(--chiziq-och); }
.tl-karta.reels { border-left-color: #f0567a; }
.tl-karta.stories { border-left-color: var(--binafsha); }
.tl-karta.post { border-left-color: var(--kok); }
.tl-bosh { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.tl-mavzu { font-size: 14.5px; line-height: 1.45; }
.tl-hook { margin-top: 7px; font-size: 13px; color: var(--xira); line-height: 1.45; }
.tl-past { margin-top: 7px; }

@media (max-width: 900px) {
  .kal-tor { grid-template-columns: repeat(2, 1fr); }
  .kal-nom { display: none; }
  .agenda-kun { flex-direction: column; gap: 10px; }
  .agenda-sana { width: auto; display: flex; align-items: baseline; gap: 10px; }
  .agenda-sana b { font-size: 20px; }
}


/* ================= Topshiriqlar ================= */

/* --- Ro'yxat kartochkalari --- */
.top-setka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.top-karta {
  position: relative; padding: 18px 20px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--loyiha-rang, var(--asosiy));
  transition: border-color .12s, transform .12s;
}
.top-karta:hover { transform: translateY(-2px); border-color: var(--chiziq-och); }
.top-karta.kech { border-left-color: var(--qizil); }
.top-karta .qopqoq { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.top-karta > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }
.top-bosh { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.top-nom { font-size: 16.5px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.top-loyiha { display: flex; align-items: center; gap: 7px; }
.top-loyiha .nuqta {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--loyiha-rang, var(--asosiy));
}
.top-past {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--chiziq);
}
.top-kim { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bosh-harf.kichik-harf { width: 28px; height: 28px; font-size: 11px; }
.qizil-matn { color: var(--qizil); font-weight: 600; }

/* --- Yangi topshiriq oynasi --- */
.qadam {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 9px;
  border-radius: 8px; background: var(--asosiy-och); color: var(--asosiy);
  font-size: 13px; font-weight: 800; vertical-align: middle;
}

.tanlov-tor { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tanlov-karta {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tanlov-karta:hover { border-color: var(--xira-2); }
.tanlov-karta:focus-visible { outline: 2px solid var(--asosiy); outline-offset: 2px; }
.tanlov-karta.tanlangan {
  border-color: var(--asosiy); background: var(--asosiy-och);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .35);
}
.tanlov-karta .nuqta { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tanlov-karta.erkin { margin-top: 12px; border-style: dashed; }
.tanlov-karta.band { opacity: .45; cursor: not-allowed; }

/* Plan elementlari ro'yxati */
.plan-tanlov { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.plan-karta { align-items: flex-start; }
.plan-sana {
  width: 78px; flex: none; text-align: center; padding-top: 2px;
  border-right: 1px solid var(--chiziq);
}
.plan-sana b { display: block; font-size: 14px; }
.plan-sana span { font-size: 11.5px; color: var(--xira-2); }
.plan-matn { min-width: 0; flex: 1; }
.plan-mavzu { margin-top: 5px; font-size: 14px; line-height: 1.4; }
.band-belgi {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: var(--chiziq); color: var(--xira);
}

/* Filtr / tanlov tugmalari */
.filtr-qator { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtr {
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px;
  background: var(--panel-2); border: 1px solid var(--chiziq); color: var(--xira);
}
.filtr:hover { color: var(--matn); border-color: var(--xira-2); }
.filtr.tanlangan {
  background: var(--asosiy-och); border-color: var(--asosiy); color: var(--asosiy); font-weight: 600;
}

/* Xodim tanlash */
.xodim-tanlov {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  max-height: 320px; overflow-y: auto; padding-right: 4px;
}

/* Matn bloklari */
.matn-blok { white-space: pre-wrap; line-height: 1.6; }
.prompt-blok {
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; font-size: 14px;
}
.plan-eslatma { border-left: 3px solid var(--asosiy); }
.tugma.keng { display: block; width: 100%; text-align: center; margin-top: 8px; }
/* Saqlash kartochkasi — ustunning oxirida, hech narsani yopmaydi */
.karta.yopishqoq { position: static; }

@media (max-width: 900px) {
  .plan-sana { width: 62px; }
  .karta.yopishqoq { position: static; }
}

/* Yetishmayotgan mayda sinflar */
.bosh-holat { color: var(--xira-2); font-size: 14px; padding: 26px 0; text-align: center; }
.b-ogoh { color: var(--sariq); background: var(--sariq-och); }
.bosh-harf {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--asosiy-och); color: var(--asosiy); border: 1px solid rgba(45, 212, 191, .35);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}

/* O'ng ustun: ekranda qolib turadi, ichi kerak bo'lsa aylanadi */
.ong-ustun {
  position: sticky; top: 18px; align-self: start;
  max-height: calc(100vh - 36px); overflow-y: auto; padding-right: 4px;
}
@media (max-width: 900px) {
  .ong-ustun { position: static; max-height: none; overflow: visible; }
}

/* Kun oynasidagi kartochka ichida havola va amal qatori */
a.tl-mavzu { display: block; color: var(--matn); font-size: 14.5px; line-height: 1.45; }
a.tl-mavzu:hover { color: var(--asosiy); text-decoration: none; }
.tl-amal { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--chiziq); }
.tl-amal a { font-size: 12.5px; font-weight: 600; }


/* ================= Vazifalar doskasi ================= */

.doska {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
}
.doska-ustun {
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 14px;
  padding: 12px; min-height: 160px; transition: border-color .12s, background .12s;
}
.doska-ustun.nishon { border-color: var(--asosiy); background: rgba(45, 212, 191, .06); }
.doska-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 12px; font-size: 14px;
}
.doska-bosh .son {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 7px;
  background: var(--chiziq); color: var(--xira);
}
.doska-tan { display: flex; flex-direction: column; gap: 9px; max-height: 66vh; overflow-y: auto; }
.doska-bosh-joy {
  text-align: center; color: var(--xira-2); font-size: 12.5px; padding: 18px 0;
  border: 1px dashed var(--chiziq); border-radius: 10px;
}

/* Vazifa kartochkasi */
.v-setka { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.v-karta {
  position: relative; padding: 13px 15px; border-radius: 12px; cursor: grab;
  background: var(--panel); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--xira-2);
  transition: border-color .12s, transform .1s;
}
.v-karta:hover { border-color: var(--chiziq-och); transform: translateY(-1px); }
.v-karta.sudralmoqda { opacity: .45; }
.v-karta.p-yuqori { border-left-color: var(--sariq); }
.v-karta.p-shoshilinch { border-left-color: var(--qizil); }
.v-karta.p-orta { border-left-color: var(--asosiy); }
.v-karta.p-past { border-left-color: var(--xira-2); }
.v-karta.kech { background: rgba(248, 113, 113, .05); }
.v-karta .qopqoq { position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.v-karta > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }
.v-nom { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }
.v-teg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v-teg .nuqta { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--loyiha-rang); }
.v-past {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--chiziq);
}
.bosh-harf.bosh-yoq { background: transparent; border-color: var(--chiziq); color: var(--xira-2); }

/* Filtr formasi */
.filtr-forma { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
               margin-top: 16px; }
.filtr-forma[hidden] { display: none; }
.filtr-forma .qator { margin: 0; min-width: 160px; }
a.filtr { text-decoration: none; display: inline-block; }
a.filtr:hover { text-decoration: none; }

@media (max-width: 1200px) {
  .doska { grid-template-columns: repeat(2, 1fr); }
  .doska-tan { max-height: none; }
}

/* Vazifa kartochkasidagi tugmalar va belgilar */
.v-yuqori { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.v-amal {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--chiziq);
  position: relative; z-index: 3; pointer-events: auto;
}
.v-amal .tugma { min-height: 36px; padding: 8px 13px; font-size: 13px; }
.doska-izoh { margin: -6px 4px 10px; }
.doska-bosh { padding-bottom: 6px; }

/* ================= Xodimlar ro'yxati (spiska) ================= */

.xodim-royxat { display: flex; flex-direction: column; }

.xodim-satr {
  position: relative; display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1.4fr) 54px
                         64px 74px 82px 64px minmax(120px, .9fr);
  padding: 16px 22px; border-bottom: 1px solid var(--chiziq);
  transition: background .12s;
}
.xodim-satr:last-child { border-bottom: 0; }
.xodim-satr:not(.sarlavha-satr):hover { background: var(--panel-2); }
.xodim-satr.sarlavha-satr {
  padding: 12px 22px; background: var(--panel-2); text-transform: uppercase;
  letter-spacing: .5px; font-size: 11px;
}
.xodim-satr.yopilgan { opacity: .5; }
.xodim-satr .qopqoq { position: absolute; inset: 0; z-index: 1; }
.xodim-satr > *:not(.qopqoq) { position: relative; z-index: 2; pointer-events: none; }

.x-kim { display: flex; align-items: center; gap: 13px; min-width: 0; }
.x-kim .nomi { font-weight: 600; font-size: 15px; }
.x-rollar { display: flex; gap: 5px; flex-wrap: wrap; }
.x-bot { display: flex; justify-content: center; }
.x-raqam { text-align: center; font-size: 15px; }
.x-raqam b { font-weight: 700; }
.x-raqam.ogoh b { color: var(--qizil); }
.x-raqam.sariq b { color: var(--sariq); }
.x-oxirgi { text-align: right; }

@media (max-width: 1100px) {
  .xodim-satr { grid-template-columns: 1fr 1fr; gap: 10px; }
  .xodim-satr.sarlavha-satr { display: none; }
  .x-oxirgi { text-align: left; }
}

/* Menyu bo'limi sarlavhasi */
.menyu-bolim {
  padding: 18px 14px 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--xira-2);
}

/* Hali to'ldirilmagan bo'limlar uchun */
.tayyorlanmoqda {
  border: 1px dashed var(--chiziq-och); border-radius: 12px;
  padding: 18px 20px; color: var(--xira); background: var(--panel-2);
}
.tayyorlanmoqda h3 { margin: 0 0 8px; font-size: 15px; color: var(--matn); }
.reja-royxat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.reja-karta {
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px;
  padding: 15px 17px;
}
.reja-karta b { display: block; margin-bottom: 5px; }
.reja-karta .holat { font-size: 11.5px; font-weight: 700; color: var(--xira-2); }

/* AI brat suhbati */
.ai-oyna { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ai-xabar { display: flex; gap: 12px; }
.ai-xabar .tan {
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px;
  padding: 12px 15px; max-width: 80%; white-space: pre-wrap; line-height: 1.6;
}
.ai-xabar.meniki { flex-direction: row-reverse; }
.ai-xabar.meniki .tan { background: var(--asosiy-och); border-color: rgba(45,212,191,.3); }

/* Topshiriqni qabul qilish */
.qabul-karta { border: 1px solid var(--asosiy); background: rgba(45, 212, 191, .05); }
.qabul-qator { display: flex; gap: 14px; flex-wrap: wrap; }
.qabul-qator form {
  display: flex; gap: 9px; align-items: center; flex: 1 1 320px;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px; padding: 10px;
}
.qabul-qator input[type="text"] { flex: 1; min-width: 0; margin: 0; }
.qabul-qator .tugma { flex: none; }
.top-amal {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--chiziq);
  position: relative; z-index: 3; pointer-events: auto;
}

/* Ish kodi — #1512 */
.ish-kod {
  display: inline-block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 7px; margin-top: 6px;
  background: var(--panel-3); border: 1px solid var(--chiziq-och); color: var(--asosiy);
}
.ish-kod.kichik-kod { font-size: 11.5px; padding: 2px 7px; margin: 0 6px 0 0; vertical-align: 1px; }

/* Ko'p bandli topshiriq — forma bloklari */
.band-blok {
  border: 1px solid var(--chiziq-och); border-radius: 14px; padding: 16px 18px;
  margin-bottom: 14px; background: var(--panel-2);
}
.band-bosh {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.band-yop {
  flex: none; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: var(--panel-3); border: 1px solid var(--chiziq); color: var(--xira); font-size: 14px;
}
.band-yop:hover { border-color: var(--qizil); color: var(--qizil); }

/* Tanlangan kontent belgisi */
.tanlov-belgi {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--chiziq-och); position: relative;
}
.tanlov-karta.tanlangan .tanlov-belgi { background: var(--asosiy); border-color: var(--asosiy); }
.tanlov-karta.tanlangan .tanlov-belgi::after {
  content: "\2713"; position: absolute; inset: 0; color: #05201d;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* Topshiriq sahifasidagi band ko'rinishi */
.band-korsat {
  border: 1px solid var(--chiziq); border-left: 3px solid var(--asosiy);
  border-radius: 12px; padding: 15px 17px; margin-bottom: 14px; background: var(--panel-2);
}
.band-korsat.tayyor { border-left-color: var(--yashil); opacity: .8; }
.band-qism { margin-top: 12px; }
.band-yorliq {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--xira-2); margin-bottom: 6px;
}

/* Kichik oyna (modal) */
.oyna-fon {
  position: fixed; inset: 0; z-index: 80; background: rgba(4, 7, 9, .66);
  opacity: 0; pointer-events: none; transition: opacity .16s;
}
.oyna-fon.ochiq { opacity: 1; pointer-events: auto; }
.oyna {
  position: fixed; z-index: 81; left: 50%; top: 50%; width: min(520px, 94vw);
  transform: translate(-50%, -46%) scale(.97); opacity: 0; pointer-events: none;
  background: var(--panel); border: 1px solid var(--chiziq-och); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  transition: opacity .16s, transform .16s;
}
.oyna.ochiq { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.oyna-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--chiziq); font-size: 16px;
}
.oyna-yop {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--chiziq); color: var(--xira);
}
.oyna-yop:hover { border-color: var(--qizil); color: var(--qizil); }
.oyna-tan { padding: 20px; }
.oyna-oyoq {
  display: flex; gap: 10px; padding: 0 20px 20px; flex-wrap: wrap;
}

/* AI qaysi ma'lumotni o'qigani */
.ai-asbob { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--chiziq); }
.ai-asbob code { font-size: 11.5px; color: var(--asosiy); }


/* ================= Bosh sahifa (yangi ko'rinish) ================= */

/* Mayda SVG belgilar — o'lchami har doim cheklangan */
.bel { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }

/* --- Raqam kartochkasi: rangli belgi + matn --- */
.raqam { display: flex; align-items: flex-start; gap: 15px; }
.raqam-tan { min-width: 0; flex: 1; }
.raqam .v { font-size: 34px; margin: 4px 0 6px; }
.raqam-ikona {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
}
.raqam-ikona .bel { width: 22px; height: 22px; }
.raqam-ikona.teal { background: var(--asosiy-och); color: var(--asosiy); }
.raqam-ikona.kok { background: var(--kok-och); color: var(--kok); }
.raqam-ikona.sariq { background: var(--sariq-och); color: var(--sariq); }
.raqam-ikona.qizil { background: var(--qizil-och); color: var(--qizil); }
.raqam .v.ogoh-son { color: var(--qizil); }

/* --- Kartochka sarlavhasi: belgi + nom + sanoq + o'ngda havola --- */
.karta-bosh {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.karta-bosh h2 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 16px;
}
.karta-bosh h2 .bel { width: 18px; height: 18px; color: var(--xira); flex: none; }
.karta-bosh h2.qizil-matn .bel { color: var(--qizil); }
.karta-bosh > a, .karta-bosh > .kichik { margin-left: auto; color: var(--asosiy); }
.karta-bosh .son {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 7px;
  background: var(--chiziq); color: var(--xira); margin-left: 2px;
}

/* --- Ogohlantirishlar bitta kartochkada --- */
.ogoh-karta { border-color: var(--chiziq-och); }
.ogoh-royxat { display: flex; flex-direction: column; }
.ogoh-satr {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 12px; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--xira-2);
  color: var(--matn); text-decoration: none; transition: border-color .12s, background .12s;
}
.ogoh-satr:last-child { margin-bottom: 0; }
.ogoh-satr:hover { text-decoration: none; background: var(--panel-3); }
.ogoh-belgi {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
}
.ogoh-belgi .bel { width: 16px; height: 16px; }
.ogoh-matn { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; }
.ogoh-amal { flex: none; font-size: 13px; font-weight: 600; color: var(--asosiy); }

.ogoh-satr.qizil { border-left-color: var(--qizil); }
.ogoh-satr.qizil .ogoh-belgi { background: var(--qizil-och); color: var(--qizil); }
.ogoh-satr.sariq { border-left-color: var(--sariq); }
.ogoh-satr.sariq .ogoh-belgi { background: var(--sariq-och); color: var(--sariq); }
.ogoh-satr.teal { border-left-color: var(--asosiy); }
.ogoh-satr.teal .ogoh-belgi { background: var(--asosiy-och); color: var(--asosiy); }
.ogoh-satr.kok { border-left-color: var(--kok); }
.ogoh-satr.kok .ogoh-belgi { background: var(--kok-och); color: var(--kok); }
.ogoh-satr.xira { border-left-color: var(--chiziq); justify-content: center; }

/* --- Bo'sh holat belgisi --- */
.bosh-belgi { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 0; }
.bosh-doira {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--asosiy-och); color: var(--asosiy);
}
.bosh-doira .bel { width: 22px; height: 22px; }

/* --- Satrdagi mayda nuqta --- */
.nuqta-belgi { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nuqta-belgi.teal { background: var(--asosiy); }
.nuqta-belgi.sariq { background: var(--sariq); }
.nuqta-belgi.qizil { background: var(--qizil); }

/* --- S'yomka vaqti --- */
.syomka-vaqt {
  width: 76px; flex: none; text-align: center; padding: 8px 6px;
  background: var(--sariq-och); border-radius: 10px; color: var(--sariq);
}
.syomka-vaqt b { display: block; font-size: 12px; }
.syomka-vaqt span { font-size: 15px; font-weight: 700; }

@media (max-width: 700px) {
  .ogoh-amal { display: none; }
  .raqam .v { font-size: 28px; }
}


/* ================= Soqqa ================= */

.kassa-tor {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.kassa-karta {
  background: var(--panel); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--kassa-rang, var(--asosiy));
  border-radius: var(--radius); padding: 16px 18px;
}
.kassa-karta.jami { border-left-color: var(--asosiy); background: var(--asosiy-och); }
.kassa-bosh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.kassa-nuqta {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--kassa-rang, var(--asosiy)); display: inline-block; margin-right: 6px;
}
.kassa-summa { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }

/* Amal satri */
.pul-belgi {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
}
.pul-belgi.kirim { background: var(--yashil-och); color: var(--yashil); }
.pul-belgi.chiqim { background: var(--qizil-och); color: var(--qizil); }
.pul-belgi.kochirish { background: var(--kok-och); color: var(--kok); }
.pul-summa { font-weight: 700; font-size: 15px; white-space: nowrap; }
.pul-summa.kirim { color: var(--yashil); }
.pul-summa.chiqim { color: var(--qizil); }
.pul-summa.kochirish { color: var(--kok); }
.storno-satr { opacity: .55; }
.sariq-matn { color: var(--sariq); }

/* Katta summa maydoni */
.katta-summa {
  font-size: 40px !important; font-weight: 700; letter-spacing: -1px;
  text-align: center; padding: 18px 16px !important; height: auto !important;
}
.summa-yordam { text-align: center; margin-top: 8px; }
.filtr.qizil { color: var(--qizil); border-color: rgba(248, 113, 113, .35); }


/* ================= Soqqa bo'limlari ================= */

.soqqa-menyu {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  border-radius: 13px; padding: 5px; margin-bottom: 20px;
}
.soqqa-menyu a {
  padding: 10px 16px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  color: var(--xira); text-decoration: none;
}
.soqqa-menyu a:hover { color: var(--matn); background: var(--panel-3); text-decoration: none; }
.soqqa-menyu a.faol { background: var(--asosiy-och); color: var(--asosiy); }
.soqqa-menyu .ong-havola { margin-left: auto; color: var(--xira-2); font-weight: 500; }

/* Biznes ro'yxati (kirim/chiqim) */
.biznes-royxat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.biznes-satr {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--chiziq);
  border-left: 3px solid var(--kassa-rang, var(--asosiy));
  border-radius: 13px; padding: 16px 20px; transition: border-color .12s, transform .1s;
}
.biznes-satr:hover { border-color: var(--asosiy); transform: translateY(-1px); }
.biznes-satr:focus-visible { outline: 2px solid var(--asosiy); outline-offset: 2px; }
.biznes-nom { flex: 1; min-width: 0; }
.biznes-nom b { font-size: 16px; }
.biznes-raqam { text-align: right; min-width: 120px; }
.biznes-raqam .k { display: block; font-size: 11.5px; color: var(--xira-2); }
.biznes-raqam b { font-size: 16px; }
.biznes-amal { display: flex; gap: 8px; flex-wrap: wrap; }

/* Jadval satrlari */
.biznes-jadval td { vertical-align: middle; }
.biznes-jadval .jami-satr td { background: var(--panel-2); font-size: 15px; }
.xira-satr { opacity: .5; }
.kech-satr { background: rgba(248, 113, 113, .05); }

/* Kassa kartochkasi havola bo'lganda */
a.kassa-karta { display: block; color: var(--matn); text-decoration: none; }
a.kassa-karta:hover { text-decoration: none; border-color: var(--asosiy); }

/* Keng oyna */
.oyna.keng-oyna { width: min(760px, 96vw); }
.oyna-tan { max-height: 70vh; overflow-y: auto; }

/* Smena — to'lov usullari */
.usul-royxat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.usul-satr {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--chiziq);
  border-radius: 11px; padding: 10px 14px;
}
.usul-satr label { flex: 1; margin: 0; font-size: 14px; color: var(--xira); }
.usul-satr input { width: 130px; margin: 0; text-align: right; font-weight: 700; }
.smena-jami {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: var(--asosiy-och); color: var(--asosiy); font-size: 17px;
}
.smena-jami b { font-size: 22px; }


/* ================= Academy ================= */

.dars-satr { text-decoration: none; color: var(--matn); }
.dars-satr:hover { text-decoration: none; background: var(--panel-2); }
.dars-satr.otildi { opacity: .65; }
.dars-satr.bugun-satr { background: rgba(45, 212, 191, .06); }
.dars-sana {
  width: 58px; flex: none; text-align: center; padding: 6px 4px;
  background: var(--panel-3); border-radius: 10px;
}
.dars-sana b { display: block; font-size: 18px; line-height: 1.1; }
.dars-sana span { font-size: 11px; color: var(--xira-2); }

.mavzu-royxat { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mavzu-satr {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 11px;
}
.mavzu-tartib {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--asosiy-och); color: var(--asosiy); font-weight: 700; font-size: 13px;
}
.filtr.kichik-filtr { padding: 6px 11px; font-size: 12.5px; min-height: 0; }
.guruh-satr, .oquvchi-satr { cursor: pointer; }


/* ================= Menyu guruhi (Media) ================= */

.menyu-guruh { display: flex; flex-direction: column; }
.guruh-bosh {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: none; color: var(--xira); font: inherit; font-size: 14.5px;
  text-align: left;
}
.guruh-bosh:hover { background: var(--panel-3); color: var(--matn); }
.guruh-bosh.faol { color: var(--matn); }
.guruh-bosh span { flex: 1; }
.guruh-bosh .strelka { width: 15px; height: 15px; transition: transform .16s; opacity: .7; }
.menyu-guruh.ochiq .guruh-bosh .strelka { transform: rotate(90deg); }

.guruh-ichi { display: none; flex-direction: column; margin: 2px 0 6px 18px;
  padding-left: 10px; border-left: 1px solid var(--chiziq); }
.menyu-guruh.ochiq .guruh-ichi { display: flex; }
.guruh-ichi a { font-size: 14px; padding: 9px 12px; }

/* ================= Mijozlar (CRM) ================= */

/* Voronka — mijoz qaysi bosqichda */
.voronka { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.voronka-bosqich {
  flex: 1 1 120px; min-width: 110px; padding: 13px 15px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--chiziq); border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s;
}
.voronka-bosqich:hover { border-color: var(--asosiy); text-decoration: none; }
.voronka-bosqich b { font-size: 22px; color: var(--matn); font-variant-numeric: tabular-nums; }
.voronka-bosqich span { font-size: 12.5px; color: var(--xira-2); }
.voronka-bosqich.faol { background: var(--asosiy-och); border-color: var(--asosiy); }
.voronka-bosqich.faol b, .voronka-bosqich.faol span { color: var(--asosiy); }
.voronka-bosqich.tozala { flex: 0 0 auto; justify-content: center; font-size: 12.5px;
  color: var(--xira-2); min-width: 0; }

/* Yorliqlar */
.teg {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px;
  background: var(--panel-3); color: var(--xira-2); font-size: 11.5px; white-space: nowrap;
}
.teglar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.teglar .teg { margin-left: 0; }

a.qora-havola { color: var(--matn); text-decoration: none; }
a.qora-havola:hover { color: var(--asosiy); text-decoration: none; }

/* Kartochka ichidagi satrlar */
.satr-karta {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--chiziq);
}
.satr-karta:last-child { border-bottom: 0; padding-bottom: 0; }
.satr-karta .ong { text-align: right; min-width: 130px; }

/* Ma'lumot ro'yxati: chapda nom, o'ngda qiymat */
.malumot { display: flex; flex-direction: column; }
.malumot > div {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--chiziq); font-size: 13.5px;
}
.malumot > div:last-child { border-bottom: 0; }
.malumot span { color: var(--xira-2); }

.izoh-blok {
  margin-top: 14px; padding: 12px 14px; background: var(--panel-2);
  border-radius: 10px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
}

/* Aloqa tarixi lentasi */
.lenta { display: flex; flex-direction: column; gap: 12px; }
.lenta-band {
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--chiziq);
  border-radius: 11px;
}
.lenta-bosh { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }

/* Karta ichidagi kichik raqamlar */
.raqamlar.ichki { margin-bottom: 0; gap: 12px; }
.raqam.kichik-raqam { padding: 14px 16px; background: var(--panel-2); }
.raqam.kichik-raqam .v { font-size: 20px; }

.bosh-karta { text-align: center; padding: 34px 22px; }
.ogoh-satr.qizil-satr { border-color: var(--qizil); color: var(--qizil); }

.kontekst-ajrat {
  padding: 9px 14px 5px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--xira-2); border-top: 1px solid var(--chiziq);
  margin-top: 5px;
}

.belgili { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.belgili input { width: auto; }

/* ================= Filiallar ================= */

.filial-tor { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.filial-karta {
  background: var(--panel); border: 1px solid var(--chiziq); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
}
.filial-bosh { display: flex; align-items: flex-start; gap: 11px; }
.filial-bosh > div { flex: 1; min-width: 0; }
.filial-nuqta { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; }
.filial-summa { font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.filial-bosh-holat {
  padding: 16px; border: 1px dashed var(--chiziq); border-radius: 12px;
  background: var(--panel-2); text-align: center;
}
.filial-usullar { display: flex; flex-wrap: wrap; gap: 8px; }
.filial-usullar span {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px;
  background: var(--panel-3); border-radius: 20px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.filial-usullar i { font-style: normal; color: var(--xira-2); }
.filial-oy {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 12px; border-top: 1px solid var(--chiziq);
}
.filial-oy .k { display: block; font-size: 11.5px; color: var(--xira-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.filial-oy b { font-size: 16px; font-variant-numeric: tabular-nums; }
.filial-oy span.kichik { display: block; }
.filial-reja { display: flex; flex-direction: column; gap: 6px; }
.filial-amal { display: flex; gap: 8px; margin-top: auto; }
.filial-amal .tugma { flex: 1; justify-content: center; }

.ustun-chiziq { height: 8px; background: var(--panel-3); border-radius: 4px;
  overflow: hidden; min-width: 60px; }
.ustun-chiziq i { display: block; height: 100%; border-radius: 4px; }

/* ================= Oylik avtomatik hisobi ================= */

.yashil-matn { color: var(--yashil); }
.hisob-satr { cursor: pointer; }
.hisob-tafsil td { background: var(--panel-2); }
.tafsil-royxat { display: flex; flex-direction: column; gap: 7px; padding: 6px 2px; }
.tafsil-satr {
  display: grid; grid-template-columns: 190px 1fr 150px; gap: 12px;
  align-items: baseline; font-size: 13px;
}
.tafsil-satr > b:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .tafsil-satr { grid-template-columns: 1fr; gap: 2px; }
  .tafsil-satr > b:last-child { text-align: left; }
}

/* ================= Hisobot ================= */

.hisobot-varaq {
  background: var(--panel); border: 1px solid var(--chiziq);
  border-radius: var(--radius); padding: 30px 34px;
}
.varaq-bosh {
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
  padding-bottom: 18px; border-bottom: 2px solid var(--chiziq); margin-bottom: 22px;
}
.varaq-kompaniya {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--xira-2); margin-bottom: 5px;
}
.varaq-bosh h2 { font-size: 22px; margin: 0 0 3px; }
.varaq-blok { margin-bottom: 28px; }
.varaq-blok h3 {
  font-size: 15px; margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--chiziq); color: var(--matn);
}
.varaq-tor { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.varaq-raqam {
  padding: 13px 15px; background: var(--panel-2); border-radius: 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.varaq-raqam > span { font-size: 11.5px; color: var(--xira-2);
  text-transform: uppercase; letter-spacing: .04em; }
.varaq-raqam > b { font-size: 20px; font-variant-numeric: tabular-nums; }
.varaq-raqam > i { font-style: normal; }

.varaq-jadval { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.varaq-jadval th {
  text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--xira-2);
  border-bottom: 1px solid var(--chiziq);
}
.varaq-jadval td { padding: 8px 10px; border-bottom: 1px solid var(--chiziq); }
.varaq-jadval tfoot td { border-bottom: 0; border-top: 2px solid var(--chiziq); }
.varaq-jadval .ong { text-align: right; font-variant-numeric: tabular-nums; }

.varaq-imzo {
  display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr);
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--chiziq);
}
.varaq-imzo > div { display: flex; flex-direction: column; gap: 26px; }
.varaq-imzo span { font-size: 12px; color: var(--xira-2); }
.varaq-imzo i { display: block; border-bottom: 1px solid var(--chiziq); }
.varaq-oyoq { margin-top: 20px; text-align: center; }

.eksport-tor { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.eksport-tor.katta { margin-bottom: 22px; }
.eksport-karta {
  display: flex; flex-direction: column; gap: 5px; padding: 15px 17px;
  background: var(--panel-2); border: 1px solid var(--chiziq); border-radius: 12px;
  text-decoration: none; color: var(--matn); transition: border-color .15s;
}
.eksport-karta:hover { border-color: var(--asosiy); text-decoration: none; }
.eksport-karta .bel { color: var(--asosiy); }
.eksport-karta span { font-size: 13.5px; font-weight: 500; }
.eksport-karta i { font-style: normal; }

/* Chop etishda faqat varaq qoladi */
@media print {
  .yon, .tepa, .chop-yashir, .xabar { display: none !important; }
  .asos, main { padding: 0 !important; margin: 0 !important; }
  .hisobot-varaq { border: 0; padding: 0; background: #fff; color: #111; }
  .hisobot-varaq * { color: #111 !important; }
  .varaq-raqam { background: #f4f4f5; }
  .varaq-blok { break-inside: avoid; }
}

/* ================= Ichki chat ================= */

.chat-qobiq {
  display: grid; grid-template-columns: 290px 1fr; gap: 18px;
  height: calc(100vh - 200px); min-height: 460px;
}
@media (max-width: 900px) {
  .chat-qobiq { grid-template-columns: 1fr; height: auto; }
  .chat-royxat { max-height: 240px; }
  .chat-oyna-katta { height: 70vh; }
}

.chat-royxat {
  background: var(--panel); border: 1px solid var(--chiziq); border-radius: var(--radius);
  overflow-y: auto; padding: 8px;
}
.chat-band {
  display: flex; gap: 11px; align-items: center; padding: 10px 11px;
  border-radius: 11px; text-decoration: none; color: var(--matn);
}
.chat-band:hover { background: var(--panel-2); text-decoration: none; }
.chat-band.faol { background: var(--asosiy-och); }
.chat-band.faol b { color: var(--asosiy); }
.chat-nishon {
  width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid;
  place-items: center; font-size: 12.5px; font-weight: 700; color: #08131a;
}
.chat-band-tan { flex: 1; min-width: 0; }
.chat-band-bosh { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-band-bosh b { font-size: 14px; }
.chat-band-tan .kichik { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-son {
  background: var(--asosiy); color: #08131a; border-radius: 20px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; flex: none;
}

.chat-oyna-katta {
  background: var(--panel); border: 1px solid var(--chiziq); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-tepa {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  padding: 15px 20px; border-bottom: 1px solid var(--chiziq);
}
.chat-bosh-holat { margin: auto; text-align: center; padding: 40px; }

.chat-tana {
  flex: 1; overflow-y: auto; padding: 18px 20px; display: flex;
  flex-direction: column; gap: 10px;
}
.chat-xabar {
  max-width: 74%; align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--chiziq); border-radius: 14px 14px 14px 5px; padding: 10px 13px;
}
.chat-xabar.meniki {
  align-self: flex-end; background: var(--asosiy-och);
  border-color: rgba(45, 212, 191, .3); border-radius: 14px 14px 5px 14px;
}
.chat-kim { font-size: 12px; font-weight: 600; color: var(--asosiy); margin-bottom: 3px; }
.chat-javob {
  font-size: 12px; color: var(--xira-2); border-left: 2px solid var(--asosiy);
  padding: 3px 0 3px 9px; margin-bottom: 6px;
}
.chat-matn { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-matn.ochirilgan { font-style: italic; color: var(--xira-2); }
.chat-havola { display: inline-block; margin-top: 6px; font-size: 12.5px; word-break: break-all; }
.chat-oyoq {
  display: flex; gap: 10px; align-items: center; margin-top: 6px;
  font-size: 11px; color: var(--xira-2);
}
.chat-oyoq button {
  background: none; border: 0; color: var(--xira-2); font: inherit; font-size: 11px;
  cursor: pointer; padding: 0;
}
.chat-oyoq button:hover { color: var(--asosiy); }
.ish-kod-havola { color: var(--asosiy); font-weight: 600; text-decoration: none; }

.chat-forma { border-top: 1px solid var(--chiziq); padding: 12px 16px; }
.chat-javob-satr {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--xira-2); padding: 0 0 8px;
}
.chat-javob-satr button { background: none; border: 0; color: var(--xira-2); cursor: pointer; }
.chat-yozish { display: flex; gap: 9px; align-items: flex-end; }
.chat-yozish textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 160px; line-height: 1.5;
}
.chat-forma input[type="url"] { margin-bottom: 8px; }

.azo-tor {
  display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: 240px; overflow-y: auto; padding: 4px 2px;
}

/* [hidden] display:flex/grid dan kuchsizroq — shuning uchun aniq yozamiz */
.chat-javob-satr[hidden],
.filtr-forma[hidden],
.forma-setka[hidden],
.qator[hidden] { display: none !important; }

/* Filtr qatoridagi to'g'ridan-to'g'ri maydonlar yonma-yon tursin */
.filtr-forma > input,
.filtr-forma > select {
  width: auto; flex: 0 1 220px; min-width: 160px;
}
.filtr-forma > button { flex: none; }

/* ================================================================= */
/*  TELEFON VA PLANSHET                                              */
/*  Katta ekranda menyu tugmasi ko'rinmaydi — faqat tor ekranda.     */
/* ================================================================= */

.menyu-tugma { display: none; }
.yon-fon { display: none; }

@media (max-width: 900px) {
  /* --- Yon menyu chetdan chiqadigan panel bo'ladi --- */
  .yon {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 268px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  }
  body.menyu-ochiq .yon { transform: translateX(0); }

  .yon-fon {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.menyu-ochiq .yon-fon { opacity: 1; pointer-events: auto; }
  body.menyu-ochiq { overflow: hidden; }

  /* --- Tepa qator --- */
  .menyu-tugma {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--panel-2); border: 1px solid var(--chiziq);
    color: var(--matn); cursor: pointer;
  }
  .menyu-tugma svg { width: 20px; height: 20px; }
  .tepa { padding: 12px 16px; gap: 10px; }
  .tepa .tugma { white-space: nowrap; padding: 9px 13px; font-size: 13px; }
  .qidiruv input { font-size: 14px; }

  main { padding: 16px !important; }

  /* --- Sarlavha ustma-ust --- */
  .sarlavha { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sarlavha h1 { font-size: 22px; }
  .sarlavha .ong { width: 100%; flex-wrap: wrap; }

  /* --- Bo'lim menyusi yon tomonga aylanadi --- */
  .soqqa-menyu {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .soqqa-menyu::-webkit-scrollbar { display: none; }
  .soqqa-menyu a { white-space: nowrap; flex: none; }
  .soqqa-menyu .ong-havola { margin-left: 0; }

  /* --- Kartalar bitta ustunda --- */
  .raqamlar { grid-template-columns: 1fr 1fr; gap: 12px; }
  .raqam { padding: 14px 16px; }
  .raqam .v { font-size: 22px; }
  .karta { padding: 16px 18px; }
  .karta-bosh { flex-wrap: wrap; gap: 10px; }

  /* --- Oynalar (modal) deyarli to'liq ekran --- */
  .oyna, .oyna.keng-oyna {
    width: calc(100vw - 20px); max-width: none; left: 10px; right: 10px;
    transform: none; top: 10px; max-height: calc(100vh - 20px);
  }
  .oyna-tan { max-height: calc(100vh - 190px); }
  .oyna-oyoq { flex-wrap: wrap; }
  .oyna-oyoq .tugma { flex: 1; justify-content: center; }

  /* --- Jadval yon tomonga suriladi --- */
  .jadval-orash { -webkit-overflow-scrolling: touch; }
  .biznes-jadval { min-width: 620px; }

  /* --- Filtr maydonlari to'liq enlikda --- */
  .filtr-forma > input, .filtr-forma > select { flex: 1 1 100%; }

  /* --- Chat --- */
  .chat-qobiq { grid-template-columns: 1fr; height: auto; }
  .chat-royxat { max-height: 190px; }
  .chat-oyna-katta { height: 66vh; }
  .chat-xabar { max-width: 88%; }

  /* --- Voronka va filiallar --- */
  .voronka-bosqich { flex: 1 1 calc(50% - 5px); }
  .filial-tor { grid-template-columns: 1fr; }
  .eksport-tor { grid-template-columns: 1fr 1fr; }
  .hisobot-varaq { padding: 18px 16px; }
  .varaq-imzo { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  .raqamlar { grid-template-columns: 1fr; }
  .voronka-bosqich { flex: 1 1 100%; }
  .eksport-tor { grid-template-columns: 1fr; }
  .setka-2 { grid-template-columns: 1fr; }
  .tepa .tugma { display: none; }        /* joy tor — asosiy tugma menyuda qoladi */
  .sarlavha .ong .tugma { flex: 1 1 auto; justify-content: center; }
}

/* ================= Telegram: ulanish qadamlari ================= */

.qadamlar { display: flex; flex-direction: column; gap: 12px; }
.qadam-satr { display: flex; gap: 13px; align-items: flex-start; }
.qadam-raqam {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: var(--asosiy-och); color: var(--asosiy);
  font-weight: 700; font-size: 13px;
}
.havola-maydon {
  width: 260px; max-width: 42vw; font-size: 12px; padding: 7px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
@media (max-width: 900px) {
  .havola-maydon { width: 100%; max-width: none; }
  .satr .ong { flex-wrap: wrap; }
}

/* ================================================================= */
/*  SAHIFALAR O'RTASIDA SILLIQ O'TISH                                */
/* ================================================================= */

/* Yon menyu va tepa qator o'tishda joyida qoladi — faqat ichki qism almashadi.
   Shu sabab «butun sahifa yangilandi» degan sezgi yo'qoladi. */
.yon { view-transition-name: yon-menyu; }
.tepa { view-transition-name: tepa-qator; }
main { view-transition-name: asosiy-qism; }

::view-transition-old(yon-menyu),
::view-transition-new(yon-menyu),
::view-transition-old(tepa-qator),
::view-transition-new(tepa-qator) {
  animation: none;                 /* menyu umuman miltillamasin */
}

::view-transition-old(asosiy-qism) {
  animation: chiqish var(--otish, 180ms) ease both;
}
::view-transition-new(asosiy-qism) {
  animation: kirish var(--otish, 180ms) ease both;
}

@keyframes chiqish {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes kirish {
  from { opacity: 0; transform: translateY(6px); }
}

/* --- Tepadagi yuklanish chizig'i --- */
.yuklash-chizigi {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--asosiy), #7dd3fc);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: width .3s ease, opacity .2s ease;
}
.yuklash-chizigi.ketmoqda {
  opacity: 1; width: 80%;
  transition: width 2.5s cubic-bezier(.1, .8, .3, 1), opacity .1s;
}
.yuklash-chizigi.tugadi {
  opacity: 0; width: 100%;
  transition: width .18s ease, opacity .35s ease .12s;
}

/* Foydalanuvchi tizim sozlamasida animatsiyani o'chirgan bo'lsa — hurmat qilamiz */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .yuklash-chizigi { transition: none; }
}

/* Sozlamadan «animatsiyani kamaytirish» yoqilsa */
body.harakat-kam ::view-transition-old(*),
body.harakat-kam ::view-transition-new(*) { animation: none !important; }
body.harakat-kam * { transition-duration: .01ms !important; }

/* --- Menyuning ikkinchi qavati (A'zolar > Mijozlar > To'lov jadvali) --- */
.ichki-guruh .guruh-bosh { padding: 9px 12px; font-size: 14px; min-height: 0; }
.ichki-guruh .guruh-ichi { margin-left: 12px; padding-left: 9px; }
.ichki-guruh .guruh-ichi a { font-size: 13.5px; padding: 8px 11px; min-height: 0; }

/* Ichki bo'lim ro'yxati uzun bo'lsa menyu aylanadigan bo'lsin */
nav.menyu { padding-bottom: 12px; }

/* --- Telegramga ulanish kodi --- */
.ulanish-kod {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 21px; font-weight: 700; letter-spacing: .16em;
  color: var(--asosiy); background: var(--asosiy-och);
  border: 1px solid rgba(45, 212, 191, .3); border-radius: 10px;
  padding: 7px 14px; cursor: pointer; user-select: all; display: inline-block;
}
.ulanish-kod:hover { background: rgba(45, 212, 191, .2); }
.tugma-matn {
  background: none; border: 0; color: var(--asosiy); font: inherit;
  font-size: 12.5px; cursor: pointer; padding: 0 0 0 8px;
}
.tugma-matn:hover { text-decoration: underline; }