/* ════════════════════════════════════════════════════════════════════════
   QuickPR — Customer 2026 Design System
   ────────────────────────────────────────────────────────────────────────
   Soft morphism + glass + Apple polish.
   Light mode = warm off-white with dual-direction neumorphic shadows.
   Dark mode  = deep slate with subtle inner-glow shadows.
   Movement   = spring easing, never instant.
   Type       = SF Pro Display → Inter fallback, generous line-height.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─────────────────────────────────────── */
:root {
  /* Spacing (8pt grid) */
  --c-space-0: 0;
  --c-space-1: 4px;
  --c-space-2: 8px;
  --c-space-3: 12px;
  --c-space-4: 16px;
  --c-space-5: 20px;
  --c-space-6: 24px;
  --c-space-7: 32px;
  --c-space-8: 40px;
  --c-space-9: 56px;
  --c-space-10: 72px;

  /* Radii — soft, generous */
  --c-radius-sm: 10px;
  --c-radius-md: 14px;
  --c-radius-lg: 20px;
  --c-radius-xl: 28px;
  --c-radius-2xl: 36px;
  --c-radius-pill: 999px;

  /* Type scale (Apple's larger feel) */
  --c-text-xs:   11px;
  --c-text-sm:   13px;
  --c-text-base: 15px;
  --c-text-md:   17px;
  --c-text-lg:   20px;
  --c-text-xl:   24px;
  --c-text-2xl:  30px;
  --c-text-3xl:  38px;
  --c-text-4xl:  48px;

  --c-leading-tight:   1.15;
  --c-leading-snug:    1.35;
  --c-leading-normal:  1.5;
  --c-leading-relaxed: 1.7;

  --c-weight-regular: 400;
  --c-weight-medium:  500;
  --c-weight-semi:    600;
  --c-weight-bold:    700;

  /* Brand */
  --c-brand:           #6366f1;
  --c-brand-hover:     #4f46e5;
  --c-brand-soft:      #eef2ff;
  --c-brand-glow:      rgba(99, 102, 241, 0.35);
  --c-accent-mint:     #10b981;
  --c-accent-coral:    #f97366;
  --c-accent-violet:   #8b5cf6;
  --c-accent-amber:    #f59e0b;
  --c-accent-sky:      #38bdf8;
  --c-accent-rose:     #f43f5e;

  /* Motion */
  --c-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --c-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --c-snap:            cubic-bezier(0.16, 1, 0.3, 1);
  --c-dur-fast:        140ms;
  --c-dur-base:        220ms;
  --c-dur-slow:        420ms;

  /* Layout */
  --c-sidebar-w:       260px;
  --c-sidebar-w-collapsed: 76px;
  --c-topbar-h:        68px;
  --c-page-pad:        var(--c-space-7);
  --c-content-max:     1280px;

  /* z-index */
  --c-z-sidebar:       40;
  --c-z-topbar:        50;
  --c-z-overlay:       60;
  --c-z-modal:         70;
  --c-z-toast:         80;
}

/* ─── Light theme — warm neumorphic ─────────────────────── */
:root,
[data-theme="light"] {
  --c-bg:              #eef0f5;
  --c-bg-raised:       #f4f6fa;
  --c-bg-card:         #ffffff;
  --c-bg-sunken:       #e5e8ef;
  --c-bg-glass:        rgba(255, 255, 255, 0.7);
  --c-bg-overlay:      rgba(20, 22, 28, 0.32);

  --c-text:            #0c111a;
  --c-text-strong:     #000000;
  --c-text-muted:      #585e6b;
  --c-text-subtle:     #8b919e;
  --c-text-inverse:    #ffffff;

  --c-border:          rgba(15, 18, 24, 0.07);
  --c-border-strong:   rgba(15, 18, 24, 0.14);
  --c-border-glass:    rgba(255, 255, 255, 0.45);

  /* Neumorphic dual-direction shadows (light source top-left). */
  --c-shadow-soft:
      12px 12px 32px rgba(174, 178, 191, 0.45),
      -8px -8px 28px rgba(255, 255, 255, 0.95);
  --c-shadow-card:
      8px 8px 24px rgba(174, 178, 191, 0.32),
      -6px -6px 20px rgba(255, 255, 255, 0.95);
  --c-shadow-raised:
      4px 4px 14px rgba(174, 178, 191, 0.28),
      -3px -3px 12px rgba(255, 255, 255, 0.9);
  --c-shadow-inset:
      inset 4px 4px 10px rgba(174, 178, 191, 0.35),
      inset -3px -3px 8px rgba(255, 255, 255, 0.9);
  --c-shadow-press:
      inset 6px 6px 14px rgba(174, 178, 191, 0.45),
      inset -4px -4px 10px rgba(255, 255, 255, 0.9);
  --c-shadow-glow:
      0 18px 60px -18px var(--c-brand-glow);
  --c-shadow-float:
      0 24px 50px -20px rgba(15, 18, 24, 0.25),
      0 8px 16px -8px rgba(15, 18, 24, 0.1);
}

/* ─── Dark theme — deep slate, inner glow ───────────────── */
[data-theme="dark"] {
  --c-bg:              #0a0c12;
  --c-bg-raised:       #11141c;
  --c-bg-card:         #161a24;
  --c-bg-sunken:       #070a10;
  --c-bg-glass:        rgba(22, 26, 36, 0.72);
  --c-bg-overlay:      rgba(0, 0, 0, 0.6);

  --c-text:            #e8ecf3;
  --c-text-strong:     #ffffff;
  --c-text-muted:      #a4abbb;
  --c-text-subtle:     #6c7385;
  --c-text-inverse:    #0a0c12;

  --c-border:          rgba(255, 255, 255, 0.06);
  --c-border-strong:   rgba(255, 255, 255, 0.12);
  --c-border-glass:    rgba(255, 255, 255, 0.08);

  --c-shadow-soft:
      8px 8px 24px rgba(0, 0, 0, 0.55),
      -2px -2px 12px rgba(255, 255, 255, 0.03);
  --c-shadow-card:
      6px 6px 18px rgba(0, 0, 0, 0.45),
      -1px -1px 8px rgba(255, 255, 255, 0.025);
  --c-shadow-raised:
      4px 4px 12px rgba(0, 0, 0, 0.35),
      0 0 1px rgba(255, 255, 255, 0.05);
  --c-shadow-inset:
      inset 3px 3px 8px rgba(0, 0, 0, 0.5),
      inset -2px -2px 6px rgba(255, 255, 255, 0.03);
  --c-shadow-press:
      inset 5px 5px 10px rgba(0, 0, 0, 0.6),
      inset -2px -2px 6px rgba(255, 255, 255, 0.04);
  --c-shadow-glow:
      0 20px 50px -18px var(--c-brand-glow);
  --c-shadow-float:
      0 24px 50px -20px rgba(0, 0, 0, 0.6),
      0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

/* ─── Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body.customer-portal {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
  font-size: var(--c-text-base);
  line-height: var(--c-leading-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle ambient color in the background — Apple-style */
body.customer-portal::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60vmax 60vmax at 12% 8%, rgba(99,102,241,0.10), transparent 60%),
    radial-gradient(60vmax 60vmax at 88% 92%, rgba(139,92,246,0.08), transparent 60%),
    radial-gradient(40vmax 40vmax at 50% 50%, rgba(56,189,248,0.05), transparent 70%);
  filter: blur(40px);
}

[data-theme="dark"] body.customer-portal::before {
  background:
    radial-gradient(60vmax 60vmax at 12% 8%, rgba(99,102,241,0.16), transparent 60%),
    radial-gradient(60vmax 60vmax at 88% 92%, rgba(139,92,246,0.12), transparent 60%),
    radial-gradient(40vmax 40vmax at 50% 50%, rgba(56,189,248,0.06), transparent 70%);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--c-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--c-leading-tight);
  color: var(--c-text-strong);
}
h1 { font-size: var(--c-text-3xl); }
h2 { font-size: var(--c-text-2xl); }
h3 { font-size: var(--c-text-xl); }
h4 { font-size: var(--c-text-lg); }
p  { margin: 0; line-height: var(--c-leading-relaxed); color: var(--c-text); }
a  { color: var(--c-brand); text-decoration: none; transition: color var(--c-dur-fast) var(--c-ease); }
a:hover { color: var(--c-brand-hover); }

/* Scrollbar — invisible until hover */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--c-radius-pill);
  transition: background var(--c-dur-base) var(--c-ease);
}
*:hover::-webkit-scrollbar-thumb { background: var(--c-border-strong); }
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-subtle); }

/* ─── Layout shell ──────────────────────────────────────── */
.customer-shell {
  display: grid;
  grid-template-columns: var(--c-sidebar-w) 1fr;
  min-height: 100vh;
}

.customer-shell[data-sidebar="collapsed"] {
  grid-template-columns: var(--c-sidebar-w-collapsed) 1fr;
}

@media (max-width: 1024px) {
  .customer-shell { grid-template-columns: 1fr; }
}

/* ─── Sidebar (floating glass pill) ─────────────────────── */
.c-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--c-space-5) var(--c-space-4) var(--c-space-5) var(--c-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  z-index: var(--c-z-sidebar);
}

.c-sidebar-inner {
  flex: 1;
  background: var(--c-bg-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--c-radius-xl);
  box-shadow: var(--c-shadow-card);
  padding: var(--c-space-5) var(--c-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding var(--c-dur-base) var(--c-ease);
}

.c-brand {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-2) var(--c-space-3) var(--c-space-5);
  text-decoration: none;
}
.c-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--c-radius-md);
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  display: grid;
  place-items: center;
  color: white;
  font-weight: var(--c-weight-bold);
  font-size: var(--c-text-lg);
  letter-spacing: -0.04em;
  box-shadow: var(--c-shadow-raised), var(--c-shadow-glow);
  flex-shrink: 0;
}
.c-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.c-brand-name {
  font-size: var(--c-text-md);
  font-weight: var(--c-weight-bold);
  color: var(--c-text-strong);
  letter-spacing: -0.02em;
}
.c-brand-tag {
  font-size: var(--c-text-xs);
  color: var(--c-text-muted);
  font-weight: var(--c-weight-medium);
}

.c-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--c-space-3);
}
.c-nav-label {
  padding: var(--c-space-2) var(--c-space-3);
  font-size: 10px;
  font-weight: var(--c-weight-semi);
  color: var(--c-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.c-nav-item {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-3);
  border-radius: var(--c-radius-md);
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-medium);
  transition:
    background var(--c-dur-fast) var(--c-ease),
    color var(--c-dur-fast) var(--c-ease),
    transform var(--c-dur-fast) var(--c-spring),
    box-shadow var(--c-dur-base) var(--c-ease);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.c-nav-item:hover {
  color: var(--c-text-strong);
  background: var(--c-bg-card);
  transform: translateX(2px);
}
.c-nav-item.active {
  color: var(--c-text-strong);
  background: var(--c-bg-card);
  box-shadow: var(--c-shadow-raised);
  font-weight: var(--c-weight-semi);
}
.c-nav-item.active::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  border-radius: var(--c-radius-pill);
  box-shadow: 0 0 12px var(--c-brand-glow);
}
.c-nav-item i,
.c-nav-item .c-nav-icon {
  width: 22px;
  text-align: center;
  font-size: var(--c-text-md);
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}
.c-nav-item.active i,
.c-nav-item.active .c-nav-icon { color: var(--c-brand); opacity: 1; }

