/* ─────────────────────────────────────────────────────────────────────────────
   CapoScore Components — buttons, inputs, cards, badges, nav, table, modal
   Loaded after base.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   BUTTON
   ============================================================================ */
.cs-btn {
  --_h: 40px;
  --_px: var(--sp-5);
  --_fs: var(--text-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--_h); padding: 0 var(--_px); font-size: var(--_fs);
  font-weight: var(--weight-semi);
  font-family: var(--font-sans);
  border-radius: var(--r-md);
  background: var(--bg-surface-2); color: var(--fg-1);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  user-select: none;
}
.cs-btn:hover  { background: var(--bg-surface-3); border-color: var(--border-3); }
.cs-btn:active { transform: scale(0.98); }
.cs-btn:disabled { opacity: 0.5; pointer-events: none; }
.cs-btn:focus-visible { box-shadow: var(--action-ring); outline: none; }

.cs-btn-primary {
  background: var(--action); color: var(--fg-on-action); border-color: transparent;
}
.cs-btn-primary:hover  { background: var(--action-hover); }
.cs-btn-primary:active { background: var(--action-press); }

.cs-btn-gradient {
  background: var(--capo-grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-glow-cyan);
}
.cs-btn-gradient:hover { transform: translateY(-2px); box-shadow: var(--shadow-3), var(--shadow-glow-cyan); }
.cs-btn-gradient:active { transform: scale(0.98); }

.cs-btn-ghost {
  background: transparent; border-color: transparent; color: var(--fg-2);
}
.cs-btn-ghost:hover { background: var(--bg-surface-2); color: var(--fg-1); }

.cs-btn-outline {
  background: transparent; border: 1px solid var(--border-3); color: var(--fg-1);
}
.cs-btn-outline:hover { background: var(--bg-surface-2); border-color: var(--action); color: var(--action); }

.cs-btn-secondary {
  background: var(--bg-surface-2); color: var(--fg-1); border: 1px solid var(--border-2);
}
.cs-btn-secondary:hover  { background: var(--bg-surface-3); border-color: var(--border-3); }
.cs-btn-secondary:active { transform: scale(0.98); }

.cs-btn-danger {
  background: var(--risk-severe); color: #fff; border-color: transparent;
}
.cs-btn-danger:hover { background: var(--risk-severe-deep); }

/* Sizes */
.cs-btn-sm { --_h: 32px; --_px: var(--sp-3); --_fs: var(--text-xs); }
.cs-btn-lg { --_h: 48px; --_px: var(--sp-6); --_fs: var(--text-md); border-radius: var(--r-lg); }
.cs-btn-xl { --_h: 56px; --_px: var(--sp-7); --_fs: var(--text-md); border-radius: var(--r-lg); }

.cs-btn-icon { width: var(--_h); padding: 0; }
.cs-btn-block { width: 100%; }

/* Lucide icons inside buttons stay 18px-ish */
.cs-btn [data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; }
.cs-btn-lg [data-lucide], .cs-btn-xl [data-lucide] { width: 18px; height: 18px; }

/* ============================================================================
   INPUT / FORM
   ============================================================================ */
.cs-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-label {
  font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-2);
  letter-spacing: 0.01em;
}
.cs-help { font-size: var(--text-xs); color: var(--fg-3); }
.cs-error-text { font-size: var(--text-xs); color: var(--status-danger-fg); }

.cs-input, .cs-textarea, .cs-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.cs-textarea { height: auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--leading-body); }
.cs-input::placeholder, .cs-textarea::placeholder { color: var(--fg-4); }
.cs-input:hover, .cs-textarea:hover, .cs-select:hover { border-color: var(--border-3); }
.cs-input:focus, .cs-textarea:focus, .cs-select:focus {
  border-color: var(--action); box-shadow: var(--action-ring);
}
.cs-input[aria-invalid="true"], .cs-input.is-invalid { border-color: var(--risk-severe); }
.cs-input:disabled { opacity: 0.6; cursor: not-allowed; }

.cs-input-group { position: relative; }
.cs-input-group .cs-input { padding-left: 40px; }
.cs-input-group [data-lucide] {
  position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--fg-3); pointer-events: none;
}

/* Checkbox + radio */
.cs-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; font-size: var(--text-sm); color: var(--fg-2); }
.cs-check input { position: absolute; opacity: 0; pointer-events: none; }
.cs-check-box {
  width: 18px; height: 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-3); background: var(--bg-surface);
  display: inline-grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-standard);
}
.cs-check input:checked + .cs-check-box {
  background: var(--action); border-color: var(--action);
}
.cs-check-box::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity var(--dur-fast);
}
.cs-check input:checked + .cs-check-box::after { opacity: 1; }
.cs-check input:focus-visible + .cs-check-box { box-shadow: var(--action-ring); }
.cs-check-radio { border-radius: 50%; }
.cs-check-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: none; transform: none; }

/* Toggle switch */
.cs-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.cs-switch input { opacity: 0; width: 0; height: 0; }
.cs-switch-track {
  position: absolute; inset: 0; cursor: pointer; background: var(--border-3);
  border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease-standard);
}
.cs-switch-track::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.cs-switch input:checked + .cs-switch-track { background: var(--action); }
.cs-switch input:checked + .cs-switch-track::before { transform: translateX(16px); }

/* ============================================================================
   CARD
   ============================================================================ */
.cs-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cs-card-pad { padding: var(--sp-6); }
.cs-card-pad-sm { padding: var(--sp-4); }
.cs-card-pad-lg { padding: var(--sp-7); }

.cs-card-hover { transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.cs-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--border-2); }

.cs-card-elevated { box-shadow: var(--shadow-2); }
.cs-card-flat { box-shadow: none; background: var(--bg-surface-2); }

.cs-card-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cs-card-body { padding: var(--sp-6); }
.cs-card-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border-1); background: var(--bg-surface-2); }

.cs-card-title { font: var(--weight-semi) var(--text-lg)/var(--leading-snug) var(--font-sans); color: var(--fg-1); margin: 0; }
.cs-card-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }

/* Accent stripe variant — admin / critical surfaces only */
.cs-card-accent { border-left: 3px solid var(--action); }
.cs-card-accent-info    { border-left-color: var(--action); }
.cs-card-accent-success { border-left-color: var(--risk-low); }
.cs-card-accent-warn    { border-left-color: var(--risk-moderate); }
.cs-card-accent-danger  { border-left-color: var(--risk-severe); }

/* ============================================================================
   STAT CARD
   ============================================================================ */
.cs-stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); }
.cs-stat-label { font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.cs-stat-value { font: var(--weight-bold) var(--text-3xl)/1 var(--font-display); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.cs-stat-delta { font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 4px; }
.cs-stat-delta-up   { color: var(--risk-low); }
.cs-stat-delta-down { color: var(--risk-severe); }

/* ============================================================================
   BADGE
   ============================================================================ */
.cs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  font-size: 11px; font-weight: var(--weight-semi);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-surface-2); color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
}
.cs-badge-pill { border-radius: var(--r-pill); padding: 0 10px; }
.cs-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.cs-badge-low      { background: var(--status-success-bg); color: var(--status-success-fg); border-color: transparent; }
.cs-badge-moderate { background: var(--status-warn-bg);    color: var(--status-warn-fg);    border-color: transparent; }
.cs-badge-high     { background: var(--status-warn-bg);    color: var(--risk-high);         border-color: transparent; }
.cs-badge-severe   { background: var(--status-danger-bg);  color: var(--status-danger-fg);  border-color: transparent; }
.cs-badge-info     { background: var(--status-info-bg);    color: var(--status-info-fg);    border-color: transparent; }
.cs-badge-neutral  { background: var(--bg-surface-2);      color: var(--fg-2); }
.cs-badge-action   { background: var(--action-soft);       color: var(--action);            border-color: transparent; }

