:root {
  --brand: #1B4F72;
  --brand-ink: #123855;
  --brand-tint: #E8F0F7;
  --brand-ring: rgba(27, 79, 114, .18);
  --ink-1: #0E1B25;
  --ink-2: #2B3944;
  --ink-3: #5A6875;
  --ink-4: #8995A2;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-3: #EEF2F6;
  --paper: #F1ECE0;
  --paper-2: #E8DEC4;
  --hairline: #E3E8ED;
  --hairline-2: #D6DCE3;
  --pass: #1E7E46;
  --pass-bg: #E7F3EC;
  --mid: #B07206;
  --mid-bg: #FBF0DA;
  --fail: #B4311C;
  --fail-bg: #FBE9E5;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(14,27,37,.04), 0 1px 1px rgba(14,27,37,.03);
  --shadow-2: 0 2px 6px rgba(14,27,37,.06), 0 1px 2px rgba(14,27,37,.04);
}

html,
body {
  font-family: var(--font-sans) !important;
  color: var(--ink-2) !important;
  background: var(--surface-2) !important;
  letter-spacing: 0 !important;
}

h1,
h2,
.sec-title,
.cta-title,
.hero-title,
.t-display,
.t-title,
.price-amt,
.stat-v,
.ring-num,
.score-num {
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.nav,
.topnav,
.d-nav {
  background: rgba(255,255,255,.94) !important;
  color: var(--ink-1) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
}

.nav-logo,
.logo,
.foot-logo {
  color: var(--ink-1) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.nav-logo span,
.foot-logo span,
.logo span:last-child {
  color: var(--ink-1) !important;
}

.logo-mark,
.auth-logo,
.nav-logo::before {
  background: var(--ink-1) !important;
  color: var(--paper-2) !important;
  border: 1px solid rgba(232,222,196,.45) !important;
  box-shadow: inset 0 0 0 1px rgba(232,222,196,.18) !important;
  font-family: var(--font-display) !important;
}

.nav-logo::before {
  content: "RE";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: 1px;
  vertical-align: middle;
}

.nav-cta,
.btn-primary,
.btn-pay,
.btn-cta,
.pw-pay-btn,
#pw-pay-btn,
.auth-shell .btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.nav-cta:hover,
.btn-primary:hover,
.btn-pay:hover,
.btn-cta:hover {
  background: var(--brand-ink) !important;
}

.btn-ghost,
.btn-secondary {
  border-color: rgba(255,255,255,.28) !important;
  border-radius: var(--r-md) !important;
}

.hero,
.cta,
.hero-card,
.d-hero,
.res-paywall {
  background: #0E1B25 !important;
  color: #fff !important;
}

.hero::before,
.ld-hero::before {
  background: radial-gradient(circle at 20% 20%, rgba(77,161,217,.24), transparent 55%) !important;
}

.hero h1,
.hero h1 span,
.cta-title,
.hero-title,
.d-hero h2,
.res-paywall h3 {
  color: #fff !important;
}

.hero h1 span,
.hero-eyebrow,
.eyebrow,
.eyebrow-sm,
.ld-kicker {
  color: var(--paper-2) !important;
}

.hero-sub,
.cta-sub,
.d-hero .d-hero-sub,
.res-paywall p {
  color: rgba(255,255,255,.76) !important;
}

.hero-eyebrow,
.ld-kicker {
  background: rgba(232,222,196,.11) !important;
  border: 1px solid rgba(232,222,196,.28) !important;
  border-radius: 999px !important;
}

.hero-dot,
.k-dot {
  background: var(--paper-2) !important;
}

.trust,
.problem,
.how,
.pricing,
.faq,
footer {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
}

.features,
.testimonials,
.syllabus,
.ld-section,
.ld-pricing {
  background: var(--surface-2) !important;
}

.prob-card,
.feat-card,
.test-card,
.syl-item,
.price-card,
.card,
.panel,
.stat-box,
.inset-row,
.option,
.login,
.auth-shell,
.modal-box,
.pw-card,
.pw-price-card,
.ld-feat,
.ld-pricing-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-1) !important;
}

.price-card {
  border: 1px solid var(--brand) !important;
}

.price-badge,
.chip,
.pass-tag {
  background: var(--brand-tint) !important;
  color: var(--brand-ink) !important;
}

.option.selected,
.option.ok {
  border-color: var(--pass) !important;
  background: var(--pass-bg) !important;
}

.option.bad {
  border-color: var(--fail) !important;
  background: var(--fail-bg) !important;
}

.tab-item.active .tab-icon svg,
.tab-item.active .tab-label,
.tab.active,
a,
.nav-link:hover,
.nav-link.active,
.d-links a.active {
  color: var(--brand) !important;
}

