/* =====================================================================
   Land EMI Platform — Premium Base UI  v2
   Responsive · Light/Dark · RTL · Glassmorphism · Micro-animations
   All theming driven by CSS custom properties — override via attrs.
   ===================================================================== */

:root {
  /* ── Brand palette ─────────────────────────────────────────── */
  --brand:         #2563eb;
  --brand-600:     #1d4ed8;
  --brand-700:     #1e40af;
  --brand-50:      #eff6ff;
  --brand-rgb:     37,99,235;
  --success:       #16a34a;
  --warning:       #d97706;
  --danger:        #dc2626;
  --info:          #0284c7;
  --gold:          #f59e0b;

  /* ── Surface palette ──────────────────────────────────────── */
  --bg:            #f4f7fb;
  --bg-elev:       #ffffff;
  --bg-muted:      #f1f5f9;
  --bg-subtle:     #fafbfc;
  --border:        #e4e8ef;
  --border-strong: #c8d0db;
  --text:          #0d1b2e;
  --text-muted:    #5a6a7e;
  --text-faint:    #94a3b8;

  /* ── Sidebar ──────────────────────────────────────────────── */
  --sidebar-bg:        #0d1630;
  --sidebar-bg-2:      #0a1020;
  --sidebar-fg:        #dde4f0;
  --sidebar-muted:     #7a90aa;
  --sidebar-active:    rgba(37,99,235,.18);
  --sidebar-active-fg: #7daaff;

  /* ── Glassmorphism ────────────────────────────────────────── */
  --glass-bg:     rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
  --glass-blur:   saturate(180%) blur(20px);

  /* ── Elevations ───────────────────────────────────────────── */
  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --shadow-xs:  0 1px 2px rgba(13,27,46,.05);
  --shadow-sm:  0 1px 3px rgba(13,27,46,.08), 0 1px 2px rgba(13,27,46,.04);
  --shadow:     0 3px 10px rgba(13,27,46,.08), 0 1px 3px rgba(13,27,46,.05);
  --shadow-md:  0 6px 20px rgba(13,27,46,.1),  0 2px 6px rgba(13,27,46,.06);
  --shadow-lg:  0 16px 48px rgba(13,27,46,.14), 0 4px 12px rgba(13,27,46,.08);
  --shadow-xl:  0 28px 64px rgba(13,27,46,.18);
  --shadow-brand: 0 4px 18px rgba(37,99,235,.32);

  /* ── Gradients ────────────────────────────────────────────── */
  --grad-brand:   linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  --grad-brand-h: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
  --grad-sidebar: linear-gradient(180deg, #0d1630 0%, #080d1e 100%);
  --grad-subtle:  linear-gradient(135deg, rgba(37,99,235,.05) 0%, rgba(139,92,246,.04) 100%);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w:    264px;
  --sidebar-w-sm: 72px;
  --topbar-h:     62px;
  --bottom-nav-h: 64px;
  --z-sidebar:    40;
  --z-bottom-nav: 45;
  --z-topbar:     50;
  --z-modal:      100;
  --z-toast:      200;
  --bottom-nav-bg:     var(--bg-elev);
  --bottom-nav-border: var(--border);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --trans:  180ms var(--ease);
  --trans-slow: 320ms var(--ease);
}

/* ── Dark mode overrides ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #080d1a;
  --bg-elev:       #0f1625;
  --bg-muted:      #161f32;
  --bg-subtle:     #0c1220;
  --border:        #1a2540;
  --border-strong: #253050;
  --text:          #e8edf5;
  --text-muted:    #8899b8;
  --text-faint:    #4a5a78;

  --sidebar-bg:    #060c18;
  --sidebar-bg-2:  #030609;
  --sidebar-active: rgba(37,99,235,.22);
  --sidebar-active-fg: #7daaff;

  --glass-bg:     rgba(15,22,37,.8);
  --glass-border: rgba(255,255,255,.06);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.5),  0 1px 2px rgba(0,0,0,.3);
  --shadow:     0 3px 10px rgba(0,0,0,.5),  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 6px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.4);
}

/* ── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; max-width: 100vw; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--trans-slow), color var(--trans-slow);
  overflow-x: hidden;
}

/* Premium scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  transition: background var(--trans);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Selection color */
::selection { background: rgba(var(--brand-rgb),.18); color: var(--text); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); text-decoration: underline; }

h1,h2,h3,h4,h5 { margin: 0 0 .5rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }

small, .text-muted { color: var(--text-muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code {
  font-family: ui-monospace, 'Cascadia Code', Menlo, Monaco, monospace;
  font-size: .85em; background: var(--bg-muted);
  padding: .1em .35em; border-radius: 4px; color: var(--brand);
}

/* ── Layout ─────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  transition: grid-template-columns var(--trans-slow);
}
.app[data-menu="small"] { grid-template-columns: var(--sidebar-w-sm) 1fr; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--grad-sidebar);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sidebar);
  transition: width var(--trans-slow);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }

.sidebar__brand-row {
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(37,99,235,.12) 0%, transparent 100%);
  flex-shrink: 0;
  padding: 0;
}
.sidebar__brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem 1rem;
  font-weight: 800; font-size: 1.05rem;
  color: #fff;
  letter-spacing: -.02em;
  flex: 1; min-width: 0;
}
.sidebar__brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--grad-brand);
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(37,99,235,.45);
  flex-shrink: 0;
}
.sidebar__nav { padding: .6rem .5rem; flex: 1; min-height: 0; }

/* Collapsible groups */
.sidebar__group { margin-bottom: .05rem; }
.sidebar__group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  user-select: none;
  transition: background var(--trans), color var(--trans);
  margin-top: .35rem;
}
.sidebar__group > summary:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); }
.sidebar__group > summary::-webkit-details-marker { display: none; }
.sidebar__group-icon {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-grid; place-items: center;
  font-size: .9rem; color: var(--sidebar-fg); opacity: .7;
}
.sidebar__group-label { flex: 1; }
.sidebar__group-chevron {
  font-size: .65rem; opacity: .4;
  transition: transform var(--trans), opacity var(--trans);
}
.sidebar__group[open] > summary .sidebar__group-chevron {
  transform: rotate(90deg); opacity: .8;
}
.sidebar__group[open] > summary { color: rgba(255,255,255,.75); }
.sidebar__group-body {
  padding: .1rem 0 .25rem .35rem;
  margin-left: .75rem;
  border-left: 1px solid rgba(255,255,255,.07);
  animation: sidebar-slide .16s var(--ease-out);
}
@keyframes sidebar-slide {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar__group-body .sidebar__link { font-size: .88rem; padding: .42rem .65rem; }

/* Sidebar links */
.sidebar__link {
  display: flex; align-items: center; gap: .7rem;
  padding: .52rem .75rem;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-fg);
  transition: background var(--trans), color var(--trans), padding-left var(--trans);
  white-space: nowrap; font-size: .9rem;
}
.sidebar__link:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
  padding-left: 1rem;
}
.sidebar__link:active {
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}
.sidebar__link.is-active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-fg);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.sidebar__link.is-active .icon { color: var(--brand); }
.sidebar__link .icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-grid; place-items: center; opacity: .75; }
.sidebar__link:hover .icon, .sidebar__link.is-active .icon { opacity: 1; }
.sidebar__link .label { flex: 1; }

/* Sidebar user profile bar */
.sidebar__profile {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(0deg, rgba(0,0,0,.2) 0%, transparent 100%);
}
.sidebar__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-brand);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .8rem;
  flex-shrink: 0; border: 2px solid rgba(255,255,255,.15);
}
.sidebar__user-name { font-size: .8rem; font-weight: 600; color: #fff; line-height: 1.2; }
.sidebar__user-role { font-size: .7rem; color: var(--sidebar-muted); }

/* Small menu overrides */
.app[data-menu="small"] .sidebar__brand span:not(.logo)  { display: none; }
.app[data-menu="small"] .sidebar__link .label            { display: none; }
.app[data-menu="small"] .sidebar__link                   { justify-content: center; padding: .6rem .25rem; }
.app[data-menu="small"] .sidebar__link:hover             { padding-left: .25rem; }
.app[data-menu="small"] .sidebar__group > summary        { justify-content: center; padding: .5rem .25rem; }
.app[data-menu="small"] .sidebar__group-label,
.app[data-menu="small"] .sidebar__group-chevron          { display: none; }
.app[data-menu="small"] .sidebar__group-body             { border-left: none; margin-left: 0; padding-left: 0; }
.app[data-menu="small"] .sidebar__profile                { justify-content: center; padding: .75rem .5rem; }
.app[data-menu="small"] .sidebar__user-name,
.app[data-menu="small"] .sidebar__user-role              { display: none; }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  height: var(--topbar-h);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
  gap: .75rem;
  position: sticky; top: 0; z-index: var(--z-topbar);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
  transition: background var(--trans), box-shadow var(--trans);
  min-width: 0; max-width: 100%; overflow: hidden;
}
[data-theme="dark"] .topbar {
  background: rgba(9,14,26,.82);
  border-bottom-color: rgba(255,255,255,.06);
}
.topbar__title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: .4rem; }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: .2rem; font-size: .8rem; flex-wrap: nowrap; overflow: hidden; }
.breadcrumbs a { color: var(--text-muted); transition: color var(--trans); }
.breadcrumbs a:hover { color: var(--brand); text-decoration: none; }
.breadcrumbs__sep { color: var(--text-faint); font-size: .7rem; margin: 0 .05rem; }
.breadcrumbs__current {
  color: var(--text); font-weight: 600;
  background: var(--bg-muted); padding: .15rem .5rem;
  border-radius: 99px; font-size: .75rem;
}

/* Main content */
.main {
  grid-area: main;
  padding: 1.35rem;
  overflow: auto;
  min-width: 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive table wrapper ────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.table-responsive table { min-width: 0; }

/* ── Stat cards row (plots index etc.) ───────────────────────────── */
.stat-cards-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.stat-card      { flex: 1; min-width: 130px; }
@media (max-width: 480px) {
  .stat-card    { min-width: calc(50% - .375rem); flex: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .95rem; font-size: .875rem; font-weight: 500;
  min-height: 38px;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans),
              transform 120ms var(--ease-spring), box-shadow var(--trans), color var(--trans);
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
  opacity: 0; transition: opacity var(--trans);
  pointer-events: none;
}
.btn:hover  { background: var(--bg-muted); box-shadow: var(--shadow-xs); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn-primary {
  background: var(--grad-brand);
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 3px rgba(var(--brand-rgb),.3);
}
.btn-primary:hover {
  background: var(--grad-brand-h);
  box-shadow: var(--shadow-brand);
}
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; border-color: #15803d; box-shadow: 0 4px 14px rgba(22,163,74,.3); }
.btn-danger  { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover  { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 4px 14px rgba(220,38,38,.3); }
.btn-warning { background: #d97706; border-color: #d97706; color: #fff; }
.btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand-50); }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-muted); color: var(--text); box-shadow: none; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; border-radius: 5px; min-height: 32px; }
.btn-block { width: 100%; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; color: var(--text); }
.form-control, .form-select {
  display: block; width: 100%;
  padding: .55rem .75rem; font-size: .875rem;
  color: var(--text); background: var(--bg-elev);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
  background: var(--bg-elev);
}
.form-text { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }
.invalid-feedback { color: var(--danger); font-size: .75rem; margin-top: .3rem; display: block; }
.form-control.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.card:hover { box-shadow: var(--shadow); }
.card--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card__header {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .88rem;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-elev) 100%);
}
.card__body  { padding: 1.1rem; min-width: 0; }
.card__footer { padding: .75rem 1.1rem; border-top: 1px solid var(--border); }
/* Any element using inline overflow gets smooth touch scroll & containment.
   Using universal selectors so <nav>, <section>, <aside>, <main>, <table>,
   <pre>, <ul>, etc. are all covered — not just <div>. */
[style*="overflow-x:auto"],
[style*="overflow-x: auto"],
[style*="overflow-y:auto"],
[style*="overflow-y: auto"],
[style*="overflow:auto"],
[style*="overflow: auto"],
[style*="overflow-x:scroll"],
[style*="overflow-x: scroll"],
[style*="overflow-y:scroll"],
[style*="overflow-y: scroll"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

/* Premium stat card */
.card.stat {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem;
  position: relative; overflow: hidden;
}
.card.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  opacity: 0; transition: opacity var(--trans);
}
.card.stat:hover::before { opacity: 1; }
.stat__label { font-size: .73rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stat__value { font-size: 1.7rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1.1; }
.stat__delta { font-size: .78rem; color: var(--success); font-weight: 500; }
.stat__delta.down { color: var(--danger); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert {
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; margin-bottom: 1rem; font-size: .875rem;
  display: flex; align-items: center; gap: .6rem;
}
.alert-info    { background:#e0f2fe; border-color:#bae6fd; color:#075985; }
.alert-success { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.alert-warning { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.alert-danger  { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
[data-theme="dark"] .alert-info    { background:rgba(12,74,110,.3); border-color:#0369a1; color:#bae6fd; }
[data-theme="dark"] .alert-success { background:rgba(20,83,45,.3);  border-color:#166534; color:#bbf7d0; }
[data-theme="dark"] .alert-warning { background:rgba(120,53,15,.3); border-color:#92400e; color:#fde68a; }
[data-theme="dark"] .alert-danger  { background:rgba(127,29,29,.3); border-color:#991b1b; color:#fecaca; }

/* ── Grid helpers ────────────────────────────────────────────────── */
.row  { display: grid; gap: 1rem; }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tables ──────────────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
}
.table th {
  padding: .6rem .85rem; text-align: left;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  background: var(--bg-muted);
  white-space: nowrap;
}
.table td {
  padding: .65rem .85rem; border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.table tr:hover td { background: var(--bg-muted); }
.table tr:last-child td { border-bottom: none; }
@media (max-width: 767px) {
  .table { font-size: .8rem; }
  .table th { padding: .45rem .6rem; font-size: .67rem; }
  .table td { padding: .5rem .6rem; }
}
@media (max-width: 479px) {
  .table { font-size: .75rem; }
  .table th, .table td { padding: .4rem .5rem; }
}

/* ── Auth shell ──────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1400px 700px at 10% -15%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 600px at 110% 110%, rgba(139,92,246,.1), transparent 55%),
    radial-gradient(600px 400px at 50% 50%, rgba(16,185,129,.05), transparent 60%),
    var(--bg);
}
.auth-card { width: 100%; max-width: 420px; animation: fadeUp .45s var(--ease-out) both; }

/* Wider on the registration page when role-picker is shown */
body.auth .auth-card:has(.reg-role-picker) {
  max-width: 560px;
}

/* ── Role picker (Buyer / Agent / Professional / Service Provider) ── */
.reg-role-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin: 1.1rem 0 1rem;
}
.reg-role {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reg-role input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.reg-role__card {
  position: relative;
  padding: .85rem .85rem .65rem;
  background: var(--bg-elev, #fff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 12px;
  transition: all .2s cubic-bezier(.34,1.36,.64,1);
  text-align: center;
  overflow: hidden;
}
.reg-role__card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rr-c, #2563eb) 18%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.reg-role__card:hover {
  border-color: var(--rr-c, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--rr-c, #2563eb) 25%, transparent);
}
.reg-role__card:hover::after { opacity: 1; }
.reg-role.is-active .reg-role__card,
.reg-role input[type="radio"]:checked + .reg-role__card {
  border-color: var(--rr-c, #2563eb);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rr-c, #2563eb) 6%, var(--bg-elev, #fff)) 0%,
    var(--bg-elev, #fff) 50%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--rr-c, #2563eb) 15%, transparent),
    0 8px 20px -4px color-mix(in srgb, var(--rr-c, #2563eb) 30%, transparent);
}
.reg-role.is-active .reg-role__card::after { opacity: 1; }

.reg-role__icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: .4rem;
  position: relative; z-index: 1;
}
.reg-role__lbl {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--text);
  margin-bottom: .15rem;
  position: relative; z-index: 1;
}
.reg-role__sub {
  font-size: .68rem;
  color: var(--text-muted);
  margin-bottom: .45rem;
  position: relative; z-index: 1;
}
.reg-role__pill {
  display: inline-block;
  font-size: .58rem;
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: 99px;
  letter-spacing: .04em;
  position: relative; z-index: 1;
}
.reg-role__pill--free {
  background: rgba(34,197,94,.14);
  color: #16a34a;
}
.reg-role__pill--paid {
  background: color-mix(in srgb, var(--rr-c, #2563eb) 14%, transparent);
  color: var(--rr-c, #2563eb);
}

/* ── Info banner that switches per role ─────────────────────── */
.reg-info {
  margin-bottom: 1.1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  transition: border-color .25s, background .25s;
}
.reg-info[data-state="buyer"]            { border-color: rgba(34,197,94,.25);  background: linear-gradient(135deg, rgba(34,197,94,.06),  rgba(16,185,129,.03)); }
.reg-info[data-state="agent"]            { border-color: rgba(8,145,178,.25);  background: linear-gradient(135deg, rgba(8,145,178,.06),  rgba(14,165,233,.03)); }
.reg-info[data-state="professional"]     { border-color: rgba(124,58,237,.25); background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(99,102,241,.03)); }
.reg-info[data-state="service_provider"] { border-color: rgba(217,119,6,.25);  background: linear-gradient(135deg, rgba(217,119,6,.06),  rgba(245,158,11,.03)); }

.reg-info__panel {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text);
  animation: regInfoFade .25s ease;
}
@keyframes regInfoFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reg-info__icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.reg-info__body strong { color: var(--text); font-weight: 700; }

/* ── Role-specific extra fields ─────────────────────────────── */
.reg-role-fields__panel {
  padding: .65rem .85rem .15rem;
  margin-bottom: .85rem;
  background: var(--bg-muted, #f1f5f9);
  border-radius: 10px;
  border-left: 3px solid;
  animation: regInfoFade .25s ease;
}
.reg-role-fields[data-active="agent"] .reg-role-fields__panel[data-fields="agent"]                      { border-left-color: #0891b2; }
.reg-role-fields[data-active="professional"] .reg-role-fields__panel[data-fields="professional"]        { border-left-color: #7c3aed; }
.reg-role-fields[data-active="service_provider"] .reg-role-fields__panel[data-fields="service_provider"]{ border-left-color: #d97706; }

/* ── "What happens next" preview ────────────────────────────── */
.reg-next {
  margin: 1rem 0 .85rem;
  padding: .85rem 1rem .65rem;
  background: var(--bg-muted, #f1f5f9);
  border: 1px dashed var(--border);
  border-radius: 10px;
  transition: border-color .25s, background .25s;
}
.reg-next[data-state="buyer"]            { border-color: rgba(34,197,94,.30);  }
.reg-next[data-state="agent"]            { border-color: rgba(8,145,178,.30);  }
.reg-next[data-state="professional"]     { border-color: rgba(124,58,237,.30); }
.reg-next[data-state="service_provider"] { border-color: rgba(217,119,6,.30);  }

.reg-next__hd {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
}
.reg-next__icon { font-size: .95rem; }
.reg-next__title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.reg-next__steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text);
}
.reg-next__steps li { margin-bottom: .15rem; }
.reg-next__steps strong { color: var(--text); font-weight: 700; }

/* Dynamic submit-button color per role */
body.auth #regSubmitBtn { transition: background .25s, box-shadow .25s; }
.reg-info[data-state="agent"]            ~ form #regSubmitBtn { background: linear-gradient(135deg, #0891b2, #0e7490); }
.reg-info[data-state="professional"]     ~ form #regSubmitBtn { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.reg-info[data-state="service_provider"] ~ form #regSubmitBtn { background: linear-gradient(135deg, #d97706, #b45309); }

/* Mobile */
@media (max-width: 480px) {
  body.auth .auth-card:has(.reg-role-picker) { max-width: 100%; }
  .reg-role-picker { gap: .4rem; }
  .reg-role__card { padding: .65rem .55rem .5rem; }
  .reg-role__icon { font-size: 1.3rem; }
  .reg-role__lbl { font-size: .8rem; }
  .reg-role__sub { font-size: .62rem; }
  .reg-role__pill { font-size: .54rem; padding: .12rem .4rem; }
  .reg-info__panel { padding: .65rem .85rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-role__card,
  .reg-info__panel,
  .reg-role-fields__panel { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Registration enhancements: trust strip · password meter · validations
   ═══════════════════════════════════════════════════════════════════════ */

/* Trust signals strip */
.reg-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 0 0 1.1rem;
  padding: .65rem .55rem;
  background: linear-gradient(135deg, rgba(34,197,94,.04), rgba(37,99,235,.03));
  border: 1px dashed rgba(34,197,94,.22);
  border-radius: 10px;
}
.reg-trust__item {
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem;
  text-align: center;
  padding: .25rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  cursor: help;
  transition: transform .15s;
}
.reg-trust__item:hover { transform: translateY(-1px); }
.reg-trust__icon {
  font-size: 1rem;
  line-height: 1;
}
.reg-trust__lbl {
  color: var(--text-muted);
  font-size: .56rem;
}
@media (max-width: 480px) {
  .reg-trust { grid-template-columns: repeat(2, 1fr); gap: .35rem; padding: .55rem .35rem; }
}

/* Input wrap (with status icon overlay) */
.reg-input-wrap {
  position: relative;
}
.reg-input-status {
  position: absolute;
  right: .65rem; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  pointer-events: none;
  transition: all .2s;
}
.reg-input-status:empty { display: none; }
.reg-input-status--ok {
  background: rgba(34,197,94,.18);
  color: #16a34a;
}
.reg-input-status--warn {
  background: rgba(217,119,6,.18);
  color: #d97706;
}
.reg-input-status--checking {
  background: rgba(37,99,235,.14);
  color: var(--brand);
  animation: regCheckSpin 1s linear infinite;
}
@keyframes regCheckSpin {
  0%,100% { opacity: .5; }
  50%     { opacity: 1;  }
}

/* Add right-padding to inputs that have a status icon */
.reg-input-wrap .form-control {
  padding-right: 2.4rem;
}

/* Phone field with country-code selector */
.reg-phone-wrap {
  display: flex;
  gap: .35rem;
}
.reg-phone-cc {
  flex: 0 0 110px;
  padding: .65rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev, #fff);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.reg-phone-cc:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
}
.reg-phone-input {
  flex: 1;
  min-width: 0;
}

/* Password visibility toggle */
.reg-field-password .reg-input-wrap .form-control { padding-right: 2.6rem; }
.reg-pwd-toggle {
  position: absolute;
  right: .35rem; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.reg-pwd-toggle:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.reg-pwd-toggle.is-shown { color: var(--brand); }
.reg-pwd-toggle.is-shown svg {
  /* Optional: change to "eye-off" — kept simple, just color shift */
}

/* Password strength meter */
.reg-pwd-strength {
  margin-top: .5rem;
}
.reg-pwd-strength__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: .35rem;
}
.reg-pwd-strength__bar-seg {
  height: 4px;
  background: var(--bg-muted);
  border-radius: 99px;
  transition: background .25s;
}
.reg-pwd-strength__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  font-size: .72rem;
}
.reg-pwd-strength__txt {
  font-weight: 800;
  letter-spacing: .02em;
}
.reg-pwd-strength__hints {
  color: var(--text-muted);
  font-style: italic;
}

/* Referral code success card */
.reg-referral-card {
  display: flex; align-items: center;
  gap: .65rem;
  margin-top: .55rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(217,119,6,.08), rgba(245,158,11,.04));
  border: 1px solid rgba(217,119,6,.25);
  border-left: 3px solid #d97706;
  animation: regRefSlide .25s cubic-bezier(.34,1.36,.64,1);
}
@keyframes regRefSlide {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reg-referral-card__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(217,119,6,.35));
}
.reg-referral-card__title {
  font-size: .82rem;
  font-weight: 800;
  color: #d97706;
  letter-spacing: -.005em;
}
.reg-referral-card__sub {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: .15rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reg-input-status--checking,
  .reg-referral-card,
  .reg-pwd-strength__bar-seg { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REGISTER WIZARD — premium visual polish
   Animated gradient backdrop · floating orbs · glassmorphism card ·
   gradient title · animated progress bar · sparkles on final step
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Animated gradient backdrop with floating orbs ──────────── */
body.auth--register-wizard {
  position: relative;
  background:
    radial-gradient(900px 600px at 12% 18%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(700px 500px at 88% 82%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(34,197,94,.04), transparent 70%),
    var(--bg);
  overflow-x: hidden;
}
body.auth--register-wizard::before,
body.auth--register-wizard::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  animation: regOrbDrift 18s ease-in-out infinite;
}
body.auth--register-wizard::before {
  top: -100px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(37,99,235,.65), rgba(37,99,235,0) 60%);
}
body.auth--register-wizard::after {
  bottom: -120px; right: -140px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,.55), rgba(124,58,237,0) 60%);
  animation-delay: -9s;
}
@keyframes regOrbDrift {
  0%, 100% { transform: translate3d(0,0,0)   scale(1);   }
  33%      { transform: translate3d(40px,30px,0)  scale(1.08); }
  66%      { transform: translate3d(-30px,50px,0) scale(.94);  }
}

/* ── Glass auth card with premium shadow ─────────────────────── */
body.auth--register-wizard .auth-shell { position: relative; z-index: 1; }
body.auth--register-wizard .auth-card {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  animation: regCardRise .55s cubic-bezier(.34,1.36,.64,1) both;
}
@keyframes regCardRise {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);  }
}
body.auth--register-wizard .auth-card .card {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-elev, #fff) 92%, transparent) 0%,
      var(--bg-elev, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 48px -16px rgba(13,27,46,.18),
    0 32px 80px -24px color-mix(in srgb, var(--brand-rgb, 37,99,235) 18%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}

/* Decorative top edge gradient on the card */
body.auth--register-wizard .auth-card .card::before {
  content: '';
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--regw-active, var(--brand)) 30%,
    #7c3aed 70%,
    transparent 100%);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--regw-active, var(--brand)) 35%, transparent);
  transition: background .35s ease;
}

/* ── Brand block enhancement ─────────────────────────────────── */
body.auth--register-wizard .auth-brand .logo {
  background: linear-gradient(135deg, var(--regw-active, var(--brand)) 0%, #7c3aed 100%);
  box-shadow:
    0 4px 14px -2px color-mix(in srgb, var(--regw-active, var(--brand)) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: background .35s ease, box-shadow .35s ease;
}

/* ── Heading: gradient text with role-color ─────────────────── */
body.auth--register-wizard .regw-step__title,
body.auth--register-wizard #regHeading {
  background: linear-gradient(135deg, var(--regw-active, var(--brand)) 0%, #1e293b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}
[data-theme="dark"] body.auth--register-wizard .regw-step__title,
[data-theme="dark"] body.auth--register-wizard #regHeading {
  background: linear-gradient(135deg, var(--regw-active, var(--brand)) 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Progress bar — premium polish with animated fill ────────── */
body.auth--register-wizard .regw-progress {
  position: relative;
  margin-top: .65rem;
}
body.auth--register-wizard .regw-progress__dot {
  background: var(--surface-2, #eef2f7);
  border: 2px solid var(--border);
  font-weight: 800;
  font-size: .82rem;
  position: relative;
  transition: all .3s cubic-bezier(.34,1.36,.64,1);
}
body.auth--register-wizard .regw-progress__item--active .regw-progress__dot {
  background: linear-gradient(135deg, var(--regw-active, var(--brand)), color-mix(in srgb, var(--regw-active, var(--brand)) 80%, #7c3aed));
  border-color: transparent;
  color: #fff;
  transform: scale(1.15);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--regw-active, var(--brand)) 45%, transparent),
    0 0 0 4px color-mix(in srgb, var(--regw-active, var(--brand)) 12%, transparent);
}
body.auth--register-wizard .regw-progress__item--active .regw-progress__dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--regw-active, var(--brand)) 35%, transparent);
  animation: regwDotPulse 1.6s ease-in-out infinite;
}
@keyframes regwDotPulse {
  0%, 100% { transform: scale(.92); opacity: .7; }
  50%      { transform: scale(1.15); opacity: 0; }
}
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot {
  background: color-mix(in srgb, var(--regw-active, var(--brand)) 14%, transparent);
  color: var(--regw-active, var(--brand));
  border-color: color-mix(in srgb, var(--regw-active, var(--brand)) 35%, transparent);
}
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: .85rem;
  color: var(--regw-active, var(--brand));
}
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot {
  font-size: 0;     /* hide the number, keep the ✓ from ::after */
}

body.auth--register-wizard .regw-progress__line {
  height: 3px;
  border-radius: 99px;
  background: var(--surface-2, #eef2f7);
  overflow: hidden;
  position: relative;
}
body.auth--register-wizard .regw-progress__line--done {
  background: linear-gradient(90deg, var(--regw-active, var(--brand)), color-mix(in srgb, var(--regw-active, var(--brand)) 70%, #7c3aed));
}
body.auth--register-wizard .regw-progress__line--done::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: regwLineSheen 2.4s ease-in-out infinite;
}
@keyframes regwLineSheen {
  0%, 100% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(110%); }
}

body.auth--register-wizard .regw-progress__lbl {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .25s, font-weight .25s;
}
body.auth--register-wizard .regw-progress__item--active .regw-progress__lbl {
  color: var(--regw-active, var(--brand));
  font-weight: 800;
}

/* ── Step transition — polished slide-in ────────────────────── */
body.auth--register-wizard .regw-step--active {
  animation: regwStepEnter .45s cubic-bezier(.25,.85,.45,1) both;
}
@keyframes regwStepEnter {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Form controls — premium focus ring ─────────────────────── */
body.auth--register-wizard .form-control:focus,
body.auth--register-wizard .form-select:focus {
  border-color: var(--regw-active, var(--brand));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--regw-active, var(--brand)) 14%, transparent);
}

/* ── Continue / submit buttons — role-coloured gradient ─────── */
body.auth--register-wizard [data-regw-next],
body.auth--register-wizard #regSubmitBtn {
  background: linear-gradient(135deg, var(--regw-active, var(--brand)) 0%, #6366f1 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .005em;
  box-shadow:
    0 4px 14px -2px color-mix(in srgb, var(--regw-active, var(--brand)) 40%, transparent),
    0 1px 0 rgba(255,255,255,.18) inset;
  transition: transform .15s, box-shadow .2s, background .35s;
}
body.auth--register-wizard [data-regw-next]:hover:not(:disabled),
body.auth--register-wizard #regSubmitBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px -2px color-mix(in srgb, var(--regw-active, var(--brand)) 55%, transparent),
    0 1px 0 rgba(255,255,255,.18) inset;
}
body.auth--register-wizard [data-regw-next]:active:not(:disabled),
body.auth--register-wizard #regSubmitBtn:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}

/* ── Role-card hover lift + checked state polish ─────────────── */
body.auth--register-wizard .reg-role__card {
  border-radius: 14px;
  transition: all .25s cubic-bezier(.34,1.36,.64,1);
}
body.auth--register-wizard .reg-role:hover .reg-role__card {
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px -4px rgba(13,27,46,.10),
    0 16px 40px -8px color-mix(in srgb, var(--rr-c, var(--brand)) 22%, transparent);
}

/* ── Summary card on Step 5 — premium gradient panel ─────────── */
body.auth--register-wizard .regw-summary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--regw-active, var(--brand)) 5%, var(--bg-elev)) 0%,
    var(--bg-elev) 60%);
  border: 1px solid color-mix(in srgb, var(--regw-active, var(--brand)) 22%, var(--border));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
body.auth--register-wizard .regw-summary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--regw-active, var(--brand)), #7c3aed);
}
body.auth--register-wizard .regw-summary dt {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.auth--register-wizard .regw-summary dd {
  font-weight: 600;
  font-size: .92rem;
}

/* ── Sparkle decorations on the final step (✨) ──────────────── */
body.auth--register-wizard .regw-step[data-step="5"].regw-step--active::before,
body.auth--register-wizard .regw-step[data-step="5"].regw-step--active::after {
  content: '✨';
  position: absolute;
  font-size: 1.1rem;
  opacity: .7;
  pointer-events: none;
  animation: regwSparkle 2.2s ease-in-out infinite;
}
body.auth--register-wizard .regw-step[data-step="5"] { position: relative; }
body.auth--register-wizard .regw-step[data-step="5"]::before {
  top: 1.4rem; right: 1rem;
  animation-delay: 0s;
}
body.auth--register-wizard .regw-step[data-step="5"]::after {
  top: 3.5rem; right: 2.4rem;
  font-size: .8rem;
  animation-delay: -1.1s;
}
@keyframes regwSparkle {
  0%, 100% { transform: scale(.85) rotate(-8deg); opacity: .5; }
  50%      { transform: scale(1.15) rotate(12deg); opacity: 1; }
}

/* ── Validation status indicators get colour pulse ──────────── */
body.auth--register-wizard .regw-status--ok {
  animation: regwStatusPop .35s cubic-bezier(.34,1.6,.64,1);
}
@keyframes regwStatusPop {
  from { transform: translateY(-50%) scale(.4); opacity: 0; }
  to   { transform: translateY(-50%) scale(1);   opacity: 1; }
}

/* ── Trust badge — subtle shield watermark below progress ────── */
body.auth--register-wizard .regw-progress::after {
  content: '🔒 Bank-grade encryption · DPDP Act compliant';
  display: block;
  text-align: center;
  margin-top: -.45rem;
  margin-bottom: .35rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .75;
  width: 100%;
  flex-basis: 100%;
}

/* ── "What happens next" preview card on Step 5 ──────────────── */
body.auth--register-wizard .reg-next {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--regw-active, var(--brand)) 6%, transparent),
    color-mix(in srgb, #7c3aed 4%, transparent));
  border: 1px dashed color-mix(in srgb, var(--regw-active, var(--brand)) 30%, transparent);
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: all .35s ease;
}

/* ── Mobile polish ─────────────────────────────────────────── */
@media (max-width: 480px) {
  body.auth--register-wizard .auth-card { margin: .5rem; }
  body.auth--register-wizard .auth-card .card { border-radius: 16px; }
  body.auth--register-wizard::before { width: 280px; height: 280px; }
  body.auth--register-wizard::after  { width: 320px; height: 320px; }
  body.auth--register-wizard .regw-progress::after { font-size: .56rem; }
}

/* ── Reduced-motion guards ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.auth--register-wizard::before,
  body.auth--register-wizard::after,
  body.auth--register-wizard .regw-progress__item--active .regw-progress__dot::before,
  body.auth--register-wizard .regw-progress__line--done::after,
  body.auth--register-wizard .regw-step[data-step="5"]::before,
  body.auth--register-wizard .regw-step[data-step="5"]::after,
  body.auth--register-wizard .auth-card,
  body.auth--register-wizard .regw-step--active,
  body.auth--register-wizard .regw-status--ok {
    animation: none !important;
  }
  body.auth--register-wizard .regw-progress__dot,
  body.auth--register-wizard [data-regw-next],
  body.auth--register-wizard #regSubmitBtn,
  body.auth--register-wizard .reg-role__card { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 — Wizard premium layer 2: particles · avatar · confetti · loader
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Floating particles backdrop ─────────────────────────── */
.regw-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.regw-particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,58,237,.45) 0%,
    rgba(37,99,235,.28) 50%,
    transparent 80%);
  opacity: .55;
  animation: regwParticleRise linear infinite;
  filter: blur(.5px);
  will-change: transform, opacity;
}
@keyframes regwParticleRise {
  0%   { transform: translate3d(0, 0, 0)            scale(.6); opacity: 0; }
  10%  { opacity: .55; }
  50%  { transform: translate3d(20px, -50vh, 0)     scale(1);  opacity: .55; }
  90%  { opacity: .25; }
  100% { transform: translate3d(-15px, -110vh, 0)   scale(.4); opacity: 0; }
}
[data-theme="dark"] .regw-particle {
  background: radial-gradient(circle,
    rgba(167,139,250,.50) 0%,
    rgba(99,102,241,.30) 50%,
    transparent 80%);
}

/* ── 2. Live email avatar preview ───────────────────────────── */
.regw-avatar {
  position: relative;
  width: 60px; height: 60px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--avatar-c, #2563eb), color-mix(in srgb, var(--avatar-c, #2563eb) 60%, #7c3aed));
  color: #fff;
  box-shadow:
    0 6px 18px -4px color-mix(in srgb, var(--avatar-c, #2563eb) 50%, transparent),
    0 0 0 4px color-mix(in srgb, var(--avatar-c, #2563eb) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation: regwAvatarIn .35s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform .25s, box-shadow .25s;
}
@keyframes regwAvatarIn {
  from { opacity: 0; transform: scale(.4) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0); }
}
.regw-avatar:hover {
  transform: scale(1.06);
}
.regw-avatar__initials {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
  z-index: 1;
}
.regw-avatar__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--avatar-c, #2563eb) 35%, transparent);
  opacity: 0;
  pointer-events: none;
}
.regw-avatar--ok .regw-avatar__ring {
  opacity: 1;
  animation: regwAvatarRing 1.6s ease-in-out infinite;
}
.regw-avatar--ok::after {
  content: '✓';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: 2px solid var(--bg-elev, #fff);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(34,197,94,.4);
  animation: regwAvatarCheck .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes regwAvatarCheck {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes regwAvatarRing {
  0%   { transform: scale(.96); opacity: .8; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ── 3. Confetti burst ──────────────────────────────────────── */
.regw-confetti-piece {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: regwConfettiFly .7s cubic-bezier(.42,0,.58,1) forwards;
  will-change: transform, opacity;
}
@keyframes regwConfettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--cx, 0)), calc(-50% + var(--cy, 0))) rotate(var(--cr, 270deg)); opacity: 0; }
}

/* ── 4. Submit button loader ────────────────────────────────── */
.regw-loader {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: regwLoaderSpin .7s linear infinite;
  vertical-align: -3px;
}
@keyframes regwLoaderSpin {
  to { transform: rotate(360deg); }
}
body.auth--register-wizard #regSubmitBtn.is-loading {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--regw-active, var(--brand)) 70%, #6b7280),
    #6366f1) !important;
  cursor: progress;
  transform: none !important;
  pointer-events: none;
}

/* ── 5. Animated check stroke for status icons ──────────────── */
body.auth--register-wizard .regw-status--ok::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
  position: relative;
  margin-right: .25rem;
  box-shadow: 0 2px 6px rgba(34,197,94,.35);
  animation: regwStatusCirc .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes regwStatusCirc {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .regw-particles,
  .regw-confetti-piece,
  .regw-avatar,
  .regw-avatar--ok .regw-avatar__ring,
  .regw-avatar--ok::after,
  .regw-loader,
  body.auth--register-wizard .regw-status--ok::before {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v4 — Register Wizard premium-responsive layer (mobile-nav + touch polish)
   - Treats .auth-topbar like a sticky mobile-nav header
   - Compact step pill ("Step 2 of 5") on phones, full dots on tablets+
   - Sticky bottom action bar for Back / Continue with safe-area insets
   - Tightened typography, scaled card padding, larger tap targets
   - Reduced particle/glow cost on small screens for perf
   - Landscape-phone and tiny-phone (<360px) overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* Brand label inside the topbar — visible only on mobile */
body.auth--register-wizard .auth-topbar__brand { display: none; }

/* Disable browser pull-to-refresh on the registration page so our
   pull-to-resume gesture has the surface to itself. */
body.auth--register-wizard {
  overscroll-behavior-y: contain;
}

/* ── 1. Auth top bar as sticky mobile-nav ────────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    padding-top: max(.55rem, env(safe-area-inset-top, .55rem));
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 14%, var(--border, #e5e7eb));
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 14px -10px rgba(15,23,42,.18);
  }
  body.auth--register-wizard .auth-topbar__back {
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--regw-active, #2563eb) 8%, transparent);
    color: var(--regw-active, #2563eb);
    flex: 0 0 auto;
    transition: background .2s, transform .2s;
  }
  body.auth--register-wizard .auth-topbar__back:active { transform: scale(.94); }
  body.auth--register-wizard .auth-topbar__back svg { width: 16px; height: 16px; }
  body.auth--register-wizard .auth-topbar__back > *:not(svg) { display: none; }
  body.auth--register-wizard .auth-topbar__brand { display: inline-block; }
  /* Inject mobile-nav step badge — populated by JS */
  body.auth--register-wizard .auth-topbar::after {
    content: attr(data-regw-stepbadge);
    margin-left: auto;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    color: var(--regw-active, #2563eb);
    background: color-mix(in srgb, var(--regw-active, #2563eb) 10%, transparent);
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent);
    transition: color .25s, background .25s, border-color .25s;
  }
  body.auth--register-wizard .auth-topbar[data-regw-stepbadge=""]::after { display: none; }
  /* True-centre brand mark regardless of back / badge widths */
  body.auth--register-wizard .auth-topbar { position: sticky; }
  body.auth--register-wizard .auth-topbar__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: .92rem; font-weight: 700;
    color: var(--text);
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 8rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 2. Compact progress: dots-only on phones, "Step X of N" on tiny ── */
@media (max-width: 480px) {
  body.auth--register-wizard .regw-progress {
    gap: .3rem;
    margin: .15rem 0 1rem;
  }
  body.auth--register-wizard .regw-progress__item { gap: 0; }
  body.auth--register-wizard .regw-progress__dot { width: 1.35rem; height: 1.35rem; font-size: .68rem; }
  body.auth--register-wizard .regw-progress__line { flex-basis: .55rem; height: 2px; }
  body.auth--register-wizard .regw-progress__lbl { display: none; }
  /* The active dot's pulse ring is tighter on small screens */
  body.auth--register-wizard .regw-progress__item--active .regw-progress__dot::after {
    inset: -3px;
  }
}
@media (max-width: 360px) {
  /* Replace dots with a single text pill on cramped phones */
  body.auth--register-wizard .regw-progress {
    justify-content: center;
    gap: 0;
  }
  body.auth--register-wizard .regw-progress > li { display: none; }
  body.auth--register-wizard .regw-progress::before {
    content: attr(data-regw-progresslabel);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--regw-active, #2563eb) 10%, transparent);
    color: var(--regw-active, #2563eb);
    font-size: .75rem; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 24%, transparent);
  }
}

/* ── 3. Card / typography scale on mobile ─────────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-shell {
    padding: 1rem .75rem 7rem; /* leave space for sticky action bar */
    align-items: flex-start;
    min-height: 100dvh;
  }
  body.auth--register-wizard .auth-card { margin: 0; max-width: 100%; }
  body.auth--register-wizard .auth-card .card {
    border-radius: 18px;
    box-shadow:
      0 18px 40px -22px rgba(15, 23, 42, .25),
      0 6px 16px -10px color-mix(in srgb, var(--regw-active, #2563eb) 30%, transparent);
  }
  body.auth--register-wizard .auth-card .card__body {
    padding: 1.1rem 1rem 1.25rem;
  }
  body.auth--register-wizard #regHeading { font-size: 1.25rem; line-height: 1.25; }
  body.auth--register-wizard #regSubHeading { font-size: .85rem; }
  body.auth--register-wizard .regw-step__title { font-size: 1rem; }
  body.auth--register-wizard .regw-step__sub   { font-size: .82rem; margin-bottom: .85rem; }
  body.auth--register-wizard .form-label { font-size: .85rem; }
  /* Larger touch targets on inputs */
  body.auth--register-wizard .form-control,
  body.auth--register-wizard .form-select {
    min-height: 46px;
    font-size: 1rem; /* keep ≥16px to prevent iOS zoom on focus */
    padding: .65rem .85rem;
  }
  body.auth--register-wizard .regw-input-wrap .regw-status { right: .85rem; }
  body.auth--register-wizard .regw-pw-toggle {
    min-width: 44px; min-height: 32px;
    font-size: .78rem;
  }
}

/* ── 4. Role picker reflow on mobile ──────────────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .reg-role-picker {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  body.auth--register-wizard .reg-role__card {
    min-height: 7.25rem;
    padding: .8rem .65rem .7rem;
    -webkit-tap-highlight-color: transparent;
  }
  body.auth--register-wizard .reg-role:active .reg-role__card {
    transform: scale(.97);
  }
}
@media (max-width: 380px) {
  /* Stack role cards on narrow phones for legibility */
  body.auth--register-wizard .reg-role-picker {
    grid-template-columns: 1fr;
  }
  body.auth--register-wizard .reg-role__card {
    min-height: auto;
    padding: .75rem .85rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon lbl pill"
      "icon sub sub";
    gap: .15rem .75rem;
    text-align: left;
  }
  body.auth--register-wizard .reg-role__icon { grid-area: icon; align-self: center; font-size: 1.6rem; }
  body.auth--register-wizard .reg-role__lbl  { grid-area: lbl; }
  body.auth--register-wizard .reg-role__sub  { grid-area: sub; }
  body.auth--register-wizard .reg-role__pill { grid-area: pill; align-self: center; }
}

/* ── 5. Sticky bottom action bar (Back / Continue) ─────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .regw-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    margin: 0;
    padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 14%, var(--border, #e5e7eb));
    box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, .25);
    gap: .6rem;
    animation: regwBarUp .35s cubic-bezier(.2,.8,.2,1) both;
  }
  body.auth--register-wizard .regw-nav .btn {
    min-height: 48px;
    font-size: .95rem;
    border-radius: 14px;
  }
  body.auth--register-wizard .regw-nav .btn-auth-submit {
    min-height: 50px;
    font-size: 1rem;
  }
  body.auth--register-wizard .regw-nav__back {
    min-width: 4.25rem !important;
    padding-left: .85rem; padding-right: .85rem;
  }
}
@keyframes regwBarUp {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── 6. Avatar / particle perf on mobile ──────────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .regw-avatar { width: 2.25rem; height: 2.25rem; }
  body.auth--register-wizard .regw-avatar__initials { font-size: .82rem; }
  /* Trim particle count visually — hide every other one */
  body.auth--register-wizard .regw-particle:nth-child(even) { display: none; }
  /* Soften the heaviest aurora blur */
  body.auth--register-wizard .auth-shell::before,
  body.auth--register-wizard .auth-shell::after {
    filter: blur(28px) saturate(1.05);
    opacity: .55;
  }
}
@media (max-width: 480px) {
  /* Lighter still on phones — keep one accent blob, drop the second */
  body.auth--register-wizard .auth-shell::after { display: none; }
  body.auth--register-wizard .regw-particle:nth-child(3n) { display: none; }
}

/* ── 7. Pin info / next-steps cards to roomier mobile spacing ─────── */
@media (max-width: 720px) {
  body.auth--register-wizard .reg-info { padding: .75rem .9rem; }
  body.auth--register-wizard .reg-info__panel { font-size: .82rem; padding: 0; }
  body.auth--register-wizard .reg-next { padding: .75rem .9rem; }
  body.auth--register-wizard .regw-summary { padding: .75rem .85rem; font-size: .82rem; }
  body.auth--register-wizard .regw-summary dl {
    grid-template-columns: 1fr;
    gap: .15rem .5rem;
  }
  body.auth--register-wizard .regw-summary dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
  body.auth--register-wizard .regw-summary dd { font-size: .9rem; margin-bottom: .35rem; }
}

/* ── 8. Landscape phones — keep header lean, reduce vertical waste ── */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 480px) {
  body.auth--register-wizard .auth-topbar { position: relative; }
  body.auth--register-wizard .auth-shell { padding: .5rem .75rem 5.5rem; }
  body.auth--register-wizard .auth-card .card__body { padding: .85rem 1rem 1rem; }
  body.auth--register-wizard #regHeading { font-size: 1.1rem; margin-bottom: 0; }
  body.auth--register-wizard #regSubHeading { display: none; }
  body.auth--register-wizard .regw-step__sub { display: none; }
  body.auth--register-wizard .regw-progress { margin: .1rem 0 .65rem; }
  body.auth--register-wizard .regw-nav { padding: .45rem .85rem calc(.45rem + env(safe-area-inset-bottom, 0px)); }
  body.auth--register-wizard .regw-nav .btn { min-height: 42px; }
}

/* ── 9. Country-code / country / phone polish on mobile ───────────── */
@media (max-width: 480px) {
  body.auth--register-wizard input[type="tel"],
  body.auth--register-wizard input[type="email"],
  body.auth--register-wizard input[type="password"] {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* ── 10. Focus-visible touch ring for keyboard / external switch users */
@media (hover: none) {
  body.auth--register-wizard .reg-role:focus-within .reg-role__card {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--rr-c, #2563eb) 40%, transparent),
      0 12px 28px -12px color-mix(in srgb, var(--rr-c, #2563eb) 35%, transparent);
  }
  body.auth--register-wizard .btn:focus-visible,
  body.auth--register-wizard .btn-auth-submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--regw-active, #2563eb) 55%, transparent);
    outline-offset: 2px;
  }
}

/* ── 11. Reduced-motion guards for the v4 layer ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.auth--register-wizard .regw-nav { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v5 — Register Wizard premium-interaction layer
   - Swipe-to-navigate (visual hint shimmer)
   - Resume banner ("Continue where you left off")
   - Tap-to-jump on completed progress dots
   - Field shake on error, bounce on success
   - Estimated time remaining sub-pill on mobile-nav
   - Network-aware loader hint
   - Pull indicator (passive)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Resume banner (shown when localStorage has saved state) ────── */
.regw-resume {
  margin: 0 0 .85rem;
  padding: .65rem .85rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--regw-active, #2563eb) 8%, var(--surface-2, #f8fafc)) 0%,
    var(--surface-2, #f8fafc) 100%);
  border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 22%, var(--border, #e5e7eb));
  font-size: .82rem;
  color: var(--text);
  animation: regwResumeIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.regw-resume__icon {
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--regw-active, #2563eb) 16%, transparent);
  color: var(--regw-active, #2563eb);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex: 0 0 auto;
}
.regw-resume__body { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.regw-resume__body strong { font-weight: 700; }
.regw-resume__when { color: var(--text-muted); font-size: .74rem; display: block; margin-top: .1rem; }
.regw-resume__btn {
  appearance: none; -webkit-appearance: none;
  border: 0; cursor: pointer;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--regw-active, #2563eb);
  color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  transition: filter .2s, transform .2s;
}
.regw-resume__btn:hover { filter: brightness(1.06); }
.regw-resume__btn:active { transform: scale(.96); }
.regw-resume__close {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  color: var(--text-muted);
  padding: .3rem .35rem;
  border-radius: 8px;
  flex: 0 0 auto;
}
.regw-resume__close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
@keyframes regwResumeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. Tap-to-jump on completed progress dots ─────────────────────── */
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot {
  cursor: pointer;
}
body.auth--register-wizard .regw-progress__item--done:hover .regw-progress__dot {
  transform: scale(1.15);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--regw-active, #2563eb) 30%, transparent);
}
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot::before {
  content: "Tap to revisit";
  position: absolute;
  bottom: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: var(--surface, #fff);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .25rem .5rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10;
}
@media (hover: hover) {
  body.auth--register-wizard .regw-progress__item--done:hover .regw-progress__dot::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── 3. Field shake on error, bounce on success ────────────────────── */
@keyframes regwFieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes regwFieldPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 60%, transparent); }
  60%  { transform: scale(1.012); box-shadow: 0 0 0 6px color-mix(in srgb, #16a34a 0%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
body.auth--register-wizard .form-control.regw-shake,
body.auth--register-wizard .form-select.regw-shake {
  animation: regwFieldShake .42s cubic-bezier(.36,.07,.19,.97);
  border-color: #dc2626 !important;
}
body.auth--register-wizard .form-control.regw-pulse,
body.auth--register-wizard .form-select.regw-pulse {
  animation: regwFieldPulse .55s ease-out;
}

/* ── 4. Swipe hint shimmer (subtle, on first load only) ────────────── */
.regw-swipe-hint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  animation: regwSwipeHintShow 4s ease-out 1.4s 1 forwards;
}
.regw-swipe-hint::before {
  content: "← swipe →";
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--regw-active, #2563eb);
  background: color-mix(in srgb, var(--regw-active, #2563eb) 10%, var(--surface, #fff));
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes regwSwipeHintShow {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (hover: hover) {
  /* Only relevant on touch devices */
  .regw-swipe-hint { display: none; }
}

/* ── 5. Step transition: swipe-drag follow-through ─────────────────── */
body.auth--register-wizard .regw[data-dragging] .regw-step--active {
  animation: none;
  transition: transform .05s linear;
}

/* ── 6. Estimated time chip below the mobile-nav badge ─────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar {
    /* allow stacked badge + ETA */
    align-items: center;
  }
  body.auth--register-wizard .auth-topbar__eta {
    display: none;
    margin-left: .35rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    padding: .2rem .55rem;
    border-radius: 999px;
  }
  body.auth--register-wizard .auth-topbar__eta:not([data-eta=""]) {
    display: inline-block;
  }
  body.auth--register-wizard .auth-topbar__eta::before {
    content: attr(data-eta);
  }
}

/* ── 7. Slow-connection hint inside loader ─────────────────────────── */
.regw-loader-hint {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 6rem));
  background: var(--text);
  color: var(--surface, #fff);
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35);
  opacity: 0;
  pointer-events: none;
  animation: regwSlowIn .4s ease-out forwards;
}
@keyframes regwSlowIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 4rem)); }
  to   { opacity: 1; transform: translate(-50%, calc(-50% + 6rem)); }
}

/* ── 8. Reduced-motion guards for v5 ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .regw-resume,
  .regw-swipe-hint,
  body.auth--register-wizard .form-control.regw-shake,
  body.auth--register-wizard .form-select.regw-shake,
  body.auth--register-wizard .form-control.regw-pulse,
  body.auth--register-wizard .form-select.regw-pulse,
  .regw-loader-hint {
    animation: none !important;
  }
  body.auth--register-wizard .regw[data-dragging] .regw-step--active {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v6 — Smart-input layer
   - Email typo suggestion chip
   - Paste-cleanup highlight flash
   - Browser autofill detection (soft highlight)
   - Inline save toast (bottom-right)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Email typo suggestion chip ───────────────────────────────────── */
.regw-typo-fix {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  padding: .35rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  background: linear-gradient(135deg,
    color-mix(in srgb, #d97706 12%, var(--surface-2, #f8fafc)),
    var(--surface-2, #f8fafc));
  border: 1px solid color-mix(in srgb, #d97706 25%, transparent);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  animation: regwTypoIn .25s ease-out both;
  transition: filter .2s, transform .2s;
}
.regw-typo-fix:hover { filter: brightness(1.05); transform: translateY(-1px); }
.regw-typo-fix:active { transform: translateY(0) scale(.98); }
.regw-typo-fix__lbl { color: var(--text-muted); font-weight: 400; }
.regw-typo-fix__sug { color: #d97706; font-weight: 700; }
@keyframes regwTypoIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Paste-cleanup highlight (input flashes to indicate auto-format) ── */
@keyframes regwPasteFlash {
  0%   { background-color: color-mix(in srgb, var(--regw-active, #2563eb) 12%, transparent); }
  100% { background-color: transparent; }
}
body.auth--register-wizard .form-control.regw-paste-flash {
  animation: regwPasteFlash .6s ease-out;
}

/* ── Browser autofill soft highlight ──────────────────────────────── */
body.auth--register-wizard .form-control:-webkit-autofill {
  box-shadow: 0 0 0 100px color-mix(in srgb, var(--regw-active, #2563eb) 4%, var(--surface, #fff)) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  border-color: color-mix(in srgb, var(--regw-active, #2563eb) 30%, var(--border, #e5e7eb)) !important;
}
body.auth--register-wizard .form-control:-webkit-autofill:focus {
  box-shadow:
    0 0 0 100px color-mix(in srgb, var(--regw-active, #2563eb) 6%, var(--surface, #fff)) inset,
    0 0 0 3px color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent) !important;
}

/* ── Save toast (auto-fades after 1.6s) ───────────────────────────── */
.regw-save-toast {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--surface, #fff);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 8px 22px -10px rgba(15,23,42,.4);
  pointer-events: none;
  animation: regwSaveToastIn .25s ease-out, regwSaveToastOut .35s ease-in 1.3s forwards;
}
.regw-save-toast::before {
  content: "✓";
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem;
}
@keyframes regwSaveToastIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes regwSaveToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 720px) {
  .regw-save-toast { right: 50%; transform: translateX(50%); bottom: 6.5rem; }
  @keyframes regwSaveToastIn  { from { opacity: 0; transform: translateX(50%) translateY(8px); } to { opacity: 1; transform: translateX(50%) translateY(0); } }
  @keyframes regwSaveToastOut { from { opacity: 1; transform: translateX(50%); } to { opacity: 0; transform: translateX(50%) translateY(8px); } }
}

/* ═══════════════════════════════════════════════════════════════════════
   v7 — Micro-interaction layer
   - Magnetic submit button (cursor-follow shadow)
   - Focused field gradient border-crawl
   - Final-step success celebration
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Focused field gradient border-crawl ──────────────────────────── */
@property --regw-crawl {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
body.auth--register-wizard .form-control:focus,
body.auth--register-wizard .form-select:focus {
  background-clip: padding-box;
  position: relative;
}
body.auth--register-wizard .regw-input-wrap:focus-within::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--regw-crawl, 0deg),
    color-mix(in srgb, var(--regw-active, #2563eb) 60%, transparent) 0%,
    transparent 30%,
    color-mix(in srgb, var(--regw-active, #2563eb) 60%, transparent) 60%,
    transparent 90%);
  z-index: -1;
  border-radius: 10px;
  animation: regwCrawl 3s linear infinite;
  opacity: .6;
  pointer-events: none;
}
@keyframes regwCrawl {
  to { --regw-crawl: 360deg; }
}
/* Browsers without @property — fall back to plain rotate */
@supports not (transition: --regw-crawl 1s) {
  @keyframes regwCrawl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

/* ── Magnetic submit button (cursor proximity glow) ───────────────── */
body.auth--register-wizard .btn-auth-submit {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
}
body.auth--register-wizard .btn-auth-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my),
    color-mix(in srgb, #fff 25%, transparent) 0%,
    transparent 40%);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  border-radius: inherit;
}
body.auth--register-wizard .btn-auth-submit:hover::before { opacity: 1; }

/* ── Final-step success celebration ring ──────────────────────────── */
.regw-celebrate {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7rem; height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, #16a34a 40%, transparent) 0%,
    transparent 70%);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  animation: regwCelebrate 1.2s ease-out forwards;
}
.regw-celebrate::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: #16a34a;
}
@keyframes regwCelebrate {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ── Reduced-motion guards for v6 + v7 ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .regw-typo-fix,
  body.auth--register-wizard .form-control.regw-paste-flash,
  .regw-save-toast,
  body.auth--register-wizard .regw-input-wrap:focus-within::before,
  .regw-celebrate {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v8 — Swipe + Mobile-nav level-up
   - Edge-zone / velocity-aware swipe with live progress
   - Rubber-band resistance on disallowed direction
   - Adjacent-step peek behind the active card
   - Mobile-nav: tappable step-menu popover, scroll-aware hide,
     thin progress fill bar, save-pulse indicator dot
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Live swipe progress indicator at the bottom of the card ───── */
.regw-swipe-meter {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: transparent;
  border-radius: 0 0 inherit inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 5;
}
.regw-swipe-meter[data-active="1"] { opacity: 1; }
.regw-swipe-meter__bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--regw-active, #2563eb) 90%, transparent),
    color-mix(in srgb, var(--regw-active, #2563eb) 60%, transparent));
  transform: translateX(-50%);
  transition: width 60ms linear, background .2s;
  border-radius: 999px;
}
.regw-swipe-meter[data-direction="back"] .regw-swipe-meter__bar {
  left: 0;
  transform: none;
}
.regw-swipe-meter[data-direction="next"] .regw-swipe-meter__bar {
  left: auto;
  right: 0;
  transform: none;
}
.regw-swipe-meter[data-armed="1"] .regw-swipe-meter__bar {
  background: linear-gradient(90deg, #16a34a, color-mix(in srgb, #16a34a 70%, var(--regw-active, #2563eb)));
  box-shadow: 0 0 12px color-mix(in srgb, #16a34a 50%, transparent);
}
.regw-swipe-meter[data-blocked="1"] .regw-swipe-meter__bar {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

/* Edge hot-zones become subtle vertical bars when user is mid-swipe */
.regw-edge-hint {
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.regw-edge-hint--left { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent), transparent); }
.regw-edge-hint--right { right: 0; background: linear-gradient(-90deg, color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent), transparent); }
.regw[data-swipe-near-left="1"]  .regw-edge-hint--left,
.regw[data-swipe-near-right="1"] .regw-edge-hint--right { opacity: 1; }

/* ── 2. Adjacent-step peek (visible during drag) ──────────────────── */
.regw[data-dragging="1"] .regw-step--active {
  will-change: transform;
  transition: none !important;
  animation: none !important;
}
.regw-peek {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.regw-peek--next { right: -100%; }
.regw-peek--back { left:  -100%; }
.regw[data-dragging="1"] .regw-peek--next,
.regw[data-dragging="1"] .regw-peek--back { opacity: .35; }
.regw-peek__chip {
  background: color-mix(in srgb, var(--regw-active, #2563eb) 8%, var(--surface-2, #f8fafc));
  border: 1px dashed color-mix(in srgb, var(--regw-active, #2563eb) 30%, transparent);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── 3. Rubber-band shake when swiping a disallowed direction ─────── */
@keyframes regwRubber {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(var(--rubber-x, -14px)); }
  60%      { transform: translateX(calc(var(--rubber-x, -14px) * .35)); }
}
.regw[data-rubber="back"] .regw-step--active { --rubber-x: 14px;  animation: regwRubber .35s ease-out; }
.regw[data-rubber="next"] .regw-step--active { --rubber-x: -14px; animation: regwRubber .35s ease-out; }

/* ── 4. Mobile-nav: thin progress fill bar under the topbar ───────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar { position: sticky; }
  body.auth--register-wizard .auth-topbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: color-mix(in srgb, var(--regw-active, #2563eb) 90%, transparent);
    width: var(--regw-progresspct, 0%);
    transition: width .35s cubic-bezier(.2,.8,.2,1);
    border-radius: 0 2px 0 0;
    box-shadow: 0 0 8px color-mix(in srgb, var(--regw-active, #2563eb) 40%, transparent);
  }
}

/* ── 5. Mobile-nav: scroll-aware hide / show ──────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s;
  }
  body.auth--register-wizard .auth-topbar[data-regw-hidden="1"] {
    transform: translateY(-110%);
  }
}

/* ── 6. Mobile-nav: tappable step badge → step menu popover ───────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar__stepbtn {
    /* Replaces the static ::after badge: a real button so it's tappable */
    margin-left: auto;
    appearance: none; -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent);
    background: color-mix(in srgb, var(--regw-active, #2563eb) 10%, transparent);
    color: var(--regw-active, #2563eb);
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    padding: .35rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: filter .15s, transform .15s, color .25s, background .25s, border-color .25s;
  }
  body.auth--register-wizard .auth-topbar__stepbtn:active { transform: scale(.95); }
  body.auth--register-wizard .auth-topbar__stepbtn::after {
    content: "▾";
    font-size: .65rem;
    opacity: .65;
    transition: transform .2s;
  }
  body.auth--register-wizard .auth-topbar__stepbtn[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  /* Hide the static ::after badge once the dynamic button is wired */
  body.auth--register-wizard .auth-topbar:has(.auth-topbar__stepbtn)::after {
    display: none;
  }

  /* Step menu popover */
  .regw-stepmenu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--text) 38%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .regw-stepmenu[data-open="1"] {
    opacity: 1;
    pointer-events: auto;
  }
  .regw-stepmenu__panel {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 3.25rem);
    right: .75rem;
    min-width: 14rem; max-width: 18rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(15,23,42,.35);
    overflow: hidden;
    transform: translateY(-6px) scale(.96);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  .regw-stepmenu[data-open="1"] .regw-stepmenu__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .regw-stepmenu__hd {
    padding: .65rem .85rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .regw-stepmenu__list {
    list-style: none;
    margin: 0;
    padding: .35rem 0;
  }
  .regw-stepmenu__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    font-size: .85rem;
    color: var(--text);
    cursor: pointer;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .regw-stepmenu__item:hover,
  .regw-stepmenu__item:active {
    background: color-mix(in srgb, var(--regw-active, #2563eb) 6%, transparent);
  }
  .regw-stepmenu__num {
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--surface-2, #f8fafc);
    color: var(--text-muted);
    border: 1.5px solid transparent;
  }
  .regw-stepmenu__item[data-state="done"] .regw-stepmenu__num {
    background: color-mix(in srgb, var(--regw-active, #2563eb) 14%, transparent);
    color: var(--regw-active, #2563eb);
    border-color: color-mix(in srgb, var(--regw-active, #2563eb) 30%, transparent);
  }
  .regw-stepmenu__item[data-state="done"] .regw-stepmenu__num::before {
    content: "✓";
  }
  .regw-stepmenu__item[data-state="done"] .regw-stepmenu__num > span { display: none; }
  .regw-stepmenu__item[data-state="active"] .regw-stepmenu__num {
    background: var(--regw-active, #2563eb);
    color: #fff;
    border-color: var(--regw-active, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent);
  }
  .regw-stepmenu__item[data-state="locked"] {
    opacity: .55;
    cursor: not-allowed;
  }
  .regw-stepmenu__lbl { flex: 1 1 auto; min-width: 0; }
  .regw-stepmenu__lbl small {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
    font-size: .7rem;
    margin-top: .1rem;
  }
  .regw-stepmenu__chev {
    color: var(--text-muted);
    font-size: .85rem;
  }
  .regw-stepmenu__item[data-state="locked"] .regw-stepmenu__chev { display: none; }
}

/* ── 7. Save-indicator dot on the topbar ──────────────────────────── */
@media (max-width: 720px) {
  body.auth--register-wizard .auth-topbar__savedot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #16a34a;
    margin-left: .35rem;
    opacity: 0;
    transition: opacity .35s;
    flex: 0 0 auto;
    box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 60%, transparent);
  }
  body.auth--register-wizard .auth-topbar[data-regw-saved="1"] .auth-topbar__savedot {
    opacity: 1;
    animation: regwSavePulse .9s ease-out;
  }
}
@keyframes regwSavePulse {
  0%   { box-shadow: 0 0 0 0  color-mix(in srgb, #16a34a 60%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

/* ── 8. Hide save-toast on mobile if dot is visible (less noise) ──── */
@media (max-width: 720px) {
  body.auth--register-wizard:has(.auth-topbar[data-regw-saved="1"]) .regw-save-toast {
    display: none;
  }
}

/* ── 9. Reduced-motion guards for v8 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .regw-swipe-meter,
  .regw-swipe-meter__bar,
  .regw-edge-hint,
  body.auth--register-wizard .auth-topbar::before,
  body.auth--register-wizard .auth-topbar,
  .regw-stepmenu,
  .regw-stepmenu__panel,
  body.auth--register-wizard .auth-topbar__savedot {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v9 — Touch + Mobile-nav level-up #2
   - Bottom-sheet step menu with drag-to-close handle
   - Universal touch ripple (.regw-ripple) on cards & buttons
   - Mini floating step pill when topbar is scroll-hidden
   - Pull-to-resume drop-indicator at the top of the card
   - Long-press role-card peek with quick-actions
   - Offline / online banner toast
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Bottom-sheet step menu (replaces popover on mobile) ────────── */
@media (max-width: 720px) {
  .regw-stepmenu__panel {
    /* Override v8 popover positioning — slide up from bottom */
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0;
    left: 0;
    max-width: 100% !important;
    width: 100%;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%) !important;
    box-shadow: 0 -18px 60px -18px rgba(15, 23, 42, .35);
    transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
  }
  .regw-stepmenu[data-open="1"] .regw-stepmenu__panel {
    transform: translateY(0) !important;
  }
  /* Drag-handle pill */
  .regw-stepmenu__panel::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    background: color-mix(in srgb, var(--text) 15%, transparent);
    border-radius: 999px;
    margin: .55rem auto .25rem;
  }
  /* Larger, more comfortable taps inside the sheet */
  .regw-stepmenu__hd { font-size: .72rem; padding: .5rem 1rem .35rem; }
  .regw-stepmenu__list { padding: .25rem 0 .5rem; }
  .regw-stepmenu__item { padding: .85rem 1rem; gap: .85rem; }
  .regw-stepmenu__num { width: 2rem; height: 2rem; font-size: .85rem; }
  .regw-stepmenu__lbl { font-size: .9rem; }
  .regw-stepmenu__lbl small { font-size: .73rem; }
  /* Drag-to-close visual feedback */
  .regw-stepmenu[data-dragging="1"] .regw-stepmenu__panel { transition: none !important; }
}
/* Fluent touch behaviour while the sheet is being dragged */
.regw-stepmenu__panel { touch-action: pan-y; }

/* ── 2. Universal touch ripple effect ──────────────────────────────── */
.regw-ripple-host { position: relative; overflow: hidden; }
.regw-ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--regw-active, #2563eb) 22%, transparent);
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  animation: regwRipple .6s ease-out forwards;
  z-index: 0;
}
@keyframes regwRipple {
  to { transform: scale(2.4); opacity: 0; }
}
/* Make ripple appear *behind* the card content but on top of background */
body.auth--register-wizard .reg-role,
body.auth--register-wizard .btn,
body.auth--register-wizard .btn-auth-submit,
body.auth--register-wizard .auth-topbar__back,
body.auth--register-wizard .auth-topbar__stepbtn,
body.auth--register-wizard .regw-progress__item--done .regw-progress__dot {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ── 3. Mini floating step pill (visible when topbar is hidden) ───── */
.regw-mini-pill {
  position: fixed;
  top: max(.55rem, env(safe-area-inset-top, .55rem));
  left: 50%;
  transform: translateX(-50%) translateY(-180%);
  z-index: 28;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--regw-active, #2563eb) 90%, transparent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--regw-active, #2563eb) 70%, transparent);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s;
  opacity: 0;
  pointer-events: none;
}
.regw-mini-pill[data-show="1"] {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.regw-mini-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: regwMiniDot 2s ease-in-out infinite;
}
@keyframes regwMiniDot {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
@media (min-width: 721px) {
  .regw-mini-pill { display: none; }
}

/* ── 4. Pull-to-resume drop indicator ─────────────────────────────── */
.regw-pull {
  position: absolute;
  left: 50%;
  top: -42px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  font-size: .72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--regw-active, #2563eb) 12%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--regw-active, #2563eb) 26%, transparent);
  color: var(--regw-active, #2563eb);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 6;
}
.regw-pull__icon {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.regw[data-pull="1"] .regw-pull { opacity: 1; }
.regw[data-pull-armed="1"] .regw-pull {
  background: color-mix(in srgb, #16a34a 14%, var(--surface, #fff));
  border-color: color-mix(in srgb, #16a34a 35%, transparent);
  color: #16a34a;
}
.regw[data-pull-armed="1"] .regw-pull__icon {
  transform: rotate(180deg);
}

/* ── 5. Long-press role-card peek bottom-sheet ────────────────────── */
.regw-role-peek {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--text) 38%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.regw-role-peek[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
}
.regw-role-peek__sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface, #fff);
  border-radius: 22px 22px 0 0;
  padding: .55rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 60px -18px rgba(15, 23, 42, .35);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  max-height: 80vh;
  overflow-y: auto;
}
.regw-role-peek[data-open="1"] .regw-role-peek__sheet {
  transform: translateY(0);
}
.regw-role-peek__sheet::before {
  content: "";
  display: block;
  width: 44px; height: 4px;
  background: color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 999px;
  margin: 0 auto .8rem;
}
.regw-role-peek__icon {
  font-size: 2.4rem;
  margin-bottom: .35rem;
  display: block;
}
.regw-role-peek__title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .25rem;
  color: var(--text);
}
.regw-role-peek__pill {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .65rem;
}
.regw-role-peek__sub {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.regw-role-peek__list {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text);
}
.regw-role-peek__list li { margin-bottom: .25rem; }
.regw-role-peek__cta {
  display: flex;
  gap: .5rem;
}
.regw-role-peek__cta .btn {
  flex: 1 1 0;
  min-height: 46px;
  font-size: .9rem;
  border-radius: 12px;
}

/* ── 6. Offline / online banner ───────────────────────────────────── */
.regw-net-banner {
  position: fixed;
  left: 50%;
  top: max(.5rem, env(safe-area-inset-top, .5rem));
  transform: translateX(-50%) translateY(-180%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface, #fff);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 14px 28px -10px rgba(15, 23, 42, .4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.regw-net-banner[data-show="1"] {
  transform: translateX(-50%) translateY(0);
}
.regw-net-banner--off { background: #dc2626; }
.regw-net-banner--on  { background: #16a34a; }
.regw-net-banner__icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: regwNetDot 1.5s ease-in-out infinite;
}
@keyframes regwNetDot {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ── 7. Battery-saver: turn off heavy animations ──────────────────── */
body.auth--register-wizard.regw-battery-saver .auth-shell::before,
body.auth--register-wizard.regw-battery-saver .auth-shell::after,
body.auth--register-wizard.regw-battery-saver .regw-particles,
body.auth--register-wizard.regw-battery-saver .regw-progress__item--active .regw-progress__dot::after,
body.auth--register-wizard.regw-battery-saver .regw-input-wrap:focus-within::before {
  display: none !important;
}

/* ── 8. Reduced-motion guards for v9 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .regw-ripple,
  .regw-mini-pill,
  .regw-pull,
  .regw-pull__icon,
  .regw-role-peek,
  .regw-role-peek__sheet,
  .regw-net-banner,
  .regw-net-banner__icon {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Subscription Management Page
   ═══════════════════════════════════════════════════════════════════════ */

/* Buyer empty-state */
.sub-buyer-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: linear-gradient(135deg, rgba(34,197,94,.06), rgba(16,185,129,.03));
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 18px;
  margin-bottom: 1.5rem;
}
.sub-buyer-state__icon {
  font-size: 3.5rem;
  margin-bottom: .75rem;
}
.sub-buyer-state h2 {
  margin: 0 0 .65rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}
.sub-buyer-state p {
  max-width: 520px;
  margin: 0 auto 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.sub-buyer-state__actions {
  display: flex;
  gap: .65rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Current plan card */
.sub-current {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  background:
    radial-gradient(at top right, rgba(124,58,237,.10), transparent 55%),
    linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-card, var(--bg-elev)) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 6px 20px -8px rgba(13,27,46,.08);
}
@media (max-width: 900px) {
  .sub-current { grid-template-columns: 1fr; }
}

.sub-current__hd { min-width: 0; }
.sub-current__status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 99px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  margin-bottom: .55rem;
}
.sub-current__status--active {
  background: rgba(34,197,94,.14);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.3);
}
.sub-current__status--cancelled,
.sub-current__status--expired {
  background: rgba(220,38,38,.14);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.3);
}
.sub-current__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  position: relative;
}
.sub-current__pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor;
  animation: subPulse 2s ease-in-out infinite;
}
@keyframes subPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%     { transform: scale(2.4); opacity: 0; }
}

.sub-current__plan-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub-current__price {
  display: flex; align-items: baseline; gap: .15rem;
}
.sub-current__amount {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sub-current__period {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.sub-current__meta {
  display: flex; flex-direction: column;
  gap: .35rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}
@media (max-width: 900px) {
  .sub-current__meta { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px dashed var(--border); }
}
.sub-current__meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem;
  gap: 1rem;
}
.sub-current__meta-lbl {
  color: var(--text-muted);
  font-weight: 600;
}
.sub-current__meta-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sub-current__actions {
  display: flex; flex-direction: column; gap: .35rem;
  align-items: flex-end;
}
@media (max-width: 900px) {
  .sub-current__actions { align-items: stretch; flex-direction: row; flex-wrap: wrap; }
}

/* Auto-renew toggle */
.sub-toggle {
  display: inline-block;
  width: 38px; height: 22px;
  position: relative;
  cursor: pointer;
}
.sub-toggle input {
  position: absolute; opacity: 0; pointer-events: none;
}
.sub-toggle__slider {
  position: absolute; inset: 0;
  background: var(--bg-muted);
  border-radius: 99px;
  border: 1.5px solid var(--border);
  transition: background .2s, border-color .2s;
}
.sub-toggle__slider::before {
  content: ''; position: absolute;
  top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.sub-toggle input:checked + .sub-toggle__slider {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: transparent;
}
.sub-toggle input:checked + .sub-toggle__slider::before {
  transform: translateX(16px);
}

/* Section headers */
.sub-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 1.1rem;
  flex-wrap: wrap; gap: .65rem;
}
.sub-section-hd h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Billing-period toggle */
.sub-billing-toggle {
  display: inline-flex;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.sub-billing-toggle__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .18s;
}
.sub-billing-toggle__btn.is-active {
  background: var(--bg-elev, #fff);
  color: var(--text);
  box-shadow: 0 2px 6px -1px rgba(13,27,46,.08);
}
.sub-billing-toggle__badge {
  font-size: .58rem;
  font-weight: 800;
  padding: .12rem .35rem;
  background: rgba(34,197,94,.18);
  color: #16a34a;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Plan grid */
.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  align-items: stretch;
}
@media (max-width: 900px) { .sub-plans-grid { grid-template-columns: 1fr; } }

.sub-plan-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.85rem 1.4rem 1.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sub-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(13,27,46,.10);
}
.sub-plan-card.is-highlight {
  border: 2px solid var(--sp-c);
  transform: scale(1.04);
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--sp-c, #2563eb) 30%, transparent);
  z-index: 1;
}
@media (max-width: 900px) {
  .sub-plan-card.is-highlight { transform: none; }
}
.sub-plan-card.is-current {
  border-color: #16a34a;
  background: linear-gradient(180deg, rgba(34,197,94,.04) 0%, var(--bg-elev) 30%);
}

.sub-plan-card__ribbon {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--sp-c, var(--brand)), #7c3aed);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: .3rem .85rem;
  border-radius: 99px;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--sp-c, #2563eb) 35%, transparent);
}
.sub-plan-card__ribbon--current {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 4px 12px -2px rgba(34,197,94,.4);
}

.sub-plan-card__hd {
  text-align: center;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}
.sub-plan-card__hd h3 {
  margin: 0 0 .65rem;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.sub-plan-card__price {
  display: flex; align-items: baseline; justify-content: center;
  gap: .15rem;
  margin-bottom: .25rem;
}
.sub-plan-card__currency {
  font-size: 1rem; font-weight: 700; color: var(--text-muted);
  align-self: flex-start; margin-top: .35rem;
}
.sub-plan-card__amount {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color .25s;
}
.sub-plan-card.is-highlight .sub-plan-card__amount {
  color: var(--sp-c, var(--brand));
}
.sub-plan-card__period {
  font-size: .82rem; color: var(--text-muted); font-weight: 600;
}
.sub-plan-card__cta-text {
  margin: .35rem 0 0;
  font-size: .72rem;
  color: var(--text-muted);
  font-style: italic;
}

.sub-plan-card__features {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  flex: 1;
}
.sub-plan-card__features li {
  display: flex; align-items: flex-start;
  gap: .55rem;
  padding: .35rem 0;
  font-size: .85rem;
  line-height: 1.45;
}
.sub-plan-card__features li.is-included { color: var(--text); }
.sub-plan-card__features li.is-excluded {
  color: var(--text-faint, #94a3b8);
  text-decoration: line-through;
  text-decoration-color: rgba(148,163,184,.5);
}
.sub-plan-card__feat-icon {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.sub-plan-card__features li.is-included .sub-plan-card__feat-icon {
  background: rgba(34,197,94,.16);
  color: #16a34a;
}
.sub-plan-card__features li.is-excluded .sub-plan-card__feat-icon {
  background: rgba(148,163,184,.16);
  color: var(--text-faint, #94a3b8);
}

.sub-plan-card__btn {
  margin-top: auto;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--sp-c, var(--brand));
  background: transparent;
  color: var(--sp-c, var(--brand));
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: all .18s;
}
.sub-plan-card__btn:hover:not(:disabled) {
  background: var(--sp-c, var(--brand));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--sp-c, #2563eb) 35%, transparent);
}
.sub-plan-card.is-highlight .sub-plan-card__btn {
  background: linear-gradient(135deg, var(--sp-c, var(--brand)), #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--sp-c, #2563eb) 40%, transparent);
}
.sub-plan-card.is-highlight .sub-plan-card__btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--sp-c, #2563eb) 50%, transparent);
}
.sub-plan-card__btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Billing history */
.sub-billing-history {
  margin-bottom: 1.75rem;
}
.sub-bh-table-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.sub-bh-table-wrap > div { overflow-x: auto; }
.sub-bh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.sub-bh-table th, .sub-bh-table td {
  padding: .85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.sub-bh-table th {
  background: var(--bg-muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.sub-bh-table tbody tr:last-child td { border-bottom: 0; }
.sub-bh-table tbody tr:hover { background: rgba(37,99,235,.02); }
.sub-bh-table code {
  font-size: .76rem;
  padding: .15rem .45rem;
  background: var(--bg-muted);
  border-radius: 5px;
  color: var(--text-muted);
}
.sub-bh-status {
  display: inline-flex;
  padding: .15rem .55rem;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
}
.sub-bh-status--paid     { background: rgba(34,197,94,.14);  color: #16a34a; }
.sub-bh-status--upcoming { background: rgba(217,119,6,.14);  color: #d97706; }
.sub-bh-status--failed   { background: rgba(220,38,38,.14);  color: #dc2626; }
.sub-bh-link {
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.sub-bh-link:hover { text-decoration: underline; }
.sub-bh-muted { color: var(--text-faint, #94a3b8); }

/* Help banner */
.sub-help {
  display: flex; align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 16px;
}
.sub-help__icon { font-size: 2rem; flex-shrink: 0; }
.sub-help__body { flex: 1; min-width: 0; }
.sub-help__body h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 800; }
.sub-help__body p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 720px) {
  .sub-current { padding: 1.25rem; }
  .sub-current__plan-name { font-size: 1.25rem; }
  .sub-current__amount { font-size: 1.5rem; }
  .sub-section-hd h2 { font-size: 1.05rem; }
  .sub-bh-table th, .sub-bh-table td { padding: .65rem .75rem; font-size: .8rem; }
  .sub-help { flex-direction: column; align-items: flex-start; gap: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sub-current__pulse::before,
  .sub-plan-card,
  .sub-plan-card__btn { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Subscription enhancements: usage strip · AI rec · renewal ring
   add-ons · tax settings
   ═══════════════════════════════════════════════════════════════════════ */

/* Usage analytics strip */
.sub-usage { margin-bottom: 1.5rem; }
.sub-usage__hint {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
}
.sub-usage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}
.sub-usage-card {
  position: relative;
  padding: 1.1rem 1.15rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-left: 3px solid var(--su-c, var(--brand));
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.sub-usage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(13,27,46,.08);
}
.sub-usage-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--su-c, var(--brand)) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.sub-usage-card__icon {
  font-size: 1.35rem;
  margin-bottom: .35rem;
  position: relative; z-index: 1;
}
.sub-usage-card__val {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--su-c, var(--brand));
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.sub-usage-card__lbl {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-top: .25rem;
  position: relative; z-index: 1;
}
.sub-usage-card__sub {
  font-size: .68rem;
  color: var(--text-faint, #94a3b8);
  margin-top: .15rem;
  position: relative; z-index: 1;
}

/* Smart recommendation banner */
.sub-smart-rec {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(37,99,235,.04));
  border: 1px solid rgba(124,58,237,.25);
  border-left: 4px solid #7c3aed;
  position: relative;
  overflow: hidden;
}
.sub-smart-rec::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%);
  pointer-events: none;
}
.sub-smart-rec__icon {
  font-size: 2.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(124,58,237,.35));
  animation: subRecBounce 3s ease-in-out infinite;
}
@keyframes subRecBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.sub-smart-rec__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.sub-smart-rec__tag {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7c3aed;
  background: rgba(124,58,237,.14);
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 99px;
  margin-bottom: .35rem;
}
.sub-smart-rec__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .25rem;
}
.sub-smart-rec__msg {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: .35rem;
}
.sub-smart-rec__msg strong { color: var(--text); }
.sub-smart-rec__value {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  color: #16a34a;
  background: rgba(34,197,94,.12);
  padding: .15rem .55rem;
  border-radius: 99px;
}
.sub-smart-rec__cta {
  flex-shrink: 0;
  padding: .65rem 1.1rem;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  position: relative; z-index: 1;
  box-shadow: 0 4px 12px -2px rgba(124,58,237,.35);
  transition: transform .15s, box-shadow .15s;
}
.sub-smart-rec__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(124,58,237,.5);
  text-decoration: none;
  color: #fff;
}

@media (max-width: 720px) {
  .sub-smart-rec { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .sub-smart-rec__cta { width: 100%; text-align: center; }
}

/* Renewal ring inside current-plan card */
.sub-current { grid-template-columns: 1fr 1fr auto auto; }
@media (max-width: 1100px) { .sub-current { grid-template-columns: 1fr 1fr auto; } }
@media (max-width: 900px) { .sub-current { grid-template-columns: 1fr; } }

.sub-current__renewal {
  position: relative;
  width: 100px; height: 100px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sub-renew-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.sub-renew-ring__bg { stroke: var(--bg-muted); }
.sub-renew-ring__fg {
  transition: stroke-dashoffset 1s cubic-bezier(.34,1.36,.64,1);
}
.sub-current__renewal-meta {
  text-align: center;
  position: relative;
  z-index: 1;
}
.sub-current__renewal-days {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sub-current__renewal-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* Add-ons marketplace */
.sub-addons-section { margin-bottom: 1.75rem; }
.sub-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .85rem;
}
.sub-addon {
  position: relative;
  padding: 1.15rem 1.15rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ad-c, var(--brand));
  border-radius: 14px;
  transition: transform .2s, box-shadow .2s;
}
.sub-addon:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px -4px rgba(13,27,46,.08),
    0 16px 36px -8px color-mix(in srgb, var(--ad-c, var(--brand)) 18%, transparent);
}
.sub-addon--active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ad-c, var(--brand)) 5%, var(--bg-elev)) 0%, var(--bg-elev) 30%);
}

.sub-addon__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .65rem;
}
.sub-addon__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ad-c, var(--brand)) 14%, transparent);
  color: var(--ad-c, var(--brand));
  font-size: 1.3rem;
}
.sub-addon__price {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ad-c, var(--brand));
  font-variant-numeric: tabular-nums;
}
.sub-addon__price span {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}
.sub-addon h3 {
  margin: 0 0 .35rem;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
.sub-addon__active-badge {
  font-size: .58rem;
  font-weight: 800;
  padding: .12rem .45rem;
  background: rgba(34,197,94,.18);
  color: #16a34a;
  border-radius: 99px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sub-addon p {
  margin: 0 0 .85rem;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.sub-addon__btn {
  width: 100%;
  padding: .55rem .9rem;
  background: transparent;
  border: 1.5px solid var(--ad-c, var(--brand));
  border-radius: 9px;
  color: var(--ad-c, var(--brand));
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .15s;
}
.sub-addon__btn:hover {
  background: var(--ad-c, var(--brand));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--ad-c, var(--brand)) 35%, transparent);
}
.sub-addon__btn--active {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
  color: #16a34a;
}
.sub-addon__btn--active:hover {
  background: rgba(34,197,94,.18);
  color: #16a34a;
}

/* Tax & invoice settings card */
.sub-tax-card {
  padding: 1.5rem 1.75rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 1.75rem;
}
.sub-tax-card__hd {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}
.sub-tax-card__icon {
  font-size: 2rem;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.06));
  color: var(--brand);
  flex-shrink: 0;
}
.sub-tax-card__hd h2 {
  margin: 0 0 .15rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sub-tax-card__hd p {
  margin: 0;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sub-tax-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}
.sub-tax-form__full { grid-column: span 2; }
@media (max-width: 720px) {
  .sub-tax-form__grid { grid-template-columns: 1fr; }
  .sub-tax-form__full { grid-column: 1; }
}

.sub-tax-form__actions {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.sub-tax-form__note {
  font-size: .76rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .sub-smart-rec__icon,
  .sub-renew-ring__fg { animation: none !important; transition: none !important; }
  .sub-usage-card,
  .sub-addon,
  .sub-addon__btn { transition: none !important; }
}
.auth-card .card { border: none; box-shadow: var(--shadow-lg); }
.auth-card .card__header { font-size: 1.1rem; justify-content: center; border-bottom: 0; padding-bottom: 0; background: none; }
.auth-card .card__body { padding: 1.25rem 1.5rem 1.75rem; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .65rem; }
.auth-brand .logo {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--grad-brand);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.1rem;
  box-shadow: var(--shadow-brand);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.auth-brand .logo:hover { transform: scale(1.1); }

/* ── Auth topbar ─────────────────────────────────────────────────── */
.auth-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: .75rem 1.5rem;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.auth-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .18s;
}
.auth-topbar__back:hover {
  color: var(--brand);
  text-decoration: none;
}
.auth-shell { padding-top: 5rem; }

/* ── Auth submit button (premium gradient) ───────────────────────── */
.btn-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1.5rem;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 4px 18px rgba(37,99,235,.35);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.btn-auth-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.18) 60%, transparent 70%);
  transform: translateX(-100%) skewX(-20deg);
  transition: transform .5s;
}
.btn-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.5);
}
.btn-auth-submit:hover::after { transform: translateX(140%) skewX(-20deg); }
.btn-auth-submit:active { transform: translateY(0); }

@media (max-width: 600px) {
  .auth-topbar { padding: .6rem 1rem; }
  .auth-topbar__back span { display: none; }
  .auth-shell { padding-top: 4.5rem; }
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; font-size: .7rem; font-weight: 600;
  border-radius: 99px; background: var(--bg-muted); color: var(--text-muted);
  letter-spacing: .02em;
  white-space: nowrap; vertical-align: middle; flex-shrink: 0;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #e0f2fe; color: #075985; }
.badge-brand   { background: var(--brand-50); color: var(--brand-700); }
[data-theme="dark"] .badge-success { background: rgba(20,83,45,.4);  color: #86efac; }
[data-theme="dark"] .badge-warning { background: rgba(120,53,15,.4); color: #fde68a; }
[data-theme="dark"] .badge-danger  { background: rgba(127,29,29,.4); color: #fca5a5; }

/* Priority badges */
.badge.priority-urgent { background:#fee2e2; color:#991b1b; }
.badge.priority-high   { background:#fef3c7; color:#92400e; }
.badge.priority-medium { background:#eff6ff; color:#1e40af; }
.badge.priority-low    { background:#f1f5f9; color:#475569; }
[data-theme="dark"] .badge.priority-urgent { background:rgba(127,29,29,.4); color:#fca5a5; }
[data-theme="dark"] .badge.priority-high   { background:rgba(120,53,15,.4); color:#fde68a; }

/* Status badges */
.badge.status-open           { background:#eff6ff; color:#1e40af; }
.badge.status-pending_agent  { background:#ede9fe; color:#5b21b6; }
.badge.status-pending_user   { background:#fef3c7; color:#92400e; }
.badge.status-resolved       { background:#dcfce7; color:#166534; }
.badge.status-closed         { background:#f1f5f9; color:#475569; }

/* ── Utilities ───────────────────────────────────────────────────── */
.d-flex   { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: .35rem; } .gap-2 { gap: .65rem; } .gap-3 { gap: 1rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-end    { text-align: end; }
.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

/* ── Command palette trigger ─────────────────────────────────────── */
.cpal-trigger {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem;
  background: var(--bg-muted); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
  font-size: .8rem; transition: all var(--trans);
  max-width: 260px;
}
.cpal-trigger:hover { border-color: var(--brand); color: var(--text); background: var(--bg-elev); }
.cpal-trigger__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpal-trigger__kbd { display: flex; gap: .2rem; flex-shrink: 0; }
.cpal-trigger__kbd kbd {
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 4px; font-size: .67rem; padding: .1rem .3rem;
  font-family: ui-monospace, monospace; color: var(--text-muted);
  box-shadow: 0 1px 0 var(--border-strong);
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: .55; }
}
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-pulse   { animation: pulse 1.5s ease infinite; }
.animate-fadeIn  { animation: fadeIn .3s var(--ease-out) both; }
.animate-fadeUp  { animation: fadeUp .4s var(--ease-out) both; }

/* ── Notifications dropdown ──────────────────────────────────────── */
.notif-wrap { position: relative; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Override ALL data-menu variants — attribute selectors have higher specificity */
  .app,
  .app[data-menu="small"],
  .app[data-menu="large"],
  .app[data-menu="open"] {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "main" !important;
  }
  .sidebar {
    position: fixed;
    inset-inline-start: 0; top: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    transform: translateX(-110%);
    transition: transform .36s cubic-bezier(.32,.72,0,1), box-shadow .36s ease;
  }
  [dir="rtl"] .sidebar { transform: translateX(110%); }
  .app[data-menu="open"] .sidebar {
    transform: translateX(0) !important;
    box-shadow: 20px 0 80px rgba(0,0,0,.4), 1px 0 0 rgba(255,255,255,.04);
  }
  .app[data-menu="open"]::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: calc(var(--z-sidebar) - 1);
    animation: fadeIn .32s ease;
  }
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
  .main {
    padding: 1rem;
    padding-bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px) + 1rem);
    overflow-x: hidden;
  }
  .cpal-trigger__label, .cpal-trigger__kbd { display: none; }
  .breadcrumbs { min-width: 0; max-width: 45vw; }
  .breadcrumbs__current { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}

@media (max-width: 480px) {
  /* Topbar: hide non-essential buttons to prevent overflow on narrow screens */
  .cpal-trigger             { display: none; }
  [data-rtl-toggle]         { display: none; }
  .theme-trigger-btn        { display: none; }
  .topbar__user-name        { display: none; }
  .topbar__user-chevron     { display: none; }
  .topbar__actions          { gap: .2rem; }
  /* Breadcrumbs must shrink, not push the topbar wide */
  .breadcrumbs              { min-width: 0; max-width: 40vw; }
  .breadcrumbs__current     { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  /* Tables: always scrollable in a wrapper */
  .table-responsive         { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Cards: never exceed viewport */
  .card                     { max-width: 100%; }
}

/* ── Topbar icon buttons ─────────────────────────────────────────── */
.topbar__icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  transition: background var(--trans), color var(--trans), transform 120ms var(--ease-spring);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar__icon-btn:hover {
  background: var(--bg-muted); color: var(--text);
  transform: scale(1.08);
  text-decoration: none;
}
.topbar__icon-btn:active { transform: scale(.95); }
.topbar__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px;
  padding: 0 4px; font-size: .62rem; font-weight: 700;
  background: var(--brand); color: #fff;
  border-radius: 99px; line-height: 17px;
  pointer-events: none;
}
.topbar__badge--danger { background: var(--danger); }
.topbar__menu-btn { color: var(--text-muted); }

/* ── Animated hamburger bars ─────────────────────────────────────── */
.hamburger-bars {
  display: flex; flex-direction: column; gap: 5px;
  width: 18px; pointer-events: none;
}
.hamburger-bar {
  display: block;
  height: 2px; width: 18px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.25,.46,.45,.94),
              opacity   .2s  ease,
              width     .22s ease;
  transform-origin: center;
}
/* Morph hamburger → X when sidebar is open on mobile */
@media (max-width: 768px) {
  .app[data-menu="open"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .app[data-menu="open"] .hamburger-bar:nth-child(2) { opacity: 0; width: 0; }
  .app[data-menu="open"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Sidebar close button (visible on mobile only) ───────────────── */
.sidebar__close-btn {
  display: none;
  min-width: 36px; min-height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--trans), color var(--trans), transform .15s;
}
.sidebar__close-btn:hover  { background: rgba(255,255,255,.13); color: #fff; }
.sidebar__close-btn:active { transform: scale(.9); }
@media (max-width: 768px) {
  .sidebar__close-btn { display: inline-flex; }
}

/* ── Topbar user menu ────────────────────────────────────────────── */
.topbar__user { position: relative; flex-shrink: 0; }
.topbar__user-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem .3rem .35rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
  color: var(--text);
}
.topbar__user-btn:hover {
  background: var(--bg-muted); border-color: var(--border);
}
.topbar__user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-brand);
  color: #fff; font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--brand-50);
}
.topbar__user-name {
  font-size: .82rem; font-weight: 600; color: var(--text);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__user-chevron {
  color: var(--text-faint); flex-shrink: 0;
  transition: transform var(--trans);
}
.topbar__user-btn[aria-expanded="true"] .topbar__user-chevron { transform: rotate(180deg); }

.topbar__user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: min(240px, calc(100vw - 1.5rem));
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-6px); opacity: 0; pointer-events: none;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
  z-index: 999;
}
.topbar__user-dropdown.is-open {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
.topbar__user-dropdown-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
  display: flex; flex-direction: column; gap: .1rem;
}
.topbar__user-dropdown-header strong {
  font-size: .9rem; color: var(--text); font-weight: 700;
}
.topbar__user-dropdown-header span {
  font-size: .75rem; color: var(--text-muted);
}
.topbar__user-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; font-size: .85rem; font-weight: 500;
  color: var(--text); background: none; border: none; width: 100%;
  text-align: left; cursor: pointer; text-decoration: none;
  transition: background var(--trans), color var(--trans);
}
.topbar__user-item:hover { background: var(--bg-muted); color: var(--brand); text-decoration: none; }
.topbar__user-item svg { color: var(--text-muted); flex-shrink: 0; }
.topbar__user-item--danger { color: var(--danger); }
.topbar__user-item--danger:hover { background: rgba(220,38,38,.06); color: var(--danger); }
.topbar__user-item--danger svg { color: var(--danger); }
.topbar__user-divider { height: 1px; background: var(--border); margin: .2rem 0; }

/* Sidebar profile bar ────────────────────────────────────────────── */
.sidebar__profile {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto; flex-shrink: 0;
  min-width: 0;
}
.sidebar__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-brand);
  color: #fff; font-size: .82rem; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-name {
  font-size: .8rem; font-weight: 600; color: var(--sidebar-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__user-role {
  font-size: .7rem; color: var(--sidebar-muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__profile-link {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--sidebar-muted); font-size: .85rem;
  text-decoration: none;
  transition: background var(--trans), color var(--trans);
}
.sidebar__profile-link:hover {
  background: rgba(255,255,255,.1); color: var(--sidebar-fg);
  text-decoration: none;
}

/* Make sidebar flex-column so profile bar sticks to bottom */
.sidebar {
  display: flex; flex-direction: column;
}
.sidebar__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar { display: none; }
  .app { grid-template-columns: 1fr; grid-template-areas: "main"; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #e5e7eb; }
}

/* ── Mobile-first table column pruning ──────────────────────────── */
/* EMI schedule: hide less critical fee columns on mobile */
@media (max-width: 640px) {
  .emi-schedule-table th:nth-child(4),
  .emi-schedule-table td:nth-child(4),
  .emi-schedule-table th:nth-child(5),
  .emi-schedule-table td:nth-child(5),
  .emi-schedule-table th:nth-child(6),
  .emi-schedule-table td:nth-child(6),
  .emi-schedule-table th:nth-child(7),
  .emi-schedule-table td:nth-child(7) { display: none; }
  /* Users table: hide 2FA and last-login on narrow screens */
  .users-table th:nth-child(5),
  .users-table td:nth-child(5),
  .users-table th:nth-child(6),
  .users-table td:nth-child(6),
  .users-table th:nth-child(7),
  .users-table td:nth-child(7) { display: none; }
  /* Ledger table: shrink hash column */
  .ledger-entries-table th:nth-child(6),
  .ledger-entries-table td:nth-child(6) { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Auth card: tighter on very small screens ────────────────────── */
@media (max-width: 420px) {
  .auth-card .card__body { padding: 1rem 1rem 1.5rem; }
  .auth-shell { padding: 1.25rem .75rem; }
}

/* ── Projection grid — collapses to 3 equal cols but readable ────── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  text-align: center;
}
@media (max-width: 480px) {
  .proj-grid { grid-template-columns: 1fr; gap: .35rem; }
  .proj-grid > div { display: flex; justify-content: space-between; align-items: center; text-align: left; }
}

/* ── Gallery grid — safe min-width for all phones ────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.gallery-grid--wide { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ── Plots stat cards ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .stat-card { min-width: calc(50% - .375rem) !important; }
  .main { padding: .75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM NAVIGATION v4 — Bottom Nav · Topbar · Sidebar · Mobile
   Mobile-first · Tablet · TV · Light/Dark · RTL · Accessible
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOPBAR: gradient accent + premium glass ──────────────────── */
.topbar {
  position: sticky;
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
  pointer-events: none; z-index: 1;
}
[data-theme="dark"] .topbar {
  background: rgba(8,13,24,.9);
  border-bottom-color: rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 32px rgba(0,0,0,.45);
}
.topbar__icon-btn:hover {
  background: var(--bg-muted);
  color: var(--brand);
  box-shadow: 0 0 0 6px rgba(var(--brand-rgb),.07);
}
.breadcrumbs__home:hover svg {
  color: var(--brand);
  transform: scale(1.12);
}
.breadcrumbs__home svg {
  transition: color .18s, transform .18s var(--ease-spring);
}

/* Topbar user dropdown: spring entrance */
.topbar__user-dropdown.is-open {
  animation: navDropIn .22s var(--ease-spring) both;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)  scale(1);    }
}

/* ── 2. SIDEBAR: premium active glow + group animations ─────────── */
.sidebar__link.is-active {
  background: linear-gradient(90deg,
    rgba(37,99,235,.25) 0%,
    rgba(37,99,235,.08) 100%);
  color: #7daaff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #2563eb,
              0 2px 16px rgba(37,99,235,.14);
}
.sidebar__link.is-active .icon {
  color: #7daaff;
  filter: drop-shadow(0 0 5px rgba(125,170,255,.55));
}
.sidebar__brand .logo {
  transition: transform .22s var(--ease-spring), box-shadow .22s;
}
.sidebar__brand:hover .logo {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(37,99,235,.65);
}
.sidebar__group[open] > summary {
  color: rgba(255,255,255,.9);
  background: rgba(37,99,235,.07);
  border-left: 2px solid rgba(37,99,235,.45);
  padding-left: calc(.75rem - 2px);
}
.sidebar__group-body {
  animation: sidebarFadeIn .2s var(--ease-out) both;
}
@keyframes sidebarFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── 3. TABLET AUTO-COLLAPSE (768px–1199px) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .app[data-menu="large"] {
    grid-template-columns: var(--sidebar-w-sm) 1fr;
  }
  .app[data-menu="large"] .sidebar__brand span:not(.logo),
  .app[data-menu="large"] .sidebar__link .label,
  .app[data-menu="large"] .sidebar__group-label,
  .app[data-menu="large"] .sidebar__group-chevron,
  .app[data-menu="large"] .sidebar__user-name,
  .app[data-menu="large"] .sidebar__user-role          { display: none; }
  .app[data-menu="large"] .sidebar__link               { justify-content: center; padding: .6rem .25rem; }
  .app[data-menu="large"] .sidebar__link:hover         { padding-left: .25rem; }
  .app[data-menu="large"] .sidebar__group > summary    { justify-content: center; padding: .5rem .25rem; border-left: none; }
  .app[data-menu="large"] .sidebar__group-body         { border-left: none; margin-left: 0; padding-left: 0; }
  .app[data-menu="large"] .sidebar__profile            { justify-content: center; padding: .75rem .5rem; }
}

/* ── 4. BOTTOM NAVIGATION BAR ───────────────────────────────────── */
/*  Variables  */
:root {
  --bn-h:          60px;
  --bn-tab-radius: 12px;
  --bn-active-bg:  rgba(var(--brand-rgb), .12);
  --bn-active-fg:  var(--brand);
  --bn-muted:      var(--text-muted);
}
[data-theme="dark"] {
  --bn-active-bg: rgba(var(--brand-rgb), .2);
}

/* Base — hidden on large desktop */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bn-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  z-index: var(--z-bottom-nav);
  box-shadow: 0 -1px 0 var(--border), 0 -8px 32px rgba(13,27,46,.06);
  transition: background .2s, border-color .2s;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(8,13,24,.92);
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -8px 32px rgba(0,0,0,.4);
}

/* Show breakpoints */
@media (max-width: 767px) {
  .bottom-nav            { display: flex; --bn-h: 60px; }
  .main                  { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom) + .75rem) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .bottom-nav            { display: flex; --bn-h: 68px; }
  .main                  { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom) + 1rem) !important; }
}
@media (min-width: 1920px) {
  .bottom-nav            { display: flex; --bn-h: 84px; }
  .main                  { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom) + 1.25rem) !important; }
}

/* Items row */
.bottom-nav__items {
  display: flex;
  width: 100%;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 .25rem;
}

/* Individual tab */
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--bn-muted);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .35rem .15rem;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s var(--ease);
  min-height: 44px;
}
.bottom-nav__item:active {
  color: var(--bn-active-fg);
  transform: scale(.9);
  transition: transform .1s, color .1s;
}

/* Active state */
.bottom-nav__item.is-active {
  color: var(--bn-active-fg);
  font-weight: 700;
}
/* Top indicator line */
.bottom-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--brand), #7c3aed);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 6px rgba(var(--brand-rgb),.5);
}

/* Icon container */
.bottom-nav__icon {
  width: 38px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--bn-tab-radius);
  transition: background .18s var(--ease), transform .18s var(--ease-spring);
}
.bottom-nav__icon svg {
  width: 20px; height: 20px; flex-shrink: 0;
  transition: transform .18s var(--ease-spring);
}
.bottom-nav__item.is-active .bottom-nav__icon {
  background: var(--bn-active-bg);
}
.bottom-nav__item.is-active .bottom-nav__icon svg {
  transform: translateY(-1px) scale(1.12);
}
.bottom-nav__item:not(.is-active):hover .bottom-nav__icon {
  background: var(--bg-muted);
}

/* Label */
.bottom-nav__label {
  font-size: .6rem;
  line-height: 1;
  white-space: nowrap;
  transition: color .16s;
}

/* Tablet sizing */
@media (min-width: 768px) and (max-width: 1199px) {
  .bottom-nav__item      { font-size: .68rem; gap: 4px; }
  .bottom-nav__icon      { width: 44px; height: 32px; }
  .bottom-nav__icon svg  { width: 22px; height: 22px; }
  .bottom-nav__label     { font-size: .63rem; }
}
/* TV sizing */
@media (min-width: 1920px) {
  .bottom-nav__item      { font-size: .8rem; gap: 6px; min-height: 52px; }
  .bottom-nav__icon      { width: 54px; height: 40px; border-radius: 14px; }
  .bottom-nav__icon svg  { width: 26px; height: 26px; }
  .bottom-nav__label     { font-size: .72rem; }
  .bottom-nav__item.is-active::before { height: 3px; left: 25%; right: 25%; }
  .bottom-nav__items     { max-width: 1800px; padding: 0 1rem; }
}
/* Tiny phones (≤380px) */
@media (max-width: 380px) {
  .bottom-nav__item      { padding: .3rem .1rem; }
  .bottom-nav__icon      { width: 32px; height: 26px; }
  .bottom-nav__icon svg  { width: 18px; height: 18px; }
  .bottom-nav__label     { font-size: .55rem; }
}

/* ── 5. CARD & BUTTON PREMIUM POLISH ────────────────────────────── */
.card--lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--brand-rgb),.12);
}
.btn-primary {
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -110%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }

/* ── 6. MOBILE GLOBAL FIXES (≤768px) ────────────────────────────── */
@media (max-width: 768px) {
  .form-control, .form-select { font-size: 1rem !important; min-height: 44px; }
  .row-2, .row-3, .row-4 { gap: .65rem; }
  .table { font-size: .8rem; }
  .table th, .table td { padding: .5rem .65rem; }
  .card__body { padding: .85rem; }
  .card__header { padding: .7rem .85rem; }
  .topbar__actions { flex-wrap: nowrap; min-width: 0; }
}
/* Hide non-essential topbar items at 480px */
@media (max-width: 480px) {
  .cpal-trigger      { display: none; }
  [data-rtl-toggle]  { display: none; }
  .theme-trigger-btn { display: none; }
  .topbar__user-name { display: none; }
  .topbar__user-chevron { display: none; }
  .topbar__actions   { gap: .15rem; }
  .breadcrumbs       { min-width: 0; max-width: 38vw; }
  .breadcrumbs__current {
    max-width: 110px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  }
}

/* ── 7. TV COMFORT (≥1920px) ─────────────────────────────────────── */
@media (min-width: 1920px) {
  .main { max-width: 1600px; }
  .card { border-radius: 14px; }
  .btn  { font-size: .95rem; min-height: 44px; }
  .table th, .table td { padding: .9rem 1.1rem; }
  .topbar { padding: 0 2.5rem; }
  .topbar__icon-btn { width: 52px; height: 52px; }
  .stat__value { font-size: 2rem; }
}

/* ── 8. PRINT ────────────────────────────────────────────────────── */
@media print {
  .bottom-nav, .sidebar, .topbar { display: none !important; }
  .app { display: block; }
  .main { padding: 0 !important; }
}

/* ── 9. REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .bottom-nav__item.is-active .bottom-nav__icon svg { transform: none; }
  .btn-primary::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium Enhancement v5 — Richer Components & Micro-interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ── STAT CARDS — Colored accent variants ──────────────────────── */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stat-line, var(--brand));
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, var(--stat-glow, rgba(37,99,235,.10)), transparent 70%);
  pointer-events: none;
}
.stat-card--blue   { --stat-line: #2563eb; --stat-glow: rgba(37,99,235,.12); }
.stat-card--green  { --stat-line: #059669; --stat-glow: rgba(5,150,105,.12); }
.stat-card--purple { --stat-line: #7c3aed; --stat-glow: rgba(124,58,237,.12); }
.stat-card--amber  { --stat-line: #d97706; --stat-glow: rgba(217,119,6,.12); }
.stat-card--rose   { --stat-line: #e11d48; --stat-glow: rgba(225,29,72,.12); }
.stat-card--cyan   { --stat-line: #0891b2; --stat-glow: rgba(8,145,178,.12); }

.stat-card__icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--stat-icon-a, rgba(37,99,235,.18)), var(--stat-icon-b, rgba(37,99,235,.06)));
  font-size: 1.35rem; margin-bottom: .75rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.stat-card--blue   .stat-card__icon-wrap { --stat-icon-a: rgba(37,99,235,.2);  --stat-icon-b: rgba(37,99,235,.07);  }
.stat-card--green  .stat-card__icon-wrap { --stat-icon-a: rgba(5,150,105,.2);  --stat-icon-b: rgba(5,150,105,.07);  }
.stat-card--purple .stat-card__icon-wrap { --stat-icon-a: rgba(124,58,237,.2); --stat-icon-b: rgba(124,58,237,.07); }
.stat-card--amber  .stat-card__icon-wrap { --stat-icon-a: rgba(217,119,6,.2);  --stat-icon-b: rgba(217,119,6,.07);  }
.stat-card--rose   .stat-card__icon-wrap { --stat-icon-a: rgba(225,29,72,.2);  --stat-icon-b: rgba(225,29,72,.07);  }
.stat-card--cyan   .stat-card__icon-wrap { --stat-icon-a: rgba(8,145,178,.2);  --stat-icon-b: rgba(8,145,178,.07);  }

.stat-card:hover .stat-card__icon-wrap { transform: scale(1.12) rotate(-4deg); }

/* ── NOTIFICATION BADGE — Pulse ring ───────────────────────────── */
@keyframes badge-pulse {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.badge-pulse { position: relative; display: inline-flex; }
.badge-pulse::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--danger, #e11d48);
  animation: badge-pulse 2s ease-out infinite;
}

/* ── PROGRESS BAR ───────────────────────────────────────────────── */
.progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--border-color, rgba(0,0,0,.08));
}
.progress--sm { height: 4px; }
.progress--lg { height: 12px; }
.progress__bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, #7c3aed 100%);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.progress__bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  animation: shimmer-progress 1.8s linear infinite;
}
@keyframes shimmer-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.progress--green .progress__bar { background: linear-gradient(90deg, #059669, #34d399); }
.progress--amber .progress__bar { background: linear-gradient(90deg, #d97706, #fbbf24); }
.progress--rose  .progress__bar { background: linear-gradient(90deg, #e11d48, #fb7185); }

/* ── SKELETON LOADING SHIMMER ───────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  border-radius: var(--radius-sm, 6px);
  background: linear-gradient(90deg,
    var(--bg-elev2, #eee) 25%,
    var(--bg-elev3, #ddd) 50%,
    var(--bg-elev2, #eee) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.07) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.07) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}

/* ── TABLE ENHANCEMENTS ─────────────────────────────────────────── */
.table--striped tbody tr:nth-child(odd) td {
  background: var(--bg-elev, rgba(0,0,0,.018));
}
.table--striped tbody tr:hover td {
  background: rgba(37,99,235,.06);
  transition: background .15s;
}
.table--bordered { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.table--bordered th,
.table--bordered td { border: 1px solid var(--border-color); }
.table-container { overflow-x: auto; border-radius: var(--radius); }
.table--sticky-head thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev, #f8f9fb);
  box-shadow: 0 1px 0 var(--border-color);
}

/* ── BADGES — Richer variants ───────────────────────────────────── */
.badge--dot {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem .2rem .45rem;
}
.badge--dot::before {
  content: '';
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge--gradient {
  background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  color: #fff; border: none;
}
.badge--outline-success { color: #059669; border: 1.5px solid #059669; background: transparent; }
.badge--outline-danger  { color: #e11d48; border: 1.5px solid #e11d48; background: transparent; }
.badge--outline-warning { color: #d97706; border: 1.5px solid #d97706; background: transparent; }

/* ── ALERT — Left-border accent style ───────────────────────────── */
.alert--accent {
  border-left: 4px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-left: 1.1rem;
}
.alert--accent.alert-info    { border-left-color: var(--brand); }
.alert--accent.alert-success { border-left-color: #059669; }
.alert--accent.alert-warning { border-left-color: #d97706; }
.alert--accent.alert-danger  { border-left-color: #e11d48; }

/* ── FORM INPUTS — Enhanced focus state ─────────────────────────── */
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 1px 3px rgba(0,0,0,.06);
  transform: translateY(-1px);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.form-group label {
  font-weight: 500; font-size: .825rem; letter-spacing: .01em;
  transition: color .15s;
}
.form-group:focus-within label { color: var(--brand); }

.input-search-wrap { position: relative; }
.input-search-wrap .form-control { padding-left: 2.6rem; border-radius: 999px; }
.input-search-wrap__icon {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  opacity: .45; pointer-events: none; display: flex; align-items: center;
}

/* ── BUTTON ENHANCEMENTS ────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 4px 16px rgba(37,99,235,.38);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(37,99,235,.22); }

.btn-success {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 8px rgba(5,150,105,.28);
  border: none; color: #fff;
}
.btn-success:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  box-shadow: 0 4px 16px rgba(5,150,105,.38);
  transform: translateY(-1px);
}

.btn--loading {
  pointer-events: none; position: relative; color: transparent !important;
}
.btn--loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .65s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── CARD HOVER GLOW ────────────────────────────────────────────── */
.card--hoverable {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  cursor: pointer;
}
.card--hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37,99,235,.14), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="dark"] .card--hoverable:hover {
  box-shadow: 0 12px 32px rgba(37,99,235,.22), 0 2px 8px rgba(0,0,0,.3);
}

/* ── DIVIDER with label ─────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--text-muted, #8a92a0); font-size: .8rem;
  margin: 1.25rem 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-color, rgba(0,0,0,.08));
}

/* ── AVATAR STACK ───────────────────────────────────────────────── */
.avatar-stack { display: flex; flex-direction: row-reverse; width: fit-content; }
.avatar-stack .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--bg, #fff);
  margin-left: -8px; object-fit: cover;
  background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.avatar-stack .avatar:last-child { margin-left: 0; }
.avatar-stack .avatar--count {
  background: var(--bg-elev2, #f1f3f5);
  color: var(--text-muted); font-size: .7rem;
}

/* ── EMPTY STATE ────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 3rem 1.5rem; text-align: center;
}
.empty-state__icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.12);
}
.empty-state__title { font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
.empty-state__desc  { font-size: .875rem; color: var(--text-muted); max-width: 280px; }

/* ── TOOLTIP ────────────────────────────────────────────────────── */
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(.88);
  background: var(--bg-invert, #18202e); color: var(--text-invert, #f0f4f8);
  font-size: .74rem; line-height: 1.4; font-weight: 500;
  padding: .3rem .65rem; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1);
  z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── PAGE HEADER ────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem;
}
.page-header__title   { font-size: 1.35rem; font-weight: 700; margin: 0; line-height: 1.2; }
.page-header__sub     { font-size: .865rem; color: var(--text-muted); margin: .25rem 0 0; }
.page-header__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 480px) {
  .page-header { flex-direction: column; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }
}

/* ── MOBILE CARD LIST (touch-friendly rows) ─────────────────────── */
@media (max-width: 767px) {
  .card-list { display: flex; flex-direction: column; gap: .5rem; }
  .card-list-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .85rem 1rem; border-radius: var(--radius);
    background: var(--bg-elev, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border-left: 3px solid var(--item-accent, var(--brand));
    transition: transform .18s, box-shadow .18s;
  }
  .card-list-item:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .card-list-item__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.05));
  }
  .card-list-item__body  { flex: 1; min-width: 0; }
  .card-list-item__title {
    font-size: .9rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .card-list-item__meta { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
  .card-list-item__end  { flex-shrink: 0; text-align: right; }
}

/* ── DARK THEME DEPTH IMPROVEMENTS ──────────────────────────────── */
[data-theme="dark"] {
  --bg-elev2: #1e2a3e;
  --bg-elev3: #25334d;
}
[data-theme="dark"] .card { box-shadow: 0 1px 4px rgba(0,0,0,.35); }
[data-theme="dark"] .table--striped tbody tr:nth-child(odd) td { background: rgba(255,255,255,.025); }
[data-theme="dark"] .table--striped tbody tr:hover td { background: rgba(37,99,235,.10); }
[data-theme="dark"] .btn-primary { box-shadow: 0 2px 12px rgba(37,99,235,.4); }

/* ═══════════════════════════════════════════════════════════════════
   Enhancement v6 — iOS Zoom Prevention (app pages)
   ═══════════════════════════════════════════════════════════════════ */

/* iOS Safari triggers auto-zoom when any focused input is < 16px.
   This rule ensures every input on authenticated pages stays ≥ 16px
   on mobile so the viewport never zooms on focus. */
@media (max-width: 767px) {
  input, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="month"], input[type="week"],
  select, textarea, .form-control, .form-select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium Bottom Nav v7 — Enhanced bar + expandable sub-nav panel
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bottom nav: premium glass bar ─────────────────────────────── */
.bottom-nav {
  background: rgba(var(--bg-rgb, 255,255,255), .88);
  border-top: none;
  box-shadow: none;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(10,14,26,.9);
}

/* Top gradient accent line */
.bottom-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 40%, #059669 70%, #d97706 100%);
  opacity: .8;
}

/* Ambient inner glow element */
.bottom-nav__glow {
  position: absolute; top: 0; left: 0; right: 0;
  height: 40px; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(37,99,235,.04) 0%,
    transparent 100%);
}
[data-theme="dark"] .bottom-nav__glow {
  background: linear-gradient(to bottom, rgba(37,99,235,.08) 0%, transparent 100%);
}

/* Tab buttons (was <a>, now <button>) */
.bottom-nav__item {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* Ripple on tap */
.bottom-nav__item::after {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 12px;
  background: var(--bn-active-bg, rgba(37,99,235,.1));
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.bottom-nav__item:active::after {
  opacity: 1; transform: scale(1);
  transition: opacity .05s, transform .05s;
}

/* Active indicator — glowing top notch instead of flat line */
.bottom-nav__item.is-active::before {
  background: linear-gradient(90deg, var(--bn-active-fg, var(--brand)), #7c3aed);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 10px rgba(37,99,235,.55);
  height: 3px;
  left: 22%; right: 22%;
}

/* Active icon pill — accent-tinted */
.bottom-nav__item.is-active .bottom-nav__icon {
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 37,99,235), .16),
    rgba(var(--brand-rgb, 37,99,235), .06));
  border-radius: 12px;
}

/* Active icon bounce */
.bottom-nav__item.is-active .bottom-nav__icon svg {
  transform: translateY(-2px) scale(1.14);
}

/* Active tab label gradient text */
.bottom-nav__item.is-active .bottom-nav__label {
  background: linear-gradient(135deg, var(--brand, #2563eb), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ── EMI — elevated centre button ───────────────────────────────── */
.bottom-nav__item--emi {
  position: relative;
  z-index: 1;
}
.bottom-nav__item--emi .bottom-nav__icon {
  width: 44px; height: 44px; border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  box-shadow: 0 4px 16px rgba(5,150,105,.45);
  margin-top: -10px;
  color: #fff !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1),
              box-shadow .22s;
}
.bottom-nav__item--emi .bottom-nav__icon svg {
  color: #fff; stroke: #fff;
  width: 20px; height: 20px;
  transform: none !important;
}
.bottom-nav__item--emi:hover .bottom-nav__icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(5,150,105,.6);
}
.bottom-nav__item--emi:active .bottom-nav__icon { transform: scale(.93); }
.bottom-nav__item--emi.is-active .bottom-nav__icon {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  box-shadow: 0 5px 22px rgba(5,150,105,.7) !important;
}
.bottom-nav__item--emi.is-active::before { display: none; }
.bottom-nav__item--emi .bottom-nav__label { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
.bottom-nav__item--emi.is-active .bottom-nav__label { font-weight: 700; }

/* Panel open — active tab gets a gentle glow ring on icon */
.bottom-nav__item[aria-expanded="true"] .bottom-nav__icon {
  outline: 2px solid rgba(37,99,235,.3);
  outline-offset: 2px;
}
.bottom-nav__item--emi[aria-expanded="true"] .bottom-nav__icon {
  outline: 2px solid rgba(5,150,105,.4);
  outline-offset: 3px;
}

/* ── Sub-nav wrapper ─────────────────────────────────────────────── */
.bn-subnav {
  position: fixed; top: 0; left: 0; right: 0;
  bottom: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px));
  z-index: 44; /* below bottom-nav (45) so nav bar stays tappable */
  pointer-events: none;
}
.bn-subnav.is-open { pointer-events: auto; }

/* Backdrop — covers main content only (not the nav bar zone) */
.bn-subnav__bd {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(4px) saturate(150%);
  -webkit-backdrop-filter: blur(4px) saturate(150%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.bn-subnav.is-open .bn-subnav__bd {
  opacity: 1;
  pointer-events: auto;
}

/* Panel card */
.bn-subnav__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-elev, #fff);
  border-radius: 22px 22px 0 0;
  border-top: 3px solid var(--bnp-accent, var(--brand, #2563eb));
  box-shadow:
    0 -8px 40px rgba(0,0,0,.18),
    0 -2px 8px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
  will-change: transform;
}
.bn-subnav.is-open .bn-subnav__panel {
  transform: translateY(0);
}
[data-theme="dark"] .bn-subnav__panel {
  background: #0f1a2e;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Drag handle */
.bn-subnav__handle {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border, rgba(0,0,0,.1));
}

/* Panel header */
.bn-subnav__hd {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1rem .9rem;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
  background: linear-gradient(90deg,
    rgba(var(--bnp-accent-rgb, 37,99,235), .07) 0%,
    transparent 100%);
  position: relative;
}
/* Left colour bar on header */
.bn-subnav__hd::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bnp-accent, var(--brand));
  border-radius: 0 2px 2px 0;
}

.bn-subnav__hd-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.bn-subnav__hd-icon:hover { transform: scale(1.08) rotate(-5deg); }

.bn-subnav__hd-body { flex: 1; min-width: 0; }
.bn-subnav__hd-title {
  display: block; font-size: 1rem; font-weight: 700; line-height: 1.2;
  color: var(--text);
}
.bn-subnav__hd-goto {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .76rem; font-weight: 500;
  color: var(--bnp-accent, var(--brand));
  text-decoration: none; margin-top: .18rem;
  transition: gap .18s;
}
.bn-subnav__hd-goto:hover { gap: .45rem; }
.bn-subnav__hd-goto svg { flex-shrink: 0; transition: transform .18s; }
.bn-subnav__hd-goto:hover svg { transform: translateX(3px); }

.bn-subnav__close {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg-muted, rgba(0,0,0,.04));
  border: 1px solid var(--border, rgba(0,0,0,.07));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: background .15s, transform .2s cubic-bezier(.34,1.56,.64,1), color .15s;
}
.bn-subnav__close:hover  { background: rgba(220,38,38,.08); color: #dc2626; border-color: rgba(220,38,38,.2); }
.bn-subnav__close:active { transform: scale(.88) rotate(90deg); }
[data-theme="dark"] .bn-subnav__close { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }

/* Sub-links grid */
.bn-subnav__links {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; padding: .9rem 1rem 1.1rem;
}
.bn-subnav__link {
  display: flex; flex-direction: column; align-items: center; gap: .38rem;
  padding: .8rem .45rem; border-radius: 14px; text-decoration: none;
  background: var(--bg-muted, rgba(0,0,0,.04));
  border: 1px solid transparent;
  transition:
    background .18s,
    border-color .18s,
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s;
  position: relative; overflow: hidden;
}
.bn-subnav__link::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(var(--bnp-accent-rgb, 37,99,235), .12),
    rgba(var(--bnp-accent-rgb, 37,99,235), .04));
  opacity: 0; transition: opacity .18s;
}
.bn-subnav__link:hover {
  background: var(--bg-elev2, rgba(0,0,0,.06));
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--bnp-accent-rgb, 37,99,235), .15);
}
.bn-subnav__link:hover::before { opacity: 1; }
.bn-subnav__link:active { transform: scale(.92); }

[data-theme="dark"] .bn-subnav__link {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .bn-subnav__link:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .3);
}

.bn-subnav__link-icon {
  font-size: 1.5rem; line-height: 1; display: block;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.bn-subnav__link:hover .bn-subnav__link-icon { transform: scale(1.18) rotate(-5deg); }

.bn-subnav__link-label {
  font-size: .7rem; font-weight: 600; line-height: 1.2;
  color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 72px;
}
.bn-subnav__link:hover .bn-subnav__link-label { color: var(--text); }

/* Tablet — 4 cols still, just larger */
@media (min-width: 768px) and (max-width: 1199px) {
  .bn-subnav__panel    { max-width: 600px; left: 50%; transform: translateX(-50%) translateY(110%); border-radius: 22px 22px 0 0; }
  .bn-subnav.is-open .bn-subnav__panel { transform: translateX(-50%) translateY(0); }
  .bn-subnav__links    { grid-template-columns: repeat(4, 1fr); gap: .75rem; padding: 1.1rem 1.25rem 1.4rem; }
  .bn-subnav__link     { padding: 1rem .65rem; border-radius: 16px; }
  .bn-subnav__link-icon { font-size: 1.7rem; }
  .bn-subnav__link-label { font-size: .78rem; }
  .bn-subnav__hd       { padding: 1.2rem 1.25rem 1rem; }
  .bn-subnav__hd-icon  { width: 48px; height: 48px; border-radius: 14px; font-size: 1.4rem; }
  .bn-subnav__hd-title { font-size: 1.1rem; }
  .bottom-nav__item--emi .bottom-nav__icon { width: 52px; height: 52px; margin-top: -12px; }
}

/* TV */
@media (min-width: 1920px) {
  .bn-subnav__panel    { max-width: 760px; left: 50%; transform: translateX(-50%) translateY(110%); }
  .bn-subnav.is-open .bn-subnav__panel { transform: translateX(-50%) translateY(0); }
  .bn-subnav__links    { grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.4rem 1.5rem 1.75rem; }
  .bn-subnav__link     { padding: 1.25rem .75rem; border-radius: 18px; }
  .bn-subnav__link-icon { font-size: 2rem; }
  .bn-subnav__link-label { font-size: .85rem; max-width: 90px; }
  .bn-subnav__hd       { padding: 1.4rem 1.5rem 1.1rem; }
  .bn-subnav__hd-icon  { width: 56px; height: 56px; font-size: 1.6rem; }
  .bottom-nav__item--emi .bottom-nav__icon { width: 60px; height: 60px; margin-top: -14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bn-subnav__panel { transition: none; }
  .bn-subnav__bd    { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium Elevation v8 — Sidebar · Topbar · Nav · Mobile · TV
   Append to app.css
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. SIDEBAR — premium collapsible groups
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Brand row: gradient shimmer on logo mark */
.sidebar__brand .logo {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 4px 14px rgba(37,99,235,.45);
  transition: box-shadow .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sidebar__brand:hover .logo {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 6px 20px rgba(37,99,235,.55);
}

/* Group summary — richer hover and open states */
.sidebar__group > summary {
  border-radius: 8px;
  transition: background .15s, color .15s, padding-left .15s;
}
.sidebar__group > summary:hover {
  background: rgba(255,255,255,.07);
  padding-left: 1rem;
}
.sidebar__group[open] > summary {
  background: rgba(37,99,235,.12);
  color: rgba(255,255,255,.9);
}
.sidebar__group[open] > summary .sidebar__group-icon {
  opacity: 1;
  color: var(--brand);
}

/* Group icon — mini pill background when group is open */
.sidebar__group[open] > summary .sidebar__group-icon {
  background: rgba(37,99,235,.2);
  border-radius: 6px;
}

/* Chevron — spring rotation */
.sidebar__group-chevron {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}

/* Group body — left border accent */
.sidebar__group-body {
  border-left: 2px solid rgba(37,99,235,.25);
  margin-left: 1.1rem;
  padding-left: .4rem;
}
.sidebar__group[open] .sidebar__group-body {
  border-left-color: rgba(37,99,235,.4);
}

/* Active link — gradient fill + glow + indicator bar */
.sidebar__link.is-active {
  background: linear-gradient(90deg, rgba(37,99,235,.22) 0%, rgba(37,99,235,.06) 100%);
  color: var(--sidebar-active-fg);
  box-shadow: inset 3px 0 0 var(--brand), 0 2px 14px rgba(37,99,235,.18);
  font-weight: 600;
}
.sidebar__link.is-active .icon {
  color: var(--brand);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(37,99,235,.5));
}

/* Link hover — shift right with colour */
.sidebar__link:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  padding-left: 1.05rem;
}

/* Profile bar — online indicator + ring on avatar */
.sidebar__profile {
  background: linear-gradient(0deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .85rem 1rem;
  gap: .7rem;
}
.sidebar__avatar {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.3);
  position: relative;
}
.sidebar__avatar::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--sidebar-bg, #0d1630);
}
.sidebar__user-name  { font-size: .82rem; font-weight: 700; }
.sidebar__user-role  {
  font-size: .68rem; color: var(--sidebar-muted);
  background: rgba(255,255,255,.07); border-radius: 4px;
  padding: .05rem .35rem; display: inline-block; margin-top: .15rem;
}
.sidebar__profile-link {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: var(--sidebar-muted); text-decoration: none; font-size: .9rem;
  transition: background .18s, color .18s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sidebar__profile-link:hover {
  background: rgba(37,99,235,.25); color: #fff;
  transform: scale(1.12);
}

/* Sidebar close button */
.sidebar__close-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-right: .6rem;
  transition: background .18s, color .18s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sidebar__close-btn:hover {
  background: rgba(220,38,38,.15); color: #fca5a5;
  border-color: rgba(220,38,38,.3);
}
.sidebar__close-btn:active { transform: scale(.88) rotate(90deg); }

/* Small menu (icon-only) enhancements */
.app[data-menu="small"] .sidebar__group-chevron,
.app[data-menu="small"] .sidebar__group-label,
.app[data-menu="small"] .sidebar__link .label,
.app[data-menu="small"] .sidebar__user-info,
.app[data-menu="small"] .sidebar__user-role,
.app[data-menu="small"] .sidebar__profile-link { display: none; }

.app[data-menu="small"] .sidebar__link {
  justify-content: center; padding: .55rem 0;
}
.app[data-menu="small"] .sidebar__link .icon { width: 22px; height: 22px; font-size: 1rem; }
.app[data-menu="small"] .sidebar__avatar { width: 30px; height: 30px; }
.app[data-menu="small"] .sidebar__group-body { border-left: none; margin-left: 0; padding-left: 0; }
.app[data-menu="small"] .sidebar__link.is-active {
  box-shadow: inset 0 -2px 0 var(--brand), 0 2px 12px rgba(37,99,235,.2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. TOPBAR — polished user dropdown + command palette
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Command palette: pill with focus glow */
.cpal-trigger {
  border-radius: 999px;
  padding: .3rem .9rem;
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cpal-trigger:hover {
  border-color: var(--brand);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  color: var(--text);
}
.cpal-trigger:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.cpal-trigger__label { font-size: .8rem; color: var(--text-muted); }

/* Icon buttons — enhanced focus + active */
.topbar__icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}
.topbar__icon-btn { border-radius: 9px; }

/* Badge pulse on unread notifications */
@keyframes topbar-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.6); }
  50%       { box-shadow: 0 0 0 5px rgba(220,38,38,.0); }
}
.topbar__badge--danger {
  animation: topbar-badge-pulse 2s ease-in-out infinite;
}

/* User button — cleaner avatar ring */
.topbar__user-btn { border-radius: 999px; padding: .25rem .5rem .25rem .25rem; }
.topbar__user-btn:hover {
  background: var(--bg-muted);
  box-shadow: 0 0 0 2px var(--border-strong);
}
.topbar__user-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 0 0 2px rgba(37,99,235,.3);
  font-weight: 800;
}

/* User dropdown — profile card layout */
.topbar__user-dropdown {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 230px;
}
.topbar__user-dropdown-header {
  padding: .9rem 1rem .75rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(124,58,237,.04) 100%);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.topbar__user-dropdown-header strong {
  font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.2;
}
.topbar__user-dropdown-header span:not(.badge) {
  font-size: .75rem; color: var(--text-muted); margin-top: .12rem;
}
.topbar__user-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1rem; font-size: .875rem; color: var(--text);
  border-radius: 0; text-decoration: none;
  transition: background .12s, color .12s, padding-left .12s;
}
.topbar__user-item:hover { background: var(--bg-muted); padding-left: 1.2rem; }
.topbar__user-item svg { opacity: .6; flex-shrink: 0; }
.topbar__user-item:hover svg { opacity: 1; }
.topbar__user-item--danger:hover { background: rgba(220,38,38,.07); color: var(--danger); }
.topbar__user-item--danger:hover svg { color: var(--danger); opacity: 1; }
.topbar__user-divider { height: 1px; background: var(--border); margin: .3rem 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. MOBILE SIDEBAR — overlay polish + spring entry
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* Backdrop overlay behind open sidebar */
  .app[data-menu="open"]::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: calc(var(--z-sidebar) - 1);
    animation: fade-in .25s ease forwards;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* Sidebar slides in from left with spring */
  .sidebar {
    transition: transform .32s cubic-bezier(.34,1.56,.64,1);
  }

  /* Groups in mobile sidebar — slightly larger touch targets */
  .sidebar__group > summary { min-height: 46px; }
  .sidebar__link { min-height: 46px; padding: .6rem .85rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. TABLET (768–1199px) SIDEBAR — auto-collapsed icon-only
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Icon-only sidebar on tablet unless user opened to large */
  .app[data-menu="large"] .sidebar__brand span:last-child,
  .app[data-menu="large"] .sidebar__group-label,
  .app[data-menu="large"] .sidebar__group-chevron,
  .app[data-menu="large"] .sidebar__link .label,
  .app[data-menu="large"] .sidebar__user-info,
  .app[data-menu="large"] .sidebar__profile-link { display: none; }

  .app[data-menu="large"] .sidebar__link { justify-content: center; padding: .6rem 0; }
  .app[data-menu="large"] .sidebar__group-body { border-left: none; margin-left: 0; padding-left: 0; }
  .app[data-menu="large"] .sidebar__group > summary { justify-content: center; padding: .6rem; }
  .app[data-menu="large"] .sidebar__group-icon { opacity: .9; }
  .app[data-menu="large"] .sidebar__profile { justify-content: center; padding: .75rem .5rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. TV (≥ 1920px) — enlarged sidebar, topbar, nav
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1920px) {
  :root { --sidebar-w: 300px; --topbar-h: 72px; }
  .sidebar__brand .logo { width: 40px; height: 40px; font-size: 1.3rem; }
  .sidebar__brand { gap: .9rem; padding: 1.3rem 1.4rem 1.1rem; font-size: 1.05rem; }
  .sidebar__group > summary { padding: .7rem 1rem; font-size: .88rem; }
  .sidebar__link { padding: .62rem .9rem; font-size: .95rem; }
  .sidebar__link .icon { width: 24px; height: 24px; font-size: 1.05rem; }
  .sidebar__avatar { width: 40px; height: 40px; font-size: 1rem; }
  .sidebar__user-name { font-size: .88rem; }
  .topbar { padding: 0 2rem; }
  .topbar__icon-btn { width: 50px; height: 50px; }
  .topbar__user-avatar { width: 36px; height: 36px; font-size: 1rem; }
  .cpal-trigger { padding: .4rem 1.1rem; font-size: .88rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. BOTTOM NAV bar enhancements — consistent across breakpoints
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Gradient top rainbow line */
.bottom-nav::before {
  background: linear-gradient(90deg,
    #2563eb 0%,   /* Home */
    #7c3aed 20%,  /* Plots */
    #059669 40%,  /* EMI */
    #d97706 60%,  /* Referral */
    #e11d48 80%,  /* Life */
    #0891b2 100%  /* Profile */
  );
  height: 2px; opacity: .9;
}

/* Tab label — clamp font for very small phones */
.bottom-nav__label {
  font-size: clamp(.55rem, 1.8vw, .65rem);
}

/* Active icon: per-tab accent colours via CSS variables set dynamically */
.bottom-nav__item[data-bn-tab="home"].is-active     { --bn-active-fg: #2563eb; }
.bottom-nav__item[data-bn-tab="plots"].is-active    { --bn-active-fg: #7c3aed; }
.bottom-nav__item[data-bn-tab="referral"].is-active { --bn-active-fg: #d97706; }
.bottom-nav__item[data-bn-tab="life"].is-active     { --bn-active-fg: #e11d48; }
.bottom-nav__item[data-bn-tab="profile"].is-active  { --bn-active-fg: #0891b2; }

/* Per-tab top notch colour */
.bottom-nav__item[data-bn-tab="home"].is-active::before     { background: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,.5); }
.bottom-nav__item[data-bn-tab="plots"].is-active::before    { background: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,.5); }
.bottom-nav__item[data-bn-tab="referral"].is-active::before { background: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,.5); }
.bottom-nav__item[data-bn-tab="life"].is-active::before     { background: #e11d48; box-shadow: 0 2px 8px rgba(225,29,72,.5); }
.bottom-nav__item[data-bn-tab="profile"].is-active::before  { background: #0891b2; box-shadow: 0 2px 8px rgba(8,145,178,.5); }

/* Per-tab active icon background */
.bottom-nav__item[data-bn-tab="home"].is-active .bottom-nav__icon    { background: rgba(37,99,235,.14); }
.bottom-nav__item[data-bn-tab="plots"].is-active .bottom-nav__icon   { background: rgba(124,58,237,.14); }
.bottom-nav__item[data-bn-tab="referral"].is-active .bottom-nav__icon{ background: rgba(217,119,6,.14); }
.bottom-nav__item[data-bn-tab="life"].is-active .bottom-nav__icon    { background: rgba(225,29,72,.14); }
.bottom-nav__item[data-bn-tab="profile"].is-active .bottom-nav__icon { background: rgba(8,145,178,.14); }

/* Active label per-tab gradient text */
.bottom-nav__item[data-bn-tab="plots"].is-active .bottom-nav__label    { background: linear-gradient(135deg,#7c3aed,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bottom-nav__item[data-bn-tab="referral"].is-active .bottom-nav__label { background: linear-gradient(135deg,#d97706,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bottom-nav__item[data-bn-tab="life"].is-active .bottom-nav__label     { background: linear-gradient(135deg,#e11d48,#f43f5e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bottom-nav__item[data-bn-tab="profile"].is-active .bottom-nav__label  { background: linear-gradient(135deg,#0891b2,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. CARDS & CONTENT — consistent elevation
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  border: 1px solid var(--border);
  transition: box-shadow .2s, border-color .2s;
}
.card:focus-within {
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 0 0 3px rgba(37,99,235,.06);
}

/* Dashboard stat cards — elevation on hover */
.card.stat:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,.2);
}

/* Page section header bar */
.card__header {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-elev) 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. MOBILE CONTENT PADDING (safe area + bottom nav clearance)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .main {
    padding: .85rem .85rem calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
  /* Touch-friendly table scrolling */
  .table-container { -webkit-overflow-scrolling: touch; }
  /* Cards: full-width, tighter padding */
  .card { border-radius: var(--radius); }
  .card__body { padding: 1rem; }
  .card__header { padding: .65rem 1rem; font-size: .88rem; }
  /* Forms: larger inputs for fat fingers */
  .form-control, .form-select { min-height: 46px; border-radius: var(--radius); }
  /* Buttons: min touch target */
  .btn { min-height: 44px; }
  /* Hide table columns on very small phones */
  @media (max-width: 480px) {
    .hide-xs { display: none !important; }
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .main {
    padding: 1.25rem 1.25rem calc(var(--bn-h, 68px) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. DARK THEME REFINEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .topbar__user-dropdown-header {
  background: linear-gradient(135deg, rgba(37,99,235,.1) 0%, rgba(124,58,237,.07) 100%);
  border-bottom-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .topbar__user-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .cpal-trigger {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .cpal-trigger:hover {
  background: rgba(37,99,235,.15);
  border-color: rgba(37,99,235,.4);
}
[data-theme="dark"] .card__header {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. REDUCED MOTION SAFETY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .sidebar__brand:hover .logo,
  .sidebar__link,
  .topbar__icon-btn,
  .topbar__user-btn,
  .bottom-nav__item { transition: none !important; transform: none !important; }
  .topbar__badge--danger { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium Final v9 — Theme Drawer · Notifications · Welcome Popup
   Mobile-first polish across every authenticated page
   Append to app.css
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. THEME DRAWER — full premium implementation (was unstyled)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Backdrop */
.theme-drawer__overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 148;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.theme-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }

/* Drawer panel — slides in from right */
.theme-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(390px, 94vw);
  background: var(--bg-elev, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 48px rgba(13,27,46,.22), -2px 0 8px rgba(13,27,46,.06);
  z-index: 149;
  display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.theme-drawer.is-open { transform: translateX(0); }
[data-theme="dark"] .theme-drawer {
  background: #0f1a2e;
  border-left-color: rgba(255,255,255,.07);
  box-shadow: -12px 0 48px rgba(0,0,0,.55);
}

/* Header */
.theme-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(124,58,237,.04) 100%);
  position: relative;
}
.theme-drawer__header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #06b6d4);
}
.theme-drawer__title {
  font-size: 1rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: .45rem;
}

/* Body — scrollable */
.theme-drawer__body {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 1.15rem;
  scroll-behavior: smooth;
}
.theme-drawer__body::-webkit-scrollbar { width: 4px; }
.theme-drawer__body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 2px;
}

/* Section */
.theme-drawer__section {
  background: var(--bg-muted, #f8fafc);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
[data-theme="dark"] .theme-drawer__section {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}
.theme-drawer__section-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  padding-bottom: .2rem;
}

/* Segmented control */
.td-segments {
  display: flex; gap: .3rem;
  background: var(--bg, #f4f7fb);
  border: 1px solid var(--border);
  border-radius: 10px; padding: .25rem;
}
[data-theme="dark"] .td-segments {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08);
}
.td-segment {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: .3rem; padding: .45rem .4rem;
  font-size: .8rem; font-weight: 500; color: var(--text-muted);
  border: none; border-radius: 7px; background: none; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.td-segment:hover { background: rgba(37,99,235,.06); color: var(--text); }
.td-segment.is-active {
  background: var(--bg-elev, #fff);
  color: var(--brand, #2563eb);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(37,99,235,.18), 0 1px 2px rgba(0,0,0,.06);
}
[data-theme="dark"] .td-segment.is-active {
  background: rgba(37,99,235,.2);
  box-shadow: 0 1px 6px rgba(37,99,235,.3);
}
.td-segment__icon {
  font-size: 1rem; line-height: 1; flex-shrink: 0;
}

/* Colour preset grid */
.td-presets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
}
.td-preset {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .5rem .3rem; border-radius: 10px;
  border: 1.5px solid transparent; background: none; cursor: pointer;
  font-size: .7rem; font-weight: 500; color: var(--text-muted);
  transition: border-color .15s, background .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.td-preset:hover {
  background: var(--bg-muted); border-color: var(--border);
  transform: translateY(-1px);
}
.td-preset.is-active {
  border-color: var(--brand, #2563eb);
  background: rgba(37,99,235,.06);
  color: var(--brand);
}
.td-preset:active { transform: scale(.93); }
.td-preset__swatch {
  width: 28px; height: 28px; border-radius: 50%;
  display: block; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  border: 2px solid rgba(255,255,255,.3);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.td-preset:hover .td-preset__swatch   { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.td-preset.is-active .td-preset__swatch { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.3); }

/* Swatch colours */
.td-preset--default  .td-preset__swatch { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.td-preset--ocean    .td-preset__swatch { background: linear-gradient(135deg, #0891b2, #0284c7); }
.td-preset--forest   .td-preset__swatch { background: linear-gradient(135deg, #059669, #16a34a); }
.td-preset--sunset   .td-preset__swatch { background: linear-gradient(135deg, #d97706, #f97316); }
.td-preset--midnight .td-preset__swatch { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.td-preset--rose     .td-preset__swatch { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.td-preset--platinum .td-preset__swatch { background: linear-gradient(135deg, #475569, #64748b); }
.td-preset--aurora   .td-preset__swatch { background: linear-gradient(135deg, #8b5cf6, #06b6d4); }

/* Toggle row */
.td-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .1rem 0;
}
.td-toggle__label {
  font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.2;
}
.td-toggle__hint {
  font-size: .73rem; color: var(--text-muted); margin-top: .1rem;
}

/* Toggle switch (checkbox) */
.td-switch {
  position: relative; display: inline-flex;
  width: 42px; height: 24px; flex-shrink: 0; cursor: pointer;
}
.td-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.td-switch__slider {
  position: absolute; inset: 0;
  background: var(--border-strong, #c8d0db);
  border-radius: 999px;
  transition: background .22s cubic-bezier(.34,1.56,.64,1);
}
.td-switch__slider::before {
  content: '';
  position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.td-switch input:checked + .td-switch__slider { background: var(--brand, #2563eb); }
.td-switch input:checked + .td-switch__slider::before { transform: translateX(18px); }
.td-switch input:focus-visible + .td-switch__slider {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 999px;
}

/* Footer */
.td-drawer__footer {
  display: flex; gap: .6rem; padding: .9rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-muted, #f8fafc);
}
[data-theme="dark"] .td-drawer__footer {
  background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.07);
}
.td-drawer__footer .btn { flex: 1; justify-content: center; }
.td-drawer__footer .btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: none; box-shadow: 0 2px 10px rgba(37,99,235,.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. NOTIFICATION DROPDOWN — premium elevation
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.notif-dropdown {
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--brand) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.notif-dropdown__header {
  background: linear-gradient(135deg, rgba(37,99,235,.05) 0%, rgba(124,58,237,.03) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}
.notif-dropdown__header strong { font-size: .92rem; font-weight: 700; }

/* Notification item icon — pill background */
.notif-item__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem !important;
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.07));
  text-align: unset !important; width: 36px !important;
}

/* Unread item — gradient left border treatment */
.notif-item--unread {
  background: rgba(37,99,235,.04) !important;
  border-left: 3px solid var(--brand);
  padding-left: calc(1rem - 3px) !important;
}
.notif-item--unread .notif-item__icon {
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(37,99,235,.06));
}

/* Unread dot — pulse animation */
.notif-item__dot {
  animation: notif-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes notif-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .7; }
}

/* Item hover — shift */
.notif-item:hover {
  background: var(--bg-muted) !important;
  padding-left: 1.2rem !important;
  transition: background .12s, padding-left .12s !important;
}
.notif-item--unread:hover { padding-left: calc(1.2rem - 3px) !important; }

/* Footer link */
.notif-dropdown__footer a {
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 600 !important;
}

/* Mobile: full-width at bottom of screen */
@media (max-width: 480px) {
  .notif-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom: none !important;
    max-height: 65vh;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. WELCOME POPUP — elevated dialog
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.welcome-popup__dialog {
  border: 1px solid var(--border);
}
.welcome-popup__image {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
  position: relative; overflow: hidden;
}
.welcome-popup__image::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}
.welcome-popup__title {
  background: linear-gradient(135deg, var(--text), var(--brand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-popup__close {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  transition: background .15s, transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.welcome-popup__close:hover {
  background: rgba(255,255,255,.28) !important;
  transform: rotate(90deg) scale(1.08) !important;
}
/* If image is absent, close button goes dark */
.welcome-popup__dialog:not(:has(.welcome-popup__image)) .welcome-popup__close {
  background: rgba(15,23,42,.07) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.welcome-popup__actions .btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: none;
  box-shadow: 0 3px 12px rgba(37,99,235,.35);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. FLASH MESSAGES — premium alert bar
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alert {
  border-radius: var(--radius);
  border-left: 4px solid;
  padding: .8rem 1rem .8rem 1.1rem;
  display: flex; align-items: flex-start; gap: .65rem;
  animation: alert-slide-in .28s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes alert-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.alert-success { border-left-color: var(--success, #16a34a); background: rgba(22,163,74,.07); }
.alert-danger   { border-left-color: var(--danger,  #dc2626); background: rgba(220,38,38,.07); }
.alert-warning  { border-left-color: var(--warning, #d97706); background: rgba(217,119,6,.07); }
.alert-info     { border-left-color: var(--brand,   #2563eb); background: rgba(37,99,235,.07); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. TABLES — full mobile treatment
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
}
.table th {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.table td { font-size: .875rem; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(37,99,235,.03); }
[data-theme="dark"] .table tbody tr:hover td { background: rgba(37,99,235,.07); }

/* Mobile: card-style rows */
@media (max-width: 639px) {
  .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .table thead { display: none; }
  .table,
  .table tbody,
  .table tr,
  .table td { display: block; width: 100%; }
  .table tr {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr;
    gap: .25rem; position: relative;
  }
  .table tr:last-child { border-bottom: none; }
  .table td {
    border: none; padding: 0;
    display: grid; grid-template-columns: minmax(100px, 35%) 1fr;
    align-items: start;
  }
  .table td::before {
    content: attr(data-label);
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
    align-self: center;
  }
  /* Actions column: full-width button row */
  .table td:last-child {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
  }
  .table td:last-child::before { display: none; }
  .table td:last-child { display: flex; gap: .4rem; flex-wrap: wrap; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. MOBILE TOPBAR — refined at narrow widths
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .topbar {
    padding: 0 .75rem;
    gap: .35rem;
  }
  .topbar__menu-btn { flex-shrink: 0; }
  .breadcrumbs { flex: 1; min-width: 0; }

  /* Compact icon row on mobile */
  .topbar__actions { gap: .15rem; }
  .topbar__icon-btn { width: 38px; height: 38px; }

  /* User button: avatar-only on mobile */
  .topbar__user-btn { padding: .2rem; border-radius: 50%; }
  .topbar__user-avatar { width: 34px; height: 34px; font-size: .85rem; }

  /* User dropdown: slides up from bottom on mobile */
  .topbar__user-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
    left: .75rem !important; right: .75rem !important;
    width: auto !important;
    border-radius: var(--radius-xl) !important;
    transform: translateY(8px) !important;
  }
  .topbar__user-dropdown.is-open {
    transform: translateY(0) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. AUTH PAGES — login / register mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-shell {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1630 0%, #1e3a8a 50%, #0d1630 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.auth-card {
  width: 100%; max-width: 420px;
  animation: wp-pop .32s cubic-bezier(.34,1.56,.64,1) forwards;
}
.auth-card .card {
  border: none;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.auth-card .card__header {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.05));
  border-bottom: 1px solid var(--border);
}
@media (max-width: 480px) {
  .auth-shell { padding: .5rem; align-items: flex-end; }
  .auth-card .card {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    min-height: 50vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. DASHBOARD STAT GRID — responsive
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
}
@media (max-width: 340px) {
  .stat-grid { grid-template-columns: 1fr; }
}
.stat-grid .card {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.stat-grid .card:active { transform: scale(.97); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. BOTTOM NAV sub-nav panel — per-tab glow colour on header bar
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bn-subnav__panel {
  will-change: transform;
}
/* Drag-handle: wider on tablet */
@media (min-width: 768px) {
  .bn-subnav__handle { width: 48px; }
}
/* Sub-link hover: accent colour from panel variable */
.bn-subnav__link:hover {
  color: var(--bnp-accent, var(--brand));
}
.bn-subnav__link:hover .bn-subnav__link-label {
  color: var(--bnp-accent, var(--brand));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. UTILITY — mobile-first helpers
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Touch scroll containers */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Safe bottom padding helper */
.pb-safe {
  padding-bottom: calc(var(--bn-h, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Staggered reveal animation for lists */
@keyframes row-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger > * {
  opacity: 0;
  animation: row-fade-in .3s ease forwards;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .20s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .30s; }

/* Floating action button */
.fab {
  position: fixed;
  bottom: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px) + .85rem);
  right: 1rem; z-index: 42;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,99,235,.45);
  border: none; cursor: pointer;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.fab:hover  { transform: scale(1.1);  box-shadow: 0 6px 24px rgba(37,99,235,.55); }
.fab:active { transform: scale(.93);  box-shadow: 0 2px 10px rgba(37,99,235,.3); }
@media (min-width: 1200px) { .fab { display: none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. PRINT / REDUCED MOTION OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  .theme-drawer, .theme-drawer__overlay,
  .bn-subnav, .bottom-nav,
  .welcome-popup, .notif-dropdown { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-drawer       { transition: none !important; }
  .notif-item         { transition: none !important; }
  .td-preset,
  .td-segment,
  .td-switch__slider,
  .td-switch__slider::before { transition: none !important; }
  .alert              { animation: none !important; opacity: 1 !important; }
  .stagger > *        { animation: none !important; opacity: 1 !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   Enhancement v10 — Deep Mobile-Native & Premium Polish
   Covers: page transitions · sidebar colours · bottom nav aura ·
   scroll shadows · checkbox/radio · modal mobile · table upgrades ·
   pagination · progress · select · form floating focus · skeleton v2 ·
   dark depth · TV/wide fixes · full responsive
   Append to app.css
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. ROOT — harmonise --bn-h variable (was --bottom-nav-h)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --bn-h: 64px;
  /* Scroll shadow gradient helpers */
  --scroll-shadow-top:
    linear-gradient(to bottom, rgba(13,27,46,.08) 0%, transparent 100%);
  --scroll-shadow-btm:
    linear-gradient(to top,   rgba(13,27,46,.08) 0%, transparent 100%);
}
[data-theme="dark"] {
  --scroll-shadow-top: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, transparent 100%);
  --scroll-shadow-btm: linear-gradient(to top,   rgba(0,0,0,.25) 0%, transparent 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. PAGE ENTRANCE ANIMATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes page-enter {
  from { opacity: .55; transform: translateY(10px) scale(.995); }
  to   { opacity:  1;  transform: translateY(0)    scale(1); }
}
.main {
  animation: page-enter .38s cubic-bezier(.16,1,.3,1) both;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .main { animation: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. SIDEBAR — per-group accent colours + body max-height animation
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Group icon tints */
.sidebar__group[data-group="main"]    .sidebar__group-icon { color: #7daaff; }
.sidebar__group[data-group="life"]    .sidebar__group-icon { color: #fb7185; }
.sidebar__group[data-group="website"] .sidebar__group-icon { color: #34d399; }
.sidebar__group[data-group="support"] .sidebar__group-icon { color: #fbbf24; }
.sidebar__group[data-group="admin"]   .sidebar__group-icon { color: #c084fc; }
.sidebar__group[data-group="account"] .sidebar__group-icon { color: #22d3ee; }

/* Open-state group icon tints */
.sidebar__group[data-group="main"][open]    > summary .sidebar__group-icon { background: rgba(37,99,235,.25);  }
.sidebar__group[data-group="life"][open]    > summary .sidebar__group-icon { background: rgba(225,29,72,.2);   }
.sidebar__group[data-group="website"][open] > summary .sidebar__group-icon { background: rgba(5,150,105,.2);   }
.sidebar__group[data-group="support"][open] > summary .sidebar__group-icon { background: rgba(217,119,6,.2);   }
.sidebar__group[data-group="admin"][open]   > summary .sidebar__group-icon { background: rgba(124,58,237,.2);  }
.sidebar__group[data-group="account"][open] > summary .sidebar__group-icon { background: rgba(8,145,178,.2);   }

/* Group body — slide reveal animation */
.sidebar__group-body {
  overflow: hidden;
  animation: group-body-in .22s cubic-bezier(.16,1,.3,1);
}
@keyframes group-body-in {
  from { opacity: .4; transform: translateX(-6px); }
  to   { opacity:  1; transform: translateX(0); }
}

/* Active link accent per group */
.sidebar__group[data-group="life"]    .sidebar__link.is-active { box-shadow: inset 3px 0 0 #e11d48, 0 2px 14px rgba(225,29,72,.15); background: linear-gradient(90deg, rgba(225,29,72,.18) 0%, rgba(225,29,72,.05) 100%); }
.sidebar__group[data-group="website"] .sidebar__link.is-active { box-shadow: inset 3px 0 0 #059669, 0 2px 14px rgba(5,150,105,.15); background: linear-gradient(90deg, rgba(5,150,105,.18) 0%, rgba(5,150,105,.05) 100%); }
.sidebar__group[data-group="support"] .sidebar__link.is-active { box-shadow: inset 3px 0 0 #d97706, 0 2px 14px rgba(217,119,6,.15);  background: linear-gradient(90deg, rgba(217,119,6,.18)  0%, rgba(217,119,6,.05)  100%); }
.sidebar__group[data-group="admin"]   .sidebar__link.is-active { box-shadow: inset 3px 0 0 #7c3aed, 0 2px 14px rgba(124,58,237,.15); background: linear-gradient(90deg, rgba(124,58,237,.18) 0%, rgba(124,58,237,.05) 100%); }
.sidebar__group[data-group="account"] .sidebar__link.is-active { box-shadow: inset 3px 0 0 #0891b2, 0 2px 14px rgba(8,145,178,.15);  background: linear-gradient(90deg, rgba(8,145,178,.18)  0%, rgba(8,145,178,.05)  100%); }

/* Sidebar link icon — pill on hover */
.sidebar__link:hover .icon {
  background: rgba(255,255,255,.09);
  border-radius: 5px;
  padding: 1px 3px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. BOTTOM NAV — panel-open glow aura on active tab button
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tab has expanded panel: pulse ring */
.bottom-nav__item[aria-expanded="true"] .bottom-nav__icon {
  box-shadow: 0 0 0 3px rgba(var(--bnp-accent-rgb, 37,99,235), .22),
              0 0 14px rgba(var(--bnp-accent-rgb, 37,99,235), .18);
  border-radius: 12px;
}

/* Per-tab expanded aura colours */
.bottom-nav__item[data-bn-tab="home"][aria-expanded="true"]     .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(37,99,235,.25),  0 0 14px rgba(37,99,235,.2);  }
.bottom-nav__item[data-bn-tab="plots"][aria-expanded="true"]    .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 0 14px rgba(124,58,237,.2); }
.bottom-nav__item[data-bn-tab="emi"][aria-expanded="true"]      .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(5,150,105,.25),  0 0 14px rgba(5,150,105,.2);  }
.bottom-nav__item[data-bn-tab="referral"][aria-expanded="true"] .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(217,119,6,.25),  0 0 14px rgba(217,119,6,.2);  }
.bottom-nav__item[data-bn-tab="life"][aria-expanded="true"]     .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(225,29,72,.25),  0 0 14px rgba(225,29,72,.2);  }
.bottom-nav__item[data-bn-tab="profile"][aria-expanded="true"]  .bottom-nav__icon { box-shadow: 0 0 0 3px rgba(8,145,178,.25),  0 0 14px rgba(8,145,178,.2);  }

/* Bottom nav — glass blur on light/dark */
.bottom-nav {
  -webkit-backdrop-filter: saturate(180%) blur(22px);
          backdrop-filter: saturate(180%) blur(22px);
}

/* Bottom nav — EMI button ring pulse */
@keyframes emi-ring {
  0%, 100% { box-shadow: 0 4px 16px rgba(5,150,105,.45), 0 0 0 0 rgba(5,150,105,.35); }
  50%       { box-shadow: 0 4px 16px rgba(5,150,105,.45), 0 0 0 7px rgba(5,150,105,0); }
}
.bottom-nav__item--emi .bottom-nav__icon {
  animation: emi-ring 3s ease-in-out infinite;
}
.bottom-nav__item--emi.is-active .bottom-nav__icon,
.bottom-nav__item--emi[aria-expanded="true"] .bottom-nav__icon {
  animation: none;
  box-shadow: 0 4px 20px rgba(5,150,105,.6);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. SCROLL SHADOW UTILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.scroll-shadow {
  --sh: 12px;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) content-box,
    linear-gradient(var(--bg-elev), var(--bg-elev)) content-box,
    var(--scroll-shadow-top),
    var(--scroll-shadow-btm);
  background-position: top, bottom, top, bottom;
  background-repeat: no-repeat;
  background-size: 100% var(--sh), 100% var(--sh), 100% 40px, 100% 40px;
  background-attachment: local, local, scroll, scroll;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. CUSTOM CHECKBOX & RADIO — native mobile look
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  vertical-align: middle;
  position: relative;
  margin: 0;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"]    { border-radius: 50%; }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),.3);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute; inset: 3px;
  background: #fff; border-radius: 50%;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.25);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--brand);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. SELECT — custom arrow
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-select,
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6a7e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.5rem;
}
[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238899b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. PROGRESS BAR — animated gradient fill
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.progress {
  height: 8px; border-radius: 99px;
  background: var(--bg-muted); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.progress__bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand) 0%, #7c3aed 100%);
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
}
.progress__bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
}
@keyframes progress-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* Colour variants */
.progress__bar--success { background: linear-gradient(90deg, #16a34a, #22c55e); }
.progress__bar--warning { background: linear-gradient(90deg, #d97706, #f59e0b); }
.progress__bar--danger  { background: linear-gradient(90deg, #dc2626, #f87171); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. PAGINATION — premium pill buttons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pagination {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
.pagination__btn {
  min-width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 500; padding: 0 .6rem;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted);
  cursor: pointer; text-decoration: none;
  transition: background .14s, border-color .14s, color .14s,
              transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.pagination__btn:hover {
  background: var(--bg-muted); color: var(--text);
  border-color: var(--border-strong); transform: translateY(-1px);
}
.pagination__btn.is-active {
  background: var(--brand); color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb),.35);
  font-weight: 700;
}
.pagination__btn:disabled,
.pagination__btn[disabled] {
  opacity: .35; cursor: not-allowed; transform: none;
}
@media (max-width: 480px) {
  .pagination { justify-content: center; gap: .25rem; }
  .pagination__btn { min-width: 38px; height: 38px; font-size: .85rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TABLE IMPROVEMENTS — sorting, sticky col, row actions
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Sortable column header */
.table th[data-sort] {
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.table th[data-sort]::after {
  content: ' ⇅';
  font-size: .65rem; color: var(--text-faint);
  opacity: .5; transition: opacity .15s;
}
.table th[data-sort]:hover::after { opacity: 1; }
.table th[data-sort="asc"]::after  { content: ' ↑'; color: var(--brand); opacity: 1; }
.table th[data-sort="desc"]::after { content: ' ↓'; color: var(--brand); opacity: 1; }

/* Status badges in tables */
.table .badge { font-size: .7rem; padding: .18rem .55rem; }

/* Row hover glow on interactive tables */
.table--interactive tbody tr {
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.table--interactive tbody tr:hover td {
  background: rgba(var(--brand-rgb),.04);
}
.table--interactive tbody tr:active td {
  background: rgba(var(--brand-rgb),.09);
}

/* Sticky first column */
.table--sticky-col th:first-child,
.table--sticky-col td:first-child {
  position: sticky; left: 0;
  background: var(--bg-elev);
  z-index: 1;
  box-shadow: 2px 0 6px rgba(0,0,0,.06);
}
[data-theme="dark"] .table--sticky-col th:first-child,
[data-theme="dark"] .table--sticky-col td:first-child {
  background: var(--bg-elev);
  box-shadow: 2px 0 8px rgba(0,0,0,.25);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. MODAL — slide-up on mobile, centre on desktop
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal, 100);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: min(540px, 100%);
  max-height: 90vh; overflow-y: auto;
  transform: scale(.94) translateY(12px);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  opacity: 0;
}
.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal__header {
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0;
  background: var(--bg-elev);
  z-index: 1;
}
.modal__title { font-size: 1rem; font-weight: 700; }
.modal__close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-muted); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background .15s, color .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.modal__close:hover { background: rgba(220,38,38,.1); color: var(--danger); }
.modal__close:active { transform: scale(.88) rotate(90deg); }
.modal__body { padding: 1.25rem; }
.modal__footer {
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .5rem;
  background: var(--bg-muted);
}

/* Mobile: slide up from bottom */
@media (max-width: 640px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; border-radius: 22px 22px 0 0;
    max-height: 92vh;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-overlay.is-open .modal { transform: translateY(0); }
  .modal__header { border-radius: 22px 22px 0 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. FORM ENHANCEMENTS — input icons, focus glow, field groups
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Input with icon slot */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
  transition: color .15s;
}
.input-icon-wrap .form-control { padding-left: 2.35rem; }
.input-icon-wrap:focus-within .input-icon { color: var(--brand); }

/* Field group: multiple inputs in a row */
.input-group {
  display: flex;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.input-group:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
}
.input-group .form-control {
  border: none; border-radius: 0; box-shadow: none;
  flex: 1;
}
.input-group .form-control:focus { box-shadow: none; }
.input-group__addon {
  display: flex; align-items: center; padding: 0 .8rem;
  background: var(--bg-muted); color: var(--text-muted);
  border-right: 1px solid var(--border); font-size: .82rem;
  white-space: nowrap; flex-shrink: 0;
}
.input-group__addon:last-child { border-right: none; border-left: 1px solid var(--border); }

/* Animated focus label */
.form-field {
  position: relative; margin-bottom: 1.15rem;
}
.form-field .form-control::placeholder { opacity: 0; }
.form-field .form-control:focus::placeholder { opacity: 1; transition: opacity .2s .1s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. TOAST / SNACKBAR — mobile bottom placement
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast-stack {
  position: fixed;
  bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px) + .75rem);
  right: 1rem; left: auto;
  z-index: 180;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(380px, calc(100vw - 2rem));
}
@media (max-width: 767px) {
  .toast-stack { left: 1rem; right: 1rem; max-width: none; }
}
.toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: toast-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(.93); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@media (max-width: 767px) {
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
  }
}
.toast--success { border-left: 3px solid var(--success); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--danger  { border-left: 3px solid var(--danger);  }
.toast--info    { border-left: 3px solid var(--info);    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. CARD PREMIUM HOVER — gradient border shimmer
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card--glow {
  position: relative; z-index: 0;
}
.card--glow::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, #2563eb, #7c3aed, #06b6d4);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.card--glow:hover::before { opacity: .45; }

/* Stat card counter pulse on load */
@keyframes stat-count-in {
  from { transform: translateY(8px); opacity: .3; }
  to   { transform: translateY(0);   opacity: 1;  }
}
.stat-card__number, [class*="stat-card"] strong, [class*="stat-card"] .number {
  display: inline-block;
  animation: stat-count-in .45s cubic-bezier(.16,1,.3,1) both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. RESPONSIVE GRID UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grid       { display: grid; gap: 1rem; }
.grid-2     { grid-template-columns: repeat(2, 1fr); }
.grid-3     { grid-template-columns: repeat(3, 1fr); }
.grid-4     { grid-template-columns: repeat(4, 1fr); }
.grid-auto  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Flex utilities */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }   .gap-6 { gap: 1.5rem; }

/* Text utilities */
.text-sm    { font-size: .8rem; }
.text-xs    { font-size: .7rem; }
.text-lg    { font-size: 1.05rem; }
.text-bold  { font-weight: 700; }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing shorthands */
.mt-0 { margin-top: 0; }     .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .25rem; } .mb-1 { margin-bottom: .25rem; }
.mt-2 { margin-top: .5rem; }  .mb-2 { margin-bottom: .5rem; }
.mt-3 { margin-top: .75rem; } .mb-3 { margin-bottom: .75rem; }
.mt-4 { margin-top: 1rem; }   .mb-4 { margin-bottom: 1rem; }
.mt-6 { margin-top: 1.5rem; } .mb-6 { margin-bottom: 1.5rem; }
.p-0  { padding: 0; }
.p-3  { padding: .75rem; }
.p-4  { padding: 1rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. TOPBAR — ultra-compact at ≤ 480px
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
  /* Hide command palette pill on tiny phones to save space */
  .cpal-trigger { display: none; }
  /* Breadcrumb: show only current page */
  .breadcrumbs a,
  .breadcrumbs__sep:not(:last-of-type) { display: none; }
  /* User name: hide on tiny screens, show only avatar */
  .topbar__user-name { display: none; }
  /* Tighter icon spacing */
  .topbar__actions { gap: .2rem; }
  /* Watchlist & keyboard-shortcut btn: hide on xs */
  .topbar__actions > a[title="My Watchlist"],
  .topbar__actions > button[onclick*="Shortcuts"] { display: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. DARK MODE — extra depth
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .modal {
  background: #0f1a2e;
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .modal__header,
[data-theme="dark"] .modal__footer { background: rgba(255,255,255,.03); }

[data-theme="dark"] .pagination__btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--text-muted);
}
[data-theme="dark"] .pagination__btn:hover {
  background: rgba(255,255,255,.1); color: var(--text);
}

[data-theme="dark"] .progress { background: rgba(255,255,255,.06); }

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
}

[data-theme="dark"] .input-group {
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .input-group__addon {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .toast {
  background: #0f1a2e;
  border-color: rgba(255,255,255,.09);
}

/* Sidebar link icon in dark — slightly brighter */
[data-theme="dark"] .sidebar__link:hover .icon {
  background: rgba(255,255,255,.12);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. TV & WIDE (≥ 1920px) — content max-width + enlarged targets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1920px) {
  .main { padding: 1.75rem 2rem calc(var(--bn-h, 64px) + 2rem); }
  .card { border-radius: 16px; }
  .btn  { min-height: 48px; font-size: .95rem; border-radius: 9px; }
  .form-control, .form-select { min-height: 48px; font-size: .95rem; }
  .table th, .table td { padding: .85rem 1.1rem; font-size: .9rem; }
  .pagination__btn { min-width: 42px; height: 42px; font-size: .88rem; }
  /* Content area max-width on very wide monitors */
  .main > .container, .main > .page-inner {
    max-width: 1400px; margin: 0 auto;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. SKIP LINK (accessibility)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skip-link {
  position: fixed; top: -100%; left: 1rem;
  background: var(--brand); color: #fff;
  padding: .6rem 1.2rem; border-radius: 0 0 8px 8px;
  font-size: .85rem; font-weight: 600; z-index: 9999;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. REDUCED MOTION ADDITIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .progress__bar::after        { animation: none; }
  .bottom-nav__item--emi .bottom-nav__icon { animation: none; }
  .sidebar__group-body         { animation: none; }
  .toast                       { animation: none; }
  .modal, .modal-overlay       { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Enhancement v11 — Page-specific premium components
   Dashboard stat cards · Plot cards · Table defaults · Nav-tabs ·
   Auth pages · Row grid · Avatar · Referral tree · Badge scores ·
   Watchlist btn · Hero gradient cards · Inline-style extraction
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. ROW GRID UTILITIES (.row, .row-2, .row-3, .row-4)
      Used heavily across all views — must be mobile-aware
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .row-2 { grid-template-columns: repeat(2, 1fr); }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .row-3 { grid-template-columns: repeat(2, 1fr); }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. DASHBOARD STAT CARDS (.card.stat)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card.stat {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.card.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--brand-rgb), .2);
}
.card.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--stat-accent, var(--brand)), var(--stat-accent2, #7c3aed));
}
/* Dashboard stat card children */
.stat__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: linear-gradient(135deg,
    rgba(var(--stat-rgb, 37,99,235), .15),
    rgba(var(--stat-rgb, 37,99,235), .06));
  box-shadow: 0 2px 8px rgba(var(--stat-rgb, 37,99,235), .12);
  margin-bottom: .65rem;
}
.stat__value {
  font-size: 1.6rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: var(--text);
}
.stat__label {
  font-size: .78rem; color: var(--text-muted); font-weight: 500;
  margin-top: .2rem;
}
.stat__delta {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 99px; margin-top: .45rem;
}
.stat__delta--up {
  background: rgba(22,163,74,.12); color: #16a34a;
}
.stat__delta--down {
  background: rgba(220,38,38,.12); color: #dc2626;
}
.stat__delta--neutral {
  background: rgba(90,106,126,.1); color: var(--text-muted);
}

/* Preset accent colours for 6 stat cards */
.card.stat:nth-child(1) { --stat-accent: #2563eb; --stat-accent2: #4f46e5; --stat-rgb: 37,99,235; }
.card.stat:nth-child(2) { --stat-accent: #059669; --stat-accent2: #0d9488; --stat-rgb: 5,150,105; }
.card.stat:nth-child(3) { --stat-accent: #d97706; --stat-accent2: #f59e0b; --stat-rgb: 217,119,6; }
.card.stat:nth-child(4) { --stat-accent: #7c3aed; --stat-accent2: #a855f7; --stat-rgb: 124,58,237; }
.card.stat:nth-child(5) { --stat-accent: #e11d48; --stat-accent2: #f43f5e; --stat-rgb: 225,29,72; }
.card.stat:nth-child(6) { --stat-accent: #0891b2; --stat-accent2: #06b6d4; --stat-rgb: 8,145,178; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. STAT-CARD BODY FIX (plots page inline style extraction)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat-card .card__body {
  text-align: center; padding: .75rem; display: flex;
  flex-direction: column; align-items: center; gap: .25rem;
}
.stat-card .card__body > strong,
.stat-card .card__body > .number {
  font-size: 1.35rem; font-weight: 800; line-height: 1.1;
  display: block;
}
.stat-card .card__body > small,
.stat-card .card__body > .label {
  font-size: .72rem; color: var(--text-muted);
  font-weight: 500; white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. TABLE DEFAULTS — bare <table class="w-100">
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
table.w-100, .table {
  width: 100%; border-collapse: collapse;
  font-size: .875rem;
}
table.w-100 th, .table th {
  padding: .6rem .75rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  border-bottom: 2px solid var(--border); text-align: left;
  white-space: nowrap; background: var(--bg-muted);
}
table.w-100 td, .table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text);
}
table.w-100 tr:last-child td, .table tr:last-child td { border-bottom: none; }
table.w-100 tbody tr:hover td, .table tbody tr:hover td {
  background: rgba(var(--brand-rgb, 37,99,235), .03);
}

/* Table sub-label (plot code secondary text) */
table.w-100 td small,
.table td small {
  display: block; font-size: .72rem; color: var(--text-muted); margin-top: .1rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. NAV TABS (.nav-tabs used on profile, plots, etc.)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.1rem; font-size: .84rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  cursor: pointer; background: none; border-top: none;
  border-left: none; border-right: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-tab:hover { color: var(--text); border-bottom-color: rgba(var(--brand-rgb), .3); }
.nav-tab.is-active {
  color: var(--brand); border-bottom-color: var(--brand); font-weight: 700;
}
.nav-tab svg { flex-shrink: 0; }
@media (max-width: 480px) {
  .nav-tab { padding: .65rem .85rem; font-size: .8rem; }
}

/* Tab panel */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. AUTH PAGES — login, register, forgot password
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(37,99,235,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(124,58,237,.09) 0%, transparent 60%),
    var(--bg, #f4f7fb);
  padding: 1rem;
  position: relative; overflow: hidden;
}
.auth-shell::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(37,99,235,.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.auth-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 54px; padding: 0 1.25rem;
  display: flex; align-items: center;
  background: var(--glass-bg, rgba(255,255,255,.8));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.auth-topbar__back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none;
  transition: color .15s, gap .18s;
}
.auth-topbar__back:hover { color: var(--brand); gap: .55rem; text-decoration: none; }

.auth-card {
  width: min(420px, 100%);
  margin-top: 54px;
  animation: auth-card-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes auth-card-in {
  from { opacity: .4; transform: translateY(16px) scale(.97); }
  to   { opacity:  1; transform: translateY(0)    scale(1); }
}
.auth-card .card__body { padding: 1.75rem; }

.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem; text-align: center;
}
.auth-brand .logo {
  width: 52px; height: 52px; font-size: 1.4rem;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 4px 18px rgba(37,99,235,.4),
              0 0 0 4px rgba(37,99,235,.12);
}
.auth-brand__name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.auth-brand__tagline { font-size: .78rem; color: var(--text-muted); }

.btn-auth-submit {
  background: var(--grad-brand, linear-gradient(135deg,#2563eb,#4f46e5));
  color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  border: none; border-radius: var(--radius, 10px); cursor: pointer;
  width: 100%; padding: .85rem; min-height: 50px;
  box-shadow: 0 4px 18px rgba(37,99,235,.35), 0 1px 3px rgba(37,99,235,.25);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  position: relative; overflow: hidden;
}
.btn-auth-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  pointer-events: none;
}
.btn-auth-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.45); }
.btn-auth-submit:active { transform: scale(.97); }

[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(37,99,235,.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(124,58,237,.12) 0%, transparent 60%),
    #080d1a;
}
[data-theme="dark"] .auth-topbar {
  background: rgba(8,13,26,.88);
  border-bottom-color: rgba(255,255,255,.06);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. PLOT CARD ENHANCED (.plot-card-enhanced)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.plot-card-enhanced {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s;
}
.plot-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--brand-rgb, 37,99,235), .25);
}
.plot-card-enhanced:active { transform: scale(.985); }

/* Infra progress bar (replaces heavy inline styles) */
.infra-bar {
  height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--bg-muted, #f1f5f9); margin: .45rem 0 .6rem;
}
.infra-bar__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.infra-bar__fill[data-score="high"]   { background: linear-gradient(90deg, #059669, #0d9488); }
.infra-bar__fill[data-score="medium"] { background: linear-gradient(90deg, #d97706, #f59e0b); }
.infra-bar__fill[data-score="low"]    { background: linear-gradient(90deg, #dc2626, #f87171); }

/* Watchlist star button */
.watchlist-btn {
  position: absolute; top: .65rem; right: .65rem;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text-faint);
  transition: background .15s, transform .22s cubic-bezier(.34,1.56,.64,1),
              color .15s, box-shadow .15s;
  z-index: 2;
}
.watchlist-btn:hover {
  transform: scale(1.14) rotate(8deg);
  color: #f59e0b; background: rgba(255,255,255,.97);
  box-shadow: 0 4px 14px rgba(245,158,11,.25);
}
.watchlist-btn.is-saved {
  color: #f59e0b;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
}
[data-theme="dark"] .watchlist-btn {
  background: rgba(15,22,37,.85);
  border-color: rgba(255,255,255,.12);
}

/* Appreciation badge */
.appreciation-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 99px;
}
.appreciation-badge--up   { background: rgba(22,163,74,.12); color: #16a34a; }
.appreciation-badge--down { background: rgba(220,38,38,.12); color: #dc2626; }

/* Infrastructure score badges */
.badge-score {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700;
  padding: .18rem .55rem; border-radius: 6px;
}
.badge-score--high   { background: rgba(5,150,105,.12);  color: #059669; }
.badge-score--medium { background: rgba(217,119,6,.12);  color: #d97706; }
.badge-score--low    { background: rgba(220,38,38,.12);  color: #dc2626; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. BULK ACTION BAR — plots selection state
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bulk-action-bar {
  display: none; /* shown by JS via .is-visible */
  border: 1px solid rgba(var(--brand-rgb, 37,99,235), .3);
  background: rgba(var(--brand-rgb, 37,99,235), .05);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  align-items: center; gap: .75rem; flex-wrap: wrap;
  animation: bar-slide-in .25s cubic-bezier(.34,1.56,.64,1);
}
.bulk-action-bar.is-visible { display: flex; }
@keyframes bar-slide-in {
  from { opacity: .3; transform: translateY(-6px); }
  to   { opacity:  1; transform: translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. HERO GRADIENT CARD — referrals, dashboard CTA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card--hero {
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 37,99,235), .08) 0%,
    rgba(124,58,237, .05) 100%);
  border: 1px solid rgba(var(--brand-rgb, 37,99,235), .18);
  position: relative; overflow: hidden;
}
.card--hero::before {
  content: '';
  position: absolute; top: -40%; right: -20%;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--brand-rgb, 37,99,235), .1) 0%, transparent 70%);
  pointer-events: none;
}
.card--hero::after {
  content: '';
  position: absolute; bottom: -30%; left: -10%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,58,237, .07) 0%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .card--hero {
  background: linear-gradient(135deg,
    rgba(37,99,235, .12) 0%, rgba(124,58,237, .08) 100%);
  border-color: rgba(37,99,235, .22);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. PROFILE — avatar + section tabs
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  font-weight: 800; line-height: 1; flex-shrink: 0; text-transform: uppercase;
  background: linear-gradient(135deg, var(--brand, #2563eb), #7c3aed);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2), 0 4px 12px rgba(37,99,235,.25);
}
.avatar--sm  { width: 36px; height: 36px; font-size: .9rem; }
.avatar--md  { width: 48px; height: 48px; font-size: 1.1rem; }
.avatar--lg  { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar--xl  { width: 80px; height: 80px; font-size: 1.75rem; }
.avatar--2xl { width: 96px; height: 96px; font-size: 2rem; }

/* Avatar with role badge */
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-wrap .role-badge {
  position: absolute; bottom: 0; right: -4px;
  background: var(--brand); color: #fff;
  font-size: .6rem; font-weight: 700;
  padding: .08rem .35rem; border-radius: 99px;
  border: 2px solid var(--bg-elev, #fff);
  white-space: nowrap;
}

/* Profile header card */
.profile-header {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap;
}
.profile-header__info { flex: 1; min-width: 200px; }
.profile-header__name { font-size: 1.2rem; font-weight: 800; margin-bottom: .2rem; }
.profile-header__role {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--text-muted);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. REFERRAL TREE (.ref-tree)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ref-tree { list-style: none; padding: 0; margin: 0; }
.ref-tree__node {
  position: relative; padding-left: 1.5rem; margin-bottom: .35rem;
}
.ref-tree__node::before {
  content: '';
  position: absolute; left: 0; top: .85rem;
  width: 1rem; height: 2px; background: var(--border);
}
.ref-tree__node::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: .85rem;
  width: 2px; background: var(--border);
}
.ref-tree__node:last-child::after { display: none; }

.ref-tree__item {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: .55rem .75rem; border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
  cursor: default;
}
.ref-tree__item:hover { background: var(--bg-elev); border-color: rgba(var(--brand-rgb), .2); }

/* Level badge — colour by depth (uses inline style still, but class fallback) */
.ref-tree__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: .75rem; font-weight: 800; flex-shrink: 0; color: #fff;
}
.ref-tree__badge--1 { background: #2563eb; }
.ref-tree__badge--2 { background: #7c3aed; }
.ref-tree__badge--3 { background: #0ea5e9; }
.ref-tree__badge--4 { background: #059669; }
.ref-tree__badge--5 { background: #d97706; }

.ref-tree__name { font-size: .875rem; font-weight: 600; flex: 1; min-width: 120px; }
.ref-tree__meta { font-size: .74rem; color: var(--text-muted); }

[data-theme="dark"] .ref-tree__item {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .ref-tree__item:hover {
  background: rgba(255,255,255,.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. FLEX UTILITY CLASSES — replacing most inline d-flex usage
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-none        { display: none; }
.d-block       { display: block; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.align-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.w-100         { width: 100%; }
.min-w-0       { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-nowrap   { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.relative       { position: relative; }
.hidden         { display: none !important; }
.visible        { display: block !important; }

/* Margin shorthands (used extensively in views) */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.gap-0 { gap: 0; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.p-0   { padding: 0; }
.p-1   { padding: .25rem; }
.p-2   { padding: .5rem; }
.p-3   { padding: .75rem; }
.p-4   { padding: 1rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. FILTER BAR — plots advanced filter card
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .65rem;
}
@media (max-width: 480px) {
  .filter-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

/* View toggle (grid / table) */
.view-toggle {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.view-toggle__btn {
  padding: .35rem .65rem; font-size: .8rem; cursor: pointer;
  background: none; border: none; color: var(--text-muted);
  transition: background .12s, color .12s;
  display: inline-flex; align-items: center; gap: .3rem;
}
.view-toggle__btn.is-active {
  background: var(--brand); color: #fff;
}
.view-toggle__btn:hover:not(.is-active) { background: var(--bg-muted); color: var(--text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. TIMELINE COMPONENT — activity log, audit, collections
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item {
  display: flex; gap: 1rem; position: relative;
  padding-bottom: 1.1rem;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:not(:last-child)::before {
  content: '';
  position: absolute; left: 19px; top: 38px; bottom: 0; width: 2px;
  background: var(--border);
}
.timeline__dot {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  background: var(--bg-muted); border: 2px solid var(--border); z-index: 1;
}
.timeline__dot--brand   { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.25); color: var(--brand); }
.timeline__dot--success { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.25);  color: #16a34a; }
.timeline__dot--warning { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.25);  color: #d97706; }
.timeline__dot--danger  { background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.25);  color: #dc2626; }
.timeline__body { flex: 1; padding-top: .5rem; min-width: 0; }
.timeline__title { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.timeline__meta  { font-size: .74rem; color: var(--text-muted); margin-top: .18rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. KPI SPARKLINE CARD — small trend chart placeholder
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-card {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem; border-radius: var(--radius-lg);
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card__icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.kpi-card__body { flex: 1; min-width: 0; }
.kpi-card__value { font-size: 1.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.kpi-card__label { font-size: .74rem; color: var(--text-muted); margin-top: .1rem; }
.kpi-card__trend {
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .18rem;
  padding: .12rem .4rem; border-radius: 99px; margin-top: .3rem;
}
.kpi-card__trend--up   { background: rgba(22,163,74,.12); color: #16a34a; }
.kpi-card__trend--down { background: rgba(220,38,38,.12); color: #dc2626; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. SECTION DIVIDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-title {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem;
}
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. DETAIL GRID (2-col: main content + sidebar panel)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.detail-grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 1.5rem; align-items: start;
}
.detail-grid--wide { grid-template-columns: 1fr 360px; }
@media (max-width: 1024px) {
  .detail-grid, .detail-grid--wide { grid-template-columns: 1fr; }
}
.detail-sidebar { position: sticky; top: calc(var(--topbar-h, 62px) + 1rem); }
@media (max-width: 1024px) { .detail-sidebar { position: static; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. RESPONSIVE TABLE MOBILE STACK
       (activates when table has data-mobile="stack")
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
  table[data-mobile="stack"],
  .table--stack {
    display: block;
  }
  table[data-mobile="stack"] thead,
  .table--stack thead { display: none; }
  table[data-mobile="stack"] tbody,
  table[data-mobile="stack"] tr,
  .table--stack tbody,
  .table--stack tr { display: block; }
  table[data-mobile="stack"] tr,
  .table--stack tr {
    background: var(--bg-elev); border-radius: var(--radius);
    border: 1px solid var(--border); margin-bottom: .5rem;
    box-shadow: var(--shadow-xs); overflow: hidden;
  }
  table[data-mobile="stack"] td,
  .table--stack td {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .5rem; padding: .55rem .85rem;
    border-bottom: 1px solid var(--border); font-size: .84rem;
  }
  table[data-mobile="stack"] td:last-child,
  .table--stack td:last-child { border-bottom: none; }
  table[data-mobile="stack"] td::before,
  .table--stack td::before {
    content: attr(data-label);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted);
    flex-shrink: 0; min-width: 90px; padding-top: .05rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. MOBILE-NATIVE TOUCH STATES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* Cards tap feedback */
  .card--tapable:active { transform: scale(.987); }

  /* List rows tap feedback */
  .list-row {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent; cursor: pointer;
  }
  .list-row:active { background: var(--bg-muted); }
  .list-row:last-child { border-bottom: none; }

  /* Float action CTA bottom of screen */
  .mobile-cta {
    position: sticky; bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px) + .5rem);
    z-index: 43;
    padding: 0 1rem;
    pointer-events: none;
  }
  .mobile-cta .btn { pointer-events: auto; box-shadow: var(--shadow-lg); }

  /* Stats: ensure 2 per row minimum */
  .stat-cards-row .stat-card { min-width: calc(50% - .375rem); }

  /* Tighten card body on mobile */
  .card__body { padding: .9rem; }

  /* Row grid tighter on phone */
  .row { gap: .65rem; }

  /* Profile header stacks */
  .profile-header { flex-direction: column; align-items: flex-start; }
  .profile-header .avatar--xl { --size: 64px; width: 64px; height: 64px; font-size: 1.4rem; }

  /* Scrollable nav-tabs */
  .nav-tabs { padding-bottom: 2px; margin: 0 -.85rem; padding: 0 .85rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. DARK MODE — page-specific components
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .nav-tab          { color: var(--text-muted); }
[data-theme="dark"] .nav-tab.is-active { color: var(--sidebar-active-fg, #7daaff); border-bottom-color: var(--sidebar-active-fg, #7daaff); }
[data-theme="dark"] .nav-tab:hover    { color: rgba(255,255,255,.8); }

[data-theme="dark"] table.w-100 th,
[data-theme="dark"] .table th         { background: rgba(255,255,255,.03); }

[data-theme="dark"] .kpi-card         { background: var(--bg-elev); }

[data-theme="dark"] .bulk-action-bar  {
  background: rgba(37,99,235,.1);
  border-color: rgba(37,99,235,.25);
}

[data-theme="dark"] .timeline__item:not(:last-child)::before,
[data-theme="dark"] .ref-tree__node::before,
[data-theme="dark"] .ref-tree__node::after { background: rgba(255,255,255,.1); }

[data-theme="dark"] .view-toggle      { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .view-toggle__btn:hover:not(.is-active) { background: rgba(255,255,255,.06); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. REDUCED MOTION SAFETY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .card.stat,
  .plot-card-enhanced,
  .kpi-card,
  .watchlist-btn,
  .auth-card   { animation: none !important; transform: none !important; transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v1 — Premium mobile-native dashboard
   Greeting · Stat cards · Quick actions · Welcome · Permissions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Greeting header ─────────────────────────────────────────────── */
.db-greeting {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .85rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-xl, 22px);
  background: linear-gradient(135deg,
    rgba(37,99,235,.08) 0%,
    rgba(124,58,237,.05) 60%,
    rgba(5,150,105,.04) 100%);
  border: 1px solid rgba(37,99,235,.13);
  position: relative; overflow: hidden;
  animation: page-enter .4s cubic-bezier(.16,1,.3,1) both;
}
.db-greeting::before {
  content: '';
  position: absolute; top: -60px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 65%);
  pointer-events: none;
}
.db-greeting::after {
  content: '';
  position: absolute; bottom: -50px; left: 20%;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07) 0%, transparent 65%);
  pointer-events: none;
}

.db-greeting__left {
  display: flex; align-items: center; gap: .85rem; min-width: 0;
}
.db-greeting__avatar {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 4px 14px rgba(37,99,235,.38), 0 0 0 3px rgba(37,99,235,.15);
  letter-spacing: -.01em;
}
.db-greeting__text { min-width: 0; }
.db-greeting__hello {
  font-size: 1.15rem; font-weight: 800; margin: 0; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-greeting__sub {
  font-size: .78rem; color: var(--text-muted); margin: .2rem 0 0;
}
.db-greeting__actions {
  display: flex; gap: .5rem; flex-shrink: 0;
}

[data-theme="dark"] .db-greeting {
  background: linear-gradient(135deg,
    rgba(37,99,235,.14) 0%,
    rgba(124,58,237,.09) 60%,
    rgba(5,150,105,.07) 100%);
  border-color: rgba(37,99,235,.2);
}

/* ── Stat cards — icon + value + label + delta ───────────────────── */
.card.stat .card__body {
  display: flex; flex-direction: column; gap: .1rem;
  position: relative; overflow: hidden;
}
.card.stat .card__body::after {
  content: '';
  position: absolute; bottom: -18px; right: -12px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--stat-rgb,37,99,235),.1) 0%, transparent 65%);
  pointer-events: none;
}
.stat__icon {
  font-size: 1.35rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--stat-rgb,37,99,235),.15),
    rgba(var(--stat-rgb,37,99,235),.06));
  box-shadow: 0 2px 8px rgba(var(--stat-rgb,37,99,235),.12);
  margin-bottom: .5rem;
}
.stat__value {
  font-size: 1.65rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--stat-accent,var(--brand)), var(--stat-accent2,#7c3aed));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat__label {
  font-size: .74rem; color: var(--text-muted); font-weight: 600;
  margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em;
}
.stat__delta {
  margin-top: .45rem;
  font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .15rem .55rem; border-radius: 99px; align-self: flex-start;
}
.stat__delta--up      { background: rgba(22,163,74,.12);  color: #16a34a; }
.stat__delta--down    { background: rgba(220,38,38,.12);  color: #dc2626; }
.stat__delta--neutral { background: var(--bg-muted);       color: var(--text-muted); }

/* ── Quick actions grid ──────────────────────────────────────────── */
.db-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
@media (max-width: 900px)  { .db-quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .db-quick-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }
@media (min-width: 1400px) { .db-quick-grid { grid-template-columns: repeat(6, 1fr); } }

.db-quick-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition:
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s,
    border-color .22s;
  -webkit-tap-highlight-color: transparent;
}
.db-quick-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--qa-color, var(--brand));
  border-radius: 3px 3px 0 0;
}
.db-quick-card::after {
  content: '';
  position: absolute; bottom: -20px; right: -12px;
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--qa-rgb,37,99,235),.1) 0%, transparent 65%);
  pointer-events: none;
}
.db-quick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--qa-rgb,37,99,235),.28);
  text-decoration: none;
}
.db-quick-card:active { transform: scale(.96); box-shadow: var(--shadow-xs); }

.db-quick-card__icon {
  font-size: 1.5rem; line-height: 1;
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--qa-rgb,37,99,235),.14),
    rgba(var(--qa-rgb,37,99,235),.06));
  margin-bottom: .45rem;
}
.db-quick-card__label {
  font-size: .88rem; font-weight: 700; line-height: 1.2;
  color: var(--text);
}
.db-quick-card__sub {
  font-size: .72rem; color: var(--text-muted); line-height: 1.3;
}
.db-quick-card__arrow {
  position: absolute; bottom: .9rem; right: .9rem;
  color: rgba(var(--qa-rgb,37,99,235),.5);
  transition: transform .18s, color .18s;
}
.db-quick-card:hover .db-quick-card__arrow {
  transform: translateX(3px);
  color: var(--qa-color, var(--brand));
}

[data-theme="dark"] .db-quick-card {
  background: var(--bg-elev);
  border-color: var(--border);
}
[data-theme="dark"] .db-quick-card:hover { border-color: rgba(var(--qa-rgb,37,99,235),.35); }

/* ── Welcome card internals ──────────────────────────────────────── */
.db-welcome-row {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 0;
}
.db-welcome-avatar {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.2rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 3px 12px rgba(37,99,235,.3);
}
.db-welcome-info { min-width: 0; }
.db-welcome-info strong { font-size: .95rem; font-weight: 700; }
.db-welcome-info > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Next steps list */
.db-next-steps { display: flex; flex-direction: column; gap: .4rem; }
.db-next-step {
  display: flex; align-items: center; gap: .55rem;
  font-size: .83rem; font-weight: 500; color: var(--text-muted);
  padding: .45rem .65rem; border-radius: 9px;
  text-decoration: none;
  transition: background .14s, color .14s, padding-left .14s;
  border: 1px solid transparent;
}
.db-next-step:hover {
  background: rgba(var(--brand-rgb,37,99,235),.06);
  color: var(--brand);
  padding-left: .9rem;
  border-color: rgba(var(--brand-rgb,37,99,235),.15);
  text-decoration: none;
}
.db-next-step > span { font-size: 1rem; }
.db-next-step svg { margin-left: auto; flex-shrink: 0; opacity: .55; transition: opacity .14s, transform .18s; }
.db-next-step:hover svg { opacity: 1; transform: translateX(3px); }

/* ── Permissions card internals ──────────────────────────────────── */
.db-perm-count {
  font-size: .82rem; color: var(--text-muted); margin-bottom: .75rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--border);
}
.db-perm-count strong { font-size: 1.05rem; font-weight: 800; color: var(--brand); }
.db-perm-badges {
  display: flex; flex-wrap: wrap; gap: .35rem;
  max-height: 200px; overflow-y: auto;
  scrollbar-width: thin;
}
.db-perm-badge {
  font-size: .68rem; padding: .2rem .55rem; border-radius: 6px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--text-muted); font-weight: 600;
  transition: background .13s, color .13s, border-color .13s;
}
.db-perm-badge:hover {
  background: rgba(var(--brand-rgb,37,99,235),.1);
  color: var(--brand); border-color: rgba(var(--brand-rgb,37,99,235),.2);
}

/* ── MOBILE ≤ 767px ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .db-greeting {
    padding: 1rem;
    border-radius: 16px;
    margin-bottom: 1.1rem;
  }
  .db-greeting__hello { font-size: 1rem; }
  .db-greeting__avatar { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }
  .db-greeting__actions .btn { min-height: 36px; font-size: .78rem; padding: .35rem .7rem; }

  .stat__value { font-size: 1.35rem; }
  .stat__icon  { width: 38px; height: 38px; border-radius: 10px; font-size: 1.15rem; }

  .db-quick-grid { gap: .55rem; }
  .db-quick-card { padding: .85rem .85rem .9rem; }
  .db-quick-card__icon { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 9px; }
  .db-quick-card__label { font-size: .82rem; }
  .db-quick-card__sub   { font-size: .68rem; }
  .db-quick-card__arrow { display: none; }

  .db-welcome-avatar { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }
}

/* ── TABLET 768–1199px ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .db-quick-grid { grid-template-columns: repeat(3, 1fr); }
  .db-greeting__hello { font-size: 1.05rem; }
}

/* ── TV ≥ 1920px ─────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .db-greeting {
    padding: 1.75rem 2rem; border-radius: 28px; margin-bottom: 2rem;
  }
  .db-greeting__avatar { width: 66px; height: 66px; font-size: 1.6rem; border-radius: 20px; }
  .db-greeting__hello  { font-size: 1.4rem; }
  .db-quick-grid { gap: 1.1rem; }
  .db-quick-card { padding: 1.35rem 1.4rem 1.5rem; border-radius: 20px; }
  .db-quick-card__icon { width: 54px; height: 54px; font-size: 1.6rem; border-radius: 15px; }
  .db-quick-card__label { font-size: 1rem; }
  .db-quick-card__sub   { font-size: .82rem; }
  .stat__value { font-size: 2rem; }
  .stat__icon  { width: 54px; height: 54px; font-size: 1.55rem; }
}

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] .db-perm-badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: var(--text-muted);
}
[data-theme="dark"] .db-perm-badge:hover {
  background: rgba(37,99,235,.18);
  color: #7daaff; border-color: rgba(37,99,235,.3);
}
[data-theme="dark"] .db-next-step:hover {
  background: rgba(37,99,235,.1);
  color: #7daaff;
  border-color: rgba(37,99,235,.2);
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-greeting, .db-quick-card, .db-next-step { animation: none !important; transition: none !important; transform: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v2 — Mobile-native enhancements
   PWA banner · Swipeable stats · Sparkline · Donut · Health bars ·
   Profile completion · Animated counters · Live clock · Dark mode
   ═══════════════════════════════════════════════════════════════════ */

/* ── PWA install banner ──────────────────────────────────────────── */
.db-pwa-banner {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #fff; position: relative; overflow: hidden;
  animation: page-enter .4s cubic-bezier(.16,1,.3,1) both;
}
.db-pwa-banner::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.1); pointer-events: none;
}
.db-pwa-banner__icon { font-size: 1.6rem; flex-shrink: 0; }
.db-pwa-banner__text { flex: 1; min-width: 0; }
.db-pwa-banner__text strong { display: block; font-size: .9rem; font-weight: 700; }
.db-pwa-banner__text span   { font-size: .75rem; opacity: .85; }
.db-pwa-banner__btn {
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; padding: .4rem .9rem; border-radius: 8px;
  font-size: .8rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.db-pwa-banner__btn:hover { background: rgba(255,255,255,.32); }
.db-pwa-banner__close {
  background: none; border: none; color: rgba(255,255,255,.7);
  cursor: pointer; padding: .25rem; font-size: 1rem; flex-shrink: 0;
  transition: color .15s;
}
.db-pwa-banner__close:hover { color: #fff; }

/* ── Stat cards — swipeable horizontal scroll on mobile ─────────── */
.db-stats-scroll {
  margin-bottom: 1.5rem;
}
.db-stats-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}

/* Mobile: horizontal scroll with snap */
@media (max-width: 767px) {
  .db-stats-scroll { margin: 0 -.85rem 1.25rem; }
  .db-stats-track {
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .65rem;
    padding: .25rem .85rem .5rem;
  }
  .db-stats-track::-webkit-scrollbar { display: none; }
  .db-stat-card {
    flex: 0 0 72vw; max-width: 260px;
    scroll-snap-align: start;
  }
}

/* Tablet: 2-col */
@media (min-width: 768px) and (max-width: 1024px) {
  .db-stats-track { grid-template-columns: repeat(2, 1fr); }
}

/* Stat card body */
.db-stat-card .card__body {
  padding: 1.1rem 1.15rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
  position: relative; overflow: hidden;
}
.db-stat-card .card__body::after {
  content: '';
  position: absolute; bottom: -18px; right: -12px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--stat-rgb,37,99,235),.12) 0%, transparent 65%);
  pointer-events: none;
}

/* Stat icon with SVG */
.db-stat-card .stat__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--stat-rgb,37,99,235),.15),
    rgba(var(--stat-rgb,37,99,235),.05));
  box-shadow: 0 2px 8px rgba(var(--stat-rgb,37,99,235),.12);
  margin-bottom: .55rem; color: var(--stat-accent, var(--brand));
}
.db-stat-card .stat__value {
  font-size: 1.65rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em;
  background: linear-gradient(135deg,
    var(--stat-accent, var(--brand)),
    var(--stat-accent2, #7c3aed));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db-stat-card .stat__label {
  font-size: .72rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem;
}
.db-stat-card .stat__delta {
  margin-top: .4rem; font-size: .69rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .14rem .5rem; border-radius: 99px; align-self: flex-start;
}

/* Scroll dots */
.db-stats-dots {
  display: none;
  justify-content: center; gap: .4rem; margin-top: .45rem;
}
@media (max-width: 767px) { .db-stats-dots { display: flex; } }
.db-stats-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-strong);
  transition: background .2s, transform .2s cubic-bezier(.34,1.56,.64,1), width .2s;
}
.db-stats-dot.is-active {
  background: var(--brand); width: 18px; border-radius: 99px; transform: none;
}

/* ── Chart cards ─────────────────────────────────────────────────── */
.db-chart-card .card__header.db-chart-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
}
.db-chart-card__period {
  font-size: .72rem; color: var(--text-muted); font-weight: 500;
}
.db-chart-body {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem 1.1rem;
}

/* ── Sparkline bar chart ─────────────────────────────────────────── */
.db-sparkline {
  display: flex; align-items: flex-end; gap: 4px;
  height: 56px; padding: 0 2px;
}
.db-spark-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(37,99,235,.4) 100%);
  height: 0; /* animated in */
  transition: height .55s cubic-bezier(.16,1,.3,1);
  min-height: 4px;
  position: relative;
}
.db-spark-bar.is-visible {
  height: var(--bar-h, 50%);
}
.db-spark-bar:last-child {
  background: linear-gradient(180deg, #059669 0%, rgba(5,150,105,.4) 100%);
}
.db-spark-bar:hover::after {
  content: attr(aria-label);
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: var(--bg-elev);
  font-size: .65rem; padding: .15rem .4rem; border-radius: 4px;
  white-space: nowrap; pointer-events: none; z-index: 10;
}
.db-chart-footer {
  display: flex; align-items: baseline; gap: .45rem;
}
.db-chart-val {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand);
}
.db-chart-sub { font-size: .72rem; color: var(--text-muted); }

/* ── CSS Donut chart ─────────────────────────────────────────────── */
.db-donut {
  position: relative; width: 80px; height: 80px; flex-shrink: 0;
}
.db-donut__svg {
  width: 80px; height: 80px; transform: rotate(-90deg);
}
.db-donut__bg  { stroke: var(--bg-muted, #f1f5f9); }
.db-donut__fg  {
  stroke: #7c3aed;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .8s cubic-bezier(.16,1,.3,1) .2s;
}
.db-donut__fg.is-drawn {
  stroke-dasharray: var(--d-pct, 72) 100;
}
.db-donut__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #7c3aed;
}
.db-donut-legend { display: flex; flex-direction: column; gap: .4rem; }
.db-donut-leg {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: var(--text-muted);
}
.db-donut-leg span {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block;
}

/* ── Platform health rows ────────────────────────────────────────── */
.db-health-row { margin-bottom: .1rem; }
.db-health-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-muted); font-weight: 500;
  margin-bottom: .2rem;
}
.db-health-label strong { font-weight: 800; }

/* ── Profile completion ──────────────────────────────────────────── */
.db-prof-hd {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.db-prof-completion { margin-top: .25rem; }
.db-prof-completion__label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-muted); margin-bottom: .35rem;
}
.db-prof-completion__label strong { font-weight: 800; color: var(--brand); }
.db-prof-fields {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem;
}
.db-prof-field {
  font-size: .68rem; padding: .2rem .5rem; border-radius: 6px;
  font-weight: 600; border: 1px solid var(--border);
  background: var(--bg-muted); color: var(--text-faint);
  transition: all .15s;
}
.db-prof-field.is-done {
  background: rgba(22,163,74,.1);
  border-color: rgba(22,163,74,.25);
  color: #16a34a;
}

/* ── Next-steps list ─────────────────────────────────────────────── */
.db-next-steps { display: flex; flex-direction: column; gap: .3rem; }
.db-next-step {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 500; color: var(--text-muted);
  padding: .5rem .65rem; border-radius: 9px; text-decoration: none;
  border: 1px solid transparent;
  transition: background .13s, color .13s, padding-left .15s, border-color .13s;
  -webkit-tap-highlight-color: transparent;
}
.db-next-step:hover {
  background: rgba(var(--brand-rgb,37,99,235),.06);
  color: var(--brand); padding-left: .9rem;
  border-color: rgba(var(--brand-rgb,37,99,235),.15);
  text-decoration: none;
}
.db-next-step:active { transform: scale(.98); }
.db-next-step__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.db-next-step svg { margin-left: auto; flex-shrink: 0; opacity: .45; transition: opacity .13s, transform .18s; }
.db-next-step:hover svg { opacity: 1; transform: translateX(3px); }

/* ── Greeting sep ────────────────────────────────────────────────── */
.db-greeting__sep { margin: 0 .3rem; opacity: .4; }

/* ── Mobile overrides ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .db-pwa-banner { border-radius: 14px; padding: .7rem .9rem; }
  .db-pwa-banner__text strong { font-size: .83rem; }
  .db-pwa-banner__text span { font-size: .7rem; }

  .db-chart-body { padding: .85rem; }
  .db-sparkline  { height: 48px; }

  .db-donut { width: 64px; height: 64px; }
  .db-donut__svg { width: 64px; height: 64px; }
  .db-donut__label { font-size: .68rem; }

  .db-next-step { font-size: .8rem; padding: .55rem .65rem; }
  .db-prof-hd { gap: .65rem; }
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .db-sparkline { height: 52px; }
}

/* ── TV ──────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .db-sparkline  { height: 80px; }
  .db-donut { width: 100px; height: 100px; }
  .db-donut__svg { width: 100px; height: 100px; }
  .db-donut__label { font-size: .88rem; }
  .db-chart-val  { font-size: 1.35rem; }
}

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] .db-pwa-banner {
  background: linear-gradient(135deg, #1d4ed8 0%, #3730a3 100%);
}
[data-theme="dark"] .db-donut__bg { stroke: rgba(255,255,255,.08); }
[data-theme="dark"] .db-spark-bar {
  background: linear-gradient(180deg, #3b82f6 0%, rgba(59,130,246,.3) 100%);
}
[data-theme="dark"] .db-spark-bar:last-child {
  background: linear-gradient(180deg, #10b981 0%, rgba(16,185,129,.3) 100%);
}
[data-theme="dark"] .db-prof-field { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .db-prof-field.is-done {
  background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.3);
}
[data-theme="dark"] .db-next-step:hover {
  background: rgba(37,99,235,.12);
  color: #7daaff; border-color: rgba(37,99,235,.25);
}
[data-theme="dark"] .db-stats-dot { background: rgba(255,255,255,.15); }
[data-theme="dark"] .db-stats-dot.is-active { background: var(--brand); }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-spark-bar { transition: none; }
  .db-donut__fg { transition: none; }
  .db-pwa-banner { animation: none; }
  .db-stats-dot { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v3 — Smart Card View Design
   Glass base · Ring icons · Inline sparklines · Ripple touch ·
   Activity feed · Insight cards · Goal rings · Area chart
   ═══════════════════════════════════════════════════════════════════ */

/* ── Smart card base ─────────────────────────────────────────────── */
.db-smart-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl, 22px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 3px rgba(0,0,0,.055),
    0 4px 16px rgba(0,0,0,.045),
    inset 0 1px 0 rgba(255,255,255,.65);
  transition:
    transform .28s cubic-bezier(.34,1.56,.64,1),
    box-shadow .28s, border-color .22s;
  -webkit-tap-highlight-color: transparent;
}
/* Sheen scan-line on hover */
.db-smart-card::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform: skewX(-15deg); pointer-events: none;
  transition: left 0s;
}
.db-smart-card:hover::before { left: 155%; transition: left .6s ease; }

/* Touch ripple */
.db-smart-card .db-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(var(--stat-rgb,37,99,235),.16);
  transform: scale(0); animation: db-ripple-out .6s ease-out forwards;
}
@keyframes db-ripple-out { to { transform: scale(4); opacity: 0; } }

/* ── KPI Card ────────────────────────────────────────────────────── */
.db-kpi-card {
  display: flex; flex-direction: column;
  padding: 1.2rem 1.25rem 1.05rem;
  cursor: pointer;
}
.db-kpi-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--stat-accent, var(--brand)),
    var(--stat-accent2, #7c3aed));
  border-radius: 22px 22px 0 0;
}
.db-kpi-card:hover {
  transform: translateY(-5px) scale(1.013);
  box-shadow:
    0 10px 36px rgba(var(--stat-rgb,37,99,235),.16),
    0 2px 8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
  border-color: rgba(var(--stat-rgb,37,99,235),.28);
}
.db-kpi-card:active { transform: scale(.97); transition-duration: .1s; }

/* Ring icon */
.db-kpi-ring {
  position: relative; width: 54px; height: 54px; flex-shrink: 0;
  margin-bottom: .8rem;
}
.db-kpi-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.db-kpi-ring__bg {
  fill: none;
  stroke: rgba(var(--stat-rgb,37,99,235),.12);
  stroke-width: 3;
}
.db-kpi-ring__fg {
  fill: none;
  stroke: var(--stat-accent, var(--brand));
  stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .2s;
}
.db-kpi-ring__fg.is-drawn { stroke-dasharray: var(--ring-pct, 70) 100; }
.db-kpi-ring__icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--stat-accent, var(--brand));
}

/* Value & label */
.db-kpi-value {
  font-size: 1.85rem; font-weight: 900; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg,
    var(--stat-accent, var(--brand)),
    var(--stat-accent2, #7c3aed));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .18rem;
}
.db-kpi-label {
  font-size: .69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.db-kpi-delta {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .68rem; font-weight: 700;
  padding: .13rem .48rem; border-radius: 99px;
  margin-top: .5rem; align-self: flex-start;
}
.db-kpi-delta--up   { background: rgba(22,163,74,.12);  color: #16a34a; }
.db-kpi-delta--down { background: rgba(220,38,38,.12);  color: #dc2626; }
.db-kpi-delta--flat { background: var(--bg-muted);       color: var(--text-muted); }

/* Mini sparkline inside KPI card */
.db-kpi-spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 26px; margin-top: auto; padding-top: .7rem;
}
.db-kpi-spark-bar {
  flex: 1; border-radius: 2px 2px 0 0;
  background: rgba(var(--stat-rgb,37,99,235),.18);
  height: 0; transition: height .5s cubic-bezier(.16,1,.3,1);
}
.db-kpi-spark-bar.is-current { background: var(--stat-accent, var(--brand)); }
.db-kpi-spark-bar.is-vis     { height: var(--bar-h, 50%); }

/* ── KPI 4-col grid ──────────────────────────────────────────────── */
.db-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .9rem; margin-bottom: .5rem;
}
@media (max-width: 767px) {
  .db-kpi-grid {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: .7rem;
    margin: 0 -.85rem .5rem; padding: .3rem .85rem .55rem;
  }
  .db-kpi-grid::-webkit-scrollbar { display: none; }
  .db-kpi-grid .db-smart-card {
    flex: 0 0 74vw; max-width: 250px; scroll-snap-align: start;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* KPI scroll dots (mobile) */
.db-kpi-dots {
  display: none; justify-content: center; gap: .4rem; margin-bottom: 1.25rem;
}
@media (max-width: 767px) { .db-kpi-dots { display: flex; } }
.db-kpi-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
  transition: width .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.db-kpi-dot.is-active { background: var(--brand); width: 18px; border-radius: 99px; }

/* ── Section header with accent bar ─────────────────────────────── */
.db-sec-hd {
  display: flex; align-items: center; justify-content: space-between;
}
.db-sec-hd__title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted);
  display: flex; align-items: center; gap: .5rem;
}
.db-sec-hd__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), #7c3aed);
}
.db-sec-hd__link {
  font-size: .74rem; font-weight: 600; color: var(--brand);
  text-decoration: none; transition: opacity .14s;
}
.db-sec-hd__link:hover { opacity: .72; text-decoration: none; }

/* ── Insight row (3 col) ─────────────────────────────────────────── */
.db-insight-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .9rem; margin-bottom: 1.5rem;
}
@media (max-width: 767px) { .db-insight-row { grid-template-columns: 1fr; gap: .65rem; } }
@media (min-width: 768px) and (max-width: 1024px) {
  .db-insight-row { grid-template-columns: 1fr 1fr; }
}

/* Insight card — colored left-border accent */
.db-insight-card {
  padding: 1.15rem 1.2rem;
  border-left: 4px solid var(--ins-color, var(--brand)) !important;
}
.db-insight-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.db-insight-card__title {
  font-size: .73rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ins-color, var(--brand));
}
.db-insight-card__period { font-size: .67rem; color: var(--text-muted); font-weight: 500; }
.db-insight-main {
  font-size: 1.6rem; font-weight: 900; line-height: 1; letter-spacing: -.025em;
  margin-bottom: .28rem;
}
.db-insight-sub { font-size: .74rem; color: var(--text-muted); line-height: 1.45; }
.db-insight-chip {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .68rem; font-weight: 700;
  padding: .13rem .45rem; border-radius: 99px; margin-top: .5rem;
}

/* SVG area chart */
.db-area-chart { height: 52px; margin: .5rem 0 .35rem; position: relative; overflow: hidden; }
.db-area-svg   { width: 100%; height: 52px; display: block; }

/* Goal ring set */
.db-goal-rings { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.db-goal-ring  { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.db-goal-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.db-goal-ring__bg  { fill: none; stroke: var(--bg-muted); stroke-width: 5; }
.db-goal-ring__fg  {
  fill: none; stroke: var(--ring-color, var(--brand)); stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .35s;
}
.db-goal-ring__fg.is-drawn { stroke-dasharray: var(--ring-pct, 60) 100; }
.db-goal-ring__lbl {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.db-goal-ring__pct  { font-size: .72rem; font-weight: 900; color: var(--ring-color, var(--brand)); line-height: 1; }
.db-goal-ring__name { font-size: .5rem; color: var(--text-muted); font-weight: 700; margin-top: .06rem; letter-spacing: .04em; text-transform: uppercase; }

/* ── Activity feed card ──────────────────────────────────────────── */
.db-activity-card { padding: 0; }
.db-activity-live-strip {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem; border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
}
.db-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex-shrink: 0;
  animation: db-live-pulse 1.8s ease-in-out infinite;
}
@keyframes db-live-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  50%     { opacity: .75; box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
.db-activity-list { list-style: none; margin: 0; padding: 0; }
.db-activity-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--border);
  transition: background .13s; -webkit-tap-highlight-color: transparent;
}
.db-activity-item:last-child { border-bottom: none; }
.db-activity-item:hover { background: var(--bg-muted); }
.db-act-dot {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.db-act-body { flex: 1; min-width: 0; }
.db-act-title {
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.db-act-meta { font-size: .69rem; color: var(--text-muted); margin-top: .08rem; }
.db-act-badge {
  flex-shrink: 0; font-size: .64rem; font-weight: 700;
  padding: .1rem .42rem; border-radius: 6px;
}

/* ── Activity + Quick Actions split row ──────────────────────────── */
.db-split-row {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: .9rem; margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .db-split-row { grid-template-columns: 1fr; } }

/* ── Quick Action v3 ─────────────────────────────────────────────── */
.db-qa3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
}
@media (max-width: 480px) { .db-qa3-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }

.db-qa3-card {
  display: flex; flex-direction: column; gap: .18rem;
  padding: 1.05rem 1rem 1rem;
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .22s;
  -webkit-tap-highlight-color: transparent;
}
.db-qa3-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(var(--qa-rgb,37,99,235),.08) 0%, transparent 65%);
  pointer-events: none;
}
.db-qa3-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(var(--qa-rgb,37,99,235),.15), var(--shadow-sm);
  border-color: rgba(var(--qa-rgb,37,99,235),.28);
  text-decoration: none;
}
.db-qa3-card:active { transform: scale(.96); }

.db-qa3-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: linear-gradient(135deg,
    rgba(var(--qa-rgb,37,99,235),.15),
    rgba(var(--qa-rgb,37,99,235),.06));
  color: var(--qa-color, var(--brand));
  margin-bottom: .3rem;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.db-qa3-card:hover .db-qa3-icon { transform: scale(1.1) rotate(-5deg); }
.db-qa3-label { font-size: .84rem; font-weight: 700; color: var(--text); }
.db-qa3-sub   { font-size: .69rem; color: var(--text-muted); line-height: 1.3; }
.db-qa3-arr {
  position: absolute; bottom: .78rem; right: .78rem;
  color: rgba(var(--qa-rgb,37,99,235),.3);
  opacity: 0; transition: opacity .18s, transform .18s, color .18s;
}
.db-qa3-card:hover .db-qa3-arr { opacity: 1; color: var(--qa-color); transform: translateX(2px); }

/* ── Mini stat row (health card) ─────────────────────────────────── */
.db-mini-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.db-mini-stat-row:last-child { border-bottom: none; }
.db-mini-stat-row__label { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.db-mini-stat-row__val   { font-size: .85rem; font-weight: 800; }

/* ── MOBILE ≤ 767px ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .db-kpi-value      { font-size: 1.65rem; }
  .db-kpi-ring       { width: 48px; height: 48px; }
  .db-kpi-ring svg   { width: 48px; height: 48px; }
  .db-smart-card     { border-radius: 18px; }
  .db-insight-card   { border-radius: 16px; }
  .db-activity-card  { border-radius: 16px; }
  .db-activity-item  { padding: .65rem 1rem; }
  .db-act-dot        { width: 34px; height: 34px; border-radius: 9px; font-size: .82rem; }
  .db-qa3-card       { padding: .9rem .85rem; border-radius: 14px; }
  .db-qa3-icon       { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
  .db-qa3-label      { font-size: .8rem; }
  .db-qa3-sub        { font-size: .66rem; }
  .db-qa3-arr        { display: none; }
  .db-goal-ring      { width: 56px; height: 56px; }
  .db-goal-ring svg  { width: 56px; height: 56px; }
  .db-insight-main   { font-size: 1.4rem; }
}

/* ── TABLET 768–1199px ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .db-kpi-value { font-size: 1.65rem; }
  .db-split-row { grid-template-columns: 1fr; }
}

/* ── TV ≥ 1920px ─────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .db-kpi-grid  { gap: 1.4rem; }
  .db-kpi-value { font-size: 2.1rem; }
  .db-kpi-ring, .db-kpi-ring svg { width: 66px; height: 66px; }
  .db-qa3-card  { padding: 1.35rem 1.3rem; border-radius: 20px; }
  .db-qa3-icon  { width: 54px; height: 54px; border-radius: 15px; }
  .db-qa3-label { font-size: .98rem; }
}

/* ── DARK MODE ───────────────────────────────────────────────────── */
[data-theme="dark"] .db-smart-card {
  box-shadow:
    0 1px 3px rgba(0,0,0,.22),
    0 4px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .db-kpi-card:hover {
  box-shadow:
    0 10px 36px rgba(var(--stat-rgb,37,99,235),.24),
    0 2px 8px rgba(0,0,0,.2);
}
[data-theme="dark"] .db-qa3-card:hover {
  box-shadow:
    0 8px 28px rgba(var(--qa-rgb,37,99,235),.2),
    0 2px 8px rgba(0,0,0,.18);
}
[data-theme="dark"] .db-live-dot { background: #34d399; }
[data-theme="dark"] .db-activity-live-strip { color: #34d399; }
[data-theme="dark"] .db-activity-item:hover { background: rgba(255,255,255,.04); }

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-smart-card::before { display: none; }
  .db-kpi-ring__fg, .db-goal-ring__fg, .db-kpi-spark-bar { transition: none !important; }
  .db-live-dot { animation: none; }
  .db-ripple   { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v4 — Smart Card Premium + Full Mobile-Native
   Tinted cards · Pull-to-refresh · FAB · Haptics · Stagger · Swipe
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. STRONGER SMART CARD BASE ─────────────────────────────────── */
.db-smart-card {
  box-shadow:
    0 2px 8px rgba(0,0,0,.08),
    0 8px 24px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  animation: db-card-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes db-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── 2. KPI CARD — COLORED GRADIENT TINT ────────────────────────── */
.db-kpi-card {
  background: linear-gradient(145deg,
    rgba(var(--stat-rgb,37,99,235),.12) 0%,
    rgba(var(--stat-rgb,37,99,235),.05) 45%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--stat-rgb,37,99,235),.2);
}
.db-kpi-card:hover {
  background: linear-gradient(145deg,
    rgba(var(--stat-rgb,37,99,235),.17) 0%,
    rgba(var(--stat-rgb,37,99,235),.08) 50%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--stat-rgb,37,99,235),.35);
}

/* Stagger KPI entrance */
.db-kpi-grid .db-smart-card:nth-child(1) { animation-delay: .04s; }
.db-kpi-grid .db-smart-card:nth-child(2) { animation-delay: .09s; }
.db-kpi-grid .db-smart-card:nth-child(3) { animation-delay: .14s; }
.db-kpi-grid .db-smart-card:nth-child(4) { animation-delay: .19s; }

/* Stagger insight entrance */
.db-insight-row .db-smart-card:nth-child(1) { animation-delay: .22s; }
.db-insight-row .db-smart-card:nth-child(2) { animation-delay: .28s; }
.db-insight-row .db-smart-card:nth-child(3) { animation-delay: .34s; }

/* ── 3. INSIGHT CARD — TINTED GRADIENT ───────────────────────────── */
.db-insight-card {
  background: linear-gradient(145deg,
    rgba(var(--ins-rgb,37,99,235),.09) 0%,
    rgba(var(--ins-rgb,37,99,235),.03) 50%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--ins-rgb,37,99,235),.18);
}

/* ── 4. QUICK ACTION CARD — SUBTLE TINT ─────────────────────────── */
.db-qa3-card {
  background: linear-gradient(145deg,
    rgba(var(--qa-rgb,37,99,235),.08) 0%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--qa-rgb,37,99,235),.15);
}
.db-qa3-card:hover {
  background: linear-gradient(145deg,
    rgba(var(--qa-rgb,37,99,235),.13) 0%,
    rgba(var(--qa-rgb,37,99,235),.04) 60%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--qa-rgb,37,99,235),.3);
}

/* ── 5. PULL-TO-REFRESH ──────────────────────────────────────────── */
.db-ptr-indicator {
  position: fixed; top: calc(var(--topbar-h, 62px)); left: 0; right: 0;
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg); z-index: 49;
  transition: height .18s ease;
  pointer-events: none;
}
.db-ptr-indicator.is-pulling { height: 52px; }
.db-ptr-indicator.is-ready   { color: var(--brand); }
.db-ptr-spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--brand);
}
.db-ptr-indicator.is-ready .db-ptr-spin { animation: db-ptr-rotate .7s linear infinite; }
@keyframes db-ptr-rotate { to { transform: rotate(360deg); } }

/* ── 6. MOBILE FAB ───────────────────────────────────────────────── */
.db-fab { display: none; }
@media (max-width: 767px) {
  .db-fab {
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    position: fixed;
    bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px) + .9rem);
    right: 1rem; z-index: 44;
    pointer-events: none;
  }
  .db-fab > * { pointer-events: auto; }
}
.db-fab__actions {
  display: flex; flex-direction: column; gap: .45rem; align-items: flex-end;
  transform-origin: bottom right;
  transform: scale(.75) translateY(16px);
  opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.db-fab.is-open .db-fab__actions {
  transform: scale(1) translateY(0);
  opacity: 1; pointer-events: auto;
}
.db-fab__action {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem .5rem .6rem;
  border-radius: 99px;
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: .81rem; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
}
.db-fab__action:active { transform: scale(.96); text-decoration: none; }
.db-fab__action:hover  { text-decoration: none; }
.db-fab__action-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
/* Stagger FAB items */
.db-fab.is-open .db-fab__actions .db-fab__action:nth-child(1) { transition-delay: .04s; }
.db-fab.is-open .db-fab__actions .db-fab__action:nth-child(2) { transition-delay: .08s; }
.db-fab.is-open .db-fab__actions .db-fab__action:nth-child(3) { transition-delay: .12s; }
.db-fab.is-open .db-fab__actions .db-fab__action:nth-child(4) { transition-delay: .16s; }

.db-fab__btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--grad-brand, linear-gradient(135deg,#2563eb,#4f46e5));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,99,235,.45), 0 2px 6px rgba(37,99,235,.28);
  color: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.db-fab__btn:active { transform: scale(.88); }
.db-fab.is-open .db-fab__btn { transform: rotate(45deg); }
.db-fab.is-open .db-fab__btn:active { transform: rotate(45deg) scale(.88); }

/* FAB backdrop */
.db-fab-backdrop {
  display: none; position: fixed; inset: 0; z-index: 43;
  background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: db-fade-in .18s ease;
}
@keyframes db-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 7. SMART CARD SWIPE HINT (mobile first visit) ───────────────── */
@keyframes db-swipe-hint {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-18px); }
  60%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.db-kpi-grid.play-hint { animation: db-swipe-hint .7s ease .9s 1 both; }

/* ── 8. STAT VALUE GRADIENT TEXT FIX (iOS Safari) ────────────────── */
.db-kpi-value {
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* Paint-order fallback for older browsers */
  color: var(--stat-accent, var(--brand));
}
@supports (-webkit-background-clip: text) {
  .db-kpi-value { color: transparent; }
}

/* ── 9. MOBILE LAYOUT FIXES ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* At 0-padding main, don't overflow-scroll with negative margin */
  .db-kpi-grid {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: .15rem !important; padding-right: .15rem !important;
  }
  .db-kpi-grid .db-smart-card { flex: 0 0 82vw; max-width: 280px; }
}
/* Tighten grid gap on small phones */
@media (max-width: 375px) {
  .db-qa3-grid { grid-template-columns: repeat(2, 1fr); gap: .45rem; }
  .db-qa3-card { padding: .8rem .75rem; }
}

/* ── 10. TOUCH ACTIVE STATES ─────────────────────────────────────── */
@media (pointer: coarse) {
  .db-kpi-card:active,
  .db-insight-card:active  { transform: scale(.975); transition-duration: .08s; }
  .db-qa3-card:active      { transform: scale(.96);  transition-duration: .08s; }
  .db-activity-item:active { background: var(--bg-muted); }
}

/* ── 11. STICKY SECTION HEADER ON MOBILE ────────────────────────── */
@media (max-width: 767px) {
  .db-sec-hd {
    position: sticky;
    top: calc(var(--topbar-h, 62px));
    z-index: 9;
    background: var(--bg);
    padding-top: .4rem; padding-bottom: .4rem;
    margin-left: -.05rem; margin-right: -.05rem;
  }
}

/* ── 12. DARK MODE OVERRIDES ─────────────────────────────────────── */
[data-theme="dark"] .db-smart-card {
  box-shadow:
    0 2px 8px rgba(0,0,0,.32),
    0 8px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .db-kpi-card {
  background: linear-gradient(145deg,
    rgba(var(--stat-rgb,37,99,235),.16) 0%,
    rgba(var(--stat-rgb,37,99,235),.07) 50%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--stat-rgb,37,99,235),.24);
}
[data-theme="dark"] .db-kpi-card:hover {
  background: linear-gradient(145deg,
    rgba(var(--stat-rgb,37,99,235),.22) 0%,
    rgba(var(--stat-rgb,37,99,235),.10) 55%,
    var(--bg-elev) 100%);
}
[data-theme="dark"] .db-insight-card {
  background: linear-gradient(145deg,
    rgba(var(--ins-rgb,37,99,235),.14) 0%,
    rgba(var(--ins-rgb,37,99,235),.05) 55%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--ins-rgb,37,99,235),.22);
}
[data-theme="dark"] .db-qa3-card {
  background: linear-gradient(145deg,
    rgba(var(--qa-rgb,37,99,235),.12) 0%,
    rgba(var(--qa-rgb,37,99,235),.04) 55%,
    var(--bg-elev) 100%);
  border-color: rgba(var(--qa-rgb,37,99,235),.18);
}
[data-theme="dark"] .db-fab__action {
  background: var(--bg-elev); border-color: var(--border-strong);
}

/* ── 13. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-smart-card { animation: none; }
  .db-ptr-spin   { animation: none; }
  .db-kpi-grid   { animation: none; }
  .db-fab__actions, .db-fab__btn { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v5 — Ultra Smart Modern
   Mesh bg · Glass cards · Status pills · Bottom sheet · Swipe dismiss
   Heatmap · Live badges · Scroll-compact · Odometer · Deep dark mode
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. GRADIENT MESH BACKGROUND ─────────────────────────────────── */
.main[data-page="dashboard"] {
  background:
    radial-gradient(ellipse 65% 40% at 8% 12%,  rgba(37,99,235,.11)  0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 88% 65%,  rgba(124,58,237,.08) 0%, transparent 52%),
    radial-gradient(ellipse 40% 50% at 50% 92%,  rgba(5,150,105,.07)  0%, transparent 50%),
    radial-gradient(ellipse 55% 35% at 70% 10%,  rgba(217,119,6,.05)  0%, transparent 50%),
    var(--bg);
  min-height: 100%;
}

/* ── 2. GLASSMORPHISM KPI CARDS ──────────────────────────────────── */
.db-kpi-card {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 4px 16px rgba(var(--stat-rgb,37,99,235),.1),
    0 1px 4px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.db-kpi-card:hover {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(var(--stat-rgb,37,99,235),.38) !important;
  box-shadow:
    0 10px 36px rgba(var(--stat-rgb,37,99,235),.18),
    0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* ── 3. GLASSMORPHISM INSIGHT & ACTIVITY CARDS ───────────────────── */
.db-insight-card {
  background: rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-color: rgba(255,255,255,.52) !important;
  border-left: 4px solid var(--ins-color, var(--brand)) !important;
}
.db-activity-card {
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  border-color: rgba(255,255,255,.5) !important;
}

/* ── 4. GREETING GLASS STRIP ─────────────────────────────────────── */
.db-greeting {
  background: linear-gradient(135deg,
    rgba(37,99,235,.1) 0%,
    rgba(124,58,237,.07) 50%,
    rgba(5,150,105,.05) 100%) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.4) !important;
}
.db-greeting__avatar {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #059669 100%) !important;
  animation: db-avatar-breathe 4s ease-in-out infinite;
}
@keyframes db-avatar-breathe {
  0%,100% { box-shadow: 0 4px 18px rgba(37,99,235,.4), 0 0 0 3px rgba(37,99,235,.15); }
  50%     { box-shadow: 0 6px 28px rgba(124,58,237,.45), 0 0 0 5px rgba(124,58,237,.12); }
}

/* Greeting compact on scroll */
.db-greeting.is-compact {
  padding: .65rem 1.1rem;
  margin-bottom: .85rem;
}
.db-greeting.is-compact .db-greeting__avatar { width: 38px; height: 38px; font-size: .95rem; border-radius: 10px; }
.db-greeting.is-compact .db-greeting__hello  { font-size: .92rem; }
.db-greeting.is-compact .db-greeting__sub    { display: none; }

/* ── 5. STATUS PILLS STRIP ───────────────────────────────────────── */
.db-status-strip {
  display: flex; gap: .45rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0 0 .3rem; margin: .5rem 0 1.4rem;
}
.db-status-strip::-webkit-scrollbar { display: none; }
.db-status-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap; flex-shrink: 0;
  padding: .3rem .75rem; border-radius: 99px;
  font-size: .71rem; font-weight: 600; border: 1px solid transparent;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: default; transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.db-status-pill:active { transform: scale(.94); }
.db-status-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; animation: db-dot-blink 2.4s ease-in-out infinite;
}
@keyframes db-dot-blink {
  0%,100% { opacity: 1; } 50% { opacity: .4; }
}
.db-status-pill--green  { background: rgba(22,163,74,.1);   color: #16a34a; border-color: rgba(22,163,74,.22); }
.db-status-pill--blue   { background: rgba(37,99,235,.1);   color: #2563eb; border-color: rgba(37,99,235,.22); }
.db-status-pill--amber  { background: rgba(217,119,6,.1);   color: #d97706; border-color: rgba(217,119,6,.22); }
.db-status-pill--purple { background: rgba(124,58,237,.1);  color: #7c3aed; border-color: rgba(124,58,237,.22); }
.db-status-pill--red    { background: rgba(220,38,38,.1);   color: #dc2626; border-color: rgba(220,38,38,.22); }

/* ── 6. LIVE BADGE ON SECTION HEADERS ───────────────────────────── */
.db-live-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 .35rem;
  border-radius: 99px; font-size: .62rem; font-weight: 800;
  background: var(--brand); color: #fff; line-height: 1;
  margin-left: .35rem; flex-shrink: 0;
  animation: db-badge-glow 2.6s ease-in-out infinite;
}
@keyframes db-badge-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); }
  50%     { box-shadow: 0 0 0 4px rgba(37,99,235,0); }
}

/* ── 7. BOTTOM SHEET ─────────────────────────────────────────────── */
.db-sheet-overlay {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none;
  transition: opacity .24s;
}
.db-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.db-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-elev);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 48px rgba(0,0,0,.18), 0 -2px 8px rgba(0,0,0,.1);
  transform: translateY(105%);
  transition: transform .44s cubic-bezier(.16,1,.3,1);
  max-height: 88vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  will-change: transform;
}
.db-sheet.is-open { transform: translateY(0); }
.db-sheet__drag { padding: .8rem; display: flex; justify-content: center; cursor: grab; }
.db-sheet__handle { width: 42px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.db-sheet__hd {
  padding: 0 1.3rem .9rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
}
.db-sheet__title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.db-sheet__close {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-muted); color: var(--text-muted); font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.db-sheet__close:hover { background: var(--border); }
.db-sheet__body {
  padding: 0 1.3rem 1.5rem;
  overflow-y: auto; max-height: 65vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Sheet KPI detail content */
.db-sheet-kpi {
  display: flex; flex-direction: column; gap: 1rem;
}
.db-sheet-kpi__value {
  font-size: 2.8rem; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--kv-c1,var(--brand)), var(--kv-c2,#7c3aed));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db-sheet-kpi__label { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.db-sheet-kpi__chart { height: 80px; }
.db-sheet-kpi__chart svg { width: 100%; height: 80px; }
.db-sheet-stats {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin-top: .25rem;
}
.db-sheet-stat {
  padding: .75rem; border-radius: 12px;
  background: var(--bg-muted); border: 1px solid var(--border);
}
.db-sheet-stat__val { font-size: 1.15rem; font-weight: 800; }
.db-sheet-stat__lbl { font-size: .68rem; color: var(--text-muted); font-weight: 600; margin-top: .1rem; }

/* ── 8. SWIPE-TO-DISMISS ACTIVITY ROW ────────────────────────────── */
.db-swipe-item { position: relative; overflow: hidden; }
.db-swipe-action {
  position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  background: rgba(220,38,38,.12); color: #dc2626;
  font-size: .68rem; font-weight: 700; opacity: 0;
  transition: opacity .1s; pointer-events: none;
  border-left: 1px solid rgba(220,38,38,.15);
}
.db-swipe-action svg { width: 16px; height: 16px; }
.db-swipe-content { background: transparent; position: relative; z-index: 1; }

/* ── 9. ACTIVITY HEATMAP (21-day grid) ───────────────────────────── */
.db-heatmap {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .28rem; margin: .5rem 0;
}
.db-heatmap__dot {
  aspect-ratio: 1; border-radius: 4px;
  background: linear-gradient(135deg,
    rgba(37,99,235, calc(.1 + var(--i,.5) * .9)),
    rgba(124,58,237, calc(.06 + var(--i,.5) * .65)));
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  cursor: default;
}
.db-heatmap__dot:hover {
  transform: scale(1.3) translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235, calc(.15 + var(--i,.5) * .35));
}

/* ── 10. REFRESH COUNTDOWN BADGE ─────────────────────────────────── */
.db-refresh-badge {
  display: none; align-items: center; gap: .3rem;
  font-size: .65rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; padding: .2rem .55rem; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: background .13s;
  -webkit-tap-highlight-color: transparent;
}
.db-refresh-badge:hover { background: var(--bg-muted); }
@media (max-width: 767px) { .db-refresh-badge { display: inline-flex; } }
.db-refresh-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); border-top-color: var(--brand);
}
.db-refresh-badge.is-spinning .db-refresh-spin { animation: db-ptr-rotate .7s linear infinite; }

/* ── 11. QUICK ACTION V3 ICON BOUNCE ─────────────────────────────── */
.db-qa3-card:active .db-qa3-icon { animation: db-icon-bounce .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes db-icon-bounce {
  0%  { transform: scale(1); }
  40% { transform: scale(.82) rotate(-8deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* ── 12. SMOOTH NUMBER SCROLL (odometer) ─────────────────────────── */
.db-kpi-value { overflow: hidden; }

/* ── 13. CONTEXTUAL GLOW ON KPI CARD FOCUS ───────────────────────── */
.db-kpi-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--stat-rgb,37,99,235),.35),
    0 8px 32px rgba(var(--stat-rgb,37,99,235),.18) !important;
}

/* ── 14. SECTION TITLE WITH GRADIENT ACCENT ──────────────────────── */
.db-sec-hd__title::before {
  background: linear-gradient(180deg,
    var(--brand,#2563eb) 0%, #7c3aed 60%, #059669 100%) !important;
}

/* ── 15. MINI CHART CURSOR TOOLTIP ──────────────────────────────── */
.db-kpi-spark { cursor: crosshair; }
.db-kpi-spark-bar:hover { filter: brightness(1.25); }

/* ── 16. DARK MODE ───────────────────────────────────────────────── */
[data-theme="dark"] .main[data-page="dashboard"] {
  background:
    radial-gradient(ellipse 65% 40% at 8% 12%,  rgba(37,99,235,.15)  0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 88% 65%,  rgba(124,58,237,.12) 0%, transparent 52%),
    radial-gradient(ellipse 40% 50% at 50% 92%,  rgba(5,150,105,.1)   0%, transparent 50%),
    radial-gradient(ellipse 55% 35% at 70% 10%,  rgba(217,119,6,.07)  0%, transparent 50%),
    var(--bg);
}
[data-theme="dark"] .db-kpi-card {
  background: rgba(12,18,34,.82) !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 4px 16px rgba(var(--stat-rgb,37,99,235),.16),
    0 1px 4px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .db-kpi-card:hover {
  background: rgba(18,28,52,.88) !important;
  border-color: rgba(var(--stat-rgb,37,99,235),.32) !important;
  box-shadow:
    0 10px 36px rgba(var(--stat-rgb,37,99,235),.26),
    0 2px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .db-insight-card {
  background: rgba(12,18,34,.78) !important;
  border-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .db-activity-card {
  background: rgba(12,18,34,.85) !important;
  border-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .db-greeting {
  background: linear-gradient(135deg,
    rgba(37,99,235,.14) 0%, rgba(124,58,237,.1) 50%, rgba(5,150,105,.08) 100%) !important;
  border-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .db-status-pill--green  { background: rgba(22,163,74,.15);  border-color: rgba(22,163,74,.25); }
[data-theme="dark"] .db-status-pill--blue   { background: rgba(37,99,235,.15);  border-color: rgba(37,99,235,.25); }
[data-theme="dark"] .db-status-pill--amber  { background: rgba(217,119,6,.15);  border-color: rgba(217,119,6,.25); }
[data-theme="dark"] .db-status-pill--purple { background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.25); }
[data-theme="dark"] .db-sheet { background: var(--bg-elev); }
[data-theme="dark"] .db-swipe-action { background: rgba(220,38,38,.18); border-color: rgba(220,38,38,.22); }
[data-theme="dark"] .db-heatmap__dot {
  background: linear-gradient(135deg,
    rgba(99,149,255, calc(.12 + var(--i,.5) * .88)),
    rgba(167,119,255, calc(.08 + var(--i,.5) * .65)));
}

/* ── 17. MOBILE ≤ 767px ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .db-greeting { transition: padding .3s, margin .3s; }
  .db-sheet__body { max-height: 58vh; }
  .db-status-strip { margin-bottom: 1rem; }
  .db-status-pill { font-size: .68rem; padding: .26rem .65rem; }
  .db-sheet-kpi__value { font-size: 2.2rem; }
  .db-heatmap { gap: .22rem; }
  .db-sheet__body { padding: 0 1rem 1.5rem; }
  .db-sheet__hd   { padding: 0 1rem .8rem; }
}

/* ── 18. TV ≥ 1920px ─────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .db-status-pill { font-size: .8rem; padding: .4rem .95rem; }
  .db-heatmap { gap: .4rem; }
  .db-heatmap__dot { border-radius: 6px; }
}

/* ── 19. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-greeting__avatar { animation: none; }
  .db-status-pill::before { animation: none; }
  .db-live-badge { animation: none; }
  .db-sheet { transition: none; }
  .db-heatmap__dot { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   EMI Pages — Smart Card v1
═══════════════════════════════════════════════════════════════════ */
.main[data-page="emi"],
.main[data-page="emi-schedule"] {
  background:
    radial-gradient(ellipse 60% 40% at 5% 10%,  rgba(5,150,105,.10)  0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 92% 68%,  rgba(37,99,235,.07) 0%, transparent 52%),
    radial-gradient(ellipse 38% 50% at 52% 96%,  rgba(124,58,237,.06) 0%, transparent 50%),
    var(--bg);
}

/* KPI strip */
.emi-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 600px) {
  .emi-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}
.emi-kpi-item {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 16px;
  padding: .85rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: transform .16s ease;
}
.emi-kpi-item:active { transform: scale(.97); }
.emi-kpi-item__icon  { font-size: 1.1rem; margin-bottom: .1rem; }
.emi-kpi-item__val   { font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.emi-kpi-item__lbl   { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.emi-kpi-item__chip  {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .64rem; font-weight: 700; border-radius: 99px;
  padding: .1rem .4rem; margin-top: .15rem;
}

/* Purchase cards */
.emi-purchase-list  { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.5rem; }
.emi-purchase-card  {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  animation: emi-card-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes emi-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.emi-purchase-card:active { transform: scale(.988); }
.emi-purchase-card__stripe {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3.5px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--epc-c, #059669), var(--epc-c2, #0d9488));
}
.emi-purchase-card__top  { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.emi-purchase-ring       { flex-shrink: 0; width: 58px; height: 58px; position: relative; }
.emi-purchase-ring svg   { width: 58px; height: 58px; transform: rotate(-90deg); }
.emi-purchase-ring__bg   { fill: none; stroke: var(--border); stroke-width: 4.5; }
.emi-purchase-ring__fg   {
  fill: none; stroke: var(--epc-c, #059669); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .25s;
}
.emi-purchase-ring__fg.is-drawn { stroke-dasharray: var(--rp) 100; }
.emi-purchase-ring__pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 900; color: var(--epc-c, #059669);
}
.emi-purchase-info       { flex: 1; min-width: 0; }
.emi-purchase-info__name {
  font-size: .97rem; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .22rem;
}
.emi-purchase-info__meta {
  font-size: .72rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin-bottom: .35rem;
}
.emi-purchase-status {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .15rem .5rem; border-radius: 99px;
  font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.emi-purchase-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.emi-pstat--active    { background: rgba(5,150,105,.12); color: #059669; }
.emi-pstat--completed { background: rgba(37,99,235,.12); color: #2563eb; }
.emi-pstat--cancelled { background: rgba(225,29,72,.12);  color: #dc2626; }
.emi-purchase-card__prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .71rem; color: var(--text-muted); margin-bottom: .28rem;
}
.emi-purchase-card__prog-row strong { font-size: .8rem; color: var(--text); }
.emi-prog-bar       { height: 6px; background: var(--bg-muted); border-radius: 3px; overflow: hidden; margin-bottom: .75rem; }
.emi-prog-bar__fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--epc-c, #059669), var(--epc-c2, #0d9488));
  width: 0; transition: width 1s cubic-bezier(.16,1,.3,1) .3s;
}
.emi-prog-bar__fill.is-drawn { width: var(--pw, 0%); }
.emi-purchase-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.emi-amt      { display: flex; flex-direction: column; }
.emi-amt__val { font-size: 1.05rem; font-weight: 900; color: var(--text); }
.emi-amt__lbl { font-size: .65rem; color: var(--text-muted); }

/* Hero card (schedule page) */
.emi-hero-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .7rem; margin-bottom: 1.2rem;
}
@media (max-width: 650px) { .emi-hero-wrap { grid-template-columns: 1fr; } }
.emi-hero-card {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.emi-hero-card--main  { display: flex; align-items: center; gap: 1.1rem; }
.emi-hero-ring        { flex-shrink: 0; width: 80px; height: 80px; position: relative; }
.emi-hero-ring svg    { width: 80px; height: 80px; transform: rotate(-90deg); }
.emi-hero-ring__bg    { fill: none; stroke: var(--border); stroke-width: 5; }
.emi-hero-ring__fg    {
  fill: none; stroke: #059669; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.1s cubic-bezier(.16,1,.3,1) .35s;
}
.emi-hero-ring__fg.is-drawn { stroke-dasharray: var(--rp) 100; }
.emi-hero-ring__mid   {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.1;
}
.emi-hero-ring__mid strong { font-size: 1.15rem; font-weight: 900; color: #059669; }
.emi-hero-ring__mid span   { font-size: .6rem; color: var(--text-muted); font-weight: 600; }
.emi-hero-info__title {
  font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: .28rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emi-hero-info__sub {
  font-size: .73rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .2rem .55rem; margin-bottom: .55rem;
}
.emi-hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.emi-hero-stat      { padding: .5rem .6rem; background: var(--bg-muted); border-radius: 10px; }
.emi-hero-stat__val { font-size: .95rem; font-weight: 800; color: var(--text); }
.emi-hero-stat__lbl { font-size: .62rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .06rem; }
.emi-side-stats     { display: flex; flex-direction: column; gap: .55rem; }
.emi-side-stat      {
  padding: .75rem .9rem;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.emi-side-stat__val { font-size: 1.1rem; font-weight: 900; color: var(--text); }
.emi-side-stat__lbl { font-size: .65rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: .06rem; }

/* Timeline */
.emi-timeline-wrap { margin-bottom: 1.5rem; }
.emi-timeline      { display: flex; flex-direction: column; gap: .42rem; }
.emi-tl-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .8rem .95rem;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  transition: transform .15s ease;
  animation: emi-card-in .35s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="dark"] .emi-tl-item {
  background: rgba(30,41,59,.65); border-color: rgba(255,255,255,.07);
}
.emi-tl-item:active              { transform: scale(.993); }
.emi-tl-item--paid               { opacity: .62; }
.emi-tl-item--next               { border-color: rgba(37,99,235,.38); box-shadow: 0 0 0 2px rgba(37,99,235,.13), 0 4px 14px rgba(37,99,235,.1); }
.emi-tl-item--overdue            { border-color: rgba(220,38,38,.38); box-shadow: 0 0 0 2px rgba(220,38,38,.1); }
.emi-tl-num {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900; flex-shrink: 0;
}
.emi-tl-num--paid    { background: rgba(5,150,105,.12);  color: #059669; }
.emi-tl-num--next    { background: rgba(37,99,235,.12);  color: #2563eb; }
.emi-tl-num--overdue { background: rgba(220,38,38,.12);  color: #dc2626; }
.emi-tl-num--pending { background: var(--bg-muted);       color: var(--text-muted); }
.emi-tl-body__date   { font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: .1rem; }
.emi-tl-body__sub    { font-size: .67rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emi-tl-right        { display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; flex-shrink: 0; }
.emi-tl-right__amt   { font-size: .9rem; font-weight: 800; color: var(--text); }
.emi-tl-badge {
  display: inline-block; padding: .11rem .42rem;
  border-radius: 99px; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.emi-tl-badge--paid    { background: rgba(5,150,105,.12); color: #059669; }
.emi-tl-badge--overdue { background: rgba(220,38,38,.12); color: #dc2626; }
.emi-tl-badge--next    { background: rgba(37,99,235,.12); color: #2563eb; }
.emi-tl-badge--pending { background: var(--bg-muted);      color: var(--text-muted); }

/* Section header */
.emi-sec-hd        { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.emi-sec-hd__title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); flex: 1; }
.emi-sec-hd__count { font-size: .7rem; font-weight: 700; background: var(--bg-muted); border-radius: 99px; padding: .1rem .45rem; color: var(--text-muted); }

/* Dark mode */
[data-theme="dark"] .emi-kpi-item      { background: rgba(30,41,59,.72); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .emi-purchase-card { background: rgba(30,41,59,.76); border-color: rgba(255,255,255,.09); box-shadow: 0 4px 20px rgba(0,0,0,.28); }
[data-theme="dark"] .emi-hero-card     { background: rgba(30,41,59,.76); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .emi-side-stat     { background: rgba(30,41,59,.7);  border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .emi-tl-item       { box-shadow: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .emi-purchase-ring__fg, .emi-hero-ring__fg,
  .emi-prog-bar__fill, .emi-purchase-card, .emi-tl-item { animation: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Referrals Page — Smart Card v1
═══════════════════════════════════════════════════════════════════ */
.main[data-page="referrals"] {
  background:
    radial-gradient(ellipse 65% 42% at 8% 12%,  rgba(37,99,235,.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 48% at 88% 65%,  rgba(124,58,237,.08) 0%, transparent 52%),
    radial-gradient(ellipse 42% 50% at 50% 94%,  rgba(16,185,129,.07) 0%, transparent 50%),
    radial-gradient(ellipse 55% 35% at 72% 8%,   rgba(245,158,11,.05) 0%, transparent 50%),
    var(--bg);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.ref-hero {
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 6px 30px rgba(37,99,235,.1), 0 1px 4px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
  margin-bottom: 1.35rem;
  position: relative;
}
.ref-hero__stripe {
  height: 3.5px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #059669 100%);
}
.ref-hero__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 1.4rem 1.5rem 1.5rem;
}
@media (max-width: 640px) {
  .ref-hero__body { grid-template-columns: 1fr; gap: 1rem; }
}
.ref-qr-wrap {
  text-align: center;
  flex-shrink: 0;
}
.ref-qr-img {
  width: 150px; height: 150px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  background: #fff;
  display: block;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .ref-qr-img { width: 110px; height: 110px; }
}
.ref-qr-hint {
  font-size: .65rem;
  color: var(--text-muted);
  margin-top: .35rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.ref-code-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.ref-code-display {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
  border: 1.5px dashed rgba(37,99,235,.3);
  border-radius: 14px;
  padding: .6rem 1.1rem;
  margin-bottom: 1rem;
}
.ref-code-display__text {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--brand);
  line-height: 1;
}
.ref-code-display__copy {
  background: none;
  border: none;
  cursor: pointer;
  padding: .35rem;
  border-radius: 8px;
  color: var(--brand);
  transition: background .15s;
  line-height: 1;
  font-size: 1.1rem;
}
.ref-code-display__copy:hover { background: rgba(37,99,235,.1); }
.ref-copy-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .9rem;
}
.ref-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .8rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  transition: border-color .15s, background .15s, transform .1s;
  text-decoration: none;
}
.ref-copy-btn:active { transform: scale(.94); }
.ref-copy-btn:hover  { border-color: var(--brand); background: rgba(37,99,235,.06); }
.ref-share-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ref-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .8rem;
  border-radius: 99px;
  font-size: .73rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  transition: opacity .15s, transform .1s;
}
.ref-share-btn:active { transform: scale(.93); opacity: .85; }

/* ── KPI grid ─────────────────────────────────────────────────── */
.ref-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 700px) { .ref-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .ref-kpi-grid { grid-template-columns: 1fr 1fr; } }
.ref-kpi-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px;
  padding: .95rem 1rem 1rem;
  box-shadow: 0 3px 14px rgba(var(--rk-rgb,37,99,235),.09), 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
  overflow: hidden;
  animation: ref-card-in .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ref-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ref-kpi-card__ring {
  width: 44px; height: 44px;
  position: relative;
  margin-bottom: .35rem;
}
.ref-kpi-card__ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ref-kpi-card__ring-bg { fill: none; stroke: var(--border); stroke-width: 4; }
.ref-kpi-card__ring-fg {
  fill: none; stroke: var(--rk-color, #2563eb); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .2s;
}
.ref-kpi-card__ring-fg.is-drawn { stroke-dasharray: var(--rp, 0) 100; }
.ref-kpi-card__ring-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}
.ref-kpi-card__val {
  font-size: 1.55rem; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--rk-color, var(--text));
}
.ref-kpi-card__lbl {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-top: .1rem;
}
.ref-kpi-card__sub { font-size: .68rem; color: var(--text-muted); margin-top: .1rem; }

/* ── Goals row ────────────────────────────────────────────────── */
.ref-goals-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 700px) { .ref-goals-row { grid-template-columns: repeat(2, 1fr); } }
.ref-goal-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px;
  padding: .95rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  animation: ref-card-in .38s cubic-bezier(.16,1,.3,1) both;
}
.ref-goal-card--done {
  border-color: rgba(16,185,129,.35);
  box-shadow: 0 0 0 2px rgba(16,185,129,.12), 0 2px 10px rgba(0,0,0,.05);
}
.ref-goal-ring { width: 48px; height: 48px; position: relative; margin-bottom: .35rem; }
.ref-goal-ring svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.ref-goal-ring__bg { fill: none; stroke: var(--border); stroke-width: 4; }
.ref-goal-ring__fg {
  fill: none; stroke: var(--gc, #2563eb); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .3s;
}
.ref-goal-ring__fg.is-drawn { stroke-dasharray: var(--rp, 0) 100; }
.ref-goal-ring__icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.ref-goal-card__title { font-size: .82rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.ref-goal-card__prog  { font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.ref-goal-card__hint  { font-size: .67rem; color: var(--text-muted); line-height: 1.4; }

/* ── Mid row: chart + leaderboard ────────────────────────────── */
.ref-mid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.35rem;
}
@media (max-width: 700px) { .ref-mid-row { grid-template-columns: 1fr; } }
.ref-chart-card, .ref-lb-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
}
.ref-card-hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.1rem .7rem;
  border-bottom: 1px solid var(--border);
}
.ref-card-hd__title { font-size: .85rem; font-weight: 800; color: var(--text); flex: 1; }
.ref-card-hd__sub   { font-size: .7rem; color: var(--text-muted); }
.ref-chart-body { padding: .9rem 1.1rem 1rem; }

/* Leaderboard items */
.ref-lb-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.ref-lb-item:last-child { border-bottom: none; }
.ref-lb-item--me  { background: rgba(37,99,235,.05); }
.ref-lb-item:hover { background: var(--bg-muted); }
.ref-lb-rank {
  width: 28px; text-align: center;
  font-size: 1rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
}
.ref-lb-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.ref-lb-info { flex: 1; min-width: 0; }
.ref-lb-info__name {
  font-size: .83rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-lb-info__email { font-size: .68rem; color: var(--text-muted); }
.ref-lb-stats { text-align: right; flex-shrink: 0; }
.ref-lb-stats__l1  { font-size: .83rem; font-weight: 800; color: var(--text); }
.ref-lb-stats__rev { font-size: .68rem; color: #059669; font-weight: 700; }

/* ── L1 direct referrals ──────────────────────────────────────── */
.ref-l1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: .65rem;
  margin-bottom: 1.35rem;
}
.ref-l1-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 16px;
  padding: .95rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  animation: ref-card-in .35s cubic-bezier(.16,1,.3,1) both;
}
.ref-l1-card__name  { font-size: .87rem; font-weight: 800; color: var(--text); }
.ref-l1-card__email { font-size: .7rem; color: var(--text-muted); }
.ref-l1-card__meta  { display: flex; flex-wrap: wrap; gap: .2rem .45rem; margin-top: .2rem; }
.ref-l1-pill {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .1rem .42rem; border-radius: 99px;
  font-size: .62rem; font-weight: 700;
}
.ref-l1-pill--active   { background: rgba(5,150,105,.12); color: #059669; }
.ref-l1-pill--inactive { background: var(--bg-muted); color: var(--text-muted); }
.ref-l1-pill--emi      { background: rgba(37,99,235,.1); color: #2563eb; }

/* ── Tree ─────────────────────────────────────────────────────── */
.ref-tree-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}
.ref-tree-body { padding: .9rem 1.1rem 1.1rem; }
.ref-tree, .ref-tree ul {
  list-style: none;
  padding-left: 1.1rem;
  margin: 0;
  border-left: 2px solid var(--border);
}
.ref-tree > li { margin-top: .5rem; }
.ref-tree details summary {
  cursor: pointer;
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  list-style: none;
  transition: border-color .15s, background .15s;
}
[data-theme="dark"] .ref-tree details summary { background: rgba(30,41,59,.5); }
.ref-tree details summary:hover { border-color: var(--brand); background: rgba(37,99,235,.05); }
.ref-tree details summary::-webkit-details-marker { display: none; }
.ref-tree details summary::before {
  content: '▸';
  color: var(--text-muted);
  transition: transform .15s;
  display: inline-block;
  font-size: .72rem;
  flex-shrink: 0;
}
.ref-tree details[open] > summary::before { transform: rotate(90deg); }
.ref-tree__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .1rem .48rem; color: #fff;
  font-size: .65rem; font-weight: 800; border-radius: 8px; letter-spacing: .04em;
  flex-shrink: 0;
}
.ref-tree__name  { font-size: .83rem; font-weight: 700; color: var(--text); }
.ref-tree__email { font-size: .7rem; color: var(--text-muted); }
.ref-tree__chip  {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .08rem .38rem; border-radius: 99px;
  font-size: .62rem; font-weight: 700;
}

/* ── Toast ────────────────────────────────────────────────────── */
.ref-toast {
  position: fixed; bottom: calc(5rem + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #16a34a; color: #fff;
  padding: .6rem 1.2rem; border-radius: 99px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  font-size: .82rem; font-weight: 700;
  z-index: 9999; opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; white-space: nowrap;
}
.ref-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dark mode */
[data-theme="dark"] .ref-hero,
[data-theme="dark"] .ref-kpi-card,
[data-theme="dark"] .ref-goal-card,
[data-theme="dark"] .ref-chart-card,
[data-theme="dark"] .ref-lb-card,
[data-theme="dark"] .ref-l1-card,
[data-theme="dark"] .ref-tree-card { background: rgba(30,41,59,.78); border-color: rgba(255,255,255,.09); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ref-kpi-card__ring-fg, .ref-goal-ring__fg,
  .ref-kpi-card, .ref-goal-card, .ref-l1-card { animation: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Referrals Page — Mobile-Native + Web-Responsive v2
═══════════════════════════════════════════════════════════════════ */

/* Scroll progress bar */
.ref-scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #059669 100%);
  transform-origin: left; transform: scaleX(0);
  transition: transform .08s linear;
  pointer-events: none;
}

/* Page header compact-on-scroll */
.ref-page-hd {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0 .85rem;
  transition: padding .25s ease;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  margin: 0 -.1rem;
  padding-left: .1rem; padding-right: .1rem;
}
.ref-page-hd__title {
  font-size: 1.35rem; font-weight: 900; letter-spacing: -.025em; color: var(--text); flex: 1;
  transition: font-size .25s ease;
}
.ref-page-hd.is-compact { padding-top: .3rem; padding-bottom: .4rem; }
.ref-page-hd.is-compact .ref-page-hd__title { font-size: 1rem; }

/* Savings badge */
.ref-savings-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .75rem; border-radius: 99px;
  background: linear-gradient(135deg, rgba(5,150,105,.15), rgba(16,185,129,.09));
  border: 1px solid rgba(5,150,105,.28);
  font-size: .74rem; font-weight: 700; color: #059669;
  animation: ref-badge-pulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ref-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,.22); }
  50%      { box-shadow: 0 0 0 6px rgba(5,150,105,.0); }
}
.ref-savings-badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #059669;
  animation: db-dot-blink 2.2s ease-in-out infinite;
}

/* KPI scroll strip — mobile snap */
.ref-kpi-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  gap: .65rem;
  padding-bottom: .35rem;
  margin: 0 -.05rem 0;
}
.ref-kpi-wrap::-webkit-scrollbar { display: none; }
.ref-kpi-wrap .ref-kpi-card {
  flex: 0 0 72vw;
  scroll-snap-align: start;
  max-width: 210px;
  min-width: 0;
}
@media (min-width: 700px) {
  .ref-kpi-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .ref-kpi-wrap .ref-kpi-card { flex: none; max-width: none; }
}

/* KPI dots */
.ref-kpi-dots { display: flex; justify-content: center; gap: .38rem; margin: .5rem 0 1.1rem; }
.ref-kpi-dot  {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  transition: background .2s, width .2s; cursor: pointer;
}
.ref-kpi-dot.is-active { background: #2563eb; width: 14px; border-radius: 3px; }
@media (min-width: 700px) { .ref-kpi-dots { display: none; } }

/* Active discount ring pulse */
.ref-kpi-ring-pulse .ref-kpi-card__ring-fg {
  filter: drop-shadow(0 0 4px currentColor);
  animation: ref-ring-glow 3s ease-in-out infinite;
}
@keyframes ref-ring-glow {
  0%,100% { filter: drop-shadow(0 0 2px currentColor); }
  50%      { filter: drop-shadow(0 0 9px currentColor); }
}

/* ── Bottom Share Sheet — fully responsive ────────────────────────
 *  Mobile  (≤767px): bottom drawer that slides up from the bottom
 *  Desktop (≥768px): centred modal card
 *
 *  Closed state uses visibility + opacity + pointer-events alongside
 *  the transform so the sheet is COMPLETELY hidden — no risk of the
 *  bottom edge peeking above the bottom-nav.
 *
 *  Z-indexes (overlay 1098, sheet 1099) are above the system bottom-
 *  nav (45), topbar (50), generic modal (100), and FAB (50).            */
.ref-sheet-overlay {
  position: fixed; inset: 0; z-index: 1098;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.ref-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.ref-share-sheet {
  position: fixed; z-index: 1099;
  background: var(--bg-elev);
  box-shadow: 0 -12px 48px rgba(0,0,0,.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Defence-in-depth closed state — invisible + non-interactive. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.ref-share-sheet.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Mobile bottom drawer */
@media (max-width: 767px) {
  .ref-share-sheet {
    left: 0; right: 0; bottom: 0;
    border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    max-height: 90dvh;
    transform: translateY(105%);
    transition: transform .44s cubic-bezier(.16,1,.3,1),
                opacity .25s ease,
                visibility 0s linear .44s;
  }
  .ref-share-sheet.is-open {
    transform: translateY(0);
    transition: transform .44s cubic-bezier(.16,1,.3,1),
                opacity .25s ease,
                visibility 0s linear 0s;
  }
}

/* Desktop / tablet: centred modal card */
@media (min-width: 768px) {
  .ref-share-sheet {
    left: 50%; top: 50%;
    width: min(440px, 92vw);
    max-height: 86vh;
    border-radius: 22px;
    transform: translate(-50%, -50%) scale(.94);
    transition: transform .3s cubic-bezier(.32,.72,0,1),
                opacity .25s ease,
                visibility 0s linear .3s;
  }
  .ref-share-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    transition: transform .3s cubic-bezier(.32,.72,0,1),
                opacity .25s ease,
                visibility 0s linear 0s;
  }
  /* Drag handle is mobile-only — no swipe gesture on desktop. */
  .ref-share-sheet__drag { display: none; }
}

/* When share sheet is open, hide the legacy FAB + system bottom-nav so
   the modal owns the bottom of the screen with no visual competition. */
body.ref-share-open .bottom-nav,
body.ref-share-open .ref-fab {
  display: none !important;
}
.ref-share-sheet__drag {
  padding: .9rem; display: flex; justify-content: center; cursor: grab;
}
.ref-share-sheet__handle {
  width: 44px; height: 4px; border-radius: 2px; background: var(--border-strong);
}
.ref-share-sheet__hd {
  display: flex; align-items: center; padding: 0 1.25rem .8rem; gap: .6rem;
}
.ref-share-sheet__title { font-size: 1.05rem; font-weight: 800; flex: 1; }
.ref-share-sheet__close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-muted); border: none; cursor: pointer;
  font-size: .8rem; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.ref-share-sheet__body  { padding: 0 1.25rem 1.5rem; }

/* Share QR in sheet */
.ref-sheet-qr {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
}
.ref-sheet-qr img {
  width: 140px; height: 140px; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.14); background: #fff; cursor: pointer;
}
.ref-sheet-code {
  display: flex; align-items: center; gap: .65rem;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
  border: 1.5px dashed rgba(37,99,235,.3);
  border-radius: 14px; padding: .55rem 1rem; width: 100%; box-sizing: border-box;
}
.ref-sheet-code__text {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.85rem; font-weight: 900; letter-spacing: .12em; color: var(--brand); flex: 1;
}
.ref-sheet-code__btn {
  background: none; border: none; cursor: pointer; padding: .3rem;
  border-radius: 8px; color: var(--brand); font-size: 1.1rem; line-height: 1;
}
.ref-sheet-code__btn:hover { background: rgba(37,99,235,.1); }

/* Share app grid in sheet */
.ref-sheet-apps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: .85rem;
}
.ref-sheet-app {
  display: flex; flex-direction: column; align-items: center; gap: .32rem;
  padding: .65rem .35rem; border-radius: 14px;
  background: var(--bg-muted); text-decoration: none;
  border: none; cursor: pointer;
  transition: transform .12s ease, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ref-sheet-app:active { transform: scale(.9); }
.ref-sheet-app:hover  { background: var(--border); }
.ref-sheet-app__icon  {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.ref-sheet-app__label { font-size: .62rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.ref-sheet-copy-row   { display: flex; gap: .5rem; }
.ref-sheet-copy-btn   {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem .5rem; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bg-elev); font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s; color: var(--text);
}
.ref-sheet-copy-btn:active { transform: scale(.95); }
.ref-sheet-copy-btn:hover  { border-color: var(--brand); background: rgba(37,99,235,.06); }

/* FAB share */
.ref-fab {
  position: fixed;
  right: 1.1rem;
  bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom) + .9rem);
  z-index: 50; display: none;
}
@media (max-width: 768px) { .ref-fab { display: block; } }
.ref-fab__btn {
  width: 56px; height: 56px; border-radius: 28px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 6px 22px rgba(37,99,235,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
  animation: ref-fab-pulse 3.5s ease-in-out infinite;
}
.ref-fab__btn:active { transform: scale(.9); }
@keyframes ref-fab-pulse {
  0%,100% { box-shadow: 0 6px 22px rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.25); }
  50%      { box-shadow: 0 6px 22px rgba(37,99,235,.45), 0 0 0 10px rgba(37,99,235,.0); }
}

/* QR fullscreen viewer */
.ref-qr-viewer {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.ref-qr-viewer.is-open { opacity: 1; pointer-events: auto; }
.ref-qr-viewer img {
  width: min(80vw, 320px); height: min(80vw, 320px);
  border-radius: 22px; box-shadow: 0 16px 56px rgba(0,0,0,.55);
  background: #fff;
  transform: scale(.85); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.ref-qr-viewer.is-open img { transform: scale(1); }
.ref-qr-viewer__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.75rem; font-weight: 900; letter-spacing: .12em; color: #fff;
}
.ref-qr-viewer__close {
  padding: .5rem 1.5rem; border-radius: 99px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.ref-qr-viewer__hint { font-size: .73rem; color: rgba(255,255,255,.5); }

/* L1 swipe-to-share */
.ref-l1-swipe   { position: relative; overflow: hidden; border-radius: 16px; }
.ref-l1-reveal  {
  position: absolute; right: 0; top: 0; bottom: 0; width: 82px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: .63rem; font-weight: 700; opacity: 0; z-index: 0;
  border-radius: 0 16px 16px 0; transition: opacity .15s;
}
.ref-l1-reveal svg { width: 20px; height: 20px; }
.ref-l1-swipe .ref-l1-card { position: relative; z-index: 1; border-radius: 16px; }

/* Tree level filter */
.ref-tree-filter {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .85rem;
}
.ref-tree-filter::-webkit-scrollbar { display: none; }
.ref-tree-pill {
  flex-shrink: 0; padding: .28rem .75rem; border-radius: 99px;
  font-size: .7rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-elev); color: var(--text-muted);
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.ref-tree-pill:active { transform: scale(.92); }
.ref-tree-pill.is-active {
  border-color: var(--pill-c, #2563eb);
  color: var(--pill-c, #2563eb);
  background: var(--pill-bg, rgba(37,99,235,.09));
}

/* Stagger for leaderboard + goals */
.ref-lb-item    { animation: ref-card-in .32s cubic-bezier(.16,1,.3,1) both; }
.ref-goal-card  { animation: ref-card-in .38s cubic-bezier(.16,1,.3,1) both; }
.ref-l1-card    { animation: ref-card-in .35s cubic-bezier(.16,1,.3,1) both; }

/* PTR indicator */
.ref-ptr {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%) translateY(-52px);
  z-index: 40; display: flex; align-items: center; gap: .5rem;
  background: var(--bg-elev); border-radius: 99px; padding: .45rem 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: .78rem; font-weight: 700; color: var(--text);
  transition: transform .3s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
.ref-ptr.is-pulling { transform: translateX(-50%) translateY(0); }
.ref-ptr.is-ready   { color: #059669; }
.ref-ptr__spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: #2563eb;
  animation: db-ptr-spin 0.7s linear infinite;
}

/* Toast */
.ref-toast {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(12px);
  background: #16a34a; color: #fff; padding: .6rem 1.3rem;
  border-radius: 99px; box-shadow: 0 6px 24px rgba(0,0,0,.22);
  font-size: .82rem; font-weight: 700; z-index: 9999;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; white-space: nowrap;
}
.ref-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsive hero two-col → single */
@media (max-width: 480px) {
  .ref-hero__body { gap: .8rem; }
  .ref-code-display__text { font-size: 1.65rem; }
}

/* Dark mode additions */
[data-theme="dark"] .ref-share-sheet { background: #1e293b; }
[data-theme="dark"] .ref-sheet-app   { background: rgba(255,255,255,.05); }
[data-theme="dark"] .ref-qr-viewer   { background: rgba(0,0,0,.94); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ref-kpi-ring-pulse .ref-kpi-card__ring-fg,
  .ref-fab__btn, .ref-savings-badge,
  .ref-lb-item, .ref-goal-card, .ref-l1-card { animation: none; }
  .ref-share-sheet, .ref-sheet-overlay,
  .ref-qr-viewer { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v6 — Mobile-Native + Web-Responsive Ultra
═══════════════════════════════════════════════════════════════════ */

/* Scroll progress bar */
.db-scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 33%, #059669 66%, #d97706 100%);
  transform-origin: left; transform: scaleX(0);
  transition: transform .06s linear;
  pointer-events: none;
}

/* Network status banner */
.db-net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 198;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .48rem 1rem; font-size: .76rem; font-weight: 700;
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.db-net-banner.is-visible { transform: translateY(0); pointer-events: auto; }
.db-net-banner--offline { background: #dc2626; color: #fff; }
.db-net-banner--online  { background: #059669; color: #fff; }

/* Insight cards — horizontal scroll-snap on mobile, grid on wider */
.db-insight-row {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .3rem;
  margin: 0 -.05rem;
}
.db-insight-row::-webkit-scrollbar { display: none; }
.db-insight-card {
  flex: 0 0 82vw;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 600px) {
  .db-insight-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .db-insight-card { flex: none; }
}

/* Insight scroll dots */
.db-insight-dots { display: flex; justify-content: center; gap: .35rem; margin: .5rem 0 .9rem; }
.db-insight-dot  {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  transition: background .2s, width .2s; cursor: pointer;
}
.db-insight-dot.is-active { background: var(--brand); width: 14px; border-radius: 3px; }
@media (min-width: 600px) { .db-insight-dots { display: none; } }

/* Quick actions 2-col on narrow mobile */
@media (max-width: 480px) {
  .db-qa3-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Bottom row smart cards ─────────────────────────────────────── */
.db-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 800px)  { .db-bottom-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px)  { .db-bottom-row { grid-template-columns: 1fr; } }

.db-bottom-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(0,0,0,.06);
  animation: db6-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes db6-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
[data-theme="dark"] .db-bottom-card {
  background: rgba(30,41,59,.76);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 3px 16px rgba(0,0,0,.28);
}
.db-bottom-card__hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.1rem .65rem;
  font-size: .83rem; font-weight: 800; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.db-bottom-card__body { padding: 1rem 1.1rem; }

/* Platform health rings */
.db-health-item { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.db-health-item:last-child { margin-bottom: 0; }
.db-health-ring { flex-shrink: 0; width: 44px; height: 44px; position: relative; }
.db-health-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.db-health-ring__bg { fill: none; stroke: var(--border); stroke-width: 4.5; }
.db-health-ring__fg {
  fill: none; stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .25s;
}
.db-health-ring__fg.is-drawn { stroke-dasharray: var(--hp) 100; }
.db-health-ring__pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .54rem; font-weight: 900; color: var(--text);
}
.db-health-info { flex: 1; min-width: 0; }
.db-health-info__label { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.db-health-info__val   { font-size: 1.1rem; font-weight: 900; color: var(--text); }

/* Profile ring */
.db-prof-ring { flex-shrink: 0; width: 52px; height: 52px; position: relative; }
.db-prof-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.db-prof-ring__bg { fill: none; stroke: var(--border); stroke-width: 4; }
.db-prof-ring__fg {
  fill: none; stroke: #2563eb; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .9s cubic-bezier(.16,1,.3,1) .2s;
}
.db-prof-ring__fg.is-drawn { stroke-dasharray: var(--pp) 100; }
.db-prof-ring__pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 900; color: #2563eb;
}

/* Section enter stagger */
.db-s-enter {
  opacity: 0; transform: translateY(18px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.db-s-enter.is-in { opacity: 1; transform: none; }

/* Sticky section headers */
.db-sec-hd {
  position: sticky; top: 0; z-index: 6;
  background: var(--bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding-top: .3rem; padding-bottom: .3rem;
  margin-left: -.05rem; margin-right: -.05rem;
  padding-left: .05rem; padding-right: .05rem;
}

/* Notification badge on alerts btn */
.db-notif-wrap { position: relative; display: inline-block; }
.db-notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  background: #dc2626; color: #fff;
  font-size: .52rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-elev);
  animation: db-badge-pop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes db-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Toast */
.db-toast {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(14px);
  background: rgba(15,23,42,.95); color: #fff;
  padding: .58rem 1.3rem; border-radius: 99px;
  box-shadow: 0 8px 28px rgba(0,0,0,.26);
  font-size: .8rem; font-weight: 700;
  z-index: 9999; opacity: 0; white-space: nowrap;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.db-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .db-toast { background: rgba(248,250,252,.95); color: #0f172a; }

/* Context menu on long-press */
.db-ctx {
  position: fixed; z-index: 80;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px; padding: .4rem .35rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 168px;
  animation: db-ctx-in .18s cubic-bezier(.16,1,.3,1);
}
@keyframes db-ctx-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
[data-theme="dark"] .db-ctx { box-shadow: 0 12px 40px rgba(0,0,0,.48); }
.db-ctx__item {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .75rem; border-radius: 10px;
  font-size: .81rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .12s; white-space: nowrap;
  background: none; border: none; width: 100%; text-align: left; text-decoration: none;
}
.db-ctx__item:hover { background: var(--bg-muted); }
.db-ctx__item--danger { color: #dc2626; }
.db-ctx__sep { height: 1px; background: var(--border); margin: .25rem .4rem; }

/* Shake hint */
.db-shake-hint {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  font-size: .66rem; color: var(--text-muted); margin: -.3rem 0 .55rem;
  animation: db-hint-show 4s ease 1.5s both;
}
@keyframes db-hint-show {
  0%,100% { opacity: 0; } 15%,85% { opacity: 1; }
}
@media (min-width: 768px) { .db-shake-hint { display: none; } }

/* Permissions smart badge grid */
.db-perm-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.db-perm-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .22rem .55rem; border-radius: 8px;
  font-size: .67rem; font-weight: 700;
  background: var(--bg-muted); color: var(--text-muted);
  transition: background .15s;
}
.db-perm-chip:hover { background: var(--border); color: var(--text); }

/* Split row responsive */
@media (max-width: 640px) {
  .db-split-row { grid-template-columns: 1fr !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .db-scroll-bar, .db-net-banner, .db-s-enter,
  .db-bottom-card, .db-health-ring__fg, .db-prof-ring__fg,
  .db-toast, .db-ctx { transition: none; animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v7 — Command Palette · 3D Tilt · Drag-Reorder · Skeleton
═══════════════════════════════════════════════════════════════════ */

/* ── Sticky compact stats bar ─────────────────────────────────────── */
.db-sticky-stats {
  position: sticky; top: 0; z-index: 12;
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  margin: 0 -.85rem;
  overflow-x: auto; scrollbar-width: none;
  transform: translateY(-120%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.db-sticky-stats::-webkit-scrollbar { display: none; }
.db-sticky-stats.is-visible { transform: translateY(0); pointer-events: auto; }
[data-theme="dark"] .db-sticky-stats { background: rgba(15,23,42,.9); }
.db-sticky-stat {
  display: flex; align-items: center; gap: .32rem;
  white-space: nowrap; flex-shrink: 0;
  padding: .18rem .48rem; border-radius: 99px;
  background: var(--bg-muted); font-size: .7rem;
}
.db-sticky-stat__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.db-sticky-stat__val { font-weight: 800; color: var(--text); }
.db-sticky-stat__lbl { color: var(--text-muted); font-weight: 600; }
.db-sticky-stat__div {
  width: 1px; height: 16px; background: var(--border); flex-shrink: 0;
}

/* ── Skeleton shimmer loading ─────────────────────────────────────── */
.db-skeleton-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg); padding: 1.1rem .85rem;
  display: none; flex-direction: column; gap: .7rem;
  overflow: hidden;
}
.db-skeleton-wrap.is-active { display: flex; }
.db-skeleton {
  border-radius: 18px;
  background: linear-gradient(90deg,
    var(--bg-muted) 25%, rgba(200,210,230,.5) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: db7-shimmer 1.4s ease infinite;
}
[data-theme="dark"] .db-skeleton {
  background: linear-gradient(90deg,
    var(--bg-muted) 25%, rgba(255,255,255,.06) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: db7-shimmer 1.4s ease infinite;
}
@keyframes db7-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.db-skeleton--header { height: 52px; border-radius: 14px; }
.db-skeleton--kpi-row { display: flex; gap: .55rem; }
.db-skeleton--kpi { flex: 0 0 72vw; height: 138px; border-radius: 20px; }
@media (min-width: 640px) { .db-skeleton--kpi { flex: 1; } }
.db-skeleton--full { height: 120px; border-radius: 18px; }
.db-skeleton--half-row { display: flex; gap: .55rem; }
.db-skeleton--half { flex: 1; height: 88px; border-radius: 16px; }

/* ── Command palette ──────────────────────────────────────────────── */
.db-cmd-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.46);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: clamp(3.5rem, 12vh, 7rem);
}
.db-cmd-overlay.is-open { display: flex; }
.db-cmd-box {
  width: min(580px, calc(100vw - 1.2rem));
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
  overflow: hidden;
  animation: db7-cmd-in .17s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .db-cmd-box { box-shadow: 0 28px 90px rgba(0,0,0,.6); }
@keyframes db7-cmd-in {
  from { opacity: 0; transform: scale(.93) translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
.db-cmd-search {
  display: flex; align-items: center; gap: .6rem;
  padding: .78rem 1.05rem;
  border-bottom: 1px solid var(--border);
}
.db-cmd-search svg { flex-shrink: 0; color: var(--text-muted); }
.db-cmd-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: .96rem; font-weight: 500; color: var(--text);
  font-family: inherit;
}
.db-cmd-input::placeholder { color: var(--text-muted); }
.db-cmd-esc {
  font-size: .67rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 5px; padding: .1rem .38rem; flex-shrink: 0; font-family: inherit;
}
.db-cmd-list { max-height: 330px; overflow-y: auto; padding: .3rem; }
.db-cmd-list::-webkit-scrollbar { display: none; }
.db-cmd-section {
  font-size: .63rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  padding: .42rem .65rem .18rem;
}
.db-cmd-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem; border-radius: 11px;
  cursor: pointer; transition: background .1s; text-decoration: none;
  color: var(--text);
}
.db-cmd-item.is-active, .db-cmd-item:hover { background: var(--bg-muted); }
.db-cmd-item__icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; flex-shrink: 0;
}
.db-cmd-item__body { flex: 1; min-width: 0; }
.db-cmd-item__label { font-size: .84rem; font-weight: 600; }
.db-cmd-item__sub   { font-size: .71rem; color: var(--text-muted); }
.db-cmd-item__hint  {
  font-size: .67rem; color: var(--text-muted);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 5px; padding: .08rem .32rem; flex-shrink: 0;
}
.db-cmd-item mark {
  background: rgba(37,99,235,.15); color: inherit;
  border-radius: 2px; padding: 0 1px;
}
.db-cmd-footer {
  display: flex; align-items: center; gap: .9rem;
  padding: .5rem 1rem; border-top: 1px solid var(--border);
  font-size: .67rem; color: var(--text-muted);
}
.db-cmd-footer kbd {
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: .06rem .28rem;
  font-family: inherit; font-size: .67rem;
}

/* ── Keyboard shortcut overlay ────────────────────────────────────── */
.db-keys-overlay {
  position: fixed; inset: 0; z-index: 9970;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.db-keys-overlay.is-open { display: flex; }
.db-keys-box {
  width: min(500px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.2rem 1.35rem 1.4rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
  animation: db7-cmd-in .2s cubic-bezier(.16,1,.3,1);
  max-height: 88vh; overflow-y: auto;
}
.db-keys-box__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .9rem; font-size: .95rem; font-weight: 800;
}
.db-keys-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
  border-radius: 6px; padding: .15rem .3rem;
}
.db-keys-close:hover { background: var(--bg-muted); }
.db-keys-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .7rem;
}
@media (max-width: 420px) { .db-keys-grid { grid-template-columns: 1fr; } }
.db-keys-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .3rem 0; border-bottom: 1px solid var(--border);
  font-size: .78rem; gap: .4rem;
}
.db-keys-item:last-child { border-bottom: none; }
.db-keys-item__action { color: var(--text-muted); min-width: 0; }
.db-keys-item__key {
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 5px; padding: .1rem .4rem;
  font-size: .7rem; font-weight: 700;
  color: var(--text); white-space: nowrap; flex-shrink: 0;
}

/* ── 3D tilt on KPI cards (desktop only) ─────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .db-kpi-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .08s ease, box-shadow .08s ease;
  }
  .db-kpi-card:not([data-tilting]) {
    transition: transform .38s cubic-bezier(.16,1,.3,1),
                box-shadow .38s ease;
  }
}

/* ── Drag-to-reorder KPI cards ────────────────────────────────────── */
.db-kpi-card[draggable="true"] { cursor: grab; }
.db-kpi-card.is-dragging {
  opacity: .35; transform: scale(.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  cursor: grabbing;
}
.db-kpi-card.is-drag-over {
  outline: 2px dashed var(--brand,#2563eb);
  outline-offset: 3px;
}

/* ── Announcement banner ──────────────────────────────────────────── */
.db-announce {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem;
  background: linear-gradient(135deg,rgba(37,99,235,.09),rgba(124,58,237,.09));
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 14px; margin-bottom: .9rem;
  font-size: .78rem;
  animation: db6-in .42s cubic-bezier(.16,1,.3,1) both;
}
.db-announce__icon { flex-shrink: 0; font-size: .95rem; }
.db-announce__text { flex: 1; min-width: 0; color: var(--text); }
.db-announce__text strong { color: #2563eb; }
.db-announce__close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: .12rem .28rem;
  border-radius: 6px; font-size: .82rem; flex-shrink: 0;
}
.db-announce__close:hover { background: var(--bg-muted); }

/* ── Toast queue with undo ────────────────────────────────────────── */
.db-toast-q {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; z-index: 9999; pointer-events: none;
}
.db-toast-msg {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(15,23,42,.95); color: #fff;
  padding: .52rem 1.1rem; border-radius: 99px;
  box-shadow: 0 8px 28px rgba(0,0,0,.26);
  font-size: .8rem; font-weight: 700;
  white-space: nowrap;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
}
.db-toast-msg.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.db-toast-msg.is-leaving {
  opacity: 0; transform: translateY(-8px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
[data-theme="dark"] .db-toast-msg { background: rgba(248,250,252,.95); color: #0f172a; }
.db-toast-undo {
  background: none; border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 99px; padding: .1rem .55rem;
  font-size: .73rem; font-weight: 700; cursor: pointer;
  font-family: inherit; margin-left: .2rem;
}
[data-theme="dark"] .db-toast-undo { color: #0f172a; border-color: rgba(0,0,0,.2); }
.db-toast-undo:hover { background: rgba(255,255,255,.15); }

/* ── Fluid typography helpers ─────────────────────────────────────── */
.db-kpi-value {
  font-size: clamp(1.3rem, 4vw + .5rem, 2rem);
}

/* ── Print stylesheet ─────────────────────────────────────────────── */
@media print {
  .db-fab, .db-sheet, .db-fab-backdrop,
  .db-cmd-overlay, .db-keys-overlay, .db-scroll-bar,
  .db-net-banner, .db-toast-q, .db-ptr-indicator,
  .db-pwa-banner, .db-sticky-stats, .db-skeleton-wrap,
  .db-ctx, .db-announce { display: none !important; }
  .main { padding: 0 !important; overflow: visible !important; }
  .db-smart-card { break-inside: avoid; box-shadow: none !important;
    border: 1px solid #ddd !important; }
  .db-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    overflow: visible !important;
  }
  .db-insight-row {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    overflow: visible !important;
  }
  .db-bottom-row {
    grid-template-columns: repeat(3,1fr) !important;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-skeleton, .db-sticky-stats, .db-cmd-box, .db-keys-box,
  .db-toast-msg, .db-announce {
    transition: none !important; animation: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   Dashboard v8 — Theme Toggle · Color Picker · Zoom · Live Data ·
                  Widget Manager · Focus Mode · Idle Lock · Share
═══════════════════════════════════════════════════════════════════ */

/* ── Animated dark/light theme toggle ────────────────────────────── */
.db-theme-btn {
  position: relative; width: 42px; height: 24px;
  background: var(--bg-muted); border: 1.5px solid var(--border);
  border-radius: 99px; cursor: pointer;
  flex-shrink: 0; transition: background .25s ease;
  padding: 0; display: inline-flex; align-items: center;
}
.db-theme-btn:hover { background: var(--border); }
.db-theme-knob {
  position: absolute; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,.5);
  transition: left .25s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .25s ease;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem;
}
[data-theme="dark"] .db-theme-knob {
  left: 21px;
  background: #6366f1;
  box-shadow: 0 0 6px rgba(99,102,241,.6);
}

/* ── Accent color picker popover ─────────────────────────────────── */
.db-color-wrap { position: relative; flex-shrink: 0; }
.db-color-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--bg-elev);
  box-shadow: 0 0 0 1.5px var(--brand,#2563eb);
  cursor: pointer; transition: transform .18s ease;
  background: var(--brand,#2563eb);
}
.db-color-btn:hover { transform: scale(1.12); }
.db-color-pop {
  position: absolute; top: calc(100% + .55rem); right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px; padding: .55rem .6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  display: none; gap: .35rem; flex-wrap: wrap; width: 140px;
  animation: db7-cmd-in .16s cubic-bezier(.16,1,.3,1);
  z-index: 200;
}
.db-color-pop.is-open { display: flex; }
[data-theme="dark"] .db-color-pop { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.db-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; border: 2.5px solid transparent;
  transition: transform .18s ease, border-color .18s ease;
  position: relative; touch-action: manipulation;
}
.db-swatch::after { content: ''; position: absolute; inset: -9px; }
.db-swatch:hover { transform: scale(1.15); }
.db-swatch.is-active { border-color: var(--text); transform: scale(1.1); }
.db-color-label {
  width: 100%; font-size: .62rem; color: var(--text-muted);
  font-weight: 700; text-align: center; margin-top: .15rem;
}

/* ── Insight card zoom modal ─────────────────────────────────────── */
.db-zoom-overlay {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.db-zoom-overlay.is-open { display: flex; }
.db-zoom-box {
  width: min(680px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 32px 100px rgba(0,0,0,.24);
  overflow: hidden;
  animation: db7-cmd-in .22s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .db-zoom-box { box-shadow: 0 32px 100px rgba(0,0,0,.6); }
.db-zoom-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem .75rem;
  border-bottom: 1px solid var(--border);
}
.db-zoom-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.db-zoom-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
  border-radius: 8px; padding: .2rem .4rem;
  transition: background .12s;
}
.db-zoom-close:hover { background: var(--bg-muted); }
.db-zoom-body { padding: 1.2rem; }
.db-zoom-chart { width: 100%; height: 180px; }
.db-zoom-chart svg { width: 100%; height: 100%; }
.db-zoom-meta {
  display: flex; gap: 1.5rem; margin-top: .9rem;
  flex-wrap: wrap;
}
.db-zoom-stat { flex: 1; min-width: 80px; }
.db-zoom-stat__val {
  font-size: 1.4rem; font-weight: 900; color: var(--text);
}
.db-zoom-stat__lbl {
  font-size: .7rem; color: var(--text-muted); font-weight: 600; margin-top: .1rem;
}
/* Cursor zoom hint on insight cards */
.db-insight-card { cursor: zoom-in; position: relative; }
.db-zoom-hint {
  position: absolute; top: .55rem; right: .7rem;
  font-size: .6rem; color: var(--text-muted);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.db-insight-card:hover .db-zoom-hint { opacity: 1; }

/* ── Widget visibility manager ────────────────────────────────────── */
.db-widget-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 8px;
  background: var(--bg-muted); border: 1px solid var(--border);
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: background .12s, color .12s;
  min-height: 44px; touch-action: manipulation;
}
.db-widget-btn:hover { background: var(--border); color: var(--text); }
.db-widget-panel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  z-index: 9930; width: min(340px, calc(100vw - 2rem));
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 1.1rem 1.2rem 1.3rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  display: none; opacity: 0;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .db-widget-panel { box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.db-widget-panel.is-open {
  display: block; opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.db-widget-panel__overlay {
  position: fixed; inset: 0; z-index: 9929;
  background: rgba(0,0,0,.3);
  display: none;
}
.db-widget-panel__overlay.is-open { display: block; }
.db-widget-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem; font-size: .92rem; font-weight: 800;
}
.db-widget-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; border-radius: 6px; padding: .1rem .3rem;
}
.db-widget-close:hover { background: var(--bg-muted); }
.db-widget-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .42rem 0; border-bottom: 1px solid var(--border);
  font-size: .84rem; font-weight: 600;
}
.db-widget-item:last-child { border-bottom: none; }
.db-widget-item__label { color: var(--text); }
.db-widget-sw {
  position: relative; width: 36px; height: 20px;
  background: var(--bg-muted); border: 1.5px solid var(--border);
  border-radius: 99px; cursor: pointer;
  transition: background .2s ease; flex-shrink: 0;
}
.db-widget-sw.is-on { background: var(--brand,#2563eb); border-color: transparent; }
.db-widget-sw::after {
  content: ''; position: absolute; left: 2px; top: 1.5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: left .2s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.db-widget-sw.is-on::after { left: 18px; }

/* ── Focus mode ───────────────────────────────────────────────────── */
.db-focus-bar {
  position: fixed; bottom: calc(5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(15,23,42,.92); color: #fff;
  border-radius: 99px; padding: .48rem 1.1rem;
  font-size: .76rem; font-weight: 700;
  display: flex; align-items: center; gap: .55rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  z-index: 9000; pointer-events: none; opacity: 0;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.db-focus-bar.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: auto;
}
[data-theme="dark"] .db-focus-bar { background: rgba(248,250,252,.93); color: #0f172a; }
.db-focus-exit {
  background: rgba(255,255,255,.18); border: none; border-radius: 99px;
  color: inherit; font-size: .73rem; font-weight: 700;
  padding: .12rem .55rem; cursor: pointer; font-family: inherit;
}
[data-theme="dark"] .db-focus-exit { background: rgba(0,0,0,.12); }
.db-focus-exit:hover { background: rgba(255,255,255,.28); }
/* Focus mode: hide sidebar + topbar */
body.db-focus-mode .sidebar { transform: translateX(-200%) !important; }
body.db-focus-mode .topbar  { transform: translateY(-100%) !important; opacity: 0 !important; }
body.db-focus-mode .main    { margin-left: 0 !important; padding-top: 0 !important; transition: margin .35s ease, padding .35s ease; }

/* ── Live data pulse on update ────────────────────────────────────── */
.db-kpi-value.is-updating {
  animation: db8-pulse .55s cubic-bezier(.16,1,.3,1);
}
.db-sticky-stat__val.is-updating {
  animation: db8-pulse .45s cubic-bezier(.16,1,.3,1);
}
@keyframes db8-pulse {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: .35; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}
.db-kpi-spark-bar.is-live {
  animation: db8-bar-flash .4s ease;
}
@keyframes db8-bar-flash {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.8); }
}

/* ── Session idle overlay ────────────────────────────────────────── */
.db-idle-overlay {
  position: fixed; inset: 0; z-index: 9950;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem; text-align: center; padding: 2rem;
}
.db-idle-overlay.is-visible { display: flex; }
.db-idle-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  animation: db8-idle-pulse 2s ease infinite;
}
@keyframes db8-idle-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.3); }
  50%     { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.db-idle-title {
  font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.25;
}
.db-idle-sub  { font-size: .85rem; color: rgba(255,255,255,.7); }
.db-idle-btn {
  background: #fff; color: #0f172a;
  border: none; border-radius: 99px;
  padding: .65rem 1.8rem; font-size: .88rem; font-weight: 800;
  cursor: pointer; font-family: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.db-idle-btn:hover { transform: scale(1.04); box-shadow: 0 6px 24px rgba(0,0,0,.28); }

/* ── KPI card expand modal ─────────────────────────────────────────── */
.db-kpi-expand-overlay {
  position: fixed; inset: 0; z-index: 9910;
  background: rgba(0,0,0,.48);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.db-kpi-expand-overlay.is-open { display: flex; }
.db-kpi-expand-box {
  width: min(420px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
  overflow: hidden;
  animation: db7-cmd-in .2s cubic-bezier(.16,1,.3,1);
  position: relative;
}
[data-theme="dark"] .db-kpi-expand-box { box-shadow: 0 28px 80px rgba(0,0,0,.58); }
.db-kpi-expand-accent {
  height: 5px; width: 100%;
  background: linear-gradient(90deg, var(--xp-c1,#2563eb), var(--xp-c2,#7c3aed));
}
.db-kpi-expand-body { padding: 1.3rem 1.4rem 1.5rem; }
.db-kpi-expand-close {
  position: absolute; top: .85rem; right: .9rem;
  background: var(--bg-muted); border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.db-kpi-expand-close:hover { background: var(--border); }
.db-kpi-expand-ring {
  display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem;
}
.db-kpi-expand-ring svg { width: 72px; height: 72px; flex-shrink: 0; }
.db-kpi-expand-val { font-size: 2.2rem; font-weight: 900; color: var(--text); line-height: 1; }
.db-kpi-expand-lbl { font-size: .78rem; color: var(--text-muted); font-weight: 600; margin-top: .2rem; }
.db-kpi-expand-delta { font-size: .76rem; margin-top: .3rem; font-weight: 700; }
.db-kpi-expand-spark {
  display: flex; align-items: flex-end; gap: 3px;
  height: 52px; margin-bottom: .9rem;
}
.db-kpi-expand-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: rgba(var(--xp-rgb,37,99,235),.22);
  height: var(--bh,40%);
  transition: height .4s cubic-bezier(.16,1,.3,1);
}
.db-kpi-expand-bar.is-current {
  background: rgba(var(--xp-rgb,37,99,235),.8);
}
.db-kpi-expand-cta {
  display: block; width: 100%;
  background: var(--brand-btn-bg, linear-gradient(135deg, var(--xp-c1,#2563eb), var(--xp-c2,#7c3aed)));
  color: #fff; border: none; border-radius: 12px;
  padding: .65rem 1rem; font-size: .85rem; font-weight: 700;
  cursor: pointer; font-family: inherit; text-align: center; text-decoration: none;
  transition: opacity .15s ease;
}
.db-kpi-expand-cta:hover { opacity: .9; }

/* ── Web Share button (mobile) ────────────────────────────────────── */
.db-share-btn {
  display: none; /* shown via JS if navigator.share available */
  align-items: center; gap: .3rem;
  padding: .3rem .65rem; border-radius: 8px;
  background: var(--bg-muted); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: background .12s;
  min-height: 44px; touch-action: manipulation;
}
.db-share-btn:hover { background: var(--border); }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-theme-knob, .db-zoom-box, .db-widget-panel, .db-kpi-expand-box,
  .db-kpi-value, .db-focus-bar, .db-idle-icon {
    transition: none !important; animation: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   Profile — Mobile-Native + Web-Responsive Ultra Design
═══════════════════════════════════════════════════════════════════ */

/* ── Page mesh background ─────────────────────────────────────────── */
.main[data-page="profile"] {
  position: relative;
}
.main[data-page="profile"]::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 45% at 15% 20%, rgba(37,99,235,.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(124,58,237,.10) 0%, transparent 55%),
    radial-gradient(ellipse 42% 35% at 65% 25%, rgba(5,150,105,.08) 0%, transparent 50%),
    radial-gradient(ellipse 38% 30% at 30% 85%, rgba(217,119,6,.07) 0%, transparent 48%);
}

/* ── Scroll progress bar ──────────────────────────────────────────── */
.prof-scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg,#2563eb 0%,#7c3aed 40%,#059669 70%,#d97706 100%);
  transform-origin: left; transform: scaleX(0);
  transition: transform .06s linear; pointer-events: none;
}

/* ── Pull-to-refresh ──────────────────────────────────────────────── */
.prof-ptr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 190;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1rem; font-size: .78rem; font-weight: 700;
  background: var(--bg-elev); color: var(--text-muted);
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.prof-ptr.is-pulling { transform: translateY(0); }
.prof-ptr-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand,#2563eb);
  animation: prof-spin .7s linear infinite;
}
@keyframes prof-spin { to { transform: rotate(360deg); } }

/* ── Hero card ────────────────────────────────────────────────────── */
.prof-hero {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  padding: 1.4rem 1.3rem 1.1rem;
  margin-bottom: .85rem;
  position: relative; overflow: hidden;
  animation: prof-in .42s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="dark"] .prof-hero {
  background: rgba(30,41,59,.80);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
@keyframes prof-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.prof-hero__stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,#2563eb,#7c3aed,#059669,#d97706);
}
.prof-hero__top {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem;
}

/* Avatar with completion ring */
.prof-avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 72px; height: 72px;
}
.prof-avatar-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.prof-avatar-ring__bg { fill: none; stroke: var(--border); stroke-width: 3.5; }
.prof-avatar-ring__fg {
  fill: none; stroke: #2563eb; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1s cubic-bezier(.16,1,.3,1) .3s;
}
.prof-avatar-ring__fg.is-drawn { stroke-dasharray: var(--cp) 100; }
.prof-avatar-inner {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.5rem;
  cursor: pointer; transition: transform .18s ease;
  user-select: none;
}
.prof-avatar-inner:hover { transform: scale(1.06); }
.prof-avatar-edit-btn {
  position: absolute; bottom: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand,#2563eb); color: #fff;
  border: 2px solid var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Hero info */
.prof-hero__info { flex: 1; min-width: 0; }
.prof-hero__name {
  font-size: 1.15rem; font-weight: 900; color: var(--text);
  line-height: 1.2; margin-bottom: .18rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-hero__role {
  font-size: .75rem; color: var(--text-muted); font-weight: 600;
  margin-bottom: .35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-hero__badges { display: flex; flex-wrap: wrap; gap: .28rem; }
.prof-badge {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .16rem .48rem; border-radius: 99px;
  font-size: .64rem; font-weight: 700;
  background: rgba(37,99,235,.10); color: #2563eb;
}

/* Completion strip */
.prof-completion {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: .85rem;
}
.prof-completion__track {
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--bg-muted); overflow: hidden;
}
.prof-completion__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg,#2563eb,#7c3aed);
  width: 0; transition: width 1s cubic-bezier(.16,1,.3,1) .4s;
}
.prof-completion__pct {
  font-size: .72rem; font-weight: 800; color: #2563eb; flex-shrink: 0;
}
.prof-completion__label { font-size: .7rem; color: var(--text-muted); }

/* Quick stats row */
.prof-stats-row {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  margin: 0 -.1rem; padding: .1rem;
}
.prof-stats-row::-webkit-scrollbar { display: none; }
.prof-stat-chip {
  display: flex; align-items: center; gap: .32rem;
  padding: .28rem .65rem; border-radius: 10px;
  background: var(--bg-muted); flex-shrink: 0;
  font-size: .7rem;
}
.prof-stat-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.prof-stat-chip__val { font-weight: 800; color: var(--text); }
.prof-stat-chip__lbl { color: var(--text-muted); font-weight: 600; }

/* Hero actions */
.prof-hero__actions {
  display: flex; align-items: center; gap: .45rem; margin-top: .75rem;
  flex-wrap: wrap;
}

/* ── Unsaved changes bar ──────────────────────────────────────────── */
.prof-unsaved-bar {
  position: sticky; top: 0; z-index: 14;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem;
  background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.25);
  border-radius: 12px; margin-bottom: .65rem;
  font-size: .78rem; font-weight: 700; color: #92400e;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.prof-unsaved-bar.is-dirty { opacity: 1; transform: translateY(0); pointer-events: auto; }
[data-theme="dark"] .prof-unsaved-bar { color: #fcd34d; background: rgba(217,119,6,.18); }
.prof-unsaved-discard {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: inherit; font-size: .72rem; font-weight: 700; font-family: inherit;
  text-decoration: underline;
}

/* ── Tab navigation ───────────────────────────────────────────────── */
.prof-tabs-wrap {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  margin-bottom: .85rem;
  overflow: hidden;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] .prof-tabs-wrap {
  background: rgba(30,41,59,.82);
  border-color: rgba(255,255,255,.09);
}
.prof-tabs {
  display: flex; overflow-x: auto; scrollbar-width: none;
  position: relative; padding: 0 .25rem;
}
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab {
  display: flex; align-items: center; gap: .35rem;
  padding: .72rem .9rem; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; flex-shrink: 0;
  border-bottom: 2.5px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  position: relative;
}
.prof-tab.is-active {
  color: var(--brand,#2563eb);
  border-bottom-color: var(--brand,#2563eb);
  font-weight: 700;
}
.prof-tab__icon { font-size: .88rem; line-height: 1; }
.prof-tab__count {
  background: var(--bg-muted); border-radius: 99px;
  padding: .05rem .32rem; font-size: .62rem; font-weight: 800;
}
.prof-tab.is-active .prof-tab__count {
  background: rgba(37,99,235,.12); color: var(--brand,#2563eb);
}

/* ── Section panels ───────────────────────────────────────────────── */
.prof-panel { animation: prof-panel-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes prof-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Glassmorphism form card ──────────────────────────────────────── */
.prof-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  box-shadow: 0 3px 16px rgba(0,0,0,.06);
  overflow: hidden;
  animation: prof-in .38s cubic-bezier(.16,1,.3,1) both;
  margin-bottom: .85rem;
}
[data-theme="dark"] .prof-card {
  background: rgba(30,41,59,.76);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 3px 16px rgba(0,0,0,.28);
}
.prof-card__hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.15rem .65rem;
  font-size: .82rem; font-weight: 800; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.prof-card__hd-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; flex-shrink: 0;
}
.prof-card__body { padding: 1.05rem 1.15rem; }

/* ── Enhanced form fields ─────────────────────────────────────────── */
.prof-field {
  margin-bottom: .85rem; position: relative;
}
.prof-field:last-child { margin-bottom: 0; }
.prof-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .04em;
}
.prof-label__hint { font-size: .67rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.prof-input {
  width: 100%; padding: .58rem .8rem;
  background: var(--bg-muted); border: 1.5px solid transparent;
  border-radius: 10px; font-size: .9rem; color: var(--text);
  font-family: inherit; outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}
.prof-input:focus {
  border-color: var(--brand,#2563eb);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.prof-input.is-valid   { border-color: #059669; }
.prof-input.is-invalid { border-color: #dc2626; }
.prof-input--upper { text-transform: uppercase; letter-spacing: .06em; }
.prof-select {
  width: 100%; padding: .58rem .8rem;
  background: var(--bg-muted); border: 1.5px solid transparent;
  border-radius: 10px; font-size: .9rem; color: var(--text);
  font-family: inherit; outline: none; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
  padding-right: 2.2rem;
}
.prof-select:focus { border-color: var(--brand,#2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.prof-textarea {
  width: 100%; padding: .65rem .8rem;
  background: var(--bg-muted); border: 1.5px solid transparent;
  border-radius: 10px; font-size: .9rem; color: var(--text);
  font-family: inherit; outline: none; resize: vertical; min-height: 82px;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}
.prof-textarea:focus {
  border-color: var(--brand,#2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.prof-field-row { display: flex; gap: .65rem; }
@media (max-width: 520px) { .prof-field-row { flex-direction: column; gap: .45rem; } }
.prof-field-row .prof-field { flex: 1; margin-bottom: 0; }
.prof-char-count {
  position: absolute; bottom: .45rem; right: .7rem;
  font-size: .62rem; color: var(--text-muted); pointer-events: none;
}
.prof-char-count.is-near   { color: #d97706; }
.prof-char-count.is-limit  { color: #dc2626; }

/* Validation message */
.prof-val-msg {
  font-size: .67rem; margin-top: .25rem; font-weight: 600;
  display: none;
}
.prof-val-msg.is-invalid { display: block; color: #dc2626; }
.prof-val-msg.is-valid   { display: block; color: #059669; }

/* Copy icon on sensitive fields */
.prof-copy-wrap { position: relative; }
.prof-copy-btn {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: .2rem; border-radius: 5px;
  transition: color .15s;
}
.prof-copy-btn:hover { color: var(--brand,#2563eb); }

/* ── Save button with loading state ──────────────────────────────── */
.prof-save-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.4rem; border-radius: 11px;
  background: var(--brand,#2563eb); color: #fff;
  border: none; cursor: pointer; font-size: .88rem; font-weight: 700;
  font-family: inherit;
  transition: opacity .18s ease, transform .18s ease;
}
.prof-save-btn:hover { opacity: .9; transform: translateY(-1px); }
.prof-save-btn:active { transform: scale(.97); }
.prof-save-btn.is-loading { opacity: .72; pointer-events: none; }
.prof-save-btn.is-saved { background: #059669; }
.prof-save-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: prof-spin .65s linear infinite; display: none;
}
.prof-save-btn.is-loading .prof-save-spin { display: block; }

/* ── Record list cards (addresses, education, family, business) ───── */
.prof-record-list { display: flex; flex-direction: column; gap: .55rem; }
.prof-record {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .9rem;
  background: var(--bg-muted); border-radius: 14px;
  animation: prof-in .32s cubic-bezier(.16,1,.3,1) both;
  position: relative; overflow: hidden;
}
.prof-record__icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.prof-record__body { flex: 1; min-width: 0; }
.prof-record__title { font-size: .88rem; font-weight: 700; color: var(--text); }
.prof-record__sub   { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; line-height: 1.45; }
.prof-record__badges { display: flex; gap: .28rem; margin-top: .3rem; flex-wrap: wrap; }
.prof-record__badge {
  display: inline-flex; align-items: center; gap: .18rem;
  padding: .1rem .4rem; border-radius: 99px;
  font-size: .62rem; font-weight: 700;
  background: rgba(37,99,235,.10); color: #2563eb;
}
.prof-record__badge--success { background: rgba(5,150,105,.10); color: #059669; }
.prof-record__badge--warn    { background: rgba(217,119,6,.10);  color: #d97706; }
.prof-record__del {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); width: 28px; height: 28px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, color .12s;
}
.prof-record__del:hover { background: rgba(220,38,38,.10); color: #dc2626; }
/* Swipe-to-delete on mobile */
.prof-record-swipe { position: relative; overflow: hidden; border-radius: 14px; }
.prof-record-action {
  position: absolute; right: 0; top: 0; bottom: 0; width: 64px;
  background: #dc2626; border-radius: 0 14px 14px 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .72rem; font-weight: 700;
  opacity: 0; transition: opacity .15s;
}
.prof-record-swipe .prof-record { transition: transform .15s ease; }

/* ── Hobby chip input ─────────────────────────────────────────────── */
.prof-hobby-input-wrap {
  display: flex; gap: .5rem; margin-bottom: .75rem;
}
.prof-hobby-tags { display: flex; flex-wrap: wrap; gap: .38rem; min-height: 32px; }
.prof-hobby-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .65rem .28rem .7rem; border-radius: 99px;
  background: rgba(37,99,235,.10); color: #2563eb;
  font-size: .78rem; font-weight: 700;
  animation: prof-chip-in .22s cubic-bezier(.16,1,.3,1);
  border: 1.5px solid rgba(37,99,235,.18);
}
@keyframes prof-chip-in {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.prof-hobby-chip__del {
  background: none; border: none; cursor: pointer;
  color: rgba(37,99,235,.6); font-size: .75rem; padding: 0;
  line-height: 1; transition: color .12s;
}
.prof-hobby-chip__del:hover { color: #dc2626; }

/* ── AI insight cards ─────────────────────────────────────────────── */
.prof-ai-card {
  background: var(--bg-muted); border-radius: 14px;
  padding: .85rem; margin-bottom: .6rem;
  animation: prof-in .35s cubic-bezier(.16,1,.3,1) both;
}
.prof-ai-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem;
}
.prof-ai-card__type {
  font-size: .78rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: .35rem;
}
.prof-ai-card__conf {
  font-size: .67rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 99px; background: rgba(5,150,105,.12); color: #059669;
}
.prof-ai-card__payload {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 9px; padding: .6rem .75rem;
  font-size: .78rem; font-family: monospace;
  overflow-x: auto; white-space: pre; line-height: 1.5;
  color: var(--text-muted);
}
.prof-ai-card__date {
  font-size: .66rem; color: var(--text-muted); margin-top: .45rem;
}

/* ── Toast ────────────────────────────────────────────────────────── */
.prof-toast {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(14px);
  background: rgba(15,23,42,.95); color: #fff;
  padding: .52rem 1.25rem; border-radius: 99px;
  box-shadow: 0 8px 28px rgba(0,0,0,.26);
  font-size: .8rem; font-weight: 700;
  z-index: 9999; opacity: 0; white-space: nowrap;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.prof-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .prof-toast { background: rgba(248,250,252,.95); color: #0f172a; }

/* ── Avatar color picker (long-press menu) ────────────────────────── */
.prof-avatar-menu {
  position: fixed; z-index: 9000;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 16px; padding: .4rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 160px; display: none;
  animation: db7-cmd-in .16s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .prof-avatar-menu { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.prof-avatar-menu.is-open { display: block; }
.prof-avatar-menu-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .12s;
  background: none; border: none; width: 100%; text-align: left;
}
.prof-avatar-menu-item:hover { background: var(--bg-muted); }
.prof-avatar-colors {
  display: flex; gap: .32rem; flex-wrap: wrap;
  padding: .4rem .7rem .5rem;
}
.prof-avatar-color {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: transform .15s, border-color .15s;
}
.prof-avatar-color:hover, .prof-avatar-color.is-active {
  transform: scale(1.15); border-color: var(--text);
}

/* ── Two-column form grid ─────────────────────────────────────────── */
.prof-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.prof-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .65rem; }
@media (max-width: 560px) {
  .prof-grid-2 { grid-template-columns: 1fr; }
  .prof-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .prof-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Section header ───────────────────────────────────────────────── */
.prof-sec-hd {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .6rem; margin-top: .2rem;
}
.prof-sec-hd__title {
  font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.prof-sec-hd__line {
  flex: 1; height: 1px; background: var(--border);
}

/* ── Network offline banner ──────────────────────────────────────── */
.prof-offline-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 195;
  background: #dc2626; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .42rem 1rem; font-size: .76rem; font-weight: 700;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.prof-offline-bar.is-visible { transform: translateY(0); }

/* ── Stagger entry ────────────────────────────────────────────────── */
.prof-enter {
  opacity: 0; transform: translateY(14px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.prof-enter.is-in { opacity: 1; transform: none; }

/* ── Empty state ──────────────────────────────────────────────────── */
.prof-empty {
  text-align: center; padding: 2rem 1rem;
}
.prof-empty__icon { font-size: 2.2rem; margin-bottom: .55rem; }
.prof-empty__title { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.prof-empty__desc { font-size: .78rem; color: var(--text-muted); }

/* ── Add form bottom section ─────────────────────────────────────── */
.prof-add-hd {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem;
}
.prof-add-hd__title { font-size: .84rem; font-weight: 800; }
.prof-add-toggle {
  background: none; border: 1.5px solid var(--border);
  border-radius: 9px; padding: .28rem .7rem;
  font-size: .74rem; font-weight: 700; color: var(--brand,#2563eb);
  cursor: pointer; margin-left: auto; display: flex; align-items: center; gap: .3rem;
  transition: background .15s;
}
.prof-add-toggle:hover { background: var(--bg-muted); }
.prof-add-form {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.16,1,.3,1);
}
.prof-add-form.is-open { max-height: 1200px; }

/* ── Responsive split layout ─────────────────────────────────────── */
.prof-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
@media (max-width: 680px) {
  .prof-split { grid-template-columns: 1fr; }
}

/* ── Bottom sheet for add forms (mobile) ─────────────────────────── */
.prof-sheet-overlay {
  position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,.4);
  display: none;
}
.prof-sheet-overlay.is-open { display: block; }
.prof-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9801;
  background: var(--bg-elev); border-radius: 24px 24px 0 0;
  padding: 0 1.2rem calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
  max-height: 88vh; overflow-y: auto;
}
.prof-sheet.is-open { transform: translateY(0); }
.prof-sheet__handle {
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--border); margin: .7rem auto .85rem;
}
.prof-sheet__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.prof-sheet__title { font-size: .97rem; font-weight: 800; }
.prof-sheet__close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .prof-hero, .prof-card, .prof-panel, .prof-completion__fill,
  .prof-avatar-ring__fg, .prof-save-btn, .prof-record,
  .prof-hobby-chip, .prof-toast, .prof-enter {
    transition: none !important; animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Profile v2 — Advanced mobile-native + web-responsive enhancements
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Gradient mesh background ─────────────────────────────────────────── */
.main[data-page="profile"]::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(37,99,235,.13) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(124,58,237,.11) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 80%, rgba(5,150,105,.09) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 80% 75%, rgba(217,119,6,.08)  0%, transparent 55%);
}
[data-theme="dark"] .main[data-page="profile"]::before {
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(37,99,235,.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(124,58,237,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 80%, rgba(5,150,105,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 80% 75%, rgba(217,119,6,.12) 0%, transparent 55%);
}

/* ── Floating Action Button ───────────────────────────────────────────── */
.prof-fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  right: 1.2rem;
  z-index: 400;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .52rem;
}
@media (min-width: 900px) { .prof-fab { display: none; } }
.prof-fab__btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand, #2563eb); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(37,99,235,.42);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .2s;
  font-size: 1.4rem; line-height: 1;
}
.prof-fab__btn:active { transform: scale(.92); }
.prof-fab.is-open .prof-fab__btn { transform: rotate(45deg); background: #dc2626; box-shadow: 0 6px 22px rgba(220,38,38,.4); }
.prof-fab__items {
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .42rem;
  visibility: hidden; pointer-events: none; opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility 0s linear .22s;
}
.prof-fab.is-open .prof-fab__items {
  visibility: visible; pointer-events: auto; opacity: 1;
  transform: translateY(0); transition-delay: 0s;
}
.prof-fab__item {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem .42rem .55rem; border-radius: 99px;
  background: var(--bg-elev); color: var(--text);
  box-shadow: 0 3px 14px rgba(0,0,0,.14);
  font-size: .82rem; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s;
  white-space: nowrap;
}
.prof-fab__item:active { transform: scale(.95); }
.prof-fab__item-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(37,99,235,.12); color: var(--brand,#2563eb);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; flex-shrink: 0;
}
[data-theme="dark"] .prof-fab__btn { box-shadow: 0 6px 22px rgba(37,99,235,.55); }

/* ── Bottom sheet (mobile add forms) ─────────────────────────────────── */
.prof-sheet-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background .3s ease;
}
.prof-sheet-overlay.is-open { background: rgba(0,0,0,.42); pointer-events: auto; }
.prof-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9801;
  background: var(--bg-elev); border-radius: 24px 24px 0 0;
  padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
  max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
}
.prof-sheet.is-open { transform: translateY(0); }
.prof-sheet__handle {
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--border); margin: .75rem auto .9rem;
  cursor: grab;
}
.prof-sheet__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .9rem; padding-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.prof-sheet__title { font-size: 1rem; font-weight: 800; }
.prof-sheet__close {
  background: var(--bg-muted); border: none; cursor: pointer;
  color: var(--text-muted); width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background .12s;
}
.prof-sheet__close:hover { background: rgba(220,38,38,.12); color: #dc2626; }

/* ── Avatar zoom overlay ─────────────────────────────────────────────── */
.prof-av-zoom {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(0,0,0,0); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .28s ease;
}
.prof-av-zoom.is-open { background: rgba(0,0,0,.72); pointer-events: auto; }
.prof-av-zoom__inner {
  width: 180px; height: 180px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 5rem; font-weight: 900;
  transform: scale(.2); opacity: 0;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .28s ease;
  cursor: pointer; user-select: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  position: relative;
}
.prof-av-zoom.is-open .prof-av-zoom__inner { transform: scale(1); opacity: 1; }
.prof-av-zoom__close {
  position: absolute; top: -8px; right: -8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: #0f172a; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-weight: 700;
}
.prof-av-zoom__file-hint {
  position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; color: rgba(255,255,255,.75);
  font-size: .72rem; font-weight: 600;
}

/* ── Skeleton shimmer ──────────────────────────────────────────────────── */
.prof-skel {
  background: linear-gradient(90deg, var(--bg-muted) 25%, rgba(255,255,255,.25) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: prof-skel-shimmer 1.4s infinite ease-in-out;
  border-radius: 8px;
}
@keyframes prof-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.prof-skel-hero {
  height: 200px; border-radius: 24px; margin-bottom: .85rem;
}
.prof-skel-tabs {
  height: 48px; border-radius: 18px; margin-bottom: .85rem;
}
.prof-skel-card {
  height: 160px; border-radius: 20px; margin-bottom: .85rem;
}
#profSkelWrap { display: none; }
body.prof-loading #profSkelWrap { display: block; }
body.prof-loading .prof-hero,
body.prof-loading .prof-tabs-wrap,
body.prof-loading .prof-panel { opacity: 0; pointer-events: none; }

/* ── Scroll-to-top button ─────────────────────────────────────────────── */
.prof-top-btn {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  right: 1.2rem;
  z-index: 390;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,.1);
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.prof-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.prof-top-btn:hover { color: var(--brand,#2563eb); border-color: var(--brand,#2563eb); }
@media (min-width: 900px) { .prof-top-btn { right: 2rem; } }

/* ── Auto-save status chip ────────────────────────────────────────────── */
.prof-autosave {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 99px;
  background: var(--bg-muted); color: var(--text-muted);
  transition: background .2s, color .2s;
  margin-left: auto;
}
.prof-autosave--saving { background: rgba(37,99,235,.12); color: #2563eb; }
.prof-autosave--saved  { background: rgba(5,150,105,.12);  color: #059669; }
.prof-autosave-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: prof-spin .6s linear infinite; display: none;
}
.prof-autosave--saving .prof-autosave-spin { display: block; }
@keyframes prof-spin { to { transform: rotate(360deg); } }

/* ── 3D card tilt ─────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .prof-card { transform-style: preserve-3d; perspective: 800px; }
  .prof-card:hover { z-index: 1; }
}

/* ── Confetti particles ───────────────────────────────────────────────── */
.prof-confetti-wrap {
  position: fixed; inset: 0; z-index: 9950;
  pointer-events: none; overflow: hidden;
}
.prof-confetti-piece {
  position: absolute; top: -10px; width: 8px; height: 12px;
  border-radius: 2px; opacity: 0;
  animation: prof-confetti-fall var(--dur, 3s) var(--delay, 0s) ease-in both;
}
@keyframes prof-confetti-fall {
  0%  { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  80% { opacity: 1; }
  100%{ opacity: 0; transform: translateY(110vh) rotate(720deg) scale(.6); }
}

/* ── Milestone toast ──────────────────────────────────────────────────── */
.prof-milestone {
  position: fixed;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(18px);
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff; padding: .65rem 1.5rem;
  border-radius: 99px; box-shadow: 0 10px 30px rgba(124,58,237,.45);
  font-size: .85rem; font-weight: 800; white-space: nowrap;
  z-index: 9998; opacity: 0;
  transition: opacity .25s ease, transform .28s cubic-bezier(.16,1,.3,1);
  pointer-events: none; text-align: center;
}
.prof-milestone.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Tab swipe indicator ──────────────────────────────────────────────── */
.prof-swipe-dots {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .3rem 0 .1rem;
}
@media (min-width: 680px) { .prof-swipe-dots { display: none; } }
.prof-swipe-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: background .2s, width .2s;
}
.prof-swipe-dot.is-active {
  width: 18px; border-radius: 99px;
  background: var(--brand,#2563eb);
}

/* ── Avatar file input ────────────────────────────────────────────────── */
.prof-av-file-input { display: none; }

/* ── Record long-press context menu ──────────────────────────────────── */
.prof-ctx-menu {
  position: fixed; z-index: 9100;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 16px; padding: .35rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 160px; display: none;
  animation: db7-cmd-in .16s cubic-bezier(.16,1,.3,1);
}
.prof-ctx-menu.is-open { display: block; }
.prof-ctx-menu-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .7rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600; color: var(--text);
  cursor: pointer; background: none; border: none;
  width: 100%; text-align: left; font-family: inherit;
  transition: background .12s;
}
.prof-ctx-menu-item:hover { background: var(--bg-muted); }
.prof-ctx-menu-item--danger { color: #dc2626; }
.prof-ctx-menu-item--danger:hover { background: rgba(220,38,38,.08); }

/* ── Print styles ─────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .prof-fab, .prof-top-btn, .prof-tabs-wrap,
  .prof-unsaved-bar, .prof-offline-bar, .prof-ptr, .prof-scroll-bar,
  .prof-avatar-menu, .prof-toast, .prof-milestone, .prof-ctx-menu,
  .prof-hero__actions, .prof-save-btn, .prof-add-toggle,
  .prof-record__del, .prof-add-hd__title + button { display: none !important; }
  body, .app, .main { background: #fff !important; }
  .prof-hero, .prof-card, .prof-ai-card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; background: #fff !important; }
  .prof-completion__fill { transition: none !important; }
  .prof-panel { opacity: 1 !important; }
}

/* ── Responsive: hide scroll bar on small screens ────────────────────── */
@media (max-width: 480px) {
  .prof-hero { padding: 1.1rem 1rem .9rem; }
  .prof-card__body { padding: .85rem .9rem; }
  .prof-grid-3 { grid-template-columns: 1fr 1fr; }
  .prof-stat-chip { padding: .22rem .5rem; font-size: .65rem; }
  .prof-hero__name { font-size: 1rem; }
}

/* ── Tablet: wider tab layout ─────────────────────────────────────────── */
@media (min-width: 680px) and (max-width: 1023px) {
  .prof-split { grid-template-columns: 380px 1fr; }
}

/* ── Desktop: max-width container ────────────────────────────────────── */
@media (min-width: 1024px) {
  .prof-panel > .prof-card,
  .prof-panel > form > .prof-card { max-width: 760px; }
}

/* ── Photo upload avatar overlay button ───────────────────────────────── */
.prof-avatar-inner .prof-avatar-cam {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; opacity: 0; transition: opacity .18s;
  font-size: .6rem; font-weight: 700; cursor: pointer;
}
.prof-avatar-inner:hover .prof-avatar-cam { opacity: 1; }

/* ── Progress ring pulse at 100% ──────────────────────────────────────── */
.prof-avatar-ring__fg.is-complete {
  animation: prof-ring-pulse 2s ease-in-out infinite;
  stroke: #059669;
}
@keyframes prof-ring-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(5,150,105,.4)); }
  50%       { filter: drop-shadow(0 0 9px rgba(5,150,105,.9)); }
}

/* ── Undo toast (wider, action) ───────────────────────────────────────── */
.prof-toast-undo {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(14px);
  background: rgba(15,23,42,.95); color: #fff;
  padding: .52rem .65rem .52rem 1.1rem; border-radius: 99px;
  box-shadow: 0 8px 28px rgba(0,0,0,.26);
  font-size: .78rem; font-weight: 700;
  z-index: 9999; opacity: 0; white-space: nowrap;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  display: flex; align-items: center; gap: .6rem;
}
.prof-toast-undo.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.prof-toast-undo__btn {
  background: rgba(255,255,255,.18); border: none; cursor: pointer;
  color: #fff; font-size: .74rem; font-weight: 800;
  padding: .18rem .55rem; border-radius: 99px; font-family: inherit;
  transition: background .12s;
}
.prof-toast-undo__btn:hover { background: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════════════════════════════════
   Support Admin v1 — Mobile-native + web-responsive design
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Gradient mesh background ─────────────────────────────────────────── */
.main[data-page="support-admin"]::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 10% 15%, rgba(124,58,237,.11) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(37,99,235,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 45% 82%, rgba(5,150,105,.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 78% 78%, rgba(220,38,38,.07) 0%, transparent 55%);
}
[data-theme="dark"] .main[data-page="support-admin"]::before {
  background:
    radial-gradient(ellipse 65% 50% at 10% 15%, rgba(124,58,237,.20) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(37,99,235,.17) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 45% 82%, rgba(5,150,105,.13) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 78% 78%, rgba(220,38,38,.11) 0%, transparent 55%);
}

/* ── Scroll progress bar ──────────────────────────────────────────────── */
.sa-scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg,#7c3aed,#2563eb);
  width: 0; transition: width .08s linear;
  pointer-events: none;
}

/* ── KPI strip ────────────────────────────────────────────────────────── */
.sa-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem; margin-bottom: .9rem;
}
@media (max-width: 700px) { .sa-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .sa-kpi-strip { grid-template-columns: repeat(2, 1fr) 1fr; } }

.sa-kpi {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(200%) blur(18px);
  backdrop-filter: saturate(200%) blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  padding: .85rem .8rem .7rem;
  text-decoration: none; display: block;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.sa-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.sa-kpi.is-active { outline: 2.5px solid var(--sa-c, #7c3aed); outline-offset: 2px; }
.sa-kpi__bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--sa-c, #7c3aed); opacity: .7;
}
.sa-kpi__val {
  font-size: 1.85rem; font-weight: 900; line-height: 1;
  color: var(--sa-c, #7c3aed); margin-bottom: .22rem;
}
.sa-kpi__lbl { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.sa-kpi__trend { font-size: .62rem; color: var(--text-muted); margin-top: .15rem; }
[data-theme="dark"] .sa-kpi {
  background: rgba(30,41,59,.82); border-color: rgba(255,255,255,.09);
}

/* ── Page header bar ──────────────────────────────────────────────────── */
.sa-hd {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  padding: .85rem 1.1rem;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.sa-hd__title { font-size: 1.1rem; font-weight: 900; flex: 1; min-width: 0; }
.sa-hd__badge {
  padding: .18rem .65rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
[data-theme="dark"] .sa-hd { background: rgba(30,41,59,.82); border-color: rgba(255,255,255,.09); }

/* ── Sticky filter bar ────────────────────────────────────────────────── */
.sa-filter-bar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px; padding: .65rem .9rem;
  margin-bottom: .75rem; display: flex; gap: .5rem;
  align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 12;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
[data-theme="dark"] .sa-filter-bar { background: rgba(30,41,59,.82); border-color: rgba(255,255,255,.09); }
.sa-filter-input {
  flex: 1; min-width: 140px; max-width: 210px;
  padding: .46rem .75rem; border-radius: 10px;
  border: 1.5px solid transparent;
  background: var(--bg-muted); color: var(--text);
  font-size: .85rem; font-family: inherit; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.sa-filter-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.sa-filter-select {
  padding: .46rem .65rem; border-radius: 10px;
  border: 1.5px solid transparent; background: var(--bg-muted);
  color: var(--text); font-size: .82rem; font-family: inherit;
  outline: none; cursor: pointer;
  transition: border-color .18s; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; background-size: 10px;
  padding-right: 1.7rem;
}
.sa-filter-select:focus { border-color: #7c3aed; }
.sa-filter-btn {
  padding: .46rem .9rem; border-radius: 10px;
  background: #7c3aed; color: #fff; border: none;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: opacity .15s;
}
.sa-filter-btn:hover { opacity: .88; }
.sa-filter-clear {
  padding: .46rem .7rem; border-radius: 10px;
  background: none; border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
  white-space: nowrap; transition: background .12s;
}
.sa-filter-clear:hover { background: var(--bg-muted); }

/* ── Bulk action bar ──────────────────────────────────────────────────── */
.sa-bulk-bar {
  background: rgba(124,58,237,.06);
  border: 1.5px solid rgba(124,58,237,.22);
  border-radius: 16px; padding: .6rem .9rem;
  margin-bottom: .75rem;
  display: none; align-items: center; gap: .5rem; flex-wrap: wrap;
  animation: sa-slide-in .22s cubic-bezier(.16,1,.3,1);
}
.sa-bulk-bar.is-visible { display: flex; }
@keyframes sa-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sa-bulk-count { font-weight: 800; color: #7c3aed; font-size: .88rem; }
.sa-bulk-btn {
  padding: .28rem .65rem; border-radius: 99px; border: 1.5px solid var(--bc,#7c3aed);
  color: var(--bc,#7c3aed); background: none; cursor: pointer;
  font-size: .74rem; font-weight: 700; font-family: inherit;
  transition: background .12s;
}
.sa-bulk-btn:hover { background: rgba(124,58,237,.08); }

/* ── Ticket list (card-based, mobile-first) ───────────────────────────── */
.sa-ticket-list { display: flex; flex-direction: column; gap: .55rem; }

.sa-ticket-card {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  overflow: hidden; position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: sa-card-in .3s cubic-bezier(.16,1,.3,1) both;
  cursor: pointer;
}
.sa-ticket-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.sa-ticket-card--urgent { border-left: 3px solid #dc2626; }
@keyframes sa-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .sa-ticket-card { background: rgba(30,41,59,.82); border-color: rgba(255,255,255,.09); }

.sa-tc-stripe { height: 3px; }
.sa-tc-body { padding: .75rem .9rem .65rem; }
.sa-tc-row1 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.sa-tc-no { font-size: .72rem; font-weight: 800; color: var(--text-muted); font-family: monospace; }
.sa-tc-subject {
  font-size: .9rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sa-tc-row2 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.sa-tc-from { font-size: .72rem; color: var(--text-muted); }
.sa-tc-row3 { display: flex; align-items: center; gap: .4rem; }
.sa-tc-sla {
  display: flex; align-items: center; gap: .28rem;
  font-size: .7rem; font-weight: 700; margin-left: auto;
}
.sa-tc-msgs { font-size: .7rem; color: var(--text-muted); margin-left: .35rem; }
.sa-tc-ai { font-size: .78rem; }
.sa-tc-cb-wrap { padding: .75rem .6rem .75rem .75rem; display: flex; align-items: center; }
.sa-tc-inner { display: flex; align-items: stretch; }
.sa-tc-chevron {
  display: flex; align-items: center; padding: 0 .75rem 0 .35rem;
  color: var(--text-muted); flex-shrink: 0;
}

/* Swipe-to-open reveal */
.sa-tc-swipe-wrap { position: relative; overflow: hidden; border-radius: 18px; }
.sa-tc-swipe-action {
  position: absolute; left: 0; top: 0; bottom: 0; width: 72px;
  background: #7c3aed; border-radius: 18px 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .2rem; color: #fff;
  font-size: .62rem; font-weight: 700; opacity: 0;
  transition: opacity .15s;
}
.sa-tc-swipe-action svg { flex-shrink: 0; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.sa-empty {
  text-align: center; padding: 3.5rem 1rem;
}
.sa-empty__icon { font-size: 2.5rem; margin-bottom: .65rem; }
.sa-empty__title { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; }
.sa-empty__desc { font-size: .82rem; color: var(--text-muted); }

/* ── Pagination ───────────────────────────────────────────────────────── */
.sa-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.sa-page-btn {
  min-width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--border); color: var(--text-muted);
  background: var(--bg-elev); transition: all .14s;
}
.sa-page-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.sa-page-btn.is-active {
  background: #7c3aed; border-color: #7c3aed; color: #fff;
}

/* ── Quick-filter pill bar (below header, mobile-scroll) ─────────────── */
.sa-qf-row {
  display: flex; gap: .38rem; overflow-x: auto; scrollbar-width: none;
  margin-bottom: .75rem; padding: .1rem .05rem;
}
.sa-qf-row::-webkit-scrollbar { display: none; }
.sa-qf-pill {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .3rem .75rem; border-radius: 99px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  text-decoration: none; border: 1.5px solid var(--border);
  background: var(--bg-elev); color: var(--text-muted);
  flex-shrink: 0; transition: all .14s;
}
.sa-qf-pill:hover, .sa-qf-pill.is-active { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.08); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.sa-toast {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(14px);
  background: rgba(15,23,42,.95); color: #fff;
  padding: .52rem 1.2rem; border-radius: 99px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .22s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 8px 28px rgba(0,0,0,.26);
}
.sa-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Keyboard shortcut overlay ────────────────────────────────────────── */
.sa-kbd-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
}
.sa-kbd-overlay.is-open { display: flex; }
.sa-kbd-panel {
  background: var(--bg-elev); border-radius: 22px;
  padding: 1.5rem 2rem; width: min(500px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.sa-kbd-panel h3 { margin: 0 0 1rem; font-size: 1rem; }
.sa-kbd-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.sa-kbd-row:last-child { border: none; }
.sa-kbd-key { display: inline-flex; align-items: center; gap: .25rem; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 .4rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 5px; font-size: .72rem; font-weight: 700;
  font-family: monospace; color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Scroll-to-top ────────────────────────────────────────────────────── */
.sa-top-btn {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 1.2rem;
  z-index: 390;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,.1);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.sa-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sa-top-btn:hover { color: #7c3aed; border-color: #7c3aed; }

/* ════════════════════════════════════════════════════════════════════════
   Support Admin — SHOW (ticket detail)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Ticket hero header ───────────────────────────────────────────────── */
.sa-ticket-hero {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  padding: 1.1rem 1.2rem .9rem;
  margin-bottom: .85rem; position: relative; overflow: hidden;
  animation: sa-hero-in .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sa-hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sa-ticket-hero__stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sa-ticket-hero__top { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .55rem; }
.sa-ticket-hero__back {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; padding: .25rem .55rem;
  background: var(--bg-muted); border-radius: 8px;
  transition: color .14s; flex-shrink: 0;
}
.sa-ticket-hero__back:hover { color: var(--text); }
.sa-ticket-hero__no { font-size: .78rem; font-weight: 800; font-family: monospace; color: var(--text-muted); }
.sa-ticket-hero__subject { font-size: 1.1rem; font-weight: 900; margin: .3rem 0 .4rem; line-height: 1.3; }
.sa-ticket-hero__meta { font-size: .77rem; color: var(--text-muted); }
.sa-ticket-hero__actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .65rem; align-items: center; }
[data-theme="dark"] .sa-ticket-hero { background: rgba(30,41,59,.84); border-color: rgba(255,255,255,.09); }

/* Quick status chips */
.sa-status-chip {
  padding: .28rem .7rem; border-radius: 99px; border: 1.5px solid transparent;
  font-size: .72rem; font-weight: 700; cursor: pointer;
  transition: all .15s; white-space: nowrap;
  background: none; font-family: inherit;
}
.sa-status-chip:hover { transform: scale(1.04); }

/* ── Detail layout ────────────────────────────────────────────────────── */
.sa-detail-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: .85rem; align-items: start;
}
@media (max-width: 780px) {
  .sa-detail-grid { grid-template-columns: 1fr; }
}

/* ── Message thread ───────────────────────────────────────────────────── */
.sa-thread-wrap {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
}
[data-theme="dark"] .sa-thread-wrap { background: rgba(30,41,59,.80); border-color: rgba(255,255,255,.09); }
.sa-thread-hd {
  padding: .65rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between;
}

.sa-msg {
  padding: .9rem 1.05rem;
  border-bottom: 1px solid var(--border);
  animation: sa-msg-in .28s cubic-bezier(.16,1,.3,1) both;
}
.sa-msg:last-child { border-bottom: none; }
@keyframes sa-msg-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sa-msg--agent   { background: rgba(37,99,235,.04); }
.sa-msg--ai      { background: rgba(16,185,129,.04); }
.sa-msg--system  { background: rgba(100,116,139,.04); }
.sa-msg--internal{ border-left: 3px solid #d97706; background: rgba(217,119,6,.03); }
.sa-msg--user    { background: transparent; }

.sa-msg__hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; flex-wrap: wrap; }
.sa-msg__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; flex-shrink: 0;
}
.sa-msg__icon--user   { background: rgba(37,99,235,.12); }
.sa-msg__icon--agent  { background: rgba(37,99,235,.18); }
.sa-msg__icon--ai     { background: rgba(16,185,129,.15); }
.sa-msg__icon--system { background: rgba(100,116,139,.12); }
.sa-msg__sender { font-size: .82rem; font-weight: 700; }
.sa-msg__time   { font-size: .7rem; color: var(--text-muted); margin-left: auto; }
.sa-msg__body   { font-size: .9rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.sa-msg__actions {
  display: flex; gap: .35rem; margin-top: .45rem; opacity: 0;
  transition: opacity .15s;
}
.sa-msg:hover .sa-msg__actions { opacity: 1; }
.sa-msg__act-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .18rem .45rem; font-size: .68rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.sa-msg__act-btn:hover { background: var(--bg-muted); color: var(--text); }

/* ── AI suggestion card ───────────────────────────────────────────────── */
.sa-ai-card {
  background: rgba(16,185,129,.05);
  border: 1.5px solid rgba(16,185,129,.22);
  border-radius: 18px; padding: .9rem 1.05rem;
  margin-top: .75rem;
  animation: sa-card-in .35s cubic-bezier(.16,1,.3,1) both;
}
.sa-ai-card__hd { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; flex-wrap: wrap; }
.sa-ai-card__title { font-size: .85rem; font-weight: 800; }
.sa-ai-card__conf { padding: .12rem .4rem; border-radius: 99px; font-size: .66rem; font-weight: 700; background: rgba(16,185,129,.12); color: #065f46; }
.sa-ai-card__body { font-size: .85rem; background: var(--bg-muted); border-radius: 10px; padding: .65rem .8rem; white-space: pre-wrap; max-height: 150px; overflow-y: auto; line-height: 1.65; color: var(--text-muted); margin-bottom: .65rem; }

/* ── Reply composer ───────────────────────────────────────────────────── */
.sa-reply-card {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(0,0,0,.07);
  padding: 1rem 1.1rem;
  margin-top: .75rem;
}
[data-theme="dark"] .sa-reply-card { background: rgba(30,41,59,.84); border-color: rgba(255,255,255,.09); }
.sa-reply-card__hd { font-size: .82rem; font-weight: 800; margin-bottom: .65rem; display: flex; align-items: center; gap: .5rem; }
.sa-reply-textarea {
  width: 100%; padding: .7rem .85rem;
  background: var(--bg-muted); border: 1.5px solid transparent;
  border-radius: 12px; font-size: .9rem; color: var(--text);
  font-family: inherit; outline: none; resize: none;
  min-height: 90px; max-height: 320px;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box; overflow-y: hidden;
}
.sa-reply-textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.sa-reply-footer { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .65rem; }
.sa-reply-check { display: flex; align-items: center; gap: .35rem; font-size: .8rem; cursor: pointer; }
.sa-reply-check input { width: 15px; height: 15px; accent-color: #7c3aed; cursor: pointer; }
.sa-reply-send {
  margin-left: auto; padding: .52rem 1.2rem; border-radius: 11px;
  background: #7c3aed; color: #fff; border: none;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; gap: .4rem;
  transition: opacity .15s, transform .15s;
}
.sa-reply-send:hover { opacity: .9; transform: translateY(-1px); }
.sa-reply-send:active { transform: scale(.97); }
.sa-reply-send.is-loading { opacity: .7; pointer-events: none; }
.sa-reply-hint { font-size: .68rem; color: var(--text-muted); }

/* ── Info sidebar card ────────────────────────────────────────────────── */
.sa-info-card {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  overflow: hidden;
}
[data-theme="dark"] .sa-info-card { background: rgba(30,41,59,.80); border-color: rgba(255,255,255,.09); }
.sa-info-card__hd {
  padding: .65rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.sa-info-card__body { padding: .8rem 1rem; }
.sa-info-row { display: flex; align-items: center; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; gap: .5rem; }
.sa-info-row:last-child { border: none; }
.sa-info-lbl { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.sa-info-val { font-weight: 700; text-align: right; min-width: 0; word-break: break-all; }

/* ── Mobile bottom sheet for sidebar info (mobile) ────────────────────── */
@media (max-width: 780px) {
  .sa-detail-sidebar { display: none; }
  .sa-sidebar-trigger {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; color: #7c3aed;
    background: rgba(124,58,237,.08); border: none;
    border-radius: 10px; padding: .35rem .75rem;
    cursor: pointer; font-family: inherit;
  }
}
@media (min-width: 781px) { .sa-sidebar-trigger { display: none; } }

/* ── Mobile: sticky reply FAB ─────────────────────────────────────────── */
.sa-reply-fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  right: 1.2rem; z-index: 400;
  width: 52px; height: 52px; border-radius: 50%;
  background: #7c3aed; color: #fff; border: none;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 22px rgba(124,58,237,.42);
  font-size: 1.3rem; transition: transform .2s;
}
.sa-reply-fab:active { transform: scale(.92); }
@media (max-width: 780px) { .sa-reply-fab { display: flex; } }

/* ── Sheet (shared, used for sidebar on mobile + reply on mobile) ─────── */
.sa-sheet-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background .3s;
}
.sa-sheet-overlay.is-open { background: rgba(0,0,0,.42); pointer-events: auto; }
.sa-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9701;
  background: var(--bg-elev); border-radius: 24px 24px 0 0;
  padding: 0 1.2rem calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
  max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
}
.sa-sheet.is-open { transform: translateY(0); }
.sa-sheet__handle { width: 38px; height: 4px; border-radius: 99px; background: var(--border); margin: .75rem auto .85rem; cursor: grab; }
.sa-sheet__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.sa-sheet__title { font-size: .97rem; font-weight: 800; }
.sa-sheet__close { background: var(--bg-muted); border: none; cursor: pointer; color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; }

/* ── Print styles ─────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .sa-filter-bar, .sa-bulk-bar,
  .sa-kpi-strip, .sa-qf-row, .sa-top-btn, .sa-toast,
  .sa-kbd-overlay, .sa-reply-fab, .sa-sheet-overlay, .sa-sheet,
  .sa-ticket-hero__actions button, .sa-msg__actions,
  .sa-reply-card, .sa-ai-card form { display: none !important; }
  .sa-ticket-card { box-shadow: none; border: 1px solid #e2e8f0; background: #fff; }
  .sa-thread-wrap, .sa-info-card { box-shadow: none; border: 1px solid #e2e8f0; background: #fff; }
  .sa-detail-grid { grid-template-columns: 1fr 220px; }
  .sa-detail-sidebar { display: block !important; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sa-kpi, .sa-ticket-card, .sa-msg, .sa-toast, .sa-sheet { animation: none !important; transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE  ·  _notif1.css
   ════════════════════════════════════════════════════════════════ */

/* ── Gradient mesh background ───────────────────────────────── */
.main[data-page="notifications"]::before {
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 56% at 8%  12%, rgba(99,102,241,.13) 0%, transparent 70%),
    radial-gradient(ellipse 60% 48% at 92% 20%, rgba(16,185,129,.10) 0%, transparent 70%),
    radial-gradient(ellipse 80% 64% at 50% 88%, rgba(245,158,11,.08) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 78% 68%, rgba(236,72,153,.07) 0%, transparent 70%),
    var(--bg);
}

/* ── KPI strip ───────────────────────────────────────────────── */
.nf-kpi-strip {
  display:flex;gap:.65rem;margin-bottom:1rem;flex-wrap:wrap;
}
.nf-kpi {
  flex:1 1 120px;min-width:0;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(200%) blur(18px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:.75rem 1rem;
  display:flex;align-items:center;gap:.65rem;
}
.nf-kpi__icon {
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;flex-shrink:0;
}
.nf-kpi__val { font-size:1.45rem;font-weight:800;line-height:1; }
.nf-kpi__lbl { font-size:.68rem;font-weight:600;text-transform:uppercase;
               letter-spacing:.05em;color:var(--text-muted);margin-top:.12rem; }
.nf-kpi--unread .nf-kpi__icon { background:rgba(37,99,235,.12);color:#2563eb; }
.nf-kpi--today  .nf-kpi__icon { background:rgba(16,185,129,.12);color:#059669; }
.nf-kpi--total  .nf-kpi__icon { background:rgba(99,102,241,.12);color:#6366f1; }

/* ── Page header ─────────────────────────────────────────────── */
.nf-hd {
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;
}
.nf-hd__title { font-size:1.22rem;font-weight:800;flex:1;min-width:0; }
.nf-hd__sub   { font-size:.8rem;color:var(--text-muted);font-weight:500; }
.nf-hd__actions { display:flex;gap:.45rem;flex-shrink:0;align-items:center; }
.nf-mark-all-btn {
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.38rem .8rem;border-radius:99px;font-size:.75rem;font-weight:700;
  background:rgba(37,99,235,.1);color:#2563eb;border:none;cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.nf-mark-all-btn:hover { background:rgba(37,99,235,.18); }
.nf-kbd-btn {
  width:32px;height:32px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.7);cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-size:.82rem;color:var(--text-muted);
  backdrop-filter:blur(8px);transition:background .15s;flex-shrink:0;
}
.nf-kbd-btn:hover { background:rgba(255,255,255,.95);color:var(--text); }

/* ── Filter pill tabs ────────────────────────────────────────── */
.nf-filter-row {
  display:flex;gap:.45rem;margin-bottom:1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.nf-filter-row::-webkit-scrollbar { display:none; }
.nf-filter-pill {
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  padding:.35rem .9rem;border-radius:99px;font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.7);border:1.5px solid transparent;
  color:var(--text-muted);text-decoration:none;transition:all .15s;flex-shrink:0;
  backdrop-filter:blur(8px);
}
.nf-filter-pill:hover { background:rgba(255,255,255,.9);color:var(--text); }
.nf-filter-pill.is-active {
  background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.25);
  color:#2563eb;
}
.nf-filter-pill__cnt {
  background:rgba(37,99,235,.15);color:#2563eb;
  padding:.05rem .38rem;border-radius:99px;font-size:.65rem;font-weight:800;
  min-width:18px;text-align:center;
}
.nf-filter-pill.is-active .nf-filter-pill__cnt {
  background:#2563eb;color:#fff;
}

/* ── Date group heading ──────────────────────────────────────── */
.nf-date-hd {
  display:flex;align-items:center;gap:.6rem;
  margin:.85rem 0 .45rem;
}
.nf-date-hd__label {
  font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-muted);white-space:nowrap;flex-shrink:0;
}
.nf-date-hd__line {
  flex:1;height:1px;background:var(--border);opacity:.7;
}

/* ── Notification card ───────────────────────────────────────── */
.nf-list { display:flex;flex-direction:column;gap:.5rem; }
.nf-card-wrap { position:relative;overflow:hidden;border-radius:16px; }
.nf-card-swipe-bg {
  position:absolute;inset:0;border-radius:16px;z-index:0;
  display:flex;align-items:center;padding:0 1.2rem;
  font-size:.75rem;font-weight:700;gap:.4rem;pointer-events:none;
}
.nf-card-swipe-bg--read  { background:rgba(16,185,129,.15);color:#059669;justify-content:flex-end; }
.nf-card-swipe-bg--open  { background:rgba(37,99,235,.12);color:#2563eb;justify-content:flex-start; }
.nf-card {
  position:relative;z-index:1;
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.85rem 1rem;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .3s;
  cursor:pointer;
  user-select:none;
  opacity:0;
  transform:translateY(14px);
}
.nf-card.is-in { opacity:1;transform:translateY(0); }
.nf-card.is-swiping { transition:transform .08s linear; }
.nf-card--unread { border-left:3px solid var(--brand,#2563eb); }
.nf-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); }
.nf-card:active { transform:scale(.985); }

/* Level accent stripe on left edge */
.nf-card--success { border-left-color:#16a34a; }
.nf-card--warning { border-left-color:#d97706; }
.nf-card--danger  { border-left-color:#dc2626; }
.nf-card--info    { border-left-color:#2563eb; }

/* Read state: dimmed */
.nf-card--read { opacity:.7 !important; }
.nf-card--read:hover { opacity:1 !important; }

/* ── Type icon bubble ────────────────────────────────────────── */
.nf-icon {
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  position:relative;
}
.nf-icon--payment  { background:rgba(16,185,129,.13);color:#059669; }
.nf-icon--purchase { background:rgba(37,99,235,.12); color:#2563eb; }
.nf-icon--emi      { background:rgba(245,158,11,.13);color:#d97706; }
.nf-icon--referral { background:rgba(124,58,237,.12);color:#7c3aed; }
.nf-icon--support  { background:rgba(236,72,153,.12);color:#db2777; }
.nf-icon--ledger   { background:rgba(107,114,128,.12);color:#6b7280; }
.nf-icon--reminder { background:rgba(249,115,22,.12);color:#ea580c; }
.nf-icon--system   { background:rgba(99,102,241,.12);color:#6366f1; }
.nf-icon--default  { background:rgba(99,102,241,.12);color:#6366f1; }
/* Unread dot badge on icon */
.nf-icon__dot {
  position:absolute;top:2px;right:2px;
  width:10px;height:10px;border-radius:50%;
  background:#2563eb;border:2px solid #fff;
}

/* ── Card body ───────────────────────────────────────────────── */
.nf-card__body { flex:1;min-width:0; }
.nf-card__title {
  font-size:.88rem;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:.18rem;
}
.nf-card__text {
  font-size:.78rem;color:var(--text-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:.3rem;
}
.nf-card__meta {
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.2rem;
}
.nf-card__time { font-size:.7rem;color:var(--text-faint,#94a3b8);font-weight:500; }
.nf-card__type-pill {
  font-size:.62rem;font-weight:700;padding:.06rem .4rem;border-radius:99px;
  background:rgba(99,102,241,.1);color:#6366f1;text-transform:uppercase;
  letter-spacing:.04em;
}
.nf-card__level-pill {
  font-size:.62rem;font-weight:700;padding:.06rem .4rem;border-radius:99px;
  text-transform:capitalize;
}
.nf-card__level-pill--success { background:rgba(16,185,129,.12);color:#059669; }
.nf-card__level-pill--warning { background:rgba(245,158,11,.12);color:#d97706; }
.nf-card__level-pill--danger  { background:rgba(220,38,38,.12); color:#dc2626; }
.nf-card__level-pill--info    { background:rgba(37,99,235,.1);  color:#2563eb; }

/* ── Card right actions ──────────────────────────────────────── */
.nf-card__right {
  display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;flex-shrink:0;
}
.nf-card__open-btn {
  display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;
  border-radius:99px;font-size:.68rem;font-weight:700;
  background:rgba(37,99,235,.1);color:#2563eb;border:none;cursor:pointer;
  text-decoration:none;transition:background .15s;white-space:nowrap;
}
.nf-card__open-btn:hover { background:rgba(37,99,235,.2); }
.nf-read-btn {
  width:26px;height:26px;border-radius:99px;border:none;cursor:pointer;
  background:rgba(0,0,0,.06);color:var(--text-muted);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.nf-read-btn:hover { background:rgba(16,185,129,.18);color:#059669; }

/* ── Empty state ─────────────────────────────────────────────── */
.nf-empty {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3.5rem 1rem;text-align:center;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65);
  border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.nf-empty__icon { font-size:3rem;margin-bottom:.75rem;opacity:.55; }
.nf-empty__title { font-size:1.05rem;font-weight:700;margin-bottom:.3rem; }
.nf-empty__desc  { font-size:.82rem;color:var(--text-muted);max-width:240px; }

/* ── Scroll progress bar ─────────────────────────────────────── */
.nf-scroll-bar {
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,#6366f1,#2563eb,#059669);
  width:0%;transition:width .1s linear;border-radius:0 2px 2px 0;
  pointer-events:none;
}

/* ── FAB (mobile) ────────────────────────────────────────────── */
.nf-fab {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);right:1.1rem;
  z-index:300;
  width:52px;height:52px;border-radius:99px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#2563eb);
  color:#fff;font-size:1.2rem;
  box-shadow:0 8px 24px rgba(99,102,241,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.nf-fab:active { transform:scale(.92); }
@media (min-width:900px) { .nf-fab { display:none; } }

/* ── Toast ───────────────────────────────────────────────────── */
.nf-toast {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
  left:50%;transform:translateX(-50%) translateY(12px);
  background:rgba(15,23,42,.88);backdrop-filter:blur(16px);
  color:#fff;padding:.55rem 1.1rem;border-radius:99px;
  font-size:.8rem;font-weight:600;white-space:nowrap;
  z-index:500;pointer-events:none;opacity:0;
  transition:opacity .22s, transform .22s;
}
.nf-toast.is-visible { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Context menu ────────────────────────────────────────────── */
.nf-ctx {
  position:fixed;z-index:600;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(200%) blur(20px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.15);
  min-width:170px;overflow:hidden;
  opacity:0;transform:scale(.92);pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.nf-ctx.is-open { opacity:1;transform:scale(1);pointer-events:auto; }
.nf-ctx-item {
  display:flex;align-items:center;gap:.55rem;
  padding:.62rem .9rem;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background .12s;
}
.nf-ctx-item:hover { background:rgba(99,102,241,.08); }
.nf-ctx-item--danger { color:#dc2626; }
.nf-ctx-item--danger:hover { background:rgba(220,38,38,.07); }

/* ── Keyboard shortcut overlay ───────────────────────────────── */
.nf-kbd-overlay {
  position:fixed;inset:0;z-index:700;
  background:rgba(15,23,42,.62);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.nf-kbd-overlay.is-open { display:flex; }
.nf-kbd-box {
  background:rgba(255,255,255,.96);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  padding:1.5rem;max-width:380px;width:100%;
}
.nf-kbd-box__title { font-size:1rem;font-weight:800;margin-bottom:1rem; }
.nf-kbd-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.82rem;
}
.nf-kbd-row:last-child { border-bottom:none; }
.nf-kbd-key {
  display:inline-flex;align-items:center;justify-content:center;
  padding:.18rem .5rem;border-radius:6px;
  background:rgba(99,102,241,.1);color:#6366f1;
  font-size:.75rem;font-weight:700;font-family:monospace;border:1px solid rgba(99,102,241,.2);
}

/* ── Scroll-to-top ───────────────────────────────────────────── */
.nf-top-btn {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 138px);right:1.1rem;
  z-index:290;width:38px;height:38px;border-radius:99px;border:none;cursor:pointer;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);color:var(--text-muted);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  transform:translateY(8px);
}
.nf-top-btn.is-visible { opacity:1;pointer-events:auto;transform:translateY(0); }
@media (min-width:900px) {
  .nf-top-btn { bottom:1.5rem; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .nf-fab,.nf-top-btn,.nf-toast,.nf-ctx,.nf-kbd-overlay,
  .nf-scroll-bar,.nf-kpi-strip,.nf-filter-row { display:none !important; }
  .nf-card { box-shadow:none;border:1px solid #ddd;border-radius:4px; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:480px) {
  .nf-kpi { padding:.6rem .75rem; }
  .nf-kpi__val { font-size:1.2rem; }
  .nf-card { padding:.7rem .8rem;gap:.65rem; }
  .nf-icon { width:38px;height:38px;font-size:1rem; }
}
/* ════════════════════════════════════════════════════════════════
   PLOTS PAGE  ·  _plots1.css
   ════════════════════════════════════════════════════════════════ */

/* ── Gradient mesh background ───────────────────────────────── */
.main[data-page="plots"]::before {
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 5%  15%, rgba(16,185,129,.12)  0%,transparent 68%),
    radial-gradient(ellipse 65% 50% at 95% 18%, rgba(37,99,235,.10)   0%,transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(245,158,11,.09)  0%,transparent 68%),
    radial-gradient(ellipse 55% 45% at 80% 65%, rgba(99,102,241,.08)  0%,transparent 68%),
    var(--bg);
}

/* ── Scroll progress bar ─────────────────────────────────────── */
.pl-scroll-bar {
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,#10b981,#2563eb,#f59e0b);
  width:0%;transition:width .1s linear;border-radius:0 2px 2px 0;pointer-events:none;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.pl-kpi-strip {
  display:flex;gap:.6rem;margin-bottom:1rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.pl-kpi-strip::-webkit-scrollbar { display:none; }
.pl-kpi {
  flex:0 0 auto;min-width:110px;
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.68);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:.75rem .95rem;
  display:flex;align-items:center;gap:.6rem;
  transition:transform .15s;cursor:default;
}
.pl-kpi:hover { transform:translateY(-2px); }
.pl-kpi__icon {
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.pl-kpi__val { font-size:1.35rem;font-weight:800;line-height:1; }
.pl-kpi__lbl { font-size:.67rem;font-weight:600;text-transform:uppercase;
               letter-spacing:.05em;color:var(--text-muted);margin-top:.1rem; }
.pl-kpi--total   .pl-kpi__icon { background:rgba(99,102,241,.12);color:#6366f1; }
.pl-kpi--avail   .pl-kpi__icon { background:rgba(16,185,129,.12);color:#059669; }
.pl-kpi--res     .pl-kpi__icon { background:rgba(245,158,11,.12);color:#d97706; }
.pl-kpi--sold    .pl-kpi__icon { background:rgba(220,38,38,.10); color:#dc2626; }
.pl-kpi--price   .pl-kpi__icon { background:rgba(37,99,235,.10); color:#2563eb; }
.pl-kpi--appr    .pl-kpi__icon { background:rgba(16,185,129,.10);color:#059669; }

/* ── Page header ─────────────────────────────────────────────── */
.pl-hd {
  display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.pl-hd__title { font-size:1.22rem;font-weight:800;flex:1;min-width:0; }
.pl-hd__sub   { font-size:.8rem;color:var(--text-muted);font-weight:500; }
.pl-hd__actions { display:flex;gap:.45rem;flex-shrink:0;align-items:center; }

/* ── Glassmorphism filter card ───────────────────────────────── */
.pl-filter-card {
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  padding:1rem;
  margin-bottom:.85rem;
  transition:box-shadow .2s;
}
.pl-filter-row {
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
}
.pl-filter-search {
  flex:2;min-width:min(200px,100%);
  border:1.5px solid rgba(99,102,241,.25);
  border-radius:12px;padding:.5rem .85rem;font-size:.88rem;
  background:rgba(255,255,255,.7);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.pl-filter-search:focus {
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.pl-filter-select {
  flex:1;min-width:min(130px,100%);
  border:1.5px solid rgba(99,102,241,.18);
  border-radius:12px;padding:.48rem .75rem;font-size:.85rem;
  background:rgba(255,255,255,.7);outline:none;cursor:pointer;
  transition:border-color .15s;
}
.pl-filter-select:focus { border-color:#6366f1; }
.pl-adv-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.65rem;padding-top:.75rem;border-top:1px solid rgba(0,0,0,.06);margin-top:.75rem;
}
.pl-adv-label { font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:.25rem; }
.pl-adv-input {
  width:100%;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;
  padding:.4rem .65rem;font-size:.82rem;background:rgba(255,255,255,.7);outline:none;
  transition:border-color .15s;
}
.pl-adv-input:focus { border-color:#6366f1; }

/* ── Quick filter chip row ───────────────────────────────────── */
.pl-chip-row {
  display:flex;gap:.4rem;margin-top:.65rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.pl-chip-row::-webkit-scrollbar { display:none; }
.pl-chip {
  display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;flex-shrink:0;
  padding:.28rem .75rem;border-radius:99px;font-size:.74rem;font-weight:700;
  border:1.5px solid rgba(99,102,241,.18);color:var(--text-muted);text-decoration:none;
  background:rgba(255,255,255,.65);backdrop-filter:blur(8px);
  transition:all .15s;
}
.pl-chip:hover { background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);color:#6366f1; }
.pl-chip--clear { border-color:rgba(220,38,38,.25);color:#dc2626;background:rgba(220,38,38,.05); }
.pl-chip--clear:hover { background:rgba(220,38,38,.1);border-color:#dc2626; }

/* ── Toolbar row ─────────────────────────────────────────────── */
.pl-toolbar {
  display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.pl-toolbar__left  { display:flex;align-items:center;gap:.55rem;flex:1;min-width:0; }
.pl-toolbar__right { display:flex;align-items:center;gap:.45rem;flex-shrink:0; }
.pl-result-count   { font-size:.82rem;color:var(--text-muted);white-space:nowrap; }
.pl-result-count strong { color:var(--text);font-weight:700; }
.pl-view-toggle {
  display:inline-flex;background:rgba(255,255,255,.75);
  border:1.5px solid rgba(99,102,241,.2);border-radius:12px;overflow:hidden;
}
.pl-view-btn {
  padding:.32rem .75rem;font-size:.76rem;font-weight:700;
  text-decoration:none;color:var(--text-muted);
  transition:background .12s,color .12s;white-space:nowrap;
}
.pl-view-btn:hover  { background:rgba(99,102,241,.08);color:#6366f1; }
.pl-view-btn.is-active { background:rgba(99,102,241,.15);color:#6366f1; }
.pl-sort-select {
  border:1.5px solid rgba(99,102,241,.18);border-radius:12px;
  padding:.32rem .65rem;font-size:.78rem;background:rgba(255,255,255,.75);
  outline:none;cursor:pointer;color:var(--text);
}
.pl-action-btn {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .8rem;border-radius:12px;font-size:.76rem;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.pl-action-btn--ghost { background:rgba(255,255,255,.75);color:var(--text-muted);border:1.5px solid rgba(0,0,0,.1); }
.pl-action-btn--ghost:hover { background:rgba(255,255,255,.95);color:var(--text); }
.pl-action-btn--primary { background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3); }
.pl-action-btn--primary:hover { background:#1d4ed8; }
.pl-action-btn--map { background:rgba(16,185,129,.1);color:#059669;border:1.5px solid rgba(16,185,129,.2); }
.pl-action-btn--map:hover { background:rgba(16,185,129,.18); }

/* ── Bulk action bar ─────────────────────────────────────────── */
.pl-bulk-bar {
  background:rgba(37,99,235,.08);
  backdrop-filter:blur(14px);
  border:1.5px solid rgba(37,99,235,.25);
  border-radius:16px;padding:.7rem 1rem;
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  margin-bottom:.85rem;
  animation:pl-bulk-in .2s ease-out;
}
.pl-bulk-bar.is-hidden { display:none; }
@keyframes pl-bulk-in {
  from { opacity:0;transform:translateY(-6px); }
  to   { opacity:1;transform:translateY(0); }
}
.pl-bulk-count { font-size:.85rem;font-weight:800;color:#2563eb; }

/* ── Plot GRID card ──────────────────────────────────────────── */
.pl-card-wrap { position:relative;overflow:hidden;border-radius:20px; }
.pl-card-swipe-bg {
  position:absolute;inset:0;border-radius:20px;z-index:0;
  display:flex;align-items:center;padding:0 1.2rem;
  font-size:.75rem;font-weight:700;gap:.4rem;pointer-events:none;
}
.pl-card-swipe-bg--view { background:rgba(37,99,235,.13);color:#2563eb;justify-content:flex-start; }
.pl-card {
  position:relative;z-index:1;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px;
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .35s;
  opacity:0;transform:translateY(16px);
  cursor:pointer;
  overflow:hidden;
  will-change:transform;
}
.pl-card.is-in { opacity:1;transform:translateY(0); }
.pl-card:hover { box-shadow:0 12px 32px rgba(0,0,0,.12); }

/* Status stripe top */
.pl-card__stripe {
  height:4px;width:100%;flex-shrink:0;border-radius:20px 20px 0 0;
}
.pl-card__stripe--available { background:linear-gradient(90deg,#10b981,#34d399); }
.pl-card__stripe--reserved  { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.pl-card__stripe--sold      { background:linear-gradient(90deg,#ef4444,#f87171); }
.pl-card__stripe--draft     { background:linear-gradient(90deg,#94a3b8,#cbd5e1); }
.pl-card__stripe--hold      { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
.pl-card__stripe--retired   { background:linear-gradient(90deg,#6b7280,#9ca3af); }

.pl-card__body { padding:.9rem 1rem; }
.pl-card__top {
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:.55rem;gap:.4rem;
}
.pl-card__badges { display:flex;gap:.35rem;align-items:center;flex-wrap:wrap; }
.pl-badge {
  display:inline-flex;align-items:center;padding:.14rem .48rem;
  border-radius:99px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.pl-badge--auth    { background:rgba(99,102,241,.1);color:#6366f1; }
.pl-badge--avail   { background:rgba(16,185,129,.12);color:#059669; }
.pl-badge--reserved{ background:rgba(245,158,11,.12);color:#d97706; }
.pl-badge--sold    { background:rgba(220,38,38,.1);  color:#dc2626; }
.pl-badge--draft   { background:rgba(148,163,184,.15);color:#64748b; }
.pl-badge--hold    { background:rgba(139,92,246,.1); color:#7c3aed; }
.pl-badge--retired { background:rgba(107,114,128,.12);color:#6b7280; }
.pl-card__star {
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  font-size:.95rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s;flex-shrink:0;
}
.pl-card__star--off { background:rgba(15,23,42,.08);color:var(--text-muted); }
.pl-card__star--on  { background:rgba(245,158,11,.9);color:#fff; }
.pl-card__star:hover { transform:scale(1.15); }
.pl-card__title {
  font-size:.95rem;font-weight:700;margin-bottom:.2rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-card__meta {
  font-size:.76rem;color:var(--text-muted);margin-bottom:.6rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-card__stats {
  display:flex;justify-content:space-between;margin-bottom:.65rem;font-size:.82rem;
}
.pl-card__stat-val { font-weight:700; }
.pl-card__stat-lbl { font-size:.68rem;color:var(--text-muted); }
/* Infra bar */
.pl-infra-wrap { margin:.45rem 0 .6rem; }
.pl-infra-row  { display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted);margin-bottom:.25rem; }
.pl-infra-track { height:5px;background:rgba(0,0,0,.06);border-radius:3px;overflow:hidden; }
.pl-infra-fill  { height:100%;border-radius:3px;width:0;transition:width .6s cubic-bezier(.34,1,.64,1); }
.pl-infra-fill--high { background:linear-gradient(90deg,#10b981,#34d399); }
.pl-infra-fill--mid  { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.pl-infra-fill--low  { background:linear-gradient(90deg,#ef4444,#f87171); }
/* Price footer */
.pl-card__footer {
  display:flex;justify-content:space-between;align-items:center;
  padding-top:.65rem;border-top:1px solid rgba(0,0,0,.06);
}
.pl-card__price { font-size:1.08rem;font-weight:800; }
.pl-card__appr  { font-size:.72rem;font-weight:700;color:#059669; }
.pl-view-btn-sm {
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.3rem .75rem;border-radius:99px;font-size:.74rem;font-weight:700;
  background:#2563eb;color:#fff;text-decoration:none;
  transition:background .15s;flex-shrink:0;
}
.pl-view-btn-sm:hover { background:#1d4ed8; }

/* Bulk checkbox overlay */
.pl-check-label {
  position:absolute;top:.65rem;left:.65rem;z-index:3;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-radius:7px;cursor:pointer;border:1.5px solid rgba(0,0,0,.12);
  transition:border-color .12s;
}
.pl-check-label:hover { border-color:#2563eb; }
.pl-check-label input { width:14px;height:14px;cursor:pointer; }

/* Grid layout */
.pl-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:.85rem;
}
@media (max-width:480px) {
  .pl-grid { grid-template-columns:1fr; }
}

/* ── TABLE view ──────────────────────────────────────────────── */
.pl-table-wrap {
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
.pl-table {
  width:100%;border-collapse:collapse;font-size:.845rem;
}
.pl-table thead th {
  background:rgba(99,102,241,.06);
  padding:.6rem .85rem;text-align:left;font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  border-bottom:1.5px solid rgba(0,0,0,.07);white-space:nowrap;
}
.pl-table tbody tr {
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:background .1s;
}
.pl-table tbody tr:hover { background:rgba(99,102,241,.04); }
.pl-table tbody tr:last-child { border-bottom:none; }
.pl-table td { padding:.55rem .85rem;vertical-align:middle; }
.pl-tbl-code  { font-weight:700;font-size:.82rem;color:#6366f1; }
.pl-tbl-title { font-weight:600; }
.pl-tbl-title a { color:var(--text);text-decoration:none; }
.pl-tbl-title a:hover { color:#2563eb; }
.pl-infra-chip {
  display:inline-block;min-width:40px;padding:.12rem .4rem;
  border-radius:8px;font-size:.72rem;font-weight:700;text-align:center;
}
.pl-infra-chip--high { background:#dcfce7;color:#166534; }
.pl-infra-chip--mid  { background:#fef9c3;color:#854d0e; }
.pl-infra-chip--low  { background:#fee2e2;color:#991b1b; }
.pl-appr-chip {
  font-size:.75rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.15rem;color:#059669;
}

/* ── Empty state ─────────────────────────────────────────────── */
.pl-empty {
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65);
  border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.05);
  padding:3.5rem 1.5rem;text-align:center;
}
.pl-empty__icon  { font-size:3rem;margin-bottom:.75rem;opacity:.55; }
.pl-empty__title { font-size:1.05rem;font-weight:700;margin-bottom:.3rem; }
.pl-empty__desc  { font-size:.82rem;color:var(--text-muted);max-width:300px;margin:0 auto .9rem; }

/* ── Pagination ──────────────────────────────────────────────── */
.pl-page-wrap  { display:flex;gap:.35rem;justify-content:center;margin-top:1.75rem;flex-wrap:wrap; }
.pl-page-btn   {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 .5rem;border-radius:10px;
  font-size:.8rem;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.78);backdrop-filter:blur(8px);
  border:1.5px solid rgba(0,0,0,.08);color:var(--text-muted);
  transition:all .15s;
}
.pl-page-btn:hover  { background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);color:#6366f1; }
.pl-page-btn.is-active { background:#2563eb;border-color:#2563eb;color:#fff; }
.pl-page-btn.is-disabled { opacity:.35;pointer-events:none; }
.pl-perpage-row { text-align:center;margin-top:.75rem;font-size:.78rem;color:var(--text-muted); }
.pl-perpage-row a { color:var(--text-muted); }
.pl-perpage-row a.is-active { font-weight:700;color:#2563eb; }

/* ── FAB ─────────────────────────────────────────────────────── */
.pl-fab {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);right:1.1rem;
  z-index:300;width:52px;height:52px;border-radius:99px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#10b981,#2563eb);color:#fff;font-size:1.35rem;
  box-shadow:0 8px 24px rgba(37,99,235,.4);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pl-fab:active { transform:scale(.92); }
@media (min-width:900px) { .pl-fab { display:none; } }

/* ── Scroll-to-top ───────────────────────────────────────────── */
.pl-top-btn {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 138px);right:1.1rem;
  z-index:290;width:38px;height:38px;border-radius:99px;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);color:var(--text-muted);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(8px);
}
.pl-top-btn.is-visible { opacity:1;pointer-events:auto;transform:translateY(0); }
@media (min-width:900px) { .pl-top-btn { bottom:1.5rem; } }

/* ── Toast ───────────────────────────────────────────────────── */
.pl-toast {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
  left:50%;transform:translateX(-50%) translateY(12px);
  background:rgba(15,23,42,.88);backdrop-filter:blur(16px);
  color:#fff;padding:.55rem 1.1rem;border-radius:99px;
  font-size:.8rem;font-weight:600;white-space:nowrap;z-index:500;
  pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;
}
.pl-toast.is-visible { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Context menu ────────────────────────────────────────────── */
.pl-ctx {
  position:fixed;z-index:600;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(200%) blur(20px);
  border:1px solid rgba(255,255,255,.7);border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.15);min-width:175px;overflow:hidden;
  opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .15s,transform .15s;
}
.pl-ctx.is-open { opacity:1;transform:scale(1);pointer-events:auto; }
.pl-ctx-item {
  display:flex;align-items:center;gap:.55rem;
  padding:.62rem .9rem;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background .12s;
}
.pl-ctx-item:hover { background:rgba(99,102,241,.08); }
.pl-ctx-item--danger { color:#dc2626; }
.pl-ctx-item--danger:hover { background:rgba(220,38,38,.07); }

/* ── Keyboard shortcuts overlay ─────────────────────────────── */
.pl-kbd-overlay {
  position:fixed;inset:0;z-index:700;
  background:rgba(15,23,42,.62);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.pl-kbd-overlay.is-open { display:flex; }
.pl-kbd-box {
  background:rgba(255,255,255,.96);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  padding:1.5rem;max-width:360px;width:100%;
}
.pl-kbd-box__title { font-size:1rem;font-weight:800;margin-bottom:1rem; }
.pl-kbd-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:.38rem 0;border-bottom:1px solid var(--border);font-size:.82rem;
}
.pl-kbd-row:last-child { border-bottom:none; }
.pl-kbd-key {
  padding:.16rem .48rem;border-radius:6px;
  background:rgba(99,102,241,.1);color:#6366f1;
  font-size:.74rem;font-weight:700;font-family:monospace;border:1px solid rgba(99,102,241,.2);
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .pl-fab,.pl-top-btn,.pl-toast,.pl-ctx,.pl-kbd-overlay,
  .pl-scroll-bar,.pl-filter-card,.pl-chip-row,.pl-toolbar,
  .pl-bulk-bar { display:none !important; }
  .pl-card { box-shadow:none;border:1px solid #ddd;border-radius:4px; }
}

/* ── Small screen tweaks ─────────────────────────────────────── */
@media (max-width:540px) {
  .pl-kpi { min-width:100px;padding:.65rem .8rem; }
  .pl-kpi__val { font-size:1.1rem; }
  .pl-card__body { padding:.75rem .85rem; }
  .pl-toolbar { gap:.4rem; }
  .pl-toolbar__right { flex-wrap:wrap; }
}
/* ════════════════════════════════════════════════════════════════
   COLLECTIONS PAGE  ·  _collections1.css
   ════════════════════════════════════════════════════════════════ */

/* ── Gradient mesh background ───────────────────────────────── */
.main[data-page="collections"]::before {
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 68% 52% at  6% 12%, rgba(220,38,38,.10)  0%,transparent 68%),
    radial-gradient(ellipse 62% 48% at 94% 18%, rgba(16,185,129,.10)  0%,transparent 68%),
    radial-gradient(ellipse 75% 58% at 50% 90%, rgba(37,99,235,.09)   0%,transparent 68%),
    radial-gradient(ellipse 52% 44% at 80% 60%, rgba(245,158,11,.08)  0%,transparent 68%),
    var(--bg);
}

/* ── Scroll progress bar ─────────────────────────────────────── */
.cs2-scroll-bar {
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,#dc2626,#f59e0b,#10b981,#2563eb);
  width:0%;transition:width .1s linear;border-radius:0 2px 2px 0;pointer-events:none;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.cs2-kpi-strip {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:.65rem;margin-bottom:1rem;
}
.cs2-kpi {
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(200%) blur(18px);
  border:1px solid rgba(255,255,255,.68);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  padding:.85rem 1rem;
  position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.cs2-kpi:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.1); }
.cs2-kpi__accent {
  position:absolute;top:-18px;right:-18px;
  width:80px;height:80px;border-radius:50%;opacity:.12;pointer-events:none;
}
.cs2-kpi__icon {
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;margin-bottom:.5rem;flex-shrink:0;
}
.cs2-kpi__lbl { font-size:.67rem;font-weight:700;text-transform:uppercase;
               letter-spacing:.06em;color:var(--text-muted);margin-bottom:.2rem; }
.cs2-kpi__val { font-size:1.55rem;font-weight:800;line-height:1; }
.cs2-kpi__sub { font-size:.72rem;color:var(--text-muted);margin-top:.18rem; }

.cs2-kpi--danger  .cs2-kpi__icon { background:rgba(220,38,38,.12);color:#dc2626; }
.cs2-kpi--success .cs2-kpi__icon { background:rgba(16,185,129,.12);color:#059669; }
.cs2-kpi--warn    .cs2-kpi__icon { background:rgba(245,158,11,.12);color:#d97706; }
.cs2-kpi--info    .cs2-kpi__icon { background:rgba(37,99,235,.10); color:#2563eb; }
.cs2-kpi--purple  .cs2-kpi__icon { background:rgba(124,58,237,.10);color:#7c3aed; }

/* Collection rate ring KPI */
.cs2-kpi--rate { display:flex;align-items:center;gap:.75rem; }
.cs2-ring { width:58px;height:58px;flex-shrink:0; }
.cs2-ring__bg { fill:none;stroke:rgba(0,0,0,.08);stroke-width:5; }
.cs2-ring__fg {
  fill:none;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:0 100;
  transform-origin:center;transform:rotate(-90deg);
  transition:stroke-dasharray .7s cubic-bezier(.34,1,.64,1);
}
.cs2-ring__fg.is-drawn { stroke-dasharray:var(--rp) 100; }

/* ── Page header ─────────────────────────────────────────────── */
.cs2-hd {
  display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.cs2-hd__title { font-size:1.22rem;font-weight:800;flex:1;min-width:0; }
.cs2-hd__sub   { font-size:.8rem;color:var(--text-muted);font-weight:500; }
.cs2-hd__actions { display:flex;gap:.45rem;flex-shrink:0;align-items:center;flex-wrap:wrap; }
.cs2-hd-btn {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.38rem .85rem;border-radius:12px;font-size:.76rem;font-weight:700;
  border:none;cursor:pointer;white-space:nowrap;transition:all .15s;text-decoration:none;
}
.cs2-hd-btn--ghost  { background:rgba(255,255,255,.75);border:1.5px solid rgba(0,0,0,.1);color:var(--text-muted); }
.cs2-hd-btn--ghost:hover { background:rgba(255,255,255,.95);color:var(--text); }
.cs2-hd-btn--danger { background:rgba(220,38,38,.1);border:1.5px solid rgba(220,38,38,.2);color:#dc2626; }
.cs2-hd-btn--danger:hover { background:rgba(220,38,38,.18); }
.cs2-hd-btn--warn   { background:rgba(245,158,11,.1);border:1.5px solid rgba(245,158,11,.2);color:#d97706; }
.cs2-hd-btn--warn:hover   { background:rgba(245,158,11,.18); }

/* ── Tab bar ─────────────────────────────────────────────────── */
.cs2-tab-bar {
  display:flex;gap:.4rem;margin-bottom:1rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.cs2-tab-bar::-webkit-scrollbar { display:none; }
.cs2-tab {
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;flex-shrink:0;
  padding:.45rem 1rem;border-radius:99px;font-size:.8rem;font-weight:700;
  text-decoration:none;color:var(--text-muted);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border:1.5px solid rgba(0,0,0,.07);
  transition:all .15s;
}
.cs2-tab:hover { background:rgba(255,255,255,.92);color:var(--text); }
.cs2-tab.is-active {
  background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.28);color:#2563eb;
}
.cs2-tab--danger.is-active  { background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.28);color:#dc2626; }
.cs2-tab--warn.is-active    { background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);color:#d97706; }
.cs2-tab--success.is-active { background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28);color:#059669; }
.cs2-tab__cnt {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 .35rem;border-radius:99px;
  font-size:.64rem;font-weight:800;background:rgba(0,0,0,.08);color:inherit;
}
.cs2-tab.is-active .cs2-tab__cnt { background:currentColor;color:#fff;
  filter:brightness(10); }

/* ── Section header (above table) ───────────────────────────── */
.cs2-sec-hd {
  display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;flex-wrap:wrap;
}
.cs2-sec-hd__title { font-size:.9rem;font-weight:800;flex:1;min-width:0; }
.cs2-sec-hd__count {
  font-size:.72rem;font-weight:700;color:var(--text-muted);
  background:rgba(0,0,0,.06);padding:.12rem .45rem;border-radius:99px;
}
.cs2-sec-hd__actions { display:flex;gap:.4rem; }

/* ── Glassmorphism table wrap ────────────────────────────────── */
.cs2-table-wrap {
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;box-shadow:0 4px 18px rgba(0,0,0,.06);
  overflow:hidden;margin-bottom:1rem;
}
.cs2-tbl {
  width:100%;border-collapse:collapse;font-size:.845rem;
}
.cs2-tbl thead th {
  background:rgba(99,102,241,.05);
  padding:.55rem .85rem;text-align:left;
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);
  border-bottom:1.5px solid rgba(0,0,0,.06);white-space:nowrap;
}
.cs2-tbl tbody tr {
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:background .1s, opacity .3s, transform .2s;
}
.cs2-tbl tbody tr:hover { background:rgba(99,102,241,.03); }
.cs2-tbl tbody tr:last-child { border-bottom:none; }
.cs2-tbl td { padding:.55rem .85rem;vertical-align:middle; }
.cs2-tbl tr.is-paid { opacity:.38;text-decoration:line-through;pointer-events:none; }

/* ── Row cards (mobile ≤620px) ───────────────────────────────── */
@media (max-width:620px) {
  .cs2-tbl thead { display:none; }
  .cs2-tbl, .cs2-tbl tbody, .cs2-tbl tr, .cs2-tbl td { display:block; }
  .cs2-tbl tr {
    border-radius:14px;margin:.55rem .75rem;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    background:rgba(255,255,255,.9);
    padding:.65rem .75rem;
    transition:transform .2s, box-shadow .2s;
    position:relative;
  }
  .cs2-tbl tr:hover { transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.09); }
  .cs2-tbl td { padding:.25rem 0;border:none; }
  .cs2-tbl td[data-hide-mobile] { display:none; }
  .cs2-table-wrap { border-radius:18px;overflow:visible;background:transparent;
                    box-shadow:none;border:none; }
}

/* ── Age badges ──────────────────────────────────────────────── */
.cs2-age {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:.14rem .42rem;border-radius:99px;font-size:.72rem;font-weight:700;
}
.cs2-age--ok     { background:rgba(16,185,129,.12);color:#059669; }
.cs2-age--warn   { background:rgba(245,158,11,.12);color:#d97706; }
.cs2-age--danger { background:rgba(220,38,38,.10);color:#dc2626; }
.cs2-age--severe { background:rgba(124,58,237,.10);color:#7c3aed; }

/* ── Status badges ───────────────────────────────────────────── */
.cs2-badge {
  display:inline-flex;align-items:center;padding:.12rem .45rem;
  border-radius:99px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.cs2-badge--paid    { background:#dcfce7;color:#166534; }
.cs2-badge--overdue { background:#fee2e2;color:#991b1b; }
.cs2-badge--pending { background:#dbeafe;color:#1e40af; }
.cs2-badge--method  { background:rgba(99,102,241,.1);color:#6366f1; }

/* ── Progress bar (EMI progress on row) ─────────────────────── */
.cs2-emi-prog {
  display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--text-muted);
}
.cs2-emi-prog__track {
  flex:1;height:4px;background:rgba(0,0,0,.07);border-radius:2px;overflow:hidden;min-width:40px;
}
.cs2-emi-prog__fill {
  height:100%;background:linear-gradient(90deg,#2563eb,#6366f1);
  border-radius:2px;transition:width .5s ease;
}

/* ── Action buttons ──────────────────────────────────────────── */
.cs2-act-row { display:flex;gap:.4rem;align-items:center;flex-wrap:wrap; }
.cs2-btn {
  display:inline-flex;align-items:center;gap:.22rem;
  padding:.28rem .62rem;border-radius:99px;font-size:.72rem;font-weight:700;
  border:none;cursor:pointer;white-space:nowrap;transition:all .15s;
}
.cs2-btn--pay    { background:rgba(16,185,129,.12);color:#059669; }
.cs2-btn--pay:hover    { background:#dcfce7; }
.cs2-btn--remind { background:rgba(245,158,11,.1);color:#d97706; }
.cs2-btn--remind:hover { background:rgba(245,158,11,.2); }
.cs2-btn--link   { background:rgba(99,102,241,.08);color:#6366f1;text-decoration:none; }
.cs2-btn--link:hover   { background:rgba(99,102,241,.15); }
.cs2-btn:disabled { opacity:.45;cursor:wait; }

/* ── Date group heading (upcoming tab) ──────────────────────── */
.cs2-date-grp {
  display:flex;align-items:center;gap:.55rem;margin:.85rem 0 .4rem;
}
.cs2-date-grp__label {
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);white-space:nowrap;flex-shrink:0;
}
.cs2-date-grp__line { flex:1;height:1px;background:var(--border);opacity:.6; }
.cs2-date-grp__sum  {
  font-size:.7rem;font-weight:700;color:#2563eb;flex-shrink:0;
  background:rgba(37,99,235,.08);padding:.1rem .45rem;border-radius:99px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.cs2-empty {
  padding:3rem 1.5rem;text-align:center;
}
.cs2-empty__icon  { font-size:2.8rem;margin-bottom:.6rem;opacity:.55; }
.cs2-empty__title { font-size:1rem;font-weight:700;margin-bottom:.25rem; }
.cs2-empty__desc  { font-size:.8rem;color:var(--text-muted); }

/* ── Mark-paid bottom sheet ──────────────────────────────────── */
.cs2-sheet-overlay {
  position:fixed;inset:0;z-index:450;background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s;
}
.cs2-sheet-overlay.is-open { opacity:1;pointer-events:auto; }
.cs2-sheet {
  position:fixed;bottom:0;left:0;right:0;z-index:451;
  background:rgba(255,255,255,.98);backdrop-filter:saturate(200%) blur(22px);
  border-radius:24px 24px 0 0;
  box-shadow:0 -8px 36px rgba(0,0,0,.16);
  padding:0 1.25rem calc(env(safe-area-inset-bottom,0px) + 1.25rem);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1,.64,1);
  max-height:90vh;overflow-y:auto;
}
.cs2-sheet.is-open { transform:translateY(0); }
.cs2-sheet__handle {
  width:40px;height:4px;border-radius:2px;background:rgba(0,0,0,.13);
  margin:1rem auto .85rem;
}
.cs2-sheet__title { font-size:1rem;font-weight:800;margin-bottom:.85rem;text-align:center; }
.cs2-sheet__info {
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);
  border-radius:14px;padding:.7rem .9rem;margin-bottom:1rem;
  font-size:.85rem;font-weight:600;color:#059669;text-align:center;
}
.cs2-field { margin-bottom:.85rem; }
.cs2-field__label { font-size:.76rem;font-weight:700;color:var(--text-muted);margin-bottom:.35rem;display:block; }
.cs2-field__input, .cs2-field__select {
  width:100%;padding:.55rem .85rem;border-radius:12px;font-size:.9rem;
  border:1.5px solid rgba(0,0,0,.1);background:rgba(255,255,255,.8);
  outline:none;transition:border-color .15s;
}
.cs2-field__input:focus, .cs2-field__select:focus { border-color:#2563eb; }
.cs2-sheet__actions { display:flex;gap:.65rem;margin-top:1rem; }
.cs2-sheet-btn {
  flex:1;padding:.65rem;border-radius:14px;font-size:.9rem;font-weight:700;
  border:none;cursor:pointer;transition:all .15s;
}
.cs2-sheet-btn--confirm {
  background:#059669;color:#fff;
  box-shadow:0 4px 14px rgba(5,150,105,.3);
}
.cs2-sheet-btn--confirm:hover { background:#047857; }
.cs2-sheet-btn--cancel  { background:rgba(0,0,0,.07);color:var(--text-muted); }
.cs2-sheet-btn--cancel:hover  { background:rgba(0,0,0,.12); }
.cs2-sheet-btn:disabled { opacity:.5;cursor:wait; }

/* ── Bulk floating bar ───────────────────────────────────────── */
.cs2-bulk-bar {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);left:50%;
  transform:translateX(-50%) translateY(12px);z-index:300;
  background:rgba(15,23,42,.9);backdrop-filter:blur(18px);
  color:#fff;padding:.65rem 1.1rem;border-radius:99px;
  display:flex;align-items:center;gap:.75rem;
  box-shadow:0 6px 28px rgba(0,0,0,.28);font-size:.83rem;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  white-space:nowrap;
}
.cs2-bulk-bar.is-visible { opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); }
.cs2-bulk-remind-btn {
  padding:.35rem .8rem;border-radius:99px;font-size:.75rem;font-weight:700;
  background:rgba(245,158,11,.85);color:#fff;border:none;cursor:pointer;
  transition:background .15s;
}
.cs2-bulk-remind-btn:hover { background:#d97706; }
.cs2-bulk-clear-btn {
  padding:.28rem .65rem;border-radius:99px;font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.18);color:#fff;border:none;cursor:pointer;
}

/* ── Toast ───────────────────────────────────────────────────── */
.cs2-toast {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
  left:50%;transform:translateX(-50%) translateY(12px);
  background:rgba(15,23,42,.88);backdrop-filter:blur(16px);
  color:#fff;padding:.55rem 1.1rem;border-radius:99px;
  font-size:.82rem;font-weight:600;white-space:nowrap;z-index:500;
  pointer-events:none;opacity:0;transition:opacity .22s, transform .22s;
  max-width:90vw;text-overflow:ellipsis;overflow:hidden;
}
.cs2-toast.is-visible { opacity:1;transform:translateX(-50%) translateY(0); }
.cs2-toast--ok   { background:rgba(5,150,105,.92); }
.cs2-toast--fail { background:rgba(220,38,38,.9); }

/* ── FAB with sub-actions ────────────────────────────────────── */
.cs2-fab-wrap {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);right:1.1rem;
  z-index:310;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;
}
.cs2-fab {
  width:52px;height:52px;border-radius:99px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#dc2626,#f59e0b);color:#fff;font-size:1.2rem;
  box-shadow:0 8px 24px rgba(220,38,38,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.cs2-fab:active { transform:scale(.92); }
.cs2-fab-sub {
  display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;
  transition:opacity .18s,transform .18s;opacity:0;pointer-events:none;
  transform:translateY(8px);
}
.cs2-fab-sub.is-open { opacity:1;pointer-events:auto;transform:translateY(0); }
.cs2-fab-item {
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .85rem;border-radius:99px;font-size:.76rem;font-weight:700;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.14);color:var(--text);
  border:1.5px solid rgba(0,0,0,.06);cursor:pointer;
  white-space:nowrap;transition:all .12s;text-decoration:none;
}
.cs2-fab-item:hover { background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18); }
@media (min-width:900px) { .cs2-fab-wrap { display:none; } }

/* ── Keyboard shortcut overlay ───────────────────────────────── */
.cs2-kbd-overlay {
  position:fixed;inset:0;z-index:700;
  background:rgba(15,23,42,.62);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.cs2-kbd-overlay.is-open { display:flex; }
.cs2-kbd-box {
  background:rgba(255,255,255,.96);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);padding:1.5rem;max-width:360px;width:100%;
}
.cs2-kbd-box__title { font-size:1rem;font-weight:800;margin-bottom:1rem; }
.cs2-kbd-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:.38rem 0;border-bottom:1px solid var(--border);font-size:.82rem;
}
.cs2-kbd-row:last-child { border-bottom:none; }
.cs2-kbd-key {
  padding:.16rem .48rem;border-radius:6px;
  background:rgba(99,102,241,.1);color:#6366f1;
  font-size:.74rem;font-weight:700;font-family:monospace;
  border:1px solid rgba(99,102,241,.2);
}

/* ── Scroll-to-top ───────────────────────────────────────────── */
.cs2-top-btn {
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 140px);right:1.1rem;
  z-index:290;width:38px;height:38px;border-radius:99px;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);color:var(--text-muted);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(8px);
}
.cs2-top-btn.is-visible { opacity:1;pointer-events:auto;transform:translateY(0); }
@media (min-width:900px) { .cs2-top-btn { bottom:1.5rem; } }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .cs2-fab-wrap,.cs2-top-btn,.cs2-bulk-bar,.cs2-toast,
  .cs2-kbd-overlay,.cs2-scroll-bar,.cs2-hd__actions { display:none !important; }
  .cs2-tbl { font-size:.8rem; }
  .cs2-table-wrap { box-shadow:none;border:1px solid #ddd; }
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width:480px) {
  .cs2-kpi-strip { grid-template-columns:1fr 1fr; }
  .cs2-kpi { padding:.7rem .8rem; }
  .cs2-kpi__val { font-size:1.3rem; }
}
/* ═══════════════════════════════════════════════════════════════
   Land EMI Platform — Premium Design System Extension v3
   Smart Cards · Premium Navigation · Mobile-Native UX
   Layered on top of app.css — all selectors are additive.
   ═══════════════════════════════════════════════════════════════ */

/* ── Extended design tokens ──────────────────────────────────── */
:root {
  --grad-brand-3:   linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #4f46e5 100%);
  --grad-teal:      linear-gradient(135deg, #0ea5e9, #0891b2);
  --grad-success:   linear-gradient(135deg, #10b981, #059669);
  --grad-gold:      linear-gradient(135deg, #f59e0b, #d97706);
  --grad-danger:    linear-gradient(135deg, #ef4444, #dc2626);
  --grad-purple:    linear-gradient(135deg, #8b5cf6, #7c3aed);
  --grad-mesh-lt:
    radial-gradient(ellipse 900px 700px at 10% -10%, rgba(37,99,235,.1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 105%, rgba(139,92,246,.08), transparent 60%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(16,185,129,.05), transparent 55%);
  --grad-mesh-dk:
    radial-gradient(ellipse 900px 700px at 10% -10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 105%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(16,185,129,.07), transparent 55%);

  /* Smart card tokens */
  --sc-radius:        18px;
  --sc-shadow:        0 4px 28px rgba(13,27,46,.07), 0 1px 4px rgba(13,27,46,.04);
  --sc-shadow-hover:  0 10px 40px rgba(13,27,46,.12), 0 3px 10px rgba(13,27,46,.06);
  --sc-glass-bg:      rgba(255,255,255,.86);
  --sc-glass-border:  rgba(255,255,255,.72);
  --sc-glass-blur:    saturate(200%) blur(22px);

  /* Premium nav */
  --sb-link-radius:   9px;
  --sb-glow-color:    rgba(37,99,235,.22);
  --bn-pill-h:        64px;
  --bn-pill-radius:   26px;
  --bn-glass-bg:      rgba(255,255,255,.9);
  --bn-glass-blur:    saturate(200%) blur(24px);
  --bn-shadow:        0 -1px 0 rgba(0,0,0,.05), 0 -4px 24px rgba(13,27,46,.1), 0 -1px 0 rgba(255,255,255,.6) inset;

  /* Premium topbar */
  --tb-glass-bg:      rgba(255,255,255,.88);
  --tb-glass-blur:    saturate(200%) blur(24px);
  --tb-border:        rgba(255,255,255,.65);
}

[data-theme="dark"] {
  --sc-glass-bg:      rgba(15,22,37,.88);
  --sc-glass-border:  rgba(255,255,255,.07);
  --bn-glass-bg:      rgba(10,16,30,.92);
  --bn-shadow:        0 -1px 0 rgba(255,255,255,.04), 0 -4px 28px rgba(0,0,0,.5);
  --tb-glass-bg:      rgba(9,14,26,.9);
  --tb-border:        rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   1. PREMIUM SIDEBAR UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sidebar-bg) 100%, #2563eb 8%) 0%,
    var(--sidebar-bg) 40%,
    color-mix(in srgb, var(--sidebar-bg) 95%, #000 20%) 100%);
}

/* Brand bar */
.sidebar__brand-row {
  padding: .25rem .5rem .25rem .25rem;
  background: linear-gradient(180deg, rgba(37,99,235,.14) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar__brand {
  padding: .95rem 1rem .9rem;
  gap: .8rem;
}
.sidebar__brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--grad-brand-3);
  box-shadow: 0 4px 16px rgba(37,99,235,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
  font-size: 1.1rem;
  transition: transform .22s var(--ease-spring), box-shadow .22s;
}
.sidebar__brand:hover .logo { transform: scale(1.08) rotate(-3deg); box-shadow: 0 6px 22px rgba(37,99,235,.6), 0 0 0 1px rgba(255,255,255,.2) inset; }

/* Nav padding */
.sidebar__nav { padding: .75rem .6rem .6rem; }

/* Group headers */
.sidebar__group > summary {
  padding: .55rem .7rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .12em;
  color: rgba(255,255,255,.28);
  border-radius: 6px;
  margin-top: .5rem;
  position: relative;
}
.sidebar__group > summary::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,.05);
  z-index: 0; margin: 0 .4rem;
}
.sidebar__group-label { position: relative; z-index: 1; background: var(--sidebar-bg); padding: 0 .35rem; }
.sidebar__group > summary:hover { color: rgba(255,255,255,.52); background: transparent; }
.sidebar__group[open] > summary { color: rgba(255,255,255,.48); }

/* Group body */
.sidebar__group-body {
  padding: .2rem 0 .35rem .25rem;
  margin-left: .55rem;
  border-left: 1px solid rgba(255,255,255,.06);
  animation: sidebar-slide .2s var(--ease-out);
}

/* Navigation links — premium pill style */
.sidebar__link {
  border-radius: var(--sb-link-radius);
  min-height: 42px; padding: .48rem .7rem;
  gap: .65rem; font-size: .875rem;
  margin-bottom: .5px;
  position: relative; overflow: hidden;
}
.sidebar__link::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--sb-link-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 100%);
  opacity: 0; transition: opacity var(--trans);
  pointer-events: none;
}
.sidebar__link:hover::before { opacity: 1; }
.sidebar__link:hover { background: rgba(255,255,255,.08); color: #fff; padding-left: .95rem; }
.sidebar__link.is-active {
  background: linear-gradient(135deg, rgba(37,99,235,.28) 0%, rgba(79,70,229,.18) 100%);
  color: #a8c5ff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand), 0 2px 12px rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.2);
}
.sidebar__link.is-active::before { opacity: 1; }
.sidebar__link.is-active .sb-icon { color: #7daaff; background: rgba(37,99,235,.25); }

/* Sidebar icon boxes */
.sb-icon {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  transition: background var(--trans), color var(--trans), transform .15s var(--ease-spring);
  font-size: .9rem; flex-shrink: 0;
}
.sidebar__link:hover .sb-icon { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.1); }
.sidebar__link .label { flex: 1; }

/* Sidebar badge (notification count on menu item) */
.sb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 800; border-radius: 99px;
  flex-shrink: 0; line-height: 1;
  box-shadow: 0 2px 6px rgba(220,38,38,.4);
  animation: sb-badge-pop .3s var(--ease-spring) both;
}
@keyframes sb-badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.sb-badge--brand { background: var(--brand); box-shadow: 0 2px 6px rgba(37,99,235,.4); }
.sb-badge--warn  { background: var(--warning); box-shadow: 0 2px 6px rgba(217,119,6,.4); }

/* Premium profile bar */
.sidebar__profile {
  padding: .9rem 1rem;
  background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  gap: .75rem;
}
.sidebar__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand-3);
  font-size: .85rem; font-weight: 800;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(37,99,235,.5), 0 3px 12px rgba(37,99,235,.3);
  position: relative;
}
.sidebar__avatar::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--sidebar-bg);
}
.sidebar__user-name { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.92); }
.sidebar__user-role {
  font-size: .67rem; color: rgba(255,255,255,.4);
  font-weight: 500; letter-spacing: .03em;
}
.sidebar__profile-link {
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
  transition: background var(--trans), color var(--trans), transform .15s var(--ease-spring);
  text-decoration: none; flex-shrink: 0;
}
.sidebar__profile-link:hover { background: rgba(255,255,255,.14); color: #fff; transform: scale(1.1); text-decoration: none; }

/* Small-menu profile */
.app[data-menu="small"] .sidebar__profile { padding: .75rem .4rem; justify-content: center; }
.app[data-menu="small"] .sidebar__profile-link { display: none; }

/* ═══════════════════════════════════════════════════════════════
   2. PREMIUM TOPBAR
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  background: var(--tb-glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--tb-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 16px rgba(13,27,46,.05);
}
[data-theme="dark"] .topbar {
  background: var(--tb-glass-bg);
  border-bottom-color: rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 20px rgba(0,0,0,.4);
}

/* Breadcrumbs upgrade */
.breadcrumbs { gap: .1rem; }
.breadcrumbs a { color: var(--text-faint); font-weight: 500; font-size: .78rem; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: none; }
.breadcrumbs__sep { color: var(--text-faint); opacity: .5; }
.breadcrumbs__current {
  color: var(--text);
  background: linear-gradient(135deg, rgba(37,99,235,.1) 0%, rgba(79,70,229,.07) 100%);
  border: 1px solid rgba(37,99,235,.15);
  padding: .18rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Command palette */
.cpal-trigger {
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .32rem .8rem;
  gap: .5rem;
  max-width: 200px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.cpal-trigger:hover {
  border-color: var(--brand);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
}
@media (max-width: 900px) { .cpal-trigger { max-width: 140px; } }

/* Topbar icon buttons — premium glass pill */
.topbar__icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--trans), border-color var(--trans), color var(--trans), transform .15s var(--ease-spring), box-shadow var(--trans);
}
.topbar__icon-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text);
  transform: scale(1.06);
  box-shadow: var(--shadow-xs);
}
.topbar__icon-btn:active { transform: scale(.94); }

/* Notification bell pulse */
.topbar__notif-pulse {
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.topbar__notif-pulse::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: rgba(220,38,38,.4);
  animation: tb-pulse 2s ease infinite;
}
@keyframes tb-pulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.6); opacity: 0; }
}

/* Premium topbar badge */
.topbar__badge {
  background: var(--grad-danger);
  box-shadow: 0 2px 8px rgba(220,38,38,.45);
  font-size: .58rem; font-weight: 800;
  min-width: 16px; height: 16px; padding: 0 3px;
  line-height: 16px;
  border: 1.5px solid var(--bg-elev);
  top: -4px; right: -4px;
}

/* User button upgrade */
.topbar__user-btn {
  border-radius: 10px;
  padding: .28rem .5rem .28rem .28rem;
  gap: .45rem;
  border: 1.5px solid transparent;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.topbar__user-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* Avatar with gradient ring */
.topbar__user-avatar {
  width: 28px; height: 28px;
  background: var(--grad-brand-3);
  box-shadow: 0 0 0 2px rgba(37,99,235,.25), 0 2px 8px rgba(37,99,235,.2);
  font-size: .75rem; font-weight: 800;
  border-radius: 50%;
  position: relative;
}
.topbar__user-avatar::after {
  content: '';
  position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%; background: #22c55e;
  border: 1.5px solid var(--bg-elev);
}

/* User dropdown premium */
.topbar__user-dropdown {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--sc-glass-bg);
}
.topbar__user-dropdown-header {
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(79,70,229,.04) 100%);
  border-bottom: 1px solid var(--border);
}
.topbar__user-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem 1.1rem;
  font-size: .85rem; color: var(--text);
  transition: background var(--trans), color var(--trans), padding-left var(--trans);
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  text-decoration: none;
}
.topbar__user-item:hover { background: var(--bg-muted); color: var(--text); padding-left: 1.4rem; text-decoration: none; }
.topbar__user-item svg { opacity: .55; flex-shrink: 0; }
.topbar__user-item:hover svg { opacity: 1; }
.topbar__user-item--danger { color: var(--danger); }
.topbar__user-item--danger:hover { background: rgba(220,38,38,.06); color: var(--danger); }
.topbar__user-divider { height: 1px; background: var(--border); margin: .2rem 0; }

/* ═══════════════════════════════════════════════════════════════
   3. PREMIUM BOTTOM NAV — FLOATING PILL
   ═══════════════════════════════════════════════════════════════ */

.bottom-nav {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 10px);
  left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px));
  height: var(--bn-pill-h);
  background: var(--bn-glass-bg);
  backdrop-filter: var(--bn-glass-blur);
  -webkit-backdrop-filter: var(--bn-glass-blur);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--bn-pill-radius);
  box-shadow: var(--bn-shadow);
  z-index: var(--z-bottom-nav);
  overflow: hidden;
  display: none;
}
[data-theme="dark"] .bottom-nav {
  border-color: rgba(255,255,255,.08);
}

/* Show only on mobile/tablet */
@media (max-width: 900px) {
  .bottom-nav { display: block; }
  .main {
    padding-bottom: calc(var(--bn-pill-h) + max(env(safe-area-inset-bottom), 10px) + 1.25rem);
  }
}

.bottom-nav__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 40%);
  border-radius: inherit;
}
[data-theme="dark"] .bottom-nav__glow { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 40%); }

.bottom-nav__items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 100%;
  position: relative; z-index: 1;
  padding: 0 .25rem;
}

/* Tab buttons */
.bottom-nav__item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  padding: 0 .1rem; height: 100%;
  position: relative; flex: 1;
  color: var(--text-faint);
  transition: color var(--trans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bottom-nav__item:active { transform: scale(.9); transition: transform .1s; }
.bottom-nav__item.is-active { color: var(--brand); }

/* Active indicator dot */
.bottom-nav__item::before {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand);
  transition: transform .25s var(--ease-spring);
}
.bottom-nav__item.is-active::before { transform: translateX(-50%) scale(1); }

/* Icon */
.bottom-nav__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.bottom-nav__icon svg { width: 100%; height: 100%; transition: transform .2s var(--ease-spring); }
.bottom-nav__item.is-active .bottom-nav__icon svg { transform: scale(1.12); }
.bottom-nav__item:active .bottom-nav__icon svg { transform: scale(.88); }

/* Label */
.bottom-nav__label {
  font-size: .6rem; font-weight: 700; letter-spacing: .02em;
  line-height: 1; text-transform: uppercase;
  transition: color var(--trans);
  white-space: nowrap;
}

/* EMI elevated button */
.bottom-nav__item--emi {
  background: var(--grad-brand-3);
  color: #fff !important;
  border-radius: 16px;
  width: 52px; height: 48px;
  margin: auto .15rem;
  box-shadow: 0 4px 18px rgba(37,99,235,.45), 0 0 0 3px rgba(255,255,255,.8);
  flex-direction: column;
  flex: 0 0 52px;
  transition: transform .2s var(--ease-spring), box-shadow .2s, background .2s;
}
.bottom-nav__item--emi::before { display: none; }
.bottom-nav__item--emi:active { transform: scale(.92); }
.bottom-nav__item--emi.is-active {
  box-shadow: 0 6px 24px rgba(37,99,235,.6), 0 0 0 3px rgba(255,255,255,.9);
}
[data-theme="dark"] .bottom-nav__item--emi {
  box-shadow: 0 4px 20px rgba(37,99,235,.55), 0 0 0 2px rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════
   4. PREMIUM SUB-NAV PANEL
   ═══════════════════════════════════════════════════════════════ */

.bn-subnav {
  position: fixed;
  inset: 0; z-index: calc(var(--z-bottom-nav) - 1);
  pointer-events: none;
}
.bn-subnav.is-open { pointer-events: auto; }

.bn-subnav__bd {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.bn-subnav.is-open .bn-subnav__bd { opacity: 1; }

.bn-subnav__panel {
  position: absolute;
  bottom: calc(var(--bn-pill-h) + max(env(safe-area-inset-bottom), 10px) + 14px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  width: min(440px, calc(100vw - 24px));
  background: var(--sc-glass-bg);
  backdrop-filter: var(--sc-glass-blur);
  -webkit-backdrop-filter: var(--sc-glass-blur);
  border: 1px solid var(--sc-glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow-xl);
  padding: 1.1rem 1.1rem .9rem;
  opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-spring), opacity .25s var(--ease-out);
  overflow: hidden;
}
.bn-subnav.is-open .bn-subnav__panel {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: auto;
}

/* Panel header */
.bn-subnav__hd {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .9rem;
}
.bn-subnav__hd-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--bnp-accent-rgb, 37,99,235),.4);
}
.bn-subnav__hd-body { flex: 1; min-width: 0; }
.bn-subnav__hd-title { font-size: .95rem; font-weight: 800; display: block; color: var(--text); }
.bn-subnav__hd-goto {
  font-size: .72rem; color: var(--text-muted); font-weight: 500;
  display: inline-flex; align-items: center; gap: .25rem;
  transition: color var(--trans);
  text-decoration: none;
}
.bn-subnav__hd-goto:hover { color: var(--brand); text-decoration: none; }
.bn-subnav__close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--trans), color var(--trans), transform .15s;
  flex-shrink: 0;
}
.bn-subnav__close:hover { background: var(--bg-muted); color: var(--text); transform: rotate(90deg); }

/* Sub-links grid */
.bn-subnav__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.bn-subnav__link {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .75rem .5rem;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-elev);
  text-decoration: none;
  transition: background var(--trans), border-color var(--trans), transform .18s var(--ease-spring), box-shadow var(--trans);
}
.bn-subnav__link:hover {
  background: rgba(var(--bnp-accent-rgb, 37,99,235), .06);
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--bnp-accent-rgb, 37,99,235), .12);
  text-decoration: none;
}
.bn-subnav__link:active { transform: scale(.94); }
.bn-subnav__link-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  transition: transform .18s var(--ease-spring);
}
.bn-subnav__link:hover .bn-subnav__link-icon { transform: scale(1.12); }
.bn-subnav__link-label {
  font-size: .67rem; font-weight: 700; color: var(--text-muted);
  text-align: center; line-height: 1.2;
  transition: color var(--trans);
}
.bn-subnav__link:hover .bn-subnav__link-label { color: var(--text); }

/* Drag handle */
.bn-subnav__handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--border-strong); margin: .75rem auto 0;
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   5. SMART CARD SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Override base card with premium styling */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sc-shadow);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.card:hover { box-shadow: var(--sc-shadow-hover); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-hover); }

/* Premium card header */
.card__header {
  padding: .95rem 1.15rem;
  font-size: .88rem; font-weight: 700;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-muted) 80%, var(--bg-elev) 20%) 0%,
    var(--bg-elev) 100%
  );
  border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
}

/* Glassmorphism card variant */
.card--glass {
  background: var(--sc-glass-bg);
  backdrop-filter: var(--sc-glass-blur);
  -webkit-backdrop-filter: var(--sc-glass-blur);
  border: 1px solid var(--sc-glass-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}

/* Smart stat card — full premium upgrade */
.card.stat {
  padding: 1.15rem 1.3rem;
  border-radius: var(--sc-radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--sc-shadow);
  position: relative; overflow: hidden;
  gap: .25rem;
}
.card.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  opacity: 0; transition: opacity var(--trans);
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
.card.stat:hover::before { opacity: 1; }
.card.stat::after {
  content: '';
  position: absolute; top: -40px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 70%);
  pointer-events: none;
}
.stat__label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.stat__value {
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1.1;
  color: var(--text);
}

/* ── Alert upgrades ─────────────────────────────────────────── */
.alert {
  border-radius: 10px;
  padding: .85rem 1.1rem;
  font-size: .875rem;
}
.alert-success { border-left: 3px solid var(--success); }
.alert-warning  { border-left: 3px solid var(--warning); }
.alert-danger   { border-left: 3px solid var(--danger); }
.alert-info     { border-left: 3px solid var(--info); }

/* ── Table upgrades ──────────────────────────────────────────── */
.table thead tr {
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-elev) 100%);
}
.table th {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 800;
  border-bottom: 1.5px solid var(--border);
}
.table tr:hover td { background: rgba(37,99,235,.03); }
[data-theme="dark"] .table tr:hover td { background: rgba(37,99,235,.07); }
.table td { vertical-align: middle; }

/* ── Badge upgrades ──────────────────────────────────────────── */
.badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .18rem .6rem; border-radius: 6px;
}
.badge-success { background: rgba(22,163,74,.1);  color: #15803d; border: 1px solid rgba(22,163,74,.2); }
.badge-danger  { background: rgba(220,38,38,.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,.2); }
.badge-warning { background: rgba(217,119,6,.1);  color: #b45309; border: 1px solid rgba(217,119,6,.2); }
.badge-info    { background: rgba(2,132,199,.1);   color: #075985; border: 1px solid rgba(2,132,199,.2); }
.badge-brand   { background: rgba(37,99,235,.1);   color: #1d4ed8; border: 1px solid rgba(37,99,235,.2); }
[data-theme="dark"] .badge-success { background: rgba(22,163,74,.15); color: #4ade80; border-color: rgba(22,163,74,.2); }
[data-theme="dark"] .badge-danger  { background: rgba(220,38,38,.15); color: #f87171; border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .badge-warning { background: rgba(217,119,6,.15); color: #fbbf24; border-color: rgba(217,119,6,.2); }
[data-theme="dark"] .badge-info    { background: rgba(2,132,199,.15);  color: #38bdf8; border-color: rgba(2,132,199,.2); }

/* ── Button upgrades ─────────────────────────────────────────── */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-primary {
  background: var(--grad-brand);
  box-shadow: 0 1px 3px rgba(37,99,235,.3), 0 0 0 1px rgba(37,99,235,.15) inset;
}
.btn-primary:hover {
  background: var(--grad-brand-h);
  box-shadow: 0 4px 16px rgba(37,99,235,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   6. SMART SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */

/* Common section heading style used across pages */
.sec-hd {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem;
}
.sec-hd__title {
  font-size: .95rem; font-weight: 800; color: var(--text);
  letter-spacing: -.02em;
}
.sec-hd__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--bg-muted); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; border-radius: 99px;
}
.sec-hd__spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   7. FLASH / ALERT STRIP
   ═══════════════════════════════════════════════════════════════ */

/* Flashier flash messages */
.alert-success {
  background: linear-gradient(135deg, rgba(16,185,129,.07) 0%, rgba(5,150,105,.04) 100%);
  border: 1px solid rgba(16,185,129,.2);
}
.alert-danger {
  background: linear-gradient(135deg, rgba(239,68,68,.07) 0%, rgba(220,38,38,.04) 100%);
  border: 1px solid rgba(239,68,68,.2);
}
.alert-warning {
  background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, rgba(217,119,6,.04) 100%);
  border: 1px solid rgba(245,158,11,.2);
}
.alert-info {
  background: linear-gradient(135deg, rgba(14,165,233,.07) 0%, rgba(2,132,199,.04) 100%);
  border: 1px solid rgba(14,165,233,.2);
}

/* ═══════════════════════════════════════════════════════════════
   8. KPI STRIP — GLOBAL SMART VERSION
   ═══════════════════════════════════════════════════════════════ */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px)  { .kpi-strip { grid-template-columns: 1fr 1fr; } }

.kpi {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--sc-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--sc-shadow);
  display: flex; flex-direction: column; gap: .22rem;
  position: relative; overflow: hidden;
  transition: box-shadow var(--trans), transform var(--trans);
}
.kpi:hover { box-shadow: var(--sc-shadow-hover); transform: translateY(-1px); }
.kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-accent, var(--grad-brand));
  opacity: 0; transition: opacity var(--trans);
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
.kpi:hover::before { opacity: 1; }
.kpi__icon-wrap {
  position: absolute; top: .9rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--kpi-icon-bg, rgba(37,99,235,.1));
  display: grid; place-items: center; font-size: 1rem;
}
.kpi__lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.kpi__val {
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  color: var(--text);
}
.kpi__foot {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--text-muted); margin-top: .1rem;
}
.kpi__delta {
  display: inline-flex; align-items: center;
  padding: .1rem .4rem; border-radius: 99px;
  font-size: .68rem; font-weight: 700; letter-spacing: -.01em;
}
.kpi__delta--up    { background: rgba(22,163,74,.1);  color: #15803d; }
.kpi__delta--down  { background: rgba(220,38,38,.1);  color: #b91c1c; }
.kpi__delta--flat  { background: var(--bg-muted); color: var(--text-muted); }
.kpi__delta--new   { background: rgba(37,99,235,.1); color: var(--brand); }
[data-theme="dark"] .kpi__delta--up   { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-theme="dark"] .kpi__delta--down { background: rgba(220,38,38,.15);  color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   9. GRID LAYOUT UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.row  { gap: 1.1rem; }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) { .row-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  {
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   10. BODY / MAIN MESH BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

body {
  background-image: var(--grad-mesh-lt);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image: var(--grad-mesh-dk);
}

/* Main content area spacing */
.main { padding: 1.5rem 1.5rem; }
@media (max-width: 768px) { .main { padding: 1rem 1rem; } }

/* ═══════════════════════════════════════════════════════════════
   11. FORM UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--border);
  background: var(--bg-elev);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12), 0 1px 3px rgba(13,27,46,.06);
}

/* ═══════════════════════════════════════════════════════════════
   12. SKIP LINK + FOCUS STYLES
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute; top: -60px; left: 1rem;
  background: var(--brand); color: #fff; padding: .5rem 1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: .8rem;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   13. MICRO-ANIMATION HELPERS
   ═══════════════════════════════════════════════════════════════ */

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmerSlide {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

.animate-scaleIn   { animation: scaleIn .25s var(--ease-out) both; }
.animate-slideUp   { animation: slideUpFade .3s var(--ease-out) both; }
.is-in { animation: slideUpFade .38s var(--ease-out) both; }

/* Shimmer loading skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%
  );
  background-size: 200% auto;
  animation: shimmerSlide 1.4s linear infinite;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   14. REDUCED-MOTION SAFETY
   ═══════════════════════════════════════════════════════════════ */

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   Land EMI Platform — Premium Design System Extension v3
   Smart Cards · Premium Navigation · Mobile-Native UX
   Layered on top of app.css — all selectors are additive.
   ═══════════════════════════════════════════════════════════════ */

/* ── Extended design tokens ──────────────────────────────────── */
:root {
  --grad-brand-3:   linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #4f46e5 100%);
  --grad-teal:      linear-gradient(135deg, #0ea5e9, #0891b2);
  --grad-success:   linear-gradient(135deg, #10b981, #059669);
  --grad-gold:      linear-gradient(135deg, #f59e0b, #d97706);
  --grad-danger:    linear-gradient(135deg, #ef4444, #dc2626);
  --grad-purple:    linear-gradient(135deg, #8b5cf6, #7c3aed);
  --grad-mesh-lt:
    radial-gradient(ellipse 900px 700px at 10% -10%, rgba(37,99,235,.1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 105%, rgba(139,92,246,.08), transparent 60%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(16,185,129,.05), transparent 55%);
  --grad-mesh-dk:
    radial-gradient(ellipse 900px 700px at 10% -10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 105%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(16,185,129,.07), transparent 55%);

  /* Smart card tokens */
  --sc-radius:        18px;
  --sc-shadow:        0 4px 28px rgba(13,27,46,.07), 0 1px 4px rgba(13,27,46,.04);
  --sc-shadow-hover:  0 10px 40px rgba(13,27,46,.12), 0 3px 10px rgba(13,27,46,.06);
  --sc-glass-bg:      rgba(255,255,255,.86);
  --sc-glass-border:  rgba(255,255,255,.72);
  --sc-glass-blur:    saturate(200%) blur(22px);

  /* Premium nav */
  --sb-link-radius:   9px;
  --sb-glow-color:    rgba(37,99,235,.22);
  --bn-pill-h:        64px;
  --bn-pill-radius:   26px;
  --bn-glass-bg:      rgba(255,255,255,.9);
  --bn-glass-blur:    saturate(200%) blur(24px);
  --bn-shadow:        0 -1px 0 rgba(0,0,0,.05), 0 -4px 24px rgba(13,27,46,.1), 0 -1px 0 rgba(255,255,255,.6) inset;

  /* Premium topbar */
  --tb-glass-bg:      rgba(255,255,255,.88);
  --tb-glass-blur:    saturate(200%) blur(24px);
  --tb-border:        rgba(255,255,255,.65);
}

[data-theme="dark"] {
  --sc-glass-bg:      rgba(15,22,37,.88);
  --sc-glass-border:  rgba(255,255,255,.07);
  --bn-glass-bg:      rgba(10,16,30,.92);
  --bn-shadow:        0 -1px 0 rgba(255,255,255,.04), 0 -4px 28px rgba(0,0,0,.5);
  --tb-glass-bg:      rgba(9,14,26,.9);
  --tb-border:        rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   1. PREMIUM SIDEBAR UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sidebar-bg) 100%, #2563eb 8%) 0%,
    var(--sidebar-bg) 40%,
    color-mix(in srgb, var(--sidebar-bg) 95%, #000 20%) 100%);
}

/* Brand bar */
.sidebar__brand-row {
  padding: .25rem .5rem .25rem .25rem;
  background: linear-gradient(180deg, rgba(37,99,235,.14) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar__brand {
  padding: .95rem 1rem .9rem;
  gap: .8rem;
}
.sidebar__brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--grad-brand-3);
  box-shadow: 0 4px 16px rgba(37,99,235,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
  font-size: 1.1rem;
  transition: transform .22s var(--ease-spring), box-shadow .22s;
}
.sidebar__brand:hover .logo { transform: scale(1.08) rotate(-3deg); box-shadow: 0 6px 22px rgba(37,99,235,.6), 0 0 0 1px rgba(255,255,255,.2) inset; }

/* Nav padding */
.sidebar__nav { padding: .75rem .6rem .6rem; }

/* Group headers */
.sidebar__group > summary {
  padding: .55rem .7rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .12em;
  color: rgba(255,255,255,.28);
  border-radius: 6px;
  margin-top: .5rem;
  position: relative;
}
.sidebar__group > summary::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,.05);
  z-index: 0; margin: 0 .4rem;
}
.sidebar__group-label { position: relative; z-index: 1; background: var(--sidebar-bg); padding: 0 .35rem; }
.sidebar__group > summary:hover { color: rgba(255,255,255,.52); background: transparent; }
.sidebar__group[open] > summary { color: rgba(255,255,255,.48); }

/* Group body */
.sidebar__group-body {
  padding: .2rem 0 .35rem .25rem;
  margin-left: .55rem;
  border-left: 1px solid rgba(255,255,255,.06);
  animation: sidebar-slide .2s var(--ease-out);
}

/* Navigation links — premium pill style */
.sidebar__link {
  border-radius: var(--sb-link-radius);
  min-height: 42px; padding: .48rem .7rem;
  gap: .65rem; font-size: .875rem;
  margin-bottom: .5px;
  position: relative; overflow: hidden;
}
.sidebar__link::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--sb-link-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 100%);
  opacity: 0; transition: opacity var(--trans);
  pointer-events: none;
}
.sidebar__link:hover::before { opacity: 1; }
.sidebar__link:hover { background: rgba(255,255,255,.08); color: #fff; padding-left: .95rem; }
.sidebar__link.is-active {
  background: linear-gradient(135deg, rgba(37,99,235,.28) 0%, rgba(79,70,229,.18) 100%);
  color: #a8c5ff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand), 0 2px 12px rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.2);
}
.sidebar__link.is-active::before { opacity: 1; }
.sidebar__link.is-active .sb-icon { color: #7daaff; background: rgba(37,99,235,.25); }

/* Sidebar icon boxes */
.sb-icon {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  transition: background var(--trans), color var(--trans), transform .15s var(--ease-spring);
  font-size: .9rem; flex-shrink: 0;
}
.sidebar__link:hover .sb-icon { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.1); }
.sidebar__link .label { flex: 1; }

/* Sidebar badge (notification count on menu item) */
.sb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 800; border-radius: 99px;
  flex-shrink: 0; line-height: 1;
  box-shadow: 0 2px 6px rgba(220,38,38,.4);
  animation: sb-badge-pop .3s var(--ease-spring) both;
}
@keyframes sb-badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.sb-badge--brand { background: var(--brand); box-shadow: 0 2px 6px rgba(37,99,235,.4); }
.sb-badge--warn  { background: var(--warning); box-shadow: 0 2px 6px rgba(217,119,6,.4); }

/* Premium profile bar */
.sidebar__profile {
  padding: .9rem 1rem;
  background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  gap: .75rem;
}
.sidebar__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand-3);
  font-size: .85rem; font-weight: 800;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(37,99,235,.5), 0 3px 12px rgba(37,99,235,.3);
  position: relative;
}
.sidebar__avatar::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--sidebar-bg);
}
.sidebar__user-name { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.92); }
.sidebar__user-role {
  font-size: .67rem; color: rgba(255,255,255,.4);
  font-weight: 500; letter-spacing: .03em;
}
.sidebar__profile-link {
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
  transition: background var(--trans), color var(--trans), transform .15s var(--ease-spring);
  text-decoration: none; flex-shrink: 0;
}
.sidebar__profile-link:hover { background: rgba(255,255,255,.14); color: #fff; transform: scale(1.1); text-decoration: none; }

/* Small-menu profile */
.app[data-menu="small"] .sidebar__profile { padding: .75rem .4rem; justify-content: center; }
.app[data-menu="small"] .sidebar__profile-link { display: none; }

/* ═══════════════════════════════════════════════════════════════
   2. PREMIUM TOPBAR
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  background: var(--tb-glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--tb-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 16px rgba(13,27,46,.05);
}
[data-theme="dark"] .topbar {
  background: var(--tb-glass-bg);
  border-bottom-color: rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 20px rgba(0,0,0,.4);
}

/* Breadcrumbs upgrade */
.breadcrumbs { gap: .1rem; }
.breadcrumbs a { color: var(--text-faint); font-weight: 500; font-size: .78rem; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: none; }
.breadcrumbs__sep { color: var(--text-faint); opacity: .5; }
.breadcrumbs__current {
  color: var(--text);
  background: linear-gradient(135deg, rgba(37,99,235,.1) 0%, rgba(79,70,229,.07) 100%);
  border: 1px solid rgba(37,99,235,.15);
  padding: .18rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Command palette */
.cpal-trigger {
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .32rem .8rem;
  gap: .5rem;
  max-width: 200px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.cpal-trigger:hover {
  border-color: var(--brand);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
}
@media (max-width: 900px) { .cpal-trigger { max-width: 140px; } }

/* Topbar icon buttons — premium glass pill */
.topbar__icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--trans), border-color var(--trans), color var(--trans), transform .15s var(--ease-spring), box-shadow var(--trans);
}
.topbar__icon-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text);
  transform: scale(1.06);
  box-shadow: var(--shadow-xs);
}
.topbar__icon-btn:active { transform: scale(.94); }

/* Notification bell pulse */
.topbar__notif-pulse {
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.topbar__notif-pulse::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: rgba(220,38,38,.4);
  animation: tb-pulse 2s ease infinite;
}
@keyframes tb-pulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.6); opacity: 0; }
}

/* Premium topbar badge */
.topbar__badge {
  background: var(--grad-danger);
  box-shadow: 0 2px 8px rgba(220,38,38,.45);
  font-size: .58rem; font-weight: 800;
  min-width: 16px; height: 16px; padding: 0 3px;
  line-height: 16px;
  border: 1.5px solid var(--bg-elev);
  top: -4px; right: -4px;
}

/* User button upgrade */
.topbar__user-btn {
  border-radius: 10px;
  padding: .28rem .5rem .28rem .28rem;
  gap: .45rem;
  border: 1.5px solid transparent;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.topbar__user-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* Avatar with gradient ring */
.topbar__user-avatar {
  width: 28px; height: 28px;
  background: var(--grad-brand-3);
  box-shadow: 0 0 0 2px rgba(37,99,235,.25), 0 2px 8px rgba(37,99,235,.2);
  font-size: .75rem; font-weight: 800;
  border-radius: 50%;
  position: relative;
}
.topbar__user-avatar::after {
  content: '';
  position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%; background: #22c55e;
  border: 1.5px solid var(--bg-elev);
}

/* User dropdown premium */
.topbar__user-dropdown {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--sc-glass-bg);
}
.topbar__user-dropdown-header {
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(79,70,229,.04) 100%);
  border-bottom: 1px solid var(--border);
}
.topbar__user-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem 1.1rem;
  font-size: .85rem; color: var(--text);
  transition: background var(--trans), color var(--trans), padding-left var(--trans);
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  text-decoration: none;
}
.topbar__user-item:hover { background: var(--bg-muted); color: var(--text); padding-left: 1.4rem; text-decoration: none; }
.topbar__user-item svg { opacity: .55; flex-shrink: 0; }
.topbar__user-item:hover svg { opacity: 1; }
.topbar__user-item--danger { color: var(--danger); }
.topbar__user-item--danger:hover { background: rgba(220,38,38,.06); color: var(--danger); }
.topbar__user-divider { height: 1px; background: var(--border); margin: .2rem 0; }

/* ═══════════════════════════════════════════════════════════════
   3. PREMIUM BOTTOM NAV — FLOATING PILL
   ═══════════════════════════════════════════════════════════════ */

.bottom-nav {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 10px);
  left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px));
  height: var(--bn-pill-h);
  background: var(--bn-glass-bg);
  backdrop-filter: var(--bn-glass-blur);
  -webkit-backdrop-filter: var(--bn-glass-blur);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--bn-pill-radius);
  box-shadow: var(--bn-shadow);
  z-index: var(--z-bottom-nav);
  overflow: hidden;
  display: none;
}
[data-theme="dark"] .bottom-nav {
  border-color: rgba(255,255,255,.08);
}

/* Show only on mobile/tablet */
@media (max-width: 900px) {
  .bottom-nav { display: block; }
  .main {
    padding-bottom: calc(var(--bn-pill-h) + max(env(safe-area-inset-bottom), 10px) + 1.25rem);
  }
}

.bottom-nav__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 40%);
  border-radius: inherit;
}
[data-theme="dark"] .bottom-nav__glow { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 40%); }

.bottom-nav__items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 100%;
  position: relative; z-index: 1;
  padding: 0 .25rem;
}

/* Tab buttons */
.bottom-nav__item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  padding: 0 .1rem; height: 100%;
  position: relative; flex: 1;
  color: var(--text-faint);
  transition: color var(--trans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bottom-nav__item:active { transform: scale(.9); transition: transform .1s; }
.bottom-nav__item.is-active { color: var(--brand); }

/* Active indicator dot */
.bottom-nav__item::before {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand);
  transition: transform .25s var(--ease-spring);
}
.bottom-nav__item.is-active::before { transform: translateX(-50%) scale(1); }

/* Icon */
.bottom-nav__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.bottom-nav__icon svg { width: 100%; height: 100%; transition: transform .2s var(--ease-spring); }
.bottom-nav__item.is-active .bottom-nav__icon svg { transform: scale(1.12); }
.bottom-nav__item:active .bottom-nav__icon svg { transform: scale(.88); }

/* Label */
.bottom-nav__label {
  font-size: .6rem; font-weight: 700; letter-spacing: .02em;
  line-height: 1; text-transform: uppercase;
  transition: color var(--trans);
  white-space: nowrap;
}

/* EMI elevated button */
.bottom-nav__item--emi {
  background: var(--grad-brand-3);
  color: #fff !important;
  border-radius: 16px;
  width: 52px; height: 48px;
  margin: auto .15rem;
  box-shadow: 0 4px 18px rgba(37,99,235,.45), 0 0 0 3px rgba(255,255,255,.8);
  flex-direction: column;
  flex: 0 0 52px;
  transition: transform .2s var(--ease-spring), box-shadow .2s, background .2s;
}
.bottom-nav__item--emi::before { display: none; }
.bottom-nav__item--emi:active { transform: scale(.92); }
.bottom-nav__item--emi.is-active {
  box-shadow: 0 6px 24px rgba(37,99,235,.6), 0 0 0 3px rgba(255,255,255,.9);
}
[data-theme="dark"] .bottom-nav__item--emi {
  box-shadow: 0 4px 20px rgba(37,99,235,.55), 0 0 0 2px rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════
   4. PREMIUM SUB-NAV PANEL
   ═══════════════════════════════════════════════════════════════ */

.bn-subnav {
  position: fixed;
  inset: 0; z-index: calc(var(--z-bottom-nav) - 1);
  pointer-events: none;
}
.bn-subnav.is-open { pointer-events: auto; }

.bn-subnav__bd {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.bn-subnav.is-open .bn-subnav__bd { opacity: 1; }

.bn-subnav__panel {
  position: absolute;
  bottom: calc(var(--bn-pill-h) + max(env(safe-area-inset-bottom), 10px) + 14px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  width: min(440px, calc(100vw - 24px));
  background: var(--sc-glass-bg);
  backdrop-filter: var(--sc-glass-blur);
  -webkit-backdrop-filter: var(--sc-glass-blur);
  border: 1px solid var(--sc-glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow-xl);
  padding: 1.1rem 1.1rem .9rem;
  opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-spring), opacity .25s var(--ease-out);
  overflow: hidden;
}
.bn-subnav.is-open .bn-subnav__panel {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: auto;
}

/* Panel header */
.bn-subnav__hd {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .9rem;
}
.bn-subnav__hd-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--bnp-accent-rgb, 37,99,235),.4);
}
.bn-subnav__hd-body { flex: 1; min-width: 0; }
.bn-subnav__hd-title { font-size: .95rem; font-weight: 800; display: block; color: var(--text); }
.bn-subnav__hd-goto {
  font-size: .72rem; color: var(--text-muted); font-weight: 500;
  display: inline-flex; align-items: center; gap: .25rem;
  transition: color var(--trans);
  text-decoration: none;
}
.bn-subnav__hd-goto:hover { color: var(--brand); text-decoration: none; }
.bn-subnav__close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--trans), color var(--trans), transform .15s;
  flex-shrink: 0;
}
.bn-subnav__close:hover { background: var(--bg-muted); color: var(--text); transform: rotate(90deg); }

/* Sub-links grid */
.bn-subnav__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.bn-subnav__link {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .75rem .5rem;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-elev);
  text-decoration: none;
  transition: background var(--trans), border-color var(--trans), transform .18s var(--ease-spring), box-shadow var(--trans);
}
.bn-subnav__link:hover {
  background: rgba(var(--bnp-accent-rgb, 37,99,235), .06);
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--bnp-accent-rgb, 37,99,235), .12);
  text-decoration: none;
}
.bn-subnav__link:active { transform: scale(.94); }
.bn-subnav__link-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  transition: transform .18s var(--ease-spring);
}
.bn-subnav__link:hover .bn-subnav__link-icon { transform: scale(1.12); }
.bn-subnav__link-label {
  font-size: .67rem; font-weight: 700; color: var(--text-muted);
  text-align: center; line-height: 1.2;
  transition: color var(--trans);
}
.bn-subnav__link:hover .bn-subnav__link-label { color: var(--text); }

/* Drag handle */
.bn-subnav__handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--border-strong); margin: .75rem auto 0;
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   5. SMART CARD SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Override base card with premium styling */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sc-shadow);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.card:hover { box-shadow: var(--sc-shadow-hover); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-hover); }

/* Premium card header */
.card__header {
  padding: .95rem 1.15rem;
  font-size: .88rem; font-weight: 700;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-muted) 80%, var(--bg-elev) 20%) 0%,
    var(--bg-elev) 100%
  );
  border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
}

/* Glassmorphism card variant */
.card--glass {
  background: var(--sc-glass-bg);
  backdrop-filter: var(--sc-glass-blur);
  -webkit-backdrop-filter: var(--sc-glass-blur);
  border: 1px solid var(--sc-glass-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}

/* Smart stat card — full premium upgrade */
.card.stat {
  padding: 1.15rem 1.3rem;
  border-radius: var(--sc-radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--sc-shadow);
  position: relative; overflow: hidden;
  gap: .25rem;
}
.card.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  opacity: 0; transition: opacity var(--trans);
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
.card.stat:hover::before { opacity: 1; }
.card.stat::after {
  content: '';
  position: absolute; top: -40px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 70%);
  pointer-events: none;
}
.stat__label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.stat__value {
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1.1;
  color: var(--text);
}

/* ── Alert upgrades ─────────────────────────────────────────── */
.alert {
  border-radius: 10px;
  padding: .85rem 1.1rem;
  font-size: .875rem;
}
.alert-success { border-left: 3px solid var(--success); }
.alert-warning  { border-left: 3px solid var(--warning); }
.alert-danger   { border-left: 3px solid var(--danger); }
.alert-info     { border-left: 3px solid var(--info); }

/* ── Table upgrades ──────────────────────────────────────────── */
.table thead tr {
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-elev) 100%);
}
.table th {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 800;
  border-bottom: 1.5px solid var(--border);
}
.table tr:hover td { background: rgba(37,99,235,.03); }
[data-theme="dark"] .table tr:hover td { background: rgba(37,99,235,.07); }
.table td { vertical-align: middle; }

/* ── Badge upgrades ──────────────────────────────────────────── */
.badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .18rem .6rem; border-radius: 6px;
}
.badge-success { background: rgba(22,163,74,.1);  color: #15803d; border: 1px solid rgba(22,163,74,.2); }
.badge-danger  { background: rgba(220,38,38,.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,.2); }
.badge-warning { background: rgba(217,119,6,.1);  color: #b45309; border: 1px solid rgba(217,119,6,.2); }
.badge-info    { background: rgba(2,132,199,.1);   color: #075985; border: 1px solid rgba(2,132,199,.2); }
.badge-brand   { background: rgba(37,99,235,.1);   color: #1d4ed8; border: 1px solid rgba(37,99,235,.2); }
[data-theme="dark"] .badge-success { background: rgba(22,163,74,.15); color: #4ade80; border-color: rgba(22,163,74,.2); }
[data-theme="dark"] .badge-danger  { background: rgba(220,38,38,.15); color: #f87171; border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .badge-warning { background: rgba(217,119,6,.15); color: #fbbf24; border-color: rgba(217,119,6,.2); }
[data-theme="dark"] .badge-info    { background: rgba(2,132,199,.15);  color: #38bdf8; border-color: rgba(2,132,199,.2); }

/* ── Button upgrades ─────────────────────────────────────────── */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-primary {
  background: var(--grad-brand);
  box-shadow: 0 1px 3px rgba(37,99,235,.3), 0 0 0 1px rgba(37,99,235,.15) inset;
}
.btn-primary:hover {
  background: var(--grad-brand-h);
  box-shadow: 0 4px 16px rgba(37,99,235,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   6. SMART SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */

/* Common section heading style used across pages */
.sec-hd {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem;
}
.sec-hd__title {
  font-size: .95rem; font-weight: 800; color: var(--text);
  letter-spacing: -.02em;
}
.sec-hd__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--bg-muted); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; border-radius: 99px;
}
.sec-hd__spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   7. FLASH / ALERT STRIP
   ═══════════════════════════════════════════════════════════════ */

/* Flashier flash messages */
.alert-success {
  background: linear-gradient(135deg, rgba(16,185,129,.07) 0%, rgba(5,150,105,.04) 100%);
  border: 1px solid rgba(16,185,129,.2);
}
.alert-danger {
  background: linear-gradient(135deg, rgba(239,68,68,.07) 0%, rgba(220,38,38,.04) 100%);
  border: 1px solid rgba(239,68,68,.2);
}
.alert-warning {
  background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, rgba(217,119,6,.04) 100%);
  border: 1px solid rgba(245,158,11,.2);
}
.alert-info {
  background: linear-gradient(135deg, rgba(14,165,233,.07) 0%, rgba(2,132,199,.04) 100%);
  border: 1px solid rgba(14,165,233,.2);
}

/* ═══════════════════════════════════════════════════════════════
   8. KPI STRIP — GLOBAL SMART VERSION
   ═══════════════════════════════════════════════════════════════ */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px)  { .kpi-strip { grid-template-columns: 1fr 1fr; } }

.kpi {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--sc-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--sc-shadow);
  display: flex; flex-direction: column; gap: .22rem;
  position: relative; overflow: hidden;
  transition: box-shadow var(--trans), transform var(--trans);
}
.kpi:hover { box-shadow: var(--sc-shadow-hover); transform: translateY(-1px); }
.kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-accent, var(--grad-brand));
  opacity: 0; transition: opacity var(--trans);
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
.kpi:hover::before { opacity: 1; }
.kpi__icon-wrap {
  position: absolute; top: .9rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--kpi-icon-bg, rgba(37,99,235,.1));
  display: grid; place-items: center; font-size: 1rem;
}
.kpi__lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.kpi__val {
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  color: var(--text);
}
.kpi__foot {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--text-muted); margin-top: .1rem;
}
.kpi__delta {
  display: inline-flex; align-items: center;
  padding: .1rem .4rem; border-radius: 99px;
  font-size: .68rem; font-weight: 700; letter-spacing: -.01em;
}
.kpi__delta--up    { background: rgba(22,163,74,.1);  color: #15803d; }
.kpi__delta--down  { background: rgba(220,38,38,.1);  color: #b91c1c; }
.kpi__delta--flat  { background: var(--bg-muted); color: var(--text-muted); }
.kpi__delta--new   { background: rgba(37,99,235,.1); color: var(--brand); }
[data-theme="dark"] .kpi__delta--up   { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-theme="dark"] .kpi__delta--down { background: rgba(220,38,38,.15);  color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   9. GRID LAYOUT UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.row  { gap: 1.1rem; }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) { .row-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  {
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   10. BODY / MAIN MESH BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

body {
  background-image: var(--grad-mesh-lt);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image: var(--grad-mesh-dk);
}

/* Main content area spacing */
.main { padding: 1.5rem 1.5rem; }
@media (max-width: 768px) { .main { padding: 1rem 1rem; } }

/* ═══════════════════════════════════════════════════════════════
   11. FORM UPGRADES
   ═══════════════════════════════════════════════════════════════ */

.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--border);
  background: var(--bg-elev);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12), 0 1px 3px rgba(13,27,46,.06);
}

/* ═══════════════════════════════════════════════════════════════
   12. SKIP LINK + FOCUS STYLES
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute; top: -60px; left: 1rem;
  background: var(--brand); color: #fff; padding: .5rem 1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: .8rem;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   13. MICRO-ANIMATION HELPERS
   ═══════════════════════════════════════════════════════════════ */

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmerSlide {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

.animate-scaleIn   { animation: scaleIn .25s var(--ease-out) both; }
.animate-slideUp   { animation: slideUpFade .3s var(--ease-out) both; }
.is-in { animation: slideUpFade .38s var(--ease-out) both; }

/* Shimmer loading skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%
  );
  background-size: 200% auto;
  animation: shimmerSlide 1.4s linear infinite;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   14. REDUCED-MOTION SAFETY
   ═══════════════════════════════════════════════════════════════ */

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   Land EMI Platform — Global Mobile-Native & Responsive System
   Fixes all breakpoints, touch targets, safe areas, overflows.
   Appended last so it wins every cascade battle.
   ═══════════════════════════════════════════════════════════════ */

/* ── Safe-area / env() custom properties ──────────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
}

/* ── Prevent horizontal overflow globally ─────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
* { min-width: 0; }   /* Prevent flex/grid children from overflowing */

/* ── Touch target minimum (WCAG 2.5.5) ───────────────────────── */
a, button, [role="button"], input[type="checkbox"], input[type="radio"],
select, .btn, .topbar__icon-btn, .sidebar__link, .bottom-nav__item,
.bn-subnav__link, .card--lift {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"] { touch-action: manipulation; }

/* All interactive controls minimum 44×44px touch area */
.btn       { min-height: 44px; }
.btn-sm    { min-height: 36px; }
.btn.btn-sm{ min-height: 36px; }

/* ── Table responsive auto-wrap (catches bare <table> elements) ── */
.card__body > table:not(.no-responsive-wrap),
.card__body > div > table:not(.no-responsive-wrap),
main > table:not(.no-responsive-wrap) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Explicit wrapper class — used by raw tables without a wrapper div */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Modal/dialog global constraints ──────────────────────────── */
/* Any fixed-pixel modal that might overflow narrow screens */
[class*="modal-box"],
[class*="-modal"],
[class*="-dialog"],
.land-confirm__dialog,
.land-cpal__dialog {
  max-width: min(100vw - 1.5rem, var(--modal-max-w, 640px)) !important;
  width: 100% !important;
}

/* Specific sm modal override */
.modal-box.sm,
.modal-box--sm {
  width: 100% !important;
  max-width: min(100vw - 1.5rem, 420px) !important;
}

/* ── Dropdown viewport constraint ─────────────────────────────── */
[class*="-dropdown"],
[class*="__dropdown"],
.status-dropdown,
.topbar__user-dropdown,
.notif-dropdown {
  max-width: min(100vw - 1.5rem, 280px);
}
/* Wider dropdowns */
.topbar__user-dropdown { max-width: min(100vw - 1.5rem, 260px); }

/* ── Bulk / floating action bars ─────────────────────────────────*/
.bulk-bar,
[class*="bulk-bar"],
[class*="__bulk"] {
  padding-bottom: max(.65rem, var(--safe-bottom));
  left: var(--safe-left, 0);
  right: var(--safe-right, 0);
}

/* ── Sticky elements safe-area padding ────────────────────────── */
.topbar {
  padding-top: var(--safe-top);
}
/* Main content bottom padding includes bottom-nav pill + safe-area */
@media (max-width: 900px) {
  .main {
    padding-bottom: calc(var(--bn-pill-h, 64px) + max(var(--safe-bottom), 10px) + 1.5rem) !important;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
  }
}

/* ── Input / form mobile upgrades ─────────────────────────────── */
input, textarea, select {
  font-size: max(16px, 1em); /* Prevents iOS zoom on focus */
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
}
/* Restore date/time native picker on mobile */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: auto;
}
.form-control, .form-select {
  font-size: 16px; /* Hard 16px to prevent zoom */
  min-height: 44px;
}
textarea.form-control { min-height: 80px; font-size: 16px; }

/* Form groups stack nicely */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: .85rem;
}

/* ── Typography responsive scaling ───────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: .95rem; }
  .stat__value { font-size: 1.45rem; }
}

/* ── Grid system full stack at 480px ──────────────────────────── */
@media (max-width: 480px) {
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr !important; gap: .75rem; }
  .kpi-strip { grid-template-columns: 1fr 1fr !important; gap: .65rem; }
}

/* ── Stat cards: 2-up at 360px, 1-up below 320px ─────────────── */
.stat-cards-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.stat-card { flex: 1 1 calc(50% - .325rem); min-width: 130px; max-width: 100%; }
@media (max-width: 320px) {
  .stat-card { flex: 1 1 100%; }
}

/* ── Card max-width guard ─────────────────────────────────────── */
.card { max-width: 100%; overflow: hidden; word-break: break-word; }
.card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Flex layouts — force wrap on mobile (topbar exempt) ─────── */
@media (max-width: 640px) {
  .d-flex:not(.topbar):not(.topbar__actions) { flex-wrap: wrap; }
  .d-flex.no-wrap { flex-wrap: nowrap; }
}

/* ── Button groups: wrap on mobile ───────────────────────────── */
/* NOTE: .topbar__actions is excluded — topbar must never wrap */
.btn-group, [class*="__actions"]:not(.topbar__actions),
[class*="__btns"] { flex-wrap: wrap; }

/* ── Image responsive defaults ───────────────────────────────── */
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* ── Long text overflow in tables/cells ──────────────────────── */
td, th { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
td.no-clip, th.no-clip { max-width: none; overflow: visible; text-overflow: unset; }

/* ── Inline styles that use fixed widths — override at mobile ─── */
@media (max-width: 640px) {
  /* Any direct-child of a flex/grid that might have fixed width */
  [style*="min-width:180px"],
  [style*="min-width: 180px"] { min-width: 0 !important; }
  [style*="width:400px"],
  [style*="width: 400px"] { width: 100% !important; max-width: 400px !important; }
}

/* ── Sidebar overlay — improved for notch devices ────────────── */
@media (max-width: 768px) {
  .sidebar {
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-bottom: var(--safe-bottom);
  }
}

/* ── Topbar — never wrap, always single row ──────────────────── */
.topbar {
  flex-wrap: nowrap !important;
  overflow: hidden;
  max-width: 100vw;
}
.topbar__actions {
  flex-wrap: nowrap !important;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 360px) {
  .topbar { padding: 0 .6rem; gap: .25rem; }
  .topbar__icon-btn { width: 32px; height: 32px; }
  [data-rtl-toggle], .theme-trigger-btn { display: none; }
}

/* ── Bottom nav pill — sub-nav panel mobile constraints ─────── */
.bn-subnav__panel {
  max-height: calc(100vh - var(--bn-pill-h, 64px) - max(var(--safe-bottom), 10px) - 1rem);
  overflow-y: auto;
}
@media (max-width: 360px) {
  .bn-subnav__links { grid-template-columns: repeat(2, 1fr); }
}

/* ── Charts: canvas/iframe responsive ─────────────────────────── */
canvas { max-width: 100%; }

/* ── EMI-specific responsive fixes ───────────────────────────── */
/* KPI strips using flex/grid patterns */
.emi-kpi-strip, [class*="kpi-strip"], [class*="__kpi-strip"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: .65rem;
}
@media (max-width: 480px) {
  .emi-kpi-strip, [class*="kpi-strip"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Collections page responsive fixes ───────────────────────── */
@media (max-width: 640px) {
  .cs2-tbl td:nth-child(4),
  .cs2-tbl th:nth-child(4) { display: none; }
  .cs2-tbl td:nth-child(5),
  .cs2-tbl th:nth-child(5) { display: none; }
}

/* ── Reports page — aging blocks ─────────────────────────────── */
.aging-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
@media (max-width: 880px) { .aging-block { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .aging-block { grid-template-columns: 1fr 1fr; } }

/* ── Users page — table cell overflow fix ────────────────────── */
.users-table td:nth-child(2) {
  min-width: auto !important;
  max-width: 200px;
}

/* ── Plots page — responsive gallery ─────────────────────────── */
.plot-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .65rem; }
@media (max-width: 480px) { .plot-gallery { grid-template-columns: 1fr; } }

/* ── Notification/referral cards stack on mobile ─────────────── */
@media (max-width: 600px) {
  [class*="ref-kpi"],
  [class*="nf-kpi"] {
    min-width: calc(50% - .35rem) !important;
  }
}

/* ── Profile page fixes ───────────────────────────────────────── */
.prof-hero__row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
}
@media (max-width: 600px) {
  .prof-hero__main { flex-direction: column; align-items: center; text-align: center; }
}

/* ── Watchlist / finance / health stub pages ─────────────────── */
.stub-wrap {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2rem 1rem;
  max-width: 480px; margin: 0 auto;
}

/* ── Auth pages ───────────────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  padding: max(4rem, calc(var(--safe-top) + 4rem)) 1rem max(1.5rem, var(--safe-bottom));
}
.auth-card { width: 100%; max-width: min(420px, calc(100vw - 2rem)); }
@media (max-width: 420px) {
  .auth-card .card__body { padding: 1rem 1rem 1.5rem; }
}

/* ── Support ticket / forms ───────────────────────────────────── */
@media (max-width: 640px) {
  .ticket-meta { flex-direction: column; gap: .5rem; }
  .ticket-actions { width: 100%; flex-wrap: wrap; }
  .ticket-actions .btn { flex: 1; }
}

/* ── Breadcrumbs overflow guard ───────────────────────────────── */
.breadcrumbs {
  overflow: hidden;
  white-space: nowrap;
  max-width: 50vw;
}
@media (max-width: 480px) { .breadcrumbs { max-width: 38vw; } }
@media (max-width: 360px) { .breadcrumbs { max-width: 30vw; } }
.breadcrumbs__current {
  max-width: 150px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Ledger page ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ledger-entries-table th:nth-child(3),
  .ledger-entries-table td:nth-child(3) { display: none; }
  .ledger-entries-table th:nth-child(6),
  .ledger-entries-table td:nth-child(6) { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Audit log table ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .audit-table th:nth-child(4),
  .audit-table td:nth-child(4),
  .audit-table th:nth-child(5),
  .audit-table td:nth-child(5) { display: none; }
}

/* ── Payment gateways / addons / settings ────────────────────── */
@media (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr !important; }
}

/* ── Automation page ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .automation-table th:nth-child(5),
  .automation-table td:nth-child(5) { display: none; }
}

/* ── CMS / page blocks editor ────────────────────────────────── */
@media (max-width: 640px) {
  .cms-blocks-grid { grid-template-columns: 1fr !important; }
}

/* ── Referrals — QR/share viewport fix ──────────────────────── */
.ref-qr-viewer img, .ref-share-qr img {
  max-width: min(280px, 80vw); height: auto;
}

/* ── EMI Schedule timeline ──────────────────────────────────── */
@media (max-width: 480px) {
  .emi-tl-body__sub { font-size: .68rem; }
  .emi-hero-stat__val { font-size: 1rem; }
  .emi-hero-info__title { font-size: .9rem; }
}

/* ── Scrollbar — thinner on mobile ──────────────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* ── Print: hide nav elements ────────────────────────────────── */
@media print {
  .sidebar, .topbar, .bottom-nav, .bn-subnav,
  .db-fab-wrap, .db-top-btn, .db-toast,
  [class*="-fab"], [class*="__fab"] { display: none !important; }
  .main { padding: 0 !important; }
  .app { display: block !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT SUMMARY (mobile-first cascade)
   ══════════════════════════════════════════════════════════════
   < 320px  — Extreme small (very old Android, Apple Watch)
   320–360  — Small phones (SE, older Android)
   360–480  — Regular phones (iPhone 8, Android standard)
   480–640  — Large phones / small tablets
   640–768  — Phablets / small tablets
   768–900  — Tablets (show bottom nav up to here)
   900–1100 — Small laptops / tablets landscape
   1100+    — Full desktop layout
   ══════════════════════════════════════════════════════════════ */

/* ── 900px: bottom nav boundary ─────────────────────────────── */
@media (min-width: 901px) {
  .bottom-nav { display: none !important; }
  .bn-subnav  { display: none !important; }
}

/* ── 768px+: sidebar always visible ─────────────────────────── */
@media (min-width: 769px) {
  .sidebar__close-btn { display: none !important; }
}

/* ── Tablet (640–900) ────────────────────────────────────────── */
@media (max-width: 900px) and (min-width: 641px) {
  .row-4 { grid-template-columns: repeat(2, 1fr); }
  .row-3 { grid-template-columns: repeat(2, 1fr); }
  .main  { padding: 1.25rem; }
}

/* ── Phone (max 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  .main   { padding: .9rem .9rem; }
  .card__body { padding: .9rem; }
  .card__header { padding: .8rem .9rem; }
  .btn    { padding: .5rem .8rem; font-size: .83rem; }
  .btn-sm { padding: .3rem .55rem; font-size: .77rem; }
  h2 { font-size: 1.1rem; }
  .row-2 { grid-template-columns: 1fr; gap: .65rem; }
}

/* ── Small phone (max 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  .main     { padding: .75rem .75rem; }
  .card     { border-radius: 12px; }
  .card__body { padding: .8rem; }
  /* 2-up grids shrink but don't fully stack unless forced */
  .row-4 { grid-template-columns: 1fr 1fr; gap: .55rem; }
  /* Hide less-important topbar items */
  .topbar__icon-btn[data-rtl-toggle],
  .topbar__icon-btn.theme-trigger-btn { display: none; }
}

/* ── Extra-small (max 360px) ─────────────────────────────────── */
@media (max-width: 360px) {
  .main         { padding: .6rem .6rem; }
  .card__body   { padding: .7rem; }
  .card__header { padding: .65rem .7rem; }
  .btn          { padding: .45rem .65rem; font-size: .8rem; }
  .stat__value  { font-size: 1.3rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENT PASS v2 — comprehensive mobile-native polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Table horizontal scroll — all card-body tables ────────────── */
.card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card__body > table,
.card__body > div > table { min-width: 0; }

/* Force any bare table wrapper to scroll */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
table { max-width: 100%; }

/* ── 2. Filter / search bar wrapping ─────────────────────────────── */
/* All top-of-card d-flex filter rows wrap on mobile */
.card__header.d-flex,
.card__body .d-flex.gap-1,
.card__body .d-flex.gap-2,
.stb { flex-wrap: wrap; }

@media (max-width: 640px) {
  /* Filter select/inputs become full-width stacked on very small phones */
  .stb select,
  .stb input[type="search"],
  .stb input[type="text"] {
    flex: 1 1 auto;
    min-width: min(160px, 100%);
    max-width: 100%;
  }
}

/* ── 3. Inline filter elements — max-width selects don't overflow ─── */
@media (max-width: 480px) {
  [style*="max-width:160px"],
  [style*="max-width: 160px"] { max-width: 100% !important; }
  [style*="min-width:200px"],
  [style*="min-width: 200px"] { min-width: 0 !important; flex: 1 1 auto; }
  [style*="min-width:220px"],
  [style*="min-width: 220px"] { min-width: 0 !important; flex: 1 1 auto; }
}

/* ── 4. Automation timeline responsive ───────────────────────────── */
.tl-row { flex-wrap: wrap; }
@media (max-width: 480px) {
  .tl-time { min-width: 0 !important; width: 100%; font-size: .7rem; }
  .tl-row  { font-size: .78rem; gap: .4rem; padding: .5rem .6rem; }
}
.kpi-tile { min-width: min(130px, calc(50% - .5rem)); flex: 1; }

/* ── 5. Website hero orb — scale down on mobile ─────────────────── */
.hero__orb {
  max-width: 100vw !important;
  max-height: 100vw !important;
  pointer-events: none;
}
@media (max-width: 640px) {
  .hero__orb {
    opacity: .08 !important;
    transform: scale(.5) !important;
    transform-origin: top right;
  }
}

/* ── 6. Plots & EMI form helpers ─────────────────────────────────── */
@media (max-width: 640px) {
  .row-3.form-row,
  .row-3 .form-group { grid-template-columns: 1fr; }
}

/* ── 7. Settings page – SMTP test bar + search bar ───────────────── */
.smtp-test-bar input { flex: 1; min-width: min(160px, 100%); }

/* ── 8. Dashboard buyer — flex items wrap ────────────────────────── */
@media (max-width: 640px) {
  [style*="flex:1;min-width:200px"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  [style*="min-width:130px"] { min-width: 0 !important; }
}

/* ── 9. KPI strip auto-columns ───────────────────────────────────── */
.db-kpi-strip, [class*="kpi-strip"], [class*="-kpi-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
@media (max-width: 480px) {
  .db-kpi-strip, [class*="kpi-strip"] { grid-template-columns: 1fr 1fr; }
}

/* ── 10. Page header actions — wrap on mobile ────────────────────── */
@media (max-width: 640px) {
  .page-header,
  .d-flex.justify-between.align-center { flex-wrap: wrap; gap: .5rem; }
  .page-header .d-flex.gap-1 { flex-wrap: wrap; }
}

/* ── 11. Audit, Settings tables — td ellipsis on mobile ─────────── */
@media (max-width: 640px) {
  [style*="max-width:160px"][style*="word-break"],
  [style*="max-width:150px"][style*="word-break"] {
    max-width: min(150px, 35vw) !important;
  }
}

/* ── 12. Stat-pill links wrap ────────────────────────────────────── */
.stat-pill-link { white-space: nowrap; }
@media (max-width: 480px) {
  .d-flex.gap-1 > .stat-pill-link { flex: 1 1 auto; justify-content: center; }
}

/* ── 13. Card scroll helper for tables ──────────────────────────── */
.card-table { padding: 0 !important; overflow-x: auto !important; }

/* ── 14. Progress bar rows — don't overflow ─────────────────────── */
.prog-wrap, [class*="prog-wrap"] { min-width: 0; }
.prog-bar,  [class*="prog-bar"]  { min-width: 0 !important; }

/* ── 15. Touch targets — min 44px on all interactive ────────────── */
.btn, button, [role="button"],
.sidebar__link, .bottom-nav__item,
.bn-subnav__link, a.stat-pill-link {
  min-height: 44px;
}
.btn-sm { min-height: 36px; }
.btn-xs { min-height: 28px; }

/* ── 16. Empty state centering ──────────────────────────────────── */
.empty-state { padding: 2rem 1rem; }
@media (max-width: 480px) {
  .empty-state { padding: 1.5rem .75rem; }
  .empty-state__icon { font-size: 2rem; }
}

/* ── 17. Dark mode — ensure sub-nav hint text is readable ────────── */
[data-theme="dark"] .bn-subnav__hd-title { color: #f1f5f9; }
[data-theme="dark"] .bn-subnav__hd-goto  { color: var(--brand-light, #7daaff); }
[data-theme="dark"] .bottom-nav__label   { color: #94a3b8; }
[data-theme="dark"] .bottom-nav__item.is-active .bottom-nav__label { color: var(--brand-light, #7daaff); }

/* ── 18. Prevent long words from breaking card layouts ───────────── */
.card__body, .card__header { overflow-wrap: anywhere; }

/* ── 19. Status dropdown — keep inside viewport ─────────────────── */
.status-dropdown {
  right: 0; left: auto;
  max-width: min(200px, 100vw - 2rem);
}
@media (max-width: 480px) {
  .status-dropdown { position: fixed; right: .75rem; left: auto; top: auto; }
}

/* ── 20. Responsive breadcrumbs ──────────────────────────────────── */
@media (max-width: 480px) {
  .breadcrumbs__current {
    max-width: 100px !important;
    font-size: .72rem;
  }
}

/* ── 21. Form filter rows with overflow-x scroll on xs ──────────── */
@media (max-width: 360px) {
  .card__header, .table-search { overflow-x: auto; }
  .form-group label.form-label { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD CARD VIEWS — 5 premium interaction patterns
   Carousel · Grid · Stacked · Interactive · Smart Summary
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared tokens ──────────────────────────────────────────────── */
:root {
  --dc-radius:    18px;
  --dc-radius-sm: 12px;
  --dc-gap:        1rem;
  --dc-pad:        1.25rem;
  --dc-shadow:     0 2px 12px rgba(13,27,46,.07), 0 1px 3px rgba(13,27,46,.05);
  --dc-shadow-h:   0 8px 28px rgba(13,27,46,.13), 0 2px 8px rgba(13,27,46,.08);
  --dc-ease:       cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] {
  --dc-shadow:   0 2px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
  --dc-shadow-h: 0 8px 32px rgba(0,0,0,.5),  0 2px 10px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════════════
   1. CAROUSEL CARD VIEW
   ═══════════════════════════════════════════════════════════════════ */
.dc-carousel-wrap { position: relative; }

.dc-carousel {
  display: flex;
  gap: var(--dc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .5rem .25rem 1.1rem;
  cursor: grab;
}
.dc-carousel:active { cursor: grabbing; }
.dc-carousel::-webkit-scrollbar { display: none; }

.dc-carousel__card {
  flex: 0 0 min(300px, calc(88vw - 2rem));
  scroll-snap-align: start;
  background: var(--bg-elev);
  border-radius: var(--dc-radius);
  border: 1px solid var(--border);
  padding: var(--dc-pad);
  box-shadow: var(--dc-shadow);
  transition: transform .22s var(--dc-ease), box-shadow .22s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.dc-carousel__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dc-shadow-h);
}
.dc-carousel__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--dc-card-color, var(--brand));
  border-radius: var(--dc-radius) var(--dc-radius) 0 0;
}
.dc-carousel__card--danger  { --dc-card-color: #dc2626; }
.dc-carousel__card--warn    { --dc-card-color: #d97706; }
.dc-carousel__card--success { --dc-card-color: #16a34a; }
.dc-carousel__card--purple  { --dc-card-color: #7c3aed; }
.dc-carousel__card--info    { --dc-card-color: #0284c7; }

.dc-dots {
  display: flex; gap: .4rem; justify-content: center; padding-bottom: .25rem;
}
.dc-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--border); cursor: pointer;
  transition: all .2s var(--dc-ease);
}
.dc-dot.is-active { background: var(--brand); width: 18px; }

.dc-carousel-prev, .dc-carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--dc-shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; opacity: 0;
  transition: opacity .18s, transform .18s var(--dc-ease);
  font-size: .9rem; color: var(--text-muted);
}
.dc-carousel-wrap:hover .dc-carousel-prev,
.dc-carousel-wrap:hover .dc-carousel-next { opacity: 1; }
.dc-carousel-prev { left: -.75rem; }
.dc-carousel-next { right: -.75rem; }
.dc-carousel-prev:hover, .dc-carousel-next:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
  transform: translateY(-50%) scale(1.08);
}
@media (max-width: 768px) {
  .dc-carousel-prev, .dc-carousel-next { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   2. GRID CARD VIEW
   ═══════════════════════════════════════════════════════════════════ */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--dc-gap);
}
.dc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dc-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .dc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dc-grid--4, .dc-grid--3, .dc-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .dc-grid--4, .dc-grid--3, .dc-grid--2 { grid-template-columns: 1fr; }
}

.dc-grid__card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--dc-radius);
  padding: var(--dc-pad);
  box-shadow: var(--dc-shadow);
  transition: transform .22s var(--dc-ease), box-shadow .22s, border-color .18s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: .45rem;
}
.dc-grid__card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--dc-shadow-h);
  border-color: rgba(var(--brand-rgb), .3);
}
.dc-grid__card:active { transform: scale(.97); }
.dc-grid__card::after {
  content: '';
  position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dc-orb, var(--brand-rgb)), .12) 0%, transparent 70%);
  pointer-events: none;
}
.dc-grid__card--success { --dc-orb: 22,163,74; }
.dc-grid__card--warn    { --dc-orb: 217,119,6; }
.dc-grid__card--danger  { --dc-orb: 220,38,38; }
.dc-grid__card--purple  { --dc-orb: 124,58,237; }

.dc-grid__icon  { font-size: 1.6rem; line-height: 1; }
.dc-grid__val   { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.dc-grid__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.dc-grid__delta { font-size: .75rem; font-weight: 700; margin-top: auto; display: inline-flex; align-items: center; gap: .2rem; }
.dc-grid__delta--up   { color: #16a34a; }
.dc-grid__delta--down { color: #dc2626; }
.dc-grid__delta--flat { color: var(--text-muted); }

.dc-sparkline {
  display: flex; align-items: flex-end; gap: 2px;
  height: 30px; margin-top: .2rem;
}
.dc-sparkline__bar {
  flex: 1; background: rgba(var(--brand-rgb), .15);
  border-radius: 2px 2px 0 0; min-width: 3px;
  transition: height .4s var(--dc-ease);
}
.dc-sparkline__bar:last-child { background: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════
   3. STACKED CARD VIEW
   ═══════════════════════════════════════════════════════════════════ */
.dc-stack { position: relative; padding-bottom: 16px; }

.dc-stack__item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--dc-radius);
  padding: var(--dc-pad);
  box-shadow: var(--dc-shadow);
  position: relative;
  transition: transform .32s var(--dc-ease), box-shadow .32s, opacity .32s;
  cursor: pointer;
}
.dc-stack__item + .dc-stack__item { margin-top: -14px; }
.dc-stack__item:nth-child(2) { transform: scale(.97); z-index: 2; }
.dc-stack__item:nth-child(3) { transform: scale(.94); z-index: 1; opacity: .7; }
.dc-stack__item:nth-child(n+4) { display: none; }

.dc-stack:hover .dc-stack__item:nth-child(2) {
  transform: translateY(8px);
  box-shadow: var(--dc-shadow-h);
  opacity: 1;
}
.dc-stack:hover .dc-stack__item:nth-child(3) {
  transform: translateY(18px);
  box-shadow: var(--dc-shadow-h);
  opacity: 1;
}
.dc-stack.is-expanded .dc-stack__item + .dc-stack__item {
  margin-top: .6rem;
  transform: none !important;
  opacity: 1 !important;
}
.dc-stack.is-expanded .dc-stack__item:nth-child(n+4) { display: block; }

.dc-stack__toggle {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; margin-top: .85rem;
  font-size: .78rem; font-weight: 600; color: var(--brand);
  cursor: pointer; padding: .4rem; border: none; background: none; width: 100%;
  transition: gap .18s;
}
.dc-stack__toggle:hover { gap: .6rem; }

.dc-stack__feed-icon {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: rgba(var(--brand-rgb), .1);
  display: grid; place-items: center; font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   4. INTERACTIVE CARD VIEW
   ═══════════════════════════════════════════════════════════════════ */
.dc-icard {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--dc-radius);
  overflow: hidden;
  box-shadow: var(--dc-shadow);
  transition: box-shadow .22s, border-color .18s, transform .22s var(--dc-ease);
}
.dc-icard:hover {
  box-shadow: var(--dc-shadow-h);
  border-color: rgba(var(--brand-rgb), .2);
}

.dc-icard__bar { height: 4px; background: var(--dc-ibar, var(--brand)); }
.dc-icard__bar--danger  { --dc-ibar: #dc2626; }
.dc-icard__bar--success { --dc-ibar: #16a34a; }
.dc-icard__bar--warn    { --dc-ibar: #d97706; }
.dc-icard__bar--purple  { --dc-ibar: #7c3aed; }

.dc-icard__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem var(--dc-pad) .6rem;
}
.dc-icard__icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(var(--dc-icon-rgb, var(--brand-rgb)), .1);
  display: grid; place-items: center; font-size: 1.2rem;
  transition: transform .22s var(--dc-ease);
}
.dc-icard:hover .dc-icard__icon { transform: scale(1.1) rotate(-5deg); }
.dc-icard__icon--danger  { --dc-icon-rgb: 220,38,38; }
.dc-icard__icon--success { --dc-icon-rgb: 22,163,74; }
.dc-icard__icon--warn    { --dc-icon-rgb: 217,119,6; }
.dc-icard__icon--purple  { --dc-icon-rgb: 124,58,237; }

.dc-icard__title { font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.dc-icard__sub   { font-size: .74rem; color: var(--text-muted); line-height: 1.3; }
.dc-icard__body  { padding: .5rem var(--dc-pad) .85rem; }

.dc-icard__footer {
  padding: .65rem var(--dc-pad);
  background: rgba(var(--brand-rgb), .03);
  border-top: 1px solid var(--border);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.dc-icard__footer--danger  { background: rgba(220,38,38,.04); border-color: rgba(220,38,38,.12); }
.dc-icard__footer--success { background: rgba(22,163,74,.04);  border-color: rgba(22,163,74,.12); }

.dc-prog {
  display: flex; align-items: center; gap: .6rem; margin: .4rem 0;
}
.dc-prog__track {
  flex: 1; height: 7px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.dc-prog__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--dc-ps, var(--brand)), var(--dc-pe, #4f46e5));
  transition: width .8s var(--dc-ease);
}
.dc-prog__fill--danger  { --dc-ps: #dc2626; --dc-pe: #f87171; }
.dc-prog__fill--success { --dc-ps: #16a34a; --dc-pe: #4ade80; }
.dc-prog__fill--warn    { --dc-ps: #d97706; --dc-pe: #fbbf24; }
.dc-prog__label { font-size: .72rem; font-weight: 700; white-space: nowrap; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   5. SMART SUMMARY CARD
   ═══════════════════════════════════════════════════════════════════ */
.dc-smart {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  overflow: hidden;
  transition: box-shadow .22s;
}
.dc-smart:hover { box-shadow: var(--dc-shadow-h); }

.dc-smart__summary {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem var(--dc-pad);
  cursor: pointer; user-select: none;
  transition: background .15s;
  border: none; background: none; width: 100%; text-align: left;
}
.dc-smart__summary:hover { background: var(--bg-muted); }

.dc-smart__icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .12) 0%, rgba(79,70,229,.08) 100%);
  border: 1px solid rgba(var(--brand-rgb), .15);
  transition: transform .22s var(--dc-ease);
}
.dc-smart__summary:hover .dc-smart__icon { transform: scale(1.1) rotate(-5deg); }

.dc-smart__meta     { flex: 1; min-width: 0; }
.dc-smart__title    { font-size: .92rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-smart__tagline  { font-size: .74rem; color: var(--text-muted); margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dc-smart__pills { display: flex; gap: .35rem; flex-wrap: wrap; flex-shrink: 0; }
.dc-smart__pill  {
  padding: .18rem .55rem; border-radius: 99px;
  font-size: .68rem; font-weight: 700;
  background: rgba(var(--brand-rgb), .1); color: var(--brand);
  white-space: nowrap;
}
.dc-smart__pill--danger  { background: rgba(220,38,38,.1); color: #dc2626; }
.dc-smart__pill--success { background: rgba(22,163,74,.1);  color: #16a34a; }
.dc-smart__pill--warn    { background: rgba(217,119,6,.1);  color: #d97706; }

.dc-smart__chevron {
  color: var(--text-muted); font-size: .85rem; flex-shrink: 0;
  transition: transform .28s var(--dc-ease);
}
.dc-smart.is-open .dc-smart__chevron { transform: rotate(90deg); }

.dc-smart__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.dc-smart.is-open .dc-smart__body { max-height: 800px; }

.dc-smart__inner {
  padding: 0 var(--dc-pad) var(--dc-pad);
  border-top: 1px solid var(--border);
}
.dc-smart__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .84rem;
}
.dc-smart__row:last-child { border-bottom: none; }
.dc-smart__row-key { color: var(--text-muted); }
.dc-smart__row-val { font-weight: 700; }

.dc-smart__drilldown {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: var(--brand);
  margin-top: .65rem; text-decoration: none;
  transition: gap .18s;
}
.dc-smart__drilldown:hover { gap: .6rem; }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD HERO, HEALTH RING, STREAK, OVERDUE, REFERRAL
   ═══════════════════════════════════════════════════════════════════ */
.db2-hero {
  background: linear-gradient(135deg,
    rgba(37,99,235,.07) 0%,
    rgba(124,58,237,.05) 50%,
    rgba(16,185,129,.04) 100%);
  border: 1px solid rgba(var(--brand-rgb), .12);
  border-radius: var(--dc-radius);
  padding: 1.35rem var(--dc-pad);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.db2-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 70%);
  pointer-events: none;
}
.db2-hero__avatar {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  background: var(--grad-brand);
  display: grid; place-items: center;
  color: #fff; font-size: 1.3rem; font-weight: 900;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  transition: transform .22s var(--dc-ease);
}
.db2-hero:hover .db2-hero__avatar { transform: scale(1.06) rotate(-3deg); }
.db2-hero__text { flex: 1; min-width: 0; }
.db2-hero__name { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0 0 .1rem; }
.db2-hero__date { font-size: .77rem; color: var(--text-muted); }
.db2-hero__actions { display: flex; gap: .45rem; flex-wrap: wrap; flex-shrink: 0; }

.db2-streak {
  display: inline-flex; align-items: center; gap: .35rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fbbf24;
  border-radius: 99px; padding: .22rem .7rem;
  font-size: .77rem; font-weight: 700; color: #92400e;
  margin-top: .4rem;
  animation: db2-streak-glow 2.5s ease infinite;
}
@keyframes db2-streak-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(251,191,36,0); }
}

.db2-health { text-align: center; flex-shrink: 0; }
.db2-health svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.1)); }
.db2-health__lbl { font-size: .72rem; font-weight: 600; margin-top: .15rem; }

.db2-overdue {
  display: flex; align-items: center; gap: .85rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border: 1.5px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: var(--dc-radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
[data-theme="dark"] .db2-overdue {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.3);
  border-left-color: #dc2626;
}
.db2-overdue__pulse {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(220,38,38,.12);
  display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
  animation: db2-pulse 2s ease infinite;
}
@keyframes db2-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
.db2-overdue__text { flex: 1; min-width: 0; }
.db2-overdue__title { font-size: .9rem; font-weight: 700; color: #dc2626; }
.db2-overdue__sub   { font-size: .77rem; color: #991b1b; margin-top: .1rem; }

.db2-referral {
  background: linear-gradient(135deg,
    rgba(16,185,129,.06) 0%,
    rgba(37,99,235,.04) 100%);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--dc-radius);
  padding: 1.1rem var(--dc-pad);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
[data-theme="dark"] .db2-referral { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.15); }

.db2-referral__code {
  font-size: 1.15rem; font-weight: 900; letter-spacing: .12em;
  color: var(--brand);
  font-family: ui-monospace, Menlo, monospace;
  background: rgba(var(--brand-rgb), .08);
  border: 1px dashed rgba(var(--brand-rgb), .3);
  border-radius: 8px; padding: .3rem .7rem;
  cursor: pointer; user-select: all;
  transition: background .18s, transform .18s var(--dc-ease);
}
.db2-referral__code:hover {
  background: rgba(var(--brand-rgb), .14);
  transform: scale(1.03);
}

/* Dark mode adjustments */
[data-theme="dark"] .dc-grid__card,
[data-theme="dark"] .dc-carousel__card,
[data-theme="dark"] .dc-icard,
[data-theme="dark"] .dc-smart,
[data-theme="dark"] .dc-stack__item {
  background: var(--bg-elev);
  border-color: var(--border);
}
[data-theme="dark"] .dc-smart__row { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .dc-smart__inner { border-top-color: var(--border); }
[data-theme="dark"] .dc-icard__footer { background: rgba(255,255,255,.03); }

/* ── Mobile responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .dc-carousel__card { flex: 0 0 calc(85vw - 1.5rem); }
  .dc-grid { gap: .65rem; }
  .dc-grid__card { padding: 1rem; border-radius: var(--dc-radius-sm); }
  .dc-grid__val  { font-size: 1.25rem; }
  .dc-smart__pills { display: none; }
  .db2-hero { padding: 1rem; gap: .75rem; }
  .db2-hero__actions { width: 100%; }
  .db2-hero__actions .db-act-btn { flex: 1; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  :root { --dc-pad: 1rem; --dc-radius: 14px; }
  .dc-carousel__card { flex: 0 0 calc(90vw - 1.25rem); }
  .dc-smart__summary { padding: .8rem 1rem; }
  .dc-smart__icon    { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 11px; }
  .dc-icard__head    { padding: .75rem 1rem .5rem; }
  .dc-icard__footer  { padding: .55rem 1rem; }
  .db2-overdue       { padding: .7rem .85rem; gap: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR — MOBILE-NATIVE & WEB-RESPONSIVE v2
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Safe-area inset-top (PWA / standalone on notched phones) ──── */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  /* Keep gradient accent below the safe-area band */
  .topbar::before {
    top: env(safe-area-inset-top);
  }
  /* Push main content down to match taller topbar */
  .app {
    grid-template-rows: calc(var(--topbar-h) + env(safe-area-inset-top)) 1fr;
  }
}

/* ── 2. Tablet (≤768px) — remove desktop-only controls ─────────────  */
@media (max-width: 768px) {
  /* No keyboard on touch devices */
  .topbar__kbd-btn    { display: none !important; }
  /* RTL & theme settings belong in sidebar/settings, not topbar */
  [data-rtl-toggle]   { display: none !important; }
  .theme-trigger-btn  { display: none !important; }
  /* Command palette: icon-only pill (no label or kbd hint) */
  .cpal-trigger__label,
  .cpal-trigger__kbd  { display: none; }
}

/* ── 3. Compact tablet (481–768px) — icon-only search pill ─────────  */
@media (min-width: 481px) and (max-width: 768px) {
  .cpal-trigger {
    width: 44px; height: 44px; min-width: 44px;
    padding: 0; gap: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
}

/* ── 4. Mobile (≤640px) — strip secondary icon buttons ─────────────  */
@media (max-width: 640px) {
  .cpal-trigger            { display: none; }
  .topbar__watchlist-btn   { display: none; }
}

/* ── 5. Mobile (≤480px) — minimal topbar ────────────────────────────  */
@media (max-width: 480px) {
  .topbar__actions         { gap: .15rem; }
  .topbar__user-name,
  .topbar__user-chevron    { display: none; }
  .breadcrumbs             { min-width: 0; max-width: min(42vw, 160px); flex-shrink: 1; }
  .breadcrumbs__current    {
    max-width: 110px;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: inline-block;
  }
}

/* ── 6. Tiny phones (≤360px) — breadcrumb → page title only ─────────  */
@media (max-width: 360px) {
  .topbar                  { gap: .3rem; }
  .topbar__icon-btn,
  .topbar__menu-btn        { width: 36px; height: 36px; }
  /* Show only the current-page label, remove home + separators */
  .breadcrumbs__home       { display: none; }
  .breadcrumbs .breadcrumbs__sep { display: none; }
  .breadcrumbs a           { display: none; }
  .breadcrumbs__current    { max-width: min(120px, 28vw); }
}

/* ── 7. Breadcrumb home icon — better touch target on mobile ─────────  */
@media (max-width: 768px) {
  .breadcrumbs__home {
    min-width: 28px; min-height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
  }
  .breadcrumbs__home:active {
    background: var(--bg-muted);
  }
}

/* ── 8. User dropdown — viewport-safe width ─────────────────────────  */
.topbar__user-dropdown {
  max-width: min(260px, calc(100vw - 1rem));
}

/* ── 9. Theme toggle — keep on all sizes (only one button left) ──────  */
/* (theme-toggle is the moon/sun icon, essential on mobile) */
[data-theme-toggle] { display: inline-flex !important; }

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV — tab badges, active indicator polish, mobile v3
   ═══════════════════════════════════════════════════════════════════ */

/* ── Notification / count badge on bottom-nav tab icon ─────────────── */
.bn-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: .58rem; font-weight: 800;
  border-radius: 99px; line-height: 16px;
  text-align: center;
  pointer-events: none;
  border: 1.5px solid var(--bg-elev);
  animation: bnBadgePop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.bn-badge--brand {
  background: var(--brand);
}
@keyframes bnBadgePop {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* ── Active tab pill indicator ──────────────────────────────────────── */
.bottom-nav__item.is-active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--brand);
  border-radius: 99px;
  animation: bnActiveSlide .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
@keyframes bnActiveSlide {
  from { width: 0; opacity: 0; }
  to   { width: 24px; opacity: 1; }
}
.bottom-nav__item--emi.is-active::after { background: #059669; }

/* ── Sub-nav panel: enhanced link items ─────────────────────────────── */
.bn-subnav__link {
  transition: background .14s, transform .14s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.bn-subnav__link:active {
  transform: scale(.96);
  background: var(--bg-muted) !important;
}

/* ── Bottom nav item touch feedback ────────────────────────────────── */
.bottom-nav__item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bottom-nav__item:active {
  transform: scale(.9);
}

/* ── Safe-area bottom padding for sub-nav panel ─────────────────────── */
.bn-subnav__panel {
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

/* ── Dark mode badge border colour ─────────────────────────────────── */
[data-theme="dark"] .bn-badge {
  border-color: var(--bg-elev, #111827);
}

/* ═══════════════════════════════════════════════════════════════════
   DC CARD VIEW — MOBILE PERFORMANCE LAYER
   Reduces paint scope, enables GPU compositing, prevents layout
   recalculation cascades during touch-scroll on low-end devices.
   ═══════════════════════════════════════════════════════════════════ */

/* Carousel: hint compositor to promote to own GPU layer */
.dc-carousel {
  will-change: scroll-position;
}

/* Each card is a self-contained paint boundary.
   Layout changes inside one card cannot ripple to siblings. */
.dc-carousel__card {
  contain: layout style paint;
}

/* Stacked items beyond #3 are display:none until expanded.
   Adding content-visibility to the EXPANDED state lets the browser
   skip rendering items scrolled far out of view. */
.dc-stack.is-expanded .dc-stack__item {
  content-visibility: auto;
  contain-intrinsic-size: 0 88px;  /* prevents scroll-height collapse */
}

/* Smart Summary body: skip rendering collapsed content entirely */
.dc-smart:not(.is-open) .dc-smart__body {
  content-visibility: hidden;
}

/* Grid cards: layout isolated — grid reflow won't cascade to page */
.dc-grid__card {
  contain: layout style;
}

/* Interactive cards: isolate form repaint from surrounding layout */
.dc-icard {
  contain: layout style;
}

/* Carousel card hover transform: use GPU layer, avoid layout shift */
.dc-carousel__card:hover {
  will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════════
   FOOTER NAV — Native Mobile & Tablet Polish
   ═══════════════════════════════════════════════════════════════════ */

/* Instant tap — removes 300 ms delay on older Android WebView */
.bottom-nav__item,
.bn-subnav__link,
.bn-subnav__close,
.bn-subnav__hd-goto { touch-action: manipulation; }

/* Prevent body-scroll bleeding through open panel on iOS Safari */
.bn-subnav__panel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sub-nav links become scrollable on very short viewports (landscape phone) */
@media (max-height: 480px) {
  .bn-subnav__links {
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Keyboard / switch-access focus ring */
.bottom-nav__item:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: -2px;
  border-radius: var(--bn-tab-radius, 12px);
}
.bottom-nav__item:focus-visible .bottom-nav__icon {
  background: var(--bn-active-bg);
}
.bn-subnav__link:focus-visible,
.bn-subnav__close:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}

/* Dark-mode: active label keeps gradient text (overrides the `color:` fallback) */
[data-theme="dark"] .bottom-nav__item.is-active .bottom-nav__label {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Reduced-motion: skip panel spring animation entirely */
@media (prefers-reduced-motion: reduce) {
  .bn-subnav__panel { transition: none !important; }
  .bn-subnav__bd    { transition: none !important; }
}

/* Reset after animation to free GPU memory */
.dc-carousel__card:not(:hover) {
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER NAV — v4 native fixes
   ═══════════════════════════════════════════════════════════════════ */

/* Badge anchors to the icon box, not the full button */
.bottom-nav__icon { position: relative; }

/* Body-scroll lock while sub-nav panel is open.
   iOS Safari needs position:fixed to prevent momentum scroll bleed;
   JS saves/restores window.pageYOffset so the page doesn't jump. */
.bn-subnav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0; right: 0;
}

/* The EMI elevated-circle button has its own design — hide the generic
   bottom active-dot indicator that is added by the shared ::after rule */
.bottom-nav__item--emi.is-active::after { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER NAV — v5: keyboard safety, global --bn-h, GPU compositing
   ═══════════════════════════════════════════════════════════════════ */

/* Global --bn-h: set on :root so any element (e.g. notification dropdown)
   can reference it without needing to be a descendant of .bottom-nav.
   Values mirror the per-breakpoint overrides on .bottom-nav itself.   */
:root { --bn-h: 64px; }
@media (max-width: 479px)  { :root { --bn-h: 60px; } }
@media (min-width: 768px)  { :root { --bn-h: 68px; } }
@media (min-width: 1024px) { :root { --bn-h: 84px; } }

/* Keyboard safety: the closed panel sits off-screen via translateY(110%)
   but is still in the DOM and Tab-reachable. visibility:hidden removes it
   from the focus order. The transition delay matches the slide-out so the
   panel stays visible until the animation finishes.                    */
.bn-subnav__panel {
  visibility: hidden;
  will-change: transform;
  contain: layout style;
  transition: transform .28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              visibility 0s .3s;
}
.bn-subnav.is-open .bn-subnav__panel {
  visibility: visible;
  transition: transform .28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              visibility 0s 0s; /* become visible immediately on open */
}

/* Focus ring for the "goto" header link inside the panel */
.bn-subnav__hd-goto:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
  text-decoration: none;
}

/* Reduced-motion: also disable visibility transition delay */
@media (prefers-reduced-motion: reduce) {
  .bn-subnav__panel {
    transition: none !important;
    will-change: auto;
  }
}

/* Active-tab colour per tab (matches tab accent colour) */
.bottom-nav__item[aria-current="page"] .bottom-nav__label {
  font-weight: 700;
}

/* Dark-mode: restore safe-area inset on body when panel open */
[data-theme="dark"] .bn-subnav-open {
  background-color: var(--bg, #080d1a);
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER + SIDEBAR — Native mobile & tablet polish v6
   ═══════════════════════════════════════════════════════════════════ */

/* ── Skip link: visible and correctly positioned on focus ───────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--brand, #2563eb);
  color: #fff;
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: top .15s;
  /* Prevent re-layout in non-focused state */
  outline-offset: 2px;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
}

/* ── Sidebar: scroll containment + touch ───────────────────────── */
.sidebar__nav {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sidebar__link,
.sidebar__group-header,
.sidebar__close-btn,
.sidebar__profile-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus rings for sidebar links */
.sidebar__link:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 6px);
}
.sidebar__close-btn:focus-visible,
.sidebar__profile-link:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── Topbar: touch targets + focus rings ───────────────────────── */
.topbar__icon-btn,
.topbar__user-btn,
.topbar__user-item,
.cpal-trigger {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.topbar__user-item:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 6px);
}
.topbar__user-btn:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: var(--radius, 10px);
}

/* aria-pressed state indicator on toggle buttons */
.topbar__icon-btn[aria-pressed="true"] {
  background: rgba(var(--brand-rgb, 37,99,235), .12);
  color: var(--brand, #2563eb);
}
[data-theme="dark"] .topbar__icon-btn[aria-pressed="true"] {
  background: rgba(37,99,235,.22);
  color: var(--brand-light, #7daaff);
}

/* ── Main content: skip-link focus target ───────────────────────── */
#main-content:focus {
  outline: none; /* focus is for skip-link, not a visible focus ring */
}
/* ═══════════════════════════════════════════════════════════════════════
   _mobile.css — Native mobile & tablet experience layer
   Appended to app.css. Overrides must use same or higher specificity.

   Breakpoint tokens (canonical — all other files should conform):
     xs  : max-width 479px   (small phones, portrait)
     sm  : max-width 767px   (all phones)
     md  : max-width 1023px  (tablet portrait + landscape phone)
     lg  : min-width 1024px  (desktop)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --touch-min:        44px;   /* WCAG 2.5.5 / Apple HIG minimum */
  --safe-top:         env(safe-area-inset-top,    0px);
  --safe-right:       env(safe-area-inset-right,  0px);
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --safe-left:        env(safe-area-inset-left,   0px);
  --mobile-radius:    16px;
  --card-gap:         12px;
  --page-px:          16px;   /* horizontal page padding on mobile */
}

/* ── 2. GLOBAL TOUCH TARGETS ──────────────────────────────────────── */
/* Every interactive element gets at least 44×44px tap zone */
a,
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select,
.bn-item,
.bn-sub-link,
.crud-btn,
.pl-action-btn,
.sidebar-link,
.table-action,
.dc-carousel__arrow {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

/* Inputs and textareas need 44px height on mobile */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom-on-focus */
    border-radius: 10px;
  }

  /* Checkboxes and radios: 20px visual with 44px tap padding */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: unset;
  }
}

/* ── 3. SAFE-AREA INSET HANDLING ──────────────────────────────────── */
/* Notch / Dynamic Island / home indicator coverage */

/* Bottom nav already accounts for safe-area; other sticky elements: */
.topbar,
.crud-bulkbar,
.db-sticky-stats,
.pl-hd {
  padding-left:  max(var(--page-px), var(--safe-left));
  padding-right: max(var(--page-px), var(--safe-right));
}

/* Modals on notched phones */
@media (max-width: 767px) {
  .crud-modal-box {
    padding-bottom: max(1.5rem, calc(var(--safe-bottom) + 1rem));
  }
}

/* ── 4. LAYOUT — SIDEBAR DRAWER ON MOBILE ────────────────────────── */
@media (max-width: 767px) {
  /* App shell: single column — sidebar is an overlay drawer */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topbar"
      "main" !important;
  }

  /* Sidebar hides off-screen left by default */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: min(280px, 85vw) !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s ease;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--safe-bottom) + 1rem);
  }

  /* Sidebar open state — toggled by existing crud.js or hamburger */
  .sidebar.is-open,
  [data-sidebar="open"] .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,.35);
  }

  /* Scrim behind open sidebar */
  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  [data-sidebar="open"] .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main area: full width, extra bottom padding for bottom-nav */
  .main {
    padding: 0 var(--page-px)
             calc(var(--bottom-nav-h, 64px) + var(--safe-bottom) + 1.5rem)
             var(--page-px) !important;
  }
}

/* Tablet: narrower sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 220px !important;
  }
  .app {
    grid-template-columns: 220px 1fr !important;
  }
}

/* ── 5. TOPBAR — MOBILE ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .topbar {
    height: 56px;
    padding: 0 var(--page-px);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Hamburger button — shows the sidebar on mobile */
  .topbar__hamburger {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Collapse search bar to icon on very small phones */
  .topbar__search {
    display: none;
  }
  .topbar__search-icon {
    display: flex !important;
  }
}

/* ── 6. DATA TABLES → CARD LISTS ON MOBILE ───────────────────────── */
/*
  Pattern: on ≤767px, any .crud-table, .data-table, or table with
  [data-mobile="cards"] becomes a stacked card list.
  Each <tr> becomes a card; <td> rows are labeled via data-label attr.
*/
@media (max-width: 767px) {
  /* Generic table wrapper scroll — fallback for tables not opted into card mode */
  .table-responsive,
  .crud-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mobile-radius);
    margin: 0 calc(-1 * var(--page-px));
    padding: 0 var(--page-px);
  }

  /* Card-mode tables */
  table[data-mobile="cards"],
  .crud-table[data-mobile="cards"] {
    display: block;
    border: none;
    background: transparent;
  }
  table[data-mobile="cards"] thead,
  .crud-table[data-mobile="cards"] thead {
    display: none; /* hide column headers — labels come from data-label */
  }
  table[data-mobile="cards"] tbody,
  table[data-mobile="cards"] tr,
  .crud-table[data-mobile="cards"] tbody,
  .crud-table[data-mobile="cards"] tr {
    display: block;
  }
  table[data-mobile="cards"] tr,
  .crud-table[data-mobile="cards"] tr {
    background: var(--surface, #fff);
    border-radius: var(--mobile-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: var(--card-gap);
    padding: 14px 16px;
    position: relative;
  }
  table[data-mobile="cards"] td,
  .crud-table[data-mobile="cards"] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    font-size: .875rem;
    gap: 8px;
  }
  table[data-mobile="cards"] td::before,
  .crud-table[data-mobile="cards"] td::before {
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 auto;
    min-width: 80px;
  }
  table[data-mobile="cards"] td:last-child,
  .crud-table[data-mobile="cards"] td:last-child {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    justify-content: flex-end;
  }
  table[data-mobile="cards"] td:last-child::before,
  .crud-table[data-mobile="cards"] td:last-child::before {
    display: none;
  }

  /* Bulk action bar: fixed bottom */
  .crud-bulkbar {
    position: fixed !important;
    bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom));
    left: 0;
    right: 0;
    border-radius: 0 !important;
    z-index: 100;
    padding-bottom: 8px;
  }
}

/* ── 7. PAGE HEADER — STACK ON MOBILE ────────────────────────────── */
@media (max-width: 767px) {
  /* Generic two-part page headers (title + actions) */
  .page-header,
  .pl-hd,
  .rfi-page-header,
  .rfa-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px var(--page-px) 10px !important;
  }
  .pl-hd__actions,
  .rfi-page-header .btn,
  .rfa-page-header .btn {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .pl-hd__actions a,
  .pl-hd__actions button {
    flex: 1;
    justify-content: center;
  }
}

/* ── 8. KPI STRIPS — 2-COL GRID ON MOBILE ───────────────────────── */
@media (max-width: 767px) {
  /* Plots KPI strip */
  .pl-kpi-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 var(--page-px) !important;
  }
  .pl-kpi {
    flex-direction: row !important;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 12px;
  }

  /* Dashboard KPI cards */
  .db-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Refund KPI bar */
  .rfi-kpi-bar,
  .rfa-kpi-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
}

@media (max-width: 479px) {
  .pl-kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .pl-kpi {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    padding: 8px 6px !important;
    font-size: .75rem;
  }
  .pl-kpi__icon { font-size: .9rem; }
  .pl-kpi__val  { font-size: 1rem; }
  .pl-kpi__lbl  { font-size: .65rem; }
}

/* ── 9. FILTER CARDS — STACK ON MOBILE ──────────────────────────── */
@media (max-width: 767px) {
  .pl-filter-card {
    margin: 0 var(--page-px);
    border-radius: var(--mobile-radius);
    padding: 12px !important;
  }
  .pl-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pl-filter-search,
  .pl-filter-select {
    width: 100% !important;
    height: 44px;
  }
  .pl-filter-row button {
    height: 44px;
    border-radius: 10px;
  }
  .pl-adv-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
}

/* ── 10. PLOT CARDS — 1-COL ON MOBILE ───────────────────────────── */
@media (max-width: 767px) {
  /* Grid view: single column */
  .pl-grid {
    grid-template-columns: 1fr !important;
    padding: 0 var(--page-px) !important;
  }

  /* Plot card: horizontal layout on mobile */
  .pl-card {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 90px;
    border-radius: 12px;
    overflow: hidden;
  }
  .pl-card__stripe {
    width: 5px !important;
    height: auto !important;
    grid-row: 1 / -1;
  }
  .pl-card__body {
    padding: 10px 12px !important;
  }
  .pl-card__footer {
    grid-column: 2;
    padding: 0 12px 10px !important;
    border-top: none !important;
  }

  /* List view: compact rows */
  .pl-list .pl-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px var(--page-px);
    gap: 4px;
  }
  .pl-row-actions { width: 100%; justify-content: flex-end; }
}

/* ── 11. MODALS — FULL-SCREEN SHEET ON MOBILE ───────────────────── */
@media (max-width: 767px) {
  .crud-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .crud-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--safe-bottom) + 1.5rem) !important;
    /* Slide up animation */
    animation: mobileSheetIn .3s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mobileSheetIn {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* Drag handle */
  .crud-modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border, rgba(0,0,0,.12));
    border-radius: 2px;
    margin: 10px auto 14px;
  }

  /* Modal header: sticky */
  .crud-modal-header {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
    border-radius: 20px 20px 0 0;
    padding-top: 0 !important;
  }

  /* Footer actions: row at bottom */
  .crud-modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 12px 20px calc(var(--safe-bottom) + 12px);
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    display: flex;
    gap: 8px;
  }
  .crud-modal-footer button,
  .crud-modal-footer a {
    flex: 1;
    justify-content: center;
  }
}

/* ── 12. BOTTOM NAV ENHANCEMENTS ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Sub-nav panel: wider on narrow phones */
  .bn-subnav {
    left: var(--page-px) !important;
    right: var(--page-px) !important;
    width: auto !important;
    border-radius: 16px !important;
  }

  /* Links: full width, 44px height */
  .bn-sub-link {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    min-height: var(--touch-min);
  }

  /* Bottom nav pill: safe-area bottom spacing */
  .bottom-nav {
    padding-bottom: max(8px, var(--safe-bottom)) !important;
    height: calc(60px + max(0px, var(--safe-bottom))) !important;
  }

  /* Active tab indicator: larger dot */
  .bn-item.is-active .bn-item__dot {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 479px) {
  /* Sub-nav grid: 2 cols on tiny phones */
  .bn-subnav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Nav labels: smaller */
  .bn-item__label {
    font-size: 10px !important;
  }
}

/* ── 13. DASHBOARD MOBILE IMPROVEMENTS ───────────────────────────── */
@media (max-width: 767px) {
  /* Main content padding clears topbar + extra breathing room */
  .main[data-page="dashboard"] {
    padding-top: 8px !important;
  }

  /* Announce banner: 2-line stacked */
  .db-announce {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
    padding: 10px 14px !important;
    border-radius: 12px;
    margin: 0 var(--page-px) 8px !important;
  }
  .db-announce__close {
    position: absolute;
    top: 10px;
    right: 12px;
  }

  /* PTR indicator: centered */
  .db-ptr-indicator {
    padding-top: max(12px, var(--safe-top)) !important;
  }

  /* Sticky stats bar: horizontal scroll if too many items */
  .db-sticky-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  .db-sticky-stats::-webkit-scrollbar { display: none; }
  .db-sticky-stat { flex: 0 0 auto; padding: 0 10px; }

  /* Goal rings: 2×2 grid */
  .db-goal-rings {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Quick actions: 2×2 grid */
  .db-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .db-qa-card {
    padding: 14px !important;
    border-radius: 14px;
  }

  /* Activity feed: full-width */
  .db-activity-feed {
    margin: 0 !important;
    border-radius: var(--mobile-radius);
  }
  .db-activity-item {
    padding: 10px 12px !important;
  }

  /* Heatmap: horizontal scroll */
  .db-heatmap-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  /* FAB: visible on mobile */
  .db-fab-wrap {
    display: flex !important;
    bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom) + 12px) !important;
    right: max(16px, var(--safe-right)) !important;
  }
}

/* ── 14. FORMS — MOBILE-FIRST ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Two-column form grids collapse to single column */
  .form-grid,
  .crud-form-grid,
  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  /* Labels: above inputs (never side-by-side on small screens) */
  .form-group,
  .crud-field {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .form-label,
  .crud-label {
    margin-bottom: 4px;
    font-weight: 600;
  }

  /* Submit buttons: full width */
  .form-actions,
  .crud-form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .form-actions .btn,
  .crud-form-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* ── 15. PAGINATION — COMPACT ON MOBILE ──────────────────────────── */
@media (max-width: 767px) {
  .pagination {
    gap: 4px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pagination::-webkit-scrollbar { display: none; }
  .pagination .page-item:not(.active):not(.prev):not(.next) {
    display: none; /* hide middle pages, keep prev/next/active */
  }
  .pagination .page-item.active,
  .pagination .page-item.prev,
  .pagination .page-item.next {
    display: flex !important;
  }
  .pagination a,
  .pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    justify-content: center;
  }

  /* Compact pagination with ... elision (handled by PHP already) */
  .crud-pagination-info {
    font-size: .8rem;
    text-align: center;
  }
}

/* ── 16. NOTIFICATIONS PAGE — MOBILE ─────────────────────────────── */
@media (max-width: 767px) {
  .notif-list-item {
    padding: 12px var(--page-px) !important;
    border-radius: 0 !important;
  }
  .notif-list-item + .notif-list-item {
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,.06));
  }
}

/* ── 17. LANDSCAPE PHONE HANDLING ────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Bottom nav: thinner in landscape */
  .bottom-nav {
    height: 52px !important;
    padding-bottom: 4px !important;
  }
  .main {
    padding-bottom: calc(52px + var(--safe-bottom) + 1rem) !important;
  }

  /* Topbar: shorter */
  .topbar {
    height: 48px;
  }

  /* Sub-nav panels: scrollable if content overflows height */
  .bn-subnav {
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  /* Dashboard: horizontal scroll for KPI strip in landscape */
  .pl-kpi-strip,
  .db-kpi-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    overflow-x: auto;
  }
}

/* ── 18. TABLET LAYOUT (768–1023px) ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 2-column grids for cards */
  .dc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* KPI strips: 3 per row */
  .db-kpi-grid,
  .pl-kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Quick actions: 3 per row */
  .db-quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Filter rows: 2 per line */
  .pl-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pl-filter-search {
    grid-column: 1 / -1;
  }
  .pl-filter-row button {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
  }

  /* Modal: centered, not full-screen */
  .crud-modal-box {
    max-width: 640px !important;
    border-radius: 16px !important;
  }
}

/* ── 19. PRINT OVERRIDES ─────────────────────────────────────────── */
@media print {
  .sidebar,
  .topbar,
  .bottom-nav,
  .db-fab-wrap,
  .crud-bulkbar,
  .pl-filter-card,
  .db-announce,
  .db-pwa-banner { display: none !important; }

  .app { display: block !important; }
  .main { padding: 0 !important; }
  .dc-carousel { display: block !important; overflow: visible !important; }
  .dc-carousel__card { width: 100% !important; margin-bottom: 1rem; }
}

/* ── 20. ACCESSIBILITY — FOCUS VISIBLE ───────────────────────────── */
/* Ensure visible focus ring on touch devices (not just keyboard) */
@media (pointer: coarse) {
  :focus-visible {
    outline: 3px solid var(--accent, #2563eb) !important;
    outline-offset: 2px;
  }
  /* Larger interactive elements for fat fingers */
  .crud-btn.crud-btn--sm,
  .pl-action-btn {
    padding: 10px 16px !important;
    min-height: var(--touch-min) !important;
  }
}

/* ── 21. SCROLL PERFORMANCE ──────────────────────────────────────── */
/* Already have will-change on carousel; add containment for feed items */
.db-activity-item,
.notif-list-item,
.rfi-stacked-item,
.pl-row {
  contain: layout style;
}

/* Momentum scrolling on all scroll containers */
.dc-carousel,
.crud-table-wrap,
.table-responsive,
.bn-subnav,
.db-heatmap-wrap,
.pagination {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── 22. TYPOGRAPHY FLUID SCALING ────────────────────────────────── */
/* clamp(min, preferred, max) — scales smoothly between 360px and 1280px */
.db-kpi-val,
.pl-kpi__val,
.rfi-kpi-num {
  font-size: clamp(1.1rem, 3vw, 1.75rem);
}

.db-greeting-name,
.page-title {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}

.db-announce__text,
.card-body,
.dc-grid__card .card-body {
  font-size: clamp(.8125rem, 2vw, .9375rem);
}

/* ── 23. PULL-TO-REFRESH REFINEMENTS ─────────────────────────────── */
@media (max-width: 767px) {
  .db-ptr-indicator {
    position: fixed;
    top: max(56px, calc(56px + var(--safe-top)));
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    transition: transform .2s ease, opacity .2s ease;
    z-index: 60;
    pointer-events: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: .8rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  .db-ptr-indicator.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ── 24. EMPTY STATES — MOBILE SIZING ───────────────────────────── */
@media (max-width: 767px) {
  .crud-empty,
  .pl-empty,
  .dc-empty {
    padding: 40px var(--page-px) !important;
  }
  .crud-empty__icon,
  .pl-empty__icon { font-size: 2.5rem; }
  .crud-empty__title,
  .pl-empty__title { font-size: 1.1rem; }
}

/* ── 25. CARDS GRID — MOBILE ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Smart summary: full width */
  .dc-smart {
    margin: 0 !important;
    border-radius: var(--mobile-radius) !important;
  }

  /* Interactive cards: touch-safe padding */
  .dc-icard {
    padding: 14px !important;
  }
  .dc-icard:active {
    transform: scale(.98);
    transition: transform .1s ease;
  }

  /* Stack view: full width */
  .dc-stack__item {
    border-radius: var(--mobile-radius) !important;
  }
}

/* ── 26. SETTINGS / ADMIN TABLES — MOBILE ───────────────────────── */
@media (max-width: 767px) {
  /* Settings groups: single column */
  .settings-grid,
  .addon-grid {
    grid-template-columns: 1fr !important;
  }

  /* Permissions table: scrollable */
  .perm-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--page-px));
    padding: 0 var(--page-px);
  }

  /* Audit log table: card mode */
  .audit-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,.07));
    border-radius: 0;
    box-shadow: none;
  }
  .audit-table th { display: none; }
  .audit-table td { padding: 4px 4px; font-size: .8rem; }
}

/* ── 27. REPORTS PAGE MOBILE ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Aging grid: 2 columns */
  .reports-aging-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Chart containers: full width, scrollable */
  .reports-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reports-chart-wrap canvas {
    min-width: 300px;
  }
}

/* ── 28. SIDEBAR SCRIM ELEMENT (injected by JS) ──────────────────── */
/* If the sidebar scrim isn't already in the DOM, create it via ::after on body */
@media (max-width: 767px) {
  body[data-sidebar="open"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
    backdrop-filter: blur(2px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   29. MOBILE NATIVE v8 — dc-component & dashboard polish
   ═══════════════════════════════════════════════════════════════════ */

/* Data integrity check grid — class-based, replaces inline style */
.di-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 1rem;
}

/* dc-prog__label: allow text wrap on very small screens */
@media (max-width: 360px) {
  .dc-prog__label {
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 2.5rem;
  }
}

@media (max-width: 640px) {
  .di-check-grid { grid-template-columns: 1fr; }

  /* Dots strip: scroll horizontally instead of wrapping or overflowing */
  .dc-dots {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: .25rem;
    padding-right: .25rem;
  }
  .dc-dots::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  /* Smart-card title and tagline: allow wrapping instead of clipping */
  .dc-smart__title {
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
  }
  .dc-smart__tagline {
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
  }

  /* Carousel card: tighter padding */
  .dc-carousel__card { padding: .75rem; }
}

@media (max-width: 360px) {
  /* icard header: allow icon + title to stack */
  .dc-icard__head { flex-wrap: wrap; }
  .dc-icard__icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .dc-icard__title { font-size: .84rem; }
  .dc-icard__sub   { font-size: .7rem; }

  /* Carousel: maximum width on ultra-narrow phones */
  .dc-carousel__card { flex: 0 0 calc(94vw - 1rem); padding: .65rem; }

  /* Overdue alert: Pay Now button goes full-width on second row */
  .db2-overdue { align-items: flex-start; }
  .db2-overdue .btn { width: 100%; justify-content: center; flex-shrink: unset; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM MOBILE BOTTOM NAV — Figma-quality v4
   Full glass-morphism pill · vivid per-tab accents · spring physics
   Rich sub-panel cards · safe-area · dark-mode · reduced-motion safe
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PILL VARIABLES ───────────────────────────────────────────── */
:root {
  --bn4-h:          64px;
  --bn4-r:          28px;
  --bn4-max:        500px;
  --bn4-side:       14px;
  --bn4-glass:      rgba(255,255,255,.88);
  --bn4-glass-dark: rgba(9,14,26,.92);
  --bn4-border:     rgba(255,255,255,.65);
  --bn4-shadow:
    0 -1px 0 rgba(0,0,0,.04),
    0 -8px 32px rgba(13,27,46,.12),
    0 -2px 8px  rgba(13,27,46,.06),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.04);
  --bn4-shadow-dark:
    0 -1px 0 rgba(0,0,0,.3),
    0 -8px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── 2. PILL BAR ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bottom-nav {
    position: fixed !important;
    bottom: max(env(safe-area-inset-bottom, 0px), 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(var(--bn4-max), calc(100vw - var(--bn4-side) * 2)) !important;
    height: var(--bn4-h) !important;
    border-radius: var(--bn4-r) !important;
    background: var(--bn4-glass) !important;
    backdrop-filter: saturate(220%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(220%) blur(28px) !important;
    border: 1.5px solid var(--bn4-border) !important;
    box-shadow: var(--bn4-shadow) !important;
    overflow: visible !important;
    display: block !important;
  }
  [data-theme="dark"] .bottom-nav {
    background: var(--bn4-glass-dark) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: var(--bn4-shadow-dark) !important;
  }

  /* Rainbow accent bar at top of pill */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px; height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg,
      #2563eb 0%,
      #7c3aed 28%,
      #059669 54%,
      #d97706 76%,
      #e11d48 88%,
      #0891b2 100%);
    opacity: .75;
    transition: opacity .3s;
  }
  .bottom-nav:hover::before { opacity: 1; }

  /* Inner highlight shimmer */
  .bottom-nav__glow {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(175deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.12) 35%,
      transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  [data-theme="dark"] .bottom-nav__glow {
    background: linear-gradient(175deg, rgba(255,255,255,.05) 0%, transparent 50%) !important;
  }

  /* Items grid */
  .bottom-nav__items {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    height: 100% !important;
    padding: 0 4px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Each tab button */
  .bottom-nav__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: 100% !important;
    padding: 0 2px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    position: relative !important;
    color: var(--text-faint, #94a3b8) !important;
    transition:
      color .2s,
      transform .15s cubic-bezier(.34,1.56,.64,1) !important;
  }
  .bottom-nav__item:active {
    transform: scale(.88) !important;
    transition: transform .08s !important;
  }

  /* Icon container */
  .bottom-nav__icon {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    transition:
      background .2s,
      transform .2s cubic-bezier(.34,1.56,.64,1),
      box-shadow .2s !important;
    position: relative !important;
  }
  .bottom-nav__icon svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1) !important;
  }

  /* Label */
  .bottom-nav__label {
    font-size: .58rem !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: color .2s !important;
  }

  /* ── ACTIVE STATE — per-tab accent colours ──────────────────────── */
  .bottom-nav__item.is-active {
    color: var(--bn4-tab-color, #2563eb) !important;
  }
  .bottom-nav__item[data-bn-tab="home"].is-active    { --bn4-tab-color:#2563eb; --bn4-tab-rgb:37,99,235; }
  .bottom-nav__item[data-bn-tab="plots"].is-active   { --bn4-tab-color:#7c3aed; --bn4-tab-rgb:124,58,237; }
  .bottom-nav__item[data-bn-tab="emi"].is-active     { --bn4-tab-color:#059669; --bn4-tab-rgb:5,150,105; }
  .bottom-nav__item[data-bn-tab="referral"].is-active{ --bn4-tab-color:#d97706; --bn4-tab-rgb:217,119,6; }
  .bottom-nav__item[data-bn-tab="life"].is-active    { --bn4-tab-color:#e11d48; --bn4-tab-rgb:225,29,72; }
  .bottom-nav__item[data-bn-tab="profile"].is-active { --bn4-tab-color:#0891b2; --bn4-tab-rgb:8,145,178; }

  /* Active icon: tinted background pill */
  .bottom-nav__item.is-active .bottom-nav__icon {
    background: rgba(var(--bn4-tab-rgb, 37,99,235), .14) !important;
    box-shadow: 0 2px 10px rgba(var(--bn4-tab-rgb, 37,99,235), .22) !important;
  }
  .bottom-nav__item.is-active .bottom-nav__icon svg {
    transform: translateY(-1px) scale(1.15) !important;
  }

  /* Active label: gradient text */
  .bottom-nav__item[data-bn-tab="home"].is-active .bottom-nav__label {
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bottom-nav__item[data-bn-tab="plots"].is-active .bottom-nav__label {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bottom-nav__item[data-bn-tab="referral"].is-active .bottom-nav__label {
    background: linear-gradient(135deg,#d97706,#f59e0b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bottom-nav__item[data-bn-tab="life"].is-active .bottom-nav__label {
    background: linear-gradient(135deg,#e11d48,#f43f5e);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bottom-nav__item[data-bn-tab="profile"].is-active .bottom-nav__label {
    background: linear-gradient(135deg,#0891b2,#06b6d4);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  /* Active indicator — glowing dot below icon */
  .bottom-nav__item::before {
    content: '';
    position: absolute;
    top: 5px; left: 50%;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--bn4-tab-color, #2563eb);
    transform: translateX(-50%) scale(0);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
  }
  .bottom-nav__item.is-active::before {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 6px rgba(var(--bn4-tab-rgb, 37,99,235), .6);
  }

  /* Panel-open ring on icon */
  .bottom-nav__item[aria-expanded="true"] .bottom-nav__icon {
    outline: 2px solid rgba(var(--bn4-tab-rgb, 37,99,235), .35) !important;
    outline-offset: 2px !important;
  }

  /* ── EMI CENTRE BUTTON ──────────────────────────────────────────── */
  .bottom-nav__item--emi {
    position: relative !important;
    flex: 0 0 auto !important;
  }
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #059669 0%, #0d9488 60%, #0891b2 100%) !important;
    box-shadow:
      0 5px 18px rgba(5,150,105,.52),
      0 0 0 3px rgba(255,255,255,.85),
      0 0 0 5px rgba(5,150,105,.15) !important;
    margin-top: -14px !important;
    color: #fff !important;
    transition:
      transform .22s cubic-bezier(.34,1.56,.64,1),
      box-shadow .22s !important;
  }
  .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    stroke: #fff !important;
    transform: none !important;
  }
  .bottom-nav__item--emi:hover .bottom-nav__icon {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow:
      0 8px 24px rgba(5,150,105,.65),
      0 0 0 3px rgba(255,255,255,.9),
      0 0 0 6px rgba(5,150,105,.2) !important;
  }
  .bottom-nav__item--emi:active .bottom-nav__icon {
    transform: scale(.93) !important;
  }
  .bottom-nav__item--emi.is-active .bottom-nav__icon {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow:
      0 6px 22px rgba(5,150,105,.7),
      0 0 0 3px rgba(255,255,255,.9),
      0 0 0 6px rgba(5,150,105,.25) !important;
  }
  .bottom-nav__item--emi::before { display: none !important; }
  .bottom-nav__item--emi .bottom-nav__label {
    color: #059669 !important;
    -webkit-text-fill-color: #059669 !important;
    margin-top: 4px !important;
  }
  [data-theme="dark"] .bottom-nav__item--emi .bottom-nav__icon {
    box-shadow:
      0 5px 20px rgba(5,150,105,.6),
      0 0 0 2.5px rgba(255,255,255,.15),
      0 0 0 5px rgba(5,150,105,.2) !important;
  }

  /* Dark-mode label colour fix */
  [data-theme="dark"] .bottom-nav__label { color: #94a3b8 !important; }
  [data-theme="dark"] .bottom-nav__item.is-active { color: #fff !important; }

  /* Main content offset */
  .main {
    padding-bottom: calc(var(--bn4-h) + max(env(safe-area-inset-bottom, 0px), 10px) + 1.25rem) !important;
  }
}

/* ── 3. PREMIUM SUB-NAV PANEL ────────────────────────────────────── */
.bn-subnav {
  position: fixed !important;
  inset: 0 !important;
  z-index: calc(var(--z-bottom-nav, 45) - 1) !important;
  pointer-events: none !important;
}
.bn-subnav.is-open { pointer-events: auto !important; }

/* Backdrop */
.bn-subnav__bd {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.38) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
  opacity: 0 !important;
  transition: opacity .28s ease !important;
  pointer-events: none !important;
}
.bn-subnav.is-open .bn-subnav__bd {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Panel card — glassmorphism above pill */
@media (max-width: 900px) {
  .bn-subnav__panel {
    position: absolute !important;
    bottom: calc(var(--bn4-h) + max(env(safe-area-inset-bottom, 0px), 10px) + 16px) !important;
    left: 50% !important;
    width: min(var(--bn4-max), calc(100vw - var(--bn4-side) * 2)) !important;
    background: rgba(255,255,255,.93) !important;
    backdrop-filter: saturate(200%) blur(32px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(32px) !important;
    border: 1.5px solid rgba(255,255,255,.6) !important;
    border-radius: 24px !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,.22),
      0 8px 24px rgba(0,0,0,.1),
      inset 0 1px 0 rgba(255,255,255,.8),
      inset 0 -1px 0 rgba(0,0,0,.04) !important;
    transform: translateX(-50%) translateY(14px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      transform .32s cubic-bezier(.34,1.56,.64,1),
      opacity .22s ease !important;
    overflow: hidden !important;
    border-top: 3px solid var(--bnp-accent, #2563eb) !important;
  }
  .bn-subnav.is-open .bn-subnav__panel {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  [data-theme="dark"] .bn-subnav__panel {
    background: rgba(9,14,26,.94) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}

/* Drag handle pill */
.bn-subnav__handle {
  width: 44px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: var(--border, rgba(0,0,0,.12)) !important;
  margin: 10px auto 0 !important;
  opacity: .6 !important;
}

/* Panel header */
.bn-subnav__hd {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  padding: 1rem 1.1rem .85rem !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07)) !important;
  background: linear-gradient(100deg,
    rgba(var(--bnp-accent-rgb, 37,99,235), .08) 0%,
    rgba(var(--bnp-accent-rgb, 37,99,235), .02) 60%,
    transparent 100%) !important;
  position: relative !important;
}
.bn-subnav__hd::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--bnp-accent, #2563eb) !important;
  border-radius: 0 2px 2px 0 !important;
}

.bn-subnav__hd-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 4px 14px rgba(var(--bnp-accent-rgb, 37,99,235), .45),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.bn-subnav__hd-icon:hover { transform: scale(1.1) rotate(-6deg) !important; }

.bn-subnav__hd-body { flex: 1; min-width: 0; }
.bn-subnav__hd-title {
  display: block !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
[data-theme="dark"] .bn-subnav__hd-title { color: #f1f5f9 !important; }

.bn-subnav__hd-goto {
  display: inline-flex !important;
  align-items: center !important;
  gap: .28rem !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  color: var(--bnp-accent, #2563eb) !important;
  text-decoration: none !important;
  margin-top: .15rem !important;
  transition: gap .18s !important;
}
.bn-subnav__hd-goto:hover { gap: .5rem !important; text-decoration: none !important; }
.bn-subnav__hd-goto svg { transition: transform .18s !important; }
.bn-subnav__hd-goto:hover svg { transform: translateX(3px) !important; }

.bn-subnav__close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.05) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s, transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.bn-subnav__close:hover {
  background: rgba(220,38,38,.09) !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,.2) !important;
}
.bn-subnav__close:active { transform: scale(.86) rotate(90deg) !important; }
[data-theme="dark"] .bn-subnav__close {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── 4. SUB-NAV LINK CARDS (premium Figma tiles) ─────────────────── */
.bn-subnav__links {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: .55rem !important;
  padding: .9rem 1rem 1rem !important;
}
@media (max-width: 380px) {
  .bn-subnav__links { grid-template-columns: repeat(2, 1fr) !important; }
}

.bn-subnav__link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .42rem !important;
  padding: .8rem .4rem !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  background: var(--bg-muted, rgba(0,0,0,.04)) !important;
  border: 1.5px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    background .18s,
    border-color .18s,
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s !important;
}
/* Shimmer overlay on hover */
.bn-subnav__link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg,
    rgba(var(--bnp-accent-rgb, 37,99,235), .11),
    rgba(var(--bnp-accent-rgb, 37,99,235), .03)) !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.bn-subnav__link:hover {
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .25) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(var(--bnp-accent-rgb, 37,99,235), .18) !important;
  text-decoration: none !important;
}
.bn-subnav__link:hover::after { opacity: 1 !important; }
.bn-subnav__link:active { transform: scale(.93) !important; transition: transform .08s !important; }
[data-theme="dark"] .bn-subnav__link {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .bn-subnav__link:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(var(--bnp-accent-rgb, 37,99,235), .3) !important;
}

/* Icon tile */
.bn-subnav__link-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.bn-subnav__link:hover .bn-subnav__link-icon {
  transform: scale(1.2) rotate(-5deg) !important;
}

/* Label */
.bn-subnav__link-label {
  font-size: .67rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 70px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color .18s !important;
}
.bn-subnav__link:hover .bn-subnav__link-label { color: var(--text) !important; }

/* ── 5. BADGE (notifications / watchlist count) ──────────────────── */
.bn-badge {
  position: absolute !important;
  top: -5px !important; right: -5px !important;
  min-width: 17px !important; height: 17px !important;
  padding: 0 4px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: .57rem !important;
  font-weight: 900 !important;
  border-radius: 99px !important;
  line-height: 17px !important;
  text-align: center !important;
  pointer-events: none !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  animation: bn4BadgePop .3s cubic-bezier(.34,1.56,.64,1) both !important;
  letter-spacing: -.01em !important;
}
.bn-badge--brand { background: var(--brand, #2563eb) !important; }
[data-theme="dark"] .bn-badge { border-color: rgba(9,14,26,.9) !important; }
@keyframes bn4BadgePop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* ── 6. BODY SCROLL LOCK ─────────────────────────────────────────── */
.bn-subnav-open {
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  overflow-y: scroll !important;
}

/* ── 7. FOCUS VISIBLE ────────────────────────────────────────────── */
.bottom-nav__item:focus-visible {
  outline: 2.5px solid rgba(var(--bn4-tab-rgb, 37,99,235), .7) !important;
  outline-offset: -2px !important;
  border-radius: 10px !important;
}
.bn-subnav__link:focus-visible,
.bn-subnav__close:focus-visible {
  outline: 2.5px solid rgba(var(--bnp-accent-rgb, 37,99,235), .65) !important;
  outline-offset: 2px !important;
}

/* ── 8. REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav__item,
  .bottom-nav__item--emi .bottom-nav__icon,
  .bn-subnav__panel,
  .bn-subnav__bd,
  .bn-subnav__link,
  .bn-subnav__link-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ── 9. PRINT — hide bottom nav ─────────────────────────────────── */
@media print {
  .bottom-nav, .bn-subnav { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM BOTTOM NAV — rich glass, floating pill, refined EMI FAB
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Bar shell ──────────────────────────────────────────────── */
.bottom-nav {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(220%) blur(32px) !important;
  -webkit-backdrop-filter: saturate(220%) blur(32px) !important;
  border-top: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 -1px 0 rgba(15,23,46,.06),
    0 -8px 32px rgba(15,23,46,.07),
    0 -24px 48px rgba(15,23,46,.04),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(9,14,26,.91) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.05),
    0 -8px 32px rgba(0,0,0,.55),
    0 -24px 56px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── 2. Inner highlight shimmer ────────────────────────────────── */
.bottom-nav__glow {
  background: linear-gradient(180deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.22) 40%,
    transparent 75%) !important;
  border-radius: inherit !important;
}
[data-theme="dark"] .bottom-nav__glow {
  background: linear-gradient(180deg,
    rgba(255,255,255,.06) 0%,
    transparent 55%) !important;
}

/* ── 3. Strip the old top-bar indicator ────────────────────────── */
.bottom-nav__item.is-active::before { display: none !important; }

/* ── 4. Tab items base ─────────────────────────────────────────── */
.bottom-nav__item {
  gap: 2px !important;
  padding: .28rem .1rem .32rem !important;
  transition: color .18s cubic-bezier(.4,0,.2,1),
              transform .14s cubic-bezier(.4,0,.2,1) !important;
}
.bottom-nav__item:active {
  transform: scale(.86) !important;
  transition-duration: .08s !important;
}

/* ── 5. Icon pill ──────────────────────────────────────────────── */
.bottom-nav__icon {
  border-radius: 14px !important;
  transition:
    background .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow  .22s cubic-bezier(.34,1.56,.64,1),
    transform   .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.bottom-nav__item:not(.is-active):not(.bottom-nav__item--emi):hover .bottom-nav__icon {
  background: rgba(var(--brand-rgb, 37,99,235), .07) !important;
  transform: translateY(-1px) !important;
}
.bottom-nav__item.is-active .bottom-nav__icon {
  background: linear-gradient(145deg,
    rgba(var(--brand-rgb, 37,99,235), .18) 0%,
    rgba(var(--brand-rgb, 37,99,235), .08) 100%) !important;
  box-shadow:
    0 3px 14px rgba(var(--brand-rgb, 37,99,235), .22),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  transform: translateY(-2px) scale(1.06) !important;
}
[data-theme="dark"] .bottom-nav__item.is-active .bottom-nav__icon {
  background: rgba(var(--brand-rgb, 37,99,235), .28) !important;
  box-shadow: 0 3px 14px rgba(var(--brand-rgb, 37,99,235), .35) !important;
  border: 1px solid rgba(var(--brand-rgb, 37,99,235), .25) !important;
}
.bottom-nav__item.is-active .bottom-nav__icon svg {
  transform: translateY(0) scale(1.08) !important;
  filter: drop-shadow(0 1px 3px rgba(var(--brand-rgb, 37,99,235), .35));
}

/* ── 6. Active label — gradient text ───────────────────────────── */
.bottom-nav__item.is-active .bottom-nav__label {
  background: linear-gradient(130deg, var(--brand, #2563eb) 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .bottom-nav__item.is-active .bottom-nav__label {
  background: linear-gradient(130deg, #60a5fa 0%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 7. Active bottom dot ──────────────────────────────────────── */
.bottom-nav__item:not(.bottom-nav__item--emi).is-active::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 4px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 18px !important; height: 3px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--brand, #2563eb), #7c3aed) !important;
  box-shadow: 0 0 6px rgba(var(--brand-rgb, 37,99,235), .6) !important;
  animation: bnDot .3s cubic-bezier(.34,1.56,.64,1) forwards !important;
}
@keyframes bnDot {
  from { width: 0; opacity: 0; }
  to   { width: 18px; opacity: 1; }
}

/* ── 8. EMI FAB — jewel button ─────────────────────────────────── */
.bottom-nav__item--emi .bottom-nav__icon {
  background: linear-gradient(145deg,
    #10b981 0%, #059669 45%, #0d9488 100%) !important;
  box-shadow:
    0 5px 22px rgba(5,150,105,.55),
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 5px rgba(5,150,105,.18),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  border: none !important;
  animation: emiFABPulse 3s ease-in-out infinite !important;
  transition:
    transform .24s cubic-bezier(.34,1.56,.64,1),
    box-shadow .24s !important;
}
[data-theme="dark"] .bottom-nav__item--emi .bottom-nav__icon {
  box-shadow:
    0 5px 22px rgba(5,150,105,.65),
    0 0 0 2px rgba(255,255,255,.14),
    0 0 0 4px rgba(5,150,105,.22),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.bottom-nav__item--emi .bottom-nav__icon svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)) !important;
}
.bottom-nav__item--emi:hover .bottom-nav__icon {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow:
    0 8px 28px rgba(5,150,105,.65),
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 6px rgba(5,150,105,.25),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  animation: none !important;
}
.bottom-nav__item--emi:active .bottom-nav__icon {
  transform: scale(.9) !important;
  animation: none !important;
}
.bottom-nav__item--emi.is-active .bottom-nav__icon {
  background: linear-gradient(145deg, #047857 0%, #059669 60%, #0891b2 100%) !important;
  box-shadow:
    0 6px 28px rgba(5,150,105,.7),
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 6px rgba(5,150,105,.28) !important;
  animation: none !important;
}
.bottom-nav__item--emi .bottom-nav__label {
  background: linear-gradient(130deg, #059669, #0d9488) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-size: .58rem !important;
}
@keyframes emiFABPulse {
  0%, 100% {
    box-shadow:
      0 5px 22px rgba(5,150,105,.55),
      0 0 0 3px rgba(255,255,255,.92),
      0 0 0 5px rgba(5,150,105,.18),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
  50% {
    box-shadow:
      0 5px 22px rgba(5,150,105,.55),
      0 0 0 3px rgba(255,255,255,.92),
      0 0 0 10px rgba(5,150,105,0),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
}

/* ── 9. Panel-open ring ─────────────────────────────────────────── */
.bottom-nav__item[aria-expanded="true"] .bottom-nav__icon {
  outline: 2px solid rgba(var(--brand-rgb, 37,99,235), .35) !important;
  outline-offset: 3px !important;
}
.bottom-nav__item--emi[aria-expanded="true"] .bottom-nav__icon {
  outline: 2.5px solid rgba(5,150,105,.45) !important;
  outline-offset: 4px !important;
  animation: none !important;
}

/* ── 10. Label typography ───────────────────────────────────────── */
.bottom-nav__label {
  font-size: .61rem !important;
  letter-spacing: .015em !important;
  font-weight: 500 !important;
}

/* ── 11. Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav__item--emi .bottom-nav__icon { animation: none !important; }
  .bottom-nav__item.is-active .bottom-nav__icon { transform: none !important; }
  .bottom-nav__item:not(.bottom-nav__item--emi).is-active::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   REFERRAL PAGE — Discount Breakdown + Network Funnel
   ═══════════════════════════════════════════════════════════════════ */

/* ── Discount Breakdown card ────────────────────────────────────── */
.ref-disc-card {
  display: flex;
  gap: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 28px rgba(0,0,0,.055), 0 1px 4px rgba(0,0,0,.03);
  position: relative;
  overflow: hidden;
}
.ref-disc-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg,#059669,#2563eb,#7c3aed);
  border-radius: 3px 0 0 3px;
}
@media (max-width: 560px) {
  .ref-disc-card { flex-direction: column; gap: .9rem; }
}

/* Left — gauge */
.ref-disc-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.ref-disc-gauge {
  position: relative;
  width: 120px;
  height: 80px;
}
.ref-disc-gauge__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ref-gauge-arc {
  transition: stroke-dasharray 1.5s cubic-bezier(.16,1,.3,1);
}
.ref-disc-gauge__center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding-bottom: 2px;
}
.ref-disc-gauge__pct {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg,#059669,#2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ref-disc-gauge__unit { font-size: .85rem; font-weight: 700; }
.ref-disc-gauge__cap {
  font-size: .57rem;
  color: var(--text-muted);
  margin-top: .08rem;
  letter-spacing: .02em;
}
.ref-disc-lbl {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .5rem;
  text-align: center;
}
.ref-disc-save {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  margin-top: .42rem;
  font-size: .68rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5,150,105,.1);
  border-radius: 99px;
  padding: .2rem .6rem;
}
.ref-disc-save--muted { color: var(--text-muted); background: var(--bg-muted); }

/* Right — per-level rows */
.ref-disc-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.ref-disc-row { display: flex; flex-direction: column; gap: .2rem; }
.ref-disc-row__meta {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .7rem;
}
.ref-disc-row__badge {
  font-size: .58rem;
  font-weight: 800;
  background: var(--dc);
  color: #fff;
  border-radius: 5px;
  padding: .05rem .28rem;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.ref-disc-row__cnt { font-weight: 700; color: var(--text); min-width: 22px; }
.ref-disc-row__cnt small { opacity: .45; font-size: .85em; }
.ref-disc-row__formula { flex: 1; color: var(--text-muted); font-size: .63rem; }
.ref-disc-row__val {
  font-weight: 800;
  color: var(--dc);
  font-size: .68rem;
  margin-left: auto;
  flex-shrink: 0;
}
.ref-disc-row__track {
  height: 5px;
  background: var(--bg-muted);
  border-radius: 99px;
  overflow: hidden;
}
.ref-disc-row__fill {
  height: 100%;
  width: 0;
  background: var(--dc);
  border-radius: 99px;
  opacity: .8;
  transition: width 1.3s cubic-bezier(.16,1,.3,1);
}
.ref-disc-row__fill.is-drawn { width: calc(var(--fill-w, 0) * 1%); }
.ref-disc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
  margin-top: .1rem;
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 600;
}
.ref-disc-total-val {
  font-size: .9rem;
  font-weight: 800;
  background: linear-gradient(135deg,#059669,#2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Network Funnel card ────────────────────────────────────────── */
.ref-funnel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.ref-funnel-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  opacity: 0;
  transform: translateX(-10px);
  animation: refFunnelIn .45s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes refFunnelIn { to { opacity:1; transform:none; } }
.ref-funnel-row__lbl { flex-shrink: 0; width: 28px; }
.ref-funnel-row__badge {
  font-size: .59rem;
  font-weight: 800;
  color: #fff;
  border-radius: 5px;
  padding: .1rem .3rem;
  display: inline-block;
  letter-spacing: .02em;
}
.ref-funnel-track {
  flex: 1;
  height: 18px;
  border-radius: 6px;
  background: var(--bg-muted);
  position: relative;
  overflow: hidden;
}
.ref-funnel-total-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--fc, #64748b);
  border-radius: 6px;
  opacity: .28;
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.ref-funnel-total-bar.is-drawn { width: calc(var(--fw, 0) * 1%); }
.ref-funnel-active-bar {
  position: absolute;
  inset: 2px auto 2px 0;
  width: 0;
  background: linear-gradient(90deg,#059669,#34d399);
  border-radius: 5px;
  transition: width 1.1s cubic-bezier(.16,1,.3,1) .15s;
}
.ref-funnel-active-bar.is-drawn { width: calc(var(--aw, 0) * 1%); }
.ref-funnel-row__nums {
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
  font-size: .7rem;
}
.ref-funnel-active-badge {
  display: inline-block;
  margin-left: .2rem;
  font-size: .58rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5,150,105,.12);
  border-radius: 99px;
  padding: .03rem .3rem;
}
.ref-funnel-row__rate {
  flex-shrink: 0;
  min-width: 54px;
  text-align: right;
  font-size: .6rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ref-funnel-legend {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .7rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
  font-size: .63rem;
  color: var(--text-muted);
  font-weight: 600;
}
.ref-funnel-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Visual formula panel ───────────────────────────────────────── */
.ref-formula-card {
  background: linear-gradient(135deg,rgba(37,99,235,.04),rgba(124,58,237,.04));
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 14px;
  padding: .9rem 1rem;
  margin-top: 1rem;
}
[data-theme="dark"] .ref-formula-card {
  background: linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.06));
}
.ref-formula-card__title {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.ref-formula-rows { display: flex; flex-direction: column; gap: .32rem; }
.ref-formula-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .68rem;
}
.ref-formula-row__badge {
  font-size: .57rem;
  font-weight: 800;
  color: #fff;
  border-radius: 4px;
  padding: .05rem .26rem;
  flex-shrink: 0;
}
.ref-formula-row__expr {
  flex: 1;
  color: var(--text-muted);
  font-family: 'JetBrains Mono','Fira Code',ui-monospace,monospace;
  font-size: .62rem;
}
.ref-formula-row__eg {
  font-weight: 700;
  color: var(--text);
  font-size: .64rem;
  white-space: nowrap;
}
.ref-formula-note {
  font-size: .61rem;
  color: var(--text-muted);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(37,99,235,.12);
  line-height: 1.6;
}

/* ── Reduced motion overrides ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ref-gauge-arc,
  .ref-disc-row__fill,
  .ref-funnel-total-bar,
  .ref-funnel-active-bar { transition: none !important; }
  .ref-funnel-row { animation: none; opacity: 1; transform: none; }
}

/* ── Referral Wallet Section ─────────────────────────────────────── */
.ref-wallet-section {
  margin: 1.25rem 0 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ref-wallet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.2rem;
  background: linear-gradient(90deg, rgba(37,99,235,.06), rgba(124,58,237,.05));
  border-bottom: 1px solid var(--border);
}
.ref-wallet-header__title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 700; color: var(--text);
}
.ref-wallet-apply-btn {
  font-size: .78rem; font-weight: 700; padding: .3rem .8rem;
  background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff;
  border: none; border-radius: 20px; cursor: pointer; transition: opacity .15s;
}
.ref-wallet-apply-btn:hover { opacity: .88; }

/* KPI strip */
.ref-wallet-kpis {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) { .ref-wallet-kpis { grid-template-columns: repeat(2,1fr); } }
.ref-wallet-kpi {
  padding: .9rem 1rem; border-right: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.ref-wallet-kpi:last-child { border-right: none; }
.ref-wallet-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.ref-wallet-kpi--holding::before  { background: #d97706; }
.ref-wallet-kpi--available::before{ background: #2563eb; }
.ref-wallet-kpi--earned::before   { background: #059669; }
.ref-wallet-kpi--applied::before  { background: #7c3aed; }
.ref-wallet-kpi__label { font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.ref-wallet-kpi__val   { font-size: 1.28rem; font-weight: 800; color: var(--text); }
.ref-wallet-kpi__sub   { font-size: .68rem; color: var(--text-muted); margin-top: .2rem; }

/* Upcoming releases */
.ref-wallet-upcoming { padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); }
.ref-wallet-upcoming__title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }
.ref-wallet-upcoming__list  { display: flex; flex-wrap: wrap; gap: .5rem; }
.ref-wallet-upcoming__item  {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .5rem .75rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-muted);
  min-width: 130px; flex: 1 1 130px;
}
.ref-wallet-upcoming__item--soon   { border-color: rgba(5,150,105,.35); background: rgba(5,150,105,.06); }
.ref-wallet-upcoming__item--medium { border-color: rgba(37,99,235,.3); }
.ref-wallet-upcoming__amt   { font-size: .94rem; font-weight: 800; color: var(--text); }
.ref-wallet-upcoming__meta  { font-size: .72rem; color: var(--text-muted); }
.ref-wallet-upcoming__days  { font-size: .73rem; font-weight: 700; color: #059669; }

/* By level */
.ref-wallet-by-level { padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); }
.ref-wallet-by-level__title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }
.ref-wallet-bylvl-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.ref-wallet-bylvl-badge { font-size: .65rem; font-weight: 800; color: #fff; padding: .18rem .42rem; border-radius: 5px; min-width: 28px; text-align: center; }
.ref-wallet-bylvl-bars { flex: 1; }
.ref-wallet-bylvl-bar-wrap { height: 8px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; }
.ref-wallet-bylvl-bar { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.25,.46,.45,.94); }
.ref-wallet-bylvl-stats { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; font-size: .78rem; font-weight: 700; }
.ref-wallet-bylvl-count { font-size: .66rem; font-weight: 400; color: var(--text-muted); }

/* Trend chart */
.ref-wallet-trend { padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); }
.ref-wallet-trend__title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }

/* History table */
.ref-wallet-history { padding: .85rem 1.2rem; }
.ref-wallet-history__title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }
.ref-wallet-history__table-wrap { overflow-x: auto; }
.ref-wallet-history__table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ref-wallet-history__table th { text-align: left; padding: .4rem .6rem; font-size: .7rem; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.ref-wallet-history__table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); color: var(--text); }
.ref-wallet-history__table tr:last-child td { border-bottom: none; }

/* Empty state */
.ref-wallet-empty { padding: 2.2rem 1rem; text-align: center; color: var(--text-muted); font-size: .84rem; }

/* Apply modal */
.ref-apply-modal {
  display: none; position: fixed; z-index: 1010; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 94vw); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.ref-apply-modal.is-open { display: block; }
.ref-apply-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1009;
}
.ref-apply-modal-overlay.is-open { display: block; }
.ref-apply-modal__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
  font-size: .9rem; font-weight: 700;
}
.ref-apply-modal__close {
  background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--text-muted); line-height: 1;
}
.ref-apply-modal__body { padding: 1rem 1.1rem; }
.ref-apply-modal__balance { font-size: .84rem; margin-bottom: .75rem; color: var(--text-muted); }
.ref-apply-modal__list { display: flex; flex-direction: column; gap: .5rem; }
.ref-apply-modal__item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-muted);
}

/* ── Dashboard buyer — Referral Wallet strip ─────────────────────── */
.db2-wallet-strip {
  display: flex; gap: 0; margin: .65rem 0 .4rem;
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
}
.db2-wallet-strip__kpi {
  flex: 1; padding: .45rem .55rem; text-align: center;
  border-right: 1px solid var(--border);
  position: relative;
}
.db2-wallet-strip__kpi:last-child { border-right: none; }
.db2-wallet-strip__kpi::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
}
.db2-wallet-strip__kpi--holding::before  { background:#d97706; }
.db2-wallet-strip__kpi--avail::before    { background:#2563eb; }
.db2-wallet-strip__kpi--earned::before   { background:#059669; }
.db2-wallet-strip__label { font-size:.62rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.db2-wallet-strip__val   { font-size:.9rem; font-weight:800; color:var(--text); margin-top:.1rem; }

/* ── Referral Earnings Forecast ──────────────────────────────────── */
.ref-forecast-section {
  margin-top: 1.4rem;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.ref-forecast-hd {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem;
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--border);
}
.ref-forecast-hd__title { font-size: .88rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .4rem; }
.ref-forecast-hd__sub { font-size: .72rem; color: var(--text-muted); }
.ref-forecast-grid {
  display: flex; align-items: flex-end; gap: 0;
  padding: 1.2rem 1.2rem .6rem; min-height: 140px;
}
.ref-forecast-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .22rem; padding: 0 .3rem;
}
.ref-forecast-col--past { opacity: .45; }
.ref-forecast-bar-wrap { width: 100%; display: flex; align-items: flex-end; justify-content: center; height: 88px; }
.ref-forecast-bar {
  width: 60%; max-width: 44px; min-height: 4px;
  background: linear-gradient(180deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 5px 5px 0 0;
  transform-origin: bottom; transform: scaleY(0);
  transition: transform .65s cubic-bezier(.34,1.56,.64,1);
}
.ref-forecast-bar.is-visible { transform: scaleY(1); }
.ref-forecast-col__val  { font-size: .78rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.ref-forecast-col__ym   { font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.ref-forecast-col__meta { font-size: .59rem; color: var(--text-muted); text-align: center; line-height: 1.3; }
.ref-forecast-total {
  align-self: flex-end; margin-left: .8rem; padding-left: .8rem;
  border-left: 1px solid var(--border); min-width: 110px; text-align: center;
}
.ref-forecast-total__lbl { font-size: .66rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.ref-forecast-total__val { font-size: 1.2rem; font-weight: 800; color: #2563eb; }
.ref-forecast-total__sub { font-size: .62rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.3; }

/* ── Referral Activity Feed ──────────────────────────────────────── */
.ref-feed-section {
  margin-top: 1.4rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.ref-feed-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--border);
}
.ref-feed-hd__title { font-size: .88rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .4rem; }
.ref-feed-hd__count { font-size: .72rem; color: var(--text-muted); background: var(--bg-muted); padding: .18rem .55rem; border-radius: 20px; border: 1px solid var(--border); }
.ref-feed-list { padding: .4rem 0; }
.ref-feed-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem 1.2rem; border-bottom: 1px solid var(--border); transition: background .15s;
}
.ref-feed-item:last-of-type { border-bottom: none; }
.ref-feed-item:hover { background: var(--bg-muted); }
.ref-feed-item--hidden { display: none; }
.ref-feed-item__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem; background: var(--border); }
.ref-feed-item__body { flex: 1; min-width: 0; }
.ref-feed-item__title { font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-feed-item__sub   { font-size: .72rem; color: var(--text-muted); margin-top: .12rem; }
.ref-feed-item__meta  { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; flex-shrink: 0; }
.ref-feed-item__icon  { font-size: .95rem; }
.ref-feed-item__age   { font-size: .65rem; color: var(--text-muted); white-space: nowrap; }
.ref-feed-more {
  display: block; width: 100%; padding: .6rem;
  background: none; border: none; border-top: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; color: var(--brand); cursor: pointer; text-align: center; transition: background .15s;
}
.ref-feed-more:hover { background: var(--bg-muted); }

/* ── Admin — Wallet Adjust modal ─────────────────────────────────── */
.re-adj-modal {
  display: none; position: fixed; z-index: 1020; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 95vw); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 48px rgba(0,0,0,.22);
}
.re-adj-modal.is-open { display: block; }
.re-adj-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1019; }
.re-adj-overlay.is-open { display: block; }
.re-adj-modal__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .92rem; font-weight: 800;
}
.re-adj-modal__close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-muted); line-height: 1; }
.re-adj-modal__body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.re-adj-user-strip {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-muted); font-size: .8rem;
}
.re-adj-user-strip__name  { font-weight: 700; color: var(--text); }
.re-adj-user-strip__email { color: var(--text-muted); font-size: .72rem; }
.re-adj-user-strip__bal   { margin-left: auto; font-weight: 800; color: #2563eb; }
.re-adj-modal__label { font-size: .75rem; font-weight: 700; color: var(--text-muted); margin-bottom: .25rem; display: block; }
.re-adj-modal__input {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: .88rem; box-sizing: border-box;
}
.re-adj-modal__input:focus { outline: none; border-color: var(--brand); }
.re-adj-type-toggle { display: flex; gap: .4rem; }
.re-adj-type-btn {
  flex: 1; padding: .42rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-muted); cursor: pointer; font-size: .8rem; font-weight: 700; transition: all .15s; text-align: center;
}
.re-adj-type-btn.is-active-credit { background: rgba(5,150,105,.12); border-color: #059669; color: #059669; }
.re-adj-type-btn.is-active-debit  { background: rgba(220,38,38,.1);  border-color: #dc2626; color: #dc2626; }
.re-adj-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .55rem;
  padding: .75rem 1.1rem; border-top: 1px solid var(--border);
}
.re-adj-submit { padding: .45rem 1.1rem; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: .82rem; cursor: pointer; transition: opacity .15s; }
.re-adj-submit:disabled { opacity: .5; cursor: not-allowed; }
.re-adj-submit:not(:disabled):hover { opacity: .88; }
.re-adj-result { font-size: .78rem; padding: .35rem .7rem; border-radius: 7px; }
.re-adj-result--ok  { background: rgba(5,150,105,.12); color: #059669; }
.re-adj-result--err { background: rgba(220,38,38,.1);  color: #dc2626; }

/* ── Admin — Conversion analytics ───────────────────────────────── */
.re-conv-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.re-conv-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: .85rem 1rem; position: relative; overflow: hidden;
}
.re-conv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.re-conv-card__label { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.re-conv-card__val   { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.re-conv-card__sub   { font-size: .68rem; color: var(--text-muted); margin-top: .18rem; }
.re-conv-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.re-conv-table-wrap { flex: 1 1 260px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.re-conv-table-hd { padding: .65rem 1rem; border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 800; }
.re-conv-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.re-conv-table th { padding: .38rem .75rem; font-size: .68rem; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: left; }
.re-conv-table td { padding: .45rem .75rem; border-bottom: 1px solid var(--border); }
.re-conv-table tr:last-child td { border-bottom: none; }

/* ── Admin referral — Live indicator strip ──────────────────────── */
.re-live-strip {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem;
  background: linear-gradient(90deg, rgba(5,150,105,.08), rgba(5,150,105,0));
  border: 1px solid rgba(5,150,105,.25); border-radius: 8px;
  margin-bottom: .9rem; font-size: .72rem; color: var(--text);
}
.re-live-strip--paused {
  background: linear-gradient(90deg, rgba(100,116,139,.08), rgba(100,116,139,0));
  border-color: rgba(100,116,139,.25);
}
.re-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.55);
  animation: re-live-pulse 2s ease-out infinite;
}
.re-live-strip--paused .re-live-dot { background: #94a3b8; animation: none; box-shadow: none; }
@keyframes re-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.re-live-label { font-weight: 800; color: #059669; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.re-live-strip--paused .re-live-label { color: #64748b; }
.re-live-meta { color: var(--text-muted); }
.re-live-toggle {
  margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .15rem .45rem; cursor: pointer; font-size: .8rem; color: var(--text-muted);
  transition: all .15s;
}
.re-live-toggle:hover { background: var(--bg-muted); color: var(--text); }

/* KPI val pulse + delta badges */
@keyframes re-kpi-pulse {
  0%   { background-color: rgba(37,99,235,0); }
  20%  { background-color: rgba(37,99,235,.18); }
  100% { background-color: rgba(37,99,235,0); }
}
.re-stat__val--pulse { animation: re-kpi-pulse .9s ease-out; border-radius: 6px; }
.re-stat__delta {
  display: inline-block; font-size: .58rem; font-weight: 800; padding: .08rem .35rem;
  border-radius: 4px; margin-left: .35rem; vertical-align: middle;
  letter-spacing: .02em;
}
.re-stat__delta--up   { background: rgba(5,150,105,.14); color: #059669; }
.re-stat__delta--down { background: rgba(220,38,38,.12); color: #dc2626; }

/* ── Admin referral — Smart Insights ─────────────────────────────── */
.re-insights {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1.1rem; overflow: hidden;
}
.re-insights__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .65rem 1rem; border-bottom: 1px solid var(--border);
}
.re-insights__title { font-size: .85rem; font-weight: 800; color: var(--text); }
.re-insights__sub   { font-size: .68rem; color: var(--text-muted); }
.re-insights__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
}
.re-insight {
  display: flex; gap: .55rem; padding: .7rem .85rem;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; transition: background .15s;
}
.re-insight:hover { background: var(--bg-muted); }
.re-insight::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.re-insight--ok::before   { background: #059669; }
.re-insight--warn::before { background: #d97706; }
.re-insight--info::before { background: #2563eb; }
.re-insight__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; padding-top: .1rem; }
.re-insight__body { flex: 1; min-width: 0; }
.re-insight__title { font-size: .82rem; font-weight: 800; color: var(--text); margin-bottom: .15rem; line-height: 1.3; }
.re-insight__sub   { font-size: .68rem; color: var(--text-muted); line-height: 1.35; }

/* ── Admin referral — Activity Heatmap ──────────────────────────── */
.re-heatmap-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1.1rem; overflow: hidden;
}
.re-heatmap-hd {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.re-heatmap-title { font-size: .85rem; font-weight: 800; }
.re-heatmap-legend {
  display: flex; align-items: center; gap: .25rem; font-size: .65rem; color: var(--text-muted);
}
.re-heatmap-legend-cell { width: 11px; height: 11px; border-radius: 2px; display: inline-block; border: 1px solid var(--border); }
.re-heatmap-body {
  display: flex; gap: .35rem; padding: .85rem 1rem; overflow-x: auto;
}
.re-heatmap-dows {
  display: grid; grid-template-rows: repeat(7, 14px); gap: 3px;
  font-size: .55rem; color: var(--text-muted); padding-top: 2px;
}
.re-heatmap-dows span { line-height: 14px; }
.re-heatmap-grid {
  display: flex; gap: 3px; flex: 1;
}
.re-heatmap-col {
  display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; flex-shrink: 0;
}
.re-heatmap-cell {
  width: 14px; height: 14px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s, box-shadow .12s;
}
.re-heatmap-cell:hover { transform: scale(1.45); box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 5; }
.re-heatmap-cell--empty { visibility: hidden; }
.re-heatmap-cell--lvl0 { background: var(--bg-muted); border-color: var(--border); }
.re-heatmap-cell--lvl1 { background: rgba(5,150,105,.25); }
.re-heatmap-cell--lvl2 { background: rgba(5,150,105,.5); }
.re-heatmap-cell--lvl3 { background: rgba(5,150,105,.75); }
.re-heatmap-cell--lvl4 { background: rgba(5,150,105,1); }
.re-heatmap-foot {
  padding: .55rem 1rem; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-muted);
}

/* ── Admin referral — Conversion Funnel ─────────────────────────── */
.re-funnel-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1.4rem; overflow: hidden;
}
.re-funnel-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.re-funnel-title { font-size: .85rem; font-weight: 800; }
.re-funnel-sub   { font-size: .68rem; color: var(--text-muted); }
.re-funnel-body { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.re-funnel-row {
  display: grid; grid-template-columns: 170px 1fr 110px;
  align-items: center; gap: .85rem;
}
@media (max-width: 600px) {
  .re-funnel-row { grid-template-columns: 130px 1fr 80px; gap: .5rem; }
}
.re-funnel-stage {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; color: var(--text);
}
.re-funnel-icon { font-size: 1.05rem; }
.re-funnel-bar-wrap {
  background: var(--bg-muted); height: 30px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border);
}
.re-funnel-bar {
  height: 100%; display: flex; align-items: center; padding: 0 .65rem;
  border-radius: 6px;
  transition: width .9s cubic-bezier(.34, 1.4, .64, 1);
}
.re-funnel-count { font-size: .8rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); white-space: nowrap; }
.re-funnel-rate { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.re-funnel-rate__pct { font-size: .85rem; font-weight: 800; }
.re-funnel-rate__lbl { font-size: .56rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Admin referral — Anomaly / Risk panel ──────────────────────── */
.re-anomaly-card {
  background: var(--bg-card); border: 1px solid rgba(220,38,38,.18); border-radius: 14px;
  margin-bottom: 1.4rem; overflow: hidden;
}
.re-anomaly-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(220,38,38,.05), rgba(220,38,38,0));
}
.re-anomaly-title { font-size: .85rem; font-weight: 800; color: var(--text); }
.re-anomaly-sub   { font-size: .68rem; color: var(--text-muted); }
.re-anomaly-body  { padding: 0; overflow-x: auto; }
.re-anomaly-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.re-anomaly-table th { padding: .45rem .9rem; font-size: .62rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); text-align: left; background: var(--bg-muted); }
.re-anomaly-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.re-anomaly-row:hover td { background: var(--bg-muted); }
.re-anomaly-row:last-child td { border-bottom: none; }
.re-anomaly-flag {
  font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 5px;
  background: rgba(220,38,38,.1); color: #dc2626; border: 1px solid rgba(220,38,38,.2);
}
.re-anomaly-score-wrap {
  height: 8px; background: var(--bg-muted); border-radius: 99px;
  border: 1px solid var(--border); overflow: hidden; margin-bottom: .15rem;
}
.re-anomaly-score-bar { height: 100%; border-radius: 99px; transition: width .8s ease-out; }
.re-anomaly-score-num { font-size: .68rem; font-weight: 800; }
.re-anomaly-score-num--high { color: #dc2626; }
.re-anomaly-score-num--med  { color: #d97706; }
.re-anomaly-score-num--low  { color: #059669; }
.re-anomaly-investigate {
  padding: .35rem .7rem; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 6px;
  font-size: .7rem; font-weight: 700; cursor: pointer; color: var(--text); transition: all .15s;
}
.re-anomaly-investigate:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE-FIRST POLISH LAYER  v3
   Native mobile feel · safe-area · glassmorphism · responsive utilities
   ═════════════════════════════════════════════════════════════════════ */

/* ── Native mobile reset: kill 300ms tap-delay & blue tap highlight ── */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body {
  overscroll-behavior-y: none;
}
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ── Touch target hardening: every interactive element ≥ 44px on mobile ── */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.btn, .icon-btn, .nav-link, .form-control, input[type="checkbox"], input[type="radio"] {
    min-height: 38px;
  }
  .btn-sm { min-height: 34px; }
  .btn-xs { min-height: 28px; }
  /* Make all icon-only buttons square ≥ 40px */
  .topbar .btn-ghost, .icon-btn {
    min-width: 40px; min-height: 40px;
  }
}

/* ── Premium fluid typography (mobile → desktop) ──────────────────── */
@media (max-width: 768px) {
  html { font-size: 15px; }
  h1 { font-size: clamp(1.35rem, 4.5vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em; }
  h2 { font-size: clamp(1.15rem, 3.8vw, 1.35rem); line-height: 1.25; }
  h3 { font-size: clamp(1rem,   3.2vw, 1.15rem); line-height: 1.3; }
  .main h1, .main h2, .main h3 { font-weight: 800; }
}

/* ── Bottom-nav: premium glass treatment with frosted blur ──────────── */
.bottom-nav {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 -1px 0 rgba(0,0,0,.04),
    0 -8px 32px rgba(15,23,42,.07),
    0 -16px 48px rgba(15,23,42,.04);
}
[data-theme="dark"] .bottom-nav {
  box-shadow:
    0 -1px 0 rgba(255,255,255,.03),
    0 -8px 32px rgba(0,0,0,.35),
    0 -16px 48px rgba(0,0,0,.25);
}
/* Active item: gradient underline pill + tiny scale on press */
.bottom-nav__item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), color .18s;
}
.bottom-nav__item:active {
  transform: scale(.92);
}
.bottom-nav__item.is-active .bottom-nav__icon svg {
  filter: drop-shadow(0 2px 6px rgba(37,99,235,.35));
}
/* Subtle "tap ripple" pulse on press */
@keyframes bn-ripple-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.35); }
  100% { box-shadow: 0 0 0 18px rgba(37,99,235,0); }
}
.bottom-nav__item:active .bottom-nav__icon {
  animation: bn-ripple-pulse .55s ease-out;
}

/* ── Topbar: glassmorphic, gains shadow on scroll ──────────────────── */
.topbar {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.topbar.is-scrolled {
  box-shadow: 0 4px 18px rgba(15,23,42,.07), 0 1px 0 rgba(15,23,42,.04);
}
[data-theme="dark"] .topbar.is-scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
}

/* ── Mobile sidebar drawer: premium polish ─────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    border-radius: 0 18px 18px 0;
    box-shadow: 18px 0 60px rgba(0,0,0,.18);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  [dir="rtl"] .sidebar { border-radius: 18px 0 0 18px; }
  .sidebar__brand-row {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  }
  .sidebar__link {
    border-radius: 12px;
    transition: background .18s ease, transform .12s ease;
  }
  .sidebar__link:active { transform: scale(.98); }
  .sidebar__link.is-active {
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.12));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
}

/* Hamburger morph to "X" when drawer open (uses existing markup) */
.app[data-menu="open"] .topbar__menu-btn .hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.app[data-menu="open"] .topbar__menu-btn .hamburger-bar:nth-child(2) { opacity: 0; }
.app[data-menu="open"] .topbar__menu-btn .hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.topbar__menu-btn .hamburger-bar { transition: transform .25s ease, opacity .15s ease; }

/* ── Premium card lift / press feedback ────────────────────────────── */
@media (hover: hover) {
  .stat-card:hover, .kpi-card:hover, .premium-card:hover, .re-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15,23,42,.08), 0 1px 0 rgba(255,255,255,.4) inset;
  }
}
.stat-card, .kpi-card, .premium-card, .re-card {
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
.stat-card:active, .kpi-card:active, .premium-card:active { transform: scale(.985); }

/* ── Premium responsive table → card stack on mobile ──────────────── */
@media (max-width: 640px) {
  table.table-stack thead { display: none; }
  table.table-stack tr {
    display: block; border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: .6rem; padding: .65rem .75rem; background: var(--bg-card);
  }
  table.table-stack td {
    display: flex; justify-content: space-between; align-items: center;
    padding: .35rem 0; border: none; gap: .75rem;
  }
  table.table-stack td::before {
    content: attr(data-label); font-size: .7rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  }
  table.table-stack td:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ── Premium horizontal carousels (KPI strips) → snap-scroll on mobile */
@media (max-width: 640px) {
  .scroll-snap-x, .re-stats, .ref-wallet-kpis, .re-conv-grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none !important;
    padding-bottom: .35rem;
  }
  .scroll-snap-x::-webkit-scrollbar,
  .re-stats::-webkit-scrollbar,
  .ref-wallet-kpis::-webkit-scrollbar,
  .re-conv-grid::-webkit-scrollbar { display: none; }
  .scroll-snap-x > *,
  .re-stats > .re-stat,
  .ref-wallet-kpis > .ref-wallet-kpi,
  .re-conv-grid > .re-conv-card { scroll-snap-align: start; }
}

/* ── Premium form field elevation on focus ─────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="password"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea {
  transition: border-color .18s ease, box-shadow .22s ease, background-color .18s ease;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
  border-color: var(--brand);
}

/* ── Native-feel button press ──────────────────────────────────────── */
.btn { transition: transform .12s cubic-bezier(.34,1.5,.64,1), box-shadow .2s ease, background-color .15s ease, color .15s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }

/* ── Mobile-friendly iOS-style "card list" rows ────────────────────── */
.list-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem;
  margin-bottom: .55rem; transition: transform .15s ease, box-shadow .2s ease;
}
.list-card:active { transform: scale(.99); }
.list-card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--bg-muted); font-size: 1.05rem;
}
.list-card__body { flex: 1; min-width: 0; }
.list-card__title { font-size: .88rem; font-weight: 700; color: var(--text); }
.list-card__sub   { font-size: .72rem; color: var(--text-muted); margin-top: .12rem; }
.list-card__chev  { color: var(--text-muted); flex-shrink: 0; }

/* ── Premium skeleton shimmer (use class .sk on placeholders) ──────── */
.sk {
  background: linear-gradient(90deg, var(--bg-muted) 0%, rgba(255,255,255,.04) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px; color: transparent !important;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile: hide breadcrumbs deep tail, show only last 2 ──────────── */
@media (max-width: 480px) {
  .breadcrumbs { gap: .25rem; }
  .breadcrumbs > a:not(.breadcrumbs__home),
  .breadcrumbs > span:not(.breadcrumbs__current):not(.breadcrumbs__sep) {
    display: none;
  }
  .breadcrumbs__sep:nth-of-type(n+2) { display: none; }
}

/* ── Floating action area: leave room above bottom-nav ─────────────── */
@media (max-width: 768px) {
  .main, .layout-main, [role="main"] {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 1.25rem);
  }
  /* Modals/dialogs lifted above bottom-nav */
  .modal, .dialog, [role="dialog"] {
    margin-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Sticky page sub-header on mobile (use class .page-subhdr) ─────── */
@media (max-width: 768px) {
  .page-subhdr {
    position: sticky; top: var(--topbar-h, 56px);
    z-index: 10;
    background: var(--bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: .55rem 1rem;
    margin: -1rem -1rem .8rem;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Premium accent gradient text utility ──────────────────────────── */
.txt-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed 60%, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Mobile "sheet" modal pattern (slide up from bottom on small) ──── */
@media (max-width: 600px) {
  .sheet-modal {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    transform: translateY(100%) !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    transition: transform .35s cubic-bezier(.32,.72,0,1) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem) !important;
  }
  .sheet-modal.is-open { transform: translateY(0) !important; }
  .sheet-modal::before {
    content: ''; position: absolute; left: 50%; top: 8px;
    width: 38px; height: 4px; border-radius: 99px;
    background: var(--border); transform: translateX(-50%);
  }
}

/* ── Mobile-first form rows: single column, larger fields ──────────── */
@media (max-width: 640px) {
  .form-row, .grid-2col, .grid-3col {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  .form-control, input, select, textarea {
    font-size: 16px;  /* prevents iOS zoom on focus */
  }
  .btn-block-sm { width: 100%; }
}

/* ── Pull-down hint on mobile dashboards (decorative) ──────────────── */
@media (max-width: 768px) {
  .pull-hint {
    height: 4px; width: 38px; border-radius: 99px;
    background: var(--border); margin: -.4rem auto 1rem;
    opacity: .55;
  }
}

/* ── Print: hide bottom-nav and topbar action buttons ──────────────── */
@media print {
  .bottom-nav, .bn-subnav, .topbar__actions, .topbar__menu-btn { display: none !important; }
}

/* ── Reduced motion: kill all heavy transitions ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav__item, .btn, .stat-card, .kpi-card, .re-card, .list-card,
  .ref-forecast-bar, .re-funnel-bar, .re-anomaly-score-bar {
    transition: none !important; animation: none !important;
  }
}

/* ── Premium dark-mode top-of-screen blur band ─────────────────────── */
[data-theme="dark"] .topbar {
  background-color: rgba(8,13,26,.72);
}
[data-theme="light"] .topbar {
  background-color: rgba(255,255,255,.78);
}

/* ── Bottom-nav badge polish ───────────────────────────────────────── */
.bn-badge {
  box-shadow: 0 2px 6px rgba(220,38,38,.35);
  font-weight: 800; letter-spacing: .02em;
}
.bn-badge--brand { box-shadow: 0 2px 6px rgba(37,99,235,.35); }

/* ── Premium "iOS-segment" style toggle group (use .seg) ───────────── */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-muted); border-radius: 10px; border: 1px solid var(--border);
}
.seg__btn {
  padding: .4rem .75rem; border-radius: 8px; border: none;
  background: transparent; font-size: .78rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer; transition: all .18s ease;
}
.seg__btn.is-active {
  background: var(--bg-card); color: var(--text);
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 1px 4px rgba(15,23,42,.06);
}
[data-theme="dark"] .seg__btn.is-active {
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 1px 4px rgba(0,0,0,.4);
}

/* ── Universal "chip" component ────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 99px;
  background: var(--bg-muted); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 600; color: var(--text);
}
.chip--brand   { background: rgba(37,99,235,.1);  color: #2563eb; border-color: rgba(37,99,235,.2); }
.chip--success { background: rgba(5,150,105,.1);  color: #059669; border-color: rgba(5,150,105,.2); }
.chip--warn    { background: rgba(217,119,6,.1);  color: #d97706; border-color: rgba(217,119,6,.2); }
.chip--danger  { background: rgba(220,38,38,.1);  color: #dc2626; border-color: rgba(220,38,38,.2); }

/* ── Avatar consistency ────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; font-weight: 800; font-size: .82rem;
  box-shadow: 0 2px 8px rgba(37,99,235,.18);
}
.avatar--sm { width: 28px; height: 28px; font-size: .68rem; }
.avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar--xl { width: 64px; height: 64px; font-size: 1.4rem; }

/* ── Premium "float" elevation tokens ──────────────────────────────── */
.elev-1 { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }
.elev-2 { box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06); }
.elev-3 { box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 12px 30px rgba(15,23,42,.08); }
.elev-4 { box-shadow: 0 8px 22px rgba(15,23,42,.1),  0 24px 50px rgba(15,23,42,.1); }
[data-theme="dark"] .elev-1 { box-shadow: 0 1px 2px rgba(0,0,0,.4),  0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .elev-2 { box-shadow: 0 2px 6px rgba(0,0,0,.4),  0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .elev-3 { box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.45); }
[data-theme="dark"] .elev-4 { box-shadow: 0 8px 22px rgba(0,0,0,.5),  0 24px 50px rgba(0,0,0,.5); }

/* ── Mobile-only utility classes ───────────────────────────────────── */
@media (max-width: 640px) {
  .hide-on-mobile  { display: none !important; }
  .show-on-mobile  { display: revert !important; }
  .stack-on-mobile { display: flex !important; flex-direction: column !important; gap: .55rem; }
  .text-center-mobile { text-align: center; }
}
@media (min-width: 641px) {
  .show-on-mobile { display: none !important; }
  .hide-on-desktop { display: none !important; }
}

/* ── Premium "section header" component ───────────────────────────── */
.sec-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin: 0 0 .65rem;
  flex-wrap: wrap;
}
.sec-hdr__title { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.005em; }
.sec-hdr__sub   { font-size: .72rem; color: var(--text-muted); }
.sec-hdr__action { font-size: .75rem; font-weight: 700; color: var(--brand); text-decoration: none; }
.sec-hdr__action:hover { text-decoration: underline; }
@media (max-width: 480px) { .sec-hdr__title { font-size: .92rem; } }

/* ── Bottom-nav avoidance for fixed/sticky elements ────────────────── */
@media (max-width: 768px) {
  .fab, .floating-cta {
    bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + .9rem) !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM POLISH v3.1 — Sidebar search · Toasts · Page-hero · Auth · Empty
   ═════════════════════════════════════════════════════════════════════ */

/* ── Sidebar quick-search ───────────────────────────────────────────── */
.sidebar__search {
  position: relative; padding: .55rem .65rem 0;
  display: flex; align-items: center;
}
.sidebar__search-icon {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-25%);
  color: rgba(255,255,255,.45); pointer-events: none;
}
.sidebar__search-input {
  width: 100%; padding: .42rem .65rem .42rem 2rem; font-size: .8rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 9px;
  color: rgba(255,255,255,.92); transition: border-color .18s, background .18s;
}
.sidebar__search-input::placeholder { color: rgba(255,255,255,.4); }
.sidebar__search-input:focus { outline: none; background: rgba(255,255,255,.1); border-color: rgba(37,99,235,.55); }
.sidebar__search-clear {
  display: none; position: absolute; right: 1rem; top: 50%; transform: translateY(-25%);
  background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer;
  font-size: .85rem; padding: 0 .25rem; line-height: 1;
}
.sidebar__search-clear:hover { color: rgba(255,255,255,.9); }
.sidebar__search-empty {
  display: none; padding: 1.4rem .85rem; font-size: .78rem;
  color: rgba(255,255,255,.55); text-align: center;
}

/* ── Premium Toast notifications ────────────────────────────────────── */
#landToastRoot {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 1.4rem);
  z-index: 12000; display: flex; flex-direction: column-reverse; gap: .55rem;
  width: min(380px, 92vw); pointer-events: none;
}
@media (min-width: 769px) {
  #landToastRoot { bottom: 1.4rem; right: 1.4rem; left: auto; transform: none; }
}
.land-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem .9rem;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .82rem; opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .28s ease, transform .32s cubic-bezier(.34,1.5,.64,1);
}
[data-theme="dark"] .land-toast { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4); }
.land-toast.is-open { opacity: 1; transform: translateY(0) scale(1); }
.land-toast.is-closing { opacity: 0; transform: translateY(8px) scale(.97); }
.land-toast::before {
  content: ''; width: 4px; align-self: stretch; border-radius: 99px; flex-shrink: 0;
  background: var(--brand);
}
.land-toast--success::before { background: #059669; }
.land-toast--warn::before    { background: #d97706; }
.land-toast--error::before   { background: #dc2626; }
.land-toast--info::before    { background: #2563eb; }
.land-toast__icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1.2; }
.land-toast__body { flex: 1; min-width: 0; }
.land-toast__title { font-weight: 800; margin-bottom: .1rem; }
.land-toast__msg   { color: var(--text-muted); font-size: .76rem; line-height: 1.4; word-wrap: break-word; }
.land-toast__close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 1rem; line-height: 1; padding: 0 .15rem;
  flex-shrink: 0;
}
.land-toast__close:hover { color: var(--text); }
.land-toast__action {
  background: none; border: none; cursor: pointer; color: var(--brand);
  font-size: .76rem; font-weight: 700; padding: .15rem .45rem; margin-left: .35rem;
  border-radius: 6px; transition: background .15s;
}
.land-toast__action:hover { background: rgba(37,99,235,.1); }

/* ── Premium .page-hero — drop-in page header ──────────────────────── */
.page-hero {
  position: relative; overflow: hidden;
  margin: -1rem -1rem 1.2rem;
  padding: 1.4rem 1.4rem 1.2rem;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06) 50%, rgba(236,72,153,.04));
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08) 50%, rgba(236,72,153,.06));
}
.page-hero::before {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(124,58,237,.18), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.page-hero__row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; position: relative; z-index: 1; }
.page-hero__icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(37,99,235,.28);
}
.page-hero__body { flex: 1; min-width: 220px; }
.page-hero__title {
  font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 800;
  margin: 0 0 .15rem; letter-spacing: -.01em; color: var(--text);
}
.page-hero__sub { font-size: .82rem; color: var(--text-muted); }
.page-hero__actions {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-left: auto;
}
@media (max-width: 600px) {
  .page-hero { margin: -1rem -1rem 1rem; padding: 1.1rem 1.1rem 1rem; border-radius: 0; }
  .page-hero__icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 11px; }
  .page-hero__actions { width: 100%; margin-left: 0; }
  .page-hero__actions .btn { flex: 1; }
}

/* ── Premium .page-tabs — horizontal scrollable tab strip ──────────── */
.page-tabs {
  display: flex; gap: .35rem; overflow-x: auto;
  margin: -.4rem -1rem 1rem; padding: .35rem 1rem .55rem;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs__item {
  flex-shrink: 0; padding: .5rem .85rem; border-radius: 10px;
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; transition: all .18s ease;
  border: 1px solid transparent;
}
.page-tabs__item:hover { background: var(--bg-muted); color: var(--text); }
.page-tabs__item.is-active {
  background: var(--bg-card); color: var(--brand);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 1px 4px rgba(15,23,42,.05);
}
.page-tabs__item .badge {
  margin-left: .35rem; font-size: .65rem; padding: .08rem .35rem; border-radius: 99px;
  background: rgba(37,99,235,.12); color: var(--brand);
}

/* ── Premium .empty-state component ────────────────────────────────── */
.empty-state {
  text-align: center; padding: 2.5rem 1.25rem;
  background: var(--card-bg); border: 1px dashed var(--border); border-radius: 16px;
}
.empty-state__icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-muted), transparent);
  font-size: 1.8rem; color: var(--text-muted);
}
.empty-state__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 .35rem; color: var(--text); }
.empty-state__sub   { font-size: .82rem; color: var(--text-muted); max-width: 360px; margin: 0 auto 1rem; line-height: 1.5; }
.empty-state__action { margin-top: .5rem; }

/* ── Premium auth pages polish ─────────────────────────────────────── */
body.auth {
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.18), transparent 35%),
    radial-gradient(circle at 88% 90%, rgba(124,58,237,.18), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(236,72,153,.06), transparent 60%),
    var(--bg);
  min-height: 100dvh;
}
.auth-shell {
  min-height: calc(100dvh - 60px);
  display: grid; place-items: center;
  padding: 1.25rem;
}
.auth-card {
  width: min(420px, 100%);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 6px 18px rgba(15,23,42,.06);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.86);
  animation: auth-card-in .55s cubic-bezier(.34,1.5,.64,1);
}
[data-theme="dark"] .auth-card {
  background: rgba(15,23,42,.78);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.auth-card .card__body { padding: 1.6rem 1.4rem 1.4rem; }
.auth-brand {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 1rem;
  font-weight: 800; font-size: 1rem;
}
.auth-brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
.auth-card h1 {
  font-size: 1.5rem; font-weight: 800; margin: 0 0 .35rem;
  letter-spacing: -.015em;
  background: linear-gradient(135deg, var(--text), var(--brand));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem;
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.6);
}
[data-theme="dark"] .auth-topbar { background: rgba(15,23,42,.55); }
.auth-topbar__back {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: .35rem .55rem; border-radius: 8px;
  transition: background .15s, color .15s;
}
.auth-topbar__back:hover { background: var(--bg-muted); color: var(--text); }
@media (max-width: 480px) {
  .auth-card .card__body { padding: 1.3rem 1.1rem 1.1rem; }
  .auth-card h1 { font-size: 1.3rem; }
}

/* ── Premium primary button with subtle gradient ──────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #7c3aed) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.28);
  transition: transform .12s, box-shadow .2s, opacity .15s;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(37,99,235,.4);
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ── Mobile bottom-nav active indicator: animated underline pill ──── */
.bottom-nav__item::after {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%) scaleX(0);
  height: 3px; width: 22px; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), #7c3aed);
  transition: transform .35s cubic-bezier(.34,1.5,.64,1);
  pointer-events: none;
}
.bottom-nav__item.is-active::after { transform: translateX(-50%) scaleX(1); }

/* ── Premium loading spinner (drop-in .ld-spin) ───────────────────── */
.ld-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: ld-spin 0.7s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes ld-spin { to { transform: rotate(360deg); } }

/* ── Mobile fullscreen menu spacing for in-drawer search ──────────── */
@media (max-width: 768px) {
  .sidebar__search { padding-top: .35rem; }
  .sidebar__search-input { font-size: 16px; padding: .55rem .75rem .55rem 2.1rem; }
}

/* ═════════════════════════════════════════════════════════════════════
   REFERRAL ADMIN — DEEP-DETAIL ANALYTICS
   ═════════════════════════════════════════════════════════════════════ */

.re-deep-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1rem; overflow: hidden;
}
.re-deep-card__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.re-deep-card__title { font-size: .85rem; font-weight: 800; color: var(--text); }
.re-deep-card__sub   { font-size: .68rem; color: var(--text-muted); }
.re-deep-card__body  { padding: .85rem 1rem; }

/* Shared deep-table */
.re-deep-table {
  width: 100%; border-collapse: collapse; font-size: .76rem;
}
.re-deep-table th {
  padding: .5rem .85rem; font-size: .62rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); text-align: left;
  background: var(--bg-muted); white-space: nowrap;
}
.re-deep-table td {
  padding: .55rem .85rem; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.re-deep-table tr:last-child td { border-bottom: none; }
.re-deep-table tr:hover td { background: var(--bg-muted); }

/* Generic horizontal bar */
.re-bar-wrap {
  height: 8px; background: var(--bg-muted); border-radius: 99px;
  border: 1px solid var(--border); overflow: hidden;
}
.re-bar { height: 100%; border-radius: 99px; transition: width .8s ease-out; }

/* Stacked status bar */
.re-stack-bar {
  display: flex; height: 10px; border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border); width: 200px; max-width: 100%;
}
.re-stack-bar > span { height: 100%; transition: width .9s ease-out; }

/* Settings-snapshot body */
.re-cfg-body {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)) 2fr;
  gap: 1rem; padding: 1rem;
}
@media (max-width: 800px) { .re-cfg-body { grid-template-columns: 1fr; } }
.re-cfg-stat {
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 10px;
  padding: .65rem .85rem;
}
.re-cfg-stat__lbl { font-size: .65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.re-cfg-stat__val { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.re-cfg-stat__sub { font-size: .65rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.4; }
.re-cfg-levels {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}

/* 3-col deep row */
.re-deep-row3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem;
}
.re-deep-row3 > .re-deep-card { margin-bottom: 0; }
@media (max-width: 1100px) { .re-deep-row3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .re-deep-row3 { grid-template-columns: 1fr; } }

/* Hold-period rows */
.re-hold-row {
  display: grid; grid-template-columns: 90px 1fr 130px;
  align-items: center; gap: .55rem; margin-bottom: .55rem;
  font-size: .76rem;
}
.re-hold-row__lbl { font-weight: 700; color: var(--text); }
.re-hold-row__bar {
  height: 9px; background: var(--bg-muted); border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border);
}
.re-hold-row__bar > div { height: 100%; transition: width .8s ease-out; }
.re-hold-row__val { font-size: .7rem; color: var(--text-muted); text-align: right; font-family: ui-monospace,monospace; }

/* Pareto rows */
.re-pareto-row { margin-bottom: .65rem; }
.re-pareto-row__head { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: .25rem; }
.re-pareto-row__bar  { height: 10px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.re-pareto-row__bar > div { height: 100%; transition: width .9s ease-out; }
.re-pareto-row__sub  { font-size: .62rem; color: var(--text-muted); margin-top: .2rem; }

/* TTFE stats */
.re-ttfe-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 1rem; }
.re-ttfe-stat { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 9px; padding: .55rem .65rem; text-align: center; }
.re-ttfe-stat__lbl { font-size: .6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.re-ttfe-stat__val { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-top: .2rem; }
.re-ttfe-stat__val small { font-size: .65rem; color: var(--text-muted); font-weight: 600; }

/* DOW × hour heatmap */
.re-dow-table {
  border-collapse: separate; border-spacing: 2px; font-size: .6rem;
  width: max-content; min-width: 100%;
}
.re-dow-table th {
  background: transparent; color: var(--text-muted); font-weight: 700;
  text-align: center; font-size: .6rem; padding: .25rem .15rem; border: none;
}
.re-dow-table tbody th {
  text-align: right; padding-right: .55rem; min-width: 38px;
}
.re-dow-table td {
  width: 22px; height: 22px; text-align: center; padding: 0;
  border-radius: 4px; color: var(--text); font-weight: 700; font-size: .58rem;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
  border: 1px solid var(--border);
}
.re-dow-table td:hover { transform: scale(1.4); box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 5; position: relative; }

/* Velocity / flow charts */
.re-velo-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 110px;
  padding: .25rem 0;
  overflow-x: auto;
}
.re-velo-col {
  flex: 1; min-width: 14px; display: flex; flex-direction: column;
  align-items: center; gap: .15rem; height: 100%;
}
.re-velo-bar {
  width: 100%; max-width: 22px; min-height: 2px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  border-radius: 3px 3px 0 0;
  transition: height .6s cubic-bezier(.34,1.4,.64,1);
}
.re-velo-day { font-size: .55rem; color: var(--text-muted); }
.re-velo-foot {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .65rem;
  font-size: .72rem; color: var(--text-muted); justify-content: center;
}
.re-velo-foot strong { color: var(--text); }

/* Wallet flow chart (paired bars) */
.re-flow-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 110px;
  padding: .25rem 0; overflow-x: auto;
}
.re-flow-col { flex: 1; min-width: 22px; display: flex; flex-direction: column; align-items: center; gap: .15rem; height: 100%; }
.re-flow-pair {
  display: flex; gap: 1px; align-items: flex-end;
  width: 100%; max-width: 26px; height: 100%;
}
.re-flow-bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; transition: height .6s cubic-bezier(.34,1.4,.64,1); }
.re-flow-bar--in  { background: #2563eb; }
.re-flow-bar--out { background: #059669; }
.re-flow-day { font-size: .55rem; color: var(--text-muted); }

/* Mobile polish for deep tables */
@media (max-width: 640px) {
  .re-deep-table { font-size: .7rem; }
  .re-deep-table th, .re-deep-table td { padding: .42rem .55rem; }
  .re-deep-table th:nth-child(n+5), .re-deep-table td:nth-child(n+5) { display: none; }
  .re-cfg-body { padding: .7rem; }
  .re-dow-table td { width: 18px; height: 18px; font-size: .52rem; }
}

/* ── Premium Level Distribution cards ─────────────────────────────── */
.re-lvl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem; padding: 1rem;
}
.re-lvl-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: .85rem .95rem; transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s;
}
.re-lvl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.re-lvl-card__bg {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--lc); border-radius: 0 99px 99px 0;
  transition: width 1s cubic-bezier(.25,.46,.45,.94);
}
.re-lvl-card__hd {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem;
}
.re-lvl-card__pill {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--lc), var(--lc));
  background-color: var(--lc);
  color: #fff; font-weight: 800; font-size: .85rem;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--lc) 30%, transparent);
}
.re-lvl-card__name { flex: 1; min-width: 0; }
.re-lvl-card__name-main { font-size: .82rem; font-weight: 800; color: var(--text); }
.re-lvl-card__name-sub  { font-size: .65rem; color: var(--text-muted); margin-top: .1rem; }
.re-lvl-card__share {
  text-align: right; padding-left: .35rem;
  border-left: 1px solid var(--border);
}
.re-lvl-card__share-val { font-size: 1rem; font-weight: 800; color: var(--lc); }
.re-lvl-card__share-lbl { font-size: .55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.re-lvl-card__amt {
  font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: .35rem;
  display: flex; align-items: baseline; gap: .4rem;
}
.re-lvl-card__delta {
  font-size: .58rem; font-weight: 800; padding: .08rem .35rem; border-radius: 4px;
  letter-spacing: .02em;
}
.re-lvl-card__delta--up   { background: rgba(5,150,105,.12); color: #059669; }
.re-lvl-card__delta--down { background: rgba(220,38,38,.12); color: #dc2626; }
.re-lvl-card__spark {
  height: 36px; margin-bottom: .55rem; position: relative;
}
.re-lvl-mix {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border); margin-bottom: .55rem;
  background: var(--bg-muted);
}
.re-lvl-mix > span { height: 100%; transition: width .9s cubic-bezier(.25,.46,.45,.94); }
.re-lvl-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .65rem;
  margin-bottom: .5rem; padding: .4rem .55rem;
  background: var(--bg-muted); border-radius: 8px;
}
.re-lvl-stats > div { font-size: .68rem; }
.re-lvl-stat__lbl { color: var(--text-muted); font-weight: 600; font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; }
.re-lvl-stat__val { color: var(--text); font-weight: 800; font-size: .8rem; margin-top: .05rem; font-family: ui-monospace, monospace; }
.re-lvl-counts {
  display: flex; gap: .65rem; font-size: .72rem; font-weight: 800;
  padding: .35rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: .45rem;
}
.re-lvl-counts > span {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: ui-monospace, monospace;
}
.re-lvl-counts > span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
.re-lvl-card__foot {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  font-size: .62rem; color: var(--text-muted); margin-bottom: .35rem;
  font-family: ui-monospace, monospace;
}
.re-lvl-card__foot strong { color: var(--lc); font-weight: 800; }
.re-lvl-card__filter {
  display: block; text-align: center; padding: .35rem;
  background: var(--bg-muted); border-radius: 7px;
  font-size: .68rem; font-weight: 700; color: var(--lc);
  text-decoration: none; transition: background .15s;
}
.re-lvl-card__filter:hover { background: color-mix(in srgb, var(--lc) 12%, var(--bg-muted)); }

@media (max-width: 480px) {
  .re-lvl-grid { grid-template-columns: 1fr; padding: .65rem; gap: .65rem; }
  .re-lvl-card__amt { font-size: 1.05rem; }
}

/* ── Velocity / Flow chart KPI heads ──────────────────────────────── */
.re-velo-kpis {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.re-velo-kpi {
  text-align: right; padding-left: .85rem; border-left: 1px solid var(--border);
}
.re-velo-kpi:first-child { border-left: none; padding-left: 0; }
.re-velo-kpi__val { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.re-velo-kpi__lbl { font-size: .6rem; color: var(--text-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 600px) {
  .re-velo-kpi { padding-left: .55rem; }
  .re-velo-kpi__val { font-size: .9rem; }
}

.re-velo-chart-wrap { position: relative; height: 200px; }
.re-velo-legend {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  font-size: .68rem; color: var(--text-muted); margin-top: .65rem;
  padding-top: .5rem; border-top: 1px solid var(--border);
}
.re-velo-legend-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: .35rem; vertical-align: middle;
}

/* ── Flow extras row (peak in/out, apply rate) ───────────────────── */
.re-flow-extras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .65rem; margin-top: .85rem;
  padding-top: .65rem; border-top: 1px solid var(--border);
}
.re-flow-extra {
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 9px;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .15rem;
}
.re-flow-extra__lbl { font-size: .6rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.re-flow-extra__val { font-size: 1rem; font-weight: 800; color: var(--text); font-family: ui-monospace, monospace; }
.re-flow-extra__sub { font-size: .62rem; color: var(--text-muted); }

/* ═════════════════════════════════════════════════════════════════════
   DAILY CONSENT POP-UP — mandatory, non-dismissible, premium
   ═════════════════════════════════════════════════════════════════════ */

html.consent-pop-open, body.consent-pop-open {
  overflow: hidden !important;
  height: 100% !important;
}

.consent-pop {
  position: fixed; inset: 0;
  z-index: 13000;                /* above bottom-nav (12000), toasts also live below */
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: consent-fade-in .28s ease-out both;
}
@keyframes consent-fade-in { from { opacity: 0; } to { opacity: 1; } }
.consent-pop.is-closing { animation: consent-fade-out .26s ease-in forwards; }
@keyframes consent-fade-out { from { opacity: 1; } to { opacity: 0; transform: scale(.98); } }

.consent-pop__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.25), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(124,58,237,.25), transparent 55%),
              rgba(15,23,42,.74);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="dark"] .consent-pop__backdrop {
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.32), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(124,58,237,.32), transparent 55%),
              rgba(2,6,23,.85);
}

.consent-pop__sheet {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100dvh - 2rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 12px 28px rgba(15,23,42,.18);
  animation: consent-pop-in .42s cubic-bezier(.34, 1.56, .64, 1) both;
  padding-bottom: env(safe-area-inset-bottom, 0);
  -webkit-overflow-scrolling: touch;
}
@keyframes consent-pop-in {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .consent-pop__sheet {
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.35);
}

.consent-pop__handle {
  display: none;                 /* shows on mobile only */
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 99px; background: var(--border);
}

/* ── Header ─────────────────────────────────────────────────────────── */
.consent-pop__hd {
  display: flex; gap: 1rem; padding: 1.6rem 1.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
}
[data-theme="dark"] .consent-pop__hd {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
}
.consent-pop__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.32);
}
.consent-pop__hd-text { flex: 1; min-width: 0; }
.consent-pop__eyebrow {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: .25rem;
}
.consent-pop__title {
  font-size: clamp(1.1rem, 3.5vw, 1.4rem); font-weight: 800;
  margin: 0; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text);
}
.consent-pop__sub {
  font-size: .8rem; color: var(--text-muted); margin-top: .25rem;
}

/* ── Greeting strip ─────────────────────────────────────────────────── */
.consent-pop__greet {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .7rem 1.6rem; font-size: .76rem;
  background: var(--bg-muted); border-bottom: 1px solid var(--border);
}
.consent-pop__greet-hi   { color: var(--text); }
.consent-pop__greet-hi strong { color: var(--brand); }
.consent-pop__greet-meta { color: var(--text-muted); margin-left: auto; font-size: .7rem; }

/* ── Body / terms ───────────────────────────────────────────────────── */
.consent-pop__body {
  padding: 1.1rem 1.6rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-line;
}

/* ── Audit-context strip ────────────────────────────────────────────── */
.consent-pop__audit {
  margin: 0 1.6rem 1rem;
  padding: .65rem .8rem;
  background: var(--bg-muted); border: 1px dashed var(--border); border-radius: 10px;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .7rem;
}
.consent-pop__audit-row {
  display: flex; align-items: center; gap: .5rem;
}
.consent-pop__audit-lbl {
  flex-shrink: 0;
  font-size: .58rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  width: 110px;
}
.consent-pop__audit code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, monospace; font-size: .68rem;
  color: var(--text); word-break: break-all;
}

/* ── Confirm checkbox ───────────────────────────────────────────────── */
.consent-pop__check {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 1.6rem;
  font-size: .82rem; line-height: 1.45; color: var(--text);
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background .15s;
}
.consent-pop__check:hover { background: var(--bg-muted); }
.consent-pop__check input {
  width: 18px; height: 18px; flex-shrink: 0;
  margin-top: 2px; accent-color: var(--brand);
  cursor: pointer;
}

/* ── Action buttons ─────────────────────────────────────────────────── */
.consent-pop__actions {
  display: flex; gap: .6rem;
  padding: 1rem 1.6rem 1.4rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
}
.consent-pop__btn {
  flex: 1; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: 12px;
  font-size: .9rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s cubic-bezier(.34, 1.5, .64, 1),
              box-shadow .2s, opacity .15s, background .15s;
  text-decoration: none;
}
.consent-pop__btn:active:not(:disabled) { transform: scale(.97); }
.consent-pop__btn--primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.32);
}
.consent-pop__btn--primary:not(:disabled):hover {
  box-shadow: 0 8px 22px rgba(37,99,235,.45);
}
.consent-pop__btn--primary:disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none;
  background: var(--bg-muted); color: var(--text-muted);
}
.consent-pop__btn--primary.is-loading {
  cursor: wait; opacity: .85;
}
.consent-pop__btn--ghost {
  background: var(--bg-muted); color: var(--text); border-color: var(--border);
  flex: 0 0 auto; padding: .7rem 1.2rem;
}
.consent-pop__btn--ghost:hover { background: var(--bg); border-color: var(--brand); color: var(--brand); }
.consent-pop__btn-icon { font-size: 1.05rem; }

/* ── Mobile: bottom-sheet treatment ─────────────────────────────────── */
@media (max-width: 600px) {
  .consent-pop {
    align-items: flex-end;
    padding: 0;
  }
  .consent-pop__sheet {
    width: 100%; max-width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 92dvh;
    animation: consent-pop-up .4s cubic-bezier(.34, 1.4, .64, 1) both;
  }
  @keyframes consent-pop-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .consent-pop__handle { display: block; }
  .consent-pop__hd     { padding: 1.6rem 1.1rem .9rem; gap: .8rem; }
  .consent-pop__icon   { width: 44px; height: 44px; border-radius: 12px; }
  .consent-pop__greet  { padding: .65rem 1.1rem; font-size: .72rem; }
  .consent-pop__greet-meta { width: 100%; margin-left: 0; }
  .consent-pop__body   { padding: 1rem 1.1rem; font-size: .82rem; }
  .consent-pop__audit  { margin: 0 1.1rem 1rem; }
  .consent-pop__audit-lbl { width: 90px; }
  .consent-pop__check  { padding: .8rem 1.1rem; font-size: .8rem; }
  .consent-pop__actions { padding: .85rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  .consent-pop__btn--ghost { flex: 1; }
}

/* Reduced-motion users get crossfade only */
@media (prefers-reduced-motion: reduce) {
  .consent-pop, .consent-pop__sheet { animation: consent-fade-in .15s ease-out both; }
  .consent-pop__btn:active { transform: none; }
}

/* ── PREMIUM v2 EXTRAS ────────────────────────────────────────────── */

/* Read-progress bar at top of sheet */
.consent-pop__progress {
  position: sticky; top: 0; left: 0; right: 0;
  height: 3px; background: var(--bg-muted);
  z-index: 4;
}
.consent-pop__progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  transition: width .15s linear;
  box-shadow: 0 0 8px rgba(124,58,237,.5);
}

/* Premium gradient ribbon */
.consent-pop__ribbon {
  position: absolute; top: 14px; right: -38px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; padding: .25rem 2.6rem;
  transform: rotate(38deg);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  z-index: 3;
  pointer-events: none;
}

/* Animated pulse-ring around the hero icon */
.consent-pop__icon-wrap {
  position: relative; width: 52px; height: 52px; flex-shrink: 0;
}
.consent-pop__icon-wrap .consent-pop__icon {
  position: relative; z-index: 2;
  width: 52px; height: 52px;
}
.consent-pop__icon-pulse {
  position: absolute; inset: 0; border-radius: 14px;
  border: 2px solid #7c3aed;
  opacity: 0;
  animation: consent-pulse 2s ease-out infinite;
  pointer-events: none;
}
.consent-pop__icon-pulse--2 { animation-delay: 1s; }
@keyframes consent-pulse {
  0%   { transform: scale(.9); opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Eyebrow upgrades — live dot + read time */
.consent-pop__eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
.consent-pop__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444;
  animation: consent-blink 1.4s ease-in-out infinite;
}
@keyframes consent-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.consent-pop__eyebrow-meta {
  font-weight: 600; color: var(--text-muted); margin-left: .25rem;
  text-transform: none; letter-spacing: 0; font-size: .62rem;
}

/* Body intro line */
.consent-pop__body { padding: 0 1.6rem 1.1rem; }
.consent-pop__intro {
  font-size: .85rem; line-height: 1.55; color: var(--text-muted);
  padding: 1rem 0 .6rem;
}
.consent-pop__intro em {
  color: var(--brand); font-style: normal; font-weight: 700;
}

/* Clause cards (6 structured items with icons) */
.consent-pop__clauses {
  display: flex; flex-direction: column; gap: .55rem;
  margin: .35rem 0 .6rem;
}
.consent-pop__clause {
  position: relative;
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem .85rem .75rem .9rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  opacity: 0; transform: translateY(8px);
  transition: background .15s, border-color .15s, transform .12s;
}
.consent-pop__clause.is-in {
  animation: consent-clause-in .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes consent-clause-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.consent-pop__clause:hover {
  background: var(--bg-card);
  border-color: rgba(37,99,235,.3);
}
.consent-pop__clause-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
[data-theme="dark"] .consent-pop__clause-icon {
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.consent-pop__clause-body { flex: 1; min-width: 0; }
.consent-pop__clause-title {
  font-size: .85rem; font-weight: 800; color: var(--text);
  margin-bottom: .12rem; line-height: 1.3;
}
.consent-pop__clause-text {
  font-size: .78rem; color: var(--text-muted); line-height: 1.5;
}
.consent-pop__clause-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: .65rem; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border-radius: 50%;
  margin-top: 4px;
}

/* Audit panel (upgraded grid) */
.consent-pop__audit {
  margin: 1rem 0 .6rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(124,58,237,.03));
  border: 1px dashed rgba(37,99,235,.25);
  border-radius: 12px;
}
[data-theme="dark"] .consent-pop__audit {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
  border-color: rgba(37,99,235,.35);
}
.consent-pop__audit-title {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand); margin-bottom: .55rem;
}
.consent-pop__audit-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .85rem;
}
.consent-pop__audit-grid > div {
  display: flex; flex-direction: column; gap: .12rem; min-width: 0;
}
.consent-pop__audit-grid .consent-pop__audit-lbl {
  font-size: .58rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  width: auto;
}
.consent-pop__audit-grid code {
  font-family: ui-monospace, monospace; font-size: .68rem;
  color: var(--text); word-break: break-word;
}
@media (max-width: 480px) {
  .consent-pop__audit-grid { grid-template-columns: 1fr; }
}

/* Consent history expander */
.consent-pop__hist {
  margin: 0 0 .6rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
}
.consent-pop__hist > summary {
  list-style: none;
  cursor: pointer;
  padding: .7rem .9rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; font-weight: 700; color: var(--text);
  transition: background .15s;
}
.consent-pop__hist > summary::-webkit-details-marker { display: none; }
.consent-pop__hist > summary::after {
  content: '⌄';
  font-size: 1rem; color: var(--text-muted);
  transition: transform .25s;
}
.consent-pop__hist[open] > summary::after { transform: rotate(180deg); }
.consent-pop__hist > summary:hover { background: var(--bg-card); }
.consent-pop__hist-count {
  font-size: .6rem; font-weight: 800; padding: .15rem .45rem;
  background: rgba(37,99,235,.1); color: var(--brand);
  border-radius: 99px;
}
.consent-pop__hist-list {
  border-top: 1px solid var(--border);
}
.consent-pop__hist-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .9rem;
  border-top: 1px solid var(--border);
  font-size: .72rem;
}
.consent-pop__hist-row:first-child { border-top: none; }
.consent-pop__hist-when { color: var(--text); font-weight: 600; }
.consent-pop__hist-meta {
  display: flex; gap: .35rem; align-items: center;
  color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .66rem;
}

/* Scroll-end sentinel */
.consent-pop__scroll-end {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: .8rem 0 0;
  padding: .55rem .85rem;
  border: 1px dashed transparent;
  border-radius: 10px;
  font-size: .72rem; color: var(--text-muted);
  opacity: .55;
  transition: all .35s;
}
.consent-pop__scroll-end.is-visible {
  opacity: 1;
  border-color: rgba(5,150,105,.35);
  background: rgba(5,150,105,.06);
  color: #059669;
  font-weight: 700;
}
.consent-pop__scroll-end-icon {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #059669; color: #fff;
  font-size: .65rem; font-weight: 900;
  transform: scale(0);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.consent-pop__scroll-end.is-visible .consent-pop__scroll-end-icon {
  transform: scale(1);
}

/* Upgraded checkbox row */
.consent-pop__check {
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.6rem;
  border-top: 1px solid var(--border);
  font-size: .82rem; line-height: 1.45; color: var(--text);
  cursor: not-allowed;
  background: var(--bg-card);
  transition: background .18s;
}
.consent-pop__check:has(input:not([disabled])) { cursor: pointer; }
.consent-pop__check:has(input:checked) {
  background: linear-gradient(90deg, rgba(5,150,105,.06), transparent);
}
.consent-pop__check input { width: 19px; height: 19px; flex-shrink: 0; }
.consent-pop__check input:disabled { opacity: .35; cursor: not-allowed; }
.consent-pop__check-body { flex: 1; min-width: 0; }
.consent-pop__check-body strong { display: block; color: var(--text); }
.consent-pop__check-hint {
  display: block; font-size: .68rem; color: var(--text-muted); margin-top: .15rem;
}

/* Button spinner state */
.consent-pop__btn-spinner {
  display: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: ld-spin .65s linear infinite;
}
.consent-pop__btn--primary.is-loading .consent-pop__btn-spinner { display: inline-block; }
.consent-pop__btn--primary.is-loading .consent-pop__btn-icon,
.consent-pop__btn--primary.is-loading .consent-pop__btn-label { opacity: .7; }

/* Sheet fade-out for the success transition */
.consent-pop__sheet.is-fading { transition: opacity .35s, transform .35s; opacity: 0; transform: scale(.96); }

/* Success overlay (post-agree) */
.consent-pop__success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem;
  background: var(--bg-card);
  border-radius: 22px;
  opacity: 0; pointer-events: none;
  transform: scale(.94);
  transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 5;
}
.consent-pop__success.is-visible { opacity: 1; transform: scale(1); }
.consent-pop__success-svg {
  width: 84px; height: 84px;
  display: block;
}
.consent-pop__success-svg circle {
  fill: none; stroke: #059669; stroke-width: 3;
  stroke-dasharray: 152; stroke-dashoffset: 152;
  animation: consent-success-circle .55s ease-out forwards;
}
.consent-pop__success-svg path {
  fill: none; stroke: #059669; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 50; stroke-dashoffset: 50;
  animation: consent-success-tick .35s .35s ease-out forwards;
}
@keyframes consent-success-circle { to { stroke-dashoffset: 0; } }
@keyframes consent-success-tick   { to { stroke-dashoffset: 0; } }
.consent-pop__success-title {
  font-size: 1.2rem; font-weight: 800; color: #059669;
}
.consent-pop__success-sub {
  font-size: .8rem; color: var(--text-muted); padding: 0 1.5rem; text-align: center;
}

/* Mobile tweaks for new elements */
@media (max-width: 600px) {
  .consent-pop__ribbon { right: -36px; padding: .22rem 2.4rem; font-size: .54rem; }
  .consent-pop__body { padding: 0 1.1rem 1rem; }
  .consent-pop__intro { padding: .85rem 0 .5rem; font-size: .82rem; }
  .consent-pop__clause { padding: .65rem .7rem; gap: .6rem; }
  .consent-pop__clause-icon { width: 30px; height: 30px; font-size: .9rem; }
  .consent-pop__clause-num { width: 20px; height: 20px; font-size: .58rem; }
  .consent-pop__audit { padding: .7rem .8rem; }
  .consent-pop__check { padding: .8rem 1.1rem; gap: .65rem; }
}

/* Reduced-motion fallbacks */
@media (prefers-reduced-motion: reduce) {
  .consent-pop__icon-pulse,
  .consent-pop__eyebrow-dot,
  .consent-pop__clause,
  .consent-pop__success-svg circle,
  .consent-pop__success-svg path { animation: none !important; }
  .consent-pop__clause { opacity: 1; transform: none; }
  .consent-pop__success-svg circle { stroke-dashoffset: 0; }
  .consent-pop__success-svg path   { stroke-dashoffset: 0; }
}

/* ── Sectioned terms (10 categories × 51 numbered clauses) ────────── */
.consent-pop__sections {
  display: flex; flex-direction: column; gap: .65rem;
  margin-top: .35rem;
}
.consent-pop__section {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  opacity: 0; transform: translateY(8px);
  --tone: var(--brand);
}
.consent-pop__section.is-in {
  animation: consent-clause-in .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
.consent-pop__section--brand   { --tone: #2563eb; }
.consent-pop__section--info    { --tone: #0891b2; }
.consent-pop__section--success { --tone: #059669; }
.consent-pop__section--warn    { --tone: #d97706; }
.consent-pop__section--danger  { --tone: #dc2626; }

.consent-pop__section::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--tone);
}
.consent-pop__section-hd {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tone) 8%, transparent),
    transparent 70%);
  font-weight: 800;
}
.consent-pop__section-icon {
  font-size: 1.05rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.consent-pop__section-title {
  flex: 1; min-width: 0;
  font-size: .82rem; color: var(--text);
  letter-spacing: -.005em;
}
.consent-pop__section-count {
  font-size: .6rem; font-weight: 800;
  padding: .14rem .5rem;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  border-radius: 99px;
  font-family: ui-monospace, monospace;
}
.consent-pop__section-list {
  list-style: none; margin: 0; padding: .25rem 0;
}
.consent-pop__clause-item {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .5rem .9rem .5rem 1.1rem;
  font-size: .78rem; line-height: 1.5; color: var(--text);
  border-top: 1px solid transparent;
  transition: background .15s;
}
.consent-pop__clause-item:hover {
  background: color-mix(in srgb, var(--tone) 5%, transparent);
}
.consent-pop__clause-item + .consent-pop__clause-item {
  border-top-color: var(--border);
}
.consent-pop__clause-no {
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: .65rem; font-weight: 800;
  padding: .15rem .4rem;
  background: var(--bg-muted);
  color: var(--tone);
  border: 1px solid var(--border);
  border-radius: 5px;
  min-width: 36px; text-align: center;
  align-self: flex-start;
  margin-top: 1px;
}
.consent-pop__clause-item .consent-pop__clause-text {
  flex: 1; color: var(--text);
  font-size: .78rem; line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .consent-pop__section-hd { padding: .55rem .75rem; }
  .consent-pop__section-icon { width: 26px; height: 26px; font-size: .95rem; }
  .consent-pop__section-title { font-size: .78rem; }
  .consent-pop__clause-item {
    padding: .5rem .75rem .5rem .85rem;
    font-size: .76rem;
    gap: .5rem;
  }
  .consent-pop__clause-no { font-size: .6rem; min-width: 32px; padding: .12rem .35rem; }
}

/* ── SMART ENHANCEMENTS ─────────────────────────────────────────────── */

/* Key-number tiles */
.consent-pop__keys {
  margin: 0 1.6rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(124,58,237,.04));
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
}
[data-theme="dark"] .consent-pop__keys {
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.08));
}
.consent-pop__keys-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .76rem; font-weight: 800; color: var(--text);
  flex-wrap: wrap; gap: .35rem;
}
.consent-pop__keys-hint { font-size: .6rem; color: var(--text-muted); font-weight: 600; }
.consent-pop__keys-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 600px) { .consent-pop__keys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .consent-pop__keys-grid { grid-template-columns: 1fr; } }
.consent-pop__key {
  --tone: var(--brand);
  position: relative; text-align: left;
  padding: .65rem .8rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-top:   1px solid var(--border);
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.consent-pop__key:nth-child(-n+3) { border-top: none; }
.consent-pop__key:nth-child(3n)   { border-right: none; }
@media (max-width: 600px) {
  .consent-pop__key:nth-child(-n+3) { border-top: 1px solid var(--border); }
  .consent-pop__key:nth-child(-n+2) { border-top: none; }
  .consent-pop__key:nth-child(3n)   { border-right: 1px solid var(--border); }
  .consent-pop__key:nth-child(2n)   { border-right: none; }
}
@media (max-width: 380px) {
  .consent-pop__key { border-right: none !important; }
  .consent-pop__key:not(:first-child) { border-top: 1px solid var(--border); }
}
.consent-pop__key:hover {
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}
.consent-pop__key:active { transform: scale(.97); }
.consent-pop__key--brand   { --tone: #2563eb; }
.consent-pop__key--info    { --tone: #0891b2; }
.consent-pop__key--success { --tone: #059669; }
.consent-pop__key--warn    { --tone: #d97706; }
.consent-pop__key--danger  { --tone: #dc2626; }
.consent-pop__key-val {
  font-size: 1.05rem; font-weight: 800; color: var(--tone);
  font-family: ui-monospace, monospace;
  letter-spacing: -.01em;
}
.consent-pop__key-lbl { font-size: .68rem; font-weight: 700; color: var(--text); margin-top: .12rem; }
.consent-pop__key-sub {
  font-size: .58rem; color: var(--text-muted); margin-top: .15rem;
  display: flex; gap: .25rem; flex-wrap: wrap; align-items: center;
}
.consent-pop__key-sub code {
  font-family: ui-monospace, monospace; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, transparent);
  padding: 0 .25rem; border-radius: 3px; font-size: .55rem; font-weight: 700;
}

/* Sticky TOC chip-strip */
.consent-pop__toc {
  position: sticky; top: 3px;          /* below the 3px progress bar */
  z-index: 3;
  margin: 0 1.6rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.consent-pop__toc-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--border);
}
.consent-pop__toc-title {
  font-size: .62rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.consent-pop__toc-progress {
  font-size: .68rem; font-weight: 700; color: var(--text);
  font-family: ui-monospace, monospace;
  padding: .12rem .5rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 99px;
}
.consent-pop__toc-progress.is-complete {
  background: rgba(5,150,105,.12);
  border-color: rgba(5,150,105,.3);
  color: #059669;
}
.consent-pop__toc-strip {
  display: flex; gap: .35rem; padding: .45rem .55rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.consent-pop__toc-strip::-webkit-scrollbar { display: none; }
.consent-pop__toc-chip {
  --tone: var(--brand);
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .55rem;
  background: var(--bg-muted);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .68rem; font-weight: 700; color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.consent-pop__toc-chip:hover { background: var(--bg-card); border-color: var(--tone); color: var(--tone); }
.consent-pop__toc-chip:active { transform: scale(.97); }
.consent-pop__toc-chip--brand   { --tone: #2563eb; }
.consent-pop__toc-chip--info    { --tone: #0891b2; }
.consent-pop__toc-chip--success { --tone: #059669; }
.consent-pop__toc-chip--warn    { --tone: #d97706; }
.consent-pop__toc-chip--danger  { --tone: #dc2626; }
.consent-pop__toc-chip-icon { font-size: .85rem; }
.consent-pop__toc-chip-name { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.consent-pop__toc-chip-cnt {
  font-size: .55rem; font-weight: 800;
  padding: .05rem .3rem;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone); border-radius: 99px;
  font-family: ui-monospace, monospace;
}
.consent-pop__toc-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
  transition: background .25s, box-shadow .25s;
}
.consent-pop__toc-chip.is-read .consent-pop__toc-chip-dot {
  background: #059669;
  box-shadow: 0 0 0 2px rgba(5,150,105,.18);
}
.consent-pop__toc-chip.is-read {
  border-color: rgba(5,150,105,.35);
  background: rgba(5,150,105,.04);
}

/* Smart filter input */
.consent-pop__filter {
  position: relative;
  margin: 0 1.6rem 1rem;
  display: flex; align-items: center; gap: .35rem;
}
.consent-pop__filter-icon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--text-muted); pointer-events: none;
}
.consent-pop__filter-input {
  width: 100%; padding: .55rem .75rem .55rem 2.1rem;
  font-size: .82rem; line-height: 1.4;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); transition: border-color .18s, background .18s;
}
.consent-pop__filter-input::placeholder { color: var(--text-muted); }
.consent-pop__filter-input:focus { outline: none; border-color: var(--brand); background: var(--bg-card); }
.consent-pop__filter-clear {
  display: none;
  position: absolute; right: 6.5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--text-muted);
  padding: .25rem .4rem; border-radius: 5px;
}
.consent-pop__filter-clear:hover { background: var(--bg); color: var(--text); }
.consent-pop__filter-count {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .65rem; color: var(--text-muted);
  font-family: ui-monospace, monospace;
  pointer-events: none;
}

/* Highlighted tokens inside clause text */
.consent-pop__hl {
  background: linear-gradient(180deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.32) 100%);
  color: inherit;
  padding: 0 .15rem; border-radius: 3px;
  font-weight: 700;
}
[data-theme="dark"] .consent-pop__hl {
  background: linear-gradient(180deg, rgba(245,158,11,.25) 0%, rgba(245,158,11,.4) 100%);
}

/* Critical clause flag */
.consent-pop__clause-item--critical {
  background: linear-gradient(90deg, rgba(220,38,38,.04), transparent 70%);
}
.consent-pop__clause-flag {
  display: inline-block;
  margin-left: .35rem;
  font-size: .7rem;
  color: #dc2626;
  vertical-align: middle;
}

/* Section critical badge */
.consent-pop__section-critical {
  font-size: .58rem; font-weight: 800;
  padding: .12rem .42rem;
  background: rgba(220,38,38,.12);
  color: #dc2626;
  border-radius: 99px;
  font-family: ui-monospace, monospace;
  margin-left: .3rem;
}

/* Section read indicator (check next to title) */
.consent-pop__section-read {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  display: grid; place-items: center;
  color: transparent;
  flex-shrink: 0;
  transition: background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
  margin-left: .25rem;
}
.consent-pop__section.is-read .consent-pop__section-read {
  background: #059669; border-color: #059669; color: #fff;
  transform: scale(1.05);
}
.consent-pop__section.is-read .consent-pop__section-hd {
  /* subtle "read" tint */
  background: linear-gradient(90deg,
    color-mix(in srgb, #059669 7%, transparent),
    transparent 70%);
}

/* Clause flash on jump */
@keyframes consent-clause-flash {
  0%   { background: rgba(245,158,11,.25); box-shadow: inset 4px 0 0 #d97706; }
  100% { background: transparent; box-shadow: inset 4px 0 0 transparent; }
}
.consent-pop__clause-item.is-flash {
  animation: consent-clause-flash 1.6s ease-out;
}

/* Empty state for no-search-match */
.consent-pop__empty {
  text-align: center; padding: 1.4rem 1rem;
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--bg-muted);
}
.consent-pop__empty-icon { font-size: 2rem; margin-bottom: .35rem; }
.consent-pop__empty-title { font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: .15rem; }
.consent-pop__empty-sub   { font-size: .72rem; color: var(--text-muted); }

/* Mobile tweaks */
@media (max-width: 600px) {
  .consent-pop__keys, .consent-pop__toc, .consent-pop__filter {
    margin-left: 1.1rem; margin-right: 1.1rem;
  }
  .consent-pop__keys-hd { padding: .55rem .8rem; font-size: .72rem; }
  .consent-pop__key { padding: .55rem .65rem; }
  .consent-pop__key-val { font-size: .95rem; }
  .consent-pop__toc-hd { padding: .4rem .65rem; }
  .consent-pop__filter-input { font-size: 16px; }       /* no iOS zoom */
  .consent-pop__filter-clear { right: 5.5rem; }
}

/* ── White-background override for the consent popup ─────────────────
   Gives the entire sheet a clean, paper-white surface in light mode
   while keeping dark-mode treatments intact. Tinted gradients on the
   header, key-numbers strip, audit card and check-row are flattened. */
[data-theme="light"] .consent-pop__sheet,
.consent-pop__sheet {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__hd,
.consent-pop__hd:not([data-theme="dark"] *) {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__keys,
.consent-pop__keys:not([data-theme="dark"] *) {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__audit,
.consent-pop__audit:not([data-theme="dark"] *) {
  background: #fafbfc;
}
[data-theme="light"] .consent-pop__check:has(input:checked) {
  background: #f7fbf9;
}
[data-theme="light"] .consent-pop__greet,
.consent-pop__greet:not([data-theme="dark"] *) {
  background: #fafbfc;
}
[data-theme="light"] .consent-pop__actions,
.consent-pop__actions:not([data-theme="dark"] *) {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__toc {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__section,
[data-theme="light"] .consent-pop__check {
  background: #ffffff;
}
[data-theme="light"] .consent-pop__section-hd {
  background: #fafbfc;
}
/* Section headers: keep the colored stripe, drop the gradient tint */
[data-theme="light"] .consent-pop__section.is-read .consent-pop__section-hd {
  background: #f4faf7;
}
[data-theme="light"] .consent-pop__success {
  background: #ffffff;
}

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM TOPBAR  v4 — mobile-native auto-hide, page title takeover,
   overflow popover, scroll-progress line
   ═════════════════════════════════════════════════════════════════════ */

/* Auto-hide on scroll-down (mobile only — desktop ignores) */
.topbar {
  position: sticky; top: 0;
  z-index: 100;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease,
              background-color .25s ease;
  will-change: transform;
}
.topbar.topbar--hidden {
  transform: translateY(-101%);
}

/* Stronger glass + shadow once the user has scrolled */
.topbar.is-scrolled {
  box-shadow: 0 4px 18px rgba(15,23,42,.08), 0 1px 0 rgba(15,23,42,.04);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
[data-theme="dark"] .topbar.is-scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}

/* Mobile-only centered page title */
.topbar__page-title {
  display: none;
  flex: 1; min-width: 0;
  text-align: center;
  padding: 0 .5rem;
  font-weight: 800; font-size: .92rem;
  letter-spacing: -.005em;
  color: var(--text);
  pointer-events: none;
}
.topbar__page-title-text {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .topbar__page-title { display: block; }
  /* When mobile page title is shown, breadcrumbs become decorative tail */
  .breadcrumbs { display: none !important; }
}

/* Bottom scroll-progress gradient line */
.topbar__scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: transparent;
  pointer-events: none;
  overflow: hidden;
}
.topbar__scroll-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  transition: width .15s linear;
  box-shadow: 0 0 8px rgba(124,58,237,.4);
}
.topbar.is-scrolled .topbar__scroll-progress-fill {
  /* slightly more saturated when actively scrolled */
  filter: saturate(1.15);
}

/* "More" overflow button — mobile-only */
.topbar__more-btn { display: none; }
@media (max-width: 768px) {
  .topbar__more-btn { display: inline-grid; }
  /* Hide the now-overflowed items from the topbar (they're in the popover) */
  .topbar__overflow-item { display: none !important; }
}

/* Overflow popover (rendered on body for clean stacking) */
.topbar__more-popover {
  position: absolute;
  z-index: 11000;
  min-width: 200px; max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: .35rem;
  opacity: 0; transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.4,.64,1);
}
[data-theme="dark"] .topbar__more-popover {
  box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
}
.topbar__more-popover.is-open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.topbar__more-item {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; padding: .55rem .75rem;
  background: none; border: none; cursor: pointer;
  border-radius: 9px;
  font-size: .82rem; color: var(--text);
  text-align: left;
  transition: background .15s, color .15s;
}
.topbar__more-item:hover, .topbar__more-item:focus-visible {
  background: var(--bg-muted);
  color: var(--brand);
  outline: none;
}
.topbar__more-item:active { transform: scale(.98); }
.topbar__more-item svg { flex-shrink: 0; opacity: .85; }
.topbar__more-item-label { flex: 1; min-width: 0; }
@media (min-width: 769px) {
  .topbar__more-popover { display: none !important; }
}

/* Compact user button on tight viewports — drop name + chevron */
@media (max-width: 480px) {
  .topbar__user-btn {
    padding: .25rem !important;
    border-radius: 50% !important;
  }
  .topbar__user-name,
  .topbar__user-chevron { display: none !important; }
  .topbar__user-avatar {
    width: 32px; height: 32px;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand);
  }
}

/* Notification pulse refinement */
.topbar__notif-pulse {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: topbar-notif-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes topbar-notif-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  60%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Hide command-palette label/kbd more aggressively on small */
@media (max-width: 640px) {
  .cpal-trigger {
    width: 38px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
  }
  .cpal-trigger__label, .cpal-trigger__kbd { display: none !important; }
}

/* When sidebar drawer is open, force topbar visible (don't auto-hide) */
.app[data-menu="open"] .topbar { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
  .topbar.topbar--hidden { transform: none; }
  .topbar__notif-pulse { animation: none; }
  .topbar__more-popover { transition: opacity .1s ease; }
}

/* ═════════════════════════════════════════════════════════════════════
   APPLICATION-WIDE PREMIUM POLISH  v5
   error pages · global form-control · focus ring · page fade-in
   print stylesheet · scrollbar refinement · loaded-progress sliver
   ═════════════════════════════════════════════════════════════════════ */

/* ── Premium error card (404 / 403) ────────────────────────────────── */
.err-card {
  width: min(540px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 6px 18px rgba(15,23,42,.06);
  padding: 1.6rem 1.6rem 1.4rem;
  animation: err-card-in .55s cubic-bezier(.34,1.5,.64,1);
}
[data-theme="dark"] .err-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
}
@keyframes err-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.err-card__art {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; margin: .25rem 0 1rem;
  height: 110px;
}
.err-card__digit {
  font-size: 92px; font-weight: 900;
  line-height: .9;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.04em;
}
.err-card--403 .err-card__digit {
  background: linear-gradient(135deg, #d97706, #dc2626);
  -webkit-background-clip: text; background-clip: text;
}
.err-card__planet {
  color: #7c3aed;
  filter: drop-shadow(0 6px 14px rgba(124,58,237,.32));
  animation: err-spin 14s linear infinite;
}
.err-card--403 .err-card__planet {
  color: #d97706;
  filter: drop-shadow(0 6px 14px rgba(217,119,6,.3));
  animation: err-shake 4.5s ease-in-out infinite;
}
@keyframes err-spin  { to { transform: rotate(360deg); } }
@keyframes err-shake {
  0%, 90%, 100% { transform: translateX(0); }
  92%, 96%      { transform: translateX(-2px); }
  94%, 98%      { transform: translateX(2px); }
}
.err-card__title {
  font-size: 1.6rem; font-weight: 800; margin: 0 0 .4rem; text-align: center;
  letter-spacing: -.015em; color: var(--text);
}
.err-card__sub {
  font-size: .88rem; line-height: 1.55; color: var(--text-muted);
  text-align: center; margin: 0 0 1rem;
}
.err-card__user {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; margin: 0 0 1rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 11px;
}
.err-card__user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff; font-weight: 800; font-size: .85rem;
  box-shadow: 0 3px 10px rgba(37,99,235,.28);
}
.err-card__user-info { flex: 1; min-width: 0; }
.err-card__user-info strong { display: block; font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-card__user-info span   { font-size: .68rem; color: var(--text-muted); }
.err-card__shortcuts {
  display: flex; flex-direction: column; gap: .4rem;
  margin: 0 0 1.1rem;
}
.err-card__shortcut {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 11px;
  text-decoration: none; color: var(--text);
  transition: background .15s, transform .12s, border-color .15s;
}
.err-card__shortcut:hover {
  background: var(--bg-card); border-color: var(--brand); transform: translateX(2px);
}
.err-card__shortcut:active { transform: scale(.99); }
.err-card__shortcut-icon { font-size: 1.15rem; flex-shrink: 0; }
.err-card__shortcut-body { flex: 1; min-width: 0; }
.err-card__shortcut-body strong { display: block; font-size: .82rem; color: var(--text); }
.err-card__shortcut-body em     { display: block; font-size: .68rem; color: var(--text-muted); font-style: normal; margin-top: .1rem; }
.err-card__shortcut-chev { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }
.err-card__actions {
  display: flex; gap: .55rem; flex-wrap: wrap;
}
.err-card__actions .btn { flex: 1; min-width: 130px; justify-content: center; }
.err-card__foot {
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border);
  font-size: .68rem; color: var(--text-muted); text-align: center;
}
.err-card__foot code {
  font-family: ui-monospace, monospace;
  background: var(--bg-muted); padding: 0 .35rem; border-radius: 4px;
  font-size: .66rem;
}
@media (max-width: 480px) {
  .err-card { padding: 1.25rem 1.1rem 1.1rem; border-radius: 18px; }
  .err-card__digit { font-size: 72px; }
  .err-card__title { font-size: 1.3rem; }
}

/* ── Universal accessible focus-ring ────────────────────────────────── */
*:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline-offset .12s ease;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ── Premium global form-control v2 ────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="url"], select, textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: .55rem .8rem;
  font-size: .88rem;
  line-height: 1.45;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .22s ease, background-color .15s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,.02) inset;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="url"],
[data-theme="dark"] select, [data-theme="dark"] textarea {
  background: rgba(255,255,255,.03);
}
.form-control:hover, input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.85rem;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.form-control:disabled, input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-muted); color: var(--text-muted);
  cursor: not-allowed; opacity: .75;
}
.form-control.is-invalid, input.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
.invalid-feedback { color: #dc2626; font-size: .72rem; margin-top: .25rem; display: block; }
.form-label { font-size: .78rem; font-weight: 600; color: var(--text); display: block; margin-bottom: .3rem; }

/* ── Premium scrollbar (refined) ────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .15s;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand) 50%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 30%, transparent) transparent; }
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}

/* ── Page entrance fade-in (subtle premium feel) ───────────────────── */
.main, [role="main"], .auth-shell {
  animation: page-fade-in .35s ease-out both;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Top-of-window indeterminate "loaded" sliver ───────────────────── */
.land-loaded-bar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  z-index: 13500;
  transition: width .4s ease, opacity .35s .35s ease;
  box-shadow: 0 0 8px rgba(124,58,237,.4);
}
.land-loaded-bar.is-done { width: 100% !important; opacity: 0; }

/* ── Premium primary button hover lift ─────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #7c3aed) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(37,99,235,.22);
  transition: transform .12s cubic-bezier(.34, 1.5, .64, 1),
              box-shadow .2s ease, opacity .15s;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(37,99,235,.36);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ── Caret/selection coloring ──────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  color: inherit;
}

/* ── Tap-state polish for touch devices (Material-style ripple cue) ── */
@media (hover: none) and (pointer: coarse) {
  .btn:active, .list-card:active, .topbar__icon-btn:active,
  .sidebar__link:active, .bottom-nav__item:active {
    transform: scale(.97);
  }
}

/* ══════════════════════════ PRINT STYLES ══════════════════════════ */
@media print {
  /* Hide all chrome */
  .topbar, .sidebar, .bottom-nav, .bn-subnav, .breadcrumbs,
  .topbar__scroll-progress, .topbar__more-popover,
  .consent-pop, #landToastRoot, .land-loaded-bar,
  .theme-drawer, [data-rtl-toggle], [data-theme-toggle],
  [data-theme-drawer-toggle], .topbar__menu-btn,
  .page-tabs, .page-hero__actions, .err-card__actions,
  .land-toast {
    display: none !important;
  }

  /* Reset layout */
  body, html {
    background: #fff !important; color: #000 !important;
    overflow: visible !important;
  }
  .app, .layout-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" !important;
  }
  .main, [role="main"], .auth-shell {
    padding: 0 !important; margin: 0 !important;
    overflow: visible !important; max-width: none !important;
    animation: none !important;
  }

  /* Card and surface flattening */
  .card, .re-card, .re-deep-card, .stat-card, .premium-card,
  .err-card, .auth-card {
    box-shadow: none !important;
    border-color: #e5e7eb !important;
    background: #fff !important;
    page-break-inside: avoid;
  }

  /* Page-hero compresses to a single header line */
  .page-hero {
    margin: 0 0 .75rem !important;
    padding: .5rem 0 !important;
    background: none !important;
    border-bottom: 2px solid #000 !important;
    page-break-after: avoid;
  }
  .page-hero::before { display: none !important; }
  .page-hero__icon { display: none !important; }
  .page-hero__title { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .page-hero__sub   { color: #555 !important; }

  /* Tables */
  table { border-collapse: collapse !important; }
  table, tr, td, th { page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Links: show URL inline */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; color: #666; font-weight: normal;
  }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }

  /* Force colors to print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Pagination breaks */
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* ═════════════════════════════════════════════════════════════════════
   USER-FACING POPUP MESSAGES — admin-managed targeted notifications
   ═════════════════════════════════════════════════════════════════════ */

html.pmsg-open, body.pmsg-open { overflow: hidden !important; }

.pmsg-stack {
  position: fixed; inset: 0;
  z-index: 12500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: pmsg-fade-in .26s ease-out both;
}
.pmsg-stack.is-closing { animation: pmsg-fade-out .25s ease-in forwards; }
@keyframes pmsg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmsg-fade-out { from { opacity: 1; } to { opacity: 0; transform: scale(.98); } }

.pmsg-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.22), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(124,58,237,.22), transparent 55%),
              rgba(15,23,42,.7);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="dark"] .pmsg-backdrop {
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.3), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(124,58,237,.3), transparent 55%),
              rgba(2,6,23,.84);
}

/* Each popup card — stacked, only one visible at a time */
.pmsg-card {
  --pm-tone: var(--brand);
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 2rem);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 12px 28px rgba(15,23,42,.18);
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: pmsg-card-in .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
[data-theme="dark"] .pmsg-card {
  background: var(--bg-card);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 12px 28px rgba(0,0,0,.4);
}
@keyframes pmsg-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.pmsg-card.is-active { display: flex; }
.pmsg-card.is-done   { display: none; }

/* Tone-stripe along the left edge */
.pmsg-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--pm-tone);
}

/* Header */
.pmsg-card__hd {
  position: relative;
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.25rem 1.4rem .85rem;
  border-bottom: 1px solid var(--border);
}
.pmsg-card__handle {
  display: none;
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 99px; background: var(--border);
}
.pmsg-card__icon {
  position: relative;
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pm-tone) 12%, transparent);
  color: var(--pm-tone);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.pmsg-card__icon-pulse {
  position: absolute; inset: 0; border-radius: 13px;
  border: 2px solid var(--pm-tone);
  opacity: 0;
  animation: pmsg-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes pmsg-pulse {
  0%   { transform: scale(.92); opacity: .6; }
  70%  { transform: scale(1.4);  opacity: 0; }
  100% { transform: scale(1.4);  opacity: 0; }
}
.pmsg-card__hd-text { flex: 1; min-width: 0; }
.pmsg-card__eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pm-tone);
  margin-bottom: .3rem;
}
.pmsg-card__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444;
  animation: pmsg-blink 1.4s ease-in-out infinite;
}
@keyframes pmsg-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.pmsg-card__eyebrow-meta {
  font-weight: 600; color: var(--text-muted); margin-left: .25rem;
  text-transform: none; letter-spacing: 0; font-size: .62rem;
}
.pmsg-card__title {
  font-size: 1.1rem; font-weight: 800;
  margin: 0; line-height: 1.25; letter-spacing: -.005em;
  color: var(--text);
}
.pmsg-card__close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.pmsg-card__close:hover { background: var(--bg); color: var(--text); }

/* Body */
.pmsg-card__body {
  padding: 1.1rem 1.4rem;
  font-size: .85rem; line-height: 1.55; color: var(--text);
  flex: 1; overflow-y: auto;
}

/* Acknowledgment checkbox row */
.pmsg-card__check {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1.4rem;
  border-top: 1px solid var(--border);
  font-size: .82rem; line-height: 1.45; color: var(--text);
  cursor: pointer;
  background: color-mix(in srgb, var(--pm-tone) 4%, transparent);
}
.pmsg-card__check input {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--pm-tone); cursor: pointer; margin-top: 2px;
}

/* Actions */
.pmsg-card__actions {
  display: flex; gap: .55rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.pmsg-card__btn {
  flex: 1; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 11px;
  font-size: .85rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .2s, background .15s, color .15s, opacity .15s;
}
.pmsg-card__btn:active:not(:disabled) { transform: scale(.97); }
.pmsg-card__btn--primary {
  background: var(--pm-tone); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pm-tone) 28%, transparent);
}
.pmsg-card__btn--primary:not(:disabled):hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pm-tone) 38%, transparent);
}
.pmsg-card__btn--primary:disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none;
  background: var(--bg-muted); color: var(--text-muted);
}
.pmsg-card__btn--ghost {
  background: var(--bg-muted); color: var(--text); border-color: var(--border);
  flex: 0 0 auto; padding: .55rem 1rem;
}
.pmsg-card__btn--ghost:hover { background: var(--bg); border-color: var(--pm-tone); color: var(--pm-tone); }
.pmsg-card__btn-spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: ld-spin .65s linear infinite;
}
.pmsg-card__btn--primary.is-loading .pmsg-card__btn-spinner { display: inline-block; }

.pmsg-card__foot {
  padding: .55rem 1.4rem .8rem;
  font-size: .65rem; color: var(--text-muted);
  text-align: center;
  background: var(--bg-card);
}

/* Mobile bottom-sheet */
@media (max-width: 600px) {
  .pmsg-stack { align-items: flex-end; padding: 0; }
  .pmsg-card {
    width: 100%; max-width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 92dvh;
    animation: pmsg-card-up .4s cubic-bezier(.34, 1.4, .64, 1) both;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  @keyframes pmsg-card-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .pmsg-card__handle { display: block; }
  .pmsg-card__hd     { padding: 1.2rem 1rem .75rem; }
  .pmsg-card__body   { padding: .85rem 1rem; }
  .pmsg-card__check  { padding: .75rem 1rem; }
  .pmsg-card__actions { padding: .85rem 1rem; }
  .pmsg-card__foot   { padding: .55rem 1rem .85rem; }
  .pmsg-card__btn--ghost { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pmsg-stack, .pmsg-card { animation: pmsg-fade-in .15s ease-out both; }
  .pmsg-card__icon-pulse, .pmsg-card__eyebrow-dot { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   INSTALL BUTTON (PWA) + SHOUT (Announcements) — device-adaptive
   ═════════════════════════════════════════════════════════════════════ */

/* Topbar Install button — chip-style with optional label */
.topbar__install-btn {
  display: inline-flex !important;
  align-items: center; gap: .35rem;
  padding: 0 .65rem !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  font-size: .76rem; font-weight: 700;
  height: 32px;
  box-shadow: 0 3px 10px rgba(37,99,235,.32);
  transition: transform .12s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.topbar__install-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: install-shimmer 4s ease-in-out infinite;
}
@keyframes install-shimmer {
  0%, 88%, 100% { transform: translateX(-100%); }
  92%           { transform: translateX(100%); }
}
.topbar__install-btn:hover {
  box-shadow: 0 5px 16px rgba(37,99,235,.45);
  transform: translateY(-1px);
}
.topbar__install-btn:active { transform: scale(.97); }
.topbar__install-btn[hidden] { display: none !important; }
.topbar__install-btn svg { color: #fff; flex-shrink: 0; position: relative; z-index: 1; }
.topbar__install-label    { position: relative; z-index: 1; }

/* Hide label on small screens — icon only */
@media (max-width: 640px) {
  .topbar__install-btn { padding: 0 !important; width: 36px; }
  .topbar__install-label { display: none; }
}

/* Tablet / TV — make it bigger, more prominent */
@media (min-width: 769px) and (max-width: 1199px) {
  .topbar__install-btn { height: 36px; font-size: .82rem; }
}
@media (min-width: 1600px) {
  /* TV / large desktop — bigger touch target */
  .topbar__install-btn { height: 38px; font-size: .85rem; padding: 0 .85rem !important; }
}

/* Shout / Announcements icon */
.topbar__shout-btn { position: relative; }
.topbar__shout-btn .topbar__badge {
  background: linear-gradient(135deg, #d97706, #ef4444);
  border: 1.5px solid var(--bg);
}
.topbar__shout-pulse {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: topbar-notif-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.topbar__shout-btn:hover svg {
  transform: rotate(-12deg) scale(1.1);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Mobile floating Install FAB — premium app-style chip in corner ── */
.land-install-fab {
  display: none;                /* hidden until beforeinstallprompt fires */
  position: fixed;
  right: 1rem;
  bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 11500;               /* above bottom-nav, below modals/popups */
  align-items: center; gap: .55rem;
  padding: .65rem 1rem;
  border-radius: 99px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  font-size: .82rem; font-weight: 800;
  box-shadow: 0 8px 24px rgba(37,99,235,.45),
              0 2px 6px rgba(15,23,42,.18),
              inset 0 1px 0 rgba(255,255,255,.18);
  letter-spacing: -.005em;
  transition: transform .15s, box-shadow .25s;
  animation: fab-bob 3.5s ease-in-out infinite;
}
.land-install-fab[hidden] { display: none !important; }
.land-install-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.land-install-fab:hover {
  box-shadow: 0 12px 30px rgba(37,99,235,.55), 0 4px 10px rgba(15,23,42,.22);
}
.land-install-fab:active { transform: scale(.95); animation: none; }
@keyframes fab-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Mobile (≤640px): show as floating FAB */
@media (max-width: 640px) {
  .land-install-fab:not([hidden]) { display: inline-flex; }
}

/* Tablet + desktop: hide the FAB (use topbar button instead) */
@media (min-width: 641px) {
  .land-install-fab { display: none !important; }
}

/* Tablet (641–1024px): chunkier FAB if shown */
@media (min-width: 641px) and (max-width: 1024px) and (hover: none) {
  /* Tablet treatment when on touch device — bigger FAB above bottom-nav */
  .land-install-fab:not([hidden]) {
    display: inline-flex !important;
    bottom: calc(var(--bottom-nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 1.2rem);
    right: 1.5rem;
    padding: .85rem 1.25rem;
    font-size: .9rem;
  }
  .land-install-fab svg { width: 20px; height: 20px; }
}

/* TV / very large screens (≥1600px) — even larger FAB if applicable */
@media (min-width: 1600px) {
  .land-install-fab:not([hidden]) {
    padding: 1rem 1.5rem; font-size: .95rem;
    bottom: 2rem; right: 2rem;
  }
  .land-install-fab svg { width: 22px; height: 22px; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .land-install-fab { animation: none; }
  .topbar__install-btn::before { animation: none; }
  .topbar__shout-btn:hover svg { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE ENHANCEMENT PACK  v6
   ═════════════════════════════════════════════════════════════════════ */

/* ── Pull-to-refresh indicator ─────────────────────────────────────── */
.land-ptr {
  position: fixed; top: var(--topbar-h, 56px); left: 50%;
  transform: translateX(-50%) translateY(-30px);
  z-index: 9999;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .9rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .25s ease-out;
  font-size: .68rem; color: var(--text-muted); font-weight: 700;
}
.land-ptr__arc { display: block; }
.land-ptr__bg   { stroke: var(--border); }
.land-ptr__fill { stroke: var(--brand); transition: stroke-dashoffset .1s linear; }
.land-ptr.is-ready { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); color: var(--brand); }
.land-ptr.is-refreshing .land-ptr__fill { stroke-dashoffset: 22 !important; animation: ptr-spin .9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); transform-origin: 18px 18px; } }
.land-ptr__hint { white-space: nowrap; }

/* ── Mobile "back to top" FAB ──────────────────────────────────────── */
.land-totop {
  position: fixed; right: 1rem;
  bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 5.2rem);
  z-index: 11400;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(15,23,42,.12), 0 1px 4px rgba(15,23,42,.08);
  cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.85);
  pointer-events: none;
  transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.land-totop.is-visible {
  opacity: 1; transform: none; pointer-events: auto;
}
.land-totop:hover  { background: var(--brand); color: #fff; }
.land-totop:active { transform: scale(.92); }
.land-totop svg { width: 20px; height: 20px; }
@media (min-width: 769px) { .land-totop { display: none !important; } }

/* If install FAB is visible too, stack the back-to-top above it */
.land-install-fab:not([hidden]) ~ .land-totop {
  bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 5.5rem);
}

/* ── Online / offline banner ───────────────────────────────────────── */
.land-net {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-110%);
  top: calc(env(safe-area-inset-top, 0px) + .55rem);
  z-index: 13800;
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: 0 6px 20px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.08);
  font-size: .76rem; font-weight: 700;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), opacity .25s;
  opacity: 0;
}
[data-theme="dark"] .land-net {
  box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}
.land-net.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.land-net__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: net-pulse 1.6s ease-out infinite;
}
.land-net__dot--ok { background: #059669; box-shadow: 0 0 0 0 rgba(5,150,105,.5); }
.land-net--online .land-net__dot--ok { animation: net-pulse-ok 1.6s ease-out 1; }
.land-net--offline { color: #dc2626; border-color: rgba(220,38,38,.3); }
.land-net--online  { color: #059669; border-color: rgba(5,150,105,.3); }
@keyframes net-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@keyframes net-pulse-ok {
  0% { box-shadow: 0 0 0 0 rgba(5,150,105,.5); }
  70% { box-shadow: 0 0 0 7px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}

/* ── Material touch ripple ─────────────────────────────────────────── */
.land-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  transform: scale(0);
  pointer-events: none;
  z-index: 0;
  animation: land-ripple-out .58s cubic-bezier(.25,.46,.45,.94) forwards;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .land-ripple { mix-blend-mode: screen; opacity: .3; }
@keyframes land-ripple-out {
  0%   { transform: scale(0);   opacity: .25; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ── Keyboard-aware sticky CTAs (mobile, when virtual KB opens) ──── */
@media (max-width: 768px) {
  html.land-kb-open .bottom-nav,
  html.land-kb-open .bn-subnav,
  html.land-kb-open .land-totop,
  html.land-kb-open .land-install-fab {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Lift in-page submit buttons above the keyboard */
  html.land-kb-open .main {
    padding-bottom: 1rem !important;
  }
  /* When keyboard is open, also let the topbar shrink/hide on scroll */
  html.land-kb-open .topbar { box-shadow: none; }
}

/* Reduced-motion fallbacks */
@media (prefers-reduced-motion: reduce) {
  .land-ptr, .land-totop, .land-net, .land-ripple { animation: none !important; transition: opacity .15s ease !important; }
  .land-ripple { display: none !important; }
}

/* Print: hide all the floating chrome */
@media print {
  .land-ptr, .land-totop, .land-net, .land-install-fab { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM HELPERS — LandConfirm dialog · LandTooltip
   ═════════════════════════════════════════════════════════════════════ */

/* ── LandConfirm dialog ──────────────────────────────────────────── */
.land-confirm-bg {
  position: fixed; inset: 0;
  z-index: 14000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.18), transparent 55%),
              rgba(15,23,42,.62);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  opacity: 0;
  transition: opacity .22s ease;
}
.land-confirm-bg.is-open    { opacity: 1; }
.land-confirm-bg.is-closing { opacity: 0; }
.land-confirm {
  --tone: #2563eb;
  position: relative;
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.4rem 1.4rem 1.1rem;
  box-shadow: 0 24px 60px rgba(15,23,42,.32), 0 8px 22px rgba(15,23,42,.18);
  transform: scale(.92) translateY(8px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  text-align: center;
}
.land-confirm-bg.is-open .land-confirm { transform: none; opacity: 1; }
[data-theme="dark"] .land-confirm {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.4);
}
.land-confirm--brand   { --tone: #2563eb; }
.land-confirm--info    { --tone: #0891b2; }
.land-confirm--danger  { --tone: #dc2626; }
.land-confirm::before {
  content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 50%, #7c3aed));
  border-radius: 18px 18px 0 0;
}
.land-confirm__icon {
  width: 56px; height: 56px;
  margin: 0 auto .85rem;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 24%, transparent);
}
.land-confirm__title {
  font-size: 1.1rem; font-weight: 800;
  margin: 0 0 .35rem; line-height: 1.3;
  color: var(--text);
}
.land-confirm__body {
  font-size: .85rem; line-height: 1.55; color: var(--text-muted);
  margin: 0 0 1.1rem;
}
.land-confirm__actions {
  display: flex; gap: .55rem; margin-top: .5rem;
}
.land-confirm__btn {
  flex: 1; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .9rem; border-radius: 11px;
  font-size: .85rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .2s, background .15s;
}
.land-confirm__btn:active { transform: scale(.97); }
.land-confirm__btn--primary {
  background: var(--tone); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tone) 30%, transparent);
}
.land-confirm__btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 42%, transparent);
}
.land-confirm__btn--ghost {
  background: var(--bg-muted); color: var(--text); border-color: var(--border);
}
.land-confirm__btn--ghost:hover { background: var(--bg); border-color: var(--text-muted); }

/* Mobile bottom-sheet variant */
@media (max-width: 600px) {
  .land-confirm-bg { align-items: flex-end; padding: 0; }
  .land-confirm {
    width: 100%; max-width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 1.25rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .land-confirm-bg.is-open .land-confirm { transform: translateY(0); }
  .land-confirm::before { border-radius: 22px 22px 0 0; }
}

/* ── LandTooltip ──────────────────────────────────────────────────── */
.land-tip {
  position: absolute; z-index: 14500;
  padding: .35rem .6rem; border-radius: 7px;
  background: rgba(15,23,42,.94);
  color: #fff; font-size: .7rem; font-weight: 600;
  line-height: 1.35; white-space: nowrap;
  max-width: 240px; pointer-events: none;
  opacity: 0; transform: translateY(2px) scale(.96);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.land-tip.is-visible { opacity: 1; transform: none; }
.land-tip::after {
  content: ''; position: absolute;
  left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(15,23,42,.94);
}
.land-tip.land-tip--below::after {
  bottom: auto; top: -4px;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .land-confirm-bg, .land-confirm { transition: opacity .15s ease; }
  .land-confirm { transform: none; }
  .land-tip { transition: opacity .15s ease; }
}

/* Print */
@media print {
  .land-confirm-bg, .land-tip { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   SMART MODERN MOBILE-NATIVE PACK  v7
   action-sheet · tap-to-copy feedback · drag-dismiss visual
   ═════════════════════════════════════════════════════════════════════ */

/* ── Action sheet (bottom-sheet menu) ─────────────────────────────── */
.land-actsheet-bg {
  position: fixed; inset: 0;
  z-index: 13800;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  opacity: 0;
  transition: opacity .26s ease;
}
.land-actsheet-bg.is-open    { opacity: 1; }
.land-actsheet-bg.is-closing { opacity: 0; }

.land-actsheet {
  position: relative;
  width: min(440px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.32), 0 8px 22px rgba(15,23,42,.18);
  padding: 1.4rem 1rem .9rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  display: flex; flex-direction: column; gap: .55rem;
}
.land-actsheet-bg.is-open .land-actsheet { transform: none; opacity: 1; }
[data-theme="dark"] .land-actsheet {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.4);
}

.land-actsheet__handle {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 99px; background: var(--border);
}
.land-actsheet__title {
  font-size: .68rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .25rem .5rem .25rem;
  text-align: center;
}
.land-actsheet__items {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border-radius: 14px; overflow: hidden;
}
.land-actsheet__item {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg-card); border: none; cursor: pointer;
  font-size: .9rem; color: var(--text); text-align: left;
  transition: background .15s, color .15s;
}
.land-actsheet__item:hover, .land-actsheet__item:focus-visible {
  background: var(--bg-muted); outline: none;
}
.land-actsheet__item:active { background: color-mix(in srgb, var(--brand) 8%, var(--bg-muted)); }
.land-actsheet__item.is-danger { color: #dc2626; }
.land-actsheet__item.is-danger:hover { background: rgba(220,38,38,.06); }
.land-actsheet__item-icon { font-size: 1.1rem; flex-shrink: 0; }
.land-actsheet__item-label { flex: 1; font-weight: 600; }
.land-actsheet__item-sub {
  font-size: .68rem; color: var(--text-muted); font-weight: 500;
  margin-left: auto;
}
.land-actsheet__item.is-danger .land-actsheet__item-sub { color: rgba(220,38,38,.7); }

.land-actsheet__cancel {
  margin-top: .6rem;
  padding: .85rem 1rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 14px;
  font-size: .9rem; font-weight: 700; color: var(--text);
  cursor: pointer; transition: background .15s, transform .12s;
}
.land-actsheet__cancel:hover  { background: var(--bg); }
.land-actsheet__cancel:active { transform: scale(.98); }

/* Larger viewports — center as a modal not a bottom sheet */
@media (min-width: 769px) {
  .land-actsheet-bg { align-items: center; }
  .land-actsheet { transform: translateY(8px) scale(.96); }
}

/* Mobile-only handle visible */
@media (max-width: 600px) {
  .land-actsheet { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── Tap-to-copy feedback ──────────────────────────────────────────── */
[data-copy], [data-copy-from] {
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, background-color .15s;
}
[data-copy]:hover, [data-copy-from]:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--bg-muted));
}
[data-copy].is-copied, [data-copy-from].is-copied {
  animation: copy-flash .9s ease-out;
}
@keyframes copy-flash {
  0%   { background-color: rgba(5,150,105,.25); transform: scale(1.02); }
  50%  { background-color: rgba(5,150,105,.15); transform: scale(1); }
  100% { background-color: transparent;          transform: scale(1); }
}
[data-copy]::after, [data-copy-from]::after {
  content: '⎘';
  margin-left: .35rem;
  font-size: .8em;
  opacity: 0;
  transition: opacity .15s ease;
  color: var(--brand);
}
[data-copy]:hover::after, [data-copy-from]:hover::after { opacity: .55; }
[data-copy].is-copied::after, [data-copy-from].is-copied::after {
  content: '✓'; opacity: 1; color: #059669;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .land-actsheet-bg, .land-actsheet { transition: opacity .15s ease; transform: none; }
  [data-copy].is-copied, [data-copy-from].is-copied { animation: none; }
}

/* Print */
@media print {
  .land-actsheet-bg { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   SHOUT DRAWER + INSTALL POLISH + GREETING + AVATAR STATUS
   ═════════════════════════════════════════════════════════════════════ */

/* ── Shout / Announcements drawer ──────────────────────────────────── */
.shout-drawer {
  position: fixed; inset: 0;
  z-index: 12200;
  pointer-events: none;
}
.shout-drawer.is-open { pointer-events: auto; }
body.shout-drawer-open { overflow: hidden; }

.shout-drawer__bd {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.shout-drawer.is-open .shout-drawer__bd { opacity: 1; }

.shout-drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(380px, 100%);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(15,23,42,.18), -4px 0 10px rgba(15,23,42,.08);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.34,1.4,.64,1);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-theme="dark"] .shout-drawer__panel {
  box-shadow: -16px 0 40px rgba(0,0,0,.55), -4px 0 10px rgba(0,0,0,.35);
}
.shout-drawer.is-open .shout-drawer__panel { transform: none; }

.shout-drawer__hd {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.1rem .85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(217,119,6,.05), rgba(220,38,38,.04));
}
[data-theme="dark"] .shout-drawer__hd {
  background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(220,38,38,.08));
}
.shout-drawer__icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #d97706, #dc2626);
  color: #fff;
  box-shadow: 0 4px 12px rgba(217,119,6,.3);
}
.shout-drawer__hd-text { flex: 1; min-width: 0; }
.shout-drawer__title { font-size: 1rem; font-weight: 800; margin: 0 0 .15rem; color: var(--text); }
.shout-drawer__sub   { font-size: .7rem; color: var(--text-muted); }
.shout-drawer__close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; font-size: .85rem; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s, transform .12s;
}
.shout-drawer__close:hover  { background: var(--bg); color: var(--text); }
.shout-drawer__close:active { transform: scale(.92); }

.shout-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.shout-drawer__section-title {
  font-size: .62rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: .5rem;
}
.shout-drawer__section--alert .shout-drawer__section-card {
  background: linear-gradient(135deg, rgba(220,38,38,.08), rgba(217,119,6,.06));
  border: 1px solid rgba(220,38,38,.25);
  border-radius: 12px;
  padding: .85rem 1rem;
  position: relative; overflow: hidden;
}
.shout-drawer__section--alert .shout-drawer__section-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, #dc2626, #d97706);
}
.shout-drawer__section--alert strong {
  display: block; font-size: .88rem; color: var(--text); margin-bottom: .2rem;
}
.shout-drawer__section--alert p {
  font-size: .76rem; color: var(--text-muted); margin: 0 0 .65rem;
}
.shout-drawer__view-btn {
  background: linear-gradient(135deg, #dc2626, #d97706);
  color: #fff; border: none;
  padding: .45rem .85rem; border-radius: 8px;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(220,38,38,.32);
  transition: transform .12s, box-shadow .2s;
}
.shout-drawer__view-btn:hover  { box-shadow: 0 5px 14px rgba(220,38,38,.42); }
.shout-drawer__view-btn:active { transform: scale(.97); }

.shout-drawer__item {
  --t: var(--brand);
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .65rem;
  margin-bottom: .35rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--t);
  border-radius: 9px;
  transition: background .15s;
}
.shout-drawer__item:hover { background: var(--bg-card); }
.shout-drawer__item-icon { font-size: 1rem; flex-shrink: 0; }
.shout-drawer__item-body { flex: 1; min-width: 0; }
.shout-drawer__item-title {
  font-size: .8rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shout-drawer__item-sub { font-size: .65rem; color: var(--text-muted); margin-top: .12rem; }

.shout-drawer__empty {
  text-align: center;
  padding: 2.4rem 1rem;
  background: var(--bg-muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.shout-drawer__empty-icon { font-size: 2rem; margin-bottom: .35rem; }
.shout-drawer__empty-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.shout-drawer__empty-sub   { font-size: .72rem; color: var(--text-muted); }

.shout-drawer__foot {
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
}
.shout-drawer__foot-link {
  display: block; text-align: center;
  font-size: .78rem; font-weight: 700; color: var(--brand);
  text-decoration: none;
  padding: .45rem;
  border-radius: 8px;
  transition: background .15s;
}
.shout-drawer__foot-link:hover { background: var(--bg-card); }

@media (max-width: 480px) {
  .shout-drawer__panel { width: 100%; border-left: none; }
}

/* ── Install "Already Installed" chip ──────────────────────────────── */
.topbar__installed-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .55rem;
  background: rgba(5,150,105,.1);
  color: #059669;
  border: 1px solid rgba(5,150,105,.25);
  border-radius: 99px;
  font-size: .65rem; font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
  user-select: none;
}
.topbar__installed-chip svg { width: 11px; height: 11px; }
@media (max-width: 768px) {
  .topbar__installed-chip { display: none; }
}

/* ── Install benefits mini-popover (first-tap explainer) ──────────── */
.install-benefits-pop {
  position: absolute; z-index: 11200;
  width: min(280px, 92vw);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .85rem 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.18), 0 4px 10px rgba(15,23,42,.08);
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.5,.64,1);
}
[data-theme="dark"] .install-benefits-pop {
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.35);
}
.install-benefits-pop.is-open {
  opacity: 1; transform: none;
}
.install-benefits-pop::before {
  content: ''; position: absolute; top: -7px; right: 18px;
  width: 12px; height: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-bottom: none; border-right: none;
  transform: rotate(45deg);
}
.install-benefits-pop__hd {
  font-size: .82rem; font-weight: 800; color: var(--text);
  margin-bottom: .55rem;
}
.install-benefits-pop__list {
  list-style: none; padding: 0; margin: 0 0 .8rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.install-benefits-pop__list li {
  font-size: .76rem; color: var(--text); line-height: 1.4;
}
.install-benefits-pop__cta {
  width: 100%; padding: .55rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border: none; border-radius: 9px;
  font-size: .82rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 10px rgba(37,99,235,.32);
  transition: transform .12s, box-shadow .2s;
}
.install-benefits-pop__cta:hover  { box-shadow: 0 5px 14px rgba(37,99,235,.42); }
.install-benefits-pop__cta:active { transform: scale(.97); }

/* ── Topbar greeting (dashboard only) ──────────────────────────────── */
.topbar__greet {
  display: none;
  align-items: center; gap: .35rem;
  padding: 0 .85rem 0 .25rem;
  font-size: .82rem; color: var(--text-muted);
  font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap;
  transition: opacity .35s ease, transform .4s ease;
}
.topbar__greet strong { color: var(--text); font-weight: 800; }
.topbar__greet-emoji { font-size: 1rem; }
.topbar__greet.is-faded {
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
}
@media (min-width: 769px) {
  .topbar__greet { display: inline-flex; }
}

/* ── Sidebar avatar online status dot ──────────────────────────────── */
.sidebar__avatar { position: relative; }
.sidebar__avatar-status {
  position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px;
  background: #10b981;
  border: 2px solid var(--bg-sidebar, var(--bg-card));
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16,185,129,.5);
  animation: avatar-status-pulse 2.4s ease-out infinite;
}
@keyframes avatar-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ── Animated badge transitions on bottom-nav + topbar ────────────── */
.bn-badge, .topbar__badge {
  animation: badge-pop-in .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes badge-pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shout-drawer__panel { transition: transform .15s ease; }
  .install-benefits-pop { transition: opacity .15s ease; transform: none; }
  .sidebar__avatar-status { animation: none; }
  .bn-badge, .topbar__badge { animation: none; }
}

@media print {
  .shout-drawer, .install-benefits-pop, .topbar__greet { display: none !important; }
}

/* ── Install button on auth (login/register) pages ───────────────── */
.auth-install {
  margin-top: 1rem;
  animation: auth-install-in .45s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes auth-install-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.auth-install__divider {
  display: flex; align-items: center; gap: .65rem;
  margin: .85rem 0 .85rem;
  font-size: .68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.auth-install__divider::before,
.auth-install__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-install__btn {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; padding: .8rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.05));
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: transform .12s, box-shadow .25s, border-color .15s, background .2s;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .auth-install__btn {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.1));
}
.auth-install__btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: install-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.auth-install__btn:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(37,99,235,.18);
  transform: translateY(-1px);
}
.auth-install__btn:active { transform: scale(.98); }
.auth-install__icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border-radius: 11px;
  box-shadow: 0 3px 10px rgba(37,99,235,.32);
  position: relative; z-index: 1;
}
.auth-install__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.auth-install__body strong {
  display: block; font-size: .9rem; font-weight: 800; color: var(--text);
  margin-bottom: .15rem;
}
.auth-install__body small {
  display: block; font-size: .68rem; color: var(--text-muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .auth-install { animation: none; }
  .auth-install__btn::before { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   INSTALL GUIDE MODAL (LandInstallGuide)
   Browser-aware step-by-step instructions with benefits + CTA
   ═════════════════════════════════════════════════════════════════════ */
.install-guide-bg {
  position: fixed; inset: 0;
  z-index: 13500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.22), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(124,58,237,.2), transparent 55%),
              rgba(15,23,42,.7);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transition: opacity .25s ease;
}
.install-guide-bg.is-open    { opacity: 1; }
.install-guide-bg.is-closing { opacity: 0; }

.install-guide {
  position: relative;
  width: min(440px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 24px 60px rgba(15,23,42,.32), 0 8px 22px rgba(15,23,42,.18);
  transform: scale(.92) translateY(10px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  text-align: center;
  max-height: 92dvh; overflow-y: auto;
}
.install-guide-bg.is-open .install-guide { transform: none; opacity: 1; }
[data-theme="dark"] .install-guide {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.4);
}

.install-guide::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  border-radius: 22px 22px 0 0;
}

.install-guide__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; font-size: .85rem; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s, transform .12s;
}
.install-guide__close:hover  { background: var(--bg); color: var(--text); }
.install-guide__close:active { transform: scale(.92); }

.install-guide__icon {
  width: 64px; height: 64px;
  margin: .25rem auto .85rem;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.1));
  color: var(--brand);
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.9rem;
  box-shadow: 0 6px 16px rgba(37,99,235,.22);
}
.install-guide__title {
  font-size: 1.15rem; font-weight: 800;
  margin: 0 0 .35rem; color: var(--text);
  letter-spacing: -.005em;
}
.install-guide__sub {
  font-size: .82rem; line-height: 1.55; color: var(--text-muted);
  margin: 0 0 1.1rem;
}

.install-guide__steps {
  list-style: none; padding: 0; margin: 0 0 .85rem;
  text-align: left;
  display: flex; flex-direction: column; gap: .6rem;
}
.install-guide__steps li {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .65rem .8rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .82rem; line-height: 1.5; color: var(--text);
}
.install-guide__step-n {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: .68rem; font-weight: 800;
  display: grid; place-items: center;
  margin-top: 1px;
}
.install-guide__steps strong { color: var(--brand); font-weight: 700; }
.install-guide__steps code {
  font-family: ui-monospace, monospace; font-size: .76rem;
  background: var(--bg-card); padding: 0 .25rem; border-radius: 4px;
  border: 1px solid var(--border);
}

.install-guide__tip {
  font-size: .76rem; color: var(--text-muted); margin: 0 0 .85rem;
  padding: .55rem .75rem;
  background: rgba(245,158,11,.08); border: 1px dashed rgba(245,158,11,.35);
  border-radius: 9px;
  text-align: left;
}
.install-guide__tip strong { color: #d97706; font-weight: 700; }

.install-guide__benefits {
  display: flex; gap: .35rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
  justify-content: center;
}
.install-guide__benefits > span {
  font-size: .68rem; font-weight: 700;
  padding: .25rem .55rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text);
}

.install-guide__cta {
  width: 100%; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1rem; border-radius: 12px;
  font-size: .9rem; font-weight: 800;
  border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.32);
  transition: transform .12s, box-shadow .2s, opacity .15s;
}
.install-guide__cta:hover  { box-shadow: 0 8px 24px rgba(37,99,235,.45); transform: translateY(-1px); }
.install-guide__cta:active { transform: translateY(0) scale(.97); }
.install-guide__cta--ghost {
  background: var(--bg-muted); color: var(--text); border-color: var(--border);
  box-shadow: none;
}
.install-guide__cta--ghost:hover { background: var(--bg); border-color: var(--brand); color: var(--brand); box-shadow: none; transform: none; }

/* Mobile bottom-sheet variant */
@media (max-width: 600px) {
  .install-guide-bg { align-items: flex-end; padding: 0; }
  .install-guide {
    width: 100%; max-width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 1.4rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .install-guide-bg.is-open .install-guide { transform: translateY(0); }
  .install-guide::before { border-radius: 22px 22px 0 0; }
}

/* "Installed" state on the buttons */
.wb-nav__install.is-installed,
.auth-install__btn.is-installed {
  background: linear-gradient(135deg, rgba(5,150,105,.12), rgba(16,185,129,.08));
  border-color: rgba(5,150,105,.35);
  color: #059669;
  pointer-events: none;
}
.wb-nav__install.is-installed::before,
.auth-install__btn.is-installed::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .install-guide-bg, .install-guide { transition: opacity .15s ease; transform: none; }
}

@media print {
  .install-guide-bg { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   AI SMART INSIGHTS — user-side personalized cards + EMI forecast
   ═════════════════════════════════════════════════════════════════════ */

.ai-insights {
  margin: 0 0 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.ai-insights::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
}

.ai-insights__hd {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(124,58,237,.03));
}
[data-theme="dark"] .ai-insights__hd {
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.08));
}
.ai-insights__hd-title {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 800; color: var(--text);
}
.ai-insights__hd-spark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border-radius: 9px;
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
  animation: ai-spark-rotate 8s linear infinite;
}
@keyframes ai-spark-rotate { to { transform: rotate(360deg); } }
.ai-insights__hd-tag {
  font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .45rem;
  background: rgba(124,58,237,.12);
  color: #7c3aed; border-radius: 99px;
}
.ai-insights__hd-sub { font-size: .7rem; color: var(--text-muted); }

/* Forecast card */
.ai-forecast-card {
  --tone: #2563eb;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 5%, transparent), transparent 60%);
  border-bottom: 1px solid var(--border);
}
.ai-forecast-card--good { --tone: #059669; }
.ai-forecast-card--warn { --tone: #dc2626; }
.ai-forecast-card__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone); border-radius: 14px;
  font-size: 1.45rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tone) 22%, transparent);
}
.ai-forecast-card__body { flex: 1; min-width: 0; }
.ai-forecast-card__lbl  { font-size: .65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ai-forecast-card__val  { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: .15rem 0 .25rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.ai-forecast-card__rem  { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.ai-forecast-card__sub  { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }

.ai-forecast-card__bar { margin-top: .85rem; }
.ai-forecast-card__bar-wrap {
  position: relative; height: 6px;
  background: var(--bg-muted); border-radius: 99px;
  border: 1px solid var(--border);
}
.ai-forecast-card__marker {
  position: absolute; top: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg-card);
  transform: translateX(-50%);
  cursor: help;
}
.ai-forecast-card__marker--exp { background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.ai-forecast-card__marker--sch { background: #94a3b8; }
.ai-forecast-card__bar-legend {
  display: flex; gap: .85rem;
  font-size: .65rem; color: var(--text-muted);
  margin-top: .55rem;
}
.ai-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .25rem; vertical-align: middle; }
.ai-dot--exp { background: #2563eb; }
.ai-dot--sch { background: #94a3b8; }

/* Insight cards grid */
.ai-insights__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.ai-insight {
  --t: var(--brand);
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background .15s;
}
.ai-insight:hover { background: color-mix(in srgb, var(--t) 4%, transparent); }
.ai-insight::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--t);
}
.ai-insight--celebrate { --t: #059669; }
.ai-insight--ok        { --t: #2563eb; }
.ai-insight--info      { --t: #0891b2; }
.ai-insight--warn      { --t: #d97706; }

.ai-insight__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--t) 12%, transparent);
  border-radius: 10px;
  font-size: 1.1rem;
}
.ai-insight__body { flex: 1; min-width: 0; }
.ai-insight__title {
  font-size: .85rem; font-weight: 800; color: var(--text);
  margin-bottom: .15rem; line-height: 1.3;
}
.ai-insight__text {
  font-size: .76rem; color: var(--text-muted); line-height: 1.5;
}
.ai-insight__cta {
  display: inline-block; margin-top: .45rem;
  font-size: .72rem; font-weight: 700; color: var(--t); text-decoration: none;
  padding: .2rem .5rem;
  background: color-mix(in srgb, var(--t) 10%, transparent);
  border-radius: 6px; transition: background .15s;
}
.ai-insight__cta:hover { background: color-mix(in srgb, var(--t) 18%, transparent); }

@media (max-width: 600px) {
  .ai-insights__grid { grid-template-columns: 1fr; }
  .ai-insight { border-right: none; }
  .ai-forecast-card { flex-direction: column; padding: .95rem 1rem; }
}

/* Trend chart AI commentary tag */
.ref-wallet-trend__ai {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .85rem; padding: .55rem .85rem;
  border-radius: 9px;
  font-size: .76rem; font-weight: 600;
  border: 1px dashed transparent;
}
.ref-wallet-trend__ai--good {
  background: rgba(5,150,105,.08); color: #059669; border-color: rgba(5,150,105,.3);
}
.ref-wallet-trend__ai--warn {
  background: rgba(220,38,38,.08); color: #dc2626; border-color: rgba(220,38,38,.3);
}
.ref-wallet-trend__ai--info {
  background: rgba(37,99,235,.06); color: #2563eb; border-color: rgba(37,99,235,.25);
}
.ref-wallet-trend__ai-icon { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ai-insights__hd-spark { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile patches — performance, layout, accessibility
   (appended after _mobile.css section)
   ═══════════════════════════════════════════════════════════════════ */

/* ── P1: Disable per-item backdrop-filter on mobile ──────────────
   With 12–48 timeline items each blurring, scroll jank is severe
   on mid-range Android. Solid background replaces the effect.    */
@media (max-width: 767px) {
  .emi-tl-item,
  .emi-hero-card,
  .emi-side-stat {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface, #fff) !important;
  }
  [data-theme="dark"] .emi-tl-item {
    background: rgba(30,41,59,.92) !important;
  }
  [data-theme="dark"] .emi-hero-card,
  [data-theme="dark"] .emi-side-stat {
    background: rgba(30,41,59,.96) !important;
  }
}

/* ── P2: EMI timeline — 2-row grid on xs phones (≤479px) ─────────
   Prevents the 3-column (num | body | auto) from squeezing body
   text when the right column contains multiple action buttons.   */
@media (max-width: 479px) {
  .emi-tl-item {
    grid-template-columns: 36px 1fr !important;
    grid-template-rows: auto auto;
    gap: .45rem .55rem !important;
    padding: .7rem .85rem !important;
  }
  .emi-tl-num {
    grid-row: 1 / span 2;
    align-self: flex-start;
    width: 36px !important;
    height: 36px !important;
    font-size: .72rem !important;
    border-radius: 10px !important;
  }
  .emi-tl-body  { grid-column: 2; grid-row: 1; }
  .emi-tl-right {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    padding-top: .35rem;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  [data-theme="dark"] .emi-tl-right { border-top-color: rgba(255,255,255,.08); }
  .emi-tl-right__amt {
    font-size: .88rem !important;
    margin-right: auto;
  }
}

/* ── P3: Allow timeline sub-text to wrap on all mobile ───────────
   `white-space: nowrap` on .emi-tl-body__sub silently truncates
   "Base ₹X · GST ₹Y · Disc -₹Z" on narrow screens.             */
@media (max-width: 767px) {
  .emi-tl-body__sub {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.45;
  }
  /* Plot title: allow wrapping so long names are fully readable */
  .emi-hero-info__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* ── P4: Scroll-performance hint for static paid EMI rows ────────
   Paid items are read-only (opacity .62, no hover effects needed).
   layout+style containment lets the browser skip unnecessary work. */
.emi-tl-item--paid {
  contain: layout style;
}

/* ── P5: Overscroll containment for the main scroll container ────
   Prevents the iOS rubber-band from propagating through the page,
   and stops Android Chrome from triggering the pull-to-refresh
   when a user scrolls the timeline to the top quickly.           */
.main {
  overscroll-behavior-y: contain;
}

/* ── P6: Native scroll on all touch scroll containers ────────────
   belt-and-suspenders for older Safari / Android WebView         */
.main,
.emi-timeline-wrap,
.crud-table-wrap,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════
   P7: Referral wallet — withdraw button + header button group
   ═══════════════════════════════════════════════════════════════════ */
.ref-wallet-header__btns {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}
.ref-wallet-withdraw-btn {
  display: inline-flex;
  align-items: center;
  font-size: .78rem; font-weight: 700;
  padding: .3rem .8rem;
  background: linear-gradient(135deg,#059669,#10b981);
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.ref-wallet-withdraw-btn:hover  { opacity: .88; color: #fff; }
.ref-wallet-withdraw-btn:active { transform: scale(.95); }

/* ── P8: Referral page mobile layout fixes ──────────────────────── */
@media (max-width: 479px) {
  /* KPI strip: prevent card overflow clipping on very narrow phones */
  .ref-kpi-wrap {
    padding-left: .1rem;
    padding-right: .1rem;
  }
  /* Copy-strip buttons: ensure they wrap cleanly */
  .ref-copy-strip {
    gap: .35rem;
  }
  .ref-copy-btn {
    padding: .32rem .65rem;
    font-size: .7rem;
  }
  /* Wallet KPI grid: 2 columns on tiny phones */
  .ref-wallet-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ref-wallet-kpi:nth-child(2) { border-right: none; }
  /* Wallet header button group: stack if both buttons visible */
  .ref-wallet-header {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .ref-wallet-header__btns {
    flex-wrap: wrap;
    gap: .35rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE-NATIVE PERFORMANCE PACK
     P9: Lite mode (slow networks / save-data)
     P10: Skeleton loader utilities
     P11: Touch-target safety net (≥44px)
     P12: prefers-reduced-data + reduced-motion polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── P9: Lite mode ────────────────────────────────────────────────
   Active when <html data-lite="1"> — set pre-paint by header script
   on save-data, 2G, or user toggle. Strips expensive effects to keep
   scrolling smooth and reduce bandwidth on weak networks.            */
[data-lite="1"] *,
[data-lite="1"] *::before,
[data-lite="1"] *::after {
  /* Backdrop-filter is the single biggest GPU cost on cheap phones.
     Wipe it everywhere; pages get solid backgrounds via body color.   */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* Drop shadows + filter effects. */
  box-shadow: none !important;
  filter: none !important;
  /* Strip background-attachment fixed which causes paint thrashes. */
  background-attachment: scroll !important;
}
[data-lite="1"] {
  /* Disable smooth-scroll polyfills; use the system implementation. */
  scroll-behavior: auto !important;
}
/* Animations + transitions kept very short for tap feedback only. */
[data-lite="1"] *:not(.skl):not(.skl-text):not(.skl-card) {
  animation: none !important;
  transition-duration: .12s !important;
}
/* Replace expensive animated gradients with their first stop color. */
[data-lite="1"] .page-hero,
[data-lite="1"] .ref-hero,
[data-lite="1"] .emi-user-hero {
  background: var(--bg-elev) !important;
}
/* Blurry orbs → invisible. */
[data-lite="1"] .hero__orb { display: none !important; }
/* Loaded chart canvases stay (data is already there); but swap colored
   gradients for solid bars. */
[data-lite="1"] canvas { image-rendering: pixelated; }
/* Tier-progress rings + emi-purchase rings still useful but skip the
   spring overshoot to save CPU. */
[data-lite="1"] svg circle { transition: none !important; }
/* Toast indicator at the top so users know they're in lite mode. */
[data-lite="1"] body::before {
  content: '⚡ Lite mode'; position: fixed; top: 4px; left: 50%;
  transform: translateX(-50%); z-index: 9999;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  padding: 2px 10px; background: #fbbf24; color: #78350f;
  border-radius: 99px; pointer-events: none;
  opacity: .85;
}

/* ── P10: Skeleton loader utility classes ───────────────────────── */
@keyframes skl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.skl {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--bg-muted) 0%,
    color-mix(in srgb, var(--bg-muted) 70%, var(--text-faint, #ddd)) 50%,
    var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skl-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skl-text { height: .9em; width: 80%; vertical-align: middle; }
.skl-text--sm { height: .7em; width: 60%; }
.skl-text--lg { height: 1.2em; width: 90%; }
.skl-circle { border-radius: 50%; }
.skl-card {
  display: block; width: 100%; height: 80px;
  border-radius: 12px; margin-bottom: .65rem;
}
[data-lite="1"] .skl,
[data-lite="1"] .skl-text,
[data-lite="1"] .skl-card {
  /* Lite mode: drop shimmer animation, keep static placeholder. */
  background: var(--bg-muted) !important;
  animation: skl-pulse 1.6s ease-in-out infinite !important;
}

/* ── P11: Touch-target safety net (mobile only) ─────────────────── *
 * v2: explicit min-height only — the previous version added a 44×44px
 *     ::after overlay with pointer-events:auto which intercepted taps
 *     on bottom-nav / dock buttons (any button with aria-label).
 *     Replaced with a conservative min-height enforcement that opt-in
 *     excludes nav/dock/sub-nav buttons that already have correct sizing.   */
@media (max-width: 767px) and (pointer: coarse) {
  /* Generic .btn variants get a minimum touch height. */
  .btn:not(.btn-sm), .icon-btn {
    min-height: 44px;
  }
  /* Form controls bumped to comfortable touch height + 16px font to
     prevent iOS Safari auto-zoom on focus. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"],
  select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  /* Increase tap-target spacing in lists and option rows.
     Excludes nav-style items that already self-manage their height. */
  .list-item, .menu-item { min-height: 44px; }
}

/* ── P12: prefers-reduced-data — system signal honored ─────────── */
@media (prefers-reduced-data: reduce) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .hero__orb { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v9 — Responsive, Accessible & Performance Polish
   ═════════════════════════════════════════════════════════════════════ */

/* ── EMI tab: label size moved from inline style to stylesheet ─────── */
.bottom-nav__item--emi .bottom-nav__label { font-size: .55rem; }

/* ── Eliminate 300ms tap delay on all interactive nav chrome ─────────
   `touch-action: manipulation` tells the browser to skip double-tap
   zoom detection on these targets — instant response on Android.     */
.bottom-nav__item,
.bn-subnav__link,
.bn-subnav__close,
.bn-subnav__hd-goto {
  touch-action: manipulation;
}

/* ── Sub-nav link: 44px minimum touch target (WCAG 2.5.5) ──────────── */
.bn-subnav__link { min-height: 44px; }

/* ── Bottom-nav icon container: GPU compositing hint ────────────────── */
.bottom-nav__icon { contain: layout style; }

/* ── Back-to-top FAB: use --bn-h token so it adapts to each breakpoint
   Previously used --bottom-nav-h which only tracked 64px.             */
.land-totop {
  bottom: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px) + 5.2rem);
}
/* Landscape thin phones: bottom-nav collapses to 52px — match it */
@media (max-height: 500px) and (orientation: landscape) {
  .land-totop {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + .75rem) !important;
  }
}

/* ── Reduced-motion: strip GPU-expensive backdrop-filter ─────────────
   Vestibular / motion-sensitive users also benefit from snappier nav.
   Backdrop-filter itself isn't an animation but blurs every paint
   frame, causing layout thrash on weaker hardware.                    */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .topbar,
  .sidebar,
  .bn-subnav__bd,
  .land-confirm-bg,
  .install-guide-bg {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Kill spring-easing bounce on decorative icon transforms */
  .bn-subnav__hd-icon,
  .bn-subnav__link-icon,
  .bn-subnav__link,
  .stat-card__icon-wrap {
    transition: none !important;
  }
}

/* ── Focus ring: higher contrast in dark mode ────────────────────────── */
[data-theme="dark"] .bottom-nav__item:focus-visible {
  outline-color: rgba(125,170,255,.75);
}
[data-theme="dark"] .bn-subnav__link:focus-visible,
[data-theme="dark"] .bn-subnav__close:focus-visible {
  outline-color: rgba(125,170,255,.75);
}

/* ── iOS Safari: 16px minimum font on ALL inputs to prevent auto-zoom ─
   iOS zooms in when an input has font-size < 16px. Coarse pointer
   (= touchscreen) is the reliable gate; hover:none blocks trackpads.  */
@media (hover: none) and (pointer: coarse) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ── Lite mode: remove expensive progressive effects ─────────────────
   Complements the broad box-shadow/backdrop-filter wipe in P9 above.
   These animated pseudo-elements are purely decorative.               */
[data-lite="1"] .bottom-nav::before,
[data-lite="1"] .progress__bar::after,
[data-lite="1"] .btn-primary::after,
[data-lite="1"] .stat-card::after,
[data-lite="1"] .hero__orb { display: none !important; }

/* Subnav backdrop: no blur — solid colour is sufficient */
[data-lite="1"] .bn-subnav__bd {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0,0,0,.6);
}
/* Modal backdrops */
[data-lite="1"] .land-confirm-bg,
[data-lite="1"] .install-guide-bg {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── Sidebar scrim: raise above everything when open ──────────────────
   body::after (CSS scrim, section 28 in _mobile.css) must sit above
   the sidebar z-index (200) but below the open sidebar itself.        */
@media (max-width: 767px) {
  body[data-sidebar="open"]::after { z-index: 199; }
}

/* ── Dark modal backdrop: richer depth ───────────────────────────────── */
[data-theme="dark"] .land-confirm-bg,
[data-theme="dark"] .install-guide-bg {
  background:
    radial-gradient(circle at 30% 20%, rgba(37,99,235,.22), transparent 55%),
    rgba(0,0,0,.82);
}

/* ── Responsive table: ensure minimum readable width ─────────────────── */
@media (max-width: 479px) {
  .table-responsive { min-width: 0; }
  .table-responsive > table { min-width: 480px; }
}

/* ── Breadcrumb: prevent overflow on very narrow screens ─────────────── */
@media (max-width: 360px) {
  .breadcrumbs { display: none; }
  .topbar__title { font-size: .9rem; }
}

/* ── Print: comprehensive hide of all floating chrome ────────────────── */
@media print {
  .bottom-nav, .bn-subnav, .sidebar, .topbar,
  .land-totop, .land-ptr, .land-net, .land-install-fab,
  .land-confirm-bg, .install-guide-bg,
  .db-fab-wrap, .ref-fab,
  .theme-drawer, .welcome-popup { display: none !important; }
  .app  { display: block !important; }
  .main { padding: 0 !important; max-width: 100% !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v10 — Global Touch Targets, Auth, Plots, Profile &
   Cross-page Accessibility Pass
   ═════════════════════════════════════════════════════════════════════ */

/* ── Global: 44px touch targets on all interactive controls ───────────
   Coarse-pointer (finger) devices only — no change on mouse layouts.
   `touch-action:manipulation` eliminates 300ms Android tap delay.     */
@media (hover:none) and (pointer:coarse) {
  .btn, .btn-sm, .btn-xs, .btn-icon,
  .btn-primary, .btn-secondary, .btn-ghost, .btn-danger,
  button[type="submit"], button[type="button"], button[type="reset"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  .form-control, .form-select, select, textarea {
    min-height: 44px;
    font-size: max(16px, 1em); /* prevent iOS auto-zoom */
  }

  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  /* Anchor-style interactive elements */
  a[role="button"], [role="button"],
  a.btn, a.btn-sm, a.btn-xs {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
  }
}

/* ── Auth: back-arrow link touch target ──────────────────────────────
   At ≤600px only the SVG icon is visible; the text is hidden.
   The link itself needs a min-height so the tap area is big enough.  */
.auth-topbar__back {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  touch-action: manipulation;
}

/* ── Auth: submit button always full-height ───────────────────────── */
.btn-auth-submit { min-height: 44px; }

/* ── Page tabs: lift each tab to 44px ────────────────────────────── */
.page-tabs__item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  touch-action: manipulation;
}

/* ── Plots: pagination buttons ───────────────────────────────────── */
.pl-page-btn {
  min-width: 44px;
  min-height: 44px;
}

/* ── Plots: top-bar icon buttons (filter, sort, etc.) ────────────── */
.pl-top-btn {
  width: 44px;
  height: 44px;
}

/* ── Plots: touch-device row-action and header controls ─────────── */
@media (hover:none) and (pointer:coarse) {
  .pl-view-btn, .pl-action-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  .pl-sort-select, .pl-filter-select, .pl-filter-search {
    min-height: 44px;
    font-size: max(16px, 1em);
  }
  .pl-perpage-row a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 .4rem;
  }
}

/* ── Profile: avatar colour swatch — expand to 44px hit area ────────
   Swatch stays visually 22px; invisible ::after handles the finger.  */
.prof-avatar-color {
  position: relative;
  touch-action: manipulation;
}
.prof-avatar-color::after {
  content: '';
  position: absolute;
  inset: -11px;
}

/* ── Profile: context-menu items ───────────────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  .prof-ctx-menu-item {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ── Watchlist: single-column on tiny screens ──────────────────────── */
@media (max-width: 360px) {
  .wl-grid, .watchlist-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Action-bar (sticky footer): always clear bottom nav ─────────── */
@media (hover:none) and (pointer:coarse) {
  .emi-buyer-card__actions .btn,
  .myplot-card__actions .btn,
  .plot-card__actions .btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ── Dropdown toggles & select wrappers ────────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  .dropdown-toggle,
  .filter-select-wrap select,
  .sort-select-wrap select {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ── Table: horizontal overscroll containment ───────────────────────
   Prevents accidental back-gesture while scrolling a table right.   */
.table-wrap, .tbl-wrap, .table-responsive {
  overscroll-behavior-x: contain;
}

/* ── Support / ticket chips: minimum readable font size ─────────── */
@media (max-width: 479px) {
  .ticket-status, .ticket-priority, .status-chip,
  .badge-chip, .level-chip {
    font-size: .75rem;
  }
}

/* ── Referral share chip: readable on small screens ─────────────── */
@media (max-width: 479px) {
  .ref-code-chip { font-size: .8rem; letter-spacing: .05em; }
}

/* ── Announcement bar close button: proper touch target ─────────── */
@media (hover:none) and (pointer:coarse) {
  .announce-close, .ann-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Website: nav links touch target ───────────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  .site-nav__link, .ws-nav__link, .navbar__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Reduced-motion: disable CSS-only carousels / auto-play ──────── */
@media (prefers-reduced-motion: reduce) {
  .hero__orb, .orb, .testimonial-track,
  .gallery-track { animation-play-state: paused !important; }
  .carousel-track { scroll-behavior: auto !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v11 — Remaining Touch Target & Accessibility Pass
   ═════════════════════════════════════════════════════════════════════ */

/* ── View-toggle buttons (grid/table switcher in plots) ───────────── */
@media (hover:none) and (pointer:coarse) {
  .view-toggle__btn { min-height: 44px; min-width: 44px; touch-action: manipulation; }
}

/* ── Profile: copy-to-clipboard button — expand hit area ────────────
   Button is visually 13px icon; ::after expands tap zone to 44px.   */
.prof-copy-btn {
  position: relative;
  touch-action: manipulation;
}
.prof-copy-btn::after {
  content: '';
  position: absolute;
  inset: -14px;
}

/* ── Notification filter chip × button — expand to 44px tap zone ─── */
.nf-active-chip__x {
  position: relative;
  touch-action: manipulation;
}
.nf-active-chip__x::after {
  content: '';
  position: absolute;
  inset: -15px;
}

/* ── Advanced plot filter inputs ────────────────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  .pl-adv-input {
    min-height: 44px;
    font-size: max(16px, 1em);
  }
}

/* ── KYC step label: ensure readable at all phone sizes ─────────── */
.kyc-step__lbl { font-size: .72rem !important; }

/* ── Plots: table scroll momentum (iOS) ────────────────────────────── */
.pl-table-wrap > div,
.pl-table-wrap [style*="overflow-x"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Profile tabs: ensure 44px tap height on touch ─────────────────── */
@media (hover:none) and (pointer:coarse) {
  .prof-tab { min-height: 44px; touch-action: manipulation; }
}

/* ── Bottom-sheet / modal actions: prevent tap-through ─────────────── */
.land-confirm-box button,
.modal-footer button,
.modal-footer a {
  touch-action: manipulation;
}

/* ── KYC status pill: ensure minimum height ─────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  .kyc-status-pill { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ── Error page shortcut links: 44px touch target ───────────────────── */
@media (hover:none) and (pointer:coarse) {
  .err-card__shortcut { min-height: 44px; touch-action: manipulation; }
}

/* ── Plots map: ensure list-view back button is reachable ────────────── */
@media (hover:none) and (pointer:coarse) {
  .plots-map-actions .btn { min-height: 44px; touch-action: manipulation; }
}

/* ── Payment confirm button: reinforce touch on payment-critical flow ── */
.pc-pay-btn { touch-action: manipulation; }

/* ── Ledger & report tables: ensure horizontal scroll on mobile ─────── */
.ledger-table-wrap,
.report-table-wrap,
.collections-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── All table scroll wrappers: overscroll containment + iOS momentum ── */
.re-table-wrap, .data-table-wrap,
.emia-tbl-wrap, .cs2-table-wrap,
.audit-table-wrap, .report-table-wrap,
.fin-table-wrap, .ledger-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v12 — Collections & Refund Touch Targets
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse) {
  /* Collections page header buttons */
  .cs2-hd-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Collections tab bar pills */
  .cs2-tab {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Collections section action buttons */
  .cs2-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Collections mark-paid / record buttons */
  .cs2-pay-btn, .cs2-record-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH-SCROLL — Momentum scrolling for every overflow container
   Applies -webkit-overflow-scrolling:touch to ALL scrollable regions
   so iOS Safari renders fluid kinetic scrolling everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Horizontal table & data wrappers ─────────────────────────── */
.table-container,
.table-responsive,
.table-responsive,
.card-table,
.tbl-scroll,
.crud-table-wrap,
.emi-timeline-wrap,
.emia-tbl-wrap,
.re-table-wrap,
.data-table-wrap,
.cs2-table-wrap,
.audit-table-wrap,
.report-table-wrap,
.fin-table-wrap,
.ledger-table-wrap,
.collections-table-wrap,
.perm-matrix-wrap,
.reports-chart-wrap,
.db-heatmap-wrap,
.ref-wallet-history__table-wrap,
.re-anomaly-body,
.re-heatmap-body,
.re-velo-chart,
.re-flow-chart,
.dc-carousel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Horizontal scroll strips & filter rows ───────────────────── */
.page-tabs,
.ref-kpi-wrap,
.ref-tree-filter,
.db-insight-row,
.nf-filter-row,
.sa-qf-row,
.prof-stats-row,
.prof-ai-card__payload,
.consent-pop__toc-strip {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Vertical scroll panels, sheets & modals ──────────────────── */
.modal,
.modal-body,
.theme-drawer__body,
.db-sheet__body,
.ref-share-sheet,
.prof-sheet,
.sa-sheet,
.sa-ai-card__body,
.cs2-sheet,
.consent-pop__sheet,
.pmsg-card__body,
.shout-drawer__body,
.install-guide,
.db-cmd-list,
.db-keys-box,
.db-perm-badges {
  -webkit-overflow-scrolling: touch;
}

/* Inline-style fallback for overflow handled by universal [style*="overflow-..."]
   selector earlier in this file (around .card__body / card__footer rules). */

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v13 — Accessibility, Performance & Native-Polish Finale
   Closes the remaining gaps: screen-reader utility, focus-visible system,
   tap-highlight, accent-color, high-contrast, content-visibility, and
   active-state touch feedback. App-wide.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A11y: visually-hidden utility (text only for screen readers) ── */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* ── A11y: skip-to-content link (for keyboard users) ─────────────── */
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 9999;
  padding: .65rem 1rem;
  background: var(--bg-elev); color: var(--text);
  border: 2px solid var(--brand); border-radius: 8px;
  font-weight: 700; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid var(--brand); outline-offset: 2px;
}

/* ── A11y: global focus-visible ring (overrides default browser) ── */
:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Suppress focus rings on mouse-only focus (preserve for keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* ── Native polish: tap highlight reset on every interactive el ─── */
a, button, [role="button"], [role="tab"], [role="link"],
input, select, textarea, label, summary,
.btn, .chip, .badge, .pill, .tab, .nav-link {
  -webkit-tap-highlight-color: transparent;
}

/* ── Native polish: accent-color for native form controls ─────── */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--brand, #2563eb);
}

/* ── Native polish: subtle :active touch feedback on touch devices ── */
@media (hover:none) and (pointer:coarse) {
  .btn:active,
  .btn-sm:active,
  .chip:active,
  [role="button"]:active,
  .list-card:active,
  .page-tabs__item:active,
  a.btn:active {
    transform: scale(.97);
    transition: transform .08s ease-out;
  }
}

/* ── Native polish: prevent UI-chrome text selection on touch ──── */
.sidebar, .topbar, .bottom-nav, .page-tabs, .page-hero__icon,
.btn, [role="button"], [role="tab"], [role="menuitem"] {
  -webkit-user-select: none;
  user-select: none;
}
/* Re-enable selection inside content regions */
.main, .card__body, .re-card__body, p, code, pre, td, th,
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── A11y: high-contrast mode support ──────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --text-muted: #1a1a1a;
  }
  [data-theme="dark"] {
    --border: #fff;
    --text-muted: #f0f0f0;
  }
  .btn, .form-control, .form-select, select, input, textarea,
  .chip, .badge, .card, .re-card {
    border-width: 2px !important;
  }
  :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* ── Performance: content-visibility for long offscreen lists ──── */
.notif-list .nf-item:nth-child(n+30),
.audit-list .audit-row:nth-child(n+30),
.feed-list .feed-item:nth-child(n+30),
.db-feed .db-feed-item:nth-child(n+25),
.timeline-list > *:nth-child(n+30) {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

/* ── Performance: image rendering defaults ─────────────────────── */
img {
  max-width: 100%;
  height: auto;
}
img[loading="lazy"] { background: var(--bg-muted); }

/* ── Numbers: tabular-nums for financial figures ───────────────── */
.amount, .price, .currency, .figure-num,
.re-stat__val, .kpi__val, .kpi-grid__val,
.dc-grid__val, .cs2-kpi__val,
td[data-amount], td.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── A11y: ensure interactive cursor on roles ──────────────────── */
[role="button"], [role="link"], [role="tab"], [role="menuitem"],
[onclick], summary {
  cursor: pointer;
}

/* ── Mobile-native: prevent body scroll when sheet/modal is open ── */
body.no-scroll,
body.modal-open,
body.sheet-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ── Mobile-native: disable iOS callout (long-press menu) on chrome ── */
.btn, .topbar, .sidebar, .bottom-nav,
.page-hero__icon, .list-card__icon, .chip {
  -webkit-touch-callout: none;
}

/* ── Reduced motion: extend coverage to all transitions/animations ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Preserve essential UX feedback */
  .btn:active, [role="button"]:active { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v14 — Premium Navigation + Unified UI Across Every Page
   Locks horizontal scroll, elevates nav menus with premium glass+gradient,
   adds smooth active-pill indicator, unifies buttons/chips/icons.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Constrain children so nothing overflows horizontally ────────
   Page-level horizontal scroll is already prevented by `html, body
   { overflow-x: hidden }` at the top of this file. Critically, we
   DO NOT touch `.main` or `.app` overflow — `.main` is the vertical
   scroll container, and overriding its overflow breaks scrolling. */
.main > *, .app > .main > * {
  max-width: 100%;
  min-width: 0;
}
/* Tables that escape responsive wrappers — force them to fit */
.main table:not([class*="-table"]):not(.no-shrink) {
  max-width: 100%;
  table-layout: auto;
}

/* ── Premium floating-pill bottom nav (mobile/tablet) ─────────── */
@media (max-width: 1199px) {
  .bottom-nav {
    /* Transform into a floating glass pill with margin from edges.
       On phones (≤ 480px) keep margins minimal so items don't get squeezed. */
    margin: 0 clamp(0px, 1vw, .5rem);
    margin-bottom: env(safe-area-inset-bottom, 0);
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--glass-border, rgba(255,255,255,.18));
    box-shadow:
      0 -2px 0 rgba(255,255,255,.6) inset,
      0 -8px 28px rgba(13,27,46,.08),
      0 -16px 40px -8px rgba(124,58,237,.05);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  }
  [data-theme="dark"] .bottom-nav {
    box-shadow:
      0 -2px 0 rgba(255,255,255,.04) inset,
      0 -8px 28px rgba(0,0,0,.55),
      0 -16px 40px -8px rgba(124,58,237,.12);
  }
  /* Subtle entrance on page load */
  .bottom-nav {
    animation: bnSlideUp .45s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes bnSlideUp {
    0%   { transform: translateY(110%); opacity: 0; }
    60%  { transform: translateY(-3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
  }
}

/* Smooth gradient active pill behind active tab (replaces simple line) */
.bottom-nav__item {
  transition: color .2s var(--ease), transform .15s ease;
  border-radius: 16px;
}
.bottom-nav__item.is-active::before {
  /* Upgrade: full-height gradient pill instead of thin top line */
  top: 50%;
  left: 50%;
  width: 44px;
  height: 30px;
  transform: translate(-50%,-50%);
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 37,99,235), .14),
    rgba(124,58,237, .12));
  border-radius: 14px;
  box-shadow: 0 2px 8px -2px rgba(var(--brand-rgb, 37,99,235), .25);
  z-index: -1;
}
.bottom-nav__item .bottom-nav__icon { z-index: 1; position: relative; }
.bottom-nav__item .bottom-nav__label { z-index: 1; position: relative; }
[data-theme="dark"] .bottom-nav__item.is-active::before {
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 37,99,235), .25),
    rgba(124,58,237, .22));
}

/* Premium icon scaling for active state (smoother spring) */
.bottom-nav__item.is-active .bottom-nav__icon svg {
  transform: translateY(-1px) scale(1.16);
  filter: drop-shadow(0 2px 4px rgba(var(--brand-rgb, 37,99,235), .35));
}

/* ── Premium topbar polish ───────────────────────────────────── */
.topbar {
  transition: background .25s var(--ease), box-shadow .25s var(--ease),
              backdrop-filter .25s var(--ease);
}
.topbar.is-scrolled {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 1px 0 var(--border),
    0 4px 16px -4px rgba(13,27,46,.08),
    0 8px 32px -8px rgba(13,27,46,.05);
}
[data-theme="dark"] .topbar.is-scrolled {
  background: rgba(9,14,26,.86);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.4);
}

/* Mobile topbar hamburger — premium animation */
@media (max-width: 767px) {
  .topbar__menu-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    transition: all .2s var(--ease);
  }
  .topbar__menu-btn:active {
    transform: scale(.92);
    background: var(--bg-muted);
  }
  body[data-sidebar="open"] .topbar__menu-btn {
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px -2px rgba(var(--brand-rgb, 37,99,235), .4);
  }
}

/* ── Sub-nav panel: premium polish ─────────────────────────────── */
.bn-subnav.is-open .bn-subnav__panel {
  /* Smoother slide-up with overshoot */
  animation: bnSubnavRise .35s cubic-bezier(.34,1.36,.64,1) both;
}
@keyframes bnSubnavRise {
  0%   { transform: translateY(100%); opacity: .6; }
  60%  { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.bn-subnav__link {
  transition: background .2s, transform .15s, box-shadow .2s;
}
.bn-subnav__link:active {
  transform: scale(.96);
  background: var(--bg-muted);
}

/* ── Unified button system across every page ─────────────────── */
.btn, .btn-sm, .btn-xs, .btn-lg,
button.btn, a.btn,
input[type="submit"], input[type="button"], input[type="reset"] {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn-sm, .btn-xs {
  border-radius: 8px;
}
.btn-lg {
  border-radius: 12px;
}
.btn-primary, .btn.btn-primary {
  background: linear-gradient(135deg, var(--brand, #2563eb), #4f46e5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(var(--brand-rgb, 37,99,235),.18),
              0 2px 8px -2px rgba(var(--brand-rgb, 37,99,235),.32);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #4338ca);
  box-shadow: 0 2px 4px rgba(var(--brand-rgb, 37,99,235),.22),
              0 4px 12px -2px rgba(var(--brand-rgb, 37,99,235),.4);
  transform: translateY(-1px);
}
.btn-primary:active, .btn.btn-primary:active {
  transform: translateY(0) scale(.98);
}

/* ── Unified chip / badge styles ─────────────────────────────── */
.chip, .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:not([class*="--"]), .badge:not([class*="--"]):not([class*="-success"]):not([class*="-danger"]):not([class*="-warn"]) {
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Unified card system ─────────────────────────────────────── */
.card, .re-card, .dc-icard, .dc-smart {
  border-radius: 14px;
  transition: box-shadow .2s var(--ease), transform .15s ease;
}
@media (hover: hover) {
  .card:hover, .re-card:hover {
    box-shadow: var(--shadow-md, 0 4px 16px -4px rgba(13,27,46,.08));
  }
}

/* ── Unified icon sizing ─────────────────────────────────────── */
.btn svg:not([width]), .chip svg:not([width]),
.badge svg:not([width]), [role="button"] svg:not([width]) {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.btn-sm svg:not([width]), .btn-xs svg:not([width]) {
  width: 13px; height: 13px;
}

/* ── Page-tabs unified styling (used by many pages) ─────────── */
.page-tabs {
  scroll-snap-type: x mandatory;
}
.page-tabs__item {
  scroll-snap-align: start;
  border-radius: 12px;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.page-tabs__item:active {
  transform: scale(.96);
}
.page-tabs__item.is-active {
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 37,99,235), .12),
    rgba(124,58,237, .08));
  border-color: rgba(var(--brand-rgb, 37,99,235), .3);
  font-weight: 700;
}

/* ── Sidebar drawer premium polish on mobile ─────────────────── */
@media (max-width: 767px) {
  .sidebar {
    box-shadow: 4px 0 32px -8px rgba(13,27,46,.18),
                0 8px 24px rgba(0,0,0,.06);
    border-right: 1px solid var(--border);
  }
  body[data-sidebar="open"]::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(13,27,46,.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 40;
    animation: scrimFade .25s ease both;
  }
  @keyframes scrimFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ── Form controls: unified rounded radius ───────────────────── */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 37,99,235), .15);
}

/* ── Premium FAB / floating action button polish ─────────────── */
.land-totop, .ref-fab, .fab {
  border-radius: 50%;
  box-shadow: 0 4px 16px -2px rgba(13,27,46,.18),
              0 8px 24px -4px rgba(124,58,237,.18);
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}
.land-totop:active, .ref-fab:active, .fab:active {
  transform: scale(.92);
}
.land-totop:hover, .ref-fab:hover, .fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -2px rgba(13,27,46,.22),
              0 12px 32px -4px rgba(124,58,237,.25);
}

/* ── Mobile-first: extra-small phones (≤380px) get tighter spacing ── */
@media (max-width: 380px) {
  .main { padding: 1rem .75rem !important; }
  .page-hero { padding: .75rem 1rem; }
  .page-hero__title { font-size: 1.05rem; }
  .card, .re-card, .dc-icard { border-radius: 12px; }
}

/* ── Extra-large phones / small tablets (601-767px) ──────────── */
@media (min-width: 601px) and (max-width: 767px) {
  .main { padding: 1.5rem 1.25rem !important; }
  .page-hero__title { font-size: 1.4rem; }
}

/* ── Reduced motion: kill the entrance animations ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bn-subnav.is-open .bn-subnav__panel {
    animation: none !important;
  }
}

/* ── Print: hide chrome, optimize for paper ─────────────────────── */
@media print {
  .sidebar, .topbar, .bottom-nav, .page-tabs,
  .skip-link, .btn, [role="button"]:not(.print-keep) {
    display: none !important;
  }
  .main { padding: 0 !important; overflow: visible !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .card, .re-card { break-inside: avoid; box-shadow: none !important; border-color: #ccc !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v16 — Body-level scroll on mobile (matches website UX)
   On phones/tablets, the .app grid switches from "fixed shell + internal
   .main scroll" to "natural document flow + body scroll." This matches
   how the public website and login pages already scroll, and avoids
   iOS quirks where 100vh + nested overflow:auto traps content.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .app {
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: auto auto !important;
  }
  .main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    overscroll-behavior-y: auto !important;
  }
  /* Topbar stays at the top via sticky on the body scroll context */
  .topbar {
    position: sticky;
    top: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE v15 — TRUE RESPONSIVE OVERRIDE FOR EVERY PAGE
   Forces all multi-column grids, fixed widths, and flex rows to behave
   correctly on mobile. Applies globally without modifying individual pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Phones (≤ 480px) — single column for everything ─────────── */
@media (max-width: 480px) {
  /* Smaller content padding on tiny phones */
  .main { padding: .9rem .75rem !important; }

  /* Inline grid styles: force single column */
  .main [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  .main [style*="grid-template-columns:1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr"],
  .main [style*="grid-template-columns:1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr"],
  .main [style*="grid-template-columns:repeat(2"],
  .main [style*="grid-template-columns: repeat(2"],
  .main [style*="grid-template-columns:repeat(3"],
  .main [style*="grid-template-columns: repeat(3"],
  .main [style*="grid-template-columns:repeat(4"],
  .main [style*="grid-template-columns: repeat(4"],
  .main [style*="grid-template-columns:repeat(5"],
  .main [style*="grid-template-columns: repeat(5"],
  .main [style*="grid-template-columns:repeat(6"],
  .main [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr !important;
  }

  /* Class-based grids: force single column */
  .dc-grid--2, .dc-grid--3, .dc-grid--4,
  .pl-grid, .myplots-grid, .row-2, .row-3, .row-4,
  .re-stats, .ref-wallet-kpis, .re-conv-grid,
  .myplots-summary__row, .myplot-card__sibs-grid,
  .rfi-form-grid, .wl-card-grid,
  .show-grid, .detail-grid, .form-row,
  .pl-kpi-strip, .db-kpi-strip, .db-kpi-grid,
  .dc-grid {
    grid-template-columns: 1fr !important;
  }

  /* Constrain large hardcoded max-widths */
  .main [style*="max-width:600"],
  .main [style*="max-width: 600"],
  .main [style*="max-width:700"],
  .main [style*="max-width: 700"],
  .main [style*="max-width:720"],
  .main [style*="max-width: 720"],
  .main [style*="max-width:800"],
  .main [style*="max-width: 800"],
  .main [style*="max-width:820"],
  .main [style*="max-width: 820"],
  .main [style*="max-width:900"],
  .main [style*="max-width: 900"],
  .main [style*="max-width:1000"],
  .main [style*="max-width: 1000"] {
    max-width: 100% !important;
  }

  /* Inline min-widths over 280px → force fit */
  .main [style*="min-width:300"],
  .main [style*="min-width: 300"],
  .main [style*="min-width:320"],
  .main [style*="min-width: 320"],
  .main [style*="min-width:360"],
  .main [style*="min-width: 360"],
  .main [style*="min-width:400"],
  .main [style*="min-width: 400"],
  .main [style*="min-width:500"],
  .main [style*="min-width: 500"] {
    min-width: 0 !important;
  }

  /* Force inline flex containers to wrap */
  .main [style*="display:flex"]:not([style*="flex-wrap:nowrap"]):not([style*="flex-wrap: nowrap"]),
  .main [style*="display: flex"]:not([style*="flex-wrap:nowrap"]):not([style*="flex-wrap: nowrap"]) {
    flex-wrap: wrap;
  }

  /* Common flex/grid row classes — wrap or stack */
  .d-flex:not(.no-wrap):not(.flex-nowrap),
  .myplots-toolbar, .pl-toolbar,
  .page-hero__row, .page-hero__actions,
  .card__header, .toolbar, .filter-bar {
    flex-wrap: wrap;
  }

  /* Page hero polish on tiny screens */
  .page-hero { padding: .85rem 1rem; }
  .page-hero__title { font-size: 1.05rem !important; line-height: 1.25; }
  .page-hero__sub { font-size: .78rem; }
  .page-hero__icon { width: 38px; height: 38px; font-size: 1.1rem; }

  /* Cards: tighter padding, smaller corner radius */
  .card__body, .re-card__body, .dc-icard__body {
    padding: .85rem 1rem !important;
  }
  .card__header, .re-card__hd {
    padding: .65rem 1rem !important;
  }

  /* KPI / stat values smaller on tiny screens */
  .re-stat__val, .dc-grid__val, .kpi-grid__val,
  .cs2-kpi__val, .pl-kpi__val, .db-kpi__val {
    font-size: 1.25rem !important;
  }

  /* Reduce font-size on tables to fit more */
  .main table { font-size: .8rem; }
  .main table th, .main table td { padding: .45rem .55rem; }

  /* Buttons stretch full-width when alone in a row */
  .form-actions .btn,
  .modal-footer .btn,
  .auth-card .btn[type="submit"] {
    width: 100%;
  }

  /* Form rows stack */
  .form-row, .form-grid {
    grid-template-columns: 1fr !important;
    display: block;
  }
  .form-row > *, .form-grid > * {
    margin-bottom: .65rem;
  }

  /* Sidebar drawer takes most of the screen */
  .sidebar { width: 88vw !important; max-width: 320px; }

  /* Hide non-essential decoration on tiny screens */
  .page-hero__decor, .hero-decor { display: none; }
}

/* ── Small tablets / large phones (481px–767px) ────────────── */
@media (min-width: 481px) and (max-width: 767px) {
  /* 4-column grids → 2 columns */
  .dc-grid--4, .row-4, .re-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 3-column grids → 2 columns */
  .dc-grid--3, .row-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Inline 4-col grids → 2 cols */
  .main [style*="grid-template-columns:repeat(4"],
  .main [style*="grid-template-columns: repeat(4"],
  .main [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Inline 3-col grids → 2 cols */
  .main [style*="grid-template-columns:repeat(3"],
  .main [style*="grid-template-columns: repeat(3"],
  .main [style*="grid-template-columns:1fr 1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hardcoded max-widths still constrained */
  .main [style*="max-width:800"],
  .main [style*="max-width: 800"],
  .main [style*="max-width:900"],
  .main [style*="max-width: 900"],
  .main [style*="max-width:1000"],
  .main [style*="max-width: 1000"] {
    max-width: 100% !important;
  }
}

/* ── Tablets (768px–1023px) — 3-column max for 4-col grids ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .dc-grid--4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── Universal: prevent any single child from forcing horizontal scroll ── */
@media (max-width: 767px) {
  /* All cards/sections inside .main fit viewport */
  .main .card, .main .re-card, .main .dc-icard,
  .main .dc-smart, .main .auth-card,
  .main section, .main article {
    max-width: 100%;
    min-width: 0;
  }
  /* Images and media never overflow */
  .main img, .main video, .main iframe, .main svg {
    max-width: 100%;
    height: auto;
  }
  /* Code blocks don't break layout */
  .main pre, .main code {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }
  /* Long text strings break */
  .main h1, .main h2, .main h3, .main p, .main span, .main td, .main li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ── Tiny phones (≤ 360px) — extreme compaction ──────────── */
@media (max-width: 360px) {
  .main { padding: .65rem .5rem !important; }
  .page-hero { padding: .65rem .85rem; }
  .page-hero__title { font-size: .95rem !important; }
  .card__body, .re-card__body { padding: .65rem .75rem !important; }
  .btn, .btn-sm { padding: .5rem .65rem; font-size: .78rem; }
  .main table { font-size: .72rem; }
  .main table th, .main table td { padding: .35rem .4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Admin plots — Investment Score badge + health-check flags
   ═══════════════════════════════════════════════════════════════════════ */
.pl-badge--score {
  display: inline-flex !important;
  align-items: center;
  gap: .2rem;
  padding: .15rem .45rem .15rem .25rem !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pl-badge__grade {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: currentColor;
  font-size: .58rem;
  font-weight: 900;
  position: relative;
}
.pl-badge__grade::before {
  content: attr(data-grade);
}
/* Use ::before with the actual letter via a hack — simpler to use opacity flip */
.pl-badge--score .pl-badge__grade {
  color: rgba(255,255,255,.85);
  background: currentColor;
}
.pl-badge--score .pl-badge__grade::after {
  content: '';
}
/* Cleaner approach: invert the grade chip's content via mix-blend */
.pl-badge--score .pl-badge__grade {
  /* readable: actual grade text inherited from element */
}
.pl-badge--score .pl-badge__num {
  font-size: .7rem;
  letter-spacing: .01em;
  font-weight: 800;
}

.pl-badge--health {
  display: inline-grid !important;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  font-size: .8rem;
  background: rgba(217,119,6,.14) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217,119,6,.3) !important;
  cursor: help;
  transition: transform .15s, background .15s;
}
.pl-badge--health:hover {
  transform: scale(1.15);
  background: rgba(217,119,6,.22) !important;
  z-index: 1;
}

/* Inner grade dot uses inverted scheme */
.pl-badge--score .pl-badge__grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  color: inherit;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
[data-theme="dark"] .pl-badge--score .pl-badge__grade {
  background: rgba(255,255,255,.18);
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v10 — Truly responsive across every page & device
   - Fluid clamp() height (no hard breakpoints)
   - Item-count-aware layout via --bn-count
   - Tiny-phone collapse (icon-only with active-only label)
   - Foldable / extra-narrow (≤320px) horizontal overflow scrolling
   - Landscape-phone slim mode
   - iPad-pro / Surface-pro range keeps the nav (was hidden 1200-1919)
   - Safe-area landscape notch (env left/right)
   - Auto-hide on input focus (avoid keyboard overlap)
   - RTL flip for active indicator + sub-nav slide direction
   - Smart pages without nav don't get spacer padding
   - Active pill follows tab via animated transform
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Fluid height via clamp(), tied to viewport ─────────────────── */
.bottom-nav {
  --bn-h: clamp(54px, 14.5vw + 24px, 76px);
  --bn-pad-x: clamp(.15rem, .6vw, .65rem);
  --bn-pad-bot: env(safe-area-inset-bottom, 0px);
  --bn-side-pad-l: env(safe-area-inset-left, 0px);
  --bn-side-pad-r: env(safe-area-inset-right, 0px);
}
/* Make sure items NEVER overflow horizontally — flex shrink + nowrap */
.bottom-nav__items {
  padding-left:  max(var(--bn-pad-x), var(--bn-side-pad-l));
  padding-right: max(var(--bn-pad-x), var(--bn-side-pad-r));
  gap: 0;
  flex-wrap: nowrap;
  overflow: visible;
  width: 100%;
  min-width: 0;
}
.bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(.55rem, 1.4vw, .72rem);
  gap: clamp(2px, .4vw, 5px);
  padding: clamp(.2rem, .7vw, .55rem) clamp(.05rem, .25vw, .3rem);
  min-height: 44px;
}
.bottom-nav__icon {
  width:  clamp(32px, 7vw, 50px);
  height: clamp(24px, 5.4vw, 38px);
  border-radius: clamp(8px, 1.5vw, 14px);
}
.bottom-nav__icon svg {
  width:  clamp(18px, 4.5vw, 26px);
  height: clamp(18px, 4.5vw, 26px);
}
.bottom-nav__label {
  font-size: clamp(.5rem, 1.25vw, .68rem);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 2. Item-count-aware layout (cap max-width on roomy viewports only) ─ */
/* On phones (< 600px) items always fill the entire width — never cap. */
@media (min-width: 600px) {
  .bottom-nav[data-bn-count="3"] .bottom-nav__items { max-width: 420px; margin: 0 auto; }
  .bottom-nav[data-bn-count="4"] .bottom-nav__items { max-width: 540px; margin: 0 auto; }
  .bottom-nav[data-bn-count="5"] .bottom-nav__items { max-width: 660px; margin: 0 auto; }
  .bottom-nav[data-bn-count="6"] .bottom-nav__items { max-width: 780px; margin: 0 auto; }
}
@media (min-width: 1200px) {
  .bottom-nav[data-bn-count="6"] .bottom-nav__items { max-width: 1100px; }
}

/* ── 3. Tiny phones (≤ 360px) — compress harder, never scroll ──────── */
@media (max-width: 360px) {
  .bottom-nav { --bn-h: 56px; }
  .bottom-nav__items { padding-left: .1rem; padding-right: .1rem; }
  .bottom-nav__item   { padding: .25rem .05rem; min-height: 42px; }
  .bottom-nav__icon   { width: 30px; height: 24px; }
  .bottom-nav__icon svg { width: 18px; height: 18px; }
  .bottom-nav__label  { font-size: .5rem; }
  /* Center elevated EMI button keeps proportional sizing */
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 36px; height: 36px; margin-top: -4px;
  }
  .bottom-nav__item--emi .bottom-nav__icon svg { width: 18px; height: 18px; }
}

/* ── 4. Foldable cover-screens (≤ 280px) — pull labels out, icons only ─ */
@media (max-width: 280px) {
  .bottom-nav__label { display: none; }
  .bottom-nav__item   { padding: .3rem .05rem; }
  .bottom-nav__icon   { width: 28px; height: 22px; }
  .bottom-nav__icon svg { width: 16px; height: 16px; }
}

/* ── 5. Landscape phone — slim nav, keep labels small ──────────────── */
@media (max-height: 480px) and (max-width: 920px) and (orientation: landscape) {
  .bottom-nav { --bn-h: 48px; }
  .bottom-nav__item { min-height: 40px; padding: .2rem .15rem; gap: 1px; }
  .bottom-nav__icon  { height: 22px; width: 30px; }
  .bottom-nav__icon svg { width: 16px; height: 16px; }
  .bottom-nav__label { font-size: .5rem; line-height: 1; }
  .main { padding-bottom: calc(var(--bn-h) + var(--bn-pad-bot, 0px) + .35rem) !important; }
}

/* ── 6. Tablet large (1200-1919) — keep nav (was hidden) ──────────── */
@media (min-width: 1200px) and (max-width: 1919px) {
  .bottom-nav {
    display: flex;
    --bn-h: 64px;
  }
  /* But on real desktop browsers (mouse-only, wide enough), prefer sidebar — hide */
  @media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
    .bottom-nav { display: none; }
    .main { padding-bottom: 1rem !important; }
  }
  /* On touchscreen tablets in this range, keep it floating-pill style */
  @media (hover: none) and (pointer: coarse) {
    .bottom-nav__items { max-width: 760px; margin: 0 auto; }
    .main { padding-bottom: calc(64px + var(--bn-pad-bot, 0px) + 1rem) !important; }
  }
}

/* ── 7. Auto-hide bottom-nav when keyboard is up ─────────────────── */
body[data-bn-keyboard="1"] .bottom-nav {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
body[data-bn-keyboard="1"] .main {
  padding-bottom: 1rem !important;
}

/* ── 8. RTL support ───────────────────────────────────────────────── */
[dir="rtl"] .bottom-nav__item.is-active::before { transform: translate(50%, -50%); }
[dir="rtl"] .bn-subnav__panel { transform: translateY(110%); }
[dir="rtl"] .bn-subnav__hd::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
[dir="rtl"] .bn-subnav__hd-goto svg { transform: scaleX(-1); }

/* ── 9. Pages without bottom-nav (auth, error, public) skip padding ─ */
body:not(:has(.bottom-nav)) .main,
body.auth .main,
body.no-bottom-nav .main {
  padding-bottom: 1rem !important;
}

/* ── 10. Ensure hidden state survives across all viewports ────────── */
@media (max-width: 1919px) {
  .bottom-nav[data-bn-hidden="1"],
  body[data-bn-hidden="1"] .bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
}

/* ── 11. Animated active-pill that follows the tab ───────────────── */
.bottom-nav { position: fixed; }
.bottom-nav__active-pill {
  position: absolute;
  pointer-events: none;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand, #2563eb) 14%, transparent),
    color-mix(in srgb, #7c3aed 14%, transparent));
  border-radius: 14px;
  z-index: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--brand, #2563eb) 28%, transparent);
  transition: left .35s cubic-bezier(.34,1.4,.64,1), width .35s cubic-bezier(.34,1.4,.64,1);
  opacity: 0;
}
.bottom-nav[data-pill-ready="1"] .bottom-nav__active-pill { opacity: 1; }
/* When the JS-driven pill is active, suppress the per-tab ::before pill */
.bottom-nav[data-pill-ready="1"] .bottom-nav__item.is-active::before {
  background: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .bottom-nav__active-pill {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand, #2563eb) 26%, transparent),
    color-mix(in srgb, #7c3aed 24%, transparent));
}

/* ── 12. EMI center-button — clamp on tiny screens to avoid overflow ─ */
@media (max-width: 380px) {
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 38px; height: 38px;
    margin-top: -6px;
  }
  .bottom-nav__item--emi .bottom-nav__icon svg { width: 18px; height: 18px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 32px; height: 32px;
    margin-top: 0;
    box-shadow: 0 2px 8px rgba(5,150,105,.4);
  }
  .bottom-nav__item--emi .bottom-nav__icon svg { width: 16px; height: 16px; }
}

/* ── 13. Public website pages (homepage, plots) — no nav, no padding ─ */
.public-shell ~ .bottom-nav,
body.website .bottom-nav,
body.public .bottom-nav { display: none !important; }
body.website .main,
body.public .main { padding-bottom: 0 !important; }

/* ── 14. Subnav alignment with floating-pill bottom nav ───────────── */
@media (max-width: 1199px) {
  .bn-subnav {
    bottom: calc(var(--bn-h, 60px) + var(--bn-pad-bot, env(safe-area-inset-bottom, 0px)));
  }
  .bn-subnav__panel {
    border-radius: 22px 22px 0 0;
    margin: 0 .5rem;
  }
}

/* ── 15. Keep main content visible above the floating nav with smooth scroll-bottom ── */
.main {
  scroll-padding-bottom: calc(var(--bn-h, 60px) + var(--bn-pad-bot, 0px) + 1rem);
}

/* ── 16. Reduced-motion guards for v10 ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bottom-nav__active-pill,
  body[data-bn-keyboard="1"] .bottom-nav {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v11 — Consolidating reset (must come last in this file)

   Problem this layer solves:
   This stylesheet contains FIVE overlapping `.bottom-nav` rule sets accumulated
   over time (lines ~4333, ~14364, ~15309, ~19022, ~25008). Two of them pin the
   bar to `width: min(460px, calc(100vw - 24px))` with `display: grid` and
   `overflow: hidden`. The EMI button additionally forces `width: 52px !important`,
   so on narrow viewports the first three tabs (Home/Plots/EMI) get clipped
   outside the 460-px pill, leaving only Refer/Life/Profile visible — exactly
   the user's bug report.

   Strategy:
   - Force full-width on phones (≤ 768 px), centered floating-pill on tablets.
   - Reset items container to `display: flex` with `flex-wrap: nowrap` and let
     each item shrink fairly via `flex: 1 1 0; min-width: 0`.
   - Drop EMI's `width: 52px !important` and let it inherit the flex slot,
     but keep its elevated rounded look via padding + transform.
   - Remove `overflow: hidden` from the bar so nothing visible gets clipped.
   - Ensure ALL six tabs are visible at every common phone width (320 px → 1024 px).
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bar shell on phones — full width, NOT a 460-px pill ─────────── */
@media (max-width: 768px) {
  .bottom-nav {
    /* Override the duplicate floating-pill rules that cap width to 460px */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: stretch !important;
    height: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ── 2. Items container — always flex, never grid, never overflow ──── */
.bottom-nav__items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 clamp(.1rem, .5vw, .55rem) !important;
  gap: 0 !important;
  position: relative;
  z-index: 1;
  /* Cap on roomy viewports only */
  max-width: 100% !important;
  grid-template-columns: none !important;
}
@media (min-width: 600px) and (max-width: 1199px) {
  .bottom-nav__items { max-width: min(720px, 100%) !important; }
}

/* ── 3. Each tab — true flex slot, share width evenly ──────────────── */
.bottom-nav__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  padding: clamp(.2rem, .7vw, .55rem) clamp(.05rem, .25vw, .3rem) !important;
  gap: clamp(2px, .4vw, 5px) !important;
  /* Reset width forces from prior duplicates */
  width: auto !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* ── 4. Icon dimensions — fluid clamp ──────────────────────────────── */
.bottom-nav__icon {
  width:  clamp(32px, 7vw, 48px) !important;
  height: clamp(24px, 5vw, 36px) !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.bottom-nav__icon svg {
  width:  clamp(18px, 4.5vw, 24px) !important;
  height: clamp(18px, 4.5vw, 24px) !important;
}

/* ── 5. Label — single line, ellipsis, no overflow ─────────────────── */
.bottom-nav__label {
  font-size: clamp(.55rem, 1.4vw, .68rem) !important;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 6. EMI elevated button — release the hard 52px width ──────────── */
.bottom-nav__item--emi {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100%;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bottom-nav__item--emi .bottom-nav__icon {
  width: clamp(36px, 8.5vw, 50px) !important;
  height: clamp(36px, 8.5vw, 50px) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%) !important;
  box-shadow:
    0 4px 14px rgba(5,150,105,.45),
    0 0 0 3px rgba(255,255,255,.85) !important;
  margin-top: clamp(-8px, -1.4vw, -4px);
  color: #fff !important;
}
.bottom-nav__item--emi .bottom-nav__icon svg {
  color: #fff !important;
  stroke: #fff !important;
  width: clamp(18px, 4vw, 22px) !important;
  height: clamp(18px, 4vw, 22px) !important;
}

/* ── 7. Tiny phones (≤ 360 px) — extra compression, all 6 still fit ── */
@media (max-width: 360px) {
  .bottom-nav { --bn-h: 56px; }
  .bottom-nav__items { padding: 0 .1rem !important; }
  .bottom-nav__item   { padding: .25rem .05rem !important; min-height: 42px; }
  .bottom-nav__icon   { width: 28px !important; height: 22px !important; }
  .bottom-nav__icon svg { width: 16px !important; height: 16px !important; }
  .bottom-nav__label  { font-size: .5rem !important; }
  .bottom-nav__item--emi .bottom-nav__icon {
    width: 32px !important; height: 32px !important;
    margin-top: -2px;
  }
  .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 16px !important; height: 16px !important;
  }
}

/* ── 8. Foldable cover-screen (≤ 280 px) — drop labels, icon-only ──── */
@media (max-width: 280px) {
  .bottom-nav__label { display: none !important; }
}

/* ── 9. Tablet pill mode (769–1199 px touchscreen) — keep floating ─── */
@media (min-width: 769px) and (max-width: 1199px) {
  .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: visible !important;
    display: flex !important;
    height: calc(var(--bn-h, 68px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .bottom-nav__items { max-width: 720px !important; }
}

/* ── 10. Defensive — never let any prior rule clip items horizontally ─ */
.bottom-nav { overflow-x: visible !important; }
.bottom-nav__items { overflow: visible !important; }

/* ── 11. Active indicator — single, predictable underline pill ──────── */
.bottom-nav__item.is-active::before {
  /* Override the conflicting grid / dot / pill indicators from earlier rule sets */
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 22% !important; right: 22% !important;
  bottom: auto !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 0 0 4px 4px !important;
  background: linear-gradient(90deg, var(--brand, #2563eb), #7c3aed) !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.4) !important;
  transform: none !important;
  display: block !important;
}
.bottom-nav__item--emi.is-active::before { display: none !important; }
/* Suppress redundant ::after dot from one of the rule sets */
.bottom-nav__item.is-active::after { display: none !important; }

/* ── 12. Body padding so content never sits under the nav ───────────── */
@media (max-width: 1199px) {
  body:has(.bottom-nav) .main {
    padding-bottom: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}

/* ── 13. Reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav, .bottom-nav__item, .bottom-nav__icon, .bottom-nav__icon svg {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v12 — Cross-page coexistence layer

   Provides a single `--bn-clearance` custom property that every page's
   bottom-fixed elements (FABs, bulk action bars, sticky CTAs, snackbars)
   can reference: `bottom: calc(var(--bn-clearance) + Ypx)`.

   Updates to nav height (e.g., landscape mode, tablet, etc.) propagate
   automatically to every clearing element — no per-page math required.

   Also normalises z-index so layers stack predictably:
     bottom-nav   = 45
     FABs         = 50  (above nav)
     bulk-bar     = 60  (above FABs)
     toasts       = 70
     bn-subnav    = 44  (just below nav)
     modals       = 100+
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bn-clearance: 0px;
}
@media (max-width: 1199px) {
  :root {
    --bn-clearance: calc(var(--bn-h, 60px) + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1200px) and (hover: none) and (pointer: coarse) {
  :root {
    --bn-clearance: calc(var(--bn-h, 64px) + env(safe-area-inset-bottom, 0px));
  }
}

/* When the nav is hidden (scroll-down auto-hide, keyboard up, modal open),
   collapse the clearance so FABs reclaim the space. */
body[data-bn-hidden="1"]:not([data-bn-keyboard="1"]),
body.bn-hide,
body[data-bn-keyboard="1"],
body.ref-tier-open,
body.ref-share-open {
  --bn-clearance: 0px;
}

/* ── 1. Auto-clear FABs across all pages ─────────────────────────────── */
.pl-fab,
.pl-top-btn,
.ref-fab,
.land-totop,
.land-install-fab,
.fab,
.floating-cta {
  /* Use clearance + extra spacing only when actual `bottom` isn't already
     overridden by inline style on the element. The calc respects the
     element's prior bottom value if it was set with --bn-clearance. */
  bottom: calc(var(--bn-clearance) + .9rem) !important;
}

/* ── 2. Bulk action bars sit above the nav, never under it ──────────── */
.bulk-bar,
.bulk-action-bar,
.ps-action-bar {
  bottom: var(--bn-clearance) !important;
  z-index: 60 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 3. Snackbars / toasts above the nav ─────────────────────────────── */
.snackbar,
.land-toast,
.land-snack {
  bottom: calc(var(--bn-clearance) + 1rem) !important;
}

/* ── 4. Sub-nav (the panel that opens above bottom-nav on tap) ──────── */
.bn-subnav {
  bottom: var(--bn-clearance) !important;
}

/* ── 5. Universal main padding so content never sits under the nav ──── */
@media (max-width: 1199px) {
  .app .main,
  .app > .main,
  body:has(.bottom-nav) .main {
    padding-bottom: calc(var(--bn-clearance) + 1rem) !important;
  }
}
/* Pages that explicitly opt out get the standard padding back */
body.no-bottom-nav .main,
body.auth .main,
body.website .main,
body.public .main {
  padding-bottom: 1rem !important;
}

/* ── 6. Auto-hide nav when a full-screen modal owns the screen ──────── */
body:has(.modal.is-open),
body:has(.modal--full-screen.is-open),
body:has([data-fullscreen-modal="open"]),
body:has(.land-sg-modal[data-open="1"]),
body:has(.regw-stepmenu[data-open="1"]),
body:has(.bn-subnav.is-open) {
  /* Don't hide for sub-nav — that's intentional */
}
body:has(.modal--full-screen.is-open) .bottom-nav,
body:has([data-fullscreen-modal="open"]) .bottom-nav,
body:has(.land-sg-modal[data-open="1"]) .bottom-nav {
  transform: translateY(110%) !important;
  pointer-events: none !important;
  transition: transform .25s ease !important;
}

/* ── 7. iOS safe-area override for landscape with notch on side ─────── */
@media (orientation: landscape) and (max-width: 920px) {
  .bottom-nav {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
}

/* ── 8. Z-index normalisation ───────────────────────────────────────── */
.bottom-nav        { z-index: 45 !important; }
.bn-subnav         { z-index: 44 !important; }
.bn-subnav.is-open { z-index: 46 !important; } /* lift above nav while open */
.pl-fab, .ref-fab, .land-install-fab, .land-totop, .fab, .floating-cta { z-index: 50 !important; }
.bulk-bar, .bulk-action-bar, .ps-action-bar { z-index: 60 !important; }
.snackbar, .land-toast, .land-snack { z-index: 70 !important; }

/* ── 9. Print — strip every floating layer ──────────────────────────── */
@media print {
  .bottom-nav, .bn-subnav, .pl-fab, .ref-fab, .land-totop,
  .land-install-fab, .fab, .floating-cta,
  .bulk-bar, .bulk-action-bar, .ps-action-bar,
  .snackbar, .land-toast, .land-snack {
    display: none !important;
  }
}

/* ── 10. Reduced-motion — skip nav slide animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  body:has(.modal--full-screen.is-open) .bottom-nav,
  body:has([data-fullscreen-modal="open"]) .bottom-nav,
  body:has(.land-sg-modal[data-open="1"]) .bottom-nav {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v13 — FINAL RESET (highest-specificity, must win)

   Uses `body nav.bottom-nav` (specificity 0,1,2) instead of `.bottom-nav`
   (0,1,0) so this layer wins regardless of which earlier rule set is
   applied. Wraps every layout property the duplicate rule sets at lines
   ~14364, ~15309, ~19022, ~25008 might still try to set.

   Goal: full-width 6-tab bar on every phone, every tablet, every page.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  body nav.bottom-nav {
    /* Anchor — full width, no centered pill */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: auto;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px));
    transform: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow:
      0 -1px 0 rgba(15,23,42,.06),
      0 -8px 28px rgba(15,23,42,.08);
    overflow: visible;
    /* Layout */
    display: flex;
    align-items: stretch;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 45;
  }
  [data-theme="dark"] body nav.bottom-nav {
    background: rgba(10,14,26,.92);
    border-top-color: rgba(255,255,255,.07);
  }

  /* Items row — flex, full-width, evenly distributed */
  body nav.bottom-nav .bottom-nav__items {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0 .25rem;
    gap: 0;
    overflow: visible;
    grid-template-columns: none;
    max-width: 100%;
    position: relative;
  }

  /* Each tab — true flex slice, allows shrink */
  body nav.bottom-nav .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .3rem .15rem;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: clamp(.55rem, 1.4vw, .68rem);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s, transform .12s;
    text-decoration: none;
    overflow: hidden;
  }
  body nav.bottom-nav .bottom-nav__item:active {
    transform: scale(.92);
    transition-duration: .08s;
  }
  body nav.bottom-nav .bottom-nav__item.is-active {
    color: var(--brand, #2563eb);
    font-weight: 700;
  }

  /* Icon size — fluid clamp */
  body nav.bottom-nav .bottom-nav__icon {
    width: clamp(36px, 8vw, 44px);
    height: clamp(28px, 6vw, 32px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: inherit;
    background: transparent;
    transition: background .18s, transform .18s;
  }
  body nav.bottom-nav .bottom-nav__icon svg {
    width: clamp(20px, 5vw, 24px);
    height: clamp(20px, 5vw, 24px);
    stroke: currentColor;
    fill: currentColor;
  }
  body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--brand, #2563eb) 16%, transparent),
      color-mix(in srgb, var(--brand, #2563eb) 8%,  transparent));
  }
  body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon svg {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--brand, #2563eb) 40%, transparent));
  }

  /* Label — single line, ellipsis */
  body nav.bottom-nav .bottom-nav__label {
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }

  /* EMI elevated centre tab — flex slot like everyone else, jewel inside */
  body nav.bottom-nav .bottom-nav__item--emi {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #059669;
  }
  body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon {
    width: clamp(40px, 9.5vw, 48px);
    height: clamp(40px, 9.5vw, 48px);
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%);
    box-shadow:
      0 4px 14px rgba(5,150,105,.45),
      0 0 0 3px rgba(255,255,255,.92);
    color: #fff;
    margin-top: clamp(-8px, -1.4vw, -4px);
  }
  body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon svg {
    color: #fff;
    stroke: #fff;
    fill: none;
    width: clamp(18px, 4vw, 22px);
    height: clamp(18px, 4vw, 22px);
  }
  body nav.bottom-nav .bottom-nav__item--emi:active .bottom-nav__icon {
    transform: scale(.94);
  }
  body nav.bottom-nav .bottom-nav__item--emi.is-active .bottom-nav__icon {
    box-shadow:
      0 6px 20px rgba(5,150,105,.6),
      0 0 0 3px rgba(255,255,255,.95);
  }
  body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__label {
    color: #059669;
    -webkit-text-fill-color: #059669;
  }

  /* Single, predictable active indicator — top notch line */
  body nav.bottom-nav .bottom-nav__item::before,
  body nav.bottom-nav .bottom-nav__item::after {
    content: none;
  }
  body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--brand, #2563eb), #7c3aed);
    box-shadow: 0 2px 6px rgba(37,99,235,.45);
  }

  /* Glow accent — soft top gradient strip */
  body nav.bottom-nav .bottom-nav__glow {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 36px;
    pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand, #2563eb) 4%, transparent) 0%,
      transparent 100%);
  }
}

/* ── Tiny phones (≤ 360 px) — compress harder, all 6 tabs always fit ─ */
@media (max-width: 360px) {
  body nav.bottom-nav { min-height: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body nav.bottom-nav .bottom-nav__items { height: 56px; padding: 0 .1rem; }
  body nav.bottom-nav .bottom-nav__item   { padding: .25rem .05rem; }
  body nav.bottom-nav .bottom-nav__icon   { width: 32px; height: 26px; }
  body nav.bottom-nav .bottom-nav__icon svg { width: 18px; height: 18px; }
  body nav.bottom-nav .bottom-nav__label  { font-size: .55rem; }
  body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon {
    width: 38px; height: 38px;
    margin-top: -3px;
  }
  body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 16px; height: 16px;
  }
}

/* ── Foldable cover-screens (≤ 280 px) — icons only ─────────────────── */
@media (max-width: 280px) {
  body nav.bottom-nav .bottom-nav__label { display: none; }
  body nav.bottom-nav .bottom-nav__item   { padding: .3rem 0; }
}

/* ── Tablet (1200-1919px touch) — keep nav, centred container ───────── */
@media (min-width: 1200px) and (max-width: 1919px) and (hover: none) and (pointer: coarse) {
  body nav.bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: auto;
    transform: none;
    border-radius: 22px 22px 0 0;
    margin: 0;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
  }
  body nav.bottom-nav .bottom-nav__items {
    max-width: 760px;
    margin: 0 auto;
    height: 68px;
    padding: 0 1rem;
  }
}

/* ── Hide nav for opt-outs (auth, public, modal-owned) ──────────────── */
body.no-bottom-nav nav.bottom-nav,
body.auth nav.bottom-nav,
body.website nav.bottom-nav,
body.public nav.bottom-nav {
  display: none;
}
body.bn-hide nav.bottom-nav,
body[data-bn-hidden="1"] nav.bottom-nav,
body[data-bn-keyboard="1"] nav.bottom-nav {
  transform: translateY(110%);
  pointer-events: none;
  transition: transform .25s ease;
}

/* ── Page padding so content always clears the nav ──────────────────── */
@media (max-width: 1199px) {
  body:has(nav.bottom-nav) .app .main,
  body:has(nav.bottom-nav) > .app > .main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem);
  }
}
@media (max-width: 360px) {
  body:has(nav.bottom-nav) .app .main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body nav.bottom-nav,
  body nav.bottom-nav .bottom-nav__item,
  body nav.bottom-nav .bottom-nav__icon,
  body nav.bottom-nav .bottom-nav__icon svg {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v14 — Premium interaction polish
   - Double-tap active tab → scroll-to-top of main
   - Long-press any tab → direct navigation (skip the panel)
   - Horizontal swipe on nav → switch tabs
   - Badge animations (pop on count change)
   - Predictive prefetch on long-press
   - Tap ripple wave (per-tab, role-tinted)
   - Long-press progress ring (visual countdown to direct-nav fire)
   - Idle dimming after inactivity
   - Edge-swipe gesture indicator
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tab ripple wave on tap ────────────────────────────────────── */
body nav.bottom-nav .bottom-nav__item {
  overflow: hidden;
}
body nav.bottom-nav .bn-ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand, #2563eb) 24%, transparent);
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  animation: bnRipple .55s ease-out forwards;
  z-index: 0;
}
body nav.bottom-nav .bottom-nav__item--emi .bn-ripple {
  background: rgba(255,255,255,.35);
}
@keyframes bnRipple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ── 2. Long-press progress ring (visual countdown) ───────────────── */
body nav.bottom-nav .bn-longpress-ring {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  border-radius: 14px;
  border: 2px solid transparent;
  background:
    conic-gradient(var(--brand, #2563eb) calc(var(--lp-pct, 0) * 1%), transparent 0)
    border-box;
  -webkit-mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .15s;
}
body nav.bottom-nav .bottom-nav__item[data-longpress="1"] .bn-longpress-ring {
  opacity: 1;
}

/* ── 3. Badge animation (pulse on count change) ───────────────────── */
body nav.bottom-nav .bn-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -22px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 0 2px var(--bg-elev, #fff);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
body nav.bottom-nav .bn-badge--brand { background: var(--brand, #2563eb); }
body nav.bottom-nav .bn-badge[data-changed="1"] {
  animation: bnBadgePop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bnBadgePop {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.4); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
/* Notification dot — single pulsing dot when there's an update */
body nav.bottom-nav .bn-dot {
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  z-index: 3;
  box-shadow: 0 0 0 2px var(--bg-elev, #fff);
  animation: bnDotPulse 2s ease-in-out infinite;
}
@keyframes bnDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg-elev, #fff), 0 0 0 0 rgba(220,38,38,.5); }
  50%      { box-shadow: 0 0 0 2px var(--bg-elev, #fff), 0 0 0 6px rgba(220,38,38,0); }
}

/* ── 4. Idle dim — fade nav slightly after 8s of inactivity ───────── */
body nav.bottom-nav {
  transition: opacity .35s ease, transform .25s ease;
}
body[data-bn-idle="1"] nav.bottom-nav { opacity: .55; }
body[data-bn-idle="1"] nav.bottom-nav:hover,
body[data-bn-idle="1"] nav.bottom-nav:focus-within { opacity: 1; }

/* ── 5. Edge-swipe hint zones (subtle, on first interaction) ──────── */
body nav.bottom-nav .bn-edge-hint {
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .15s;
}
body nav.bottom-nav .bn-edge-hint--left  { left: 0;  background: linear-gradient(90deg, color-mix(in srgb, var(--brand, #2563eb) 22%, transparent), transparent); }
body nav.bottom-nav .bn-edge-hint--right { right: 0; background: linear-gradient(-90deg, color-mix(in srgb, var(--brand, #2563eb) 22%, transparent), transparent); }
body nav.bottom-nav[data-swipe-near="left"]  .bn-edge-hint--left  { opacity: 1; }
body nav.bottom-nav[data-swipe-near="right"] .bn-edge-hint--right { opacity: 1; }

/* ── 6. Swipe progress meter (above the bar) ──────────────────────── */
body nav.bottom-nav .bn-swipe-meter {
  position: absolute;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brand, #2563eb), #7c3aed);
  border-radius: 0 0 4px 4px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
body nav.bottom-nav[data-swipe-active="1"] .bn-swipe-meter { opacity: 1; }
body nav.bottom-nav[data-swipe-direction="left"]  .bn-swipe-meter { right: 0; left: auto; }
body nav.bottom-nav[data-swipe-direction="right"] .bn-swipe-meter { left: 0; }

/* ── 7. Reduced motion guards for v14 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body nav.bottom-nav .bn-ripple,
  body nav.bottom-nav .bn-longpress-ring,
  body nav.bottom-nav .bn-badge[data-changed="1"],
  body nav.bottom-nav .bn-dot,
  body nav.bottom-nav .bn-swipe-meter {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   APP v15 — Comprehensive mobile responsiveness across every page
   - Forms (44 px touch targets, no iOS zoom)
   - Tables (auto-stack to cards on mobile)
   - Buttons (consistent sizing, ripple-friendly)
   - Cards (fluid padding)
   - Topbar (slim mobile mode, search expand)
   - Modals (bottom-sheet on mobile)
   - Sidebar (drawer-style on phones)
   - Toasts / alerts (mobile-anchored)
   - Typography (fluid clamp scaling)
   - Spacing tokens (mobile-first)
   - Image, video, embeds (max-width 100%)
   - Tap targets (≥ 44 × 44 globally)
   - Horizontal-overflow guards
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Box-sizing reset + horizontal-overflow guard ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
img, video, iframe, embed, object, svg { max-width: 100%; height: auto; }
pre, code, kbd, samp { word-wrap: break-word; word-break: break-word; }

/* ── 2. Fluid type — readable across 320 → 1920 px viewports ─────────── */
:root {
  --fs-xs:   clamp(.7rem,  1.6vw + .25rem, .8rem);
  --fs-sm:   clamp(.78rem, 1.7vw + .3rem,  .88rem);
  --fs-base: clamp(.9rem,  2vw   + .4rem,  1rem);
  --fs-md:   clamp(1rem,   2.2vw + .5rem,  1.12rem);
  --fs-lg:   clamp(1.12rem,2.6vw + .55rem, 1.28rem);
  --fs-xl:   clamp(1.25rem,3vw   + .6rem,  1.5rem);
  --fs-2xl:  clamp(1.45rem,3.6vw + .7rem,  1.85rem);
  --fs-3xl:  clamp(1.75rem,4.8vw + .85rem, 2.4rem);
  --fs-4xl:  clamp(2rem,   6vw   + 1rem,   3rem);
  /* Mobile-first spacing tokens */
  --sp-1: clamp(.25rem, .5vw,  .35rem);
  --sp-2: clamp(.45rem, .8vw,  .6rem);
  --sp-3: clamp(.65rem, 1.2vw, .85rem);
  --sp-4: clamp(.85rem, 1.6vw, 1.1rem);
  --sp-5: clamp(1.1rem, 2.2vw, 1.5rem);
  --sp-6: clamp(1.4rem, 2.8vw, 2rem);
}

/* ── 3. Form inputs — iOS-zoom-proof + 44 px tap targets ─────────────── */
@media (max-width: 768px) {
  .form-control,
  .form-select,
  .form-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important; /* iOS Safari needs ≥ 16 px to suppress focus zoom */
    min-height: 44px;
    padding: .65rem .85rem;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
  }
  textarea {
    min-height: 84px;
    line-height: 1.45;
  }
  /* Number inputs — show numeric keypad */
  input[inputmode="numeric"],
  input[type="number"] {
    font-variant-numeric: tabular-nums;
  }
  /* Autofocus inputs into view above keyboard */
  input:focus, textarea:focus, select:focus {
    scroll-margin-top: calc(var(--bn-clearance, 0px) + 5rem);
  }
}

/* ── 4. Buttons — consistent sizing, prevent double-tap zoom ─────────── */
@media (max-width: 768px) {
  .btn,
  button.btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 44px;
    padding: .65rem 1rem;
    font-size: .95rem;
    border-radius: 10px;
    touch-action: manipulation;
  }
  .btn-sm { min-height: 36px; padding: .45rem .75rem; font-size: .82rem; border-radius: 8px; }
  .btn-xs { min-height: 32px; padding: .35rem .6rem;  font-size: .75rem; border-radius: 7px; }
  .btn-lg { min-height: 50px; padding: .85rem 1.25rem; font-size: 1.05rem; border-radius: 12px; }
  .btn-block, .btn-block * { width: 100%; }
}

/* ── 5. Cards — fluid padding, no overflow ───────────────────────────── */
@media (max-width: 768px) {
  .card {
    border-radius: 14px;
    overflow-wrap: break-word;
  }
  .card__header,
  .card__body,
  .card__footer {
    padding: var(--sp-3);
  }
  .card__title {
    font-size: var(--fs-md);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .card { border-radius: 12px; }
  .card__header,
  .card__body,
  .card__footer { padding: var(--sp-2); }
}

/* ── 6. Tables — auto-stack to card layout on phones ────────────────── */
@media (max-width: 640px) {
  .table-responsive,
  .table-stack-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Tables marked .table-stack render as stacked cards using
     data-label attributes set by the existing JS in footer.php. */
  .table-stack {
    display: block;
    width: 100%;
    border-collapse: collapse;
  }
  .table-stack thead {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .table-stack tbody { display: block; }
  .table-stack tr {
    display: block;
    margin-bottom: .85rem;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: .6rem .85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .85rem;
    padding: .35rem 0;
    border: 0;
    font-size: .88rem;
    line-height: 1.35;
    text-align: right;
  }
  .table-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .68rem;
  }
  .table-stack td:last-child { border-bottom: 0; }
  /* Generic tables that fall outside .table-stack get horizontal scroll */
  .table:not(.table-stack):not(.no-shrink) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .82rem;
  }
}

/* ── 7. Topbar — slim mobile mode, hide non-essentials ───────────────── */
@media (max-width: 768px) {
  .topbar {
    padding: 0 .65rem !important;
    height: 54px;
  }
  .topbar__title,
  .breadcrumbs__current {
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__icon-btn { width: 40px; height: 40px; }
  .topbar__search { display: none; }
  .topbar__search-trigger { display: inline-flex; }
  /* Compact user dropdown — show avatar, hide name */
  .topbar__user-name,
  .topbar__user-chevron,
  .topbar__user-email { display: none; }
}
@media (max-width: 480px) {
  .topbar { height: 50px; }
  .topbar__title { max-width: 38vw; font-size: .95rem; }
  .topbar__icon-btn { width: 38px; height: 38px; }
}

/* ── 8. Sidebar — drawer behaviour on mobile ──────────────────────────── */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 22px rgba(0,0,0,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-sidebar="open"] .sidebar { transform: translateX(0); }
  body[data-sidebar="open"]::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 55;
    animation: sbBackdropIn .25s ease-out forwards;
  }
  @keyframes sbBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .main { margin-left: 0 !important; }
}

/* ── 9. Modals — bottom-sheet style on phones ─────────────────────────── */
@media (max-width: 640px) {
  .modal,
  .land-modal,
  [role="dialog"]:not(.regw-stepmenu):not(.regw-role-peek) {
    align-items: flex-end !important;
  }
  .modal__panel,
  .modal__content,
  .modal-dialog,
  .land-modal__panel {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: modalSheetUp .28s cubic-bezier(.34,1.36,.64,1) both;
  }
  .modal__header,
  .modal-header,
  .land-modal__hd {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  /* Drag handle */
  .modal__panel::before,
  .modal__content::before,
  .land-modal__panel::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    margin: .5rem auto .25rem;
  }
  [data-theme="dark"] .modal__panel::before,
  [data-theme="dark"] .modal__content::before,
  [data-theme="dark"] .land-modal__panel::before {
    background: rgba(255,255,255,.18);
  }
}
@keyframes modalSheetUp {
  from { transform: translateY(100%); opacity: .5; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── 10. Toasts / alerts — bottom-anchored above bn-clearance ─────────── */
@media (max-width: 768px) {
  .alert {
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: .85rem;
  }
  .alert-dismissible { padding-right: 2.5rem; }
}

/* ── 11. Lists — touch-optimised list items ───────────────────────────── */
@media (max-width: 768px) {
  .list-card,
  .list-item,
  .list-group-item {
    min-height: 56px;
    padding: .65rem .85rem;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .list-item:active,
  .list-card:active {
    transform: scale(.98);
    transition: transform .08s;
  }
}

/* ── 12. Stat blocks — fluid sizing ───────────────────────────────────── */
@media (max-width: 768px) {
  .stat,
  .stat-card {
    padding: var(--sp-3);
    border-radius: 14px;
  }
  .stat__value,
  .stat-card__value {
    font-size: var(--fs-xl);
    line-height: 1.1;
  }
  .stat__label,
  .stat-card__label {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

/* ── 13. Grid utilities — auto-stack on phones ────────────────────────── */
@media (max-width: 640px) {
  .row-2, .row-3, .row-4, .row-5, .row-6,
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  .row-auto-2 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .row-auto-2 { grid-template-columns: 1fr !important; }
}

/* ── 14. Tap-target enforcement (44 × 44 minimum) ─────────────────────── */
@media (hover: none) and (pointer: coarse) {
  a,
  button:not(.regw-progress__dot):not(.bn-subnav__close):not(.regw-resume__close),
  [role="button"],
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  /* Inline links inside paragraphs don't need 44px — exempt them */
  p a,
  li a,
  .text-content a,
  .prose a {
    min-height: auto;
    min-width: auto;
  }
}

/* ── 15. Touch-friendly scrollbars on overflow containers ─────────────── */
@media (max-width: 1023px) {
  .table-responsive,
  .scrollable-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .scrollable-x > * { scroll-snap-align: start; }
}

/* ── 16. Container responsive padding ─────────────────────────────────── */
@media (max-width: 768px) {
  .container,
  .main > .container,
  .main > section,
  .main > div:not(.app):not(.modal) {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
}
@media (max-width: 480px) {
  .container,
  .main > .container,
  .main > section {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
  }
}

/* ── 17. Heading scale — fluid + tight line-height on phones ──────────── */
@media (max-width: 768px) {
  h1, .h1 { font-size: var(--fs-3xl); line-height: 1.15; margin-bottom: var(--sp-3); }
  h2, .h2 { font-size: var(--fs-2xl); line-height: 1.2;  margin-bottom: var(--sp-3); }
  h3, .h3 { font-size: var(--fs-xl);  line-height: 1.25; margin-bottom: var(--sp-2); }
  h4, .h4 { font-size: var(--fs-lg);  line-height: 1.3;  margin-bottom: var(--sp-2); }
  h5, .h5 { font-size: var(--fs-md);  line-height: 1.35; margin-bottom: var(--sp-2); }
  h6, .h6 { font-size: var(--fs-base);line-height: 1.4;  margin-bottom: var(--sp-2); }
}

/* ── 18. Code blocks — horizontal scroll instead of overflow ──────────── */
@media (max-width: 768px) {
  pre, code {
    font-size: .8rem;
    border-radius: 8px;
  }
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: .65rem .85rem;
  }
}

/* ── 19. Drag-zoom prevention on common interactive surfaces ──────────── */
.btn, button, a, [role="button"], .card, .list-card,
.bottom-nav__item, .topbar__icon-btn,
.bn-subnav__link {
  touch-action: manipulation;
}

/* ── 20. Print — hide all interactive chrome ──────────────────────────── */
@media print {
  .topbar, .sidebar, nav.bottom-nav, .bn-subnav,
  .pl-fab, .ref-fab, .land-totop, .land-install-fab,
  .modal, .alert-dismissible button, .btn,
  .skip-link, [aria-hidden="true"] {
    display: none !important;
  }
  body, .main { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ── 21. Reduced-motion — strip mobile transitions ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modal__panel, .modal__content, .land-modal__panel,
  .sidebar, .list-item, .list-card,
  .table-stack tr {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTOM-NAV v16 — FORCE-PRIORITY FINAL RESET
   Selector: html body nav.bottom-nav  (specificity 0,1,3)
   Every layout property uses !important.
   This block beats the cascade against every prior rule set in this file.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Bar shell on all phones + tablets ──────────────────────────────── */
@media (max-width: 1199px) {
  html body nav.bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    box-shadow:
      0 -1px 0 rgba(15,23,42,.06),
      0 -8px 28px rgba(15,23,42,.08) !important;
    overflow: visible !important;
    z-index: 45 !important;
    align-items: stretch !important;
    flex-direction: row !important;
    justify-content: stretch !important;
  }
  [data-theme="dark"] html body nav.bottom-nav {
    background: rgba(10,14,26,.92) !important;
    border-top-color: rgba(255,255,255,.07) !important;
  }

  /* Items row */
  html body nav.bottom-nav .bottom-nav__items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 .25rem !important;
    gap: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Each tab */
  html body nav.bottom-nav .bottom-nav__item {
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: .3rem .15rem !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-muted, #6b7280) !important;
    font-size: clamp(.55rem, 1.4vw, .68rem) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color .18s, transform .12s !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body nav.bottom-nav .bottom-nav__item.is-active {
    color: var(--brand, #2563eb) !important;
    font-weight: 700 !important;
  }

  /* Icon */
  html body nav.bottom-nav .bottom-nav__icon {
    width: clamp(36px, 8vw, 44px) !important;
    height: clamp(28px, 6vw, 32px) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    color: inherit !important;
    background: transparent !important;
    transition: background .18s, transform .18s !important;
  }
  html body nav.bottom-nav .bottom-nav__icon svg {
    width: clamp(20px, 5vw, 24px) !important;
    height: clamp(20px, 5vw, 24px) !important;
    stroke: currentColor;
    flex-shrink: 0 !important;
  }
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--brand, #2563eb) 16%, transparent),
      color-mix(in srgb, var(--brand, #2563eb) 8%,  transparent)) !important;
  }
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon svg {
    transform: translateY(-1px) scale(1.08) !important;
  }

  /* Label */
  html body nav.bottom-nav .bottom-nav__label {
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* EMI elevated */
  html body nav.bottom-nav .bottom-nav__item--emi {
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #059669 !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon {
    width: clamp(40px, 9.5vw, 48px) !important;
    height: clamp(40px, 9.5vw, 48px) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%) !important;
    box-shadow:
      0 4px 14px rgba(5,150,105,.45),
      0 0 0 3px rgba(255,255,255,.92) !important;
    color: #fff !important;
    margin-top: clamp(-8px, -1.4vw, -4px) !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    width: clamp(18px, 4vw, 22px) !important;
    height: clamp(18px, 4vw, 22px) !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi:active .bottom-nav__icon {
    transform: scale(.94) !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi.is-active .bottom-nav__icon {
    box-shadow:
      0 6px 20px rgba(5,150,105,.6),
      0 0 0 3px rgba(255,255,255,.95) !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__label {
    color: #059669 !important;
    -webkit-text-fill-color: #059669 !important;
  }

  /* Active indicator — single top notch */
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi)::before,
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi)::after {
    content: none !important;
  }
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 22% !important;
    right: 22% !important;
    bottom: auto !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
    background: linear-gradient(90deg, var(--brand, #2563eb), #7c3aed) !important;
    box-shadow: 0 2px 6px rgba(37,99,235,.4) !important;
    transform: none !important;
    display: block !important;
    opacity: 1 !important;
  }

  /* Glow accent — soft top gradient strip */
  html body nav.bottom-nav .bottom-nav__glow {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 36px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand, #2563eb) 4%, transparent) 0%,
      transparent 100%) !important;
    z-index: 0 !important;
    border-radius: inherit;
  }
}

/* ── Tiny phones (≤ 360 px) ─────────────────────────────────────────── */
@media (max-width: 360px) {
  html body nav.bottom-nav { min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
  html body nav.bottom-nav .bottom-nav__items { height: 56px !important; padding: 0 .1rem !important; }
  html body nav.bottom-nav .bottom-nav__item   { padding: .25rem .05rem !important; }
  html body nav.bottom-nav .bottom-nav__icon   { width: 32px !important; height: 26px !important; }
  html body nav.bottom-nav .bottom-nav__icon svg { width: 18px !important; height: 18px !important; }
  html body nav.bottom-nav .bottom-nav__label  { font-size: .55rem !important; }
  html body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon {
    width: 38px !important; height: 38px !important;
    margin-top: -3px !important;
  }
  html body nav.bottom-nav .bottom-nav__item--emi .bottom-nav__icon svg {
    width: 16px !important; height: 16px !important;
  }
}

/* ── Foldable cover-screens (≤ 280 px) ──────────────────────────────── */
@media (max-width: 280px) {
  html body nav.bottom-nav .bottom-nav__label { display: none !important; }
  html body nav.bottom-nav .bottom-nav__item   { padding: .3rem 0 !important; }
}

/* ── Tablet pill (1200-1919 touch) ──────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1919px) and (hover: none) and (pointer: coarse) {
  html body nav.bottom-nav {
    display: flex !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    transform: none !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }
  html body nav.bottom-nav .bottom-nav__items {
    max-width: 760px !important;
    margin: 0 auto !important;
    height: 68px !important;
    padding: 0 1rem !important;
  }
}

/* ── Hide nav for opt-outs (auth, public, modal-owned, hidden states) ── */
html body.no-bottom-nav nav.bottom-nav,
html body.auth nav.bottom-nav,
html body.website nav.bottom-nav,
html body.public nav.bottom-nav {
  display: none !important;
}
html body.bn-hide nav.bottom-nav,
html body[data-bn-hidden="1"] nav.bottom-nav,
html body[data-bn-keyboard="1"] nav.bottom-nav {
  transform: translateY(110%) !important;
  pointer-events: none !important;
  transition: transform .25s ease !important;
}

/* ── Page padding so content always clears the nav ──────────────────── */
@media (max-width: 1199px) {
  body:has(nav.bottom-nav) .app .main,
  body:has(nav.bottom-nav) > .app > .main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}
@media (max-width: 360px) {
  body:has(nav.bottom-nav) .app .main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body nav.bottom-nav,
  html body nav.bottom-nav .bottom-nav__item,
  html body nav.bottom-nav .bottom-nav__icon,
  html body nav.bottom-nav .bottom-nav__icon svg {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Sub-nav / swipe meter / longpress ring — keep visible above bar ── */
html body nav.bottom-nav .bn-swipe-meter {
  z-index: 4 !important;
}
html body nav.bottom-nav .bn-longpress-ring {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   APP v17 — Accessibility hardening
   - Stronger focus rings on phones (finger users need bigger)
   - prefers-contrast: high mode (only 1 prior occurrence)
   - forced-colors (Windows High Contrast) mode
   - Live-region utility for dynamic announcements
   - keyboard-only focus styles for the bottom-nav
   - target-size enforcement for known small icon buttons
   - WCAG-safe text-color contrast on auto-themed backgrounds
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Larger, role-tinted focus rings on touch devices ─────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn:focus-visible,
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  [tabindex="0"]:focus-visible,
  .bottom-nav__item:focus-visible,
  .bn-subnav__link:focus-visible,
  .form-control:focus-visible,
  .form-select:focus-visible,
  .topbar__icon-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand, #2563eb) 60%, transparent);
    outline-offset: 3px;
    border-radius: 8px;
  }
}

/* ── 2. prefers-contrast: more / high — bumped contrast everywhere ─── */
@media (prefers-contrast: more) {
  :root {
    --text:        #000;
    --text-muted:  #2a2a2a;
    --border:      #6b7280;
    --bg-elev:     #fff;
    --surface:     #fff;
    --brand:       #1d4ed8;
  }
  [data-theme="dark"] {
    --text:        #fff;
    --text-muted:  #d1d5db;
    --border:      #9ca3af;
    --bg-elev:     #000;
    --surface:     #000;
    --brand:       #60a5fa;
  }
  .btn { border-width: 2px !important; }
  .btn-primary { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
  .btn-secondary, .btn-ghost {
    border-color: currentColor !important;
    background: transparent !important;
  }
  .form-control, .form-select, .form-textarea {
    border-width: 2px !important;
    border-color: var(--text) !important;
  }
  .card, .alert {
    border-width: 2px !important;
  }
  /* Bottom-nav: ditch the soft glass for a solid background with strong borders */
  html body nav.bottom-nav {
    background: var(--surface) !important;
    border-top: 2px solid var(--text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body nav.bottom-nav .bottom-nav__item.is-active {
    color: var(--brand) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
}

/* ── 3. forced-colors (Windows High Contrast / system override) ──────── */
@media (forced-colors: active) {
  :root {
    --brand: CanvasText;
    --text:  CanvasText;
    --bg-elev: Canvas;
    --surface: Canvas;
    --border:  CanvasText;
  }
  /* Buttons: keep system rendering for predictable HC look */
  .btn, button, [role="button"] {
    background: ButtonFace !important;
    color:      ButtonText !important;
    border:     2px solid ButtonText !important;
    forced-color-adjust: none;
  }
  .btn-primary, button.btn-primary {
    background: Highlight !important;
    color:      HighlightText !important;
    border-color: HighlightText !important;
  }
  /* Active states use system Highlight */
  .bottom-nav__item.is-active,
  .sb__link.is-active,
  [aria-current="page"] {
    color: Highlight !important;
    forced-color-adjust: none;
  }
  /* Focus indicators must stay visible */
  *:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
  /* Decorative gradients / shadows / pseudo backgrounds — strip */
  .bottom-nav__glow,
  .bottom-nav__active-pill,
  .bn-ripple,
  .regw-particles,
  .auth-shell::before,
  .auth-shell::after {
    display: none !important;
  }
  /* Bars and surfaces use Canvas */
  html body nav.bottom-nav,
  .topbar,
  .sidebar,
  .card,
  .modal__panel {
    background: Canvas !important;
    border-color: CanvasText !important;
  }
  /* The active-tab indicator has to be visible — use Highlight */
  html body nav.bottom-nav .bottom-nav__item:not(.bottom-nav__item--emi).is-active::before {
    background: Highlight !important;
    box-shadow: none !important;
  }
}

/* ── 4. Aria-live region utility ─────────────────────────────────────── */
.sr-live {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 5. Bottom-nav keyboard navigation polish ────────────────────────── */
/* When focus enters a bottom-nav tab via keyboard, lift it visibly so a
   user without haptic feedback knows where they are. */
html body nav.bottom-nav .bottom-nav__item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #2563eb) 70%, transparent) !important;
  outline-offset: -3px;
  border-radius: 8px !important;
  z-index: 5;
}
html body nav.bottom-nav .bottom-nav__item:focus-visible .bottom-nav__icon {
  background: color-mix(in srgb, var(--brand, #2563eb) 14%, transparent) !important;
  transform: translateY(-2px);
}

/* ── 6. Target-size: small admin icon buttons can be < 44 px → bump ─── */
@media (hover: none) and (pointer: coarse) {
  .topbar__icon-btn,
  .icon-btn,
  .table .btn-sm,
  .btn-icon,
  .pagination .page-link,
  .bn-subnav__close,
  .modal__close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── 7. Form fields: make labels obviously associated and required ──── */
.form-label .required-mark,
label .required-mark,
.form-required::after {
  content: " *";
  color: #dc2626;
  font-weight: 700;
  margin-left: .15rem;
  speak: literal-punctuation; /* SR: read "asterisk" */
}
[required] + .form-error,
.form-control[aria-invalid="true"] + .form-error {
  color: #dc2626;
  font-size: .82rem;
  margin-top: .25rem;
}

/* ── 8. Disabled-state visual that's distinguishable beyond opacity ─── */
:disabled,
[aria-disabled="true"],
.disabled,
.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  /* Add a strikethrough-like pattern so it's not just colour-based */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    color-mix(in srgb, currentColor 10%, transparent) 6px 7px
  );
}
.btn[disabled],
button:disabled {
  /* Skip the pattern on buttons — could look noisy. Just keep opacity. */
  background-image: none;
}

/* ── 9. Reduced-data — strip backdrop-filter for low-bandwidth/CPU ──── */
@media (prefers-reduced-data: reduce) {
  html body nav.bottom-nav,
  .topbar,
  .modal__panel,
  .bn-subnav__panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-elev, #fff) !important;
  }
  [data-theme="dark"] html body nav.bottom-nav,
  [data-theme="dark"] .topbar {
    background: rgba(10,14,26,1) !important;
  }
}

/* ── 10. Print: ensure page is usable without floating chrome ───────── */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a, a:visited { color: #000 !important; text-decoration: underline; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #555 !important;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
}

/* ════════════════════════════════════════════════════════════════════════
   APP v18 — User-controllable text scale (WCAG 1.4.4 Resize text)
   <html data-text-scale="1.25"> scales root font-size + spacing tokens.
   ════════════════════════════════════════════════════════════════════════ */

html { font-size: calc(16px * var(--user-text-scale, 1)); }
html[data-text-scale="1"]      { --user-text-scale: 1; }
html[data-text-scale="1.125"]  { --user-text-scale: 1.125; }
html[data-text-scale="1.25"]   { --user-text-scale: 1.25; }
html[data-text-scale="1.5"]    { --user-text-scale: 1.5; }
html[data-text-scale="2"]      { --user-text-scale: 2; }

/* When user has bumped text scale ≥ 125 %, give containers more breathing room */
html[data-text-scale="1.25"] body,
html[data-text-scale="1.5"] body,
html[data-text-scale="2"] body {
  --sp-2: clamp(.55rem, 1vw, .75rem);
  --sp-3: clamp(.8rem, 1.4vw, 1.05rem);
  line-height: 1.55;
}
html[data-text-scale="2"] .bottom-nav__label,
html[data-text-scale="1.5"] .bottom-nav__label {
  /* Avoid label overflow at high scales — let the icon do the talking */
  display: none;
}
html[data-text-scale="2"] body nav.bottom-nav,
html[data-text-scale="1.5"] body nav.bottom-nav {
  /* Slightly taller bar so the scaled icons fit */
  --bn-h: 72px;
}

/* ════════════════════════════════════════════════════════════════════════
   APP v18b — Text-scale switcher widget (use anywhere, e.g. settings page)
   ════════════════════════════════════════════════════════════════════════ */
.a11y-textscale {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem;
  border-radius: 12px;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e5e7eb);
}
.a11y-textscale__btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .35rem .65rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 44px;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.a11y-textscale__btn:hover { background: color-mix(in srgb, var(--brand, #2563eb) 8%, transparent); }
.a11y-textscale__btn[aria-pressed="true"] {
  background: var(--brand, #2563eb);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   APP v18c — Roving-tabindex tablist visual hint
   While focus is inside the bottom-nav, the focused tab gets a stronger
   ring and the others' rings hide so keyboard users see one indicator.
   ════════════════════════════════════════════════════════════════════════ */
html body nav.bottom-nav[data-roving="1"] .bottom-nav__item {
  outline: none !important;
}
html body nav.bottom-nav[data-roving="1"] .bottom-nav__item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #2563eb) 80%, transparent) !important;
  outline-offset: -3px;
}

/* ════════════════════════════════════════════════════════════════════
   BOTTOM-NAV — final responsiveness polish (must remain last).
   Goals:
   1. Lock to viewport bottom under EVERY browser/orientation, including
      iOS Safari URL-bar collapse and Android keyboard insets.
   2. Smooth orientation/rotate transitions — no jarring jumps.
   3. Performance: containment + GPU compositing for the bar layer.
   4. Never overflow horizontally regardless of tab count.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  html body nav.bottom-nav {
    /* Stable + dynamic viewport units: bottom: 0 always means "edge of
       the actual visible area", whether iOS URL bar is shown or not. */
    inset: auto 0 0 0;
    /* GPU layer — keeps the bar smooth during scroll/orientation events
       and prevents it from jittering with the address bar collapse. */
    transform: translateZ(0);
    will-change: transform;
    /* Containment — this section's layout shouldn't perturb the rest
       of the page (and vice versa). */
    contain: layout style;
    /* Smooth state transitions (active class flips, keyboard hide). */
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                opacity   .22s ease;
  }
  /* Honor reduced-motion: kill the transition for users who asked. */
  @media (prefers-reduced-motion: reduce) {
    html body nav.bottom-nav { transition: none !important; }
  }

  /* Items wrapper: cap horizontal overflow even at extreme widths. */
  html body nav.bottom-nav .bottom-nav__items {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Keyboard-hide and explicit-hide states — slide using transform
     so we get GPU acceleration, never lose containing-block alignment. */
  body[data-bn-keyboard="1"] nav.bottom-nav {
    transform: translate3d(0, 110%, 0) !important;
    pointer-events: none !important;
  }
}

/* On orientation change, the URL bar can momentarily mis-report height.
   Re-anchor the bar with a 50ms transform-clear in case it stuck. */
@media (orientation: landscape) and (max-height: 500px) {
  html body nav.bottom-nav { transform: translateZ(0); }
}