/* ============================================================================
   TABLE
   ============================================================================ */
.cs-table-wrap { overflow-x: auto; border-radius: var(--r-xl); border: 1px solid var(--border-1); background: var(--bg-surface); }
.cs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.cs-table thead th {
  text-align: left; font-weight: var(--weight-semi); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fg-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-1);
  position: sticky; top: 0; z-index: 1;
}
.cs-table tbody td {
  padding: var(--sp-4) var(--sp-5);
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.cs-table tbody tr:hover { background: var(--bg-surface-2); }
.cs-table-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================================
   NAV — site nav + side nav + tabs
   ============================================================================ */
.cs-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: var(--nav-height);
  background: color-mix(in srgb, var(--bg-app) 80%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-1);
}
.cs-nav-inner {
  max-width: var(--container-xl); height: 100%;
  margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.cs-nav-brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--weight-semi); color: var(--fg-1); font-size: var(--text-md); letter-spacing: -0.01em; }
.cs-nav-brand-mark { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--capo-grad-neural); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.cs-nav-links { display: flex; align-items: center; gap: var(--sp-6); }
.cs-nav-link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); transition: color var(--dur-fast) var(--ease-standard); position: relative; padding: 6px 0; }
.cs-nav-link:hover { color: var(--fg-1); }
.cs-nav-link.is-active { color: var(--action); }
.cs-nav-link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--action); border-radius: var(--r-pill);
}
.cs-nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.cs-nav-burger { display: none; width: 40px; height: 40px; border-radius: var(--r-md); align-items: center; justify-content: center; color: var(--fg-2); }
.cs-nav-burger:hover { background: var(--bg-surface-2); color: var(--fg-1); }

@media (max-width: 768px) {
  .cs-nav { height: var(--nav-height-mobile); }
  .cs-nav-burger { display: inline-flex; }
  .cs-nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-1);
    box-shadow: var(--shadow-3);
    padding: var(--sp-2);
    display: none;
  }
  .cs-nav-links.is-open { display: flex; }
  .cs-nav-link { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .cs-nav-link:hover { background: var(--bg-surface-2); }
  .cs-nav-link.is-active::after { display: none; }
  .cs-nav-link.is-active { background: var(--action-soft); color: var(--action); }
  .cs-nav-actions .cs-btn { display: none; }
}

/* Theme toggle (in nav) */
.cs-theme-toggle { width: 40px; height: 40px; border-radius: var(--r-md); display: inline-grid; place-items: center; color: var(--fg-2); border: 1px solid var(--border-1); background: transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.cs-theme-toggle:hover { background: var(--bg-surface-2); color: var(--fg-1); border-color: var(--border-2); }
.cs-theme-toggle [data-lucide] { width: 18px; height: 18px; }
.cs-theme-toggle .cs-theme-toggle-light,
.cs-theme-toggle .cs-theme-toggle-dark { display: none; }
[data-theme="dark"] .cs-theme-toggle .cs-theme-toggle-light { display: inline-block; }
[data-theme="light"] .cs-theme-toggle .cs-theme-toggle-dark { display: inline-block; }
:root:not([data-theme]) .cs-theme-toggle .cs-theme-toggle-light { display: inline-block; }

/* Tabs */
.cs-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg-surface-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); }
.cs-tab { padding: 6px var(--sp-3); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); transition: all var(--dur-fast) var(--ease-standard); cursor: pointer; }
.cs-tab:hover { color: var(--fg-1); }
.cs-tab.is-active { background: var(--bg-surface); color: var(--fg-1); box-shadow: var(--shadow-1); }

/* Sidebar (admin) */
.cs-sidenav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); }
.cs-sidenav-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); transition: all var(--dur-fast) var(--ease-standard); }
.cs-sidenav-link:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.cs-sidenav-link.is-active { background: var(--action-soft); color: var(--action); }
.cs-sidenav-link [data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; }
.cs-sidenav-section-title { padding: var(--sp-4) var(--sp-4) var(--sp-2); font-size: 11px; font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-4); }

/* ============================================================================
   ALERT
   ============================================================================ */
.cs-alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  background: var(--bg-surface-2);
  color: var(--fg-2);
}
.cs-alert [data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.cs-alert-info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.cs-alert-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.cs-alert-warn    { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.cs-alert-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }

/* ============================================================================
   MODAL
   ============================================================================ */
.cs-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--bg-overlay);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: var(--sp-5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.cs-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cs-modal {
  background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-4);
  width: 100%; max-width: 480px;
  /* Cap the surface so a tall body (e.g. fully-expanded Stripe Elements
     card form, which can hit ~250px on its own) can't push the footer
     off-screen on small viewports.  The body itself scrolls (see
     .cs-modal-body below); header + footer stay pinned. */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.cs-modal-backdrop.is-open .cs-modal { transform: none; }
.cs-modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.cs-modal-body   { padding: var(--sp-6); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.cs-modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border-1); display: flex; justify-content: flex-end; gap: var(--sp-3); flex: 0 0 auto; }

/* ============================================================================
   SCORE GAUGE — circular ring + tier bar
   ============================================================================ */
.cs-gauge { --_size: 140px; --_thickness: 12px; --_pct: 0; --_color: var(--action);
  position: relative; width: var(--_size); height: var(--_size);
  display: grid; place-items: center;
}
.cs-gauge::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--_color) calc(var(--_pct) * 1%), var(--bg-surface-3) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--_thickness)), #000 calc(50% - var(--_thickness) + 0.5px));
          mask: radial-gradient(circle, transparent calc(50% - var(--_thickness)), #000 calc(50% - var(--_thickness) + 0.5px));
}
.cs-gauge-value { font: var(--weight-bold) 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--fg-1); position: relative; }
.cs-gauge-label { font-size: var(--text-xs); color: var(--fg-3); margin-top: 2px; letter-spacing: var(--tracking-caps); text-transform: uppercase; position: relative; }

/* Risk tier bar */
.cs-tier-bar { position: relative; width: 100%; height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--risk-low) 0% 30%, var(--risk-moderate) 30% 70%, var(--risk-high) 70% 90%, var(--risk-severe) 90% 100%); overflow: visible; }
.cs-tier-bar-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--bg-surface); border: 3px solid var(--fg-1); box-shadow: var(--shadow-2); }

/* Progress bar */
.cs-progress { width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--bg-surface-3); overflow: hidden; }
.cs-progress-fill { height: 100%; background: var(--capo-grad-signal); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease-standard); }

/* Avatar */
.cs-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--capo-grad-neural); color: #fff; font-weight: var(--weight-semi); font-size: var(--text-sm); flex: 0 0 auto; overflow: hidden; }
.cs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-avatar-sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.cs-avatar-lg { width: 56px; height: 56px; font-size: var(--text-md); }

/* Divider */
.cs-divider { height: 1px; background: var(--border-1); border: 0; margin: var(--sp-5) 0; }
.cs-divider-vertical { width: 1px; height: 100%; background: var(--border-1); }

/* Skeleton */
.cs-skel { background: linear-gradient(90deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 50%, var(--bg-surface-2) 100%); background-size: 200% 100%; animation: cs-skel-shimmer 1.5s ease-in-out infinite; border-radius: var(--r-md); }
@keyframes cs-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast (positioned by JS) */
.cs-toast {
  background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm);
  display: flex; gap: var(--sp-2); align-items: center; max-width: 420px;
}

