/* ============================================================
   premium-v2.css — Premium Admin Design System
   Dark-first, polished light fallback. No CDN dependencies.
   Translates the Premium_dashboard_UIUX mockups (Tailwind)
   into a vanilla CSS system. Preserves all existing IDs the
   admin.js / admin.charts.js / admin.realtime.js modules
   reach into.
   ============================================================ */

/* ---------- 1. Design Tokens ------------------------------- */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --pv-bg:           #0B1019;
  --pv-bg-elev-0:    #0F1923;
  --pv-bg-elev-1:    #111820;
  --pv-bg-elev-2:    #161E29;
  --pv-bg-elev-3:    #1B2532;
  --pv-card:         #111820;
  --pv-card-hover:   #151E2A;
  --pv-rail:         #0C131C;

  /* Borders & dividers */
  --pv-border:       #1E2630;
  --pv-border-soft:  #182029;
  --pv-border-strong:#2A3441;

  /* Text */
  --pv-text:         #E9EDF3;
  --pv-text-2:       #A9B6C3;
  --pv-text-3:       #6D7882;
  --pv-text-inv:     #0B1019;

  /* Brand & accent */
  --pv-primary:        #359EFF;
  --pv-primary-strong: #1A86F0;
  --pv-primary-soft:   rgba(53,158,255,.18);
  --pv-primary-ghost:  rgba(53,158,255,.08);

  --pv-accent-blue:   #3B82F6;
  --pv-accent-green:  #22C55E;
  --pv-accent-orange: #F97316;
  --pv-accent-purple: #A855F7;
  --pv-accent-teal:   #14B8A6;
  --pv-accent-pink:   #EC4899;
  --pv-accent-amber:  #F59E0B;
  --pv-accent-red:    #EF4444;

  /* Semantic */
  --pv-success: #22C55E;
  --pv-warning: #F59E0B;
  --pv-danger:  #EF4444;
  --pv-info:    #3B82F6;

  /* Tints (for icon badges & status chips) */
  --pv-tint-blue:   rgba(59,130,246,.16);
  --pv-tint-green:  rgba(34,197,94,.16);
  --pv-tint-orange: rgba(249,115,22,.16);
  --pv-tint-purple: rgba(168,85,247,.16);
  --pv-tint-teal:   rgba(20,184,166,.16);
  --pv-tint-pink:   rgba(236,72,153,.16);
  --pv-tint-amber:  rgba(245,158,11,.16);
  --pv-tint-red:    rgba(239,68,68,.16);

  /* Radius */
  --pv-r-sm: 8px;
  --pv-r-md: 12px;
  --pv-r-lg: 16px;
  --pv-r-xl: 20px;
  --pv-r-2xl: 24px;
  --pv-r-pill: 9999px;

  /* Spacing scale (4px grid) */
  --pv-s-1: 4px;
  --pv-s-2: 8px;
  --pv-s-3: 12px;
  --pv-s-4: 16px;
  --pv-s-5: 20px;
  --pv-s-6: 24px;
  --pv-s-7: 28px;
  --pv-s-8: 32px;
  --pv-s-10: 40px;
  --pv-s-12: 48px;

  /* Elevation — soft, multi-layer + inset highlight */
  --pv-shadow-soft:
    0 1px 2px rgba(0,0,0,.40),
    0 4px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
  --pv-shadow-md:
    0 4px 6px -1px rgba(0,0,0,.45),
    0 2px 4px -2px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  --pv-shadow-lg:
    0 10px 30px -10px rgba(0,0,0,.65),
    0 6px 20px -8px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  --pv-shadow-glow:
    0 0 0 1px rgba(53,158,255,.30),
    0 8px 24px -8px rgba(53,158,255,.40);

  /* Motion */
  --pv-ease:        cubic-bezier(.22,.61,.36,1);
  --pv-ease-out:    cubic-bezier(.16,1,.3,1);
  --pv-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --pv-dur-1: 120ms;
  --pv-dur-2: 200ms;
  --pv-dur-3: 320ms;
  --pv-dur-4: 480ms;

  /* Layout */
  --pv-sidebar-w:        236px;
  --pv-sidebar-rail-w:   72px;
  --pv-topbar-h:         56px;     /* tightened from 64 — Phase 4 */
  --pv-maxw:             1440px;
  --pv-card-pad:         16px;     /* default card body padding (was 20) */
  --pv-section-gap:      18px;     /* default gap between major sections (was 24) */

  /* Typography scale — Phase 4 */
  --pv-fs-xs:    11px;
  --pv-fs-sm:    12px;
  --pv-fs-base:  13px;
  --pv-fs-md:    14px;
  --pv-fs-lg:    15px;
  --pv-fs-xl:    18px;
  --pv-fs-2xl:   22px;
  --pv-fs-3xl:   28px;
  --pv-fs-4xl:   32px;

  /* Typography */
  --pv-font: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Focus ring */
  --pv-ring: 0 0 0 3px rgba(53,158,255,.35);
}

/* Polished light theme — secondary but first-class */
[data-theme="light"] {
  --pv-bg:           #F5F7FA;
  --pv-bg-elev-0:    #FFFFFF;
  --pv-bg-elev-1:    #FFFFFF;
  --pv-bg-elev-2:    #F8FAFC;
  --pv-bg-elev-3:    #F1F5F9;
  --pv-card:         #FFFFFF;
  --pv-card-hover:   #F8FAFC;
  --pv-rail:         #FFFFFF;

  --pv-border:       #E5E9EF;
  --pv-border-soft:  #EEF1F5;
  --pv-border-strong:#CBD3DD;

  --pv-text:         #0F172A;
  --pv-text-2:       #475467;
  --pv-text-3:       #5A6473;  /* darkened from #98A2B3 (~2.7:1) → ~5.6:1 on white for WCAG AA */
  --pv-text-inv:     #FFFFFF;

  --pv-primary-soft:  rgba(53,158,255,.12);
  --pv-primary-ghost: rgba(53,158,255,.06);

  --pv-tint-blue:   rgba(59,130,246,.10);
  --pv-tint-green:  rgba(34,197,94,.10);
  --pv-tint-orange: rgba(249,115,22,.10);
  --pv-tint-purple: rgba(168,85,247,.10);
  --pv-tint-teal:   rgba(20,184,166,.10);
  --pv-tint-pink:   rgba(236,72,153,.10);
  --pv-tint-amber:  rgba(245,158,11,.10);
  --pv-tint-red:    rgba(239,68,68,.10);

  --pv-shadow-soft:
    0 1px 2px rgba(15,23,42,.04),
    0 4px 12px rgba(15,23,42,.06);
  --pv-shadow-md:
    0 4px 6px -1px rgba(15,23,42,.06),
    0 2px 4px -2px rgba(15,23,42,.04);
  --pv-shadow-lg:
    0 10px 30px -10px rgba(15,23,42,.18),
    0 6px 20px -8px rgba(15,23,42,.10);
  --pv-shadow-glow:
    0 0 0 1px rgba(53,158,255,.30),
    0 8px 24px -8px rgba(53,158,255,.25);
}

