* { box-sizing: border-box; }
:root {
  --paper: #FAFAF7;
  --soft: #F0EEE5;
  --ink: #17181B;
  --ink-soft: #75746D;
  --ink-faint: #A8A69C;
  --rule: #DEDCD1;
  --rule-strong: #C8C6B9;
  --accent: #C43E24;
  --accent-tint: #F7E9E5;
  --green: #3F6B3F;
  --green-tint: #E9F0E4;
  --amber: #9C6B15;
  --amber-tint: #F5EDDC;
  --red: #B23A2C;
  --red-tint: #F7E5E2;

  /* ---- Dizayn tizimi: yuza, shisha, chuqurlik, radius ---- */
  --surface: #FFFFFF;                          /* kartaning to'q yuzasi */
  --glass: rgba(255,255,255,0.62);             /* shisha panel */
  --glass-strong: rgba(255,255,255,0.78);      /* qalinroq shisha (topbar, drawer) */
  --glass-brd: rgba(255,255,255,0.9);          /* shisha qirrasi (yorqin chekka) */
  --glass-blur: saturate(180%) blur(20px);
  --hairline: rgba(23,24,27,0.07);             /* juda ingichka ajratgich */
  --elev-1: 0 2px 8px rgba(18,18,28,0.05);
  --elev-2: 0 8px 24px rgba(18,18,28,0.08), 0 2px 6px rgba(18,18,28,0.04);
  --elev-3: 0 18px 44px rgba(18,18,28,0.12), 0 3px 10px rgba(18,18,28,0.05);
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;
  --aura-1: #F7D9CF;                           /* orqa fon nuri (mavzuga qarab) */
  --aura-2: #EDE6D6;
}
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* Mayin fon nuri — shisha panellar shu fonni "ushlaydi" */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(780px 560px at 8% -8%, var(--aura-1), transparent 62%),
    radial-gradient(680px 520px at 96% 4%, var(--aura-2), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, var(--aura-1), transparent 65%);
  opacity: 0.9;
}
a { color: inherit; }
.wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; position: sticky; top: 0; z-index: 10;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 1px 0 var(--hairline), 0 6px 24px rgba(18,18,28,0.05);
}
/* ---- Logotip: bosilsa bosh sahifaga o'tadi ----
   SVG mask orqali chiziladi — shu tufayli logo matn rangini oladi va
   yorug' mavzuda qora, qorong'i mavzuda oq bo'lib ko'rinadi. */