/* Footer */
.cs-footer {
  border-top: 1px solid var(--border-1);
  background: var(--bg-canvas);
  color: var(--fg-3); font-size: var(--text-sm);
  padding: var(--sp-7) var(--sp-5);
}
.cs-footer a { color: var(--fg-2); transition: color var(--dur-fast); }
.cs-footer a:hover { color: var(--action); }
.cs-footer-inner { max-width: var(--container-xl); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.cs-footer-links { display: flex; gap: var(--sp-5); }


/* ============================================================
   THEME PREFERENCE — picker + segmented + toggle
   Shared by signup, profile, and component library.
   ============================================================ */

/* Theme preference picker (signup) — 4-up grid w/ visual previews */
.theme-picker { margin-top: 12px; }
.theme-picker-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.theme-picker-hint {
  font-size: var(--text-xs); color: var(--fg-3);
}
.theme-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
@media (max-width: 540px) { .theme-picker-grid { grid-template-columns: repeat(2, 1fr); } }

.theme-option { display: block; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option-card {
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-lg, var(--radius-lg, 12px));
  background: var(--bg-surface);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.theme-option:hover .theme-option-card {
  border-color: var(--action);
  transform: translateY(-1px);
}
.theme-option input:checked + .theme-option-card {
  border-color: var(--action);
  box-shadow: 0 0 0 2px var(--action);
}
.theme-option input:focus-visible + .theme-option-card {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
.theme-option-meta { display: flex; flex-direction: column; gap: 2px; }
.theme-option-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); line-height: 1.2;
}
.theme-option-sub { font-size: 11px; color: var(--fg-3); line-height: 1.2; }

.theme-preview {
  height: 56px; border-radius: 8px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
}
.theme-preview-light { background: linear-gradient(135deg, #f4f7fc, #e8edf6); }
.theme-preview-light .tp-bar  { background: #fff; height: 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.theme-preview-light .tp-line { background: #c5cad9; height: 4px; border-radius: 2px; }
.theme-preview-light .tp-line-sm { width: 60%; background: #dfe4ee; }

.theme-preview-dark { background: linear-gradient(135deg, #0a0d22, #1d2452); }
.theme-preview-dark .tp-bar  { background: rgba(255,255,255,0.18); height: 8px; border-radius: 2px; }
.theme-preview-dark .tp-line { background: rgba(255,255,255,0.10); height: 4px; border-radius: 2px; }
.theme-preview-dark .tp-line-sm { width: 60%; background: rgba(255,255,255,0.06); }

.theme-preview-auto {
  background: #0a0d22; flex-direction: row; gap: 0; padding: 0;
}
.theme-preview-auto .tp-half { flex: 1; height: 100%; display: grid; place-items: center; }
.theme-preview-auto .tp-half-light { background: linear-gradient(135deg, #f4f7fc, #e8edf6); }
.theme-preview-auto .tp-half-dark  { background: linear-gradient(135deg, #0a0d22, #1d2452); }
.theme-preview-auto .tp-half-light::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fbbf24;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.theme-preview-auto .tp-half-dark::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e5e7eb 60%, #9ca3af 100%);
  box-shadow: 0 0 8px rgba(229,231,235,0.3);
}

.theme-preview-system {
  background: linear-gradient(135deg, var(--bg-surface-2, var(--bg-app)), var(--bg-surface-3, var(--bg-canvas)));
  align-items: center; justify-content: center; flex-direction: row;
  color: var(--fg-2);
}
.theme-preview-system svg { width: 32px; height: 32px; }

/* Appearance segmented control (profile preferences) */
.appearance-segmented {
  display: inline-flex; padding: 3px;
  background: var(--bg-surface-2, var(--bg-app));
  border: 1px solid var(--border-1);
  border-radius: 999px;
  gap: 2px;
}
.appearance-segmented .seg-opt {
  appearance: none; border: 0; background: transparent;
  padding: 6px 12px; border-radius: 999px;
  font: var(--weight-semi, 600) var(--text-xs)/1 var(--font-sans);
  color: var(--fg-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.appearance-segmented .seg-opt:hover { color: var(--fg-2); }
.appearance-segmented .seg-opt.is-active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px var(--border-2);
}
@media (max-width: 640px) {
  .appearance-segmented { width: 100%; justify-content: space-between; }
  .appearance-segmented .seg-opt { flex: 1; justify-content: center; padding: 6px 8px; }
}

/* Toggle switch */
.cs-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex: none; }
.cs-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cs-toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-surface-3, color-mix(in srgb, var(--fg-3) 25%, transparent));
  border-radius: 999px;
  transition: background .2s ease;
}
.cs-toggle-track::after {
  content: ""; position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  transition: transform .2s ease, background .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cs-toggle input:checked + .cs-toggle-track { background: var(--action); }
.cs-toggle input:checked + .cs-toggle-track::after { transform: translateX(18px); }
.cs-toggle input:focus-visible + .cs-toggle-track {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* ============================================================================
   AUTH CARD — used by login, signup, reset-password, etc. (Phase 2)
   Per migration-guide.html §8 "Walkthrough: login.html" and §5 "Common
   patterns / Auth form". Visual reference: design/auth-flow.html.
   ============================================================================ */
.cs-auth-shell {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7) var(--sp-5);
  position: relative;
  min-height: calc(100vh - 64px);
}
.cs-auth-shell::before, .cs-auth-shell::after {
  content: ""; position: absolute; pointer-events: none;
  width: 640px; height: 640px; border-radius: 50%;
  filter: blur(140px); opacity: .35; z-index: 0;
}
.cs-auth-shell::before { top: -160px; left: -180px; background: radial-gradient(circle, rgba(102,126,234,0.45), transparent 65%); }
.cs-auth-shell::after  { bottom: -200px; right: -160px; background: radial-gradient(circle, rgba(155,89,182,0.40), transparent 65%); }

.cs-auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: var(--sp-7);
}
.cs-auth-card-md   { max-width: 480px; }
.cs-auth-card-wide { max-width: 520px; padding: var(--sp-8) var(--sp-7); }

.cs-auth-title {
  font: var(--weight-bold) 26px/1.1 var(--font-display, var(--font-sans));
  color: var(--fg-1);
  text-align: center;
  margin: 0 0 var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
.cs-auth-sub {
  font-size: var(--text-md);
  line-height: 1.55;
  text-align: center;
  color: var(--fg-3);
  margin: 0 0 var(--sp-6);
}
.cs-auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-auth-foot { text-align: center; font-size: var(--text-sm); color: var(--fg-3); margin-top: var(--sp-5); }

.cs-auth-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
}

/* Themed icon circle (used on pending_confirmation / token_expired) */
.cs-auth-icon-circle {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-4);
  font-size: 28px;
}
.cs-auth-icon-circle.warn  { background: color-mix(in srgb, var(--risk-moderate) 14%, transparent); color: var(--risk-moderate-deep, var(--risk-moderate)); }
.cs-auth-icon-circle.timer { background: color-mix(in srgb, var(--risk-severe) 12%, transparent);   color: var(--risk-severe); }
.cs-auth-icon-circle.lock  { background: var(--action-soft);                                         color: var(--action); }
.cs-auth-icon-circle.check { background: color-mix(in srgb, var(--risk-low) 14%, transparent);      color: var(--risk-low); }

/* ============================================================================
   CHECKBOX — single-element pattern (Phase 2)
   Replaces legacy 3-element nest (.checkbox-container + input + .custom-checkbox).
   ============================================================================ */
.cs-checkbox {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--fg-2);
  cursor: pointer; user-select: none;
}
.cs-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid var(--action);
  background: transparent;
  margin: 0;
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cs-checkbox input[type="checkbox"]:checked { background: var(--action); }
.cs-checkbox input[type="checkbox"]:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.cs-checkbox input[type="checkbox"]:focus-visible { box-shadow: var(--action-ring); outline: none; }
.cs-checkbox--start { align-items: flex-start; }
.cs-checkbox--start input[type="checkbox"] { margin-top: 2px; }

/* ============================================================================
   LINKS — themed inline anchors (Phase 2)
   ============================================================================ */
.cs-link {
  color: var(--action);
  font-weight: var(--weight-semi);
  text-decoration: none;
}
.cs-link:hover { color: var(--action-hover); text-decoration: underline; }
.cs-link-subtle {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.cs-link-subtle:hover { color: var(--action); text-decoration: underline; }

/* Auth divider (used on signup_gate "or" rule) */
.cs-auth-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--fg-3); font-size: var(--text-xs);
  margin: var(--sp-5) 0;
  text-transform: uppercase; letter-spacing: .14em;
}
.cs-auth-divider::before, .cs-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-1);
}

/* Status pill / badge used by signup_gate (verifying, success, error). The
   id="status" / id="status-msg" hooks are preserved by templates; this rule
   styles the visual without legacy classes. */
.cs-status-msg {
  font-size: var(--text-sm);
  min-height: 22px;
  margin: var(--sp-2) 0 var(--sp-3);
  text-align: center;
}
.cs-status-msg.error    { color: var(--risk-severe, #ef4444); }
.cs-status-msg.success  { color: var(--risk-low, #10b981); }
.cs-status-msg.info     { color: var(--action); }

/* Org-code badge (signup.html) */
.cs-org-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--action-soft);
  border: 1px solid color-mix(in srgb, var(--action) 25%, transparent);
  border-radius: 100px;
  font-size: var(--text-xs);
  color: var(--action);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-6);
}

/* ============================================================================
   PROSE — long-form readable copy (privacy_policy, terms_of_service)
   Per migration-guide §5: legal/policy pages wrap their long-form content in
   .cs-prose inside .cs-container.cs-container-narrow.  Restores comfortable
   reading typography on top of the cs-base reset (which deliberately
   normalizes margins/lists for component layouts).
   ============================================================================ */
/* Long-form prose container — Phase 3 marketing.  cs-container-narrow
   already defined in cs-base.css (480px) for auth cards; this slightly
   wider variant fits readable legal text without colliding with auth. */
.cs-container-prose { max-width: 760px; margin: 0 auto; }

.cs-prose {
  color: var(--fg-2);
  font-size: var(--text-md, 1rem);
  line-height: 1.7;
}
.cs-prose .cs-prose-date {
  color: var(--fg-3);
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-7);
}
.cs-prose h1 {
  font-size: var(--text-2xl, 1.875rem);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
  font-weight: var(--weight-semi);
}
.cs-prose h2 {
  font-size: var(--text-lg, 1.25rem);
  color: var(--fg-1);
  margin: var(--sp-8) 0 var(--sp-3);
  font-weight: var(--weight-semi);
}
.cs-prose h3 {
  font-size: 1.05rem;
  color: var(--fg-1);
  margin: var(--sp-6) 0 var(--sp-2);
  font-weight: var(--weight-semi);
}
.cs-prose p { margin: 0 0 var(--sp-4); }
.cs-prose ul, .cs-prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.cs-prose li { margin-bottom: var(--sp-2); }
.cs-prose a { color: var(--action); text-decoration: underline; }
.cs-prose a:hover { color: var(--action-hover); }

/* ============================================================================
   ACCORDION — used by FAQ (<details>/<summary>)
   ============================================================================ */
.cs-accordion { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-accordion details {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.cs-accordion details[open] { border-color: var(--border-2); }
.cs-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--weight-semi);
  color: var(--fg-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.cs-accordion summary::-webkit-details-marker { display: none; }
.cs-accordion summary::after {
  content: "+";
  color: var(--action);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.cs-accordion details[open] summary::after { content: "−"; }
.cs-accordion .cs-accordion-body {
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* ============================================================================
   FEATURE ROW — about_us "How it works" 4-up grid
   ============================================================================ */
.cs-feature-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cs-feature-grid { grid-template-columns: repeat(4, 1fr); }
}
.cs-feature-row {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cs-feature-row:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
}
.cs-feature-row .cs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  color: var(--capo-cyan);
  background: color-mix(in srgb, var(--capo-cyan) 10%, transparent);
  margin-bottom: var(--sp-3);
}
.cs-feature-row .cs-feature-icon svg {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.cs-feature-row h3, .cs-feature-row h4 {
  margin: 0 0 var(--sp-2);
  color: var(--fg-1);
  font-size: var(--text-md, 1rem);
  font-weight: var(--weight-semi);
}
.cs-feature-row p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* ============================================================================
   MARKETING HERO — index.html / about_us.html / marketing.html
   Large gradient title + tagline + CTA pattern
   ============================================================================ */
.cs-hero {
  text-align: center;
  padding: var(--sp-11) 0;
}
.cs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 18px;
  background: color-mix(in srgb, var(--capo-cyan) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--capo-cyan) 25%, transparent);
  border-radius: 100px;
  color: var(--capo-cyan);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.cs-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 var(--sp-4);
  color: var(--fg-1);
}
.cs-hero-title em,
.cs-hero-title .cs-em {
  font-style: italic;
  background: var(--capo-grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cs-hero-tagline {
  color: var(--fg-2);
  font-size: var(--text-md, 1.05rem);
  max-width: 680px;
  margin: 0 auto var(--sp-7);
  line-height: 1.55;
}

/* ============================================================================
   INFO CARD — contact.html "Email Us / Demo / Enterprise" panels
   Lightweight variant of cs-card with optional gradient icon swatch.
   ============================================================================ */
.cs-info-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.cs-info-card:hover { border-color: color-mix(in srgb, var(--capo-cyan) 25%, var(--border-1)); }
.cs-info-card h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--text-md, 1rem);
  font-weight: var(--weight-semi);
  color: var(--fg-1);
}
.cs-info-card .cs-info-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--r-lg);
  background: var(--capo-grad-brand);
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.cs-info-card p {
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 var(--sp-2);
}
.cs-info-card a { color: var(--action); text-decoration: none; font-weight: var(--weight-medium); }
.cs-info-card a:hover { color: var(--action-hover); text-decoration: underline; }
.cs-info-card .cs-info-note {
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: var(--sp-3);
}

/* ============================================================================
   CASE STUDY CARD — marketing.html
   Image preview on top, body below, badge in corner.
   ============================================================================ */
.cs-case-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-8);
}
@media (min-width: 720px) {
  .cs-case-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
.cs-case-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2xl);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cs-case-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--capo-cyan) 25%, var(--border-1));
}
.cs-case-preview {
  position: relative;
  height: 230px;
  overflow: hidden;
  cursor: pointer;
}
.cs-case-preview img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.cs-case-card:hover .cs-case-preview img { transform: scale(1.04); }
.cs-case-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}
.cs-case-badge-high     { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.cs-case-badge-low      { background: linear-gradient(90deg, #27ae60, #1e8449); }
.cs-case-badge-elevated { background: linear-gradient(90deg, #e67e22, #d35400); }
.cs-case-body { padding: var(--sp-6); }
.cs-case-name {
  margin: 0 0 var(--sp-1);
  color: var(--fg-1);
  font-size: 1.2rem;
  font-weight: var(--weight-bold);
}
.cs-case-role {
  color: var(--capo-cyan);
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-3);
}
.cs-case-score { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cs-case-score-label { color: var(--fg-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.cs-case-score-value { font-size: 1.15rem; font-weight: var(--weight-bold); }
.cs-case-score-value.high     { color: #e74c3c; }
.cs-case-score-value.low      { color: #27ae60; }
.cs-case-score-value.elevated { color: #e67e22; }
.cs-case-summary {
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 var(--sp-4);
}

/* ============================================================================
   Phase 4 grids — videos, faces, face_videos
   Added 2026-04-26 by phase4-grids agent.  Per migration-guide.html §4-§5.
   ============================================================================ */

/* Toolbar (search + sort + count row above lists)
   Mockup ref: app-pages.html#screen-videos `.videos-toolbar` (L1413) — search
   input + 1px divider + sort `<select>` + 1px divider + count, all on a
   single row at desktop. We keep `flex-wrap: wrap` but use a high min-width
   on the search so it stays alongside the sort up to 600px. Below 600px
   everything stacks (search full-width, divider hidden, count below). */
.cs-toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  flex-wrap: nowrap;  /* desktop: search + sort + count stay on one row */
}
.cs-toolbar-meta { color: var(--fg-3); font-size: var(--text-sm); margin-left: auto; font-variant-numeric: tabular-nums; }
/* 1px vertical divider between toolbar groups (mockup `.v-tool-divider`). */
.cs-tool-divider { width: 1px; height: 24px; background: var(--border-1); flex: none; }
@media (max-width: 600px) {
  .cs-toolbar { padding: var(--sp-3); gap: var(--sp-2); }
  .cs-toolbar .cs-search { flex-basis: 100%; }
  .cs-toolbar .cs-select { flex: 1 1 140px; min-width: 0; }
  .cs-toolbar-meta { margin-left: 0; flex-basis: 100%; }
  .cs-tool-divider { display: none; }
}

/* Search input with leading icon */
.cs-search { position: relative; flex: 1 1 auto; min-width: 240px; }
.cs-search input {
  width: 100%; height: 40px;
  padding: 0 var(--sp-3) 0 36px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  color: var(--fg-1); font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.cs-search input::placeholder { color: var(--fg-4); }
.cs-search input:hover { border-color: var(--border-3); }
.cs-search input:focus { outline: none; border-color: var(--action); box-shadow: var(--action-ring); }
.cs-search::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat center / contain;
  color: var(--fg-4); pointer-events: none;
}

/* Generic select inside toolbar — fixed-width per mockup so search eats
   the remaining space. */
.cs-toolbar .cs-select { height: 40px; flex: 0 0 180px; max-width: 180px; }

/* Video / face grid wrapper.  auto-fill (not auto-fit) so a single card on
   a wide screen does not stretch full-width — it stays card-sized.  260px
   minmax matches mockup `app-pages.html#screen-videos` exactly. */
.cs-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 480px) {
  .cs-video-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* Video / face card.
   `overflow: visible` so the kebab popover (.cs-menu) can paint OUTSIDE the
   card body without being clipped — the thumbnail clipping is moved onto
   `.cs-card-image-wrap` instead. Mockup ref: `.video-card` (L54) keeps
   `overflow: hidden`, but its menu opens UPWARD (`bottom: calc(100% + 6px)`).
   Our menu opens downward (`top: calc(100% + 4px)`) which conflicts with
   `overflow: hidden`, so we override here. */
.cs-video-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  overflow: visible;
  display: flex; flex-direction: column;
  position: relative;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease-emphasized),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cs-video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-2);
}
/* Wrapper that clips the rounded thumbnail corners now that the card itself
   no longer clips. Used for both the <img> and the duration overlay. */
.cs-card-image-wrap {
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  background: var(--bg-surface-2);
}
.cs-card-duration {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: 2px 8px;
  background: rgba(0,0,0,0.7); color: #fff;
  border-radius: 4px;
  font: var(--weight-medium) 11px/1 var(--font-mono);
  pointer-events: none;
}
.cs-card-image {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-surface-2);
}
.cs-card-image-round {
  width: 120px; height: 120px;
  min-width: 120px; min-height: 120px;
  margin: var(--sp-5) auto var(--sp-3);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-surface-2);
  display: block;
  flex: 0 0 auto;
}
/* Faces page: wrap the <img> in a fixed-size round FRAME and let the image
   fill it with cover. This is the guaranteed-no-stretch pattern — the img's
   width/height are 100% of the frame so the browser cannot resize it to the
   source's intrinsic aspect ratio. */
.cs-face-thumb-frame {
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  margin: var(--sp-5) auto var(--sp-3);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-surface-2);
  flex: 0 0 auto;
  position: relative;
}
.cs-face-thumb-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}
/* Defensive blanket — any face/avatar/thumb image inside a round container
   must crop, not stretch. Targets every name pattern in use across templates
   (acct-avatar, fp-avatar, fv-id-thumb, profile-thumbnail, chat-compare-option,
   face-thumbnail, hidden-face-thumb, subject-thumb, person-avatar, hero-photo,
   subject-photo, cs-card-image-round). Safe even if the parent already has
   the right object-fit; this is purely additive. */
.acct-avatar img,
.fp-avatar img,
.fv-id-thumb img,
.profile-thumbnail img,
.chat-compare-option img,
.face-thumbnail,
img.face-thumbnail,
img.hidden-face-thumb,
img.subject-thumb,
img.person-avatar,
.hero-photo img,
.subject-photo img,
img.cs-card-image-round,
img[class*="-avatar"],
img[class*="-thumb"],
img[class*="-portrait"],
img[class*="-photo"] {
  object-fit: cover !important;
  object-position: center !important;
}
.cs-card-image-placeholder {
  width: 120px; height: 120px;
  margin: var(--sp-5) auto var(--sp-3);
  border-radius: 50%;
  background: var(--capo-grad-neural);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--weight-bold); font-size: 32px;
}
.cs-card-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  margin-top: auto;
}
/* The first button-shaped element fills remaining width.  Scoped by direct
   child + :not(.cs-menu-wrap) so the kebab wrapper never accidentally
   stretches.  Works for `<button class="cs-btn">` AND `<span class="cs-btn">`
   (videos.html renders the primary card action as a span because the whole
   card is an <a>). */