/* ---------- 2. Reset & base -------------------------------- */
.pv, .pv * { box-sizing: border-box; }
.pv *::before, .pv *::after { box-sizing: border-box; }

.pv {
  font-family: var(--pv-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pv-text);
  background: var(--pv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

.pv h1, .pv h2, .pv h3, .pv h4, .pv h5 {
  color: var(--pv-text);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.pv a { color: var(--pv-primary); text-decoration: none; }
.pv a:hover { text-decoration: underline; }

.pv ::selection { background: var(--pv-primary-soft); color: var(--pv-text); }

.pv ::-webkit-scrollbar { width: 10px; height: 10px; }
.pv ::-webkit-scrollbar-track { background: transparent; }
.pv ::-webkit-scrollbar-thumb {
  background: var(--pv-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pv ::-webkit-scrollbar-thumb:hover { background: var(--pv-text-3); background-clip: padding-box; border: 2px solid transparent; }

/* ---------- 3. App shell ----------------------------------- */
.pv-app {
  display: flex;
  min-height: 100vh;
  background: var(--pv-bg);
}

.pv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pv-content {
  flex: 1;
  padding: var(--pv-s-6);
  max-width: var(--pv-maxw);
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) { .pv-content { padding: var(--pv-s-8); } }

/* ---------- 4. Sidebar ------------------------------------- */
.pv-sidebar {
  width: var(--pv-sidebar-w);
  flex-shrink: 0;
  background: var(--pv-rail);
  border-right: 1px solid var(--pv-border);
  display: flex;
  flex-direction: column;
  padding: var(--pv-s-4);
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width var(--pv-dur-3) var(--pv-ease);
  z-index: 50;
}

.pv-sidebar.collapsed { width: var(--pv-sidebar-rail-w); }
.pv-sidebar.collapsed .pv-nav-label,
.pv-sidebar.collapsed .pv-brand-text,
.pv-sidebar.collapsed .pv-sidebar-stats,
.pv-sidebar.collapsed .pv-sidebar-footer-text { display: none; }
.pv-sidebar.collapsed .pv-nav-item { justify-content: center; padding: 10px; }
.pv-sidebar.collapsed .pv-brand { justify-content: center; }

.pv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px var(--pv-s-6);
  user-select: none;
}
.pv-brand-mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pv-primary) 0%, #6366F1 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(53,158,255,.55), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff;
  flex-shrink: 0;
}
.pv-brand-mark svg { width: 18px; height: 18px; }
.pv-brand-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--pv-text);
  white-space: nowrap;
  overflow: hidden;
}
.pv-brand-text small {
  display: block;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--pv-text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pv-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--pv-s-2); }
.pv-nav-section-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pv-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: var(--pv-s-4) 12px 8px;
}

.pv-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--pv-text-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--pv-dur-1) var(--pv-ease),
              color var(--pv-dur-1) var(--pv-ease),
              transform var(--pv-dur-1) var(--pv-ease);
  position: relative;
  white-space: nowrap;
}
.pv-nav-item .material-symbols-outlined,
.pv-nav-item svg { font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.pv-nav-item:hover {
  background: var(--pv-bg-elev-2);
  color: var(--pv-text);
}
.pv-nav-item.is-active {
  background: var(--pv-primary-soft);
  color: var(--pv-primary);
  border-color: rgba(53,158,255,.12);
}
.pv-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--pv-primary);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--pv-primary);
}
.pv-nav-badge {
  margin-left: auto;
  background: var(--pv-bg-elev-3);
  color: var(--pv-text-2);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--pv-r-pill);
}

.pv-sidebar-stats {
  margin-top: auto;
  padding: var(--pv-s-4) 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--pv-border-soft);
}
.pv-sidebar-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.pv-sidebar-stat-label { color: var(--pv-text-3); }
.pv-sidebar-stat-val { color: var(--pv-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.pv-sidebar-footer {
  margin-top: var(--pv-s-2);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pv-bg-elev-2);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background var(--pv-dur-1) var(--pv-ease);
}
.pv-sidebar-footer:hover { background: var(--pv-bg-elev-3); }
.pv-sidebar-footer-text { flex: 1; min-width: 0; }
.pv-sidebar-footer-text .n { font-size: 12.5px; font-weight: 600; color: var(--pv-text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-sidebar-footer-text .m { font-size: 11px; color: var(--pv-text-3); }

/* Mobile drawer */
@media (max-width: 900px) {
  .pv-sidebar { position: fixed; transform: translateX(-100%); height: 100vh; }
  .pv-sidebar.is-open { transform: translateX(0); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
  .pv-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--pv-dur-2) var(--pv-ease);
    z-index: 40;
  }
  .pv-overlay.is-open { opacity: 1; pointer-events: auto; }
}

/* ---------- 5. Topbar (glassy) ----------------------------- */
.pv-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--pv-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pv-s-4);
  padding: 0 var(--pv-s-6);
  background: color-mix(in srgb, var(--pv-bg-elev-0) 75%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--pv-border);
}
.pv-topbar-left { display: flex; align-items: center; gap: var(--pv-s-3); min-width: 0; }
.pv-topbar-title { font-size: 16px; font-weight: 600; color: var(--pv-text); letter-spacing: -0.01em; }
.pv-crumb {
  font-size: 12.5px;
  color: var(--pv-text-3);
  display: flex; align-items: center; gap: 6px;
}
.pv-crumb .sep { opacity: .5; }
.pv-topbar-right { display: flex; align-items: center; gap: var(--pv-s-2); }

