/* ============================================================
   NUMBER ONE TELUGU DAILY · SCREEN MOCKUPS
   Each phone is 360×780 (Android reference)
   ============================================================ */

.screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 40px 24px;
  align-items: start;
}
/* Responsive grid — 3 columns on wide desktops, 2 on tablets, 1 on phones */
@media (max-width: 1100px) {
  .screens-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 720px) {
  .screens-grid { grid-template-columns: 1fr; gap: 28px; }
}

.screen {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.screen figcaption {
  font-family: var(--f-latin); font-size: 12px; font-weight: 600;
  color: var(--text-secondary); letter-spacing: .05em;
  text-transform: uppercase;
}

/* ==== PHONE FRAME ==== */
.phone {
  width: 320px;
  height: 690px;
  background: var(--bg);
  border-radius: 44px;
  padding: 6px;
  box-shadow:
    var(--e4),
    inset 0 0 0 1.5px var(--divider),
    0 0 0 8px #111,
    0 0 0 9px #333;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease-standard), box-shadow .2s;
}
.phone:hover { transform: translateY(-4px); }
[data-theme="dark"] .phone { box-shadow: var(--e4), inset 0 0 0 1.5px var(--divider), 0 0 0 8px #000, 0 0 0 9px #1B1B1B; }
.notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 20px;
  background: #111; border-radius: var(--r-pill); z-index: 10;
}

/* ==== SCREEN BODY (inside phone) ==== */
.screen-body {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  color: var(--text-primary);
  font-family: var(--f-telugu);
}
.screen-body::before {
  content: '9:41  ·  📶 5G  ·  🔋';
  position: absolute; top: 8px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-latin); font-size: 10px; font-weight: 600;
  color: var(--text-primary); z-index: 5;
  letter-spacing: -.02em;
}
.screen-body.pad, .screen-body.pad-t, .screen-body.article, .screen-body.profile, .screen-body.sub, .screen-body.login, .screen-body.home {
  padding-top: 40px;
}
.screen-body.pad { padding: 40px 16px 16px; }
.screen-body.pad-t { padding: 0; overflow: hidden; }
.screen-body.pad-t > .screen-scroll { padding: 40px 0 12px; }
.screen-body.pad { overflow-y: auto; }

/* *-frame variants: scroll+dock done right. Parent is a non-scrolling flex column;
   .screen-scroll (flex:1, overflow:auto) owns the scroll; .bottom-nav is a flex sibling
   that lives OUTSIDE the scroll region so it never drifts. Use these instead of the
   .pad/.article/.sub/.success + .floating hack. */
.screen-body.pad-frame,
.screen-body.article-frame,
.screen-body.sub-frame,
.screen-body.success-frame { padding: 0; overflow: hidden; }
.screen-body.pad-frame     > .screen-scroll { padding: 40px 16px 12px; }
.screen-body.article-frame > .screen-scroll { padding: 0; }
.screen-body.sub-frame     > .screen-scroll { padding: 40px 16px 16px; }
.screen-body.success-frame > .screen-scroll { padding: 40px 20px 16px; }

/* ==== SPLASH ==== */
.screen-body.splash {
  background:
    radial-gradient(600px 300px at 50% 30%, #FF6B00 0%, #E60000 40%, #7A0000 100%);
  color: #fff;
  align-items: center; justify-content: center;
  position: relative;
}
.screen-body.splash::before { color: #fff; }
.splash-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 200px at 20% 80%, rgba(255,255,255,.1), transparent 60%),
    radial-gradient(300px 200px at 80% 20%, rgba(19,136,8,.3), transparent 60%);
}
.splash-brand { position: relative; text-align: center; z-index: 2; }
.splash-logo {
  display: inline-block;
  padding: 14px 22px;
  margin: 0 auto 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6);
}
.splash-logo img { display: block; height: 72px; width: auto; }
/* When splash-logo hosts the paired lockup, both marks shrink so they fit the 320px phone frame */
.splash-logo.brand-lockup { padding: 12px 16px; }
.splash-logo.brand-lockup > img { height: 48px; }
.splash-logo.brand-lockup > img.partner-mark { height: 32px; }

/* ---- Partner lockup: logo1.png + cflogo.png side-by-side with a subtle divider ----
   cflogo is much wider than logo1 (~3.6:1 vs ~2:1). We set matched heights per placement
   and let the images take their natural widths. max-width:100% + overflow safety prevents
   the lockup from busting out of narrow phone-frame containers. */
.brand-lockup {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-width: 0;
  flex-wrap: nowrap;
}
.brand-lockup > img {
  display: block; height: auto; object-fit: contain;
  flex-shrink: 1; min-width: 0;
}
.brand-lockup .lockup-sep {
  width: 1px; background: var(--divider);
  align-self: stretch; flex-shrink: 0;
  min-height: 20px;
}
.brand-lockup .partner-mark { display: block; width: auto; object-fit: contain; flex-shrink: 1; min-width: 0; }

/* ---- Brand wordmark (logo1.png) reusable class ---- */
.wordmark { display: block; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.wordmark.sm { height: 22px; }
.wordmark.md { height: 34px; }
.wordmark.lg { height: 46px; }
/* Light chip wrapper — keeps the black+red wordmark legible on any surface (incl. dark theme) */
.wordmark-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.splash-title {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 26px; line-height: 1.2;
}
.splash-sub {
  font-family: var(--f-telugu); font-weight: 500;
  font-size: 16px; opacity: .95;
  margin-top: 4px;
}
.splash-loader {
  margin-top: 32px; width: 40px; height: 3px;
  background: rgba(255,255,255,.2); border-radius: 2px;
  margin-left: auto; margin-right: auto;
  overflow: hidden;
}
.splash-loader span {
  display: block; height: 100%; width: 50%;
  background: #fff; border-radius: 2px;
  animation: slide 1.4s infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.splash-version {
  position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
  font-family: var(--f-latin); font-size: 11px; opacity: .7; z-index: 2;
  letter-spacing: .1em;
}

/* ==== LANGUAGE / LOCATION shared ==== */
.mini-logo {
  display: inline-flex; align-items: center;
  margin-bottom: 22px;
}
.mini-logo img { display: block; height: 40px; width: auto; }
.mini-logo.lg { margin: 20px auto 24px; }
.mini-logo.lg img { height: 56px; }
/* Lockup variants shrink logo1 so the pair fits the phone frame */
.mini-logo.brand-lockup > img { height: 34px; }
.mini-logo.brand-lockup > img.partner-mark { height: 26px; }
.mini-logo.lg.brand-lockup > img { height: 44px; }
.mini-logo.lg.brand-lockup > img.partner-mark { height: 34px; }
.mini-1 {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #E60000, #FF6B00);
  color: #fff; display: grid; place-items: center;
  font-family: var(--f-latin); font-weight: 900; font-size: 22px;
  box-shadow: 0 6px 14px rgba(230,0,0,.28);
}
.mini-1.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; box-shadow: 0 3px 6px rgba(230,0,0,.24); }
.mini-1.lg { width: 72px; height: 72px; border-radius: 22px; font-size: 36px; }
.lg-title {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 24px; line-height: 1.2; margin: 0 0 6px;
  color: var(--text-primary);
}
.lg-sub {
  font-family: var(--f-latin); font-size: 13px;
  color: var(--text-secondary); margin: 0 0 20px;
}
.back {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-alt); border: none; cursor: pointer;
  color: var(--text-primary);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.back.light { background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(10px); }
.back .material-symbols-rounded { font-size: 22px; }
.spacer-fill { flex: 1; }

/* ==== LANGUAGE ==== */
.lang-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; margin-bottom: 10px;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--r-xl);
}
.lang-card.selected { border-color: var(--brand-red); background: var(--brand-red-soft); }
.lang-card.selected .material-symbols-rounded { color: var(--brand-red); }
.lang-card b {
  font-family: var(--f-telugu); font-size: 18px; font-weight: 600;
  color: var(--text-primary); display: block;
}
.lang-card small { font-family: var(--f-latin); font-size: 12px; color: var(--text-secondary); }
.lang-card .material-symbols-rounded { font-size: 24px; color: var(--text-secondary); }

/* ==== LOCATION ==== */
.loc-cta { margin-bottom: 12px; }
.sec-cap {
  font-family: var(--f-latin); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 18px 0 10px;
}
.sec-cap.dark { color: var(--text-primary); font-size: 14px; text-transform: none; letter-spacing: 0; }
.dist-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.dist {
  padding: 14px 12px; text-align: center;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--r-lg);
  font-family: var(--f-telugu); font-size: 14px; font-weight: 500;
}
.dist.selected { border-color: var(--brand-red); background: var(--brand-red-soft); color: var(--brand-red); font-weight: 700; }

/* ==== HOME ==== */
.screen-body.home {
  padding: 0;
  overflow: hidden;
}
.screen-body.home > .screen-scroll { padding: 40px 0 12px; }
.app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px;
}
.ab-brand { display: flex; align-items: center; gap: 8px; }
.ab-brand b { font-family: var(--f-telugu); font-weight: 700; font-size: 16px; }
.ab-brand img.wordmark { height: 34px; }
[data-theme="dark"] .ab-brand img.wordmark { padding: 4px 8px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.2); box-sizing: content-box; }
/* Lockup variant — both marks stay compact so they don't crowd the right-side app-bar actions.
   In dark mode both logos get the same white-chip treatment so the black+red wordmark and the
   orange+green partner mark both stay legible. */
