/* =====================================================================
   ContactForge — site.css
   Dark, modern, "operations-grade" theme for the Customer Relationship
   Platform. Electric cyan brand palette over deep navy surfaces, with
   high-density data layouts for the CRM dashboard.
===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------------- */
:root {
  /* Background scale — deepest at the page, ladders up for cards */
  --col-bg:           #050813;
  --col-bg-2:         #080c1a;
  --col-surface-1:    #0c1224;
  --col-surface-2:    #111a31;
  --col-surface-3:    #18243f;
  --col-surface-4:    #1f2e4f;
  --col-border:       #1c2a48;
  --col-border-2:     #283c66;

  /* Brand — ContactForge electric cyan */
  --col-brand:        #06b6d4;
  --col-brand-2:      #67e8f9;
  --col-accent:       #5aa9ff;
  --col-accent-deep:  #0e7490;
  --col-accent-bright:#67e8f9;
  --col-accent-glow:  rgba(6,182,212,0.35);

  --col-violet:       #7c3aed;
  --col-violet-bright:#a78bfa;
  --col-cyan:         #06b6d4;
  --col-cyan-bright:  #67e8f9;
  --col-pink:         #ec4899;

  /* Status colors */
  --col-success:      #22c55e;
  --col-warning:      #f59e0b;
  --col-danger:       #ef4444;
  --col-info:         #38bdf8;

  /* Text */
  --col-text:         #e6ecf6;
  --col-text-2:       #a8b6d1;
  --col-text-3:       #6f7e9c;
  --col-text-dim:     #4a5878;
  --col-white:        #ffffff;

  /* Gradients */
  --grad-brand:       linear-gradient(130deg, #06b6d4 0%, #67e8f9 100%);
  --grad-brand-soft:  linear-gradient(130deg, rgba(6,182,212,0.18) 0%, rgba(103,232,249,0.18) 100%);
  --grad-cyan:        linear-gradient(130deg, #06b6d4 0%, #67e8f9 100%);
  --grad-success:     linear-gradient(130deg, #16a34a 0%, #22c55e 100%);
  --grad-card:        linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --grad-border:      linear-gradient(130deg, rgba(6,182,212,0.45), rgba(103,232,249,0.45));

  /* Typography */
  --font-display:     'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
  --font-ui:          'Inter', 'Rajdhani', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Source Code Pro', monospace;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs:  6px;
  --space-sm:  10px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;

  /* Shadow */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-glow: 0 0 32px rgba(6,182,212,0.3);

  /* Transitions */
  --t-fast: 0.14s ease;
  --t-med:  0.26s cubic-bezier(.4,0,.2,1);
  --t-slow: 0.5s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  64px;
  --content-max: 1480px;
}


/* ---------------------------------------------------------------------
   2. Reset
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--col-bg);
  color: var(--col-text);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
input, textarea, select { font-family: var(--font-ui); }

/* Background atmosphere — every page gets a subtle radial-gradient
   wash so pure black never shows through. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 1200px 700px at 8% -5%, rgba(6,182,212,0.10), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 30%, rgba(124,58,237,0.10), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 110%, rgba(6,182,212,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }


/* ---------------------------------------------------------------------
   3. Layout shell — sidebar + topbar + main
--------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

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

.app-content {
  flex: 1;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  width: 100%;
  /* No max-width cap -- main content fills the freed viewport space.
     Pages with deliberately narrower content (sign-in, settings forms)
     set their own max-width on their inner wrappers. */
}


/* ---------------------------------------------------------------------
   4. Sidebar
--------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, var(--col-surface-1) 0%, var(--col-bg-2) 100%);
  border-right: 1px solid var(--col-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Diagonal shimmer (sidebar-glisten) -- ambient brand-tinted band sweeps
   top-left -> bottom-right of the menu BG. Full recipe + bug list:
   [[feedback-sidebar-glisten-recipe]] in user auto-memory. */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(150,200,255,0.07) 48%,
    rgba(200,225,255,0.11) 52%,
    transparent 70%
  );
  background-size: 250% 250%;
  background-repeat: no-repeat;
  background-position: 150% 150%;
  animation: sidebar-glisten 14s linear infinite;
  z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }
@keyframes sidebar-glisten {
  0%   { background-position: 150% 150%; }
  55%  { background-position: -150% -150%; }
  100% { background-position: -150% -150%; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar::before { animation: none; opacity: 0; }
}

.sidebar-brand {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--col-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 38px; height: 38px;
  background: #083344;
  border: 1px solid #fff;
  border-radius: var(--radius-md);
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 1px;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.55);
  position: relative;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: #06b6d4;
  filter: blur(12px);
  opacity: 0.45;
  z-index: -1;
}
.brand-text {
  display: flex; flex-direction: column; line-height: 1;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.4px;
  color: #fff;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--col-text-3);
  margin-top: 4px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-sm);
}
.sidebar-section-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--col-accent-bright);
  padding: var(--space-md) var(--space-md) var(--space-xs);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--col-text-2);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover {
  background: var(--col-surface-2);
  color: var(--col-text);
}
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(6,182,212,0.18), rgba(124,58,237,0.10));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(6,182,212,0.25);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--grad-brand);
  box-shadow: 0 0 12px var(--col-accent-glow);
}
.sidebar-link .badge {
  margin-left: auto;
  background: var(--col-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.sidebar-foot {
  padding: var(--space-md);
  border-top: 1px solid var(--col-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff;
  flex-shrink: 0;
}
.user-meta { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--col-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tier { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-cyan-bright); }


/* ---------------------------------------------------------------------
   5. Topbar
--------------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--col-border);
  background: rgba(8, 12, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  position: sticky;
  top: 0;
  z-index: 150;
}
.topbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}
.topbar-tools { display: flex; align-items: center; gap: 12px; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  width: 375px;
  color: var(--col-text-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-box:focus-within {
  border-color: var(--col-accent);
  background: var(--col-surface-1);
}
.search-box svg { width: 16px; height: 16px; opacity: 0.7; }
.search-box input {
  background: none; border: none; outline: none;
  color: var(--col-text); font-size: 13px; flex: 1;
}
.search-box input::placeholder { color: var(--col-text-3); }
.search-box .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--col-surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--col-text-3);
  border: 1px solid var(--col-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  display: grid; place-items: center;
  color: var(--col-text-2);
  position: relative;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--col-surface-3); color: var(--col-text); border-color: var(--col-border-2); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--col-danger);
  box-shadow: 0 0 0 2px var(--col-surface-2);
}


/* ---------------------------------------------------------------------
   6. Buttons
--------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(6,182,212,0.35);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(6,182,212,0.5); filter: brightness(1.08); }

.btn-secondary {
  background: var(--col-surface-2);
  color: var(--col-text);
  border-color: var(--col-border);
}
.btn-secondary:hover { background: var(--col-surface-3); border-color: var(--col-border-2); }

.btn-ghost {
  background: transparent;
  color: var(--col-text-2);
}
.btn-ghost:hover { color: var(--col-text); background: var(--col-surface-2); }

.btn-danger {
  background: rgba(239,68,68,0.15);
  color: var(--col-danger);
  border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-success {
  background: rgba(34,197,94,0.16);
  color: var(--col-success);
  border-color: rgba(34,197,94,0.3);
}

.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 14px; }
.btn-block { width: 100%; }


/* ---------------------------------------------------------------------
   7. Cards
--------------------------------------------------------------------- */
.card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
}
.card-elevated {
  background: linear-gradient(160deg, var(--col-surface-1) 0%, var(--col-surface-2) 100%);
  box-shadow: var(--shadow-md);
}
.card-glow {
  position: relative;
  overflow: hidden;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--grad-border);
  z-index: -1;
  opacity: 0.55;
}
.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--col-surface-1);
  border-radius: inherit;
  z-index: -1;
}

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: 12px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--col-text);
  display: flex; align-items: center; gap: 10px;
}
.card-title svg { width: 18px; height: 18px; color: var(--col-accent-bright); }
.card-actions { display: flex; gap: 8px; }