/* Search input */
.pv-search {
  position: relative;
  width: 280px;
  max-width: 100%;
}
.pv-search input {
  width: 100%;
  height: 36px;
  background: var(--pv-bg-elev-2);
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  color: var(--pv-text);
  padding: 0 38px 0 38px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--pv-dur-1) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease), background var(--pv-dur-1) var(--pv-ease);
}
.pv-search input::placeholder { color: var(--pv-text-3); }
.pv-search input:focus { border-color: var(--pv-primary); box-shadow: var(--pv-ring); background: var(--pv-bg-elev-1); }
.pv-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--pv-text-3); font-size: 18px; pointer-events: none;
}
.pv-search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; color: var(--pv-text-3);
  background: var(--pv-bg-elev-3);
  border: 1px solid var(--pv-border);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--pv-font-mono);
}

/* Icon button */
.pv-iconbtn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--pv-text-2);
  cursor: pointer;
  transition: background var(--pv-dur-1) var(--pv-ease), color var(--pv-dur-1) var(--pv-ease), border-color var(--pv-dur-1) var(--pv-ease), transform var(--pv-dur-1) var(--pv-ease);
  position: relative;
}
.pv-iconbtn:hover { background: var(--pv-bg-elev-2); color: var(--pv-text); }
.pv-iconbtn:active { transform: scale(.96); }
.pv-iconbtn .material-symbols-outlined, .pv-iconbtn svg { font-size: 20px; }
.pv-iconbtn[data-dot]::after {
  content: '';
  position: absolute; right: 9px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pv-accent-blue);
  box-shadow: 0 0 0 2px var(--pv-bg-elev-0), 0 0 10px var(--pv-accent-blue);
}

/* Avatar */
.pv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pv-accent-purple), var(--pv-primary));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 13px;
  border: 2px solid var(--pv-border);
  cursor: pointer;
  transition: transform var(--pv-dur-1) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease);
}
.pv-avatar:hover { transform: scale(1.05); box-shadow: var(--pv-shadow-glow); }

/* ---------- 6. Buttons ------------------------------------- */
.pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--pv-bg-elev-2);
  color: var(--pv-text);
  font-family: inherit;
  transition: background var(--pv-dur-1) var(--pv-ease), border-color var(--pv-dur-1) var(--pv-ease), transform var(--pv-dur-1) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease);
  user-select: none;
  white-space: nowrap;
}
.pv-btn:hover { background: var(--pv-bg-elev-3); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn:focus-visible { outline: none; box-shadow: var(--pv-ring); }
.pv-btn .material-symbols-outlined { font-size: 18px; }

.pv-btn-primary {
  background: linear-gradient(180deg, #4DAEFF 0%, var(--pv-primary) 100%);
  color: #fff;
  border-color: rgba(53,158,255,.6);
  box-shadow: 0 4px 14px -4px rgba(53,158,255,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.pv-btn-primary:hover { background: linear-gradient(180deg, #5BB6FF 0%, #2393F5 100%); }

.pv-btn-ghost { background: transparent; color: var(--pv-text-2); }
.pv-btn-ghost:hover { background: var(--pv-bg-elev-2); color: var(--pv-text); }

.pv-btn-outline { background: transparent; border-color: var(--pv-border); }
.pv-btn-outline:hover { background: var(--pv-bg-elev-2); border-color: var(--pv-border-strong); }

.pv-btn-danger { background: var(--pv-tint-red); color: var(--pv-danger); border-color: rgba(239,68,68,.25); }
.pv-btn-danger:hover { background: rgba(239,68,68,.22); }

.pv-btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.pv-btn-lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: 12px; }

/* Button group */
.pv-btn-group { display: inline-flex; background: var(--pv-bg-elev-2); border: 1px solid var(--pv-border); border-radius: 10px; padding: 3px; gap: 2px; }
.pv-btn-group .pv-btn { height: 28px; padding: 0 12px; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600; color: var(--pv-text-2); }
.pv-btn-group .pv-btn.is-active { background: var(--pv-bg-elev-0); color: var(--pv-text); box-shadow: var(--pv-shadow-soft); }

/* ---------- 7. KPI Cards ----------------------------------- */
.pv-kpi-grid {
  display: grid;
  gap: var(--pv-s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pv-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--pv-card);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-xl);
  padding: 20px;
  box-shadow: var(--pv-shadow-soft);
  overflow: hidden;
  transition: transform var(--pv-dur-2) var(--pv-ease), border-color var(--pv-dur-2) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease);
}
.pv-kpi::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(140% 100% at 100% 0%, rgba(53,158,255,.08) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pv-dur-3) var(--pv-ease);
}
.pv-kpi:hover { transform: translateY(-2px); border-color: var(--pv-border-strong); box-shadow: var(--pv-shadow-md); }
.pv-kpi:hover::after { opacity: 1; }

.pv-kpi-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-tint-blue);
  color: var(--pv-accent-blue);
  flex-shrink: 0;
}
.pv-kpi-icon .material-symbols-outlined { font-size: 20px; }

.pv-kpi[data-tone="green"]  .pv-kpi-icon { background: var(--pv-tint-green);  color: var(--pv-accent-green); }
.pv-kpi[data-tone="purple"] .pv-kpi-icon { background: var(--pv-tint-purple); color: var(--pv-accent-purple); }
.pv-kpi[data-tone="orange"] .pv-kpi-icon { background: var(--pv-tint-orange); color: var(--pv-accent-orange); }
.pv-kpi[data-tone="teal"]   .pv-kpi-icon { background: var(--pv-tint-teal);   color: var(--pv-accent-teal); }
.pv-kpi[data-tone="pink"]   .pv-kpi-icon { background: var(--pv-tint-pink);   color: var(--pv-accent-pink); }
.pv-kpi[data-tone="amber"]  .pv-kpi-icon { background: var(--pv-tint-amber);  color: var(--pv-accent-amber); }
.pv-kpi[data-tone="red"]    .pv-kpi-icon { background: var(--pv-tint-red);    color: var(--pv-accent-red); }