.ab-brand.brand-lockup { flex: 1; min-width: 0; }
.ab-brand.brand-lockup > img.wordmark { height: 32px; }
.ab-brand.brand-lockup > img.partner-mark { height: 24px; }
[data-theme="dark"] .ab-brand.brand-lockup { padding: 4px 8px; background: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
[data-theme="dark"] .ab-brand.brand-lockup > img.wordmark { padding: 0; background: transparent; box-shadow: none; }
[data-theme="dark"] .ab-brand.brand-lockup .lockup-sep { background: rgba(0,0,0,.15); }
.ab-actions { display: flex; align-items: center; gap: 12px; }
.ab-actions .material-symbols-rounded { font-size: 22px; color: var(--text-primary); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #E60000, #FF6B00);
  border: 2px solid var(--bg);
}
.avatar.sm { width: 32px; height: 32px; }
.avatar.xl { width: 88px; height: 88px; border: 3px solid var(--bg); box-shadow: var(--e2); margin-bottom: 12px; }
.cat-strip {
  display: flex; gap: 6px; padding: 4px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip .chip.small { flex-shrink: 0; }
.cat-strip .chip.small.active { background: var(--brand-red); color: #fff; }

.breaking-banner {
  margin: 0 12px 12px;
  padding: 10px 12px;
  background: var(--brand-red-soft);
  border: 1px solid color-mix(in srgb, var(--brand-red) 20%, transparent);
  border-radius: var(--r-lg);
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
[data-theme="dark"] .breaking-banner { background: #2A0F0F; }
.breaking-banner marquee-fake {
  font-family: var(--f-telugu); font-size: 12px; color: var(--brand-red);
  font-weight: 600;
  white-space: nowrap; flex: 1;
  overflow: hidden; text-overflow: ellipsis;
}

.rail { padding: 12px 16px 6px; }
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.rail-head b { font-family: var(--f-telugu); font-weight: 700; font-size: 15px; }
.rail-head a { font-family: var(--f-latin); font-size: 11px; color: var(--brand-red); font-weight: 600; }

.hscroll {
  display: flex; gap: 10px; overflow-x: auto;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }

.live-card {
  flex-shrink: 0;
  width: 110px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--divider);
}
.live-card .thumb {
  height: 68px; position: relative;
}
.live-card .thumb::before {
  content: 'LIVE'; position: absolute; top: 6px; left: 6px;
  background: var(--brand-red); color: #fff;
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--f-latin); font-size: 9px; font-weight: 700;
}
.live-card b {
  display: block; padding: 8px 10px;
  font-family: var(--f-telugu); font-size: 12px; font-weight: 600;
}

.ad-card {
  margin: 12px 16px;
  padding: 14px; border: 1px dashed var(--divider); border-radius: var(--r-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surface-alt);
}
.ad-card b { font-family: var(--f-latin); font-size: 14px; }

/* ==== NEWS CARDS ==== */
.ncard {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 10px;
  transition: transform .15s var(--ease-standard);
}
.ncard:hover { transform: translateY(-1px); }
.ncard-img {
  aspect-ratio: 16/9;
  background: var(--surface-alt);
  position: relative;
}
.ncard-img.big { aspect-ratio: 16/10; }
.ncard-img.tall { aspect-ratio: 4/5; }
.ncard-img.video { display: flex; align-items: center; justify-content: center; }
.ncard-img.video .play { color: #fff; font-size: 44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.ncard-img.video .duration {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 3px 6px; border-radius: 4px;
  font-family: var(--f-latin); font-size: 10px; font-weight: 600;
}
.ncard-body { padding: 12px 14px 14px; }
.ncard-body h3 {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 15px; line-height: 1.35;
  margin: 6px 0 6px;
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ncard-meta {
  font-family: var(--f-latin); font-size: 11px;
  color: var(--text-secondary);
}
.ncard.hero-card h3 { font-size: 17px; -webkit-line-clamp: 2; }
.ncard.breaking .ncard-body { background: var(--brand-red-soft); }

.ncard.horizontal {
  display: flex; align-items: stretch;
}
.ncard.horizontal .ncard-body { flex: 1; padding: 12px; }
.ncard.horizontal .ncard-img.sq { width: 100px; aspect-ratio: 1; flex-shrink: 0; }
.ncard.horizontal.compact h3 { font-size: 13.5px; -webkit-line-clamp: 3; margin-top: 4px; }
.ncard.horizontal.compact .ncard-meta { font-size: 10.5px; }

.ncard.photo .ncard-img.tall { aspect-ratio: 4/5; }
.ncard.opinion { padding: 14px; background: var(--astro-soft); border-color: transparent; }
[data-theme="dark"] .ncard.opinion { background: #2A2410; }
.ncard.opinion h3 { font-style: italic; }
.ncard.sponsored { border-style: dashed; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* ==== FAB & BOTTOM NAV ==== */
.fab-breaking {
  position: absolute;
  right: 12px; bottom: 78px;
  width: 52px; height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(230,0,0,.4);
  z-index: 5;
}
.fab-breaking .material-symbols-rounded { font-size: 26px; }

/* Scroll region inside a screen — sits between the (optional) app-bar padding and the bottom-nav */
.screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: none;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.bottom-nav {
  flex: 0 0 auto;
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--divider);
  padding: 8px 4px 12px;
  z-index: 4;
}
/* .bottom-nav.floating (sticky hack) has been retired — every screen now uses the
   .*-frame + .screen-scroll + plain .bottom-nav pattern where the bnav is a flex sibling
   of the scroll region, so it can't drift or scroll with content. */

/* ============================================================
   PREMIUM POLISH · Global refinement pass
   Typography scale · Spacing rhythm · Sizing · Alignment
   ============================================================ */

/* ---- Type: refined scale ---- */

/* Section titles (Login, Choose language, OTP, Interests, permissions) */
.lg-title {
  font-family: var(--f-latin); font-weight: 800; font-size: 24px;
  line-height: 1.18; letter-spacing: -.022em;
  margin: 0 0 6px;
}
.lg-sub {
  font-family: var(--f-latin); font-size: 13.5px; line-height: 1.5;
  color: var(--text-secondary); margin: 0 0 20px;
}

/* Card headlines: consistent scale across all 9 variants */
.ncard-body h3 {
  font-family: var(--f-telugu); font-weight: 700; font-size: 15px;
  line-height: 1.35; letter-spacing: -.005em;
  color: var(--text-primary); margin: 6px 0;
}
.ncard.hero-card .ncard-body h3 {
  font-size: 17.5px; line-height: 1.28; letter-spacing: -.014em; font-weight: 800;
}
.ncard.horizontal.compact h3 { font-size: 13.5px; line-height: 1.35; }

/* Card meta refined */
.ncard-meta {
  font-family: var(--f-latin); font-size: 11px; line-height: 1.35;
  color: var(--text-secondary); font-weight: 500; letter-spacing: 0;
}

/* Article title bigger and sharper */
.art-title {
  font-family: var(--f-latin); font-weight: 800; font-size: 24px;
  line-height: 1.2; letter-spacing: -.022em;
  margin: 10px 0 14px;
}

/* Article body reading-optimised */
.article-body p {
  font-family: var(--f-telugu); font-size: 15px; line-height: 1.72;
  letter-spacing: -.003em; color: var(--text-primary);
  margin: 0 0 14px;
}

/* Section captions - tighter tracking */
.sec-cap {
  font-family: var(--f-latin); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 20px 0 10px; line-height: 1.2;
}
.sec-cap.dark {
  color: var(--text-primary); font-size: 15px; letter-spacing: -.01em;
  text-transform: none; font-weight: 700;
}

/* App bar titles refined */
.app-bar.plain b {
  font-family: var(--f-latin); font-size: 17px; font-weight: 700;
  letter-spacing: -.014em; line-height: 1.2;
}
.app-bar .ab-brand b {
  font-family: var(--f-latin); font-size: 17px; font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}

/* Onboarding refined */
.ob-body h2 {
  font-family: var(--f-latin); font-weight: 800; font-size: 25px;
  line-height: 1.18; letter-spacing: -.024em;
  margin: 0 0 10px;
}
.ob-body p {
  font-family: var(--f-telugu); font-size: 14px; line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 20px;
}

/* Splash refinement */
.splash-title {
  font-family: var(--f-latin); font-weight: 900; font-size: 30px;
  letter-spacing: -.025em; line-height: 1.1;
}
.splash-sub {
  font-family: var(--f-latin); font-weight: 600; font-size: 17px;
  letter-spacing: -.01em; opacity: .95; margin-top: 4px;
}

/* ---- Buttons: refined proportions ---- */
.btn {
  padding: 13px 22px;
  font-family: var(--f-latin);
  font-weight: 700; font-size: 14.5px; letter-spacing: -.006em;
  min-height: 46px;
}
.btn-lg { padding: 15px 24px; font-size: 15px; min-height: 52px; }
.btn.sm { padding: 8px 14px; font-size: 12px; min-height: 34px; }
.btn-block { min-height: 50px; font-size: 15px; }
.btn .material-symbols-rounded { font-size: 18px; }
.btn-block .material-symbols-rounded { font-size: 20px; }

/* ---- Setting rows: uniform 54dp ---- */
.setting { min-height: 54px; padding: 13px 4px; }
.setting b { font-family: var(--f-telugu); font-size: 14px; font-weight: 500; letter-spacing: -.002em; }
.setting > .material-symbols-rounded { font-size: 22px; width: 26px; }
.setting small { font-family: var(--f-latin); font-size: 12.5px; color: var(--text-secondary); }

/* ---- Chips: refined ---- */
.chip {
  padding: 7px 12px;
  font-family: var(--f-latin); font-size: 12.5px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.2;
}
.chip.small { padding: 6px 11px; font-size: 12px; }
.chip.small .material-symbols-rounded { font-size: 13px; }

/* ---- Badges refined ---- */
.badge {
  padding: 4px 9px;
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; line-height: 1.2;
}
.badge.sm { padding: 3px 7px; font-size: 9.5px; }
.badge .material-symbols-rounded { font-size: 12px; }

/* ---- Inputs refined ---- */
.input { padding: 11px 14px; border-radius: 12px; }
.input input {
  font-family: var(--f-telugu); font-size: 14.5px; letter-spacing: -.002em;
}

/* ---- Bottom nav: sharper, more premium ---- */
.bottom-nav { padding: 10px 4px 14px; }
.bn { padding: 6px 0 2px; gap: 3px; }
.bn small {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 600;
  letter-spacing: -.005em;
}
.bn .material-symbols-rounded { font-size: 22px; }
.bn.active { color: var(--brand-red); }
.bn.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}
.bn.active small { font-weight: 700; }

/* ---- Notif rows refined ---- */
.notif { padding: 14px 4px; }
.notif > .material-symbols-rounded { width: 42px; height: 42px; font-size: 20px; }
.notif b { font-family: var(--f-telugu); font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; }
.notif small { font-family: var(--f-latin); font-size: 11.5px; margin-top: 3px; }

/* ---- Tabs refined ---- */
.tabs.plain .tab { font-size: 13px; font-weight: 600; padding: 12px 6px; }
.tabs.plain .tab.active { font-weight: 700; }
.tabs .tab { font-family: var(--f-latin); font-size: 12.5px; font-weight: 600; }

/* ---- Folder tiles refined ---- */
.folder b { font-family: var(--f-telugu); font-size: 13.5px; font-weight: 700; }
.folder small { font-family: var(--f-latin); font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }

/* ---- Rail head refined ---- */
.rail { padding: 16px 16px 4px; }
.rail-head { margin-bottom: 12px; align-items: baseline; }
.rail-head b {
  font-family: var(--f-latin); font-weight: 800; font-size: 15px;
  letter-spacing: -.015em; line-height: 1.2;
}
.rail-head a {
  font-family: var(--f-latin); font-size: 11.5px; font-weight: 700;
  color: var(--brand-red); letter-spacing: -.005em;
}

/* ---- Breaking banner refined ---- */
.breaking-banner {
  padding: 12px 14px; border-radius: 12px;
  min-height: 44px; align-items: center;
}
.breaking-banner marquee-fake {
  font-family: var(--f-telugu); font-size: 12.5px; font-weight: 600;
  line-height: 1.3; color: var(--brand-red); letter-spacing: -.005em;
}

/* ---- Profile hero refined ---- */
.profile-hero b {
  font-family: var(--f-latin); font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; line-height: 1.2;
}
.profile-hero small {
  font-family: var(--f-latin); font-size: 12.5px; margin-top: 3px;
  color: var(--text-secondary);
}
.profile-stats b {
  font-family: var(--f-latin); font-weight: 800; font-size: 20px;
  letter-spacing: -.02em; color: var(--text-primary);
}
.profile-stats small {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-top: 3px;
}

/* ---- Dividers softer for premium feel ---- */
.setting, .notif, .comment, .history-item, .dl-item, .up-row,
.cast-item, .about-item, .billing-item, .faq, .recents > div {
  border-bottom-color: color-mix(in srgb, var(--divider) 65%, transparent);
}

/* ---- Author profile refined ---- */
.author-hero .name-row b {
  font-family: var(--f-latin); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em;
}
.author-hero .role {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; margin-top: 4px;
}
.author-hero .bio {
  font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.55;
  margin: 10px 8px 0;
}
.author-stats b {
  font-family: var(--f-latin); font-weight: 800; font-size: 16px;
  letter-spacing: -.015em;
}

/* ---- Trending list refined ---- */
.trend-rank { font-size: 24px; font-weight: 900; }
.trend-info b {
  font-family: var(--f-telugu); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em; line-height: 1.35;
}

/* ---- Cinema/movie posters refined ---- */
.movie-poster b {
  font-family: var(--f-telugu); font-size: 12px; font-weight: 700;
  letter-spacing: -.005em;
}
.movie-poster small {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 700;
  color: var(--brand-green);
}

/* ---- Cricket refined ---- */
.team-name { font-family: var(--f-latin); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.team-score { font-family: var(--f-latin); font-weight: 900; font-size: 22px; letter-spacing: -.025em; }

/* ---- Jobs refined ---- */
.job-info b {
  font-family: var(--f-latin); font-weight: 700; font-size: 13px;
  letter-spacing: -.008em; line-height: 1.3;
}
.job-salary {
  font-family: var(--f-latin); font-weight: 800; font-size: 12.5px;
  color: var(--brand-green); letter-spacing: -.005em;
}

/* ---- Comments refined ---- */
.comment-head b {
  font-family: var(--f-latin); font-size: 12.5px; font-weight: 700;
  letter-spacing: -.005em; color: var(--text-primary);
}
.comment-body p {
  font-family: var(--f-telugu); font-size: 13.5px; line-height: 1.5;
  color: var(--text-primary);
}

/* ---- Video card refined ---- */
.vcard b {
  font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700;
  letter-spacing: -.005em; line-height: 1.35;
}
.vcard small { font-family: var(--f-latin); font-size: 10.5px; font-weight: 500; }

/* ---- Discovery category tiles refined ---- */
.catc b {
  font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700;
  letter-spacing: -.005em;
}

/* ---- District tiles refined ---- */
.dist span {
  font-family: var(--f-telugu); font-size: 14px; font-weight: 600;
  letter-spacing: -.005em;
}
.dist.selected span { font-weight: 800; }

/* ---- Lang cards refined ---- */
.lang-card b {
  font-family: var(--f-telugu); font-size: 18px; font-weight: 700;
  letter-spacing: -.015em;
}
.lang-card small {
  font-family: var(--f-latin); font-size: 12px; margin-top: 2px;
}

/* ---- Ncard hero-card image bigger ---- */
.ncard.hero-card .ncard-img.big { aspect-ratio: 16/10; }

/* ---- Astro refined ---- */
.astro-hero b {
  font-family: var(--f-telugu); font-weight: 800; font-size: 23px;
  letter-spacing: -.02em;
}
.astro-card p {
  font-family: var(--f-telugu); font-size: 13px; line-height: 1.6;
}
.astro-lucky b {
  font-family: var(--f-latin); font-size: 15px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary);
}

/* ---- FAQ refined ---- */
.faq-head b {
  font-family: var(--f-telugu); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em; line-height: 1.4;
}
.faq-body {
  font-family: var(--f-telugu); font-size: 13px; line-height: 1.65;
  color: var(--text-secondary); margin-top: 10px;
}

/* ---- About items refined ---- */
.about-item b {
  font-family: var(--f-telugu); font-size: 14px; font-weight: 500;
  letter-spacing: -.005em;
}
.about-item small {
  font-family: var(--f-latin); font-size: 11.5px; font-weight: 700;
}

/* ---- Success/Error refined ---- */
.success-body h2, .state-hero h2 {
  font-family: var(--f-latin); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; line-height: 1.2;
}
.success-body > p, .state-hero > p {
  font-family: var(--f-telugu); font-size: 13.5px; line-height: 1.55;
}

/* ---- Editor's Picks byline refined ---- */
.editor-byline b {
  font-family: var(--f-latin); font-size: 13px; font-weight: 700;
  letter-spacing: -.005em;
}
.editor-note {
  font-family: var(--f-telugu); font-size: 13px; line-height: 1.55;
}

/* ---- Streak refined ---- */
.streak-hero b {
  font-size: 48px; font-weight: 900; letter-spacing: -.035em;
}
.streak-hero .label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
}

/* ---- Payment plan card refined ---- */
.plan-summary .amt strong,
.plan-card h3 {
  font-family: var(--f-latin); font-weight: 900; font-size: 27px;
  letter-spacing: -.028em;
}
.pay-item b {
  font-family: var(--f-telugu); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em;
}

/* ---- Pay total refined ---- */
.pay-total strong {
  font-family: var(--f-latin); font-weight: 900; font-size: 22px;
  letter-spacing: -.025em;
}

/* ---- Compose bar bigger avatar ---- */
.compose-bar .avatar { width: 34px; height: 34px; }
.compose-bar > .material-symbols-rounded { font-size: 24px; }

/* ---- Better search bar font ---- */
.search-bar .input input {
  font-family: var(--f-telugu); font-size: 14.5px; font-weight: 500;
}

/* ---- Fine print refined ---- */
.fine {
  font-family: var(--f-latin); font-size: 11px; line-height: 1.55;
  color: var(--text-secondary); margin-top: 14px; text-align: center;
}

/* ---- Better icon vertical alignment in headings that include icons ---- */
.rail-head b .material-symbols-rounded,
.app-bar.plain b .material-symbols-rounded,
.editor-byline b .material-symbols-rounded { vertical-align: -3px; }

/* ---- Grabber softer ---- */
.sheet-grabber { background: color-mix(in srgb, var(--divider) 80%, var(--text-secondary)); }

/* ---- Cards get subtle bottom-shadow-in-image for depth ---- */
.ncard-img { position: relative; }
.ncard-img::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 -22px 32px -20px rgba(0,0,0,.22);
  pointer-events: none; border-radius: inherit;
}

/* ---- Divider consistency: keep the base soft ---- */
.ncard { border-color: color-mix(in srgb, var(--divider) 75%, transparent); }

/* ---- Better hero card radius ---- */
.ncard.hero-card { border-radius: 16px; }

/* ---- Page-head refinement ---- */
.page-head h1 { font-size: 30px; letter-spacing: -.028em; line-height: 1.1; }
.page-head p { font-size: 14.5px; }
.module-num { font-size: 48px; letter-spacing: -.035em; }
.module-title h3 { font-size: 22px; letter-spacing: -.022em; }
.module-title p { font-size: 13px; line-height: 1.5; }
.module-count { font-size: 10.5px; letter-spacing: .1em; }

/* ---- Better field labels ---- */
.field label {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.field-value {
  font-family: var(--f-telugu); font-size: 14px; font-weight: 500;
  letter-spacing: -.005em;
}

/* ============================================================
   PREMIUM UPLIFT (MOM IVF reference)
   Sun-rays · Glass · Cream surfaces · Brand-tinted shadows ·
   Radial ambient washes · Bigger display type
   ============================================================ */

/* Display font uplift (Plus Jakarta Sans for headings) */
.lg-title, .art-title, .ob-body h2,
.splash-title,
.rail-head b,
.cat-hero-info b, .topic-hero h1,
.author-hero .name-row b,
.streak-hero b, .streak-hero .label,
.astro-hero b,
.match-hero, .match-hero .team-score,
.job-featured h3,
.jobd-hero h2,
.movie-featured .info b,
.plan-card h3, .plan-summary .amt strong, .pay-total strong,
.success-body h2, .state-hero h2,
.about-brand b,
.login-brand .name,
.otp-hero h3,
.perm-hero h2 { font-family: var(--f-display), var(--f-latin); }

/* Splash: bigger, more premium */
.splash-title { font-size: 32px; letter-spacing: -.028em; }
.splash-sub { font-size: 18px; letter-spacing: -.012em; }

/* Sun-ray decoration utility (adds soft radiating warmth) */
.sun-rays {
  background-image:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(249, 217, 107, .18) 8deg, transparent 16deg,
      transparent 22deg, rgba(249, 217, 107, .12) 30deg, transparent 38deg,
      transparent 44deg, rgba(249, 217, 107, .16) 52deg, transparent 60deg,
      transparent 66deg, rgba(249, 217, 107, .10) 74deg, transparent 82deg,
      transparent 88deg, rgba(249, 217, 107, .18) 96deg, transparent 104deg,
      transparent 110deg, rgba(249, 217, 107, .12) 118deg, transparent 126deg,
      transparent 132deg, rgba(249, 217, 107, .16) 140deg, transparent 148deg,
      transparent 154deg, rgba(249, 217, 107, .10) 162deg, transparent 170deg,
      transparent 176deg, rgba(249, 217, 107, .18) 184deg, transparent 192deg,
      transparent 198deg, rgba(249, 217, 107, .12) 206deg, transparent 214deg,
      transparent 220deg, rgba(249, 217, 107, .16) 228deg, transparent 236deg,
      transparent 242deg, rgba(249, 217, 107, .10) 250deg, transparent 258deg,
      transparent 264deg, rgba(249, 217, 107, .18) 272deg, transparent 280deg,
      transparent 286deg, rgba(249, 217, 107, .12) 294deg, transparent 302deg,
      transparent 308deg, rgba(249, 217, 107, .16) 316deg, transparent 324deg,
      transparent 330deg, rgba(249, 217, 107, .10) 338deg, transparent 346deg,
      transparent 352deg);
  pointer-events: none;
}

/* Auto-apply subtle sun-rays to key gradient hero surfaces */
.article-hero, .player, .featured-video, .vp-canvas,
.author-cover, .dist-hero,
.streak-hero, .refer-hero, .sub-hero,
.splash-bg, .login-hero, .otp-icon,
.chd-player, .success-check, .movie-featured, .match-hero,
.plan-summary, .plan-card, .job-featured, .jobd-hero {
  position: relative;
}
.article-hero::before, .player::before, .featured-video::before,
.author-cover::before, .dist-hero::before,
.streak-hero::before, .refer-hero::before, .movie-featured::before,
.match-hero::before, .plan-summary::before, .plan-card::before,
.job-featured::before, .jobd-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: inherit;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
/* Ensure any children stack above the overlay */
.article-hero > *, .player > *, .featured-video > *,
.author-cover > *, .dist-hero > *,
.streak-hero > *, .refer-hero > *, .movie-featured > *,
.match-hero > *, .plan-summary > *, .plan-card > *,
.job-featured > *, .jobd-hero > * { position: relative; z-index: 1; }

/* Glassmorphism utility (for sheets, video/tv player overlays) */
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .glass {
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-dark {
  background: rgba(230, 0, 0, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Auto-apply glass to sheet grabber area and floating controls */
.sheet-panel { box-shadow: 0 -8px 40px rgba(0,0,0,.12); }
.vp-top .icon-btn, .player-tools .material-symbols-rounded,
.article-hero .hero-tools .material-symbols-rounded {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Radial ambient wash — subtle warm glow behind key screens */
.screen-body.pad, .screen-body.pad-t, .screen-body.profile,
.screen-body.sub, .screen-body.article, .screen-body.home,
.screen-body.success {
  position: relative;
  overflow-x: hidden;
}
.screen-body.pad::before, .screen-body.pad-t::before,
.screen-body.profile::before, .screen-body.sub::before,
.screen-body.article::before, .screen-body.success::before {
  content: ''; position: absolute;
  top: -80px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,0,0,.06) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.screen-body.pad::after, .screen-body.pad-t::after,
.screen-body.profile::after, .screen-body.sub::after,
.screen-body.success::after {
  content: ''; position: absolute;
  bottom: -80px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,0,.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
/* Content sits above the washes — bnav excluded so its sticky positioning isn't disturbed */
.screen-body.pad     > *:not(.bottom-nav),
.screen-body.pad-t   > *:not(.bottom-nav),
.screen-body.profile > *:not(.bottom-nav),
.screen-body.sub     > *:not(.bottom-nav),
.screen-body.article > *:not(.bottom-nav),
.screen-body.home    > *:not(.bottom-nav),
.screen-body.success > *:not(.bottom-nav) { position: relative; z-index: 1; }
[data-theme="dark"] .screen-body.pad::before,
[data-theme="dark"] .screen-body.pad-t::before,
[data-theme="dark"] .screen-body.profile::before,
[data-theme="dark"] .screen-body.sub::before,
[data-theme="dark"] .screen-body.article::before,
[data-theme="dark"] .screen-body.success::before {
  background: radial-gradient(circle, rgba(230,0,0,.14) 0%, transparent 65%);
}
[data-theme="dark"] .screen-body.pad::after,
[data-theme="dark"] .screen-body.pad-t::after,
[data-theme="dark"] .screen-body.profile::after,
[data-theme="dark"] .screen-body.sub::after,
[data-theme="dark"] .screen-body.success::after {
  background: radial-gradient(circle, rgba(255,107,0,.12) 0%, transparent 65%);
}

/* Warm cream surface tint (subtle, feels premium) */
.screen-body { background: var(--surface-warm); }
[data-theme="dark"] .screen-body { background: var(--bg); }

/* Cards get brand-tinted shadow (replaces default grey) */
.ncard, .card-panel, .live-card, .vcard, .catc,
.dist, .lang-card, .ch, .job-card,
.rashi-tile, .badge-tile, .setting,
.otp-channel, .promo-list-item, .pay-item,
.folder, .movie-poster .poster,
.state-card, .comp-block,
.ncard.hero-card { box-shadow: var(--shadow-brand-soft); }
.ncard:hover, .job-card:hover, .lang-card:hover {
  box-shadow: var(--shadow-brand-card);
}

/* Hero and premium surfaces get bigger glow */
.streak-hero, .plan-summary, .plan-card,
.match-hero, .job-featured, .refer-hero,
.movie-featured, .otp-icon, .success-check,
.perm-icon, .login-logo {
  box-shadow: var(--shadow-brand-glow);
}
.success-check { box-shadow: var(--shadow-green-glow); }

/* Bigger, punchier display numbers (Bloomberg/Robinhood inspiration) */
.streak-hero b { font-size: 52px; letter-spacing: -.038em; font-weight: 900; }
.plan-summary .amt strong, .plan-card h3 { font-size: 28px; letter-spacing: -.028em; font-weight: 900; }
.pay-total strong { font-size: 24px; letter-spacing: -.028em; font-weight: 900; }
.team-score { font-size: 24px; letter-spacing: -.028em; font-weight: 900; }
.profile-stats b { font-size: 22px; letter-spacing: -.022em; font-weight: 900; }
.trend-rank { font-size: 26px; letter-spacing: -.032em; font-weight: 900; }
.astro-hero b { font-size: 24px; letter-spacing: -.024em; }
.otp-row.lg .otp-box { font-size: 24px; font-weight: 900; }

/* Big page headline uplift */
.page-head h1 { font-size: 32px; letter-spacing: -.03em; font-weight: 900; }
.module-num { font-size: 52px; font-weight: 900; letter-spacing: -.038em; }
.module-title h3 { font-size: 24px; letter-spacing: -.024em; font-weight: 800; }

/* Sub-hero (subscription) — bigger, more emphatic */
.sub-hero h2 {
  font-size: 32px; letter-spacing: -.03em; font-weight: 900;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub-hero .xxl { font-size: 68px; }

/* Login hero brand name — premium wordmark treatment */
.login-brand .name {
  font-size: 24px; letter-spacing: -.028em; font-weight: 900;
}

/* Floating badges — proper drop-glow for depth */
.badge.premium { box-shadow: 0 4px 12px rgba(245, 184, 0, .35); }
.badge.breaking { box-shadow: 0 4px 12px rgba(230, 0, 0, .28); }
.badge.live { box-shadow: 0 4px 12px rgba(19, 136, 8, .28); }

/* Rail-head icons for editorial polish */
.rail-head b .material-symbols-rounded {
  font-size: 15px; vertical-align: -3px;
  margin-right: 4px;
}

/* Article hero — brand gradient sweep more editorial */
.article-hero {
  background: linear-gradient(135deg, #1a0000 0%, #7A0000 40%, #E60000 80%, #FF6B00 110%) !important;
}
.article-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 200px at 30% 20%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none; z-index: 0;
}

/* Player and video hero — richer gradients */
.player {
  background: linear-gradient(135deg, #0a0000 0%, #3a0000 40%, #7A0000 100%) !important;
}
.featured-video {
  background: linear-gradient(135deg, #1a0000 0%, #7A0000 100%) !important;
}
.vp-canvas {
  background: radial-gradient(circle at 50% 40%, #4a0000 0%, #1a0000 55%, #000 100%) !important;
}

/* Live-badge dot pulses a bit more visibly */
.badge .dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

/* Chip active state gets shadow-glow */
.chip.small.active, .chip.active {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  color: #fff;
  box-shadow: 0 3px 10px rgba(230,0,0,.28);
}

/* Ncard hero image gets slight inner light-catch */
.ncard.hero-card .ncard-img.big {
  box-shadow: inset 0 2px 20px rgba(255,255,255,.08);
}

/* Language and district selected cards get glow */
.lang-card.selected, .dist.selected, .rashi-tile.selected {
  box-shadow: 0 4px 16px rgba(230,0,0,.18);
}

/* Rail head "View all →" pill treatment */
.rail-head a {
  padding: 4px 10px;
  background: color-mix(in srgb, var(--brand-red) 8%, transparent);
  border-radius: var(--r-pill);
  font-size: 10.5px;
}

/* Streak hero flame gets glow */
.streak-hero .flame { filter: drop-shadow(0 0 12px rgba(255,180,0,.6)); }

/* Sub-hero premium icon */
.sub-hero .xxl {
  filter: drop-shadow(0 6px 16px rgba(245, 184, 0, .4));
  background: linear-gradient(135deg, #8A6A00, #F5B800);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variation-settings: 'FILL' 1;
}
.bn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0;
  color: var(--text-secondary);
}
.bn small {
  font-family: var(--f-latin); font-size: 10px; font-weight: 500;
}
.bn .material-symbols-rounded { font-size: 22px; }
.bn.active { color: var(--brand-red); }
.bn.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}

/* ==== ARTICLE ==== */
.screen-body.article { padding: 0; overflow-y: auto; }
.article-hero {
  height: 220px; position: relative;
  padding: 40px 16px 12px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.article-hero .hero-tools {
  display: flex; gap: 8px;
}
.article-hero .hero-tools .material-symbols-rounded {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(10px);
  border-radius: 50%; color: #fff;
  display: grid; place-items: center; font-size: 20px;
}
.article-body { padding: 16px; }
.art-title {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 22px; line-height: 1.3;
  margin: 8px 0 14px; color: var(--text-primary);
}
.art-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  margin-bottom: 12px;
}
.author { display: flex; align-items: center; gap: 10px; }
.author b { font-family: var(--f-latin); font-size: 12px; font-weight: 700; display: block; color: var(--text-primary); }
.author small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); }
.art-actions-bar {
  display: flex; gap: 6px; padding: 8px 0; margin-bottom: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.art-actions-bar::-webkit-scrollbar { display: none; }
.art-actions-bar button {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border: none;
  background: var(--surface-alt); border-radius: var(--r-pill);
  font-family: var(--f-telugu); font-size: 12px; font-weight: 600;
  color: var(--text-primary); cursor: pointer;
}
.art-actions-bar .material-symbols-rounded { font-size: 16px; }
.article-body p {
  font-family: var(--f-telugu); font-size: 15px; line-height: 1.65;
  color: var(--text-primary); margin: 0 0 12px;
}
.art-reactions {
  display: flex; gap: 4px; padding: 12px 0;
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  margin-bottom: 16px;
}
.art-reactions button {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px; border: none; background: transparent;
  font-family: var(--f-latin); font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  border-radius: var(--r-md);
  white-space: nowrap;
}
.art-reactions button:hover { background: var(--surface-alt); color: var(--brand-red); }
.art-reactions .material-symbols-rounded { font-size: 17px; }

/* End-of-article share strip */
.art-share {
  margin: 20px 0 4px;
  padding: 16px;
  background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft));
  border: 1px solid color-mix(in srgb, var(--brand-red) 14%, transparent);
  border-radius: var(--r-lg);
}
[data-theme="dark"] .art-share { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.art-share-head { text-align: center; margin-bottom: 12px; }
.art-share-head b {
  display: block;
  font-family: var(--f-latin); font-weight: 800; font-size: 15px;
  color: var(--text-primary); letter-spacing: -.01em;
}
.art-share-head small {
  display: block; margin-top: 2px;
  font-family: var(--f-latin); font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
}
.art-share-row {
  display: flex; justify-content: center; gap: 10px;
}
.art-share-btn {
  width: 42px; height: 42px; border-radius: 14px;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .12s var(--ease-standard);
}
.art-share-btn:hover { transform: translateY(-2px); }
.art-share-btn .material-symbols-rounded { font-size: 20px; color: #fff; }

/* ==== SHORTS ==== */
.screen-body.shorts { padding: 0; }
.shorts-bg {
  width: 100%; height: 100%; position: relative;
  padding: 40px 12px 60px;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
}
.short-progress {
  position: absolute; top: 34px; left: 12px; right: 12px;
  display: flex; gap: 4px;
}
.short-progress span {
  flex: 1; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px;
  overflow: hidden;
}
.short-progress span.fill {
  background: #fff;
}
.short-progress span:nth-child(-n+2) { background: #fff; }
.short-top {
  position: absolute; top: 46px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.short-mid { padding-right: 60px; }
.short-mid h2 {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 26px; line-height: 1.28;
  margin: 0 0 12px; color: #fff;
}
.short-mid p {
  font-family: var(--f-telugu); font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,.88); margin: 0 0 16px;
}
.read-full {
  display: inline-block;
  font-family: var(--f-telugu); font-size: 13px; font-weight: 700;
  color: var(--brand-orange);
  padding: 10px 14px;
  background: rgba(255,255,255,.1); border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}
.short-side {
  position: absolute; right: 10px; bottom: 90px;
  display: flex; flex-direction: column; gap: 16px;
}
.short-side button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; color: #fff; cursor: pointer;
}
.short-side .material-symbols-rounded { font-size: 26px; }
.short-side small { font-family: var(--f-latin); font-size: 10px; }
.short-src {
  position: absolute; left: 16px; bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.short-src b { font-family: var(--f-latin); font-size: 12px; display: block; color: #fff; }
.short-src small { font-family: var(--f-latin); font-size: 10px; color: rgba(255,255,255,.7); }

/* ==== VIDEOS ==== */
.app-bar.plain {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 16px;
  gap: 12px;
}
.app-bar.plain b { font-family: var(--f-telugu); font-weight: 700; font-size: 18px; flex: 1; }
.app-bar.plain > .material-symbols-rounded { font-size: 22px; color: var(--text-primary); }
.app-bar.plain a { font-family: var(--f-latin); font-size: 12px; font-weight: 700; }
.link-danger { color: var(--brand-red) !important; }

.featured-video {
  margin: 0 16px 16px;
  aspect-ratio: 16/9;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.featured-video .play.xl { color: #fff; font-size: 60px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.fv-info {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: #fff;
}
.fv-info b { display: block; font-family: var(--f-telugu); font-size: 14px; font-weight: 700; margin: 4px 0 2px; }
.fv-info small { font-family: var(--f-latin); font-size: 11px; opacity: .85; }

.tabs.plain {
  margin: 0 16px 12px;
  width: auto;
}
.video-grid {
  padding: 0 16px 70px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.vcard { display: flex; flex-direction: column; gap: 6px; }
.vcard .thumb {
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  position: relative;
}
.vcard .thumb .duration {
  position: absolute; right: 4px; bottom: 4px;
  background: rgba(0,0,0,.75); color: #fff;
  padding: 2px 5px; border-radius: 4px;
  font-family: var(--f-latin); font-size: 9px; font-weight: 600;
}
.vcard b { font-family: var(--f-telugu); font-size: 12px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); }

/* ==== LIVE TV ==== */
.screen-body.livetv { padding: 0; overflow-y: auto; }
.player {
  height: 220px;
  padding: 40px 16px 12px;
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.player-tools { display: flex; gap: 8px; }
.player-tools .material-symbols-rounded {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
  border-radius: 50%; color: #fff;
  display: grid; place-items: center; font-size: 18px;
}
.player .play.xl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(255,255,255,.9); font-size: 64px;
}
.player-bottom {
  position: absolute; left: 16px; bottom: 12px;
  color: #fff;
}
.player-bottom b { display: block; font-family: var(--f-telugu); font-size: 14px; font-weight: 700; margin: 4px 0 2px; }
.player-bottom small { font-family: var(--f-latin); font-size: 11px; opacity: .85; }

.ch-grid {
  padding: 12px 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--r-lg);
}
.ch.selected { border-color: var(--brand-red); background: var(--brand-red-soft); }
.ch .lg {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  color: #fff; font-family: var(--f-latin); font-weight: 800; font-size: 13px;
}
.ch b { font-family: var(--f-telugu); font-size: 11px; font-weight: 600; }

/* ==== SEARCH ==== */
.search-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 16px;
}
.search-bar .back { margin-bottom: 0; }
.chip-list.wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.recents { display: flex; flex-direction: column; gap: 4px; }
.recents > div {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--divider);
  font-family: var(--f-telugu); font-size: 14px;
  color: var(--text-primary);
}
.recents > div .material-symbols-rounded { font-size: 18px; color: var(--text-secondary); }
.recents > div .material-symbols-rounded:last-child { margin-left: auto; }

/* ==== CATEGORIES ==== */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 4px 0;
}
.catc {
  --c: #E60000;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 14%, transparent);
  border-radius: var(--r-lg);
}
.catc .material-symbols-rounded { font-size: 26px; color: var(--c); }
.catc b {
  font-family: var(--f-telugu); font-size: 12px; font-weight: 600;
  color: var(--text-primary);
}

/* ==== DISTRICT NEWS ==== */
.map-view {
  margin: 0 16px 12px;
  padding: 12px;
  background: var(--surface); border-radius: var(--r-xl);
  border: 1px solid var(--divider);
}
.map-view svg { border-radius: var(--r-md); }
.map-loc {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; margin-top: 8px;
  border-top: 1px solid var(--divider);
}
.map-loc b { font-family: var(--f-telugu); font-size: 13px; font-weight: 700; flex: 1; }
.map-loc a { font-family: var(--f-latin); font-size: 11px; font-weight: 600; }
.map-loc .material-symbols-rounded { font-size: 18px; color: var(--brand-red); }

.screen-body.pad-t .rail { padding: 0 16px 6px; }
.screen-body.pad-t .ncard { margin-bottom: 8px; }

/* ==== NOTIFICATIONS ==== */
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 12px;
  border-bottom: 1px solid var(--divider);
}
.notif > .material-symbols-rounded {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; background: var(--surface-alt);
  color: var(--text-primary);
  display: grid; place-items: center; font-size: 20px;
}
.notif.breaking-notif > .material-symbols-rounded { background: var(--brand-red); color: #fff; }
.notif b { font-family: var(--f-telugu); font-size: 13px; font-weight: 600; display: block; color: var(--text-primary); }
.notif small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }
.notif.breaking-notif b { color: var(--brand-red); }

/* ==== SAVED ==== */
.folders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.folder {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--r-lg);
}
.folder .material-symbols-rounded { color: var(--brand-red); font-size: 22px; }
.folder b { font-family: var(--f-telugu); font-size: 13px; font-weight: 600; flex: 1; }
.folder small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }

/* ==== PROFILE ==== */
.screen-body.profile { padding: 0; overflow: hidden; }
.screen-body.profile > .screen-scroll { padding: 40px 16px 16px; }
.profile-hero {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 0 16px;
}
.profile-hero b { font-family: var(--f-telugu); font-weight: 700; font-size: 18px; color: var(--text-primary); }
.profile-hero small { font-family: var(--f-latin); font-size: 12px; color: var(--text-secondary); }
.profile-hero .badge { margin-top: 8px; }

.profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 12px 0;
  padding: 14px;
  background: var(--surface-alt); border-radius: var(--r-xl);
}
.profile-stats > div { text-align: center; }
.profile-stats b { font-family: var(--f-latin); font-weight: 800; font-size: 18px; display: block; color: var(--text-primary); }
.profile-stats small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }

.setting {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--divider);
}
.setting > .material-symbols-rounded { font-size: 22px; color: var(--text-primary); }
.setting b { font-family: var(--f-telugu); font-size: 14px; font-weight: 500; flex: 1; color: var(--text-primary); }
.setting small { font-family: var(--f-latin); font-size: 12px; color: var(--text-secondary); }
.switch {
  width: 36px; height: 20px; border-radius: var(--r-pill);
  background: var(--divider); position: relative;
  transition: background .2s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--e1);
  transition: transform .2s var(--ease-standard);
}
.switch.on { background: var(--brand-red); }
.switch.on::after { transform: translateX(16px); }

/* Settings slider */
.slider {
  display: flex; align-items: center; gap: 8px;
  width: 130px;
}
.slider span {
  flex: 1; height: 2px; background: var(--divider); border-radius: 2px;
}
.slider i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-red) 15%, transparent);
}