.cs-card-actions > .cs-btn:not(.cs-menu-wrap):first-child { flex: 1; }

/* Kebab menu */
.cs-menu-wrap { position: relative; display: inline-block; }
.cs-menu-trigger {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cs-menu-trigger:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.cs-menu-trigger:focus-visible { outline: none; box-shadow: var(--action-ring); }
.cs-menu {
  /* Mockup pattern (app-pages.html .vc-menu): opens UPWARD anchored to the
     right edge of the kebab trigger.  bottom: calc(100% + 6px) so the menu
     appears ABOVE the trigger without overflowing the card downward into
     the next grid row. */
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 4px;
  z-index: 100;
  display: none;
  flex-direction: column;
}
.cs-menu.is-open { display: flex; }
.cs-menu.is-open { display: block; }
.cs-menu button, .cs-menu a {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 0;
  color: var(--fg-2); font-size: var(--text-sm);
  text-align: left; text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cs-menu button:hover, .cs-menu a:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.cs-menu button i, .cs-menu button svg, .cs-menu button [data-lucide],
.cs-menu a i, .cs-menu a svg, .cs-menu a [data-lucide] { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.85; }
.cs-menu button.danger, .cs-menu a.danger { color: var(--risk-severe); }
.cs-menu button.danger:hover, .cs-menu a.danger:hover { background: var(--status-danger-bg); }
.cs-menu-divider { height: 1px; background: var(--border-1); margin: var(--sp-1) 0; }

/* Empty state (no results / no items yet) */
.cs-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--fg-3);
  grid-column: 1 / -1;
}
.cs-empty-icon {
  font-size: 48px; line-height: 1;
  margin-bottom: var(--sp-3);
  color: var(--fg-4);
}
.cs-empty-title { font-size: var(--text-md); color: var(--fg-2); margin-bottom: var(--sp-2); }
.cs-empty-help  { font-size: var(--text-sm); color: var(--fg-3); margin-bottom: var(--sp-4); }