.pv-kpi-body { min-width: 0; flex: 1; }
.pv-kpi-label {
  font-size: 12.5px;
  color: var(--pv-text-2);
  font-weight: 500;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.pv-kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--pv-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pv-kpi-trend {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
}
.pv-kpi-trend.up   { color: var(--pv-accent-green); }
.pv-kpi-trend.down { color: var(--pv-accent-red); }
.pv-kpi-trend.flat { color: var(--pv-text-3); }
.pv-kpi-trend .material-symbols-outlined { font-size: 16px; }

.pv-kpi-spark {
  position: absolute; right: 12px; bottom: 12px;
  width: 64px; height: 24px; opacity: .8;
}

/* ---------- 8. Cards & sections ---------------------------- */
.pv-card {
  background: var(--pv-card);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-xl);
  box-shadow: var(--pv-shadow-soft);
  overflow: hidden;
  transition: border-color var(--pv-dur-2) var(--pv-ease);
}
.pv-card:hover { border-color: var(--pv-border-strong); }

.pv-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pv-s-3);
  padding: 18px 20px;
  border-bottom: 1px solid var(--pv-border-soft);
}
.pv-card-title { font-size: 15px; font-weight: 600; color: var(--pv-text); margin: 0; }
.pv-card-subtitle { font-size: 12.5px; color: var(--pv-text-3); margin-top: 2px; }
.pv-card-body { padding: 20px; }
.pv-card-tight .pv-card-body { padding: 14px 16px; }

.pv-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pv-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--pv-s-4);
}

/* ---------- 9. Tables -------------------------------------- */
.pv-table-wrap {
  background: var(--pv-card);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-xl);
  overflow: hidden;
  box-shadow: var(--pv-shadow-soft);
}
.pv-table-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--pv-s-3);
  align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--pv-border-soft);
}
.pv-table-scroll { overflow-x: auto; }

.pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pv-table thead th {
  background: var(--pv-bg-elev-1);
  color: var(--pv-text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--pv-border-soft);
  white-space: nowrap;
  position: sticky; top: 0;
}
.pv-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--pv-border-soft);
  color: var(--pv-text);
  vertical-align: middle;
}
.pv-table tbody tr { transition: background var(--pv-dur-1) var(--pv-ease); }
.pv-table tbody tr:hover { background: var(--pv-bg-elev-2); cursor: pointer; }
.pv-table tbody tr:last-child td { border-bottom: 0; }
.pv-table td.num { font-variant-numeric: tabular-nums; }
.pv-table td.muted { color: var(--pv-text-3); }

/* ---------- 10. Pills / badges / chips --------------------- */
.pv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--pv-r-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: .01em;
  background: var(--pv-bg-elev-3);
  color: var(--pv-text-2);
  border: 1px solid var(--pv-border-soft);
  white-space: nowrap;
}
.pv-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv-pill.ok      { background: var(--pv-tint-green);  color: var(--pv-accent-green);  border-color: rgba(34,197,94,.20); }
.pv-pill.warn    { background: var(--pv-tint-amber);  color: var(--pv-accent-amber);  border-color: rgba(245,158,11,.22); }
.pv-pill.danger  { background: var(--pv-tint-red);    color: var(--pv-accent-red);    border-color: rgba(239,68,68,.22); }
.pv-pill.info    { background: var(--pv-tint-blue);   color: var(--pv-accent-blue);   border-color: rgba(59,130,246,.22); }
.pv-pill.purple  { background: var(--pv-tint-purple); color: var(--pv-accent-purple); border-color: rgba(168,85,247,.22); }

/* Plan badges */
.pv-plan {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--pv-r-pill);
  text-transform: uppercase; letter-spacing: .07em;
}
.pv-plan-free  { background: var(--pv-bg-elev-3); color: var(--pv-text-2); border:1px solid var(--pv-border); }
.pv-plan-basic { background: rgba(59,130,246,.15); color: #60A5FA; }
.pv-plan-pro   { background: linear-gradient(135deg, rgba(168,85,247,.20), rgba(53,158,255,.20)); color: #C4B5FD; border: 1px solid rgba(168,85,247,.25); }

/* ---------- 11. Forms ------------------------------------- */
.pv-field { display: flex; flex-direction: column; gap: 6px; }
.pv-label { font-size: 12px; font-weight: 600; color: var(--pv-text-2); }
.pv-input, .pv-select, .pv-textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--pv-bg-elev-2);
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  color: var(--pv-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--pv-dur-1) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease), background var(--pv-dur-1) var(--pv-ease);
}
.pv-textarea { height: auto; padding: 10px 12px; min-height: 90px; resize: vertical; line-height: 1.5; }
.pv-input::placeholder, .pv-textarea::placeholder { color: var(--pv-text-3); }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus { border-color: var(--pv-primary); box-shadow: var(--pv-ring); background: var(--pv-bg-elev-1); }
.pv-select { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B6C3' stroke-width='2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;
}