/* ==== SUBSCRIPTION ==== */
.screen-body.sub { padding: 40px 16px 20px; overflow-y: auto; }
.sub-hero {
  text-align: center; padding: 20px 0;
}
.sub-hero .xxl { font-size: 60px; color: var(--brand-orange); }
.sub-hero h2 {
  font-family: var(--f-latin); font-weight: 800; font-size: 28px;
  margin: 4px 0 6px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub-hero p { font-family: var(--f-telugu); font-size: 13px; color: var(--text-secondary); margin: 0; }

.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 20px 0 16px;
}
.plan {
  padding: 14px 6px; text-align: center;
  border: 1.5px solid var(--divider); border-radius: var(--r-lg);
  background: var(--surface);
  position: relative;
}
.plan.selected {
  border-color: var(--brand-red); background: var(--brand-red-soft);
}
.plan .save {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--brand-green); color: #fff;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--f-latin); font-size: 9px; font-weight: 700;
  letter-spacing: .04em;
}
.plan b { font-family: var(--f-latin); font-size: 12px; font-weight: 700; display: block; }
.plan .price { font-family: var(--f-latin); font-weight: 800; font-size: 20px; color: var(--brand-red); display: block; margin: 4px 0; }
.plan small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); }

.benefits { list-style: none; padding: 0; margin: 0 0 16px; }
.benefits li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-family: var(--f-telugu); font-size: 13px; color: var(--text-primary);
}
.benefits .material-symbols-rounded { color: var(--brand-green); font-size: 18px; }

.pay-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.pay-row::-webkit-scrollbar { display: none; }
.pay {
  padding: 10px 14px;
  background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-lg);
  font-family: var(--f-latin); font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ==== LOGIN ==== */