.xp-fill,
.bar > i,
.m-bar,
.syl-bar {
  background: var(--brand) !important;
}

.foot-inner,
footer {
  color: var(--ink-3) !important;
}

.foot-links a {
  color: var(--ink-3) !important;
}

body {
  background:
    linear-gradient(180deg, rgba(241,236,224,.56), rgba(247,249,251,0) 280px),
    var(--surface-2) !important;
}

.app,
.screen-wrap,
.login {
  background: transparent !important;
}

.hero-card,
.xp-wrap,
.card,
.panel,
.stat-box,
.inset-row,
.option,
.auth-shell,
.paywall-nudge,
.pw-card,
.res-hero,
.res-section {
  border-radius: 12px !important;
}

.hero-card,
.d-hero,
.fh-hero {
  border: 1px solid rgba(232,222,196,.16) !important;
}

.fh-hero,
.d-hero,
.res-paywall {
  background:
    radial-gradient(circle at 16% 12%, rgba(77,161,217,.2), transparent 48%),
    #0E1B25 !important;
}

.fh-hero h2,
.d-hero h2,
.res-paywall h3 {
  font-family: var(--font-display) !important;
}

.t-display,
.hero-title,
.streak-num,
.stat-v,
.ring-num,
.score-num,
.price-amt {
  font-variant-numeric: lining-nums !important;
}

.topnav .logo-mark,
.auth-shell .auth-logo {
  border-radius: 50% !important;
}

.tab-bar,
.tabbar {
  background: rgba(255,255,255,.94) !important;
  border-top: 1px solid var(--hairline) !important;
}

.tab-item,
.tab {
  color: var(--ink-3) !important;
}

.inset-icon,
.lf-ic,
.feat-icon,
.pf-ic {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  border-radius: 8px !important;
}

.field,
.otp-input,
.pin-input,
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="number"] {
  border-radius: 8px !important;
  border-color: var(--hairline-2) !important;
}

.modal-box,
.pw-modal,
.pay-box {
  border-radius: 12px !important;
}

.welcome-card,
.install-card {
  border-radius: 12px !important;
  border: 1px solid var(--hairline) !important;
}

/* New RERAexam shared chrome. Loaded after page-local CSS so it wins everywhere. */
.re-nav,
.nav.re-nav {
  background: #0E1B25 !important;
  color: var(--paper-2) !important;
  border-bottom: 1px solid rgba(232,222,196,.16) !important;
  box-shadow: none !important;
}

.re-nav .nav-inner,
.re-nav-inner {
  max-width: 1120px !important;
  height: 64px !important;
  margin: 0 auto !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.re-brand,
.nav-logo.re-brand,
.nav-drawer-logo.re-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--paper-2) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.re-brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}

.re-brand-word,
.re-brand-word em {
  color: var(--paper-2) !important;
}

.re-brand-word em {
  font-style: italic !important;
  font-weight: 400 !important;
}

.re-nav-links,
.re-nav .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 10px !important;
}

.re-nav .nav-link,
.re-login {
  color: rgba(232,222,196,.76) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  padding: 8px 10px !important;
}

.re-nav .nav-link:hover,
.re-nav .nav-link.active {
  color: var(--paper-2) !important;
  background: rgba(232,222,196,.08) !important;
}

.re-nav-spacer {
  flex: 1 !important;
}

.re-nav-cta,
.nav-cta.re-nav-cta {
  background: var(--paper-2) !important;
  color: var(--ink-1) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.re-nav .nav-hamburger {
  color: var(--paper-2) !important;
  background: transparent !important;
}

.re-drawer,
.nav-drawer.re-drawer {
  background: var(--surface) !important;
  border-left: 1px solid var(--hairline) !important;
}

.re-drawer .re-brand-word,
.re-drawer .re-brand-word em,
.re-drawer .nav-drawer-logo {
  color: var(--ink-1) !important;
}

.re-drawer .nav-drawer-cta {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.re-footer {
  background: #0E1B25 !important;
  color: rgba(232,222,196,.68) !important;
  padding: 38px 22px !important;
  border-top: 1px solid rgba(232,222,196,.16) !important;
}

.re-footer-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
}

.re-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--paper-2) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.re-footer-brand img {
  width: 34px !important;
  height: 34px !important;
}

.re-footer-brand em {
  font-style: italic !important;
  font-weight: 400 !important;
}

.re-footer p {
  margin: 0 !important;
  color: rgba(232,222,196,.66) !important;
  font-size: 14px !important;
}