/* Toggle */
.pv-toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.pv-toggle input { opacity: 0; width: 0; height: 0; }
.pv-toggle .track { position: absolute; inset: 0; background: var(--pv-bg-elev-3); border: 1px solid var(--pv-border); border-radius: var(--pv-r-pill); cursor: pointer; transition: background var(--pv-dur-2) var(--pv-ease); }
.pv-toggle .thumb { position: absolute; left: 2px; top: 1.5px; width: 17px; height: 17px; background: var(--pv-text); border-radius: 50%; transition: transform var(--pv-dur-2) var(--pv-ease-spring), background var(--pv-dur-2) var(--pv-ease); }
.pv-toggle input:checked + .track { background: var(--pv-primary); border-color: var(--pv-primary); }
.pv-toggle input:checked + .track .thumb { transform: translateX(16px); background: #fff; }

/* ---------- 12. Charts & sparks ---------------------------- */
.pv-chart-card { padding: 20px; }
.pv-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pv-chart-title { font-size: 14px; font-weight: 600; color: var(--pv-text); }
.pv-chart-sub { font-size: 12px; color: var(--pv-text-3); margin-top: 3px; }
.pv-chart-hero {
  display: flex; align-items: baseline; gap: 10px;
  margin: 4px 0 14px;
}
.pv-chart-hero .v { font-size: 28px; font-weight: 700; color: var(--pv-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-chart-canvas { width: 100%; height: 240px; position: relative; }
.pv-chart-canvas.lg { height: 320px; }
.pv-chart-canvas.sm { height: 180px; }

/* Donut info */
.pv-donut-row { display: flex; gap: 24px; align-items: center; }
.pv-donut-row .donut-wrap { position: relative; flex-shrink: 0; width: 168px; height: 168px; }
.pv-donut-row .donut-wrap .center { position: absolute; inset: 0; display:flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-donut-row .donut-wrap .center .big { font-size: 26px; font-weight: 700; color: var(--pv-text); }
.pv-donut-row .donut-wrap .center .lbl { font-size: 11px; color: var(--pv-text-3); }
.pv-donut-row ul { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pv-donut-row ul li { display: flex; justify-content: space-between; align-items: center; color: var(--pv-text-2); }
.pv-donut-row ul li .l { display: inline-flex; align-items: center; gap: 8px; }
.pv-donut-row ul li .l .d { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pv-donut-row ul li .v { color: var(--pv-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Progress bars */
.pv-bar { background: var(--pv-bg-elev-3); border-radius: var(--pv-r-pill); height: 6px; overflow: hidden; }
.pv-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--pv-primary), var(--pv-accent-purple)); border-radius: inherit; transition: width var(--pv-dur-4) var(--pv-ease-out); }

/* ---------- 13. Drawer ------------------------------------ */
.pv-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--pv-dur-2) var(--pv-ease);
  z-index: 70;
}
.pv-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.pv-drawer {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(520px, 92vw);
  background: var(--pv-bg-elev-1);
  border-left: 1px solid var(--pv-border);
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
  z-index: 71;
  transform: translateX(100%);
  transition: transform var(--pv-dur-3) var(--pv-ease-out);
  display: flex; flex-direction: column;
}
.pv-drawer.is-open { transform: translateX(0); }
.pv-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--pv-border-soft); }
.pv-drawer-body { padding: 20px; overflow: auto; flex: 1; }
.pv-drawer-footer { padding: 14px 20px; border-top: 1px solid var(--pv-border-soft); display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- 14. Modal ------------------------------------- */
.pv-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.65); display:none; align-items: center; justify-content: center; z-index: 80; backdrop-filter: blur(3px); }
.pv-modal-scrim.is-open { display: flex; animation: pv-fade var(--pv-dur-2) var(--pv-ease) both; }
.pv-modal {
  background: var(--pv-bg-elev-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-xl);
  width: min(440px, 92vw);
  padding: 24px;
  box-shadow: var(--pv-shadow-lg);
  animation: pv-pop var(--pv-dur-3) var(--pv-ease-spring) both;
}
.pv-modal-title { font-size: 16px; font-weight: 600; color: var(--pv-text); margin-bottom: 6px; }
.pv-modal-body { color: var(--pv-text-2); font-size: 13px; margin-bottom: 20px; }
.pv-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-pop  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- 15. Toasts ------------------------------------ */
.pv-toast-stack { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.pv-toast {
  background: var(--pv-bg-elev-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-md);
  padding: 12px 14px 12px 12px;
  min-width: 260px; max-width: 420px;
  display: flex; gap: 10px; align-items: flex-start;
  box-shadow: var(--pv-shadow-lg);
  animation: pv-toast-in var(--pv-dur-3) var(--pv-ease-spring) both;
  border-left: 3px solid var(--pv-text-3);
}
.pv-toast.ok      { border-left-color: var(--pv-accent-green); }
.pv-toast.err     { border-left-color: var(--pv-accent-red); }
.pv-toast.info    { border-left-color: var(--pv-accent-blue); }
.pv-toast-icon { color: var(--pv-text-3); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.pv-toast.ok .pv-toast-icon  { color: var(--pv-accent-green); }
.pv-toast.err .pv-toast-icon { color: var(--pv-accent-red); }
.pv-toast.info .pv-toast-icon{ color: var(--pv-accent-blue); }
.pv-toast-body { font-size: 13px; color: var(--pv-text); line-height: 1.45; }
.pv-toast-body small { color: var(--pv-text-3); display: block; margin-top: 2px; }
@keyframes pv-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }

/* ---------- 16. Skeleton ---------------------------------- */
.pv-skel {
  display: block;
  background: linear-gradient(90deg, var(--pv-bg-elev-2) 0%, var(--pv-bg-elev-3) 40%, var(--pv-bg-elev-2) 80%);
  background-size: 200% 100%;
  animation: pv-shimmer 1.4s linear infinite;
  border-radius: 8px;
  height: 14px;
}
@keyframes pv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- 17. Command palette --------------------------- */
.pv-cmdk-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 100; }
.pv-cmdk-scrim.is-open { display: flex; animation: pv-fade var(--pv-dur-2) var(--pv-ease) both; }
.pv-cmdk { width: min(560px, 92vw); background: var(--pv-bg-elev-1); border: 1px solid var(--pv-border); border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-lg); overflow: hidden; animation: pv-pop var(--pv-dur-3) var(--pv-ease-spring) both; }
.pv-cmdk-input { width: 100%; height: 52px; padding: 0 18px; background: transparent; border: 0; border-bottom: 1px solid var(--pv-border-soft); color: var(--pv-text); font-size: 15px; outline: none; }
.pv-cmdk-list { max-height: 380px; overflow: auto; padding: 8px; }
.pv-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--pv-text-2); font-size: 13px; cursor: pointer; }
.pv-cmdk-item .material-symbols-outlined { font-size: 18px; color: var(--pv-text-3); }
.pv-cmdk-item:hover, .pv-cmdk-item.is-active { background: var(--pv-primary-soft); color: var(--pv-text); }
.pv-cmdk-item:hover .material-symbols-outlined, .pv-cmdk-item.is-active .material-symbols-outlined { color: var(--pv-primary); }
.pv-cmdk-item .kbd { margin-left: auto; font-family: var(--pv-font-mono); font-size: 11px; color: var(--pv-text-3); background: var(--pv-bg-elev-3); border: 1px solid var(--pv-border); padding: 1px 6px; border-radius: 5px; }

/* ---------- 18. Layout helpers ---------------------------- */
.pv-row { display: flex; align-items: center; gap: var(--pv-s-3); }
.pv-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s-3); }
.pv-grid { display: grid; gap: var(--pv-s-4); }
.pv-grid-2 { grid-template-columns: 1fr; }
.pv-grid-3 { grid-template-columns: 1fr; }
.pv-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--pv-s-4); }
@media (min-width: 768px) { .pv-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .pv-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.pv-col-8 { grid-column: span 12; } .pv-col-4 { grid-column: span 12; }
@media (min-width: 1024px) { .pv-col-8 { grid-column: span 8; } .pv-col-4 { grid-column: span 4; } }

.pv-stack { display: flex; flex-direction: column; }
.pv-stack > * + * { margin-top: var(--pv-s-4); }
.pv-stack-lg > * + * { margin-top: var(--pv-s-6); }

.pv-spacer-sm { height: var(--pv-s-3); } .pv-spacer-md { height: var(--pv-s-5); } .pv-spacer-lg { height: var(--pv-s-8); }

.pv-text-muted { color: var(--pv-text-3); }
.pv-text-num   { font-variant-numeric: tabular-nums; }
.pv-text-mono  { font-family: var(--pv-font-mono); }

/* Material Symbols sizing helper (fallback if user already loads it) */
.pv .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 20px;
  vertical-align: middle;
}

