/* ============================================================
   PracticeNexa brand palette  —  Config/Clients/practicenexa.in.php
   ------------------------------------------------------------
   Loaded by Include/header-base.php on every PracticeNexa page
   (public homepage, auth pages, and the whole after-login shell).

   The three colours below are sampled from the logo, not invented:

     #27237F  deep indigo  — the "Practice" wordmark and the P mark
     #6F2DF7  violet       — the "Nexa" wordmark, the arrow and the tick
     #F99C13  amber        — the small flag inside the P

   Contrast, measured against #FFFFFF (WCAG 2.1):
     indigo 12.86:1  — safe for body text and for white text reversed out
     violet  6.19:1  — passes AA for body text either way round
     amber   2.14:1  — FAILS. Amber is a fill and a rule, never a text colour
                       on white and never a bed for white text. On amber use
                       #10102E ink (8.3:1). The amber-600 #B86A04 below is the
                       one to use when amber has to BE text.

   Source order: header-base.php loads this file BEFORE homepage-new.css and
   inner-app.css, so every custom property here carries !important. That is not
   defensive noise — without it the later sheets' :root wins on equal
   specificity and none of this applies. Same reason evdt.css does it.
   ============================================================ */

:root {
  /* ── Brand scales ─────────────────────────────────────────── */
  --pn-indigo-950: #100E2E;
  --pn-indigo-900: #16123F;
  --pn-indigo-800: #1D1959;
  --pn-indigo-700: #27237F;   /* logo */
  --pn-indigo-600: #332DA0;
  --pn-indigo-500: #4238C4;
  --pn-indigo-400: #655CDD;
  --pn-indigo-300: #9C95EE;
  --pn-indigo-100: #E0DEFA;
  --pn-indigo-50:  #F2F1FE;

  --pn-violet-700: #4E17C6;
  --pn-violet-600: #5F22E2;
  --pn-violet-500: #6F2DF7;   /* logo */
  --pn-violet-400: #8B58F9;
  --pn-violet-300: #AE8BFB;
  --pn-violet-100: #E8DEFE;
  --pn-violet-50:  #F6F1FF;

  --pn-amber-700:  #8A4F02;
  --pn-amber-600:  #B86A04;   /* the readable amber — use when amber is text */
  --pn-amber-500:  #F99C13;   /* logo */
  --pn-amber-400:  #FBB03F;
  --pn-amber-300:  #FCC873;
  --pn-amber-100:  #FEEBCB;
  --pn-amber-50:   #FFF8EC;

  --pn-ink:        #10102E;   /* the ink that goes ON amber */
}

/* ════════════════════════════════════════════════════════════
   1. Left navigation + after-login shell   (inner-app.css)
   ════════════════════════════════════════════════════════════

   inner-app.css ships six ROLE themes — teal student, indigo examiner, azure
   admin, plum super-admin, and two more — each repainting the sidebar rail. On
   a single-brand tenant that reads as six different products behind one logo,
   so every role is pinned to the brand rail here.

   What is deliberately NOT flattened: --ia-accent stays per-role below, so the
   status chips and role badges that carry meaning still differ. Only the
   chrome is unified.

   The rail is a two-stop gradient and the stops are the two wordmark colours in
   the order the logo reads them: deep indigo at the top, violet at the core. */