.screen-body.login { justify-content: flex-start; }
/* Flag badge — CSS-only Indian tricolor, avoids Windows Chrome's broken regional-indicator emoji fallback that renders 🇮🇳 as "IN" text */
.in-flag {
  display: inline-block; width: 18px; height: 12px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #FF9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66%);
  border: 1px solid rgba(0,0,0,.12);
  vertical-align: -2px;
  position: relative;
  flex-shrink: 0;
}
.in-flag::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%;
  border: 0.6px solid #000080;
}
.lead.flag { display: inline-flex; align-items: center; gap: 6px; }
/* Space input away from the primary CTA below it — was visually merging */
.screen-body.login .input + .btn { margin-top: 12px; }
.or {
  text-align: center; position: relative;
  margin: 18px 0;
}
.or::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--divider);
}
.or span {
  position: relative; background: var(--bg); padding: 0 12px;
  font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary);
  letter-spacing: .1em;
}
.fine {
  font-family: var(--f-latin); font-size: 10.5px;
  color: var(--text-secondary); text-align: center;
  margin-top: 16px; line-height: 1.5;
}

/* ==== ONBOARDING ==== */
.screen-body.ob { padding: 40px 0 0; overflow: hidden; }
.ob-illus {
  height: 340px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 16px;
  border-radius: var(--r-3xl);
}
.ob-body {
  padding: 24px 20px;
  text-align: center;
}
.ob-body h2 {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 22px; line-height: 1.3; margin: 0 0 8px;
  color: var(--text-primary);
}
.ob-body p {
  font-family: var(--f-telugu); font-size: 14px; line-height: 1.5;
  color: var(--text-secondary); margin: 0 0 20px;
}
.dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 22px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--divider); }
.dots span.on { width: 20px; border-radius: 3px; background: var(--brand-red); }
.ob-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ob-actions.single { display: block; }
.ob-actions.single .btn { width: 100%; }

/* Chip color variants — for category-specific chip tints */
.chip.cine, .chip.small.cine { background: #3A2A9A; color: #fff; }
.chip.cine .material-symbols-rounded, .chip.small.cine .material-symbols-rounded { color: #fff; }

/* Rating-tag icon override — inline `style="font-size:9px"` replaced by class */
.rating-tag .material-symbols-rounded { font-size: 9px; }

/* Tap-link — small red action label used in app-bars, sheet heads, and inline CTAs.
   Replaces the recurring `style="color:var(--brand-red);font-family:var(--f-latin);font-weight:700;font-size:12px"` inline pattern. */
.tap-link {
  color: var(--brand-red);
  font-family: var(--f-latin);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.tap-link.block {
  display: block;
  text-align: center;
  margin-top: 12px;
}

/* ==== SCROLLBARS ==== */
/* Hide vertical scrollbars on every phone-frame screen — the content still scrolls,
   the chrome is just invisible so short screens don't show a phantom scrollbar. */
.screen-body,
.screen-body.pad,
.screen-body.article,
.screen-body.sub,
.screen-body.success,
.screen-body.profile,
.screen-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.screen-body::-webkit-scrollbar,
.screen-body.pad::-webkit-scrollbar,
.screen-body.article::-webkit-scrollbar,
.screen-body.sub::-webkit-scrollbar,
.screen-body.success::-webkit-scrollbar,
.screen-body.profile::-webkit-scrollbar,
.screen-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ============================================================
   PHASE 1 · NEW SCREEN PATTERNS
   OTP · Interests · Category detail · Comments · Compose ·
   Report/Share sheets · Video player · Search results ·
   Filters · District detail · Edit profile · Payments ·
   Notification prefs · Help/FAQ · Feedback · About/Legal
   ============================================================ */

/* ------ OTP entry ------ */
.otp-info { text-align: center; font-family: var(--f-latin); font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.otp-info b { color: var(--text-primary); font-weight: 700; }
.otp-info a { color: var(--brand-red); font-weight: 600; margin-left: 6px; }
.otp-row { display: flex; gap: 8px; margin: 16px 0 12px; }
.otp-box {
  flex: 1; height: 52px;
  background: var(--surface-alt);
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  text-align: center;
  font-family: var(--f-latin); font-weight: 700; font-size: 22px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s, background .15s;
}
.otp-box.filled { background: var(--brand-red-soft); border-color: var(--brand-red); color: var(--brand-red); }
.otp-box.focus { border-color: var(--brand-red); background: var(--surface); }
.resend { text-align: center; font-family: var(--f-latin); font-size: 12px; color: var(--text-secondary); margin: 8px 0 0; }
.resend b { color: var(--brand-red); font-weight: 600; }

/* ------ Interests picker ------ */
.interest-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.interest {
  padding: 8px 12px;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--r-pill);
  font-family: var(--f-telugu); font-size: 12.5px; font-weight: 500;
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
  cursor: pointer;
}
.interest.selected { background: var(--brand-red-soft); border-color: var(--brand-red); color: var(--brand-red); font-weight: 700; }
.pick-note { font-family: var(--f-latin); font-size: 12px; color: var(--text-secondary); text-align: center; margin: 8px 0 12px; }
.pick-note b { color: var(--brand-red); font-weight: 700; }

/* ------ Category detail hero ------ */
.cat-hero {
  padding: 40px 16px 14px;
  background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft));
  border-bottom: 1px solid var(--divider);
}
.cat-hero-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cat-hero-row .back { margin: 0; background: rgba(255,255,255,.7); }
.cat-hero-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--e1);
}
.cat-hero-icon .material-symbols-rounded { font-size: 24px; color: var(--brand-red); }
.cat-hero-info b { display: block; font-family: var(--f-telugu); font-weight: 700; font-size: 20px; color: var(--text-primary); }
.cat-hero-info small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }
.cat-hero-info b + small { margin-top: 2px; display: block; }

/* ------ Comments list ------ */
.article-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  margin: 8px 16px 12px;
}
.article-strip .thumb { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; background: linear-gradient(135deg,#111,#E60000); }
.article-strip p { font-family: var(--f-telugu); font-size: 12px; font-weight: 600; color: var(--text-primary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comments-list { padding: 0 16px; }
.comment { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.comment.reply { padding-left: 44px; }
.comment > .avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.comment-head b { font-family: var(--f-latin); font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.comment-head small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }
.comment-body p { font-family: var(--f-telugu); font-size: 13px; line-height: 1.5; color: var(--text-primary); margin: 0 0 6px; }
.comment-actions { display: flex; gap: 14px; }
.comment-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: none; background: transparent; font-family: var(--f-latin); font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.comment-actions .material-symbols-rounded { font-size: 14px; }
.comment.liked .comment-actions button:first-child { color: var(--brand-red); }
.compose-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
}
.compose-bar .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.compose-bar .input { flex: 1; padding: 6px 12px; background: var(--surface-alt); border-radius: var(--r-pill); }
.compose-bar .input input { border: none; outline: none; background: transparent; font-family: var(--f-telugu); font-size: 12.5px; width: 100%; }
.compose-bar > .material-symbols-rounded { color: var(--brand-red); font-size: 22px; }

/* ------ Comment composer ------ */
.composer-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 40px 16px 12px;
}
.composer-topbar a { font-family: var(--f-latin); font-size: 14px; font-weight: 700; cursor: pointer; }
.composer-topbar a.dim { color: var(--text-secondary); }
.composer-topbar a.primary { color: #fff; background: var(--brand-red); padding: 8px 14px; border-radius: var(--r-pill); }
.composer-context {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--divider);
}
.composer-context .avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.composer-context b { font-family: var(--f-latin); font-size: 12.5px; font-weight: 700; display: block; }
.composer-context small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }
.composer-area {
  flex: 1;
  margin: 12px 16px 0;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1.5px solid color-mix(in srgb, var(--brand-red) 22%, transparent);
  border-radius: var(--r-lg);
  font-family: var(--f-telugu); font-size: 14px; line-height: 1.55;
  color: var(--text-primary);
  overflow-y: auto;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-red) 8%, transparent);
}
[data-theme="dark"] .composer-area { background: #1A0808; }
.composer-area .placeholder { color: var(--text-secondary); }
/* Blinking caret at end of the composed text — signals this is a live text field */
.composer-caret {
  display: inline-block; width: 2px; height: 16px;
  background: var(--brand-red);
  vertical-align: -3px; margin-left: 2px;
  animation: composer-caret-blink 1s steps(2, end) infinite;
}
@keyframes composer-caret-blink { 50% { opacity: 0; } }
.composer-tools {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--divider);
}
.composer-tools > .material-symbols-rounded { color: var(--text-secondary); font-size: 22px; padding: 6px; }
.composer-tools .char-count { margin-left: auto; font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }

/* ------ Bottom-sheet screens (Report / Share / Filters) ------ */
.screen-body.sheet-screen {
  background: rgba(0,0,0,.55);
  /* Column-flex parent — justify-content controls the vertical axis, not align-items */
  justify-content: flex-end;
}
.sheet-panel {
  width: 100%;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 8px 0 16px;
  max-height: 82%;
  display: flex; flex-direction: column;
}
.sheet-grabber { width: 40px; height: 4px; background: var(--divider); border-radius: 2px; margin: 6px auto 8px; }
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 20px 12px;
}
.sheet-head b { font-family: var(--f-latin); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.sheet-head .material-symbols-rounded { color: var(--text-secondary); font-size: 22px; cursor: pointer; }
.sheet-body { padding: 0 4px; overflow-y: auto; flex: 1; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-cta { padding: 12px 20px 0; }

/* Report options */
.report-list { padding: 0 8px; }
.report-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
}
.report-item .radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--divider);
  flex-shrink: 0;
  display: grid; place-items: center;
}
.report-item.selected .radio { border-color: var(--brand-red); }
.report-item.selected .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); }
.report-item b { font-family: var(--f-telugu); font-size: 14px; font-weight: 500; color: var(--text-primary); flex: 1; }
.report-item small { display: block; font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); font-weight: 400; margin-top: 2px; }


/* ==============================================================
   REPORT SHEET v2 · redesigned bottom-sheet
   Category icons for fast scan · trust chip in header · row-selection tick
   ============================================================== */
.sheet-panel.report-v2 { padding-bottom: 14px; }
.sheet-trust {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 20px 12px;
  padding: 10px 12px;
  background: var(--brand-green-soft);
  border: 1px solid color-mix(in srgb, var(--brand-green) 20%, transparent);
  border-radius: var(--r-md);
}
[data-theme="dark"] .sheet-trust { background: #0F2A0A; }
.sheet-trust .material-symbols-rounded {
  color: var(--brand-green); font-size: 18px; flex-shrink: 0; margin-top: 1px;
  font-variation-settings: 'FILL' 1;
}
.sheet-trust p {
  margin: 0;
  font-family: var(--f-latin); font-size: 11.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--brand-green) 85%, var(--text-primary));
}
.sheet-trust b { font-weight: 800; }