/* ---------- 19. Theme toggle nub --------------------------- */
.pv-theme-switch {
  position: relative;
  width: 56px; height: 30px;
  background: var(--pv-bg-elev-3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-pill);
  cursor: pointer;
  display: flex; align-items: center;
  padding: 2px;
  transition: background var(--pv-dur-2) var(--pv-ease), border-color var(--pv-dur-2) var(--pv-ease);
}
.pv-theme-switch .nub {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pv-text);
  display: flex; align-items: center; justify-content: center;
  color: var(--pv-bg);
  transition: transform var(--pv-dur-3) var(--pv-ease-spring), background var(--pv-dur-2) var(--pv-ease), color var(--pv-dur-2) var(--pv-ease);
}
.pv-theme-switch .nub .material-symbols-outlined { font-size: 14px; }
[data-theme="light"] .pv-theme-switch .nub { transform: translateX(26px); background: var(--pv-primary); color: #fff; }

/* ---------- 20. Misc ------------------------------------- */
.pv-divider { height: 1px; background: var(--pv-border-soft); border: 0; margin: 0; }

/* Fade-in for content blocks */
.pv-fade-in { animation: pv-fade var(--pv-dur-3) var(--pv-ease) both; }
.pv-slide-in { animation: pv-slide-up var(--pv-dur-4) var(--pv-ease-out) both; }
@keyframes pv-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Hide scrollbar but keep scroll */
.pv-no-scroll::-webkit-scrollbar { display: none; }
.pv-no-scroll { scrollbar-width: none; }

/* Print sanity */
@media print {
  .pv-sidebar, .pv-topbar, .pv-iconbtn, .pv-btn { display: none !important; }
  .pv-card { box-shadow: none !important; border-color: #ccc !important; }
}

/* ============================================================
   PHASE 4 — Premium polish overrides
   ============================================================ */

/* ---------- 4.1 Topbar tightening ---------- */
.pv-topbar { padding: 0 20px; }
.pv-topbar-title { font-size: var(--pv-fs-lg); }
.pv-crumb { font-size: var(--pv-fs-xs); }
.pv-search { width: 260px; }
.pv-search input { height: 32px; font-size: 12.5px; }
.pv-search-icon { font-size: 16px; }
.pv-iconbtn { width: 32px; height: 32px; }
.pv-iconbtn .material-symbols-outlined, .pv-iconbtn svg { font-size: 18px; }
.pv-avatar { width: 32px; height: 32px; font-size: 12px; }

/* ---------- 4.2 Pill-style nav items (sidebar) ---------- */
.pv-nav-item {
  padding: 9px 12px;
  font-size: var(--pv-fs-base);
  border-radius: 10px;
}
.pv-nav-item:hover { background: var(--pv-bg-elev-2); transform: translateX(2px); }
.pv-nav-item.is-active {
  background: linear-gradient(135deg, var(--pv-primary-soft), rgba(168,85,247,.10));
  color: var(--pv-text);
  border-color: rgba(53,158,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 6px -2px rgba(53,158,255,.30);
}
.pv-nav-item.is-active .material-symbols-outlined { color: var(--pv-primary); }
.pv-nav-item.is-active::before {
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, var(--pv-primary), var(--pv-accent-purple));
}

/* ---------- 4.3 Premium card defaults ---------- */
.pv-card-header { padding: 14px 18px; }
.pv-card-body   { padding: var(--pv-card-pad) 18px 18px; }
.pv-card-title  { font-size: var(--pv-fs-md); }
.pv-card-subtitle { font-size: var(--pv-fs-sm); }

/* Card hover lift on data cards */
.pv-card[data-interactive], .pv-kpi {
  transition: transform var(--pv-dur-2) var(--pv-ease), border-color var(--pv-dur-2) var(--pv-ease), box-shadow var(--pv-dur-2) var(--pv-ease);
}

/* ---------- 4.4 KPI cards — tightened rhythm ---------- */
.pv-kpi { padding: 16px 18px; gap: 12px; border-radius: var(--pv-r-lg); }
.pv-kpi-icon { width: 34px; height: 34px; border-radius: 10px; }
.pv-kpi-icon .material-symbols-outlined { font-size: 18px; }
.pv-kpi-label { font-size: var(--pv-fs-sm); margin-bottom: 4px; }
.pv-kpi-value { font-size: var(--pv-fs-3xl); }
.pv-kpi-trend { font-size: var(--pv-fs-xs); margin-top: 4px; }
.pv-kpi::after {
  background: radial-gradient(140% 100% at 100% 0%, rgba(53,158,255,.10) 0%, transparent 60%);
}

/* KPI sparkline holder (drop a tiny canvas here) */
.pv-kpi-sparkline {
  position: absolute; right: 14px; bottom: 12px;
  width: 64px; height: 22px; pointer-events: none;
  opacity: .75;
  transition: opacity var(--pv-dur-2) var(--pv-ease);
}
.pv-kpi:hover .pv-kpi-sparkline { opacity: 1; }

/* ---------- 4.5 Tables refinement ---------- */
.pv-table-toolbar { padding: 12px 16px; }
.pv-table thead th { padding: 10px 16px; font-size: 10.5px; }
.pv-table tbody td { padding: 12px 16px; }

/* ---------- 4.6 Pills — slightly tighter ---------- */
.pv-pill { height: 20px; padding: 0 8px; font-size: 10.5px; }

/* ---------- 4.7 Buttons — sharper feel ---------- */
.pv-btn { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.pv-btn .material-symbols-outlined { font-size: 16px; }
.pv-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 7px; }
.pv-btn-lg { height: 42px; padding: 0 18px; font-size: 13.5px; border-radius: 11px; }

.pv-btn-primary {
  background: linear-gradient(180deg, #4DAEFF 0%, var(--pv-primary) 60%, #1A86F0 100%);
  box-shadow:
    0 4px 14px -4px rgba(53,158,255,.55),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.20);
}
.pv-btn-primary:hover {
  background: linear-gradient(180deg, #5BB6FF 0%, #2393F5 100%);
  box-shadow:
    0 8px 22px -8px rgba(53,158,255,.65),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Btn group polish */
.pv-btn-group { padding: 2px; border-radius: 9px; }
.pv-btn-group .pv-btn { height: 26px; font-size: 11.5px; padding: 0 10px; border-radius: 7px; }

/* ---------- 4.8 Universal focus ring (a11y) ---------- */
.pv-btn:focus-visible,
.pv-iconbtn:focus-visible,
.pv-input:focus-visible,
.pv-select:focus-visible,
.pv-textarea:focus-visible,
.pv-nav-item:focus-visible,
.pv-search input:focus-visible {
  outline: none;
  box-shadow: var(--pv-ring), var(--pv-shadow-soft);
}

/* ---------- 4.9 Page header pattern (NEW) ---------- */
.pv-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pv-page-header h1 {
  font-size: var(--pv-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  background: linear-gradient(135deg, var(--pv-text) 0%, var(--pv-text-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pv-page-header .lead { font-size: var(--pv-fs-sm); color: var(--pv-text-2); }
.pv-page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 4.10 Density toggle ---------- */
[data-density="compact"] {
  --pv-card-pad: 12px;
  --pv-section-gap: 12px;
}
[data-density="compact"] .pv-kpi { padding: 12px 14px; }
[data-density="compact"] .pv-kpi-value { font-size: 24px; }
[data-density="compact"] .pv-card-header { padding: 10px 14px; }
[data-density="compact"] .pv-card-body { padding: 12px 14px; }
[data-density="compact"] .pv-table tbody td { padding: 8px 12px; }
[data-density="compact"] .pv-table thead th { padding: 8px 12px; }
[data-density="compact"] .pv-table-toolbar { padding: 10px 12px; }
[data-density="compact"] .pv-btn { height: 30px; }
[data-density="compact"] .pv-input,
[data-density="compact"] .pv-select { height: 32px; }

/* ---------- 4.11 Premium chart wrappers ---------- */
.pv-chart-canvas { height: 220px; }
.pv-chart-canvas.lg { height: 280px; }
.pv-chart-canvas.xl { height: 320px; }
.pv-chart-canvas.sm { height: 160px; }

.pv-chart-card { padding: 16px 18px 18px; }
.pv-chart-hero { margin: 4px 0 12px; }
.pv-chart-hero .v { font-size: 26px; }

/* Custom Chart.js tooltip styling helpers (used via JS plugin) */
.chartjs-tooltip {
  background: var(--pv-bg-elev-1) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--pv-shadow-md) !important;
  font-family: var(--pv-font) !important;
}

/* Donut center label helper */
.donut-center-rich { text-align: center; }
.donut-center-rich .big { font-size: 22px; font-weight: 700; color: var(--pv-text); letter-spacing: -0.02em; }
.donut-center-rich .lbl { font-size: 11px; color: var(--pv-text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.donut-center-rich .delta { font-size: 11px; margin-top: 4px; }
.donut-center-rich .delta.up { color: var(--pv-accent-green); }
.donut-center-rich .delta.down { color: var(--pv-accent-red); }

/* ---------- 4.12 Empty state (richer) ---------- */
.pv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px 48px;
  color: var(--pv-text-3);
  text-align: center;
}
.pv-empty .ill {
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--pv-primary-soft), transparent 60%),
    var(--pv-bg-elev-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--pv-primary);
  position: relative;
}
.pv-empty .ill::before {
  content: ''; position: absolute; inset: -8px;
  border: 1px dashed var(--pv-border);
  border-radius: 50%;
  opacity: .5;
}
.pv-empty .ill .material-symbols-outlined { font-size: 40px; }
.pv-empty h4 { color: var(--pv-text); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.pv-empty p { font-size: 13px; color: var(--pv-text-3); margin: 0 0 16px; max-width: 320px; line-height: 1.55; }

/* ---------- 4.13 Status pill — animated dot ---------- */
.pv-pill.ok .dot { background: var(--pv-accent-green); animation: pill-dot-pulse 2s ease-out infinite; box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
@keyframes pill-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ---------- 4.14 Scroll shadows on tables ---------- */
.pv-table-scroll {
  background:
    linear-gradient(to right, var(--pv-card) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0), var(--pv-card) 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--pv-card);
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ---------- 4.15 Reduce content padding for tighter layout ---------- */
.pv-content { padding: 18px; }
@media (min-width: 1024px) { .pv-content { padding: 20px 24px; } }

/* ---------- 4.16 Section title — refined ---------- */
.pv-section-title { font-size: var(--pv-fs-xl); margin-bottom: 12px; }

/* ---------- 4.17 Tab pane — smooth transition ---------- */
.pv-tab-pane { animation: pv-tab-in 260ms var(--pv-ease-out) both; }
@keyframes pv-tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4.18 Responsive: prevent overflow on small ---------- */
@media (max-width: 720px) {
  .pv-search { display: none; }
  .pv-topbar { padding: 0 14px; gap: 8px; }
  .pv-content { padding: 14px; }
  .pv-card-header { flex-wrap: wrap; }
}

/* ============================================================
   5. Client Admin Shell  (.ca-*)
   ------------------------------------------------------------
   Moved out of client_admin.html's inline <style> block in the
   week-1 redesign. These are *client-admin specific* shell
   layouts — app wrapper, topbar, tabs, hero, code blocks — not
   reusable design-system primitives. Kept under the .ca- prefix
   on purpose (vs .pv- which is the cross-page design system).
   The super-admin page (/admin) does not use them.
   ============================================================ */

/* App layout */
.ca-app { display: none; min-height: 100vh; flex-direction: column; }
.ca-app.is-on { display: flex; }

.ca-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--pv-topbar-h);  /* 56px — design-system token */
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: color-mix(in srgb, var(--pv-bg-elev-0) 70%, transparent);
  border-bottom: 1px solid var(--pv-border);
  backdrop-filter: saturate(180%) blur(14px);
}
.ca-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Mobile: the topbar height is fixed (56px) so the right cluster can't wrap
   without clipping. Drop the non-essential clock + email, tighten spacing,
   and let the brand name ellipsize instead of pushing the row wider. */
@media (max-width: 640px) {
  .ca-topbar { padding: 0 12px; gap: 8px; }
  .ca-topbar .pv-row { gap: 8px; }
  .ca-topbar #istClock,
  .ca-topbar .user-email { display: none; }
  .ca-brand > div:last-child { min-width: 0; }
  .ca-topbar #bot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
}

.ca-shell { flex: 1; padding: 28px; max-width: 1200px; margin: 0 auto; width: 100%; }
@media (max-width: 640px) { .ca-shell { padding: 16px 14px; } }

/* Hero: status + usage */
.ca-hero {
  background: linear-gradient(135deg, rgba(53,158,255,.08), rgba(168,85,247,.06));
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-2xl);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
@media (max-width: 800px) { .ca-hero { grid-template-columns: 1fr; } }
.ca-hero h3 { font-size: 13px; color: var(--pv-text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 0 0 8px; }
.ca-status { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.ca-status .pv-pill { font-size: 11px; }

.ca-usage-bar {
  background: var(--pv-bg-elev-3);
  border-radius: var(--pv-r-pill);
  height: 10px;
  overflow: hidden;
  position: relative;
}
.ca-usage-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pv-primary), var(--pv-accent-purple));
  transition: width .8s var(--pv-ease-out);
}
.ca-usage-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ca-usage-row b { font-size: 16px; color: var(--pv-text); font-variant-numeric: tabular-nums; }
.ca-usage-row small { font-size: 12px; color: var(--pv-text-3); }

/* Stat grid */
.ca-stats { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
@media (max-width: 640px) { .ca-stats { grid-template-columns: 1fr 1fr; } }

/* Tabs */
.ca-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--pv-border);
  margin-bottom: 22px;
  overflow-x: auto;
}
.ca-tab {
  background: transparent;
  border: 0;
  color: var(--pv-text-2);
  padding: 12px 18px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--pv-dur-1) var(--pv-ease), border-color var(--pv-dur-2) var(--pv-ease);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  white-space: nowrap;
}
.ca-tab:hover { color: var(--pv-text); }
.ca-tab.is-active { color: var(--pv-primary); border-bottom-color: var(--pv-primary); font-weight: 600; }
.ca-tab .material-symbols-outlined { font-size: 18px; }

/* Code block */
.ca-code {
  position: relative;
  background: var(--pv-bg-elev-0);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-md);
  padding: 16px 18px;
  overflow: auto;
}
.ca-code pre {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #7dd3fc;
  line-height: 1.6;
  white-space: pre;
}
.ca-code .pv-btn { position: absolute; top: 10px; right: 10px; }

/* Test bot iframe */
.ca-iframe-wrap {
  border-radius: var(--pv-r-xl);
  overflow: hidden;
  border: 1px solid var(--pv-border);
  background: var(--pv-bg-elev-1);
  height: 620px;
}
.ca-iframe-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }

/* DNS steps */
.ca-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.ca-steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pv-border-soft);
  font-size: 13.5px;
  color: var(--pv-text-2);
}
.ca-steps li:last-child { border-bottom: 0; }
.ca-steps li::before {
  content: counter(step);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pv-primary-soft);
  color: var(--pv-primary);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ca-steps code {
  background: var(--pv-bg-elev-2);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #7dd3fc;
}

