/* =====================================================================
   JANATA — Karnataka citizen front door (prototype)
   Web app, no native build.
   Palette: Karnataka red + yellow used LIGHTLY (tints, accents, gradients
   blended with engine-blue / violet / emerald). UI feels neutral; the
   flag colours appear as wash, stripe, gradient — not as flat fill.
   ===================================================================== */

:root {
  /* Karnataka flag — full strength, used sparingly */
  --kr-red:        #DA251D;
  --kr-red-2:      #B71C16;
  --kr-red-soft:   #FCE6E5;
  --kr-yellow:     #FFD500;
  --kr-yellow-2:   #E5BE00;
  --kr-yellow-soft:#FFF6BF;

  /* Secondary accents — site palette */
  --engine:        #2952A3;
  --engine-2:      #1E3A8A;
  --engine-soft:   #E4ECFA;
  --violet:        #7C3AED;
  --violet-soft:   #EFE6FD;
  --emerald:       #10B981;
  --emerald-soft:  #D4F5E7;
  --pink:          #EC4899;

  /* Neutral surfaces — UI background */
  --ink:           #15181E;
  --ink-2:         #4B5563;
  --ink-3:         #9CA3AF;
  --paper:         #FFFFFF;
  --surface:       #F6F7F9;
  --surface-2:     #EBEDF1;
  --line:          #E5E7EB;
  --line-soft:     #EFF0F2;

  /* Status */
  --ok:            #10B981;
  --warn:          #F59E0B;
  --bad:           #EF4444;

  /* Mixed gradients — red + yellow + blue (soft, not pure flag) */
  --grad-warm:   linear-gradient(135deg, #DA251D 0%, #EC4899 38%, #7C3AED 70%, #2952A3 100%);
  --grad-sunrise:linear-gradient(135deg, #DA251D 0%, #F59E0B 50%, #FFD500 100%);
  --grad-civic: linear-gradient(135deg, #2952A3 0%, #7C3AED 55%, #DA251D 100%);
  /* The actual flag — kept for hero strip accents */
  --grad-flag:   linear-gradient(180deg, var(--kr-red) 0 50%, var(--kr-yellow) 50% 100%);

  /* Typography */
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-kn:   "Noto Sans Kannada", "Inter", system-ui, sans-serif;

  /* Layout */
  --app-max: 460px;
  --nav-h:   62px;
  --radius:  14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 14px 38px rgba(15,23,42,0.14);
}

[data-theme="dark"] {
  --ink:           #F4F4F5;
  --ink-2:         #C7CAD1;
  --ink-3:         #6B7280;
  --paper:         #15171C;
  --surface:       #1B1E25;
  --surface-2:     #232830;
  --line:          #2A2F38;
  --line-soft:     #1F2329;
  --kr-red-soft:   rgba(218,37,29,0.18);
  --kr-yellow-soft:rgba(255,213,0,0.16);
  --engine-soft:   rgba(41,82,163,0.18);
  --violet-soft:   rgba(124,58,237,0.18);
  --emerald-soft:  rgba(16,185,129,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(218,37,29,0.06), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(255,213,0,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(41,82,163,0.06), transparent 55%),
    #F2F4F8;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(218,37,29,0.10), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(255,213,0,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(41,82,163,0.10), transparent 55%),
    #0B0D11;
}

a { color: var(--engine); text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ======================================================
   Device frame (desktop only) + app shell
   ====================================================== */

#app-shell {
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  body { padding: 24px 12px; }
  #app-shell {
    min-height: calc(100vh - 48px);
    height: calc(100vh - 48px);
    border-radius: 36px;
    box-shadow: var(--shadow-lg), 0 0 0 8px rgba(15,23,42,0.06), 0 0 0 14px rgba(15,23,42,0.04);
    overflow: hidden;
  }
}

/* Flag-stripe accent — sits at the very top of the shell */
.flag-stripe {
  height: 3px;
  background: var(--grad-flag-h, linear-gradient(90deg, var(--kr-red) 0 50%, var(--kr-yellow) 50% 100%));
}

/* ======================================================
   Top app bar
   ====================================================== */

.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 16px 12px;
  display: flex; align-items: center; gap: 12px;
}
.appbar .back, .appbar .icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  position: relative;
}
.appbar .title {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.appbar .title .kn {
  display: block;
  font-family: var(--font-kn);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  line-height: 1.3; margin-top: 2px;
}
.appbar .actions { display: flex; gap: 8px; }
.appbar .icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kr-red);
  border: 2px solid var(--paper);
}

/* Brand chip */
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--surface);
}
.brand-chip .flag {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-flag);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.brand-chip .label {
  font-family: var(--font-kn);
  font-weight: 700; font-size: 13px;
  color: var(--ink);
}

/* ======================================================
   Main view area + bottom nav
   ====================================================== */

.view {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px calc(var(--nav-h) + 32px);
  -webkit-overflow-scrolling: touch;
}
.view.no-bottom-pad { padding-bottom: 24px; }

.bottom-nav {
  position: sticky; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -4px 14px rgba(15,23,42,0.04);
  padding: 6px 4px;
}
.bottom-nav a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
  text-align: center;
}
.bottom-nav a svg { width: 22px; height: 22px; stroke-width: 1.9; }
.bottom-nav a.active { color: var(--ink); }
/* Active indicator: a thin gradient bar at the top, NOT a heavy fill */
.bottom-nav a.active::before {
  content: '';
  position: absolute; top: 0; left: 24%; right: 24%; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--grad-sunrise);
}

/* ======================================================
   Reusable: section heading, card, badge, button
   ====================================================== */

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--engine);
  margin-bottom: 6px;
}
.section-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 20px 0 10px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.section-title:first-child { margin-top: 0; }
.section-title .more {
  font-size: 12.5px; font-weight: 700;
  color: var(--engine);
}

.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.card.alt { background: var(--surface); }
[data-theme="dark"] .card { background: var(--surface); border-color: var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 800;
  border: 0;
  width: 100%;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s;
}
.btn:active { transform: translateY(1px); }
/* Primary: muted civic gradient (red→violet→engine), not flat red */
.btn-primary {
  background: var(--grad-civic);
  background-size: 180% 180%;
  background-position: 20% 50%;
  color: #fff;
  box-shadow: 0 8px 20px rgba(41,82,163,0.22);
}
.btn-primary:hover { background-position: 80% 50%; filter: saturate(1.05); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-yellow {
  background: var(--kr-yellow);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(255,213,0,0.32);
}
.btn-yellow:hover { background: var(--kr-yellow-2); }
.btn.compact { padding: 10px 14px; font-size: 13.5px; }
.btn .arrow svg { width: 16px; height: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge.b-red    { background: var(--kr-red-soft);    color: var(--kr-red-2); }
.badge.b-yellow { background: var(--kr-yellow-soft); color: #8C6A00; }
.badge.b-blue   { background: var(--engine-soft);    color: var(--engine); }
.badge.b-violet { background: var(--violet-soft);    color: var(--violet); }
.badge.b-green  { background: var(--emerald-soft);   color: #047857; }
.badge.b-grey   { background: var(--surface-2);      color: var(--ink-2); }

/* ======================================================
   LOGIN
   ====================================================== */

.login { min-height: 100%; display: flex; flex-direction: column; padding: 0; }

/* Hero band — uses sunrise gradient (red→amber→yellow) with engine blue accents */
.login .top-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,0.30), transparent 40%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,0.20), transparent 38%),
    var(--grad-warm);
  padding: 32px 22px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.login .top-band::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 22px;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
}
.login .brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.login .brand .mark {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
  font-weight: 800; font-size: 22px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.40);
}
.login .brand .words .en {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: .92;
}
.login .brand .words .kn {
  font-family: var(--font-kn);
  font-size: 22px; font-weight: 700;
  line-height: 1.2;
}
.login h1 {
  font-size: 24px; line-height: 1.25;
  margin: 6px 0 6px;
  letter-spacing: -0.01em;
}
.login p.lead { font-size: 14px; line-height: 1.55; margin: 0; opacity: .94; }