.report-list.v2 { padding: 0 16px; }
.report-list.v2 .report-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  cursor: pointer;
  transition: background .15s var(--ease-standard), border-color .15s;
}
.report-list.v2 .report-item:last-child { border-bottom: none; }
.report-list.v2 .report-item .radio { display: none; }
.report-list.v2 .report-item.selected {
  background: color-mix(in srgb, var(--brand-red) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-red) 25%, transparent);
  border-radius: var(--r-md);
}
[data-theme="dark"] .report-list.v2 .report-item.selected { background: #1A0808; border-color: color-mix(in srgb, var(--brand-red) 40%, transparent); }
.report-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.report-icon .material-symbols-rounded { font-size: 18px; color: #fff; font-variation-settings: 'FILL' 1; }
.report-icon.miss   { background: linear-gradient(135deg, #C44500, #E67E22); }
.report-icon.hate   { background: linear-gradient(135deg, #8A0000, #E60000); }
.report-icon.adult  { background: linear-gradient(135deg, #3A2A9A, #7A5AE0); }
.report-icon.spam   { background: linear-gradient(135deg, #4A4A4A, #7A7A7A); }
.report-icon.copy   { background: linear-gradient(135deg, #1D3A8A, #3A65E0); }
.report-icon.other  { background: linear-gradient(135deg, #075B45, #0EA271); }

.report-text { flex: 1; min-width: 0; }
.report-text b {
  display: block; font-family: var(--f-latin); font-size: 13px; font-weight: 700;
  color: var(--text-primary); letter-spacing: -.005em;
}
.report-text small {
  display: block; margin-top: 2px;
  font-family: var(--f-latin); font-size: 11px; font-weight: 400;
  color: var(--text-secondary); line-height: 1.35;
}
.report-tick {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--divider);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.report-tick .material-symbols-rounded {
  font-size: 14px; color: transparent;
  transition: color .15s;
}
.report-item.selected .report-tick {
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.report-item.selected .report-tick .material-symbols-rounded { color: #fff; font-variation-settings: 'wght' 700; }


/* ------ Full-screen video player ------ */
.screen-body.vplayer { background: #000; color: #fff; padding: 0; overflow: hidden; }
.vp-canvas {
  height: 100%;
  position: relative;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 42%, #4a0000 0%, #1a0000 55%, #000 100%);
}
.vp-top {
  padding: 40px 12px 12px;
  display: flex; align-items: center; gap: 10px;
}
.vp-top .icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff; display: grid; place-items: center;
  border: none; cursor: pointer;
  flex-shrink: 0;
}
.vp-top .icon-btn .material-symbols-rounded { font-size: 18px; }
.vp-top .vp-title { flex: 1; min-width: 0; }
.vp-top .vp-title b { display: block; font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.vp-top .vp-title small { font-family: var(--f-latin); font-size: 10px; opacity: .85; display: block; margin-top: 2px; }
.vp-play { flex: 1; display: flex; align-items: center; justify-content: center; }
.vp-play .material-symbols-rounded {
  font-size: 68px; color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.35); border-radius: 50%;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.vp-bottom { padding: 12px 16px 22px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.vp-scrubber { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vp-track { flex: 1; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; position: relative; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-red); border-radius: 2px; width: 36%; }
.vp-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px rgba(230,0,0,.25); }
.vp-time { font-family: var(--f-latin); font-size: 10.5px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vp-actions { display: flex; align-items: center; justify-content: space-between; }
.vp-actions button { background: transparent; border: none; color: #fff; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; cursor: pointer; }
.vp-actions .material-symbols-rounded { font-size: 20px; }
.vp-actions small { font-family: var(--f-latin); font-size: 9px; opacity: .9; }

/* ------ Search results ------ */
.result-count { font-family: var(--f-latin); font-size: 11.5px; color: var(--text-secondary); padding: 4px 4px 10px; }
.result-count b { color: var(--text-primary); font-weight: 700; }
.result-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.result-tabs::-webkit-scrollbar { display: none; }

/* ------ Filter section (used inside sheet-body) ------ */
.filter-section { padding: 14px 20px; border-bottom: 1px solid var(--divider); }
.filter-section h5 { font-family: var(--f-latin); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 10px; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-item .checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--divider);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.check-item.selected .checkbox { background: var(--brand-red); border-color: var(--brand-red); }
.check-item.selected .checkbox .material-symbols-rounded { font-size: 14px; color: #fff; }
.check-item b { font-family: var(--f-telugu); font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; }
.check-item small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row .chip.small.selected { background: var(--brand-red); color: #fff; font-weight: 700; }
.filter-actions { display: flex; gap: 8px; padding: 12px 20px 4px; border-top: 1px solid var(--divider); }
.filter-actions .btn { flex: 0 0 auto; padding-inline: 16px; }
.filter-actions .btn.btn-primary { flex: 1 1 auto; min-width: 0; }

/* ------ District detail hero ------ */
.dist-hero {
  height: 170px; position: relative;
  background: linear-gradient(135deg,#0B5D05,#138808 55%,#5CBA47);
  padding: 40px 16px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; overflow: hidden;
}
.dist-hero::after { content:''; position: absolute; inset: 0; background: radial-gradient(400px 200px at 80% 20%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.dist-hero .back.light { position: relative; z-index: 2; }
.dist-hero-info { position: relative; z-index: 2; }
.dist-hero-info b { display: block; font-family: var(--f-telugu); font-weight: 700; font-size: 24px; color: #fff; }
.dist-hero-info small { display: block; font-family: var(--f-latin); font-size: 11.5px; opacity: .95; margin-top: 3px; }
.dist-hero-follow { position: absolute; right: 14px; top: 42px; z-index: 3; padding: 7px 14px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.2); color: #fff; border-radius: var(--r-pill); font-family: var(--f-latin); font-size: 11px; font-weight: 700; cursor: pointer; }
.dist-stats { display: flex; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.dist-stats > div { flex: 1; text-align: center; }
.dist-stats > div + div { border-left: 1px solid var(--divider); }
.dist-stats b { font-family: var(--f-latin); font-weight: 800; font-size: 16px; display: block; color: var(--text-primary); letter-spacing: -.01em; }
.dist-stats small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; display: block; }

/* ------ Edit profile ------ */
.edit-avatar-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 20px; }
.edit-avatar-wrap { position: relative; }
.edit-avatar-wrap .avatar.xl { margin: 0; }
.edit-avatar-wrap .edit-btn { position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-red); color: #fff; border: 3px solid var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: var(--e1); }
.edit-avatar-wrap .edit-btn .material-symbols-rounded { font-size: 15px; }
.edit-avatar-row a { font-family: var(--f-latin); font-size: 12px; font-weight: 700; color: var(--brand-red); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-family: var(--f-latin); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.field-value { padding: 12px 14px; background: var(--surface-alt); border-radius: var(--r-lg); font-family: var(--f-telugu); font-size: 14px; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px solid transparent; }
.field-value.disabled { color: var(--text-secondary); background: var(--surface); border-color: var(--divider); }
.field-value .material-symbols-rounded { font-size: 18px; color: var(--text-secondary); }
.field-value.active { border-color: var(--brand-red); background: var(--surface); }

/* ------ Payment method ------ */
.plan-summary {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  color: #fff;
  border-radius: var(--r-xl);
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.plan-summary::after { content:''; position: absolute; inset: 0; background: radial-gradient(200px 100px at 80% 20%, rgba(255,255,255,.2), transparent 70%); }
.plan-summary b { position: relative; font-family: var(--f-latin); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.plan-summary .amt { position: relative; display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.plan-summary .amt strong { font-family: var(--f-latin); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.plan-summary .amt small { font-family: var(--f-latin); font-size: 11px; opacity: .9; }
.pay-list { display: flex; flex-direction: column; gap: 8px; }
.pay-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-lg); cursor: pointer; }
.pay-item.selected { border-color: var(--brand-red); background: var(--brand-red-soft); }
.pay-logo { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-family: var(--f-latin); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.pay-item b { flex: 1; font-family: var(--f-telugu); font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.pay-item small { display: block; font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); font-weight: 500; margin-top: 2px; }
.pay-item > .material-symbols-rounded { color: var(--brand-red); font-size: 22px; flex-shrink: 0; }
.pay-item.selected > .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
.pay-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; border-top: 1px dashed var(--divider); margin-top: 14px; }
.pay-total b { font-family: var(--f-latin); font-weight: 700; font-size: 13px; }
.pay-total strong { font-family: var(--f-latin); font-weight: 800; font-size: 20px; color: var(--brand-red); }

/* ------ Payment success ------ */
.screen-body.success { padding: 40px 20px 20px; }
.success-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px 0; }
.success-check { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-green), #5CBA47); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(19,136,8,.35); animation: pop .5s var(--ease-standard) 1; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.success-check .material-symbols-rounded { font-size: 46px; }
.success-body h2 { font-family: var(--f-latin); font-weight: 800; font-size: 22px; color: var(--text-primary); margin: 6px 0 0; }
.success-body > p { font-family: var(--f-telugu); font-size: 13.5px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.receipt { background: var(--surface-alt); border-radius: var(--r-lg); padding: 14px; width: 100%; margin-top: 8px; }
.receipt-row { display: flex; justify-content: space-between; padding: 5px 0; font-family: var(--f-latin); font-size: 12px; }
.receipt-row.total { border-top: 1px dashed var(--divider); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 13.5px; }
.receipt-row span { color: var(--text-secondary); }
.receipt-row b { color: var(--text-primary); font-weight: 600; }
.success-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 8px; }

/* ------ Manage subscription ------ */
.plan-card { padding: 14px; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); color: #fff; border-radius: var(--r-xl); margin-bottom: 14px; position: relative; overflow: hidden; }
.plan-card::after { content:''; position: absolute; inset: 0; background: radial-gradient(200px 100px at 80% 20%, rgba(255,255,255,.2), transparent 70%); }
.plan-card > * { position: relative; z-index: 1; }
.plan-card b { font-family: var(--f-latin); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; display: block; }
.plan-card h3 { font-family: var(--f-latin); font-weight: 800; font-size: 20px; margin: 4px 0 2px; letter-spacing: -.02em; }
.plan-card small { font-family: var(--f-latin); font-size: 11.5px; opacity: .9; display: block; }
.plan-actions { display: flex; gap: 6px; margin-top: 12px; position: relative; z-index: 1; }
.plan-actions button { flex: 1; padding: 8px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.2); color: #fff; font-family: var(--f-latin); font-size: 11px; font-weight: 700; cursor: pointer; }
.billing-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.billing-item > div { flex: 1; min-width: 0; }
.billing-item b { font-family: var(--f-latin); font-size: 12.5px; font-weight: 700; color: var(--text-primary); display: block; }
.billing-item small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 1px; }
.billing-item .amt { font-family: var(--f-latin); font-weight: 800; font-size: 13px; color: var(--text-primary); }
.billing-item .status { display: inline-block; padding: 2px 6px; border-radius: 4px; font-family: var(--f-latin); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }
.billing-item .status.paid { color: var(--brand-green); background: var(--brand-green-soft); }
.billing-item .status.pending { color: var(--brand-orange); background: var(--brand-orange-soft); }

/* ------ Notification preferences ------ */
.pref-group h5 { font-family: var(--f-latin); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin: 14px 0 6px; }

/* ------ Help / FAQ ------ */
.help-search {
  background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft));
  padding: 16px;
  border-radius: var(--r-xl);
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-red) 12%, transparent);
}
.help-search h3 { font-family: var(--f-latin); font-weight: 800; font-size: 16px; margin: 0 0 10px; letter-spacing: -.01em; }
.faq { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.faq-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.faq-head b { font-family: var(--f-telugu); font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; line-height: 1.4; }
.faq-head .material-symbols-rounded { color: var(--text-secondary); font-size: 20px; flex-shrink: 0; transition: transform .2s; }
.faq.open .faq-head .material-symbols-rounded { color: var(--brand-red); transform: rotate(180deg); }
.faq-body { font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: 8px 0 0; }
.help-cta { margin-top: 16px; padding: 14px; background: var(--surface-alt); border-radius: var(--r-lg); text-align: center; }
.help-cta b { font-family: var(--f-latin); font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 3px; }
.help-cta small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 10px; }

/* ------ Feedback / rate ------ */
.feedback-hero { text-align: center; padding: 20px 0 12px; }
.feedback-hero .stars { display: flex; justify-content: center; gap: 8px; margin: 12px 0; }
.feedback-hero .stars .material-symbols-rounded { font-size: 34px; color: var(--divider); }
.feedback-hero .stars .material-symbols-rounded.on { color: #F5B800; font-variation-settings: 'FILL' 1; }
.feedback-hero h3 { font-family: var(--f-latin); font-weight: 700; font-size: 18px; margin: 6px 0 4px; }
.feedback-hero p { font-family: var(--f-telugu); font-size: 12.5px; color: var(--text-secondary); margin: 0; }
.feedback-textarea { width: 100%; min-height: 120px; padding: 12px 14px; background: var(--surface-alt); border: 1.5px solid transparent; border-radius: var(--r-lg); font-family: var(--f-telugu); font-size: 13.5px; color: var(--text-primary); resize: none; outline: none; box-sizing: border-box; }
.feedback-textarea:focus { border-color: var(--brand-red); background: var(--surface); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }

/* ------ About & legal ------ */
.about-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 16px; }
.about-brand b { font-family: var(--f-latin); font-weight: 800; font-size: 17px; margin-top: 8px; }
.about-brand small { font-family: var(--f-latin); font-size: 11.5px; color: var(--text-secondary); }
.about-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.about-item > .material-symbols-rounded { color: var(--text-secondary); font-size: 20px; flex-shrink: 0; }
.about-item .lead-icon { color: var(--brand-red); }
.about-item b { flex: 1; font-family: var(--f-telugu); font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.about-item small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }
.grievance-card { background: var(--brand-red-soft); padding: 12px 14px; border-radius: var(--r-lg); margin: 12px 0; border: 1px solid color-mix(in srgb, var(--brand-red) 15%, transparent); }
.grievance-card b { font-family: var(--f-latin); font-weight: 800; font-size: 10.5px; color: var(--brand-red); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 4px; }
.grievance-card p { font-family: var(--f-telugu); font-size: 12px; color: var(--text-primary); margin: 0; line-height: 1.5; }
.grievance-card a { color: var(--brand-red); font-weight: 700; }

/* Make-in-India badge */
.mii-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: linear-gradient(90deg, #FF9933, #fff, #138808); color: var(--text-primary); font-family: var(--f-latin); font-size: 10.5px; font-weight: 700; border: 1px solid var(--divider); }

/* ============================================================
   PHASE 2 · NEW PATTERNS
   Following · Trending · Editor's picks · Photo story · Author profile ·
   EPG · Voice search · History · Downloads · Local alerts ·
   Astrology · Cinema · Cricket · Jobs
   ============================================================ */

/* ---- Following list ---- */
.follow-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.follow-item .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.follow-item .info { flex: 1; min-width: 0; }
.follow-item .info b { font-family: var(--f-telugu); font-size: 13px; font-weight: 700; display: block; color: var(--text-primary); }
.follow-item .info small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); display: block; margin-top: 1px; }
.follow-btn { padding: 6px 14px; border: 1.5px solid var(--brand-red); background: transparent; color: var(--brand-red); border-radius: var(--r-pill); font-family: var(--f-latin); font-size: 11px; font-weight: 700; cursor: pointer; }
.follow-btn.following { background: var(--brand-red); color: #fff; }

/* ---- Trending list ---- */
.trend-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.trend-rank { font-family: var(--f-latin); font-weight: 900; font-size: 22px; letter-spacing: -.03em; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 30px; line-height: 1; }
.trend-info { flex: 1; min-width: 0; }
.trend-info b { font-family: var(--f-telugu); font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trend-info small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 4px; }
.trend-info .trend-tag { color: var(--brand-red); font-weight: 700; }
.trend-item .thumb { width: 50px; height: 50px; border-radius: var(--r-md); background: linear-gradient(135deg,#111,#E60000); flex-shrink: 0; }

/* Trending topic pills */
.topic-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.topic-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--r-lg); }
.topic-pill .material-symbols-rounded { color: var(--brand-red); font-size: 18px; }
.topic-pill b { font-family: var(--f-telugu); font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.topic-pill small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }

/* ---- Editor's picks ---- */
.editor-note { padding: 12px 14px; background: var(--astro-soft); border-left: 3px solid #8A6A00; border-radius: 6px; margin: 4px 0 10px; font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.5; color: var(--text-primary); font-style: italic; }
[data-theme="dark"] .editor-note { background: #2A2410; color: #F2D89A; }
.editor-note b { display: block; font-family: var(--f-latin); font-weight: 800; font-size: 10.5px; color: #8A6A00; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; font-style: normal; }
.editor-byline { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.editor-byline .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.editor-byline b { font-family: var(--f-latin); font-size: 12px; font-weight: 700; color: var(--text-primary); }
.editor-byline small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 1px; }

/* ---- Photo story viewer ---- */
.screen-body.photo-story { background: #000; padding: 0; overflow: hidden; color: #fff; }
.ps-canvas { flex: 1; display: flex; flex-direction: column; position: relative; height: 100%; }
.ps-progress { display: flex; gap: 3px; padding: 34px 12px 8px; z-index: 3; position: relative; }
.ps-progress span { flex: 1; height: 2.5px; background: rgba(255,255,255,.28); border-radius: 2px; }
.ps-progress span.done { background: #fff; }
.ps-progress span.fill { background: linear-gradient(90deg, #fff 60%, rgba(255,255,255,.28) 60%); }
.ps-top { display: flex; align-items: center; gap: 10px; padding: 4px 16px 8px; position: relative; z-index: 3; }
.ps-top .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#E60000,#FF6B00); }
.ps-top .info { flex: 1; min-width: 0; }
.ps-top b { font-family: var(--f-latin); font-size: 12px; font-weight: 700; color: #fff; display: block; }
.ps-top small { font-family: var(--f-latin); font-size: 10px; opacity: .85; }
.ps-top .icon-btn { width: 30px; height: 30px; border: none; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ps-image { position: absolute; inset: 0; background: linear-gradient(135deg, #7A0000 0%, #E60000 55%, #FF6B00 100%); display: grid; place-items: center; color: rgba(255,255,255,.35); font-family: var(--f-latin); font-size: 60px; font-weight: 900; letter-spacing: -.03em; }
.ps-image::before { content: ''; position: absolute; inset: 0; background: radial-gradient(300px 200px at 30% 30%, rgba(255,255,255,.15), transparent 60%); }
.ps-caption { position: absolute; left: 0; right: 0; bottom: 68px; padding: 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); z-index: 3; }
.ps-caption .ps-count { display: inline-block; padding: 3px 8px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); border-radius: 12px; font-family: var(--f-latin); font-size: 10px; font-weight: 700; margin-bottom: 8px; }
.ps-caption b { display: block; font-family: var(--f-telugu); font-size: 15px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
.ps-caption p { font-family: var(--f-telugu); font-size: 12px; line-height: 1.45; opacity: .95; margin: 0; }
.ps-actions { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.ps-actions .icon-btn { width: 36px; height: 36px; border: none; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); color: #fff; border-radius: 50%; display: grid; place-items: center; }
.ps-actions .icon-btn.solid { background: var(--brand-red); }
.ps-actions .icon-btn .material-symbols-rounded { font-size: 18px; }
.ps-actions-left { display: flex; gap: 8px; }

/* ---- Author profile ---- */
.author-cover { height: 90px; position: relative; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); overflow: hidden; }
.author-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(300px 100px at 80% 30%, rgba(255,255,255,.2), transparent 60%); }
.author-cover .back.light { position: absolute; left: 12px; top: 42px; margin: 0; z-index: 2; }
.author-cover .cover-tools { position: absolute; right: 12px; top: 42px; display: flex; gap: 8px; z-index: 2; }
.author-cover .cover-tools .material-symbols-rounded { width: 32px; height: 32px; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }
.author-hero { padding: 0 16px; margin-top: -34px; text-align: center; position: relative; z-index: 2; }
.author-hero .avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 6px; border: 3px solid var(--bg); background: linear-gradient(135deg, #8A6A00, #F5B800); box-shadow: var(--e2); }
.author-hero .name-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.author-hero .name-row b { font-family: var(--f-latin); font-weight: 800; font-size: 17px; color: var(--text-primary); }
.author-hero .name-row .material-symbols-rounded { color: var(--brand-red); font-size: 16px; font-variation-settings: 'FILL' 1; }
.author-hero .role { font-family: var(--f-latin); font-size: 10.5px; color: var(--brand-red); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.author-hero .bio { font-family: var(--f-telugu); font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 8px 8px 0; }
.author-actions { display: flex; gap: 8px; padding: 12px 16px; }
.author-actions .btn { flex: 1; }
.author-stats { display: flex; padding: 12px 16px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.author-stats > div { flex: 1; text-align: center; }
.author-stats > div + div { border-left: 1px solid var(--divider); }
.author-stats b { font-family: var(--f-latin); font-weight: 800; font-size: 15px; display: block; color: var(--text-primary); }
.author-stats small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; display: block; }

/* ---- EPG / TV Schedule ---- */
.epg-datepick { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; }
.epg-datepick::-webkit-scrollbar { display: none; }
.epg-day { flex-shrink: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-alt); font-family: var(--f-latin); font-weight: 600; color: var(--text-primary); text-align: center; cursor: pointer; min-width: 44px; }
.epg-day.active { background: var(--brand-red); color: #fff; }
.epg-day .day { display: block; font-size: 9px; opacity: .8; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.epg-day .num { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }
.epg-now-line { padding: 6px 16px; background: var(--brand-red-soft); font-family: var(--f-latin); font-size: 10.5px; font-weight: 700; color: var(--brand-red); letter-spacing: .06em; text-transform: uppercase; }
[data-theme="dark"] .epg-now-line { background: #2A0F0F; }
.epg-row { display: flex; padding: 8px 12px 8px 8px; border-bottom: 1px solid var(--divider); align-items: center; gap: 8px; }
.epg-ch { width: 42px; flex-shrink: 0; text-align: center; }
.epg-ch .lg { width: 32px; height: 32px; border-radius: 8px; margin: 0 auto; display: grid; place-items: center; color: #fff; font-family: var(--f-latin); font-weight: 800; font-size: 10px; }
.epg-ch small { font-family: var(--f-latin); font-size: 8.5px; color: var(--text-secondary); font-weight: 700; margin-top: 3px; display: block; }
.epg-programs { flex: 1; overflow-x: auto; display: flex; gap: 5px; scrollbar-width: none; padding: 2px 0; }
.epg-programs::-webkit-scrollbar { display: none; }
.epg-prog { flex-shrink: 0; padding: 5px 8px; background: var(--surface-alt); border-radius: 5px; min-width: 76px; }
.epg-prog.now { background: var(--brand-red); color: #fff; }
.epg-prog.now b { color: #fff; }
.epg-prog.now small { color: rgba(255,255,255,.85); }
.epg-prog b { font-family: var(--f-latin); font-size: 10px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.epg-prog small { font-family: var(--f-latin); font-size: 9px; color: var(--text-secondary); display: block; margin-top: 1px; }

/* ---- Voice search ---- */
.screen-body.voice { background: linear-gradient(180deg, #1a0a0a 0%, #000 100%); color: #fff; padding: 0; overflow: hidden; }
.voice-canvas { flex: 1; display: flex; flex-direction: column; padding: 40px 20px 24px; }
.voice-top { display: flex; justify-content: flex-end; }
.voice-top .icon-btn { background: rgba(255,255,255,.1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.voice-top .icon-btn .material-symbols-rounded { font-size: 18px; }
.voice-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.voice-mic { width: 88px; height: 88px; border-radius: 50%; background: var(--brand-red); display: grid; place-items: center; position: relative; box-shadow: 0 0 0 12px rgba(230,0,0,.15), 0 0 0 24px rgba(230,0,0,.08); }
.voice-mic .material-symbols-rounded { font-size: 42px; color: #fff; }
.voice-mic::before, .voice-mic::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(230,0,0,.5); animation: v-ripple 1.6s ease-out infinite; }
.voice-mic::after { animation-delay: .8s; }
@keyframes v-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.voice-status { text-align: center; }
.voice-status b { display: block; font-family: var(--f-latin); font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 4px; }
.voice-status small { font-family: var(--f-telugu); font-size: 12px; color: rgba(255,255,255,.65); }
.voice-transcript { text-align: center; font-family: var(--f-telugu); font-size: 20px; line-height: 1.4; color: #fff; padding: 0 8px; letter-spacing: -.01em; }
.voice-transcript .cursor { display: inline-block; width: 2px; height: 18px; background: var(--brand-orange); vertical-align: text-bottom; margin-left: 3px; animation: v-blink 1s steps(2) infinite; }
@keyframes v-blink { 50% { opacity: 0; } }
.voice-waves { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; margin-top: 4px; }
.voice-waves span { width: 3px; background: linear-gradient(180deg, var(--brand-orange), var(--brand-red)); border-radius: 2px; animation: v-wave 1s ease-in-out infinite; transform-origin: center; }
.voice-waves span:nth-child(1) { height: 40%; animation-delay: 0s; }
.voice-waves span:nth-child(2) { height: 75%; animation-delay: .1s; }
.voice-waves span:nth-child(3) { height: 90%; animation-delay: .2s; }
.voice-waves span:nth-child(4) { height: 60%; animation-delay: .3s; }
.voice-waves span:nth-child(5) { height: 95%; animation-delay: .4s; }
.voice-waves span:nth-child(6) { height: 55%; animation-delay: .5s; }
.voice-waves span:nth-child(7) { height: 80%; animation-delay: .6s; }
@keyframes v-wave { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.voice-hint { text-align: center; font-family: var(--f-latin); font-size: 11px; color: rgba(255,255,255,.55); }
.voice-hint b { color: rgba(255,255,255,.9); }
.voice-cancel { text-align: center; padding-top: 4px; }
.voice-cancel a { color: rgba(255,255,255,.75); font-family: var(--f-latin); font-size: 13px; font-weight: 600; cursor: pointer; }

/* ---- Reading history ---- */
.history-date-head { padding: 12px 4px 4px; font-family: var(--f-latin); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.history-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); align-items: center; }
.history-item .thumb { width: 56px; height: 42px; border-radius: 5px; flex-shrink: 0; }
.history-item .info { flex: 1; min-width: 0; }
.history-item .info b { font-family: var(--f-telugu); font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.history-item .info small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); display: block; margin-top: 3px; }
.history-progress { width: 100%; height: 2px; background: var(--divider); margin-top: 4px; border-radius: 1px; overflow: hidden; }
.history-progress .fill { display: block; height: 100%; background: var(--brand-red); }

/* ---- Offline downloads ---- */
.storage-bar { padding: 14px; background: var(--surface-alt); border-radius: var(--r-lg); margin-bottom: 14px; }
.storage-bar .row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.storage-bar .row b { color: var(--text-primary); font-weight: 700; font-size: 13px; }
.storage-track { height: 6px; background: var(--divider); border-radius: 3px; overflow: hidden; }
.storage-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-red), var(--brand-orange)); border-radius: 3px; }
.dl-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.dl-item .thumb { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; position: relative; }
.dl-item .thumb .type { position: absolute; bottom: 2px; right: 2px; padding: 1px 4px; background: rgba(0,0,0,.72); color: #fff; font-family: var(--f-latin); font-size: 8px; font-weight: 700; border-radius: 3px; }
.dl-item .info { flex: 1; min-width: 0; }
.dl-item .info b { font-family: var(--f-telugu); font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dl-item .info small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 2px; }
.dl-item .info .status.done { color: var(--brand-green); font-weight: 700; }
.dl-item .info .status.progress { color: var(--brand-orange); font-weight: 700; }
.dl-progress { display: block; margin-top: 4px; height: 3px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.dl-progress .fill { display: block; height: 100%; background: var(--brand-orange); }
.dl-item .action .material-symbols-rounded { color: var(--text-secondary); font-size: 20px; padding: 4px; }

/* ---- Astrology ---- */
.astro-hero { text-align: center; padding: 16px 16px 14px; background: linear-gradient(135deg, #FFF9E6, #FFF3F3); border-radius: var(--r-2xl); margin-bottom: 12px; position: relative; overflow: hidden; }
[data-theme="dark"] .astro-hero { background: linear-gradient(135deg, #2A2410, #2A0F0F); }
.astro-hero small.date { font-family: var(--f-latin); font-size: 11px; font-weight: 700; color: #8A6A00; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="dark"] .astro-hero small.date { color: #FFD98A; }
.astro-hero b { display: block; font-family: var(--f-telugu); font-weight: 700; font-size: 22px; margin-top: 6px; color: var(--text-primary); }
.astro-hero .rashi-sub { font-family: var(--f-latin); font-size: 11.5px; color: var(--text-secondary); display: block; margin-top: 2px; }
.rashi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 6px 0 12px; }
.rashi-tile { padding: 8px 4px; text-align: center; background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-md); cursor: pointer; }
.rashi-tile.selected { border-color: var(--brand-red); background: var(--brand-red-soft); }
.rashi-tile .icon { font-size: 18px; line-height: 1; }
.rashi-tile small { display: block; font-family: var(--f-telugu); font-size: 10px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
.rashi-tile.selected small { color: var(--brand-red); }
.astro-card { padding: 12px 14px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); margin-bottom: 8px; }
.astro-card b { display: block; font-family: var(--f-latin); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A6A00; margin-bottom: 6px; }
[data-theme="dark"] .astro-card b { color: #FFD98A; }
.astro-card p { font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.55; color: var(--text-primary); margin: 0; }
.astro-lucky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.astro-lucky > div { padding: 10px 6px; text-align: center; background: var(--astro-soft); border-radius: var(--r-md); }
[data-theme="dark"] .astro-lucky > div { background: #2A2410; }
.astro-lucky small { font-family: var(--f-latin); font-size: 9px; color: #8A6A00; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; display: block; }
[data-theme="dark"] .astro-lucky small { color: #FFD98A; }
.astro-lucky b { font-family: var(--f-telugu); font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; margin-top: 3px; }

/* ---- Cinema ---- */
.movie-featured { position: relative; height: 190px; margin: 0 0 12px; border-radius: var(--r-xl); overflow: hidden; color: #fff; background: linear-gradient(135deg, #1a0033, #3A2A9A 45%, #E60000); }
.movie-featured::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%); }
.movie-featured > * { position: relative; z-index: 1; }
.movie-featured .top-row { padding: 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.movie-featured .rating { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); border-radius: 12px; font-family: var(--f-latin); font-size: 11px; font-weight: 700; }
.movie-featured .rating .material-symbols-rounded { font-size: 12px; color: #F5B800; font-variation-settings: 'FILL' 1; }
.movie-featured .badge { background: var(--brand-red); font-size: 9px; padding: 4px 8px; }
.movie-featured .info { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.movie-featured .info b { display: block; font-family: var(--f-latin); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.movie-featured .info small { display: block; font-family: var(--f-latin); font-size: 11px; opacity: .9; margin-top: 3px; }
.movie-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.movie-strip::-webkit-scrollbar { display: none; }
.movie-poster { flex-shrink: 0; width: 96px; }
.movie-poster .poster { width: 96px; height: 132px; border-radius: var(--r-md); position: relative; overflow: hidden; }
.movie-poster .rank { position: absolute; left: 4px; top: 4px; padding: 2px 6px; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); color: #fff; font-family: var(--f-latin); font-size: 10px; font-weight: 800; border-radius: 4px; }
.movie-poster .rating-tag { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; background: rgba(0,0,0,.75); color: #F5B800; font-family: var(--f-latin); font-size: 9px; font-weight: 700; border-radius: 3px; display: inline-flex; align-items: center; gap: 2px; }
.movie-poster b { display: block; font-family: var(--f-telugu); font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin-top: 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.movie-poster small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); display: block; }

/* ---- Cricket ---- */
.match-hero { padding: 14px 16px; background: linear-gradient(135deg, #075B45, #0EA271); color: #fff; border-radius: var(--r-xl); margin-bottom: 12px; position: relative; overflow: hidden; }
.match-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(200px 100px at 90% 20%, rgba(255,255,255,.15), transparent 60%); }
.match-hero > * { position: relative; z-index: 1; }
.match-hero .header { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-latin); font-size: 10.5px; opacity: .95; margin-bottom: 10px; }
.match-hero .live-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(255,255,255,.25); border-radius: var(--r-pill); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.match-hero .live-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.team-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.team-row .team { display: flex; align-items: center; gap: 8px; }
.team-flag { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-family: var(--f-latin); font-weight: 800; font-size: 10px; }
.team-name { font-family: var(--f-latin); font-weight: 700; font-size: 13px; }
.team-score { font-family: var(--f-latin); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.team-score small { font-size: 11px; opacity: .85; font-weight: 600; margin-left: 4px; }
.match-status { text-align: center; padding: 8px 0 2px; font-family: var(--f-latin); font-size: 11px; font-weight: 700; opacity: .95; letter-spacing: .02em; }
.batsmen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.batsmen-row .box { padding: 8px 10px; background: var(--surface-alt); border-radius: var(--r-md); }
.batsmen-row .box small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.batsmen-row .box b { display: block; font-family: var(--f-latin); font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 3px; }
.batsmen-row .box .runs { font-family: var(--f-latin); font-size: 14px; font-weight: 800; }
.comm-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); align-items: flex-start; }
.comm-over { font-family: var(--f-latin); font-weight: 800; font-size: 11px; color: var(--brand-red); min-width: 34px; }
.comm-text { flex: 1; font-family: var(--f-telugu); font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.comm-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-family: var(--f-latin); font-size: 10px; font-weight: 800; margin-right: 4px; letter-spacing: .04em; }
.comm-badge.four { background: #FFF3F3; color: var(--brand-red); }
.comm-badge.six { background: #FFF5EE; color: var(--brand-orange); }
.comm-badge.wicket { background: #FDECEA; color: #8A0000; }
.comm-badge.six.dot { background: var(--surface-alt); color: var(--text-secondary); }
[data-theme="dark"] .comm-badge.four { background: #2A0F0F; }
[data-theme="dark"] .comm-badge.six { background: #2A1509; }

/* ---- Jobs ---- */
.job-featured { padding: 14px; background: linear-gradient(135deg, #1D3A8A, #3A65E0); color: #fff; border-radius: var(--r-xl); margin-bottom: 12px; position: relative; overflow: hidden; }
.job-featured::after { content: ''; position: absolute; inset: 0; background: radial-gradient(200px 100px at 90% 20%, rgba(255,255,255,.2), transparent 60%); }
.job-featured > * { position: relative; z-index: 1; }
.job-featured b { font-family: var(--f-latin); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .95; display: block; }
.job-featured h3 { font-family: var(--f-latin); font-weight: 800; font-size: 17px; margin: 4px 0 4px; letter-spacing: -.01em; }
.job-featured small { font-family: var(--f-latin); font-size: 11px; opacity: .95; display: block; }
.job-card { display: flex; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); margin-bottom: 8px; }
.job-logo { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-family: var(--f-latin); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.job-info { flex: 1; min-width: 0; }
.job-info b { display: block; font-family: var(--f-latin); font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.job-company { display: block; font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }
.job-meta span { display: inline-flex; align-items: center; gap: 3px; }
.job-meta .material-symbols-rounded { font-size: 12px; }
.job-salary { display: block; font-family: var(--f-latin); font-weight: 800; font-size: 11.5px; color: var(--brand-green); margin-top: 4px; }

/* Job categories */
.jobcat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 12px; }
.jobcat { padding: 10px 4px; text-align: center; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md); cursor: pointer; }
.jobcat .material-symbols-rounded { font-size: 20px; color: var(--brand-red); }
.jobcat small { display: block; font-family: var(--f-telugu); font-size: 10px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }

/* Job detail */
.jobd-hero { padding: 16px; background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft)); border-radius: var(--r-xl); margin-bottom: 12px; }
[data-theme="dark"] .jobd-hero { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.jobd-hero .company-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jobd-hero .job-logo { box-shadow: var(--e1); }
.jobd-hero .company-row div b { font-family: var(--f-latin); font-size: 13px; font-weight: 700; display: block; color: var(--text-primary); }
.jobd-hero .company-row div small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }
.jobd-hero h2 { font-family: var(--f-latin); font-size: 18px; font-weight: 800; margin: 4px 0 6px; letter-spacing: -.01em; color: var(--text-primary); line-height: 1.25; }
.jobd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.jobd-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--divider); font-family: var(--f-latin); font-size: 12px; }
.jobd-detail-row span { color: var(--text-secondary); }
.jobd-detail-row b { color: var(--text-primary); font-weight: 700; }
.jobd-section { padding: 10px 0; }
.jobd-section h5 { font-family: var(--f-latin); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; }
.jobd-section p { font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.6; color: var(--text-primary); margin: 0 0 4px; }
.jobd-section ul { padding-left: 18px; margin: 0; }
.jobd-section li { font-family: var(--f-telugu); font-size: 12.5px; line-height: 1.7; color: var(--text-primary); }
.jobd-cta { display: flex; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--divider); margin-top: 12px; }
.jobd-cta .btn { flex: 1; }

/* Local alerts (Module 05) */
.alert-hero { padding: 12px 14px; background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft)); border-radius: var(--r-lg); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
[data-theme="dark"] .alert-hero { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.alert-hero .material-symbols-rounded { font-size: 22px; color: var(--brand-red); }
.alert-hero b { font-family: var(--f-telugu); font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; }
.alert-hero small { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }

/* ============================================================
   PHASE 3 · P2 SCREENS
   Permissions · Trending topic · Streak · Refer · Promo ·
   Chromecast · Audio player · Live chat · Empty & Error states
   ============================================================ */

/* ---- Permission ask ---- */
.perm-body { flex: 1; display: flex; flex-direction: column; padding: 0 20px 20px; }
.perm-hero { text-align: center; padding: 12px 0 8px; }
.perm-icon { width: 100px; height: 100px; margin: 0 auto 18px; border-radius: 28px; background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft)); display: grid; place-items: center; }
[data-theme="dark"] .perm-icon { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.perm-icon .material-symbols-rounded { font-size: 50px; color: var(--brand-red); font-variation-settings: 'FILL' 1; }
.perm-hero h2 { font-family: var(--f-latin); font-weight: 800; font-size: 21px; margin: 0 0 6px; letter-spacing: -.01em; color: var(--text-primary); }
.perm-hero p { font-family: var(--f-telugu); font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; padding: 0 6px; }
.perm-benefits { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.perm-benefit { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--r-md); }
.perm-benefit .material-symbols-rounded { color: var(--brand-green); font-size: 20px; flex-shrink: 0; }
.perm-benefit b { font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700; color: var(--text-primary); display: block; }
.perm-benefit small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 2px; line-height: 1.4; }
.perm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* ---- Trending topic detail ---- */
.topic-hero { padding: 40px 16px 14px; background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft)); border-bottom: 1px solid var(--divider); position: relative; overflow: hidden; }
[data-theme="dark"] .topic-hero { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.topic-hero .top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; z-index: 1; }
.topic-hero .back { margin: 0; background: rgba(255,255,255,.7); }
[data-theme="dark"] .topic-hero .back { background: rgba(255,255,255,.1); }
.topic-hero h1 { font-family: var(--f-latin); font-weight: 900; font-size: 26px; margin: 4px 0 8px; letter-spacing: -.02em; color: var(--brand-red); }
.topic-hero .meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); }
.topic-hero .meta > span { display: inline-flex; align-items: center; gap: 4px; }
.topic-hero .meta b { color: var(--text-primary); font-weight: 700; }
.topic-hero .meta .trend-up { color: var(--brand-green); font-weight: 800; }

/* ---- Reading streak ---- */
.streak-hero { text-align: center; padding: 20px 16px; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); color: #fff; border-radius: var(--r-2xl); margin-bottom: 14px; position: relative; overflow: hidden; }
.streak-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(200px 100px at 80% 20%, rgba(255,255,255,.2), transparent 60%); }
.streak-hero > * { position: relative; z-index: 1; }
.streak-hero .flame { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.streak-hero b { display: block; font-family: var(--f-latin); font-weight: 900; font-size: 44px; letter-spacing: -.03em; line-height: 1; }
.streak-hero .label { font-family: var(--f-latin); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .95; margin: 4px 0 14px; display: block; font-weight: 700; }
.streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.streak-day { aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.15); display: grid; place-items: center; font-family: var(--f-latin); font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75); }
.streak-day.done { background: rgba(255,255,255,.92); color: var(--brand-red); }
.streak-day.today { background: #fff; color: var(--brand-red); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.4); }
.streak-day.future { color: rgba(255,255,255,.4); }

/* Badges grid */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.badge-tile { padding: 12px 4px; text-align: center; background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-lg); }
.badge-tile.earned { border-color: var(--brand-orange); background: var(--brand-orange-soft); }
[data-theme="dark"] .badge-tile.earned { background: #2A1509; }
.badge-tile.locked { opacity: .55; }
.badge-tile .icon { width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; }
.badge-tile.earned .icon { background: linear-gradient(135deg, var(--brand-orange), #F5B800); color: #fff; }
.badge-tile.locked .icon { background: var(--surface-alt); color: var(--text-secondary); }
.badge-tile .icon .material-symbols-rounded { font-size: 22px; }
.badge-tile b { display: block; font-family: var(--f-latin); font-size: 10.5px; font-weight: 700; color: var(--text-primary); }
.badge-tile small { font-family: var(--f-latin); font-size: 9px; color: var(--text-secondary); display: block; margin-top: 2px; }

/* Streak metrics */
.streak-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 0; margin-bottom: 8px; }
.streak-stats > div { text-align: center; padding: 0 4px; }
.streak-stats > div + div { border-left: 1px solid var(--divider); }
.streak-stats b { font-family: var(--f-latin); font-weight: 800; font-size: 16px; display: block; color: var(--text-primary); }
.streak-stats small { font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; display: block; }

/* ---- Refer friends ---- */
.refer-hero { text-align: center; padding: 20px 16px; background: linear-gradient(135deg, var(--politics-soft), var(--business-soft)); border-radius: var(--r-2xl); margin-bottom: 14px; }
[data-theme="dark"] .refer-hero { background: linear-gradient(135deg, #10152A, #0A2A21); }
.refer-hero .icon-wrap { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: var(--e2); }
.refer-hero .icon-wrap .material-symbols-rounded { font-size: 30px; color: var(--brand-red); }
.refer-hero h2 { font-family: var(--f-latin); font-weight: 800; font-size: 18px; margin: 0 0 4px; }
.refer-hero p { font-family: var(--f-telugu); font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.5; }
.refer-code { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-radius: var(--r-md); font-family: 'JetBrains Mono','SF Mono',ui-monospace,monospace; font-weight: 800; font-size: 15px; letter-spacing: .18em; color: var(--text-primary); border: 1.5px dashed var(--brand-red); }
.refer-code .material-symbols-rounded { font-size: 16px; color: var(--brand-red); cursor: pointer; }
.refer-stat { padding: 12px; background: var(--surface-alt); border-radius: var(--r-lg); display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.refer-stat b { font-family: var(--f-latin); font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; }
.refer-stat small { display: block; font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); }
.refer-stat .amt { font-family: var(--f-latin); font-weight: 800; font-size: 18px; color: var(--brand-green); }
.refer-how { padding: 10px 0; }
.refer-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.refer-step .num { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-red); color: #fff; display: grid; place-items: center; font-family: var(--f-latin); font-weight: 800; font-size: 11px; flex-shrink: 0; }
.refer-step b { font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700; color: var(--text-primary); display: block; }
.refer-step small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 1px; }

/* ---- Promo code ---- */
.promo-input { display: flex; gap: 8px; margin: 8px 0 14px; }
.promo-input .input { flex: 1; }
.promo-input .input input { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-family: 'JetBrains Mono',ui-monospace,monospace; }
.promo-input button { padding: 12px 18px; border-radius: var(--r-pill); border: none; background: var(--brand-red); color: #fff; font-family: var(--f-latin); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.promo-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand-green-soft); border: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent); border-radius: var(--r-lg); margin-bottom: 12px; }
[data-theme="dark"] .promo-status { background: #0F2A0A; }
.promo-status .material-symbols-rounded { color: var(--brand-green); font-size: 22px; }
.promo-status b { font-family: var(--f-latin); font-size: 12.5px; font-weight: 800; color: var(--brand-green); display: block; }
.promo-status small { font-family: var(--f-latin); font-size: 10.5px; color: var(--brand-green); opacity: .9; display: block; margin-top: 2px; }
.promo-list { display: flex; flex-direction: column; gap: 8px; }
.promo-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px dashed var(--divider); border-radius: var(--r-lg); }
.promo-list-item .code { padding: 4px 8px; background: var(--brand-red-soft); color: var(--brand-red); font-family: 'JetBrains Mono',ui-monospace,monospace; font-size: 11px; font-weight: 800; letter-spacing: .1em; border-radius: 4px; }
.promo-list-item .info { flex: 1; min-width: 0; }
.promo-list-item .info b { font-family: var(--f-telugu); font-size: 12.5px; font-weight: 700; display: block; }
.promo-list-item .info small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; }

/* ---- Chromecast picker ---- */
.cast-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.cast-item .device-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-alt); color: var(--text-primary); display: grid; place-items: center; flex-shrink: 0; }
.cast-item .device-icon .material-symbols-rounded { font-size: 22px; }
.cast-item b { font-family: var(--f-telugu); font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; }
.cast-item small { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); display: block; margin-top: 1px; }
.cast-item .status.connected { color: var(--brand-green); font-weight: 700; }
.cast-item.selected { background: var(--brand-red-soft); }
[data-theme="dark"] .cast-item.selected { background: #2A0F0F; }
.cast-item.selected .device-icon { background: var(--brand-red); color: #fff; }
.cast-item .info { flex: 1; min-width: 0; }
.cast-empty { padding: 40px 20px; text-align: center; }
.cast-empty .material-symbols-rounded { font-size: 36px; color: var(--text-secondary); }
.cast-empty small { display: block; font-family: var(--f-latin); font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; }

/* ---- Audio player ---- */
.screen-body.audio-player { background: linear-gradient(180deg, #1a0808 0%, #000 100%); color: #fff; padding: 0; }
.audio-canvas { flex: 1; display: flex; flex-direction: column; padding: 40px 20px 24px; }
.audio-top { display: flex; justify-content: space-between; align-items: center; }
.audio-top .icon-btn { background: rgba(255,255,255,.1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.audio-top .icon-btn .material-symbols-rounded { font-size: 18px; }
.audio-cover { width: 172px; height: 172px; margin: 20px auto 22px; border-radius: 20px; background: linear-gradient(135deg, #8A6A00, #F5B800); box-shadow: 0 20px 40px rgba(245,184,0,.35); display: grid; place-items: center; color: #fff; font-family: var(--f-latin); font-weight: 900; font-size: 38px; letter-spacing: -.03em; }
.audio-info { text-align: center; margin-bottom: 20px; }
.audio-info b { font-family: var(--f-latin); font-weight: 800; font-size: 17px; color: #fff; display: block; letter-spacing: -.01em; }
.audio-info small { font-family: var(--f-latin); font-size: 11.5px; color: rgba(255,255,255,.65); display: block; margin-top: 3px; }
.audio-info .chapter { display: inline-block; margin-top: 6px; padding: 2px 8px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); font-family: var(--f-latin); font-size: 10px; font-weight: 700; }
.audio-scrubber { margin-bottom: 20px; }
.audio-scrubber .track { height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; position: relative; }
.audio-scrubber .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-orange); border-radius: 2px; width: 42%; }
.audio-scrubber .fill::after { content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.audio-times { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--f-latin); font-size: 10.5px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.audio-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 12px; }
.audio-controls button { background: transparent; border: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.audio-controls .material-symbols-rounded { font-size: 26px; }
.audio-controls .play-btn { width: 62px; height: 62px; border-radius: 50%; background: #fff; color: #000; }
.audio-controls .play-btn .material-symbols-rounded { font-size: 30px; }
.audio-extras { display: flex; justify-content: space-around; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.audio-extras button { background: transparent; border: none; color: rgba(255,255,255,.85); display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.audio-extras .material-symbols-rounded { font-size: 18px; }
.audio-extras small { font-family: var(--f-latin); font-size: 9.5px; opacity: .95; }

/* ---- Live TV chat (side panel style) ---- */
.chat-hero { padding: 40px 12px 0; }
.chat-preview { aspect-ratio: 16/10; margin: 0 -16px 0; background: linear-gradient(135deg, #111, #3a0000); position: relative; }
.chat-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.7)); }
.chat-preview .live-tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; background: var(--brand-red); color: #fff; border-radius: 4px; font-family: var(--f-latin); font-size: 9px; font-weight: 800; letter-spacing: .06em; display: flex; align-items: center; gap: 4px; }
.chat-preview .live-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.chat-preview .info { position: absolute; bottom: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-family: var(--f-latin); font-size: 10.5px; font-weight: 600; }
.chat-preview .info small { opacity: .85; }
.chat-list { padding: 10px 4px; overflow-y: auto; }
.chat-msg { display: flex; gap: 8px; padding: 5px 0; align-items: flex-start; }
.chat-msg .avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.chat-msg .msg-body { flex: 1; min-width: 0; }
.chat-msg .msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.chat-msg .msg-head b { font-family: var(--f-latin); font-size: 11px; font-weight: 700; color: var(--brand-red); }
.chat-msg .msg-head small { font-family: var(--f-latin); font-size: 9.5px; color: var(--text-secondary); }
.chat-msg p { font-family: var(--f-telugu); font-size: 12px; color: var(--text-primary); margin: 0; line-height: 1.4; }
.chat-msg.moderator .msg-head b { color: var(--brand-green); }
.chat-msg.moderator .msg-head b::before { content: '★ '; }
.chat-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--divider); }
.chat-bar .input { flex: 1; padding: 6px 12px; background: var(--surface-alt); border-radius: var(--r-pill); }
.chat-bar .input input { border: none; outline: none; background: transparent; font-family: var(--f-telugu); font-size: 12px; width: 100%; }
.chat-bar .emoji-row { display: flex; gap: 4px; padding: 0 12px 8px; }
.chat-bar .emoji { font-size: 16px; padding: 2px 4px; cursor: pointer; }

/* ---- Empty & error states (full-screen) ---- */
.state-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.state-hero .state-icon { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-alt); }
.state-hero .state-icon .material-symbols-rounded { font-size: 44px; color: var(--text-secondary); }
.state-hero.error .state-icon { background: var(--brand-red-soft); }
.state-hero.error .state-icon .material-symbols-rounded { color: var(--brand-red); }
.state-hero.info .state-icon { background: var(--brand-orange-soft); }
.state-hero.info .state-icon .material-symbols-rounded { color: var(--brand-orange); }
.state-hero.warn .state-icon { background: var(--astro-soft); }
.state-hero.warn .state-icon .material-symbols-rounded { color: #8A6A00; }
[data-theme="dark"] .state-hero.error .state-icon { background: #2A0F0F; }
[data-theme="dark"] .state-hero.info .state-icon { background: #2A1509; }
[data-theme="dark"] .state-hero.warn .state-icon { background: #2A2410; }
.state-hero h2 { font-family: var(--f-latin); font-weight: 800; font-size: 20px; color: var(--text-primary); margin: 6px 0 0; letter-spacing: -.01em; }
.state-hero > p { font-family: var(--f-telugu); font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; max-width: 260px; }
.state-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 8px; }
.state-hero .tiny { font-family: var(--f-latin); font-size: 10.5px; color: var(--text-secondary); margin-top: 4px; }
.state-hero .tiny b { color: var(--text-primary); font-family: 'JetBrains Mono',ui-monospace,monospace; }

/* Update card */
.update-card { padding: 14px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); margin-top: 12px; width: 100%; text-align: left; }
.update-card h5 { font-family: var(--f-latin); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; }
.update-card ul { list-style: none; padding: 0; margin: 0; }
.update-card li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-family: var(--f-telugu); font-size: 12px; line-height: 1.4; color: var(--text-primary); }
.update-card li .material-symbols-rounded { color: var(--brand-green); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   FULL-APP ALIGNMENT AUDIT · 70 SCREENS
   Cross-cutting fixes applied after end-to-end visual review.
   Each rule addresses a specific inconsistency identified in
   walk-through of every screen module 01 → 10.
   ============================================================ */

/* [01] App-bar plain uniform height across all 40+ screens using it */
.app-bar.plain { min-height: 48px; padding: 10px 16px 12px; box-sizing: border-box; align-items: center; }
.app-bar.plain b { font-size: 16px; line-height: 1.2; letter-spacing: -.005em; }
.app-bar { padding: 8px 16px 10px; align-items: center; }

/* [02] Section caps: consistent rhythm; tighter when following an app-bar */
.sec-cap { margin: 18px 0 8px; line-height: 1.2; }
.app-bar + .sec-cap, .app-bar.plain + .sec-cap { margin-top: 10px; }
.app-bar.plain + .tabs.plain { margin-top: 6px; }

/* [03] Setting rows: unified 52px touch target, icon column always 24px */
.setting { min-height: 52px; align-items: center; padding: 12px 4px; box-sizing: border-box; }
.setting > .material-symbols-rounded { font-size: 22px; width: 24px; text-align: center; flex-shrink: 0; }

/* [04] Card meta lines uniform (was mixing 10.5 / 11 / 11.5 across variants) */
.ncard-meta { font-family: var(--f-latin); font-size: 11px; color: var(--text-secondary); line-height: 1.3; letter-spacing: 0; }

/* [05] Card headline truncation consistent across all 9 card variants */
.ncard-body h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard.hero-card h3 { -webkit-line-clamp: 2; }
.ncard.horizontal .ncard-body h3 { -webkit-line-clamp: 3; }
.ncard.horizontal .ncard-body { display: flex; flex-direction: column; justify-content: center; }

/* [06] Chip content stays on one line (was wrapping "Popular sectors" chips) */
.chip { white-space: nowrap; }

/* [07] Rail head title + View-all aligned to shared baseline */
.rail-head { align-items: baseline; }
.rail-head b { line-height: 1.2; }
.rail-head a { line-height: 1.2; white-space: nowrap; }

/* [08] Back buttons: uniform 40dp box + flex-shrink so titles never crowd them */
.back { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; }
.back .material-symbols-rounded { font-size: 22px; }
.app-bar.plain > .back { margin: 0; }

/* [09] Sheet panels: uniform max-height (was mixing 82/84/88%) */
.sheet-panel { max-height: 84%; box-sizing: border-box; }
.sheet-panel.tall { max-height: 92%; }

/* [10] Author cover back-button vertical alignment across 3 hero variants */
.author-cover .back.light, .article-hero .back.light,
.player .back.light, .dist-hero .back.light, .shorts-bg .back.light { margin: 0; }

/* [11] Streak calendar: 7 exactly-equal columns (minmax prevents overflow) */
.streak-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; }
.streak-day { min-height: 32px; }
.streak-day.today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(255,255,255,.4); }

/* [12] Badge tiles: uniform min-height prevents ragged 2-row grid */
.badge-tile { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }

/* [13] Rashi tiles: uniform min-height (was collapsing to icon height) */
.rashi-tile { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }

/* [14] Cast items: info column can shrink for long device names */
.cast-item .info { flex: 1; min-width: 0; }

/* [15] Notification icon column uniform 40dp (list left rail alignment) */
.notif > .material-symbols-rounded { flex-shrink: 0; width: 40px; height: 40px; box-sizing: border-box; }
.notif > div { flex: 1; min-width: 0; }

/* [16] Bottom-nav labels never wrap — ellipsis on narrow phones */
.bn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* [17] Stacked block buttons get uniform 8px gap (was inconsistent) */
.btn-block + .btn-block { margin-top: 8px; }
.state-actions .btn { min-height: 44px; }

/* [18] Screen-body.pad guaranteed status-bar clearance */
.screen-body.pad { padding-top: 40px; }
.screen-body.pad.login { padding-top: 40px; }

/* [19] Featured video play button uniform size (was 60/62/64) */
.featured-video .play.xl { font-size: 62px; }
.player .play.xl { font-size: 64px; }

/* [20] Comments: reply avatar smaller to match indent */
.comment > .avatar { width: 32px; height: 32px; }
.comment.reply > .avatar { width: 28px; height: 28px; }
.comment.reply { border-left: none; }

/* [21] Compose bar always docks at bottom of comments screen */
.compose-bar { flex-shrink: 0; }
.compose-bar > .avatar { flex-shrink: 0; }
.compose-bar > .material-symbols-rounded { flex-shrink: 0; }

/* [22] Filter sheet last-section has no divider (cleaner bottom edge) */
.filter-section:last-of-type { border-bottom: none; }

/* [23] Author hero name row line-height for badge inline alignment */
.author-hero .name-row { line-height: 1.2; }

/* [24] EPG rows: vertical center for channel + program strip */
.epg-row { align-items: center; }
.epg-programs { align-items: stretch; }

/* ============================================================
   LOGIN · REDESIGN (screen 09)
   Gradient hero + rating badge · floating card · split
   country-picker + phone input · trust badges + fine print
   ============================================================ */

.screen-body.login-v2 {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.screen-body.login-v2::before { color: #fff; }

.login-hero {
  position: relative;
  padding: 40px 20px 40px;
  color: #fff; overflow: hidden;
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center;
  flex-shrink: 0;
}
.login-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(360px 200px at 20% 30%, rgba(255,107,0,.45), transparent 60%),
    radial-gradient(280px 200px at 80% 80%, rgba(19,136,8,.28), transparent 60%),
    linear-gradient(135deg, #7A0000 0%, #E60000 45%, #FF6B00 100%);
}
.login-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 100px at 50% 100%, rgba(0,0,0,.15), transparent 60%);
  pointer-events: none;
}

.login-rating {
  position: absolute; top: 44px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill);
  font-family: var(--f-latin); font-size: 10px; font-weight: 800;
  color: #fff; letter-spacing: .02em;
}
.login-rating .material-symbols-rounded { font-size: 12px; color: #F5B800; font-variation-settings: 'FILL' 1; }

.login-brand { position: relative; z-index: 2; text-align: center; }
.login-logo {
  display: inline-block;
  padding: 10px 18px;
  margin: 4px auto 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.4);
}
.login-logo img { display: block; height: 44px; width: auto; }
.login-brand .name {
  display: block;
  font-family: var(--f-latin); font-weight: 900;
  font-size: 22px; color: #fff;
  letter-spacing: -.02em; line-height: 1.1;
}
.login-brand .name span { color: #FFE0B0; }
.login-tagline {
  font-family: var(--f-telugu); font-size: 12.5px;
  color: rgba(255,255,255,.92);
  margin-top: 10px; letter-spacing: .01em;
}
.login-stats {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 14px;
  font-family: var(--f-latin); font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.82); letter-spacing: .04em;
}
.login-stats > span { display: inline-flex; align-items: center; gap: 4px; }
.login-stats b { color: #fff; font-weight: 800; }

/* Overlapping card */
.login-card {
  flex: 1;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  margin-top: -20px;
  padding: 22px 20px 18px;
  position: relative;
  z-index: 3;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.login-card h3 {
  font-family: var(--f-telugu); font-weight: 700;
  font-size: 22px; margin: 0 0 4px;
  color: var(--text-primary); letter-spacing: -.01em;
}
.login-card > p.sub {
  font-family: var(--f-telugu); font-size: 12.5px;
  color: var(--text-secondary); margin: 0 0 16px; line-height: 1.4;
}

/* Split phone input */
.phone-input {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.country-picker {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 10px 12px 12px;
  background: var(--surface-alt);
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  font-family: var(--f-latin); font-weight: 700; font-size: 14px;
  cursor: pointer; color: var(--text-primary);
  flex-shrink: 0;
}
.country-picker .material-symbols-rounded { font-size: 18px; color: var(--text-secondary); }
.country-picker .flag-emoji { font-size: 15px; line-height: 1; }
.phone-input .input {
  flex: 1;
  padding: 4px 14px;
  background: var(--surface-alt);
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
}
.phone-input .input:focus-within { border-color: var(--brand-red); background: var(--surface); }
.phone-input .input input {
  border: none; outline: none; background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .12em;
  width: 100%; color: var(--text-primary);
}
.phone-input .input input::placeholder { color: var(--text-secondary); font-weight: 500; letter-spacing: .12em; }

/* OR inline divider */
.or-inline { text-align: center; position: relative; margin: 14px 0 10px; }
.or-inline::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--divider); }
.or-inline span { position: relative; background: var(--bg); padding: 0 12px; font-family: var(--f-latin); font-size: 10px; color: var(--text-secondary); letter-spacing: .12em; font-weight: 700; }

/* Trust footer */
.login-trust {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--divider);
}
.login-trust > div {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-latin); font-size: 10px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: .02em;
}
.login-trust .material-symbols-rounded { font-size: 13px; color: var(--brand-green); }

.login-card .fine {
  font-family: var(--f-latin); font-size: 10.5px;
  color: var(--text-secondary); text-align: center;
  margin: 12px 0 0; line-height: 1.5;
}
.login-card .fine a { color: var(--brand-red); font-weight: 700; }

/* ============================================================
   OTP · REDESIGN (screen 10)
   Premium redesign: hero icon · edit-chip phone · big OTP boxes ·
   auto-detect SMS · 3-channel resend · trust footer
   ============================================================ */

/* ==============================================================
   OTP v2 · redesigned verification screen
   Minimal topbar · big centered heading · underline-style boxes ·
   auto-detect card with animated progress · trust footer
   ============================================================== */
.screen-body.otp-v2 { padding: 20px 20px 22px; }
.otp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.otp-topbar .back.sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-alt);
  display: grid; place-items: center;
  border: none; cursor: pointer;
}
.otp-topbar .back.sm .material-symbols-rounded { font-size: 20px; color: var(--text-primary); }
.otp-step {
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary);
  padding: 4px 10px; background: var(--surface-alt);
  border-radius: var(--r-pill);
}

.otp-head { text-align: left; margin: 4px 0 26px; }
.otp-head h1 {
  font-family: var(--f-latin); font-weight: 900;
  font-size: 26px; letter-spacing: -.025em; line-height: 1.15;
  color: var(--text-primary); margin: 0 0 8px;
}
.otp-sub {
  font-family: var(--f-latin); font-size: 13.5px;
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.otp-sub b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700;
  color: var(--text-primary); letter-spacing: .04em;
}
.otp-edit {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-red-soft); color: var(--brand-red);
  cursor: pointer;
}
[data-theme="dark"] .otp-edit { background: #2A0F0F; }
.otp-edit .material-symbols-rounded { font-size: 14px; }

/* v2 OTP boxes — underline style with strong focus state */
.otp-row.v2 {
  display: flex; gap: 8px; margin: 0 0 26px;
}
.otp-row.v2 .otp-box {
  flex: 1; height: 64px;
  background: var(--surface);
  border: none; border-bottom: 2.5px solid var(--divider);
  border-radius: 0;
  font-family: var(--f-latin); font-weight: 900;
  font-size: 28px; letter-spacing: -.01em;
  color: var(--text-primary);
  outline: none;
  transition: border-color .18s var(--ease-standard),
              background .18s var(--ease-standard),
              transform .18s var(--ease-standard);
}
.otp-row.v2 .otp-box.filled {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--brand-red) 8%, transparent) 100%);
}
.otp-row.v2 .otp-box.focus {
  border-bottom-color: var(--brand-red);
  border-bottom-width: 3px;
  background: color-mix(in srgb, var(--brand-red) 5%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-red) 22%, transparent);
  caret-color: var(--brand-red);
}

/* Auto-detect card with animated progress bar */
.otp-autodetect {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 16px;
  background: var(--brand-green-soft);
  border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
}
[data-theme="dark"] .otp-autodetect { background: #0F2A0A; }
.otp-autodetect-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-green);
  display: grid; place-items: center;
  color: #fff;
}
.otp-autodetect-icon .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 1; }
.otp-autodetect-body { flex: 1; display: block; }
.otp-autodetect-body b {
  display: block;
  font-family: var(--f-latin); font-weight: 700; font-size: 13px;
  color: var(--brand-green); letter-spacing: -.005em;
}
.otp-autodetect-body small {
  display: block; margin-top: 2px;
  font-family: var(--f-latin); font-size: 11px;
  color: color-mix(in srgb, var(--brand-green) 80%, var(--text-secondary));
}
.otp-autodetect-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: color-mix(in srgb, var(--brand-green) 15%, transparent);
  overflow: hidden;
}
.otp-autodetect-bar .fill {
  display: block; width: 40%; height: 100%;
  background: var(--brand-green);
  animation: otp-scan 1.6s var(--ease-standard) infinite;
}
@keyframes otp-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

.otp-resend-line {
  text-align: center; margin: 18px 0 0;
  font-family: var(--f-latin); font-size: 12.5px;
  color: var(--text-secondary);
}
.otp-resend-line b {
  color: var(--brand-red); font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .02em; margin-left: 4px;
}

.otp-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px;
  font-family: var(--f-latin); font-size: 11px;
  color: var(--text-secondary); letter-spacing: .02em;
}
.otp-trust .material-symbols-rounded {
  font-size: 14px; color: var(--brand-green);
  font-variation-settings: 'FILL' 1;
}

/* ==== Legacy OTP hero (kept as fallback for any other screens still using it) ==== */
.otp-hero { text-align: center; margin: 0 0 18px; }
.otp-icon {
  width: 72px; height: 72px; margin: 4px auto 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-red-soft), var(--brand-orange-soft));
  display: grid; place-items: center;
  position: relative;
}
[data-theme="dark"] .otp-icon { background: linear-gradient(135deg, #2A0F0F, #2A1509); }
.otp-icon .material-symbols-rounded {
  font-size: 38px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variation-settings: 'FILL' 1;
}
.otp-icon::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-green);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 3px rgba(19,136,8,.25);
  animation: pulse 2s infinite;
}
.otp-hero h3 {
  font-family: var(--f-latin); font-weight: 800;
  font-size: 22px; letter-spacing: -.02em;
  color: var(--text-primary); margin: 0 0 6px; text-align: center;
}
.otp-phone-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-latin); font-size: 13.5px;
  color: var(--text-secondary);
}
.otp-phone-row b {
  color: var(--text-primary); font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: .02em;
}
.otp-phone-row .edit-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 6px;
  background: var(--brand-red-soft); color: var(--brand-red);
  border-radius: var(--r-pill);
  font-family: var(--f-latin); font-size: 10.5px; font-weight: 700;
  cursor: pointer;
}
[data-theme="dark"] .otp-phone-row .edit-chip { background: #2A0F0F; }
.otp-phone-row .edit-chip .material-symbols-rounded { font-size: 12px; }

/* Bigger OTP boxes */
.otp-row.lg { gap: 6px; margin: 8px 0 4px; }
.otp-row.lg .otp-box {
  height: 56px;
  font-size: 22px;
  border-radius: var(--r-lg);
  border-width: 2px;
}
.otp-row.lg .otp-box.focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 15%, transparent);
}

/* Auto-detect SMS indicator */
.otp-detect {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--brand-green-soft);
  border: 1px solid color-mix(in srgb, var(--brand-green) 25%, transparent);
  border-radius: var(--r-pill);
  margin: 12px auto 0;
  font-family: var(--f-latin); font-size: 11.5px; font-weight: 600;
  color: var(--brand-green);
}
[data-theme="dark"] .otp-detect { background: #0F2A0A; }
.otp-detect-row { text-align: center; }
.otp-detect .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 22%, transparent);
  animation: pulse 1.6s infinite;
}

/* Resend channels */
.otp-resend-block { padding-top: 22px; }
.otp-resend-title {
  font-family: var(--f-latin); font-size: 11.5px; font-weight: 700;
  color: var(--text-secondary); text-align: center;
  margin: 0 0 10px; letter-spacing: .05em; text-transform: uppercase;
}
.otp-channels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.otp-channel {
  padding: 10px 4px;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: border-color .15s, transform .12s var(--ease-standard);
  font-family: inherit;
}
.otp-channel:hover { border-color: var(--brand-red); transform: translateY(-1px); }
.otp-channel.disabled { opacity: .55; cursor: not-allowed; }
.otp-channel.disabled:hover { border-color: var(--divider); transform: none; }
.otp-channel .material-symbols-rounded { font-size: 22px; color: var(--text-primary); }
.otp-channel.wa .material-symbols-rounded { color: #25D366; }
.otp-channel b {
  font-family: var(--f-latin); font-size: 11px; font-weight: 700;
  color: var(--text-primary); display: block; text-align: center;
  line-height: 1.2;
}
.otp-channel small {
  font-family: var(--f-latin); font-size: 9.5px; color: var(--text-secondary);
  display: block; text-align: center; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Trust footer */
.otp-trust {
  display: flex; justify-content: center; gap: 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--divider);
  margin-top: 12px;
}
.otp-trust span {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-latin); font-size: 10px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: .02em;
}
.otp-trust .material-symbols-rounded { font-size: 13px; color: var(--brand-green); }

/* --- Meta cleanup: prevent long publisher names from breaking layouts --- */
.dist-hero-info b, .cat-hero-info b, .topic-hero h1 { overflow-wrap: break-word; }
.author-hero .name-row b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- History rows: info gets proper flex-column so progress-bar hugs bottom --- */
.history-item .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.history-item .info b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Downloads rows: same treatment --- */
.dl-item { align-items: center; }
.dl-item .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* --- Chat message body can shrink for long messages --- */
.chat-msg { align-items: flex-start; }
.chat-msg .msg-body { flex: 1; min-width: 0; }
.chat-msg p { word-wrap: break-word; }

/* --- Screen-body.sub scrolls when content overflows --- */
.screen-body.sub { overflow-y: auto; }

/* --- Live timeline connector stops cleanly at last update --- */
.live-update { padding: 10px 0 12px 22px; }
.live-update:last-child { padding-bottom: 4px; }

/* --- Perm-screen actions always at bottom (flex-column push) --- */
.perm-body { flex: 1; }
.perm-actions { margin-top: auto; padding-top: 16px; }

/* --- Voice search transcript wraps cleanly --- */
.voice-transcript { padding: 0 12px; word-wrap: break-word; }

/* --- OTP row: equal width boxes (was 6 flex-1 items) — confirm no gap collapse --- */
.otp-row { align-items: stretch; }
.otp-box { min-width: 0; }

/* --- Refer code chip: readable padding on narrow phones --- */
.refer-code { padding: 10px 14px; font-size: 14px; }

/* --- Promo input: apply button never collapses --- */
.promo-input button { flex-shrink: 0; }

/* --- About items with lead-icon: consistent 24px column --- */
.about-item > .lead-icon { width: 24px; text-align: center; }
.about-item > .material-symbols-rounded:last-child { flex-shrink: 0; }

/* --- FAQ open state: consistent chevron rotation --- */
.faq-head .material-symbols-rounded { transition: transform .2s; }

/* --- Ensure short-mid text doesn't overflow side-actions column --- */
.short-mid { padding-right: 60px; }
.short-mid h2 { word-wrap: break-word; }

/* --- Editor's note quote character positioning stable --- */
.editor-note { padding-top: 10px; }

/* --- Trending item thumb never squishes --- */
.trend-item .thumb { flex-shrink: 0; }

/* --- Movie posters: uniform poster height (was 132px/136px/140px in different states) --- */
.movie-poster .poster { height: 132px; }

/* --- Job categories: uniform tile height --- */
.jobcat { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }

/* --- Match hero: numbers use tabular figures for score alignment --- */
.team-score, .match-status { font-variant-numeric: tabular-nums; }
.batsmen-row .runs { font-variant-numeric: tabular-nums; }

/* --- Comm-over column tabular for tidy alignment --- */
.comm-over { font-variant-numeric: tabular-nums; }

/* --- Cinema poster grid: consistent gap and alignment --- */
.movie-strip { align-items: flex-start; }

/* --- Live TV chat: preview aspect-ratio protects from expansion --- */
.chat-preview { flex-shrink: 0; }

/* --- Success screen: guarantee vertical centering when short --- */
.screen-body.success { padding: 40px 20px 20px; }
.success-body { flex: 1; }

/* --- Payment plan-summary: text never overflows --- */
.plan-summary { overflow: hidden; }

/* --- Manage sub plan-card: same --- */
.plan-card { overflow: hidden; }

/* --- Update card list gap tidy --- */
.update-card li { align-items: center; }

/* --- Empty/error state icons remain circular under all sizes --- */
.state-hero .state-icon { flex-shrink: 0; }

/* --- Ensure tabs.plain title items don't grow unevenly --- */
.tabs.plain { align-items: stretch; }
.tabs.plain .tab { line-height: 1.4; }


/* --- Ensure `.report-item` content stays vertically centered --- */
.report-item { align-items: flex-start; }
.report-item .radio { margin-top: 2px; }

/* --- Ensure `.recents` items always 44px min-height --- */
.recents > div { min-height: 44px; align-items: center; }

/* ============================================================
   AUDIT REFINEMENTS · Alignment & Consistency Fixes
   ============================================================ */

/* App bar: back button should not carry its default 16px bottom margin */
.app-bar.plain .back,
.search-bar .back,
.article-hero .back,
.player .back,
.short-top .back { margin-bottom: 0; }

/* App bar with back + title + action: consistent baseline */
.app-bar.plain { min-height: 44px; }
.app-bar.plain b { line-height: 1.2; }
.app-bar.plain > .material-symbols-rounded { flex-shrink: 0; }
.app-bar.plain > a { flex-shrink: 0; }

/* Bottom-nav is now a real flex sibling of .screen-scroll, so no reserve-padding hack needed. */
.screen-body.home .rail:last-of-type { margin-bottom: 12px; }
.screen-body.pad-t .video-grid { padding-bottom: 8px; }

/* Login screen: centered composition */
.screen-body.login { text-align: center; }
.screen-body.login .lg-title,
.screen-body.login .lg-sub { text-align: center; }
.screen-body.login .input { text-align: left; }

/* Language / Location: push CTA to bottom when short content */
.screen-body.pad { min-height: 100%; }

/* Location: give the district grid room to breathe before CTA */
.dist-grid { margin-bottom: 16px; }

/* Section captions: consistent leading */
.sec-cap { line-height: 1.2; }

/* Notifications: content column stacks cleanly */
.notif > div { min-width: 0; flex: 1; }
.notif small { display: block; margin-top: 2px; }

/* Author (article meta): tighter stack */
.author small { display: block; margin-top: 1px; }

/* Featured video / Live TV overlay text stacks */
.fv-info small, .player-bottom small { display: block; margin-top: 2px; }

/* Video grid: title spacing */
.vcard b { margin-top: 2px; }
.vcard small { display: block; margin-top: 2px; }

/* Live card overlays: consistent label spacing */
.live-card b { line-height: 1.3; }

/* Plans: numeric alignment */
.plan { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plan b, .plan .price, .plan small { display: block; text-align: center; }

/* Profile hero: crisp vertical rhythm */
.profile-hero { gap: 6px; }
.profile-hero small { margin-bottom: 4px; }

/* Profile stats: divider between columns */
.profile-stats > div + div { border-left: 1px solid var(--divider); }

/* Setting rows: touch target and vertical rhythm */
.setting { min-height: 52px; }
.setting > .material-symbols-rounded { flex-shrink: 0; width: 24px; text-align: center; }

/* Settings slider: fixed width block on the right */
.slider { flex-shrink: 0; }

/* Onboarding: stable dot heights (no visual jump when active) */
.dots { align-items: center; height: 8px; }
.dots span { height: 6px; }
.dots span.on { height: 6px; }

/* Onboarding: actions get consistent spacing */
.ob-actions { padding-top: 4px; }

/* Category grid: gap tuned to fit 16 tiles in one column */
.cat-grid { grid-auto-rows: 1fr; }

/* Search: recents item touch target */
.recents > div { min-height: 44px; }
.recents > div .material-symbols-rounded:last-child { margin-left: auto; cursor: pointer; }

/* Article: action bar row must not clip; align vertically */
.art-actions-bar button { min-height: 36px; }

/* Article reactions: even sizing */
.art-reactions button { min-height: 40px; }

/* Breaking banner: keep icon+text vertically centered */
.breaking-banner { min-height: 40px; }
.breaking-banner marquee-fake { line-height: 1.3; }

/* Bottom nav: labels use system font (English fits crisply) */
.bn small { font-family: var(--f-latin); letter-spacing: -.01em; }

/* Article hero: back + tools sit at same baseline (below status bar) */
.article-hero, .player { align-items: flex-start; }

/* Shorts: progress bar sits above the top row cleanly */
.short-progress { top: 32px; }
.short-top { top: 44px; }

/* Card grid in components lib: consistent height for hero-card variant */
.ncard.horizontal { align-items: stretch; }

/* Folder tiles: hug content evenly */
.folder { min-height: 56px; }
.folder small { margin-left: auto; font-weight: 600; }

/* Subscription hero: reduce icon crowding */
.sub-hero { padding: 12px 0 8px; }

/* Login: input row alignment when flag/lead is text */
.input .flag { padding: 0 4px 0 0; border-right: 1px solid var(--divider); margin-right: 6px; }

/* Search bar: input takes remaining width */
.search-bar .input { flex: 1; }

/* Chips list wrap: nicer vertical rhythm */
.chip-list.wrap { row-gap: 8px; }

/* Ensure inner scroll surfaces don't jitter at snap points */
.screen-body { scroll-behavior: smooth; }