/* Empty state */
.ca-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--pv-text-3);
}
.ca-empty .icn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--pv-bg-elev-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--pv-text-3);
}
.ca-empty .icn .material-symbols-outlined { font-size: 32px; }

/* ------------------------------------------------------------
   Sidebar nav  (week-2)
   At >=1024px the .ca-tabs nav becomes a vertical sidebar inside
   .ca-body (hero stays full-width above). Below 1024px nothing
   changes — the nav remains the original horizontal scroll bar,
   so mobile behaviour is identical to week-1. Layout only;
   switchTab() is untouched.
   ------------------------------------------------------------ */
.ca-collapse { display: none; }   /* desktop-only control */

@media (min-width: 1024px) {
  .ca-body { display: flex; align-items: flex-start; gap: 28px; }

  .ca-sidebar {
    position: sticky;
    top: calc(var(--pv-topbar-h) + 20px);
    flex: 0 0 232px;
    width: 232px;
    align-self: flex-start;
    transition: flex-basis var(--pv-dur-2) var(--pv-ease), width var(--pv-dur-2) var(--pv-ease);
  }
  .ca-main { flex: 1 1 auto; min-width: 0; }

  /* vertical nav surface */
  .ca-tabs {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    border-bottom: 0;
    margin-bottom: 0;
    padding: 8px;
    background: var(--pv-bg-elev-1);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-xl);
  }
  .ca-tab {
    width: 100%;
    justify-content: flex-start;
    border-bottom: 0;
    margin-bottom: 0;
    border-radius: var(--pv-r-md);
    padding: 10px 12px;
  }
  .ca-tab:hover { background: var(--pv-bg-elev-2); }
  .ca-tab.is-active {
    background: var(--pv-primary-soft);
    color: var(--pv-primary);
    border-bottom-color: transparent;
  }
  .ca-tab:focus-visible { outline: 2px solid var(--pv-primary); outline-offset: 2px; }

  /* collapse control */
  .ca-collapse {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    background: transparent; border: 0;
    border-radius: var(--pv-r-md);
    color: var(--pv-text-3);
    font: inherit; font-size: 12.5px;
    cursor: pointer;
  }
  .ca-collapse:hover { background: var(--pv-bg-elev-2); color: var(--pv-text-2); }
  .ca-collapse .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--pv-dur-2) var(--pv-ease);
  }

  /* collapsed: icon-only rail */
  .ca-sidebar.is-collapsed { flex-basis: 60px; width: 60px; }
  .ca-sidebar.is-collapsed .ca-tab {
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    font-size: 0;            /* hides bare-text labels; icon restored below */
  }
  .ca-sidebar.is-collapsed .ca-tab .material-symbols-outlined { font-size: 20px; }
  .ca-sidebar.is-collapsed .ca-tab .pv-nav-badge { display: none; }
  .ca-sidebar.is-collapsed .ca-collapse { justify-content: center; }
  .ca-sidebar.is-collapsed .ca-collapse-label { display: none; }
  .ca-sidebar.is-collapsed .ca-collapse .material-symbols-outlined { transform: rotate(180deg); }
}