.c-nav-badge {
  margin-left: auto;
  background: var(--c-accent-coral);
  color: white;
  font-size: 10px;
  font-weight: var(--c-weight-bold);
  padding: 2px 7px;
  border-radius: var(--c-radius-pill);
  line-height: 1.4;
}

/* Sidebar bottom — user pill */
.c-user-pill {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-bg-card);
  box-shadow: var(--c-shadow-raised);
  cursor: pointer;
  transition: transform var(--c-dur-fast) var(--c-spring);
}
.c-user-pill:hover { transform: translateY(-1px); }
.c-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent-sky), var(--c-brand));
  display: grid; place-items: center;
  color: white; font-weight: var(--c-weight-semi); font-size: var(--c-text-sm);
  flex-shrink: 0;
}
.c-user-meta { display: flex; flex-direction: column; min-width: 0; }
.c-user-name { font-size: var(--c-text-sm); font-weight: var(--c-weight-semi); color: var(--c-text-strong); overflow: hidden; text-overflow: ellipsis; }
.c-user-plan { font-size: var(--c-text-xs); color: var(--c-text-muted); }

/* ─── Main content area ─────────────────────────────────── */
.c-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Topbar (glass) */
.c-topbar {
  position: sticky;
  top: 0;
  z-index: var(--c-z-topbar);
  height: var(--c-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--c-space-4);
  padding: 0 var(--c-page-pad);
  background: var(--c-bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--c-border);
}
.c-topbar-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--c-radius-md);
  background: var(--c-bg-card);
  box-shadow: var(--c-shadow-raised);
  border: 0;
  color: var(--c-text);
  cursor: pointer;
  font-size: var(--c-text-md);
}
@media (max-width: 1024px) {
  .c-topbar-toggle { display: grid; place-items: center; }
}

.c-breadcrumb {
  display: flex; align-items: center; gap: var(--c-space-2);
  color: var(--c-text-muted); font-size: var(--c-text-sm);
  font-weight: var(--c-weight-medium);
}
.c-breadcrumb a { color: var(--c-text-muted); }
.c-breadcrumb a:hover { color: var(--c-text-strong); }
.c-breadcrumb-sep { color: var(--c-text-subtle); }
.c-breadcrumb-current { color: var(--c-text-strong); font-weight: var(--c-weight-semi); }

.c-topbar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--c-space-2);
}

.c-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--c-radius-md);
  display: grid; place-items: center;
  background: var(--c-bg-card);
  color: var(--c-text-muted);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--c-shadow-raised);
  transition:
    transform var(--c-dur-fast) var(--c-spring),
    box-shadow var(--c-dur-base) var(--c-ease),
    color var(--c-dur-fast) var(--c-ease);
}
.c-icon-btn:hover {
  color: var(--c-text-strong);
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-soft);
}
.c-icon-btn:active { transform: translateY(0); box-shadow: var(--c-shadow-press); }

.c-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--c-radius-pill);
  background: var(--c-accent-coral);
  color: white;
  font-size: 9px; font-weight: var(--c-weight-bold);
  display: grid; place-items: center;
  border: 2px solid var(--c-bg-card);
}

/* Search pill in topbar */
.c-search-pill {
  display: flex; align-items: center; gap: var(--c-space-2);
  padding: 0 var(--c-space-4);
  height: 40px;
  border-radius: var(--c-radius-pill);
  background: var(--c-bg-sunken);
  box-shadow: var(--c-shadow-inset);
  color: var(--c-text-muted);
  font-size: var(--c-text-sm);
  border: 0;
  cursor: pointer;
  min-width: 280px;
}
.c-search-pill .c-kbd {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--c-radius-sm);
  background: var(--c-bg-card);
  color: var(--c-text-subtle);
  font-size: 10px; font-weight: var(--c-weight-semi);
  box-shadow: var(--c-shadow-raised);
}

/* Page content */
.c-content {
  padding: var(--c-page-pad);
  max-width: var(--c-content-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-7);
  animation: cFadeIn 320ms var(--c-ease);
}
@keyframes cFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page header (inside .c-content) */
.c-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--c-space-5);
  flex-wrap: wrap;
}
.c-page-title { font-size: var(--c-text-3xl); font-weight: var(--c-weight-bold); }
.c-page-subtitle { color: var(--c-text-muted); font-size: var(--c-text-md); margin-top: 4px; }

/* ─── Cards ─────────────────────────────────────────────── */
.c-card {
  background: var(--c-bg-card);
  border-radius: var(--c-radius-xl);
  padding: var(--c-space-6);
  box-shadow: var(--c-shadow-card);
  transition:
    transform var(--c-dur-base) var(--c-ease),
    box-shadow var(--c-dur-base) var(--c-ease);
}
.c-card.interactive { cursor: pointer; }
.c-card.interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow-soft);
}
.c-card.flat { box-shadow: none; border: 1px solid var(--c-border); }

.c-card-title {
  font-size: var(--c-text-md);
  font-weight: var(--c-weight-semi);
  margin-bottom: var(--c-space-3);
  color: var(--c-text-strong);
}

/* KPI / metric tile */
.c-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* hard 2-col on phones */
  gap: var(--c-space-3);
}
@media (min-width: 640px) {
  .c-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--c-space-4);
  }
}
@media (min-width: 1024px) {
  .c-kpi-grid { gap: var(--c-space-5); }
}
.c-kpi {
  background: var(--c-bg-card);
  border-radius: var(--c-radius-xl);
  padding: var(--c-space-5) var(--c-space-5) var(--c-space-4);
  box-shadow: var(--c-shadow-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  transition: transform var(--c-dur-base) var(--c-spring),
              box-shadow var(--c-dur-base) var(--c-ease);
}
.c-kpi:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-soft); }
.c-kpi::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-brand-soft) 0%, transparent 70%);
  opacity: 0.45;
  pointer-events: none;
}
[data-theme="dark"] .c-kpi::after {
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  opacity: 0.7;
}
/* Icon: small, top-right corner — Apple Stocks pattern. Removes the
   top-heavy stacked look and frees vertical space for the number itself. */
.c-kpi-icon {
  position: absolute;
  top: var(--c-space-4);
  right: var(--c-space-4);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-brand-soft), transparent);
  color: var(--c-brand);
  font-size: 13px;
  margin-bottom: 0;
  box-shadow: none;
  z-index: 1;
}
[data-theme="dark"] .c-kpi-icon {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.04));
}
.c-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.3;
  padding-right: 42px;             /* clear the corner icon */
  margin-bottom: var(--c-space-1);
}
.c-kpi-value {
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  color: var(--c-text-strong);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* 8 and 1,179 share digit widths */
  font-feature-settings: "tnum" 1;
  margin-top: 2px;
}
.c-kpi-trend {
  margin-top: auto;                /* pin to card bottom = consistent baseline */
  padding-top: var(--c-space-3);
  font-size: 11px;
  color: var(--c-text-muted);
  display: flex; align-items: center; gap: var(--c-space-1);
  line-height: 1.3;
}
.c-kpi-trend.up { color: var(--c-accent-mint); }
.c-kpi-trend.down { color: var(--c-accent-rose); }

/* Tighter on small phones — the 2-col mobile grid leaves only ~160px per card */
@media (max-width: 480px) {
  .c-kpi {
    padding: var(--c-space-4) var(--c-space-4) var(--c-space-3);
    min-height: 116px;
    border-radius: var(--c-radius-lg);
  }
  .c-kpi-icon {
    top: var(--c-space-3);
    right: var(--c-space-3);
    width: 28px; height: 28px;
    font-size: 12px;
    border-radius: 8px;
  }
  .c-kpi-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding-right: 36px;
  }
  .c-kpi-value { font-size: clamp(22px, 7vw, 28px); }
  .c-kpi-trend { font-size: 10px; padding-top: var(--c-space-2); }
}

/* KPI accent variants */
.c-kpi[data-accent="mint"] .c-kpi-icon { color: var(--c-accent-mint); background: linear-gradient(135deg, rgba(16,185,129,0.12), transparent); }
.c-kpi[data-accent="mint"]::after { background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%); }
.c-kpi[data-accent="coral"] .c-kpi-icon { color: var(--c-accent-coral); background: linear-gradient(135deg, rgba(249,115,102,0.12), transparent); }
.c-kpi[data-accent="coral"]::after { background: radial-gradient(circle, rgba(249,115,102,0.15) 0%, transparent 70%); }
.c-kpi[data-accent="violet"] .c-kpi-icon { color: var(--c-accent-violet); background: linear-gradient(135deg, rgba(139,92,246,0.12), transparent); }
.c-kpi[data-accent="violet"]::after { background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%); }
.c-kpi[data-accent="amber"] .c-kpi-icon { color: var(--c-accent-amber); background: linear-gradient(135deg, rgba(245,158,11,0.12), transparent); }
.c-kpi[data-accent="amber"]::after { background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%); }
.c-kpi[data-accent="sky"] .c-kpi-icon { color: var(--c-accent-sky); background: linear-gradient(135deg, rgba(56,189,248,0.12), transparent); }
.c-kpi[data-accent="sky"]::after { background: radial-gradient(circle, rgba(56,189,248,0.15) 0%, transparent 70%); }

/* ─── Buttons ───────────────────────────────────────────── */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  padding: 12px var(--c-space-5);
  border-radius: var(--c-radius-pill);
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-semi);
  cursor: pointer;
  border: 0;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition:
    transform var(--c-dur-fast) var(--c-spring),
    box-shadow var(--c-dur-base) var(--c-ease),
    background var(--c-dur-fast) var(--c-ease),
    color var(--c-dur-fast) var(--c-ease);
}
.c-btn:active { transform: scale(0.97); }

.c-btn-primary {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  color: white;
  box-shadow: 0 8px 22px -8px var(--c-brand-glow), var(--c-shadow-raised);
}
.c-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px var(--c-brand-glow), var(--c-shadow-soft);
  color: white;
}
.c-btn-secondary {
  background: var(--c-bg-card);
  color: var(--c-text-strong);
  box-shadow: var(--c-shadow-raised);
}
.c-btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-soft); }

.c-btn-ghost {
  background: transparent;
  color: var(--c-text-muted);
  padding: 10px var(--c-space-4);
}
.c-btn-ghost:hover { color: var(--c-text-strong); background: var(--c-bg-card); }

.c-btn-danger {
  background: linear-gradient(135deg, var(--c-accent-rose), #e11d48);
  color: white;
  box-shadow: 0 8px 22px -8px rgba(244,63,94,0.4);
}
.c-btn-danger:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(244,63,94,0.5); color: white; }

.c-btn-lg { padding: 14px var(--c-space-7); font-size: var(--c-text-md); }
.c-btn-sm { padding: 8px var(--c-space-4); font-size: var(--c-text-xs); }