.login .form { flex: 1; padding: 22px 22px 24px; }
.login .field { margin: 14px 0 8px; }
.login .field label {
  display: block;
  font-size: 12.5px; font-weight: 800;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.login .field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 15.5px; font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-base);
}
.login .field input:focus {
  outline: none;
  border-color: var(--engine);
  box-shadow: 0 0 0 3px rgba(41,82,163,0.15);
}
.login .field .prefix {
  display: flex; align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.login .field .prefix:focus-within {
  border-color: var(--engine);
  box-shadow: 0 0 0 3px rgba(41,82,163,0.15);
}
.login .field .prefix .px {
  padding: 13px 12px 13px 14px;
  font-weight: 800; color: var(--ink-2);
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.login .field .prefix input { border: 0; box-shadow: none; border-radius: 0; }
.login .otp-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.login .otp-grid input {
  width: 100%; min-width: 0;
  padding: 12px 0;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  text-align: center; font-size: 22px; font-weight: 800;
  font-family: var(--font-base);
}
.login .otp-grid input:focus {
  outline: none; border-color: var(--engine);
  box-shadow: 0 0 0 3px rgba(41,82,163,0.15);
}
.login .hint { font-size: 12.5px; color: var(--ink-2); margin: 12px 0 0; }
.login .hint b { color: var(--ink); }
.login .resend {
  margin-top: 18px;
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-2);
}
.login .resend a, .login .resend button {
  color: var(--engine); font-weight: 800;
  background: none; border: 0; padding: 0;
}
.login .legal {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  text-align: center; margin-top: 18px;
}
.login .legal a { color: var(--ink-2); text-decoration: underline; }

/* ======================================================
   HOME
   ====================================================== */

/* Hero — uses the soft civic gradient, NOT pure flag. Adds a flag stripe at top. */
.home-hero {
  background: var(--grad-warm);
  margin: -18px -18px 14px;
  padding: 20px 20px 24px;
  color: #fff;
  border-radius: 0 0 22px 22px;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 65%);
  pointer-events: none;
}
.home-hero .greet {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.home-hero .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.40);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  color: #fff;
}
.home-hero .greet-text { line-height: 1.25; flex: 1; }
.home-hero .greet-text .hi {
  font-size: 12.5px; opacity: .92; letter-spacing: 0.04em;
}
.home-hero .greet-text .nm { font-size: 17px; font-weight: 800; }
.home-hero .greet .bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: #fff;
}
.home-hero .greet .bell .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kr-yellow);
  border: 2px solid var(--paper);
}
.home-hero .search {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 12px;
  padding: 11px 14px;
  color: #fff;
}
.home-hero .search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: #fff; font-size: 14.5px; font-weight: 600;
}
.home-hero .search input::placeholder { color: rgba(255,255,255,0.78); }

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}
.quick-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.25;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s;
}
.quick-grid a:active { transform: scale(0.97); }
.quick-grid a .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
}
.quick-grid a.q-red    .ic { background: var(--kr-red-soft);   color: var(--kr-red); }
.quick-grid a.q-yellow .ic { background: var(--kr-yellow-soft);color: #8C6A00; }
.quick-grid a.q-blue   .ic { background: var(--engine-soft);   color: var(--engine); }
.quick-grid a.q-violet .ic { background: var(--violet-soft);   color: var(--violet); }
.quick-grid a.q-green  .ic { background: var(--emerald-soft);  color: #047857; }
[data-theme="dark"] .quick-grid a { background: var(--surface); border-color: var(--line); }

/* Active applications strip */
.app-strip { display: grid; gap: 10px; }
.app-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
[data-theme="dark"] .app-row { background: var(--surface); border-color: var(--line); }
.app-row .ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--engine-soft);
  color: var(--engine);
}
.app-row .ic.t-red    { background: var(--kr-red-soft);    color: var(--kr-red); }
.app-row .ic.t-yellow { background: var(--kr-yellow-soft); color: #8C6A00; }
.app-row .ic.t-violet { background: var(--violet-soft);    color: var(--violet); }
.app-row .ic.t-green  { background: var(--emerald-soft);   color: #047857; }
.app-row .meta { min-width: 0; }
.app-row .meta .nm {
  font-size: 14px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row .meta .sub {
  font-size: 11.5px; color: var(--ink-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row .sla {
  text-align: right;
  font-size: 10.5px; font-weight: 800;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-row .sla .big {
  display: block;
  font-size: 16px; color: var(--ok);
  letter-spacing: 0;
}
.app-row .sla .big.warn { color: var(--warn); }
.app-row .sla .big.bad  { color: var(--bad); }

/* Daily snapshot tiles */
.snap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.snap {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
[data-theme="dark"] .snap { background: var(--surface); border-color: var(--line); }
.snap .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; }
.snap .val { font-size: 22px; font-weight: 800; color: var(--ink); margin: 6px 0 2px; letter-spacing: -0.01em; }
.snap .sub { font-size: 11.5px; color: var(--ink-2); }
.snap .stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-sunrise);
}
.snap.s-blue   .stripe { background: linear-gradient(180deg, var(--engine), var(--violet)); }
.snap.s-green  .stripe { background: linear-gradient(180deg, var(--emerald), #047857); }
.snap.s-yellow .stripe { background: var(--grad-flag); }
.snap.s-red    .stripe { background: linear-gradient(180deg, var(--kr-red), var(--pink)); }

/* Alerts */
.alerts { display: grid; gap: 8px; }
.alert {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink);
}
[data-theme="dark"] .alert { background: var(--surface); border-color: var(--line); }
.alert .ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--kr-yellow-soft); color: #8C6A00;
}
.alert.a-blue .ic { background: var(--engine-soft); color: var(--engine); }
.alert.a-red  .ic { background: var(--kr-red-soft); color: var(--kr-red); }
.alert .arrow { color: var(--ink-3); }

/* ======================================================
   SERVICES CATALOG
   ====================================================== */

.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.search-bar input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-size: 14.5px; color: var(--ink); font-weight: 600;
}
.search-bar input::placeholder { color: var(--ink-3); }

.cat-chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips a {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.cat-chips a.active {
  background: var(--grad-civic);
  background-size: 180% 180%;
  background-position: 20% 50%;
  color: #fff;
  border-color: transparent;
}

.svc-list { display: grid; gap: 10px; }
.svc {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
[data-theme="dark"] .svc { background: var(--surface); border-color: var(--line); }
.svc .ic {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--engine-soft);
  color: var(--engine);
}
.svc .ic.b1 { background: var(--kr-red-soft);    color: var(--kr-red); }
.svc .ic.b2 { background: var(--kr-yellow-soft); color: #8C6A00; }
.svc .ic.b3 { background: var(--engine-soft);    color: var(--engine); }
.svc .ic.b4 { background: var(--violet-soft);    color: var(--violet); }
.svc .ic.b5 { background: var(--emerald-soft);   color: #047857; }
.svc .meta { min-width: 0; }
.svc .meta .nm {
  font-size: 14.5px; font-weight: 800; color: var(--ink);
}
.svc .meta .sub {
  font-size: 12px; color: var(--ink-2); margin-top: 3px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.svc .arrow { color: var(--ink-3); }

/* ======================================================
   SERVICE DETAIL  (charter + apply)
   ====================================================== */

.svc-hero {
  background: var(--grad-sunrise);
  margin: -18px -18px 16px;
  padding: 22px 22px 26px;
  color: #fff;
  border-radius: 0 0 22px 22px;
  position: relative; overflow: hidden;
}
.svc-hero::after {
  content: '';
  position: absolute; right: -30px; bottom: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 65%);
  pointer-events: none;
}
.svc-hero .dept {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: .94;
}
.svc-hero h1 {
  font-size: 24px; margin: 8px 0 4px; letter-spacing: -0.01em; line-height: 1.2;
}
.svc-hero .kn {
  font-family: var(--font-kn);
  font-size: 15.5px; opacity: .94;
}
.svc-hero .meta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px; font-weight: 700;
}
.svc-hero .meta-row > div { display: flex; align-items: center; gap: 6px; opacity: .96; }

.charter { display: grid; gap: 12px; }
.charter h3 {
  font-size: 14px; font-weight: 800;
  margin: 8px 0 4px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.charter .row {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
[data-theme="dark"] .charter .row { background: var(--surface); border-color: var(--line); }
.charter .row .ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--engine-soft); color: var(--engine);
}
.charter .row.r-red    .ic { background: var(--kr-red-soft);    color: var(--kr-red); }
.charter .row.r-yellow .ic { background: var(--kr-yellow-soft); color: #8C6A00; }
.charter .row.r-violet .ic { background: var(--violet-soft);    color: var(--violet); }
.charter .row.r-green  .ic { background: var(--emerald-soft);   color: #047857; }
.charter .row .lbl { font-size: 11.5px; font-weight: 800; color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; }
.charter .row .val { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.charter .row .sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.charter ul.evidence { list-style: none; padding: 0; margin: 6px 0 0; }
.charter ul.evidence li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center;
  font-size: 13px; color: var(--ink);
  padding: 8px 0; border-top: 1px dashed var(--line);
}
.charter ul.evidence li:first-child { border-top: 0; padding-top: 4px; }
.charter ul.evidence .check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--emerald-soft); color: #047857;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}

/* Pinned apply CTA at bottom */
.cta-pin {
  position: sticky; bottom: 0;
  margin: 18px -18px -18px;
  padding: 14px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 32%);
  display: grid; gap: 8px;
}
[data-theme="dark"] .cta-pin {
  background: linear-gradient(180deg, rgba(15,17,22,0), var(--paper) 32%);
}

/* ======================================================
   APPLY FLOW
   ====================================================== */

.stepper { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; }
.stepper .step {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
}
.stepper .step.done    { background: var(--emerald); }
.stepper .step.current { background: var(--grad-sunrise); }
.step-label {
  font-size: 12px; font-weight: 800; color: var(--engine); letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 4px;
}
.step-title {
  font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.step-sub {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: -8px 0 16px;
}

.consent-card {
  background: linear-gradient(135deg, var(--kr-yellow-soft), #FFF1A8 65%, var(--kr-yellow-soft));
  border: 1px solid var(--kr-yellow-2);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.consent-card h4 {
  font-size: 13px; font-weight: 800; color: #6B5400; letter-spacing: 0.10em; text-transform: uppercase;
  margin: 0 0 6px;
}
.consent-card .what {
  font-size: 15px; font-weight: 700; color: #2A1F00; margin: 0 0 10px;
}
.consent-card ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 13px; color: #4A3700; line-height: 1.65;
}
.consent-card ul li::before {
  content: '\2713  '; color: #047857; font-weight: 800;
}
.consent-card .legal {
  margin-top: 12px;
  font-size: 11.5px; color: #6B5400;
  border-top: 1px solid rgba(0,0,0,0.10); padding-top: 10px;
}

.upload-tile {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 14px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.upload-tile + .upload-tile { margin-top: 8px; }
.upload-tile.done {
  background: var(--emerald-soft);
  border: 1px solid rgba(16,185,129,0.35);
  border-style: solid;
}
.upload-tile .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center;
}
.upload-tile.done .ic { background: rgba(16,185,129,0.18); color: #047857; }
.upload-tile .nm { font-size: 14px; font-weight: 800; color: var(--ink); }
.upload-tile .sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.upload-tile .pick {
  padding: 8px 12px; border-radius: 8px;
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 800;
  border: 0;
}
.upload-tile.done .pick { background: var(--surface); color: var(--ink-2); }

.review-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  align-items: baseline;
}
.review-row:first-child { border-top: 0; padding-top: 4px; }
.review-row .k { color: var(--ink-2); font-weight: 700; font-size: 12px; white-space: nowrap; }
.review-row .v {
  color: var(--ink); font-weight: 800; text-align: right;
  max-width: 100%;
  letter-spacing: -0.005em;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Receipt */
.receipt {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 14px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.receipt::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-sunrise);
}
.receipt .stamp {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--emerald-soft); color: #047857;
  display: grid; place-items: center;
  margin: 10px auto 12px;
  border: 4px solid rgba(16,185,129,0.30);
}
.receipt h3 { font-size: 20px; margin: 0 0 4px; letter-spacing: -0.01em; }
.receipt .kn { font-family: var(--font-kn); font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.receipt .ack {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 800; color: var(--ink);
  background: var(--surface); padding: 10px 14px; border-radius: 10px;
  letter-spacing: 0.04em;
  display: inline-block;
}
.receipt .meta { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.7; }

/* ======================================================
   Helpers
   ====================================================== */
.row-flex { display: flex; align-items: center; gap: 10px; }
/* ==========================================================
   Persona switcher (top of Home + More)
   ========================================================== */
.persona-bar {
  display: flex; gap: 10px; overflow-x: auto;
  margin: 0 -18px 14px; padding: 4px 18px 8px;
  scrollbar-width: none;
}
.persona-bar::-webkit-scrollbar { display: none; }
.persona-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-size: 12.5px; font-weight: 800;
  cursor: pointer;
}
.persona-chip.active {
  border-color: var(--kr-red);
  background: linear-gradient(135deg, var(--kr-red-soft), var(--kr-yellow-soft));
  color: var(--ink);
}
.persona-chip .ava {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--engine); color: #fff;
  font-weight: 800; font-size: 11px;
}
.persona-chip.active .ava { background: var(--kr-red); }

/* ==========================================================
   Role-card stack on Home
   ========================================================== */
.role-stack { display: grid; gap: 12px; }
.role-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px 60px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .role-card { background: var(--surface); border-color: var(--line); }
.role-card:active { transform: translateY(1px); }
.role-card .rc-mark {
  position: absolute; left: 14px; top: 16px;
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.role-card.acc-blue   .rc-mark { background: linear-gradient(135deg, var(--engine), #4F46E5); }
.role-card.acc-red    .rc-mark { background: linear-gradient(135deg, var(--kr-red),  #EC4899); }
.role-card.acc-yellow .rc-mark { background: linear-gradient(135deg, #F59E0B,        var(--kr-yellow)); color: #2A1F00; }
.role-card.acc-green  .rc-mark { background: linear-gradient(135deg, #10B981,        #047857); }
.role-card.acc-violet .rc-mark { background: linear-gradient(135deg, var(--violet),  #5B21B6); }

.role-card .rc-eye {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.role-card .rc-title {
  font-size: 18px; font-weight: 800;
  margin: 2px 0 2px;
  letter-spacing: -0.01em;
}
.role-card .rc-title .kn {
  font-family: var(--font-kn);
  font-weight: 600; font-size: 14px;
  color: var(--ink-2);
  margin-left: 6px;
}
.role-card .rc-blurb {
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.5;
  margin-top: 4px;
}
.role-card .rc-bottom {
  margin-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.role-card .rc-bottom .open {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--engine);
  font-size: 12.5px; font-weight: 800;
}

/* ==========================================================
   Role-card DETAIL view (Records / Actions / How-it-works)
   ========================================================== */
.rc-detail-hero {
  margin: -18px -18px 14px;
  padding: 22px 22px 26px;
  color: #fff;
  border-radius: 0 0 22px 22px;
  position: relative; overflow: hidden;
}
.rc-detail-hero.acc-blue   { background: var(--grad-civic); }
.rc-detail-hero.acc-red    { background: linear-gradient(135deg, var(--kr-red), #EC4899, var(--violet)); }
.rc-detail-hero.acc-yellow { background: linear-gradient(135deg, #F59E0B, var(--kr-yellow), #FCD34D); color: #2A1F00; }
.rc-detail-hero.acc-green  { background: linear-gradient(135deg, #047857, #10B981, #6EE7B7); }
.rc-detail-hero.acc-violet { background: linear-gradient(135deg, #5B21B6, var(--violet), #C4B5FD); }
.rc-detail-hero::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 65%);
  pointer-events: none;
}
.rc-detail-hero .rc-eye-h { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: .9; }
.rc-detail-hero h1 { font-size: 26px; margin: 6px 0 4px; letter-spacing: -0.01em; line-height: 1.2; }
.rc-detail-hero .kn { font-family: var(--font-kn); font-size: 15.5px; opacity: .94; }
.rc-detail-hero .rc-detail-blurb { font-size: 13.5px; margin-top: 10px; max-width: 32ch; opacity: .94; line-height: 1.55; }
.rc-detail-hero.acc-yellow .rc-eye-h,
.rc-detail-hero.acc-yellow .rc-detail-blurb { color: #2A1F00; opacity: .85; }

.rc-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 4px 0 14px;
  background: var(--surface);
  border-radius: 12px;
  padding: 4px;
}
.rc-tab {
  padding: 10px 6px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  border: 0;
  font-size: 13px; font-weight: 800;
  text-align: center;
}
.rc-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .rc-tab.is-active { background: var(--surface-2); }

.rc-pane { display: none; }
.rc-pane.is-active { display: block; }

.rc-section { margin-bottom: 14px; }
.rc-section .card + .card { margin-top: 10px; }
.rc-section-h {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.kv-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--line-soft);
  font-size: 13px;
}
.kv-row:first-child { border-top: 0; padding-top: 2px; }
.kv-row .k { color: var(--ink-2); font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.kv-row .v { color: var(--ink); font-weight: 800; text-align: right; flex: 1 1 auto; min-width: 0; max-width: 60%; overflow-wrap: anywhere; word-break: break-word; }

.rc-list { display: grid; gap: 8px; }
.rc-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--ink);
}
[data-theme="dark"] .rc-row { background: var(--surface); border-color: var(--line); }
.rc-row.clickable { cursor: pointer; }
.rc-row-ic {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--engine-soft); color: var(--engine);
  display: grid; place-items: center;
}
.rc-row-m .nm { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rc-row-m .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.rc-row-arrow { color: var(--ink-3); }

.rc-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--ink-2);
  font-size: 13.5px;
  background: var(--surface);
  border-radius: var(--radius);
}

.rc-kid-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.avatar-mini {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad-warm); color: #fff;
  font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.rc-kid-h .nm { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.rc-kid-h .sub { font-size: 12px; color: var(--ink-2); margin-top: 1px; }

.perf-row {
  display: grid; grid-template-columns: 80px 1fr 70px; gap: 10px; align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
}
.perf-k { color: var(--ink-2); font-weight: 700; }
.perf-v { color: var(--ink);    font-weight: 800; text-align: right; }
.perf-bar {
  height: 6px; border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.perf-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--grad-sunrise);
}

.rc-explain {
  background: linear-gradient(135deg, var(--engine-soft), var(--violet-soft));
  border: 1px solid var(--engine);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.rc-explain .what  { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.6; }
.rc-explain .where { font-size: 11.5px; color: var(--ink-2); margin: 10px 0 0; }
.rc-explain .where strong { color: var(--engine); font-weight: 800; }

.rc-flow-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px dashed var(--line-soft);
}
.rc-flow-step:first-child { border-top: 0; padding-top: 4px; }
.rc-flow-n {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--kr-red-soft); color: var(--kr-red);
  font-weight: 800; font-size: 12px;
  display: grid; place-items: center;
}
.rc-flow-t { font-size: 13px; line-height: 1.55; color: var(--ink); }

/* ==========================================================================
   v2 — Vibrant tile redesign (per reference apps)
   Bigger corners, bolder type, vibrant solid colour cards on white surface.
   ========================================================================== */

/* Compact profile pill at top of Home — avatar + name + ward + language chip */
.profile-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px;
  margin-bottom: 18px;
}
.profile-pill .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-warm); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  border: 2px solid var(--paper);
  box-shadow: 0 4px 10px rgba(15,23,42,0.10);
}
.profile-pill .who { flex: 1; min-width: 0; line-height: 1.2; }
.profile-pill .who .hi { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.profile-pill .who .nm { font-size: 16px; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
.profile-pill .who .loc { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.profile-pill .chip-row { display: flex; gap: 6px; align-items: center; }
.profile-pill .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700;
  color: var(--ink);
}
.profile-pill .icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  position: relative;
}
.profile-pill .icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kr-red);
  border: 2px solid var(--paper);
}

/* Welcome H1 */
.welcome-h1 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin: 4px 0 16px;
  color: var(--ink);
  line-height: 1.15;
}
.welcome-h1 .accent {
  background: var(--grad-civic);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Today's hero card — pastel illustration card */
.today-card {
  background: linear-gradient(135deg, #E8F1FE 0%, #DDEBFC 100%);
  border-radius: 22px;
  padding: 18px 18px 18px 20px;
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.today-card.tone-2 { background: linear-gradient(135deg, #FFF1D6 0%, #FFE5A6 100%); }
.today-card.tone-3 { background: linear-gradient(135deg, #F3E8FF 0%, #E0D0FB 100%); }
.today-card.tone-4 { background: linear-gradient(135deg, #DCF7E5 0%, #B8E9CB 100%); }
.today-card .eye { font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--engine); }
.today-card.tone-2 .eye { color: #8C6A00; }
.today-card.tone-3 .eye { color: #5B21B6; }
.today-card.tone-4 .eye { color: #047857; }
.today-card .ttl {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
  line-height: 1.2;
}
.today-card .sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  font-weight: 500;
}
.today-card .cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  font-size: 12px; font-weight: 800;
  color: var(--engine);
}
.today-card.tone-2 .cta { color: #8C6A00; }
.today-card.tone-3 .cta { color: var(--violet); }
.today-card.tone-4 .cta { color: #047857; }
.today-card .art {
  width: 86px; height: 86px;
  border-radius: 20px;
  background: rgba(255,255,255,0.55);
  display: grid; place-items: center;
  font-size: 38px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
}

/* Section heading (v2) */
.h2 {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 22px 0 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.h2 .see-all {
  font-size: 12.5px; font-weight: 700;
  color: var(--engine);
}

/* 2-column vibrant tile grid — for role cards / quick actions */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tile {
  position: relative;
  border-radius: 22px;
  padding: 16px;
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.tile:active { transform: translateY(1px) scale(0.99); }
.tile .ic-bubble {
  width: 38px; height: 38px;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.tile .tile-ttl {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: inherit;
}
.tile .tile-sub {
  font-size: 11.5px;
  margin-top: 3px;
  opacity: 0.78;
  line-height: 1.4;
  font-weight: 600;
}
.tile .tile-meta {
  margin-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0.75;
}
.tile .pct {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
  color: var(--ink);
}

/* Vibrant solid tones — like the reference apps */
.tile.t-yellow { background: linear-gradient(150deg, #FFD466, #FFB347); color: #2A1F00; }
.tile.t-orange { background: linear-gradient(150deg, #FF9966, #FF7A4A); color: #3A1500; }
.tile.t-red    { background: linear-gradient(150deg, #FF8190, #EB4D5F); color: #fff; }
.tile.t-pink   { background: linear-gradient(150deg, #FFB5D0, #F472A8); color: #36062E; }
.tile.t-blue   { background: linear-gradient(150deg, #6FA8F5, #2952A3); color: #fff; }
.tile.t-cyan   { background: linear-gradient(150deg, #6CE0E0, #2BA5B5); color: #002830; }
.tile.t-violet { background: linear-gradient(150deg, #B591F5, #7C3AED); color: #fff; }
.tile.t-green  { background: linear-gradient(150deg, #7DDB99, #10B981); color: #00261A; }
.tile.t-lime   { background: linear-gradient(150deg, #CFE572, #92C13F); color: #1F2A00; }
.tile.t-indigo { background: linear-gradient(150deg, #8A9BFF, #4F46E5); color: #fff; }

.tile .ic-bubble svg { stroke-width: 2; color: rgba(0,0,0,0.7); }
.tile.t-blue   .ic-bubble svg,
.tile.t-violet .ic-bubble svg,
.tile.t-red    .ic-bubble svg,
.tile.t-indigo .ic-bubble svg { color: rgba(0,0,0,0.65); }

/* Service icon grid (banking-style 3-col) */
.svc-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  margin: 10px 0;
}
.svc-icon-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px;
  text-align: center;
  color: var(--ink);
  font-size: 11.5px; font-weight: 700; line-height: 1.25;
}
.svc-icon-grid a .ic-bubble {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.svc-icon-grid a:hover .ic-bubble { background: var(--engine-soft); color: var(--engine); }

/* Compact activity row (transaction-history style) */
.activity {
  display: grid; gap: 8px;
}
.activity-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.activity-row:last-child { border-bottom: 0; }
.activity-row .av {
  width: 40px; height: 40px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--engine-soft);
  color: var(--engine);
}
.activity-row .av.t-red    { background: var(--kr-red-soft);    color: var(--kr-red); }
.activity-row .av.t-yellow { background: var(--kr-yellow-soft); color: #8C6A00; }
.activity-row .av.t-violet { background: var(--violet-soft);    color: var(--violet); }
.activity-row .av.t-green  { background: var(--emerald-soft);   color: #047857; }
.activity-row .nm { font-size: 14px; font-weight: 800; color: var(--ink); }
.activity-row .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.activity-row .amt {
  font-size: 13px; font-weight: 800;
  letter-spacing: -0.01em;
}
.activity-row .amt.ok   { color: var(--emerald); }
.activity-row .amt.warn { color: var(--warn); }
.activity-row .amt.bad  { color: var(--bad); }

/* ==========================================================================
   v2.1 — polish pass: contextual tile stats, section cards, refined details
   ========================================================================== */

/* Better profile pill — more compact, refined */
.profile-pill .av {
  width: 42px; height: 42px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.12);
}
.profile-pill .chip {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.profile-pill .icon-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Today card — bigger emoji, tighter title spacing */
.today-card {
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
  border: 1px solid rgba(255,255,255,0.5);
}
.today-card .art {
  width: 80px; height: 80px;
  font-size: 42px;
  border-radius: 22px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
}
.today-card .ttl {
  font-size: 20px;
}

/* Tile decoration — soft glow blob, stat pill in corner */
.tile {
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}
.tile::before {
  content: '';
  position: absolute;
  top: -20%; right: -25%;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  pointer-events: none;
}
.tile .tile-stat {
  position: absolute;
  top: 14px; right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(4px);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.78);
}
.tile.t-blue   .tile-stat,
.tile.t-violet .tile-stat,
.tile.t-red    .tile-stat,
.tile.t-indigo .tile-stat { color: rgba(0,0,0,0.78); background: rgba(255,255,255,0.85); }

.tile .ic-bubble {
  width: 42px; height: 42px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.tile .tile-meta {
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
}
.tile .pct {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.7);
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Section card wraps for activity lists — feels like a banking app */
.section-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 6px 14px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
[data-theme="dark"] .section-card { background: var(--surface); border-color: var(--line); }

.activity-row {
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}
.section-card .activity-row:last-child { border-bottom: 0; }
.section-card .activity-row .av {
  border-radius: 12px;
}
.section-card .activity-row .nm {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.section-card .activity-row .sub {
  font-size: 11.5px;
  margin-top: 3px;
}

/* Alert chip badge for "for you" */
.section-card .activity-row .amt-arrow {
  color: var(--ink-3);
  width: 22px;
  text-align: center;
}

/* Refined h2 */
.h2 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
}
.h2 .see-all {
  font-size: 12px;
  font-weight: 800;
}

/* Welcome H1 tightening */
.welcome-h1 {
  font-size: 28px;
  margin: 6px 0 18px;
}

/* SVG inside ic-bubble: clean stroke */
.tile .ic-bubble svg {
  width: 22px; height: 22px;
  color: rgba(0,0,0,0.75);
  stroke-width: 2;
}

/* ==========================================================================
   v2.2 — AUTH / LOGIN screens redesign
   Full-bleed gradient bg, floating logo card, white sheet from bottom,
   icon-prefixed inputs, big pill CTA. Matches reference Spaceapp style.
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,0.16), transparent 35%),
    radial-gradient(ellipse at 84% 92%, rgba(255,213,0,0.20), transparent 40%),
    linear-gradient(160deg, #2952A3 0%, #4F46E5 30%, #7C3AED 60%, #DA251D 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  #app-shell.auth-shell { border-radius: 36px; overflow: hidden; }
}

.auth::before {
  content: '';
  position: absolute; right: -120px; top: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,0,0.16), transparent 65%);
  pointer-events: none;
}
.auth::after {
  content: '';
  position: absolute; left: -120px; bottom: 38%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218,37,29,0.14), transparent 65%);
  pointer-events: none;
}

/* Logo card sitting on the gradient */
.auth-logo-block {
  flex: 0 0 auto;
  text-align: center;
  padding: 56px 24px 28px;
  position: relative; z-index: 1;
}
.auth-logo-card {
  width: 88px; height: 88px;
  border-radius: 26px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(14px);
  font-weight: 900;
  font-size: 38px;
  color: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.auth-logo-block .brand-eye {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  opacity: 0.92; text-transform: uppercase;
}
.auth-logo-block .brand-title {
  font-size: 32px; font-weight: 900;
  margin-top: 6px;
  letter-spacing: -0.025em;
}
.auth-logo-block .brand-kn {
  font-family: var(--font-kn);
  font-size: 18px; font-weight: 600;
  opacity: 0.92;
  margin-top: 2px;
}
.auth-logo-block .brand-tag {
  font-size: 13.5px;
  margin-top: 14px;
  max-width: 28ch; margin-left: auto; margin-right: auto;
  opacity: 0.86; line-height: 1.5;
}

/* Floating white sheet from bottom — content area */
.auth-sheet {
  flex: 1;
  margin-top: 8px;
  background: var(--paper);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.18);
  padding: 28px 22px 28px;
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}
[data-theme="dark"] .auth-sheet { background: var(--paper); }

.auth-sheet .auth-eye {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--engine);
}
.auth-sheet .auth-h1 {
  font-size: 26px; font-weight: 900;
  margin: 6px 0 4px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.18;
}
.auth-sheet .auth-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 22px;
}

/* Inputs with leading icon */
.auth-field { margin-bottom: 12px; }
.auth-field .label {
  display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.auth-input {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus-within {
  background: var(--paper);
  border-color: var(--engine);
  box-shadow: 0 0 0 4px rgba(41,82,163,0.12);
}
.auth-input .lead-ic {
  width: 44px; height: 48px;
  display: grid; place-items: center;
  color: var(--ink-3);
}
.auth-input .px {
  padding: 0 12px 0 10px;
  font-weight: 800; color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.auth-input input {
  flex: 1;
  border: 0; outline: none;
  padding: 14px 14px 14px 6px;
  background: transparent;
  font: inherit; font-size: 15.5px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-family: var(--font-base);
  width: 100%;
}
.auth-input input::placeholder { color: var(--ink-3); font-weight: 500; }

/* OTP grid — fits inside auth-sheet */
.auth-otp {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.auth-otp input {
  min-width: 0; width: 100%;
  padding: 14px 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  font-size: 22px; font-weight: 800;
  font-family: var(--font-base);
}
.auth-otp input:focus {
  background: var(--paper);
  border-color: var(--engine);
  outline: none;
  box-shadow: 0 0 0 3px rgba(41,82,163,0.15);
}

/* Helper row — code expires + resend */
.auth-helper-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 4px 0 22px;
}
.auth-helper-row .resend {
  background: none; border: 0; padding: 0;
  color: var(--engine);
  font-weight: 800;
}

/* Pill CTA buttons */
.auth-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 22px;
  border-radius: 18px;
  font-size: 15.5px; font-weight: 900;
  letter-spacing: -0.005em;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #2952A3 0%, #4F46E5 50%, #7C3AED 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(79,70,229,0.32), 0 4px 10px rgba(41,82,163,0.16);
  transition: transform 0.08s ease, box-shadow 0.15s;
}
.auth-cta:active { transform: translateY(2px); box-shadow: 0 8px 18px rgba(79,70,229,0.28); }
.auth-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 18px;
  font-size: 14px; font-weight: 800;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}

/* Stepper inside sheet */
.auth-stepper {
  display: flex; gap: 4px;
  margin-bottom: 18px;
}
.auth-stepper .step {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
}
.auth-stepper .step.done    { background: var(--emerald); }
.auth-stepper .step.current { background: var(--grad-sunrise); background-size: 200% 200%; }

/* Legal footer text */
.auth-legal {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
  text-align: center;
  margin-top: 18px;
}
.auth-legal a { color: var(--ink-2); text-decoration: underline; }

/* Welcome card — value props row */
.auth-values {
  display: grid; gap: 10px;
  margin: 4px 0 18px;
}
.auth-value {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 14px;
}
.auth-value .ic {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--engine-soft); color: var(--engine);
  display: grid; place-items: center;
}
.auth-value.v2 .ic { background: var(--violet-soft); color: var(--violet); }
.auth-value.v3 .ic { background: var(--kr-yellow-soft); color: #8C6A00; }
.auth-value .hd { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.auth-value .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

/* Language picker — two large cards */
.auth-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 18px; }
.auth-lang-card {
  padding: 18px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 2px solid var(--line);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.auth-lang-card:active { transform: scale(0.98); }
.auth-lang-card.active {
  background: linear-gradient(135deg, var(--engine-soft), var(--violet-soft));
  border-color: var(--engine);
}
.auth-lang-card .code {
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.auth-lang-card.active .code { color: var(--engine); }
.auth-lang-card .nm  { font-size: 22px; font-weight: 900; color: var(--ink); margin: 8px 0 4px; letter-spacing: -0.01em; }
.auth-lang-card .nm.kn { font-family: var(--font-kn); }
.auth-lang-card .sub { font-size: 12px; color: var(--ink-2); }

/* ==========================================================================
   v2.2.1 — fix auth scroll + sticky CTAs
   ========================================================================== */

/* Allow the auth shell to scroll on desktop (was overflow:hidden) */
@media (min-width: 768px) {
  #app-shell.auth-shell {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Make .auth itself scrollable on mobile too */
.auth {
  height: auto;
  min-height: 100vh;
}

/* Sticky bottom CTA bar — buttons stay visible while sheet scrolls */
.auth-cta-row {
  position: sticky;
  bottom: 0;
  margin: 18px -22px 0;
  padding: 16px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 35%);
  z-index: 5;
  display: grid;
  gap: 10px;
}
[data-theme="dark"] .auth-cta-row {
  background: linear-gradient(180deg, rgba(15,17,22,0), var(--paper) 35%);
}

/* Stretch sheet bottom-padding so last content row isn't hidden under CTA */
.auth-sheet { padding-bottom: 6px; }

/* CSS-only sticky CTAs — bond the LAST .auth-cta and the LAST .auth-cta-ghost
   inside .auth-sheet to the bottom of the sheet via position: sticky.
   Z-stack them above scrolling content. */

.auth-sheet {
  display: flex;
  flex-direction: column;
  padding-bottom: 0; /* sticky CTAs supply their own bottom space */
}

/* All sheet children except the CTA buttons keep their natural flow */
.auth-sheet > .auth-cta {
  position: sticky;
  bottom: 56px; /* leave room for ghost button below */
  margin: 18px -22px 0;
  width: calc(100% + 44px);
  border-radius: 0;
  padding: 16px 22px;
  z-index: 6;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0, var(--paper) 18%) padding-box,
    linear-gradient(135deg, #2952A3, #4F46E5, #7C3AED);
  background-clip: padding-box, border-box;
}

/* Simpler approach: instead of complex sticky pattern, just put CTAs in a
   fixed-bottom bar inside the sheet. Override the above with a cleaner rule. */
.auth-sheet > .auth-cta,
.auth-sheet > .auth-cta-ghost {
  position: relative;
  bottom: auto;
  margin: 10px 0 0;
  width: 100%;
  border-radius: 18px;
}
.auth-sheet > .auth-cta:nth-last-of-type(1) {
  /* the bottom-most CTA in the sheet */
}

/* Real fix: wrap CTAs via JS already shown will be next. For now, ensure
   the sheet's parent (.auth) is scrollable on mobile and desktop. */
.auth { overflow-y: auto; max-height: 100vh; }
@media (min-width: 768px) {
  #app-shell.auth-shell { overflow: hidden; }
  .auth { max-height: calc(100vh - 48px); }
}


/* v2.2.1 OVERRIDE — clean sticky CTA row implementation */
.auth-sheet > .auth-cta,
.auth-sheet > .auth-cta-ghost {
  /* reset earlier broken sticky attempts — these now sit normally inside .auth-cta-row */
  position: static;
  bottom: auto;
  margin: 0;
  width: 100%;
  border-radius: 18px;
}
.auth-cta-row {
  position: sticky;
  bottom: 0;
  margin: 18px -22px 0;
  padding: 16px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper) 40%);
  z-index: 8;
  display: grid;
  gap: 10px;
}
[data-theme="dark"] .auth-cta-row {
  background: linear-gradient(180deg, rgba(15,17,22,0), var(--paper) 40%);
}
.auth {
  overflow-y: auto;
  max-height: none;
  min-height: 100vh;
}
@media (min-width: 768px) {
  #app-shell.auth-shell {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .auth {
    min-height: calc(100vh - 48px);
    max-height: none;
  }
}

/* ==========================================================================
   v2.3 — Polish inside-app screens
   ========================================================================== */

/* --- App-bar refresh: matches the auth screens --- */
.appbar {
  background: var(--paper);
  padding: 14px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.appbar .back,
.appbar .icon-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--surface);
}
.appbar .title { font-size: 17px; font-weight: 900; letter-spacing: -0.015em; }
.appbar .title .kn { font-size: 13px; margin-top: 1px; opacity: 0.7; }

/* --- Role-card DETAIL hero — more presence --- */
.rc-detail-hero {
  margin: -18px -18px 16px;
  padding: 30px 22px 38px;
  border-radius: 0 0 28px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 160px;
}
.rc-detail-hero::before {
  content: '';
  position: absolute; right: -50px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
  pointer-events: none;
}
.rc-detail-hero::after {
  content: '';
  position: absolute; left: -40px; bottom: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  pointer-events: none;
}
.rc-detail-hero .rc-eye-h {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255,255,255,0.20);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  margin-bottom: 12px;
}
.rc-detail-hero h1 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 4px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.rc-detail-hero .kn {
  font-family: var(--font-kn);
  font-size: 17px;
  font-weight: 600;
  opacity: 0.92;
}
.rc-detail-hero .rc-detail-blurb {
  font-size: 14px;
  font-weight: 500;
  margin: 14px 0 0;
  line-height: 1.55;
  opacity: 0.94;
  max-width: 32ch;
}

/* --- Pill-tab style for Records / Actions / How this works --- */
.rc-tabs {
  background: var(--surface);
  border-radius: 16px;
  padding: 5px;
  margin: 0 0 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.rc-tab {
  padding: 11px 6px;
  border-radius: 12px;
  font-size: 13px; font-weight: 800;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  transition: all 0.15s;
}
.rc-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}

/* --- Section card — softer, more breathing room --- */
.rc-section {
  margin-bottom: 16px;
}
.rc-section-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 4px 10px;
}
.rc-section-h::before {
  content: '';
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--engine);
}

.rc-section .card,
.rc-pane > .card {
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.rc-pane > .card + .card { margin-top: 10px; }

/* --- Better key-value rows — no overlap on long keys/values --- */
.kv-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kv-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.kv-row .k {
  color: var(--ink-2);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 55%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.kv-row .v {
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 55%;
  letter-spacing: -0.005em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kv-row .v .badge { font-size: 10.5px; }

/* --- Empty state --- */
.rc-empty {
  text-align: center;
  padding: 32px 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  background: var(--surface);
  border-radius: 18px;
}

/* --- Action rows under Actions tab --- */
.rc-list { display: grid; gap: 8px; }
.rc-row {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
}
.rc-row.clickable { cursor: pointer; transition: transform 0.08s, box-shadow 0.15s; }
.rc-row.clickable:active { transform: translateY(1px); }
.rc-row-ic {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--engine-soft);
  color: var(--engine);
  display: grid; place-items: center;
}
.rc-row-m .nm { font-size: 14px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); }
.rc-row-m .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.rc-row-arrow { color: var(--ink-3); }

/* --- How-it-works pane content --- */
.rc-explain {
  background: linear-gradient(135deg, var(--engine-soft), var(--violet-soft));
  border: 0;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}
.rc-explain .what {
  font-size: 14.5px;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}
.rc-explain .where {
  font-size: 11.5px;
  color: var(--engine);
  margin: 12px 0 0;
  font-weight: 700;
}
.rc-explain .where strong { color: var(--engine-2); }

.rc-flow-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.rc-flow-step:first-child { border-top: 0; padding-top: 4px; }
.rc-flow-n {
  width: 28px; height: 28px;
  border-radius: 10px;
  background: var(--kr-red-soft);
  color: var(--kr-red);
  font-weight: 900; font-size: 12.5px;
  display: grid; place-items: center;
}
.rc-flow-t {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.rc-flow-t strong { font-weight: 800; }

/* --- Kid rows on Parent role --- */
.rc-kid-h {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  padding: 0 4px;
}
.rc-kid-h .nm { font-size: 16px; font-weight: 900; letter-spacing: -0.015em; color: var(--ink); }
.rc-kid-h .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.avatar-mini {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  font-weight: 900; font-size: 14px;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
}

/* --- Performance bars --- */
.perf-row {
  grid-template-columns: 90px 1fr 80px;
  padding: 8px 0;
  font-size: 13px;
}
.perf-k { color: var(--ink-2); font-weight: 700; }
.perf-v { color: var(--ink); font-weight: 800; text-align: right; }
.perf-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.perf-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--grad-sunrise);
}

/* ==========================================================================
   v2.4 — Cases + Dashboard with charts & graphs
   ========================================================================== */

/* Inner-page hero — used by Cases / Dashboard / role detail when no specific hero exists */
.page-hero {
  margin: -18px -18px 14px;
  padding: 28px 22px 30px;
  border-radius: 0 0 28px 28px;
  background: var(--grad-civic);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; right: -60px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
  pointer-events: none;
}
.page-hero .eye {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255,255,255,0.20);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  margin-bottom: 10px;
}
.page-hero h1 {
  font-size: 26px; font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -0.02em; line-height: 1.15;
}
.page-hero .sub {
  font-size: 13.5px;
  opacity: 0.94;
  line-height: 1.55;
  max-width: 38ch;
  font-weight: 500;
}

/* ---------- Cases-specific blocks ---------- */
.cases-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.cases-summary .tile-mini {
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  text-align: left;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.cases-summary .tile-mini .num {
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cases-summary .tile-mini .lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Stacked rung bar chart — L0 to L4 distribution */
.rung-chart {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.rung-chart .h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.rung-chart .h .ttl { font-size: 14px; font-weight: 800; color: var(--ink); }
.rung-chart .h .sub { font-size: 11.5px; color: var(--ink-2); }
.rung-chart .bars { display: grid; gap: 8px; }
.rung-chart .bar {
  display: grid; grid-template-columns: 30px 1fr 24px; gap: 10px; align-items: center;
}
.rung-chart .bar .lbl {
  font-size: 11px; font-weight: 900; letter-spacing: 0.02em;
  color: var(--ink-2);
}
.rung-chart .bar .track {
  height: 10px; border-radius: 6px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.rung-chart .bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 6px;
}
.rung-chart .bar .num {
  font-size: 12.5px; font-weight: 800;
  color: var(--ink);
  text-align: right;
}
.rung-chart .bar.L0 .fill { background: linear-gradient(90deg, #94A3B8, #64748B); }
.rung-chart .bar.L1 .fill { background: linear-gradient(90deg, #93C5FD, var(--engine)); }
.rung-chart .bar.L2 .fill { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
.rung-chart .bar.L3 .fill { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.rung-chart .bar.L4 .fill { background: linear-gradient(90deg, var(--violet), #5B21B6); }

/* Case row with progress through ladder */
.case-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s;
  display: block;
  color: var(--ink);
}
.case-card:active { transform: translateY(1px); }
.case-card .top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 12px;
}
.case-card .top .nm {
  font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3;
}
.case-card .top .meta {
  font-size: 11.5px; color: var(--ink-2); margin-top: 4px;
}
.case-card .ladder {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin: 6px 0 4px;
}
.case-card .ladder .step {
  height: 6px; border-radius: 3px;
  background: var(--surface-2);
}
.case-card .ladder .step.done { background: var(--emerald); }
.case-card .ladder .step.current { background: var(--grad-sunrise); }
.case-card .bottom {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.case-card .bottom .rung-pill {
  padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900;
}
.case-card .bottom .rung-pill.L0 { background: var(--surface-2);     color: var(--ink-2); }
.case-card .bottom .rung-pill.L1 { background: var(--engine-soft);   color: var(--engine); }
.case-card .bottom .rung-pill.L2 { background: var(--kr-yellow-soft);color: #8C6A00; }
.case-card .bottom .rung-pill.L3 { background: var(--kr-red-soft);   color: var(--kr-red); }
.case-card .bottom .rung-pill.L4 { background: var(--violet-soft);   color: var(--violet); }

/* ---------- Dashboard KPI hero (big top card) ---------- */
.kpi-hero {
  background: linear-gradient(135deg, #2952A3 0%, #4F46E5 50%, #7C3AED 100%);
  color: #fff;
  border-radius: 22px;
  padding: 20px 22px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(79,70,229,0.22);
}
.kpi-hero::before {
  content: '';
  position: absolute; right: -50px; top: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 70%);
}
.kpi-hero .eye { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; }
.kpi-hero .val { font-size: 36px; font-weight: 900; letter-spacing: -0.025em; margin: 4px 0 4px; }
.kpi-hero .sub { font-size: 13px; opacity: 0.92; margin-bottom: 14px; }
.kpi-hero .delta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  font-size: 11.5px; font-weight: 800;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.kpi-hero .chart { margin: 8px -22px -22px; padding: 14px 22px 12px; background: rgba(255,255,255,0.10); }

/* SVG sparkline / area chart */
.spark { width: 100%; height: 56px; display: block; }
.spark-area-fill   { fill: rgba(255,255,255,0.18); }
.spark-area-stroke { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot         { fill: #fff; }

/* Donut ring (for Charter Compliance) */
.donut {
  display: flex; align-items: center; gap: 14px;
}
.donut-svg { width: 80px; height: 80px; flex-shrink: 0; }
.donut-svg .bg-arc { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.donut-svg .fg-arc { fill: none; stroke-width: 8; stroke-linecap: round; }
.donut .info .num { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.donut .info .lbl { font-size: 11.5px; color: var(--ink-2); }
.donut .info .delta { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-top: 4px; }

/* KPI card (regular, secondary tier) */
.kpi-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  position: relative;
  overflow: hidden;
}
.kpi-card .eye { font-size: 10.5px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.kpi-card .val { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0 4px; }
.kpi-card .sub { font-size: 11.5px; color: var(--ink-2); }
.kpi-card .delta-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; margin-top: 8px; }
.kpi-card.tone-green .delta-pill  { background: var(--emerald-soft);   color: #047857; }
.kpi-card.tone-yellow .delta-pill { background: var(--kr-yellow-soft); color: #8C6A00; }
.kpi-card.tone-red .delta-pill    { background: var(--kr-red-soft);    color: var(--kr-red); }
.kpi-card.tone-violet .delta-pill { background: var(--violet-soft);    color: var(--violet); }
.kpi-card.tone-blue .delta-pill   { background: var(--engine-soft);    color: var(--engine); }

/* Mini bar chart inside a KPI card */
.mini-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 36px; margin-top: 10px;
}
.mini-bars .b {
  flex: 1;
  border-radius: 3px;
  min-height: 4px;
}
.mini-bars.tone-blue   .b { background: var(--engine); }
.mini-bars.tone-blue   .b.dim { background: var(--engine-soft); }
.mini-bars.tone-green  .b { background: var(--emerald); }
.mini-bars.tone-green  .b.dim { background: var(--emerald-soft); }
.mini-bars.tone-violet .b { background: var(--violet); }
.mini-bars.tone-violet .b.dim { background: var(--violet-soft); }
.mini-bars.tone-red    .b { background: var(--kr-red); }
.mini-bars.tone-red    .b.dim { background: var(--kr-red-soft); }
/* ==========================================================================
   v2.6 — Onboarding restyle: Karnataka flag gradients, glass, animation
   ========================================================================== */

/* Replace .auth background — Karnataka red→amber→yellow base, with violet + engine-blue
   blurred dots scattered behind, and a soft top vignette to keep the logo legible. */
.auth {
  background: radial-gradient(circle at 88% 12%, rgba(41,82,163,0.42), transparent 28%), radial-gradient(circle at 8% 36%, rgba(124,58,237,0.42), transparent 30%), radial-gradient(circle at 92% 68%, rgba(79,70,229,0.38), transparent 24%), radial-gradient(circle at 6% 84%, rgba(16,185,129,0.28), transparent 22%), radial-gradient(circle at 65% 28%, rgba(236,72,153,0.32), transparent 26%), linear-gradient(160deg, #B71C16 0%, #DA251D 18%, #E94F2F 38%, #F59E0B 62%, #FFD500 100%) !important;
}

/* Larger floating glass blobs — animated drift */
.auth::before,
.auth::after { display: none; }
.auth-bg-blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.85;
  z-index: 0;
  animation: blobDrift 18s ease-in-out infinite alternate;
}
.auth-bg-blob.b1 { width: 260px; height: 260px; right: -60px; top: -40px;  background: rgba(255,255,255,0.30); animation-delay:  0s; }
.auth-bg-blob.b2 { width: 220px; height: 220px; left:  -50px; top: 38%;    background: rgba(124,58,237,0.55); animation-delay: -6s; }
.auth-bg-blob.b3 { width: 200px; height: 200px; right: -40px; bottom: 32%; background: rgba(41,82,163,0.55);  animation-delay: -3s; }
.auth-bg-blob.b4 { width: 180px; height: 180px; left:  20%;   bottom: -40px;background: rgba(16,185,129,0.45); animation-delay: -9s; }
.auth-bg-blob.b5 { width: 150px; height: 150px; left:  60%;   top:  10%;   background: rgba(236,72,153,0.50); animation-delay: -12s; }
@keyframes blobDrift {
  0%   { transform: translate(0, 0)     scale(1); }
  50%  { transform: translate(20px, -16px) scale(1.06); }
  100% { transform: translate(-12px, 22px) scale(0.96); }
}

/* Logo block now floats above blobs with stronger glass */
.auth-logo-block { position: relative; z-index: 2; }
.auth-logo-card {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 22px 50px rgba(0,0,0,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}
.auth-logo-block .brand-title,
.auth-logo-block .brand-eye,
.auth-logo-block .brand-kn,
.auth-logo-block .brand-tag {
  text-shadow: 0 2px 12px rgba(0,0,0,0.32);
}

/* Sheet — glass top edge + subtle inner highlight */
.auth-sheet {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 -22px 64px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.65);
  border-radius: 32px 32px 0 0;
}
.auth-sheet::before {
  /* glass shimmer near the top edge */
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
  border-radius: 32px 32px 0 0;
}

/* Sticky CTA row — glass background, soft top fade */
.auth-cta-row {
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.86) 42%, var(--paper) 100%);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Primary CTA — flag-gradient with engine-blue depth shadow + subtle inner glow */
.auth-cta {
  background: linear-gradient(135deg, #DA251D 0%, #E94F2F 32%, #F59E0B 64%, #FFC72C 100%);
  box-shadow:
    0 16px 32px rgba(218,37,29,0.30),
    0 4px 10px rgba(255,154,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.auth-cta::after {
  /* subtle moving sheen on hover */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.auth-cta:hover::after { transform: translateX(100%); }

/* Inputs — glass treatment too */
.auth-input,
.auth-otp input {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-color: rgba(229,231,235,0.85);
}
.auth-input:focus-within {
  background: var(--paper);
  border-color: var(--kr-red);
  box-shadow: 0 0 0 4px rgba(218,37,29,0.14);
}
.auth-otp input:focus {
  border-color: var(--kr-red);
  box-shadow: 0 0 0 3px rgba(218,37,29,0.16);
}

/* Language picker cards — glass active state w/ flag accent */
.auth-lang-card.active {
  background: linear-gradient(135deg, rgba(218,37,29,0.10), rgba(255,213,0,0.18));
  border-color: var(--kr-red);
  box-shadow: 0 8px 24px rgba(218,37,29,0.18);
}

/* Step pills inside the role picker — active glass border */
.auth-sheet button[class*="role-pick"][style*="border: 2px solid var(--engine)"] {
  /* role cards that are picked */
}

/* ----- Page transitions ----- */
@keyframes authIn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes authLogoIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes authBlobFade {
  0%   { opacity: 0; }
  100% { opacity: 0.85; }
}

.auth-logo-block { animation: authLogoIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.auth-sheet      { animation: authIn 520ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.auth-bg-blob    { animation: authBlobFade 800ms ease-out both, blobDrift 18s ease-in-out infinite alternate; }

/* Stepper segment fill animation */
.auth-stepper .step.current {
  background-size: 200% 200%;
  animation: gradMove 2.4s ease-in-out infinite;
}
@keyframes gradMove {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Smooth hover/press transitions */
.auth-cta, .auth-cta-ghost, .auth-input, .auth-otp input,
.auth-lang-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s ease, background 0.2s ease;
}
.auth-cta:hover  { transform: translateY(-1.5px); box-shadow: 0 20px 36px rgba(218,37,29,0.32), 0 6px 12px rgba(255,154,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35); }
.auth-cta:active { transform: translateY(1px); }
.auth-lang-card:hover  { transform: translateY(-2px); }
.auth-lang-card:active { transform: scale(0.97); }

/* Make sure tooltip-like content stays readable on the flag gradient */
.auth .auth-logo-block .brand-tag { color: rgba(255,255,255,0.94); }

/* v2.6.1 — guaranteed Karnataka flag gradient (high specificity) */
#app-shell.auth-shell > .auth.auth-flag,
.auth.auth-flag {
  background: radial-gradient(circle at 88% 12%, rgba(41,82,163,0.42), transparent 28%), radial-gradient(circle at 8% 36%, rgba(124,58,237,0.42), transparent 30%), radial-gradient(circle at 92% 68%, rgba(79,70,229,0.38), transparent 24%), radial-gradient(circle at 6% 84%, rgba(16,185,129,0.28), transparent 22%), radial-gradient(circle at 65% 28%, rgba(236,72,153,0.32), transparent 26%), linear-gradient(160deg, #B71C16 0%, #DA251D 18%, #E94F2F 38%, #F59E0B 62%, #FFD500 100%) !important;
  background-attachment: scroll !important;
}

.auth.auth-flag .auth-cta {
  background: linear-gradient(135deg, #DA251D 0%, #E94F2F 32%, #F59E0B 64%, #FFC72C 100%) !important;
}

/* ==========================================================================
   v2.7 — Welcome screen choreographed entrance (~3 seconds)
   ========================================================================== */

/* Disable the auto-applied authLogoIn / authIn for the welcome screen,
   we replace them with a custom choreographed sequence. */
.welcome-anim.wa-logo,
.welcome-anim.wa-sheet {
  animation: none !important;
}

/* Per-element keyframes */
@keyframes waLogoIn {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.86); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(2px)   scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes waSheetIn {
  0%   { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes waSlideUp {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes waSlideUpScale {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes waFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Base state: invisible until animated */
.welcome-anim { opacity: 0; }

/* Choreography (cubic-bezier easing across the board for a calm rise) */
.welcome-anim.wa-logo  { animation: waLogoIn  900ms 100ms  cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-sheet { animation: waSheetIn 850ms 700ms  cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d1    { animation: waSlideUp 650ms 1300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d2    { animation: waSlideUp 650ms 1450ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d3    { animation: waSlideUp 650ms 1700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d4    { animation: waSlideUp 650ms 1900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d5    { animation: waSlideUp 650ms 2100ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d6    { animation: waSlideUpScale 700ms 2400ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-anim.wa-d7    { animation: waFade   600ms 2900ms ease-out both; }

/* Make the logo float gently after it lands */
.welcome-anim.wa-logo .auth-logo-card {
  animation: waLogoFloat 4.5s 1300ms ease-in-out infinite alternate;
}
@keyframes waLogoFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

/* Background blobs drift faster + stronger during welcome */
.auth.auth-flag .auth-bg-blob { animation-duration: 14s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .welcome-anim { opacity: 1 !important; animation: none !important; }
  .welcome-anim.wa-logo .auth-logo-card { animation: none !important; }
}

/* ==========================================================================
   v2.8 — Per-element welcome hero animations (logo + brand reveal)
   ========================================================================== */

/* Disable the parent waLogoIn animation since we'll animate each child */
.welcome-anim.wa-logo { animation: none !important; opacity: 1; }
.welcome-anim.wa-logo > * { opacity: 0; }

/* Logo card: scale + rotate in */
@keyframes wlCard {
  0%   { opacity: 0; transform: rotate(-20deg) scale(0.4); filter: blur(10px); }
  60%  { opacity: 1; transform: rotate(4deg)  scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: rotate(0)     scale(1); }
}
@keyframes wlGlyph {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wlSlideUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes wlChar {
  0%   { opacity: 0; transform: translateY(28px) scale(0.7) rotate(-6deg); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.05) rotate(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes wlKnSlide {
  0%   { opacity: 0; transform: translateX(-14px); letter-spacing: 0.3em; }
  100% { opacity: 1; transform: translateX(0);     letter-spacing: 0; }
}
@keyframes wlTagFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0.94; transform: translateY(0); }
}

/* Card lands first */
.welcome-anim.wa-logo .wl-card  { animation: wlCard  900ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-glyph { animation: wlGlyph 500ms 700ms cubic-bezier(0.22, 1, 0.36, 1) both; display: inline-block; transform-origin: center; }

/* Eyebrow drops in */
.welcome-anim.wa-logo .wl-eye   { animation: wlSlideUp 600ms 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* JANATA letters cascade one by one */
.welcome-anim.wa-logo .wl-title       { opacity: 1; }
.welcome-anim.wa-logo .wl-title span  { opacity: 0; }
.welcome-anim.wa-logo .wl-title .wl-0 { animation: wlChar 700ms 1150ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-title .wl-1 { animation: wlChar 700ms 1230ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-title .wl-2 { animation: wlChar 700ms 1310ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-title .wl-3 { animation: wlChar 700ms 1390ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-title .wl-4 { animation: wlChar 700ms 1470ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.welcome-anim.wa-logo .wl-title .wl-5 { animation: wlChar 700ms 1550ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Kannada slides in from left */
.welcome-anim.wa-logo .wl-kn  { animation: wlKnSlide 800ms 1750ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Tag fades up last */
.welcome-anim.wa-logo .wl-tag { animation: wlTagFade 700ms 2050ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* After-entrance: logo card floats forever */
.welcome-anim.wa-logo .wl-card {
  animation: wlCard 900ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             wlFloat 4.5s 1100ms ease-in-out infinite alternate;
}
@keyframes wlFloat {
  0%   { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-7px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-anim.wa-logo > *,
  .welcome-anim.wa-logo .wl-title span { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   v2.9 — Cinematic welcome: logo plays CENTERED first, then slides up
   while the white sheet rises beneath it.
   ========================================================================== */

/* Override prior wa-sheet/wa-d* animations for welcome — re-time after the centered logo show */
.welcome-anim.wa-sheet {
  animation: waSheetRiseAfter 800ms 2400ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes waSheetRiseAfter {
  0%   { opacity: 0; transform: translateY(110%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Re-stagger sheet contents to start AFTER the sheet lands (2.4s + 0.8s ≈ 3.2s) */
.welcome-anim.wa-d1 { animation: waSlideUp 600ms 3200ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d2 { animation: waSlideUp 600ms 3320ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d3 { animation: waSlideUp 600ms 3500ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d4 { animation: waSlideUp 600ms 3640ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d5 { animation: waSlideUp 600ms 3780ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d6 { animation: waSlideUpScale 700ms 4000ms cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.welcome-anim.wa-d7 { animation: waFade 600ms 4400ms ease-out both !important; }

/* Logo block: starts pushed toward vertical centre, slides up to final
   resting position at the same moment the sheet rises. */
.welcome-anim.wa-logo {
  animation: waLogoCenterToTop 800ms 2400ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes waLogoCenterToTop {
  0%   { transform: translateY(28vh) scale(1.06); }
  100% { transform: translateY(0)    scale(1); }
}

/* While the logo is centered (the first ~2.4s), make the brand text larger
   and the card more prominent, then ease back as it docks at the top. */
.welcome-anim.wa-logo .wl-card {
  animation:
    wlCard  900ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
    wlCardShrink 800ms 2400ms cubic-bezier(0.22, 1, 0.36, 1) both,
    wlFloat 4.5s 3300ms ease-in-out infinite alternate;
}
@keyframes wlCardShrink {
  0%   { width: 110px; height: 110px; border-radius: 30px; font-size: 46px; }
  100% { width: 88px;  height: 88px;  border-radius: 26px; font-size: 38px; }
}

/* Bigger title while centered, normal once docked */
.welcome-anim.wa-logo .wl-title       { font-size: 44px; transition: font-size 600ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms; }
.welcome-anim.wa-logo.docked .wl-title{ font-size: 32px; }

@media (prefers-reduced-motion: reduce) {
  .welcome-anim.wa-logo,
  .welcome-anim.wa-sheet { animation: none !important; transform: none !important; }
  .welcome-anim.wa-logo .wl-card { width: 88px !important; height: 88px !important; font-size: 38px !important; }
  .welcome-anim.wa-logo .wl-title { font-size: 32px !important; }
}

/* v2.10 — Generated logo image style */
.wl-glyph-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: 22px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}
.auth-logo-card { background: transparent; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* v2.11 — Compact More page */
.more-profile { background: var(--grad-warm); color: #fff; padding: 18px; border-radius: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 22px rgba(218,37,29,0.22); }
.more-profile-av { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,0.20); border: 2px solid rgba(255,255,255,0.32); display: grid; place-items: center; font-weight: 900; font-size: 17px; }
.more-profile-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.92; }
.more-profile-nm  { font-size: 17px; font-weight: 900; margin-top: 2px; letter-spacing: -0.01em; }
.more-profile-id  { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.84; margin-top: 2px; }
.more-grp { margin-bottom: 16px; }
.more-grp-h { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0 4px 8px; }
.more-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.more-row { display: grid; grid-template-columns: 36px 1fr 20px; gap: 12px; align-items: center; padding: 13px 16px; color: var(--ink); border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; text-decoration: none; }
.more-row.more-row-bt { border-top: 1px solid var(--line-soft); }
.more-row-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--engine-soft); color: var(--engine); display: grid; place-items: center; }
.more-row-nm  { font-size: 14px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); }
.more-row-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.more-row-ar  { color: var(--ink-3); }

/* ==========================================================================
   v2.12 — Mobile viewport fixes (bottom cutoff on phones)
   ========================================================================== */

/* Use dynamic viewport units so mobile Chrome's address bar doesn't eat content */
html, body { height: 100%; }
#app-shell {
  min-height: 100vh;
  min-height: 100dvh;  /* dynamic vh — adapts as address bar shows/hides */
}
.auth {
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 768px) {
  #app-shell {
    min-height: calc(100dvh - 48px);
    height: calc(100dvh - 48px);
  }
  .auth {
    min-height: calc(100dvh - 48px);
    max-height: none;
  }
}

/* Bottom nav respects iPhone home indicator + Android navigation bar */
.bottom-nav {
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
}

/* View content reserves space for bottom nav + safe area */
.view {
  padding-bottom: calc(var(--nav-h) + 32px + env(safe-area-inset-bottom, 0));
}

/* Auth sticky CTA respects safe area too */
.auth-cta-row {
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0));
}

/* Welcome screen: shrink the logo's centred-position offset on short screens
   so the white sheet doesn't get pushed below the fold before it animates in */
@media (max-height: 720px) {
  @keyframes waLogoCenterToTop {
    0%   { transform: translateY(18vh) scale(1.02); }
    100% { transform: translateY(0)    scale(1); }
  }
  .auth-logo-block { padding: 30px 22px 18px; }
  .welcome-anim.wa-logo .wl-card {
    width: 88px; height: 88px;
    border-radius: 24px;
  }
}
@media (max-height: 620px) {
  .auth-logo-block { padding: 18px 22px 14px; }
  .welcome-anim.wa-logo .wl-card { width: 72px; height: 72px; border-radius: 20px; }
  .welcome-anim.wa-logo .brand-title { font-size: 28px; }
  .welcome-anim.wa-logo .brand-eye { font-size: 10px; }
  .welcome-anim.wa-logo .brand-tag { font-size: 12px; max-width: 28ch; }
  .auth-sheet { padding-top: 18px; }
  .auth-sheet .auth-h1 { font-size: 22px; }
}

/* On very short screens, condense the welcome value rows */
@media (max-height: 580px) {
  .auth-values .auth-value { padding: 8px 12px; }
  .auth-value .ic { width: 30px; height: 30px; }
  .auth-value .hd { font-size: 12.5px; }
  .auth-value .sub { font-size: 10.5px; }
}

/* ==========================================================================
   v2.13 — Aggressive height reduction so everything fits on phone screens
   ========================================================================== */

/* Welcome hero — make it ALWAYS compact on mobile so the white sheet fits */
@media (max-width: 767px) {
  .auth-logo-block {
    padding: 22px 22px 14px !important;
  }
  .auth-logo-card {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }
  .auth-logo-card span,
  .wl-glyph-img { font-size: 28px !important; }
  .welcome-anim.wa-logo .wl-card {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
  }
  .auth-logo-block .brand-eye  { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
  .auth-logo-block .brand-title,
  .welcome-anim.wa-logo .wl-title  { font-size: 26px !important; margin-top: 4px !important; }
  .auth-logo-block .brand-kn   { font-size: 14px !important; margin-top: 0 !important; }
  .auth-logo-block .brand-tag  { font-size: 12px !important; margin-top: 10px !important; max-width: 28ch !important; }

  /* Tighter sheet */
  .auth-sheet { padding: 18px 18px 0 !important; border-radius: 26px 26px 0 0 !important; }
  .auth-sheet::before { height: 50px !important; }
  .auth-sheet .auth-eye { font-size: 10px !important; letter-spacing: 0.14em !important; }
  .auth-sheet .auth-h1  { font-size: 22px !important; margin: 4px 0 2px !important; line-height: 1.2 !important; }
  .auth-sheet .auth-sub { font-size: 12px !important; margin-bottom: 14px !important; }

  /* Compact value rows */
  .auth-values { gap: 8px !important; margin: 4px 0 12px !important; }
  .auth-value {
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .auth-value .ic { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .auth-value .ic svg { width: 18px !important; height: 18px !important; }
  .auth-value .hd  { font-size: 12.5px !important; line-height: 1.25 !important; }
  .auth-value .sub { font-size: 10.5px !important; margin-top: 1px !important; }

  /* Sticky CTA — compact */
  .auth-cta-row {
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0)) !important;
    margin: 12px -18px 0 !important;
  }
  .auth-cta {
    padding: 13px 18px !important;
    font-size: 14.5px !important;
    border-radius: 14px !important;
  }
  .auth-cta-ghost { padding: 11px 18px !important; font-size: 13.5px !important; }
  .auth-legal { font-size: 10.5px !important; margin-top: 8px !important; }

  /* Stepper compact */
  .auth-stepper { margin-bottom: 12px !important; }
  .auth-stepper .step { height: 4px !important; }

  /* Override the centered-animation translateY for phones — much smaller */
  @keyframes waLogoCenterToTop {
    0%   { transform: translateY(8vh) scale(1.02); }
    100% { transform: translateY(0)    scale(1); }
  }

  /* Stop the auth-logo-card growing during centered phase on phones */
  @keyframes wlCardShrink {
    0%, 100% { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; }
  }

  /* OTP grid: tighter on phones so it never overflows */
  .auth-otp { gap: 6px !important; }
  .auth-otp input { padding: 11px 0 !important; font-size: 20px !important; }
}

/* On very short screens, cut even more */
@media (max-width: 767px) and (max-height: 700px) {
  .auth-logo-block { padding: 14px 22px 10px !important; }
  .auth-logo-card,
  .welcome-anim.wa-logo .wl-card {
    width: 56px !important; height: 56px !important; border-radius: 16px !important;
  }
  .auth-logo-block .brand-title,
  .welcome-anim.wa-logo .wl-title { font-size: 22px !important; }
  .auth-logo-block .brand-kn  { font-size: 12px !important; }
  .auth-logo-block .brand-tag { font-size: 11px !important; margin-top: 6px !important; }
  .auth-sheet .auth-h1 { font-size: 20px !important; }
  .auth-sheet .auth-sub { font-size: 11.5px !important; margin-bottom: 10px !important; }
  .auth-value { padding: 8px 10px !important; }
}

/* ==========================================================================
   v2.14 — Fix role-picker scroll on mobile
   ========================================================================== */

/* On mobile, let the document scroll naturally — don't cap heights anywhere */
@media (max-width: 767px) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
  }
  #app-shell,
  #app-shell.auth-shell {
    min-height: 100dvh;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .auth {
    min-height: 100dvh;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .auth-sheet {
    overflow: visible !important;
  }

  /* Re-anchor sticky CTA to the viewport bottom (works even when document scrolls) */
  .auth-cta-row {
    position: sticky !important;
    bottom: 0 !important;
    /* extra blur fade above so role cards don't slam into the CTA */
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.92) 40%, var(--paper) 100%) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
}

/* ==========================================================================
   v2.15 — Fix role-picker scroll on mobile (definitive)
   ========================================================================== */

@media (max-width: 767px) {
  /* Allow body to scroll naturally, smooth on iOS */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* The auth container becomes a regular flow block, not a flex-constrained one */
  .auth {
    display: block !important;
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
    position: relative;
  }

  /* The sheet sizes to its content, no flex:1 constraint */
  .auth-sheet {
    flex: none !important;
    display: block !important;
    overflow: visible !important;
    min-height: 50dvh; /* still cover most of viewport */
  }

  /* Role-pick buttons + language cards: don't hijack scroll on touch */
  .auth-sheet button,
  .auth-lang-card,
  [class*="role-pick"] {
    touch-action: manipulation;
  }

  /* Sticky CTA remains pinned to viewport while user scrolls */
  .auth-cta-row {
    position: sticky !important;
    bottom: 0 !important;
    margin: 14px -18px 0 !important;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.94) 35%, var(--paper) 100%) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    z-index: 20 !important;
  }

  /* The 5 decorative drifting blobs can be expensive — kill them on mobile */
  .auth-bg-blob { display: none !important; }
}

/* ==========================================================================
   v2.16 — Restore inside-app flex layout (bottom nav back) + white sheet
            extends to viewport bottom on welcome (no gradient leak).
   ========================================================================== */

@media (max-width: 767px) {
  /* The non-auth shell goes back to a constrained flex column so sticky bottom-nav
     and scrollable .view both work as designed. */
  #app-shell:not(.auth-shell) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;   /* clip everything inside; .view is the scroll surface */
  }
  #app-shell:not(.auth-shell) .view {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  #app-shell:not(.auth-shell) .bottom-nav {
    flex: 0 0 auto !important;
    position: relative !important;  /* not sticky — it's a flex row at the bottom of #app-shell */
    bottom: auto !important;
  }
  /* Body shouldn't scroll for the inside-app screens; .view scrolls instead. */
  /* But document scroll IS allowed for auth (we kept that in v2.15). */

  /* AUTH: restore flex column so the white sheet fills remaining height,
     no yellow gradient leaking below it. */
  #app-shell.auth-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .auth {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }
  .auth-sheet {
    flex: 1 0 auto !important;       /* grow to fill, don't shrink, auto basis */
    min-height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Sticky CTA inside auth-sheet — pinned to viewport while you scroll the sheet */
  .auth-cta-row {
    margin-top: auto !important;     /* push to bottom when content is short */
    position: sticky !important;
    bottom: 0 !important;
  }
}

/* v2.17 — Persona picker rows */
.persona-list { display: grid; gap: 10px; }
.persona-row {
  display: grid; grid-template-columns: 50px 1fr 20px; gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line-soft);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform 0.1s ease, border-color 0.15s, box-shadow 0.15s;
}
.persona-row:active { transform: translateY(1px); }
.persona-row.active { border-color: var(--kr-red); background: linear-gradient(135deg, var(--kr-red-soft), var(--kr-yellow-soft)); }
.persona-row-av {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad-warm); color: #fff;
  display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
  box-shadow: 0 4px 10px rgba(218,37,29,0.22);
}
.persona-row-nm    { font-size: 15px;   font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
.persona-row-sub   { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.persona-row-roles { font-size: 11px;   font-weight: 800; color: var(--engine); margin-top: 4px; letter-spacing: 0.02em; }
.persona-row-blurb { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.persona-row-ar    { color: var(--ink-3); }

/* ===========================================================
   v2.18 — Stage D (defects), Schemes, Electoral roll
   =========================================================== */

/* Defect hero + cards */
.def-hero {
  background: linear-gradient(135deg, var(--kr-red-soft, #fee4e2), var(--kr-yellow-soft, #fef3c7));
  border-radius: 20px; padding: 18px 18px 16px;
  border: 1px solid var(--line-soft); margin-bottom: 14px;
}
.def-hero-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.def-hero-h   { font-size: 18px; font-weight: 800; color: var(--ink); margin-top: 6px; line-height: 1.3; }
.def-hero-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.def-hero-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--kr-red, #DA251D); color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none;
}
.def-hero-cta svg { width: 18px; height: 18px; }

.def-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.def-cat {
  background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: 14px;
  padding: 12px 12px 10px; text-align: left; cursor: pointer; transition: all .15s ease;
  display: block; text-decoration: none; color: inherit;
}
.def-cat.active { border-color: var(--kr-red); background: linear-gradient(135deg, var(--kr-red-soft), var(--kr-yellow-soft)); }
.def-cat-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; margin-bottom: 8px; color: var(--ink); }
.def-cat-ic svg { width: 18px; height: 18px; }
.def-cat-nm { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.def-cat-sla { font-size: 11px; color: var(--ink-2); margin-top: 2px; font-weight: 600; }

.def-photo-card { background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.def-photo-box {
  border: 2px dashed var(--line); border-radius: 14px;
  height: 180px; display: grid; place-items: center; place-content: center; gap: 8px;
  background: var(--bg-soft); cursor: pointer; color: var(--ink-2);
  transition: all .2s ease;
}
.def-photo-box svg { width: 36px; height: 36px; }
.def-photo-box.has-photo { border-style: solid; border-color: var(--emerald, #10b981); padding: 0; overflow: hidden; }
.def-photo-thumb { width: 100%; height: 130px; }
.def-photo-cta { font-size: 12px; font-weight: 600; padding: 8px; text-align: center; }

.def-loc-card { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.def-loc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; color: var(--ink); }
.def-loc-ic svg { width: 18px; height: 18px; }
.def-loc-eye { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.def-loc-nm { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }

.def-routing { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; margin-top: 18px; }
.def-routing-h { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.02em; }
.def-routing-p { font-size: 12px; line-height: 1.55; color: var(--ink-2); }

.def-submit { width: 100%; margin-top: 18px; }

/* Defect list rows */
.def-list { display: grid; gap: 10px; }
.def-row {
  display: grid; grid-template-columns: 50px 1fr 16px; gap: 12px; align-items: center;
  padding: 12px; background: var(--paper); border: 1.5px solid var(--line-soft);
  border-radius: 14px; text-decoration: none; color: inherit;
}
.def-swatch { width: 50px; height: 50px; border-radius: 10px; }
.def-meta { min-width: 0; }
.def-nm { font-size: 13px; font-weight: 700; color: var(--ink); }
.def-sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.def-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.def-pill.open { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.def-pill.ok   { background: rgba(16, 185, 129, 0.12); color: #047857; }

/* Defect detail */
.def-detail-hero { display: flex; gap: 14px; padding: 16px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; align-items: center; margin-bottom: 14px; }
.def-detail-photo { width: 80px; height: 80px; border-radius: 12px; flex: none; }
.def-detail-meta { min-width: 0; }
.def-detail-nm { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.def-detail-sub { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

.def-sla-card {
  padding: 14px 16px; background: linear-gradient(135deg, var(--kr-yellow-soft, #fef3c7), var(--kr-red-soft, #fee4e2));
  border-radius: 14px; margin-bottom: 14px;
}
.def-sla-eye { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 800; }
.def-sla-val { font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.def-sla-sub { font-size: 11px; color: var(--ink-2); margin-top: 4px; }

.def-timeline { display: grid; gap: 0; padding: 4px 0 4px 12px; position: relative; margin-bottom: 14px; }
.def-tl-item { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: flex-start; padding: 10px 0; position: relative; }
.def-tl-item::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
.def-tl-item:first-child::before { top: 50%; }
.def-tl-item:last-child::before  { bottom: 50%; }
.def-tl-dot { width: 16px; height: 16px; border-radius: 999px; border: 3px solid var(--line); background: var(--paper); position: relative; z-index: 1; }
.def-tl-item.done .def-tl-dot    { border-color: var(--emerald, #10b981); background: var(--emerald, #10b981); }
.def-tl-item.current .def-tl-dot { border-color: var(--kr-red); background: var(--kr-yellow); animation: pulse 1.4s infinite; }
.def-tl-c { padding-top: 1px; }
.def-tl-nm { font-size: 13px; font-weight: 700; color: var(--ink); }
.def-tl-at { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(218, 37, 29, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(218, 37, 29, 0); } }

/* Schemes */
.sch-list { display: grid; gap: 10px; }
.sch-row {
  display: grid; grid-template-columns: 42px 1fr auto 16px; gap: 12px; align-items: center;
  padding: 14px; background: var(--paper); border: 1.5px solid var(--line-soft);
  border-radius: 14px; text-decoration: none; color: inherit;
}
.sch-row.eligible { border-color: var(--kr-yellow); background: linear-gradient(135deg, var(--paper), var(--kr-yellow-soft, #fef3c7)); }
.sch-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--bg-soft); display: grid; place-items: center; color: var(--ink); }
.sch-ic svg { width: 20px; height: 20px; }
.sch-m { min-width: 0; }
.sch-nm { font-size: 14px; font-weight: 700; color: var(--ink); }
.sch-sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.sch-amt { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.sch-pill { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--kr-red); color: #fff; text-transform: uppercase; letter-spacing: 0.06em; }

.sch-hero {
  background: linear-gradient(135deg, var(--kr-red-soft, #fee4e2), var(--kr-yellow-soft, #fef3c7));
  border-radius: 18px; padding: 18px; border: 1px solid var(--line-soft); margin-bottom: 14px;
}
.sch-hero-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.sch-hero-nm { font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 4px; line-height: 1.3; }
.sch-hero-amt { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.sch-hero .sch-pill { display: inline-block; margin-top: 10px; }
.sch-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--ink); }

/* Electoral */
.el-hero {
  background: linear-gradient(135deg, var(--violet, #6d28d9), var(--engine, #1f4e79));
  color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px;
}
.el-hero-eye { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; font-weight: 700; }
.el-hero-nm { font-size: 22px; font-weight: 800; margin-top: 6px; }
.el-hero-sub { font-size: 12px; opacity: 0.9; margin-top: 6px; }

.el-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; padding: 4px 14px; }
.el-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.el-row:last-child { border-bottom: 0; }
.el-row strong { color: var(--ink); font-weight: 700; }

.el-window { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; }
.el-window-h { font-size: 13px; font-weight: 800; color: var(--ink); }
.el-window-p { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }

.el-actions { display: grid; gap: 8px; }
.el-act { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: 12px; text-align: left; cursor: pointer; }
.el-act-nm { font-size: 13px; font-weight: 700; color: var(--ink); }
.el-act svg { width: 16px; height: 16px; color: var(--ink-2); }

.el-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.el-stat { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; text-align: center; }
.el-stat-v { font-size: 18px; font-weight: 800; color: var(--ink); }
.el-stat-e { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-top: 3px; }

.empty-card { padding: 20px; text-align: center; color: var(--ink-2); font-size: 13px; background: var(--bg-soft); border-radius: 12px; }

/* Quick civic actions strip on Home */
.quick-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 16px 0;
}
.quick-card {
  display: block; text-decoration: none; color: inherit;
  padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--line-soft);
  background: var(--paper); transition: transform .15s ease;
  position: relative;
}
.quick-card:active { transform: scale(0.97); }
.quick-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px; }
.quick-ic svg { width: 16px; height: 16px; }
.quick-eye { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.quick-nm  { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 2px; line-height: 1.25; padding-right: 22px; }
.quick-sub { font-size: 10px; color: var(--ink-2); margin-top: 3px; line-height: 1.3; padding-right: 22px; }

/* Nudge chevron — matches role-tile arrow style */
@keyframes quickCardArrowNudge {
  0%, 60%, 100% { transform: translateX(0); opacity: 0.7; }
  30% { transform: translateX(4px); opacity: 1; }
}
.quick-card::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  opacity: 0.7;
  animation: quickCardArrowNudge 2.4s ease-in-out infinite;
  transition: transform .15s ease;
  pointer-events: none;
}
.quick-card:active::after {
  animation: none;
  transform: translateX(6px);
}
.qs-red    .quick-ic { background: var(--kr-red-soft, #fee4e2); color: var(--kr-red); }
.qs-yellow .quick-ic { background: var(--kr-yellow-soft, #fef3c7); color: #b45309; }
.qs-violet .quick-ic { background: rgba(109, 40, 217, 0.1); color: var(--violet, #6d28d9); }
.qs-green  .quick-ic { background: rgba(16, 185, 129, 0.1); color: var(--emerald, #10b981); }

/* Quick strip — 2-column variant when civic defect is promoted */
.quick-strip-2col { grid-template-columns: repeat(2, 1fr); }

/* === Raise civic defect · prominent hero CTA on Home === */
.defect-cta {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 16px;
  margin: 16px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #C4392F 0%, #E11D48 60%, #F97316 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(196, 57, 47, 0.55), 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.defect-cta:active { transform: scale(0.98); }
.defect-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, rgba(255,255,255,0.28), transparent 40%);
  pointer-events: none;
}
.defect-cta-ic {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
  color: #fff;
  backdrop-filter: blur(6px);
  position: relative; z-index: 1;
}
.defect-cta-m { min-width: 0; position: relative; z-index: 1; }
.defect-cta-eye {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.defect-cta-h {
  font-size: 20px; font-weight: 900; color: #fff; line-height: 1.15; margin-top: 4px;
  letter-spacing: -0.01em;
}
.defect-cta-sub {
  font-size: 12px; color: rgba(255, 255, 255, 0.92); margin-top: 4px; line-height: 1.4;
}
.defect-cta-chips {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px;
}
.defect-cta-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.defect-cta-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  color: #C4392F;
  font-weight: 900;
  position: relative; z-index: 1;
}
.defect-cta-arrow svg { width: 18px; height: 18px; }

@media (max-width: 380px) {
  .defect-cta { grid-template-columns: 48px 1fr auto; padding: 14px; gap: 12px; }
  .defect-cta-ic { width: 48px; height: 48px; border-radius: 14px; }
  .defect-cta-ic svg { width: 24px; height: 24px; }
  .defect-cta-h { font-size: 18px; }
  .defect-cta-arrow { width: 36px; height: 36px; }
}

/* ===========================================================
   v2.19 — My Local Community (projects + voting)
   =========================================================== */

/* Level picker chips */
.lvl-picker {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 6px; margin-bottom: 14px;
}
.lvl-chip {
  padding: 8px 4px; border-radius: 10px; text-align: center; cursor: pointer;
  background: transparent; border: 0; transition: all .15s ease;
}
.lvl-chip-nm { font-size: 11px; font-weight: 700; color: var(--ink); }
.lvl-chip-sc { font-size: 9px; color: var(--ink-2); margin-top: 1px; }
.lvl-chip.active { background: linear-gradient(135deg, var(--kr-red), var(--kr-yellow)); }
.lvl-chip.active .lvl-chip-nm,
.lvl-chip.active .lvl-chip-sc { color: #fff; }

.lvl-hero {
  background: linear-gradient(135deg, var(--violet, #6d28d9), var(--kr-red));
  color: #fff; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
}
.lvl-hero-eye { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.lvl-hero-nm { font-size: 22px; font-weight: 800; margin-top: 4px; }
.lvl-hero-sub { font-size: 12px; opacity: 0.9; margin-top: 6px; line-height: 1.5; }
.lvl-hero-row { display: flex; gap: 18px; margin-top: 12px; }
.lvl-hero-stat-v { font-size: 18px; font-weight: 800; }
.lvl-hero-stat-e { font-size: 10px; opacity: 0.85; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-top: 1px; }

/* Tab bar */
.comm-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--bg-soft); border-radius: 12px; padding: 4px; margin-bottom: 14px;
}
.comm-tab {
  padding: 9px 4px; font-size: 12px; font-weight: 700; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-2);
}
.comm-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* Project card */
.proj-list { display: grid; gap: 10px; }
.proj {
  padding: 14px; background: var(--paper); border: 1.5px solid var(--line-soft);
  border-radius: 14px; display: block; text-decoration: none; color: inherit;
}
.proj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.proj-nm { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.3; flex: 1; }
.proj-sec-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); white-space: nowrap; }
.proj-sub { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; }

.proj-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.proj-bar { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.proj-bar-fill { height: 100%; background: linear-gradient(90deg, var(--kr-yellow), var(--kr-red)); border-radius: 999px; }
.proj-bar-pct { font-size: 11px; font-weight: 800; color: var(--ink); min-width: 32px; text-align: right; }

.proj-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.proj-stat { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.proj-stat strong { color: var(--ink); font-weight: 800; }
.proj-status { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.proj-status.ongoing { background: rgba(31, 78, 121, 0.12); color: var(--engine, #1f4e79); }
.proj-status.proposed { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.proj-status.completed { background: rgba(16, 185, 129, 0.12); color: #047857; }
.proj-status.voting { background: rgba(109, 40, 217, 0.14); color: var(--violet, #6d28d9); }

/* Vote bar */
.vote-row { display: flex; gap: 8px; margin-top: 10px; }
.vote-btn {
  flex: 1; padding: 8px; border-radius: 10px; border: 1.5px solid var(--line-soft);
  background: var(--paper); font-size: 12px; font-weight: 700; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s ease;
}
.vote-btn.up.voted { border-color: var(--emerald, #10b981); background: rgba(16,185,129,0.08); color: #047857; }
.vote-btn.down.voted { border-color: var(--kr-red); background: rgba(218,37,29,0.08); color: var(--kr-red); }

/* Ideas — citizen-raised */
.idea-card {
  padding: 14px; background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: 14px;
}
.idea-nm { font-size: 14px; font-weight: 800; color: var(--ink); }
.idea-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.idea-by { font-size: 11px; color: var(--ink-2); margin-top: 8px; font-weight: 600; }

.idea-tally { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.idea-tally-bar { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; display: flex; }
.idea-tally-bar .up { background: var(--emerald, #10b981); }
.idea-tally-bar .down { background: var(--kr-red); }

.raise-fab {
  position: static; margin: 18px 0 24px;
  background: var(--kr-red); color: #fff;
  border-radius: 14px; padding: 14px 18px; font-weight: 800;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  border: 0; cursor: pointer; width: 100%; font-size: 14px;
}

/* Dashboard top-level segmented tabs (State view · Projects · Audit) */
.dash-segs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--bg-soft); border-radius: 14px; padding: 4px;
  margin-bottom: 16px;
}
.dash-seg {
  padding: 11px 6px; font-size: 12px; font-weight: 700;
  border-radius: 10px; border: 0; background: transparent;
  color: var(--ink-2); cursor: pointer; transition: all .15s ease;
}
.dash-seg.active {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* Role-card preview banner (when persona doesn't have that role) */
.preview-banner {
  background: linear-gradient(135deg, var(--kr-yellow-soft, #fef3c7), var(--kr-red-soft, #fee4e2));
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 14px 16px; margin: 14px 0;
}
.preview-banner-h { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; }
.preview-banner-p { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 6px; }
.preview-banner-row { display: flex; gap: 8px; margin-top: 12px; }
.preview-banner-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  text-align: center; text-decoration: none;
  border: 0;
}
.preview-banner-btn.ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.preview-banner-btn.solid { background: var(--kr-red); color: #fff; }

/* Inline action toast — used by role-card actions that have no real flow yet */
.jn-act-toast {
  position: fixed; left: 16px; right: 16px; bottom: 92px;
  z-index: 999; background: var(--ink, #0f172a); color: #fff;
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.25);
  display: grid; gap: 6px;
  animation: jn-toast-in .25s ease-out;
}
.jn-toast-h { font-size: 14px; font-weight: 800; }
.jn-toast-p { font-size: 12px; opacity: 0.88; line-height: 1.5; }
.jn-toast-x {
  margin-top: 8px; align-self: flex-start;
  background: rgba(255,255,255,0.16); color: #fff;
  border: 0; padding: 8px 16px; border-radius: 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
@keyframes jn-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Action started · confirmation screen */
.act-started-hero {
  text-align: center; padding: 30px 20px 24px;
  background: linear-gradient(135deg, var(--kr-yellow-soft, #fef3c7), var(--kr-red-soft, #fee4e2));
  border-radius: 18px; margin-bottom: 14px;
}
.act-started-tick {
  width: 56px; height: 56px; margin: 0 auto 14px;
  background: var(--kr-red); color: #fff;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 26px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(218,37,29,0.35);
}
.act-started-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.act-started-nm { font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 6px; }
.act-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.act-card .rc-flow-item + .rc-flow-item { margin-top: 10px; }

/* Single full-width primary CTA — matches Service Detail "Apply →" button */
.act-cta-row { display: flex; gap: 10px; margin-top: 28px; margin-bottom: 8px; }
.act-cta-row .btn-primary { flex: 1; padding: 16px 22px; border-radius: 16px; font-size: 15px; font-weight: 800; }
.act-cta-row .btn-ghost-pill { display: none; }   /* hide Cancel/Back — appbar back arrow handles it */
.act-cta-row.has-ghost { gap: 10px; }
.act-cta-row.has-ghost .btn-ghost-pill {
  display: inline-flex; flex: 0 0 44%; background: transparent;
  border: 1.5px solid var(--line); color: var(--ink-2);
  padding: 16px; border-radius: 16px; font-weight: 700; cursor: pointer;
  align-items: center; justify-content: center; font-size: 14px;
}

/* Drop the old toast — no longer used */
.jn-act-toast { display: none !important; }

/* Action 3-step flow: stepper + form fields */
.act-stepwrap { margin-bottom: 18px; }
.act-step { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.act-step-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-2);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  border: 2px solid var(--line-soft); flex: none;
}
.act-step-dot.done { background: var(--kr-red); color: #fff; border-color: var(--kr-red); }
.act-step-line { flex: 1; height: 2px; background: var(--line-soft); }
.act-step-line.done { background: var(--kr-red); }
.act-step-labels { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 0 0 4px; }
.act-step-l { font-size: 10px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }
.act-step-l.active { color: var(--kr-red); }

.act-form { display: grid; gap: 6px; }
.fld-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.fld-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-soft); background: var(--paper);
  font-family: inherit; font-size: 14px; color: var(--ink); resize: vertical;
  box-sizing: border-box;
}
.fld-input:focus { outline: none; border-color: var(--kr-red); }
.fld-static { padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line-soft); font-size: 13px; color: var(--ink); }

.date-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.date-cell { padding: 12px 8px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--line-soft); font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.date-cell.active { background: linear-gradient(135deg, var(--kr-yellow-soft, #fef3c7), var(--kr-red-soft, #fee4e2)); border-color: var(--kr-red); }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot-cell { padding: 10px 4px; border-radius: 10px; background: var(--paper); border: 1.5px solid var(--line-soft); font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.slot-cell.active { background: var(--kr-red); color: #fff; border-color: var(--kr-red); }

.opt-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--paper);
  border: 1.5px solid var(--line-soft); font-size: 13px; color: var(--ink);
  font-weight: 600; text-align: left; cursor: pointer; margin-top: 8px;
}
.opt-row.active { border-color: var(--kr-red); background: linear-gradient(135deg, #fff, var(--kr-yellow-soft, #fef3c7)); }
.opt-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper); flex: none; position: relative;
}
.opt-radio.active { border-color: var(--kr-red); }
.opt-radio.active::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--kr-red); }

.act-summary { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; padding: 4px 16px; }

/* ===== Role-card detail hero with illustration (v3 — large, right-half) ===== */
.rc-detail-hero {
  position: relative !important;
  padding-right: 45% !important;
  min-height: 230px !important;
  overflow: hidden !important;
}
.rc-detail-hero .rc-hero-body {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
}
.rc-detail-hero .rc-hero-illus {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44% !important;
  height: 100% !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  padding: 6px 6px 6px 0;
  box-sizing: border-box;
}
.rc-detail-hero .rc-hero-illus img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 380px) {
  .rc-detail-hero { padding-right: 42% !important; min-height: 200px !important; }
  .rc-detail-hero .rc-hero-illus { width: 42% !important; }
}
@media (max-width: 380px) {
  .rc-detail-hero { padding-right: 100px; }
  .rc-hero-illus { width: 88px; height: 84px; right: 4px; }
}


/* Stage hero illustration (defects/schemes/electoral/community/done) */
.def-hero {
  position: relative !important;
  padding-right: 45% !important;
  min-height: 220px !important;
  overflow: hidden !important;
}
.def-hero .def-hero-body {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
}
.def-hero .stage-hero-illus {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44% !important;
  height: 100% !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
  overflow: hidden;
  padding: 6px 6px 6px 0;
  box-sizing: border-box;
}
.def-hero .stage-hero-illus img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* ===== Stronger active-tab states (v3) ===== */
.dash-segs .dash-seg.active {
  background: linear-gradient(135deg, var(--kr-red), var(--kr-yellow)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(218,37,29,0.30) !important;
}
.dash-segs .dash-seg:not(.active) {
  background: transparent !important;
  color: var(--ink-2) !important;
}

.comm-tabs .comm-tab.active {
  background: linear-gradient(135deg, var(--kr-red), var(--kr-yellow)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(218,37,29,0.28) !important;
}
.comm-tabs .comm-tab:not(.active) {
  color: var(--ink-2) !important;
}

.cat-chips a.active {
  background: linear-gradient(135deg, var(--kr-red), var(--kr-yellow)) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(218,37,29,0.25) !important;
}
.cat-chips a:not(.active) {
  background: var(--paper) !important;
  color: var(--ink-2) !important;
  border: 1.5px solid var(--line-soft) !important;
}

/* ===== Universal page hero (Wallet, Consent Ledger, AI Register, Schemes) ===== */
.page-hero {
  color: #fff;
  padding: 22px 22px 24px;
  border-radius: 22px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(31, 78, 121, 0.18);
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}
.page-hero::before {
  content: '';
  position: absolute;
  left: -20px; top: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.page-hero-eye {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.88; margin-bottom: 8px;
}
.page-hero-h {
  font-size: 26px; font-weight: 900; margin: 0 0 4px;
  line-height: 1.2; letter-spacing: -0.01em;
}
.page-hero-kn {
  font-family: 'Noto Sans Kannada', sans-serif;
  font-size: 15px; opacity: 0.92; margin-bottom: 10px;
}
.page-hero-sub {
  font-size: 13px; line-height: 1.55; opacity: 0.94;
  margin: 0; max-width: 34ch;
  position: relative; z-index: 1;
}
.page-hero-row {
  display: flex; gap: 22px; margin-top: 16px;
  position: relative; z-index: 1;
}
.page-hero-stat-v {
  font-size: 20px; font-weight: 900;
}
.page-hero-stat-e {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; opacity: 0.85; margin-top: 2px;
}

/* Variants */
.hero-violet { background: linear-gradient(135deg, #5B21B6, #6D28D9, #A78BFA); }
.hero-blue   { background: linear-gradient(135deg, #1F4E79, #3B82F6, #93C5FD); }
.hero-yellow { background: linear-gradient(135deg, #B45309, #F59E0B, #FCD34D); color: #2A1F00; }
.hero-yellow .page-hero-eye,
.hero-yellow .page-hero-sub,
.hero-yellow .page-hero-stat-e { color: #4A2F00; opacity: 0.86; }
.hero-green  { background: linear-gradient(135deg, #047857, #10B981, #6EE7B7); }
.hero-red    { background: linear-gradient(135deg, var(--kr-red), #EC4899, var(--violet)); }
.hero-flag   { background: linear-gradient(135deg, var(--kr-red) 0%, #F59E0B 50%, var(--kr-yellow) 100%); color: #2A1F00; }

/* ===== Polished section title (used across data pages) ===== */
.sec-title {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 22px 0 10px !important;
}
.sec-title::before {
  content: '';
  display: inline-block;
  width: 22px; height: 3px;
  background: linear-gradient(90deg, var(--kr-red), var(--kr-yellow));
  border-radius: 2px;
  margin-right: 10px;
}

/* Polish the wrapping cards under section titles */
.el-card, .sch-card, .el-window {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.el-window-h { font-size: 14px !important; font-weight: 800 !important; color: var(--ink); }
.el-window-p { font-size: 12.5px !important; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }

/* Action rows */
.el-actions { display: grid; gap: 8px; }
.el-act {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
.el-act:hover {
  border-color: var(--kr-red);
  transform: translateX(2px);
}
.el-act-nm { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Stat tiles under "Karnataka roll · live" */
.el-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.el-stat {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
.el-stat-v {
  font-size: 22px; font-weight: 900;
  color: var(--ink);
}
.el-stat-e {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 4px;
}

/* Notifications */
.notif-row {
  display: grid; grid-template-columns: 16px 1fr 16px; gap: 12px; align-items: center;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 14px; text-decoration: none; color: inherit;
  box-shadow: 0 2px 6px rgba(15,23,42,0.03);
}
.notif-dot { width: 12px; height: 12px; border-radius: 50%; }
.notif-red    .notif-dot { background: var(--kr-red); }
.notif-yellow .notif-dot { background: #F59E0B; }
.notif-green  .notif-dot { background: var(--emerald); }
.notif-violet .notif-dot { background: var(--violet); }
.notif-blue   .notif-dot { background: var(--engine); }
.notif-when { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.notif-ttl  { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.notif-sub  { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* ===== Today card — premium polish (v4) ===== */
.today-card {
  background: linear-gradient(135deg, #3B82F6 0%, #1F4E79 50%, #6D28D9 100%) !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: 22px 22px 22px 24px !important;
  box-shadow: 0 16px 36px rgba(31, 78, 121, 0.35), 0 4px 10px rgba(31, 78, 121, 0.18) !important;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.today-card.tone-1 { background: linear-gradient(135deg, #3B82F6 0%, #1F4E79 50%, #6D28D9 100%) !important; }
.today-card.tone-2 { background: linear-gradient(135deg, #F59E0B 0%, #DC2626 50%, #DA251D 100%) !important; }
.today-card.tone-3 { background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #4C1D95 100%) !important; }
.today-card.tone-4 { background: linear-gradient(135deg, #10B981 0%, #047857 50%, #064E3B 100%) !important; }
.today-card::before {
  content: '';
  position: absolute;
  right: -40px; top: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.today-card::after {
  content: '';
  position: absolute;
  left: -30px; bottom: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.today-card .eye {
  color: rgba(255,255,255,0.88) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  display: inline-block;
  background: rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.today-card .ttl {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 4px 0 8px !important;
  position: relative;
  z-index: 1;
}
.today-card .sub {
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  position: relative;
  z-index: 1;
  max-width: 28ch;
}
.today-card .cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 10px 18px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  position: relative;
  z-index: 1;
  transition: transform .15s ease;
}
.today-card:active .cta { transform: scale(0.96); }
.today-card.tone-2 .cta,
.today-card.tone-3 .cta,
.today-card.tone-4 .cta { color: var(--ink) !important; }
.today-card .cta svg { width: 14px; height: 14px; }
.today-card .art {
  width: 96px !important; height: 96px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.28);
  display: grid !important;
  place-items: center !important;
  font-size: 42px !important;
  position: relative;
  z-index: 1;
}

/* ===== Profile pill — premium (v5) ===== */
.profile-pill {
  background: linear-gradient(135deg, rgba(218,37,29,0.06), rgba(109,40,217,0.06)) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 22px !important;
  padding: 14px 14px 14px 16px !important;
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 18px !important;
}
.profile-pill .av {
  width: 56px !important;
  height: 56px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--kr-red), var(--violet)) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(218, 37, 29, 0.35), inset 0 0 0 3px rgba(255,255,255,0.18) !important;
}
.profile-pill .who { padding-right: 6px; }
.profile-pill .who .hi { font-size: 11px !important; color: var(--ink-2) !important; font-weight: 700 !important; letter-spacing: 0.04em; }
.profile-pill .who .nm { font-size: 17px !important; color: var(--ink) !important; font-weight: 900 !important; line-height: 1.15; margin-top: 1px; }
.profile-pill .who .loc { font-size: 11px !important; color: var(--ink-2) !important; margin-top: 3px !important; font-weight: 600; }
.profile-pill .chip-row { gap: 8px !important; }
.profile-pill .chip {
  background: var(--paper) !important;
  border: 1.5px solid var(--line-soft) !important;
  box-shadow: 0 3px 8px rgba(15,23,42,0.05) !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--violet) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.profile-pill .icon-btn {
  background: var(--paper) !important;
  border: 1.5px solid var(--line-soft) !important;
  box-shadow: 0 3px 8px rgba(15,23,42,0.05) !important;
  width: 42px !important; height: 42px !important;
  border-radius: 14px !important;
  display: grid !important; place-items: center !important;
  position: relative;
}
.profile-pill .icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px;
  background: var(--kr-red);
  border: 2px solid var(--paper);
  border-radius: 50%;
}

/* ===== Role-card tiles — premium (v5) ===== */
.tile-grid {
  gap: 12px !important;
}
.tile {
  border-radius: 22px !important;
  padding: 18px !important;
  min-height: 168px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.13), 0 4px 8px rgba(15, 23, 42, 0.06) !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:active {
  transform: translateY(2px) scale(0.985) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}
.tile::before {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  pointer-events: none;
}
.tile::after {
  content: '';
  position: absolute;
  left: -25px; bottom: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  pointer-events: none;
}
.tile .ic-bubble {
  width: 44px !important; height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.85) !important;
  display: grid !important; place-items: center !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
  position: relative; z-index: 1;
}
.tile .tile-stat {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 5px 10px !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.10) !important;
  position: relative; z-index: 1;
  color: var(--ink) !important;
  letter-spacing: 0.02em;
}
.tile .tile-ttl {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin-top: 12px !important;
  position: relative; z-index: 1;
}
.tile .tile-sub {
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 0.92;
  margin-top: 4px !important;
  line-height: 1.4 !important;
  position: relative; z-index: 1;
}
.tile .pct {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  margin-top: 10px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
  align-self: flex-end;
}
.tile .pct svg { width: 16px; height: 16px; color: var(--ink); }

/* ===== Tile v6 — fixed layout with proper rows ===== */
.tile {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 6px !important;
  padding: 16px !important;
  min-height: 168px !important;
}
.tile .tile-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  position: relative;
  z-index: 1;
}
.tile .tile-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  position: relative;
  z-index: 1;
}
.tile .tile-meta {
  display: flex !important;
  justify-content: flex-end !important;
  position: relative;
  z-index: 1;
}
.tile .ic-bubble {
  width: 44px !important; height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.96) !important;
  display: grid !important; place-items: center !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
  font-size: 22px !important;
}
.tile .ic-bubble svg { display: none; }
.tile .tile-stat {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 5px 11px !important;
  background: rgba(255,255,255,0.96) !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.10) !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* ===== Tile v7 — glossy finish, no white circle clutter ===== */
.tile::before,
.tile::after { display: none !important; }
.tile {
  position: relative !important;
  overflow: hidden !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 18px 36px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.tile::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 22px !important;
  width: auto !important; height: auto !important;
}
.tile::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0; right: 0; top: 0;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  width: auto !important;
}

/* Richer gradients per tone */
.tile.t-blue   { background: linear-gradient(155deg, #5BA0FF 0%, #2B6BD9 45%, #1E3D7E 100%) !important; color: #fff !important; }
.tile.t-green  { background: linear-gradient(155deg, #5DD993 0%, #11A567 45%, #045F3C 100%) !important; color: #fff !important; }
.tile.t-yellow { background: linear-gradient(155deg, #FFE172 0%, #F6B538 45%, #C8821E 100%) !important; color: #2A1F00 !important; }
.tile.t-red    { background: linear-gradient(155deg, #FF8A99 0%, #E54864 45%, #A11D33 100%) !important; color: #fff !important; }
.tile.t-violet { background: linear-gradient(155deg, #B595FA 0%, #7C3AED 45%, #4C1D95 100%) !important; color: #fff !important; }
.tile.t-pink   { background: linear-gradient(155deg, #FFB3D2 0%, #F472A8 45%, #B6357B 100%) !important; color: #fff !important; }
.tile.t-orange { background: linear-gradient(155deg, #FFB07A 0%, #FF7846 45%, #C44510 100%) !important; color: #fff !important; }
.tile.t-cyan   { background: linear-gradient(155deg, #76E3E3 0%, #2BA5B5 45%, #0E5E68 100%) !important; color: #fff !important; }
.tile.t-lime   { background: linear-gradient(155deg, #D7EF7C 0%, #8FC135 45%, #4F731A 100%) !important; color: #fff !important; }
.tile.t-indigo { background: linear-gradient(155deg, #95A5FF 0%, #4F46E5 45%, #271970 100%) !important; color: #fff !important; }

/* Title & sub more readable on the new gradient */
.tile .tile-ttl  { color: inherit !important; text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.tile.t-yellow .tile-ttl { text-shadow: none; }
.tile .tile-sub  { color: inherit !important; opacity: 0.90; text-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.tile.t-yellow .tile-sub { text-shadow: none; }

/* Glossy icon + stat pills */
.tile .ic-bubble {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.78)) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.05) !important;
}
.tile .tile-stat {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.78)) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.tile .pct {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.82)) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--ink) !important;
}
.tile .pct svg { color: var(--ink) !important; }

/* Guard against stat-pill overlapping the icon when text is long */
.tile .tile-top {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
}
.tile .tile-stat {
  justify-self: end !important;
  max-width: 100% !important;
  font-size: 10px !important;
  padding: 4px 10px !important;
}

/* ===== Tile v8 — proper alignment + redesigned arrow ===== */
.tile {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 0 !important;
  padding: 18px !important;
  min-height: 178px !important;
}
.tile .tile-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.tile .tile-stat {
  width: auto !important;
  flex: 0 0 auto !important;
}
.tile .tile-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
}
.tile .tile-ttl {
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
}
.tile .tile-sub {
  margin: 0 0 14px !important;
}
.tile .tile-meta {
  display: none !important;
}

/* Redesigned arrow — glass pill at bottom-right, inside the body */
.tile .tile-body::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78));
  border: 1px solid rgba(255,255,255,0.65);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  font-family: -apple-system, system-ui, sans-serif;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.06);
  margin-top: auto;
  transition: transform .15s ease;
  position: relative;
  z-index: 1;
}
.tile:active .tile-body::after {
  transform: translateX(2px) scale(0.98);
}

/* ===== Tile v9 — fix vertical alignment + stylish arrow without white BG ===== */
.tile .tile-top {
  align-items: stretch !important;
  height: 44px !important;
  display: flex !important;
  justify-content: space-between !important;
}
.tile .ic-bubble {
  width: 44px !important;
  height: 44px !important;
  align-self: center !important;
}
.tile .tile-stat {
  align-self: center !important;
  padding: 6px 12px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Arrow — bigger, stylish, no white background */
.tile .tile-body::after {
  content: '' !important;
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.55) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 14px rgba(0,0,0,0.18) !important;
  position: relative !important;
  font-size: 0 !important;
  margin-top: 14px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.tile .tile-body::before {
  content: '' !important;
  position: absolute !important;
  right: 26px !important;
  bottom: 32px !important;
  width: 16px !important;
  height: 16px !important;
  border-top: 2.5px solid #fff !important;
  border-right: 2.5px solid #fff !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30)) !important;
}
.tile.t-yellow .tile-body::before { border-color: #1F1300 !important; }
.tile.t-yellow .tile-body::after  { border-color: rgba(31,19,0,0.45) !important; }
.tile .tile-body { position: relative !important; }

/* ===== Tile v10 — clean arrow, no broken chevron ===== */
.tile .tile-body::before { display: none !important; }
.tile .tile-body::after {
  content: '→' !important;
  align-self: flex-end !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.96) !important;
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-top: 14px !important;
  padding: 0 6px 0 0 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.30) !important;
  transition: transform .15s ease !important;
}
.tile.t-yellow .tile-body::after {
  color: #1F1300 !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.30) !important;
}
.tile:active .tile-body::after { transform: translateX(4px) !important; }

/* ===== Tile v11 — strict vertical centering of icon + stat ===== */
.tile .tile-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 44px !important;
  margin-bottom: 14px !important;
}
.tile .ic-bubble {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 44px !important;
}
.tile .tile-stat {
  height: 30px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* ===== Tile v12 — proper SVG arrow ===== */
.tile .tile-body::after {
  content: '' !important;
  display: inline-block !important;
  align-self: flex-end !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.12) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
  border: none !important;
  border-radius: 50% !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 4px 14px rgba(0,0,0,0.20) !important;
  margin-top: 14px !important;
  text-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform .15s ease !important;
}
.tile.t-yellow .tile-body::after {
  background: rgba(31, 19, 0, 0.10) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
  box-shadow: inset 0 0 0 1px rgba(31,19,0,0.18), 0 4px 14px rgba(0,0,0,0.12) !important;
}
.tile:active .tile-body::after { transform: translateX(4px) scale(0.96) !important; }

/* ===== Tile v13 — clean, no arrow circle. Whole card is the CTA. ===== */
.tile .tile-body::after {
  display: none !important;
}
.tile .tile-body::before {
  display: none !important;
}
.tile .tile-ttl {
  font-size: 22px !important;
}
.tile .tile-sub {
  margin-bottom: 0 !important;
}
.tile {
  min-height: 150px !important;
  cursor: pointer;
}

/* ===== Tile v14 — clean layout, properly spaced elements ===== */
.tile {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  min-height: 170px !important;
  gap: 0 !important;
}
.tile .tile-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin-bottom: 20px !important;
}
.tile .ic-bubble {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}
.tile .tile-stat {
  margin: 0 !important;
  margin-left: auto !important;
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.tile .tile-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}
.tile .tile-ttl {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}
.tile .tile-sub {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  opacity: 0.92 !important;
}

/* ===== Tile v15 — both pill heights equal, strict center alignment ===== */
.tile .tile-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}
.tile .ic-bubble {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}
.tile .tile-stat {
  margin: 0 !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ===== Tile v16 — fresh redesign: minimal modern + stat badge ===== */
.tile-grid { gap: 14px !important; }
.tile {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px !important;
  min-height: 180px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    0 10px 30px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}
.tile::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}
.tile::after { display: none !important; }

/* Top row — bigger icon, smaller stat pill */
.tile .tile-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.tile .ic-bubble {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.40) !important;
  flex: 0 0 52px !important;
  margin: 0 !important;
}
.tile.t-yellow .ic-bubble {
  background: rgba(31,19,0,0.10) !important;
  border-color: rgba(31,19,0,0.20) !important;
}
.tile .tile-stat {
  height: 26px !important;
  padding: 0 12px !important;
  background: rgba(0,0,0,0.20) !important;
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.tile.t-yellow .tile-stat {
  background: rgba(31,19,0,0.18) !important;
  color: #1F1300 !important;
  border-color: rgba(31,19,0,0.14) !important;
}

/* Body */
.tile .tile-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}
.tile .tile-ttl {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin: 0 0 6px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
}
.tile.t-yellow .tile-ttl { text-shadow: none !important; }
.tile .tile-sub {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  opacity: 0.85 !important;
}
.tile .tile-body::after,
.tile .tile-body::before { display: none !important; }
.tile .tile-meta { display: none !important; }

/* ===== Tile v17 — little arrow with smooth nudge animation ===== */
@keyframes tileArrowNudge {
  0%, 60%, 100% { transform: translateX(0); opacity: 0.85; }
  30% { transform: translateX(6px); opacity: 1; }
}
.tile .tile-body::after {
  content: '' !important;
  display: inline-block !important;
  align-self: flex-end !important;
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-top: 10px !important;
  margin-right: 2px !important;
  animation: tileArrowNudge 2.4s ease-in-out infinite !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)) !important;
  opacity: 0.85 !important;
  transition: transform .15s ease !important;
}
.tile.t-yellow .tile-body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") !important;
  filter: none !important;
}
.tile:active .tile-body::after {
  animation: none !important;
  transform: translateX(8px) !important;
}

/* Yellow tile arrow — strip any filter/shadow border */
.tile.t-yellow .tile-body::after {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") !important;
}

/* ===== Tile v18 — white text + arrow for ALL tones (including yellow) ===== */
.tile,
.tile.t-yellow,
.tile.t-lime,
.tile.t-cyan {
  color: #fff !important;
}
.tile .tile-ttl,
.tile.t-yellow .tile-ttl,
.tile.t-lime .tile-ttl,
.tile.t-cyan .tile-ttl {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;
}
.tile .tile-sub,
.tile.t-yellow .tile-sub,
.tile.t-lime .tile-sub,
.tile.t-cyan .tile-sub {
  color: #fff !important;
  opacity: 0.92 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.16) !important;
}
.tile .tile-stat,
.tile.t-yellow .tile-stat,
.tile.t-lime .tile-stat,
.tile.t-cyan .tile-stat {
  background: rgba(0,0,0,0.20) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.tile .ic-bubble,
.tile.t-yellow .ic-bubble,
.tile.t-lime .ic-bubble,
.tile.t-cyan .ic-bubble {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
}
/* White arrow on dark tiles */
.tile .tile-body::after,
.tile.t-lime .tile-body::after,
.tile.t-cyan .tile-body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)) !important;
}
/* Yellow tile — dark arrow, NO drop-shadow (else it looks like a semi-transparent box on the bright yellow) */
.tile.t-yellow .tile-body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-color: transparent !important;
}
/* Also kill text-shadow on the yellow tile title — was leaving a faint dark halo */
.tile.t-yellow .tile-ttl,
.tile.t-yellow .tile-sub { color: #1F1300 !important; text-shadow: none !important; }

/* ============================================================
   KFDA · /forecast page styles
   ============================================================ */
.crop-grid { display: grid; gap: 14px; }
.crop-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faf6 100%);
  border: 1px solid #e6ece4;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -18px rgba(0,80,40,0.20);
}
.crop-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.crop-nm { display: grid; gap: 2px; }
.crop-name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.crop-kn   { font-family: 'Noto Sans Kannada', sans-serif; font-size: 12px; color: var(--ink-2); }
.crop-demand {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  padding: 5px 9px; border-radius: 999px;
}
.demand-critical { background: #FEE2E2; color: #B91C1C; }
.demand-high     { background: #DCFCE7; color: #047857; }
.demand-medium   { background: #FEF3C7; color: #92400E; }
.demand-low      { background: #E0E7FF; color: #3730A3; }

.crop-meta { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 10px; }

.crop-bar-wrap { display: grid; gap: 6px; margin-bottom: 12px; }
.crop-bar { height: 10px; background: #e9efe6; border-radius: 999px; overflow: hidden; }
.crop-bar-fill { height: 100%; background: linear-gradient(90deg, #10B981 0%, #047857 100%); border-radius: 999px; transition: width 0.4s ease; }
.crop-bar-lbl { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }

.crop-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crop-price-cell {
  background: #f7faf6; border: 1px solid #e6ece4; border-radius: 12px;
  padding: 8px 10px; display: grid; gap: 2px;
}
.crop-price-cell .l { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.crop-price-cell .v { font-size: 14px; font-weight: 800; color: var(--ink); }
.crop-price-cell .v.up   { color: #047857; }
.crop-price-cell .v.down { color: #B91C1C; }

.crop-foot      { font-size: 11.5px; color: var(--ink-2); margin-top: 10px; }
.crop-foot.dim  { color: var(--ink-3); margin-top: 3px; }

/* Benefits list */
.kfda-benefits { display: grid; gap: 10px; }
.kfda-benefit {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px;
}
.kfda-benefit-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #10B981 0%, #047857 100%);
  color: #fff; display: grid; place-items: center;
}
.kfda-benefit-ic svg { width: 20px; height: 20px; }
.kfda-benefit-l { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.kfda-benefit-s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

/* Slot rows */
.kfda-slots { display: grid; gap: 10px; }
.kfda-slot {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.kfda-slot:active { transform: scale(0.985); }
.kfda-slot-l { font-size: 13.5px; font-weight: 700; }
.kfda-slot-s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.kfda-slot-n { font-size: 11.5px; color: #047857; font-weight: 700; margin-top: 4px; }
.kfda-slot .arrow { color: var(--ink-3); }

/* ============================================================
   KFDA · Slot booking form styles
   ============================================================ */
.slot-field { display: grid; gap: 6px; }
.slot-field-l { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.slot-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Toggle row */
.tog-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; cursor: pointer;
}
.tog-m { flex: 1; }
.tog-l { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tog-s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.tog-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.tog-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.tog-slider {
  position: absolute; inset: 0; background: #cfd6cd; border-radius: 999px; transition: 0.2s;
  display: block;
}
.tog-slider:before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: 0.2s;
}
.tog-switch input:checked + .tog-slider { background: linear-gradient(90deg, #10B981 0%, #047857 100%); }
.tog-switch input:checked + .tog-slider:before { transform: translateX(18px); }

/* Pill-option button (Storage choice) */
.pill-opt {
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 10px 14px; cursor: pointer; text-align: left;
  display: grid; gap: 2px; transition: 0.15s;
}
.pill-opt:hover { border-color: #10B981; }
.pill-opt.is-active {
  border-color: #047857;
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.pill-opt-l { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pill-opt-s { font-size: 11.5px; color: var(--ink-2); }

/* Summary band */
.slot-summary {
  background: linear-gradient(180deg, #fff 0%, #f7faf6 100%);
  border: 1px solid #e6ece4; border-radius: 16px;
  padding: 14px 16px; display: grid; gap: 8px;
}
.slot-sum-r
/* ============================================================
   Records · colorful sections (palette cycles, status pills, card stripes)
   Scoped to .rc-pane[data-pane="records"] so it only affects Records tab.
   ============================================================ */

/* Cycling tone palette via CSS custom properties */
.rc-pane .rc-section:nth-of-type(5n+1) { --tone-a: #2563EB; --tone-b: #38BDF8; --tone-soft: #EFF6FF; --tone-ring: rgba(37,99,235,0.10); }
.rc-pane .rc-section:nth-of-type(5n+2) { --tone-a: #047857; --tone-b: #10B981; --tone-soft: #ECFDF5; --tone-ring: rgba(4,120,87,0.10); }
.rc-pane .rc-section:nth-of-type(5n+3) { --tone-a: #7C3AED; --tone-b: #A78BFA; --tone-soft: #F5F3FF; --tone-ring: rgba(124,58,237,0.10); }
.rc-pane .rc-section:nth-of-type(5n+4) { --tone-a: #B45309; --tone-b: #F59E0B; --tone-soft: #FFFBEB; --tone-ring: rgba(180,83,9,0.10); }
.rc-pane .rc-section:nth-of-type(5n+5) { --tone-a: #BE185D; --tone-b: #F472B6; --tone-soft: #FDF2F8; --tone-ring: rgba(190,24,93,0.10); }

/* Colored bubble next to section header text */
.rc-pane .rc-section-h {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--tone-a, var(--ink-2));
}
.rc-pane .rc-section-h::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--tone-a, var(--engine)) 0%, var(--tone-b, var(--engine)) 100%);
  box-shadow: 0 0 0 4px var(--tone-ring, transparent);
  flex-shrink: 0;
}

/* Card gets soft tinted background + gradient top-stripe */
.rc-pane .rc-section .card,
.rc-pane > .card {
  background: linear-gradient(180deg, #ffffff 0%, var(--tone-soft, #fafafa) 100%);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.rc-pane .rc-section .card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tone-a, var(--kr-red)) 0%, var(--tone-b, var(--kr-yellow)) 100%);
}

/* Key column gets a tiny tone dot prefix */
.rc-pane[data-pane="records"] .kv-row .k {
  position: relative;
  padding-left: 14px;
}
.rc-pane[data-pane="records"] .kv-row .k::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone-a, var(--engine)) 0%, var(--tone-b, var(--engine)) 100%);
  opacity: 0.55;
}

/* Status pill — auto-color common status words in values */
.rc-pane[data-pane="records"] .v-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.rc-pane[data-pane="records"] .v-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rc-pane[data-pane="records"] .v-status.s-green { background: #DCFCE7; color: #047857; }
.rc-pane[data-pane="records"] .v-status.s-blue  { background: #DBEAFE; color: #1D4ED8; }
.rc-pane[data-pane="records"] .v-status.s-amber { background: #FEF3C7; color: #B45309; }
.rc-pane[data-pane="records"] .v-status.s-rose  { background: #FFE4E6; color: #BE185D; }
.rc-pane[data-pane="records"] .v-status.s-violet{ background: #EDE9FE; color: #6D28D9; }
.rc-pane[data-pane="records"] .v-status.s-gray  { background: #F1F5F9; color: #475569; }

/* ============================================================
   How-it-flows · numbered/dotted steps
   ============================================================ */
.rc-flow-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px dashed var(--line-soft);
}
.rc-flow-item:first-child { border-top: 0; padding-top: 2px; }
.rc-flow-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone-a, var(--engine)) 0%, var(--tone-b, var(--engine)) 100%);
  box-shadow: 0 0 0 4px var(--tone-ring, rgba(0,0,0,0.05));
  margin-top: 5px;
  flex-shrink: 0;
}
.rc-flow-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  display: block;
}

/* rc-blurb inside How-it-works cards — soften, give it a left accent stripe */
.rc-pane[data-pane="how"] .rc-blurb {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--tone-a, var(--engine));
  border-radius: 2px;
}

/* ============================================================
   Case History · vertical timeline
   ============================================================ */
.case-tl {
  position: relative;
  padding: 4px 0 4px 6px;
  display: grid;
  gap: 14px;
}
/* connecting vertical line under the dots */
.case-tl::before {
  content: '';
  position: absolute;
  top: 24px; bottom: 24px;
  left: 25px;
  width: 2px;
  background: linear-gradient(180deg, #DCFCE7 0%, #DBEAFE 25%, #EDE9FE 50%, #FEF3C7 75%, #FEE2E2 100%);
  border-radius: 999px;
}
.case-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.case-tl-dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  z-index: 1;
  box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,0.08);
}
/* rung-specific tones */
.tl-l0 .case-tl-dot { background: linear-gradient(135deg, #10B981, #047857); color: #fff; }
.tl-l1 .case-tl-dot { background: linear-gradient(135deg, #38BDF8, #1D4ED8); color: #fff; }
.tl-l2 .case-tl-dot { background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; }
.tl-l3 .case-tl-dot { background: linear-gradient(135deg, #FBBF24, #B45309); color: #fff; }
.tl-l4 .case-tl-dot { background: linear-gradient(135deg, #F87171, #B91C1C); color: #fff; }

.case-tl-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  position: relative;
}
.case-tl-item.is-current .case-tl-card {
  border-color: #c4392f33;
  box-shadow: 0 0 0 3px rgba(196,57,47,0.08), 0 1px 2px rgba(15,23,42,0.04);
  background: linear-gradient(180deg, #fff 0%, #fff5f4 100%);
}
.tl-l0.is-current .case-tl-card { border-color: #04785733; background: linear-gradient(180deg, #fff 0%, #ECFDF5 100%); }
.tl-l1.is-current .case-tl-card { border-color: #1D4ED833; background: linear-gradient(180deg, #fff 0%, #EFF6FF 100%); }
.tl-l2.is-current .case-tl-card { border-color: #7C3AED33; background: linear-gradient(180deg, #fff 0%, #F5F3FF 100%); }
.tl-l3.is-current .case-tl-card { border-color: #B4530933; background: linear-gradient(180deg, #fff 0%, #FFFBEB 100%); }
.tl-l4.is-current .case-tl-card { border-color: #B91C1C33; background: linear-gradient(180deg, #fff 0%, #FEF2F2 100%); }

.case-tl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.case-tl-when {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.case-tl-now {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #FEE2E2;
  color: #B91C1C;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.tl-l0.is-current .case-tl-now { background: #DCFCE7; color: #047857; }
.tl-l1.is-current .case-tl-now { background: #DBEAFE; color: #1D4ED8; }
.tl-l2.is-current .case-tl-now { background: #EDE9FE; color: #6D28D9; }
.tl-l3.is-current .case-tl-now { background: #FEF3C7; color: #B45309; }
.case-tl-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* ============================================================
   Cases list v2 · stat strip, distribution, case cards
   ============================================================ */
.case-stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.case-stat {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.case-stat::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
}
.case-stat.s-blue::before   { background: linear-gradient(180deg, #38BDF8, #1D4ED8); }
.case-stat.s-violet::before { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
.case-stat.s-amber::before  { background: linear-gradient(180deg, #FBBF24, #B45309); }
.case-stat .n {
  font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1;
}
.case-stat .l {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink-2); text-transform: uppercase; margin-top: 6px;
}

/* Rung distribution */
.case-dist {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.case-dist-row {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 10px;
}
.case-dist-pill {
  font-size: 10px; font-weight: 900; letter-spacing: 0.04em;
  width: 30px; height: 22px;
  display: grid; place-items: center;
  border-radius: 7px;
  color: #fff;
}
.case-dist-row.tl-l0 .case-dist-pill { background: linear-gradient(135deg, #10B981, #047857); }
.case-dist-row.tl-l1 .case-dist-pill { background: linear-gradient(135deg, #38BDF8, #1D4ED8); }
.case-dist-row.tl-l2 .case-dist-pill { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.case-dist-row.tl-l3 .case-dist-pill { background: linear-gradient(135deg, #FBBF24, #B45309); }
.case-dist-row.tl-l4 .case-dist-pill { background: linear-gradient(135deg, #F87171, #B91C1C); }
.case-dist-track {
  height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.case-dist-fill { height: 100%; border-radius: 999px; }
.case-dist-row.tl-l0 .case-dist-fill { background: linear-gradient(90deg, #10B981, #047857); }
.case-dist-row.tl-l1 .case-dist-fill { background: linear-gradient(90deg, #38BDF8, #1D4ED8); }
.case-dist-row.tl-l2 .case-dist-fill { background: linear-gradient(90deg, #A78BFA, #7C3AED); }
.case-dist-row.tl-l3 .case-dist-fill { background: linear-gradient(90deg, #FBBF24, #B45309); }
.case-dist-row.tl-l4 .case-dist-fill { background: linear-gradient(90deg, #F87171, #B91C1C); }
.case-dist-n {
  font-size: 13px; font-weight: 900; color: var(--ink); text-align: right;
}

/* Case card v2 */
.case-card-v2 {
  display: block;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px 16px 13px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.case-card-v2::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tc-a, #10B981) 0%, var(--tc-b, #047857) 100%);
}
.case-card-v2.tl-l0 { --tc-a: #10B981; --tc-b: #047857; }
.case-card-v2.tl-l1 { --tc-a: #38BDF8; --tc-b: #1D4ED8; }
.case-card-v2.tl-l2 { --tc-a: #A78BFA; --tc-b: #7C3AED; }
.case-card-v2.tl-l3 { --tc-a: #FBBF24; --tc-b: #B45309; }
.case-card-v2.tl-l4 { --tc-a: #F87171; --tc-b: #B91C1C; }
.case-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.case-card-nm { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; }
.case-card-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.case-card-rung {
  font-size: 11px; font-weight: 900; letter-spacing: 0.04em;
  width: 38px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-a) 0%, var(--tc-b) 100%);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.case-card-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.case-card-step {
  height: 22px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
}
.case-card-step.done    { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); color: #047857; }
.case-card-step.current { background: linear-gradient(135deg, var(--tc-a) 0%, var(--tc-b) 100%); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.case-card-step.todo    { background: #F1F5F9; color: #94A3B8; }
.case-card-bot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
}
.case-card-status { font-weight: 700; color: var(--ink-2); }
.case-card-sla {
  padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 10.5px;
}
.case-card-sla.s-green { background: #DCFCE7; color: #047857; }
.case-card-sla.s-amber { background: #FEF3C7; color: #B45309; }
.case-card-sla.s-rose  { background: #FFE4E6; color: #BE185D; }

/* ============================================================
   Track page v2 · circular progress ring
   ============================================================ */
.track-progress {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.track-ring {
  position: relative;
  width: 100px; height: 100px;
}
.track-ring-bg {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #f1f5f9;
}
.track-ring-fg {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#10B981 var(--p, 0%), transparent var(--p, 0%));
  mask: radial-gradient(circle at center, transparent 38px, #000 39px);
  -webkit-mask: radial-gradient(circle at center, transparent 38px, #000 39px);
}
.track-ring-c {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
}
.track-ring-n { font-size: 21px; font-weight: 900; color: var(--ink); line-height: 1; }
.track-ring-l { font-size: 10px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.track-meta { display: grid; gap: 8px; }
.track-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-soft);
}
.track-meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.track-meta-row span { color: var(--ink-2); font-weight: 600; }
.track-meta-row strong { color: var(--ink); font-weight: 800; }
.track-meta-row .sla-ok   { color: #047857; }
.track-meta-row .sla-warn { color: #B45309; }
.track-meta-row .sla-bad  { color: #B91C1C; }

/* ============================================================
   Apply stepper v2 · numbered circles with connecting rail
   ============================================================ */
.apply-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  position: relative;
  margin: 0 0 18px;
  padding: 8px 4px 4px;
}
.apply-stepper::before {
  content: '';
  position: absolute;
  top: 28px; left: 16%; right: 16%;
  height: 3px;
  background: #f1f5f9;
  border-radius: 999px;
  z-index: 0;
}
.apply-step {
  display: grid; place-items: center;
  position: relative; z-index: 1;
  gap: 6px;
}
.apply-step-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  background: #fff;
  border: 2px solid #cbd5e1;
  color: #94A3B8;
  transition: 0.2s;
}
.apply-step.done .apply-step-dot {
  background: linear-gradient(135deg, #10B981, #047857);
  border-color: #047857;
  color: #fff;
}
.apply-step.current .apply-step-dot {
  background: linear-gradient(135deg, #38BDF8, #1D4ED8);
  border-color: #1D4ED8;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(29,78,216,0.12);
  transform: scale(1.08);
}
.apply-step-lbl {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.apply-step.done .apply-step-lbl    { color: #047857; }
.apply-step.current .apply-step-lbl { color: #1D4ED8; }

/* ============================================================
   Learning Hub · refined styles
   ============================================================ */

/* Student case file — stat tile grid */
.learn-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.learn-stat-tile {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.learn-stat-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}
.learn-stat-tile.tone-violet::before { background: linear-gradient(90deg, #A78BFA, #7C3AED); }
.learn-stat-tile.tone-blue::before   { background: linear-gradient(90deg, #38BDF8, #1D4ED8); }
.learn-stat-tile.tone-green::before  { background: linear-gradient(90deg, #10B981, #047857); }
.learn-stat-tile.tone-amber::before  { background: linear-gradient(90deg, #FBBF24, #B45309); }
.learn-stat-tile.tone-rose::before   { background: linear-gradient(90deg, #F87171, #BE185D); }
.learn-stat-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
}
.learn-stat-v {
  font-size: 15px; font-weight: 800; color: var(--ink);
  margin-top: 6px; line-height: 1.35;
}

/* Civic Service hours card — ring + thresholds */
.learn-cs-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  margin-bottom: 16px;
}
.learn-cs-ring-wrap {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: center;
}
.learn-cs-sub {
  font-size: 10px; font-weight: 800;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.learn-thresh-list { display: grid; gap: 8px; }
.learn-thresh-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  transition: 0.15s;
}
.learn-thresh-row.is-achieved {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
}
.learn-thresh-row.is-locked {
  background: #F8FAFC;
  border: 1px solid var(--line-soft);
  opacity: 0.85;
}
.learn-thresh-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.learn-thresh-row.is-achieved .learn-thresh-icon {
  background: linear-gradient(135deg, #10B981, #047857);
  color: #fff;
}
.learn-thresh-row.is-locked .learn-thresh-icon {
  background: #E2E8F0;
  color: #64748B;
}
.learn-thresh-h {
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.learn-thresh-row.is-achieved .learn-thresh-h { color: #047857; }
.learn-thresh-row.is-locked .learn-thresh-h   { color: #64748B; }
.learn-thresh-s {
  font-size: 11.5px; color: var(--ink); margin-top: 2px;
  font-weight: 600; line-height: 1.4;
}
.learn-thresh-row.is-locked .learn-thresh-s { color: var(--ink-2); }
.learn-thresh-tag {
  font-size: 10px; font-weight: 800;
  padding: 4px 8px; border-radius: 999px;
  background: #FEF3C7; color: #B45309;
  letter-spacing: 0.02em;
}

/* Civic-service opportunity rows */
.learn-opp-list { display: grid; gap: 10px; margin-bottom: 16px; }
.learn-opp-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.learn-opp-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
}
.learn-opp-row.tone-blue::before   { background: linear-gradient(180deg, #38BDF8, #1D4ED8); }
.learn-opp-row.tone-rose::before   { background: linear-gradient(180deg, #F87171, #BE185D); }
.learn-opp-row.tone-amber::before  { background: linear-gradient(180deg, #FBBF24, #B45309); }
.learn-opp-row.tone-green::before  { background: linear-gradient(180deg, #10B981, #047857); }
.learn-opp-row.tone-violet::before { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
.learn-opp-row:active { transform: scale(0.985); }
.learn-opp-emoji {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  display: grid; place-items: center;
  font-size: 22px;
}
.learn-opp-row.tone-blue   .learn-opp-emoji { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.learn-opp-row.tone-rose   .learn-opp-emoji { background: linear-gradient(135deg, #FDF2F8, #FCE7F3); }
.learn-opp-row.tone-amber  .learn-opp-emoji { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.learn-opp-row.tone-green  .learn-opp-emoji { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); }
.learn-opp-row.tone-violet .learn-opp-emoji { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); }
.learn-opp-m { display: grid; gap: 2px; }
.learn-opp-l { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.learn-opp-s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.learn-opp-n { font-size: 11.5px; color: #047857; font-weight: 700; margin-top: 4px; }
.learn-opp-arrow { color: var(--ink-3); }

/* Continuous Learning Calendar — proper card layout */
.learn-cal-list { display: grid; gap: 10px; margin-bottom: 16px; }
.learn-cal-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  background: linear-gradient(180deg, #fff 0%, #faf5ff 100%);
  border: 1px solid #c4b5fd;
  border-radius: 16px;
  padding: 12px 14px;
}
.learn-cal-card.is-live {
  border-color: #fda4af;
  background: linear-gradient(180deg, #fff 0%, #fff1f2 100%);
}
.learn-cal-date {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  color: #fff;
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  display: grid;
  place-items: center;
  align-self: center;
  height: 60px;
}
.learn-cal-card.is-live .learn-cal-date {
  background: linear-gradient(135deg, #FB7185 0%, #BE185D 100%);
}
.learn-cal-day { font-weight: 900; font-size: 14px; line-height: 1.1; }
.learn-cal-dow { font-size: 10px; opacity: 0.9; margin-top: 3px; letter-spacing: 0.04em; }
.learn-cal-body { display: grid; gap: 4px; min-width: 0; }
.learn-cal-title { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.learn-cal-meta  { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.learn-cal-time  { font-size: 11px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.learn-cal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.learn-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.learn-pill.pill-track-civic-literacy { background: #EFF6FF; color: #1D4ED8; }
.learn-pill.pill-track-health         { background: #FEF2F2; color: #B91C1C; }
.learn-pill.pill-track-environment    { background: #ECFDF5; color: #047857; }
.learn-pill.pill-track-innovation     { background: #FFF7ED; color: #B45309; }
.learn-pill.pill-ok   { background: #DCFCE7; color: #047857; }
.learn-pill.pill-warn { background: #FEF3C7; color: #B45309; }
.learn-pill.pill-full { background: #FEE2E2; color: #B91C1C; }
.learn-pill.pill-live { background: #FEE2E2; color: #BE185D; font-weight: 900; }

/* ============================================================
   Role hub CTA — promoted under hero
   ============================================================ */
.role-hub-cta {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 14px;
  align-items: center;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  box-shadow: 0 8px 24px -8px rgba(124, 58, 237, 0.45);
  transition: 0.2s;
  position: relative;
  overflow: hidden;
}
.role-hub-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.role-hub-cta:active { transform: scale(0.985); }

/* Per-accent tones — match role-card colors */
.role-hub-cta.acc-engine  { background: linear-gradient(135deg, #1D4ED8 0%, #38BDF8 100%); box-shadow: 0 8px 24px -8px rgba(29,78,216,0.45); }
.role-hub-cta.acc-red     { background: linear-gradient(135deg, #B91C1C 0%, #F87171 100%); box-shadow: 0 8px 24px -8px rgba(185,28,28,0.45); }
.role-hub-cta.acc-violet  { background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%); box-shadow: 0 8px 24px -8px rgba(124,58,237,0.45); }
.role-hub-cta.acc-green   { background: linear-gradient(135deg, #047857 0%, #10B981 100%); box-shadow: 0 8px 24px -8px rgba(4,120,87,0.45); }
.role-hub-cta.acc-amber   { background: linear-gradient(135deg, #B45309 0%, #FBBF24 100%); box-shadow: 0 8px 24px -8px rgba(180,83,9,0.45); }
.role-hub-cta.acc-rose    { background: linear-gradient(135deg, #BE185D 0%, #F472B6 100%); box-shadow: 0 8px 24px -8px rgba(190,24,93,0.45); }
.role-hub-cta.acc-cyan    { background: linear-gradient(135deg, #0E7490 0%, #22D3EE 100%); box-shadow: 0 8px 24px -8px rgba(14,116,144,0.45); }
.role-hub-cta.acc-purple  { background: linear-gradient(135deg, #6B21A8 0%, #C084FC 100%); box-shadow: 0 8px 24px -8px rgba(107,33,168,0.45); }
.role-hub-cta.acc-yellow  { background: linear-gradient(135deg, #B45309 0%, #FDE047 100%); box-shadow: 0 8px 24px -8px rgba(180,83,9,0.45); }
.role-hub-cta.acc-orange  { background: linear-gradient(135deg, #C2410C 0%, #FB923C 100%); box-shadow: 0 8px 24px -8px rgba(194,65,12,0.45); }
.role-hub-cta.acc-pink    { background: linear-gradient(135deg, #BE185D 0%, #F472B6 100%); box-shadow: 0 8px 24px -8px rgba(190,24,93,0.45); }
.role-hub-cta.acc-lime    { background: linear-gradient(135deg, #4D7C0F 0%, #BEF264 100%); box-shadow: 0 8px 24px -8px rgba(77,124,15,0.45); }
.role-hub-cta.acc-emerald { background: linear-gradient(135deg, #047857 0%, #10B981 100%); box-shadow: 0 8px 24px -8px rgba(4,120,87,0.45); }
.role-hub-cta.acc-blue    { background: linear-gradient(135deg, #1D4ED8 0%, #38BDF8 100%); box-shadow: 0 8px 24px -8px rgba(29,78,216,0.45); }
.role-hub-cta.acc-teal    { background: linear-gradient(135deg, #115E59 0%, #2DD4BF 100%); box-shadow: 0 8px 24px -8px rgba(17,94,89,0.45); }

.role-hub-ic {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}
.role-hub-m { display: grid; gap: 4px; z-index: 1; }
.role-hub-l {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}
.role-hub-s {
  font-size: 11.5px;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  line-height: 1.4;
}
.role-hub-arrow {
  color: #fff;
  z-index: 1;
  opacity: 0.9;
  display: grid; place-items: center;
}
.role-hub-arrow svg { width: 22px; height: 22px; }

/* ============================================================
   Learning Hub · Case File + Civic Service redesign
   ============================================================ */

/* Student Case File — header + metrics row */
.learn-case-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px 16px 12px;
  display: grid; gap: 12px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.learn-case-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #A78BFA 0%, #38BDF8 33%, #10B981 66%, #FBBF24 100%);
}
.learn-case-head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 2px;
}
.learn-case-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1px solid #DDD6FE;
  display: grid; place-items: center;
  font-size: 26px;
}
.learn-case-meta { min-width: 0; }
.learn-case-name {
  font-size: 15px; font-weight: 800; color: var(--ink);
  line-height: 1.3; letter-spacing: -0.01em;
}
.learn-case-track {
  font-size: 12px; color: var(--ink-2); margin-top: 3px;
  font-weight: 600; line-height: 1.4;
}
.learn-case-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 420px) {
  .learn-case-metrics { grid-template-columns: repeat(4, 1fr); }
}
.learn-case-metric {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}
.learn-case-metric::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.learn-case-metric.tone-violet::before { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
.learn-case-metric.tone-blue::before   { background: linear-gradient(180deg, #38BDF8, #1D4ED8); }
.learn-case-metric.tone-green::before  { background: linear-gradient(180deg, #10B981, #047857); }
.learn-case-metric.tone-amber::before  { background: linear-gradient(180deg, #FBBF24, #B45309); }
.learn-case-metric.tone-rose::before   { background: linear-gradient(180deg, #F87171, #BE185D); }
.learn-case-mv {
  font-size: 16px; font-weight: 900; color: var(--ink);
  line-height: 1.15; letter-spacing: -0.01em;
}
.learn-case-ml {
  font-size: 9.5px; font-weight: 800; color: var(--ink-2);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px;
}

/* Civic Service banner + thresholds — unified card */
.learn-cs-wrap {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.learn-cs-banner {
  background: linear-gradient(135deg, #047857 0%, #10B981 100%);
  color: #fff;
  position: relative;
  padding: 16px 18px;
}
.learn-cs-barfill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: rgba(255,255,255,0.18);
  transition: width 0.4s ease;
}
.learn-cs-banner-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
}
.learn-cs-banner-l { display: grid; gap: 2px; }
.learn-cs-banner-r { display: grid; gap: 2px; text-align: right; }
.learn-cs-banner-big {
  font-size: 26px; font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.1;
}
.learn-cs-banner-tiny {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}
.learn-thresh-list {
  display: grid; gap: 0;
  padding: 8px;
}
.learn-thresh-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 12px;
}
.learn-thresh-row + .learn-thresh-row {
  border-top: 1px dashed var(--line-soft);
  border-radius: 0;
  padding-top: 14px;
  margin-top: 2px;
}
.learn-thresh-row.is-achieved {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  border-top: 1px solid #A7F3D0;
}
.learn-thresh-row.is-locked {
  background: transparent;
  border: 0;
}
.learn-thresh-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.learn-thresh-row.is-achieved .learn-thresh-icon {
  background: linear-gradient(135deg, #10B981, #047857);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(4,120,87,0.45);
}
.learn-thresh-row.is-locked .learn-thresh-icon {
  background: #F1F5F9;
  color: #94A3B8;
}
.learn-thresh-hrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.learn-thresh-h {
  font-size: 14px; font-weight: 900; letter-spacing: -0.01em;
}
.learn-thresh-row.is-achieved .learn-thresh-h { color: #047857; }
.learn-thresh-row.is-locked .learn-thresh-h   { color: var(--ink); }
.learn-thresh-pill {
  font-size: 9.5px; font-weight: 900;
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: 0.06em;
}
.learn-thresh-row.is-achieved .learn-thresh-pill {
  background: #047857; color: #fff;
}
.learn-thresh-row.is-locked .learn-thresh-pill {
  background: #F1F5F9; color: var(--ink-2);
}
.learn-thresh-s {
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2); font-weight: 600;
}
.learn-thresh-row.is-achieved .learn-thresh-s { color: #065F46; }

/* ============================================================
   Hub page-hero with role illustration
   ============================================================ */
.page-hero.has-illus {
  position: relative;
  overflow: hidden;
}
.page-hero.has-illus .page-hero-body {
  position: relative;
  z-index: 1;
  /* Reserve space for the illustration on the right */
  padding-right: 40%;
  max-width: 100%;
}
.page-hero-illus {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}
.page-hero-illus img {
  width: 100%;
  height: auto;
  max-height: 90%;
  object-fit: contain;
  object-position: center right;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}

/* On narrower phones, shrink the illustration */
@media (max-width: 380px) {
  .page-hero.has-illus .page-hero-body { padding-right: 35%; }
  .page-hero-illus { width: 38%; }
}

/* Optional: tint illustrations to blend with the gradient hero */
.page-hero.hero-violet .page-hero-illus img,
.page-hero.hero-red    .page-hero-illus img,
.page-hero.hero-green  .page-hero-illus img {
  /* slight saturation boost for visibility on dark hero backgrounds */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.22)) saturate(1.05);
}

/* ============================================================
   Health Hub · CCF banner redesign
   ============================================================ */
.ccf-wrap {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ccf-banner {
  background: linear-gradient(135deg, #BE185D 0%, #F472B6 100%);
  color: #fff;
  position: relative;
  padding: 16px 18px;
  overflow: hidden;
}
.ccf-banner-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: rgba(255,255,255,0.16);
  transition: width 0.4s ease;
}
.ccf-banner-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ccf-banner-l { display: grid; gap: 4px; min-width: 0; }
.ccf-banner-r { display: grid; gap: 4px; text-align: right; min-width: 0; }
.ccf-banner-big {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ccf-banner-tiny {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.ccf-banner-mid {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
  line-height: 1.35;
}
.ccf-break {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ccf-stat {
  padding: 14px 16px;
  position: relative;
  background: #fff;
}
.ccf-stat + .ccf-stat {
  border-left: 1px solid var(--line-soft);
}
.ccf-stat-l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ccf-stat-v {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ccf-stat.tone-rose   .ccf-stat-v { color: var(--ink); }
.ccf-stat.tone-green  .ccf-stat-v { color: #047857; }
.ccf-stat.tone-amber  .ccf-stat-v { color: #B45309; }

/* ============================================================
   Calendar card — clickable affordance
   ============================================================ */
.learn-cal-card {
  text-decoration: none;
  color: var(--ink);
  display: grid;
  grid-template-columns: 64px 1fr 22px;
  gap: 14px;
  align-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.learn-cal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.25);
}
.learn-cal-card.is-live:hover {
  box-shadow: 0 6px 18px -8px rgba(190, 24, 93, 0.30);
}
.learn-cal-card:active { transform: scale(0.99); }
.learn-cal-card.is-full {
  opacity: 0.85;
}
.learn-cal-arrow {
  color: var(--ink-3);
  display: grid;
  place-items: center;
  align-self: center;
}
.learn-cal-arrow svg { width: 16px; height: 16px; }

/* CTA pill on calendar card */
.learn-pill.pill-cta {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6D28D9;
  font-weight: 900;
  border: 1px solid #c4b5fd;
}
.learn-cal-card.is-live .learn-pill.pill-cta {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #BE185D;
  border-color: #f9a8d4;
}
.learn-cal-card.is-full .learn-pill.pill-cta {
  background: #F1F5F9;
  color: #475569;
  border-color: #cbd5e1;
}

/* ============================================================
   Profile + Settings pages
   ============================================================ */
.av-link, .who-link {
  text-decoration: none;
  color: inherit;
}

.profile-hero {
  background: linear-gradient(135deg, #c4392f 0%, #e89a1f 50%, #f7c52d 100%);
  border-radius: 22px;
  padding: 28px 20px 22px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.profile-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.profile-hero-av {
  position: relative;
  z-index: 1;
  width: 92px; height: 92px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 3px solid rgba(255,255,255,0.45);
  display: grid; place-items: center;
  font-size: 32px; font-weight: 900;
  color: #fff;
}
.profile-hero-h {
  position: relative; z-index: 1;
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
.profile-hero-kn {
  position: relative; z-index: 1;
  font-family: 'Noto Sans Kannada', sans-serif;
  font-size: 14px; opacity: 0.92;
  margin-top: 4px;
}
.profile-hero-id {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.92;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.profile-hero-btns {
  position: relative; z-index: 1;
  display: flex; gap: 10px; justify-content: center;
  margin-top: 16px;
}
.profile-hero-btn {
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 800;
  color: #fff; text-decoration: none;
}

.profile-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.profile-role-pill {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.profile-role-emoji { font-size: 18px; }
.profile-role-nm { font-size: 13px; font-weight: 800; }

.profile-sum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.profile-sum-tile {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: var(--ink);
  display: grid; gap: 4px;
  text-align: left;
}
.profile-sum-em { font-size: 22px; }
.profile-sum-n {
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.profile-sum-l {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Settings pill row */
.settings-pills {
  display: flex; gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.settings-pill {
  flex: 1;
  min-width: 60px;
  background: #fff;
  border: 1.5px solid var(--line-soft);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  color: var(--ink); cursor: pointer;
  text-align: center;
  transition: 0.15s;
}
.settings-pill:hover { border-color: var(--engine); }
.settings-pill.is-active {
  background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  border-color: #6D28D9;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(124,58,237,0.45);
}

/* === Pension hub === */
.pen-banner-rose .ccf-banner-fill { background: linear-gradient(135deg, #FBE7E3 0%, #F8C9C0 100%); }
.pen-banner-amber .ccf-banner-fill { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.pen-banner-green .ccf-banner-fill { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); }

.pen-cal-head { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.9fr; padding: 10px 14px; background: linear-gradient(135deg, #F5F3FF, #EDE9FE); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #5B21B6; }
.pen-cal-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.9fr; padding: 12px 14px; border-top: 1px solid var(--line-2); align-items: center; }
.pen-cal-mon { font-weight: 800; color: var(--ink); font-size: 13px; }
.pen-cal-amt { font-weight: 700; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.pen-cal-tot { font-weight: 900; color: #5B21B6; font-size: 14px; font-variant-numeric: tabular-nums; }
.pen-cal-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.pen-griev { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 1px solid #FED7AA; color: var(--ink); }
.pen-griev:hover { background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%); }

.pen-ben-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pen-ben { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); align-items: start; }
.pen-ben-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.pen-ben-transport .pen-ben-ic { background: linear-gradient(135deg, #38BDF8, #0369A1); }
.pen-ben-health .pen-ben-ic    { background: linear-gradient(135deg, #F472B6, #BE185D); }
.pen-ben-utilities .pen-ben-ic { background: linear-gradient(135deg, #FBBF24, #B45309); }
.pen-ben-finance .pen-ben-ic   { background: linear-gradient(135deg, #34D399, #047857); }
.pen-ben-civic .pen-ben-ic     { background: linear-gradient(135deg, #A78BFA, #5B21B6); }
.pen-ben-m { min-width: 0;

/* === Raise-defect · map widget + dedup hint === */
.def-mapwrap {
  display: grid; gap: 10px;
  margin-bottom: 16px;
}
/* Map sits inside the location card with footer below */
.def-loc-card-v2 {
  background: var(--paper);
  border: 1.5px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.18);
}
.def-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #FEF3C7;
  border-bottom: 1px solid var(--line-soft);
}
.def-map svg { width: 100%; height: 100%; display: block; }
.def-mappin { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.def-mappin-locked { animation: def-pin-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes def-pin-drop {
  0%   { transform: translate(0, -40px) scale(0.4); opacity: 0; }
  60%  { transform: translate(0, 4px)   scale(1.15); opacity: 1; }
  100% { transform: translate(0, 0)     scale(1); }
}
/* Floating "Re-detect" chip placed over top-right of map */
.def-map-recenter {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #C4392F;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.18);
  z-index: 2;
}
.def-map-recenter:active { background: #FEE2E2; transform: scale(0.96); }
.def-map-recenter svg { width: 14px; height: 14px; stroke: #C4392F; }

.def-mapfoot {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}
.def-mapfoot-pin {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #C4392F, #991B1B);
  color: #fff;
}
.def-mapfoot-pin svg { width: 20px; height: 20px; }
.def-mapfoot-eye {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.def-mapfoot-nm { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px; line-height: 1.3; }
.def-mapfoot-acc { font-size: 11px; color: var(--ink-3); margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.def-mapfoot-acc::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Dedup / merge hint */
.def-merge {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1.5px solid;
  align-items: start;
}
.def-merge-empty {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: #BBF7D0;
}
.def-merge-empty .def-merge-ic {
  background: #10B981; color: #fff; font-size: 20px;
}
.def-merge-match {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border-color: #FED7AA;
}
.def-merge-match .def-merge-ic {
  background: linear-gradient(135deg, #F97316, #C2410C); color: #ff

/* === Defect raise · mode toggle (Auto-detect / Pick on map) === */
.def-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  margin: 10px 10px 0;
  background: #F3F4F6;
  border-radius: 14px;
}
.def-mode-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.def-mode-btn svg { width: 14px; height: 14px; }
.def-mode-btn.def-mode-active {
  background: #fff;
  color: #C4392F;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.18);
}
.def-mode-btn:not(.def-mode-active):active { background: rgba(255,255,255,0.5); }

/* === Leaflet map container override === */
.def-map {
  position: relative;
  width: 100%;
  height: 240px;
  background: #E5E7EB;
  margin-top: 10px;
}
.def-map.def-map-pick { cursor: crosshair; }
.def-map .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.7) !important;
}
.def-map .leaflet-control-zoom a {
  width: 28px !important; height: 28px !important;
  line-height: 28px !important;
  font-size: 16px !important;
  color: #C4392F !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18);
  margin-bottom: 4px !important;
}
.def-map .leaflet-bar { border: 0 !important; box-shadow: none !important; }

/* Custom marker pin */
.def-leaflet-pin {
  background: transparent !important; border: 0 !important;
}
.def-pin-outer {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(196, 57, 47, 0.25);
  display: grid; place-items: center;
  animation: def-pin-pulse 1.6s ease-out infinite;
}
.def-pin-inner {
  width: 16px; height: 16px; border-radius: 50%;
  background: #C4392F; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
@keyframes def-pin-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(196,57,47,0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(196,57,47,0); }
  100% { box-shadow: 0 0 0 0   rgba(196,57,47,0); }
}

@keyframes defModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes defModalPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Thank-you celebration animations === */
@keyframes janCeleFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes janCelePop {
  0%   { opacity: 0; transform: scale(0.7) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes janCheckDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes janCheckPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes janConfFall {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--spin, 360deg)); opacity: 0.85; }
}

@keyframes janGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.1);  opacity: 0.9; }
}
@keyframes janSparkle {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.7) rotate(0deg); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.25) rotate(180deg); }
}
@keyframes janEmojiBounce {
  0%   { transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1); }
  100% { transform: translateX(-50%) translateY(-10px) rotate(8deg) scale(1.1); }
}

@keyframes janRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes janEmojiCenter {
  0%   { transform: scale(0.92) rotate(-6deg); }
  50%  { transform: scale(1.12) rotate(0deg); }
  100% { transform: scale(1)    rotate(6deg); }
}
@keyframes janTopConf {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateX(-50%) translateY(-18px) rotate(15deg) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px) rotate(30deg) scale(0.7); opacity: 0; }
}


/* ===== 2026-07-02 UX polish: keyboard focus + notification badge ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #1D4ED8;
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible {
  outline-color: #93C5FD;
}
.icon-btn { position: relative; }
.icon-btn .badge-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #DC2626; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
[data-theme="dark"] .icon-btn .badge-count { box-shadow: 0 0 0 2px #0F172A; }