/* Pagination end (load more) */
.cs-pagination-end {
  text-align: center;
  margin: var(--sp-7) 0;
}
.cs-pagination-end .cs-pagination-message {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--fg-4);
}

/* Skeleton variants for grids */
.cs-skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 50%, var(--bg-surface-2) 100%);
  background-size: 200% 100%;
  animation: cs-skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
  display: block;
}
.cs-skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.cs-skeleton-image  { width: 100%; aspect-ratio: 16 / 10; }
.cs-skeleton-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto; }
.cs-skeleton-title  { height: 16px; width: 70%; }
.cs-skeleton-meta   { height: 12px; width: 40%; }
.cs-skeleton-button { height: 32px; width: 100px; }

/* Deepfake banner inside cards (color-token-aligned with status-danger / status-warn) */
.cs-deepfake-banner {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  margin: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-align: center;
}
.cs-deepfake-banner.possible {
  display: block;
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border: 1px solid var(--status-warn-fg);
}
.cs-deepfake-banner.confirmed {
  display: block;
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border: 1px solid var(--status-danger-fg);
}

/* Tabs / pill row used by Faces / Videos toggle */
.cs-tab-pills {
  display: inline-flex;
  gap: 2px; padding: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.cs-tab-pill {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-2);
  background: transparent; border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cs-tab-pill:hover { color: var(--fg-1); }
.cs-tab-pill.is-active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}