/* ─── Badges & pills ────────────────────────────────────── */
.c-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--c-space-3);
  border-radius: var(--c-radius-pill);
  font-size: var(--c-text-xs);
  font-weight: var(--c-weight-semi);
  letter-spacing: 0.01em;
}
.c-badge-success { background: rgba(16,185,129,0.12); color: var(--c-accent-mint); }
.c-badge-warning { background: rgba(245,158,11,0.12); color: var(--c-accent-amber); }
.c-badge-danger  { background: rgba(244,63,94,0.12);  color: var(--c-accent-rose); }
.c-badge-info    { background: rgba(56,189,248,0.12); color: var(--c-accent-sky); }
.c-badge-brand   { background: rgba(99,102,241,0.12); color: var(--c-brand); }
.c-badge-muted   { background: var(--c-bg-sunken); color: var(--c-text-muted); }

/* ─── Forms ─────────────────────────────────────────────── */
.c-form-group { display: flex; flex-direction: column; gap: var(--c-space-2); margin-bottom: var(--c-space-4); }
.c-label {
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-semi);
  color: var(--c-text-strong);
}
.c-input, .c-select, .c-textarea {
  width: 100%;
  padding: 12px var(--c-space-4);
  background: var(--c-bg-sunken);
  border: 1px solid transparent;
  border-radius: var(--c-radius-md);
  font-family: inherit;
  font-size: var(--c-text-sm);
  color: var(--c-text-strong);
  box-shadow: var(--c-shadow-inset);
  transition: border-color var(--c-dur-fast) var(--c-ease),
              box-shadow var(--c-dur-base) var(--c-ease);
}
.c-input:focus, .c-select:focus, .c-textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--c-shadow-inset), 0 0 0 4px var(--c-brand-glow);
}
.c-textarea { min-height: 100px; resize: vertical; }
.c-help { font-size: var(--c-text-xs); color: var(--c-text-muted); }

/* ─── Lists / rows ──────────────────────────────────────── */
.c-list { display: flex; flex-direction: column; }
.c-list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--c-space-4);
  padding: var(--c-space-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.c-list-row:last-child { border-bottom: 0; }
.c-list-avatar {
  width: 44px; height: 44px;
  border-radius: var(--c-radius-md);
  display: grid; place-items: center;
  background: var(--c-bg-sunken);
  box-shadow: var(--c-shadow-inset);
  color: var(--c-text);
}

/* ─── Tables ────────────────────────────────────────────── */
.c-table-wrap {
  background: var(--c-bg-card);
  border-radius: var(--c-radius-xl);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
}
.c-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.c-table thead th {
  text-align: left;
  padding: var(--c-space-4) var(--c-space-5);
  background: var(--c-bg-raised);
  color: var(--c-text-muted);
  font-size: var(--c-text-xs);
  font-weight: var(--c-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--c-border);
}
.c-table tbody td {
  padding: var(--c-space-4) var(--c-space-5);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: var(--c-text-sm);
}
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr { transition: background var(--c-dur-fast) var(--c-ease); }
.c-table tbody tr:hover { background: var(--c-bg-raised); }

/* ─── Alerts ────────────────────────────────────────────── */
.c-alert {
  padding: var(--c-space-4) var(--c-space-5);
  border-radius: var(--c-radius-lg);
  display: flex; gap: var(--c-space-3);
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-medium);
  margin-bottom: var(--c-space-4);
}
.c-alert-success { background: rgba(16,185,129,0.10); color: var(--c-accent-mint); }
.c-alert-error   { background: rgba(244,63,94,0.10); color: var(--c-accent-rose); }
.c-alert-warning { background: rgba(245,158,11,0.10); color: var(--c-accent-amber); }
.c-alert-info    { background: rgba(56,189,248,0.10); color: var(--c-accent-sky); }

/* ─── Empty state ───────────────────────────────────────── */
.c-empty {
  text-align: center;
  padding: var(--c-space-9) var(--c-space-5);
  color: var(--c-text-muted);
}
.c-empty-icon {
  width: 80px; height: 80px;
  margin: 0 auto var(--c-space-5);
  border-radius: var(--c-radius-2xl);
  background: var(--c-bg-sunken);
  box-shadow: var(--c-shadow-inset);
  display: grid; place-items: center;
  font-size: var(--c-text-3xl);
  color: var(--c-text-subtle);
}
.c-empty-title { font-size: var(--c-text-lg); color: var(--c-text-strong); margin-bottom: var(--c-space-2); }
.c-empty-text { max-width: 380px; margin: 0 auto var(--c-space-5); }

/* ─── Utility ───────────────────────────────────────────── */
.c-stack { display: flex; flex-direction: column; gap: var(--c-space-4); }
.c-stack-sm { display: flex; flex-direction: column; gap: var(--c-space-2); }
.c-stack-lg { display: flex; flex-direction: column; gap: var(--c-space-6); }
.c-row { display: flex; align-items: center; gap: var(--c-space-3); flex-wrap: wrap; }
.c-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--c-space-4); flex-wrap: wrap; }
/* Grid columns use minmax(N, 1fr) — but the implicit row track uses
   min-content as its base, so a long unbreakable string in a child
   forces the column wider than the viewport. The cards then overflow
   horizontally. Set min-width: 0 on grid children defensively. */
.c-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--c-space-5); }
.c-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--c-space-5); }
.c-grid-2 > *, .c-grid-3 > * { min-width: 0; min-height: 0; }
.c-muted { color: var(--c-text-muted); }
.c-subtle { color: var(--c-text-subtle); }
.c-hide-mobile { @media (max-width: 768px) { display: none; } }

/* Progress bar (neumorphic) */
.c-progress {
  height: 10px;
  background: var(--c-bg-sunken);
  border-radius: var(--c-radius-pill);
  box-shadow: var(--c-shadow-inset);
  overflow: hidden;
}
.c-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent-violet));
  border-radius: var(--c-radius-pill);
  transition: width 400ms var(--c-snap);
}

/* Skeleton */
@keyframes cShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.c-skeleton {
  background: linear-gradient(90deg,
    var(--c-bg-sunken) 25%,
    var(--c-bg-raised) 50%,
    var(--c-bg-sunken) 75%);
  background-size: 200% 100%;
  animation: cShimmer 1.4s linear infinite;
  border-radius: var(--c-radius-md);
}

/* Mobile bottom tab bar (replaces sidebar at <1024) */
.c-mobile-tabs {
  display: none;
  position: fixed;
  bottom: var(--c-space-4);
  left: var(--c-space-4);
  right: var(--c-space-4);
  z-index: var(--c-z-topbar);
  background: var(--c-bg-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--c-radius-2xl);
  border: 1px solid var(--c-border-glass);
  box-shadow: var(--c-shadow-float);
  padding: var(--c-space-2);
  justify-content: space-around;
}
.c-mobile-tabs a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--c-space-2);
  color: var(--c-text-muted);
  font-size: 10px;
  font-weight: var(--c-weight-semi);
  border-radius: var(--c-radius-lg);
  transition: color var(--c-dur-fast) var(--c-ease),
              background var(--c-dur-fast) var(--c-ease);
}
.c-mobile-tabs a i { font-size: var(--c-text-lg); }
.c-mobile-tabs a.active {
  color: var(--c-brand);
  background: var(--c-bg-card);
  box-shadow: var(--c-shadow-raised);
}
@media (max-width: 1024px) {
  .c-mobile-tabs { display: flex; }
  .c-content { padding-bottom: 110px; }
  .c-sidebar { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LEGACY MOBILE COMPAT — re-skin old `.mobile-*` markup
   ────────────────────────────────────────────────────────────────────────
   Some pages still render the legacy `.mobile-container` / `.mobile-header`
   markup (pr-requests, payments, profile, projects, etc.). Re-skinning
   their old classes against the new design tokens makes them visually
   identical to the rewritten pages without per-file edits.
   ════════════════════════════════════════════════════════════════════════ */
body.customer-portal .mobile-container {
  max-width: var(--c-content-max);
  margin: 0 auto;
  padding: var(--c-page-pad);
  padding-bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-6);
  background: transparent;
}

/* Old top header — re-skin as the new glass topbar with breadcrumb feel.
   We hide the redundant QuickPR logo (sidebar already shows it on desktop)
   and prepend "Home ›" to the page title so it reads like a breadcrumb. */
body.customer-portal .mobile-header {
  position: sticky;
  top: 0;
  z-index: var(--c-z-topbar);
  background: var(--c-bg-glass) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  margin: calc(var(--c-page-pad) * -1) calc(var(--c-page-pad) * -1) var(--c-space-4);
  padding: var(--c-space-4) var(--c-page-pad) !important;
  box-shadow: none !important;
  height: var(--c-topbar-h);
  display: flex;
  align-items: center;
}
body.customer-portal .mobile-header-content {
  display: flex !important;
  align-items: center !important;
  gap: var(--c-space-3);
  max-width: var(--c-content-max);
  width: 100%;
  margin: 0 auto;
}

/* Hide the legacy QuickPR logo — the sidebar (and brand position in topbar
   on dashboard) already carries the brand. Reduces visual noise. */
body.customer-portal .mobile-header img,
body.customer-portal .mobile-header .mobile-logo,
body.customer-portal .mobile-header .logo,
body.customer-portal .mobile-header [class*="logo"]:not([class*="logout"]) { display: none !important; }

/* Page title acts as breadcrumb-current */
body.customer-portal .mobile-header-title {
  font-size: var(--c-text-sm) !important;
  font-weight: var(--c-weight-semi) !important;
  color: var(--c-text-strong) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.customer-portal .mobile-header-title::before {
  content: 'Home';
  color: var(--c-text-muted);
  font-weight: var(--c-weight-medium);
}
body.customer-portal .mobile-header-title::after {
  content: '›';
  color: var(--c-text-subtle);
  margin: 0 calc(var(--c-space-2) * -0.5);
  font-weight: var(--c-weight-medium);
  /* Move the › between "Home" and the title — use order: */
  order: -1;
  display: none; /* simplified: just rely on ::before with text */
}
body.customer-portal .mobile-header-title::before {
  content: 'Home › ';
}

/* Action buttons cluster on the right */
body.customer-portal .mobile-header-actions {
  margin-left: auto;
  display: flex !important;
  gap: var(--c-space-2);
  flex-shrink: 0;
}

/* Default action buttons → soft icon-btn (NOT the gradient, that's too loud) */
body.customer-portal .mobile-header-btn,
body.customer-portal .mobile-header .header-btn,
body.customer-portal .mobile-header-action,
body.customer-portal .mobile-header-actions .mobile-btn-icon,
body.customer-portal .mobile-header-actions a,
body.customer-portal .mobile-header-actions button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: var(--c-radius-md) !important;
  display: grid !important;
  place-items: center !important;
  background: var(--c-bg-card) !important;
  background-image: none !important;
  color: var(--c-text-muted) !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: var(--c-shadow-raised) !important;
  font-size: var(--c-text-md) !important;
  transition: transform var(--c-dur-fast) var(--c-spring),
              box-shadow var(--c-dur-base) var(--c-ease),
              color var(--c-dur-fast) var(--c-ease) !important;
  position: relative;
}
body.customer-portal .mobile-header-btn:hover,
body.customer-portal .mobile-header .header-btn:hover,
body.customer-portal .mobile-header-action:hover,
body.customer-portal .mobile-header-actions a:hover,
body.customer-portal .mobile-header-actions button:hover {
  transform: translateY(-2px) !important;
  color: var(--c-text-strong) !important;
  box-shadow: var(--c-shadow-soft) !important;
}

/* Modernize the notification badge */
body.customer-portal .mobile-header .notification-badge,
body.customer-portal .mobile-header-actions .notification-badge {
  background: var(--c-accent-coral) !important;
  border: 2px solid var(--c-bg-card) !important;
  font-size: 9px !important;
  font-weight: var(--c-weight-bold) !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: var(--c-radius-pill) !important;
  padding: 0 4px !important;
  top: -4px !important;
  right: -4px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  animation: none !important;
}

/* KPI stat cards — match new design */
body.customer-portal .mobile-stat-card {
  background: var(--c-bg-card);
  border-radius: var(--c-radius-xl);
  padding: var(--c-space-5);
  box-shadow: var(--c-shadow-card);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform var(--c-dur-base) var(--c-spring);
}
body.customer-portal .mobile-stat-card:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-soft); }
body.customer-portal .mobile-stat-card::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 70%);
  pointer-events: none;
}
body.customer-portal .mobile-stat-card .stat-number,
body.customer-portal .mobile-stat-card .stat-value,
body.customer-portal .mobile-stat-card strong:first-child,
body.customer-portal .mobile-stat-card > div:first-child {
  font-size: var(--c-text-2xl);
  font-weight: var(--c-weight-bold);
  color: var(--c-text-strong);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.1;
}
body.customer-portal .mobile-stat-card .stat-label,
body.customer-portal .mobile-stat-card .stat-name,
body.customer-portal .mobile-stat-card > div:last-child,
body.customer-portal .mobile-stat-card small {
  font-size: var(--c-text-xs);
  font-weight: var(--c-weight-semi);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--c-space-2);
  display: block;
}