/* ---------------------------------------------------------------------
   8. Page header
--------------------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--col-accent-bright);
  margin-bottom: var(--space-sm);
}
.page-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--col-accent-bright);
  box-shadow: 0 0 8px var(--col-accent-bright);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.page-subtitle {
  color: var(--col-text-2);
  font-size: 14px;
  margin-top: var(--space-xs);
  max-width: 640px;
}
.page-actions { display: flex; gap: 10px; }


/* ---------------------------------------------------------------------
   9. Stat tiles
--------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.stat {
  background: linear-gradient(160deg, var(--col-surface-1) 0%, var(--col-surface-2) 100%);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--col-accent-glow) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}
.stat-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--col-text-3);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.stat-label svg { width: 14px; height: 14px; color: var(--col-accent-bright); }
.stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-top: var(--space-xs);
  letter-spacing: -0.5px;
}
.stat-meta { display: flex; align-items: center; gap: 6px; margin-top: var(--space-xs); font-size: 12px; }
.stat-delta {
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.stat-delta.up   { color: var(--col-success); background: rgba(34,197,94,0.12); }
.stat-delta.down { color: var(--col-danger);  background: rgba(239,68,68,0.12); }
.stat-meta-label { color: var(--col-text-3); }


/* ---------------------------------------------------------------------
   10. Module / dashboard grid
--------------------------------------------------------------------- */
.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-md);
}
.dash-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}


/* ---------------------------------------------------------------------
   11. Tables
--------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--col-border);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--col-text-3);
  padding: 12px 16px;
  background: var(--col-surface-2);
  border-bottom: 1px solid var(--col-border);
  white-space: nowrap;
}
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--col-border);
  color: var(--col-text);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.02); }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }


/* ---------------------------------------------------------------------
   12. Pills, chips, status indicators
--------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  /* Less-rounded corners + brighter text so pills read clearly on
     deeply-tinted theme backgrounds (purple, neon, etc.) where the
     prior pill-shape + soft text washed out against the page. */
  border-radius: 6px;
  background: rgba(0,0,0,0.30);
  color: #fff;
  border: 1px solid var(--col-border);
}
.pill svg { width: 11px; height: 11px; }
.pill.success { color: var(--col-success); background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); }
.pill.warning { color: var(--col-warning); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
.pill.danger  { color: var(--col-danger);  background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); }
.pill.info    { color: var(--col-info);    background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.25); }
.pill.brand   { color: var(--col-accent-bright); background: rgba(6,182,212,0.15); border-color: rgba(6,182,212,0.3); }
.pill.violet  { color: var(--col-violet-bright); background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); }

.dot-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot-status.green  { background: var(--col-success); box-shadow: 0 0 8px var(--col-success); }
.dot-status.yellow { background: var(--col-warning); box-shadow: 0 0 8px var(--col-warning); }
.dot-status.red    { background: var(--col-danger);  box-shadow: 0 0 8px var(--col-danger); }
.dot-status.gray   { background: var(--col-text-dim); }