/* Card title / meta (used inside .cs-video-card .cs-card-body) */
.cs-card-title-row { padding: var(--sp-4) var(--sp-4) 0; }
.cs-card-title-row .cs-card-title-link {
  color: var(--fg-1); font-size: var(--text-md);
  font-weight: var(--weight-semi);
  text-decoration: none;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-card-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--text-xs); color: var(--fg-3);
  flex-wrap: wrap;
}
.cs-card-meta > span {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.cs-card-meta i, .cs-card-meta svg {
  width: 12px; height: 12px; flex: none;
  stroke: currentColor;
}
/* Mockup `.video-sub-dot` — small bullet between meta items. Used as a sibling
   between two `<span>`s where we want a separator without an icon. */
.cs-card-meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border-3);
  flex: none;
}

/* Toast — used by videos.html */
.cs-toast-fixed {
  position: fixed; bottom: var(--sp-5); left: 50%;
  transform: translate(-50%, 100px);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  color: var(--fg-1); font-weight: var(--weight-medium);
  box-shadow: var(--shadow-3);
  z-index: var(--z-toast, 9000);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-emphasized),
              opacity var(--dur-base) var(--ease-standard);
}
.cs-toast-fixed.is-show {
  transform: translate(-50%, 0); opacity: 1;
}
.cs-toast-fixed.is-success { border-color: var(--status-success-fg); color: var(--status-success-fg); }
.cs-toast-fixed.is-error   { border-color: var(--status-danger-fg);  color: var(--status-danger-fg); }

/* Page header for grid pages — title + primary CTA on the right */
.cs-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.cs-page-header .cs-page-title  { font: var(--weight-bold) var(--text-2xl)/1.1 var(--font-display); color: var(--fg-1); margin: 0; }
.cs-page-header .cs-page-sub    { color: var(--fg-3); font-size: var(--text-sm); margin-top: var(--sp-1); }

/* =====================================================================
   Phase 4 account — profile.html, payment.html
   ---------------------------------------------------------------------
   Stripe payment-element div is styled via cs-stripe-mount (no inputs of
   our own — Stripe injects an iframe).
   ===================================================================== */

/* Page wrapper — wider-than-narrow column for the profile mockup.
   The mockup `app-pages.html#tpl-profile` uses `.page-narrow` = 720px
   (NOT 480px), because the acct-card has a 4-col stats grid, side-by-side
   acct-rows with toggles, and the appearance-segmented control. At 480px
   those wrap and look broken.

   Strategy: when applied alongside `cs-container-narrow`, this rule wins
   because it appears later in the cascade with the same specificity, AND
   we use !important to defend against the future ordering of cs-base.css
   vs cs-components.css (cs-base is loaded first, so cs-components overrides
   it naturally — but !important keeps that guarantee even if a later
   refactor moves the rule). */
.cs-account-shell {
  max-width: 720px !important;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
}

/* Card variant for account-style content blocks.  `cs-card-section` is the
   semantic name; existing `.cs-card` provides the surface + radius + border.
   This rule adds the section-card padding scale so we don't have to compose
   `cs-card cs-card-pad-lg` everywhere. */
.cs-card-section {
  padding: var(--sp-6);
}
@media (max-width: 480px) {
  .cs-card-section { padding: var(--sp-5); }
}

/* Account card — centered title; tighter spacing than face-profile cards. */
.cs-account-card { text-align: center; }
.cs-account-title {
  margin: 0 0 var(--sp-5);
  color: var(--fg-1);
  font: var(--weight-semi) var(--text-xl)/var(--leading-snug) var(--font-sans);
  letter-spacing: var(--tracking-tight);
}

/* Back-link — used at top of sub-pages (payment.html "Back to account"). */
.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--fg-3);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.cs-back-link:hover { color: var(--fg-1); }
.cs-back-link-arrow { font-size: 1rem; line-height: 1; }

/* Payment card-specific tweaks.  The Stripe Elements mount div is presented
   like a `cs-input` (border + radius), but content is an iframe so we drop
   the typing affordances (caret, padding-left). */
.cs-payment-card .cs-payment-form { display: block; }
.cs-payment-form .cs-field { margin-bottom: var(--sp-4); }
.cs-stripe-mount {
  /* Stripe injects an iframe whose height grows with content (card +
     exp + CVC ~250px when fully expanded).  We look like an input
     (border + bg + radius + padding) but explicitly avoid `height` —
     using `min-height` so the wrapper grows with the iframe instead
     of clipping it (which makes the iframe overflow + "overlay
     everything"). */
  display: block;
  width: 100%;
  min-width: 0;            /* allow shrinking inside flex / grid parents */
  min-height: 44px;        /* Stripe's collapsed pre-mount height */
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-sizing: border-box;
  overflow: visible;       /* let Stripe iframe size itself; never clip */
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.cs-stripe-mount:hover { border-color: var(--border-3); }
.cs-stripe-mount.StripeElement--focus,
.cs-stripe-mount:focus-within {
  border-color: var(--action);
  box-shadow: var(--action-ring);
}
.cs-payment-message {
  /* The status banner has the cs-alert base styles; default it to hidden
     until JS sets text. */
  margin: 0 0 var(--sp-4);
}
.cs-payment-message:empty { display: none; }

/* Eyebrow + page sub headings used on the pricing page. */
.cs-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  font-weight: var(--weight-semi);
  margin-bottom: var(--sp-2);
}
.cs-page-sub {
  color: var(--fg-2);
  font-size: var(--text-md);
  line-height: 1.55;
  margin: var(--sp-3) auto 0;
}

/* ----- error.html (cs-error-state) ----- */
.cs-error-state {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow-2);
}
.cs-error-state-404 {
  border-color: var(--risk-low, #27ae60);
}
.cs-error-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-5);
  font-size: 40px;
}
.cs-error-state-404 .cs-error-icon {
  font-size: 48px;
  background: color-mix(in srgb, var(--risk-low, #27ae60) 18%, transparent);
}
.cs-error-truth-box {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--risk-low, #27ae60);
  color: #fff;
  font-weight: var(--weight-semi);
  margin: 0 0 var(--sp-5);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.cs-error-title {
  color: var(--fg-1);
  font-size: 1.5rem;
  font-weight: var(--weight-semi);
  margin: 0 0 var(--sp-3);
  line-height: 1.25;
}
.cs-error-details {
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
  font-size: var(--text-md);
}
.cs-error-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.cs-error-status {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.cs-error-status-success { color: var(--risk-low, #27ae60); }
.cs-error-status-error   { color: var(--status-danger-fg, #e74c3c); }

/* ============================================================ */
/* ACCOUNT (profile)                                             */
/* ============================================================ */
/* Page header — used by profile.html (and pricing.html when it lands).
   Sourced from mockup app-pages.html:22-25. Keep this here so account
   pages render correctly even before pricing.html arrives. */
.page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-title {
  font: var(--weight-bold) 32px/1.1 var(--font-display);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.page-sub {
  color: var(--fg-3);
  font-size: var(--text-md);
  margin: 4px 0 0;
}
.page-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--sp-2);
}

/* Account card — sourced verbatim from mockup app-pages.html:205-228.
   Token swaps applied: var(--ease) -> var(--ease-standard) (none in this
   block, but noted for future). */
.acct-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
}
.acct-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-1);
}
.acct-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--capo-cyan) 0%, var(--capo-violet) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font: var(--weight-bold) 26px/1 var(--font-display);
  flex: none;
  overflow: hidden;
}
.acct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.acct-name {
  font: var(--weight-bold) 22px/1.1 var(--font-display);
  color: var(--fg-1);
  margin: 0;
}
.acct-email {
  font-size: var(--text-sm);
  color: var(--fg-3);
  margin-top: 4px;
}

.acct-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.acct-stat {
  padding: var(--sp-4);
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
}
.acct-stat-num {
  font: var(--weight-bold) 24px/1 var(--font-display);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.acct-stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
  font-weight: var(--weight-semi);
  margin-top: 6px;
}

.acct-section {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-1);
  margin-top: var(--sp-5);
}
.acct-section h3 {
  font: var(--weight-semi) 14px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
  margin: 0 0 var(--sp-3);
}
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-1);
  gap: var(--sp-3);
}
.acct-row:last-child { border-bottom: 0; }
.acct-row-l {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.acct-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--action-soft);
  color: var(--action);
  display: grid;
  place-items: center;
  flex: none;
}
/* lucide replaces <i data-lucide="..."> with <svg data-lucide="..."> at runtime;
   target both so sizing applies before AND after icon render. Same pattern is
   applied site-wide via the [data-lucide] attribute selector below. */