.re-footer-links {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.re-footer-links a {
  color: var(--paper-2) !important;
  font-size: 13px !important;
}

/* Page-level editorial surfaces. */
.page,
.article,
.content,
main.main {
  color: var(--ink-2) !important;
}

.page h1,
.article h1,
.content h1,
.page h2,
.article h2,
.content h2,
.card-title {
  font-family: var(--font-display) !important;
  color: var(--ink-1) !important;
  letter-spacing: 0 !important;
}

.sub,
.card-sub,
.page p,
.article p,
.content p {
  color: var(--ink-3) !important;
}

.form-submit,
.btn-primary,
button[type="submit"] {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.form-submit:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  background: var(--brand-ink) !important;
}

/* Login/auth page hardening. */
.main .card,
main.main > .card {
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-2) !important;
}

.phone-wrap:focus-within,
.field-input:focus,
.otp-digit:focus,
.pin-digit.filled {
  border-color: var(--brand) !important;
  background: var(--surface) !important;
}

.pin-digit.dot::after {
  color: var(--brand) !important;
}

.card-footer a,
.resend-btn,
.nav-back {
  color: var(--brand) !important;
}

@media (max-width: 760px) {
  .re-nav-links,
  .re-login,
  .re-nav-cta {
    display: none !important;
  }

  .re-nav .nav-hamburger {
    display: flex !important;
  }

  .re-footer-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #4DA1D9;
    --brand-ink: #7FB9E0;
    --brand-tint: #15293A;
    --ink-1: #E8EEF4;
    --ink-2: #C2CDD8;
    --ink-3: #8C98A5;
    --surface: #121B24;
    --surface-2: #0B1319;
    --surface-3: #1B2632;
    --hairline: #233140;
    --hairline-2: #2E3F52;
  }

  .nav,
  .topnav,
  .d-nav {
    background: rgba(5,9,13,.92) !important;
  }

  .logo-mark,
  .auth-logo,
  .nav-logo::before {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
  }
}

/* Legacy app hardening.
   Several inherited pages ship their own blue/iOS tokens inside page-local
   style blocks. This final layer keeps every URL on the newer institutional
   RERAExam system without editing each app surface by hand. */
:root {
  --blue: var(--brand) !important;
  --blue-dark: var(--brand-ink) !important;
  --blue-bg: var(--brand-tint) !important;
  --purple: #7A5C2E !important;
  --purple-bg: #F1E7D0 !important;
  --teal: #4D7C8A !important;
  --teal-bg: #E6EEF0 !important;
  --orange: #B87732 !important;
  --orange-bg: #F3E4CF !important;
  --gold: #B89045 !important;
  --gold-bg: #F4ECD9 !important;
  --bg: var(--surface-2) !important;
  --surface: #FFFFFF !important;
  --fill2: #F7F3EA !important;
  --fill3: #ECE3D2 !important;
  --lbl: var(--ink-1) !important;
  --lbl2: var(--ink-2) !important;
  --lbl3: var(--ink-3) !important;
  --sep: var(--hairline) !important;
  --sep2: var(--hairline-2) !important;
  --fd: var(--font-display) !important;
  --f: var(--font-sans) !important;
}

.tab-item.active .tab-icon svg,
.tab-item.active .tab-label,
.nav-logo span,
.link,
.text-blue,
.accent,
.filter-chip.active,
.chip.active {
  color: var(--brand) !important;
  stroke: var(--brand) !important;
}

.tab-bar,
.bottom-nav,
.mobile-tabs {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--hairline) !important;
}

.nav-timer,
.stat-pill,
.badge,
.pill {
  border-color: var(--hairline) !important;
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
}

.option.selected,
.answer-option.selected,
.choice.selected,
.topic-card.active,
.mode-card.active {
  border-color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

.progress-fill,
.bar-fill,
.mastery-fill,
.score-fill,
.loader,
.spinner {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

svg [stroke="#2563eb"],
svg [stroke="#3b82f6"],
svg [stroke="#0a84ff"] {
  stroke: var(--brand) !important;
}

svg [fill="#2563eb"],
svg [fill="#3b82f6"],
svg [fill="#0a84ff"] {
  fill: var(--brand) !important;
}

[style*="#2563eb"],
[style*="#3b82f6"],
[style*="#0a84ff"],
[style*="background:#2563eb"],
[style*="background: #2563eb"] {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.hero,
.page-hero,
.article-hero,
.calc-hero {
  background: linear-gradient(135deg, #0E1B25 0%, #18354A 54%, #E8DEC4 190%) !important;
  color: var(--paper-1) !important;
}

.hero h1,
.page-hero h1,
.article-hero h1,
.calc-hero h1 {
  color: var(--paper-1) !important;
  font-family: var(--font-display) !important;
}