:root,
body.ia-role-student,
body.ia-role-examiner,
body.ia-role-admin,
body.ia-role-super-admin,
body.ia-role-moderator,
body.ia-role-approver {

  /* --ia-navy-* is a historical name; it has always held indigo, so the whole
     scale maps onto the brand indigo without any hue surprise downstream. */
  --ia-navy-900: var(--pn-indigo-900) !important;
  --ia-navy-800: var(--pn-indigo-800) !important;
  --ia-navy-700: var(--pn-indigo-700) !important;
  --ia-navy-600: var(--pn-indigo-600) !important;
  --ia-navy-500: var(--pn-indigo-500) !important;
  --ia-navy-400: var(--pn-indigo-400) !important;
  --ia-navy-100: var(--pn-indigo-100) !important;
  --ia-navy-50:  var(--pn-indigo-50)  !important;

  /* The rail. bg = deep stop (top), bg-2 = core. */
  --ia-sidebar-bg:          #1B1750 !important;
  --ia-sidebar-bg-2:        #5B23E0 !important;
  --ia-sidebar-text:        rgba(255,255,255,.80) !important;
  --ia-sidebar-muted:       rgba(255,255,255,.56) !important;
  --ia-sidebar-hover:       rgba(255,255,255,.12) !important;
  --ia-sidebar-border:      rgba(255,255,255,.12) !important;

  /* Active item: white pill, indigo label, violet icon — the logo's own
     relationship between its two tones, at the one spot the eye lands on. */
  --ia-sidebar-active:      #ffffff !important;
  --ia-sidebar-active-text: var(--pn-indigo-700) !important;
  --ia-sidebar-active-icon: var(--pn-violet-500) !important;

  --ia-primary:      var(--pn-violet-500) !important;
  --ia-primary-dark: var(--pn-violet-700) !important;

  --btn-primary-bg:   var(--pn-violet-500) !important;
  --btn-primary-dark: var(--pn-violet-700) !important;
  --btn-primary-ring: rgba(111, 45, 247, .30) !important;

  --ia-header-accent-bg: var(--pn-violet-50) !important;
  --ia-header-accent:    var(--pn-violet-600) !important;
  --ia-header-line:      var(--pn-violet-500) !important;
}

/* Role identity survives in the accent, not the chrome. */
body.ia-role-student     { --ia-accent: var(--pn-violet-500) !important; --ia-accent-soft: var(--pn-violet-100) !important; }
body.ia-role-examiner    { --ia-accent: var(--pn-indigo-500) !important; --ia-accent-soft: var(--pn-indigo-100) !important; }
body.ia-role-admin       { --ia-accent: var(--pn-indigo-600) !important; --ia-accent-soft: var(--pn-indigo-100) !important; }
body.ia-role-super-admin { --ia-accent: var(--pn-amber-500)  !important; --ia-accent-soft: var(--pn-amber-100)  !important; }

/* Student dashboard component set (redesign-ui.css). One token block re-skins
   the spotlight, focus card, tabs, KPI figures and week strip together. */
:root,
body.ia-role-student {
  --edu-accent:      var(--pn-violet-500);
  --edu-accent-dark: var(--pn-violet-700);
  --edu-accent-soft: var(--pn-violet-100);
  --edu-accent-ink:  var(--pn-indigo-800);
  --edu-ink:         var(--pn-indigo-900);
  --edu-spot-1:      #16123F;
  --edu-spot-2:      #27237F;
  --edu-spot-3:      #5B23E0;
  --edu-spot-accent: var(--pn-amber-400);
}

/* The exam window (examHeader.php / inc_online_exam_head.php) reuses the same
   rail gradient, so instructions → camera check → live exam stay on brand. */