.brand {
  display: inline-flex; align-items: center; flex: none;
  color: var(--ink); text-decoration: none; transition: opacity 0.15s;
}
.brand:hover { opacity: 0.7; }
.brand-full, .brand-mark {
  display: block; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.brand-full {
  width: 202px; height: 36px;                    /* nisbat 595.28 : 105.93 */
  -webkit-mask-image: url("/logo.svg"); mask-image: url("/logo.svg");
}
.brand-mark {
  display: none; width: 33px; height: 34px;      /* nisbat 103.95 : 105.93 */
  -webkit-mask-image: url("/logo-mark.svg"); mask-image: url("/logo-mark.svg");
}
/* mask ishlamaydigan brauzerda logo yo'qolib qolmasin — oddiy rasm sifatida */
@supports not ((-webkit-mask-image: url("/logo.svg")) or (mask-image: url("/logo.svg"))) {
  .brand-full { background: url("/logo.svg") no-repeat left center / contain; }
  .brand-mark { background: url("/logo-mark.svg") no-repeat left center / contain; }
}
.nav-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav-links a { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; padding: 4px 0; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav-user { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }

/* ===== Xabarnomalar (qo'ng'iroq + panel) ===== */
.notif-wrap { position: relative; display: inline-flex; }
.notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--ink-soft); cursor: pointer; }
.notif-btn:hover { background: var(--soft); color: var(--ink); }
.notif-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--glass-strong); }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(360px, 92vw);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.20); z-index: 50; overflow: hidden;
  display: none;
}
.notif-panel.open { display: block; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--hairline); }
.notif-h-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); }
.notif-readall { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 2px 4px; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: min(60vh, 420px); overflow-y: auto; }
.notif-empty { padding: 26px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.notif-item { display: flex; gap: 11px; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hairline); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--soft); }
.notif-item.is-unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-item.is-unread:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.notif-ic { flex: none; font-size: 17px; line-height: 1.3; }
.notif-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-i-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.notif-i-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-i-time { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.notif-all { display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; border-top: 1px solid var(--hairline); }
.notif-all:hover { background: var(--soft); }
/* tor ekranda panel butun enni egallaydi (chapga chiqib ketmasin) */
@media (max-width: 560px) {
  .notif-panel { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; }
}

/* to'liq xabarnomalar sahifasi */
.notif-page-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--surface); }
.notif-row { display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hairline); }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--soft); }
.notif-row.is-unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-row.is-unread .notif-row-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: middle; }
.notif-row-ic { flex: none; font-size: 20px; }
.notif-row-b { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.notif-row-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.notif-row-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.notif-row-time { flex: none; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

h1 { font-family: "Inter", sans-serif; font-size: 21px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.6; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
button, .btn { font-family: inherit; cursor: pointer; }
.btn-primary, a.btn-primary {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 10px 20px; border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary, a.btn-secondary {
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong);
  padding: 9px 16px; border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block;
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-small, a.btn-small { background: var(--paper); border: 1px solid var(--rule-strong); padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); }
.btn-small:hover { border-color: var(--ink); }
.btn-danger { color: var(--red); border-color: #E7C6BF; }
.btn-danger:hover { background: var(--red-tint); border-color: var(--red); }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; padding: 12px 12px; border-bottom: 1px solid var(--hairline); }
td { padding: 13px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
table tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-yangi, .badge-reja { background: var(--amber-tint); color: var(--amber); }
.badge-jarayonda, .badge-tayyor { background: #E6EEF5; color: #2E5C8A; }
.badge-bajarildi, .badge-nashretildi { background: var(--green-tint); color: var(--green); }
.badge-past { background: var(--soft); color: var(--ink-soft); }
.badge-orta { background: var(--amber-tint); color: var(--amber); }
.badge-yuqori { background: var(--red-tint); color: var(--red); }
.badge-admin { background: var(--accent-tint); color: var(--accent); }
.badge-xodim { background: var(--soft); color: var(--ink-soft); }
.badge-mediachi { background: #E6EEF5; color: #2E5C8A; }
.badge-rahbar { background: #EDE4F7; color: #6B3FA0; }
.badge-hudud { background: #E4F0E8; color: #3F6B3F; }
.badge-qabul { background: var(--green-tint); color: var(--green); }
.badge-kutilmoqda { background: var(--amber-tint); color: var(--amber); }
.badge-rad { background: var(--red-tint); color: var(--red); }
.badge-yoq { background: var(--soft); color: var(--ink-faint); }

/* ---- Mega loyihalar: haftalik nazorat ---- */
.pr-weekbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.pr-weektitle { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; }
.pr-counts { margin-left: auto; display: flex; gap: 6px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 26px; }
.pr-card { border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: 10px; background: var(--paper); padding: 14px 16px; }
.pr-card.pr-qabul { border-left-color: var(--green); }
.pr-card.pr-yangi { border-left-color: var(--amber); }
.pr-card.pr-rad { border-left-color: var(--red); }
.pr-card.pr-yoq { border-left-color: var(--rule-strong); }
.pr-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pr-name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.pr-name:hover { color: var(--accent); }
.pr-mediachi { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.pr-content { margin-top: 10px; }
.pr-ctitle { font-size: 13.5px; font-weight: 600; }
.pr-link { font-size: 12.5px; color: #2E5C8A; }
.pr-notes { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.pr-feedback { font-size: 12.5px; color: var(--red); background: var(--red-tint); border-radius: 6px; padding: 6px 9px; margin-top: 8px; }
.pr-empty { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.pr-review { margin-top: 10px; }
.pr-review input[type=text] { font-size: 12.5px; padding: 7px 10px; }
.pr-ok { color: var(--green); border-color: #BFD8BF; }
.pr-ok:hover { background: var(--green-tint); border-color: var(--green); }
.pr-strip { display: flex; gap: 4px; margin-top: 12px; }
.pr-sq { width: 18px; height: 10px; border-radius: 3px; background: var(--soft); }
.pr-sq-qabul { background: #7CB97C; }
.pr-sq-yangi { background: #E0B95E; }
.pr-sq-rad { background: #D98077; }
.pr-mycard { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); padding: 18px 20px; max-width: 640px; margin-bottom: 26px; }
.pr-mystatus { font-size: 14px; }
.pr-okmsg { background: var(--green-tint); color: var(--green); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.ht-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ht-filters select { width: auto; font-size: 13px; padding: 7px 10px; }

/* ---- Ijtimoiy tarmoqlar statistikasi ---- */
.sc-card { border-left-color: var(--rule-strong); }
.sc-title { font-size: 13.5px; }
.sc-icon { font-size: 16px; }
.sc-num { font-family: "Inter", sans-serif; font-size: 28px; font-weight: 700; margin-top: 8px; letter-spacing: -0.02em; }
.sc-unit { font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.sc-delta { font-size: 13px; font-weight: 600; margin-left: 8px; }
.sc-delta.up { color: var(--green); }
.sc-delta.down { color: var(--red); }
.sc-spark { width: 100%; height: 36px; margin-top: 8px; color: var(--accent); opacity: 0.85; }
.sc-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sc-snapform { display: flex; gap: 6px; flex: 1; min-width: 170px; }
.sc-snapform input { font-size: 12.5px; padding: 6px 10px; }
.sc-hist { margin-top: 10px; font-size: 12.5px; }
.sc-hist summary { cursor: pointer; color: var(--ink-soft); }
.sc-histtable { margin-top: 6px; }
.sc-histtable td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }

/* ---- Yoritilish reytingi ---- */
.cv-total td { background: var(--soft); border-top: 2px solid var(--rule-strong); }
.cv-q { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 5px; }
.cv-q.hi { background: var(--green-tint); color: var(--green); }
.cv-q.mid { background: var(--amber-tint); color: var(--amber); }
.cv-q.low { background: var(--soft); color: var(--ink-soft); }

/* ---- Yoritilish posteri (mavjud .poster uslubiga qo'shimcha) ---- */
.poster-sub2 { font-size: 13px; color: #75746D; margin: 2px 0 6px; }
.poster-unit { font-size: 12px; font-weight: 500; color: #75746D; }
.poster-sum { display: flex; justify-content: space-between; margin-top: 14px; padding: 10px 12px; background: #F3EDE2; border-radius: 10px; font-size: 14px; color: #17181B; }
/* Bitta A4 varaqqa moslashuvchi poster: ro'yxat qancha uzun bo'lsa ham sig'adi.
   --row-scale JS orqali kichraytiriladi (1 dan 0.42 gacha). */
.poster-fit { height: 297mm; display: flex; flex-direction: column; padding: 14mm 14mm 10mm; --row-scale: 1; }
.poster-fit .poster-head { flex: none; padding-bottom: calc(14px * var(--row-scale)); margin-bottom: calc(14px * var(--row-scale)); }
.poster-fit .poster-title { font-size: calc(38px * (0.55 + 0.45 * var(--row-scale))); }
.poster-fit .poster-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.poster-fit .poster-row { padding: calc(9px * var(--row-scale)) 10px; gap: calc(14px * var(--row-scale)); }
.poster-fit .poster-row.top { margin-bottom: calc(4px * var(--row-scale)); }
.poster-fit .poster-region-name { font-size: calc(18px * (0.62 + 0.38 * var(--row-scale))); line-height: 1.2; }
.poster-fit .poster-row.top .poster-region-name { font-size: calc(21px * (0.62 + 0.38 * var(--row-scale))); }
.poster-fit .poster-secretary { font-size: calc(12px * (0.72 + 0.28 * var(--row-scale))); }
.poster-fit .poster-rank { width: calc(40px * (0.72 + 0.28 * var(--row-scale))); font-size: calc(20px * (0.6 + 0.4 * var(--row-scale))); }
.poster-fit .poster-row.top .poster-rank { font-size: calc(28px * (0.6 + 0.4 * var(--row-scale))); }
.poster-fit .poster-score { font-size: calc(22px * (0.6 + 0.4 * var(--row-scale))); }
.poster-fit .poster-sum { flex: none; margin-top: calc(14px * var(--row-scale)); padding: calc(10px * var(--row-scale)) 12px; }
.poster-fit .poster-foot { flex: none; margin-top: calc(12px * var(--row-scale)); padding-top: 10px; }
/* Zich rejim: nom va izoh bitta qatorda — ko'p qatorli ro'yxat ham bir varaqqa sig'adi */
.poster-fit .poster-list.tight .poster-region { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.poster-fit .poster-list.tight .poster-region-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-fit .poster-list.tight .poster-secretary { margin-top: 0; white-space: nowrap; flex: none; }
.poster-fit .poster-list.tight .poster-row { padding: calc(6px * var(--row-scale)) 10px; }
.poster-fit .poster-list.tight .poster-row.top { margin-bottom: calc(2px * var(--row-scale)); }

/* ---- A4 hisobot ---- */
.a4-wrap { display: flex; justify-content: center; }
.a4-page { width: 210mm; max-width: 100%; background: #fff; color: #17181B; padding: 16mm 14mm; box-shadow: 0 8px 30px rgba(0,0,0,0.14); }
.a4-head { border-bottom: 2.5px solid #C43E24; padding-bottom: 12px; margin-bottom: 16px; }
.a4-brand { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C43E24; }
.a4-title { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 600; margin-top: 6px; }
.a4-month { font-size: 13px; color: #75746D; text-transform: capitalize; margin-top: 2px; }
.a4-secttitle { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
.a4-count { font-size: 12px; font-weight: 400; color: #75746D; }
.a4-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.a4-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #75746D; padding: 5px 7px; border-bottom: 1.5px solid #C8C6B9; }
.a4-table td { padding: 5px 7px; border-bottom: 1px solid #E2DFD4; vertical-align: top; }
.a4-table tr:hover td { background: transparent; }
.a4-top td { background: #FBF6EE; }
.a4-total td { background: #F0EEE5; border-top: 1.5px solid #C8C6B9; border-bottom: none; }
.a4-note { font-size: 9.5px; color: #75746D; margin-top: 1px; }
.a4-foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px; border-top: 1px solid #E2DFD4; font-size: 11px; color: #75746D; }

/* ---- Shaxsiy rejani xodimga biriktirish ---- */
.dg-plan { border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--paper); padding: 14px 16px; margin-bottom: 18px; max-width: 560px; }
.dg-plan-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.dg-plan-title { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600; margin-top: 5px; }
.dg-plan-desc { font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; white-space: pre-wrap; }
.dg-staff { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--rule-strong); border-radius: 8px; padding: 10px 12px; max-height: 260px; overflow-y: auto; }
.dg-staff-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; padding: 4px 2px; }
.dg-staff-item:hover { color: var(--accent); }
.dg-staff-item input { width: auto; }
.dg-staff-name { flex: 1; }
.dg-note { background: var(--green-tint); color: var(--green); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; }
.dg-note a { color: inherit; }

/* ---- Maqsad ko'rsatkichi (progress) ---- */
.goal-track { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(196,62,36,0.18); }
.goal-track-wide { max-width: none; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.goal-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.goal-pct { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.goal-pct.done { color: var(--green); }
.goal-bar { height: 9px; border-radius: 20px; background: rgba(23,24,27,0.09); overflow: hidden; }
.goal-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), #E8734F); transition: width 0.6s ease; }
.goal-fill.done { background: linear-gradient(90deg, var(--green), #6FA96F); }
.goal-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--ink-soft); }
.goal-left.done { color: var(--green); font-weight: 600; }
.goal-settings { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 4px; }

/* ================= PROFIL KARTASI (referens dizayn) =================
   O'lchamlar referens maketdan olingan: karta 354px, radius 34px, ichki
   otступ 16px, oblojka 164px/22px, avatar 76px, badge 38px, doira tugma 52px,
   3 ta ko'rsatkich, pastda to'liq kenglikdagi 52px pill tugma. */
:root {
  --uc-bg: var(--surface);
  --uc-chip: #F1F1F4;
  --uc-shadow: var(--elev-3);
}
:root[data-theme='tungi'] { --uc-chip: #31343C; }

.ucard {
  position: relative; width: 100%; max-width: 354px;
  padding: 16px; border-radius: 34px;
  background: var(--uc-bg); background-size: cover; background-position: center;
  box-shadow: var(--uc-shadow); color: var(--ink);
  display: flex; flex-direction: column;
}
.ucard-media {
  position: relative; height: 164px; border-radius: 22px;
  background-size: cover; background-position: center;
}
.ucard-ava {
  position: absolute; left: 22px; bottom: -4px;
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.92); background: var(--uc-chip); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 25px; font-weight: 700;
  box-shadow: 0 5px 16px rgba(0,0,0,0.20); text-decoration: none;
}
.ucard-ava img { width: 100%; height: 100%; object-fit: cover; }

.ucard-badge {
  --uc-r1: #4F6BFF; --uc-r2: #7B3FE4;
  position: absolute; right: 10px; bottom: 10px; height: 38px; max-width: calc(100% - 116px);
  display: inline-flex; align-items: center; gap: 9px; padding: 0 16px 0 5px;
  border-radius: 99px; background: linear-gradient(95deg, var(--uc-r1), var(--uc-r2));
  color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 6px 18px rgba(40,30,120,0.32);
}
.ucard-badge.r-admin   { --uc-r1: #F2593A; --uc-r2: #C4241C; }
.ucard-badge.r-rahbar  { --uc-r1: #8B5CF6; --uc-r2: #5B21B6; }
.ucard-badge.r-xodim   { --uc-r1: #3B82F6; --uc-r2: #1D4ED8; }
.ucard-badge.r-mediachi{ --uc-r1: #14B8A6; --uc-r2: #0E7490; }
.ucard-badge.r-hudud   { --uc-r1: #4CAF6A; --uc-r2: #2F7D4F; }
.ucard-badge-ic {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: #fff; color: var(--uc-r1);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700;
}
.ucard-badge-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ucard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 10px; margin-top: 18px; }
.ucard-id { min-width: 0; }
.ucard-name {
  font-family: "Inter", sans-serif; font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: inherit; text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis;
}
.ucard-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ucard-role { font-size: 14.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.3; }
.ucard-save {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 0; padding: 0;
  background: var(--uc-chip); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s ease;
}
.ucard-save:hover { transform: scale(1.07); }
.ucard-save svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ucard-save.on svg { fill: currentColor; }

.ucard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 10px; margin-top: 26px; }
.umetric { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.umetric-ic { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; }
.umetric-ic svg { width: 19px; height: 19px; display: block; }
.umetric-ic.ic-star svg { fill: #FBBF24; }
.umetric-ic.ic-flag svg { fill: #2D7FF9; }
.umetric-ic.ic-clock svg { fill: #A855F7; }
.umetric-val { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.umetric-lbl { grid-column: 2; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.ucard-cta {
  margin-top: 26px; height: 52px; width: 100%; border: 0; border-radius: 99px;
  background: var(--ink); color: var(--uc-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ucard-cta:hover { opacity: 0.88; }

/* --- Oblojkaga rasm yuklaganlar uchun: butun karta rasmdan iborat --- */
.ucard--photo { color: #fff; }
.ucard--photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 34px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.34) 68%, rgba(0,0,0,0.62) 100%);
}
.ucard--photo > * { position: relative; z-index: 1; }
.ucard--photo .ucard-media { background: none; }
.ucard--photo .ucard-role,
.ucard--photo .umetric-lbl { color: rgba(255,255,255,0.78); }
.ucard--photo .ucard-ava { border-color: rgba(255,255,255,0.55); }
.ucard--photo .ucard-save { background: rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(10px); }
.ucard--photo .ucard-badge { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); box-shadow: none; backdrop-filter: blur(10px); }
.ucard--photo .ucard-badge-ic { background: linear-gradient(180deg, var(--uc-r1), var(--uc-r2)); color: #fff; }
.ucard--photo .ucard-cta { background: linear-gradient(180deg, #FFFFFF, #E8E8EC); color: #17171A; }

/* --- Kartalar to'ri --- */
.ucard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; justify-items: center; align-items: start; }
@media (max-width: 380px) {
  .ucard { border-radius: 28px; }
  .ucard--photo::after { border-radius: 28px; }
  .ucard-name { font-size: 19px; }
}

/* --- Profil sahifasi (boshqa xodimning profili) --- */
.up-layout { display: grid; grid-template-columns: 354px 1fr; gap: 30px; align-items: start; }
@media (max-width: 760px) { .up-layout { grid-template-columns: 1fr; justify-items: center; } }
.up-side { min-width: 0; }
.up-panel { border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); padding: 18px 20px; margin-bottom: 16px; }
.up-panel h2 { margin: 0 0 10px; font-size: 15px; }
.up-duties { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; }
.up-rows { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.up-row { display: flex; gap: 10px; align-items: baseline; }
.up-row-k { color: var(--ink-faint); min-width: 108px; font-size: 12.5px; }
.up-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.up-stat { border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px; background: var(--paper); }
.up-stat-v { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.up-stat-l { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.up-empty { font-size: 13px; color: var(--ink-faint); }

/* --- Ismga bosiladigan havola (butun sayt bo'ylab) --- */
.uref { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; }
.uref:hover .uref-nm { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.uref-av {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600;
}
.uref-av img { width: 100%; height: 100%; object-fit: cover; }
.uref-nm { font-weight: 600; }

/* --- Bosh sahifadagi jamoa lentasi --- */
.team-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; }
.team-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none;
  color: inherit; min-width: 88px; padding: 12px 10px; border-radius: 20px;
  border: 1px solid var(--glass-brd); background: var(--surface); box-shadow: var(--elev-1);
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s;
}
.team-chip:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.team-chip-av {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--soft); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 700;
}
.team-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.team-chip-nm { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.25; }

/* oblojka tanlash */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 4px; }
.cover-opt { cursor: pointer; display: block; text-align: center; }
.cover-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cover-swatch { display: block; height: 44px; border-radius: 9px; border: 2px solid transparent; box-shadow: 0 1px 4px rgba(23,24,27,0.12); }
.cover-opt.active .cover-swatch, .cover-opt:hover .cover-swatch { border-color: var(--accent); }
.cover-name { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

/* ---- Jamoa: tuzilma (pog'onali org-chart, nuqtali fon) ---- */
/* tuzilma sahifa kengligidan chiqib, butun ekranni egallaydi */
.org-wide { margin-left: calc(50% - 50vw + 8px); margin-right: calc(50% - 50vw + 8px); padding: 0 20px; }
.org-canvas {
  border: 1px solid var(--glass-brd); border-radius: var(--r-xl); padding: 44px 28px;
  overflow-x: auto; overflow-y: hidden; margin-top: 6px; box-shadow: var(--elev-2);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background-color: var(--glass);
  background-image: radial-gradient(circle, var(--rule-strong) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* bir lavozimdagilar DOIM bitta qatorda (sig'masa qator o'zi suriladi).
   MUHIM: `justify-content: center` bo'lsa, sig'magan kontent IKKALA tomondan chiqib ketadi
   va chap qismiga surib yetib bo'lmaydi. `safe center` — sig'masa chapdan boshlaydi.
   `::before/::after { margin:auto }` — eski brauzerlar uchun o'sha xatti-harakat. */
.org-level {
  display: flex; align-items: stretch; gap: 16px; flex-wrap: nowrap;
  min-width: min-content; justify-content: flex-start;
}
.org-level::before, .org-level::after { content: ""; margin: auto; flex: 0 0 0; }
@supports (justify-content: safe center) {
  .org-level { justify-content: safe center; }
  .org-level::before, .org-level::after { display: none; }
}
.org-link { width: 2px; height: 32px; margin: 0 auto; background: var(--rule-strong); border-radius: 2px; }
.org-node {
  display: flex; align-items: center; gap: 12px; text-align: left; flex: 0 0 auto;
  border: 1px solid var(--glass-brd); border-radius: 22px; background: var(--surface);
  padding: 13px 20px 13px 13px; box-shadow: var(--elev-2);
  min-width: 215px; max-width: 300px;
  color: inherit; text-decoration: none; transition: box-shadow 0.18s, transform 0.18s cubic-bezier(.2,.7,.2,1);
}
.org-node:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.org-node.top { box-shadow: var(--elev-2), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.org-ava {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-tint); color: var(--accent);
  font-family: "Inter", sans-serif; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.org-ava img { width: 100%; height: 100%; object-fit: cover; }
.org-info { display: flex; flex-direction: column; min-width: 0; }
.org-name { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.25; }
.org-pos { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.org-spec { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }

/* ---- Profil: bo'ysunuvchilar zanjiri (daraja bilan) ---- */
.sub-row { align-items: center; }
.sub-branch { color: var(--ink-faint); flex: none; margin-right: 2px; font-size: 13px; }
.sub-nested .max-hint { opacity: 0.85; }

/* ---- Vazifa taqsimoti: kim nima qiladi ---- */
.duty-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 6px; }
.duty-card {
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--elev-1); padding: 18px 18px 16px; display: flex; flex-direction: column;
}
.duty-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.duty-person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.duty-ava {
  width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-tint); color: var(--accent);
  font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.duty-ava img { width: 100%; height: 100%; object-fit: cover; }
.duty-idn { display: flex; flex-direction: column; min-width: 0; }
.duty-name { font-family: "Inter", sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.duty-person:hover .duty-name { color: var(--accent); }
.duty-pos { font-size: 12px; color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.duty-spec {
  flex: none; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-tint); color: var(--accent); white-space: nowrap;
}
.duty-body { flex: 1; }
.duty-text { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 0; white-space: pre-wrap; }
.duty-empty { font-size: 13px; color: var(--ink-faint); font-style: italic; margin: 0; }
.duty-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.duty-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 99px; background: var(--soft); color: var(--ink-soft); text-decoration: none;
}
.duty-tag:hover { color: var(--accent); }
.duty-edit { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.duty-edit summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.duty-edit summary::-webkit-details-marker { display: none; }
.duty-edit summary:hover { color: var(--accent); }
.duty-edit[open] summary { margin-bottom: 8px; }
.duty-edit .field-label { margin-top: 10px; }
.duty-edit .field-label:first-of-type { margin-top: 0; }

/* ---- IJRO: rasmiy topshiriqlar ijrosi ---- */
.ijro-src {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  color: var(--sc, var(--ink-soft));
  background: color-mix(in srgb, var(--sc, var(--ink-soft)) 13%, transparent);
}
.ijro-src-lg { font-size: 12.5px; padding: 5px 13px; }
/* qorong'i mavzularда manba rangi to'q qoladi — matnni yorug'lashtiramiz, fonni kuchaytiramiz */
:root[data-theme='dark'] .ijro-src, :root[data-theme='tungi'] .ijro-src,
:root[data-theme='okean'] .ijro-src, :root[data-theme='koinot'] .ijro-src,
:root[data-theme='interstellar'] .ijro-src {
  color: color-mix(in srgb, var(--sc, #999) 52%, #fff);
  background: color-mix(in srgb, var(--sc, #999) 26%, transparent);
}
.ijro-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ijro-table .row-overdue { background: color-mix(in srgb, var(--red) 6%, transparent); }
.ijro-table td { vertical-align: top; }
@media (max-width: 620px) { .ijro-form-grid { grid-template-columns: 1fr; } }

/* ---- Jamoa: (eski) tuzilma daraxti ---- */
.tm-tree-scroll { overflow-x: auto; padding: 10px 4px 4px; }
.tm-tree, .tm-tree ul {
  display: flex; justify-content: center; align-items: flex-start;
  list-style: none; margin: 0; padding: 0;
}
/* nested ro'yxat — pastga tushuvchi chiziq shu yerdan chiqadi */
.tm-tree ul { position: relative; padding-top: 24px; }
.tm-tree ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 0; height: 24px; border-left: 1.5px solid var(--rule-strong);
}
.tm-tree li { position: relative; padding: 24px 8px 0; text-align: center; }
/* har bir bolaning tepasidagi burchak chiziqlari */
.tm-tree li::before, .tm-tree li::after {
  content: ""; position: absolute; top: 0; right: 50%;
  width: 50%; height: 24px; border-top: 1.5px solid var(--rule-strong);
}
.tm-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--rule-strong); }
.tm-tree li:only-child { padding-top: 24px; }
.tm-tree li:only-child::before { display: none; }
.tm-tree li:only-child::after { left: 50%; border-top: 0 none; }
.tm-tree li:first-child::before, .tm-tree li:last-child::after { border-top: 0 none; }
.tm-tree li:last-child::before { border-right: 1.5px solid var(--rule-strong); border-radius: 0 6px 0 0; }
.tm-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* eng yuqoridagi (root) tugunlarda chiziq bo'lmaydi */
.tm-tree > li { padding-top: 0; }
.tm-tree > li::before, .tm-tree > li::after { display: none; }
.tm-node {
  display: inline-flex; align-items: center; gap: 9px; text-align: left;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--paper);
  padding: 8px 14px 8px 8px; box-shadow: 0 2px 8px rgba(23,24,27,0.06); white-space: nowrap;
}
.tm-node-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tm-node-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-node-info { display: flex; flex-direction: column; }
.tm-node-name { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; }
.tm-node-pos { font-size: 11.5px; color: var(--ink-soft); }

/* ---- Jamoa: a'zo kartalari ---- */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tm-card { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); padding: 16px 18px; }
.tm-card-top { display: flex; gap: 13px; align-items: flex-start; }
.tm-ava {
  width: 58px; height: 58px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-tint); color: var(--accent);
  font-family: "Inter", sans-serif; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tm-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-head { min-width: 0; }
.tm-name { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.25; }
.tm-pos { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.tm-spec { display: inline-block; margin-top: 6px; font-size: 11.5px; padding: 3px 9px; border-radius: 20px; background: var(--soft); color: var(--ink-soft); }
.tm-duties-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 14px 0 4px; }
.tm-duties { font-size: 13px; line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap; }
.tm-contacts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.tm-actions { margin-top: 14px; }
.tm-photo-cur { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.tm-photo-cur img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.tm-photo-rm { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.tm-photo-rm input { width: auto; }
/* a'zo kartasi — oblojka bilan */
.tm-card-cover { padding: 0 0 16px; overflow: hidden; }
.tm-cover { height: 84px; background-size: cover; background-position: center; position: relative; }
.tm-cover-role { position: absolute; right: 12px; top: 10px; }
/* faqat avatar oblojka ustiga chiqadi — matn o'z joyida qoladi */
.tm-card-top-cover { padding: 10px 18px 0; align-items: flex-start; }
.tm-ava-lifted { margin-top: -38px; position: relative; z-index: 2; border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(23,24,27,0.16); }
.tm-card-cover .tm-duties-label, .tm-card-cover .tm-duties, .tm-card-cover .tm-contacts, .tm-card-cover .tm-actions { padding: 0 18px; }
.tm-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 18px 0; font-size: 12px; color: var(--ink-soft); }
.tm-stats b { font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--ink); }
form.inline { display: inline; }
label.field-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); display: block; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
select, input[type=text], input[type=password], input[type=date], input[type=number], input[type=month], textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:hover, input:hover, textarea:hover { border-color: var(--rule-strong); }
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea { resize: vertical; min-height: 90px; border-radius: 18px; }
.form-card {
  max-width: 620px; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  padding: 22px 24px 26px; box-shadow: var(--elev-2);
}
.form-card > h2:first-child, .form-card > .field-label:first-child { margin-top: 0; }
.error-msg { background: var(--red-tint); color: var(--red); padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; }
.empty-state { color: var(--ink-soft); font-size: 14px; padding: 28px 0; text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat-box {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 18px 20px;
  text-decoration: none; color: inherit; display: block; box-shadow: var(--elev-2);
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s;
}
a.stat-box:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.stat-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.stat-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.stat-label { font-size: 11px; color: var(--ink-soft); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 600; margin: 0; line-height: 1.1; }
.stat-box a { text-decoration: none; }
.section-block { margin-bottom: 32px; }

/* ---- Panellar (dashboard bo'limlari) ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; margin-bottom: 26px; }
.panel {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 18px 22px 10px; box-shadow: var(--elev-2);
}
.panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.panel-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.panel-head h2 { margin: 0; }
.panel .list-item:first-child { border-top: none; padding-top: 4px; }
.panel .list-item:last-child { border-bottom: none; }
.panel .empty-state { padding: 16px 0; }
.list-item { border-top: 1px solid var(--hairline); padding: 13px 0; }
.list-item:last-child { border-bottom: 1px solid var(--hairline); }
.list-item-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.list-item-meta { font-size: 12px; color: var(--ink-soft); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.login-wrap { max-width: 380px; margin: 80px auto; padding: 0 16px; }
.login-card {
  border: 1px solid var(--glass-brd); border-radius: var(--r-xl); padding: 32px 30px 34px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-3);
}
.mono { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tag-link { font-size: 12px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: 99px; text-decoration: none; color: var(--ink-soft); }
.tag-link.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 4px; border: none; border-top: 1px solid var(--rule); background: none; font-size: 14px; color: var(--ink); cursor: pointer; }
.opt-row:last-of-type { border-bottom: 1px solid var(--rule); }
.opt-row:hover { background: var(--soft); }
.opt-row.selected { background: var(--accent-tint); }
.opt-letter { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.opt-row.selected .opt-letter { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.visual-opt { background: var(--paper); padding: 12px; text-align: center; border: none; cursor: pointer; }
.visual-opt:hover { background: var(--paper); }
.visual-opt.selected { background: var(--accent-tint); }
.visual-opt svg { width: 100%; height: auto; display: block; margin-bottom: 8px; border: 1px solid var(--rule); }
.visual-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-strong); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.visual-opt.selected .visual-letter { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.progress-track { height: 3px; background: repeating-linear-gradient(to right, var(--rule) 0 3px, transparent 3px 7px); margin-bottom: 26px; position: relative; }
.progress-fill { height: 100%; background: var(--accent); position: absolute; top: 0; left: 0; }
.meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.meta-label { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color: var(--ink-soft); }
.rating-box { border-radius: var(--r-md); padding: 15px 18px; margin-bottom: 22px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.rating-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rating-high { background: var(--green-tint); color: var(--green); }
.rating-high .rating-dot { background: var(--green); }
.rating-mid { background: var(--amber-tint); color: var(--amber); }
.rating-mid .rating-dot { background: var(--amber); }
.rating-low { background: var(--red-tint); color: var(--red); }
.rating-low .rating-dot { background: var(--red); }
.review-item { border-top: 1px solid var(--rule); padding: 16px 0; }
.review-q { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.review-row { font-size: 13px; margin: 0 0 4px; line-height: 1.6; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.review-row.wrong { color: var(--red); }
.review-row.right { color: var(--green); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.role-btn { text-align: left; display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--paper); font-size: 14px; font-weight: 500; color: var(--ink); border: none; cursor: pointer; width: 100%; }
.role-btn:hover { background: var(--paper); }
.table-scroll {
  overflow-x: auto;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  box-shadow: var(--elev-2); padding: 6px 16px 8px;
}
.month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.month-nav input[type=month] { width: auto; padding: 6px 10px; font-size: 13px; }
.crit-col { text-align: center; }
th.crit-col { cursor: help; }
.rank-cell { font-weight: 600; }
.rank-top { color: var(--accent); }
.max-hint { font-size: 11px; color: var(--ink-faint); }
.criteria-legend { margin-bottom: 24px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.avatar-empty { background: var(--soft); color: var(--ink-faint); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; border: 1px solid var(--rule); }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.photo-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.remove-photo-label { font-size: 12px; color: var(--red); display: flex; align-items: center; gap: 6px; cursor: pointer; }
input[type=file] { font-size: 13px; color: var(--ink-soft); }
.legend-row { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; line-height: 1.6; }
.legend-num { color: var(--ink); font-weight: 600; }
.badge-cat-bayram { background: var(--accent-tint); color: var(--accent); }
.badge-cat-alloma { background: #E6EEF5; color: #2E5C8A; }
.badge-cat-xalqaro { background: var(--green-tint); color: var(--green); }
.badge-cat-boshqa { background: var(--soft); color: var(--ink-soft); }
.row-soon td { background: var(--amber-tint); }
.badge-daily { background: #E6EEF5; color: #2E5C8A; }
.badge-tekshiruvda, .badge-rep-kutilmoqda { background: #EEE8F5; color: #6B4E9C; }
.badge-qaytarildi, .badge-rep-qaytarildi { background: var(--red-tint); color: var(--red); }
.badge-rep-tasdiqlandi { background: var(--green-tint); color: var(--green); }
.task-link { text-decoration: none; }
.task-link:hover { color: var(--accent); }
.task-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); align-items: center; }
.report-item { border-top: 1px solid var(--rule); padding: 14px 0; }
.report-item:last-child { border-bottom: 1px solid var(--rule); }
.report-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.report-comment { font-size: 14px; margin: 6px 0 8px; line-height: 1.6; }
.report-admin-comment { font-size: 13px; color: var(--red); margin: 8px 0 0; font-style: italic; }
.review-form { margin-top: 10px; max-width: 480px; }
.mission-box {
  position: relative; padding: 24px 28px; margin-bottom: 28px;
  border-radius: var(--r-xl); border: 1px solid var(--glass-brd);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2); overflow: hidden;
}
.mission-box::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent);
  filter: blur(46px); pointer-events: none;
}
.mission-box > * { position: relative; z-index: 1; }
.mission-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px; }
.mission-text { font-family: "Inter", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.5; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.mission-edit { position: absolute; top: 14px; right: 16px; font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 600; }
.mission-edit:hover { text-decoration: underline; }
/* ---- Kalendar (Notion uslubi) ---- */
.cal-month-label { font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600; text-transform: capitalize; min-width: 150px; text-align: center; }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav-btn { width: 30px; height: 30px; border: 1px solid var(--rule-strong); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink-soft); text-decoration: none; line-height: 1; }
.cal-nav-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.cal-tools { display: flex; align-items: center; gap: 10px; }
.cal-tools input[type=month] { width: auto; padding: 6px 10px; font-size: 13px; }
.cal-wrap { border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; background: var(--paper); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--soft); border-bottom: 1px solid var(--rule-strong); }
.cal-hcell { text-align: center; padding: 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.cal-hshort { display: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { position: relative; min-height: 104px; padding: 6px 7px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--soft); }
.cal-out { background: var(--soft); }
.cal-out:hover { background: var(--soft); }
.cal-out .cal-day { color: var(--ink-faint); }
.cal-today { background: var(--accent-tint); }
.cal-cell-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-day { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cal-day-today { background: var(--accent); color: var(--paper); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.cal-add { opacity: 0; width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--ink-soft); text-decoration: none; transition: opacity 0.1s; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--ink); color: var(--paper); }
/* Sensorli ekranda (iPad) hover yo'q — "+" tugmasi doim ko'rinadigan bo'lsin,
   aks holda kunga bosib kontent qo'shib bo'lmaydi */
@media (hover: none) { .cal-add { opacity: 0.55; } }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; opacity: 0.7; }
.chip-reja { background: var(--amber-tint); color: var(--amber); }
.chip-tayyor { background: #E6EEF5; color: #2E5C8A; }
.chip-nashretildi { background: var(--green-tint); color: var(--green); }
.cal-holiday { font-size: 10px; font-weight: 600; color: var(--accent); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-legend { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cal-legend .cal-chip { display: inline-flex; margin-top: 0; }
.role-icon { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; }

/* ---- Ko'rinish almashtirgich (segmented) ---- */
.view-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; background: var(--soft); border: 1px solid var(--rule); border-radius: 99px; padding: 4px; gap: 2px; }
.seg-right { margin-left: auto; }
.seg a { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 16px; border-radius: 99px; line-height: 1; }
.seg a:hover { color: var(--ink); }
.seg a.active { background: var(--uc-bg); color: var(--ink); box-shadow: 0 2px 6px rgba(23,24,27,0.12); }

/* ===== Kunlik reja (planner) ===== */
.plan-nudge { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.plan-nudge-ic { font-size: 18px; }
.plan-nudge-morning { background: var(--amber-tint); color: var(--amber); }
.plan-nudge-evening { background: var(--accent-tint); color: var(--accent); }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 26px; }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }

.plan-card { border: 1px solid var(--glass-brd); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-1); padding: 18px 20px; }
.plan-card-today { border-top: 3px solid var(--accent); }
.plan-card-next { border-top: 3px solid var(--rule-strong); }
.plan-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); }
.plan-card-next .plan-badge { background: var(--soft); color: var(--ink-soft); }
.plan-date { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.plan-progress { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--soft); border-radius: 99px; padding: 2px 10px; }

.plan-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.plan-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--hairline); }
.plan-item:last-child { border-bottom: none; }
.plan-check-form, .plan-del-form { display: flex; margin: 0; }
.plan-check { background: none; border: none; padding: 0; cursor: pointer; line-height: 1; }
.plan-check-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--rule-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--paper); flex: none; margin-top: 1px; }
.plan-item.is-done .plan-check-box { background: var(--green); border-color: var(--green); }
.plan-text { flex: 1; font-size: 14px; line-height: 1.5; color: var(--ink); word-break: break-word; }
.plan-item.is-done .plan-text { text-decoration: line-through; color: var(--ink-faint); }
.plan-del { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 2px 5px; border-radius: 6px; opacity: 0; transition: opacity 0.12s; }
.plan-item:hover .plan-del { opacity: 1; }
@media (hover: none) { .plan-del { opacity: 0.5; } }
.plan-del:hover { background: var(--red-tint); color: var(--red); }
.plan-empty { color: var(--ink-faint); font-size: 13.5px; padding: 8px 4px; }

.plan-add { display: flex; gap: 8px; margin-top: 4px; }
.plan-add-input { flex: 1; min-width: 0; font-size: 14px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; }
.plan-add-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.plan-add-btn { flex: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.plan-add-btn:hover { background: var(--accent); border-color: var(--accent); }

.plan-hist-title { margin: 26px 0 10px; }
.plan-hist { display: flex; flex-direction: column; gap: 8px; }
.plan-hist-day { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); padding: 0 14px; }
.plan-hist-day summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 13px 0; list-style: none; }
.plan-hist-day summary::-webkit-details-marker { display: none; }
.plan-hist-date { font-weight: 600; font-size: 14px; }
.plan-hist-count { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }
.plan-list-hist { margin: 0 0 10px; }
.plan-list-hist .plan-item { padding: 6px 4px; }
.plan-check-static { margin-top: 1px; }

/* Kunlik reja — tahrir / ko'chirish / amallar */
.plan-body { flex: 1; min-width: 0; }
.plan-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.plan-act-form { display: flex; margin: 0; }
.plan-move { background: none; border: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; font-family: inherit; opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s; }
.plan-item:hover .plan-move { opacity: 1; }
@media (hover: none) { .plan-move { opacity: 0.6; } }
.plan-move:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.plan-edit-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; opacity: 0; transition: opacity 0.12s; }
.plan-item:hover .plan-edit-btn { opacity: 1; }
@media (hover: none) { .plan-edit-btn { opacity: 0.5; } }
.plan-edit-btn:hover { background: var(--soft); color: var(--ink); }
.plan-edit-form { display: none; gap: 6px; margin: 2px 0 0; }
.plan-item.editing .plan-edit-form { display: flex; }
.plan-item.editing .plan-text { display: none; }
.plan-edit-input { flex: 1; min-width: 0; font-size: 14px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--paper); color: var(--ink); font-family: inherit; }
.plan-edit-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.plan-edit-save, .plan-edit-cancel { flex: none; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); cursor: pointer; border-radius: 8px; padding: 4px 9px; font-size: 12px; font-family: inherit; }
.plan-edit-save { background: var(--green); border-color: var(--green); color: #fff; }
.plan-hist-tools { padding: 8px 0 4px; }
.plan-add-day { margin: 0 0 12px; }

/* ===== Kunlik reja — referens dizayn (1:1): sariq karta + ichki karta.
   Ichki karta rangi SAYT MAVZUSIGA bog'liq: yorug' mavzu — oq, qorong'i — qora. ===== */
.pl2 {
  --p2-bg: #fff; --p2-tx: #111; --p2-tx2: #9d9da6; --p2-brd: #e3e3e9;
  --p2-chk: #111; --p2-chk-tx: #fff; --p2-foot: rgba(255,255,255,0.95);
  border-radius: 28px; padding: 7px;
  background: var(--accent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 80%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
}
:root[data-theme='dark'] .pl2, :root[data-theme='tungi'] .pl2, :root[data-theme='okean'] .pl2,
:root[data-theme='koinot'] .pl2, :root[data-theme='interstellar'] .pl2 {
  --p2-bg: #1b1c21; --p2-tx: #fff; --p2-tx2: #74757f; --p2-brd: #3a3b44;
  --p2-chk: #fff; --p2-chk-tx: #111; --p2-foot: rgba(0,0,0,0.75);
}
.pl2-in { border-radius: 22px; padding: 18px 18px 16px; flex: 1; background: var(--p2-bg); box-shadow: 0 10px 26px rgba(0,0,0,0.10); }
.pl2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pl2-title { font-weight: 700; font-size: 15px; color: var(--p2-tx); letter-spacing: -0.01em; }
.pl2-chev { border: none; background: none; color: var(--p2-tx); cursor: pointer; padding: 4px; border-radius: 8px; display: flex; transition: transform .2s; }
.pl2.collapsed .pl2-chev { transform: rotate(180deg); }
.pl2.collapsed .pl2-list, .pl2.collapsed .pl2-add { display: none; }
/* ro'yxat bandlari — referens: 24px katakcha, 14px matn, keng oraliq */
.pl2 .plan-item { border-bottom: none; padding: 8px 0; gap: 12px; align-items: center; }
.pl2 .plan-check-box {
  width: 24px; height: 24px; border-radius: 8px; margin-top: 0;
  border: 1.5px solid var(--p2-brd); background: transparent; color: transparent;
  font-size: 13px; font-weight: 800;
}
.pl2 .plan-item.is-done .plan-check-box { background: var(--p2-chk); border-color: var(--p2-chk); color: var(--p2-chk-tx); }
.pl2 .plan-text { font-weight: 500; font-size: 14px; color: var(--p2-tx); opacity: 0.9; letter-spacing: -0.01em; }
.pl2 .plan-item.is-done .plan-text { color: var(--p2-tx2); opacity: 1; text-decoration: none; }
.pl2 .plan-empty { color: var(--p2-tx2); font-size: 13.5px; padding: 6px 0; }
.pl2 .plan-edit-btn, .pl2 .plan-del { color: var(--p2-tx2); }
.pl2 .plan-del:hover { background: rgba(232,85,77,0.14); color: #e8554d; }
.pl2 .plan-edit-btn:hover { background: rgba(125,125,140,0.14); color: var(--p2-tx); }
/* qo'shish maydoni */
.pl2 .plan-add { margin-top: 10px; }
.pl2 .plan-add-input { border-radius: 12px; border: 1.5px solid var(--p2-brd); background: transparent; color: var(--p2-tx); font-size: 13.5px; }
.pl2 .plan-add-input::placeholder { color: var(--p2-tx2); }
.pl2 .plan-add-btn { border-radius: 12px; background: var(--p2-chk); border-color: var(--p2-chk); color: var(--p2-chk-tx); font-weight: 700; }
.pl2 .plan-edit-input { background: transparent; border-color: #ffc805; color: var(--p2-tx); }
.pl2 .plan-edit-save { background: var(--p2-chk); border-color: var(--p2-chk); color: var(--p2-chk-tx); }
.pl2 .plan-edit-cancel { background: transparent; border-color: var(--p2-brd); color: var(--p2-tx2); }
/* rangli zona: pastki havola + strelkalar — mavzu rangida, oq/qora matn */
.pl2-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; }
.pl2-foot > a { font-weight: 700; font-size: 13px; color: var(--p2-foot); text-decoration: none; letter-spacing: -0.01em; }
.pl2-foot > a:hover { opacity: 0.8; }
.pl2-arrows { display: flex; gap: 8px; }
.pl2-arrows a { color: var(--p2-foot); font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.pl2-arrows a:hover { opacity: 0.8; background: rgba(0,0,0,0.08); }
/* boshqa kunga reja qo'shish */
.plan-other { border: 1px dashed var(--rule-strong); border-radius: 12px; background: var(--paper); padding: 0 14px; margin: 14px 0 4px; }
.plan-other summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); list-style: none; }
.plan-other summary::-webkit-details-marker { display: none; }
.plan-other[open] summary { color: var(--ink); }
.plan-add-other { margin: 0 0 14px; flex-wrap: wrap; }
.plan-date-input { flex: none; width: 160px; font-size: 14px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; }
.plan-date-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
@media (max-width: 560px) { .plan-add-other { flex-direction: column; align-items: stretch; } .plan-date-input { width: 100%; box-sizing: border-box; } }
.plan-hist-move-all { background: var(--accent-tint); color: var(--accent); border: 1px solid transparent; border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.plan-hist-move-all:hover { background: var(--accent); color: #fff; }

/* ===== Vazifalar: jamoa avatarlari qatori (ochiq vazifa soni bilan) ===== */
.tavs-row { display: flex; justify-content: center; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 2px 0 20px; }
.tav-wrap { display: inline-block; text-decoration: none; transition: transform .14s; }
.tav-wrap:hover { transform: translateY(-3px); }
.tav {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface);
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
.tav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tav-ini { font-weight: 800; font-size: 16px; color: var(--ink-soft); }
.tav-b {
  position: absolute; bottom: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 99px; color: #fff; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--paper); box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.tav-wrap.sel .tav { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint), 0 6px 16px rgba(0,0,0,0.18); }
@media (max-width: 560px) { .tavs-row { gap: 10px; } .tav { width: 46px; height: 46px; } }

/* ===== YO'L XARITA (roadmap) ===== */
.rm-new { border: 1px dashed var(--rule-strong); border-radius: 14px; background: var(--paper); padding: 0 16px 4px; margin-bottom: 18px; max-width: 660px; }
.rm-new summary { cursor: pointer; padding: 13px 0; font-weight: 700; font-size: 14px; color: var(--ink-soft); list-style: none; }
.rm-new summary::-webkit-details-marker { display: none; }
.rm-new[open] summary { color: var(--ink); }
/* ro'yxat kartalari */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rm-card { display: block; border: 1.5px solid var(--rule); border-radius: 16px; background: var(--surface); padding: 16px 18px; text-decoration: none; color: var(--ink); box-shadow: var(--elev-1); transition: border-color .12s, transform .12s; }
.rm-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rm-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.rm-card-ic { font-size: 20px; }
.rm-card-t { font-weight: 800; font-size: 15.5px; }
.rm-card-d { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.rm-card-bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin: 8px 0 8px; }
.rm-card-bar > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2542d, #ffb020); transition: width .3s; }
.rm-bar-lg { height: 12px; }
.rm-card-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); }
.rm-card-pct { font-weight: 800; color: var(--accent); }
.rm-card-pct.done { color: var(--green); }
.rm-progress { max-width: 720px; margin: 0 auto 6px; }
.rm-progress-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }

/* ---- yo'lning o'zi ---- */
.rm-road { position: relative; max-width: 720px; margin: 26px auto 0; padding: 10px 0 10px; }
.rm-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 44px; transform: translateX(-50%);
  background: linear-gradient(180deg, #33343c, #2a2b33); border-radius: 24px;
  box-shadow: inset 0 0 0 3px #22232a, 0 10px 30px rgba(0,0,0,0.18);
}
.rm-line::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #f6f2e6 0 18px, transparent 18px 34px); border-radius: 2px; opacity: .9;
}
.rm-start {
  position: relative; z-index: 2; width: fit-content; margin: 0 auto 26px;
  background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 8px 18px; box-shadow: var(--elev-2);
}
.rm-step { position: relative; display: flex; align-items: center; margin: 0 0 30px; min-height: 64px; }
.rm-node {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #fff; background: #7c7d88; border: 4px solid var(--paper);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.rm-done .rm-node { background: linear-gradient(145deg, #35c24a, #1f9e38); }
.rm-next .rm-node { background: linear-gradient(145deg, #f2542d, #d63615); animation: rmPulse 1.8s ease-in-out infinite; font-size: 20px; }
@keyframes rmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,84,45,0.5); } 50% { box-shadow: 0 0 0 12px rgba(242,84,45,0); } }
.rm-future .rm-node { background: #b9bac3; color: #fff; }
.rm-box {
  width: calc(50% - 48px); background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: 16px; padding: 13px 16px; box-shadow: var(--elev-1); position: relative;
}
.rm-step.left .rm-box { margin-right: auto; }
.rm-step.right .rm-box { margin-left: auto; }
.rm-step.left .rm-box::after, .rm-step.right .rm-box::after {
  content: ""; position: absolute; top: 24px; width: 0; height: 0; border: 8px solid transparent;
}
.rm-step.left .rm-box::after { right: -16px; border-left-color: var(--rule); }
.rm-step.right .rm-box::after { left: -16px; border-right-color: var(--rule); }
.rm-done .rm-box { border-color: color-mix(in srgb, var(--green) 45%, var(--rule)); }
.rm-next .rm-box { border-color: #f2542d; box-shadow: 0 6px 22px rgba(242,84,45,0.16); }
.rm-future .rm-box { opacity: .72; }
.rm-box-t { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.rm-num { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); background: var(--soft); border-radius: 99px; padding: 2px 8px; margin-right: 6px; vertical-align: 2px; }
.rm-box-d { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; }
.rm-box-done { font-size: 12px; color: var(--green); font-weight: 700; margin-top: 7px; }
.rm-box-acts { display: flex; gap: 6px; margin-top: 9px; }
.rm-done-btn { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.rm-finish { position: relative; z-index: 2; text-align: center; padding-top: 8px; }
.rm-finish-ic { font-size: 40px; filter: grayscale(0.4); }
.rm-finish.reached .rm-finish-ic { filter: none; animation: rmFlag 1s ease-in-out infinite alternate; }
@keyframes rmFlag { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.rm-finish-t { font-weight: 800; letter-spacing: .14em; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.rm-finish.reached .rm-finish-t { color: var(--green); }
.rm-finish-d { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 640px) {
  .rm-line { left: 22px; transform: none; }
  .rm-node { left: 22px; }
  .rm-start { margin-left: 0; }
  .rm-box { width: calc(100% - 64px); margin-left: 64px !important; margin-right: 0 !important; }
  .rm-step.left .rm-box::after { display: none; }
  .rm-step.right .rm-box::after { left: -16px; }
  .rm-finish { text-align: left; padding-left: 2px; }
}

/* ===== DAVOMIYLIK — topbar tugmasi va ochiladigan panel ===== */
.stk-tbtn { width: auto; min-width: 38px; padding: 0 10px; gap: 4px; display: inline-flex; align-items: center; border-radius: 99px; }
.stk-tfire { font-size: 16px; filter: drop-shadow(0 0 6px rgba(241,63,63,0.5)); }
.stk-tcnt { font-size: 13px; font-weight: 800; color: var(--ink); }
.stk-panel { width: min(380px, 94vw); background: #fff; border: 1px solid #ececf0; border-radius: 22px; box-shadow: 0 22px 54px rgba(0,0,0,0.16); overflow: hidden; }

/* Panel ichi — referens: oq fon, haftalik olovlar, katta olov ichida raqam, oy kalendari */
.stq { padding: 18px 18px 16px; font-family: inherit; color: #111; }
.stq-h { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.stq-week { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.stq-wd { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.stq-wlab { font-size: 10.5px; font-weight: 600; color: #9a9aa2; }
.stq-fire { font-size: 21px; line-height: 28px; }
.stq-x { width: 26px; height: 26px; border-radius: 50%; background: #d63d35; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stq-fut { width: 26px; height: 26px; border-radius: 50%; border: 1.6px dashed #c9c9d1; color: #b0b0ba; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.stq-hero { position: relative; text-align: center; margin: 10px 0 2px; }
.stq-bigfire { font-size: 96px; line-height: 1; display: inline-block; filter: drop-shadow(0 8px 22px rgba(255,120,30,0.35)); }
.stq-num {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 46px; font-weight: 900; color: #111; letter-spacing: -1px;
  text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 2.5px 2.5px 0 #fff, -2.5px -2.5px 0 #fff, 2.5px -2.5px 0 #fff, -2.5px 2.5px 0 #fff;
}
.stq-cap { text-align: center; font-size: 13px; color: #7c7c86; margin-top: 4px; }
.stq-best { text-align: center; font-size: 12px; color: #9a9aa2; margin: 6px 0 12px; }
.stq-best b { color: #d99a00; }
/* kalendar */
.stq-cal { background: #f1f1f4; border-radius: 18px; padding: 12px 12px 10px; }
.stq-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.stq-mo { font-size: 13.5px; font-weight: 700; color: #111; }
.stq-nav { border: none; background: none; font-size: 16px; cursor: pointer; color: #111; padding: 2px 8px; border-radius: 8px; }
.stq-nav:hover { background: #e4e4e9; }
.stq-nav:disabled { opacity: 0.25; cursor: default; }
.stq-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; }
.stq-gh { font-size: 10.5px; font-weight: 600; color: #9a9aa2; padding-bottom: 4px; }
.stq-day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: #222; padding: 3px 0 4px; }
.stq-day.stq-off { color: #b6b6c0; }
.stq-day i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.stq-dot-g { background: #35c24a; }
.stq-dot-r { background: #e8554d; }
.stq-dot-0 { background: transparent; }
.stq-today { background: #111; border-radius: 12px; color: #fff; margin: 0 4px; }
.stq-today b { color: #fff; font-weight: 800; }
.stq-today .stq-dot-g { background: #35e05c; }

/* ===== DAVOMIYLIK (streak) vidjeti — bosh sahifa ===== */
.stk-card {
  max-width: 420px; margin: 4px 0 22px; padding: 20px 22px 18px;
  background: linear-gradient(160deg, #17171c, #0e0e12 70%);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 60px rgba(241,63,63,0.07), inset 0 1px 0 rgba(255,255,255,0.05);
  color: #e8e8ee; font-family: inherit; position: relative; overflow: hidden;
}
.stk-card::before {
  content: ""; position: absolute; left: -30px; top: -30px; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(241,63,63,0.22), transparent 70%); pointer-events: none;
}
.stk-top { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.stk-flame {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  background: radial-gradient(circle at 50% 65%, rgba(241,63,63,0.35), rgba(241,63,63,0.08) 70%);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  filter: drop-shadow(0 0 14px rgba(241,63,63,0.55));
  animation: stkFlame 2.6s ease-in-out infinite;
}
@keyframes stkFlame { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.stk-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stk-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #9a9aa6; }
.stk-days { font-size: 26px; font-weight: 500; color: #fff; letter-spacing: 0.02em; }
.stk-days b { font-size: 34px; font-weight: 800; letter-spacing: 0; margin-right: 2px; }
.stk-foot-ic { margin-left: auto; font-size: 22px; opacity: 0.55; }
.stk-week { display: flex; justify-content: space-between; gap: 4px; padding: 16px 0 4px; }
.stk-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.stk-dot {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #08130a; background: #26262e; transition: transform 0.15s;
}
.stk-done .stk-dot { background: linear-gradient(145deg, #35e05c, #1db954); box-shadow: 0 0 12px rgba(46,213,92,0.45); }
.stk-today .stk-dot {
  background: transparent; border: 3px solid #2ed55c; box-shadow: 0 0 14px rgba(46,213,92,0.5);
  animation: stkPulse 1.8s ease-in-out infinite;
}
@keyframes stkPulse { 0%,100% { box-shadow: 0 0 6px rgba(46,213,92,0.35); } 50% { box-shadow: 0 0 18px rgba(46,213,92,0.75); } }
.stk-miss .stk-dot { background: #1c1c22; }
.stk-future .stk-dot { background: #1c1c22; opacity: 0.55; }
.stk-wd { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: #8b8b98; }
.stk-done .stk-wd, .stk-today .stk-wd { color: #cfd3d8; }
.stk-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.stk-best { font-size: 12.5px; color: #b9bcc6; }
.stk-best b { color: #ffd257; }
.stk-hint { font-size: 12px; color: #7e7e8a; }
@media (max-width: 560px) { .stk-card { max-width: none; } .stk-dot { width: 30px; height: 30px; font-size: 13px; } }

/* Ijtimoiy tarmoqlar: direktor sahifalari bo'limi */
.sc-dir-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; padding-top: 18px; border-top: 1px dashed var(--rule-strong); }
.sc-dir-head h2 { margin: 0; font-size: 19px; }
.sc-dir-total { font-size: 13.5px; color: var(--ink-soft); }
.sc-dir-note { font-size: 12px; color: var(--ink-faint); background: var(--soft); border-radius: 99px; padding: 3px 10px; }
.sc-dir-goal { margin-bottom: 16px; }

/* Bilim testi ichidagi "Jonli o'yinlar" kartasi */
.quiz-live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1.5px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: var(--elev-1); padding: 18px 20px; margin-top: 28px; }
.quiz-live-tx { flex: 1; min-width: 240px; }
.quiz-live-tx h2 { margin: 0 0 4px; font-size: 18px; }
.quiz-live-tx .sub { margin: 0; }
.quiz-live > a { flex: none; }

/* ===== Sahifalar (brend loyiha sahifalari) ===== */
.seg-n { font-size: 11px; opacity: 0.6; font-weight: 700; }
/* ikki bo'lim: Agentlik / Axborot xizmati loyihalari */
.pg-orgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.pg-org { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--rule); border-radius: 16px; background: var(--surface); padding: 13px 16px; text-decoration: none; color: var(--ink-soft); transition: border-color .12s, box-shadow .12s; }
.pg-org:hover { border-color: var(--rule-strong); }
.pg-org.active { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint); }
.pg-org-ic { font-size: 22px; flex: none; }
.pg-org-t { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; line-height: 1.25; min-width: 0; }
.pg-org-t small { font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.pg-org-n { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; background: var(--soft); border-radius: 99px; padding: 3px 11px; }
.pg-org.active .pg-org-n { background: var(--accent); color: #fff; }
@media (max-width: 640px) { .pg-orgs { grid-template-columns: 1fr; gap: 8px; } }
/* REYTING sahifasi (o'rinlar ro'yxati) */
.pg-rate-btn { margin-left: auto; flex: none; }
.pg-rt { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.pg-rt-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 11px 16px; box-shadow: var(--elev-1); }
.pg-rt-row.top1 { border-color: #e6b800; background: color-mix(in srgb, #ffd400 9%, var(--surface)); }
.pg-rt-row.top2 { border-color: #b9bcc4; }
.pg-rt-row.top3 { border-color: #d29a6b; }
.pg-rt-rank { flex: none; width: 40px; text-align: center; font-size: 20px; font-weight: 800; color: var(--ink-soft); }
.pg-rt-logo { width: 40px; height: 40px; font-size: 13px; }
.pg-rt-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-rt-nm { font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rt-user { font-size: 12px; color: var(--ink-faint); }
.pg-rt-resp { flex: none; font-size: 12px; color: var(--ink-soft); background: var(--soft); border-radius: 99px; padding: 3px 10px; }
.pg-rt-fol { flex: none; font-size: 15px; color: var(--ink); }
@media (max-width: 560px) { .pg-rt-resp { display: none; } .pg-rt-rank { width: 30px; font-size: 17px; } }
/* forma: tarmoq qatorlari (ikonka | havola | obunachi) */
.pg-form-nets { display: flex; flex-direction: column; gap: 8px; }
.pg-form-net { display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px; gap: 8px; align-items: center; }
.pg-form-net input { width: 100%; min-width: 0; box-sizing: border-box; margin: 0; }
.pg-fn-ic { text-align: center; font-size: 16px; }
/* forma: bo'lim tanlash */
.pg-org-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pg-org-opt { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--rule); border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.pg-org-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.pg-org-opt input { accent-color: var(--accent); }
.pg-radar { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); padding: 14px 16px; margin-bottom: 18px; }
.pg-radar-head { font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.pg-radar-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-radar-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--rule); background: var(--surface); }
.pg-radar-item:hover { border-color: var(--rule-strong); }
.pg-radar-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pg-red .pg-radar-dot, .pg-status.pg-red .pg-dot { background: var(--st-red, #d9534f); }
.pg-amber .pg-radar-dot, .pg-status.pg-amber .pg-dot { background: var(--st-amber, #d0972a); }
.pg-radar-days { color: var(--ink-soft); font-weight: 500; }
.pg-radar-who { color: var(--ink-faint); font-weight: 500; }

.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 26px; }
.pg-card { position: relative; border: 1px solid var(--glass-brd); border-left: 4px solid var(--rule-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--elev-1); padding: 16px 18px; display: flex; flex-direction: column; }
.pg-card.pg-b-green { border-left-color: var(--st-green, #3f6b3f); }
.pg-card.pg-b-amber { border-left-color: var(--st-amber, #d0972a); }
.pg-card.pg-b-red { border-left-color: var(--st-red, #d9534f); }
.pg-card.pg-b-muted { border-left-color: var(--rule-strong); opacity: 0.72; }
.pg-card-top { display: flex; align-items: center; gap: 12px; }
.pg-logo { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.pg-logo img { width: 100%; height: 100%; object-fit: cover; }
.pg-id { flex: 1; min-width: 0; }
.pg-name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.pg-user { font-size: 12.5px; color: var(--ink-soft); }
.pg-status { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--soft); color: var(--ink-soft); }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.pg-status.pg-green .pg-dot { background: var(--st-green, #3f6b3f); }
.pg-status.pg-green { color: var(--st-green, #3f6b3f); background: color-mix(in srgb, var(--st-green, #3f6b3f) 14%, transparent); }
.pg-status.pg-amber { color: var(--st-amber, #d0972a); background: color-mix(in srgb, var(--st-amber, #d0972a) 15%, transparent); }
.pg-status.pg-red { color: var(--st-red, #d9534f); background: color-mix(in srgb, var(--st-red, #d9534f) 14%, transparent); }
.pg-theme { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }
.pg-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.pg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pg-lnk { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; text-decoration: none; border: 1px solid var(--rule); color: var(--ink-soft); }
.pg-lnk:hover { border-color: var(--rule-strong); color: var(--ink); }
.lnk-ig:hover { color: #C13584; border-color: #C13584; }
.lnk-tg:hover { color: #2AABEE; border-color: #2AABEE; }
.lnk-yt:hover { color: #FF0000; border-color: #FF0000; }
.lnk-fb:hover { color: #1877F2; border-color: #1877F2; }
.pg-plan { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; padding: 9px 12px; background: var(--soft); border-radius: 10px; }
.pg-plan-l { font-weight: 700; color: var(--ink); }
.pg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.pg-actions { display: flex; align-items: center; gap: 6px; }
.pg-touch { color: var(--st-green, #3f6b3f); border-color: color-mix(in srgb, var(--st-green, #3f6b3f) 40%, var(--rule)); }
.pg-touch:hover { background: color-mix(in srgb, var(--st-green, #3f6b3f) 12%, transparent); }
.pg-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-form-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-logo-cur { margin-bottom: 8px; }
.pg-logo-cur img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.field-hint { font-weight: 400; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 560px) { .pg-form-2col, .pg-form-links { grid-template-columns: 1fr; } }

/* ===== O'yinlar (jonli, kod bilan) ===== */
.g-home { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; }
@media (max-width: 640px) { .g-home { grid-template-columns: 1fr; } }
.g-home-card { border: 1px solid var(--glass-brd); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-1); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.g-home-card h2 { margin: 0 0 4px; }
.g-home-ic { font-size: 30px; }
.g-home-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-home-hint, .g-home-note .g-faint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin: 4px 0 0; }
.g-code-input { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 0.28em; text-align: center; }

/* o'yin sahnasi (host + o'yinchi) */
.g-wrap { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }
.g-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.g-code { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700; }
.g-code b { letter-spacing: 0.14em; }
.g-sub { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.g-stage { border: 1px solid var(--glass-brd); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--elev-2); padding: 26px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.g-big { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 700; }
.g-qnum { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.g-q { font-family: "Inter", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.35; }
.g-faint { color: var(--ink-faint); font-size: 14px; }
.g-join-info { font-size: 14px; color: var(--ink-soft); }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.g-chip { background: var(--soft); border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 600; }

/* variantlar — Kahoot uslubi 4 rang */
.g-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
@media (max-width: 520px) { .g-opts { grid-template-columns: 1fr; } }
.g-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 18px; border-radius: 14px; border: none; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: default; position: relative; min-height: 62px; }
button.g-opt { cursor: pointer; transition: transform 0.08s, filter 0.12s; }
button.g-opt:hover { filter: brightness(1.06); }
button.g-opt:active { transform: scale(0.98); }
.g-c0 { background: #E2453C; } .g-c1 { background: #2E7BC2; } .g-c2 { background: #D9972A; } .g-c3 { background: #3F8A4F; }
.g-c4 { background: #7A54B3; } .g-c5 { background: #2AABAE; }
.g-opt-l { flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.28); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.g-opt-t { flex: 1; }
.g-opt-n { flex: none; background: rgba(0,0,0,0.24); border-radius: 99px; padding: 2px 11px; font-size: 14px; font-weight: 700; }
.g-opt.is-dim { opacity: 0.4; }
.g-opt.is-correct { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #3F8A4F; }
.g-opt.is-picked::after { content: "siz"; position: absolute; top: 6px; right: 10px; font-size: 10px; font-weight: 700; opacity: 0.85; text-transform: uppercase; }
/* so'rovnoma — ovoz ulushini ko'rsatuvchi shaffof chiziq */
.g-opt-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.24); border-radius: 14px 0 0 14px; z-index: 0; transition: width 0.4s ease; }
.g-opt.is-poll { cursor: default; }
.g-opt.is-poll .g-opt-l, .g-opt.is-poll .g-opt-t, .g-opt.is-poll .g-opt-n { position: relative; z-index: 1; }

/* o'yin turini tanlash kartalari (bosh sahifa) */
.g-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 8px; }
@media (max-width: 520px) { .g-types { grid-template-columns: 1fr; } }
.g-type-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; background: var(--paper); transition: border-color 0.15s, box-shadow 0.15s; }
.g-type-card:hover { border-color: var(--rule-strong); }
.g-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.g-type-card.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-tint); }
.g-type-ic { grid-row: 1 / 3; font-size: 24px; line-height: 1; }
.g-type-nm { font-weight: 700; font-size: 14px; }
.g-type-desc { grid-column: 2; font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.g-fields { display: flex; flex-direction: column; gap: 10px; }

/* ================= MONOPOLIYA doskasi ================= */
/* O'yin art'i YORUG' uchun mo'ljallangan — sayt qorong'i mavzuda bo'lsa ham
   o'yin doim yorug' ko'rinishda qoladi (aks holda fullscreen'da qorayib, panel
   matni/pullar ko'rinmay qolardi). Rang o'zgaruvchilarni klassik yorug'ga qaytaramiz. */
.g-wrap.g-mono {
  --paper: #FAFAF7; --soft: #F0EEE5; --ink: #17181B; --ink-soft: #75746D; --ink-faint: #A8A69C;
  --rule: #DEDCD1; --rule-strong: #C8C6B9; --accent: #C43E24; --accent-tint: #F7E9E5;
  --surface: #FFFFFF; --glass: rgba(255,255,255,0.72); --glass-strong: rgba(255,255,255,0.9);
  --glass-brd: rgba(0,0,0,0.08); --hairline: rgba(0,0,0,0.06);
  --elev-1: 0 2px 10px rgba(0,0,0,0.08); --elev-2: 0 18px 44px rgba(0,0,0,0.12); --elev-3: 0 28px 70px rgba(0,0,0,0.16);
  color: var(--ink); color-scheme: light;
}
.g-mono { max-width: 1100px; }
.m-wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 8px; box-sizing: border-box; }
/* --- Doska: foydalanuvchi chizган rasm (public/monopoly-board.png) + jonli
   overlay. Tokenlar/egalik belgилари % koordinatalarга qo'yiladi; o'lcham
   container-query bilan proporsional (mavzudan mustaqil). --- */
.m-board2 { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.m-b3 { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.4,.1,.2,1), transform-origin .9s cubic-bezier(.4,.1,.2,1); }
.m-boardimg { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.m-ovl { position: absolute; inset: 0; pointer-events: none; }
/* ===== 3D ko'rinish: doska qiya, kamera joriy katakka ergashadi ===== */
.m-board2.v3d { perspective: 1050px; perspective-origin: 50% 34%; background: radial-gradient(circle at 50% 20%, #3e4347, #191b1d 75%); aspect-ratio: 1 / 0.78; }
.m-board2.v3d .m-b3 { aspect-ratio: 1 / 1; height: auto; bottom: auto; }
.m-board2.v3d .m-b3 { transform-style: preserve-3d; }
.m-board2.v3d .m-ovl { transform-style: preserve-3d; }
/* MUHIM: token o'rami ham preserve-3d bo'lishi shart — aks holda ichidagi
   rotateX(-50) tekislanib, figura doskага "chalpak" bo'lib yotib qoladi
   (ayniqsa iOS/Telegram WebKit'ида). */
.m-board2.v3d .m-tok { transform-style: preserve-3d; }
/* tokenlar tik "standee" bo'lib turadi; doska rotateZ(--bz) bilan burilganда
   token teskarisiga burilib, kameraга doim to'g'ri qaraydi */
.m-board2.v3d .m-tok > span { transform: rotateZ(calc(-1 * var(--bz, 0deg))) rotateX(-50deg); transform-origin: 50% 92%; }
.m-board2.v3d .m-hh { transform: translate(-50%, -130%) rotateZ(calc(-1 * var(--bz, 0deg))) rotateX(-50deg); transform-origin: 50% 100%; }
/* sakrab yurish */
.m-tok.moving > span { animation: m-hop2d .22s linear infinite; }
@keyframes m-hop2d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.m-board2.v3d .m-tok.moving > span { animation: m-hop3d .22s linear infinite; }
@keyframes m-hop3d {
  0%, 100% { transform: rotateZ(calc(-1 * var(--bz, 0deg))) rotateX(-50deg) translateY(0); }
  50% { transform: rotateZ(calc(-1 * var(--bz, 0deg))) rotateX(-50deg) translateY(-12px); }
}
/* O'yinchi tokeni — oq disk ichида (doska ustида yaxshi ko'rinadi) */
/* O'yinchi tokeni — kumush HAYKALCHA rangли postament ustида (hammasi bir material).
   DIQQAT: filter faqat span'да — uning ichida 3D bola yo'q, shuning uchun xavfsiz. */
.m-tok { position: absolute; transform: translate(-50%, -50%); z-index: 4; }
.m-tok > span { position: relative; display: flex; align-items: flex-end; justify-content: center;
  font-size: clamp(17px, 4.8cqw, 30px); line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
/* 3D-render sprite (rastr figura) — o'z postament/soyasi bilan */
.m-tspr { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.25em; object-fit: contain; }
.m-tok > span .m-tspr { width: 2.3em; height: 2.3em; vertical-align: baseline; }
/* qamoqдаги token — ustида qafas panjаралари */
.m-tok.jailed > span::before { content: ""; position: absolute; inset: -3px -2px 0; z-index: 2; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 3.5px, rgba(35,38,44,.85) 3.5px 5.5px);
  border-top: 2.5px solid rgba(35,38,44,.9); }
/* sprite o'z postamentiга ega — bu faqat O'YINCHI RANGI halqasi (kim kimligini ajratish) */
.m-tok > span::after { content: ""; position: absolute; left: 50%; bottom: .28em; transform: translateX(-50%); z-index: -1;
  width: 1.75em; height: .5em; border-radius: 50%;
  border: 3px solid var(--pc, #888); background: none; opacity: .95;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.m-tok.cur { z-index: 6; }
.m-tok.cur > span::after { box-shadow: 0 0 0 2.5px #fff, 0 0 12px 3px var(--pc, #fff); animation: m-tokpulse 1.1s ease-in-out infinite; }
@keyframes m-tokpulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* Joriy o'yinchи katagi — PUSHTI qalin ramka + yumshoq nur (yangi dizayn), katak o'lchamида */
.m-active { position: absolute; transform: translate(-50%, -50%); border-radius: 7px; z-index: 1; pointer-events: none; box-sizing: border-box;
  border: 4px solid #f8408f;
  box-shadow: 0 0 12px 3px rgba(248,64,143,.6), inset 0 0 10px 1px rgba(248,64,143,.3), 0 6px 14px rgba(248,64,143,.35);
  animation: m-actpulse 1.3s ease-in-out infinite; }
@keyframes m-actpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Egalik rang nuqtasi (kim egasi) */
.m-odot { position: absolute; transform: translate(150%, -150%); width: clamp(6px, 1.9cqw, 12px); height: clamp(6px, 1.9cqw, 12px); border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 2; pointer-events: none; }
/* Uylar / mehmonxona — 3D-render sprite figuralar (o'z soyasi bilan) */
.m-hh { position: absolute; transform: translate(-50%, -140%); display: flex; gap: 1px; z-index: 3; pointer-events: none; }
.m-hh .hs { width: clamp(11px, 3.4cqw, 21px); height: auto; }
.m-hh .hot { width: clamp(16px, 4.6cqw, 28px); height: auto; }
.m-mm { position: absolute; transform: translate(-50%, -50%); font-size: clamp(9px, 2.4cqw, 15px); z-index: 3; pointer-events: none; }
/* Pasport tugmasi (doska burchagida) */
.m-zoombtn { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(17,17,17,.82); color: #fff; font-size: 18px; cursor: pointer; z-index: 5; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.m-zoombtn[hidden] { display: none; }
.m-viewbtn { right: auto; left: 8px; }
/* ===== 3D zar (kub) ===== */
.m-d3wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 34px; z-index: 7; pointer-events: none; }
.m-d3wrap[hidden] { display: none; }
/* perspective FAQAT to'g'ridan-to'g'ri bolalarга ta'sir qiladi — shuning uchun har kub o'z konteynerида */
.m-dcol { position: relative; perspective: 660px; display: flex; align-items: center; justify-content: center; }
/* DIQQAT: .m-cube ustiga filter/opacity/overflow qo'yish MUMKIN EMAS —
   brauzer preserve-3d ni o'chirib, kub tekislanib qoladi. */
.m-cube { width: 58px; height: 58px; position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.28,1.25,.42,1); }
.m-cf { position: absolute; inset: 0; background: linear-gradient(160deg, #ffffff, #ececec); border: 2px solid #c9c9c9; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 7px; box-sizing: border-box; box-shadow: inset 0 0 9px rgba(0,0,0,.14); backface-visibility: hidden; }
/* yer soyasi — 3D zanjirdan tashqarida alohida element */
.m-dsh { position: absolute; width: 64px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 70%); transform: translateY(52px); }
.m-cf i { border-radius: 50%; }
.m-cf i.on { background: #c40000; }
.m-cf.f1 { transform: translateZ(29px); }
.m-cf.f6 { transform: rotateY(180deg) translateZ(29px); }
.m-cf.f3 { transform: rotateY(90deg) translateZ(29px); }
.m-cf.f4 { transform: rotateY(-90deg) translateZ(29px); }
.m-cf.f2 { transform: rotateX(90deg) translateZ(29px); }
.m-cf.f5 { transform: rotateX(-90deg) translateZ(29px); }
/* ===== pul o'yinchidan o'yinchiga "pir-pirlab" uchadi ===== */
.m-tbill { position: fixed; left: 0; top: 0; width: 54px; height: auto; z-index: 85; pointer-events: none; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.m-props-lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: -4px; }
/* ===== Katta profil kartalari (token + ism + pul) ===== */
.m-pcards { display: flex; flex-wrap: wrap; gap: 10px; }
.m-pcard { flex: 1 1 96px; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--surface); border: 2px solid var(--rule); border-top: 5px solid var(--pc, var(--rule)); border-radius: 14px; padding: 10px 8px 9px; }
.m-pcard.cur { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc), 0 8px 20px rgba(0,0,0,.14); }
.m-pcard.bank { opacity: .4; }
.m-pc-tok { font-size: 30px; line-height: 1.1; }
.m-pc-tok .m-tspr { width: 46px; height: 46px; }
.m-pick-b .m-tspr { width: 32px; height: 32px; }
.m-status-who .m-tspr, .m-paybn .m-tspr, .m-jail-txt .m-tspr { width: 1.25em; height: 1.25em; }
.m-chat-msg .m-tspr { width: 1.1em; height: 1.1em; }
/* 3D rejimда doska atrofidagi dekor (yotgan pullar) */
.m-decor { display: none; }
.m-board2.v3d .m-decor { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.m-decor img { position: absolute; width: 14%; height: auto; transform: rotate(var(--r, 0deg)); border-radius: 2px; box-shadow: 0 4px 7px rgba(0,0,0,.4); }
.m-pc-nm { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.m-pcard.cur .m-pc-nm { color: var(--pc); }
.m-pc-money { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 15px; }
.m-pc-money img { height: 14px; width: auto; border-radius: 2px; }
/* ===== To'lov banneri — katta yozuv ===== */
.m-paybn { position: fixed; top: 15%; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 92vw; background: rgba(18,18,23,.93); color: #fff; border-radius: 18px; padding: 15px 28px; box-shadow: 0 18px 55px rgba(0,0,0,.5); pointer-events: none; animation: m-paybn-in .45s cubic-bezier(.3,1.4,.5,1); transition: opacity .5s; }
.m-paybn b { font-size: 17px; white-space: nowrap; }
.m-paybn i { font-style: normal; opacity: .65; font-size: 18px; }
.m-paybn-sum { flex-basis: 100%; text-align: center; font-size: 26px; font-weight: 900; color: #ffd75e; font-family: "Oswald", sans-serif; }
.m-paybn.out { opacity: 0; }
@keyframes m-paybn-in { 0% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.85); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
/* ===== Amallar tarixi (chiroyli quti) ===== */
.m-logbox { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.m-logbox-h { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink-soft); padding: 9px 14px 7px; border-bottom: 1px solid var(--rule); background: var(--soft); }
.m-logbox .m-log { border: none; border-radius: 0; background: none; max-height: 150px; }
.m-logbox .m-log > div { padding: 2px 0; border-bottom: 1px dashed var(--rule); }
.m-logbox .m-log > div:last-child { border-bottom: none; font-weight: 700; color: var(--ink); }
/* ===== O'yin chati ===== */
.m-chat { margin-top: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.m-chat-h { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink-soft); padding: 9px 14px 7px; border-bottom: 1px solid var(--rule); background: var(--soft); }
.m-chat-list { max-height: 190px; min-height: 70px; overflow-y: auto; padding: 9px 13px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.45; }
.m-chat-msg b { color: var(--red); margin-right: 2px; }
.m-chat-msg .m-tsvg { width: 1em; height: 1em; }
.m-chat-empty { color: var(--ink-soft); font-size: 12.5px; }
.m-chat-f { display: flex; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--rule); }
.m-chat-f input { flex: 1; min-width: 0; border: 1.5px solid var(--rule-strong); border-radius: 99px; padding: 8px 14px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
.m-chat-f .g-btn { padding: 8px 14px; border-radius: 99px; }
/* o'yinchi kartasini bosib chatda @Ism bilan belgilash */
.m-pcard-tag { cursor: pointer; }
.m-pcard-tag:active { transform: scale(.96); }
/* xabar ichidagi @Ism belgisi */
.m-mention { color: #fff; background: var(--red, #e8352e); border-radius: 6px; padding: 0 5px; font-weight: 800; }
.m-mention.me { background: #ffd400; color: #3d3000; }
/* meni belgilagan xabar — ro'yxatda ko'zga tashlansin */
.m-chat-msg.mention-me { background: rgba(255,212,0,.16); border: 1.5px solid #e6b800; border-radius: 10px; padding: 4px 8px; margin: 1px 0; }
/* navbat vaqti sanog'i (status bannerida) — sanoq o'ng chetga tursin */
.m-status-who { display: flex; align-items: center; gap: 8px; }
.m-turnclock {
  margin-left: auto; font-size: 14px; font-weight: 800; background: rgba(255,255,255,.75);
  border: 1.5px solid rgba(0,0,0,.18); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.m-turnclock.hot { background: #ffe0e0; border-color: #e8352e; color: #b3160f; animation: m-clock-pulse .9s ease-in-out infinite; }
@keyframes m-clock-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* doska ustidagi "bosh sahifa" tugmasi */
.m-homebtn { left: 8px; top: 8px; right: auto; bottom: auto; text-decoration: none; display: grid; place-items: center; }
/* tez-belgilash tugmalari (chat ustida) */
.m-chat-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 11px 0; }
.m-tag-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.m-tag { font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; border: 1.5px solid var(--rule-strong); background: var(--soft); color: var(--ink); border-radius: 999px; padding: 5px 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tag:hover { background: #ffe9a8; border-color: #e6b800; }
.m-tag:active { transform: scale(.96); }
/* ===== Yangi xabar qalqib chiqadi — pastdagi chatga tushmasdan ko'rinsin ===== */
.m-toasts { position: fixed; top: 12%; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 340px; max-width: 90vw; pointer-events: none; }
.m-toast { width: 100%; box-sizing: border-box; background: rgba(18,18,23,.95); color: #fff; border: 2px solid rgba(255,255,255,.18); border-radius: 16px; padding: 10px 14px; box-shadow: 0 18px 55px rgba(0,0,0,.5); animation: m-paybn-in .4s cubic-bezier(.3,1.4,.5,1); transition: opacity .5s; }
.m-toast.mention { border-color: #ffd400; background: rgba(30,24,0,.96); }
.m-toast-h { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: #ffd9a1; }
.m-toast.mention .m-toast-h { color: #ffd400; }
.m-toast-h .m-tspr { width: 1.25em; height: 1.25em; }
.m-toast-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #ffd400; color: #3d3000; border-radius: 999px; padding: 2px 7px; }
.m-toast-x { margin-top: 3px; font-size: 14px; line-height: 1.35; word-break: break-word; }
.m-toast.out { opacity: 0; }
/* ===== Qamoqqa olinish animatsiyasi (qafas + kishan) ===== */
.m-jailfx { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; transition: opacity .55s; background: rgba(10,10,14,.35); }
.m-jailfx.out { opacity: 0; }
.m-jail-bars { position: absolute; inset: 0; display: flex; justify-content: space-evenly; }
.m-jail-bars i { width: clamp(5px, 1.6cqw, 10px); height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #565b64, #23262c 60%, #565b64); box-shadow: 2px 0 5px rgba(0,0,0,.5);
  transform: translateY(-105%); animation: m-bar-drop .5s cubic-bezier(.5,.05,.6,1.2) forwards; }
@keyframes m-bar-drop { to { transform: translateY(0); } }
.m-jail-txt { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 92%;
  background: rgba(15,15,20,.92); color: #fff; font-size: clamp(15px, 4cqw, 22px); padding: 13px 22px; border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.55); animation: m-paybn-in .5s cubic-bezier(.3,1.4,.5,1); }
.m-jail-cuff { font-size: 1.5em; animation: m-cuff .7s ease-in-out 2; }
@keyframes m-cuff { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 60% { transform: rotate(16deg); } }
/* ===== Keng ekran: 3 ustun (chapda profillar/mulk, markazda doska, o'ngda amallar) ===== */
.m-col { width: 100%; min-width: 0; }
@media (min-width: 1100px) {
  .g-mono { max-width: 1500px; }
  .m-wrap { display: grid; grid-template-columns: minmax(280px, 350px) minmax(430px, 1fr) minmax(280px, 350px); grid-template-areas: "side board main" "side board chat"; grid-template-rows: auto 1fr; gap: 20px; max-width: 1460px; align-items: start; }
  .m-col-board { grid-area: board; }
  .m-col-main { grid-area: main; position: sticky; top: 72px; }
  .m-col-side { grid-area: side; position: sticky; top: 72px; }
}
/* --- Eski CSS-doska (endi ishlatilmaydi, moslik uchun qoldi): klassik ko'rinish.
   O'lchamlar cqi (doska kengligi) bilan bog'langan — har o'lchamda proporsional. --- */
.m-board {
  --green: #cfe8d4; --line: #111; --bink: #111;
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
  gap: 1.5px; width: min(96vw, 940px); aspect-ratio: 1;
  background: var(--line); padding: 1.5px; border: 3px solid var(--line);
  box-shadow: 0 20px 55px rgba(0,0,0,.28); color: var(--bink);
  font-family: "Oswald", "Inter", sans-serif;
}
.m-tile { --band: clamp(11px, 1.85cqi, 20px); position: relative; background: var(--green); overflow: hidden; min-width: 0; }
.m-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  align-items: center; text-align: center; padding: calc(var(--band) + 4px) 3px 4px; line-height: 1.04; gap: 1px; }
.m-tile.s-t .m-body { transform: rotate(180deg); }
.m-tile.s-l .m-body { transform: rotate(90deg); }
.m-tile.s-r .m-body { transform: rotate(-90deg); }
.m-strip { position: absolute; background: #000; }
.m-tile.s-b .m-strip { top: 0; left: 0; right: 0; height: var(--band); border-bottom: 1.5px solid var(--line); }
.m-tile.s-t .m-strip { bottom: 0; left: 0; right: 0; height: var(--band); border-top: 1.5px solid var(--line); }
.m-tile.s-l .m-strip { right: 0; top: 0; bottom: 0; width: var(--band); border-left: 1.5px solid var(--line); }
.m-tile.s-r .m-strip { left: 0; top: 0; bottom: 0; width: var(--band); border-right: 1.5px solid var(--line); }
.m-nm { font-weight: 600; font-size: clamp(6.5px, 1.28cqi, 13px); letter-spacing: .2px; line-height: 1.08; text-transform: uppercase; word-break: break-word; color: #111; }
.m-price { font-family: "Inter", sans-serif; font-size: clamp(6.5px, 1.32cqi, 13px); font-weight: 700; color: #111; letter-spacing: -.2px; }
.m-ico { display: flex; align-items: center; justify-content: center; flex: 1; }
.m-ico svg { width: clamp(18px, 3.5cqi, 36px); height: clamp(18px, 3.5cqi, 36px); }
.m-q { font-size: clamp(18px, 3.7cqi, 38px); font-weight: 700; line-height: 1; }
.m-toks { position: absolute; z-index: 4; right: 1px; bottom: 0; font-size: clamp(11px, 2.1cqi, 20px); letter-spacing: -3px;
  background: rgba(255,255,255,.62); border-radius: 5px; padding: 0 1px; }
.m-tile.m-mort { opacity: .45; }
/* rang guruhlari (band) */
.g-brown{background:#955436}.g-lblue{background:#aae0fa}.g-pink{background:#d93a96}
.g-orange{background:#f7941d}.g-red{background:#ed1c24}.g-yellow{background:#fff200}
.g-green{background:#1fb25a}.g-dblue{background:#0071bc}
/* burchaklar */
.m-corner { position: relative; background: var(--green); overflow: hidden; }
.m-go .go-big { position: absolute; top: 50%; left: 50%; font-size: clamp(22px, 4.7cqi, 46px); font-weight: 700; color: #ed1c24; font-style: italic; letter-spacing: -1px; transform: translate(-50%,-50%) rotate(-45deg); }
.m-go .go-arrow { position: absolute; left: 6%; top: 54%; transform: translateY(-50%); }
.m-go .go-arrow svg { width: clamp(26px, 4.6cqi, 46px); height: auto; }
.m-go .go-top { position: absolute; top: 5%; left: 3%; right: 3%; font-size: clamp(4.8px, .92cqi, 8.5px); font-weight: 600; text-transform: uppercase; text-align: center; color: #111; line-height: 1.15; letter-spacing: 0; }
.m-jail .cell { position: absolute; right: 3%; top: 3%; width: 64%; height: 64%; background: #f7941d; border: 2px solid #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.m-jail .bars { display: flex; gap: clamp(2px, .5cqi, 4px); }
.m-jail .bars i { width: clamp(2px, .5cqi, 4px); height: clamp(18px, 3.4cqi, 32px); background: #111; display: block; }
.m-jail .injail { font-size: clamp(6px, 1.15cqi, 11px); font-weight: 700; color: #111; }
.m-jail .visit-h { position: absolute; left: 5%; bottom: 22%; font-size: clamp(6px, 1.15cqi, 11px); font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); color: #111; }
.m-jail .visit-b { position: absolute; left: 22%; bottom: 4%; font-size: clamp(6px, 1.15cqi, 11px); font-weight: 700; color: #111; }
.m-diag .cc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(2px, .7cqi, 7px); padding: clamp(3px, 1cqi, 9px); }
.m-diag .txt { font-size: clamp(7px, 1.55cqi, 15px); font-weight: 700; text-transform: uppercase; text-align: center; color: #111; line-height: 1.1; transform: rotate(-45deg); }
.m-diag.tr .txt { transform: rotate(45deg); }
.m-diag .em { display: flex; }
.m-diag .em svg { width: clamp(22px, 4.4cqi, 44px); height: clamp(22px, 4.4cqi, 44px); }
/* markaz */
.m-center { grid-row: 2/11; grid-column: 2/11; position: relative; background: var(--green); border: 1.5px solid var(--line); overflow: hidden; }
.m-cc, .m-ch { position: absolute; width: 38%; aspect-ratio: 1.5; border: 2px solid #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 2px 3px 0 rgba(0,0,0,.15); }
.m-cc { top: 9%; left: 8%; transform: rotate(-45deg); background: #cfe8f7; }
.m-ch { bottom: 9%; right: 8%; transform: rotate(-45deg); background: #f7a81d; }
.m-cc .lbl, .m-ch .lbl { font-size: clamp(9px, 1.75cqi, 17px); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: center; line-height: 1.08; color: #111; }
.m-ch .qm { font-size: clamp(24px, 5.2cqi, 50px); font-weight: 700; color: #ed1c24; line-height: 1; }
.m-cc svg { width: clamp(24px, 4.8cqi, 46px); height: clamp(24px, 4.8cqi, 46px); }
.m-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-30deg);
  background: #ed1c24; color: #fff; padding: clamp(7px, 1.5cqi, 15px) clamp(24px, 5.6cqi, 56px); border: 3px solid #111; box-shadow: 5px 6px 0 rgba(0,0,0,.22);
  font-style: italic; font-weight: 700; font-size: clamp(20px, 4.9cqi, 50px); letter-spacing: 1px; white-space: nowrap;
  text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.m-logo small { display: block; text-align: center; font-size: clamp(6px, 1.15cqi, 11px); letter-spacing: 3px; font-style: normal; text-shadow: none; font-weight: 500; font-family: "Inter", sans-serif; }
/* --- Panel (o'yin boshqaruvi, mavzuga moslashadi) --- */
.m-panel { width: 100%; display: flex; flex-direction: column; gap: 12px; }
/* lobbi — qo'shilish kodi */
.m-joinbox { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; text-align: center; }
.m-join-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-soft); font-weight: 700; }
.m-code { font-family: "Space Grotesk", monospace; font-size: clamp(28px, 6vw, 40px); font-weight: 700; letter-spacing: 8px; color: var(--accent); cursor: pointer; margin: 4px 0 6px; user-select: all; text-indent: 8px; }
.m-code:hover { opacity: .78; }
.m-join-hint { font-size: 12.5px; color: var(--ink-soft); }
.m-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; }
.m-turn { font-size: 14px; } .m-turn b { color: var(--red); }
.m-dice { display: flex; gap: 8px; margin-left: auto; align-items: center; }
/* Zar — nuqtali yuz (3×3 to'r) */
.m-die { width: 34px; height: 34px; padding: 4px; background: #fff; border: 1.5px solid #111; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.25); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; }
.m-die i { border-radius: 50%; }
.m-die i.on { background: #111; box-shadow: inset 0 0 0 .5px #000; }
.m-dsum { font-weight: 800; font-size: 15px; color: var(--red); margin-left: 2px; }
/* tashlanish animatsiyasi */
.m-dice.rolling .m-die { animation: m-tumble .6s cubic-bezier(.34,1.56,.64,1); }
.m-dice.rolling .m-die:last-of-type { animation-delay: .07s; }
@keyframes m-tumble {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-10px) rotate(-24deg) scale(1.12); }
  50% { transform: translateY(0) rotate(18deg) scale(1.06); }
  75% { transform: translateY(-4px) rotate(-8deg); }
  100% { transform: none; }
}
/* Pastki inventar HUD — ikonка + son */
.m-inv { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 9px 12px; }
.m-iv { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; }
.m-iv b { font-weight: 800; }
/* Qamoqdan chiqish kartasi — alohida ko'zga tashlanadigan chip */
.m-iv-gojf { background: #fff6d8; border: 1.5px solid #e0b400; border-radius: 9px; padding: 3px 9px; font-weight: 700; color: #7a6200; }
/* Pul — foydalanuvchi chizган banknota (HUD chip + Hamyon + animatsiya) */
.m-iv-money { border: none; background: none; cursor: pointer; padding: 0; font: inherit; color: inherit; }
.m-bill-ic { height: 22px; width: auto; vertical-align: middle; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.m-iv-money b { margin-left: 3px; }
.m-fly { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); z-index: 8; pointer-events: none; text-align: center; animation: m-fly-up 1.6s ease-out forwards; }
.m-fly img { width: clamp(80px, 26cqw, 150px); display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.m-fly span { display: inline-block; margin-top: 5px; font-weight: 800; font-size: clamp(17px, 5cqw, 28px); padding: 2px 12px; border-radius: 99px; color: #fff; }
.m-fly.plus span { background: #1fb25a; }
.m-fly.minus span { background: #e0341b; }
@keyframes m-fly-up {
  0% { opacity: 0; transform: translate(-50%,-28%) scale(.7); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
  70% { opacity: 1; transform: translate(-50%,-96%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-140%) scale(.95); }
}
.m-wl-card { gap: 12px; }
.m-wl-title { font-weight: 800; font-size: 17px; font-family: "Oswald", sans-serif; }
.m-wl-list { display: flex; flex-direction: column; gap: 9px; width: 100%; max-height: 54vh; overflow: auto; }
.m-wl-row { display: flex; align-items: center; gap: 12px; }
.m-wl-bill { width: min(58vw, 210px); height: auto; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.m-wl-x { font-weight: 800; font-size: 18px; }
.m-wl-rem { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
/* Lobbi: shakl (token) tanlash */
.m-pick { text-align: center; }
.m-pick-lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.m-pick-grid { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.m-pick-b { width: 46px; height: 46px; font-size: 23px; line-height: 1; border: 2px solid var(--rule); border-radius: 12px; background: var(--surface); cursor: pointer; transition: transform .1s, border-color .12s; }
.m-pick-b:not(.taken):hover { border-color: var(--accent); transform: translateY(-2px); }
.m-pick-b.sel { border-color: var(--red); background: var(--red-tint); box-shadow: 0 0 0 2px var(--red) inset; }
.m-pick-b.taken { opacity: .3; cursor: not-allowed; }
/* Lupa (zoom) modal */
.m-zoombox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.m-zoombox[hidden] { display: none; }
.m-zoom-bg { position: absolute; inset: 0; background: rgba(0,0,0,.58); }
.m-zoom-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(90vw, 320px); background: var(--paper); border-radius: 18px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.m-zoom-view { width: min(76vw, 250px); aspect-ratio: 1 / 1; background-image: url(/monopoly-board2.png); background-repeat: no-repeat; background-size: 900%; border: 2px solid #111; border-radius: 12px; }
.m-zoom-info { text-align: center; }
.m-zt-nm { font-weight: 800; font-size: 18px; font-family: "Oswald", sans-serif; }
.m-zt-row { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }

/* ===== Status banner (kim / nima jarayon) ===== */
.m-status { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); border-left: 6px solid var(--pc, var(--red)); }
.m-status-who { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 17px; color: var(--pc, var(--ink)); }
.m-status-msg { font-size: 13.5px; color: var(--ink-soft); }
.m-dicewrap { display: flex; justify-content: center; }
/* Maslahatchi (qoida eslatmasi) */
.m-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: var(--soft); border-radius: 10px; padding: 8px 12px; border-left: 4px solid #f5c400; }
/* Auksion paneli */
.m-auc { background: var(--surface); border: 2px solid #f5a300; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.m-auc-t { font-family: "Oswald", sans-serif; font-size: 16px; }
.m-auc-p { font-size: 12px; color: var(--ink-soft); font-family: inherit; }
.m-auc-best { font-size: 14px; }
/* Savdo (taklif) paneli */
.m-trade { background: var(--surface); border: 2px solid #1fb25a; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.m-trade-t { font-size: 14px; line-height: 1.5; }
.m-trade-obs { border-color: var(--rule); color: var(--ink-soft); font-size: 13px; }
/* Pasportda taklif formasi */
.m-pp-offer { display: flex; gap: 8px; margin-top: 10px; }
.m-pp-offer input { flex: 1; min-width: 0; border: 1.5px solid var(--rule-strong); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); }
.m-pp-offer input.err { border-color: var(--red); }
.m-pp-offer .g-btn { white-space: nowrap; }
.m-big { font-size: 16px; padding: 13px 20px; font-weight: 800; }
.m-actions .m-big { flex: 1 1 auto; }

/* ===== Karta ochilish animatsiyasi (3D flip) ===== */
.m-card-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.m-card3d { position: relative; width: min(74vw, 260px); aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.2,.2,1); }
.m-card3d.flipped { transform: rotateY(180deg); }
.m-card-side { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.m-card-back { background: linear-gradient(150deg, #2b2b34, #14141a); color: #fff; }
.m-card3d.chance .m-card-back { background: linear-gradient(150deg, #ff7a18, #d0021b); }
.m-card3d.chest .m-card-back { background: linear-gradient(150deg, #f5c400, #e59500); color: #2b2b16; }
.m-card-mark { font-size: 64px; font-weight: 900; line-height: 1; }
.m-card-deck { font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; margin-top: 8px; }
.m-card-face { background: #fbf7ee; color: #1a1a1a; transform: rotateY(180deg); border: 2px solid #111; }
.m-card3d.chance .m-card-face { border-color: #d0021b; } .m-card3d.chest .m-card-face { border-color: #e59500; }
.m-card-face .m-card-deck { color: #b00; } .m-card3d.chest .m-card-face .m-card-deck { color: #a06800; }
.m-card-txt { font-size: 17px; font-weight: 600; line-height: 1.35; margin-top: 14px; }

/* ===== Pasport (title deed) ===== */
.m-pp-card { padding: 0; overflow: hidden; gap: 0; width: min(90vw, 330px); }
/* rasm-freym: ichки kvadrat fon katak tomoniга qarab buriladi — yozuv doim to'g'ri o'qiladi */
.m-pp-view { position: relative; width: 100%; height: 190px; overflow: hidden; border-bottom: 2px solid #111; background: #eef4ee; }
.m-pp-vbg { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1 / 1;
  background-image: url(/monopoly-board2.png); background-repeat: no-repeat; background-size: 600%; }
.m-pp-head { width: 100%; box-sizing: border-box; padding: 10px 14px; color: #111; text-shadow: 0 1px 2px rgba(255,255,255,.35); }
.m-pp-deed { font-size: 10px; letter-spacing: .18em; font-weight: 700; opacity: .8; }
.m-pp-name { font-family: "Oswald", sans-serif; font-weight: 800; font-size: 20px; line-height: 1.1; }
.m-pp-body { width: 100%; box-sizing: border-box; padding: 12px 16px 16px; }
.m-pp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; border-bottom: 1px dashed var(--rule); }
.m-pp-row b { font-weight: 800; }
.m-pp-sep { height: 8px; }
.m-pp-note { font-size: 14px; color: var(--ink-soft); text-align: center; padding: 8px 0; line-height: 1.5; }
.m-pp-owner { margin-top: 10px; font-size: 13px; font-weight: 600; text-align: center; background: var(--soft); border-radius: 8px; padding: 6px 8px; }
.m-pp-card > .g-btn { margin: 0 16px 16px; }
.m-plstrip { display: flex; flex-wrap: wrap; gap: 8px; }
.m-pl { font-size: 12.5px; padding: 5px 11px 5px 10px; border-radius: 99px; background: var(--soft); border-left: 5px solid var(--pc, transparent); }
.m-pl.cur { background: var(--red-tint); color: var(--red); font-weight: 800; box-shadow: 0 0 0 2px var(--pc, var(--red)); }
.m-pl.bank { opacity: .45; text-decoration: line-through; }
.m-log { font-size: 12px; color: var(--ink-soft); line-height: 1.6; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; max-height: 130px; overflow: auto; }
.m-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m-warn { background: var(--red-tint); color: var(--red); padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.m-warn.m-ok { background: var(--green-tint, rgba(31,178,90,.14)); color: var(--green, #1fb25a); }
.m-joinbox { text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px 16px; }
.m-join-lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.m-code { display: inline-block; margin: 6px 0 4px; font-family: "Space Grotesk", monospace; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: .16em; color: var(--red); cursor: pointer; user-select: all; padding: 4px 14px; border-radius: 10px; transition: background .15s; }
.m-code:hover { background: var(--red-tint); }
.m-join-hint { font-size: 12.5px; color: var(--ink-soft); }
.m-join-hint b { color: var(--ink); }
.m-props { display: flex; flex-wrap: wrap; gap: 6px; }
.m-prop { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--rule); border-left: 5px solid var(--rule); background: var(--surface); }
.m-prop.m-g-brown{border-left-color:#955436}.m-prop.m-g-lblue{border-left-color:#5cc1ef}.m-prop.m-g-pink{border-left-color:#d93a96}
.m-prop.m-g-orange{border-left-color:#f7941d}.m-prop.m-g-red{border-left-color:#ed1c24}.m-prop.m-g-yellow{border-left-color:#e6c400}
.m-prop.m-g-green{border-left-color:#1fb25a}.m-prop.m-g-dblue{border-left-color:#0071bc}
.m-prop-nm { font-weight: 600; border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.m-prop button { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--paper); cursor: pointer; font-family: inherit; }
.m-prop button:hover { border-color: var(--accent); color: var(--accent); }
/* o'lchamlar cqi/clamp bilan avtomatik moslashadi — alohida mobil media shart emas */

.g-timer { width: 100%; height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.g-timer-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.9s linear; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
.g-answered { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.g-btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 99px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; }
.g-btn:hover { background: var(--accent); border-color: var(--accent); }
.g-btn-go { background: var(--accent); border-color: var(--accent); font-size: 17px; padding: 14px 34px; }
.g-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.g-hostbar { text-align: center; margin-top: 14px; }
.g-link-danger { background: none; border: none; color: var(--ink-faint); font-size: 13px; cursor: pointer; text-decoration: underline; }

.g-res { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 700; padding: 12px 26px; border-radius: 14px; }
.g-res-ok { background: var(--green-tint); color: var(--green); }
.g-res-bad { background: var(--red-tint); color: var(--red); }
.g-res-none { background: var(--soft); color: var(--ink-soft); }

.g-lb { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.g-lb-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); text-align: left; margin-bottom: 2px; }
.g-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--soft); }
.g-lb-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.g-lb-row:nth-child(2) .g-lb-rank { background: #D9A400; }
.g-lb-row:nth-child(3) .g-lb-rank { background: #9AA0A6; }
.g-lb-row:nth-child(4) .g-lb-rank { background: #B4762E; }
.g-lb-nm { flex: 1; text-align: left; font-weight: 600; font-size: 15px; }
.g-lb-sc { flex: none; font-family: "Inter", sans-serif; font-weight: 700; }
.g-msg { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ---- Vazifalar Board (kanban) ---- */
.board-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
/* Doska matn ustunidan kengroq — ustunlar keng bo'lib, ism-familiya to'liq sig'adi */
.board-wide { margin-left: calc(50% - 50vw + 10px); margin-right: calc(50% - 50vw + 10px); padding: 0 20px 6px; }
.board { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(4, minmax(210px, 1fr)); min-width: 780px; }
.board-3 { grid-template-columns: repeat(3, minmax(210px, 1fr)); min-width: 620px; }
.board-4 { grid-template-columns: repeat(4, minmax(210px, 1fr)); min-width: 780px; }
.board-col {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--glass-brd); border-radius: 24px; padding: 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:root[data-theme='tungi'] .board-col { background: rgba(0,0,0,0.28); }
.board-col-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.board-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-todo { background: var(--amber); }
.dot-progress { background: #2E5C8A; }
.dot-review { background: #6B4E9C; }
.dot-done { background: var(--green); }
.board-col-title { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.board-col-count { margin-left: auto; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--uc-bg); border: 0; border-radius: 99px; padding: 3px 10px; box-shadow: 0 1px 3px rgba(23,24,27,0.10); }
.board-col-body { display: flex; flex-direction: column; gap: 12px; min-height: 24px; }
.board-empty { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 8px 0; }

/* Vazifa kartasi — profil kartasi bilan bir dizayn tilida:
   katta radius, oq yuza, mayin soya, tabletka teglar, chinakam avatar. */
.tcard { position: relative; display: block; background: var(--uc-bg); border: 0; border-radius: 22px; padding: 15px 16px 14px; text-decoration: none; color: var(--ink); box-shadow: 0 6px 18px rgba(18,18,28,0.07), 0 1px 3px rgba(18,18,28,0.05); transition: box-shadow 0.16s, transform 0.16s; }
.tcard:hover { box-shadow: 0 14px 32px rgba(18,18,28,0.14); transform: translateY(-2px); }
.tcard-open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tcard-title { font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 5px; }
.tcard-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.chip-tag { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.tag-daily { background: #E6EEF5; color: #2E5C8A; }
.tag-returned { background: var(--red-tint); color: var(--red); }
.tag-prio-yuqori { background: var(--red-tint); color: var(--red); }
.tag-prio-orta { background: var(--amber-tint); color: var(--amber); }
.tag-prio-past { background: var(--soft); color: var(--ink-soft); }
.tag-personal { background: var(--accent-tint); color: var(--accent); }
.status-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Bosh sahifa hero + mavzu ---- */
.dash-hero { margin-bottom: 22px; }
.dash-date { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 6px; }
.dash-greet { font-family: "Inter", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.theme-block { margin-top: 8px; }
.theme-swatches { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.theme-sw { width: 34px; height: 34px; border-radius: 50%; background: var(--sw); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--rule-strong); cursor: pointer; padding: 0; transition: transform 0.1s; }
.theme-sw:hover { transform: scale(1.12); }
.theme-sw.active { box-shadow: 0 0 0 2px var(--sw); }

/* ---- Mavzular (butun interfeys) ---- */
:root[data-theme='klassik'] {
  --paper: #FAFAF7; --soft: #F0EEE5; --ink: #17181B; --ink-soft: #75746D; --ink-faint: #A8A69C;
  --rule: #DEDCD1; --rule-strong: #C8C6B9; --accent: #C43E24; --accent-tint: #F7E9E5;
  --aura-1: #F6D7CC; --aura-2: #EDE5D2;
}
:root[data-theme='kok'] {
  --paper: #F4F7FB; --soft: #E7EEF6; --ink: #16202B; --ink-soft: #5A6A7A; --ink-faint: #93A2B2;
  --rule: #D6E1EC; --rule-strong: #BCCBDB; --accent: #2E6FB0; --accent-tint: #E1ECF7;
  --aura-1: #CFE2F6; --aura-2: #DCEBF6;
}
:root[data-theme='zumrad'] {
  --paper: #F3F7F3; --soft: #E5F0E6; --ink: #16211A; --ink-soft: #566B5B; --ink-faint: #93A596;
  --rule: #D6E4D6; --rule-strong: #BED0BF; --accent: #2F7D4F; --accent-tint: #E3F0E6;
  --aura-1: #D2ECDA; --aura-2: #E4F0DE;
}
:root[data-theme='lavanda'] {
  --paper: #F8F5FC; --soft: #EEE8F7; --ink: #1E1826; --ink-soft: #655A77; --ink-faint: #A093B2;
  --rule: #E4DBF0; --rule-strong: #CFC2E3; --accent: #7A54B3; --accent-tint: #EDE6F8;
  --aura-1: #E2D6F7; --aura-2: #F0E4FA;
}
:root[data-theme='tungi'] {
  --paper: #131417; --soft: #212329; --ink: #ECECE8; --ink-soft: #9A9AA2; --ink-faint: #6B6C75;
  --rule: #2B2D34; --rule-strong: #3D4048; --accent: #E4694A; --accent-tint: #3A2822;
  --surface: #202227;
  --glass: rgba(32,34,39,0.62);
  --glass-strong: rgba(28,30,35,0.82);
  --glass-brd: rgba(255,255,255,0.07);
  --hairline: rgba(255,255,255,0.07);
  --elev-1: 0 2px 8px rgba(0,0,0,0.30);
  --elev-2: 0 8px 24px rgba(0,0,0,0.40);
  --elev-3: 0 18px 44px rgba(0,0,0,0.52);
  --aura-1: #2E2038; --aura-2: #17283A;
}
:root[data-theme='tungi'] body::before { opacity: 0.85; }

/* ================= OKEAN mavzusi — suv ostida ================= */
:root[data-theme='okean'] {
  --paper: #03060D; --soft: #0A1524; --ink: #EAF6FF; --ink-soft: #8DACC6; --ink-faint: #55789A;
  --rule: #14293F; --rule-strong: #23445F; --accent: #6FD8FF; --accent-tint: #0A2436;
  --surface: #071322;
  --glass: rgba(8,20,36,0.70);
  --glass-strong: rgba(4,12,24,0.86);
  --glass-brd: rgba(130,220,255,0.15);
  --hairline: rgba(150,225,255,0.10);
  --elev-1: 0 2px 12px rgba(0,4,12,0.55);
  --elev-2: 0 12px 34px rgba(0,4,12,0.62);
  --elev-3: 0 22px 56px rgba(0,2,10,0.72);
  --uc-chip: #0E2438;
  --aura-1: #08304A; --aura-2: #05192B;
}
/* deyarli qora chuqurlik — yuqorida sal moviy nur qoladi */
:root[data-theme='okean'] body::before {
  opacity: 1;
  background:
    radial-gradient(1000px 620px at 24% -14%, rgba(30,110,165,0.30), transparent 64%),
    radial-gradient(820px 520px at 86% 6%, rgba(24,86,140,0.22), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(18,70,115,0.20), transparent 66%),
    linear-gradient(180deg, #061020 0%, #040B16 40%, #02060E 72%, #010409 100%);
}
/* qora suvda kartalar chekkasidan yorug'lik olib "suzib" turadi */
:root[data-theme='okean'] .ucard { box-shadow: var(--elev-3), 0 0 0 1px rgba(130,220,255,0.10); }

/* ================= KOINOT mavzusi — sokin quyosh sistemasi ================= */
:root[data-theme='koinot'] {
  --paper: #04040B; --soft: #101024; --ink: #EFEDFF; --ink-soft: #A6A2CC; --ink-faint: #6E6A96;
  --rule: #1E1C36; --rule-strong: #332F55; --accent: #FFB454; --accent-tint: #2A1F16;
  --surface: #0B0A18;
  --glass: rgba(12,11,28,0.70);
  --glass-strong: rgba(6,5,16,0.86);
  --glass-brd: rgba(180,170,255,0.13);
  --hairline: rgba(190,180,255,0.10);
  --elev-1: 0 2px 12px rgba(0,0,8,0.55);
  --elev-2: 0 12px 34px rgba(0,0,8,0.62);
  --elev-3: 0 22px 56px rgba(0,0,6,0.72);
  --uc-chip: #1A1730;
  --aura-1: #2B1E52; --aura-2: #101A3E;
}
:root[data-theme='koinot'] body::before {
  opacity: 1;
  background:
    radial-gradient(900px 560px at 26% 36%, rgba(120,70,180,0.22), transparent 64%),
    radial-gradient(820px 520px at 84% 8%, rgba(40,70,170,0.20), transparent 62%),
    linear-gradient(180deg, #070614 0%, #05040E 45%, #030209 100%);
}
.space-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
:root[data-theme='koinot'] .space-fx { display: block; }
:root[data-theme='koinot'] .board-col { background: rgba(0,0,6,0.34); }
:root[data-theme='koinot'] .panel,
:root[data-theme='koinot'] .stat-box,
:root[data-theme='koinot'] .form-card,
:root[data-theme='koinot'] .table-scroll,
:root[data-theme='koinot'] .up-panel,
:root[data-theme='koinot'] .pr-card,
:root[data-theme='koinot'] .task-meta,
:root[data-theme='koinot'] .pr-weekbar,
:root[data-theme='koinot'] .login-card {
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(200,190,255,0.10);
}
:root[data-theme='koinot'] .icon-btn,
:root[data-theme='koinot'] .org-node,
:root[data-theme='koinot'] .team-chip { border-color: var(--glass-brd); }
:root[data-theme='koinot'] .ucard { box-shadow: var(--elev-3), 0 0 0 1px rgba(180,170,255,0.10); }
/* baliqlar qatlami — fon nuridan yuqorida, kontentdan pastda */
.ocean-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
:root[data-theme='okean'] .ocean-fx { display: block; }
:root[data-theme='okean'] .board-col { background: rgba(2,16,28,0.32); }
:root[data-theme='okean'] .ucard-ava { border-color: rgba(140,230,255,0.35); }
/* suv ostida shisha yuqori qirrasida yorug'lik uchqunini oladi */
:root[data-theme='okean'] .panel,
:root[data-theme='okean'] .stat-box,
:root[data-theme='okean'] .form-card,
:root[data-theme='okean'] .table-scroll,
:root[data-theme='okean'] .up-panel,
:root[data-theme='okean'] .pr-card,
:root[data-theme='okean'] .task-meta,
:root[data-theme='okean'] .pr-weekbar,
:root[data-theme='okean'] .login-card {
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(160,235,255,0.12);
}
:root[data-theme='okean'] .icon-btn,
:root[data-theme='okean'] .org-node,
:root[data-theme='okean'] .team-chip { border-color: var(--glass-brd); }

/* ================= INTERSTELLAR mavzusi — Gargantua qora tuynuk ================= */
:root[data-theme='interstellar'] {
  --paper: #020204; --soft: #111013; --ink: #F1EDE3; --ink-soft: #A69E8F; --ink-faint: #6C665B;
  --rule: #242129; --rule-strong: #3B3742; --accent: #F2A93B; --accent-tint: #2C2010;
  --surface: #0C0B0F;
  --glass: rgba(10,9,13,0.72);
  --glass-strong: rgba(4,3,7,0.87);
  --glass-brd: rgba(242,190,120,0.13);
  --hairline: rgba(255,215,160,0.08);
  --elev-1: 0 2px 12px rgba(0,0,0,0.60);
  --elev-2: 0 12px 34px rgba(0,0,0,0.66);
  --elev-3: 0 22px 56px rgba(0,0,0,0.76);
  --uc-chip: #1A171D;
  --aura-1: #33220E; --aura-2: #0E0C1A;
}
/* cheksiz qora fazo — o'ngda qora tuynuk taftidan iliq nur qoladi */
:root[data-theme='interstellar'] body::before {
  opacity: 1;
  background:
    radial-gradient(1000px 640px at 78% 34%, rgba(242,169,59,0.10), transparent 58%),
    radial-gradient(760px 520px at 12% -10%, rgba(90,110,180,0.10), transparent 62%),
    linear-gradient(180deg, #050508 0%, #030305 45%, #010102 100%);
}
.bh-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
:root[data-theme='interstellar'] .bh-fx { display: block; }
:root[data-theme='interstellar'] .board-col { background: rgba(4,3,8,0.36); }
/* shisha panellar yuqori qirrasida akretsion disk tafti */
:root[data-theme='interstellar'] .panel,
:root[data-theme='interstellar'] .stat-box,
:root[data-theme='interstellar'] .form-card,
:root[data-theme='interstellar'] .table-scroll,
:root[data-theme='interstellar'] .up-panel,
:root[data-theme='interstellar'] .pr-card,
:root[data-theme='interstellar'] .task-meta,
:root[data-theme='interstellar'] .pr-weekbar,
:root[data-theme='interstellar'] .login-card {
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,205,140,0.10);
}
:root[data-theme='interstellar'] .icon-btn,
:root[data-theme='interstellar'] .org-node,
:root[data-theme='interstellar'] .team-chip { border-color: var(--glass-brd); }
:root[data-theme='interstellar'] .ucard { box-shadow: var(--elev-3), 0 0 0 1px rgba(242,190,120,0.10); }

/* ---- Profil paneli (o'ng drawer) ---- */
.profile-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 20px; padding: 3px 10px 3px 3px; cursor: pointer; color: var(--ink); }
.profile-btn:hover { background: var(--soft); }
.profile-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-name { font-size: 13px; font-weight: 600; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(10,10,16,0.30); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.22s; z-index: 40; }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 88vw;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-left: 1px solid var(--glass-brd); border-radius: 28px 0 0 28px;
  box-shadow: -18px 0 60px rgba(0,0,0,0.22);
  transform: translateX(102%); transition: transform 0.28s cubic-bezier(.2,.7,.2,1); z-index: 50;
  display: flex; flex-direction: column; padding: 20px 22px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.drawer-user { display: flex; align-items: center; gap: 12px; }
.drawer-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drawer-name { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; }
.drawer-role { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.drawer-close { background: none; border: none; font-size: 17px; color: var(--ink-soft); cursor: pointer; line-height: 1; padding: 4px; }
.drawer-close:hover { color: var(--ink); }
.drawer-section { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.drawer-section:last-child { border-bottom: none; }
.drawer-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 12px; }
.drawer-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 8px; background: none; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 500; text-align: left; }
.theme-opt:hover { background: var(--soft); }
.theme-opt.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
.drawer-logout { width: 100%; text-align: center; }
.drawer-full { display: block; width: 100%; text-align: center; }

/* ---- Avatar: rasm / emoji ---- */
.profile-avatar, .drawer-avatar { overflow: hidden; }
.profile-avatar img, .drawer-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profile-avatar .av-emoji { font-size: 15px; line-height: 1; }
.drawer-avatar .av-emoji { font-size: 24px; line-height: 1; }

/* ---- Profil tahrirlash sahifasi ---- */
.pe-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.pe-preview { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.pe-preview img { width: 100%; height: 100%; object-fit: cover; }
.pe-emoji { font-size: 44px; line-height: 1; }
.pe-ini { font-family: "Inter", sans-serif; font-size: 30px; font-weight: 600; }
.pe-avatar-info { flex: 1; min-width: 200px; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.emoji-opt { width: 42px; height: 42px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.emoji-opt:hover { background: var(--soft); border-color: var(--rule-strong); }
.emoji-opt.active { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.emoji-none { font-size: 14px; color: var(--ink-soft); }
.name-emoji-preview { font-size: 14px; color: var(--ink-soft); margin: -2px 0 12px; }
.name-emoji-preview strong { color: var(--ink); }
.nep-emoji { font-size: 18px; }
.nep-emoji .emoji-img { max-height: 22px; max-width: 46px; }

/* rasm-nishonlar: ism yonidagi kichik rasm.
   Balandlik ham, en ham cheklangan — keng nishonlar (avto raqam, bayroq)
   haddan tashqari katta bo'lib ketmaydi, kvadrat nishonlar bilan bir o'lchamда qoladi. */
.emoji-img { display: inline-block; height: auto; width: auto; max-height: 1.05em; max-width: 2em; vertical-align: -0.16em; }
/* tanlagichdagi rasm tugmalari */
.emoji-img-opt img { width: 26px; height: 26px; object-fit: contain; display: block; }
.badge-group-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 6px; }
.badge-grid .emoji-opt { width: 44px; height: 44px; }
.cropper-wrap { margin: 4px 0 12px; max-width: 300px; }
.cropper { position: relative; width: 260px; height: 260px; max-width: 100%; border-radius: 10px; overflow: hidden; background: #232323; touch-action: none; }
.cropper canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.cropper canvas:active { cursor: grabbing; }
.cropper-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,0.42); }
.crop-zoom { width: 260px; max-width: 100%; margin-top: 12px; }

/* raqamlar tekis turishi uchun */
.mono, .stat-value, .cal-day, .poster-score, .poster-rank { font-variant-numeric: tabular-nums; }

/* ---- Xush kelibsiz ekrani (mayin boshlanish) ---- */
.welcome-splash {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 20px; transition: opacity 0.7s ease;
  background:
    radial-gradient(800px 600px at 20% 10%, var(--aura-1), transparent 62%),
    radial-gradient(700px 560px at 85% 85%, var(--aura-2), transparent 60%),
    var(--paper);
}
.welcome-splash.hide { opacity: 0; pointer-events: none; }
.ws-inner { text-align: center; }
.ws-greet { font-family: "Inter", sans-serif; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); animation: wsIn 1s cubic-bezier(.2,.7,.2,1) both; }
.ws-sub { font-size: 16px; color: var(--ink-soft); margin: 0; animation: wsIn 1s .28s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wsIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .ws-greet { font-size: 27px; } .ws-sub { font-size: 14px; } }

/* ---- Kreativ kursor (markazda qizil nuqta + nurlar) ---- */
.cursor-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
@media (pointer: coarse) { .cursor-fx { display: none !important; } }
@media (pointer: fine) {
  html.fxcursor, html.fxcursor * { cursor: none !important; }
  html.fxcursor input, html.fxcursor textarea { cursor: text !important; }
}
.cur-ic { font-size: 15px; width: 18px; text-align: center; opacity: 0.85; flex-shrink: 0; }
@media (pointer: coarse) { #cursorSection { display: none; } }

/* ---- Strategiya doskasi (cheksiz maydon) ---- */
.wb-page { position: fixed; left: 0; right: 0; bottom: 0; top: 56px; display: flex; flex-direction: column; background: var(--paper); z-index: 6; }
.wb-bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); flex-wrap: wrap; flex-shrink: 0; }
.wb-group { display: flex; align-items: center; gap: 6px; }
.wb-right { margin-left: auto; }
.wb-tool { width: 34px; height: 34px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink); padding: 0; }
.wb-tool:hover { border-color: var(--ink); }
.wb-tool.active { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.wb-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--rule-strong); cursor: pointer; padding: 0; }
.wb-sw.active { box-shadow: 0 0 0 2px var(--accent); }
.wb-zoom { font-size: 12px; color: var(--ink-soft); min-width: 42px; text-align: center; }
.wb-savebtn { padding: 7px 16px; }
.wb-status { font-size: 12px; color: var(--ink-soft); min-width: 90px; }
.wb-canvas { flex: 1; position: relative; overflow: hidden; cursor: default; touch-action: none; background-color: var(--paper); background-image: radial-gradient(circle, var(--rule-strong) 1.1px, transparent 1.2px); background-size: 24px 24px; }
.wb-canvas.panning { cursor: grabbing; }
.wb-canvas.tool-add { cursor: crosshair; }
.wb-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.wb-edges { position: absolute; top: 0; left: 0; overflow: visible; color: var(--ink-soft); }
.wb-edge { stroke: var(--ink-soft); stroke-width: 1.6; fill: none; cursor: pointer; }
.wb-edge.selected { stroke: var(--accent); stroke-width: 2.4; }
.wb-el { position: absolute; box-sizing: border-box; }
.wb-el.note { width: 170px; min-height: 54px; border-radius: 10px; padding: 14px 14px 34px; box-shadow: 0 3px 10px rgba(23,24,27,0.18); border: 1px solid rgba(0,0,0,0.05); color: #17181B; font-size: 13px; line-height: 1.45; cursor: grab; user-select: none; }
.wb-el.note .wb-note-text:empty::before { content: "Yozing..."; color: rgba(23,24,27,0.35); }
.wb-el.note.selected { outline: 1.5px solid #0D99FF; outline-offset: 2px; }
.wb-note-author { position: absolute; left: 14px; bottom: 10px; font-size: 12.5px; color: rgba(23,24,27,0.45); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 28px); }
/* sticky yon tomonidagi + nuqtalari (bosilsa nusxa qo'shiladi) */
.wb-side { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #b7dcf9; border: 1.5px solid #7fbdf2;
  cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; font-weight: 700; line-height: 1; transition: width 0.12s, height 0.12s, background 0.12s; }
.wb-side::before { content: "+"; }
.wb-side:hover { width: 24px; height: 24px; background: #0D99FF; border-color: #0D99FF; color: #fff; box-shadow: 0 2px 8px rgba(13,153,255,0.4); }
.wb-side-t { top: -28px; left: 50%; transform: translateX(-50%); }
.wb-side-b { bottom: -28px; left: 50%; transform: translateX(-50%); }
.wb-side-l { left: -28px; top: 50%; transform: translateY(-50%); }
.wb-side-r { right: -28px; top: 50%; transform: translateY(-50%); }
.wb-el.rect { background: transparent; border: none; padding: 10px 12px; display: flex; align-items: center; justify-content: center; text-align: center; color: #17181B; font-size: 14px; cursor: grab; user-select: none; }
.wb-el.rect .wb-note-text:empty::before { content: "Matn qo'shish"; color: #9aa0a6; }
.wb-el.table { cursor: default; }
.wb-el.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-el.connect-src { outline: 2px dashed var(--accent); outline-offset: 1px; }
.wb-el.editing { cursor: text; }
.wb-note-text { outline: none; white-space: pre-wrap; word-break: break-word; min-height: 18px; user-select: text; width: 100%; }
.wb-rz { position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; background: var(--paper); border: 1.5px solid var(--accent); border-radius: 3px; cursor: nwse-resize; }
.wb-tbl-h { background: var(--soft); border: 1px solid var(--rule-strong); border-bottom: none; border-radius: 8px 8px 0 0; font-size: 11px; color: var(--ink-soft); padding: 3px 8px; cursor: grab; user-select: none; }
.wb-tbl { border-collapse: collapse; background: #fff; box-shadow: 0 2px 7px rgba(23,24,27,0.14); }
.wb-tbl td { border: 1px solid #d7d9de; min-width: 70px; height: 30px; padding: 4px 7px; font-size: 12.5px; color: #17181B; outline: none; vertical-align: top; }
.wb-tc { position: absolute; top: -30px; left: 0; display: flex; gap: 5px; white-space: nowrap; }
.wb-tc button { font-size: 11px; padding: 3px 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; }
.wb-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
.wb-stroke.selected { stroke-dasharray: 6 4; }
.wb-stroke-hl { stroke-opacity: 0.45; stroke-linecap: butt; }
.wb-stroke-hit { fill: none; pointer-events: stroke; cursor: pointer; }

/* ---- FigJam-uslub pastki asboblar paneli ---- */
.wb-dock { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 7px 9px; max-width: 96vw;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(23,24,27,0.16), 0 1px 4px rgba(23,24,27,0.08); }
.wb-dgroup { display: flex; align-items: center; gap: 4px; padding: 0 7px; }
.wb-dgroup + .wb-dgroup { border-left: 1px solid var(--rule); }
.wb-dtool { width: 38px; height: 38px; border: none; border-radius: 10px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--ink); padding: 0; flex: none; }
.wb-dtool:hover { background: var(--soft); }
.wb-dtool.active { background: var(--accent); color: #fff; }
.wb-dtext { font-family: "Inter", sans-serif; font-weight: 700; font-size: 16px; }
.wb-flywrap { position: relative; }
.wb-fly { display: none; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 13px; padding: 6px;
  box-shadow: 0 8px 28px rgba(23,24,27,0.18); gap: 3px; white-space: nowrap; }
.wb-fly.open { display: flex; }
.wb-fly-stamps { flex-wrap: wrap; width: 172px; white-space: normal; }
.wb-fitem { width: 36px; height: 36px; border: none; border-radius: 9px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--ink); padding: 0; }
.wb-fitem:hover { background: var(--soft); }

/* yangi element turlari */
.wb-el { z-index: 1; }
.wb-el.text { background: transparent; min-width: 120px; min-height: 26px; padding: 4px 6px; font-size: 16px; font-weight: 400; color: var(--ink); cursor: grab; user-select: none; }
.wb-el.text.selected { outline: 1.5px solid #0D99FF; outline-offset: 2px; }
.wb-th { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #0D99FF; border-radius: 2px; z-index: 3; }
.wb-th-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.wb-th-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.wb-th-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.wb-th-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.wb-el.text .wb-note-text:empty::before { content: "Matn yozing"; color: var(--ink-faint); font-weight: 400; }
.wb-el.ellipse { background: transparent; border: none; padding: 14px 18px; display: flex; align-items: center; justify-content: center; text-align: center; color: #17181B; font-size: 14px; cursor: grab; user-select: none; }
.wb-shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wb-el.rect .wb-note-text, .wb-el.ellipse .wb-note-text { position: relative; z-index: 1; }
/* qiya tomonli shakllarda matn qirralarga tegmasligi uchun torroq maydon */
.wb-el[data-shape="ellipse"] .wb-note-text { max-width: 76%; }
.wb-el[data-shape="diamond"] .wb-note-text { max-width: 54%; }
.wb-el[data-shape="tri"] .wb-note-text, .wb-el[data-shape="tridown"] .wb-note-text { max-width: 52%; }
.wb-el[data-shape="para"] .wb-note-text { max-width: 62%; }
.wb-el[data-shape="hex"] .wb-note-text { max-width: 68%; }
.wb-el.ellipse .wb-note-text:empty::before { content: "Matn qo'shish"; color: #9aa0a6; }
.wb-el.stamp { background: transparent; font-size: 34px; line-height: 1; cursor: grab; user-select: none; padding: 2px; }
.wb-el.section { z-index: 0; background: rgba(255,255,255,0.5); border: 1.5px solid var(--rule-strong); border-radius: 14px; cursor: grab; user-select: none; }
.wb-el.section.selected { border-color: var(--accent); }
.wb-sec-label { position: absolute; top: -26px; left: 8px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
  background: var(--soft); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 7px; padding: 3px 10px; outline: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.wb-pin { z-index: 5000; } /* komment pinlari doim eng ustida */

/* dock va flyout SVG ikonkalari */
.wb-dtool svg, .wb-fitem svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.wb-dtool-em { font-size: 19px; }
.wb-fitem-em { font-size: 18px; }

/* mind map chizig'i */
.wb-edge-mind { stroke: #9b9ba1; stroke-width: 5; fill: none; stroke-linecap: round; }
.wb-edge-mind.selected { stroke: var(--accent); }

/* ---- matn nastroyka paneli (FigJam-uslub qora bar) ---- */
.wb-tbar { position: absolute; display: none; z-index: 80; align-items: center; gap: 2px; padding: 5px 6px;
  background: #1e1e23; border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.35); color: #fff; }
.wb-tb-group { position: relative; display: flex; align-items: center; }
.wb-tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 30px; height: 30px; padding: 0 6px;
  border: none; border-radius: 7px; background: transparent; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.wb-tb-btn:hover { background: #33333a; }
.wb-tb-btn.on { background: #7C3AED; }
.wb-tb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wb-chev { width: 9px !important; height: 9px !important; opacity: 0.7; }
.wb-tb-dot { width: 15px; height: 15px; border-radius: 50%; background: #17181B; border: 2px solid #55555e; flex: none; }
.wb-tb-aa { font-size: 13px; }
.wb-tb-b { font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; }
.wb-tb-size { font-size: 12.5px; white-space: nowrap; }
.wb-tb-sep { width: 1px; height: 20px; background: #3a3a42; margin: 0 4px; flex: none; }
.wb-tb-fly { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: #1e1e23; border-radius: 11px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 90; gap: 4px; }
.wb-tb-fly.open { display: flex; }
.wb-tb-colors { width: 236px; flex-wrap: wrap; gap: 5px; }
.wb-tb-cw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none; }
.wb-tb-cw:hover { border-color: #fff; }
.wb-tb-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; overflow: hidden; display: inline-block; }
.wb-tb-custom input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.wb-tb-list { flex-direction: column; min-width: 140px; }
.wb-tb-list button { display: block; position: relative; text-align: left; border: none; background: transparent; color: #fff;
  padding: 7px 10px 7px 26px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.wb-tb-list button:hover { background: #33333a; }
.wb-tb-list button.on::before { content: "✓"; position: absolute; left: 9px; }
.wb-tb-list input[type=number] { margin: 4px 6px 2px; width: 84px; background: #2a2a31; border: 1px solid #7C3AED; color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 12.5px; }
.wb-tb-linkfly { align-items: center; min-width: 230px; }
.wb-tb-linkfly input { flex: 1; background: #2a2a31; border: 1px solid #3a3a42; color: #fff; border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
.wb-tb-lbtn { border: none; background: #7C3AED; color: #fff; border-radius: 6px; padding: 5px 9px; font-size: 12px; cursor: pointer; text-decoration: none; }
#tbAlignFly { flex-direction: row; }
.wb-dtool .wb-ic-sticky { width: 21px; height: 21px; }
.wb-tbar[data-kind="note"] #tbMind { display: none; }
.wb-tbar:not([data-kind="note"]) #tbAuthor { display: none; }
.wb-tbar[data-kind="note"] .tb-c-text { display: none; }
.wb-tbar:not([data-kind="note"]) .tb-c-note { display: none; }
.wb-tbar[data-kind="note"] .wb-tb-colors { width: 176px; }
.wb-tbar .tb-shape-only { display: none; }
.wb-tbar[data-kind="shape"] .tb-shape-only { display: flex; }
.wb-tbar[data-kind="shape"] .tb-txtcolor { display: none; }
.wb-tbar[data-kind="shape"] #tbMind { display: none; }
.wb-tb-shapes { flex-wrap: wrap; width: 190px; }
.wb-tb-shapes .wb-tb-btn.on { background: #7C3AED; }
.wb-tb-cwrap { flex-direction: column; align-items: stretch; }
.wb-tb-cinner { display: flex; flex-wrap: wrap; gap: 5px; width: 236px; }
.wb-tb-lsrow { display: flex; gap: 4px; margin-bottom: 7px; }
.wb-tb-lsbtn { border: none; background: transparent; color: #fff; border-radius: 7px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wb-tb-lsbtn:hover { background: #33333a; }
.wb-tb-lsbtn.on { background: #7C3AED; }
.wb-cw-none { background: #fff; position: relative; }
.wb-cw-none::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: #e11d48; transform: rotate(-45deg); border-radius: 2px; }
.wb-dot-none { position: relative; background: #fff !important; }
.wb-dot-none::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.6px; background: #e11d48; transform: rotate(-45deg); }
.wb-back { text-decoration: none; }
.wb-name { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.wb-scope { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--soft); color: var(--ink-soft); white-space: nowrap; }
.wb-scope-personal { background: var(--accent-tint); color: var(--accent); }

/* Shablonlar tugmasi (yuqori panel) */
.wb-tplbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper);
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.wb-tplbtn:hover { border-color: var(--accent); color: var(--accent); }
.wb-tplbtn svg { width: 15px; height: 15px; fill: currentColor; }

/* Shablonlar oynasi (modal) */
.wb-tpl-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(17,18,20,0.44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.wb-tpl-overlay.open { display: flex; }
.wb-tpl-modal {
  width: 100%; max-width: 860px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  box-shadow: var(--elev-3); overflow: hidden;
}
.wb-tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--hairline); }
.wb-tpl-head h2 { margin: 0 0 4px; font-size: 20px; }
.wb-tpl-head p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.wb-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
  padding: 18px 22px 24px; overflow-y: auto;
}
.wb-tpl-card {
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper);
  padding: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.wb-tpl-card:hover { border-color: var(--accent); box-shadow: var(--elev-2); transform: translateY(-2px); }
.wb-tpl-thumb { height: 116px; background: var(--soft); border-bottom: 1px solid var(--hairline); display: block; }
.wb-tpl-thumb svg { width: 100%; height: 100%; display: block; }
.wb-tpl-meta { padding: 11px 13px 13px; }
.wb-tpl-name { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 3px; }
.wb-tpl-desc { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin: 0; }
@media (max-width: 520px) { .wb-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.sb-section { margin-bottom: 34px; }
.sb-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sb-section-head h2 { margin: 0; }
.sb-section-hint { font-size: 12px; color: var(--ink-faint); }
.sb-lock { font-size: 13px; }

/* ---- Strategiya doskalari ro'yxati (Figma-uslub kartalar) ---- */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sb-card { position: relative; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); overflow: visible; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.sb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(23,24,27,0.12); border-color: var(--rule-strong); }
.sb-thumb { display: block; aspect-ratio: 16 / 10; border-radius: 9px 9px 0 0; overflow: hidden; background: var(--soft); background-image: radial-gradient(var(--rule) 1px, transparent 1px); background-size: 14px 14px; position: relative; }
.sb-thumb svg { width: 100%; height: 100%; display: block; }
.sb-thumb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-faint); }
.sb-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 12px 11px; border-top: 1px solid var(--rule); }
.sb-info { min-width: 0; flex: 1; }
.sb-name { display: block; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-name:hover { color: var(--accent); }
.sb-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.sb-rename-form { display: none; }
.sb-card.renaming .sb-rename-form { display: block; }
.sb-card.renaming .sb-name { display: none; }
.sb-rename-form input { font-size: 13px; padding: 5px 8px; }
.sb-menu-wrap { position: relative; flex: none; }
.sb-kebab { border: none; background: transparent; font-size: 17px; line-height: 1; color: var(--ink-soft); padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.sb-kebab:hover { background: var(--soft); color: var(--ink); }
.sb-menu { display: none; position: absolute; right: 0; top: 26px; z-index: 30; min-width: 175px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 8px; box-shadow: 0 10px 30px rgba(23,24,27,0.18); padding: 5px; }
.sb-menu-wrap.open .sb-menu { display: block; }
.sb-menu form { margin: 0; }
.sb-menu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; font-size: 13px; padding: 8px 10px; border-radius: 5px; cursor: pointer; color: var(--ink); }
.sb-menu-item:hover { background: var(--soft); }
.sb-menu-danger { color: var(--red); }
.sb-menu-danger:hover { background: var(--red-tint); }
.sb-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 205px; border: 1.5px dashed var(--rule-strong); background: transparent; cursor: pointer; font-family: inherit; }
.sb-new:hover { border-color: var(--accent); }
.sb-new:hover .sb-new-plus, .sb-new:hover .sb-new-label { color: var(--accent); }
.sb-new-plus { font-size: 34px; line-height: 1; color: var(--ink-faint); transition: color 0.15s; }
.sb-new-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color 0.15s; }
.sb-new-form { display: none; width: 100%; padding: 0 16px; flex-direction: column; gap: 8px; }
.sb-new-form input { text-align: center; }
.sb-new.naming .sb-new-form { display: flex; }
.sb-new.naming .sb-new-plus, .sb-new.naming .sb-new-label { display: none; }
.wb-pin { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 3px; background: #7C3AED; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer; }
.wb-cthread { position: fixed; z-index: 200; width: 300px; max-width: 92vw; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); padding: 12px 14px; display: none; }
.wb-cthread.open { display: block; }
.wb-ct-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wb-ct-body { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.wb-ctm { padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.4; }
.wb-ctm:last-child { border-bottom: none; }
.wb-ctm-a { font-weight: 600; }
.wb-ctm-t { font-size: 11px; color: var(--ink-faint); margin-left: 6px; }
.wb-ct-form { display: flex; gap: 6px; }
.wb-ct-form input { flex: 1; }
.wb-ct-form button { padding: 6px 12px; }
.wb-canvas.tool-draw { cursor: crosshair; }
.wb-canvas.tool-hand { cursor: grab; }
.wb-canvas.tool-hand.panning { cursor: grabbing; }
.wb-marquee { position: absolute; display: none; border: 1.5px dashed #7C3AED; background: rgba(124,58,237,0.07); border-radius: 2px; pointer-events: none; z-index: 5; }
.wb-guide { position: absolute; display: none; background: #0D99FF; z-index: 50; pointer-events: none; }
.wb-guide-v { width: 1.5px; top: 0; bottom: 0; }
.wb-guide-h { height: 1.5px; left: 0; right: 0; }

/* Figma-uslub kursor: oq strelka, qora hoshiya (uchi = 4,2 nuqta) */
.wb-page { --wb-cur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4.5 2.2 L20.5 13.2 L12.8 14.4 L8.8 21.6 Z' fill='white' stroke='%23111318' stroke-width='1.7' stroke-linejoin='round'/></svg>") 4 2, default; }
.wb-canvas, .wb-el.note, .wb-el.rect, .wb-el.ellipse, .wb-el.text, .wb-el.stamp, .wb-el.section, .wb-tbl-h { cursor: var(--wb-cur); }
.wb-hint { position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 6px 14px; pointer-events: none; box-shadow: 0 2px 8px rgba(23,24,27,0.08); }
@media (max-width: 620px) { .wb-hint { font-size: 10.5px; width: 90%; text-align: center; } .wb-bar { gap: 8px; } }

/* ---- Kalendar kun tafsiloti (modal) ---- */
.cal-clickable { cursor: pointer; }
.cal-cell .cal-chip { pointer-events: none; }
.cal-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.34); opacity: 0; visibility: hidden; transition: opacity 0.18s; z-index: 60; }
.cal-modal-overlay.open { opacity: 1; visibility: visible; }
.cal-modal { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -46%); width: 430px; max-width: 92vw; max-height: 82vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.24); padding: 18px 20px; opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s; }
.cal-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.cal-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-modal-head h3 { font-family: "Inter", sans-serif; font-size: 16px; margin: 0; text-transform: capitalize; }
.cal-modal-body { margin-bottom: 14px; }
.cm-holiday { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.cm-item { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cm-item:last-child { margin-bottom: 0; }
.cm-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.cm-item-meta { font-size: 12px; color: var(--ink-soft); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.cm-item-notes { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.cm-edit { margin-top: 8px; display: inline-block; }
.cal-modal-add { display: block; text-align: center; }

/* ---- Reyting posteri ---- */
.poster-toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.poster-page { display: flex; justify-content: center; }
.poster { width: 210mm; max-width: 100%; background: #FAF7F0; color: #17181B; padding: 20mm 16mm; box-shadow: 0 8px 30px rgba(0,0,0,0.14); }
.poster-head { text-align: center; border-bottom: 3px solid #C43E24; padding-bottom: 16px; margin-bottom: 18px; }
.poster-brand { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C43E24; margin-bottom: 12px; }
.poster-title { font-family: "Inter", sans-serif; font-size: 38px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.poster-month { font-size: 17px; color: #75746D; text-transform: capitalize; }
.poster-row { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-bottom: 1px solid #E2DFD4; }
.poster-row.top { background: #FBF1E8; border-radius: 10px; border-bottom: none; margin-bottom: 4px; }
.poster-rank { width: 40px; text-align: center; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; color: #75746D; flex-shrink: 0; }
.poster-row.top .poster-rank { font-size: 28px; }
.poster-region { flex: 1; min-width: 0; }
.poster-region-name { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 600; }
.poster-row.top .poster-region-name { font-size: 21px; }
.poster-secretary { font-size: 12px; color: #75746D; margin-top: 1px; }
.poster-score { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; color: #C43E24; flex-shrink: 0; }
.poster-foot { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid #E2DFD4; font-size: 12px; color: #75746D; }

/* ---- Bosib chiqarish (PDF) — umumiy ---- */
.print-only { display: none; }
@media print {
  .topbar, .drawer, .drawer-overlay, .cal-modal, .cal-modal-overlay, .no-print { display: none !important; }
  body { background: #fff; }
  body::before { display: none !important; }
  .wrap { max-width: none; margin: 0; padding: 0; }
  .print-only { display: block; }
  a[href]:after { content: "" !important; }
  /* Chop etishda shisha va soyalar o'rniga toza oq yuza */
  .panel, .stat-box, .form-card, .table-scroll, .ucard, .org-canvas, .org-node,
  .login-card, .mission-box, .up-panel, .pr-card, .pr-weekbar, .pr-mycard, .board-col, .tcard {
    background: #fff !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid #DEDCD1 !important;
  }
  .mission-box::after { display: none !important; }
}

/* ---- Mobil moslashuvchanlik ---- */
.nav-toggle { display: none; background: none; border: 1px solid var(--rule-strong); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-toggle:hover { border-color: var(--ink); }

@media (max-width: 820px) {
  .topbar { padding: 11px 14px; }
  .nav-toggle { display: inline-flex; }
  /* tor ekranda faqat ramz qoladi */
  .brand-full { display: none; }
  .brand-mark { display: block; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 6px 14px 12px; box-shadow: 0 12px 26px rgba(0,0,0,0.12); z-index: 30;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 6px; border-bottom: none; border-top: 1px solid var(--rule); font-size: 14.5px; }
  .nav-links a:first-child { border-top: none; }
  .nav-links a:hover, .nav-links a.active { color: var(--accent); border-bottom-color: transparent; }
  .profile-name { display: none; }
  .wrap { padding: 18px 14px 56px; }
  .dash-greet { font-size: 25px; }
  .mission-text { font-size: 17px; }
  .mission-box { padding: 16px 18px; }
  .page-header { flex-direction: column; align-items: stretch; }
  h1 { font-size: 19px; }
}

@media (max-width: 520px) {
  .task-meta { gap: 10px 16px; }
  .cal-month-label { font-size: 15px; min-width: 0; }
}

/* ===== iPad / sensorli planshetlar ni to'g'ri ko'rsatish =====
   Yuqoridagi (820px) gamburger menyu faqat telefon kengligida ishlaydi.
   iPad landscape (1024–1366px) da esa 15 ta bo'lim gorizontal qatorga
   sig'may, 2-3 qatorga bo'linib ketardi. Shuning uchun shu oraliqда ham
   menyuни gamburgerга o'tkazamiz. `pointer: coarse` — faqat sensorli
   ekran (iPad/planshet); sichqonchali KOMPYUTER (pointer: fine) mutlaqo
   o'zgarmaydi, ish stolidagi ko'rinish saqlanadi. */
@media (min-width: 821px) and (max-width: 1400px) and (pointer: coarse) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 14px; left: auto;
    width: min(340px, 88vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
    padding: 6px 14px 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.18); z-index: 30;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 6px; border-bottom: none; border-top: 1px solid var(--rule); font-size: 15px; }
  .nav-links a:first-child { border-top: none; }
  .nav-links a:hover, .nav-links a.active { color: var(--accent); border-bottom-color: transparent; }
}

/* keng jadvallar (reyting/kotiblar) mobilда yon-scroll bilan */
.month-nav { flex-wrap: wrap; }
@media (max-width: 820px) {
  .table-scroll table { min-width: 560px; }
  .table-scroll { border: 1px solid var(--rule); border-radius: 10px; }
}

/* oddiy ro'yxat jadvallari (.rtable) mobilда kartaga aylanadi */
@media (max-width: 640px) {
  .table-scroll:has(.rtable) { border: none; }
  .rtable { min-width: 0 !important; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: auto; }
  .rtable tr:first-child { display: none; }
  .rtable tr { border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 10px; padding: 10px 14px; background: var(--paper); box-shadow: 0 1px 2px rgba(23,24,27,0.05); }
  .rtable tr:hover td { background: none; }
  .rtable td { border: none; padding: 5px 0; }
  .rtable td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 3px; }
  .rtable td:not([data-label])::before, .rtable td[data-label=""]::before { display: none; }
  .rtable td.cell-actions { padding-top: 10px; }
}
.tcard-foot { display: flex; align-items: center; gap: 9px; }
.tcard-user { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit; }
.tcard-user:hover .tcard-person { color: var(--accent); }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mini-empty { background: var(--soft); color: var(--ink-faint); }
.btn-pill, a.btn-pill { border-radius: 99px; padding: 12px 22px; }
.mini-empty { background: var(--soft); color: var(--ink-faint); border: 1px solid var(--rule); }
.tcard-person { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-faint { color: var(--ink-faint); }
.tcard-due { margin-left: auto; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.tcard-part { color: var(--ink-faint); font-weight: 500; }

/* ---- ko'p mas'ul: board kartasidagi ustma-ust avatarlar ---- */
.tcard-users { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; }
.tcard-users .mini-avatar { width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--surface); }
.tcard-users .mini-avatar:first-child { margin-left: 0; }

/* ---- forma: mas'ullar bloki (to'liq kenglikда, alohida) ---- */
.asg-block { margin: 6px 0 4px; }
.asg-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; padding: 0 2px; }
.asg-head-ic { font-size: 15px; }
.asg-head-hint { font-weight: 500; font-size: 12px; color: var(--ink-faint); }
.asg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.asg-row {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  padding: 4px 6px 4px 8px; transition: border-color 0.15s, box-shadow 0.15s;
}
.asg-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.asg-row .asg-user,
.asg-row .asg-part {
  border: none; background: none; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 8px; min-width: 0; border-radius: 8px;
}
.asg-row .asg-user { flex: 1; cursor: pointer; }
.asg-row .asg-part { flex: 1.25; }
.asg-row .asg-user:focus, .asg-row .asg-part:focus { outline: none; }
.asg-row .asg-part::placeholder { color: var(--ink-faint); }
.asg-sep { flex: none; width: 1px; align-self: stretch; background: var(--rule); margin: 8px 2px; }
.asg-del {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: none;
  background: none; color: var(--ink-faint); cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.asg-del:hover { background: var(--red-tint); color: var(--red); }
.asg-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 1px dashed var(--rule-strong); background: none; color: var(--ink-soft);
  border-radius: 12px; padding: 12px 16px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; transition: all 0.15s;
}
.asg-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.asg-add-plus { font-size: 17px; line-height: 1; font-weight: 400; }
@media (max-width: 620px) {
  .asg-row { flex-wrap: wrap; }
  .asg-row .asg-user, .asg-row .asg-part { flex: 1 1 100%; }
  .asg-sep { display: none; }
  .asg-del { position: absolute; }
  .asg-row { position: relative; padding-right: 40px; }
  .asg-del { right: 4px; top: 4px; }
}

/* ---- mas'ul qismi belgisi (badge) ---- */
.asg-part-tag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  background: var(--accent-tint); color: var(--accent); vertical-align: middle;
}
.asg-part-none { background: var(--soft); color: var(--ink-faint); }

/* ---- tafsilotdagi mas'ullar kartalari ---- */
.asg-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.asg-card {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px;
  border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); font-size: 13px;
}
.asg-card-me { border-color: var(--accent); background: var(--accent-tint); }
.asg-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }

@media (max-width: 620px) {
  .cal-hfull { display: none; }
  .cal-hshort { display: inline; }
  .cal-cell { min-height: 80px; }
}

/* ---- Notion uslubidagi yozuv formasi ---- */
.np-editor { max-width: 640px; margin: 4px auto 0; }
.np-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; background: var(--soft); border-radius: 12px; margin-bottom: 16px; }
input.np-title { width: 100%; border: none; background: none; font-family: "Inter", sans-serif; font-size: 33px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); padding: 2px 0; margin-bottom: 20px; }
input.np-title::placeholder { color: var(--ink-faint); }
input.np-title:focus { outline: none; }
.np-hint { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: -10px 0 18px; }
.np-props { display: flex; flex-direction: column; gap: 2px; }
.np-row { display: flex; align-items: center; gap: 10px; min-height: 34px; border-radius: 6px; padding: 1px 6px; }
.np-row:hover { background: var(--soft); }
.np-key { flex: 0 0 168px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.np-key-ic { font-size: 14px; width: 18px; text-align: center; opacity: 0.85; }
.np-val { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
input.np-input, select.np-input, textarea.np-input { border: none; background: none; font-family: inherit; font-size: 14px; color: var(--ink); padding: 6px 8px; border-radius: 6px; width: 100%; }
select.np-input { cursor: pointer; }
input.np-input:hover, select.np-input:hover, textarea.np-input:hover { background: var(--soft); }
input.np-input:focus, select.np-input:focus, textarea.np-input:focus { outline: none; background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.np-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #9C6B15; }
.np-divider { height: 1px; background: var(--rule); margin: 18px 0; }
.np-block .np-key-block { margin-bottom: 6px; padding: 0 6px; }
textarea.np-textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.np-actions { display: flex; gap: 8px; margin-top: 24px; }

/* ---- Ro'yxat ko'rinishi + ikonka tugmalar ---- */
.list-table th, .list-table td { vertical-align: middle; }
.nowrap { white-space: nowrap; }
.row-title { font-weight: 600; text-decoration: none; color: var(--ink); }
.row-title:hover { color: var(--accent); text-decoration: underline; }
.tag-soft { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--soft); border: 1px solid var(--rule); border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.cell-person { display: inline-flex; align-items: center; gap: 7px; }
.cell-person-name { font-size: 13px; }
.spill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.4; transition: opacity 0.12s; }
tr:hover .row-actions { opacity: 1; }
/* ---- Amal ikonkalari: tahrirlash / o'chirish (butun sayt bo'ylab) ---- */
.icon-btn {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 50%; background: var(--surface);
  cursor: pointer; color: var(--ink-soft); padding: 0; text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.icon-btn svg {
  width: 17px; height: 17px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn:hover { color: var(--ink); border-color: var(--rule-strong); box-shadow: var(--elev-1); transform: translateY(-1px); }
.icon-btn.danger:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-tint); }
.icon-btn.lg { width: 40px; height: 40px; }
.icon-btn.lg svg { width: 19px; height: 19px; }
/* matnli tugma ichidagi ikonka (ataylab yozuvi qoladigan xavfli amallar uchun) */
.btn-ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cell-actions .action-row, .cell-actions .row-actions { gap: 8px; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* ---- Kalendar: bir tekis katak balandligi (kompyuter + telefon) ---- */
.cal-cell { min-height: 0; overflow: hidden; }
.cal-grid { grid-auto-rows: 104px; }
@media (max-width: 700px) {
  .cal-grid { grid-auto-rows: 88px; }
  .cal-chip { font-size: 10px; padding: 1px 5px; }
  .cal-holiday { font-size: 9px; }
}
@media (max-width: 420px) {
  .cal-grid { grid-auto-rows: 74px; }
}

/* ---- Notion forma mobil (asosiy qoidalardan KEYIN — CSS tartibi muhim) ---- */
@media (max-width: 640px) {
  .np-editor { max-width: 100%; margin-top: 0; }
  .np-props { display: block; }
  .np-row { display: block; min-height: 0; padding: 9px 2px; border-radius: 0; border-bottom: 1px solid var(--rule); }
  .np-row:hover { background: none; }
  .np-key { flex: none; width: auto; margin-bottom: 5px; font-size: 12.5px; }
  .np-val { display: flex; width: 100%; }
  input.np-title { font-size: 27px; margin-bottom: 16px; }
  .np-icon { width: 52px; height: 52px; font-size: 30px; }
}

/* ==========================================================================
   YAKUNIY SAYQAL QATLAMI — butun sayt bitta dizayn tilida
   (yumaloq yuzalar, shisha panellar, mayin chuqurlik, tabletka boshqaruvlar)
   ========================================================================== */

/* ---- Loyihalar / hududlar / statistika kartalari ---- */
.pr-card, .pr-mycard, .sc-card {
  border: 1px solid var(--glass-brd); border-left: 0; border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2); padding: 18px 20px;
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s;
}
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
/* holat rangi endi chap chiziq emas — yuqoridagi mayin rangli yoy */
.pr-card { position: relative; overflow: hidden; }
.pr-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--rule-strong);
}
.pr-card.pr-qabul::before { background: var(--green); }
.pr-card.pr-yangi::before { background: var(--amber); }
.pr-card.pr-rad::before { background: var(--red); }
.pr-card.pr-yoq::before { background: var(--rule-strong); }
.pr-weekbar {
  border: 1px solid var(--glass-brd); border-radius: 99px; padding: 12px 20px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-1); margin-bottom: 20px;
}
.pr-grid { gap: 18px; }
.pr-feedback, .pr-okmsg, .dg-note { border-radius: var(--r-md); padding: 11px 15px; }
.pr-sq { border-radius: 99px; height: 8px; width: 20px; }

/* ---- Profil sahifasi panellari ---- */
.up-panel {
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 20px 22px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2); margin-bottom: 18px;
}
.up-stat { border: 1px solid var(--glass-brd); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--elev-1); }

/* ---- Reja biriktirish / maqsad ---- */
.dg-plan {
  border: 1px solid var(--glass-brd); border-left: 0; border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2); padding: 18px 20px;
}
.dg-staff { border: 1px solid var(--rule); border-radius: var(--r-md); }
.goal-track-wide {
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 18px 20px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2);
}
.goal-bar { height: 10px; }

/* ---- Vazifa tafsiloti ---- */
.task-meta {
  display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center;
  margin-bottom: 24px; padding: 14px 20px; border: 1px solid var(--glass-brd);
  border-radius: 99px; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-1);
}
.report-item {
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 16px 20px;
  background: var(--surface); box-shadow: var(--elev-1); margin-bottom: 12px;
}
.report-item:last-child { border-bottom: 1px solid var(--glass-brd); }
.review-form { margin-top: 12px; }

/* ---- Kichik boshqaruvlar ---- */
.theme-opt { border-radius: 14px; border-color: var(--rule); }
.theme-opt.active { box-shadow: inset 0 0 0 1.5px var(--accent); }
.emoji-opt { border-radius: 14px; border-color: var(--rule); background: var(--surface); }
.cover-swatch { border-radius: 14px; height: 48px; }
.spill { border-radius: 99px; padding: 4px 11px; }
.nav-toggle { border-radius: 99px; }
.profile-btn { border-radius: 99px; }
.profile-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.wb-tool, .wb-dtool, .wb-fitem { border-radius: 12px; }
.wb-dock, .wb-fly { border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-brd); }

/* ---- Jamoa (eski) a'zo kartalari ---- */
.tm-card { border: 1px solid var(--glass-brd); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-2); }

/* ---- Sarlavhalar biroz kattaroq va zich ---- */
h1 { font-size: 26px; letter-spacing: -0.025em; }
.page-header { margin-bottom: 22px; }
.sub { max-width: 74ch; }

/* ---- Sahifa mayin ochiladi ---- */
.wrap > * { animation: riseIn 0.5s cubic-bezier(.2,.7,.2,1) both; }
.wrap > *:nth-child(2) { animation-delay: 0.04s; }
.wrap > *:nth-child(3) { animation-delay: 0.08s; }
.wrap > *:nth-child(n+4) { animation-delay: 0.12s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* position:fixed elementlarni animatsiya qilmaymiz — transform ularning joyini buzadi */
.wrap > .wb-page, .wrap > .welcome-splash, .wrap > .cal-modal, .wrap > .cal-modal-overlay,
.wrap > script, .wrap > style { animation: none !important; }

/* Harakatni kamaytirish so'ralgan bo'lsa — animatsiyasiz */
@media (prefers-reduced-motion: reduce) {
  .wrap > *, .ws-greet, .ws-sub { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- Shisha ishlamaydigan brauzerlarda ham chiroyli qolsin ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .drawer { background: var(--paper); }
  .panel, .stat-box, .form-card, .table-scroll, .up-panel, .pr-card, .pr-weekbar,
  .pr-mycard, .dg-plan, .goal-track-wide, .task-meta, .org-canvas { background: var(--surface); }
}

/* ---- Mobil: yumaloqlik biroz kichrayadi ---- */
@media (max-width: 620px) {
  :root { --r-lg: 20px; --r-xl: 24px; }
  .table-scroll { padding: 4px 12px 6px; }
  .task-meta, .pr-weekbar { border-radius: var(--r-lg); }
  h1 { font-size: 22px; }
}

/* ---- Kalendar: yumaloq shisha yuza ---- */
.cal-wrap {
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-2);
}
.cal-head { background: color-mix(in srgb, var(--ink) 4%, transparent); border-bottom: 1px solid var(--hairline); }
.cal-cell { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cal-cell:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cal-out, .cal-out:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cal-nav-btn { border-radius: 50%; width: 32px; height: 32px; border-color: var(--rule); background: var(--surface); }
.cal-chip { border-radius: 99px; padding: 3px 9px; }
.cal-add { border-radius: 50%; }
.cal-modal { border-radius: var(--r-lg) !important; }

/* ---- Bilim testi: variantlar ---- */
.opt-row { border-top: 1px solid var(--hairline); border-radius: var(--r-md); padding: 13px 14px; }
.opt-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.opt-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.opt-row.selected { background: var(--accent-tint); }
.visual-grid { border-radius: var(--r-md); overflow: hidden; border-color: var(--hairline); }
.progress-track { border-radius: 99px; }

/* ---- Reyting ---- */
.rating-box { box-shadow: var(--elev-1); }
.cv-q { border-radius: 99px; }

/* ---- Ikonkali amal tugmalari uchun kichik moslashtirishlar ---- */
.sb-menu-item { display: flex; align-items: center; border-radius: 10px; padding: 9px 11px; }
.sb-kebab { border-radius: 50%; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.cm-item { border-radius: var(--r-md); border-color: var(--hairline); }
.cm-edit { margin-top: 10px; }
/* maqsad qutisidagi qalam — burchakda, shisha ustida */
.mission-edit { position: absolute; top: 14px; right: 16px; background: var(--surface); }
/* amal ustuni tor bo'lsa ham ikonkalar bir qatorda tursin */
.cell-actions { white-space: nowrap; width: 1%; }
.cell-actions .action-row, .cell-actions .row-actions { flex-wrap: nowrap; margin-bottom: 0; justify-content: flex-end; }

/* ==========================================================================
   DARK mavzusi — studiya uslubi: sof qora + nuqtali to'r, xrom sarlavhalar,
   chartrez ulanish chiziqlari, chiziqlar bo'ylab yuguradigan yorug'lik.
   ========================================================================== */
/* Dark mavzu — Husniddin Isakov shaxsiy sayti (MagicWand) palitrasi:
   tim qora #060606 fon, oq glow, nozik oq-shaffof chiziqlar. Monoxrom — accent OQ. */
:root[data-theme='dark'] {
  --paper: #060606; --soft: #0b0b0b; --ink: #f5f5f5; --ink-soft: #a3a3a3; --ink-faint: #6b6b6b;
  --rule: rgba(255,255,255,0.08); --rule-strong: rgba(255,255,255,0.16);
  --accent: #ffffff; --accent-tint: rgba(255,255,255,0.10);
  --surface: #0b0b0b;
  --glass: rgba(8,8,8,0.72);
  --glass-strong: rgba(4,4,4,0.9);
  --glass-brd: rgba(255,255,255,0.10);
  --hairline: rgba(255,255,255,0.08);
  --elev-1: 0 2px 10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  --elev-2: 0 18px 44px rgba(0,0,0,0.85), 0 0 34px rgba(255,255,255,0.05);
  --elev-3: 0 28px 70px rgba(0,0,0,0.92), 0 0 48px rgba(255,255,255,0.06);
  --uc-chip: #141414;
  --aura-1: #000000; --aura-2: #000000;
}

/* Accent OQ bo'lgani uchun: oq fonli elementlarda matn QORA bo'ladi */
:root[data-theme='dark'] .notif-badge,
:root[data-theme='dark'] .uref-av,
:root[data-theme='dark'] .profile-avatar,
:root[data-theme='dark'] .drawer-avatar,
:root[data-theme='dark'] .pe-preview,
:root[data-theme='dark'] .wb-dtool.active,
:root[data-theme='dark'] .pg-org.active .pg-org-n,
:root[data-theme='dark'] .plan-hist-move-all:hover { color: #060606; }
:root[data-theme='dark'] .goal-fill { background: linear-gradient(90deg, #ffffff, #b9b9b9); box-shadow: 0 0 14px rgba(255,255,255,0.35); }
/* H.Isakov uslubi: oq tugma hover'da ko'tarilib porlaydi */
:root[data-theme='dark'] .btn-primary:hover { box-shadow: 0 0 22px rgba(255,255,255,0.35); transform: translateY(-2px); }
:root[data-theme='dark'] .btn-secondary:hover { border-color: rgba(255,255,255,0.4); }

/* --- fon: tim qora + mayin oq nurlar (H.Isakov sayti uslubi, nuqtali to'rsiz) --- */
:root[data-theme='dark'] body::before {
  opacity: 1;
  background-color: #060606;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,0.03), transparent 50%);
  background-size: 100% 100%, 100% 100%;
}

/* --- sarlavhalar: toza oq + nozik glow (H.Isakov sayti uslubi) --- */
:root[data-theme='dark'] h1 {
  color: #f5f5f5;
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(255,255,255,0.22);
}
:root[data-theme='dark'] .sub { color: #a3a3a3; }

/* --- yuqori panel: ustunli tuzilma + orqasidan mayin oq nur --- */
:root[data-theme='dark'] .topbar {
  background: #060606; border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; position: sticky; overflow: hidden;
}
:root[data-theme='dark'] .topbar::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.42), transparent 70%);
  filter: blur(34px); pointer-events: none; z-index: 0;
}
:root[data-theme='dark'] .topbar > * { position: relative; z-index: 1; }
:root[data-theme='dark'] .nav-links { gap: 0; }
:root[data-theme='dark'] .nav-links a {
  padding: 7px 15px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
  border-left: 1px solid rgba(255,255,255,0.09); border-bottom: 0;
  color: #8E8E8E;
}
:root[data-theme='dark'] .nav-links a:first-child { border-left: 0; }
:root[data-theme='dark'] .nav-links a:hover { color: #fff; }
:root[data-theme='dark'] .nav-links a.active { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.55); }
/* Dark mavzuda logo biroz kichikroq va nur bilan */
:root[data-theme='dark'] .brand-full { width: 186px; height: 33px; }
:root[data-theme='dark'] .brand { filter: drop-shadow(0 0 12px rgba(255,255,255,0.28)); }

/* --- yuzalar: qirrasi ingichka, ortida mayin yog'du (3-rasm uslubi) --- */
:root[data-theme='dark'] .ucard,
:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .stat-box,
:root[data-theme='dark'] .form-card,
:root[data-theme='dark'] .table-scroll,
:root[data-theme='dark'] .tcard,
:root[data-theme='dark'] .up-panel,
:root[data-theme='dark'] .pr-card,
:root[data-theme='dark'] .pr-weekbar,
:root[data-theme='dark'] .task-meta,
:root[data-theme='dark'] .org-node,
:root[data-theme='dark'] .team-chip,
:root[data-theme='dark'] .login-card {
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 42px rgba(255,255,255,0.05);
}
:root[data-theme='dark'] .board-col { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.07); }
:root[data-theme='dark'] .icon-btn { background: #0E0E0E; border-color: rgba(255,255,255,0.12); }
:root[data-theme='dark'] .seg { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
:root[data-theme='dark'] .seg a.active { background: #FFFFFF; color: #000; }
:root[data-theme='dark'] .btn-primary { background: #FFFFFF; color: #000; border-color: #FFFFFF; }
:root[data-theme='dark'] .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #000; }
:root[data-theme='dark'] .stat-ic,
:root[data-theme='dark'] .panel-ic {
  background: rgba(255,255,255,0.08); color: var(--accent);
  box-shadow: 0 0 18px rgba(255,255,255,0.20);
}

/* --- ULANISH CHIZIQLARI: chartrez + bo'ylab yuguradigan yorug'lik --- */
/* Strategiya doskasi */
.wb-flow { fill: none; stroke: none; pointer-events: none; }
:root[data-theme='dark'] .wb-edge { stroke: rgba(255,255,255,0.45); stroke-width: 1.8; }
:root[data-theme='dark'] .wb-edge.selected { stroke: #FFFFFF; stroke-width: 2.6; }
:root[data-theme='dark'] .wb-flow {
  stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 22 420;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  animation: flowRun 3.4s linear infinite;
}
@keyframes flowRun { from { stroke-dashoffset: 442; } to { stroke-dashoffset: 0; } }

/* Jamoa tuzilmasi — pog'onalar orasidagi chiziqda pastga tushuvchi uchqun */
/* Ulanish chizig'i — ingichka, chiroq mayin: tanasi 2px, nur (glow) keng va yumshoq */
:root[data-theme='dark'] .org-link {
  background: rgba(255,255,255,0.14); position: relative; height: 42px; width: 2px; border-radius: 2px;
  overflow: visible;
}
:root[data-theme='dark'] .org-link::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px; top: -18px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.85) 50%, transparent);
  box-shadow: 0 0 10px 1px rgba(255,255,255,0.55), 0 0 26px 6px rgba(255,255,255,0.25);
  animation: orgFlow 2.4s linear infinite;
}
@keyframes orgFlow { from { top: -18px; } to { top: 44px; } }
:root[data-theme='dark'] .org-canvas {
  background-color: rgba(255,255,255,0.015);
  background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1.3px);
  background-size: 28px 28px;
  border-color: rgba(255,255,255,0.09);
}
:root[data-theme='dark'] .org-node:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 34px rgba(255,255,255,0.15); }

/* --- IKONKALAR (faqat dark): referens uslubi — dumaloq to'ldirilgan doira ichida --- */
:root[data-theme='dark'] .stat-ic,
:root[data-theme='dark'] .panel-ic,
:root[data-theme='dark'] .sc-icon,
:root[data-theme='dark'] .pg-org-ic,
:root[data-theme='dark'] .notif-ic,
:root[data-theme='dark'] .plan-nudge-ic,
:root[data-theme='dark'] .rm-card-ic,
:root[data-theme='dark'] .g-home-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 12px rgba(255,255,255,0.06);
}
:root[data-theme='dark'] .stat-ic, :root[data-theme='dark'] .panel-ic { width: 32px; height: 32px; }
:root[data-theme='dark'] .sc-icon { width: 30px; height: 30px; font-size: 15px; }
:root[data-theme='dark'] .pg-org-ic { width: 42px; height: 42px; font-size: 20px; }
:root[data-theme='dark'] .notif-ic { width: 32px; height: 32px; font-size: 15px; }
:root[data-theme='dark'] .plan-nudge-ic { width: 32px; height: 32px; font-size: 16px; }
:root[data-theme='dark'] .rm-card-ic { width: 38px; height: 38px; font-size: 18px; }
:root[data-theme='dark'] .g-home-ic { width: 54px; height: 54px; font-size: 26px; margin: 0 auto 6px; }

/* --- profil kartasi: chekkasida nozik yog'du --- */
:root[data-theme='dark'] .ucard { box-shadow: 0 28px 70px rgba(0,0,0,0.92), 0 0 0 1px rgba(255,255,255,0.06), 0 0 60px rgba(255,255,255,0.05); }
:root[data-theme='dark'] .ucard-cta { background: #FFFFFF; color: #000; }

/* Chop etishda xrom sarlavha oddiy qora matnga qaytadi */
@media print {
  :root[data-theme='dark'] h1 { -webkit-text-fill-color: #17181B; color: #17181B; background: none; }
  .wb-flow { display: none !important; }
}
/* Dark: mayda avatarlar chartrez emas, to'q chipda oq harf bilan */
:root[data-theme='dark'] .uref-av,
:root[data-theme='dark'] .profile-avatar,
:root[data-theme='dark'] .drawer-avatar,
:root[data-theme='dark'] .mini-avatar,
:root[data-theme='dark'] .pe-preview {
  background: #191919; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
:root[data-theme='dark'] .team-chip-av { background: #141414; color: #CFCFCF; }

/* ---- Telegram bot sozlamalari ---- */
.tg-steps { margin: 6px 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.tg-steps b { color: var(--ink); }
.tg-steps code, .form-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--soft); padding: 2px 7px; border-radius: 6px; color: var(--ink);
}
.tg-users { display: flex; flex-direction: column; gap: 2px; }
.tg-user {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--hairline); font-size: 13.5px;
}
.tg-user:last-child { border-bottom: 0; }
.tg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.tg-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(63,107,63,0.7); }
:root[data-theme='dark'] .tg-dot.on,
:root[data-theme='okean'] .tg-dot.on,
:root[data-theme='koinot'] .tg-dot.on,
:root[data-theme='interstellar'] .tg-dot.on { background: #4ADE80; box-shadow: 0 0 10px rgba(74,222,128,0.8); }
.tg-user-nm { font-weight: 600; }
.tg-user-st { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.tg-card { border-left: 3px solid #2AABEE; }

/* --- Guruhlar ro'yxati (har biri o'z turi bilan) --- */
.tg-groups { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.tg-group {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); padding: 13px 14px;
}
.tg-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tg-group-nm { font-weight: 600; font-size: 14px; }
.tg-group-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 8px 0 10px; }
.tg-group-unset { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.tg-group-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg-group-row select { flex: 1; min-width: 180px; }

/* --- Bot orqali xabar: qabul qiluvchilarni tanlash --- */
.bc-targets { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bc-target {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13.5px;
}
.bc-target:hover { border-color: var(--rule-strong); }
.bc-target input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.bc-t-nm { font-weight: 600; }
.bc-t-ct { margin-left: auto; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* Telegram Mini App ichida ochilganda — yuqoridagi menyu ixchamroq */
.in-telegram .topbar { padding: 10px 14px; }
.in-telegram .wrap { padding-top: 16px; }

/* ---- Jamoa tuzilmasi telefonda: ixchamroq kartalar + surish maslahati ---- */
.org-hint { display: none; }
@media (max-width: 760px) {
  .org-wide { margin-left: calc(50% - 50vw + 4px); margin-right: calc(50% - 50vw + 4px); padding: 0 10px; }
  .org-canvas { padding: 24px 14px; border-radius: var(--r-lg); background-size: 20px 20px; }
  .org-level { gap: 10px; }
  .org-node { min-width: 165px; max-width: 215px; padding: 10px 12px 10px 10px; gap: 9px; border-radius: 18px; }
  .org-ava { width: 40px; height: 40px; font-size: 14px; }
  .org-name { font-size: 13.5px; line-height: 1.2; }
  .org-pos { font-size: 11.5px; }
  .org-spec { font-size: 10.5px; }
  .org-link { height: 24px; }
  :root[data-theme='dark'] .org-link { height: 28px; }
  .org-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; letter-spacing: 0.02em;
  }
}

/* ---- Kirish sahifasidagi logotip ---- */
.login-logo {
  display: block; width: 100%; max-width: 250px; height: 45px; margin: 2px auto 18px;
  background-color: var(--ink);
  -webkit-mask: url("/logo.svg") no-repeat center / contain;
  mask: url("/logo.svg") no-repeat center / contain;
}
@supports not ((-webkit-mask-image: url("/logo.svg")) or (mask-image: url("/logo.svg"))) {
  .login-logo { background: url("/logo.svg") no-repeat center / contain; }
}
.login-card .sub { text-align: center; }

/* ---- Faollik: "hozir onlayn" va oxirgi kirish ---- */
.act-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
}
.act-badge .act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.act-badge.on { color: var(--green); font-weight: 600; }
.act-badge.on .act-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.20); animation: actPulse 2s ease-in-out infinite; }
:root[data-theme='tungi'] .act-badge.on,
:root[data-theme='okean'] .act-badge.on,
:root[data-theme='koinot'] .act-badge.on,
:root[data-theme='interstellar'] .act-badge.on,
:root[data-theme='dark'] .act-badge.on { color: #4ADE80; }
@keyframes actPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.20); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.05); } }
.act-when { font-size: 13px; }

/* profil kartasidagi yashil nuqta — avatar burchagida */
.ucard-online {
  position: absolute; left: 84px; bottom: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #22C55E; border: 3px solid var(--uc-bg); z-index: 2;
  box-shadow: 0 0 10px rgba(34,197,94,0.6);
}
.ucard--photo .ucard-online { border-color: rgba(255,255,255,0.55); }

@media (prefers-reduced-motion: reduce) { .act-badge.on .act-dot { animation: none; } }

/* ==================== KONTENT BO'LIMI ==================== */
/* --- yo'nalishlar muvozanati --- */
.bal-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.bal-row {
  display: grid; grid-template-columns: 30px minmax(120px, 1.4fr) 3fr auto;
  align-items: center; gap: 12px; padding: 8px 4px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.bal-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.bal-ic {
  width: 30px; height: 30px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.bal-name { font-size: 13.5px; font-weight: 600; }
.bal-track { height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.bal-fill { display: block; height: 100%; border-radius: 99px; transition: width 0.5s cubic-bezier(.2,.7,.2,1); }
.bal-num { font-size: 13px; min-width: 62px; text-align: right; white-space: nowrap; }
.bal-note {
  margin-top: 10px; padding: 11px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 13px; color: var(--ink-soft); line-height: 1.6;
}
.bal-note b { color: var(--ink); }
@media (max-width: 620px) {
  .bal-row { grid-template-columns: 26px 1fr auto; gap: 9px; }
  .bal-track { grid-column: 1 / -1; }
}

/* --- yo'nalish kartalari --- */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ct-card {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit;
  padding: 18px 20px 16px; border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev-2);
  border-top: 3px solid var(--ct);
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s;
}
.ct-card:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.ct-top { display: flex; align-items: center; justify-content: space-between; }
.ct-ic { font-size: 22px; line-height: 1; }
.ct-n {
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ct); background: color-mix(in srgb, var(--ct) 14%, transparent);
  border-radius: 99px; padding: 2px 9px;
}
.ct-name { font-family: "Inter", sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.ct-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.ct-foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.ct-count b { font-family: "Inter", sans-serif; font-size: 15px; color: var(--ink); }

/* --- yo'nalish chipi (jadvalda) --- */
.ct-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 99px; white-space: nowrap;
  color: var(--ct); background: color-mix(in srgb, var(--ct) 13%, transparent);
}
.ct-chip.muted { color: var(--ink-faint); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ct-typebar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

/* --- turlar spravochnigi --- */
.ct-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.ct-tcard {
  border-radius: var(--r-lg); padding: 16px 18px 14px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev-2); border-top: 3px solid var(--ct);
}
.ct-thead { display: flex; align-items: center; gap: 9px; }
.ct-tname { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; }
.ct-thint { font-size: 12px; color: var(--ink-soft); margin: 7px 0 10px; line-height: 1.5; }
.ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 6px 0; border-top: 1px solid var(--hairline);
}
.ct-badge {
  font-size: 11px; font-weight: 700; color: var(--ct);
  background: color-mix(in srgb, var(--ct) 14%, transparent);
  border-radius: 99px; padding: 1px 8px; flex: none;
}

/* --- formadagi yo'nalish tanlash --- */
.cg-block { margin: 6px 0 4px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; margin-top: 4px; }
.cg-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rule);
  background: var(--surface); font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s;
}
.cg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cg-opt:hover { border-color: var(--rule-strong); }
.cg-opt.active { border-color: var(--ct); box-shadow: inset 0 0 0 1px var(--ct), 0 0 14px color-mix(in srgb, var(--ct) 22%, transparent); }
.cg-ic { font-size: 16px; line-height: 1; flex: none; }
.cg-nm { font-weight: 600; line-height: 1.25; }
.cg-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 9px; line-height: 1.5; }
.cg-types { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; min-height: 34px; align-items: center; }
.cg-type {
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  padding: 7px 14px; border-radius: 99px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-soft); transition: all 0.15s;
}
.cg-type:hover { border-color: var(--rule-strong); color: var(--ink); }
.cg-type.active { background: var(--ct); border-color: var(--ct); color: #fff; font-weight: 600; }
.cg-empty { font-size: 12.5px; color: var(--ink-faint); }

/* ================= TASHABBUS: radar, generator, g'oyalar banki =================
   Radar kartasi — muhim kunga qolgan vaqt va tayyorgarlik bosqichi.
   Chap qirradagi rangli chiziq holatni bildiradi: qizil (bosqich bajarilmagan),
   sariq (yarim), yashil (joyida).

   Holat ranglari alohida o'zgaruvchida: asosiy --red/--amber/--green to'q
   ranglar, ular qorong'i mavzularda qora fonda o'qilmaydi. Shuning uchun
   to'rtala qorong'i mavzuda yorug'roq variantga almashadi. */
:root { --st-red: var(--red); --st-amber: var(--amber); --st-green: var(--green); }
:root[data-theme='dark'], :root[data-theme='tungi'],
:root[data-theme='okean'], :root[data-theme='koinot'],
:root[data-theme='interstellar'] {
  --st-red: #FF8A75; --st-amber: #F2C263; --st-green: #86D68C;
}
.radar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin-bottom: 22px; }
.rcard {
  position: relative; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  box-shadow: var(--elev-1); padding: 15px 16px 14px 19px;
  text-decoration: none; color: inherit; display: block;
}
.rcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rs); }
.rcard { --rs: var(--rule-strong); }
.rcard.is-qizil { --rs: var(--st-red); }
.rcard.is-sariq { --rs: var(--st-amber); }
.rcard.is-ok    { --rs: var(--st-green); }
.rcard:hover { box-shadow: var(--elev-2); }
.rcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rcard-days { font-family: "Inter", sans-serif; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.rcard-days small { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-left: 4px; letter-spacing: 0; }
.rcard-stage { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rs); text-align: right; }
.rcard-title { font-weight: 600; font-size: 14.5px; margin: 9px 0 2px; line-height: 1.3; }
.rcard-meta { font-size: 12px; color: var(--ink-soft); }
.rcard-steps { display: flex; gap: 5px; margin: 11px 0 8px; }
.rstep { height: 4px; flex: 1; border-radius: 99px; background: var(--hairline); }
.rstep.done { background: var(--rs); }
.rcard-note { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.rcard.is-qizil .rcard-note { color: var(--st-red); font-weight: 600; }
.rcard-foot { display: flex; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--ink-faint); }

/* --- G'oya generatori: bo'sh sahifani yo'q qiladi --- */
.spark-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spark-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.spark {
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
  padding: 13px 14px; display: flex; flex-direction: column; gap: 7px;
}
.spark-ic { font-size: 19px; line-height: 1; }
.spark-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.spark-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.spark-aud { font-size: 11px; color: var(--ink-faint); }
.spark-empty { font-size: 13px; color: var(--ink-soft); padding: 16px 0 2px; }

/* --- Bankdagi g'oya qatori --- */
.idea-row { display: flex; align-items: flex-start; gap: 12px; }
.idea-row-main { flex: 1; min-width: 0; }
.idea-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.badge-xom { background: var(--soft); color: var(--ink-soft); }
.badge-tanlangan { background: var(--amber-tint); color: var(--amber); }
.badge-ishda { background: #E6EEF5; color: #2E5C8A; }
.badge-arxiv { background: var(--soft); color: var(--ink-faint); }

/* --- Diqqat chizig'i (bosh sahifa va tashabbus tepasi) ---
   Fon va qirra --red dan hosil qilinadi: qorong'i mavzularda yorqin pushti
   plastinka bo'lib turmaydi, mavzu bilan birga qorayadi. */
.attn-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--st-red) 34%, transparent);
  background: color-mix(in srgb, var(--st-red) 13%, transparent);
  color: var(--st-red);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 18px; text-decoration: none;
}
.attn-bar .attn-more { font-weight: 500; color: var(--ink-soft); }

/* ================== MONOPOLIYA — YANGI DIZAYN (Monopoliya new.ai) ================== */
/* Yumaloq qalin shrift — butun o'yin UI'siga */
.m-wrap, .m-zoombox, .m-paybn, .m-jail-txt, .m-chat { font-family: "Baloo 2", "Segoe UI", sans-serif; }
/* Doska foni endi oq-hoshiyali rasm — 3D orqa fon yumshoq */
.m-board2 { background: #fff; }
.m-board2.v3d { background: radial-gradient(circle at 50% 20%, #f4efe9, #cfc8bf 78%); }
/* Status — pushti kartochka (mock 4) */
.m-status { background: #f9aede; border: none; border-left: none; border-radius: 20px; padding: 13px 20px; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
.m-status-who { color: #111; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 16.5px; font-family: inherit; }
.m-status-msg { color: #333; font-weight: 600; font-size: 13px; }
/* Katta qizil tugmalar (mock) */
.m-actions .g-btn { font-family: inherit; font-weight: 800; border-radius: 999px; }
.m-actions .g-btn-go, .m-actions .m-big { background: #c8431f; color: #fff; text-transform: uppercase; letter-spacing: .03em; border: none; }
.m-actions .m-big { font-size: 16.5px; padding: 14px 22px; box-shadow: 0 4px 0 #9c2f12; }
.m-actions .m-big:active { transform: translateY(2px); box-shadow: 0 2px 0 #9c2f12; }
/* Profil kartalari — figura + rangли pill + $pul (mock 5) */
.m-pcards { gap: 14px 10px; }
.m-pcard { background: none; border: none; box-shadow: none; padding: 0; gap: 1px; min-width: 104px; }
.m-pcard.cur { box-shadow: none; }
.m-pcard.cur .m-pc-pill { outline: 3px solid #111; outline-offset: 1.5px; }
.m-pc-tok .m-tspr { width: 54px; height: 54px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.m-pc-pill { display: block; background: var(--pc, #888); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: .02em; border-radius: 999px; padding: 4px 13px; margin-top: -6px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.m-pc-money { font-weight: 800; font-size: 16px; color: #111; }
.m-pcard.bank .m-pc-pill { text-decoration: line-through; }
/* MENING MULKLARIM paneli (mock 6) */
.m-mulk { background: #fff; border: 1.5px solid #d9d9df; border-radius: 18px; padding: 0 12px 13px; overflow: hidden; }
.m-mulk-h { background: #9c27b0; color: #fff; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; border-radius: 0 0 14px 14px; margin: 0 -12px 10px; padding: 10px 8px 8px; }
.m-mulk-sec { text-align: center; font-weight: 700; font-size: 13px; color: #333; margin: 8px 0 6px; }
.m-mprop { display: flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid #dcdce2; border-radius: 999px; padding: 6px 8px 6px 14px; margin-bottom: 7px; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.m-mprop.mort { opacity: .75; background: #faf7f7; }
.m-mprop .m-prop-nm { font-family: inherit; font-weight: 700; font-size: 13.5px; text-decoration: none; flex: 0 1 auto; text-align: left; }
.m-mp-ic { display: inline-flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0; }
.m-mp-cube { height: 17px; width: auto; }
.m-mp-hotel { height: 26px; width: auto; }
.m-mp-btns { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-end; margin-left: auto; }
.m-mp-btns button { font-family: inherit; font-weight: 800; font-size: 9.5px; letter-spacing: .02em; border: none; border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.m-mp-btns .b-build { background: #35c24a; color: #fff; }
.m-mp-btns .b-sell { background: #ffd400; color: #4d3d00; }
.m-mp-btns .b-mort { background: #e8352e; color: #fff; }
.m-mp-btns .b-back { background: #f9b8cf; color: #8c1d45; }
/* Pasport — yangi kartochka (mock 7) */
.m-pp-card { border-radius: 14px; border: 1.5px solid #cfcfd6; width: min(90vw, 320px); }
.m-pp-view { height: 128px; background: #eef4ee; }
.m-pp-head { text-align: center; padding: 8px 12px; text-shadow: none; }
.m-pp-deed { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #fff; opacity: .95; }
.m-pp-name { font-family: inherit; font-weight: 800; font-size: 21px; color: #111; }
.m-pp-head[style] .m-pp-name { color: #111; }
.m-pp-head.plain { background: #fff; border-bottom: 2.5px solid #111; }
.m-pp-head.plain .m-pp-name { font-size: 18px; letter-spacing: .02em; }
.m-pp-row { font-family: inherit; font-weight: 600; font-size: 12.5px; border-bottom: none; padding: 2.5px 0; }
.m-pp-row b { font-weight: 800; }
.m-pp-owner { background: #e9e9ee; border-radius: 999px; font-weight: 700; }
.m-pp-card > .g-btn { background: #c8431f; color: #fff; border-radius: 999px; font-family: inherit; font-weight: 800; }
/* Omad / Tavakkal kartalari (mock 8) */
.m-card3d.chest .m-card-back { background: #7fe0f2; color: #083b44; }
.m-card3d.chance .m-card-back { background: #ffd23e; color: #4d3a00; }
.m-card3d.chest .m-card-face { background: #7fe0f2; border: 2.5px solid #111; }
.m-card3d.chance .m-card-face { background: #ffd23e; border: 2.5px solid #111; }
.m-card-face .m-card-deck, .m-card3d.chest .m-card-face .m-card-deck { color: #111; font-family: inherit; font-weight: 800; font-size: 17px; }
.m-card-txt { font-family: inherit; font-weight: 700; }
.m-card-mark { color: #e8352e; }
/* Jurnal/chat sarlavhalari — shu uslub */
.m-logbox-h, .m-chat-h { font-family: inherit; font-weight: 800; color: #333; }
/* token rang halqasi — nuqta ustidagi kichik rang belgisi */
.m-tok > span::after { border-width: 2.5px; width: 1.5em; height: .42em; bottom: .12em; }

/* ===== PASPORT — foydalanuvchi mock'iga 1:1 (Monopoliya new.ai) ===== */
.m-pp-card { position: relative; width: min(88vw, 300px); max-height: 88vh; overflow-y: auto; background: #fff; border: 2px solid #111; border-radius: 6px; padding: 12px 14px 14px; box-shadow: 0 24px 70px rgba(0,0,0,.45); font-family: "Baloo 2", "Segoe UI", sans-serif; display: flex; flex-direction: column; }
/* ko'cha sarlavhasi — rangli, qora hoshiyali blok */
.m-pp-hd { border: 2px solid #111; border-radius: 3px; text-align: center; padding: 7px 10px 9px; margin-bottom: 12px; }
.m-pp-hd .m-pp-deed { font-size: 11px; font-weight: 600; color: #111; line-height: 1.1; }
.m-pp-hd .m-pp-name { font-size: 24px; font-weight: 800; color: #111; line-height: 1.15; }
/* metro/stansiya: ikonka + qora chiziqli band */
.m-pp-icimg { display: block; margin: 4px auto 8px; height: 52px; width: auto; }
.m-pp-icimg.train { height: 64px; }
.m-pp-band { border-top: 2.5px solid #111; border-bottom: 2.5px solid #111; text-align: center; font-size: 16.5px; font-weight: 800; color: #111; letter-spacing: .02em; padding: 7px 6px; margin: 0 -2px 12px; }
/* qatorlar */
.m-pp-body { display: flex; flex-direction: column; }
.m-pp-row { display: flex; align-items: center; gap: 7px; padding: 3.5px 2px; font-size: 13px; color: #111; border: none; font-weight: 500; }
.m-pp-row span { flex: 1; }
.m-pp-row b { font-weight: 800; font-size: 13.5px; }
.m-pp-h { width: 15px; height: 15px; flex: 0 0 15px; }
.m-pp-sep { height: 12px; }
.m-pp-note { font-size: 12.5px; color: #111; line-height: 1.45; padding: 2px 2px 4px; text-align: left; }
/* egalik pill */
.m-pp-owner { margin: 12px 2px 2px; background: #dcdcdc; border-radius: 999px; text-align: center; font-size: 12px; color: #111; padding: 7px 10px; font-weight: 600; }
.m-pp-owner.empty { color: #8a8a8a; }
.m-pp-owner b { font-weight: 800; }
/* Yopish */
.m-pp-close { align-self: center; margin-top: 13px; background: #c8431f; color: #fff; border: none; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 13.5px; padding: 9px 26px; cursor: pointer; box-shadow: 0 3px 0 #9c2f12; }
.m-pp-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c2f12; }
.m-pp-offer { display: flex; gap: 7px; margin-top: 10px; }

/* O'yin ochilganda (monopoly.js "m-playing" qo'shadi) sahifa foni HAR DOIM yorug'.
   Aks holda Mini App'ning qora foni panellardan ko'rinib, o'yinchi kartalaridagi
   pul/reyting matni (qora rangda) o'qilmay qolardi — fullscreen'da ham shunday. */
html.m-playing, body.m-playing { background: #FAFAF7; }
body.m-playing .g-wrap.g-mono { background: #FAFAF7; min-height: 100vh; }

/* ===== Butun ekran rejimi ===== */
.m-fsbtn { right: 8px; top: 8px; bottom: auto; font-size: 20px; }
.g-wrap.g-mono:fullscreen { background: var(--paper); overflow: auto; max-width: none; width: 100%; min-height: 100vh; padding: 14px 18px 40px; margin: 0; box-sizing: border-box; }
/* fullscreen ortidagi standart QORA backdrop — kontent ekranni to'ldirmasa,
   atrofi qorayib panel matnlari ko'rinmay qolardi */
.g-wrap.g-mono:fullscreen::backdrop { background: #FAFAF7; }
.g-wrap.g-mono:fullscreen .m-wrap { max-width: 1500px; margin: 0 auto; }
body.m-fsmode .g-wrap.g-mono { position: fixed; inset: 0; z-index: 300; background: var(--paper); overflow: auto; max-width: none; width: auto; margin: 0; padding: 12px 16px 40px; }
body.m-fsmode .topbar { display: none; }

/* ============ MONOPOLIYA — namunaga moslash (v14) ============ */
/* 1) Status banner — HAR O'YINCHI O'Z RANGIDA (namuna: pushti misol edi) */
.m-status { background: color-mix(in srgb, var(--pc, #f9aede) 40%, #fff); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .m-status { background: #f9aede; } }
.m-status-who { color: #111; }

/* 2) Uy / mehmonxona — RANG BANDI ICHIDA (namunadagi o'lcham) */
.m-hh { position: absolute; transform: translate(-50%, -50%); display: flex; gap: .14cqw; z-index: 3; pointer-events: none; align-items: center; justify-content: center; }
.m-hh.row { flex-direction: row; }
.m-hh.col { flex-direction: column; }
.m-hh .hs { width: 1.72cqw; height: auto; }          /* 4 ta uy band kengligini to'ldiradi */
.m-hh.hotel { transform: translate(-50%, -50%); }
.m-hh .hot { width: 2.6cqw; height: auto; }
.m-board2.v3d .m-hh { transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--bz, 0deg))) rotateX(-50deg); transform-origin: 50% 90%; }

/* 3) Figuralar — kichikroq */
.m-tok > span { font-size: clamp(13px, 3.5cqw, 22px); }
.m-tok > span .m-tspr { width: 1.85em; height: 1.85em; }
.m-tok > span::after { width: 1.35em; height: .36em; border-width: 2px; }

/* 4) MENING MULKLARIM — namunaga 1:1 (stroke'lari bilan) */
.m-mulk { background: #f4f4f6; border: 1.5px solid #23232b; border-radius: 18px; padding: 0 0 14px; overflow: hidden; }
.m-mulk-h { background: #9c27b0; color: #fff; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14.5px; border: 1.5px solid #23232b; border-top: none; border-radius: 0 0 16px 16px; margin: 0 -1px 12px; padding: 11px 8px 10px; }
.m-mulk-b { padding: 0 12px; }
.m-mulk-sec { text-align: center; font-weight: 600; font-size: 13px; color: #23232b; margin: 10px 0 8px; }
/* metro / stansiya kartochkalari — 2 ustun */
.m-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-chip { display: flex; flex-direction: column; align-items: center; }
.m-chip-nm { background: #fff; border: 2px solid #23232b; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1.15; color: #111; padding: 9px 12px; width: 100%; min-height: 44px; cursor: pointer; }
.m-chip.mort .m-chip-nm { opacity: .75; }
.m-chip-btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: -9px; }
/* uy qatorlari */
.m-mprop { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #23232b; border-radius: 12px; padding: 8px 10px; margin-bottom: 9px; box-shadow: none; }
.m-mprop.mort { opacity: .8; }
.m-mprop .m-prop-nm { font-family: inherit; font-weight: 600; font-size: 13px; text-decoration: none; text-align: left; flex: 0 0 auto; max-width: 40%; color: #111; }
.m-mp-ic { display: inline-flex; align-items: flex-end; gap: 3px; flex: 1; min-width: 0; justify-content: flex-start; }
.m-mp-cube { height: 20px; width: auto; }
.m-mp-hotel { height: 34px; width: auto; }
.m-mp-btns { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; margin-left: auto; }
.m-mp-btns button, .m-chip-btns button { font-family: inherit; font-weight: 800; font-size: 9.5px; letter-spacing: .02em; border: 1.5px solid #23232b; border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.m-mp-btns .b-build, .m-chip-btns .b-build { background: #35c24a; color: #fff; }
.m-mp-btns .b-sell, .m-chip-btns .b-sell { background: #ffd400; color: #3d3000; }
.m-mp-btns .b-mort, .m-chip-btns .b-mort { background: #e8352e; color: #fff; }
.m-mp-btns .b-back, .m-chip-btns .b-back { background: #f9b8cf; color: #8c1d45; display: inline-flex; align-items: center; gap: 4px; }
.m-mp-btns .b-back i, .m-chip-btns .b-back i { width: 9px; height: 9px; border-radius: 50%; background: #e8352e; border: 1.5px solid #fff; flex: 0 0 9px; }

/* 5) Modal (karta/pasport/hamyon) — har doim ekran markazida, sig'masa scroll */
.m-zoombox { z-index: 900; padding: 14px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-zoombox > .m-zoom-card, .m-zoombox > .m-pp-card, .m-zoombox > .m-card-wrap, .m-zoombox > .m-loan-card { margin: auto; }

/* Qarz — tugma, banner, modal */
.m-loan-open { justify-content: center; }
.m-loan-btn { background: #fff3d6; border: 1.5px solid #e6b800; color: #7a5c00; font-weight: 800; }
.m-loan-btn:hover { background: #ffe9a8; }
.m-loan-bnr { border: 1.5px solid #e6b800; }
.m-loan-card { position: relative; z-index: 1; background: #fff; border-radius: 18px; padding: 18px 16px; max-width: 380px; width: 92vw; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.m-loan-h { font-weight: 800; font-size: 17px; margin-bottom: 12px; color: #111; }
.m-loan-amt { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; color: #333; margin-bottom: 6px; }
.m-loan-amt input { width: 120px; font-size: 18px; font-weight: 800; text-align: center; padding: 8px 10px; border: 2px solid #23232b; border-radius: 10px; font-family: inherit; }
.m-loan-hint { font-size: 12px; color: #777; margin-bottom: 12px; line-height: 1.4; }
.m-loan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.m-loan-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px solid #e5e5ea; border-radius: 12px; padding: 7px 10px; }
.m-loan-nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: #111; }
.m-loan-nm .m-tspr { width: 22px; height: 22px; }
.m-loan-cash { color: #2b8a3e; font-weight: 800; }
.m-loan-bts { display: flex; gap: 6px; flex: none; }
.m-loan-bts button { font-family: inherit; font-weight: 800; font-size: 12px; border: none; border-radius: 999px; padding: 7px 11px; cursor: pointer; white-space: nowrap; }
.m-loan-bts .b-give { background: #35c24a; color: #fff; }
.m-loan-bts .b-ask { background: #ffd400; color: #3d3000; }

/* 6) TELEFON tartibi: doska → amallar → profil/mulk → chat */
@media (max-width: 1099px) {
  .m-wrap { display: flex; flex-direction: column; gap: 14px; padding: 0 6px; }
  .m-col-board { order: 1; }
  .m-col-main { order: 2; }
  .m-col-side { order: 3; }
  .m-col-chat { order: 4; }
  .m-status { padding: 11px 15px; border-radius: 16px; }
  .m-status-who { font-size: 15.5px; }
  .m-actions .m-big { font-size: 15px; padding: 13px 16px; width: 100%; }
  .m-inv { gap: 5px 10px; font-size: 12.5px; padding: 8px 10px; }
  .m-pcards { gap: 10px 8px; }
  .m-pcard { min-width: 88px; }
  .m-pc-tok .m-tspr { width: 42px; height: 42px; }
  .m-logbox .m-log { max-height: 110px; }
  .m-chat-list { max-height: 150px; }
}

/* 6b) TELEFON — o'yin interfeysi KATTAROQ.
   Shikoyat: "juda kichik" edi. Doska ekran kengligini to'liq oladi,
   matn va tugmalar barmoqqa qulay o'lchamga kattalashtirildi. */
@media (max-width: 700px) {
  .g-wrap.g-mono { padding-left: 0; padding-right: 0; }
  .m-wrap { max-width: none; padding: 0 4px; gap: 12px; }
  .m-col-board { margin: 0 -4px; }                       /* doska chetdan chetga */

  .m-status { padding: 13px 16px; }
  .m-status-who { font-size: 18px; }
  .m-status-msg { font-size: 15.5px; }
  .m-hint { font-size: 14.5px; padding: 11px 14px; line-height: 1.45; }

  /* amal tugmalari — kattaroq va barmoq bilan bosish oson */
  .m-actions { gap: 10px; }
  .m-actions .g-btn { font-size: 16px; padding: 14px 20px; }
  .m-actions .m-big { font-size: 19px; padding: 17px 20px; }
  .m-loan-btn { font-size: 16px; padding: 14px 18px; }

  /* inventar va pul — o'qish oson bo'lsin */
  .m-inv { font-size: 15px; gap: 8px 14px; padding: 11px 13px; }
  .m-iv { font-size: 15px; }
  .m-iv-money { font-size: 17px; }
  .m-bill-ic { height: 20px; }

  /* o'yinchi kartalari */
  .m-pcard { min-width: 104px; }
  .m-pc-tok .m-tspr { width: 52px; height: 52px; }
  .m-pc-pill { font-size: 14.5px; }
  .m-pc-money { font-size: 18px; }

  /* mulk qatorlari va tugmalari */
  .m-mulk-h { font-size: 15px; }
  .m-mprop { padding: 9px 10px 9px 15px; }
  .m-mprop .m-prop-nm, .m-chip-nm { font-size: 15px; }
  .m-mp-btns button, .m-chip-btns button { font-size: 13px; padding: 8px 12px; }

  /* jurnal va chat */
  .m-log { font-size: 14px; }
  .m-logbox .m-log { max-height: 132px; }
  .m-chat-list { font-size: 15px; max-height: 168px; }
  .m-chat-f input { font-size: 16px; padding: 11px 15px; }   /* 16px — iOS zoom qilmasin */
  .m-tag { font-size: 13.5px; padding: 7px 13px; }

  /* doska ustidagi yumaloq tugmalar kattaroq */
  .m-zoombtn { width: 46px; height: 46px; font-size: 21px; }

  /* pasport/hamyon modallari */
  .m-pp-card, .m-zoom-card { font-size: 16px; }
}
@media (min-width: 1100px) { .m-col-chat { grid-area: chat; align-self: start; } }

/* ============================================================
   Instagram izoh nazorati (Izohlar bo'limi) — .iz-*
   ============================================================ */
.iz-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.iz-note { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--glass-brd); font-size: 14px; margin-bottom: 16px; color: var(--ink-soft); }
.iz-note a { color: var(--accent); }
.iz-note-warn { border-color: var(--st-amber, #d0972a); }
.iz-note-ok { border-color: var(--st-green, #3f6b3f); }

.iz-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.iz-dot.ok { background: var(--st-green, #3f6b3f); box-shadow: 0 0 8px var(--st-green, #3f6b3f); }
.iz-dot.bad { background: var(--st-red, #d9534f); box-shadow: 0 0 8px var(--st-red, #d9534f); }

.iz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.iz-stat { position: relative; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--glass-brd); border-left: 4px solid var(--accent); background: var(--surface); box-shadow: var(--elev-1); }
.iz-stat.warn { border-left-color: var(--st-amber, #d0972a); }
.iz-stat.bad { border-left-color: var(--st-red, #d9534f); }
.iz-stat.good { border-left-color: var(--st-green, #3f6b3f); }
.iz-num { font-family: "Inter", sans-serif; font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); }
.iz-lbl { font-size: 13px; color: var(--ink-soft); margin-top: 7px; }

.iz-list { display: flex; flex-direction: column; gap: 12px; }
.iz-card { border: 1px solid var(--glass-brd); border-left: 4px solid var(--st-amber, #d0972a); border-radius: 14px; background: var(--surface); box-shadow: var(--elev-1); padding: 15px 18px; }
.iz-card.iz-severe { border-left-color: var(--st-red, #d9534f); }
.iz-card.iz-off { opacity: 0.6; }
.iz-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.iz-user { font-weight: 700; font-size: 14px; color: var(--ink); }
.iz-time { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.iz-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.iz-badge.iz-severe { background: rgba(217, 83, 79, 0.16); color: var(--st-red, #d9534f); }
.iz-badge.iz-negative { background: rgba(208, 151, 42, 0.16); color: var(--st-amber, #d0972a); }
.iz-badge.iz-state { background: var(--accent-tint); color: var(--ink-soft); }
.iz-text { font-size: 15px; line-height: 1.5; color: var(--ink); word-break: break-word; margin-bottom: 8px; }
.iz-hits { font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; }
.iz-hits b { color: var(--accent); font-weight: 600; }
.iz-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iz-link { margin-right: auto; font-size: 12px; color: var(--accent); text-decoration: none; }
.iz-link:hover { text-decoration: underline; }
.iz-err { margin-top: 8px; font-size: 12px; color: var(--st-red, #d9534f); }

.iz-panel { border: 1px solid var(--glass-brd); border-radius: var(--r-lg, 16px); background: var(--surface); box-shadow: var(--elev-1); padding: 20px 22px; margin-bottom: 18px; max-width: 640px; }
.iz-h2 { font-size: 16px; margin: 0 0 12px; }
.iz-conn { display: flex; align-items: center; gap: 12px; }
.iz-conn-name { font-weight: 700; }
.iz-field { display: block; margin-bottom: 14px; }
.iz-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); }
.iz-field input, .iz-field select { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--glass-brd); background: var(--surface); color: var(--ink); font-size: 14px; }
.iz-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.iz-check input { width: 18px; height: 18px; flex: none; }

.iz-legal { max-width: 780px; margin: 0 auto; line-height: 1.65; }
.iz-legal h1 { margin-bottom: 6px; }
.iz-legal h2 { font-size: 18px; margin-top: 26px; }
.iz-legal a { color: var(--accent); }