/* app.css */
/* ARUmediaTV — Telegram Mini App.
 *
 * Hamma o'lcham va rang ilovaning Flutter kodidan AYNAN olingan
 * (`lib/widgets/glass.dart` -> AppColors, `lib/screens/*`). Flutter'dagi
 * 1 dp = CSS'dagi 1 px (Android WebView'da ham shunday). */

:root {
  --bg: #0A0A0C;
  --surface: #101012;
  --card: #151517;
  --card-alt: #1B1B1E;
  --accent: #C2410C;
  --accent2: #E2620F;
  --accent3: #FFC93C;
  --accent-tint: #281914;
  --border: rgba(255, 255, 255, 0.06);       /* 0x0F */
  --border-bright: rgba(255, 255, 255, 0.10); /* 0x1A */
  --text: #F2F2F3;
  --text-dim: #9A9AA0;
  --text-faint: #6B6B70;
  --success: #4ADE80;
  --gold: #FFC93C;
  --danger: #E5484D;
  --telegram: #229ED9;

  /* Xavfsiz hudud: Telegram (8.0+) o'z o'zgaruvchilarini beradi. */
  /* Yuqori chekinish FAQAT Telegram to'liq ekran rejimida (`app.js -> applyInsets`):
     oddiy rejimda Telegram o'z sarlavhasini o'zi chizadi, chekinish ikki marta qo'shilmasin. */
  --safe-top: 0px;
  --content-top: 0px;
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body { overflow: hidden; }

#app { position: fixed; inset: 0; background: var(--bg); }

/* ── Ikonkalar (Flutter `Icons.*_rounded`) ───────────────────── */
.ic {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ic.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Sahifalar (IndexedStack) ────────────────────────────────── */
.pages { position: absolute; inset: 0; padding-top: calc(var(--safe-top) + var(--content-top)); }
.page {
  position: absolute;
  inset: calc(var(--safe-top) + var(--content-top)) 0 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
}
.page.active { visibility: visible; }
.page::-webkit-scrollbar { display: none; }

/* ── Pastki navigatsiya (`root_screen.dart` -> _BottomNav) ───── */
.bottom-nav-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* chekinish: kamida 26 + 12 */
  padding-bottom: calc(max(var(--safe-bottom), 26px) + 12px);
  pointer-events: none;
}
.bottom-nav {
  pointer-events: auto;
  margin: 0 16px;
  padding: 10px 6px;
  background: var(--surface);
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
}
.bottom-nav-inner { position: relative; height: 52px; display: flex; }
.nav-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
  will-change: transform;
}
.nav-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-item .ic { font-size: 22px; width: 22px; height: 22px; will-change: transform; }
.nav-icon { position: relative; display: inline-block; }
.nav-dot {
  position: absolute;
  right: -2px;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.4px solid #fff;
  display: none;
}
.nav-label-clip { overflow: hidden; width: 100%; text-align: center; }
.nav-label {
  padding-top: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Bosh sahifa (`home_screen.dart`) ────────────────────────── */
.home-head { display: flex; align-items: center; padding: 16px 20px 8px 20px; }
.home-head .logo { height: 30px; width: auto; display: block; }
.home-head .sub { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.45); line-height: normal; }
.home-head .spacer { flex: 1; }
.bell {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bell .ic { font-size: 22px; color: rgba(255, 255, 255, 0.7); }
.section-title { padding: 12px 20px 12px 20px; font-size: 18px; font-weight: 700; color: #fff; line-height: normal; }

.center-box { height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.center-box .ic { font-size: 52px; color: rgba(255, 255, 255, 0.2); }
.center-box .msg { margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 14px; }

.grid {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 14px;
}
.bottom-space { height: 120px; }

/* Flutter `CircularProgressIndicator` (strokeWidth 2). */
.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bo'lim kartochkasi (`SeasonCard`) ───────────────────────── */
.tap { transition: transform 100ms linear; }
.tap.down { transform: scale(0.95); }

.season-card {
  position: relative;
  aspect-ratio: 0.65;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.season-card .ph {
  position: absolute;
  inset: 0;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.season-card .ph .ic { font-size: 36px; color: rgba(255, 255, 255, 0.38); }
.season-card img.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 120ms;
}
.season-card img.poster.ok { opacity: 1; }
.badges { position: absolute; top: 8px; left: 8px; right: 8px; }
.badge-row { display: flex; align-items: center; }
.badge-row .grow { flex: 1; }
.badge-row + .badge-row { margin-top: 6px; }

.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.card-badge .ic { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.card-badge .ic.gold { color: var(--gold); }
.card-badge span.t { margin-left: 3px; color: #fff; font-size: 10.5px; font-weight: 700; line-height: normal; }

.age-badge {
  padding: 2.5px 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: normal;
}

.paid-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  border: 1px solid rgba(255, 201, 60, 0.7);
}
.paid-badge .ic { font-size: 12px; color: var(--gold); }
.paid-badge span.t { margin-left: 3px; color: var(--gold); font-size: 10.5px; font-weight: 800; line-height: normal; }

.card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-foot .tag {
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-foot .name {
  font-weight: 700;
  color: #fff;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ── Vaqtinchalik sahifa (keyingi bosqichlar) ────────────────── */
.soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 140px; }
.soon .ic { font-size: 52px; color: rgba(255, 255, 255, 0.2); }
.soon .msg { margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 14px; }

/* ── Xabar (SnackBar o'rnida) ────────────────────────────────── */
.toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(max(var(--safe-bottom), 26px) + 12px + 72px + 12px);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-alt);
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms, transform 180ms;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; transform: none; }

/* ── Telegram'dan tashqarida ochilganda ──────────────────────── */
.gate { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.gate img { height: 40px; margin-bottom: 18px; }
.gate .msg { color: rgba(255, 255, 255, 0.6); font-size: 14.5px; line-height: 1.45; }

/* ── Ekranlar steki (router.js) ──────────────────────────────── */
.route {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  overflow: hidden;
  padding-top: calc(var(--safe-top) + var(--content-top));
  display: flex;
  flex-direction: column;
}
.route-fade { opacity: 0; transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.route-fade.in { opacity: 1; }
.route-slide { transform: translateX(100%); transition: transform 280ms cubic-bezier(0.2, 0, 0, 1); }
.route-slide.in { transform: none; }
.route.out { opacity: 0; transition: opacity 200ms; }
.route-slide.out { transform: translateX(30%); opacity: 0; transition: transform 220ms, opacity 220ms; }
.route .scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.route .scroll::-webkit-scrollbar { display: none; }

/* ── AppBar (Material 3, fon shaffof) ────────────────────────── */
.appbar { height: 56px; display: flex; align-items: center; flex-shrink: 0; padding: 0 4px; }
.appbar-back { margin-right: 4px; }
.appbar-title { flex: 1; min-width: 0; padding-left: 12px; }
.appbar-back + .appbar-title { padding-left: 4px; }
.appbar-title .t { font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-title .s { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 1px; }
.appbar-actions { display: flex; align-items: center; }
.icon-btn {
  width: 48px; height: 48px; border: 0; background: transparent; color: #fff;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden; padding: 0;
}
.icon-btn:active { background: rgba(255, 255, 255, 0.08); }

/* ── Glass ───────────────────────────────────────────────────── */
.glass { background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.glass-lite { background: var(--card-alt); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.accent-card { background: var(--card); border: 1px solid rgba(194, 65, 12, 0.35); border-radius: 22px; overflow: hidden; }

.empty-glass { padding-top: 90px; display: flex; justify-content: center; }
.empty-glass .glass { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: calc(100% - 32px); }
.empty-glass .eg-t { margin-top: 12px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.empty-glass .eg-s { margin-top: 6px; color: rgba(255, 255, 255, 0.4); font-size: 12.5px; }

/* ── Tugmalar ────────────────────────────────────────────────── */
.btn {
  border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
  height: 40px; padding: 0 24px; border-radius: 20px; letter-spacing: 0.1px;
  position: relative; overflow: hidden;
}
.btn-filled { background: var(--accent); color: #fff; }
.btn-filled:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); }
.btn-text { background: transparent; color: var(--accent2); padding: 0 12px; }
.btn-outline { background: transparent; color: var(--accent2); border: 1px solid rgba(255, 255, 255, 0.24); }
.btn.danger { color: var(--danger); }
.btn-filled.danger { background: var(--danger); color: #fff; }
.btn.block { width: 100%; }
.btn:active { filter: brightness(1.12); }

/* InkWell to'lqini */
.ink { position: relative; overflow: hidden; }
.ink-wave {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12);
  transform: scale(0); animation: inkwave 550ms ease-out forwards; pointer-events: none;
}
@keyframes inkwave { to { transform: scale(1); opacity: 0; } }

/* ── Matn maydoni ────────────────────────────────────────────── */
.field {
  width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--border-bright);
  background: var(--card-alt); color: var(--text); font: inherit; font-size: 15px; padding: 0 14px;
  outline: none; user-select: text; -webkit-user-select: text;
}
.field:focus { border-color: var(--accent); }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: none; line-height: 1.45; }

/* ── Dialog ──────────────────────────────────────────────────── */
.dlg-wrap {
  position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.54);
  display: flex; align-items: center; justify-content: center; padding: 0 28px;
  opacity: 0; transition: opacity 160ms;
}
.dlg-wrap.in { opacity: 1; }
.dlg {
  width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 22px; padding: 22px 22px 16px;
  transform: scale(0.96); transition: transform 160ms;
}
.dlg-wrap.in .dlg { transform: none; }
.dlg-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.dlg-text { color: rgba(255, 255, 255, 0.78); font-size: 14.5px; line-height: 1.45; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 18px; flex-wrap: wrap; }

/* ── Pastki oyna (bottom sheet) ──────────────────────────────── */
.sheet-wrap {
  position: absolute; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.54);
  display: flex; align-items: flex-end; opacity: 0; transition: opacity 200ms;
}
.sheet-wrap.in { opacity: 1; }
.sheet {
  width: 100%; max-height: 88vh; overflow-y: auto; background: var(--surface);
  border-radius: 28px 28px 0 0; border-top: 1px solid var(--border);
  padding: 0 0 calc(var(--safe-bottom) + 12px); transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
.sheet-wrap.in .sheet { transform: none; }
.sheet-handle { width: 32px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); margin: 12px auto 10px; }

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0; color: #fff; font-weight: 700;
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.card-corner { position: absolute; top: 8px; right: 8px; }
.paid-badge.compact { padding: 3px 4px; }

/* Ro'yxat qatori (ListTile o'xshash) */
.tile { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; }
.tile .tile-main { flex: 1; min-width: 0; }
.tile .tile-t { font-size: 15px; color: #fff; }
.tile .tile-s { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.section-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.45); padding: 0 4px; }

/* Switch (Material) */
.switch { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .tr { position: absolute; inset: 0; border-radius: 16px; background: var(--card-alt); border: 2px solid rgba(255, 255, 255, 0.4); transition: background 150ms, border-color 150ms; }
.switch .th { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: all 150ms; }
.switch input:checked + .tr { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .tr + .th { left: 24px; top: 4px; width: 24px; height: 24px; background: #fff; }

/* billing.css */
/* Obuna va balans — `lib/screens/billing_screen.dart`. */

.bill-bar-wrap { padding: 4px 16px 12px; flex-shrink: 0; }
.bill-bar { border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; }
.bill-bar .grow { flex: 1; }
.bill-bar .col { display: flex; flex-direction: column; min-width: 0; }
.bill-bar .col.end { align-items: flex-end; }
.bill-bar .k { color: rgba(255, 255, 255, 0.55); font-size: 12px; line-height: normal; }
.bill-bar .bal { margin-top: 2px; color: #fff; font-size: 19px; font-weight: 800; line-height: normal; }
.bill-bar .sub { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: normal; white-space: nowrap; }

.bill-switch { display: flex; gap: 8px; padding: 0 16px 12px; flex-shrink: 0; }
.bill-sw {
  flex: 1 1 0; min-width: 0; padding: 11px 0; border-radius: 14px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  color: rgba(255, 255, 255, 0.6); font-size: 12.5px; font-weight: 600; line-height: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.bill-sw.on {
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  border-color: transparent; color: #fff;
}

/* PageView: qo'lda surib o'tkaziladi. */
.bill-pages {
  flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain;
  padding-bottom: var(--safe-bottom);
}
.bill-pages::-webkit-scrollbar { display: none; }
.bill-page {
  flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  overflow-y: auto; overflow-x: hidden; padding: 0 16px 28px; overscroll-behavior: contain;
}
.bill-page::-webkit-scrollbar { display: none; }

.bill-ph { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bill-ph .t { margin-top: 14px; color: rgba(255, 255, 255, 0.5); font-size: 13px; text-align: center; }

.bill-card { border-radius: 16px; }
.bill-card + .bill-card { margin-top: 10px; }

/* To'ldirish */
.bill-amount { padding: 14px 16px; display: flex; flex-direction: column; }
.bill-amount .lbl { color: rgba(255, 255, 255, 0.65); font-size: 12.5px; line-height: normal; }
.bill-input {
  margin-top: 8px; display: flex; align-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); padding: 0 14px;
}
.bill-input input {
  flex: 1; min-width: 0; height: 48px; border: 0; outline: none; background: transparent;
  color: #fff; font: inherit; font-size: 17px; font-weight: 700; padding: 0;
  user-select: text; -webkit-user-select: text;
}
.bill-input input::placeholder { color: rgba(255, 255, 255, 0.25); font-weight: 400; }
.bill-input .suf { color: rgba(255, 255, 255, 0.5); font-size: 16px; margin-left: 6px; }
.bill-go { margin-top: 12px; height: 46px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bill-links { margin-top: 16px; }
.bill-note { color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 1.5; }

.bill-link { padding: 12px 16px; }
.bill-link + .bill-link, .bill-links > .bill-link + .bill-link { margin-top: 10px; }
.bill-link .row { display: flex; align-items: center; }
.bill-link .grow { flex: 1; }
.bill-link .amt { color: #fff; font-size: 16px; font-weight: 800; line-height: normal; }
.bill-link .left { margin-left: 4px; color: rgba(255, 255, 255, 0.55); font-size: 11.5px; }
.bill-link .btns { margin-top: 12px; display: flex; gap: 10px; }
.bill-link .btns .btn {
  flex: 1 1 0; height: 42px; font-size: 13px; font-weight: 700; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
}
.bill-outline { background: transparent; color: #fff; border: 1px solid var(--border); }
.bill-outline:disabled { color: rgba(255, 255, 255, 0.38); }

/* Obuna */
.bill-active { padding: 12px 14px; display: flex; align-items: center; margin-bottom: 12px; }
.bill-active .col { margin-left: 10px; flex: 1; min-width: 0; }
.bill-active .t { color: #fff; font-size: 14px; font-weight: 700; line-height: normal; }
.bill-active .r { margin-top: 3px; display: flex; align-items: baseline; min-width: 0; }
.bill-active .y { color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.bill-active .bill-cd { color: var(--success); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-active .s { margin-top: 2px; color: rgba(255, 255, 255, 0.5); font-size: 11.5px; line-height: 1.35; }
.bill-active + .bill-card { margin-top: 0; }

.bill-plan { padding: 12px 12px 12px 16px; display: flex; align-items: center; }
.bill-plan .col { flex: 1; min-width: 0; }
.bill-plan .r { display: flex; align-items: center; }
.bill-plan .n { color: #fff; font-size: 16px; font-weight: 700; line-height: normal; }
.bill-plan .disc {
  margin-left: 8px; padding: 3px 7px; border-radius: 7px; background: rgba(74, 222, 128, 0.18);
  color: var(--success); font-size: 10.5px; font-weight: 700; line-height: normal;
}
.bill-plan .p { margin-top: 3px; color: rgba(255, 255, 255, 0.65); font-size: 13px; }
.bill-plan .buy {
  height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; min-width: 64px;
}
.bill-foot { margin-top: 14px; color: rgba(255, 255, 255, 0.45); font-size: 11.5px; line-height: 1.45; }

/* Tarix */
.bill-hrow { padding-bottom: 10px; }
.bill-hist { border-radius: 14px; padding: 11px 14px; display: flex; align-items: center; }
.bill-hist .ib { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bill-hist .col { margin-left: 12px; flex: 1; min-width: 0; }
.bill-hist .t { color: #fff; font-size: 13.5px; font-weight: 700; line-height: normal; }
.bill-hist .w { margin-top: 2px; color: rgba(255, 255, 255, 0.5); font-size: 11.5px; line-height: normal; white-space: pre; }
.bill-hist .a { margin-left: 8px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }

.bill-dlg .dlg-title { font-size: 17px; font-weight: 400; }
.bill-dlg .dlg-text { color: rgba(255, 255, 255, 0.7); }
.bill-dlg .dlg-actions .btn:last-child { color: var(--accent); }

/* catalog.css */
/* ── Katalog (`catalog_screen.dart`) ─────────────────────────── */
.cat-root { height: 100%; display: flex; flex-direction: column; }
.cat-root > .home-head { flex-shrink: 0; }

/* Tugmalar qatori (`_TabBar`): 46 px, qo'lda suriladi. */
.cat-tabs {
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, color 200ms ease-out;
}
.cat-tab.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.32);
}

/* Sahifalar (`PageView`) — barmoq bilan suriladi. */
.cat-pager {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cat-pager::-webkit-scrollbar { display: none; }
.cat-pager.anim { scroll-snap-type: none; }
.cat-pane {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.cat-pane::-webkit-scrollbar { display: none; }
.cat-pane-body { min-height: 100%; }

.cat-grid {
  padding: 6px 16px 24px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 14px;
}
/* Pastki panel + unga yopishgan "Filtrlash" tugmasi ostida qolmasin. */
.cat-bottom-space { height: calc(max(var(--safe-bottom), 26px) + 12px + 74px + 10px + 42px); }

.cat-loading { height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.cat-empty { height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cat-empty .msg { margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 14px; }

/* Tortib yangilash (`RefreshIndicator`) */
.cat-ptr {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.cat-ptr-c {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-ptr-c .spinner { animation: none; }
.cat-ptr-c.spin .spinner { animation: spin 1s linear infinite; }

/* ── "Filtrlash" tugmasi: pastki paneldan 10 px yuqorida ─────── */
.cat-fbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(var(--safe-bottom), 26px) + 12px + 74px + 10px);
  display: none;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.cat-fbar.show { display: flex; }
.cat-fbtn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
.cat-fbtn.on { background: var(--accent); border-color: var(--accent); }
.cat-fbtn-main {
  display: flex;
  align-items: center;
  padding: 11px 18px 11px 18px;
  border-radius: 24px;
  cursor: pointer;
}
.cat-fbtn.on .cat-fbtn-main { padding-right: 12px; }
.cat-fbtn-main .t { margin-left: 8px; color: #fff; font-size: 14px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.cat-fbtn-x { display: flex; padding: 11px 16px 11px 4px; border-radius: 24px; cursor: pointer; }

/* ── Filtr oynasi (`_FilterSheet`) ───────────────────────────── */
.sheet.cat-fsheet {
  background: transparent;
  border: 0;
  border-radius: 0;
  max-height: none;
  overflow: visible;
  padding: 0 14px calc(var(--safe-bottom) + 14px) 14px;
}
.sheet.cat-fsheet > .sheet-handle { display: none; }
.cat-fs {
  border-radius: 22px;
  padding: 12px 16px 14px 16px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.cat-fs-handle { flex-shrink: 0; align-self: center; width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); }
.cat-fs-title { flex-shrink: 0; margin: 14px 0 12px; color: #fff; font-size: 16px; font-weight: 800; line-height: normal; }
.cat-fs-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cat-fs-scroll::-webkit-scrollbar { display: none; }
.cat-fs-sec { margin-bottom: 8px; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 700; line-height: normal; }
.cat-fs-none { padding: 24px 0; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
.cat-chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.cat-fs-btns { flex-shrink: 0; display: flex; gap: 10px; margin-top: 14px; }
.cat-fs-btns .btn { flex: 1; min-width: 0; height: 46px; border-radius: 13px; padding: 0 12px; font-size: 14px; }
.cat-fs-clear { background: transparent; color: #fff; font-weight: 700; border: 1px solid var(--border); }
.cat-fs-apply { background: var(--accent); color: #fff; font-weight: 800; }

/* comments.css */
/* Izohlar oynasi — `lib/widgets/comments_tab.dart`. */

.cm { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cm-sortbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px 2px; flex-shrink: 0; }
.cm-sortbar .grow { flex: 1; }
.cm-exp { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-chip {
  padding: 7px 11px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6);
  font-size: 12px; font-weight: 700; line-height: normal; cursor: pointer; transition: background 150ms, color 150ms;
}
.cm-chip.on { background: var(--accent); color: #fff; }

.cm-banner-host { flex-shrink: 0; }
.cm-banner {
  margin: 2px 12px 6px; padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 10px;
  background: rgba(74, 222, 128, 0.13); border: 1px solid rgba(74, 222, 128, 0.35);
  color: #fff; font-size: 12.5px; line-height: 1.35; font-weight: 600;
}

.cm-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 12px 12px; }
.cm-list::-webkit-scrollbar { display: none; }
.cm-pull { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: height 150ms; }
.cm-center { height: 220px; display: flex; align-items: center; justify-content: center; }
.cm-empty { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cm-empty .t { margin-top: 12px; color: rgba(255, 255, 255, 0.45); font-size: 13px; text-align: center; }
.cm-more-load { padding: 18px 0; display: flex; justify-content: center; }

.cm-block { padding-bottom: 14px; }
.cm-c { display: flex; align-items: flex-start; }
.cm-ava {
  position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  overflow: hidden; background: var(--card-alt); flex-shrink: 0; cursor: pointer;
}
.cm-ava .l { color: rgba(255, 255, 255, 0.7); font-weight: 800; }
.cm-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-main { margin-left: 10px; flex: 1; min-width: 0; }
.cm-hd { display: flex; align-items: center; min-width: 0; }
.cm-n { color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex-shrink: 1; min-width: 0; }
.cm-c.small .cm-n { font-size: 12px; }
.cm-t { margin-left: 6px; color: rgba(255, 255, 255, 0.38); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.cm-body { margin-top: 3px; color: rgba(255, 255, 255, 0.86); font-size: 13.5px; line-height: 1.38; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.cm-c.small .cm-body { font-size: 13px; }
.cm-body.del { color: rgba(255, 255, 255, 0.35); font-style: italic; }
.cm-media { margin-top: 5px; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.cm-acts { margin-top: 2px; display: flex; align-items: center; }
.cm-like {
  min-height: 40px; min-width: 40px; padding: 7px 10px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); cursor: pointer; margin-right: 4px;
}
.cm-like.on { background: rgba(194, 65, 12, 0.14); color: var(--accent); }
.cm-like span { margin-left: 6px; font-size: 13px; font-weight: 700; }
.cm-tb { min-height: 40px; padding: 0 8px; display: flex; align-items: center; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cm-more { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-rt { margin-left: 46px; margin-top: 2px; padding: 5px 0; display: inline-flex; align-items: center; cursor: pointer; }
.cm-rt span { margin-left: 5px; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.cm-replies { padding: 4px 0 0 34px; }
.cm-rw { padding-bottom: 10px; }

/* Yozish qatori */
.cm-comp { flex-shrink: 0; background: var(--surface); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cm-replying:not(:empty) { padding: 8px 12px 0; }
.cm-rp { display: flex; align-items: center; padding-bottom: 6px; }
.cm-rp .t { margin-left: 6px; flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.6); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-rp .x { padding: 4px; display: flex; cursor: pointer; }
.cm-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; }
.cm-replying:not(:empty) + .cm-row { padding-top: 0; }
.cm-field {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; padding: 2px 14px 2px 2px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
}
.cm-field .tge-btn { margin-bottom: 0; }
.cm-field textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: #fff; font: inherit;
  font-size: 14px; line-height: 19px; padding: 12px 0 13px; height: 44px; overflow-y: auto;
  user-select: text; -webkit-user-select: text; caret-color: var(--accent);
}
.cm-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.cm-send { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 3px; cursor: pointer; }
.cm-send.on { background: var(--accent); }
.cm-panel { padding-bottom: 0; }

/* O'chirish dialogi */
.cm-dlg { padding: 22px 22px 16px; }
.cm-dlg-t { color: #fff; font-size: 15px; line-height: 1.4; text-align: center; }
.cm-dlg-b { margin-top: 18px; display: flex; gap: 10px; }
.cm-dlg-b .btn { flex: 1; }
.cm-no { background: transparent; color: var(--accent2); border: 1px solid rgba(255, 255, 255, 0.24); }
.cm-yes { background: #E53935; color: #fff; }

/* Pastdan chiqadigan oynalar */
.cm-sheet-wrap {
  position: absolute; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.54); display: flex; align-items: flex-end;
  opacity: 0; transition: opacity 200ms;
}
.cm-sheet-wrap.in { opacity: 1; }
.cm-sheet { width: 100%; transform: translateY(100%); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); }
.cm-sheet-wrap.in .cm-sheet { transform: none; }
.cm-sheet-wrap.menu .cm-sheet { margin: 12px 12px calc(12px + var(--safe-bottom)); background: var(--card); border-radius: 18px; overflow: hidden; }
.cm-menu-it { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 16px; cursor: pointer; color: #E57373; font-size: 14.5px; font-weight: 700; }
.cm-menu-it:active { background: rgba(255, 255, 255, 0.06); }
.cm-sheet-wrap.report .cm-sheet {
  background: var(--card); border-radius: 22px 22px 0 0; padding: 10px 18px calc(16px + var(--safe-bottom));
  max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column;
}
.cm-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); margin: 0 auto 14px; flex-shrink: 0; }
.cm-rh { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 700; }
.cm-rd { margin-top: 10px; color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.4; }
.cm-rq { margin-top: 12px; padding: 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.cm-rq .n { color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; }
.cm-rq .b { margin-top: 3px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-rta { margin-top: 14px; padding: 6px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09); }
.cm-rta textarea {
  width: 100%; resize: none; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 14px;
  line-height: 1.4; padding: 8px 0; min-height: 126px; user-select: text; -webkit-user-select: text; caret-color: var(--accent);
}
.cm-rta textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.cm-rta .cnt { text-align: right; color: rgba(255, 255, 255, 0.3); font-size: 11px; padding-bottom: 2px; }
.cm-rerr { color: #E57373; font-size: 12.5px; }
.cm-rerr:not(:empty) { margin-top: 8px; }
.cm-rb { margin-top: 12px; display: flex; gap: 10px; }
.cm-rb .btn { flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; }
.cm-cancel { background: transparent; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); }
.cm-go { background: #E53935; color: #fff; font-weight: 700; }
.cm-go:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); }

/* library.css */
/* Kutubxona — `library_screen.dart`, `history_screen.dart`,
 * `favorites_screen.dart` (onlayn qismi). */

.lib { height: 100%; display: flex; flex-direction: column; overflow: hidden; }

.lib-head {
  padding: 16px 20px 12px 20px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: normal;
  flex-shrink: 0;
}

/* `_TabButton` */
.lib-tabs { display: flex; gap: 8px; padding: 0 16px 12px 16px; flex-shrink: 0; }
.lib-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 0;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.lib-tab span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 180ms;
}
.lib-tab.active {
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  border-color: transparent;
}
.lib-tab.active span { color: #fff; }

/* `PageView` */
.lib-pager {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lib-pager::-webkit-scrollbar { display: none; }
.lib-pane {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lib-pane::-webkit-scrollbar { display: none; }

.lib-list { padding: 4px 16px 120px 16px; display: flex; flex-direction: column; gap: 12px; }
.lib-list-ah { padding-bottom: 40px; }
.lib-grid { padding-top: 4px; padding-bottom: 120px; }
.lib-fav .empty-glass, .lib-hist .empty-glass { padding-bottom: 120px; }

/* Poster (kadr o'rnida) */
.lib-poster { position: absolute; inset: 0; background: var(--card-alt); }
.lib-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 120ms;
}
.lib-poster img.ok { opacity: 1; }
.lib-paid { position: absolute; top: 8px; right: 8px; }

/* `AnimeRow` */
.lib-arow { border-radius: 18px; padding: 10px; cursor: pointer; }
.lib-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.lib-arow-t {
  margin-top: 10px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.lib-arow-s {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lib-arow-d {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `EpisodeRow` */
.lib-erow {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  -webkit-touch-callout: none;
}
.lib-etexts {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.lib-eleft { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lib-st {
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 1px 3px #000,
    1px 0 2px rgba(0, 0, 0, 0.87),
    -1px 0 2px rgba(0, 0, 0, 0.87),
    0 -1px 2px rgba(0, 0, 0, 0.87);
}
.lib-etexts > .lib-st { flex-shrink: 0; }
.lib-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.24);
}
.lib-bar > div { height: 100%; background: linear-gradient(to right, var(--accent), var(--accent2)); }

/* `AnimeHistoryScreen` */
.lib-ah-head { display: flex; align-items: center; padding: 12px 16px 10px 16px; flex-shrink: 0; }
.lib-ah-back { border-radius: 14px; padding: 8px; display: flex; cursor: pointer; }
.lib-ah-t {
  flex: 1;
  min-width: 0;
  margin-left: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O'chirishni tasdiqlash (`_confirmRemove`) */
.lib-cf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lib-cf-t { margin-top: 12px; color: #fff; font-size: 15px; line-height: 1.4; }
.lib-cf-s {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lib-cf-row { margin-top: 18px; display: flex; gap: 10px; width: 100%; }
.lib-cf-row .btn { flex: 1; padding: 0 12px; }
.lib-cf-row .lib-yes { background: #E53935; color: #fff; }

/* `RefreshIndicator` */
.lib-ptr {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -40px);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lib-ptr-arc {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}
.lib-ptr.spin .lib-ptr-arc { animation: spin 0.9s linear infinite; }

/* media-view.css */
/* Yozishmadagi rasm/video — `lib/screens/media_view_screen.dart`. */

.route.mv { background: #000; padding-top: 0; }
.mv-bar {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + var(--content-top)); z-index: 2;
  background: transparent;
}
.mv-body {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding-top: calc(var(--safe-top) + var(--content-top));
}
.mv-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.mv-center.col { flex-direction: column; }
.mv-err { color: rgba(255, 255, 255, 0.54); font-size: 14px; }
.mv-retry {
  margin-top: 12px; height: 40px; padding: 0 24px 0 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.mv-load {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.mv-zoom {
  flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.mv-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }

.mv-vid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mv-frame { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.mv-frame video { display: block; max-width: 100vw; max-height: calc(100vh - 160px); background: #000; }
.mv-tap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mv-pp {
  width: 62px; height: 62px; border-radius: 50%; background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center;
  transition: opacity 180ms; opacity: 1;
}
.mv-pp.hide { opacity: 0; }

.mv-ctl { padding: 0 16px calc(28px + var(--safe-bottom)); flex-shrink: 0; }
.mv-slider { position: relative; height: 28px; margin: 0 8px; touch-action: none; cursor: pointer; }
.mv-slider .tr { position: absolute; left: 0; right: 0; top: 12.5px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.mv-slider .fill { height: 100%; width: 0; background: #fff; }
.mv-slider .th { position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; left: 0; }
.mv-times { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.7); font-size: 12px; }

/* packs.css */
.pk-tabs { display: flex; margin: 4px 16px 8px; padding: 3px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; flex-shrink: 0; }
.pk-tab { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: rgba(255, 255, 255, 0.54); font-size: 13.5px; cursor: pointer; }
.pk-tab.on { background: var(--accent); color: #fff; font-weight: 600; }
.pk-list { padding: 4px 16px 0; }
.pk-row { display: flex; align-items: center; padding: 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; gap: 12px; cursor: pointer; }
.pk-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pk-tx { flex: 1; min-width: 0; }
.pk-tx .n1 { color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tx .n2 { color: rgba(255, 255, 255, 0.5); font-size: 12.5px; margin-top: 2px; }
.pk-kinds { display: flex; gap: 8px; }
.pk-kind { flex: 1; padding: 12px 6px; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pk-kind.on { background: rgba(194, 65, 12, 0.25); border-color: rgba(194, 65, 12, 0.6); color: var(--accent2); }
.pk-grid { display: grid; gap: 8px; padding: 8px 16px 0; }
.pk-sticker, .pk-gif { grid-template-columns: repeat(3, 1fr); }
.pk-emoji { grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pk-cell { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pk-cell .ph, .pk-cell img { width: 100%; height: 100%; object-fit: contain; }
.pk-ops { padding: 4px 16px 0; }
.pk-op { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--card); color: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.pk-op span { flex: 1; }
.pk-op button { background: none; border: 0; color: var(--accent2); font: inherit; font-weight: 700; cursor: pointer; }
.pk-big { display: flex; justify-content: center; min-height: 200px; align-items: center; }
.pk-big img, .pk-big video { max-width: 100%; max-height: 52vh; border-radius: 12px; }

/* player.css */
/* Pleyer ekrani — `lib/screens/video_player_screen.dart` (o'lchamlar shundan). */

/* ── Eshiklar (obuna / kanal ruxsati) ─────────────────────────── */
.pl-gate-bar { height: 56px; display: flex; align-items: center; padding: 0 4px; flex-shrink: 0; }
.pl-gate-scroll { flex: 1; overflow-y: auto; display: flex; }
.pl-gate { margin: auto; width: 100%; max-width: 480px; padding: 0 24px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pl-sub-badge { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--accent2)); box-shadow: 0 10px 26px rgba(255, 201, 60, 0.3); }
.pl-gate-t { color: #fff; font-size: 22px; font-weight: 800; }
.pl-gate-s { color: rgba(255, 255, 255, 0.62); font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
.pl-gate-btn { width: 100%; height: 48px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.pl-gate-btn:active { filter: brightness(1.12); }
.pl-gate-link { margin-top: 10px; background: none; border: 0; color: rgba(255, 255, 255, 0.55); font: inherit; font-size: 13px; padding: 10px; cursor: pointer; }
.pl-chan { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; text-align: left; }
.pl-chan .t { color: #fff; font-size: 14px; }

/* ── Oynalar (baho, sifat) ────────────────────────────────────── */
.pl-ov { position: absolute; inset: 0; z-index: 80; opacity: 0; transition: opacity 200ms; display: flex; }
.pl-ov.in { opacity: 1; }
.pl-rate-ov { background: rgba(0, 0, 0, 0.54); align-items: flex-end; }
.pl-rate { width: 100%; margin: 0 16px calc(var(--safe-bottom) + 16px); border-radius: 22px; padding: 18px 18px 14px; transform: translateY(30px); transition: transform 220ms; }
.pl-ov.in .pl-rate { transform: none; }
.pl-rate-t { color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
.pl-rate-s { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; text-align: center; margin: 4px 0 14px; }
.pl-rate-stars { display: flex; }
.pl-rate-stars .st { flex: 1; display: flex; justify-content: center; padding: 6px 0; cursor: pointer; }
.pl-rate-btns { display: flex; gap: 10px; margin-top: 14px; }
.pl-rate-btns .btn { flex: 1; height: 40px; border-radius: 20px; }
.pl-qd-ov { background: rgba(0, 0, 0, 0.54); align-items: center; justify-content: center; padding: 0 24px; }
.pl-qd { width: 100%; max-width: 420px; background: var(--card); border-radius: 22px; padding: 20px; }
.pl-qd-t { color: #fff; font-size: 19px; font-weight: 800; margin-bottom: 16px; }
.pl-qd-item { display: flex; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); margin-bottom: 10px; cursor: pointer; }
.pl-qd-item.sel { background: var(--accent); }
.pl-qd-item .col { flex: 1; }
.pl-qd-item .q { color: #fff; font-weight: 800; font-size: 15px; }
.pl-qd-item .sz { color: rgba(255, 255, 255, 0.54); font-size: 12px; margin-top: 2px; }
.pl-qd-item.sel .q { color: #000; }
.pl-qd-item.sel .sz { color: rgba(0, 0, 0, 0.87); }

/* ── Ekran ────────────────────────────────────────────────────── */
.pl { background: var(--bg); }
.pl-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pl-top-part { flex-shrink: 0; max-height: 1000px; overflow: hidden; transition: max-height 220ms ease-out; }
.pl.cx .pl-top-part { max-height: 0; }
.pl-head { display: flex; align-items: center; padding: 12px 16px 8px; }
.pl-head .gbtn { width: 40px; height: 40px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pl-head .nm { flex: 1; min-width: 0; margin-left: 12px; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-boxwrap { padding: 0 16px; }
.pl-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.pl-box.fs { position: fixed; inset: 0; z-index: 40; width: auto; aspect-ratio: auto; border-radius: 0; }
.pl-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.38); font-size: 13px; padding: 0 20px; text-align: center; gap: 8px; }
.pl-err { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; color: rgba(255, 255, 255, 0.7); font-size: 13px; gap: 10px; background: rgba(0, 0, 0, 0.55); }
.pl-err.on { display: flex; }
.pl-err .rt { margin-top: 4px; background: var(--accent); color: #000; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 12px; cursor: pointer; }
.pl-gest { position: absolute; inset: 0; z-index: 2; }

/* Boshqaruv */
.pl-ctrl { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 200ms;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 68%, rgba(0, 0, 0, 0.85) 100%); }
.pl-box.show .pl-ctrl { opacity: 1; }
.pl-ctrl > * { pointer-events: none; }
.pl-box.show .pl-ctrl button, .pl-box.show .pl-ctrl .pl-track, .pl-box.show .pl-ctrl .pl-chip { pointer-events: auto; }
.pl-box.locked .pl-ctrl { opacity: 0 !important; }
.pl-ctrl button { background: none; border: 0; color: #fff; font: inherit; padding: 0; cursor: pointer; }
.pl-more { position: absolute; top: 2px; right: 4px; padding: 9px !important; }
.pl-box.fs .pl-more { display: none; }
.pl-fs-only { display: none !important; }
.pl-box.fs .pl-fs-only { display: flex !important; }
.pl-box.fs .pl-nfs-only { display: none !important; }
.pl-top { position: absolute; top: calc(6px + var(--safe-top, 0px) + var(--content-top, 0px)); left: 12px; right: 8px; align-items: center; }
.pl-top .tt { flex: 1; min-width: 0; margin-left: 4px; }
.pl-top .t1 { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-top .t2 { color: rgba(255, 255, 255, 0.7); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-top button { padding: 9px !important; }
.pl-center { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pl-center .ring { position: absolute; inset: -6px; display: none; }
.pl-box.busy .pl-center .ring { display: block; }
.pl-center .pp { width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); display: none; align-items: center; justify-content: center; }
.pl-box.show:not(.fs) .pl-center .pp { display: grid; place-items: center; pointer-events: auto; }
.pl-center .pp[hidden] { display: none; }
.pl-wait { position: absolute; left: 0; right: 0; top: calc(50% + 60px); text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; z-index: 5; display: none; padding: 0 16px; }
.pl-box.busy .pl-wait.on { display: block; }
@keyframes plspin { to { transform: rotate(360deg); } }
.pl-ring { width: 76px; height: 76px; border-radius: 50%; border: 2.6px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); animation: plspin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; }

/* Pastki panel */
.pl-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 4px 4px 0; display: flex; flex-direction: column; }
.pl-box.fs .pl-bottom { padding: 0 12px calc(var(--safe-bottom) + 6px); }
.pl-brow { display: flex; align-items: center; }
.pl-chips { justify-content: flex-end; gap: 8px; margin-bottom: 6px; }
.pl-chip { height: 30px; min-width: 44px; padding: 0 10px; border-radius: 15px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.pl-fsbtns { justify-content: flex-end; gap: 10px; margin-bottom: 6px; }
.pl-fsb { width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.18) !important; display: flex !important; align-items: center; justify-content: center; }
.pl-fsb.main { width: 52px; height: 52px; background: rgba(194, 65, 12, 0.9); }
.pl-fsb[disabled] { opacity: 0.35; }
.pl-track { position: relative; flex: 1; height: 30px; touch-action: none; cursor: pointer; }
.pl-track .tr, .pl-track .bf, .pl-track .pd { position: absolute; left: 0; top: 50%; height: 3.5px; margin-top: -1.75px; border-radius: 2px; }
.pl-track .tr { right: 0; background: rgba(255, 255, 255, 0.2); }
.pl-track .bf { background: rgba(255, 255, 255, 0.4); width: 0; }
.pl-track .pd { background: var(--accent); width: 0; }
.pl-track .th { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); left: 0; }
.pl-box.fs .pl-track .tr, .pl-box.fs .pl-track .bf, .pl-box.fs .pl-track .pd { height: 5px; margin-top: -2.5px; }
.pl-box.fs .pl-track .th { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pl-time { color: #fff; font-size: 11.5px; font-weight: 600; margin: 0 6px; white-space: nowrap; }
.pl-box.fs .pl-time { font-size: 13px; font-weight: 700; margin-left: 10px; margin-right: 0; }
.pl-ctrl button.pl-hq { padding: 4px 7px !important; border-radius: 7px; background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; font-size: 10.5px; font-weight: 700; line-height: normal; margin-right: 3px; }
.pl-fsx { padding: 4px 3px !important; display: flex; }

/* Nozik chiziq (boshqaruv yashirin) */
.pl-thin { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); z-index: 3; pointer-events: none; opacity: 0; transition: opacity 120ms; }
.pl-box:not(.show) .pl-thin.on { opacity: 1; }
.pl-thin .bf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); width: 0; }
.pl-thin .pd { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(194, 65, 12, 0.85); width: 0; }

/* Sek belgisi, xabar, intro */
.pl-badge { position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10px; pointer-events: none; }
.pl-badge.l { left: 25%; margin-left: -32px; }
.pl-badge.r { left: 75%; margin-left: -32px; }
.pl-badge.on { display: flex; }
.pl-notice { position: absolute; left: 24px; right: 24px; bottom: 22%; z-index: 7; display: none; justify-content: center; pointer-events: none; }
.pl-notice span { background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 12px; text-align: center; }
.pl-notice.on { display: flex; }
.pl-intro, .pl-unlock { position: absolute; z-index: 7; display: none; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--border-bright); border-radius: 12px; padding: 8px 12px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.pl-intro { top: 10px; left: 10px; }
.pl-box.fs.show .pl-intro { top: 54px; left: 16px; }
.pl-intro.on { display: flex; }
.pl-unlock { top: 10px; right: 10px; color: var(--accent); }
.pl-box.locked.show .pl-unlock { display: flex; }

/* Panellar */
.pl-scrim { position: absolute; inset: 0; z-index: 8; display: none; }
.pl-scrim.on { display: block; }
.pl-pan { position: absolute; z-index: 9; display: none; background: var(--card); border: 1px solid var(--border-bright); border-radius: 12px; padding: 8px 14px; max-height: 85%; overflow-y: auto; }
.pl-pan.on { display: block; }
.pl-menu { top: 40px; right: 8px; width: 260px; }
.pl-row { display: flex; align-items: center; height: 46px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-row .lb { flex: 1; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row.acc { color: var(--accent); }
.pl-hr { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 4px 0; }
.pl-speed { right: 24px; top: 50%; transform: translateY(-50%); padding: 6px 8px; }
.pl-speed div { width: 72px; text-align: center; padding: 5px 0; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-speed div.sel { background: rgba(194, 65, 12, 0.2); color: var(--accent); font-weight: 800; }
.pl-eplist { right: 16px; top: 12px; bottom: 12px; width: clamp(300px, 50%, 460px); max-height: none; padding: 12px; }
.pl-eplist .hd { display: flex; align-items: center; margin: 0 4px 10px; color: #fff; font-weight: 700; font-size: 15px; }
.pl-eplist .hd .n { flex: 1; }
.pl-eplist .hd .c { color: rgba(255, 255, 255, 0.54); font-size: 12px; font-weight: 600; margin-left: 8px; }
.pl-eplist .it { display: flex; align-items: center; padding: 13px 12px; margin: 2px 0; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.pl-eplist .it.cur { background: rgba(194, 65, 12, 0.2); color: var(--accent); font-weight: 800; }
.pl-eplist .it .en { margin-left: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.54); }
.pl-sleep { z-index: 70; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 20px; display: none; }
.pl-sleep.on { display: flex; }
.pl-sleep .pn { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border-bright); border-radius: 12px; padding: 20px; text-align: center; }
.pl-sleep .h { color: #fff; font-size: 19px; font-weight: 700; }
.pl-sleep .left { color: var(--accent); font-size: 16px; font-weight: 600; margin-top: 6px; }
.pl-sleep .opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.pl-sleep .o { padding: 13px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.pl-sleep .o.sel { background: rgba(194, 65, 12, 0.25); border-color: rgba(194, 65, 12, 0.5); color: var(--accent); }

/* Hozir ko'rilmoqda, tablar, qism navigatsiyasi */
.pl-now { padding: 6px 16px 0; }
.pl-now .in { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 5px 10px; }
.pl-now .a { color: #fff; font-size: 11.5px; font-weight: 700; }
.pl-now .s { display: inline-flex; align-items: center; gap: 3px; color: rgba(255, 255, 255, 0.62); font-size: 10.5px; }
.pl-tabs { margin: 8px 16px 0; padding: 3px; display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.pl-tab { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: rgba(255, 255, 255, 0.54); font-size: 13px; cursor: pointer; }
.pl-tab.on { background: var(--accent); color: #fff; font-weight: 600; }
.pl-epnav { margin: 6px 16px; padding: 5px 6px; display: flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.pl-epnav button { width: 68px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; }
.pl-epnav button[disabled] { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.06); opacity: 0.4; }
.pl-epnav .lb { flex: 1; text-align: center; color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-epnav .lb.dim { color: rgba(255, 255, 255, 0.54); }
.pl-pages { position: relative; flex: 1; min-height: 0; }
.pl-pane { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 120px; display: none; }
.pl-pane::-webkit-scrollbar { display: none; }
.pl-pane.on { display: block; }
.pl-pane.cm-pane { padding: 0; }
.pl-pane .mid { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); }

/* Qism va bo'lim qatorlari */
.pl-ep { display: flex; align-items: center; margin-bottom: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; cursor: pointer; }
.pl-ep.cur { background: rgba(194, 65, 12, 0.14); border-color: rgba(194, 65, 12, 0.5); }
.pl-ep .bx { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pl-ep.cur .bx { background: rgba(194, 65, 12, 0.28); }
.pl-ep .t { margin-left: 12px; flex: 1; color: #fff; font-weight: 600; font-size: 14px; }
.pl-ep.cur .t { color: var(--accent); }
.pl-ep .rdy { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-left: 8px; }
.pl-sn { display: flex; align-items: center; margin-bottom: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; cursor: pointer; }
.pl-sn.cur { background: rgba(194, 65, 12, 0.12); border-color: rgba(194, 65, 12, 0.4); }
.pl-sn .ph { width: 50px; height: 50px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pl-sn .ph img { width: 100%; height: 100%; object-fit: cover; }
.pl-sn .tx { flex: 1; min-width: 0; margin-left: 12px; }
.pl-sn .n1 { color: #fff; font-weight: 600; font-size: 14px; }
.pl-sn.cur .n1 { color: var(--accent); }
.pl-sn .n2 { color: rgba(255, 255, 255, 0.45); font-size: 12px; }

/* Ma'lumot oynasi */
.pl-acts { display: flex; gap: 12px; }
.pl-act { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; }
.pl-act .lb { color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.pl-card.big { padding: 18px; }
.pl-stat { display: flex; align-items: center; padding: 5px 0; }
.pl-stat .l { color: rgba(255, 255, 255, 0.6); font-size: 13px; margin-left: 9px; }
.pl-stat .v { flex: 1; text-align: right; color: #fff; font-size: 13.5px; font-weight: 600; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-inf { display: flex; margin-bottom: 8px; font-size: 13px; }
.pl-inf .l { width: 90px; flex-shrink: 0; color: rgba(255, 255, 255, 0.5); }
.pl-inf .v { flex: 1; color: #fff; }
.pl-desc-t { color: rgba(255, 255, 255, 0.6); font-size: 12px; font-weight: 500; margin: 12px 0 6px; }
.pl-desc { color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

/* Oddiy rejimda panellar pleyer ramkasidan chiqib, butun ekranda chiziladi */
.pl-box:not(.fs) .pl-scrim { position: fixed; inset: 0; z-index: 70; }
.pl-box:not(.fs) .pl-menu { position: fixed; z-index: 71; }
.pl-center .pp .ic, .pp2 .ic { display: block; }
.pl-center .pp .ic { position: relative; top: 4px; }

/* Qismlar: 3 ustunli to'r, faqat "N-qism" yozuvi */
.pl-epgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-eg { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-eg.cur { background: rgba(194, 65, 12, 0.14); border-color: rgba(194, 65, 12, 0.5); color: var(--accent); }

/* Portretda to'liq ekran — 90° aylantirilgan (gorizontal) */
.pl-box.fs.rot { top: 0; left: 0; right: auto; bottom: auto; transform-origin: 0 0; }
.pl-box.rot .pl-top { top: 6px; left: calc(12px + var(--safe-top) + var(--content-top)); }
.pl-box.rot .pl-bottom { padding-left: calc(12px + var(--safe-top) + var(--content-top)); }

/* Aylantirilgan rejimda mahalliy "o'ng" chet — ekran PASTI: tizim tugmalari (uy / orqaga) shu yerda */
.pl-box.rot .pl-top { right: calc(var(--safe-bottom, 0px) + 72px); }
.pl-box.rot .pl-bottom { padding-right: calc(var(--safe-bottom, 0px) + 72px); }
.pl-box.rot .pl-speed { right: 96px; }
.pl-box.rot .pl-eplist { right: 88px; }

/* profile.css */
/* Profil (`profile_screen.dart`), tahrirlash (`profile_edit_screen.dart`),
 * sozlamalar, qurilmalar va boshqa odam profili. Prefikslar:
 * pf- profil, pe- tahrirlash, ss- sozlamalar, se- qurilmalar, pp- ommaviy profil. */

/* ── Profil sahifasi ─────────────────────────────────────────── */
.pf { padding: 16px 16px 120px; line-height: normal; }
.pf .grow { flex: 1; }

.pf-card { position: relative; border-radius: 20px; padding: 18px; }
.pf-card-row { display: flex; align-items: center; }
.pf-av { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.pf-av-in {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, 0.24); display: flex; align-items: center; justify-content: center;
}
.pf-av-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-av-l { color: #fff; font-size: 32px; font-weight: 600; }
.pf-av-prem { position: absolute; left: 0; right: 0; top: 3px; display: flex; justify-content: center; }
.pf-info { flex: 1; min-width: 0; margin-left: 30px; padding-right: 34px; }
.pf-name { color: #fff; font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-user { margin-top: 4px; color: var(--text-dim); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-id {
  margin-top: 8px; display: inline-flex; align-items: center; padding: 7px 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.20);
}
.pf-id span { color: rgba(255, 255, 255, 0.78); font-size: 14.5px; font-weight: 600; margin-right: 9px; }
.pf-bal { margin-top: 6px; color: rgba(255, 255, 255, 0.62); font-size: 14.5px; font-weight: 600; }
.pf-edit {
  position: absolute; top: 18px; right: 18px; padding: 8px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); display: flex;
}

.pf-prem {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 20px;
  background: linear-gradient(to bottom right, var(--gold), var(--accent2));
  box-shadow: 0 3px 10px rgba(255, 201, 60, 0.35);
}
.pf-prem span:last-child { margin-left: 3px; color: var(--accent-tint); font-size: 9.5px; font-weight: 900; letter-spacing: 0.4px; line-height: normal; }
.pf-prem.compact { padding: 2.5px 6px; }
.pf-prem.compact span:last-child { margin-left: 2px; font-size: 8px; letter-spacing: 0.2px; }

.pf-bill-slot { margin-top: 16px; }
.pf-bill {
  display: flex; align-items: center; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(to right, var(--accent), var(--accent2));
  box-shadow: 0 6px 16px rgba(194, 65, 12, 0.28);
}
.pf-bill-main { flex: 1; min-width: 0; margin: 0 6px 0 10px; }
.pf-bill-main > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bill-t { color: #fff; font-size: 14px; font-weight: 700; }
.pf-bill-s { margin-top: 3px; color: rgba(255, 255, 255, 0.85); font-size: 11.5px; font-weight: 600; }
.pf-bill-c { margin-top: 1px; color: #fff; font-size: 12.5px; font-weight: 700; }

.pf-stats-slot { margin-top: 12px; }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-stat { border-radius: 18px; padding: 14px; min-width: 0; }
.pf-stat.open { cursor: pointer; }
.pf-stat-h { display: flex; align-items: center; }
.pf-stat-h span { margin-left: 6px; color: rgba(255, 255, 255, 0.55); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stat-v { margin-top: 8px; color: #fff; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pf-traf-slot { margin-top: 12px; }
.pf-traf { border-radius: 18px; padding: 14px 16px; }
.pf-traf-h { display: flex; align-items: center; }
.pf-traf-l { margin-left: 6px; color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.pf-traf-v { color: #fff; font-size: 17px; font-weight: 800; }
.pf-traf-bar { margin: 12px 0; height: 7px; border-radius: 4px; overflow: hidden; display: flex; background: rgba(255, 255, 255, 0.10); }
.pf-traf-empty { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.pf-urow { display: flex; align-items: center; }
.pf-urow + .pf-urow { margin-top: 7px; }
.pf-urow .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pf-urow .lbl { flex: 1; min-width: 0; margin: 0 8px 0 7px; color: rgba(255, 255, 255, 0.72); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-urow .sz { color: #fff; font-size: 12.5px; font-weight: 700; }
.pf-urow .pc { width: 58px; margin-left: 10px; text-align: right; color: rgba(255, 255, 255, 0.5); font-size: 12px; }

.pf-menu { margin-top: 16px; border-radius: 20px; }
.pf-tile { display: flex; align-items: center; min-height: 56px; padding: 8px 16px; cursor: pointer; }
.pf-tile-l { flex: 1; min-width: 0; margin-left: 16px; color: #fff; font-size: 16px; }
.pf-div { height: 1px; background: rgba(255, 255, 255, 0.12); }
.pf-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--accent);
  box-shadow: 0 0 7px rgba(194, 65, 12, 0.6);
}

.pf-danger { margin-top: 16px; border-radius: 20px; padding: 16px 20px; display: flex; align-items: center; cursor: pointer; }
.pf-danger-ic { padding: 8px; border-radius: 12px; background: rgba(194, 65, 12, 0.14); display: flex; }
.pf-danger-l { margin-left: 14px; color: var(--accent); font-size: 16px; font-weight: 600; }

/* Material AlertDialog (ilovadagi `showDialog(AlertDialog(...))`). */
.pf-dlg-t { font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 16px; }
.pf-dlg-x { color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 1.5; }
.pf-task-t { font-size: 17px; font-weight: 400; margin-bottom: 16px; }
.pf-task-bar { height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.pf-task-bar > div { height: 100%; width: 0; transition: width 200ms; }
.pf-task-msg { margin-top: 12px; color: rgba(255, 255, 255, 0.75); font-size: 13px; line-height: 1.45; white-space: pre-line; }
.pf-task-pct { margin-top: 6px; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 600; }
.pf-task-spin { padding: 0 8px 4px 0; display: flex; align-items: center; height: 40px; }

/* ── Profilni tahrirlash ─────────────────────────────────────── */
.pe { padding: 12px 20px 40px; display: flex; flex-direction: column; line-height: normal; }
.pe-top { display: flex; align-items: center; }
.pe-back, .st-back { border-radius: 14px; padding: 8px; display: flex; cursor: pointer; flex-shrink: 0; }
.pe-title { margin-left: 14px; color: #fff; font-size: 19px; font-weight: 700; }
.pe-label { color: rgba(255, 255, 255, 0.7); font-size: 13.5px; font-weight: 600; }
.pe-field { margin-top: 8px; border-radius: 16px; padding: 0 14px; display: flex; align-items: center; min-height: 48px; }
.pe-in {
  flex: 1; min-width: 0; margin-left: 16px; height: 48px; border: 0; outline: none; background: transparent;
  color: #fff; font: inherit; font-size: 15.5px; padding: 0; user-select: text; -webkit-user-select: text;
}
.pe-in::placeholder { color: rgba(255, 255, 255, 0.28); }
.pe-in:disabled { opacity: 0.6; }
.pe-suffix { display: flex; align-items: center; justify-content: center; min-width: 0; }
.pe-suffix:not(:empty) { width: 48px; margin-right: -14px; }
.pe-help { margin-top: 8px; padding-left: 4px; font-size: 12.5px; line-height: 1.4; }
.pe-save {
  margin-top: 30px; padding: 16px 0; border-radius: 18px; display: flex; justify-content: center; align-items: center;
  min-height: 52px; cursor: pointer; background: linear-gradient(to bottom right, var(--accent), var(--accent2));
}
.pe-save span { color: #fff; font-size: 16px; font-weight: 600; }
.pe-err { margin-top: 12px; text-align: center; color: var(--accent); font-size: 13.5px; }

/* ── Sozlamalar ──────────────────────────────────────────────── */
.ss { padding: 8px 16px 32px; line-height: normal; }
.ss-sec { padding-left: 4px; color: rgba(255, 255, 255, 0.35); font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; }
.ss-note { padding: 0 4px; color: rgba(255, 255, 255, 0.42); font-size: 12px; line-height: 1.5; }
.ss-row { border-radius: 18px; padding: 12px 10px 12px 16px; display: flex; align-items: center; margin-bottom: 10px; }
.ss-ic { padding: 8px; border-radius: 12px; background: rgba(194, 65, 12, 0.14); display: flex; flex-shrink: 0; }
.ss-main { flex: 1; min-width: 0; margin: 0 6px 0 12px; }
.ss-t { color: #fff; font-size: 14.5px; font-weight: 600; }
.ss-h { margin-top: 2px; color: rgba(255, 255, 255, 0.54); font-size: 11.5px; line-height: 1.3; }
.ss-row .switch { margin: 0 4px; cursor: pointer; }

/* ── Qurilmalar ──────────────────────────────────────────────── */
.se { line-height: normal; }
.se-list { padding: 8px 16px 40px; }
.se-note { padding: 0 0 14px 4px; color: rgba(255, 255, 255, 0.55); font-size: 13px; line-height: 1.45; }
.se-tile { border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.se-head { display: flex; align-items: center; min-height: 24px; }
.se-dev { flex: 1; min-width: 0; margin-left: 10px; color: #fff; font-size: 15px; font-weight: 600; }
.se-cur { padding: 3px 9px; border-radius: 8px; background: rgba(74, 222, 128, 0.16); color: var(--success); font-size: 11px; font-weight: 600; }
.se-out { margin: -12px -12px -12px 0; }
.se-kv { display: flex; align-items: flex-start; padding-top: 4px; font-size: 12.5px; }
.se-kv .k { width: 108px; flex-shrink: 0; color: rgba(255, 255, 255, 0.42); }
.se-kv .v { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.78); }
.se-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.se-fail { margin-top: 14px; color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.se-retry { margin-top: 18px; }

/* ── Boshqa odamning profili ─────────────────────────────────── */
.pp { padding: 8px 16px 32px; line-height: normal; }
.pp-center { height: 100%; display: flex; align-items: center; justify-content: center; }
.pp-msg { color: rgba(255, 255, 255, 0.5); font-size: 14px; }
.pp-card { border-radius: 20px; padding: 18px; display: flex; align-items: center; overflow: visible; }
.pp-av-wrap { position: relative; flex-shrink: 0; display: flex; justify-content: center; }
.pp-av {
  position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--card-alt);
  display: flex; align-items: center; justify-content: center;
}
.pp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-av-l { color: rgba(255, 255, 255, 0.7); font-size: 38px; font-weight: 800; }
.pp-prem {
  position: absolute; top: -8px; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(to right, var(--gold), var(--accent2)); box-shadow: 0 0 12px rgba(255, 201, 60, 0.35);
}
.pp-prem span:last-child { margin-left: 3px; color: rgba(0, 0, 0, 0.87); font-size: 9.5px; font-weight: 900; letter-spacing: 0.5px; }
.pp-info { flex: 1; min-width: 0; margin-left: 16px; }
.pp-name {
  color: #fff; font-size: 21px; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.pp-user { margin-top: 3px; color: var(--text-dim); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-id {
  margin-top: 10px; display: inline-flex; align-items: center; padding: 7px 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
}
.pp-id span { margin-right: 7px; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; font-weight: 600; }
.pp-bal { margin-top: 8px; color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 600; }
.pp-locked { border-radius: 18px; padding: 20px 18px; display: flex; flex-direction: column; align-items: center; }
.pp-locked div { margin-top: 10px; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 13px; line-height: 1.4; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px; margin-bottom: 12px; }
.pp-stat { border-radius: 16px; padding: 14px 16px; min-width: 0; }
.pp-stat.open { cursor: pointer; }
.pp-stat-h { display: flex; align-items: center; }
.pp-stat-h span { margin-left: 7px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-stat-v { margin-top: 7px; color: #fff; font-size: 19px; font-weight: 800; }
.pp-admin { border-radius: 16px; padding: 14px 16px 8px; }
.pp-admin-h { display: flex; align-items: center; margin-bottom: 10px; }
.pp-admin-h span { margin-left: 7px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; }
.pp-ar { display: flex; align-items: flex-start; padding-bottom: 6px; font-size: 12.5px; }
.pp-ar .l { color: rgba(255, 255, 255, 0.5); }
.pp-ar .v { flex: 1; margin-left: 10px; text-align: right; color: #fff; font-weight: 600; }

/* Profil rasmi: yuklanish va "bosish mumkin" belgisi. */
.pf-av { cursor: pointer; }
.pf-av-busy {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.54);
  display: flex; align-items: center; justify-content: center;
}
.pf-av-busy[hidden] { display: none; }
.pf-av-cam {
  position: absolute; right: 0; bottom: 0; padding: 5px; border-radius: 50%; display: flex;
  background: var(--accent); border: 2px solid var(--card);
}

/* search.css */
/* ── Qidiruv (`search_screen.dart`) ──────────────────────────── */
.srch-root { height: 100%; display: flex; flex-direction: column; padding: 12px 16px 0 16px; }
.srch-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: 18px;
  padding: 4px 16px;
}
.srch-input {
  flex: 1;
  min-width: 0;
  margin-left: 10px;
  height: 48px;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  user-select: text;
  -webkit-user-select: text;
  caret-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.srch-input::-webkit-search-cancel-button,
.srch-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.srch-input::placeholder { color: rgba(255, 255, 255, 0.54); }
.srch-clear {
  padding: 4px;
  display: flex;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
}
.srch-clear.on { opacity: 1; transform: none; pointer-events: auto; }

.srch-body {
  flex: 1;
  min-height: 0;
  margin: 20px -16px 0 -16px;
  padding: 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.srch-body::-webkit-scrollbar { display: none; }
.srch-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.srch-msg { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.54); }

.srch-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 14px; }
.srch-card {
  aspect-ratio: 0.68;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--card-alt);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.srch-img {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.srch-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 120ms;
}
.srch-poster.ok { opacity: 1; }
.srch-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.srch-paid { position: absolute; top: 8px; right: 8px; }
.srch-info { flex-shrink: 0; padding: 8px 10px 10px 10px; }
.srch-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}
.srch-genre { font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: normal; word-break: break-word; }

/* stats.css */
/* Statistika: umumiy ekran (`stats_screen.dart`, st-), grafik
 * (`trend_chart.dart`, tc-), bosh sahifa banneri (`stats_banner.dart`, sb-),
 * bitta statistika oynasi (`stat_detail_screen.dart`, sd-). */

/* ── Umumiy statistika ───────────────────────────────────────── */
.st-top { display: flex; align-items: center; padding: 12px 16px 10px; flex-shrink: 0; line-height: normal; }
.st-title { flex: 1; min-width: 0; margin-left: 14px; color: #fff; font-size: 18px; font-weight: 700; }
.st-load { display: flex; }
.st-list { padding: 4px 16px 120px; line-height: normal; }
.st-card { border-radius: 20px; padding: 16px 18px 14px; margin-bottom: 12px; overflow: visible; }
.st-card.st-content { padding: 16px 16px 14px; }
.st-ch { display: flex; align-items: center; }
.st-ct { margin-left: 10px; color: #fff; font-size: 16.5px; font-weight: 700; }
.st-rows { margin-top: 12px; }
.st-row { display: flex; align-items: baseline; padding: 5px 0; }
.st-rl { flex: 1; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; font-weight: 500; }
.st-rv { color: #fff; font-size: 14.5px; font-weight: 600; }
.st-row.strong .st-rl { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.st-row.strong .st-rv { font-size: 16px; font-weight: 800; }
.st-chart { margin-top: 14px; }
.st-note { margin-top: 8px; color: rgba(255, 255, 255, 0.35); font-size: 11.5px; line-height: 1.3; }
.st-bigs { display: flex; gap: 8px; margin-top: 12px; }
.st-big {
  flex: 1; min-width: 0; padding: 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column; align-items: center;
}
.st-bv { margin-top: 6px; color: #fff; font-size: 18px; font-weight: 800; }
.st-bl { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.st-new { margin-top: 12px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; }
.st-tz { margin-top: 4px; text-align: center; color: rgba(255, 255, 255, 0.35); font-size: 11.5px; }

/* ── Grafik ──────────────────────────────────────────────────── */
.tc { line-height: normal; }
.tc-head { display: flex; align-items: flex-end; }
.tc-hl { flex: 1; min-width: 0; }
.tc-v { color: #fff; font-size: 20px; font-weight: 800; }
.tc-l { color: rgba(255, 255, 255, 0.54); font-size: 11.5px; }
.tc-chg { padding: 4px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 800; }
.tc-box { margin-top: 10px; position: relative; }
.tc-box canvas { display: block; touch-action: pan-y; }
.tc-center { height: 100%; display: flex; align-items: center; justify-content: center; }
.tc-err { color: rgba(255, 255, 255, 0.54); font-size: 12.5px; }
.tc-axis { margin-top: 4px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.38); font-size: 10px; }
.tc-ranges { margin-top: 10px; display: flex; }
.tc-r {
  flex: 1; margin: 0 3px; padding: 7px 0; text-align: center; border-radius: 9px; border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6); font-size: 12px; font-weight: 600; cursor: pointer;
}
.tc-r.on { color: #fff; }

/* ── Bosh sahifadagi banner ──────────────────────────────────── */
.sb { border-radius: 18px; padding: 12px 12px 12px 16px; cursor: pointer; line-height: normal; }
.sb-h { display: flex; align-items: center; }
.sb-t { flex: 1; color: #fff; font-size: 14.5px; font-weight: 700; }
.sb-u { margin-top: 4px; color: var(--accent); font-size: 13px; font-weight: 600; }
.sb-clip { margin-top: 8px; position: relative; overflow: hidden; height: 17px; }
.sb-item {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center;
  transition: transform 420ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 420ms;
}
.sb-item span:last-child {
  margin-left: 6px; flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.72); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-item.in-start { transform: translateX(100%); opacity: 0; transition: none; }
.sb-item.out { transform: translateX(-100%); opacity: 0; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

/* ── Bitta statistika oynasi ─────────────────────────────────── */
.sd-list { padding: 4px 16px 32px; line-height: normal; }
.sd-list > * + * { margin-top: 12px; }
.sd-grid { padding-top: 8px; padding-bottom: 32px; }
.sd-spin { padding: 18px 0; display: flex; justify-content: center; }
.sd-empty { padding-top: 120px; text-align: center; color: rgba(255, 255, 255, 0.54); font-size: 14px; }

.sd-ep {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--card-alt); cursor: pointer;
}
.sd-ep-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-ep-paid { position: absolute; top: 8px; right: 8px; }
.sd-ep-txt { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: flex-end; }
.sd-ep-l { flex: 1; min-width: 0; }
.sd-ep-r { margin-left: 8px; font-size: 10.5px; font-weight: 600; text-align: right; }
.sd-ep .sh {
  color: #fff; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000, 1px 0 2px rgba(0, 0, 0, 0.87), -1px 0 2px rgba(0, 0, 0, 0.87), 0 -1px 2px rgba(0, 0, 0, 0.87);
}
.sd-ep-l .sh:first-child { font-weight: 700; }
.sd-ep-r.sh { font-weight: 600; }
.sd-ep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3.5px; background: rgba(255, 255, 255, 0.24); }
.sd-ep-bar > div { height: 100%; background: linear-gradient(to right, var(--accent), var(--accent2)); }
.sd-tag {
  position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: rgba(255, 255, 255, 0.7); font-size: 10.5px;
}

.sd-star {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); border: 1px solid var(--border-bright);
}
.sd-star span:last-child { margin-left: 3px; color: #fff; font-size: 11.5px; font-weight: 800; line-height: normal; }

.sd-cm { border-radius: 18px; padding: 12px; }
.sd-cm-row { display: flex; align-items: flex-start; }
.sd-cm-poster {
  position: relative; width: 62px; height: 88px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--card-alt);
}
.sd-cm-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-cm-paid { position: absolute; top: 4px; right: 4px; }
.sd-cm-main { flex: 1; min-width: 0; margin-left: 12px; }
.sd-cm-t { color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-cm-c { margin-top: 3px; color: rgba(255, 255, 255, 0.54); font-size: 11.5px; }
.sd-cm-b { margin-top: 5px; color: rgba(255, 255, 255, 0.9); font-size: 13px; line-height: 1.35; word-break: break-word; user-select: text; }
.sd-cm-f { margin-top: 8px; display: flex; align-items: center; }
.sd-cm-likes { margin: 0 14px 0 4px; color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.sd-cm-rep { display: inline-flex; align-items: center; cursor: pointer; }
.sd-cm-rep span:last-child { margin-left: 2px; color: var(--accent3); font-size: 12px; }
.sd-cm-none { color: rgba(255, 255, 255, 0.38); font-size: 12px; }
.sd-cm-f .grow { flex: 1; }
.sd-cm-d { color: rgba(255, 255, 255, 0.38); font-size: 11px; }
.sd-div { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 10px 0; }
.sd-rp { display: flex; align-items: flex-start; padding-bottom: 10px; }
.sd-rp-av { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--card-alt); }
.sd-rp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-rp-main { flex: 1; min-width: 0; margin-left: 8px; }
.sd-rp-h { display: flex; align-items: center; }
.sd-rp-n { min-width: 0; margin-right: 8px; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-rp-l { margin-left: 3px; color: rgba(255, 255, 255, 0.54); font-size: 11px; }
.sd-rp-b { margin-top: 2px; color: rgba(255, 255, 255, 0.78); font-size: 12.5px; line-height: 1.3; word-break: break-word; }
.sd-rp-err { color: rgba(255, 255, 255, 0.54); font-size: 12px; }
.sd-media {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(36, 31, 28, 0.94);
}
.sd-media span:last-child { margin-left: 6px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* support.css */
/* Admin bilan yozishma — `lib/screens/support_chat_screen.dart` va Telegram
 * uslubidagi bo'laklar (`tg_bubble`, `tg_reply`, `tg_chat_background`,
 * `tg_record_button`, `tg_composer` emoji paneli). */

.route.sup { padding-top: 0; background: #0C0A09; }

/* ── Fon (`TgChatBackground`) ── */
.sup-bg { position: absolute; inset: 0; background: #0C0A09; pointer-events: none; }
.sup-bg .g1, .sup-bg .g2, .sup-bg .pat { position: absolute; inset: 0; }
.sup-bg .g1 { opacity: 0.259; background: linear-gradient(to bottom right, #6B3A1C, #7A4A1E); }
.sup-bg .g2 { opacity: 0.259; background: linear-gradient(to bottom left, rgba(62, 42, 74, 0.6), rgba(43, 59, 74, 0.6)); }
.sup-bg .pat {
  opacity: 0.65;
  background: linear-gradient(to bottom left, rgba(62, 42, 74, 0.6), rgba(43, 59, 74, 0.6)), linear-gradient(to bottom right, #6B3A1C, #7A4A1E);
  -webkit-mask-image: url('assets/tg_pattern.png'); mask-image: url('assets/tg_pattern.png');
  -webkit-mask-size: 100% auto; mask-size: 100% auto;
  -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
}

/* ── Sarlavha (suzib turgan tabletkalar) ── */
.sup-head {
  position: absolute; z-index: 3; left: 10px; right: 10px;
  top: calc(var(--safe-top) + var(--content-top) + 6px); display: flex; gap: 8px;
}
.sup-pill { height: 56px; background: rgba(36, 31, 28, 0.94); border-radius: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.sup-rb { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sup-rb:active { background: rgba(60, 52, 47, 0.98); }
.sup-mid { flex: 1; min-width: 0; padding: 6px 18px 6px 6px; display: flex; align-items: center; }
.sup-ava { width: 44px; height: 44px; border-radius: 50%; background: #000; padding: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sup-ava img { width: 100%; height: 100%; object-fit: contain; }
.sup-tt { margin-left: 10px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sup-tt .t { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-tt .s { color: rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-mid.search { padding: 0 18px; }
.sup-mid.search input {
  width: 100%; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 17px;
  caret-color: var(--accent); user-select: text; -webkit-user-select: text;
}
.sup-mid.search input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* ── Asosiy qism ── */
.sup-main { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sup-area { position: relative; flex: 1; min-height: 0; }
.sup-list {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: calc(var(--safe-top) + var(--content-top) + 70px) 12px 10px;
}
.sup-list::-webkit-scrollbar { display: none; }
.sup-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sup-empty { padding: 0 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sup-empty .t { margin-top: 14px; color: rgba(255, 255, 255, 0.45); font-size: 13.5px; line-height: 1.5; }
.sup-pull { padding: 14px 0; display: flex; justify-content: center; }
.sup-down {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(36, 31, 28, 0.94); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  transform: scale(0); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sup-down.on { transform: scale(1); }

/* ── Xabar qatori ── */
.tgc-date { padding: 8px 0; display: flex; justify-content: center; }
.tgc-date span { padding: 4px 10px; background: rgba(0, 0, 0, 0.4); border-radius: 14px; color: #fff; font-size: 14px; font-weight: 600; line-height: normal; }
.tgc-row { position: relative; display: flex; align-items: flex-end; touch-action: pan-y; transition: background 200ms; }
.tgc-row.out { justify-content: flex-end; }
.tgc-row.in { justify-content: flex-start; }
.tgc-rowwrap.flash .tgc-row { background: rgba(194, 65, 12, 0.16); }
.tgc-content { max-width: 80vw; min-width: 0; position: relative; z-index: 1; -webkit-touch-callout: none; }
.tgc-swipe {
  position: absolute; right: 8px; top: 0; bottom: 0; margin: auto 0; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5); pointer-events: none;
}

/* Pufak (`TgBubble`): dum tomonida 8 px chekinish. */
.tgc-bubble { position: relative; color: #fff; }
.tgc-bubble.out { margin-right: 8px; }
.tgc-bubble.in { margin-left: 8px; }
.tgc-tail { position: absolute; bottom: 0; fill: var(--tc); }
.tgc-bubble.out .tgc-tail { right: -8px; }
.tgc-bubble.in .tgc-tail { left: -8px; transform: scaleX(-1); }
.tgc-bubble .qw { padding: 0 0 2px 0; }
.tgc-bubble.viewable .qw { padding: 3px 0 2px 5px; }
.tgc-bubble.viewable > .md { border-radius: 14px; overflow: hidden; }
.tgc-text {
  position: relative; font-size: 16px; line-height: 1.3; color: #fff; overflow-wrap: anywhere;
  user-select: text; -webkit-user-select: text;
}
.tgc-text.pt { padding-top: 6px; }
.tgc-text.pv { padding-left: 8px; padding-right: 7px; }
.tgc-text .sp { display: inline-block; height: 14px; vertical-align: baseline; }
.tgc-text > .tgc-time { position: absolute; right: 0; bottom: 1px; }
.tgc-text.pv > .tgc-time { right: 7px; }
.tgc-trow { display: flex; justify-content: flex-end; padding-top: 3px; }
.tgc-trow.pv { padding-right: 7px; }
.tgc-time { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.1; white-space: nowrap; }
.tgc-time .ss { margin-left: 3px; display: inline-flex; align-items: center; }
.tgc-clock { animation: spin 1.4s linear infinite; }
.tgc-tpill { display: inline-flex; padding: 2px 6px; background: rgba(0, 0, 0, 0.4); border-radius: 10px; }
.tgc-mediaonly.out { padding-right: 8px; }
.tgc-mediaonly.in { padding-left: 8px; }
.tgc-mediaonly .clip { position: relative; overflow: hidden; }
.tgc-mediaonly .clip > .tgc-tpill { position: absolute; right: 6px; bottom: 6px; }
.tgc-mediaonly .clip > .md.tgc-thumb { border-radius: 0; }
.tgc-bare { display: flex; flex-direction: column; }
.tgc-bare.out { align-items: flex-end; }
.tgc-bare.in { align-items: flex-start; }

/* Iqtibos (`TgReplyQuote`). */
.tgc-quote { display: flex; margin-bottom: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; cursor: pointer; max-width: 100%; }
.tgc-quote .bar { width: 3px; flex-shrink: 0; background: var(--qc); }
.tgc-quote .qb { padding: 4px 8px 5px 7px; min-width: 0; }
.tgc-quote .qn { color: var(--qc); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.tgc-quote .qt { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

/* Media */
.md.tgc-thumb { border-radius: 13px; overflow: hidden; background: rgba(0, 0, 0, 0.35); min-width: 150px; max-height: 240px; cursor: pointer; display: flex; justify-content: center; }
.tgc-img { display: block; max-height: 240px; min-width: 150px; max-width: 100%; object-fit: cover; }
.tgc-load { width: 220px; height: 150px; display: flex; align-items: center; justify-content: center; }
.tgc-load.round { width: 100%; height: 100%; }
.tgc-vid { width: 220px; height: 150px; display: flex; align-items: center; justify-content: center; }
.tgc-vid .play, .tgc-tap .b {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.tgc-tap { width: 220px; height: 150px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tgc-tap.round { width: 100%; height: 100%; }
.tgc-pack { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }

.tgc-voice { width: 200px; display: flex; align-items: center; }
.tgc-voice .btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.tgc-voice .col { margin-left: 10px; flex: 1; min-width: 0; }
.tgc-voice .wave { display: block; width: 100%; height: 30px; touch-action: none; }
.tgc-voice .clk { font-size: 13px; line-height: normal; }

.tgc-file { width: 230px; display: flex; align-items: center; cursor: pointer; }
.tgc-file .c { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tgc-file .col { margin-left: 10px; min-width: 0; flex: 1; }
.tgc-file .n { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tgc-file .e { color: rgba(255, 255, 255, 0.6); font-size: 12px; }

.tgc-round { position: relative; cursor: pointer; transition: width 220ms cubic-bezier(0.215, 0.61, 0.355, 1), height 220ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tgc-round .in { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; }
.tgc-round video { width: 100%; height: 100%; object-fit: cover; }
.tgc-round .prog { position: absolute; left: 0; top: 0; transform: rotate(-90deg); pointer-events: none; }
.tgc-round .pill { position: absolute; left: 18px; bottom: 14px; padding: 2px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; }
.tgc-round .pill .t { color: #fff; font-size: 11.5px; }
.tgc-round .pill .ic { margin-left: 4px; }

/* Yuklanayotgan fayl */
.tgc-up { display: flex; justify-content: flex-end; padding-bottom: 8px; }
.tgc-up .b {
  max-width: 76vw; padding: 9px 13px 7px; background: rgba(194, 65, 12, 0.92);
  border-radius: 16px 16px 4px 16px; display: flex; flex-direction: column; align-items: flex-end;
}
.tgc-up .b.wide { padding: 4px 4px 7px; }
.tgc-up .m.img { position: relative; border-radius: 13px; overflow: hidden; display: flex; }
.tgc-up .m.img img { display: block; max-height: 240px; min-width: 150px; max-width: 100%; object-fit: cover; }
.tgc-up .m.img .dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
.tgc-up .m.img .tgc-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tgc-up .m.vid { width: 220px; height: 150px; border-radius: 13px; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.tgc-up .m.row { width: 210px; display: flex; align-items: center; }
.tgc-up .m.row .t { margin-left: 10px; flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.85); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgc-up .pend { padding: 4px 4px 0 0; display: flex; }
.tgc-ring { position: relative; border-radius: 50%; background: rgba(0, 0, 0, 0.55); flex-shrink: 0; }
.tgc-ring svg { position: absolute; left: 0; top: 0; }
.tgc-ring .pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Pastki qism ── */
.sup-bottom { position: relative; z-index: 2; flex-shrink: 0; padding-bottom: var(--safe-bottom); }
.sup-reply.on { margin: 6px 10px 0; background: rgba(36, 31, 28, 0.94); border-radius: 18px; }
.sup-rbar { height: 48px; display: flex; align-items: center; padding-left: 14px; }
.sup-rbar .ln { width: 2px; height: 32px; background: var(--accent2); margin: 0 8px 0 12px; flex-shrink: 0; }
.sup-rbar .col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sup-rbar .n { color: var(--accent2); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.sup-rbar .t { color: rgba(255, 255, 255, 0.75); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

.sup-crow { padding: 6px 10px; display: flex; align-items: flex-end; gap: 8px; }
.sup-field {
  flex: 1; min-width: 0; min-height: 48px; background: rgba(36, 31, 28, 0.94); border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); display: flex; align-items: flex-end;
}
.sup-field textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: #fff;
  font: inherit; font-size: 15px; line-height: 20px; padding: 14px 0 14px; height: 48px; max-height: 148px;
  caret-color: var(--accent); user-select: text; -webkit-user-select: text; overflow-y: auto;
}
.sup-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.sup-field textarea::-webkit-scrollbar { display: none; }
.sup-attach { width: 42px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sup-attach .ic { transform: rotate(0.6rad); }
.sup-attach.dis .ic { color: rgba(255, 255, 255, 0.25) !important; }

.sup-recinfo { display: none; flex: 1; min-width: 0; height: 48px; background: rgba(36, 31, 28, 0.94); border-radius: 24px; align-items: center; padding-left: 12px; overflow: hidden; }
.sup-comp.recording .sup-field { display: none; }
.sup-comp.recording .sup-recinfo { display: flex; }
.sup-recinfo .dot { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; flex-shrink: 0; animation: supblink 600ms ease-in-out infinite alternate; }
@keyframes supblink { to { opacity: 0; } }
.sup-recinfo .tm { margin-left: 10px; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sup-recinfo .mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.sup-recinfo .slide { display: flex; justify-content: center; white-space: nowrap; overflow: hidden; }
.sup-recinfo .sh {
  display: inline-flex; align-items: center; font-size: 15px;
  background: linear-gradient(90deg, #8A939D 0%, #8A939D 40%, #fff 50%, #8A939D 60%, #8A939D 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: supshine 1.5s linear infinite;
}
.sup-recinfo .sh .ic { color: transparent; }
@keyframes supshine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.sup-recinfo .cancel { display: none; border: 0; background: transparent; color: var(--accent2); font: inherit; font-size: 15px; font-weight: 700; padding: 8px 12px; cursor: pointer; }
.sup-recinfo.locked .slide { display: none; }
.sup-recinfo.locked .cancel { display: block; }

/* Yuborish / ovoz tugmasi (`TgRecordButton`) */
.tgr { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.tgr-btn {
  position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--accent);
  touch-action: none; cursor: pointer; transition: opacity 150ms;
}
.tgr-btn.hold { opacity: 0; }
.tgr-btn .snd, .tgr-btn .mic {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms;
}
.tgr-btn .snd { padding-left: 3px; transform: scale(0.1); opacity: 0; }
.tgr-btn.send .snd { transform: none; opacity: 1; }
.tgr-btn.send .mic { transform: scale(0.1); opacity: 0; }
.tgr-circle { position: absolute; left: -126px; top: -206px; width: 300px; height: 300px; pointer-events: none; z-index: 5; }
.tgr-hint {
  position: absolute; right: 0; bottom: calc(100% + 6px); padding: 7px 11px; border-radius: 6px;
  background: rgba(32, 34, 38, 0.9); color: #fff; font-size: 14px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 150ms;
}
.tgr-hint.on { opacity: 1; }

.sup-sbar { margin: 6px 10px 8px; height: 48px; padding: 0 8px; background: rgba(36, 31, 28, 0.94); border-radius: 24px; display: flex; align-items: center; }
.sup-sbar .t { margin-left: 12px; flex: 1; min-width: 0; color: #fff; font-size: 15px; }
.sup-sbar .icon-btn:disabled { color: rgba(255, 255, 255, 0.24); cursor: default; }

/* ── Popup menyu (`showMenu`) ── */
.tgm-wrap { position: absolute; inset: 0; z-index: 70; }
.tgm {
  position: absolute; min-width: 160px; max-width: 280px; padding: 8px 0; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  transform-origin: top right; transform: scale(0.9); opacity: 0; transition: transform 150ms, opacity 150ms;
}
.tgm-wrap.in .tgm { transform: none; opacity: 1; }
.tgm-it { display: flex; align-items: center; padding: 0 16px; font-size: 16px; cursor: pointer; white-space: nowrap; }
.tgm-it:active { background: rgba(255, 255, 255, 0.08); }

/* ── Emoji (`emoji_text.dart`, `tg_composer.dart`) ── */
.emj { color: #fff; opacity: 1; }
.tge-btn { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 2px; }
.tge-btn .tge-kb { display: none; }
.tge-btn.open .tge-smile { display: none; }
.tge-btn.open .tge-kb { display: inline-block; }
.tge-host { height: 0; overflow: hidden; transition: height 250ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tge-panel { position: relative; background: #201B18; border-radius: 22px 22px 0 0; overflow: hidden; }
.tge-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.tge-scroll::-webkit-scrollbar { display: none; }
.tge-strip { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #201B18; overflow-x: auto; overflow-y: hidden; padding: 0 6px; z-index: 1; }
.tge-strip::-webkit-scrollbar { display: none; }
.tge-strip-in { position: relative; height: 40px; display: flex; }
.tge-sel { position: absolute; left: 0; top: 5px; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tge-tab { position: relative; width: 33px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tge-head { height: 30px; padding: 9px 15px 0; color: #8E8E93; font-size: 15px; font-weight: 700; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tge-grid { display: grid; padding: 0 5px; }
.tge-cell { display: flex; align-items: center; justify-content: center; line-height: 1.1; cursor: pointer; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tge-cell.down { transform: scale(0.8); transition: transform 90ms ease-out; }
.tge-bs {
  position: absolute; right: 10px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(53, 44, 39, 0.95); box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); touch-action: none;
}
.tge-bs.down { transform: scale(0.86); transition: transform 90ms ease-out; }

/* tg-login.css */
/* Telegram'ga kirish oynasi — `phone_login_screen.dart` (Telegram Android tungi ranglari). */
.tgl { background: #1C242F !important; }
.tgl-bar { height: 56px; display: flex; align-items: center; padding: 0 4px; flex-shrink: 0; }
.tgl-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.tgl-step-body { padding: 8px 24px 120px; }
.tgl-step-body.enter { animation: tglIn 280ms cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes tglIn { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
.tgl-h1 { color: #fff; font-size: 22px; font-weight: 600; }
.tgl-sub { color: #7D8B99; font-size: 15px; line-height: 1.4; margin-top: 10px; margin-bottom: 30px; }
.tgl-h1.c, .tgl-sub.c { text-align: center; }
.tgl-head { display: flex; flex-direction: column; }
.tgl-circle {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 26px;
  background: linear-gradient(to bottom right, #6CC3F6, #3A8FD6);
  display: flex; align-items: center; justify-content: center;
}
.tgl-country { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #34414E; cursor: pointer; }
.tgl-country .flag { font-size: 22px; margin-right: 12px; }
.tgl-country .nm { flex: 1; color: #fff; font-size: 18px; }
.tgl-country .nm.dim { color: #7D8B99; }
.tgl-row { display: flex; align-items: flex-end; margin-top: 14px; gap: 14px; }
.tgl-cc { width: 74px; display: flex; align-items: center; border-bottom: 1px solid #34414E; color: #fff; font-size: 18px; }
.tgl-cc:focus-within { border-bottom: 2px solid #50A8EB; }
.tgl-in {
  background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 18px;
  padding: 10px 0; width: 100%; user-select: text; -webkit-user-select: text; caret-color: #50A8EB;
}
.tgl-in::placeholder { color: #4F5D6B; }
.tgl-row .num { flex: 1; border-bottom: 1px solid #34414E; letter-spacing: 0.6px; }
.tgl-row .num:focus { border-bottom: 2px solid #50A8EB; }
.tgl-center { display: flex; justify-content: center; margin-top: 26px; }
.tgl-link {
  background: transparent; border: 0; color: #50A8EB; font: inherit; font-size: 15px; font-weight: 500;
  padding: 10px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.tgl-link:disabled { color: #4F5D6B; }
.tgl-link:active { background: rgba(80, 168, 235, 0.12); }
.tgl-links { display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
.tgl-cells-wrap { position: relative; display: flex; justify-content: center; }
.tgl-cells { display: flex; justify-content: center; }
.tgl-cell {
  width: 44px; height: 52px; margin: 0 4px; border-radius: 8px; border: 1.6px solid #34414E;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 500;
  transition: border-color 150ms;
}
.tgl-cell.on { border-color: #50A8EB; }
.tgl-cell.err { border-color: #E5575F; }
.tgl-hidden { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; caret-color: transparent; }
.tgl-pass { display: flex; align-items: center; border-bottom: 1px solid #34414E; }
.tgl-pass:focus-within { border-bottom: 2px solid #50A8EB; }
[class*="shake-"]:not(.shake-0) { animation: tglShake 420ms; }
@keyframes tglShake {
  0% { transform: translateX(0); } 16% { transform: translateX(8px); } 33% { transform: translateX(-7px); }
  50% { transform: translateX(5px); } 66% { transform: translateX(-3px); } 83% { transform: translateX(1px); } 100% { transform: none; }
}
.tgl-wait { margin-top: 20px; text-align: center; color: #F5A623; font-size: 15px; font-weight: 600; }
.tgl-err { margin-top: 16px; text-align: center; color: #E5575F; font-size: 14px; }
.tgl-fab {
  position: absolute; right: 16px; bottom: calc(var(--safe-bottom) + 16px); width: 56px; height: 56px;
  border-radius: 50%; border: 0; background: #50A8EB; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer;
}
.tgl-fab.hide { transform: scale(0); }
.tgl-qr-box {
  width: 248px; height: 248px; margin: 8px auto 0; padding: 14px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tgl-steps { margin-top: 20px; }
.tgl-step { display: flex; align-items: flex-start; margin-bottom: 14px; }
.tgl-step .n {
  width: 24px; height: 24px; border-radius: 50%; background: #50A8EB; color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 14px;
}
.tgl-step .t { color: #fff; font-size: 15px; line-height: 1.4; }
.tgl-pick-bar { height: 56px; background: #232E3C; display: flex; align-items: center; padding: 0 4px; flex-shrink: 0; }
.tgl-search { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 18px; user-select: text; -webkit-user-select: text; }
.tgl-search::placeholder { color: #7D8B99; }
.tgl-ci { display: flex; align-items: center; padding: 14px 16px; cursor: pointer; }
.tgl-ci:active { background: rgba(255, 255, 255, 0.05); }
.tgl-ci .flag { font-size: 24px; width: 40px; }
.tgl-ci .nm { flex: 1; color: #fff; font-size: 16px; }
.tgl-ci .cd { color: #50A8EB; font-size: 16px; }