.ef-topbar {
  background: linear-gradient(135deg, #1B1750 0%, #5B23E0 100%) !important;
  border-bottom-color: var(--pn-violet-500) !important;
}

/* ════════════════════════════════════════════════════════════
   2. Public chrome + FOOTER   (homepage-new.css)
   ════════════════════════════════════════════════════════════

   The homepage gets its colour through the --hn-brand-* bridge in
   homepage-templates.css, driven by theme_primary / theme_accent. The AUTH
   pages do not: Views/Layouts/auth.php loads homepage-new.css WITHOUT
   homepage-templates.css and never sets --hn-brand-primary, so the shared
   footer there falls back to the stock navy.

   Repainting the two base families here is what keeps the footer identical on
   the homepage and on /login/, /newUser/ and the rest. */

:root {
  --hn-navy-900: var(--pn-indigo-950) !important;
  --hn-navy-800: var(--pn-indigo-900) !important;
  --hn-navy-700: var(--pn-indigo-800) !important;
  --hn-navy-600: var(--pn-indigo-700) !important;
  --hn-navy-500: var(--pn-indigo-600) !important;   /* "primary navy" */
  --hn-navy-400: var(--pn-violet-400) !important;
  --hn-navy-300: var(--pn-violet-300) !important;
  --hn-navy-100: var(--pn-violet-100) !important;
  --hn-navy-50:  var(--pn-violet-50)  !important;

  /* The stock sheet's "orange" family is the logo's amber. */
  --hn-orange-600: var(--pn-amber-600) !important;
  --hn-orange-500: var(--pn-amber-500) !important;
  --hn-orange-400: var(--pn-amber-400) !important;
  --hn-orange-300: var(--pn-amber-300) !important;
  --hn-orange-100: var(--pn-amber-100) !important;
  --hn-orange-50:  var(--pn-amber-50)  !important;

  --hn-grad-navy:   linear-gradient(135deg, #1D1959 0%, #4238C4 100%) !important;
  --hn-grad-orange: linear-gradient(135deg, #E08A08 0%, #FBB03F 100%) !important;
  --hn-grad-hero:   linear-gradient(150deg, #16123F 0%, #27237F 52%, #5B23E0 100%) !important;
  --hn-grad-hero-warm: linear-gradient(150deg, #100E2E 0%, #1D1959 42%, #4238C4 100%) !important;
  --hn-grad-footer: linear-gradient(160deg, #16123F 0%, #27237F 100%) !important;

  --hn-shadow-navy:  0 8px 24px rgba(39, 35, 127, .34) !important;
  --hn-shadow-orange:0 8px 24px rgba(249, 156, 19, .30) !important;
}

/* The marketplace hero CTA. This is where the logo's third colour earns its
   place: the sign-in button is already violet, so a violet hero CTA would put
   two identical primary buttons side by side. Amber separates them and is the
   one accent in the mark that neither of the other two can be confused with.
   #F99C13 with #10102E ink measures 8.3:1 — the template's default pair is
   white-on-indigo, and this override is only safe because both hexes are known
   here. */
[data-hn-template="marketplace"] {
  --hn-mkt-cta-bg:  var(--pn-amber-500) !important;
  --hn-mkt-cta-ink: var(--pn-ink) !important;
}

/* The one decorative use of green. --hn-grad-green paints exactly one thing —
   the third feature icon (homepage-new.css:975) — and green is nowhere in this
   logo, so it read as a stray colour in an otherwise indigo/violet row. Every
   OTHER green on the page is semantic (free price, success chips, trust ticks)
   and is deliberately left alone. */
:root {
  --hn-grad-green:  linear-gradient(135deg, #E08A08 0%, #FBB03F 100%) !important;
  --hn-shadow-green: 0 8px 24px rgba(249, 156, 19, .30) !important;
}

/* Amber cannot carry white text (2.14:1), and the stock sheet reverses white out
   of --hn-orange-500 on this hover state. */
.hn-footer-social-link:hover { color: var(--pn-ink) !important; }

/* The footer's decorative wash is keyed to the old orange/green; re-point it so
   the tint reads as brand rather than as a leftover. */
.hn-footer::before {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(249,156,19,.10) 0%, transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(111,45,247,.16) 0%, transparent 38%) !important;
}

/* ════════════════════════════════════════════════════════════
   Brand logo sizing
   ------------------------------------------------------------
   SHOW_BRAND_LOGO_HEADER is true for this tenant, so inc_app_brand.php emits
   the wordmark alone (.app-brand--logo-only) with no name/tagline beside it.
   The image IS the brand, so how much of its own box it fills is the whole
   question.

   The artwork used to answer that badly. logo.png was exported 2172x724 with a
   band of ALPHA=1 pixels around the mark — invisible at any size, but 228px of
   phantom height, so the wordmark occupied 54% of the box and rendered at ~31px
   inside a 68px navbar. The files are now cropped to the real ink (1871x411,
   96% fill), which alone made the wordmark 1.78x taller at an unchanged CSS
   height. See the commit that trimmed them.

   That overshot: the shared heights in app-brand.css were chosen for a box that
   was half air, so applied to a full box they left a 58px wordmark in a 68px
   bar. The heights below are re-cut for ink rather than canvas — every one is
   still comfortably larger than what shipped before, because they are now
   entirely wordmark:

                       box before   ink before   ink now
     public header        58px         31px        44px
     footer               60px         32px        48px
     sidebar              54px         29px        40px
     exam topbar          50px         27px        36px
     inner topbar         44px         24px        34px
     legacy header        42px         23px        32px

   Scoped to this tenant on purpose. app-brand.css is shared, and a tenant whose
   logo has no phantom band would simply get an oversized mark from these
   numbers.

   Specificity: homepage-new.css loads AFTER this file (header-base.php runs
   first, then the layout adds its own sheets), and its footer rule is four
   classes deep. The leading `body` here outranks it without !important, and
   does the same for app-brand.css regardless of order.
   ════════════════════════════════════════════════════════════ */

body .app-brand.app-brand--logo-only .app-brand-logo {
  width: auto;
  max-width: min(300px, 62vw);
  object-fit: contain;
}

body .app-brand.app-brand--logo-only.app-brand--public  .app-brand-logo { height: 44px; }
body .app-brand.app-brand--logo-only.app-brand--sidebar .app-brand-logo { height: 40px; max-width: 100%; }
body .app-brand.app-brand--logo-only.app-brand--exam    .app-brand-logo { height: 36px; }
body .app-brand.app-brand--logo-only.app-brand--topbar  .app-brand-logo { height: 34px; }
body .app-brand.app-brand--logo-only.app-brand--legacy  .app-brand-logo { height: 32px; }

body .hn-footer .app-brand--footer.app-brand--logo-only .app-brand-logo {
  height: 48px;
  max-width: min(300px, 100%);
}

/* The only real padding on the brand itself. The legacy header is a 50px bar, so
   4px of vertical padding was capping the logo before the height rule could. */
body .app-brand.app-brand--legacy { padding: 2px 8px !important; }

/* ════════════════════════════════════════════════════════════
   5. Outer pages inside the Android app  (auth-pages.css layout)
   ------------------------------------------------------------
   /examPackages/, /contactUs, /ongoingExams and the policy pages
   render on the auth layout (body.au-body). Inside the app shell
   the native toolbar and bottom nav replace the site chrome, so
   the website's page furniture is wrong twice over: the dark
   .hn-outer-hero band still reserves --hn-navbar-h for a navbar
   the app hides, and the shared phone CSS flattens every
   .hn-pkg-card into a side-on list row.

   This section carries the homepage card-stack design
   (homepage-templates.css §3d) onto those pages. It lives HERE
   because auth pages never load homepage-templates.css, and this
   file is the one per-tenant sheet they do load — scoping by
   .hn-app-shell.au-body keeps every other tenant's app and every
   browser identical.

   Specificity note: this file loads BEFORE homepage-new.css and
   auth-pages.css, so nothing here can rely on source order — the
   three-class scope out-ranks the later sheets' one-class rules
   instead. color-mix is avoided for the same reason as §3d: an
   older WebView drops the whole declaration.
   ════════════════════════════════════════════════════════════ */

/* The navbar reserve is dead space at every width the app can open. */
body.hn-app-shell.au-body .hn-outer-hero,
body.hn-app-shell.au-body .hn-outer-hero--compact {
  padding-top: 16px;
}

/* Contact/policy content links: auth-pages.css colours them but leaves the
   browser's default underline, and a table of five underlined rows reads as
   clutter. Colour and weight already mark them as links; the underline comes
   back on hover as the pointer affordance. Tenant-wide, not app-only — the
   same page in a browser should not suddenly grow underlines. */
body .hn-prose a { text-decoration: none; }
body .hn-prose a:hover,
body .hn-prose a:focus-visible { text-decoration: underline; }

/* ── 5b. Sign-up / sign-in forms inside the app ──────────────
   /newUser/ and /login (au-page-signup / au-page-login). Three
   things are wrong for a WebView under the native toolbar:

   1. homepage-new.css reserves --hn-navbar-h and stretches the
      split to the viewport, so the form floats below a screen of
      dead space for a navbar the app hides.
   2. The decorative left panel (aria-hidden) stacks BELOW the form
      on phones, repeating the marketing pitch — with "learners and
      examiners" copy this student-only tenant does not want.
   3. The flow wears the platform's stock green/orange, not this
      brand.

   Colour is fixed at the token, not the rule: auth-pages.css paints
   every accent through --au-grad-green / --au-grad-orange and the
   --au-green-* scale, and custom properties set on <body> beat the
   :root definitions by inheritance, whatever the sheet order. The
   two hover shadows are overridden separately because they hardcode
   the green rgba instead of reading the token. */

body.hn-app-shell.au-body {
  --au-grad-green:    linear-gradient(135deg, #27237F 0%, #6F2DF7 100%) !important;
  --au-shadow-green:  0 8px 24px rgba(111, 45, 247, .30) !important;
  --au-grad-orange:   linear-gradient(135deg, #27237F 0%, #6F2DF7 100%) !important;
  --au-shadow-orange: 0 8px 24px rgba(111, 45, 247, .30) !important;
  --au-green-700: var(--pn-violet-700) !important;
  --au-green-500: var(--pn-violet-500) !important;
  --au-green-50:  var(--pn-violet-50) !important;
}
body.hn-app-shell.au-body .au-btn-green:hover,
body.hn-app-shell.au-body .au-btn-submit.au-btn-green:hover,
body.hn-app-shell.au-body .au-btn-orange:hover,
body.hn-app-shell.au-body .au-btn-submit.au-btn-orange:hover {
  box-shadow: 0 12px 28px rgba(111, 45, 247, .38);
}

/* Kill the navbar reserve and the viewport-height stretch. */
body.hn-app-shell.au-body .au-page { padding-top: 12px; min-height: 0; }
body.hn-app-shell.au-body .au-page-login,
body.hn-app-shell.au-body .au-page-signup,
body.hn-app-shell.au-body .au-split-left,
body.hn-app-shell.au-body .au-split-right { min-height: 0; }

@media (max-width: 767.98px) {
  /* The form IS the page in-app; the stacked marketing panel goes. */
  body.hn-app-shell.au-body .au-split-left { display: none; }

  /* The stock split paints .au-split-right as a full-bleed white band —
     a bare sheet ending mid-page on the lilac ground. In the card stack
     it becomes what everything else already is: a rounded card. */
  body.hn-app-shell.au-body .au-split-right {
    margin: 16px 0 28px;
    padding: 22px 18px 24px;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 16px rgba(39, 35, 127, .10), 0 1px 4px rgba(0, 0, 0, .04);
  }

  /* Tighter rhythm inside the card: the desktop margins assumed a
     28px-padded panel with a screen of its own. */
  body.hn-app-shell.au-body .au-form-header { margin-bottom: 16px; }
  body.hn-app-shell.au-body .au-steps { margin-bottom: 14px; }
  body.hn-app-shell.au-body .oex-social { margin-top: 12px; }
  body.hn-app-shell.au-body .au-field { margin-bottom: 15px; }
  body.hn-app-shell.au-body .au-form-wrap { max-width: none; }
}

/* ── 5c. Social sign-in buttons, everywhere they render ──────
   Include/inc_social_login.php drops the same .oex-social markup into
   the homepage sign-in sheet, /login and /newUser/. social-login.css
   deliberately styles it with neutral literals so the row looks the
   same in all three design systems — these overrides keep that
   sameness, just tuned to this brand: indigo ink, violet hover, a
   12px radius and a 48px target. body-scoped so specificity wins,
   not sheet order. */
body .oex-social-btn {
  min-height: 48px;
  gap: 10px;
  border: 1.5px solid var(--pn-indigo-100);
  border-radius: 12px;
  color: var(--pn-indigo-800);
  font-size: 14.5px;
  box-shadow: 0 1px 4px rgba(39, 35, 127, .06);
}
body .oex-social-btn:hover,
body .oex-social-btn:focus {
  background: var(--pn-violet-50);
  border-color: var(--pn-violet-300);
  color: var(--pn-indigo-800);
  box-shadow: 0 4px 12px rgba(111, 45, 247, .14);
}
body .oex-social-btn:focus-visible { outline-color: var(--pn-violet-500); }
body .oex-social-divider { color: #64748b; }
body .oex-social-divider::before,
body .oex-social-divider::after { border-top-color: var(--pn-indigo-100); }
/* social-login.css only spaces the block ABOVE (margin-top); on the sign-up
   form the email field follows it directly and sat cramped against the
   buttons. One clear beat below the row, everywhere the block renders. */
body .oex-social { margin-bottom: 18px; }

@media (max-width: 767.98px) {

  /* ── Page hero band → compact brand card ─────────────────── */
  body.hn-app-shell.au-body .hn-outer-hero,
  body.hn-app-shell.au-body .hn-outer-hero--compact {
    background: #f6f5fc;
    padding: 16px 16px 4px;
    overflow: visible;
  }
  body.hn-app-shell.au-body .hn-outer-hero .hn-container { padding: 0; }
  body.hn-app-shell.au-body .hn-outer-hero-orb,
  body.hn-app-shell.au-body .hn-outer-hero-badge { display: none; }
  body.hn-app-shell.au-body .hn-outer-hero-inner {
    max-width: none;
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(140deg, var(--pn-indigo-900) 0%, var(--pn-indigo-700) 48%, #4a2fd0 100%);
    box-shadow: 0 10px 28px rgba(39, 35, 127, .26), 0 3px 10px rgba(0, 0, 0, .06);
  }
  body.hn-app-shell.au-body .hn-outer-hero-title {
    font-size: 22px;
    margin: 0 0 8px;
  }
  body.hn-app-shell.au-body .hn-outer-hero-sub {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .80);
    margin: 0;
  }
  body.hn-app-shell.au-body .hn-outer-hero-stats {
    margin-top: 12px;
    font-size: 12.5px;
  }

  /* ── Content band ────────────────────────────────────────── */
  body.hn-app-shell.au-body .hn-outer-content {
    background: #f6f5fc;
    padding: 20px 0 40px;
  }
  body.hn-app-shell.au-body .hn-outer-content .hn-container { padding: 0 16px; }

  /* Section header: the stack reads as one screen — drop the
     eyebrow and the title icon, exactly as the homepage does. */
  body.hn-app-shell.au-body .hn-outer-section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  body.hn-app-shell.au-body .hn-outer-section-header .hn-section-eyebrow,
  body.hn-app-shell.au-body .hn-outer-section-header .hn-section-title i { display: none; }
  body.hn-app-shell.au-body .hn-outer-section-header .hn-section-title { font-size: 18px; }

  /* Free/Paid filter → one swipeable row of 44px chips. */
  body.hn-app-shell.au-body .hn-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  body.hn-app-shell.au-body .hn-filter-bar::-webkit-scrollbar { display: none; }
  body.hn-app-shell.au-body .hn-filter {
    flex: none;
    min-height: 44px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(37, 99, 176, .08);
  }
  body.hn-app-shell.au-body .hn-filter.is-active {
    background: var(--pn-indigo-700);
    border-color: var(--pn-indigo-700);
  }

  /* ── Package cards: side-on rows → proper cards ──────────── */
  body.hn-app-shell.au-body .hn-cards-grid { gap: 16px; }
  body.hn-app-shell.au-body .hn-pkg-card {
    display: flex;
    flex-direction: column;
  }
  body.hn-app-shell.au-body .hn-pkg-card-body { padding: 16px 16px 12px; gap: 9px; }
  body.hn-app-shell.au-body .hn-pkg-card-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #f1f5f9;
  }
  body.hn-app-shell.au-body .hn-pkg-card-top .hn-chip-subject { display: inline-flex; }
  body.hn-app-shell.au-body .hn-pkg-card-footer .hn-btn-card {
    min-height: 44px;
    border-radius: 10px;
    padding: 0 18px;
  }

  /* Exam cards on /ongoingExams get the same footing. */
  body.hn-app-shell.au-body .hn-exam-card-footer .hn-btn-card {
    min-height: 44px;
    border-radius: 10px;
  }

  /* ── Content card (contact + policy pages) ───────────────── */
  body.hn-app-shell.au-body .hn-outer-content-card {
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(37, 99, 176, .10), 0 1px 4px rgba(0, 0, 0, .04);
  }
  body.hn-app-shell.au-body .hn-outer-card-header {
    padding: 16px;
    gap: 12px;
  }
  body.hn-app-shell.au-body .hn-outer-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
    background: linear-gradient(135deg, var(--pn-indigo-700), var(--pn-violet-500));
  }
  body.hn-app-shell.au-body .hn-outer-card-title { font-size: 16px; }
  body.hn-app-shell.au-body .hn-outer-card-subtitle { font-size: 12.5px; }
  body.hn-app-shell.au-body .hn-outer-card-body { padding: 16px; }
  body.hn-app-shell.au-body .hn-prose { font-size: 14.5px; line-height: 1.7; }
  body.hn-app-shell.au-body .hn-outer-card-footer { padding: 12px 16px 16px; }
  body.hn-app-shell.au-body .hn-outer-card-footer .hn-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 12px;
  }

}