/* Stat-grid (forces 2x2 on phones, auto-fits on tablet+) */
body.customer-portal .mobile-stats-grid,
body.customer-portal .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* hard 2x2 on phones */
  gap: var(--c-space-3);
}
@media (min-width: 640px) {
  body.customer-portal .mobile-stats-grid,
  body.customer-portal .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Generic content cards — restyle plain ones, leave inline-styled ones alone.
   The :not([style*="background"]) guard means a card that already declares
   its own background inline (typically a purple gradient promo card) keeps
   its design — we only re-skin the plain default cards. */
body.customer-portal .mobile-card:not([style*="background"]):not([style*="linear-gradient"]),
body.customer-portal .mobile-action-card:not([style*="background"]):not([style*="linear-gradient"]),
body.customer-portal .dashboard-card:not([style*="background"]):not([style*="linear-gradient"]),
body.customer-portal .modern-card:not([style*="background"]):not([style*="linear-gradient"]),
body.customer-portal .card:not(.c-card):not([style*="background"]):not([style*="linear-gradient"]) {
  background: var(--c-bg-card);
  border-radius: var(--c-radius-xl);
  padding: var(--c-space-5);
  box-shadow: var(--c-shadow-card);
  border: 0;
  color: var(--c-text);
  margin-bottom: 0;
}

/* Gradient/promo cards — modernize the gradient + ensure text is readable */
body.customer-portal .mobile-card[style*="linear-gradient"],
body.customer-portal .mobile-action-card[style*="linear-gradient"],
body.customer-portal .dashboard-card[style*="linear-gradient"] {
  border-radius: var(--c-radius-xl) !important;
  padding: var(--c-space-6) !important;
  box-shadow: var(--c-shadow-card), 0 12px 30px -12px var(--c-brand-glow) !important;
  border: 0 !important;
  color: white !important;
  position: relative;
  overflow: hidden;
}
body.customer-portal .mobile-card[style*="linear-gradient"] h1,
body.customer-portal .mobile-card[style*="linear-gradient"] h2,
body.customer-portal .mobile-card[style*="linear-gradient"] h3,
body.customer-portal .mobile-card[style*="linear-gradient"] h4,
body.customer-portal .mobile-card[style*="linear-gradient"] strong,
body.customer-portal .mobile-card[style*="linear-gradient"] li,
body.customer-portal .mobile-card[style*="linear-gradient"] p {
  color: white !important;
}
body.customer-portal .mobile-card-title,
body.customer-portal .section-title,
body.customer-portal .card-header h2,
body.customer-portal .card-header h3 {
  font-size: var(--c-text-md);
  font-weight: var(--c-weight-bold);
  color: var(--c-text-strong);
  margin-bottom: var(--c-space-4);
  letter-spacing: -0.01em;
}

/* Old buttons → new design pills */
body.customer-portal .mobile-btn,
body.customer-portal .btn-primary:not(.c-btn-primary),
body.customer-portal button.primary-btn,
body.customer-portal .action-btn {
  display: inline-flex; align-items: center; gap: var(--c-space-2);
  padding: 12px var(--c-space-5);
  border-radius: var(--c-radius-pill);
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-semi);
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet));
  color: white;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 22px -8px var(--c-brand-glow), var(--c-shadow-raised);
  transition: transform var(--c-dur-fast) var(--c-spring);
}
body.customer-portal .mobile-btn:hover,
body.customer-portal .btn-primary:not(.c-btn-primary):hover,
body.customer-portal button.primary-btn:hover,
body.customer-portal .action-btn:hover { transform: translateY(-2px); color: white; }

/* Replace the legacy purple gradient (#667eea → #764ba2) with the new
   brand gradient. Applied to any element with that inline gradient. */
body.customer-portal [style*="linear-gradient(135deg, #667eea"],
body.customer-portal [style*="linear-gradient(135deg,#667eea"],
body.customer-portal [style*="linear-gradient(135deg, #f0f4ff"],
body.customer-portal [style*="linear-gradient(135deg, #f8fafc"] {
  background-image: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet)) !important;
}

/* ── Hero/header cards defined via class (not inline) ─────────
   connections-header, marketplace-header, etc. — page-level CSS sets
   gradient + color:white but our adapter sometimes loses the white.
   Force the proper gradient + white text. */
body.customer-portal .connections-header,
body.customer-portal .marketplace-header,
body.customer-portal .marketplace-hero,
body.customer-portal .startup-header,
body.customer-portal .founder-header,
body.customer-portal .page-hero,
body.customer-portal .gradient-hero,
body.customer-portal [class*="-header"][class*="gradient"],
body.customer-portal .upgrade-card,
body.customer-portal .promo-card {
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet)) !important;
  background-image: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet)) !important;
  color: white !important;
  border-radius: var(--c-radius-xl) !important;
  padding: var(--c-space-6) var(--c-space-5) !important;
  box-shadow: var(--c-shadow-card), 0 12px 30px -12px var(--c-brand-glow) !important;
  border: 0 !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.customer-portal .connections-header *,
body.customer-portal .marketplace-header *,
body.customer-portal .marketplace-hero *,
body.customer-portal .page-hero *,
body.customer-portal .gradient-hero *,
body.customer-portal .upgrade-card *,
body.customer-portal .promo-card * {
  color: white !important;
}
body.customer-portal .connections-header h1,
body.customer-portal .connections-header h2,
body.customer-portal .marketplace-header h1,
body.customer-portal .marketplace-header h2,
body.customer-portal .marketplace-hero h1,
body.customer-portal .marketplace-hero h2 {
  font-size: var(--c-text-2xl) !important;
  font-weight: var(--c-weight-bold) !important;
  letter-spacing: -0.02em;
  margin-bottom: var(--c-space-2) !important;
}
body.customer-portal .connections-header p,
body.customer-portal .marketplace-header p,
body.customer-portal .marketplace-hero p {
  opacity: 0.92;
  font-size: var(--c-text-sm) !important;
  line-height: var(--c-leading-snug);
}

/* ── Tab navigation (connections page) ────────────────────── */
body.customer-portal .tab-navigation {
  display: flex !important;
  gap: var(--c-space-2);
  background: var(--c-bg-card);
  border-radius: var(--c-radius-pill);
  padding: var(--c-space-1);
  box-shadow: var(--c-shadow-inset);
  margin: 0 auto var(--c-space-5);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
body.customer-portal .tab-button {
  padding: var(--c-space-2) var(--c-space-4) !important;
  border-radius: var(--c-radius-pill) !important;
  background: transparent !important;
  color: var(--c-text-muted) !important;
  font-size: var(--c-text-sm) !important;
  font-weight: var(--c-weight-semi) !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: var(--c-space-2);
  white-space: nowrap;
  transition: all var(--c-dur-fast) var(--c-ease);
}
body.customer-portal .tab-button.active {
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet)) !important;
  color: white !important;
  box-shadow: var(--c-shadow-raised), 0 4px 12px -4px var(--c-brand-glow) !important;
}