.acct-row-icon i,
.acct-row-icon svg,
.acct-row-icon [data-lucide] { width: 18px; height: 18px; }
/* Catch-all for stray lucide icons missing a parent-scoped sizing rule.
   Note: lucide.createIcons() replaces <i data-lucide="..."> with <svg
   data-lucide="...">, often dropping the original inline style attribute.
   Applying a default size site-wide ensures icons always render. Per-context
   rules below (.seg-opt svg, .badge-plan svg, .cs-btn [data-lucide], etc.)
   override the default. */
[data-lucide] { display: inline-block; vertical-align: middle; width: 18px; height: 18px; }

/* Segmented appearance picker — small icons match mockup (13px) */
.appearance-segmented .seg-opt i,
.appearance-segmented .seg-opt svg,
.appearance-segmented .seg-opt [data-lucide] { width: 13px; height: 13px; flex: 0 0 auto; }

/* Plan badge inside acct-head — tiny lightning bolt (11px) */
.badge-plan i,
.badge-plan svg,
.badge-plan [data-lucide] { width: 11px; height: 11px; flex: 0 0 auto; }
.acct-row-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--fg-1);
}
.acct-row-sub {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: 2px;
}

.badge-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,212,255,0.16), rgba(155,89,182,0.16));
  color: var(--fg-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  border: 1px solid color-mix(in srgb, var(--capo-cyan) 30%, transparent);
}
.badge-status-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--risk-low) 14%, transparent);
  color: var(--risk-low);
  font-size: 11px;
  font-weight: var(--weight-semi);
}
.badge-status-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* New: canceled status pill — same shape, neutral palette so canceled subs
   render distinctly from active ones. */
.badge-status-canceled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: var(--weight-semi);
}
.badge-status-canceled::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Appearance segmented control — sourced from mockup app-pages.html:230-256. */
.appearance-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  gap: 2px;
}
.appearance-segmented .seg-opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font: var(--weight-semi) var(--text-xs)/1 var(--font-sans);
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.appearance-segmented .seg-opt:hover { color: var(--fg-2); }
.appearance-segmented .seg-opt.is-active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px var(--border-2);
}
@media (max-width: 640px) {
  .appearance-segmented { width: 100%; justify-content: space-between; }
  .appearance-segmented .seg-opt { flex: 1; justify-content: center; padding: 6px 8px; }
}

/* Toggle switch — sourced from mockup app-pages.html:258-284. */
.cs-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex: none;
}
.cs-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cs-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-surface-3, color-mix(in srgb, var(--fg-3) 25%, transparent));
  border-radius: 999px;
  transition: background .2s ease;
}
.cs-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease, background .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cs-toggle input:checked + .cs-toggle-track {
  background: var(--action);
}
.cs-toggle input:checked + .cs-toggle-track::after {
  transform: translateX(18px);
}
.cs-toggle input:focus-visible + .cs-toggle-track {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* =============================================================
   PRICING / PLAN GRID
   Sourced verbatim from mockup app-pages.html:19-25, 312-345, 349-357.
   Used by templates/pricing.html. Token mappings:
     var(--ease) -> var(--ease-standard)
     var(--risk-elevated) -> var(--risk-high)
   .page-header / .page-title / .page-sub / .page-eyebrow already
   exist above (added by profile.html agent) — not duplicated here.
   ============================================================= */
.page-narrow { max-width: 720px; }

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 999px;
}
.billing-toggle button {
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--dur-fast);
}
.billing-toggle button.is-active {
  background: var(--action);
  color: #fff;
}
.save-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: oklch(38% 0.12 150);
  color: #fff;
  font-weight: var(--weight-semi);
  margin-left: 6px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

.plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.plan-card.featured {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action), var(--shadow-3);
  transform: translateY(-3px);
}
/* subscribe.html — wired-tile selection state + unavailable (Talk-to-sales) state */
.plan-card.is-selected {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action);
}
.plan-card.is-unavailable {
  opacity: 0.7;
}
.plan-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--capo-cyan) 0%, var(--capo-violet) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan-name {
  font: var(--weight-semi) 18px/1 var(--font-display);
  color: var(--fg-1);
  margin: 0;
}
.plan-tag-l {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: 6px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--sp-5) 0 var(--sp-2);
}
.plan-price-num {
  font: var(--weight-bold) 44px/1 var(--font-display);
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.plan-price-cur {
  font-size: 22px;
  color: var(--fg-2);
}
.plan-price-int {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  flex: 1;
}
.plan-features li {
  display: flex;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: 1.45;
}
.plan-features li i {
  width: 18px;
  height: 18px;
  color: var(--risk-low);
  flex: none;
  margin-top: 2px;
}
.plan-features li.dim i {
  color: var(--fg-3);
  opacity: .5;
}
.plan-features li.dim {
  color: var(--fg-3);
}

/* Compare table */
/* Scrollable wrapper so comparison tables don't overflow on narrow screens. */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--sp-9);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-1);
}
.compare-wrap .compare { margin-top: 0; border: 0; border-radius: 0; }

.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-9);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.compare th, .compare td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border-1);
  font-size: var(--text-sm);
}
.compare th {
  background: var(--bg-app);
  font-weight: var(--weight-semi);
  color: var(--fg-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.compare th:not(:first-child),
.compare td:not(:first-child) { text-align: center; }
.compare td:first-child {
  color: var(--fg-1);
  font-weight: var(--weight-medium);
}
.compare tr:last-child td { border-bottom: 0; }
.compare i { width: 18px; height: 18px; }
.check-yes { color: var(--risk-low); }
.check-no  { color: var(--fg-3); opacity: .4; }

/* CTA gradient button (wide) */
.btn-grad-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #00d4ff 0%, #9b59b6 100%);
  color: #fff;
  border: 0;
  font: var(--weight-semi) var(--text-md)/1 var(--font-sans);
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 8px 24px rgba(0,212,255,0.25);
}
.btn-grad-wide:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(155,89,182,0.35);
}


/* ============================================================================
   PAYMENT
   Lifted verbatim from /tmp/caposcore_design_review/design/app-pages.html
   lines 287-309 (`tpl-payment` mockup).  All `var(--…)` references resolve
   in cs-tokens.css; `--site-nav-height` was added there alongside
   `--nav-height` for the sticky right-rail offset on this page.
   ============================================================================ */
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--sp-6); align-items: start; width: 100%; }
@media (max-width: 920px) { .pay-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .pay-grid { grid-template-columns: 1fr; } }

