/* ===================================================================
   Panel yon menyusi — ommaviy `.side-nav` ustiga qo'shimchalar.

   Panel menyusi qorong'i fonli: boshqaruv rejimi ommaviy saytdan
   ko'z bilan darrov ajralib turishi kerak.
   =================================================================== */
.side-nav.panel {
  /* Panel menyusi HAR IKKI temada ham qorong'i — shuning uchun
     undagi matn ranglari tokenga o'tkazilmaydi: ular tema bilan birga
     o'zgarsa, qorong'i fonda qorong'i yozuv chiqib qolardi. #C8DCD2
     `--emerald-900` ustida 7.7, tungi paneldagi #0C1522 ustida 12.8
     kontrast beradi. */
  background: var(--emerald-900);
  border-right-color: rgba(255, 255, 255, .08);
  color: #C8DCD2;
}
:root[data-theme="dark"] .side-nav.panel { background: #0C1522; border-right-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side-nav.panel { background: #0C1522; border-right-color: var(--line); }
}

.side-nav.panel .brand { color: var(--white); }
.side-nav.panel .brand-sub { color: rgba(255, 255, 255, .48); }
.side-nav.panel .nav-group-label { color: rgba(255, 255, 255, .42); }
.side-nav.panel .nav-item { color: #C8DCD2; }
.side-nav.panel .nav-item:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.side-nav.panel .nav-item.active { background: var(--theme-accent); color: var(--on-accent); }
.side-nav.panel .side-nav-bottom { border-top-color: rgba(255, 255, 255, .10); }

.role-pill {
  align-self: flex-start; margin: 0 var(--sp-3) var(--sp-4);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  background: var(--theme-accent); color: var(--on-accent);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* Obuna tugaganda chiqadigan bloklash bloki */
.subscription-lock {
  background: var(--warn-dim); border: 1px solid var(--warn);
  border-radius: var(--radius-m); padding: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.subscription-lock .text { flex: 1; min-width: 220px; }
.subscription-lock h3 { color: var(--warn); font-size: var(--fs-md); }