/* ── Connection cards (network page) ──────────────────────── */
body.customer-portal .connection-card {
  background: var(--c-bg-card) !important;
  border-radius: var(--c-radius-xl) !important;
  padding: var(--c-space-5) !important;
  box-shadow: var(--c-shadow-card) !important;
  border: 0 !important;
  margin-bottom: var(--c-space-4);
}
body.customer-portal .connection-card .connection-header {
  display: flex;
  gap: var(--c-space-3);
  align-items: flex-start;
}
body.customer-portal .connection-card img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid var(--c-border) !important;
}
body.customer-portal .connection-card .action-buttons {
  display: flex;
  gap: var(--c-space-2);
  margin-top: var(--c-space-4);
  flex-wrap: wrap;
}
body.customer-portal .connection-card .action-buttons button,
body.customer-portal .connection-card .action-buttons a {
  display: inline-flex !important;
  align-items: center;
  gap: var(--c-space-1);
  padding: var(--c-space-2) var(--c-space-4) !important;
  border-radius: var(--c-radius-pill) !important;
  font-size: var(--c-text-xs) !important;
  font-weight: var(--c-weight-semi) !important;
  border: 0 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform var(--c-dur-fast) var(--c-spring) !important;
  box-shadow: var(--c-shadow-raised) !important;
}
body.customer-portal .connection-card .action-buttons .btn-accept,
body.customer-portal .connection-card .action-buttons [class*="accept"] {
  background: linear-gradient(135deg, var(--c-accent-mint), #059669) !important;
  color: white !important;
  background-image: linear-gradient(135deg, var(--c-accent-mint), #059669) !important;
}
body.customer-portal .connection-card .action-buttons .btn-reject,
body.customer-portal .connection-card .action-buttons [class*="reject"] {
  background: linear-gradient(135deg, var(--c-accent-rose), #e11d48) !important;
  color: white !important;
  background-image: linear-gradient(135deg, var(--c-accent-rose), #e11d48) !important;
}
body.customer-portal .connection-card .action-buttons .btn-view,
body.customer-portal .connection-card .action-buttons [class*="view"] {
  background: var(--c-bg-card) !important;
  color: var(--c-brand) !important;
  background-image: none !important;
}

/* ── Marketplace stats (the KPI tiles on hero) ───────────── */
body.customer-portal .marketplace-stats,
body.customer-portal .marketplace-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--c-space-3) !important;
  margin-top: var(--c-space-4) !important;
  padding: 0 !important;
}
/* Strong specificity to beat page-level inline <style> rules.
   We chain selectors so we win without inline-style hacks. */
body.customer-portal .marketplace-stats .stat-item,
body.customer-portal .marketplace-hero-stats .stat-item,
body.customer-portal .marketplace-hero .stat-item,
body.customer-portal .marketplace-stat,
body.customer-portal .stat-card,
body.customer-portal .marketplace-stats > div,
body.customer-portal .marketplace-hero-stats > div {
  background: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  backdrop-filter: blur(8px);
  border-radius: var(--c-radius-md) !important;
  padding: var(--c-space-3) !important;
  text-align: center !important;
  border: 0 !important;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.18) !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
body.customer-portal .marketplace-stats .stat-item *,
body.customer-portal .marketplace-hero-stats .stat-item *,
body.customer-portal .marketplace-stat *,
body.customer-portal .stat-card * { color: var(--c-text) !important; }
body.customer-portal .marketplace-stats .stat-item .stat-number,
body.customer-portal .marketplace-hero-stats .stat-item .stat-number,
body.customer-portal .marketplace-stat .stat-number,
body.customer-portal .stat-card .stat-number,
body.customer-portal .marketplace-stats .stat-item strong,
body.customer-portal .marketplace-hero-stats .stat-item strong {
  font-size: var(--c-text-lg) !important;
  font-weight: var(--c-weight-bold) !important;
  color: var(--c-brand) !important;
  display: block !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
body.customer-portal .marketplace-stats .stat-item .stat-label,
body.customer-portal .marketplace-hero-stats .stat-item .stat-label,
body.customer-portal .marketplace-stat .stat-label,
body.customer-portal .stat-card .stat-label {
  font-size: 9px !important;
  font-weight: var(--c-weight-semi) !important;
  color: var(--c-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  display: block !important;
}

/* ── Filter chips (search/marketplace pages) ─────────────── */
body.customer-portal .filter-chips,
body.customer-portal .category-pills,
body.customer-portal .filter-chip-list {
  display: flex;
  gap: var(--c-space-2);
  overflow-x: auto;
  padding: var(--c-space-2) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.customer-portal .filter-chips::-webkit-scrollbar,
body.customer-portal .category-pills::-webkit-scrollbar { display: none; }
body.customer-portal .filter-chip,
body.customer-portal .category-pill,
body.customer-portal .chip {
  padding: var(--c-space-2) var(--c-space-4) !important;
  border-radius: var(--c-radius-pill) !important;
  background: var(--c-bg-card) !important;
  color: var(--c-text-muted) !important;
  font-size: var(--c-text-sm) !important;
  font-weight: var(--c-weight-semi) !important;
  border: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--c-shadow-raised) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--c-dur-fast) var(--c-spring);
}
body.customer-portal .filter-chip:hover,
body.customer-portal .category-pill:hover,
body.customer-portal .chip:hover { transform: translateY(-2px); }
body.customer-portal .filter-chip.active,
body.customer-portal .category-pill.active,
body.customer-portal .chip.active {
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent-violet)) !important;
  color: white !important;
}

body.customer-portal .btn-secondary:not(.c-btn-secondary),
body.customer-portal .secondary-btn {
  display: inline-flex; align-items: center; gap: var(--c-space-2);
  padding: 12px var(--c-space-5);
  border-radius: var(--c-radius-pill);
  font-size: var(--c-text-sm);
  font-weight: var(--c-weight-semi);
  background: var(--c-bg-card);
  color: var(--c-text-strong);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--c-shadow-raised);
  transition: transform var(--c-dur-fast) var(--c-spring);
}

/* Status badges that might exist with old class names */
body.customer-portal .status-badge,
body.customer-portal .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--c-space-3);
  border-radius: var(--c-radius-pill);
  font-size: var(--c-text-xs);
  font-weight: var(--c-weight-semi);
  letter-spacing: 0.02em;
}
body.customer-portal .status-badge.success,
body.customer-portal .status-badge.completed,
body.customer-portal .status-badge.active,
body.customer-portal .status-badge.published,
body.customer-portal .status-active,
body.customer-portal .badge-success { background: rgba(16,185,129,0.12) !important; color: var(--c-accent-mint) !important; }
body.customer-portal .status-badge.pending,
body.customer-portal .status-badge.in_progress,
body.customer-portal .status-pending,
body.customer-portal .badge-warning { background: rgba(245,158,11,0.12) !important; color: var(--c-accent-amber) !important; }
body.customer-portal .status-badge.cancelled,
body.customer-portal .status-badge.rejected,
body.customer-portal .status-badge.failed,
body.customer-portal .badge-danger { background: rgba(244,63,94,0.12) !important; color: var(--c-accent-rose) !important; }

/* Old bottom navigation — restyle to floating glass tabs */
body.customer-portal .mobile-bottom-nav,
body.customer-portal .bottom-navigation,
body.customer-portal .bottom-nav,
body.customer-portal nav.mobile-nav {
  position: fixed;
  bottom: var(--c-space-4);
  left: var(--c-space-4);
  right: var(--c-space-4);
  z-index: var(--c-z-topbar);
  background: var(--c-bg-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--c-radius-2xl);
  border: 1px solid var(--c-border-glass);
  box-shadow: var(--c-shadow-float);
  padding: var(--c-space-2);
  display: flex;
  justify-content: space-around;
  height: auto !important;
  max-width: calc(var(--c-content-max) - 16px);
  margin: 0 auto;
}
body.customer-portal .mobile-bottom-nav a,
body.customer-portal .mobile-bottom-nav .nav-item,
body.customer-portal .bottom-navigation a,
body.customer-portal .bottom-nav a {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--c-space-2) !important;
  color: var(--c-text-muted) !important;
  font-size: 10px !important;
  font-weight: var(--c-weight-semi);
  border-radius: var(--c-radius-lg);
  transition: color var(--c-dur-fast), background var(--c-dur-fast);
  text-decoration: none !important;
}
body.customer-portal .mobile-bottom-nav a.active,
body.customer-portal .mobile-bottom-nav .nav-item.active,
body.customer-portal .bottom-navigation a.active {
  color: var(--c-brand) !important;
  background: var(--c-bg-card);
  box-shadow: var(--c-shadow-raised);
}
body.customer-portal .mobile-bottom-nav a i,
body.customer-portal .mobile-bottom-nav .nav-item i,
body.customer-portal .bottom-navigation a i,
body.customer-portal .bottom-nav a i { font-size: var(--c-text-lg); margin: 0 !important; }

/* Hide old "android-app-install" prompt and similar nags */
body.customer-portal .android-install-prompt,
body.customer-portal .pwa-install-banner,
body.customer-portal .app-install-banner { display: none !important; }

/* Form inputs in legacy pages */
body.customer-portal .form-control,
body.customer-portal input[type="text"]:not(.c-input),
body.customer-portal input[type="email"]:not(.c-input),
body.customer-portal input[type="password"]:not(.c-input),
body.customer-portal input[type="tel"]:not(.c-input),
body.customer-portal input[type="url"]:not(.c-input),
body.customer-portal input[type="number"]:not(.c-input),
body.customer-portal select:not(.c-select),
body.customer-portal textarea:not(.c-textarea) {
  width: 100%;
  padding: 12px var(--c-space-4);
  background: var(--c-bg-sunken);
  border: 1px solid transparent;
  border-radius: var(--c-radius-md);
  font-family: inherit;
  font-size: var(--c-text-sm);
  color: var(--c-text-strong);
  box-shadow: var(--c-shadow-inset);
  transition: border-color var(--c-dur-fast), box-shadow var(--c-dur-base);
}
body.customer-portal .form-control:focus,
body.customer-portal input:not(.c-input):focus,
body.customer-portal select:not(.c-select):focus,
body.customer-portal textarea:not(.c-textarea):focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--c-shadow-inset), 0 0 0 4px var(--c-brand-glow);
}

/* ── Strict mobile responsive — prevent ANY overlap ───────── */
@media (max-width: 768px) {
  :root { --c-page-pad: var(--c-space-4); }

  body.customer-portal {
    overflow-x: hidden;
  }

  /* Cards never exceed viewport width */
  body.customer-portal .c-card,
  body.customer-portal .c-kpi,
  body.customer-portal .mobile-card,
  body.customer-portal .mobile-stat-card,
  body.customer-portal .dashboard-card { max-width: 100%; }

  /* Tables overflow gracefully */
  body.customer-portal .c-table-wrap,
  body.customer-portal .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.customer-portal .c-table { min-width: 540px; }

  /* Topbar shrinks gracefully — drop search pill text */
  .c-topbar { padding-left: var(--c-space-4); padding-right: var(--c-space-4); gap: var(--c-space-2); }
  .c-search-pill {
    min-width: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .c-search-pill span { display: none; }
  .c-breadcrumb { font-size: var(--c-text-xs); flex: 1; min-width: 0; }
  .c-breadcrumb-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Page header title shrinks on mobile */
  .c-page-title { font-size: var(--c-text-2xl); }
  .c-page-subtitle { font-size: var(--c-text-sm); }
  .c-page-header { flex-direction: column; align-items: stretch; }
  .c-page-header .c-btn { align-self: flex-start; }

  /* Tighter content gap on mobile (was 32px, now 16px).
     overflow-x: hidden as the final line of defense — clip any rogue
     child that escapes its grid cell rather than causing the entire
     page to scroll horizontally. */
  .c-content {
    gap: var(--c-space-4);
    padding: var(--c-space-4);
    padding-bottom: 110px;
    overflow-x: hidden;
    max-width: 100%;
  }
  .c-content > * { max-width: 100%; min-width: 0; }
  .c-content .c-card { max-width: 100%; min-width: 0; }

  /* Compact KPI tile */
  .c-kpi { padding: var(--c-space-4) !important; }
  .c-kpi-icon {
    width: 36px !important; height: 36px !important;
    margin-bottom: var(--c-space-2) !important;
    font-size: var(--c-text-base) !important;
  }
  .c-kpi-label { font-size: 10px !important; margin-bottom: 2px !important; }
  .c-kpi-value { font-size: var(--c-text-xl) !important; }
  .c-kpi-trend { font-size: 10px !important; margin-top: var(--c-space-1) !important; }

  /* Hero (.c-card with gradient background) — compact padding & type */
  .c-content > .c-card:first-child { padding: var(--c-space-5) !important; }
  .c-content > .c-card:first-child .c-page-title { font-size: var(--c-text-xl) !important; }

  /* Stack hero rows tightly */
  .c-content > .c-card:first-child .c-row-between { gap: var(--c-space-3); }
  .c-content > .c-card:first-child .c-row {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--c-space-2);
    width: 100%;
  }
  .c-content > .c-card:first-child .c-btn {
    flex: 1; min-width: 140px; justify-content: center;
    padding: 10px var(--c-space-4) !important;
    font-size: var(--c-text-sm) !important;
  }
  .c-content > .c-card:first-child .c-btn-lg {
    padding: 10px var(--c-space-4) !important;
    font-size: var(--c-text-sm) !important;
  }

  /* Generic c-card a bit tighter */
  .c-card { padding: var(--c-space-4); }

  /* Mobile list row — switch from grid to flex.
     Grid was inheriting/conflicting unpredictably with the desktop
     `grid-template-columns: auto 1fr auto` rule + my :last-child fix.
     Flex with explicit `flex: 1 1 0; min-width: 0` on the content guarantees
     it fills the available space, no matter the child count. */
  .c-list-row {
    display: flex !important;
    align-items: center;
    gap: var(--c-space-3);
    padding: var(--c-space-3) 0;
    text-align: left;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  .c-list-row > * {
    grid-column: auto !important;
    grid-area: auto !important;
    justify-self: auto !important;
  }
  .c-list-row > :first-child {
    flex: 0 0 auto;     /* avatar — never grow */
    align-self: flex-start;
  }
  .c-list-row > :nth-child(2) {
    flex: 1 1 0;        /* content — fill remaining space */
    min-width: 0;
    text-align: left !important;
  }
  .c-list-row > :nth-child(2) * {
    text-align: left !important;   /* defensive: any inner divs */
  }
  .c-list-row > :nth-child(3) {
    flex: 0 0 auto;     /* meta — fit content */
    text-align: right;
    margin-left: auto;  /* push to the right edge */
  }

  /* Buttons row never breaks viewport */
  .c-row, .c-row-between { gap: var(--c-space-2); }

  /* Two-column grids collapse to single on phone. minmax(0,1fr) — NOT
     just 1fr — so long unbreakable child content can't force the
     column wider than the viewport. */
  .c-grid-2, .c-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--c-space-3);
  }
}