.pay-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: var(--sp-6); }
.pay-stripe { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--action-soft); border: 1px solid color-mix(in srgb, var(--action) 30%, transparent); border-radius: var(--r-md); margin-bottom: var(--sp-5); font-size: var(--text-sm); color: var(--fg-1); }
.pay-stripe i { color: var(--action); }

.cc-preview { aspect-ratio: 1.586; max-width: 360px; margin: 0 auto var(--sp-5); padding: 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #312e81 100%); position: relative; overflow: hidden; color: #fff; box-shadow: var(--shadow-3); }
.cc-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(0,212,255,0.4), transparent 60%), radial-gradient(circle at 0% 100%, rgba(155,89,182,0.35), transparent 60%); pointer-events: none; }
.cc-brand { position: relative; display: flex; justify-content: space-between; align-items: start; }
.cc-brand-mark { font: 700 14px/1 var(--font-display); letter-spacing: .14em; opacity: .9; }
.cc-brand-net { font: 700 18px/1 var(--font-display); letter-spacing: .04em; opacity: .9; }
.cc-num { position: relative; margin-top: 28px; font: 500 20px/1 var(--font-mono); letter-spacing: .14em; }
.cc-foot { position: relative; margin-top: 20px; display: flex; justify-content: space-between; font: 500 11px/1.4 var(--font-mono); opacity: .85; text-transform: uppercase; }
.cc-chip { width: 30px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #fbbf24, #d97706); margin-top: 18px; position: relative; }

.cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* Order summary */
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: var(--text-sm); }
.summary-row.muted { color: var(--fg-3); }
.summary-row.total { padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--border-1); font-weight: var(--weight-semi); font-size: var(--text-md); color: var(--fg-1); }
.summary-row .num { font-variant-numeric: tabular-nums; }


/* ============================================================================
   UPLOAD FLOW (Phase 1 of docs/upload_flow_scoping.md §6)
   Promoted verbatim from /tmp/caposcore_design_review/design/upload-flow.html.
   Token swaps applied (mockup -> repo): var(--ease) -> var(--ease-standard).
   .page / .page-inner / .page-eyebrow / .page-title / .page-sub already exist
   above (lines 1803-1829), so we don't redefine them here. The mockup uses a
   slightly different centered layout for the upload page; we expose that as
   .up-page / .up-page-inner / .up-page-head / .up-page-title / .up-page-sub
   to avoid colliding with the left-aligned account .page-header.
   ============================================================================ */

/* Centered page shell (upload-only). */
.up-page {
  min-height: calc(100vh - var(--nav-height, 64px));
  display: grid;
  place-items: center;
  padding: var(--sp-7) var(--sp-5);
}
.up-page-inner { width: 100%; max-width: 600px; }
.up-page-head { text-align: center; margin-bottom: var(--sp-7); }
.up-page-title {
  font: var(--weight-bold) 36px/1.05 var(--font-display);
  text-align: center;
  margin: var(--sp-4) 0 var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
.up-page-sub {
  text-align: center;
  margin: 0 auto var(--sp-7);
  max-width: 440px;
  line-height: 1.5;
}
@media (max-width: 600px) { .up-page-title { font-size: 28px; } }

/* Upload card surface. */
.up-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2);
}

/* Drop zone. .is-active is added on dragenter/dragover (per task spec);
   .is-hover is the mockup's original name and is also kept for backward
   compatibility with any prototype JS that lands here later. */
.drop {
  display: block;
  border: 2px dashed color-mix(in srgb, var(--action) 60%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-5);
  background: color-mix(in srgb, var(--action) 4%, var(--bg-surface));
  text-align: center;
  transition: all var(--dur-base) var(--ease-standard);
  position: relative;
  cursor: pointer;
}
.drop:hover,
.drop.is-hover,
.drop.is-active {
  background: color-mix(in srgb, var(--action) 10%, var(--bg-surface));
  border-color: var(--action);
}
.drop.is-active,
.drop.is-hover {
  box-shadow: var(--shadow-glow-action);
  transform: translateY(-1px);
}
.drop input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.drop-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--capo-grad-signal);
  color: #fff;
  box-shadow: var(--shadow-glow-action);
}
.drop-icon svg { width: 26px; height: 26px; }
.drop-text {
  font-size: var(--text-md);
  color: var(--fg-1);
  line-height: 1.45;
  max-width: 480px;
  margin: 0 auto;
  font-weight: var(--weight-medium);
}
.drop-text b { color: var(--action); font-weight: var(--weight-semi); }
.drop-formats {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.drop-formats span {
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
}
/* "Max 2 GB" chip is rendered with no chip styling in the mockup. */
.drop-formats .drop-formats-cap {
  background: transparent;
  border: none;
  color: var(--fg-3);
}

/* File pill (post-selection). .filepill-icon replaces the mockup's
   .filepill-thumb (per task spec). The new .filepill-progress slot
   carries multipart-PUT progress when Phase 3 wires it. */
.filepill[hidden] { display: none; }
.filepill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  margin-top: var(--sp-4);
  animation: cs-fade .35s var(--ease-standard);
}
.filepill-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--action-soft);
  display: grid;
  place-items: center;
  color: var(--action);
  flex: none;
}
.filepill-meta { flex: 1; min-width: 0; }
.filepill-name {
  font-weight: var(--weight-semi);
  color: var(--fg-1);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filepill-stats {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.filepill-progress {
  margin-top: 6px;
  height: 6px;
  background: var(--bg-surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-1);
}
.filepill-progress[hidden] { display: none; }
.filepill-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--action) 0%, var(--capo-cyan) 100%);
  border-radius: 999px;
  transition: width 0.3s var(--ease-standard);
}

/* Submit row + empty state. */
.up-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}
.up-actions .cs-btn { min-width: 180px; }
.up-empty {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.up-empty[hidden] { display: none; }

/* Form-level alert (size-cap reject, missing consent, etc.). */
.up-alert {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--risk-severe, #dc2626) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--risk-severe, #dc2626) 35%, transparent);
  color: var(--risk-severe, #dc2626);
  font-size: var(--text-sm);
  line-height: 1.5;
  align-items: flex-start;
  gap: var(--sp-2);
}
.up-alert[hidden] { display: none; }
.up-alert:not([hidden]) {
  display: flex;
  animation: cs-fade .35s var(--ease-standard);
}
.up-alert svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Consent rows (legal). */
.consent-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast);
  margin-top: var(--sp-3);
}
.consent-row:hover {
  border-color: color-mix(in srgb, var(--action) 35%, var(--border-1));
}
.consent-row.is-required-error {
  border-color: var(--risk-severe, #dc2626);
  background: color-mix(in srgb, var(--risk-severe, #dc2626) 6%, var(--bg-surface));
}
.consent-row input[type="checkbox"] {
  margin-top: 2px;
  flex: none;
  accent-color: var(--action);
  width: 16px;
  height: 16px;
}
.consent-text {
  font-size: var(--text-sm);
  color: var(--fg-1);
  line-height: 1.5;
  flex: 1;
}
.consent-text small {
  display: block;
  color: var(--fg-3);
  font-size: var(--text-xs);
  margin-top: 2px;
  font-weight: 400;
}
.consent-row.is-required-error .consent-text { color: var(--risk-severe, #dc2626); }
.consent-row.is-required-error .consent-text small {
  color: color-mix(in srgb, var(--risk-severe, #dc2626) 70%, var(--fg-3));
}

/* Trust strip — three reassurance bullets below the upload card. */
.trust-strip {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-5);
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-strip svg {
  width: 14px;
  height: 14px;
  color: var(--risk-low);
}

/* Shared keyframe used by .filepill / .up-alert above. Defined here once
   instead of duplicating across pages. cs-fade name matches the mockup. */
@keyframes cs-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}