/* ---------------------------------------------------------------------
   13. Forms
--------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-md); }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--col-text-2);
  margin-bottom: 6px;
}
.form-label .req { color: var(--col-danger); margin-left: 4px; }
.form-help { font-size: 11px; color: var(--col-text-3); margin-top: 4px; }

.input, .textarea, .select {
  width: 100%;
  padding: 10px 14px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  color: var(--col-text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--col-accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
  background: var(--col-surface-1);
}
.input::placeholder, .textarea::placeholder { color: var(--col-text-dim); }
.textarea { min-height: 90px; resize: vertical; font-family: inherit; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
}

.checkbox, .radio {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--col-text);
}
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--col-accent); }

.toggle {
  display: inline-block;
  position: relative;
  width: 40px; height: 22px;
  background: var(--col-surface-3);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast);
  flex-shrink: 0;
  border: 1px solid var(--col-border);
  vertical-align: middle;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t-fast);
}
.toggle.on { background: var(--col-accent); border-color: var(--col-accent-deep); }
.toggle.on::after { transform: translateX(18px); }


/* ---------------------------------------------------------------------
   14. Module cards (dashboard sections)
--------------------------------------------------------------------- */
.module {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

/* ---------------------------------------------------------------- */
/* Tutorial mode chrome.                                              */
/* Banner = always-on header strip across the top of a tutorial page. */
/* Intro  = longer preamble paragraphs beneath the banner.            */
/* Explainer = per-module "How this works" caption inside the body.   */
/*                                                                    */
/* All three share an indigo-blue palette plus a left accent stripe   */
/* so the talking blocks read as distinct from the rest of the page   */
/* chrome the moment they enter view.                                 */
/* ---------------------------------------------------------------- */
.tutorial-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 18px 26px;
  margin-bottom: var(--space-lg);
  background:
    linear-gradient(135deg,
      rgba(30,58,138,0.45) 0%,
      rgba(30,64,175,0.38) 45%,
      rgba(14,116,144,0.28) 100%);
  border: 1px solid rgba(6,182,212,0.55);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(6,182,212,0.18) inset,
    0 10px 30px rgba(30,58,138,0.32);
  overflow: hidden;
}
.tutorial-banner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  background: linear-gradient(180deg, #155e75 0%, #0e7490 100%);
}
.tutorial-banner-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #155e75 0%, #0e7490 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(14,116,144,0.55);
}
.tutorial-banner-icon svg { width: 20px; height: 20px; }
.tutorial-banner-body { flex: 1; min-width: 0; }
.tutorial-banner-title {
  font-size: 15px;
  font-weight: 800;
  color: #06b6d4;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(14,116,144,0.45);
}
.tutorial-banner-text {
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
}
.tutorial-banner-text strong { color: #e2e8f0; font-weight: 700; }
.tutorial-banner .btn { flex-shrink: 0; align-self: center; }

/* Per-module explainer caption ("How this works..."). Smaller than
   the banner but uses the same accent-stripe + blue glow so it
   reads as part of the same family of talking blocks. */
.tutorial-explainer {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(30,58,138,0.28) 0%,
      rgba(30,64,175,0.22) 60%,
      rgba(14,116,144,0.16) 100%);
  border: 1px solid rgba(6,182,212,0.45);
  border-radius: 10px;
  padding: 12px 14px 12px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(30,58,138,0.22);
  overflow: hidden;
}
.tutorial-explainer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, #155e75 0%, #0e7490 100%);
}
.tutorial-explainer strong {
  color: #e2e8f0;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.tutorial-explainer code {
  font-size: 11px;
  background: rgba(0,0,0,0.38);
  padding: 1px 6px;
  border-radius: 4px;
  color: #a5f3fc;
  font-weight: 600;
}
.tutorial-explainer a { color: #a5f3fc; font-weight: 700; }

/* Longer-form preamble shown beneath the banner. Brighter background
   than before with the same left accent stripe so it visually links
   to the banner above. */
.tutorial-intro {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(30,58,138,0.20) 0%,
      rgba(30,64,175,0.12) 55%,
      rgba(14,116,144,0.06) 100%);
  border: 1px solid rgba(6,182,212,0.28);
  border-radius: var(--radius-lg);
  padding: 26px 30px 26px 34px;
  margin-bottom: var(--space-lg);
  box-shadow: 0 4px 16px rgba(30,58,138,0.14);
  overflow: hidden;
}
.tutorial-intro::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, #155e75 0%, #0e7490 100%);
  opacity: 0.55;
}
.tutorial-intro-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #a5f3fc;
  background: rgba(6,182,212,0.15);
  border: 1px solid rgba(6,182,212,0.40);
  border-radius: 7px;
  padding: 7px 14px;
  margin-bottom: 16px;
}
.tutorial-intro-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
  background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 50%, #6366f1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  text-shadow: 0 0 28px rgba(14,116,144,0.30);
}
.tutorial-intro-text {
  font-size: 14px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 0 14px 0;
}
.tutorial-intro-text:last-child { margin-bottom: 0; }
.tutorial-intro-text strong { color: #e2e8f0; font-weight: 700; }
.tutorial-intro-text em { color: #a5f3fc; font-style: italic; }
.tutorial-intro-text a { color: #a5f3fc; font-weight: 700; }
.tutorial-intro-text code {
  font-size: 12.5px;
  background: rgba(0,0,0,0.40);
  padding: 2px 7px;
  border-radius: 4px;
  color: #a5f3fc;
  font-weight: 600;
}
.tutorial-intro-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(14,116,144,0.45);
  font-size: 13.5px;
}

/* Search-results thumbnail. Square tile next to each model row so the
   user can identify a product visually instead of by title alone.
   Empty state shows a colored gradient with the first letter of the
   title so rows without an uploaded image still have a visual anchor. */
.search-thumb {
  width: 120px; height: 120px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
}
.search-thumb.search-thumb-empty {
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(6,182,212,0.30) 0%, rgba(124,58,237,0.25) 100%);
  color: rgba(255,255,255,0.65);
  font-size: 42px; font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Search-page Edit pill. Matches the topbar Help chip so the action
   reads as a real button instead of a tucked-away link. */
.search-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(6,182,212,0.22) 0%, rgba(14,116,144,0.18) 100%);
  border: 1px solid rgba(6,182,212,0.55);
  color: #a5f3fc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(14,116,144,0.32);
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.search-edit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-edit-btn:hover {
  background: linear-gradient(135deg, rgba(6,182,212,0.32) 0%, rgba(14,116,144,0.28) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(14,116,144,0.55);
}

/* Live red unread dot used next to nav entries (Messages right now,
   but reusable). Only rendered server-side when there are real unread
   items so the indicator never lies. */
.menu-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(239,68,68,0.6);
}

/* ---------------------------------------------------------------- */
/* Promotions (.pr-*) -- shared between rep (/promotions.cgi) and  */
/* admin (/admin_promotions.cgi) templates.                           */
/* ---------------------------------------------------------------- */
.pr-kpis { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px; }
.pr-kpi  { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; padding:14px 16px; }
.pr-kpi .lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
.pr-kpi .val { font-size:24px; font-weight:700; color:#fff; font-family: var(--font-mono, monospace); margin-top:4px; }
.pr-kpi.is-active   { border-color: rgba(34,197,94,0.40); }
.pr-kpi.is-active   .val { color: #4ade80; }
.pr-kpi.is-scheduled .val { color: #67e8f9; }
.pr-kpi.is-paused    .val { color: #fbbf24; }
.pr-kpi.is-expired   .val { color: #94a3b8; }

.pr-table {
  width:100%; border-collapse:separate; border-spacing:0;
  background: var(--col-surface-1); border:1px solid var(--col-border);
  border-radius:12px; overflow:hidden;
}
.pr-table thead th {
  background: var(--col-surface-2); padding:11px 14px; text-align:left;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--col-text-3); font-weight:700; border-bottom:1px solid var(--col-border);
}
.pr-table tbody td { padding:12px 14px; border-bottom:1px solid var(--col-border); font-size:13px; color:var(--col-text-2); vertical-align:middle; }
.pr-table tbody tr:last-child td { border-bottom: none; }
.pr-table tbody tr:hover td { background: rgba(6,182,212,0.06); }
.pr-table .num { text-align:right; font-family: var(--font-mono, monospace); }
.pr-table .name { color: var(--col-text); font-weight:600; }
.pr-table .meta { font-size:11px; color: var(--col-text-3); margin-top:2px; }
.pr-table code { background: rgba(0,0,0,0.30); padding:1px 6px; border-radius:4px; font-size:11px; color: #a5f3fc; }
.pr-table .pill { font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:1px; text-transform:uppercase; }
.pr-table .pill.active    { background: rgba(34,197,94,0.18);  color: #4ade80; }
.pr-table .pill.paused    { background: rgba(245,158,11,0.18); color: #fbbf24; }
.pr-table .pill.scheduled { background: rgba(6,182,212,0.18); color: #67e8f9; }
.pr-table .pill.expired   { background: rgba(100,116,139,0.20); color: #94a3b8; }
.pr-table .pill.draft     { background: rgba(168,85,247,0.18); color: #c084fc; }
.pr-table .pill.kind      { background: rgba(6,182,212,0.18); color: #a5f3fc; }
.pr-table .pill.kind.bundle { background: rgba(34,197,94,0.18);  color: #86efac; }
.pr-table .pill.kind.sale   { background: rgba(245,158,11,0.18); color: #fcd34d; }
.pr-table .pill.kind.flash  { background: rgba(236,72,153,0.18); color: #f9a8d4; }
.pr-table .actions a, .pr-table .actions button {
  color: #a5f3fc; font-size: 12px; font-weight:700; text-decoration:none;
  background:none; border:none; cursor:pointer; padding:0; font-family:inherit;
}
.pr-table .actions a:hover, .pr-table .actions button:hover { text-decoration: underline; }
.pr-table .actions form { display:inline; margin:0; }
.pr-table .actions .sep { color: var(--col-text-3); margin:0 6px; }

.pr-form { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:14px; padding: 22px 26px; }
.pr-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px 24px; }
@media (max-width: 800px) { .pr-form-grid { grid-template-columns: 1fr; } }
.pr-field { display:flex; flex-direction:column; gap:6px; }
.pr-field.full { grid-column: 1 / -1; }
.pr-field label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
.pr-field input[type="text"],
.pr-field input[type="number"],
.pr-field input[type="datetime-local"],
.pr-field textarea,
.pr-field select {
  background: var(--col-surface-2); border:1px solid var(--col-border);
  color: var(--col-text); padding:9px 12px; border-radius:8px;
  font-size:14px; font-family:inherit;
}
.pr-field textarea { min-height: 70px; resize: vertical; }
.pr-field .hint { font-size: 11px; color: var(--col-text-3); }
.pr-radio-row { display:flex; gap:10px; flex-wrap:wrap; }
.pr-radio { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; border:1px solid var(--col-border); background: var(--col-surface-2); cursor:pointer; font-size:13px; }
.pr-radio input { accent-color: #06b6d4; }
.pr-radio.is-on { border-color: #06b6d4; background: rgba(6,182,212,0.10); }
.pr-actions { margin-top: 24px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

.pr-models-box { background: var(--col-surface-2); border:1px solid var(--col-border); border-radius:10px; padding:12px; max-height: 240px; overflow-y: auto; }
.pr-model-row { display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:6px; }
.pr-model-row:hover { background: rgba(6,182,212,0.06); }
.pr-model-row input { accent-color: #06b6d4; }

.pr-flash { padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13px; }
.pr-flash.ok  { background: rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.35); color: #86efac; }
.pr-flash.err { background: rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.35); color: #fca5a5; }

/* ---------------------------------------------------------------- */
/* SEO editor pages (dashboard_seo.cgi + admin_seo.cgi).           */
/* Two-column layout: form on the left, live SERP preview on right. */
/* ---------------------------------------------------------------- */
.seo-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1000px) { .seo-grid { grid-template-columns: 1fr; } }

.seo-preview {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: 14px;
  padding: 18px 22px;
  position: sticky;
  top: 80px;
}
.seo-preview-head {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--col-text-3);
  font-weight: 700;
  margin-bottom: 12px;
}
.seo-preview-card {
  /* Dark surface matching the rest of the dashboard. Still reads as a
     search result preview but no longer glares against the page. */
  background: var(--col-surface-2);
  color: var(--col-text);
  padding: 14px 16px;
  border-radius: 8px;
  font-family: arial, sans-serif;
  border: 1px solid var(--col-border);
}
.seo-preview-card .seo-preview-url {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
  word-break: break-all;
}
.seo-preview-card .seo-preview-title {
  font-size: 18px;
  color: #67e8f9;
  line-height: 1.3;
  margin-bottom: 4px;
  font-weight: 600;
}
.seo-preview-card .seo-preview-desc {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.45;
}
.seo-preview-note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--col-text-3);
}
.module-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--col-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  gap: 12px;
}
.module-head .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.module-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--col-accent-bright);
  flex-shrink: 0;
}
.module-icon svg { width: 16px; height: 16px; }
.module-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.module-sub {
  font-size: 11px;
  color: var(--col-text-3);
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.module-body { padding: var(--space-lg); }


/* ---------------------------------------------------------------------
   15. Marketing / landing page
--------------------------------------------------------------------- */
.landing-nav {
  position: sticky;
  top: 0; z-index: 100;
  background: rgba(5, 8, 19, 0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--col-border);
}
.landing-nav-inner {
  max-width: var(--content-max);
  margin: 0;
  padding: 16px var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-nav .links { display: flex; gap: 28px; }
.landing-nav .links a {
  font-size: 13px;
  color: var(--col-text-2);
  font-weight: 500;
  transition: color var(--t-fast);
}
.landing-nav .links a:hover { color: var(--col-text); }
.landing-nav .auth-actions { display: flex; gap: 10px; align-items: center; }

.hero {
  padding: 100px var(--space-xl) 80px;
  position: relative;
  overflow: hidden;
}
.hero-glow-1, .hero-glow-2, .hero-glow-3 {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(80px);
}
.hero-glow-1 { width: 720px; height: 720px; top: -260px; right: -120px; background: radial-gradient(circle, rgba(6,182,212,0.20), transparent 65%); }
.hero-glow-2 { width: 560px; height: 560px; bottom: -160px; left: 6%; background: radial-gradient(circle, rgba(124,58,237,0.18), transparent 65%); }
.hero-glow-3 { width: 480px; height: 480px; top: 20%; left: 40%; background: radial-gradient(circle, rgba(6,182,212,0.10), transparent 65%); }

.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 800px 600px at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 800px 600px at 50% 50%, black 30%, transparent 80%);
}

.hero-inner {
  max-width: var(--content-max);
  margin: 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6,182,212,0.10);
  border: 1px solid rgba(6,182,212,0.30);
  color: var(--col-accent-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
.hero-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--col-accent-bright);
  box-shadow: 0 0 8px var(--col-accent-bright);
  animation: pulse 1.8s infinite;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero-title .grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 17px;
  color: var(--col-text-2);
  max-width: 520px;
  margin-bottom: var(--space-xl);
  line-height: 1.65;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust {
  display: flex; gap: 24px;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--col-border);
  flex-wrap: wrap;
}
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--col-text-3); }
.hero-trust-item svg { width: 16px; height: 16px; color: var(--col-success); }

/* Hero visual: stacked floating cards mock */
.hero-visual {
  position: relative;
  height: 540px;
}
.float-card {
  position: absolute;
  background: linear-gradient(160deg, var(--col-surface-2) 0%, var(--col-surface-1) 100%);
  border: 1px solid var(--col-border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  backdrop-filter: blur(8px);
}
.fc-1 {
  top: 20px; left: 0; width: 280px;
  animation: floaty 6s ease-in-out infinite;
}
.fc-2 {
  top: 100px; right: 0; width: 300px;
  animation: floaty 6s ease-in-out -2s infinite;
}
.fc-3 {
  bottom: 40px; left: 60px; width: 320px;
  animation: floaty 6s ease-in-out -4s infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* Section pattern */
.section {
  padding: var(--space-3xl) var(--space-xl);
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}
.section-eyebrow {
  display: inline-block;
  color: var(--col-accent-bright);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: var(--space-md);
  max-width: 760px;
}
.section-title .grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-sub {
  font-size: 16px;
  color: var(--col-text-2);
  max-width: 720px;
  line-height: 1.65;
  margin-bottom: var(--space-2xl);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.feature {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
  position: relative;
  overflow: hidden;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--col-border-2);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--col-accent-bright);
  margin-bottom: var(--space-md);
  border: 1px solid rgba(6,182,212,0.25);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-xs);
}
.feature-desc { font-size: 13px; color: var(--col-text-2); line-height: 1.65; }
.feature-tag {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(124,58,237,0.18);
  color: var(--col-violet-bright);
  border: 1px solid rgba(124,58,237,0.3);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.price-card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: rgba(6,182,212,0.5);
  background: linear-gradient(160deg, var(--col-surface-2) 0%, var(--col-surface-1) 100%);
  box-shadow: 0 0 40px rgba(6,182,212,0.18);
}
.price-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  padding: 4px 12px;
  border-radius: 999px;
}
.price-tier {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-xs);
}
.price-amt {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}
.price-amt .per { font-size: 13px; color: var(--col-text-3); font-weight: 500; }
.price-desc { color: var(--col-text-2); font-size: 13px; margin: var(--space-sm) 0 var(--space-md); }
.price-list {
  margin: var(--space-md) 0 var(--space-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.price-list li {
  font-size: 13px;
  color: var(--col-text-2);
  display: flex; align-items: flex-start; gap: 8px;
}
.price-list svg { width: 14px; height: 14px; color: var(--col-success); flex-shrink: 0; margin-top: 3px; }


/* ---------------------------------------------------------------------
   16. Auth pages (login, signup)
--------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side {
  position: relative;
  background: linear-gradient(140deg, #0a0f24 0%, #1a1142 50%, #0a0f24 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2xl);
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.auth-side-glow {
  position: absolute;
  width: 700px; height: 700px;
  top: -160px; right: -200px;
  background: radial-gradient(circle, rgba(6,182,212,0.30), transparent 60%);
  filter: blur(60px);
}
.auth-side-content { position: relative; z-index: 2; max-width: 460px; }
.auth-quote {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.35;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin-bottom: var(--space-md);
}
.auth-quote-attr { font-size: 13px; color: var(--col-text-2); }

.auth-main {
  display: flex; flex-direction: column;
  padding: var(--space-2xl);
  background: var(--col-bg);
  position: relative;
}
.auth-form-wrap {
  width: 100%; max-width: 420px;
  margin: auto;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-xs);
}
.auth-sub { color: var(--col-text-2); font-size: 14px; margin-bottom: var(--space-xl); }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--col-text-3);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: var(--space-md) 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--col-border);
}
.auth-foot {
  text-align: center;
  font-size: 13px;
  color: var(--col-text-2);
  margin-top: var(--space-lg);
}
.auth-foot a { color: var(--col-accent-bright); font-weight: 600; }


/* ---------------------------------------------------------------------
   17. Charts (lightweight CSS-only sparklines / bars)
--------------------------------------------------------------------- */
.chart {
  width: 100%;
  height: 220px;
  position: relative;
}
.bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: 100%;
  padding: var(--space-md) 0;
}
.bar {
  flex: 1;
  background: var(--grad-brand);
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  position: relative;
  transition: filter var(--t-fast);
}
.bar:hover { filter: brightness(1.2); }
.bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10px;
  color: var(--col-text-3);
  letter-spacing: 0.5px;
}

.spark {
  width: 100%;
  height: 80px;
  display: block;
}
.spark path { fill: none; stroke: var(--col-accent-bright); stroke-width: 2; }
.spark .area { fill: rgba(6,182,212,0.18); stroke: none; }


/* ---------------------------------------------------------------------
   18. Upload zone
--------------------------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--col-border-2);
  background: var(--col-surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--col-accent);
  background: rgba(6,182,212,0.05);
}
.dropzone-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  display: grid; place-items: center;
  margin: 0 auto var(--space-md);
  color: var(--col-accent-bright);
}
.dropzone-icon svg { width: 28px; height: 28px; }
.dropzone-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.dropzone-sub { color: var(--col-text-3); font-size: 13px; }


/* ---------------------------------------------------------------------
   19. Model cards
--------------------------------------------------------------------- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.model-card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
  position: relative;
}
.model-card:hover {
  transform: translateY(-3px);
  border-color: var(--col-border-2);
  box-shadow: var(--shadow-md);
}
.model-thumb {
  aspect-ratio: 4 / 3;
  background: var(--col-surface-2);
  position: relative;
  overflow: hidden;
}
.model-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.model-card:hover .model-thumb img { transform: scale(1.05); }
.model-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,8,19,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
}
.model-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.model-info { padding: var(--space-md); }
.model-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--col-text-3);
}
.model-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--col-accent-bright);
}


/* ---------------------------------------------------------------------
   20. Tabs
--------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  width: fit-content;
}
.tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--col-text); }
.tab.active {
  background: var(--col-surface-3);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--col-border-2);
}


/* ---------------------------------------------------------------------
   21. Progress bar
--------------------------------------------------------------------- */
.progress {
  width: 100%;
  height: 6px;
  background: var(--col-surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: inherit;
  transition: width var(--t-slow);
}


/* ---------------------------------------------------------------------
   22. Banners / alerts
--------------------------------------------------------------------- */
.banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid;
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner.info    { background: rgba(56,189,248,0.10);  color: #bae6fd; border-color: rgba(56,189,248,0.25); }
.banner.success { background: rgba(34,197,94,0.10);   color: #bbf7d0; border-color: rgba(34,197,94,0.25); }
.banner.warning { background: rgba(245,158,11,0.10);  color: #fde68a; border-color: rgba(245,158,11,0.25); }
.banner.danger  { background: rgba(239,68,68,0.10);   color: #fecaca; border-color: rgba(239,68,68,0.25); }
.banner-action { margin-left: auto; }


/* ---------------------------------------------------------------------
   23. Footer (landing)
--------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--col-border);
  background: var(--col-bg-2);
  padding: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-3xl);
}
.foot-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-2xl);
}
.foot-col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--col-text-3);
  margin-bottom: var(--space-md);
}
.foot-col ul { display: flex; flex-direction: column; gap: 8px; }
.foot-col a { color: var(--col-text-2); font-size: 13px; transition: color var(--t-fast); }
.foot-col a:hover { color: var(--col-text); }
.foot-bottom {
  max-width: var(--content-max);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--col-border);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--col-text-3);
}


/* ---------------------------------------------------------------------
   24. Utilities
--------------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.text-center { text-align: center; }
.text-dim { color: var(--col-text-3); }
.text-secondary { color: var(--col-text-2); }
.text-success { color: var(--col-success); }
.text-danger  { color: var(--col-danger); }
.text-warning { color: var(--col-warning); }
.text-brand   { color: var(--col-accent-bright); }
.font-mono { font-family: var(--font-mono); }
.text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-md { font-size: 15px; }
.text-lg { font-size: 18px; } .text-xl { font-size: 24px; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.tabular { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--col-border); margin: var(--space-md) 0; }
.hide { display: none !important; }


/* ---------------------------------------------------------------------
   25. Scrollbar
--------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--col-bg-2); }
::-webkit-scrollbar-thumb { background: var(--col-surface-3); border-radius: 999px; border: 2px solid var(--col-bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--col-surface-4); }


/* ---------------------------------------------------------------------
   26. Responsive
--------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid, .dash-grid-3, .dash-grid-2 { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}
@media (max-width: 760px) {
  /* Landing / marketing pages (not the dashboard wrapper). The dashboard
     sidebar overlay logic lives in the <=1200px block below; do NOT
     re-introduce `.sidebar { display: none; }` here -- it broke the
     slide-in toggle because display:none beats the overlay's
     position:fixed regardless of source order. */
  .search-box { display: none; }
  .section { padding: var(--space-2xl) var(--space-md); }
  .hero { padding: 60px var(--space-md); }
}

/* ---------------------------------------------------------------------
   Tablet / foldable / landscape-phone (<= 1200px).
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {

  /* Layout: no sidebar column on mobile -- it becomes a slide-in
     overlay (rules below). Main content gets the full width by
     default; tapping the hamburger in the topbar slides the sidebar
     in on top of it. CRITICAL: must be a SINGLE column. Sidebar
     below is `position: fixed`, which removes it from grid flow --
     if the template still declares two columns, .app-main lands in
     column 1 (width 0) and the entire content collapses. */
  .app { grid-template-columns: 1fr; }
  .topbar-brand { display: inline-flex; }

  /* Sidebar -> overlay panel. Pulled out of the grid via position:fixed,
     translated off-screen by default, slid in when html.mobile-nav-open
     is on the root element. Box-shadow gives it depth over the content. */
  /* Stacking order at narrow widths (topbar is z:150 so we sit above it
     so the dim also covers the topbar -- otherwise the topbar pokes
     through the backdrop and reads as "weird, not darkened"):
       backdrop = 160, sidebar = 170, toggle (open) = 180. */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.25s ease;
    z-index: 170;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }
  html.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  /* Backdrop catches taps outside the sidebar so the nav closes when
     you tap the page. Transparent on purpose -- the user disliked the
     dim effect; the sliding panel + box-shadow already reads as a
     foreground element without needing a darkened layer behind it. */
  html.mobile-nav-open body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: 160;
  }

  /* Toggle stays in the topbar even at the mobile breakpoint -- a tap
     opens the slide-in overlay, another tap closes it. No fixed-
     position juggling needed now that the button lives inside the
     topbar's flex row. */

  /* All multi-column form layouts collapse to a single column so labels
     stack above inputs and inputs reach the full content width. */
  .pr-form-grid,
  .dash-grid,
  .dash-grid-3,
  .dash-grid-2,
  .seo-grid,
  .auth-shell,
  .hero-inner,
  .foot-grid,
  .feature-grid,
  .pricing-grid,
  .stat-row {
    grid-template-columns: 1fr !important;
  }
  .auth-side,
  .hero-visual { display: none; }

  /* Form modules tighten in -- the 22/26 desktop padding feels cavernous
     on a phone-width container. */
  .pr-form { padding: 18px 16px; }
  .module  { padding: 16px; }

  /* Inputs go thumb-friendly. 16px is the magic number that suppresses
     iOS Safari's auto-zoom on focus; 44px min-height matches the Apple
     HIG / Material touch target guideline. */
  .input, .textarea, .select,
  .pr-field input[type="text"],
  .pr-field input[type="number"],
  .pr-field input[type="datetime-local"],
  .pr-field input[type="email"],
  .pr-field input[type="password"],
  .pr-field textarea,
  .pr-field select {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }
  .pr-field textarea,
  .textarea { min-height: 96px; }

  /* Labels stay uppercase + tracked even on the smallest device --
     reinforces the existing rule in case a UA stylesheet leaks in. */
  .pr-field label,
  .form-label {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    font-weight: 700;
  }

  /* Touch-friendly buttons. The base .btn loses its lat-padding on
     small screens; bumping min-height keeps it hittable. */
  .btn        { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn-sm     { min-height: 38px; padding: 8px 12px;  font-size: 13px; }

  /* Headings scale down a step. .page-title is 36-40px on desktop. */
  .page-head .page-title { font-size: 28px; line-height: 1.2; }
  .page-subtitle         { font-size: 14px; }

  /* Section + content padding tightens. */
  .app-content { padding: 16px; }

  /* Tables that don't fit the viewport get horizontal scroll instead of
     overflowing the layout. Wrap any .table in a .table-wrap div for
     this to work; most pages already do. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table      { min-width: 560px; }

  /* Tab strips (Settings, Admin, etc.) -- base style uses
     `width: fit-content` + `white-space: nowrap`, which overflows the
     viewport when there are 4+ tabs on a phone. Let the strip take the
     full width and scroll its contents horizontally so every tab stays
     reachable without the page itself scrolling sideways. */
  .tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Topbar tools row -- chat-pill, msg-pill, help-btn. Tighter padding
     at narrow widths so all three fit alongside the brand + title, but
     the text labels ("Chat", "Messages", "Help") stay visible at every
     viewport size per product preference -- the buttons never collapse
     to bare dots/icons. */
  .topbar-tools           { gap: 6px; }
  .chat-pill,
  .msg-pill               { padding: 0 10px; height: 32px; gap: 6px; }
  .help-btn               { padding: 0 10px; height: 32px; gap: 6px; }
}

/* Small phone -- Samsung phone external panel, iPhone SE in portrait, etc. */
@media (max-width: 700px) {
  .page-head .page-title { font-size: 22px; }
  .page-subtitle         { font-size: 13px; }
  .topbar                { padding-right: 8px; }
  .pill                  { padding: 6px 10px; font-size: 12px; }
  .module                { padding: 12px; border-radius: 10px; }
  .pr-form               { padding: 14px 12px; }
  .pr-actions .btn       { flex: 1; }   /* full-width submit on phones */
}


/* =====================================================================
   27. Brand-warmth recipe (per AB feedback_brand_warmth_recipe.md)
   --------------------------------------------------------------------
   Ports the AB sunset recipe to ContactForge' blue (#06b6d4) -> violet
   (#7c3aed) palette. The base CSS above stays intact -- this section
   only layers warm radial overlays, brand-tinted borders, and brand
   glow on top of every dashboard chrome surface so the brand "bleeds
   through" the dark interior the way it does on the landing page.

   Brand triples used throughout this section:
     BRAND     = 59, 130, 246  (#06b6d4 -- primary blue)
     BRAND-2   = 124, 58, 237  (#7c3aed -- violet)
     VIOLET-BR = 167, 139, 250 (#a78bfa -- light violet, used like peach)

   Scoped to the dashboard wrapper (.app > .sidebar / .topbar / .app-
   content); marketing/landing styles are deliberately untouched.
===================================================================== */

/* ---- Body atmosphere: stronger overlapping radials ----------------- */
body::before {
  background:
    radial-gradient(ellipse 1200px 700px at 8% -5%,  rgba(6,182,212,0.18), transparent 60%),
    radial-gradient(ellipse 900px  600px at 100% 30%, rgba(124,58,237,0.14), transparent 60%),
    radial-gradient(ellipse 700px  400px at 50% 110%, rgba(6,182,212,0.10),  transparent 60%);
}

/* ---- Sidebar: layered glow + brand border-right + outward shadow --- */
.sidebar {
  background:
    radial-gradient(ellipse 150% 50% at 0%   0%,   rgba(6,182,212,0.22),  transparent 65%),
    radial-gradient(ellipse 130% 45% at 100% 30%,  rgba(124,58,237,0.12),  transparent 60%),
    radial-gradient(ellipse 120% 45% at 20%  100%, rgba(6,182,212,0.14),  transparent 65%),
    linear-gradient(180deg, #101a2e 0%, #0c1224 55%, #080c1a 100%);
  border-right: 1px solid rgba(6,182,212,0.25);
  box-shadow: 1px 0 26px rgba(6,182,212,0.10);
}

/* Sidebar section labels: light-violet, slightly muted -- gives the
   group bands a second-brand color instead of cold gray. */
.sidebar-section-label {
  color: #a78bfa;
  opacity: 0.85;
}

/* Active nav item already gradients; reinforce the inner brand ring
   and ensure the left accent bar reads as a brand light source. */
.sidebar-link.active {
  background: linear-gradient(90deg,
    rgba(6,182,212,0.28),
    rgba(124,58,237,0.10) 70%,
    transparent);
  box-shadow: inset 0 0 0 1px rgba(6,182,212,0.30);
}

/* Sidebar foot divider picks up brand alpha so the user-chip strip
   feels like a continuation of the brand surface above it. */
.sidebar-foot { border-top-color: rgba(6,182,212,0.22); }
.sidebar-brand { border-bottom-color: rgba(6,182,212,0.22); }

/* ---- Topbar: brand-tinted horizontal fade --------------------------- */
.topbar {
  background:
    linear-gradient(90deg,
      rgba(6,182,212,0.12) 0%,
      rgba(124,58,237,0.06) 40%,
      rgba(8,12,26,0.72) 100%),
    rgba(8,12,26,0.72);
  border-bottom: 1px solid rgba(6,182,212,0.22);
  box-shadow: 0 8px 24px rgba(6,182,212,0.05);
}

/* Topbar page title gets a subtle gradient so the heading reads as
   part of the brand chrome instead of plain white. */
.topbar-title {
  background: linear-gradient(135deg, #fff 0%, #fff 50%, #a78bfa 110%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ---- Cards: brand-tinted border + soft top wash + inset highlight -- */
.card,
.module,
.pr-form,
.pr-kpi,
.pr-table,
.seo-preview,
.feature {
  background:
    linear-gradient(180deg, rgba(6,182,212,0.05) 0%, transparent 40%),
    var(--col-surface-1);
  border-color: rgba(6,182,212,0.16);
  box-shadow: 0 1px 0 rgba(124,58,237,0.06) inset;
}
.card:hover,
.module:hover,
.feature:hover,
.pr-kpi:hover { border-color: rgba(6,182,212,0.32); }

/* Card title gets a glowing brand accent bar in front of the text. */
.card-title { display: inline-flex; align-items: center; gap: 10px; }
.card-title::before {
  content: '';
  width: 3px; height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #06b6d4 0%, #7c3aed 100%);
  box-shadow: 0 0 8px rgba(6,182,212,0.55);
  flex-shrink: 0;
}

/* Module-head (dashboard sections w/ icon + title) gets the same
   brand bleed at the top so the chrome reads as one family. */
.module-head {
  background:
    linear-gradient(180deg, rgba(6,182,212,0.06), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom-color: rgba(6,182,212,0.18);
}

/* ---- Stat tiles / KPI cards: brand-edge + left accent bar ---------- */
.stat {
  border-color: rgba(6,182,212,0.22);
  box-shadow: 0 8px 24px rgba(6,182,212,0.05);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.stat:hover {
  transform: translateY(-1px);
  border-color: rgba(6,182,212,0.45);
  box-shadow: 0 10px 30px rgba(6,182,212,0.14);
}
.stat::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #06b6d4 0%, #7c3aed 100%);
}
.stat-value {
  background: linear-gradient(135deg, #fff 0%, #a78bfa 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { color: #a78bfa; opacity: 0.85; }

/* pr-kpi (promotions KPI tiles) share the same treatment. */
.pr-kpi {
  position: relative;
  overflow: hidden;
}
.pr-kpi::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #06b6d4 0%, #7c3aed 100%);
}
.pr-kpi .lbl { color: #a78bfa; opacity: 0.85; }

/* ---- Tables: violet-light headers + brand-tinted hover ------------- */
.table th,
.pr-table thead th {
  color: #a78bfa;
  border-bottom-color: rgba(6,182,212,0.22);
  background: rgba(6,182,212,0.05);
}
.table tr:hover td { background: rgba(6,182,212,0.06); }

/* ---- Forms: violet-light labels + stronger brand focus ring -------- */
.form-label,
.pr-field label {
  color: #a78bfa;
  opacity: 0.95;
}
.input:focus,
.textarea:focus,
.select:focus,
.pr-field input[type="text"]:focus,
.pr-field input[type="number"]:focus,
.pr-field input[type="datetime-local"]:focus,
.pr-field textarea:focus,
.pr-field select:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.20);
  background: var(--col-surface-1);
}

/* ---- Page header: gradient title text ----------------------------- */
.page-head .page-title {
  background: linear-gradient(135deg, #fff 0%, #fff 40%, #a78bfa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  text-shadow: 0 0 28px rgba(6,182,212,0.25);
}
.page-eyebrow { color: #a78bfa; }

/* ---- Dropzone: subtle brand glow + warmer hover ------------------- */
.dropzone {
  background:
    linear-gradient(180deg, rgba(6,182,212,0.05) 0%, transparent 50%),
    var(--col-surface-1);
  border-color: rgba(6,182,212,0.30);
}
.dropzone:hover,
.dropzone.drag {
  border-color: #06b6d4;
  background:
    linear-gradient(180deg, rgba(6,182,212,0.12) 0%, transparent 60%),
    var(--col-surface-1);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
}

/* ---- Tabs: brand-tinted active state ------------------------------ */
.tabs {
  background:
    linear-gradient(180deg, rgba(6,182,212,0.05), transparent),
    var(--col-surface-2);
  border-color: rgba(6,182,212,0.18);
}
.tab.active {
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(124,58,237,0.10));
  box-shadow: inset 0 0 0 1px rgba(6,182,212,0.35);
}

/* ---- Auth box: warm wash + brand glow ----------------------------- */
.auth-main {
  background:
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(6,182,212,0.12), transparent 60%),
    radial-gradient(ellipse 600px 400px at 0% 100%, rgba(124,58,237,0.08), transparent 60%),
    var(--col-bg);
}
.auth-form-wrap {
  background:
    linear-gradient(160deg, rgba(6,182,212,0.08) 0%, transparent 45%),
    var(--col-surface-1);
  border: 1px solid rgba(6,182,212,0.22);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 24px 60px rgba(6,182,212,0.10);
}

/* ---- Banners: keep semantic colors but lift info-banner accent ---- */
.banner.info {
  background: rgba(6,182,212,0.10);
  border-color: rgba(6,182,212,0.30);
  color: #bfdbfe;
}

/* ---- Pill .brand variant: slightly heavier glow ------------------- */
.pill.brand {
  box-shadow: 0 0 12px rgba(6,182,212,0.20);
}

/* ---- Progress fill: keep brand gradient but add subtle glow ------- */
.progress-fill {
  box-shadow: 0 0 12px rgba(6,182,212,0.45);
}

/* ---- Brand-mark blur halo: cyan base to match the brand mark -- */
.brand-mark::after {
  background: #06b6d4;
  opacity: 0.55;
}

/* ---- Scrollbar thumb: brand-tinted hover -------------------------- */
::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.45); }

/* ---- Sidebar scrollbar: violet thumb so it reads as brand chrome --- */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(124,58,237,0.55) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124,58,237,0.65), rgba(167,139,250,0.55));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124,58,237,0.85), rgba(167,139,250,0.75));
  background-clip: padding-box;
}

/* =====================================================================
   END brand-warmth recipe
===================================================================== */