/* Even tighter at 480 (small phone) */
@media (max-width: 480px) {
  :root { --c-page-pad: var(--c-space-3); }
  .c-page-title { font-size: var(--c-text-lg) !important; }
  .c-page-subtitle { font-size: var(--c-text-xs) !important; }
  .c-kpi { padding: var(--c-space-3) !important; }
  .c-kpi-value { font-size: var(--c-text-lg) !important; }
  .c-kpi-icon { width: 32px !important; height: 32px !important; }
  .c-btn-lg { padding: 10px var(--c-space-4); font-size: var(--c-text-xs); }
  .c-content > .c-card:first-child {
    padding: var(--c-space-4) !important;
  }
  .c-content > .c-card:first-child .c-page-title {
    font-size: var(--c-text-lg) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   AUTH — login, register, OTP verify
   ────────────────────────────────────────────────────────────────────────
   Apple-quality restraint. One focal card. Hairline detail. Single CTA
   hierarchy. Same tokens as the rest of the app.
   Mobile-first, scales to a slightly wider card on desktop.
   ════════════════════════════════════════════════════════════════════════ */

body.auth-portal {
  background:
    radial-gradient(80vmax 60vmax at 20% 0%,  color-mix(in srgb, var(--c-brand) 8%, transparent) 0%, transparent 60%),
    radial-gradient(70vmax 50vmax at 100% 100%, color-mix(in srgb, var(--c-accent-violet) 6%, transparent) 0%, transparent 60%),
    var(--c-bg);
  color: var(--c-text);
  font-family: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--c-text-base);
  line-height: var(--c-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  margin: 0; padding: 0;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  place-items: center;
}

/* The whole auth column — vertical, centered */
.auth-shell {
  width: 100%;
  max-width: 400px;
  padding:
    max(var(--c-space-7), env(safe-area-inset-top))
    var(--c-space-5)
    max(var(--c-space-5), env(safe-area-inset-bottom))
    var(--c-space-5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-5);
  animation: cFadeIn 320ms var(--c-ease);
}

/* Brand — icon only, centered, restrained */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-bottom: var(--c-space-2);
}
.auth-brand img { height: 32px; width: auto; display: block; }
[data-theme="dark"]  .auth-brand img.brand-black { display: none; }
[data-theme="light"] .auth-brand img.brand-white { display: none; }
.auth-brand-tagline { display: none; }      /* less is more */
.auth-brand-logo, .auth-brand-name { display: none; }  /* legacy fallback */

/* Single focal card — everything lives here */
.auth-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: var(--c-space-7) var(--c-space-6);
  box-shadow:
    0 1px 0 rgba(15,18,24,0.04),
    0 8px 32px -16px rgba(15,18,24,0.10);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
}
.auth-card-header { text-align: center; }
.auth-card-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-text-strong);
  margin: 0;
  line-height: 1.1;
}
.auth-card-subtitle {
  font-size: var(--c-text-sm);
  color: var(--c-text-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Alerts — subtle */
.auth-card > .c-alert {
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: var(--c-text-sm);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.auth-card > .c-alert > i:first-child { margin-top: 2px; flex-shrink: 0; }

/* Method picker — iOS Table cells, no chrome, just hairlines.
   Lives in a contained list, not floating cards. */
.auth-method-grid {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-raised);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.auth-method-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: transparent;
  color: var(--c-text-strong);
  font-size: var(--c-text-base);
  font-weight: 600;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  min-height: 64px;
  text-align: left;
  transition: background 100ms var(--c-ease);
}
.auth-method-btn + .auth-method-btn { border-top: 1px solid var(--c-border); }
.auth-method-btn:active { background: var(--c-bg-sunken); }
@media (hover: hover) {
  .auth-method-btn:hover { background: var(--c-bg-card); }
}
.auth-method-btn i:first-child {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  color: var(--c-brand);
  font-size: 16px;
  flex-shrink: 0;
}
.auth-method-btn[data-method="email"]   i:first-child,
.auth-method-btn[href*="email"]         i:first-child { color: var(--c-accent-sky); }
.auth-method-btn[data-method="whatsapp"] i:first-child,
.auth-method-btn:has(.fa-whatsapp)       i:first-child { color: #25D366; }
.auth-method-btn > div,
.auth-method-btn > span:not([class]) {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.auth-method-btn small,
.auth-method-btn > div > div:not([class]) {
  font-size: var(--c-text-xs);
  color: var(--c-text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.auth-method-btn::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--c-text-subtle);
  font-size: 11px;
  flex-shrink: 0;
}

/* Form — flat, no card-in-a-card */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
}
.auth-form .c-form-group { margin-bottom: 0; }
.auth-form .c-label {
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 2px;
}
.auth-form .c-input,
.auth-form .c-select,
.auth-form .c-textarea {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  box-shadow: none;
  font-size: var(--c-text-base);
  color: var(--c-text-strong);
  transition: border-color 100ms var(--c-ease), background 100ms var(--c-ease);
}
.auth-form .c-input:focus,
.auth-form .c-select:focus,
.auth-form .c-textarea:focus {
  outline: none;
  background: var(--c-bg-card);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent);
}
.auth-form .c-help {
  font-size: var(--c-text-xs);
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* Single primary CTA — Apple-style filled button */
.auth-form .c-btn,
.auth-card > .c-btn,
.auth-form button[type="submit"]:not([class*="auth-"]) {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 14px 20px !important;
  min-height: 52px;
  font-size: var(--c-text-base) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 100ms var(--c-ease), background 100ms var(--c-ease), box-shadow 100ms var(--c-ease);
  animation: none !important;
}
.auth-form .c-btn-primary,
.auth-card > .c-btn-primary {
  background: var(--c-text-strong);
  color: var(--c-bg-card);
  box-shadow: none;
}
.auth-form .c-btn-primary:hover,
.auth-card > .c-btn-primary:hover {
  transform: none;
  background: color-mix(in srgb, var(--c-text-strong) 88%, transparent);
  color: var(--c-bg-card);
  box-shadow: none;
}
.auth-form .c-btn-primary:active,
.auth-card > .c-btn-primary:active { transform: scale(0.985); }
[data-theme="light"] .auth-form .c-btn-primary,
[data-theme="light"] .auth-card > .c-btn-primary {
  background: #0c111a;
  color: white;
}
[data-theme="light"] .auth-form .c-btn-primary:hover,
[data-theme="light"] .auth-card > .c-btn-primary:hover { background: #1f2937; }

/* Inline "back" / "resend" link inside form */
.auth-inline-link {
  text-align: center;
  font-size: var(--c-text-xs);
  color: var(--c-text-muted);
  padding-top: 4px;
}
.auth-inline-link a,
.auth-inline-link button {
  background: none; border: 0; padding: 0;
  color: var(--c-brand);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit; font-size: inherit;
  text-decoration: none;
}
.auth-inline-link a:hover,
.auth-inline-link button:hover { color: var(--c-brand-hover); text-decoration: underline; }

/* OTP grid */
.auth-otp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.auth-otp-grid input {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  padding: 14px 0;
  font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.02em;
}

/* Account picker (when email matches both customer + agency) */
.auth-account-picker { display: flex; flex-direction: column; gap: 8px; }
.auth-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--c-text);
  transition: border-color 100ms var(--c-ease);
}
.auth-account-card:hover { border-color: var(--c-brand); }
.auth-account-card .auth-account-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  display: grid; place-items: center;
  color: var(--c-brand);
  flex-shrink: 0;
}
.auth-account-meta { display: flex; flex-direction: column; min-width: 0; }
.auth-account-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  font-weight: 600;
}
.auth-account-name {
  font-size: var(--c-text-base);
  font-weight: 600;
  color: var(--c-text-strong);
}

/* Divider for OR USE alternatives */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--c-text-subtle);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}

/* Trust signals — one hairline row of inline text, NOT a card */
.auth-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
  text-align: center;
}
.auth-trust > * {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  flex: initial !important;
}
.auth-trust > *::after,
.auth-trust > *:not(:last-child)::after { display: none !important; }
.auth-trust > *:not(:last-child)::before { display: none; }
.auth-trust strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.auth-trust > * span,
.auth-trust > * > :not(strong) {
  font-size: 11px;
  color: var(--c-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0;
  display: inline;
  white-space: nowrap;
}
/* Insert a separator dot between children of auth-trust */
.auth-trust > * + *::before {
  content: '·';
  color: var(--c-border-strong);
  margin-right: 6px;
  font-weight: 400;
  display: inline-block;
}

/* Footer — single line of muted text with subtle links.
   On smaller form factors lives at the bottom of the shell.    */
.auth-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--c-text-sm);
  color: var(--c-text-muted);
  text-align: center;
}
.auth-footer-prompt {
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-muted);
}
.auth-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.auth-footer-actions a {
  display: inline;
  padding: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--c-brand) !important;
  font-size: var(--c-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
  white-space: nowrap;
  min-height: 0;
}
.auth-footer-actions a i { display: none; }   /* clean text-link feel */
.auth-footer-actions a:hover { color: var(--c-brand-hover) !important; text-decoration: underline; }
.auth-footer-actions > a + a::before {
  content: '·';
  color: var(--c-border-strong);
  margin-right: 6px;
  margin-left: 0;
}

/* Staff login — tiny, neutral, bottom of the page */
.auth-staff-link {
  margin-top: 12px;
  font-size: 11px;
  color: var(--c-text-subtle) !important;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 100ms var(--c-ease);
  background: none;
}
.auth-staff-link:hover { color: var(--c-text-muted) !important; background: transparent; }
.auth-staff-link i { font-size: 10px; opacity: 0.7; }

/* Hide the desktop feature panel — Apple-restraint: focus on one card */
.auth-feature-panel { display: none !important; }
.auth-form-panel { display: contents; }

/* Reduce-motion friendly */
@media (prefers-reduced-motion: reduce) {
  .auth-shell { animation: none; }
  .auth-method-btn, .auth-form .c-btn, .auth-card > .c-btn { transition: none; }
}

/* Small phones */
@media (max-width: 380px) {
  .auth-shell { padding-left: var(--c-space-4); padding-right: var(--c-space-4); }
  .auth-card { padding: var(--c-space-6) var(--c-space-5); }
  .auth-card-title { font-size: 24px; }
}

/* Tablet / small laptop — slightly wider card, no split-layout */
@media (min-width: 720px) {
  .auth-shell { max-width: 420px; }
  .auth-card { padding: var(--c-space-8) var(--c-space-7); }
}

/* End of customer-2026.css */


/* ════════════════════════════════════════════════════════════════════════
   AI ASSISTANT — floating action button + chat panel
   ────────────────────────────────────────────────────────────────────────
   Premium design language:
   • FAB sits bottom-right, above the mobile tab bar, with safe-area aware
     placement and a subtle floating animation.
   • Mobile → bottom sheet (75vh, drag handle, slides up with spring).
   • Desktop ≥1024px → side panel (440px wide, full-height, glass blur).
   • Messages: glass cards (AI) + brand-gradient bubbles (user), inline
     publication product cards, suggestion chips, typing indicator.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --ai-fab-size: 60px;
  --ai-panel-w: 440px;
  --ai-panel-radius: 24px;
  --ai-msg-radius: 18px;
  --ai-z-fab: 998;
  --ai-z-backdrop: 999;
  --ai-z-panel: 1000;
}

/* ─── Floating action button ──────────────────────────────────────────── */
.ai-fab {
  position: fixed;
  right: max(var(--c-space-5), env(safe-area-inset-right));
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: var(--ai-fab-size);
  height: var(--ai-fab-size);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  z-index: var(--ai-z-fab);
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 20%,
      color-mix(in srgb, var(--c-brand) 92%, white) 0%,
      var(--c-brand) 55%,
      var(--c-accent-violet) 100%);
  box-shadow:
    0 8px 24px -8px color-mix(in srgb, var(--c-brand) 50%, transparent),
    0 16px 40px -12px color-mix(in srgb, var(--c-accent-violet) 36%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease;
  animation: ai-fab-float 4.2s ease-in-out infinite;
}
.ai-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 12px 32px -8px color-mix(in srgb, var(--c-brand) 60%, transparent),
    0 20px 48px -12px color-mix(in srgb, var(--c-accent-violet) 45%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}
.ai-fab:active { transform: translateY(0) scale(0.96); }
.ai-fab-icon {
  font-size: 22px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.ai-fab-spark {
  position: absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  animation: ai-fab-spark 2.4s ease-in-out infinite;
}
@keyframes ai-fab-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes ai-fab-spark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Hide FAB when chat is open */
.ai-fab.is-hidden {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* ─── Backdrop scrim ──────────────────────────────────────────────────── */
.ai-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 24, 0.32);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  z-index: var(--ai-z-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Chat panel — mobile bottom sheet (default) ─────────────────────── */
.ai-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 78vh;
  max-height: 740px;
  z-index: var(--ai-z-panel);
  background: var(--c-bg-card);
  border-radius: var(--ai-panel-radius) var(--ai-panel-radius) 0 0;
  box-shadow:
    0 -16px 48px -16px rgba(15, 17, 24, 0.24),
    0 -4px 16px -8px rgba(15, 17, 24, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.ai-panel.is-open { transform: translateY(0); }

/* Drag handle (mobile only) */
.ai-panel-handle {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  user-select: none;
}
.ai-panel-handle::before {
  content: '';
  width: 36px; height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-text-muted) 24%, transparent);
}

/* Panel header */
.ai-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-2) var(--c-space-5) var(--c-space-4);
  border-bottom: 1px solid var(--c-border);
}
.ai-panel-avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--c-brand) 92%, white) 0%,
      var(--c-brand) 60%,
      var(--c-accent-violet) 100%);
  color: #fff;
  font-size: 16px;
  box-shadow:
    0 4px 12px -4px color-mix(in srgb, var(--c-brand) 40%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
}
.ai-panel-meta { flex: 1 1 0; min-width: 0; }
.ai-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-strong);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ai-panel-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.ai-panel-sub::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent-mint, #10b981);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent-mint, #10b981) 60%, transparent);
  animation: ai-pulse 2s ease-out infinite;
}
@keyframes ai-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--c-accent-mint, #10b981) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-mint, #10b981) 0%, transparent);  }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--c-accent-mint, #10b981) 0%, transparent);  }
}
.ai-panel-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--c-bg-sunken);
  color: var(--c-text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.ai-panel-close:hover {
  background: color-mix(in srgb, var(--c-text-muted) 12%, var(--c-bg-sunken));
  color: var(--c-text-strong);
  transform: scale(1.04);
}

/* Messages scroll area */
.ai-panel-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--c-space-4) var(--c-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.ai-panel-body::-webkit-scrollbar { width: 6px; }
.ai-panel-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-text-muted) 20%, transparent);
  border-radius: 3px;
}

/* Welcome / first run */
.ai-welcome {
  text-align: center;
  padding: var(--c-space-4) var(--c-space-2);
  animation: ai-fade-up 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-welcome-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--c-space-3);
  border-radius: 16px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--c-brand) 92%, white) 0%,
      var(--c-brand) 60%,
      var(--c-accent-violet) 100%);
  color: #fff;
  font-size: 22px;
  box-shadow:
    0 8px 20px -6px color-mix(in srgb, var(--c-brand) 40%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
}
.ai-welcome-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text-strong);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ai-welcome-sub {
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}

/* Messages */
.ai-msg {
  display: flex;
  gap: var(--c-space-2);
  max-width: 100%;
  animation: ai-fade-up 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-msg.user { justify-content: flex-end; }
.ai-msg-bubble {
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: var(--ai-msg-radius);
  max-width: 78%;
  word-wrap: break-word;
}
.ai-msg.user .ai-msg-bubble {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--c-brand) 35%, transparent);
}
.ai-msg.ai .ai-msg-bubble {
  background: var(--c-bg-card);
  color: var(--c-text-strong);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 6px;
}
.ai-msg.ai .ai-msg-bubble strong { color: var(--c-text-strong); font-weight: 600; }
.ai-msg.ai .ai-msg-bubble a { color: var(--c-brand); text-decoration: none; }
.ai-msg.ai .ai-msg-bubble a:hover { text-decoration: underline; }
.ai-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--c-brand) 92%, white) 0%,
      var(--c-brand) 60%,
      var(--c-accent-violet) 100%);
  color: #fff;
  font-size: 12px;
  align-self: flex-end;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Inline publication card */
.ai-pub-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-lg);
  padding: var(--c-space-3);
  display: flex; flex-direction: column;
  gap: var(--c-space-2);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: ai-fade-up 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-pub-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-brand) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-brand) 28%, var(--c-border));
}
.ai-pub-row {
  display: flex; align-items: flex-start;
  gap: var(--c-space-3);
}
.ai-pub-meta { flex: 1 1 0; min-width: 0; }
.ai-pub-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-strong);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-pub-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  background: var(--c-bg-sunken);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.ai-pub-stats {
  display: flex; flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  color: var(--c-text-muted);
}
.ai-pub-stats span {
  display: inline-flex; align-items: center; gap: 3px;
}
.ai-pub-stats i { font-size: 10px; opacity: 0.7; }
.ai-pub-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-strong);
  text-align: right;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.ai-pub-price-usd {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.ai-pub-cta {
  display: flex; gap: var(--c-space-2);
}
.ai-pub-cta .c-btn { flex: 1; padding: 8px 14px; font-size: 13px; }

/* Success card (project created) */
.ai-success-card {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-accent-mint, #10b981) 12%, var(--c-bg-card)) 0%,
      var(--c-bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--c-accent-mint, #10b981) 35%, var(--c-border));
  border-radius: var(--c-radius-lg);
  padding: var(--c-space-4);
  display: flex; gap: var(--c-space-3);
  align-items: flex-start;
  animation: ai-fade-up 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-success-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--c-accent-mint, #10b981);
  color: #fff;
  display: grid; place-items: center;
  font-size: 18px;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c-accent-mint, #10b981) 50%, transparent);
}
.ai-success-meta {
  flex: 1 1 0; min-width: 0;
}
.ai-success-title {
  font-size: 14px; font-weight: 600;
  color: var(--c-text-strong);
  margin-bottom: 2px;
}
.ai-success-sub {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: var(--c-space-2);
}

/* Typing indicator */
.ai-typing {
  display: inline-flex; gap: 4px;
  padding: 12px 14px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--ai-msg-radius);
  border-bottom-left-radius: 6px;
}
.ai-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-text-muted);
  animation: ai-typing-bounce 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Suggestion chips row */
.ai-chips {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 0 var(--c-space-5) var(--c-space-3);
  scrollbar-width: none;
}
.ai-chips::-webkit-scrollbar { display: none; }
.ai-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-strong);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
  font-family: inherit;
}
.ai-chip:hover {
  background: color-mix(in srgb, var(--c-brand) 8%, var(--c-bg-card));
  border-color: color-mix(in srgb, var(--c-brand) 30%, var(--c-border));
  transform: translateY(-1px);
}
.ai-chip:active { transform: translateY(0); }

/* Composer (input) */
.ai-composer {
  flex: 0 0 auto;
  padding: var(--c-space-3) var(--c-space-4) var(--c-space-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-card);
}
.ai-composer-row {
  display: flex; gap: 8px;
  align-items: flex-end;
}
.ai-input {
  flex: 1 1 0;
  min-width: 0;
  resize: none;
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  color: var(--c-text-strong);
  background: var(--c-bg-sunken);
  max-height: 120px;
  min-height: 44px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ai-input:focus {
  outline: none;
  border-color: var(--c-brand);
  background: var(--c-bg-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 12%, transparent);
}
.ai-send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  color: #fff;
  font-size: 14px;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 160ms ease,
              box-shadow 160ms ease;
  box-shadow:
    0 4px 12px -4px color-mix(in srgb, var(--c-brand) 50%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.ai-send:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow:
    0 6px 16px -4px color-mix(in srgb, var(--c-brand) 60%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-send.is-loading i { animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

@keyframes ai-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Desktop side panel ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ai-fab {
    bottom: max(var(--c-space-6), env(safe-area-inset-bottom));
  }
  .ai-panel {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--ai-panel-w);
    height: 100vh;
    max-height: none;
    border-radius: var(--ai-panel-radius) 0 0 var(--ai-panel-radius);
    transform: translateX(100%);
  }
  .ai-panel.is-open { transform: translateX(0); }
  .ai-panel-handle { display: none; }
  .ai-panel-head { padding-top: var(--c-space-5); }
}

/* ─── Dark mode tweaks ───────────────────────────────────────────────── */
[data-theme="dark"] .ai-msg.ai .ai-msg-bubble {
  background: color-mix(in srgb, var(--c-bg-card) 80%, white);
}
[data-theme="dark"] .ai-input {
  background: var(--c-bg-card);
}
[data-theme="dark"] .ai-input:focus {
  background: color-mix(in srgb, var(--c-bg-card) 90%, white);
}

/* End of AI assistant block */


/* ════════════════════════════════════════════════════════════════════════
   HERO AI INPUT — ChatGPT-style chat composer at top of dashboard
   ────────────────────────────────────────────────────────────────────────
   Primary surface for the AI assistant. Typing here calls
   window.aiChatOpenWith(text) which opens the existing side panel
   and auto-sends. Hero replaces the previous "Submit a PR / Marketplace"
   button row as the dashboard's hero action.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Hero AI — generous, centered, Claude/ChatGPT-quality ─────────── */

.hero-ai {
  padding: clamp(var(--c-space-5), 5vw, var(--c-space-8)) 0
           clamp(var(--c-space-4), 4vw, var(--c-space-6));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-5);
  text-align: center;
  margin-bottom: var(--c-space-2);
}

/* Greeting */
.hero-ai-greet { display: flex; flex-direction: column; gap: var(--c-space-2); }
.hero-ai-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--c-text-strong);
  margin: 0;
}
.hero-ai-sub {
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--c-text-muted);
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

/* Composer — Claude-style large textarea card with internal action bar */
.hero-ai-form {
  margin: 0;
  width: 100%;
  max-width: 760px;
}
.hero-ai-composer {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: 14px 16px 10px;
  box-shadow:
    0 1px 2px rgba(15, 17, 24, 0.04),
    0 8px 24px -12px rgba(15, 17, 24, 0.08);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hero-ai-composer:hover { border-color: color-mix(in srgb, var(--c-text) 14%, var(--c-border)); }
.hero-ai-composer:focus-within {
  border-color: color-mix(in srgb, var(--c-brand) 55%, var(--c-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-brand) 10%, transparent),
    0 12px 32px -12px color-mix(in srgb, var(--c-brand) 18%, transparent);
}

.hero-ai-input {
  width: 100%;
  /* FIXED height — no auto-grow. Keeps the dashboard layout stable
     when the user types so the "Submit a PR" + "Marketplace" CTAs
     below don't shift downward and get clicked by mistake. Long
     messages scroll internally. */
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  padding: 6px 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text-strong);
  font-family: inherit;
  display: block;
  overflow-y: auto;
}
.hero-ai-input::placeholder { color: var(--c-text-muted); }
.hero-ai-input::-webkit-scrollbar { width: 4px; }
.hero-ai-input::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-text-muted) 25%, transparent);
  border-radius: 2px;
}

/* Action bar inside the composer */
.hero-ai-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 40%, transparent);
  margin-top: 4px;
}
.hero-ai-hint {
  font-size: 12px;
  color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-ai-hint i {
  color: var(--c-brand);
  font-size: 11px;
}
.hero-ai-send {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  display: grid; place-items: center;
  background: var(--c-text-strong);
  color: var(--c-bg-card);
  font-size: 14px;
  font-family: inherit;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 160ms ease,
              background 160ms ease;
}
.hero-ai-send:hover:not(:disabled) {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--c-brand) 85%, var(--c-text-strong));
}
.hero-ai-send:active:not(:disabled) { transform: translateY(0); }
.hero-ai-send:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background: var(--c-text-strong);
}

/* Primary action row — two prominent CTAs below the composer */
.hero-ai-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}
.hero-ai-actions .c-btn { min-width: 160px; }

/* Subtle credits line */
.hero-ai-credits-line {
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: center;
}

/* Mobile */
@media (max-width: 640px) {
  .hero-ai { padding-top: var(--c-space-4); gap: var(--c-space-4); }
  .hero-ai-title { font-size: 26px; }
  .hero-ai-sub { font-size: 14px; }
  .hero-ai-composer { padding: 12px 14px 8px; border-radius: 20px; }
  .hero-ai-input { min-height: 48px; font-size: 15px; }
  .hero-ai-send { width: 32px; height: 32px; border-radius: 10px; }
  .hero-ai-actions { width: 100%; flex-direction: column; }
  .hero-ai-actions .c-btn { width: 100%; }
  .hero-ai-credits-line { font-size: 12px; }
}



/* ════════════════════════════════════════════════════════════════════════
   NEXT UP — prioritized dashboard action items
   ────────────────────────────────────────────────────────────────────────
   Compact list of contextual cards rendered above KPIs on the dashboard.
   Color-coded by kind: urgent (rose) / alert (amber) / celebrate (mint) /
   nudge (brand). Each row is icon + title + sub + inline CTA pill.
   ════════════════════════════════════════════════════════════════════════ */

.c-card.next-up {
  padding: var(--c-space-5);
}

.next-up-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.next-up-row {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3);
  background: var(--c-bg-sunken);
  border-radius: var(--c-radius-md);
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.next-up-row:hover {
  background: color-mix(in srgb, var(--c-text) 4%, var(--c-bg-sunken));
  border-color: color-mix(in srgb, var(--c-text) 8%, transparent);
  transform: translateY(-1px);
}

.next-up-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--c-bg-card);
  color: var(--c-text);
  font-size: 14px;
  box-shadow: var(--c-shadow-inset);
}

.next-up-body { flex: 1 1 0; min-width: 0; }
.next-up-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-strong);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.next-up-sub {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-up-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-strong);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.next-up-cta:hover {
  background: var(--c-text-strong);
  color: var(--c-bg-card);
  border-color: var(--c-text-strong);
}

/* Kind variants — color-tint icon background + ring */
.next-up-row[data-kind="urgent"] .next-up-icon {
  background: color-mix(in srgb, var(--c-accent-rose, #ef4444) 14%, var(--c-bg-card));
  color: var(--c-accent-rose, #ef4444);
}
.next-up-row[data-kind="urgent"] {
  background: color-mix(in srgb, var(--c-accent-rose, #ef4444) 5%, var(--c-bg-sunken));
}
.next-up-row[data-kind="urgent"] .next-up-cta {
  background: var(--c-accent-rose, #ef4444);
  border-color: var(--c-accent-rose, #ef4444);
  color: #fff;
}
.next-up-row[data-kind="urgent"] .next-up-cta:hover {
  background: color-mix(in srgb, var(--c-accent-rose, #ef4444) 88%, black);
}

.next-up-row[data-kind="alert"] .next-up-icon {
  background: color-mix(in srgb, var(--c-accent-amber, #f59e0b) 14%, var(--c-bg-card));
  color: var(--c-accent-amber, #f59e0b);
}
.next-up-row[data-kind="celebrate"] .next-up-icon {
  background: color-mix(in srgb, var(--c-accent-mint, #10b981) 14%, var(--c-bg-card));
  color: var(--c-accent-mint, #10b981);
}
.next-up-row[data-kind="nudge"] .next-up-icon {
  background: color-mix(in srgb, var(--c-brand) 12%, var(--c-bg-card));
  color: var(--c-brand);
}

/* Mobile */
@media (max-width: 540px) {
  .c-card.next-up { padding: var(--c-space-4); }
  .next-up-row { padding: 10px; gap: 10px; }
  .next-up-icon { width: 32px; height: 32px; font-size: 13px; }
  .next-up-title { font-size: 13px; }
  .next-up-sub { font-size: 11px; }
  .next-up-cta { padding: 5px 10px; font-size: 11px; }
}

/* End of Next Up block */


/* ════════════════════════════════════════════════════════════════════════
   PLAN PUBLICATIONS — what the customer's plan unlocks
   ────────────────────────────────────────────────────────────────────────
   Shown on dashboard so customers see the actual brands they get with
   their tier. Doubles as upgrade teaser for free users.
   ════════════════════════════════════════════════════════════════════════ */

.c-card.plan-pubs { padding: var(--c-space-5); }

.plan-pubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.plan-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--c-bg-sunken);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  color: var(--c-text);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  min-width: 0;
}
.plan-pub-chip:hover {
  background: color-mix(in srgb, var(--c-brand) 6%, var(--c-bg-card));
  border-color: color-mix(in srgb, var(--c-brand) 25%, var(--c-border));
  transform: translateY(-1px);
}

.plan-pub-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--c-bg-card);
  color: var(--c-brand);
  font-size: 10px;
}

.plan-pub-name {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
  color: var(--c-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-pub-da {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
  .plan-pubs-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .plan-pub-chip { padding: 8px 10px; font-size: 12px; gap: 6px; }
  .plan-pub-icon { width: 18px; height: 18px; font-size: 9px; }
  .plan-pub-da { font-size: 9px; padding: 1px 5px; }
}
/* End of plan publications block */


/* ════════════════════════════════════════════════════════════════════════
   PR-REQUESTS — pre-selected publication banner (?publication_id= flow)
   ────────────────────────────────────────────────────────────────────────
   Renders when a user arrives at pr-requests.php?action=new from a
   dashboard publication chip click. Confirms context + offers escape
   ("Change") in case they wanted a different publication.
   ════════════════════════════════════════════════════════════════════════ */

.c-card.pr-preselect-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-brand) 9%, transparent) 0%,
    color-mix(in srgb, var(--c-accent-violet) 5%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--c-brand) 22%, var(--c-border));
}

.pr-preselect-row {
  display: flex;
  align-items: center;
  gap: var(--c-space-4);
  flex-wrap: wrap;
}

.pr-preselect-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent-violet) 100%);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c-brand) 50%, transparent);
}

.pr-preselect-body { flex: 1 1 240px; min-width: 0; }

.pr-preselect-eyebrow {
  font-size: var(--c-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}

.pr-preselect-name {
  font-size: var(--c-text-xl);
  font-weight: 700;
  color: var(--c-text-strong);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pr-preselect-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pr-preselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-strong);
  font-variant-numeric: tabular-nums;
}

.pr-preselect-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-brand);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  transition: background 160ms ease;
}
.pr-preselect-link:hover { background: color-mix(in srgb, var(--c-brand) 10%, transparent); }

.pr-preselect-change {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-bg-card);
  color: var(--c-text-strong);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--c-border);
  transition: background 160ms ease, border-color 160ms ease;
}
.pr-preselect-change:hover {
  background: var(--c-bg-sunken);
  border-color: color-mix(in srgb, var(--c-brand) 30%, var(--c-border));
}

@media (max-width: 540px) {
  .pr-preselect-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
  .pr-preselect-name { font-size: var(--c-text-lg); }
  .pr-preselect-change { padding: 6px 12px; font-size: 12px; }
}
/* End of PR preselect banner block */