/* ============================================
   WispherFlow — Component Library
   Smooth, shadow-driven, borderless enterprise
   ============================================ */

/* ─── Brand wordmark entrance animation ──────────────────────────────────
   Voice-equalizer dance → settle into static W shape. Fires once per
   browser session via body.brand-entrance-active class (set by inline JS
   bootstrap in each HTML entry point; flag persisted in sessionStorage).
   Targets every W candlestick SVG by viewBox attribute so we don't have
   to label each wordmark individually. */
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect,
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect:nth-child(1),
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect:nth-child(1) {
  animation-name: wfBrandEntranceOuter;
  animation-delay: 0ms;
}
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect:nth-child(5),
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect:nth-child(5) {
  animation-name: wfBrandEntranceOuter;
  animation-delay: 60ms;
}
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect:nth-child(2),
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect:nth-child(2) {
  animation-name: wfBrandEntranceInner;
  animation-delay: 90ms;
}
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect:nth-child(4),
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect:nth-child(4) {
  animation-name: wfBrandEntranceInner;
  animation-delay: 150ms;
}
body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect:nth-child(3),
body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect:nth-child(3) {
  animation-name: wfBrandEntranceCenter;
  animation-delay: 180ms;
}
@keyframes wfBrandEntranceOuter {
  0%   { transform: scaleY(0.35); }
  10%  { transform: scaleY(1.2);  }
  22%  { transform: scaleY(0.55); }
  34%  { transform: scaleY(1.1);  }
  46%  { transform: scaleY(0.7);  }
  58%  { transform: scaleY(1.05); }
  72%  { transform: scaleY(0.92); }
  85%  { transform: scaleY(1.03); }
  100% { transform: scaleY(1);    }
}
@keyframes wfBrandEntranceInner {
  0%   { transform: scaleY(0.3);  }
  10%  { transform: scaleY(1.4);  }
  22%  { transform: scaleY(0.4);  }
  34%  { transform: scaleY(1.3);  }
  46%  { transform: scaleY(0.55); }
  58%  { transform: scaleY(1.15); }
  72%  { transform: scaleY(0.88); }
  85%  { transform: scaleY(1.05); }
  100% { transform: scaleY(1);    }
}
@keyframes wfBrandEntranceCenter {
  0%   { transform: scaleY(0.25); }
  10%  { transform: scaleY(1.5);  }
  22%  { transform: scaleY(0.4);  }
  34%  { transform: scaleY(1.4);  }
  46%  { transform: scaleY(0.5);  }
  58%  { transform: scaleY(1.2);  }
  72%  { transform: scaleY(0.85); }
  85%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1);    }
}
@media (prefers-reduced-motion: reduce) {
  body.brand-entrance-active svg[viewBox="0 -6 114 96"] rect,
  body.brand-entrance-active svg[viewBox="0 -6 114 102"] rect {
    animation: none !important;
    transform: none !important;
  }
}


/* --- Buttons --- */
/* Letter wave animation — each letter bounces up in sequence on hover */
@keyframes letterWave {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(1px);
  }
  75% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.wave-ch {
  display: inline-block;
  animation: letterWave 770ms cubic-bezier(0.36, 1.2, 0.5, 1) var(--d, 0ms) both;
}
@media (prefers-reduced-motion: reduce) {
  .wave-ch {
    animation: none;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease-out-snap, var(--ease));
  text-decoration: none;
  line-height: 1;
  position: relative;
}
/* Emil Kowalski: tactile press — snappy easing, 100ms */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Loading state — single rotating arc, centered, no layout shift.
   Applies to any button (`.btn` + other ad-hoc button classes below).
   Usage: add/remove the class `is-loading` on click → reset on done.
   The label + icons are hidden via `color: transparent` and
   `visibility: hidden` on direct children so the button keeps its exact
   rendered width/height. The spinner is an ::after pseudo-element
   absolutely positioned over the center of the button.
═══════════════════════════════════════════════════════════════════════════ */
.btn.is-loading,
button.is-loading,
.plan-hero-manage-btn.is-loading,
.plan-hero-cancel-btn.is-loading,
.plan-hero-renew-btn.is-loading,
.pricing-buy.is-loading,
.pricing-details-btn.is-loading,
.ng-primary.is-loading,
.ng-secondary.is-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
  position: relative;
}
.btn.is-loading > *,
button.is-loading > *,
.plan-hero-manage-btn.is-loading > *,
.plan-hero-cancel-btn.is-loading > *,
.plan-hero-renew-btn.is-loading > *,
.pricing-buy.is-loading > *,
.pricing-details-btn.is-loading > *,
.ng-primary.is-loading > *,
.ng-secondary.is-loading > * {
  visibility: hidden;
}
.btn.is-loading::after,
button.is-loading::after,
.plan-hero-manage-btn.is-loading::after,
.plan-hero-cancel-btn.is-loading::after,
.plan-hero-renew-btn.is-loading::after,
.pricing-buy.is-loading::after,
.pricing-details-btn.is-loading::after,
.ng-primary.is-loading::after,
.ng-secondary.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  visibility: visible;
  box-sizing: border-box;
}
/* Outlined / secondary / text-style buttons need a terra-colored spinner
   over their transparent or white background so the arc is actually visible. */
.btn-outline.is-loading::after,
.btn-outline-dark.is-loading::after,
.btn-secondary.is-loading::after,
.plan-hero-cancel-btn.is-loading::after,
.pricing-details-btn.is-loading::after,
.ng-secondary.is-loading::after {
  border-color: rgba(217, 119, 87, 0.25);
  border-top-color: var(--terra);
}
/* Smaller spinner for small-size buttons so it doesn't overflow */
.btn-sm.is-loading::after,
.btn-small.is-loading::after {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-width: 2px;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-primary {
  background: #131314;
  color: #fff;
  box-shadow: 0 1px 3px rgba(19, 19, 20, 0.08);
}
.btn-primary:hover {
  background: #2a2a2c;
  box-shadow: 0 4px 12px rgba(19, 19, 20, 0.15);
  transform: translateY(-1px);
}

/* Ready/glow state — applied to primary buttons when their associated form field is valid */
.btn-primary.btn-ready {
  background: var(--terra);
  color: #fff;
  box-shadow:
    0 0 0 3px rgba(217, 119, 87, 0.18),
    0 4px 16px rgba(217, 119, 87, 0.28);
  transition:
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn-primary.btn-ready:hover {
  background: var(--terra-600);
  box-shadow:
    0 0 0 4px rgba(217, 119, 87, 0.22),
    0 6px 20px rgba(217, 119, 87, 0.38);
  transform: translateY(-1px);
}
[data-theme='dark'] .btn-primary.btn-ready {
  box-shadow:
    0 0 0 3px rgba(224, 124, 88, 0.22),
    0 4px 20px rgba(224, 124, 88, 0.35);
}

.btn-accent {
  background: var(--terra);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(217, 119, 87, 0.15);
}
.btn-accent:hover {
  background: var(--terra-600);
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.25);
  transform: translateY(-1px);
}

.btn-outline-dark {
  background: var(--white);
  color: var(--canvas-700);
  box-shadow: var(--shadow-sm);
}
.btn-outline-dark:hover {
  background: var(--terra-50);
  color: var(--terra-700);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--canvas-600);
}
.btn-ghost:hover {
  background: var(--canvas-100);
  color: var(--canvas-800);
}

.btn-danger {
  background: var(--red-50);
  color: var(--red-500);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08);
}
.btn-danger:hover {
  background: var(--red-500);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.btn-xl {
  padding: 11px 22px;
  font-size: 13px;
  border-radius: var(--radius-lg);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 13.5px;
}
.btn-full {
  width: 100%;
}
.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* --- Inputs --- */
.input-group {
  margin-bottom: 20px;
}
.input-group label,
.input-group .label,
.form-group .label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-700);
  margin-bottom: 7px;
}
.input-group input,
.input-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  transition:
    box-shadow 0.2s var(--ease-out-snap, ease),
    background 0.2s var(--ease-out-snap, ease),
    transform 0.2s var(--ease-out-snap, ease);
  line-height: 1.5;
}
/* Hide native selects that are enhanced — keep unenhanced selects styled */
.input-group select:not([data-enhanced]) {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 0.2s var(--ease-out-snap, ease);
  line-height: 1.5;
}
/* Emil Kowalski: input focus glow — ring expands from 0 to 4px, terra accent */
.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.12);
  transform: scale(1.005);
}
.input-group select:not([data-enhanced]):focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.12);
}
.input-group input::placeholder,
.input-group textarea::placeholder {
  color: var(--canvas-400);
}

/* --- JD Mode Toggle (Paste / URL) --- */
.jd-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.jd-label-row label {
  margin-bottom: 0;
}
.jd-mode-pills {
  display: flex;
  gap: 0;
  background: var(--canvas-100);
  border-radius: 20px;
  padding: 3px;
  position: relative;
}
.jd-mode-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  border: none;
  border-radius: 16px;
  background: transparent;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.jd-mode-pill:hover {
  color: var(--canvas-600);
}
.jd-mode-pill.active {
  background: var(--terra);
  color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.3);
}
.jd-mode-pill svg {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.jd-mode-pill.active svg {
  opacity: 1;
  color: #fff;
}
/* URL input area */
.jd-url-input {
  background: var(--canvas-50);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  transition: box-shadow 0.2s;
}
.jd-url-input:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.08);
}
.jd-url-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.jd-url-row input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  padding: 0;
  box-shadow: none;
}
.jd-url-row input::placeholder {
  color: var(--canvas-400);
}
.jd-url-row input:focus {
  box-shadow: none;
}
.jd-url-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  display: flex;
  align-items: center;
}
.jd-url-hint {
  display: block;
  font-size: 11px;
  color: var(--canvas-400);
  margin-top: 10px;
  letter-spacing: 0.01em;
}
/* Dark mode */
[data-theme='dark'] .jd-mode-pills {
  background: var(--bg-elevated);
}
[data-theme='dark'] .jd-mode-pill {
  color: var(--text-muted);
}
[data-theme='dark'] .jd-mode-pill:hover {
  color: var(--text-secondary);
}
[data-theme='dark'] .jd-mode-pill.active {
  background: var(--terra);
  color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.25);
}
[data-theme='dark'] .jd-url-input {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .jd-url-row input {
  color: var(--text-primary);
}

/* --- Custom Select (.csel) ---
   Replaces native <select> with a fully-styled, animated dropdown */
.csel {
  position: relative;
  width: 100%;
}
.csel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  cursor: pointer;
  text-align: left;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.csel-trigger:hover {
  box-shadow: inset 0 0 0 1.5px var(--canvas-400);
}
.csel.csel-open .csel-trigger {
  background: var(--white);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.08);
}
.csel-val {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csel-arrow {
  color: var(--canvas-500);
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}
.csel.csel-open .csel-arrow {
  transform: rotate(180deg);
}
.csel-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px var(--border-strong);
  padding: 5px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s var(--ease);
  max-height: 240px;
  overflow-y: auto;
}
.csel.csel-open .csel-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.csel-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
  gap: 10px;
}
.csel-item:hover {
  background: var(--canvas-100);
}
.csel-item.csel-selected {
  color: var(--terra);
  font-weight: 600;
  background: var(--terra-50);
}
.csel-item.csel-selected::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: var(--terra);
  border-radius: 50%;
  flex-shrink: 0;
}
.csel-placeholder {
  color: var(--canvas-400);
}

/* Open upward when near bottom of scrollable parent */
.csel.csel-up .csel-menu {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(0.98);
}
.csel.csel-up.csel-open .csel-menu {
  transform: translateY(0) scale(1);
}

/* --- Settings Theme Card ---
   A single clickable card in Settings → Appearance */
.settings-theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--canvas-50);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  width: 100%;
  max-width: 340px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.settings-theme-card:hover {
  background: var(--canvas-100);
  box-shadow: var(--shadow-md);
}
.stc-icon-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  color: var(--terra);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease;
}
.stc-icon-wrap.tcb-spin {
  transform: rotate(180deg) scale(0.5);
  opacity: 0;
}
.stc-info {
  flex: 1;
}
.stc-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.stc-info span {
  font-size: 12.5px;
  color: var(--text-muted);
}
.stc-cycle {
  color: var(--canvas-500);
  flex-shrink: 0;
}
.input-group textarea {
  resize: vertical;
}
.input-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 5px;
  display: block;
}
.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 20, 0.4);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* Emil Kowalski: overlay fade with blur buildup */
  animation: overlayFadeIn 0.25s var(--ease-out-snap, ease) both;
}
@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}
.modal {
  background: var(--white);
  border-radius: var(--radius-2xl);
  width: 520px;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 32px 80px rgba(19, 19, 20, 0.12),
    0 8px 24px rgba(19, 19, 20, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  /* Emil Kowalski: 300ms ease-out-snap, center origin (modals stay center) */
  animation: modalIn 0.3s var(--ease-out-snap, var(--spring));
  transform-origin: center center;
  overflow: hidden;
}
.modal.modal-sm {
  width: 420px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}
.modal-head h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--canvas-950);
}
.modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--canvas-500);
  transition: all 0.2s var(--ease-out-snap, var(--ease));
}
.modal-close:hover {
  background: transparent;
  color: var(--canvas-900);
  transform: rotate(90deg) scale(1.05);
}
.modal-close:active {
  transform: rotate(90deg) scale(0.9);
  transition-duration: 80ms;
}
.modal-body {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.7;
}
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--canvas-50), var(--canvas-100));
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* --- Contact Sales / Payment Modal Form --- */
.payment-modal {
  max-width: 440px;
}
.payment-modal .form-group {
  margin-bottom: 14px;
}
.payment-modal label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.payment-modal .form-input {
  width: 100%;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 9px 12px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
}
.payment-modal .form-input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
}
.payment-modal .form-input::placeholder {
  color: var(--text-muted);
  font-size: 13px;
}
.payment-modal textarea.form-input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.6;
}
.payment-modal .custom-select .cs-trigger {
  font-size: 13.5px;
  padding: 9px 12px;
}
.payment-modal .cs-option {
  font-size: 13.5px;
  padding: 8px 12px;
}
.payment-modal .btn-primary {
  font-size: 13.5px;
  padding: 10px 18px;
}
[data-theme='dark'] .payment-modal .form-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}
[data-theme='dark'] .payment-modal .form-input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
[data-theme='dark'] .payment-modal .form-input::placeholder {
  color: #555;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Emil Kowalski: enter from scale(0.95), never scale(0) */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* --- Wizard Modal --- */
.modal.modal-wizard {
  width: 580px;
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  margin-right: 16px;
}
.wizard-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--canvas-100);
  color: var(--text-muted);
  transition: all 0.25s var(--ease);
}
.wizard-dot.active {
  background: var(--canvas-900);
  color: #fff;
}
.wizard-dot.done {
  background: var(--accent);
  color: #fff;
}
.wizard-line {
  width: 32px;
  height: 2px;
  background: var(--canvas-200);
  margin: 0 4px;
}
.wizard-step {
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
  padding-bottom: 24px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--canvas-200) transparent;
}
.wizard-step::-webkit-scrollbar {
  width: 6px;
}
.wizard-step::-webkit-scrollbar-track {
  background: transparent;
}
.wizard-step::-webkit-scrollbar-thumb {
  background: var(--canvas-200);
  border-radius: 100px;
}

/* Inline upload row */
.inline-upload-row {
  margin-top: 8px;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 13.5px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
}

/* --- Session mode toggle (Free / Real) --- */
.session-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
/* ── Session mode: segmented control ── */
.session-mode-seg {
  display: flex;
  background: var(--canvas-100, #f3f2ec);
  border-radius: 14px;
  padding: 4px;
}
[data-theme='dark'] .session-mode-seg {
  background: rgba(255, 255, 255, 0.04);
}

.seg-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 14px;
  border-radius: 11px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font);
  transition: all 0.22s ease;
}
.seg-opt.active {
  background: var(--white, #fff);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}
[data-theme='dark'] .seg-opt.active {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.seg-ic {
  color: var(--canvas-300, #c8c4ba);
  transition: color 0.2s;
}
.seg-opt.active .seg-ic {
  color: var(--canvas-900, #1f1d18);
}
[data-theme='dark'] .seg-ic {
  color: #3a3835;
}
[data-theme='dark'] .seg-opt.active .seg-ic {
  color: #e8e4db;
}

.seg-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--canvas-300, #c8c4ba);
  transition: color 0.2s;
}
.seg-opt.active .seg-name {
  color: var(--canvas-900, #1f1d18);
}
[data-theme='dark'] .seg-name {
  color: #3a3835;
}
[data-theme='dark'] .seg-opt.active .seg-name {
  color: #f2f0eb;
}

.seg-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--canvas-300, #d4d0c8);
  transition: color 0.2s;
}
.seg-opt.active .seg-desc {
  color: var(--canvas-500, #888);
}
[data-theme='dark'] .seg-desc {
  color: #333;
}
[data-theme='dark'] .seg-opt.active .seg-desc {
  color: #777;
}

.seg-detail {
  font-size: 10px;
  font-weight: 500;
  color: var(--canvas-200, #dedad3);
  transition: color 0.2s;
  text-align: center;
}
.seg-opt.active .seg-detail {
  color: var(--canvas-400, #aaa9a0);
}
[data-theme='dark'] .seg-detail {
  color: #2e2c28;
}
[data-theme='dark'] .seg-opt.active .seg-detail {
  color: #666;
}

.seg-selected-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--terra-500, #d8602f);
  background: rgba(216, 96, 47, 0.09);
  border-radius: 100px;
  padding: 2px 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.seg-opt.active .seg-selected-badge {
  opacity: 1;
}
[data-theme='dark'] .seg-opt.active .seg-selected-badge {
  background: rgba(216, 96, 47, 0.15);
}

/* ── Meta row (below toggle) ── */
.seg-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 20px;
  transition: opacity 0.2s;
}
.seg-meta.hidden {
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  margin-top: 0;
}

.seg-meta-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--canvas-500, #9c9680);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.seg-meta-count.unlimited {
  font-weight: 700;
  color: var(--canvas-700);
}
[data-theme='dark'] .seg-meta-count {
  color: var(--canvas-600, #8a8680);
}
[data-theme='dark'] .seg-meta-count.unlimited {
  color: var(--canvas-700);
}

.seg-meta-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px 3px 6px;
  border-radius: 5px;
  background: #111;
  color: #fff;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: background 0.15s;
}
.seg-meta-upgrade:hover {
  background: #252525;
}
[data-theme='dark'] .seg-meta-upgrade {
  background: #f0ede6;
  color: #111;
}
[data-theme='dark'] .seg-meta-upgrade:hover {
  background: #e0ddd6;
}
.seg-meta-upgrade svg {
  flex-shrink: 0;
}
.seg-meta-upgrade .arr {
  transition: transform 0.15s;
}
.seg-meta-upgrade:hover .arr {
  transform: translate(1px, -1px);
}
[data-theme='dark'] .session-mode-btn.active {
  border-color: #e07c58;
  background: rgba(224, 124, 88, 0.1);
  box-shadow: 0 0 0 1px #e07c58;
}
[data-theme='dark'] .session-mode-btn.active svg {
  color: #e07c58;
}
[data-theme='dark'] .session-mode-btn.active span {
  color: #f0a07a;
}
[data-theme='dark'] .session-mode-btn.active small {
  color: #d89070;
}

/* --- Session mode badges (table + live topbar) --- */
.session-mode-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.mode-free {
  color: #64748b;
}
.mode-real {
  color: #475569;
}
[data-theme='dark'] .mode-free {
  color: #94a3b8;
}
[data-theme='dark'] .mode-real {
  color: #cbd5e1;
}

/* Live session badge — hidden per design */
.live-session-badge {
  display: none;
}

/* --- Model selection grid --- */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.model-grid-advanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  grid-column: 1 / -1;
  margin-top: 0;
}
@media (max-width: 767px) {
  .model-grid,
  .model-grid-advanced {
    grid-template-columns: 1fr;
  }
  /* Pricing cards: single column on mobile */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pricing-grid-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ── Mobile session cards — transform table into card layout ── */
  #tab-sessions .data-table {
    table-layout: auto;
  }
  #tab-sessions .data-table thead {
    display: none;
  }
  #tab-sessions .data-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-radius: var(--radius-lg);
  }
  #tab-sessions .data-table tbody td {
    display: block;
    padding: 0;
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Row 1: Title — full width, single line, truncate */
  #tab-sessions .data-table tbody td:nth-child(1) {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
  }
  /* Row 2: Type · Mode · Status — horizontal, no wrap */
  #tab-sessions .data-table tbody td:nth-child(2),
  #tab-sessions .data-table tbody td:nth-child(3),
  #tab-sessions .data-table tbody td:nth-child(4) {
    display: inline-block;
    width: auto !important;
    font-size: 12px;
    vertical-align: middle;
  }
  #tab-sessions .data-table tbody td:nth-child(2)::after {
    content: ' · ';
    color: var(--canvas-300);
  }
  #tab-sessions .data-table tbody td:nth-child(3)::after {
    content: '';
    display: inline-block;
    width: 16px;
  }
  /* Hide resume + created date on mobile — not enough space */
  #tab-sessions .data-table tbody td:nth-child(5),
  #tab-sessions .data-table tbody td:nth-child(6) {
    display: none;
  }
  /* Row 3: Actions — full width, below a subtle border */
  #tab-sessions .data-table tbody td:nth-child(7) {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--canvas-200);
    width: 100% !important;
  }
  /* Status badge — don't wrap */
  #tab-sessions .session-status-badge {
    white-space: nowrap;
    font-size: 11px;
  }
}
.model-grid-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  margin-top: 4px;
  background: none;
  border: 1px dashed var(--canvas-200);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.model-grid-toggle:hover {
  border-color: var(--terra);
  color: var(--terra);
  background: rgba(217, 119, 87, 0.04);
}
.model-toggle-chevron {
  transition: transform 0.2s ease;
}
[data-theme='dark'] .model-grid-toggle {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .model-grid-toggle:hover {
  border-color: #e07c58;
  color: #e07c58;
  background: rgba(224, 124, 88, 0.06);
}
.model-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  background: var(--white);
}
.model-card:hover {
  border-color: var(--canvas-300);
  background: var(--canvas-50);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.model-card.selected {
  border-color: var(--terra);
  background: var(--terra-50);
  box-shadow:
    0 0 0 1px var(--terra),
    0 2px 8px rgba(217, 119, 87, 0.1);
}
.model-card.selected .model-name {
  color: var(--terra-700);
}
.model-card.model-locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.model-card .model-lock-icon {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  color: var(--canvas-400);
}
.model-card.model-locked .model-lock-icon {
  display: block;
}
.model-card.model-locked .model-card-tag {
  display: none;
}
.model-lock-msg {
  display: none;
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--canvas-400);
  white-space: nowrap;
}
.model-card.model-locked .model-lock-msg {
  display: block;
}
.model-lock-msg.msg-upgrade {
  color: var(--terra);
}
.model-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--canvas-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--canvas-500);
  transition: all 0.2s var(--ease);
}
.model-card-icon.icon-openai {
  color: #10a37f;
  background: rgba(16, 163, 127, 0.08);
}
.model-card-icon.icon-anthropic {
  color: #cc7744;
  background: rgba(204, 119, 68, 0.08);
}
.model-card-icon.icon-meta {
  color: #0081fb;
  background: rgba(0, 129, 251, 0.08);
}
.model-card-icon.icon-mistral {
  color: #f54e42;
  background: rgba(245, 78, 66, 0.08);
}
.model-card-icon.icon-deepseek {
  color: #4d6bfe;
  background: rgba(77, 107, 254, 0.08);
}
.model-card-icon.icon-qwen {
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.08);
}
.model-card-icon.icon-google {
  color: #4285f4;
  background: rgba(66, 133, 244, 0.08);
}
.model-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.model-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--canvas-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-tier {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 450;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-card-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
}
.tag-recommended {
  background: var(--terra-50);
  color: var(--terra);
}
.tag-fast {
  background: var(--canvas-100);
  color: var(--canvas-500);
}
.tag-free {
  background: rgba(16, 163, 127, 0.08);
  color: #10a37f;
}
.tag-pro {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}
.tag-coding {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

/* --- Auto-answer toggle --- */
.auto-answer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-top: 12px;
  background: var(--canvas-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--canvas-100);
}
.auto-answer-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900);
  display: block;
}
.auto-answer-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--canvas-200);
  border-radius: 22px;
  transition: 0.25s var(--ease);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--canvas-900);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* --- Custom Prompt Panel --- */
.custom-prompt-panel {
  margin-top: 12px;
  animation: fadeSlideDown 0.25s var(--ease);
}
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.custom-prompt-recommend {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--terra-200, #f5d5c0);
  border-radius: var(--radius-lg);
  background: var(--terra-50, #fef6f0);
  animation: fadeSlideDown 0.3s var(--ease);
}
.recommend-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--terra-700, #b05a1f);
  margin-bottom: 4px;
}
.recommend-header svg {
  color: var(--terra);
  flex-shrink: 0;
}
.recommend-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}
.recommend-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.recommend-actions .btn-sm {
  padding: 5px 14px;
  font-size: 11.5px;
  border-radius: var(--radius-md);
}
.recommend-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* --- Data Table — modern card-style rows --- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  background: transparent;
  table-layout: fixed;
}
.data-table thead th {
  text-align: left;
  padding: 6px 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
}
/* Session table — DOM has 7 columns: Title/Type/Mode/Status/Resume/Created/Actions.
 * On PC (>=961px) Type is hidden; the six visible columns share 100% of the
 * table width proportionally so the row spans end-to-end at every viewport
 * size with no dead empty space. Title and Resume are the elastic columns
 * (truncate via ellipsis when too long); Mode/Status/Created/Actions are
 * sized for their typical content.
 * On mobile (<=960px) the rules below get overridden by the card layout. */
#tab-sessions .data-table {
  table-layout: fixed;
  width: 100%;
}
/* Hide Type column on PC — mobile card layout still uses col 2 */
@media (min-width: 961px) {
  #tab-sessions .data-table thead th:nth-child(2),
  #tab-sessions .data-table tbody td:nth-child(2) {
    display: none !important;
  }
}
#tab-sessions .data-table thead th:nth-child(1),
#tab-sessions .data-table tbody td:nth-child(1) {
  width: 22%;
} /* Title — elastic, ellipsis */
#tab-sessions .data-table thead th:nth-child(2),
#tab-sessions .data-table tbody td:nth-child(2) {
  width: 0;
} /* Type — hidden on PC */
#tab-sessions .data-table thead th:nth-child(3),
#tab-sessions .data-table tbody td:nth-child(3) {
  width: 11%;
} /* Mode */
#tab-sessions .data-table thead th:nth-child(4),
#tab-sessions .data-table tbody td:nth-child(4) {
  width: 16%;
} /* Status */
#tab-sessions .data-table thead th:nth-child(5),
#tab-sessions .data-table tbody td:nth-child(5) {
  width: 22%;
  overflow: hidden;
} /* Resume — elastic, ellipsis */
#tab-sessions .data-table thead th:nth-child(6),
#tab-sessions .data-table tbody td:nth-child(6) {
  width: 12%;
} /* Created */
#tab-sessions .data-table thead th:nth-child(7),
#tab-sessions .data-table tbody td:nth-child(7) {
  width: 17%;
} /* Actions */
/* Title truncation: clamp the inline-flex wrapper so strong ellipsis works */
#tab-sessions .data-table tbody td:nth-child(1) > span {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
#tab-sessions .data-table tbody td:nth-child(1) strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.data-table tbody tr {
  background: var(--canvas-50);
  border-radius: var(--radius-lg);
  transition: background 0.15s ease;
  box-shadow: none;
}
.data-table tbody tr:hover {
  background: var(--canvas-100, rgba(0, 0, 0, 0.02));
}
.data-table tbody td {
  padding: 9px 6px;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
  background: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Round the first and last cells in each row */
.data-table tbody td:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.data-table tbody td:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.table-actions {
  display: flex;
  /* v1.0.403 — align icons at the TOP of the action cell, not vertical-
   * center. Mixed rows (e.g. Upcoming = labeled Start + unlabeled
   * Edit/Duplicate/Delete) were rendering the icon-only buttons floating
   * at the vertical center of the row while the labeled Start anchored
   * at the top of its cell. The result looked broken even though every
   * individual button was correct. Top-aligning everything keeps the row
   * cohesive — labeled buttons get their label below, unlabeled buttons
   * sit at the same Y as the labeled icon. */
  align-items: flex-start;
  gap: 6px;
}

/* v1.0.404 — Notched chat-with-sparkle glyph. Replaces the v1.0.401/402
 * approach where a plain chat bubble + a separate floating sparkle were
 * rendered as two unrelated elements. Now a single inline glyph that
 * reads as ONE integrated icon: the chat bubble has a circular bite cut
 * out of its top-right corner, and a Gemini-gradient sparkle sits in
 * that notch. Same Apple/iOS pattern as the mic-with-sparkle on Live
 * Voicemail or Google's Gemini-icon-with-sparkle.
 *
 * Structure expected by callers:
 *   <span class="gemini-chat-glyph">
 *     <span class="gcg-chat"></span>
 *     <span class="gcg-sparkle"></span>
 *   </span>
 *
 * The chat fill inherits `color` (text/currentColor) — so it matches the
 * surrounding label color in light + dark themes without per-call-site
 * overrides. The sparkle is always painted with the Gemini gradient. */
.gemini-chat-glyph {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  flex-shrink: 0;
}
.gemini-chat-glyph .gcg-chat {
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14 9c0 .8-.7 1.5-1.5 1.5h-7L3 13V4.5C3 3.7 3.7 3 4.5 3h8c.8 0 1.5.7 1.5 1.5V9z' fill='black'/></svg>") no-repeat center / contain,
    radial-gradient(circle 3.5px at 88% 12%, black 100%, transparent 100%) no-repeat;
  -webkit-mask-composite: source-out;
          mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14 9c0 .8-.7 1.5-1.5 1.5h-7L3 13V4.5C3 3.7 3.7 3 4.5 3h8c.8 0 1.5.7 1.5 1.5V9z' fill='black'/></svg>") no-repeat center / contain,
    radial-gradient(circle 3.5px at 88% 12%, black 100%, transparent 100%) no-repeat;
          mask-composite: exclude;
}
.gemini-chat-glyph .gcg-sparkle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #4285f4 0%, #9333ea 35%, #ec4899 65%, #f59e0b 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 0 L7.4 4.6 L12 6 L7.4 7.4 L6 12 L4.6 7.4 L0 6 L4.6 4.6 Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 0 L7.4 4.6 L12 6 L7.4 7.4 L6 12 L4.6 7.4 L0 6 L4.6 4.6 Z'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 0 2px rgba(147,51,234,0.5));
  animation: gcg-sparkle-twinkle 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcg-sparkle-twinkle {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.78); }
}
.gemini-chat-glyph.glyph-sm { width: 14px; height: 14px; vertical-align: -2px; }
.gemini-chat-glyph.glyph-sm .gcg-sparkle { top: 3px; right: 3px; width: 7px; height: 7px; }
.gemini-chat-glyph.glyph-lg { width: 20px; height: 20px; vertical-align: -4px; }
.gemini-chat-glyph.glyph-lg .gcg-sparkle { top: 5px; right: 5px; width: 10px; height: 10px; }

/* v1.0.402 — Inline "AI magic" sparkle used alongside Ask-AI affordances
 * across web, enterprise, and desktop. Mask-based so the same 4-pointed
 * auto-awesome star can be painted in any colour without per-call-site
 * SVG defs (which would collide on `id="gemini-grad"` if multiple
 * sparkles were rendered on the same page). The default fill is the
 * multi-stop Gemini gradient (Google blue → purple → pink → amber);
 * a subtle 1.6s twinkle gives the cue motion without distracting. */
/* v1.0.408 — Outlined Material auto_awesome two-star sparkle.
 * Was: single FILLED 4-pointed star (12×12). Now: outlined two-star
 * composition (big star + small accent at upper-right), stroked at
 * 1.8px in the Gemini gradient. User pick for the Ask AI tab indicator
 * in session-summary modal — sits inline before "Ask AI" text with no
 * button background. 18×18 default so it's readable next to 14px tab
 * labels without dominating. */
.gemini-sparkle {
  display: inline-block;
  vertical-align: -4px;
  /* v1.0.413 — bumped size by 20% (18→22, 14→17, 22→26) per user.
     Star paths inside the SVG mask scale proportionally, so BOTH the
     big star and the small accent star grow together. */
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #4285f4 0%, #9333ea 35%, #ec4899 65%, #f59e0b 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4 L12.4 9 L17.4 10.4 L12.4 11.8 L11 16.8 L9.6 11.8 L4.6 10.4 L9.6 9 Z'/><path d='M18.5 3.5 L19.1 5.4 L21 6 L19.1 6.6 L18.5 8.5 L17.9 6.6 L16 6 L17.9 5.4 Z'/></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='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4 L12.4 9 L17.4 10.4 L12.4 11.8 L11 16.8 L9.6 11.8 L4.6 10.4 L9.6 9 Z'/><path d='M18.5 3.5 L19.1 5.4 L21 6 L19.1 6.6 L18.5 8.5 L17.9 6.6 L16 6 L17.9 5.4 Z'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 0 2px rgba(147,51,234,0.35));
  animation: gemini-sparkle-twinkle 1.6s ease-in-out infinite;
  pointer-events: none;
  flex-shrink: 0;
}
@keyframes gemini-sparkle-twinkle {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.6;  transform: scale(0.85); }
}
.gemini-sparkle.sparkle-sm { width: 17px; height: 17px; vertical-align: -3px; }
.gemini-sparkle.sparkle-lg { width: 26px; height: 26px; vertical-align: -5px; }

/* Wrapper for action buttons that show a micro-label under the icon
 * (Start / Resume / End). Used in the sessions table across web,
 * enterprise, and desktop so non-technical users immediately recognise
 * the primary CTAs without hovering for a tooltip. The .table-icon-btn
 * inside keeps its locked 28×28 (40×40 on mobile) shape — this wrapper
 * just stacks a label below it without disturbing the lock. */
.action-with-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  /* v1.0.432 — restored flex-column so the label is INSIDE the wrapper
   * (contributes to wrapper height). Combined with align-items:flex-start
   * on the parent actions row, this keeps the button vertically aligned
   * with bare-icon siblings AND guarantees the label is never clipped
   * by the row's natural height. */
  min-width: 28px;
  max-width: 56px;
}
.action-with-label .action-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-secondary, var(--canvas-600, #666));
  user-select: none;
  pointer-events: none;
  text-transform: none;
  white-space: nowrap;
}
/* Match the parent button's intent colour so the label reads as one
 * affordance with the icon. Covers consumer table-icon-btn AND the
 * enterprise ent-icon-btn family. */
.action-with-label:has(.table-icon-btn.primary) .action-label,
.action-with-label:has(.table-icon-btn.active) .action-label,
.action-with-label:has(.ent-icon-btn-primary) .action-label,
.action-with-label:has(.ent-icon-btn-live) .action-label {
  color: var(--canvas-900, #131314);
}
.action-with-label:has(.table-icon-btn.danger) .action-label,
.action-with-label:has(.ent-icon-btn-end) .action-label {
  color: var(--red-500, #ef4444);
}
[data-theme='dark'] .action-with-label .action-label {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme='dark'] .action-with-label:has(.table-icon-btn.danger) .action-label,
[data-theme='dark'] .action-with-label:has(.ent-icon-btn-end) .action-label {
  color: #ef4444;
}
@media (max-width: 640px) {
  .action-with-label .action-label {
    font-size: 11px;
  }
}
.table-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--canvas-50);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.table-btn:hover {
  background: var(--canvas-200);
  color: var(--canvas-900);
}
.table-btn.primary {
  background: var(--canvas-950);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(19, 19, 20, 0.08);
}
.table-btn.primary:hover {
  background: var(--canvas-800);
}
.table-btn.danger {
  color: var(--red-500);
}
.table-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-500);
}

/* Icon-only action buttons.
 * Locked 28×28 square. Same enforcement pattern as .session-row-share-btn
 * and .ent-icon-btn — min/max width+height, aspect-ratio: 1, flex-basis,
 * line-height: 1, all !important — defeats every browser default + flex
 * align-items: stretch path that could turn one of these into a vertical
 * rectangle next to its siblings. Applies to consumer studio sessions
 * table, resumes table, and the desktop Electron app (which bundles this
 * same file via desktop/package.json). */
.table-icon-btn {
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--canvas-500);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0;
  transition: all 0.2s var(--ease);
  position: relative;
}
/* Mobile — match enterprise card-style action buttons (bigger touch target,
   easier to tap on phones) */
@media (max-width: 640px) {
  .table-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
    background: var(--canvas-50, rgba(0, 0, 0, 0.04)) !important;
  }
  .table-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .table-icon-btn.primary {
    background: #131314 !important;
    color: #fff !important;
  }
  .table-icon-btn.danger {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
  }
  [data-theme='dark'] .table-icon-btn {
    background: rgba(255, 255, 255, 0.06) !important;
  }
  [data-theme='dark'] .table-icon-btn.primary {
    background: rgba(255, 255, 255, 0.12) !important;
  }
}
.table-icon-btn:hover {
  background: transparent;
  color: var(--canvas-900);
}
.table-icon-btn.primary {
  background: #131314;
  color: #fff;
  box-shadow: 0 1px 3px rgba(19, 19, 20, 0.08);
}
.table-icon-btn.primary:hover {
  background: #2a2a2c;
  color: #fff;
}
/* ── Danger / Delete / Cancel buttons — outlined red ─────────────────
 * Used for: Delete (History row), Cancel (Upcoming row), and any other
 * non-emergency destructive action. ALWAYS red, every theme + every
 * platform. Was previously faded grey at rest, invisible on dark.
 *
 * `:not(.is-end-session)` excludes the in-progress END button which is
 * a SOLID-red emergency-stop with a white square inside — different
 * visual treatment, defined further below.
 *
 * Electron specificity engineering:
 * desktop/main.js injects user-origin wildcards on dark theme that
 * paint .table-icon-btn faded grey. To beat them we use selectors
 * scoped to the data-table cell (specificity 0,5,4). */
.table-icon-btn.danger:not(.is-end-session),
.table-icon-btn.danger:not(.is-end-session) svg {
  color: #dc2626 !important;
}
.table-icon-btn.danger:not(.is-end-session):hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c !important;
}
[data-theme='dark'] .table-icon-btn.danger:not(.is-end-session),
[data-theme='dark'] .table-icon-btn.danger:not(.is-end-session) svg {
  color: #f87171 !important;
}
[data-theme='dark'] .table-icon-btn.danger:not(.is-end-session):hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5 !important;
}
/* Electron — high-specificity guard for the outlined-red Delete only.
 * Forces SVG stroke red and fill:none so neither the wildcard
 * `.danger svg { stroke: #fff }` nor the transparent-bg rule can
 * wash out the trash icon. Excludes .is-end-session (handled below). */
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session),
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session) svg,
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session) svg path {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
  fill: none !important;
}
html[data-theme='dark'] body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session),
html[data-theme='dark'] body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session) svg,
html[data-theme='dark'] body.is-electron .data-table tbody td:last-child .table-icon-btn.danger:not(.is-end-session) svg path {
  color: #f87171 !important;
  stroke: #f87171 !important;
  fill: none !important;
}

/* ── End-session button — SOLID red emergency stop (v1.0.406) ────────
 * Reverted from v1.0.404's tinted treatment. User decision: the loud
 * solid red is the correct affordance for the End action. Ending a
 * live session is destructive and SHOULD make the user pause. Solid
 * #dc2626 bg + white square fill. */
.table-icon-btn.danger.is-end-session {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
.table-icon-btn.danger.is-end-session:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}
.table-icon-btn.danger.is-end-session svg,
.table-icon-btn.danger.is-end-session svg path {
  fill: #ffffff !important;
  stroke: none !important;
  color: #ffffff !important;
}
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger.is-end-session,
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger.is-end-session svg,
body.is-electron .data-table tbody td:last-child .table-icon-btn.danger.is-end-session svg path {
  background: #dc2626 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: none !important;
  border-color: #dc2626 !important;
}
.table-icon-btn.disabled,
.table-icon-btn[disabled] {
  opacity: 0.25;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Prompt-ready spinner: shown inside the existing black Play button while the
   backend prompt agent is still generating session_prompt + quick_ref. The
   button keeps its exact shape, size, position and black background — only
   the child icon swaps from the play triangle SVG to this ring spinner. When
   the backend signal arrives, JS swaps back to the play triangle + adds a
   .just-ready class for a brief terra pulse. */
.table-icon-btn.primary.is-preparing {
  /* Override [disabled] dimming — spinner needs full visibility even though
     the button is disabled to prevent clicks during prompt generation. */
  opacity: 1 !important;
  pointer-events: none;
  cursor: wait !important;
}
.table-icon-btn.primary.is-preparing .play-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: playSpin 0.75s linear infinite;
}
@keyframes playSpin {
  to {
    transform: rotate(360deg);
  }
}
.table-icon-btn.primary.just-ready {
  animation: playReadyFlash 0.5s ease;
}
@keyframes playReadyFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(217, 119, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
  }
}

.file-link {
  color: var(--terra-600);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  transition: color 0.15s ease;
}
.file-link:hover {
  color: var(--terra);
  text-decoration: underline;
}

/* --- Empty State --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state p {
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 14px;
  color: var(--text-secondary);
}
.empty-state span {
  font-size: 13.5px;
  margin-top: 6px;
}
/* Dark mode: boost icon visibility (SVG opacity attr is 0.2 — too faint on dark bg) */
[data-theme='dark'] .empty-state svg {
  opacity: 0.42 !important;
}

/* Animated empty state icon */
.empty-state-icon-animated {
  animation: emptyStateFloat 3s ease-in-out infinite;
  color: var(--text-muted);
  margin-bottom: 4px;
}
/* Sessions monitor — static, no float */
.sessions-empty-icon {
  color: var(--text-muted);
  margin-bottom: 4px;
}
[data-theme='dark'] .sessions-empty-icon {
  color: var(--text-secondary);
}
[data-theme='dark'] .sessions-empty-icon svg {
  opacity: 1 !important;
}
.empty-state-icon-animated svg {
  transition:
    width 0.2s,
    height 0.2s;
}
@keyframes emptyStateFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (max-width: 600px) {
  .empty-state-icon-animated svg {
    width: 44px;
    height: 44px;
  }
  .analytics-empty-icon svg {
    width: 40px;
    height: 40px;
  }
  .empty-state {
    padding: 48px 16px;
  }
  @keyframes emptyStateFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
}

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--canvas-300);
  border-radius: var(--radius-2xl);
  padding: 36px 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  position: relative;
  background: var(--canvas-50);
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--terra);
  background: var(--terra-50);
  border-style: solid;
  box-shadow: var(--shadow-glow);
}
.upload-zone h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--canvas-900);
}
.upload-zone p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* File Info Bar */
.file-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--canvas-600);
  margin-top: 14px;
  box-shadow: var(--shadow-xs);
}
.file-info-bar svg {
  color: var(--terra);
  flex-shrink: 0;
}
#upload-file-size {
  color: var(--text-muted);
  margin-left: auto;
}

/* --- Toggle --- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--canvas-700);
  position: relative;
}
/* Soft gradient separator between toggle rows */
.toggle-row + .toggle-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.toggle-row input {
  display: none;
}
.toggle {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--canvas-300);
  border-radius: 9px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s var(--spring);
  box-shadow: 0 1px 3px rgba(19, 19, 20, 0.08);
}
.toggle-row input:checked + .toggle {
  background: var(--terra);
}
.toggle-row input:checked + .toggle::after {
  transform: translateX(14px);
}

/* --- Radio Card --- */
.settings-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radio-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--canvas-50);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-xs);
}
.radio-card:hover {
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.radio-card:has(input:checked) {
  background: var(--terra-50);
  box-shadow:
    0 0 0 2px var(--terra),
    var(--shadow-sm);
}
.radio-card input {
  accent-color: var(--terra);
}
.radio-card div {
  display: flex;
  flex-direction: column;
}
.radio-card strong {
  font-size: 13.5px;
  color: var(--canvas-900);
}
.radio-card span {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Pill Group --- */
.pill-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pill-btn {
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--canvas-100);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  line-height: 1.3;
}
.pill-btn:hover {
  background: var(--canvas-200);
  color: var(--canvas-800);
}
.pill-btn.active {
  background: var(--canvas-950);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(19, 19, 20, 0.1);
}
/* Dark-theme contrast guard — the Electron desktop injects two wildcards:
 *   1. `body.is-electron .tab-content *` at (0,3,1)      → stomps descendants
 *   2. `body.is-electron .pill-btn.active *` at (0,4,1)  → old stale override
 * We need (0,4,2) or higher to definitively win. html + body.is-electron +
 * .pill-btn + .active = (0,4,2). In dark theme `--canvas-950` is the cream
 * button background (#f2f0eb) and `--white` flips to dark ink (#1c1b19),
 * which is the contrast pair we want — light cream bg, dark ink text. */
html[data-theme='dark'] body.is-electron .pill-btn.active,
html[data-theme='dark'] body.is-electron .pill-btn.active * {
  color: var(--white) !important;
}

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 18px;
  background: var(--canvas-950);
  color: var(--canvas-200);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    0 16px 48px rgba(19, 19, 20, 0.15),
    0 4px 12px rgba(19, 19, 20, 0.06);
  z-index: 50000;
  /* Emil Kowalski / Sonner pattern: translateY(100%) entry, snappy ease-out */
  animation:
    toastIn 0.3s var(--ease-out-snap, var(--ease)),
    toastOut 0.25s 2.5s var(--ease-in-out-snap, ease) forwards;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* --- Confirm Action Dialog --- */
.confirm-action-card {
  width: 360px;
  max-width: 90vw;
  padding: 24px 22px 18px;
  text-align: center;
  animation: modalIn 0.25s var(--ease);
}
.confirm-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.confirm-action-icon.icon-danger {
  background: var(--red-50);
  color: var(--red-400);
}
.confirm-action-icon.icon-info {
  background: var(--terra-50);
  color: var(--terra);
}
.confirm-action-icon.icon-logout {
  background: var(--canvas-100);
  color: var(--canvas-600);
}
.confirm-action-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 6px;
}
.confirm-action-msg {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
}
.confirm-action-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.confirm-action-btns .btn {
  min-width: 90px;
}
.confirm-action-card .input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13.5px;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  background: var(--canvas-50);
  color: var(--canvas-900);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.confirm-action-card .input:hover {
  border-color: var(--canvas-300);
}
.confirm-action-card .input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
  background: var(--white);
}
.confirm-action-card .input::placeholder {
  color: var(--canvas-400);
}
[data-theme='dark'] .confirm-action-card .input {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--dark-text);
}
[data-theme='dark'] .confirm-action-card .input:hover {
  border-color: var(--canvas-400);
}
[data-theme='dark'] .confirm-action-card .input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}

/* --- Pulse Dot --- */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  animation: pulse 2s ease-in-out infinite;
}
.pulse-dot.green {
  background: var(--emerald-400);
}
.pulse-dot.small {
  width: 6px;
  height: 6px;
}

/* --- Share Options --- */
.share-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 14px 20px;
  background: var(--white);
  border: 1.5px solid var(--canvas-150);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s var(--ease);
  color: var(--canvas-400);
}
.share-option .share-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--canvas-50);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.share-option:hover {
  border-color: var(--terra);
  background: var(--terra-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.12);
}
.share-option:hover .share-option-icon {
  background: var(--terra-100);
  color: var(--terra);
}
.share-option strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900);
}
.share-option span {
  font-size: 11px;
  color: var(--canvas-400);
  line-height: 1.4;
}
.share-option:hover strong {
  color: var(--terra-700);
}

/* --- Stat Cards --- */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 16px);
  margin-bottom: clamp(16px, 1.4vw, 22px);
}
.stat-card {
  padding: clamp(16px, 1.4vw, 22px) clamp(14px, 1.2vw, 18px);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.stat-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--terra-300));
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.stat-card:hover {
  box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(-3px);
}
.stat-card:hover::before {
  transform: scaleX(1);
}
.stat-icon {
  width: clamp(32px, 2.4vw, 38px);
  height: clamp(32px, 2.4vw, 38px);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon.stat-icon-illustrative {
  width: auto;
  height: auto;
  background: none !important;
  color: var(--terra);
  border-radius: 0;
  margin-bottom: 0;
}
.stat-icon-illustrative svg {
  width: 32px;
  height: 32px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--canvas-900);
  line-height: 1;
}
.stat-lbl {
  font-size: clamp(12px, 0.78vw, 13px);
  color: var(--text-muted);
  font-weight: 500;
}
[data-theme='dark'] .stat-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
[data-theme='dark'] .stat-num {
  color: var(--canvas-900);
}

/* --- Activity Heatmap --- */
.heatmap-section {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 1.2vw, 20px);
  margin-bottom: clamp(14px, 1.2vw, 20px);
}
.heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.heatmap-title {
  font-size: clamp(14.5px, 1vw, 17px);
  font-weight: 700;
  color: var(--canvas-900);
  margin: 0;
}
.heatmap-tabs {
  display: flex;
  gap: 2px;
  background: var(--canvas-100);
  border-radius: 8px;
  padding: 2px;
}
.heatmap-tab {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.heatmap-tab:hover {
  color: var(--canvas-700);
}
.heatmap-tab.active {
  background: var(--white);
  color: var(--canvas-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Year navigation (appears only when previous years exist) */
.heatmap-year-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--canvas-100);
  border-radius: 8px;
  padding: 2px;
}
.heatmap-year-btn {
  font-size: 16px;
  font-weight: 600;
  padding: 3px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.heatmap-year-btn:hover {
  color: var(--canvas-700);
  background: var(--white);
}
.heatmap-year-btn:disabled {
  opacity: 0.25;
  cursor: default;
  background: transparent;
}
.heatmap-year-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--canvas-900);
  padding: 0 4px;
  min-width: 36px;
  text-align: center;
}
.heatmap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.heatmap-grid-wrap {
  display: flex;
  gap: 4px;
  min-width: fit-content;
}
.heatmap-day-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 20px;
}
.heatmap-day-labels span {
  height: 11px;
  font-size: 10px;
  line-height: 11px;
  color: var(--text-muted);
  text-align: right;
  width: 26px;
}
.heatmap-grid {
  display: flex;
  gap: 3px;
}
.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.heatmap-month-label {
  font-size: 10px;
  color: var(--text-muted);
  height: 16px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
}
.heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--canvas-200);
  transition: background 0.1s;
}
.heatmap-cell.level-0 {
  background: var(--canvas-200);
}
.heatmap-cell.level-1 {
  background: rgba(194, 120, 62, 0.2);
}
.heatmap-cell.level-2 {
  background: rgba(194, 120, 62, 0.4);
}
.heatmap-cell.level-3 {
  background: rgba(194, 120, 62, 0.65);
}
.heatmap-cell.level-4 {
  background: rgba(194, 120, 62, 0.9);
}
.heatmap-cell[data-count]:hover {
  outline: 1.5px solid var(--canvas-400);
  outline-offset: -0.5px;
}
.heatmap-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 3px;
}
.heatmap-legend-label {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 2px;
}
.heatmap-legend .heatmap-cell {
  width: 10px;
  height: 10px;
  cursor: default;
}
.heatmap-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 16px);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--canvas-100);
}
.heatmap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.heatmap-stat-val {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 800;
  color: var(--canvas-900);
  letter-spacing: -0.02em;
}
.heatmap-stat-lbl {
  font-size: clamp(10.5px, 0.72vw, 12.5px);
  color: var(--text-muted);
  font-weight: 500;
}

/* Heatmap tooltip */
.heatmap-tooltip {
  position: fixed;
  background: var(--canvas-900);
  color: #fff;
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
}
.heatmap-tooltip.visible {
  opacity: 1;
}
[data-theme='dark'] .heatmap-tooltip {
  background: #1c1b19;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark theme */
[data-theme='dark'] .heatmap-section {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
[data-theme='dark'] .heatmap-title {
  color: var(--text-primary);
}
[data-theme='dark'] .heatmap-tabs {
  background: var(--canvas-300);
}
[data-theme='dark'] .heatmap-tab {
  color: var(--text-muted);
}
[data-theme='dark'] .heatmap-tab:hover {
  color: var(--text-secondary);
}
[data-theme='dark'] .heatmap-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
}
[data-theme='dark'] .heatmap-cell.level-0 {
  background: var(--canvas-300);
}
[data-theme='dark'] .heatmap-cell.level-1 {
  background: rgba(240, 137, 104, 0.25);
}
[data-theme='dark'] .heatmap-cell.level-2 {
  background: rgba(240, 137, 104, 0.45);
}
[data-theme='dark'] .heatmap-cell.level-3 {
  background: rgba(240, 137, 104, 0.65);
}
[data-theme='dark'] .heatmap-cell.level-4 {
  background: rgba(240, 137, 104, 0.9);
}
[data-theme='dark'] .heatmap-stat-val {
  color: var(--text-primary);
}
[data-theme='dark'] .heatmap-stats {
  border-top-color: var(--canvas-300);
}
[data-theme='dark'] .heatmap-year-nav {
  background: var(--canvas-300);
}
[data-theme='dark'] .heatmap-year-btn {
  color: var(--text-muted);
}
[data-theme='dark'] .heatmap-year-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-card);
}
[data-theme='dark'] .heatmap-year-label {
  color: var(--text-primary);
}
[data-theme='dark'] .heatmap-legend-label {
  color: var(--text-muted);
}

/* --- Analytics Empty State --- */
.analytics-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.analytics-empty-icon {
  margin-bottom: 16px;
  color: var(--text-muted);
}
.analytics-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(14.5px, 1vw, 17px);
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 8px;
}
.analytics-empty p {
  font-size: 14.5px;
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* --- Analytics Panels --- */
.analytics-panel {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.analytics-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}
.analytics-panel-header h3 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-right: auto;
}
.analytics-panel-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--terra-50);
  color: var(--terra);
}
.analytics-panel-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.analytics-panel-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.5;
}
.analytics-panel-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
  padding: 6px 8px;
  background: var(--canvas-50);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--canvas-200);
}
[data-theme='dark'] .analytics-panel-hint {
  background: var(--canvas-100);
  border-left-color: var(--canvas-300);
}
[data-theme='dark'] .analytics-panel {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
[data-theme='dark'] .analytics-panel-header h3 {
  color: var(--canvas-900);
}

/* --- Your Coach Panel --- */
.coach-panel {
}

/* Scope tabs — Recent / Last 10 / All time */
.coach-scope-tabs {
  display: flex;
  gap: 2px;
  background: var(--canvas-100);
  border-radius: var(--radius-full);
  padding: 2px;
}
.coach-scope-tab {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.coach-scope-tab.active {
  background: var(--white);
  color: var(--canvas-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.coach-scope-tab:hover:not(.active) {
  color: var(--canvas-700);
}

.coach-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 18px;
}

/* ── Intel Hero — score ring + trend ── */
.intel-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--canvas-50);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  position: relative;
}
.intel-score-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.intel-ring-svg {
  width: 100%;
  height: 100%;
}
#intel-ring-fill {
  transition:
    stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.3s ease;
}
.intel-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--canvas-900);
  letter-spacing: -0.5px;
}
.intel-hero-body {
  flex: 1;
  min-width: 0;
}
.intel-hero-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.intel-hero-trend {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-800);
  margin-bottom: 6px;
  line-height: 1.4;
}
.intel-hero-trend .trend-up {
  color: var(--emerald-600);
}
.intel-hero-trend .trend-down {
  color: var(--red-500);
}
.intel-hero-trend .trend-flat {
  color: var(--text-muted);
}
.intel-hero-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}
.intel-spark-bar {
  width: 6px;
  border-radius: 2px;
  background: var(--canvas-200);
  transition:
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
  min-height: 3px;
}
.intel-spark-bar.current {
  background: var(--canvas-700);
}
.intel-hero > .analytics-panel-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ── Signal bars — STAR / Language Power / Naturalness ── */
.intel-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.intel-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
}
.intel-signal-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--canvas-100);
}
.intel-signal-icon svg {
  width: 16px;
  height: 16px;
  color: var(--canvas-600);
}
.intel-signal-body {
  flex: 1;
  min-width: 0;
}
.intel-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.intel-signal-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--canvas-900);
}
.intel-signal-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--canvas-700);
}
.intel-signal-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--canvas-100);
  overflow: hidden;
}
.intel-signal-fill {
  height: 100%;
  border-radius: 3px;
  transition:
    width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
}
.intel-signal-fill.fill-strong {
  background: var(--canvas-800);
}
.intel-signal-fill.fill-mid {
  background: var(--canvas-500);
}
.intel-signal-fill.fill-weak {
  background: var(--canvas-300);
}
.intel-signal-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Intel Alerts — pattern detection ── */
.intel-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.intel-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--canvas-100);
  background: var(--white);
}
.intel-alert-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12.5px;
}
.intel-alert-icon.alert-positive {
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-600);
}
.intel-alert-icon.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}
.intel-alert-icon.alert-critical {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red-500);
}
.intel-alert-body {
  flex: 1;
  min-width: 0;
}
.intel-alert-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 2px;
}
.intel-alert-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* In Your Words — transcript highlights */
.coach-transcript-section {
  border-top: 1px solid var(--canvas-100);
  padding-top: 4px;
}
.coach-transcript {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--canvas-700);
  padding: 12px 14px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
  max-height: 160px;
  overflow-y: auto;
}
.coach-transcript .ct-strong {
  font-weight: 700;
  color: var(--canvas-900);
}
.coach-transcript .ct-filler {
  color: var(--canvas-400);
  text-decoration: line-through;
  text-decoration-color: var(--canvas-300);
}
.coach-transcript .ct-metric {
  font-weight: 700;
  color: var(--canvas-900);
  text-decoration: underline;
  text-decoration-color: var(--canvas-300);
  text-underline-offset: 2px;
}
.coach-transcript-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.ct-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.ct-legend-swatch {
  font-size: 11px;
  font-weight: 600;
}
.ct-legend-swatch.ct-strong {
  font-weight: 700;
  color: var(--canvas-900);
}
.ct-legend-swatch.ct-filler {
  color: var(--canvas-400);
  text-decoration: line-through;
  text-decoration-color: var(--canvas-300);
}
.ct-legend-swatch.ct-metric {
  font-weight: 700;
  color: var(--canvas-900);
  text-decoration: underline;
  text-decoration-color: var(--canvas-300);
  text-underline-offset: 2px;
}

/* Next Time, Try This — before/after rewrites */
.coach-rewrites-section {
  border-top: 1px solid var(--canvas-100);
  padding-top: 4px;
}
.coach-rewrites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-rewrite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
}
.coach-rewrite-before {
  font-size: 13.5px;
  color: var(--canvas-400);
  text-decoration: line-through;
  text-decoration-color: var(--canvas-300);
  flex: 1;
}
.coach-rewrite-arrow {
  flex-shrink: 0;
  color: var(--canvas-400);
  display: flex;
  align-items: center;
}
.coach-rewrite-after {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900);
  flex: 1;
}

/* Tips section */
.coach-tips {
  border-top: 1px solid var(--canvas-100);
  padding-top: 4px;
}
.coach-tip {
  padding: 10px 0;
  border-bottom: 1px solid var(--canvas-50);
}
.coach-tip:last-child {
  border-bottom: none;
}
.coach-tip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 3px;
}
.coach-tip-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Dark theme — intelligence section */
[data-theme='dark'] .intel-hero {
  background: var(--canvas-100);
}
[data-theme='dark'] .intel-score-num {
  color: var(--dark-text);
}
[data-theme='dark'] .intel-signal {
  background: var(--canvas-100);
}
[data-theme='dark'] .intel-signal-name {
  color: var(--dark-text);
}
[data-theme='dark'] .intel-alert {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .intel-alert-title {
  color: var(--dark-text);
}
[data-theme='dark'] .coach-transcript {
  background: var(--canvas-100);
}
[data-theme='dark'] .coach-rewrite-row {
  background: var(--canvas-100);
}
[data-theme='dark'] .coach-tip-title {
  color: var(--dark-text);
}
[data-theme='dark'] .coach-rewrite-after {
  color: var(--dark-text);
}

@media (max-width: 600px) {
  .intel-hero {
    padding: 12px;
    gap: 12px;
  }
  .intel-score-ring {
    width: 60px;
    height: 60px;
  }
  .intel-score-num {
    font-size: 19px;
  }
  .intel-signal {
    padding: 8px 10px;
    gap: 8px;
  }
  .intel-signal-icon {
    width: 26px;
    height: 26px;
  }
  .intel-signal-icon svg {
    width: 14px;
    height: 14px;
  }
  .intel-signal-name {
    font-size: 12px;
  }
  .intel-signal-val {
    font-size: 12px;
  }
  .intel-alert {
    padding: 8px 10px;
  }
  .intel-alert-title {
    font-size: 12px;
  }
  .intel-alert-desc {
    font-size: 11px;
  }
  .coach-tip-title {
    font-size: 12.5px;
  }
  .coach-tip-text {
    font-size: 12px;
  }
}

/* --- Session History List --- */
.session-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.session-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--canvas-50);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.session-history-item:hover {
  background: var(--terra-50);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
/* Company icon avatar */
.session-history-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.session-history-icon svg {
  width: 20px;
  height: 20px;
}
.session-history-icon .sh-score-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  border: 1.5px solid var(--white);
}
.sh-score-badge.score-high {
  background: var(--emerald-500);
}
.sh-score-badge.score-mid {
  background: var(--amber-400);
}
.sh-score-badge.score-low {
  background: var(--red-400);
}
[data-theme='dark'] .sh-score-badge {
  border-color: var(--dark-card);
}
.session-history-info {
  flex: 1;
  min-width: 0;
}
.session-history-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-history-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  gap: 12px;
}
.session-history-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.session-history-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.session-history-tag.verbatim {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red-500);
}
.session-history-tag.good {
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.session-history-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.session-history-item:hover .session-history-arrow {
  opacity: 1;
  color: var(--terra);
}

/* --- Analytics Session Detail --- */
.analytics-session-detail {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-top: 14px;
}
.analytics-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.analytics-detail-header h3 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--canvas-900);
}

/* --- Per-Question Cards --- */
.analytics-q-card {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--canvas-50);
  margin-bottom: 12px;
}
.analytics-q-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.analytics-q-num {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--canvas-200);
  color: var(--canvas-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  flex-shrink: 0;
}
.analytics-q-question {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--canvas-900);
  line-height: 1.4;
  flex: 1;
}
.analytics-q-verdict {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.analytics-q-verdict.verdict-strong {
  background: var(--canvas-200);
  color: var(--canvas-900);
}
.analytics-q-verdict.verdict-mid {
  background: var(--canvas-100);
  color: var(--canvas-700);
}
.analytics-q-verdict.verdict-weak {
  background: var(--canvas-100);
  color: var(--canvas-500);
}

/* Section labels inside question cards */
.aq-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.aq-section-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
  font-style: italic;
}

/* Key points to remember */
.aq-keypoints {
  margin-bottom: 16px;
}
.aq-keypoints-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.aq-keypoint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--canvas-100);
}
.aq-keypoint:last-child {
  border-bottom: none;
}
.aq-kp-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--canvas-200);
  color: var(--canvas-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.aq-kp-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--canvas-900);
  font-weight: 500;
}

/* How to deliver it */
.aq-delivery {
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--canvas-100);
}
.aq-delivery-tip {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--canvas-50);
}
.aq-delivery-tip:last-child {
  border-bottom: none;
}

/* Collapsed reference — what you actually said */
.aq-reference {
  padding-top: 10px;
  border-top: 1px solid var(--canvas-100);
}
.aq-ref-toggle {
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.aq-ref-toggle:hover {
  color: var(--canvas-900);
}
.aq-ref-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--canvas-600);
  padding: 10px 0 0;
}

/* Dark theme */
[data-theme='dark'] .analytics-q-card {
  background: var(--canvas-100);
}
[data-theme='dark'] .aq-kp-text {
  color: var(--dark-text);
}
[data-theme='dark'] .analytics-q-verdict.verdict-strong {
  color: var(--dark-text);
}
[data-theme='dark'] .aq-ref-toggle:hover {
  color: var(--dark-text);
}

/* --- Atlas AI — Full Immersive Chat --- */
.atlas-chat {
  display: flex;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--white);
}

/* --- Chat History Drawer --- */
.atlas-history {
  width: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--canvas-100);
  display: flex;
  flex-direction: column;
  transition:
    width 0.35s var(--ease),
    min-width 0.35s var(--ease),
    opacity 0.25s var(--ease);
  flex-shrink: 0;
  position: relative;
  opacity: 0;
}
.atlas-history.open {
  width: 220px;
  min-width: 220px;
  opacity: 1;
}
/* Sidebar header — logo + new chat */
.atlas-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 8px;
  flex-shrink: 0;
}

/* Logo button */
.atlas-sidebar-logo-wrapper {
  position: relative;
}
.atlas-sidebar-logo-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-700);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.atlas-sidebar-logo-btn:hover {
  background: var(--canvas-200);
  color: var(--canvas-900);
}

/* Sidebar nav dropdown (from logo) */
.atlas-sidebar-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 48px rgba(19, 19, 20, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 6px;
  min-width: 180px;
  z-index: 300;
  animation: atlasDrop 0.15s var(--ease);
}
.atlas-sidebar-nav-dropdown.open {
  display: flex;
  flex-direction: column;
}

/* New chat pencil button */
.atlas-sidebar-newchat {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-500);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.atlas-sidebar-newchat:hover {
  background: var(--canvas-200);
  color: var(--canvas-800);
}

/* Search input */
.atlas-history-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 10px 8px;
  padding: 7px 12px;
  background: var(--canvas-200);
  border-radius: var(--radius-full);
  transition: background 0.15s var(--ease);
  flex-shrink: 0;
}
.atlas-history-search-wrap:focus-within {
  background: var(--white);
  box-shadow: 0 0 0 1.5px var(--canvas-300);
}
.atlas-history-search-icon {
  flex-shrink: 0;
  color: var(--canvas-400);
  opacity: 0.7;
}
.atlas-history-search {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--canvas-800);
  outline: none;
  width: 100%;
}
.atlas-history-search::placeholder {
  color: var(--canvas-400);
}

/* Bottom clear-all */
.atlas-history-bottom {
  flex-shrink: 0;
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Atlas sidebar appearance row */
.atlas-stt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}
.atlas-stt-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-500);
  white-space: nowrap;
}
.atlas-history-clear-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.atlas-history-clear-btn:hover {
  background: var(--canvas-200);
  color: var(--red-500);
}
.atlas-history-clear-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.atlas-history-clear-btn:hover svg {
  opacity: 1;
}
.atlas-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Subtle scrollbar */
.atlas-history-list::-webkit-scrollbar {
  width: 4px;
}
.atlas-history-list::-webkit-scrollbar-track {
  background: transparent;
}
.atlas-history-list::-webkit-scrollbar-thumb {
  background: var(--canvas-200);
  border-radius: 2px;
}
.atlas-history-list::-webkit-scrollbar-thumb:hover {
  background: var(--canvas-300);
}

.atlas-history-row {
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  transition:
    background 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.atlas-history-row:hover {
  background: var(--canvas-200);
}
.atlas-history-row.active {
  background: var(--white);
  box-shadow: 0 1px 4px rgba(19, 19, 20, 0.06);
}
.atlas-history-item {
  padding: 9px 12px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  color: var(--canvas-600);
  cursor: pointer;
  transition: color 0.15s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  background: transparent;
  text-align: left;
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  line-height: 1.4;
}
.atlas-history-row:hover .atlas-history-item {
  color: var(--canvas-900);
}
.atlas-history-row.active .atlas-history-item {
  color: var(--canvas-950);
  font-weight: 600;
}
.atlas-history-dots {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-400);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.18s var(--ease);
  margin-right: 6px;
}
.atlas-history-row:hover .atlas-history-dots {
  opacity: 1;
}
.atlas-history-dots:hover {
  background: var(--canvas-200);
  color: var(--canvas-700);
}
/* Mobile: dots always visible (no hover on touch) */
body.is-capacitor .atlas-history-dots {
  opacity: 1;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
}
body.is-capacitor .atlas-history-dots:active {
  background: rgba(217, 119, 87, 0.1);
  color: var(--terra);
}
/* Dark mode dots color fix (canvas-400 is a dark surface in dark mode) */
[data-theme='dark'] .atlas-history-dots {
  color: var(--text-muted);
}
[data-theme='dark'] .atlas-history-dots:hover {
  background: var(--bg-lifted);
  color: var(--text-secondary);
}
/* Dark mode model dropdown — elevated surface for proper layer separation */
[data-theme='dark'] .atlas-model-dropdown {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .atlas-model-option:hover {
  background: var(--bg-lifted);
}
[data-theme='dark'] .atlas-model-option.active {
  background: rgba(217, 119, 87, 0.12);
}
[data-theme='dark'] .atlas-model-option-name {
  color: var(--text-primary);
}
[data-theme='dark'] .atlas-model-option-desc {
  color: var(--text-muted);
}
[data-theme='dark'] .atlas-model-dropdown-head {
  color: var(--text-muted);
}

/* ── New chat transition animations ── */
@keyframes atlas-msgs-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}
@keyframes atlas-empty-enter {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#atlas-messages-area.atlas-clearing {
  animation: atlas-msgs-exit 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
#atlas-empty.atlas-new-enter {
  animation: atlas-empty-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Chat context menu dropdown — appended to body with position:fixed */
.atlas-chat-menu {
  position: fixed;
  z-index: 9999;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 40px rgba(19, 19, 20, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 5px;
  min-width: 170px;
  animation: atlasDrop 0.15s var(--ease);
  backdrop-filter: blur(12px);
}
.atlas-chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  text-align: left;
  width: 100%;
  white-space: nowrap;
}
.atlas-chat-menu-item:hover {
  background: var(--canvas-50);
  color: var(--canvas-900);
}
.atlas-chat-menu-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.atlas-chat-menu-item:hover svg {
  opacity: 1;
}
.atlas-chat-menu-item.danger {
  color: var(--red-500);
}
.atlas-chat-menu-item.danger:hover {
  background: var(--red-50);
  color: var(--red-500);
}

/* Clear all — inline confirmation card */
.atlas-clear-card {
  margin: 0 8px 12px;
  padding: 18px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 16px rgba(239, 68, 68, 0.08),
    0 0 0 1px rgba(239, 68, 68, 0.06);
  animation: atlasDrop 0.2s var(--ease);
  flex-shrink: 0;
}
.atlas-clear-warn {
  font-size: 14px;
  font-weight: 600;
  color: var(--red-500);
  line-height: 1.5;
  margin-bottom: 12px;
}
.atlas-clear-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-500);
  margin-bottom: 6px;
}
.atlas-clear-input {
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
  margin-bottom: 12px;
}
.atlas-clear-input:focus {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--red-400);
}
.atlas-clear-input::placeholder {
  color: var(--canvas-400);
  font-style: italic;
}
.atlas-clear-btns {
  display: flex;
  gap: 8px;
}
.atlas-clear-cancel {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--canvas-100);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.atlas-clear-cancel:hover {
  background: var(--canvas-200);
  color: var(--canvas-800);
}
.atlas-clear-delete {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--red-500);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.atlas-clear-delete:disabled {
  background: var(--canvas-200);
  color: var(--canvas-400);
  cursor: not-allowed;
}
.atlas-clear-delete:not(:disabled):hover {
  background: var(--red-400);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.atlas-history-date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--canvas-400);
  padding: 16px 12px 6px;
}
.atlas-history-date:first-child {
  padding-top: 4px;
}

/* --- Main Chat Area --- */
.atlas-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}
/* Curve the left edge when history sidebar is open */
.atlas-history.open ~ .atlas-main {
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
}

/* Top bar — always visible, integrated with chat area */
.atlas-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  flex-shrink: 0;
  position: relative;
  min-height: 44px;
  background: var(--white);
}
.atlas-topbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.atlas-topbar-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--canvas-800);
  padding: 0 8px;
}

/* Model selector */
.atlas-model-wrapper {
  position: relative;
}
.atlas-model-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--canvas-800);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.atlas-model-btn:hover {
  background: var(--canvas-50);
}
.atlas-model-arrow {
  opacity: 0.4;
  transition:
    transform 0.2s var(--ease),
    opacity 0.15s var(--ease);
}
.atlas-model-btn:hover .atlas-model-arrow {
  opacity: 0.7;
}
.atlas-model-dropdown.open ~ .atlas-model-btn .atlas-model-arrow,
.atlas-model-wrapper:has(.atlas-model-dropdown.open) .atlas-model-arrow {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* Model dropdown */
.atlas-model-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--white);
  border: 1px solid var(--canvas-200, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 48px rgba(19, 19, 20, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 4px;
  width: clamp(220px, 22vw, 280px);
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  animation: atlasDrop 0.15s var(--ease);
}
.atlas-model-dropdown::-webkit-scrollbar {
  display: none;
}
.atlas-model-dropdown.open {
  display: block;
}
.atlas-model-dropdown-head {
  font-size: clamp(10px, 0.7vw, 11px);
  font-weight: 600;
  color: var(--canvas-600, var(--canvas-400));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px 6px;
}
.atlas-model-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
  text-align: left;
}
.atlas-model-option:hover {
  border-color: var(--terra);
  background: var(--canvas-50, rgba(0, 0, 0, 0.02));
}
.atlas-model-option.active {
  border-color: var(--terra);
  background: rgba(217, 119, 87, 0.06);
}
.atlas-model-option.active:hover {
  background: rgba(217, 119, 87, 0.1);
}
.atlas-model-option-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.atlas-model-option-name {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--canvas-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-model-option.active .atlas-model-option-name {
  color: var(--terra-700);
}
.atlas-model-option-desc {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--canvas-600, var(--canvas-400));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-model-option-logo {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.atlas-model-option-logo.icon-openai {
  color: #10a37f;
}
.atlas-model-option-logo.icon-anthropic {
  color: #d97757;
}
.atlas-model-option-logo.icon-meta {
  color: #0081fb;
}
.atlas-model-option-logo.icon-mistral {
  color: #f54e42;
}
.atlas-model-option-logo.icon-deepseek {
  color: #4d6bfe;
}
.atlas-model-option-logo.icon-qwen {
  color: #6f42c1;
}
.atlas-model-option-logo.icon-google {
  color: #4285f4;
}
.atlas-model-option.active .atlas-model-option-logo {
  color: var(--terra);
}
.atlas-model-option.model-locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.atlas-model-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.atlas-model-icon svg {
  width: 12px;
  height: 12px;
}

/* Nav grid button + dropdown */
.atlas-nav-wrapper {
  position: relative;
}
.atlas-nav-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.atlas-nav-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-700);
}
.atlas-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 48px rgba(19, 19, 20, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 6px;
  min-width: 180px;
  z-index: 100;
  animation: atlasDrop 0.2s var(--ease);
}
.atlas-nav-dropdown.open {
  display: flex;
  flex-direction: column;
}
@keyframes atlasDrop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.atlas-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.12s var(--ease);
  text-align: left;
  width: 100%;
}
.atlas-nav-item:hover {
  background: var(--canvas-50);
  color: var(--canvas-900);
}
.atlas-nav-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.atlas-nav-item:hover svg {
  opacity: 1;
}

/* History toggle (sidebar panel icon) */
.atlas-history-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.atlas-history-toggle svg {
  transition: transform 0.3s var(--ease);
}
.atlas-history-toggle:hover {
  background: var(--canvas-100);
  color: var(--canvas-700);
}
.atlas-history-toggle.active {
  background: var(--terra-50);
  color: var(--terra);
  box-shadow: 0 0 0 1px rgba(217, 119, 87, 0.1);
}
/* Flip icon when sidebar is open — line moves from left to right */
.atlas-history-toggle.active svg {
  transform: scaleX(-1);
}

/* Nav wrapper: positions the dropdown relative to the atom button */
.atlas-topbar-nav-wrapper {
  position: relative;
}

/* Topbar menu button — WispherFlow logo, visible when sidebar is closed */
.atlas-topbar-menu-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--canvas-500);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  flex-shrink: 0;
}
.atlas-topbar-menu-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-800);
}

/* Hide topbar menu button when sidebar is open (it "moves" to sidebar logo) */
.atlas-history.open ~ .atlas-main .atlas-topbar-menu-btn {
  display: none;
}

/* Hide topbar "New" button when history drawer is open (avoids duplication) */
.atlas-history.open ~ .atlas-main .atlas-new-chat-btn {
  display: none;
}

.atlas-topbar-right {
  display: flex;
  align-items: center;
  gap: 1px;
}
.atlas-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-500);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  white-space: nowrap;
}
.atlas-action-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-700);
}
.atlas-action-btn svg {
  flex-shrink: 0;
}

/* Empty state — push welcome toward lower-center like ChatGPT */
.atlas-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 0;
  min-height: 0;
  overflow-y: auto;
}
.atlas-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  width: 100%;
  padding-bottom: 0;
}
.atlas-welcome-icon {
  margin-bottom: clamp(8px, 1.2vh, 16px);
  animation: atlasWelcomeIn 0.6s ease-out;
}
.atlas-welcome-icon svg {
  width: clamp(36px, 4vh, 48px);
  height: clamp(36px, 4vh, 48px);
}
@keyframes atlasWelcomeIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Welcome atom: one-time draw at 1.75x speed, stays visible */
.atlas-welcome-atom .atlas-r1 {
  animation: atlasWelcomeR1 1.2s ease-out forwards;
}
.atlas-welcome-atom .atlas-r2 {
  animation: atlasWelcomeR2 1.2s ease-out 0.35s forwards;
}
.atlas-welcome-atom .atlas-r3 {
  animation: atlasWelcomeR3 1.2s ease-out 0.7s forwards;
}
@keyframes atlasWelcomeR1 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}
@keyframes atlasWelcomeR2 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}
@keyframes atlasWelcomeR3 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}
.atlas-welcome h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  color: var(--canvas-950);
  letter-spacing: -0.03em;
  margin-bottom: clamp(4px, 0.5vh, 8px);
}
.atlas-welcome-sub {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.5;
}
/* Suggestion chips — live below input bar, hidden when chat is active */
.atlas-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 768px;
  margin-top: 10px;
}
.atlas-chat[data-state="active"] .atlas-suggestions {
  display: none;
}
.atlas-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--canvas-100);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: left;
  white-space: nowrap;
}
.atlas-chip svg {
  flex-shrink: 0;
  opacity: 0.5;
}
.atlas-chip:hover {
  background: var(--canvas-50);
  border-color: var(--canvas-200);
  color: var(--canvas-800);
}
.atlas-chip:hover svg {
  opacity: 1;
}

/* Active messages area */
.atlas-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.atlas-messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

/* Message bubbles */
.atlas-msg {
  font-size: 13.5px;
  line-height: 1.7;
  animation: atlasMsgIn 0.4s var(--ease);
  white-space: pre-line;
  word-wrap: break-word;
}
@keyframes atlasMsgIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.atlas-msg.user {
  align-self: flex-end;
  max-width: 80%;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
}
.atlas-user-text {
  padding: 10px 16px;
  background: var(--canvas-100);
  color: var(--canvas-900);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
  box-sizing: border-box;
}
.atlas-user-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s var(--ease);
}
.atlas-msg.user:hover .atlas-user-actions {
  opacity: 1;
}
.atlas-user-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--canvas-500);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.atlas-user-action-btn:hover {
  color: var(--canvas-800);
}
.atlas-user-action-btn svg {
  flex-shrink: 0;
}
.atlas-user-action-btn span {
  display: none;
}
.atlas-msg.ai {
  color: var(--text-primary);
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 0;
  position: relative;
}
.atlas-msg.ai .ai-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--terra);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.atlas-msg.ai .ai-label::before {
  display: none;
}
.atlas-msg.ai .ai-label svg {
  flex-shrink: 0;
}
.atlas-msg .ai-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--canvas-800);
}

/* Inline action toolbar under each AI response */
.ai-msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  padding-top: 4px;
}
.ai-msg-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.ai-msg-action-btn:hover {
  color: var(--canvas-700);
}
.ai-msg-action-btn svg {
  flex-shrink: 0;
}
.ai-msg-action-btn.atlas-action-active {
  color: var(--terra);
}

/* Atlas signature atom at bottom of AI responses */
.atlas-signature {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 8px;
  color: var(--terra);
  opacity: 0.35;
}
.atlas-signature .atlas-sig-atom .atlas-ring {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0.5;
  animation: none;
}

/* Generating indicator */
.atlas-gen-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--terra);
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.7;
}
.atlas-gen-indicator .atlas-atom {
  color: var(--terra);
}
.atlas-gen-indicator span {
  animation: atlas-gen-pulse 1.5s ease-in-out infinite;
}
@keyframes atlas-gen-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* --- Rate-limit cooldown warning bar --- */
#atlas-ratelimit-bar {
  width: 100%;
  max-width: 768px;
  margin: 0 auto 8px;
  padding: 8px 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  font-size: 12px;
  color: #c2410c;
  line-height: 1.5;
  animation: atlasBarFadeIn 0.2s ease;
  box-sizing: border-box;
}
#atlas-ratelimit-bar .atlas-ratelimit-icon {
  font-style: normal;
  margin-right: 2px;
}
@keyframes atlasBarFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Input Bar --- */
.atlas-input-bar {
  padding: clamp(6px, 0.8vh, 10px) 24px clamp(12px, 1.5vh, 20px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.atlas-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 768px;
  padding: 6px 6px 6px 6px;
  background: var(--canvas-50);
  border-radius: var(--radius-full);
  box-shadow:
    0 0 0 1px var(--canvas-300),
    var(--shadow-sm);
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.atlas-compose:focus-within {
  background: var(--white);
  box-shadow:
    0 0 0 1.5px var(--terra),
    0 0 0 5px rgba(217, 119, 87, 0.12),
    0 0 24px rgba(217, 119, 87, 0.1),
    var(--shadow-md);
}
.atlas-attach-btn,
.atlas-voice-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--canvas-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s var(--ease);
}
.atlas-attach-btn:hover,
.atlas-voice-btn:hover {
  background: var(--canvas-200);
  color: var(--canvas-700);
}
.atlas-voice-btn.active {
  background: var(--terra-100);
  color: var(--terra);
}
.atlas-compose-input {
  flex: 1;
  border: none !important;
  background: none !important;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text-primary);
  padding: 10px 4px;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0;
}
.atlas-compose-input:focus {
  border: none !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#atlas-file-input {
  display: none !important;
}
.atlas-compose-input::placeholder {
  color: var(--canvas-400);
}
.atlas-back-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--canvas-150);
  border-radius: 50%;
  background: var(--canvas-50);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  margin-bottom: 8px;
}
.atlas-back-btn:hover {
  background: var(--canvas-100);
  transform: scale(1.06);
}
[data-theme='dark'] .atlas-back-btn {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .atlas-back-btn:hover {
  background: var(--canvas-200);
}
.atlas-send-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--terra);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  transition: all 0.15s var(--ease);
  padding: 0;
}
.atlas-send-btn svg {
  overflow: visible;
}
.atlas-send-btn:hover {
  background: var(--terra-dark, #c2643a);
  transform: scale(1.06);
}
.atlas-input-hint {
  font-size: 12.5px;
  color: var(--canvas-400);
  margin-top: 8px;
}

/* --- Voice Mode Overlay --- */
.atlas-voice-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 19, 20, 0.92);
  backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 0.35s var(--ease);
}
.atlas-voice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
}
.atlas-voice-close {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.atlas-voice-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.atlas-voice-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.voice-bars {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 60px;
}
.voice-bar {
  width: 4px;
  height: var(--bar-h);
  background: var(--terra);
  border-radius: 2px;
  transition: height 0.15s var(--ease);
}
.voice-bars.listening .voice-bar {
  animation: voiceBarPulse 1s ease-in-out infinite;
}
.voice-bars.listening .voice-bar:nth-child(1) {
  animation-delay: 0s;
}
.voice-bars.listening .voice-bar:nth-child(2) {
  animation-delay: 0.15s;
}
.voice-bars.listening .voice-bar:nth-child(3) {
  animation-delay: 0.3s;
}
.voice-bars.listening .voice-bar:nth-child(4) {
  animation-delay: 0.15s;
}
.voice-bars.listening .voice-bar:nth-child(5) {
  animation-delay: 0s;
}
@keyframes voiceBarPulse {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1.8);
    opacity: 1;
  }
}
.voice-status {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--canvas-400);
  letter-spacing: -0.01em;
}
.voice-status.active {
  color: var(--terra-300);
}
.atlas-voice-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.voice-mic-btn {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--terra);
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.3);
}
.voice-mic-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 30px rgba(217, 119, 87, 0.3);
}
.voice-mic-btn.listening {
  animation: micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.3);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(217, 119, 87, 0);
  }
}
.voice-end-btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.15);
  color: var(--red-400);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.voice-end-btn:hover {
  background: var(--red-500);
  color: var(--white);
}

/* Settings */
.settings-body {
  max-width: 640px;
}
.settings-section {
  margin-bottom: 24px;
}

/* Profile card — flat row inside the section card. Avatar + name/email
 * stack on the left, edit pencil moved to the section-head row above
 * (see .settings-section-action). No nested card chrome. */
.settings-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
}
.settings-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--terra);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.settings-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-profile-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text, #1a1a1a);
  line-height: 1.3;
}
.settings-profile-email {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.3;
  /* Long emails wrap inside the card instead of overflowing. */
  word-break: break-word;
}
/* Old in-row edit button is no longer rendered (markup moved to
 * .settings-section-action) — keep this rule defanged just in case
 * any cached HTML still contains it. */
.settings-profile-edit-btn {
  display: none !important;
}
[data-theme='dark'] .settings-profile-edit-btn:hover {
  color: var(--terra);
  background: transparent;
  border: none;
}

/* Profile Edit Modal */
.profile-edit-modal {
  width: 380px;
  padding: 0;
  overflow: hidden;
}
.profile-edit-modal .pm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--canvas-500);
  transition: all 0.2s ease;
}
.profile-edit-modal .pm-close:hover {
  background: transparent;
  color: var(--canvas-900);
  transform: rotate(90deg);
}
.profile-edit-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--canvas-100);
}
.profile-edit-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--canvas-900);
  font-family: var(--font-display);
}
.profile-edit-avatar-wrap {
  position: relative;
}
.profile-edit-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
}
.profile-edit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* LinkedIn-style "Change photo" button BELOW the avatar (not a floating
   pencil overlay). Clearer affordance and matches the pattern users know. */
.profile-edit-photo-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}
.profile-edit-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--canvas-300);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--canvas-900);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.profile-edit-photo-btn svg {
  width: 14px;
  height: 14px;
  color: var(--terra);
  flex-shrink: 0;
}
.profile-edit-photo-btn:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--white);
}
.profile-edit-photo-btn:hover svg {
  color: var(--white);
}
.profile-edit-photo-remove {
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(31, 30, 26, 0.25);
}
.profile-edit-photo-remove:hover {
  color: #ef4444;
  text-decoration-color: #ef4444;
}
[data-theme='dark'] .profile-edit-photo-btn {
  border-color: var(--canvas-300);
  color: var(--canvas-950);
}
[data-theme='dark'] .profile-edit-photo-btn:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--white);
}
[data-theme='dark'] .profile-edit-photo-remove {
  color: var(--canvas-600);
}
[data-theme='dark'] .profile-edit-photo-remove:hover {
  color: #f87171;
}
.profile-edit-body {
  padding: 12px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: calc(90vh - 200px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.profile-edit-body::-webkit-scrollbar {
  display: none;
}
.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-edit-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--canvas-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.profile-edit-field .input {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  background: var(--canvas-50);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.profile-edit-field .input:hover {
  border-color: var(--canvas-300);
}
.profile-edit-field .input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
  outline: none;
}
.profile-edit-divider {
  height: 1px;
  background: var(--canvas-100);
  margin: 2px 0;
}
.profile-edit-pw-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-600);
  padding: 2px 0;
  transition: color 0.15s ease;
}
.profile-edit-pw-toggle:hover {
  color: var(--terra);
}
.profile-edit-pw-chevron {
  transition: transform 0.2s ease;
  margin-left: auto;
}
.profile-edit-pw-chevron.open {
  transform: rotate(180deg);
}
.profile-edit-pw-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.profile-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--canvas-100);
}
[data-theme='dark'] .profile-edit-header {
  border-color: var(--canvas-200);
}
[data-theme='dark'] .profile-edit-divider {
  background: var(--canvas-200);
}
[data-theme='dark'] .profile-edit-footer {
  border-color: var(--canvas-200);
}
[data-theme='dark'] .profile-edit-modal .pm-close {
  background: transparent;
  color: var(--canvas-500);
}
[data-theme='dark'] .profile-edit-modal .pm-close:hover {
  background: transparent;
  color: var(--canvas-200);
}
/* Dark-mode input contrast fix.
   The base rule sets background but inherits text color from elsewhere,
   which lands as dark-on-dark in dark mode → users type invisible text.
   Force the body text token (--canvas-950 = #f2f0eb in dark theme). */
[data-theme='dark'] .profile-edit-field .input {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-950);
  -webkit-text-fill-color: var(--canvas-950); /* Safari/iOS autofill safety */
  caret-color: var(--canvas-950);
}
[data-theme='dark'] .profile-edit-field .input::placeholder {
  color: var(--canvas-500);
  opacity: 1;
}
[data-theme='dark'] .profile-edit-field .input:hover {
  border-color: var(--canvas-400);
}
[data-theme='dark'] .profile-edit-field .input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}
[data-theme='dark'] .profile-edit-field label {
  color: var(--canvas-700);
}
[data-theme='dark'] .profile-edit-header h3 {
  color: var(--canvas-950);
}
[data-theme='dark'] .profile-edit-pw-toggle {
  color: var(--canvas-700);
}
[data-theme='dark'] .profile-edit-pw-toggle:hover {
  color: var(--terra);
}

/* Settings rows */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  gap: 12px;
}
.settings-row-label {
  font-size: 13px;
  color: var(--canvas-700);
  white-space: nowrap;
}
.settings-row-label-danger {
  color: #ef4444;
}
.settings-danger-btn {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}
.settings-danger-btn:hover {
  background: rgba(239, 68, 68, 0.06) !important;
}
[data-theme='dark'] .settings-row-label {
  color: var(--text-muted);
}
.settings-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 220px;
}
.settings-slider-label {
  font-size: 10.5px;
  color: var(--canvas-500);
  white-space: nowrap;
}
.settings-slider-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--canvas-700);
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.settings-slider-wrap input[type='range'] {
  flex: 1;
  accent-color: var(--terra);
  height: 4px;
}

/* Keyboard shortcuts */
.settings-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
  color: var(--canvas-700);
  border-bottom: 1px solid var(--canvas-100);
}
.settings-shortcut:last-child {
  border-bottom: none;
}
.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
}
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  font-size: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-150, var(--canvas-200));
  border-radius: 5px;
  color: var(--canvas-600);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  line-height: 1;
  min-width: 20px;
  min-height: 20px;
}
[data-theme='dark'] kbd {
  background: var(--bg-elevated);
  border-color: var(--canvas-300);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--canvas-300);
}
[data-theme='dark'] .settings-shortcut {
  color: var(--text-muted);
  border-bottom-color: var(--canvas-300);
}

/* About section */
.settings-about {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
  color: var(--canvas-700);
  border-bottom: 1px solid var(--canvas-100);
}
.settings-about-row:last-child {
  border-bottom: none;
}
.settings-about-val {
  font-weight: 600;
  color: var(--canvas-500);
  font-size: 12.5px;
}
.settings-about-link {
  color: var(--terra);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}
.settings-about-link:hover {
  text-decoration: underline;
}
[data-theme='dark'] .settings-about-row {
  color: var(--text-muted);
  border-bottom-color: var(--canvas-300);
}

/* ── Dark mode: Atlas chat + session cards ── */
[data-theme='dark'] .atlas-user-text {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
[data-theme='dark'] .atlas-msg.user:hover .atlas-user-actions {
  opacity: 1;
}
[data-theme='dark'] .atlas-msg .ai-content {
  color: var(--text-secondary);
}
[data-theme='dark'] .session-history-item {
  background: var(--bg-elevated);
}
[data-theme='dark'] .session-history-item:hover {
  background: var(--bg-lifted);
}
[data-theme='dark'] .session-history-title {
  color: var(--text-primary);
}

/* Password change form */
.settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--canvas-100);
}
.settings-password-form .input-sm {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  background: var(--canvas-50);
  color: var(--canvas-900);
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
}
.settings-password-form .input-sm:focus {
  border-color: var(--terra);
}
.settings-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
[data-theme='dark'] .settings-password-form .input-sm {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-900);
}

/* ── Payment methods — proper enterprise treatment.
 *    Brand-coloured 40x26 rounded badge with the brand wordmark in a
 *    bold sans-serif (Visa = #1A1F71 navy, Mastercard = paired red+
 *    yellow circles, Amex = blue, etc). Card number in tabular monospace.
 *    Default badge to the right of the number. Remove icon always
 *    visible (was opacity:0 and only on hover — terrible discoverability
 *    on touch devices). Row divider matches the rest of the section. */
.settings-pm-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: 13px;
  color: var(--st-helper-color);
}
.settings-pm-empty svg {
  color: var(--st-helper-color);
  opacity: 0.6;
}
.settings-pm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--st-row-divider);
}
.settings-pm-card:first-of-type { border-top: none; padding-top: 4px; }
.settings-pm-brand {
  width: 42px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  flex-shrink: 0;
  background: #4a4a4a;
  text-transform: uppercase;
  font-style: italic;
}
.settings-pm-brand[data-brand='visa']       { background: #1a1f71; }
.settings-pm-brand[data-brand='mastercard'] { background: #16161d; }
.settings-pm-brand[data-brand='amex']       { background: #006fcf; }
.settings-pm-brand[data-brand='discover']   { background: #ff6000; color: #1a1a1a; }
.settings-pm-brand[data-brand='diners']     { background: #0079be; }
.settings-pm-brand[data-brand='jcb']        { background: #0e4c96; }
.settings-pm-brand[data-brand='unionpay']   { background: #d10429; }
.settings-pm-brand svg {
  width: 100%;
  height: 100%;
  display: block;
}
.settings-pm-info {
  flex: 1;
  min-width: 0;
}
.settings-pm-num {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-pm-exp {
  font-size: 12px;
  color: var(--st-helper-color);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.settings-pm-default {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra, #d97757);
  background: rgba(217, 119, 87, 0.1);
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.settings-pm-remove {
  border: 1px solid transparent;
  background: transparent;
  color: var(--st-helper-color);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.settings-pm-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Plan usage summary */
.plan-usage-row {
  margin-bottom: 24px;
}
.plan-usage-card {
  padding: 16px 20px;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--canvas-200);
}
.plan-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.plan-usage-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--canvas-900);
}
.plan-usage-period {
  font-size: 12.5px;
  color: var(--canvas-400);
}
.plan-usage-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}
.plan-usage-stat {
  flex: 1;
  text-align: center;
}
.plan-usage-num {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--canvas-900);
}
.plan-usage-label {
  display: block;
  font-size: 12px;
  color: var(--canvas-400);
  margin-top: 2px;
}
.plan-usage-divider {
  width: 1px;
  height: 32px;
  background: var(--canvas-200);
  flex-shrink: 0;
}
.plan-usage-bar-wrap {
  height: 6px;
  background: var(--canvas-100);
  border-radius: 3px;
  overflow: hidden;
}
.plan-usage-bar {
  height: 100%;
  background: var(--terra);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-usage-footer {
  font-size: 12.5px;
  color: var(--canvas-400);
  margin-top: 10px;
}
/* Billing badge */
.plan-usage-billing-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: #e8f5e9;
  color: #1b5e20;
  margin-bottom: 12px;
}
.plan-usage-badge-block {
  background: #fef3e2;
  color: #92400e;
}
.plan-usage-badge-paused {
  background: var(--canvas-100);
  color: var(--canvas-400);
}
[data-theme='dark'] .plan-usage-billing-badge {
  background: var(--canvas-200);
}
[data-theme='dark'] .plan-usage-badge-block {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
[data-theme='dark'] .plan-usage-badge-paused {
  background: var(--canvas-200);
  color: var(--canvas-400);
}
/* Num color variants */
.plan-usage-num-highlight {
  color: var(--terra) !important;
}
.plan-usage-num-green {
  color: #2e7d32 !important;
}
.plan-usage-num-muted {
  color: var(--canvas-400) !important;
}
[data-theme='dark'] .plan-usage-num-green {
  color: #66bb6a !important;
}
/* ── 3D Folded Paper Card (sub + credits dual balance) ── */
.plan-fold-wrap {
  position: relative;
  margin-top: 0;
}
/* The fold corner — bottom-right triangle */
.plan-fold-corner {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 54px;
  height: 54px;
  cursor: pointer;
  z-index: 3;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}
.plan-fold-corner:hover {
  transform: scale(1.08);
}
.plan-fold-corner:active {
  transform: scale(0.96);
}
/* Triangle — the dog-ear curl */
.plan-fold-triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 54px 54px;
  border-color: transparent transparent var(--canvas-200) transparent;
  border-radius: 0 0 var(--radius-xl) 0;
  filter: drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.08));
  transition: border-color 0.2s;
}
.plan-fold-corner:hover .plan-fold-triangle {
  border-color: transparent transparent var(--terra-100, #f5e6d8) transparent;
}
[data-theme='dark'] .plan-fold-triangle {
  border-color: transparent transparent var(--canvas-300) transparent;
}
[data-theme='dark'] .plan-fold-corner:hover .plan-fold-triangle {
  border-color: transparent transparent var(--canvas-400) transparent;
}
/* Hint text peeking from under fold */
.plan-fold-hint {
  position: absolute;
  bottom: 8px;
  right: 4px;
  font-size: 8px;
  font-weight: 700;
  color: var(--canvas-400);
  transform: rotate(-45deg);
  transform-origin: center;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.2px;
  opacity: 0.7;
}
.plan-fold-corner:hover .plan-fold-hint {
  opacity: 1;
  color: var(--terra);
}
/* Credits reveal layer — slides open with 3D perspective */
.plan-fold-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform-origin: bottom right;
  transform: perspective(800px) rotateX(-8deg);
  transition:
    max-height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plan-fold-wrap.fold-open .plan-fold-reveal {
  max-height: 220px;
  opacity: 1;
  transform: perspective(800px) rotateX(0deg);
}
.plan-fold-reveal-inner {
  padding: 16px 0 4px;
  border-top: 1px dashed var(--canvas-200);
  margin-top: 14px;
}
[data-theme='dark'] .plan-fold-reveal-inner {
  border-top-color: var(--canvas-300);
}
/* Note under credits */
.plan-fold-note {
  font-size: 11px;
  color: var(--canvas-400);
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 8px;
  line-height: 1.45;
  background: var(--canvas-50);
  border: 1px dashed var(--canvas-200);
}
[data-theme='dark'] .plan-fold-note {
  background: var(--canvas-200);
  border-color: var(--canvas-300);
}
/* Hide fold corner when open */
.plan-fold-wrap.fold-open .plan-fold-corner {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}
[data-theme='dark'] .plan-usage-card {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .plan-usage-bar-wrap {
  background: var(--canvas-200);
}

/* ════════════════════════════════════════════════════════════════════════
 * SETTINGS PAGE DESIGN TOKENS — single source of truth for the consumer
 * Settings tab on web + mobile. Use these everywhere instead of ad-hoc
 * paddings/borders so the page reads as a coherent enterprise SaaS
 * settings surface (Linear / Stripe / Notion calibre).
 * ──────────────────────────────────────────────────────────────────── */
.settings-body {
  --st-card-pad-x: 24px;
  --st-card-pad-y: 22px;
  --st-card-radius: 14px;
  --st-card-bg: var(--bg-card, #fff);
  --st-card-border: rgba(0, 0, 0, 0.07);
  --st-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --st-row-pad-y: 14px;
  --st-row-divider: rgba(0, 0, 0, 0.06);
  --st-section-gap: 14px;
  --st-title-size: 15px;
  --st-title-weight: 600;
  --st-desc-size: 13px;
  --st-desc-color: var(--text-muted, #6e6e80);
  --st-label-size: 13.5px;
  --st-label-weight: 500;
  --st-helper-size: 12px;
  --st-helper-color: var(--text3, #8a8a96);
}
[data-theme='dark'] .settings-body {
  --st-card-bg: rgba(255, 255, 255, 0.025);
  --st-card-border: rgba(255, 255, 255, 0.08);
  --st-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --st-row-divider: rgba(255, 255, 255, 0.06);
  --st-helper-color: rgba(255, 255, 255, 0.55);
  --st-desc-color: rgba(255, 255, 255, 0.62);
}

/* Dark-mode text-color overrides for settings cards. The base rules use
   var(--text, #fallback) where --text is undefined in dark mode → falls
   back to dark grey on dark background → invisible. Force explicit
   canvas-950 (which auto-inverts to #f2f0eb cream-white in dark theme).
   Applies to consumer + enterprise member + enterprise admin (single SPA). */
[data-theme='dark'] .settings-section h3,
[data-theme='dark'] .settings-profile-name,
[data-theme='dark'] .settings-field-label,
[data-theme='dark'] .settings-card-foot-helper,
[data-theme='dark'] .settings-section-head h3 {
  color: var(--canvas-950);
}
[data-theme='dark'] .settings-profile-email,
[data-theme='dark'] .settings-section .settings-section-desc {
  color: var(--canvas-700);
}

/* ── Section card — flat, rounded, consistent gutter ──────────────────
 * !important here is intentional. There are 3 legacy media queries in
 * this file that previously declared `.settings-section { padding: 0 }`
 * and lost specificity wars across cache busts. Pinning the padding
 * with !important guarantees content NEVER touches the card edges
 * regardless of viewport, future overrides, or stale browser CSS. */
.settings-section {
  background: var(--st-card-bg);
  border: 1px solid var(--st-card-border);
  border-radius: var(--st-card-radius);
  box-shadow: var(--st-card-shadow);
  margin: 0 0 var(--st-section-gap) !important;
  padding: var(--st-card-pad-y) var(--st-card-pad-x) !important;
  overflow: hidden;
}

/* Sentence-case 15px section heading. NO uppercase, NO letterspaced
 * label treatment. This is the card title — give it presence. */
.settings-section h3 {
  font-family: var(--font-display, var(--font));
  font-size: var(--st-title-size);
  font-weight: var(--st-title-weight);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  padding: 0;
  color: var(--text, #2a2a2a);
  text-transform: none;
}
.settings-section h3::after { display: none; }

/* Section description — sits directly under the heading, slightly muted. */
.settings-section .settings-section-desc {
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--st-desc-size);
  line-height: 1.5;
  color: var(--st-desc-color);
}

/* Section head row — title on left, action button (e.g. pencil edit, "+ Add")
 * on the right. Used by the Profile and Payment Methods cards. */
.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.settings-section-head h3 { margin: 0; }
.settings-section-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--st-card-border);
  background: transparent;
  border-radius: 8px;
  color: var(--text2, #4a4a4a);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  justify-content: center;
}
.settings-section-action:hover {
  background: var(--canvas-50, rgba(0, 0, 0, 0.04));
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--text, #1a1a1a);
}
/* Plain variant: drops the border + idle background so the icon reads as a
 * direct action, not a chrome-y mini-card. Used on the Profile section
 * pencil where the surrounding card already provides chrome. */
.settings-section-action.settings-section-action-plain {
  border: none;
  background: transparent;
}
.settings-section-action.settings-section-action-plain:hover {
  border: none;
  background: var(--canvas-50, rgba(0, 0, 0, 0.06));
}
.settings-section-action.settings-section-action-text {
  width: auto;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--terra, #d97757);
  border-color: rgba(217, 119, 87, 0.3);
}
.settings-section-action.settings-section-action-text:hover {
  background: rgba(217, 119, 87, 0.08);
  border-color: var(--terra, #d97757);
  color: var(--terra, #d97757);
}
[data-theme='dark'] .settings-section-action {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme='dark'] .settings-section-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* ── Field row — label above, control below. Used for pill groups and
 *    sliders. Gives a clear hierarchy distinct from .toggle-row.        */
.settings-field {
  padding: var(--st-row-pad-y) 0;
  border-top: 1px solid var(--st-row-divider);
}
.settings-field:first-of-type { border-top: none; padding-top: 4px; }
.settings-field-label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--st-label-size);
  font-weight: var(--st-label-weight);
  color: var(--text, #2a2a2a);
}
/* When a pill-group field follows a stack of toggle-rows, give it a
 * cleaner top divider matching the rest of the rhythm. */
.settings-field.settings-field-after-toggles { border-top: 1px solid var(--st-row-divider); }

/* ── Slider component — label + value on top row, range full-width
 *    below, faster/patient ticks underneath.                          */
.settings-slider-row { display: flex; flex-direction: column; gap: 6px; }
.settings-slider-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.settings-slider-value {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--terra, #d97757);
  flex-shrink: 0;
}
.settings-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--terra, #d97757) 0%,
    var(--terra, #d97757) var(--st-slider-pct, 50%),
    rgba(0, 0, 0, 0.08) var(--st-slider-pct, 50%),
    rgba(0, 0, 0, 0.08) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 4px 0 2px;
}
[data-theme='dark'] .settings-slider {
  background: linear-gradient(
    to right,
    var(--terra, #d97757) 0%,
    var(--terra, #d97757) var(--st-slider-pct, 50%),
    rgba(255, 255, 255, 0.12) var(--st-slider-pct, 50%),
    rgba(255, 255, 255, 0.12) 100%
  );
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--terra, #d97757);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease;
}
.settings-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--terra, #d97757);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.settings-slider:hover::-webkit-slider-thumb,
.settings-slider:active::-webkit-slider-thumb { transform: scale(1.1); }
.settings-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--st-desc-color);
}

/* ── Theme segmented control — 3 equal-width radio-style buttons,
 *    selected state highlighted with terra accent.                    */
.settings-theme-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--canvas-50, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--st-card-border);
  border-radius: 12px;
  padding: 4px;
}
[data-theme='dark'] .settings-theme-seg {
  background: rgba(255, 255, 255, 0.03);
}
.sts-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2, #4a4a4a);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  min-height: 36px;
}
.sts-opt:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #1a1a1a);
}
[data-theme='dark'] .sts-opt {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme='dark'] .sts-opt:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.sts-opt[aria-checked='true'] {
  background: var(--bg-card, #fff);
  color: var(--terra, #d97757);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(217, 119, 87, 0.25);
  font-weight: 600;
}
[data-theme='dark'] .sts-opt[aria-checked='true'] {
  background: rgba(217, 119, 87, 0.16);
  color: #ffb692;
  box-shadow: 0 0 0 1px rgba(217, 119, 87, 0.4);
}
.sts-opt svg { flex-shrink: 0; opacity: 0.85; }
.sts-opt[aria-checked='true'] svg { opacity: 1; }

/* ── Foot-helper line inside a card (e.g. "Didn't get your welcome
 *    email? Resend it →"). Sits below the card's main content with a
 *    thin divider so it reads as helper, not orphan body text.       */
.settings-card-foot-helper {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--st-row-divider);
  font-size: var(--st-helper-size);
  color: var(--st-helper-color);
  line-height: 1.5;
}
.settings-card-foot-helper a {
  color: var(--terra, #d97757);
  font-weight: 500;
  text-decoration: none;
}
.settings-card-foot-helper a:hover {
  text-decoration: underline;
}

/* ── Action row — used in Data & Privacy: label + sub-label on left,
 *    action button on right. Two-line label vs the single-line .toggle-row. */
.settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--st-row-pad-y) 0;
  border-top: 1px solid var(--st-row-divider);
}
.settings-action-row > div:first-child { flex: 1; min-width: 0; }
.settings-action-label {
  font-size: var(--st-label-size);
  font-weight: 500;
  color: var(--text, #2a2a2a);
}
.settings-action-row.settings-action-row-danger .settings-action-label {
  color: #d92d20;
}
[data-theme='dark'] .settings-action-row.settings-action-row-danger .settings-action-label {
  color: #f87171;
}
.settings-action-sub {
  margin-top: 2px;
  font-size: var(--st-helper-size);
  color: var(--st-helper-color);
  line-height: 1.45;
}

/* --- Theme Switcher (Appearance control) --- */
.theme-switcher {
  position: relative;
  display: inline-flex;
  background: var(--canvas-100);
  border-radius: 14px;
  padding: 4px;
  gap: 2px;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.theme-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  background: var(--white);
  border-radius: 10px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  transition:
    left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease;
  white-space: nowrap;
  user-select: none;
}
.theme-opt.active {
  color: var(--text-primary);
}
.theme-opt svg {
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}
.theme-opt:not(.active) svg {
  opacity: 0.6;
}
.settings-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Dark mode: indicator needs to be lighter than the pill bg */
[data-theme='dark'] .theme-switcher {
  background: var(--canvas-200);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .theme-indicator {
  background: var(--canvas-300);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .theme-opt.active {
  color: var(--canvas-950);
}

/* ============================================
   Plan & Credits Tab
   ============================================ */

/* Enterprise plan hero card */
.plan-hero {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  border-radius: 16px;
  border: 1px solid var(--canvas-200);
  background: var(--white);
  min-height: 160px;
  position: relative;
}
.plan-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.plan-hero-left {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.plan-hero-left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--canvas-150);
}
.plan-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #16a34a;
  margin-bottom: 4px;
}
.plan-hero-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}
.plan-hero-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 800;
  color: var(--canvas-900);
  line-height: 1.1;
}
.plan-hero-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.plan-hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.plan-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--canvas-600);
}
.plan-hero-right {
  width: 240px;
  flex-shrink: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.plan-hero-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-hero-perk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--canvas-700);
}
.plan-hero-perk svg {
  color: #16a34a;
  flex-shrink: 0;
}
.plan-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Give the action column a fixed width so Manage Plan + Cancel always
     render as equal-width rectangles instead of hugging their text. Both
     buttons inherit width:100% below so they match. */
  min-width: 180px;
}
.plan-manage-wrap { width: 100%; }
.plan-hero-manage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  width: 100%;
  background: var(--terra);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.plan-hero-manage-btn:hover {
  background: var(--terra-700);
  box-shadow: 0 3px 12px rgba(217, 119, 87, 0.3);
}
.plan-hero-manage-btn svg {
  transition: transform 0.2s ease;
}
.plan-manage-wrap:has(.plan-manage-menu.open) .plan-hero-manage-btn svg {
  transform: rotate(180deg);
}
.plan-manage-wrap {
  position: relative;
}
.plan-manage-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 50;
  animation: planMenuIn 0.15s ease-out;
}
@keyframes planMenuIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.plan-manage-menu.open {
  display: block;
}
.plan-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  font-size: 14.5px;
  color: var(--canvas-700);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}
.plan-manage-item:hover {
  background: var(--canvas-50);
}
.plan-manage-item svg {
  flex-shrink: 0;
  color: var(--canvas-400);
}
.plan-manage-danger {
  color: #ef4444;
}
.plan-manage-danger svg {
  color: #ef4444;
}
.plan-manage-danger:hover {
  background: rgba(239, 68, 68, 0.06);
}
.plan-manage-renew {
  color: #16a34a;
}
.plan-manage-renew svg {
  color: #16a34a;
}
.plan-manage-renew:hover {
  background: rgba(22, 163, 74, 0.06);
}
.plan-manage-sep {
  height: 1px;
  background: var(--canvas-100);
  margin: 4px 8px;
}
[data-theme='dark'] .plan-manage-menu {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .plan-manage-item {
  color: var(--canvas-500);
}
[data-theme='dark'] .plan-manage-item:hover {
  background: var(--canvas-200);
}
[data-theme='dark'] .plan-manage-item svg {
  color: var(--canvas-400);
}
.plan-hero-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match .plan-hero-manage-btn padding/font so the two buttons render as
     equal-sized siblings. Keeps the outlined "secondary" visual style but
     with the exact same footprint as Manage Plan. */
  padding: 7px 14px;
  width: 100%;
  background: transparent;
  color: var(--canvas-500);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.plan-hero-cancel-btn:hover {
  color: var(--red-500);
  border-color: var(--red-200);
  background: var(--red-50);
}

/* Renew button */
.plan-hero-renew-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
}
.plan-hero-renew-btn:hover {
  background: var(--terra-700);
  box-shadow: 0 3px 12px rgba(217, 119, 87, 0.3);
}

/* Cancelled status */
.plan-hero-status-cancelled .plan-hero-pulse {
  background: #ef4444 !important;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4) !important;
  animation: none !important;
}
.plan-hero-status-cancelled {
  color: #ef4444 !important;
}

/* Cancelled hero card — muted border */
.plan-hero.plan-hero-cancelled {
  border-color: var(--canvas-200);
  opacity: 0.9;
}
.plan-hero.plan-hero-cancelled::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, transparent 60%);
}

/* Lifetime variant — special glow */
.plan-hero.plan-hero-lifetime {
  border-color: rgba(217, 119, 87, 0.25);
}
.plan-hero.plan-hero-lifetime::before {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(196, 97, 63, 0.04) 60%);
}
.plan-hero.plan-hero-lifetime .plan-hero-name {
  background: linear-gradient(135deg, var(--terra), #c4613f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan-hero.plan-hero-lifetime .plan-hero-cancel-btn {
  display: none !important;
}

/* Annual variant */
.plan-hero.plan-hero-annual::before {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
}

/* Free row — original stat cards */
.plan-free-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}

/* Legacy compat */
.plan-balance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
[data-theme='dark'] .plan-hero {
  background: var(--canvas-50);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .plan-hero::before {
  background: linear-gradient(135deg, rgba(224, 124, 88, 0.08) 0%, transparent 60%);
}
[data-theme='dark'] .plan-hero-left::after {
  background: var(--canvas-200);
}
[data-theme='dark'] .plan-hero-name {
  color: var(--canvas-900);
}
[data-theme='dark'] .plan-hero.plan-hero-lifetime::before {
  background: linear-gradient(135deg, rgba(224, 124, 88, 0.12) 0%, rgba(196, 97, 63, 0.05) 60%);
}
[data-theme='dark'] .plan-hero-cancel-btn {
  border-color: var(--canvas-300);
  color: var(--canvas-500);
}
[data-theme='dark'] .plan-hero-cancel-btn:hover {
  color: #ef6b6b;
  border-color: rgba(239, 107, 107, 0.3);
  background: rgba(239, 107, 107, 0.08);
}
[data-theme='dark'] .plan-hero-renew-btn {
  background: var(--terra);
}
[data-theme='dark'] .plan-hero.plan-hero-cancelled {
  border-color: var(--canvas-300);
}

.plan-balance-card .stat-num {
  color: var(--terra);
  font-size: 16px;
}
.plan-balance-card .stat-lbl {
  font-size: 12px;
}
.plan-balance-card,
.plan-trial-card {
  padding: 18px;
  cursor: default;
  pointer-events: none;
}
/* Active card gets the highlight gradient + bottom underline */
.plan-card-active {
  background: linear-gradient(135deg, var(--terra-50), var(--white));
  border-bottom: 3px solid var(--terra);
  pointer-events: none;
}
[data-theme='dark'] .plan-card-active {
  background: linear-gradient(135deg, rgba(224, 124, 88, 0.08), var(--canvas-50));
}
.plan-trial-icon {
  color: var(--terra);
}
.plan-trial-icon svg {
  width: 22px;
  height: 22px;
}
.plan-trial-card.used .plan-trial-icon {
  color: var(--canvas-400);
}
.plan-trial-card.used .stat-lbl {
  color: var(--canvas-400);
}
.plan-trial-card.used {
  opacity: 0.6;
}

/* ── Plan Mode: Single Container (tabs + content in one box) ─────────── */
.plan-mode-box {
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plan-mode-tabs {
  display: flex;
  background: var(--canvas-100);
  padding: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  gap: 0;
  margin-bottom: 0;
}
.plan-mode-tab {
  flex: 1;
  padding: 18px 12px;
  min-height: 52px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.22s var(--ease);
  text-align: center;
  letter-spacing: -0.01em;
}
.plan-mode-tab:hover {
  color: var(--canvas-600);
}
.plan-mode-tab.active {
  background: var(--white);
  color: var(--canvas-900);
  font-weight: 800;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.03);
}
[data-theme='dark'] .plan-mode-box {
  background: var(--canvas-50);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .plan-mode-tabs {
  background: var(--canvas-100);
}
[data-theme='dark'] .plan-mode-tab.active {
  background: var(--canvas-50);
  color: #e07c58;
}

.plan-mode-content {
  display: none;
  padding: 20px;
}
.plan-mode-content.active {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pricing Region Indicator (Phase 3) — shown in Billing tab when user's
   detected region has regional pricing coming (currently only India).
   Non-disruptive: prices stay USD, this just tells the user local pricing
   is coming so they don't feel ignored.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Banner is scoped to .billing-v2 via the tab it's inserted into, so every
   surface + text token below resolves to the billing-v2 light/dark palette
   automatically. This keeps the banner looking like a sibling of the pricing
   cards in both themes. Terra accent = 3px inset stripe on the left edge. */
.pricing-region-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--bv-surface-1);
  border: 1px solid var(--bv-border);
  border-radius: 14px;
  box-shadow: inset 3px 0 0 0 var(--terra);
}
.pri-flag {
  width: 24px;
  height: 17px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--bv-border);
  display: flex;
  flex-shrink: 0;
}
.pri-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pri-text {
  flex: 1;
  min-width: 0;
}
.pri-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--bv-text);
  margin-bottom: 2px;
}
.pri-desc {
  font-size: 11.5px;
  color: var(--bv-text-muted);
  line-height: 1.5;
}

/* INR / USD currency toggle inside the region indicator */
.pri-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--bv-surface-2);
  border: 1px solid var(--bv-border);
  border-radius: 8px;
  padding: 3px;
}
.pri-toggle-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-display);
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--bv-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.pri-toggle-btn:hover {
  color: var(--bv-text);
}
.pri-toggle-btn.active {
  background: var(--bv-btn-bg);
  color: var(--bv-btn-text);
}

/* "Coming Soon" disabled state on pricing buy buttons (Indian users, INR mode) */
.pricing-buy.btn-coming-soon {
  opacity: 0.65;
  cursor: default;
  pointer-events: auto;
}
/* Hide Lifetime subscription card in INR mode (not offered in INR) */
#tab-plan.billing-inr-mode .pricing-card[data-plan="lifetime"] {
  display: none !important;
}

/* India waitlist modal */
.iwl-modal {
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  position: relative;
}
.iwl-header {
  text-align: center;
  margin-bottom: 22px;
}
.iwl-flag {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}
.iwl-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 6px;
}
.iwl-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.iwl-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.iwl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iwl-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.iwl-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}
.iwl-field input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--canvas-900);
  background: var(--canvas-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.iwl-field input:focus {
  border-color: var(--terra);
}
.iwl-error {
  font-size: 12px;
  color: #e05555;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(224,85,85,0.08);
  border-radius: 6px;
}
.iwl-actions {
  display: flex;
  justify-content: stretch;
}
.iwl-submit {
  width: 100%;
  padding: 10px;
  font-size: 13.5px;
}
.iwl-success-icon {
  text-align: center;
  margin: 8px 0 14px;
  color: #3aaa6e;
}
.iwl-success-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--canvas-900);
  text-align: center;
  margin-bottom: 8px;
}
.iwl-success-desc {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 22px;
}
.iwl-done {
  display: block;
  width: 100%;
  padding: 9px;
  font-size: 13.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Full-page checkout (v4) — `.co-*` classes
   ───────────────────────────────────────────────────────────────────────────
   Mirrors the Stripe billing portal: dark-shine black left panel + white
   right panel with the Stripe Payment Element (wallet buttons + card form).
   - Max-width 1240px centered on wide monitors (no full-bleed stretch)
   - Scrollable overlay so it works on short viewports
   - Collapses to single column below 900px (tablet / mobile)
   - Compact mobile layout below 600px with reduced padding
   ═══════════════════════════════════════════════════════════════════════════ */
body.co-open { overflow: hidden; }

.co-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 24px;
  /* Flex so the shell centers vertically when content fits, but stays at top
     (via margin auto) when content overflows, keeping it scrollable. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: coFade 0.18s ease-out;
}
@keyframes coFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.co-shell {
  width: 100%;
  max-width: 1240px;
  margin: auto;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: 0.92fr 1.28fr;
  min-height: 680px;
  animation: coRise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@keyframes coRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── LEFT pane ───────────────────────────────────────────────────────── */
.co-left {
  position: relative;
  padding: 54px 56px 48px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 20% 10%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(ellipse 80% 50% at 80% 95%, rgba(217, 119, 87, 0.05), transparent 70%),
    linear-gradient(155deg, #141417 0%, #050505 65%);
  color: #F7F7F7;
  overflow: hidden;
}
.co-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.028) 45%, transparent 60%);
  pointer-events: none;
}
.co-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}

.co-brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  margin-bottom: 52px;
  position: relative;
  z-index: 1;
  color: #F7F7F7;
}
.co-brand-icon {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  fill: currentColor;
}
.co-wordmark {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #F7F7F7;
}

.co-title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: #F7F7F7;
  max-width: 340px;
  position: relative;
  z-index: 1;
}
.co-tagline {
  font-size: 13.5px;
  color: #A3A3A8;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 340px;
  position: relative;
  z-index: 1;
}

.co-summary {
  margin: 0 0 auto;
  padding: 22px;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 340px;
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.co-summary-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B6B72;
  margin: 0 0 8px;
}
.co-summary-name {
  font-size: 18px;
  font-weight: 600;
  color: #F7F7F7;
  margin: 0 0 4px;
}
.co-summary-desc {
  font-size: 12.5px;
  color: #A3A3A8;
  line-height: 1.55;
  margin: 0 0 14px;
}
.co-summary-discount {
  font-size: 11.5px;
  color: #86EFAC;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.co-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.co-summary-total-lbl {
  font-size: 12px;
  color: #A3A3A8;
}
.co-summary-total-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #F7F7F7;
  font-variant-numeric: tabular-nums;
}
.co-summary-recur {
  font-size: 11px;
  color: #6B6B72;
  margin-top: 10px;
  text-align: right;
}

/* ─── Promo code section (pack checkout left panel) ──────────────────────── */
.co-promo {
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.co-promo-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: #6B6B72;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.co-promo-toggle:hover { color: #A3A3A8; }
.co-promo-fields {
  display: none;
  margin-top: 10px;
  gap: 8px;
}
.co-promo-fields.is-open { display: flex; }
.co-promo-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 16px;
  color: #F7F7F7;
  outline: none;
  transition: border-color 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.co-promo-input::placeholder { color: #4B4B52; text-transform: none; letter-spacing: normal; }
.co-promo-input:focus { border-color: rgba(255, 255, 255, 0.3); }
.co-promo-apply {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #F7F7F7;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  white-space: nowrap;
}
.co-promo-apply:hover { background: rgba(255, 255, 255, 0.15); }
.co-promo-apply:active { background: rgba(255, 255, 255, 0.22); }
.co-promo-apply.is-loading { color: transparent !important; pointer-events: none; }
.co-promo-apply.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  box-sizing: border-box;
  visibility: visible;
}
.co-promo-msg {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  min-height: 1em;
}
.co-promo-msg--error  { color: #FCA5A5; }
.co-promo-msg--success { color: #86EFAC; }

.co-return {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  font-size: 13px;
  font-weight: 500;
  color: #A3A3A8;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  position: relative;
  z-index: 1;
  align-self: flex-start;
  transition: color 0.15s ease;
}
.co-return:hover { color: #F7F7F7; }

/* ─── RIGHT pane ──────────────────────────────────────────────────────── */
.co-right {
  position: relative;
  padding: 52px 60px 40px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}
.co-close-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #6B6B6B;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.co-close-x:hover { background: transparent; color: #0A0A0A; }

.co-crumb {
  font-size: 12.5px;
  color: #8A8A8A;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}
.co-crumb svg { width: 12px; height: 12px; }
.co-crumb-cur { color: #0A0A0A; font-weight: 500; }

.co-form-title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: #0A0A0A;
}
.co-form-sub {
  font-size: 13px;
  color: #8A8A8A;
  margin: 0 0 22px;
}

.co-pe-mount {
  min-height: 120px;
}

.co-error {
  font-size: 13px;
  color: #DC2626;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #FEF2F2;
  border-radius: 6px;
  border: 1px solid #FECACA;
}

.co-pay-btn {
  margin-top: 22px;
  width: 100%;
  height: 50px;
  background: #0A0A0A;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background 0.18s ease;
}
.co-pay-btn:hover:not(:disabled):not(.is-loading) { background: #1a1a1a; }
.co-pay-btn:active:not(:disabled) { transform: scale(0.995); }
.co-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* `.is-loading` state is already handled by the global .btn.is-loading rules
   above (color:transparent + ::after arc). Add the selector to the global
   rule list by aliasing it explicitly here for the co-pay-btn class which
   doesn't start with `.btn`. */
.co-pay-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}
.co-pay-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  box-sizing: border-box;
  visibility: visible;
}

.co-goback {
  margin-top: 10px;
  width: 100%;
  height: 44px;
  background: transparent;
  color: #0A0A0A;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.co-goback:hover { background: #F7F7F7; }

.co-secure-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11.5px;
  color: #8A8A8A;
}

.co-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E5E5E5;
  font-size: 11px;
  color: #8A8A8A;
}
.co-footer-links {
  display: inline-flex;
  gap: 14px;
}
.co-footer-links a {
  color: #8A8A8A;
  text-decoration: none;
}
.co-footer-links a:hover { color: #0A0A0A; text-decoration: underline; }
.co-powered b {
  color: #0A0A0A;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Responsive: collapse to single column on tablet / mobile ────────── */
@media (max-width: 960px) {
  .co-overlay { padding: 24px 16px; }
  .co-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    max-width: 520px;
  }
  .co-left {
    padding: 32px 28px 28px;
    text-align: center;
  }
  .co-brand { margin-bottom: 20px; justify-content: center; }
  .co-title { margin: 0 auto 10px; max-width: none; }
  .co-tagline { margin: 0 auto 18px; max-width: none; }
  .co-summary { max-width: none; }
  .co-return { margin-top: 18px; align-self: center; }
  .co-right { padding: 36px 32px 32px; }
}
@media (max-width: 520px) {
  .co-overlay { padding: 0; }
  .co-shell {
    border-radius: 0;
    min-height: 100vh;
    max-width: 100%;
  }
  .co-left { padding: 28px 22px 22px; }
  .co-right { padding: 28px 22px 28px; }
  .co-title { font-size: 20px; }
  .co-form-title { font-size: 20px; }
  .co-summary { padding: 18px; }
  .co-summary-total-val { font-size: 22px; }
  .co-pay-btn { height: 48px; }
}

/* ─── Success state (after successful payment/subscription) ──────────── */
.co-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  animation: coSuccessIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes coSuccessIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.co-success-icon { margin-bottom: 18px; }
.co-success-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0 0 8px;
}
.co-success-desc {
  font-size: 13.5px;
  color: #6B6B6B;
  margin: 0 0 26px;
  max-width: 320px;
  line-height: 1.55;
}
.co-success-actions { width: 100%; }
.co-success .co-pay-btn { max-width: 240px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Legacy `.pe-modal-*` classes — kept as no-ops for any stale CSS references
   below (the JS no longer emits them). Deleting the full old block is a
   separate pass.
   ═══════════════════════════════════════════════════════════════════════════ */
.pe-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(19, 19, 20, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: peFadeIn 0.2s ease-out;
}
@keyframes peFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pe-modal {
  display: grid;
  grid-template-columns: 380px 440px;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4);
  animation: peSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes peSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 860px) {
  .pe-modal {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .pe-modal-left {
    padding: 24px 24px 20px !important;
  }
}
.pe-modal-left {
  background: linear-gradient(165deg, #1f1d18 0%, #2a2520 45%, #3a2d25 100%);
  color: #fff;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pe-modal-left::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -30%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(217, 119, 87, 0.35) 0%, rgba(217, 119, 87, 0) 70%);
  pointer-events: none;
}
.pe-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.pe-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--terra) 0%, var(--terra-400) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.35);
}
.pe-brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.pe-summary {
  flex: 1;
  position: relative;
  z-index: 1;
}
.pe-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.pe-summary-pack {
  margin-bottom: 18px;
}
.pe-summary-pack-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pe-summary-pack-credits {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.pe-summary-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.pe-summary-price-amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.pe-summary-original {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
}
.pe-summary-discount {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(217, 119, 87, 0.22);
  border: 1px solid rgba(217, 119, 87, 0.4);
  color: #f08968;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  margin-right: 6px;
}
.pe-summary-discount + .pe-summary-discount {
  margin-top: 0;
}
.pe-summary-interval {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-left: 4px;
}
.pe-summary-recur-note {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.pe-summary-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 22px 0 16px;
}
.pe-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pe-summary-total-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.pe-summary-total-amount {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.pe-modal-footer {
  margin-top: 28px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.pe-modal-right {
  background: #fff;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pe-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pe-modal-close:hover {
  background: transparent;
  color: var(--canvas-900);
}
.pe-modal-header {
  margin-bottom: 20px;
  padding-right: 40px;
}
.pe-modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--canvas-950);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.pe-modal-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}
.pe-element-mount {
  flex: 1;
  min-height: 220px;
  margin-bottom: 16px;
}
.pe-error {
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #dc2626;
  line-height: 1.45;
  margin-bottom: 12px;
}
.pe-submit-btn {
  background: linear-gradient(135deg, var(--terra) 0%, var(--terra-400) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(217, 119, 87, 0.32);
  width: 100%;
}
.pe-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(217, 119, 87, 0.42);
}
.pe-submit-btn:active {
  transform: translateY(0);
}
.pe-submit-btn:disabled {
  background: var(--canvas-300);
  color: var(--canvas-600);
  box-shadow: none;
  cursor: not-allowed;
}
.pe-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted);
}
.pe-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 20px;
  min-height: 360px;
}
.pe-success-icon {
  margin-bottom: 20px;
}
.pe-success-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--canvas-950);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pe-success-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 28px;
  line-height: 1.55;
}
.pe-success .pe-submit-btn {
  max-width: 200px;
}
[data-theme='dark'] .pe-modal {
  background: var(--bg-card);
}
[data-theme='dark'] .pe-modal-right {
  background: var(--bg-card);
}
[data-theme='dark'] .pe-modal-title {
  color: var(--canvas-900);
}
[data-theme='dark'] .pe-modal-close {
  background: transparent;
  color: var(--canvas-500);
}
[data-theme='dark'] .pe-modal-close:hover {
  background: transparent;
  color: var(--canvas-200);
}
[data-theme='dark'] .pe-success-title {
  color: var(--canvas-900);
}

/* ── New Grad Pass Banner ────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Auto-Reload Card (pay-as-you-go credit top-up settings)
   ═══════════════════════════════════════════════════════════════════════════ */
.ar-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.ar-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ar-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--terra-50);
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ar-card-title-wrap {
  flex: 1;
  min-width: 0;
}
.ar-card-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--canvas-950);
  margin: 0 0 2px;
}
.ar-card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.ar-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.ar-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ar-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--canvas-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ar-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ar-toggle input:checked + .ar-toggle-slider {
  background: var(--terra);
}
.ar-toggle input:checked + .ar-toggle-slider::before {
  transform: translateX(18px);
}
.ar-card-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--canvas-100);
}
.ar-summary-off {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.ar-card-settings {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--canvas-100);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--canvas-100);
}
.ar-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.ar-row-vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.ar-row-compact {
  padding-bottom: 0;
  border-bottom: none;
}
.ar-row-label {
  flex: 1;
  min-width: 0;
}
.ar-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--canvas-900);
  margin-bottom: 3px;
}
.ar-row-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.ar-row-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ar-pm-display {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--canvas-800);
  font-variant-numeric: tabular-nums;
}
.ar-threshold-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}
.ar-threshold-input:focus-within {
  border-color: var(--terra);
  background: var(--white);
}
.ar-threshold-input input {
  width: 60px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--canvas-950);
  outline: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.ar-threshold-input input::-webkit-outer-spin-button,
.ar-threshold-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ar-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.ar-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .ar-pack-grid {
    grid-template-columns: 1fr;
  }
  .ar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ar-row-value {
    justify-content: flex-start;
  }
}
.ar-pack-option {
  position: relative;
  padding: 14px 14px;
  background: var(--canvas-50);
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.ar-pack-option:hover {
  border-color: var(--canvas-300);
}
.ar-pack-option.is-selected {
  border-color: var(--terra);
  background: var(--terra-50);
}
.ar-pack-option.is-selected::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: inset 0 0 0 3px var(--white);
}
.ar-pack-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 3px;
}
.ar-pack-credits {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ar-pack-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--canvas-950);
  font-variant-numeric: tabular-nums;
}
.ar-period-usage {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--canvas-700);
  font-variant-numeric: tabular-nums;
}
.ar-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #dc2626;
  line-height: 1.45;
}
.ar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.ar-btn-primary {
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ar-btn-primary:hover:not(:disabled) {
  background: var(--terra-600);
}
.ar-btn-primary:disabled {
  background: var(--canvas-300);
  cursor: not-allowed;
}
.ar-btn-secondary {
  background: var(--canvas-100);
  color: var(--canvas-900);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ar-btn-secondary:hover {
  background: var(--canvas-200);
  border-color: var(--canvas-300);
}
.ar-btn-link {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: none;
}
.ar-btn-link:hover {
  text-decoration: underline;
}
[data-theme='dark'] .ar-card-title {
  color: var(--canvas-900);
}
[data-theme='dark'] .ar-card-summary,
[data-theme='dark'] .ar-card-settings {
  border-top-color: var(--canvas-300);
}
[data-theme='dark'] .ar-row {
  border-bottom-color: var(--canvas-300);
}
[data-theme='dark'] .ar-row-title {
  color: var(--canvas-900);
}
[data-theme='dark'] .ar-pm-display {
  color: var(--canvas-800);
}
[data-theme='dark'] .ar-threshold-input {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
}
[data-theme='dark'] .ar-threshold-input input {
  color: var(--canvas-900);
}
[data-theme='dark'] .ar-pack-option {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
}
[data-theme='dark'] .ar-pack-option:hover {
  border-color: var(--canvas-400);
}
[data-theme='dark'] .ar-pack-option.is-selected {
  background: rgba(240, 137, 104, 0.12);
  border-color: var(--terra);
}
[data-theme='dark'] .ar-pack-name,
[data-theme='dark'] .ar-pack-price {
  color: var(--canvas-900);
}
[data-theme='dark'] .ar-btn-secondary {
  background: var(--canvas-200);
  color: var(--canvas-900);
  border-color: var(--canvas-300);
}
[data-theme='dark'] .ar-btn-secondary:hover {
  background: var(--canvas-300);
  border-color: var(--canvas-400);
}

.ng-banner {
  position: relative;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1f1d18 0%, #2a2520 100%);
  overflow: hidden;
}
.ng-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}
.ng-banner-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.ng-banner-desc {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  line-height: 1.4;
}
.ng-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ng-banner-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: #d97757;
  color: #fff;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ng-banner-btn:hover {
  background: #c56a4d;
}
/* Secondary "Start over" button shown next to the "Pending" label when the
 * user has an in-flight verification and wants to restart with a different
 * email. Ghost style so it's clearly the secondary action. */
.ng-banner-btn-secondary {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ng-banner-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}
.ng-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.ng-banner-close:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* Active state — verified */
.ng-banner.ng-active {
  background: linear-gradient(135deg, #1a2e1a 0%, #1f3320 100%);
}
.ng-banner.ng-active .ng-banner-title {
  color: #6fcf6f;
}
.ng-banner.ng-active .ng-banner-btn {
  background: rgba(111, 207, 111, 0.15);
  color: #6fcf6f;
  cursor: default;
}
/* Pending review state */
.ng-banner.ng-pending {
  background: linear-gradient(135deg, #2e2a1a 0%, #33301f 100%);
}
.ng-banner.ng-pending .ng-banner-title {
  color: #f0c060;
}
.ng-banner.ng-pending .ng-banner-btn {
  background: rgba(240, 192, 96, 0.15);
  color: #f0c060;
  cursor: default;
}

/* ── New Grad Modal ─────────────────────────────────────────────────── */
/* ── New Grad Modal — premium card ────────────────────────────────── */
.ng-modal {
  max-width: 400px;
  padding: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
.ng-modal-inner {
  padding: 32px 28px 28px;
}
/* Close button — flat icon, no card or border. Subtle 90-deg rotation +
 * color shift on hover keeps the affordance without competing with the
 * modal body. Matches the rest of the studio's icon-only button pattern. */
.ng-modal .ng-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--canvas-500);
  padding: 0;
  box-shadow: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.ng-modal .ng-close:hover {
  background: transparent;
  color: var(--canvas-900);
  transform: rotate(90deg);
}
/* Header */
.ng-modal-header {
  text-align: center;
  margin-bottom: 24px;
}
.ng-modal-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--terra-50, rgba(217, 119, 87, 0.08));
  color: var(--terra);
  margin-bottom: 12px;
  border: 1px solid var(--terra-100, rgba(217, 119, 87, 0.14));
}
.ng-modal-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--canvas-950);
  margin: 0;
}
.ng-modal-header p {
  font-size: 12px;
  color: var(--canvas-500);
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.5;
}
/* Divider between header and form */
.ng-modal-body {
  border-top: 1px solid var(--canvas-200);
  padding-top: 22px;
}
/* Form fields */
.ng-modal-field {
  margin-bottom: 18px;
}
.ng-modal-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--canvas-700);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.ng-modal-field input {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary, var(--canvas-950));
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
  line-height: 1.5;
}
.ng-modal-field input:focus {
  outline: none;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.1);
}
.ng-modal-field input::placeholder {
  color: var(--canvas-400);
}
.ng-modal-hint {
  font-size: 10.5px;
  color: var(--canvas-400);
  margin-top: 5px;
  font-weight: 500;
}
/* Custom dropdown (replaces native select) */
.ng-dropdown {
  position: relative;
}
.ng-dropdown-trigger {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary, var(--canvas-950));
  background: var(--canvas-50);
  box-shadow: inset 0 0 0 1.5px var(--canvas-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
  text-align: left;
  line-height: 1.5;
}
.ng-dropdown-trigger.is-placeholder {
  color: var(--canvas-400);
}
.ng-dropdown-trigger:hover {
  box-shadow: inset 0 0 0 1.5px var(--canvas-300);
}
.ng-dropdown-trigger.is-open {
  background: var(--white);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(217, 119, 87, 0.1);
}
.ng-dropdown-trigger svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--canvas-400);
  transition: transform 0.2s ease;
}
.ng-dropdown-trigger.is-open svg {
  transform: rotate(180deg);
  color: var(--terra);
}
.ng-dropdown-list {
  display: none;
  margin-top: 6px;
  background: var(--bg-elevated, var(--white));
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--border-strong);
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
  animation: ngDropIn 0.15s ease;
}
@keyframes ngDropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ng-dropdown-list.is-open {
  display: block;
}
.ng-dropdown-option {
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-700);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.ng-dropdown-option:hover {
  background: var(--canvas-100);
  color: var(--canvas-950);
}
.ng-dropdown-option.is-selected {
  background: var(--terra-50, rgba(217, 119, 87, 0.08));
  color: var(--terra);
  font-weight: 600;
}
/* Error */
.ng-modal-error {
  font-size: 11.5px;
  color: #ef4444;
  font-weight: 600;
  margin-bottom: 14px;
  padding: 9px 14px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
}
/* Submit button */
.ng-modal-submit {
  width: 100%;
  padding: 11px;
  background: var(--canvas-950);
  color: var(--canvas-50);
  border: none;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  letter-spacing: 0.01em;
}
.ng-modal-submit:hover {
  background: var(--canvas-800);
  transform: translateY(-0.5px);
}
.ng-modal-submit:active {
  transform: translateY(0);
}
.ng-modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* Success state */
.ng-modal-success {
  text-align: center;
  padding: 24px 0 12px;
}
.ng-modal-success h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--canvas-950);
  margin: 16px 0 6px;
}
.ng-modal-success p {
  font-size: 12px;
  color: var(--canvas-500);
  font-weight: 500;
  line-height: 1.6;
}

/* ── New Grad Modal — pending state (user has a verification in-flight) ── */
.ng-modal-pending {
  text-align: center;
  padding: 16px 0 8px;
}
.ng-pending-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.ng-modal-pending h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--canvas-950);
  margin: 6px 0 10px;
}
.ng-pending-desc {
  font-size: 12px;
  color: var(--canvas-600);
  margin-bottom: 6px;
}
.ng-pending-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--terra);
  padding: 10px 14px;
  margin: 0 auto 14px;
  display: inline-block;
  background: var(--terra-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--terra-100);
  word-break: break-all;
}
.ng-pending-hint {
  font-size: 12px;
  color: var(--canvas-600);
  line-height: 1.55;
  margin-bottom: 16px;
}
.ng-pending-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin-top: 14px;
}
.ng-btn-primary {
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.ng-btn-primary:hover:not(:disabled) {
  background: var(--terra-600);
}
.ng-btn-primary:disabled {
  background: var(--canvas-300);
  color: var(--canvas-600);
  cursor: not-allowed;
}
.ng-btn-ghost {
  background: transparent;
  color: var(--canvas-700);
  border: 1px solid var(--canvas-300);
  border-radius: var(--radius-md);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ng-btn-ghost:hover:not(:disabled) {
  background: var(--canvas-100);
  color: var(--canvas-900);
}
.ng-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ng-pending-tip {
  font-size: 11px;
  color: var(--canvas-500);
  line-height: 1.5;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--canvas-50);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--canvas-300);
}
[data-theme='dark'] .ng-modal-pending h4 {
  color: #fff;
}
[data-theme='dark'] .ng-pending-desc,
[data-theme='dark'] .ng-pending-hint {
  color: var(--canvas-700);
}
[data-theme='dark'] .ng-pending-email {
  background: rgba(240, 137, 104, 0.12);
  border-color: rgba(240, 137, 104, 0.24);
}
[data-theme='dark'] .ng-btn-ghost {
  color: var(--canvas-800);
  border-color: var(--canvas-300);
}
[data-theme='dark'] .ng-btn-ghost:hover:not(:disabled) {
  background: var(--canvas-200);
  color: #fff;
}
[data-theme='dark'] .ng-pending-tip {
  background: var(--canvas-100);
  color: var(--canvas-600);
  border-left-color: var(--canvas-300);
}

/* ── New Grad Modal — dark theme ────────────────────────────────── */
[data-theme='dark'] .ng-modal {
  background: var(--bg-card);
}
[data-theme='dark'] .ng-modal .ng-close {
  background: transparent;
  border: none;
  color: var(--canvas-500);
}
[data-theme='dark'] .ng-modal .ng-close:hover {
  background: transparent;
  color: var(--canvas-900);
}
[data-theme='dark'] .ng-modal-badge {
  background: var(--terra-50);
  border-color: var(--terra-100);
}
[data-theme='dark'] .ng-modal-body {
  border-top-color: var(--canvas-300);
}
[data-theme='dark'] .ng-modal-field input {
  background: var(--canvas-100);
  box-shadow: inset 0 0 0 1.5px var(--canvas-300);
  color: var(--canvas-900);
}
[data-theme='dark'] .ng-modal-field input:focus {
  background: var(--canvas-200);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(240, 137, 104, 0.12);
}
[data-theme='dark'] .ng-modal-field input::placeholder {
  color: var(--canvas-500);
}
[data-theme='dark'] .ng-dropdown-trigger {
  background: var(--canvas-100);
  box-shadow: inset 0 0 0 1.5px var(--canvas-300);
  color: var(--canvas-900);
}
[data-theme='dark'] .ng-dropdown-trigger.is-placeholder {
  color: var(--canvas-500);
}
[data-theme='dark'] .ng-dropdown-trigger:hover {
  box-shadow: inset 0 0 0 1.5px var(--canvas-400);
}
[data-theme='dark'] .ng-dropdown-trigger.is-open {
  background: var(--canvas-200);
  box-shadow:
    inset 0 0 0 1.5px var(--terra),
    0 0 0 4px rgba(240, 137, 104, 0.12);
}
[data-theme='dark'] .ng-dropdown-list {
  background: var(--bg-elevated);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px var(--canvas-300);
}
[data-theme='dark'] .ng-dropdown-option {
  color: var(--canvas-700);
}
[data-theme='dark'] .ng-dropdown-option:hover {
  background: var(--canvas-300);
  color: var(--canvas-900);
}
[data-theme='dark'] .ng-dropdown-option.is-selected {
  background: var(--terra-50);
  color: var(--terra);
}
[data-theme='dark'] .ng-modal-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
[data-theme='dark'] .ng-modal-submit {
  background: var(--canvas-950);
  color: var(--canvas-100);
}
[data-theme='dark'] .ng-modal-submit:hover {
  background: var(--canvas-800);
}

/* ── Discount Price Display ─────────────────────────────────────────── */
.pricing-original {
  font-size: 11px;
  color: var(--canvas-500);
  text-decoration: line-through;
  font-weight: 500;
  margin-bottom: 1px;
}
[data-theme='dark'] .pricing-original {
  color: var(--canvas-400);
}
.pricing-discount-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(217, 119, 87, 0.1);
  color: #d97757;
  margin-top: 4px;
}
[data-theme='dark'] .pricing-discount-badge {
  background: rgba(224, 124, 88, 0.15);
  color: #e07c58;
}

/* ── New Grad Toast Notification ─────────────────────────────────────── */
.ng-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  z-index: 10000;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.ng-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ng-toast-success {
  background: #1a2e1a;
  color: #6fcf6f;
  border: 1px solid rgba(111, 207, 111, 0.2);
}
.ng-toast-info {
  background: #1f1d18;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ng-toast-error {
  background: #2e1a1a;
  color: #ef6060;
  border: 1px solid rgba(239, 96, 96, 0.2);
}

/* ── Credits Explainer ────────────────────────────────────────────────── */
.plan-credits-explainer {
  margin-bottom: 16px;
  border: 1px solid var(--canvas-200);
  border-radius: 10px;
  overflow: hidden;
}
.plan-explainer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-card);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.2s;
}
.plan-explainer-toggle:hover {
  background: var(--canvas-100);
}
.plan-explainer-toggle svg:first-child {
  color: var(--terra);
  flex-shrink: 0;
}
.plan-explainer-chevron {
  transition: transform 0.2s ease;
  margin-left: auto;
  color: var(--text-muted);
}
.plan-explainer-toggle[aria-expanded='true'] .plan-explainer-chevron {
  transform: rotate(180deg);
}
.plan-explainer-body {
  display: none;
  padding: 0 16px 16px;
  background: var(--bg-card);
}
.plan-explainer-body.open {
  display: block;
}

/* ── Redesigned step cards ── */
.plan-explainer-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}
.plan-exp-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--canvas-200);
  border-radius: 10px;
  background: var(--bg-primary);
  position: relative;
}
.plan-exp-num {
  position: absolute;
  top: -8px;
  left: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--canvas-400);
}
.plan-exp-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--canvas-100);
  color: var(--text-muted);
}
.plan-exp-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-exp-text strong {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 600;
}
.plan-exp-text span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.plan-exp-connector {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: var(--canvas-400);
  flex-shrink: 0;
}
.plan-explainer-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--canvas-50, rgba(0, 0, 0, 0.02));
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.plan-explainer-tip > svg {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 1px;
}
.plan-explainer-tip strong {
  color: var(--text-primary);
}
[data-theme='dark'] .plan-credits-explainer {
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .plan-explainer-toggle {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .plan-explainer-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .plan-explainer-body {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .plan-exp-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
[data-theme='dark'] .plan-exp-icon {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .plan-explainer-tip {
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 600px) {
  .plan-explainer-steps {
    flex-direction: column;
    gap: 0;
  }
  .plan-exp-card {
    border-radius: 10px;
  }
  .plan-exp-connector {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.pricing-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.pricing-card {
  position: relative;
  padding: 18px 16px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-150, rgba(0, 0, 0, 0.05));
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-card:hover {
  border-color: var(--terra-200);
  box-shadow: 0 4px 20px rgba(217, 119, 87, 0.1);
}
.pricing-popular {
  border-color: var(--terra-200);
  padding-top: 28px;
}
.pricing-popular:hover {
  border-color: var(--terra);
}
.pricing-best {
  border-color: var(--terra-300);
  padding-top: 34px;
}
.pricing-best:hover {
  border-color: var(--terra);
}
.pricing-lifetime {
  border-color: var(--canvas-300);
  background: linear-gradient(135deg, var(--canvas-50), var(--white));
  padding-top: 28px;
}

.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: var(--terra);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.pricing-best .pricing-badge {
  background: linear-gradient(135deg, var(--terra), var(--terra-700));
}
.pricing-lifetime .pricing-badge {
  background: var(--canvas-700);
}

.pricing-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border-radius: var(--radius-xl);
  background: var(--canvas-50);
  color: var(--canvas-600);
  transition: color 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.pricing-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(217, 119, 87, 0.07);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;
  z-index: -1;
}
.pricing-card:hover .pricing-icon::before {
  transform: scaleY(1);
}
.pricing-card:hover .pricing-icon {
  color: var(--terra);
}
.pricing-icon-pop,
.pricing-icon-best,
.pricing-icon-lifetime {
  /* no pre-fill — same base as default */
}
[data-theme='dark'] .pricing-icon {
  background: var(--canvas-100);
  color: var(--canvas-400);
}
[data-theme='dark'] .pricing-icon::before {
  background: rgba(224, 124, 88, 0.08);
}
[data-theme='dark'] .pricing-card:hover .pricing-icon {
  color: #e07c58;
}
[data-theme='dark'] .pricing-icon-pop,
[data-theme='dark'] .pricing-icon-best,
[data-theme='dark'] .pricing-icon-lifetime {
  /* no pre-fill in dark mode either */
}
.pricing-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 3px;
  /* Center directly below the icon on all three tabs (Credit Packs,
     Subscriptions, Enterprise). Using flex (not inline-flex) so the element
     fills the card width and its contents — name + optional "Save 56%" pill
     — center along the main axis regardless of pricing-card's flex-column. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: center;
  width: 100%;
}
/* "Save 56%" pill shown inline next to a plan name (annual subscription). */
.pricing-savings-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: linear-gradient(135deg, var(--terra) 0%, var(--terra-400) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(217, 119, 87, 0.3);
  white-space: nowrap;
}
/* Strike-through compare line shown below the annual price to communicate
   the savings vs "12 × monthly" at a glance. */
.pricing-compare {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
}
.pricing-compare-strike {
  color: var(--canvas-500);
  text-decoration: line-through;
  font-weight: 600;
}
.pricing-compare-note {
  color: var(--text-muted);
  font-weight: 500;
}
.pricing-credits {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.pricing-price {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--canvas-950);
  line-height: 1;
  margin-bottom: 2px;
}
.pricing-interval {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--canvas-400);
}
.pricing-per {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
[data-theme='dark'] .pricing-compare-strike {
  color: var(--canvas-600);
}
.pricing-buy {
  width: 100%;
  padding: 8px 14px;
  margin-top: auto;
  padding-top: 8px;
  background: var(--terra);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.pricing-buy:hover {
  background: var(--terra-700);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.3);
}

/* Benefits list — enterprise/team cards */
.pricing-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.pricing-benefits li {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.pricing-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6.5' stroke='%23C4BFA9'/%3E%3Cpath d='M4.5 7L6.2 8.8L9.5 5.2' stroke='%23D97757' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

[data-theme='dark'] .pricing-card {
  background: var(--canvas-50);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .pricing-card:hover {
  border-color: rgba(224, 124, 88, 0.4);
  box-shadow: 0 4px 20px rgba(224, 124, 88, 0.1);
}
[data-theme='dark'] .pricing-popular {
  border-color: rgba(224, 124, 88, 0.3);
}
[data-theme='dark'] .pricing-best {
  border-color: rgba(224, 124, 88, 0.4);
}
[data-theme='dark'] .pricing-lifetime {
  background: linear-gradient(135deg, var(--canvas-100), var(--canvas-50));
  border-color: var(--canvas-300);
}
[data-theme='dark'] .pricing-buy {
  background: #e07c58;
}
[data-theme='dark'] .pricing-buy:hover {
  background: #c46a4a;
  box-shadow: 0 2px 8px rgba(224, 124, 88, 0.3);
}

/* Credits hero — large credit count shown on mobile, hidden on desktop (desktop has it in .pricing-details) */
.pricing-credits-hero {
  display: none;
}

/* Current plan label — shown on the balance card in the plan tab */
.plan-current-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--terra);
  color: white;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.plan-current-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
  animation: currentDotPulse 2s ease-in-out infinite;
}
@keyframes currentDotPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
[data-theme='dark'] .plan-current-label {
  background: #e07c58;
  color: white;
}
[data-theme='dark'] .plan-current-dot {
  background: white;
}

/* Desktop: show pricing details inline */
.pricing-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--canvas-100);
}

/* Details button — hidden on desktop */
.pricing-details-btn {
  display: none;
}
[data-theme='dark'] .pricing-details-btn {
  color: #e07c58;
}
[data-theme='dark'] .pricing-details-btn::after {
  border-color: #e07c58;
}
[data-theme='dark'] .pricing-details {
  border-top-color: var(--canvas-200);
}

/* Info box */
.plan-info-box {
  padding: 20px 24px;
  background: var(--canvas-50);
  border-radius: var(--radius-xl);
  border: 1px solid var(--canvas-150);
  margin-bottom: 24px;
}
.plan-info-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-800);
  margin-bottom: 8px;
}
.plan-info-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.plan-info-items span {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 4px 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--canvas-150);
}
.plan-info-note {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 8px;
}
[data-theme='dark'] .plan-info-box {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .plan-info-items span {
  background: var(--canvas-50);
  border-color: var(--canvas-200);
}

/* ── "How it works" overview — flat collapsible <details> ──
 * No card, no box. Just a clickable header row with a chevron, and a
 * thin bottom divider between sibling sections. Follows disclosure-
 * widget best practice: minimum chrome, content-first.
 * Opens to reveal a 3-step grid + a footnote callout. */
/* Force-flat — high specificity + !important to defeat any ancestor or
 * legacy rule that tries to wrap the disclosure in a card. */
details.ent-overview,
.ent-overview {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid var(--canvas-200, rgba(0, 0, 0, 0.08)) !important;
  overflow: visible !important;
}
.ent-overview:last-of-type {
  border-bottom: none;
}
[data-theme='dark'] .ent-overview {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
/* The <summary> is the entire clickable row. Strip default browser
 * disclosure marker, remove the outer card. Compact vertical padding
 * so closed state is a single tappable line. */
.ent-overview > summary.ent-overview-header,
.ent-overview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 2px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
  background: transparent;
  border: none;
  transition: color 0.15s ease;
}
.ent-overview > summary.ent-overview-header::-webkit-details-marker,
.ent-overview > summary.ent-overview-header::marker {
  display: none;
  content: '';
}
.ent-overview > summary.ent-overview-header:hover {
  color: var(--terra);
}
.ent-overview > summary.ent-overview-header:hover .ent-overview-chevron {
  color: var(--terra);
}
.ent-overview-header svg {
  color: var(--terra);
  flex-shrink: 0;
}
.ent-overview-header strong {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
/* Chevron — must be unambiguously visible in BOTH light and dark
 * themes. Uses currentColor so it inherits the same primary text color
 * as the title (won't disappear into a low-contrast secondary token).
 * Stroke-width 2 + explicit display ensures it always renders even if
 * ancestor SVG defaults try to hide it. */
.ent-overview-chevron {
  display: inline-block !important;
  width: 16px;
  height: 16px;
  color: var(--text-primary);
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.22s ease, opacity 0.15s ease;
}
.ent-overview > summary.ent-overview-header:hover .ent-overview-chevron {
  opacity: 1;
}
.ent-overview[open] .ent-overview-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
[data-theme='dark'] .ent-overview-chevron {
  color: #f2f0eb;
}
.ent-overview-body {
  padding: 4px 2px 18px;
  border-top: none;
}
.ent-overview-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ent-ov-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 14px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-150, var(--canvas-200));
  border-radius: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ent-ov-step:hover {
  border-color: var(--terra-200, rgba(200, 80, 50, 0.2));
  box-shadow: 0 2px 8px rgba(200, 80, 50, 0.06);
}
.ent-ov-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--terra);
  flex-shrink: 0;
}
.ent-ov-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ent-ov-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ent-ov-text span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ent-overview-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--terra-50, rgba(200, 80, 50, 0.04));
  border: 1px solid var(--terra-100, rgba(200, 80, 50, 0.1));
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ent-overview-note svg {
  flex-shrink: 0;
  color: var(--terra);
  margin-top: 1px;
}
/* Inner card states (steps + note) keep their own dark-theme treatment.
 * The outer .ent-overview itself is flat — no background, no border —
 * so we do NOT re-add a dark background here (was the source of the
 * residual box on dark theme). */
[data-theme='dark'] .ent-ov-step {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .ent-ov-step:hover {
  border-color: rgba(200, 80, 50, 0.25);
  box-shadow: 0 2px 8px rgba(200, 80, 50, 0.08);
}
[data-theme='dark'] .ent-overview-note {
  background: rgba(200, 80, 50, 0.06);
  border-color: rgba(200, 80, 50, 0.12);
}
@media (max-width: 700px) {
  .ent-overview-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .ent-overview {
    /* Stay flat on small screens — no padding override that would
     * re-introduce a card around the disclosure header. */
    padding: 0;
  }
  .ent-ov-step {
    padding: 14px 12px;
  }
}

/* Current plan indicator on pricing card */
.pricing-card.is-current-plan {
  border-color: var(--terra);
  box-shadow:
    0 0 0 1px var(--terra),
    0 4px 20px rgba(217, 119, 87, 0.15);
}
.pricing-card.is-current-plan .pricing-buy {
  display: none;
}
.pricing-card.is-current-plan .pricing-current-badge {
  display: flex !important;
}
.pricing-current-badge {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--terra);
  background: var(--terra-50);
  border-radius: var(--radius-lg);
  margin-top: 4px;
}
[data-theme='dark'] .pricing-card.is-current-plan {
  border-color: #e07c58;
  box-shadow:
    0 0 0 1px #e07c58,
    0 4px 20px rgba(224, 124, 88, 0.15);
}
[data-theme='dark'] .pricing-current-badge {
  color: #e07c58;
  background: rgba(224, 124, 88, 0.1);
}

/* Downgrade blocked state */
.pricing-card.is-lower-plan .pricing-buy {
  background: var(--canvas-200);
  color: var(--canvas-500);
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--canvas-200);
}
.pricing-card.is-lower-plan .pricing-buy::after {
  content: none;
}
[data-theme='dark'] .pricing-card.is-lower-plan .pricing-buy {
  background: var(--canvas-200);
  color: var(--canvas-500);
  border-color: var(--canvas-300);
}

/* ═══════════════════════════════════════════════════════════════════
 * Plan Guard Modal — billing-v2 theme (white card, black primary CTA,
 * monochrome icons, DM Sans body / Space Grotesk display, 14px radius).
 * Used by #modal-plan-guard (credits warning, upgrade confirm, block
 * states) and #modal-sub-confirm (subscription confirm). Both share the
 * same class set so one CSS block restyles every variant.
 * ═══════════════════════════════════════════════════════════════════ */
.plan-guard-modal {
  width: 360px;
  max-width: 92vw;
  max-height: 95vh;
  padding: 28px 28px 22px;
  text-align: left;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.plan-guard-modal::-webkit-scrollbar {
  display: none;
}

/* Icon — monochrome dark, rounded square (10px), subtle off-white panel.
 * Warning and block differentiate via border-color only, not fill color,
 * so the visual language stays consistent with the billing page's
 * minimalist black-and-white aesthetic. */
.plan-guard-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f3;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #0a0a0a;
}
.plan-guard-icon.icon-upgrade {
  /* default — same as base */
}
.plan-guard-icon.icon-warning {
  background: #fafaf7;
  border-color: rgba(0, 0, 0, 0.12);
}
.plan-guard-icon.icon-block {
  background: #fafaf7;
  border-color: rgba(0, 0, 0, 0.18);
}

.plan-guard-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
  text-align: left;
}
.plan-guard-desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.56);
  margin: 0 0 18px 0;
  text-align: left;
}
.plan-guard-desc strong {
  font-weight: 600;
  color: #0a0a0a;
}

.plan-guard-breakdown {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: left;
}
.plan-guard-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.56);
}
.plan-guard-row strong {
  font-weight: 600;
  color: #0a0a0a;
}
.plan-guard-row.total {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 13px;
}
.plan-guard-row.total span:last-child {
  font-weight: 700;
  color: #0a0a0a;
  font-size: 14px;
}

.plan-guard-actions {
  display: flex;
  gap: 8px;
}
#modal-sub-confirm .plan-guard-actions {
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
}
.plan-guard-actions .btn-guard-primary,
.plan-guard-actions .btn-guard-secondary {
  flex: 1;
  padding: 11px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  line-height: 1;
}
.plan-guard-actions .btn-guard-primary {
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #0a0a0a;
}
.plan-guard-actions .btn-guard-primary:hover {
  background: #1c1c1c;
  border-color: #1c1c1c;
}
.plan-guard-actions .btn-guard-secondary {
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.16);
}
.plan-guard-actions .btn-guard-secondary:hover {
  background: #f4f4f3;
  border-color: rgba(0, 0, 0, 0.24);
}
/* ── Secondary button variants used by subscription confirm modal ──
 * Retained from the old design for flows that need danger / ghost buttons
 * (Cancel subscription, Delete account confirmations). Danger keeps its
 * red accent because that's a semantic signal, not a style choice.
 * Primary and ghost adopt the new billing-v2 monochrome palette. */
.plan-guard-btn {
  display: inline-block;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  line-height: 1;
  transition: all 0.18s var(--ease);
}
.plan-guard-btn-primary {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}
.plan-guard-btn-primary:hover {
  background: #1c1c1c;
  border-color: #1c1c1c;
}
.plan-guard-btn-danger {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}
.plan-guard-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.25);
}
.plan-guard-btn-ghost {
  background: #ffffff;
  color: #0a0a0a;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.16);
}
.plan-guard-btn-ghost:hover {
  background: #f4f4f3;
  border-color: rgba(0, 0, 0, 0.24);
}
.plan-guard-btn-danger-text {
  color: #ef4444;
  border-color: transparent;
  background: transparent;
}
.plan-guard-btn-danger-text:hover {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.05);
}
[data-theme='dark'] .plan-guard-btn-ghost {
  background: var(--canvas-100);
  color: var(--canvas-700);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .plan-guard-btn-ghost:hover {
  background: var(--canvas-200);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Close button — subtle, transparent until hover. Different from the old
 * gray-pill style; matches the billing page's quieter visual rhythm. */
.plan-guard-modal .pm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease);
}
.plan-guard-modal .pm-close:hover {
  background: transparent;
  color: #0a0a0a;
}
.plan-guard-modal .pm-close svg {
  display: block;
}

/* ── Dark theme overrides ──
 * Mirror the billing page's dark mode treatment — flip to near-black card
 * with white text, keep the same structural spacing. */
[data-theme='dark'] .plan-guard-modal {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .plan-guard-title {
  color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-desc {
  color: rgba(255, 255, 255, 0.56);
}
[data-theme='dark'] .plan-guard-desc strong {
  color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-icon.icon-warning {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .plan-guard-icon.icon-block {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme='dark'] .plan-guard-breakdown {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .plan-guard-row {
  color: rgba(255, 255, 255, 0.56);
}
[data-theme='dark'] .plan-guard-row strong,
[data-theme='dark'] .plan-guard-row.total span:last-child {
  color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-row.total {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .plan-guard-actions .btn-guard-primary {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-actions .btn-guard-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
}
[data-theme='dark'] .plan-guard-actions .btn-guard-secondary {
  background: transparent;
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme='dark'] .plan-guard-actions .btn-guard-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
}
[data-theme='dark'] .plan-guard-modal .pm-close {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .plan-guard-modal .pm-close:hover {
  background: transparent;
  color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-btn-primary {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
[data-theme='dark'] .plan-guard-btn-primary:hover {
  background: #ffffff;
}

/* Transaction History */
.plan-transactions {
  margin-top: 32px;
}
.plan-section-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-800);
  margin-bottom: 12px;
}
.plan-txn-list {
  border-radius: var(--radius-xl);
  border: 1px solid var(--canvas-150);
  overflow: hidden;
}
.plan-txn-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}
.plan-txn-row {
  display: grid;
  grid-template-columns: 100px 90px 80px 1fr;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--canvas-100);
  align-items: center;
}
.plan-txn-row:last-child {
  border-bottom: none;
}
.plan-txn-date {
  color: var(--text-muted);
  font-size: 13.5px;
}
.plan-txn-type {
  font-weight: 500;
  text-transform: capitalize;
}
.plan-txn-type.purchase {
  color: var(--green-500, #10b981);
}
.plan-txn-type.subscription {
  color: var(--terra);
}
.plan-txn-type.usage {
  color: var(--red-500, #ef4444);
}
.plan-txn-type.trial {
  color: var(--canvas-500);
}
.plan-txn-amount {
  font-weight: 600;
  font-family: var(--font-display);
}
.plan-txn-amount.positive {
  color: var(--green-500, #10b981);
}
.plan-txn-amount.negative {
  color: var(--red-500, #ef4444);
}
.plan-txn-desc {
  color: var(--text-secondary);
}

[data-theme='dark'] .plan-txn-list {
  border-color: var(--canvas-200);
}
[data-theme='dark'] .plan-txn-row {
  border-bottom-color: var(--canvas-200);
}

/* Data table — fit all columns on narrow/vertical screens */
@media (max-width: 1200px) {
  .data-table thead th {
    padding: 5px 8px;
    font-size: 10px;
  }
  .data-table tbody td {
    padding: 9px 8px;
    font-size: 12px;
  }
  .table-actions {
    gap: 3px;
  }
  /* Mobile: shrink to 25×25, but stay a perfect square. Same hard
   * enforcement as the base rule (just with smaller dimensions). */
  .table-icon-btn {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
  }
  .table-icon-btn svg {
    width: 12px;
    height: 12px;
  }
  .session-mode-badge {
    font-size: 10px;
  }
  .session-status-badge {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  /* Heatmap — responsive for tablet */
  .heatmap-section {
    padding: clamp(10px, 2vw, 16px);
  }
  .heatmap-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .heatmap-title {
    font-size: 13.5px;
  }
  .heatmap-tab {
    font-size: 11px;
    padding: 3px 8px;
  }
  .heatmap-year-btn {
    font-size: 13.5px;
    padding: 2px 6px;
  }
  .heatmap-year-label {
    font-size: 11px;
    min-width: 32px;
  }
  .heatmap-cell {
    width: 10px;
    height: 10px;
  }
  .heatmap-month-label {
    font-size: 9px;
    height: 14px;
    line-height: 14px;
  }
  .heatmap-day-labels span {
    font-size: 9px;
    height: 10px;
    line-height: 10px;
    width: 22px;
  }
  .heatmap-day-labels {
    padding-top: 14px;
  }
  .heatmap-grid {
    gap: 2px;
  }
  .heatmap-week {
    gap: 2px;
  }
  .heatmap-grid-wrap {
    gap: 3px;
  }
  .heatmap-stats {
    gap: clamp(6px, 2vw, 12px);
    margin-top: 10px;
    padding-top: 10px;
  }
  .heatmap-stat-val {
    font-size: clamp(13.5px, 1.5vw, 17px);
  }
  .heatmap-stat-lbl {
    font-size: clamp(9.5px, 1vw, 11px);
  }
  .heatmap-legend-label {
    font-size: 9px;
  }
  .heatmap-legend .heatmap-cell {
    width: 9px;
    height: 9px;
  }
  .plan-balance-row {
    grid-template-columns: 1fr;
  }
  /* New Grad banner — stack on narrow screens */
  .ng-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ng-banner-btn {
    align-self: flex-start;
  }
  /* Tablet only (641–768px): compact 3-col packs, 2×2 subs */
  /* Phone override is below at max-width: 640px */
  .plan-mode-box {
    border-radius: 14px;
  }
  .plan-mode-tabs {
    width: 100%;
  }
  .plan-mode-tab {
    flex: 1;
    text-align: center;
    font-size: 11.5px;
    padding: 11px 6px;
  }
  .plan-mode-content {
    padding: 16px;
  }
  /* Pricing cards — compact mini cards */
  .pricing-card {
    padding: 10px 8px 12px;
    border-radius: 12px;
  }
  .pricing-popular,
  .pricing-lifetime {
    padding-top: 18px;
  }
  .pricing-best {
    padding-top: 24px;
  }
  .pricing-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    border-radius: 8px;
  }
  .pricing-icon svg {
    width: 22px;
    height: 22px;
  }
  .pricing-badge {
    font-size: 9px;
    padding: 2px 7px;
    top: -7px;
    letter-spacing: 0.02em;
  }
  .pricing-name {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .pricing-price {
    font-size: 13px;
    margin-bottom: 4px;
  }
  .pricing-interval {
    font-size: 10px;
  }
  /* Hide details by default, show via expand */
  .pricing-details {
    display: none;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--canvas-100);
  }
  .pricing-details.open {
    display: block;
  }
  .pricing-credits {
    font-size: 10px;
    margin-bottom: 4px;
    color: var(--text-muted);
  }
  .pricing-per {
    font-size: 9.5px;
    margin-bottom: 8px;
  }
  .pricing-buy {
    padding: 6px 8px;
    font-size: 10.5px;
    border-radius: 7px;
  }
  .pricing-current-badge {
    font-size: 10px;
    padding: 4px 8px;
    gap: 4px;
  }
  /* Details toggle button */
  .pricing-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--terra);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    letter-spacing: 0.01em;
    transition: opacity 0.15s ease;
  }
  .pricing-details-btn:hover {
    opacity: 0.7;
  }
  .pricing-details-btn::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--terra);
    border-bottom: 1.5px solid var(--terra);
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.2s ease;
  }
  .pricing-details-btn.open::after {
    transform: rotate(-135deg);
    margin-top: 2px;
  }
  /* Info box compact */
  .plan-info-box {
    padding: 12px 14px;
    margin-top: 12px;
    border-radius: 10px;
  }
  .plan-info-title {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .plan-info-items {
    gap: 5px;
  }
  .plan-info-items span {
    font-size: 10px;
    padding: 4px 8px;
  }
  .plan-info-note {
    font-size: 10px;
    margin-top: 6px;
  }
  /* Transaction History — compact card rows */
  .plan-section-title {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .plan-txn-empty {
    padding: 16px;
    font-size: 12px;
  }
  .plan-txn-row {
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .plan-txn-date {
    font-size: 11px;
    grid-row: 1;
    grid-column: 1;
  }
  .plan-txn-type {
    font-size: 10.5px;
    grid-row: 1;
    grid-column: 2;
    text-transform: capitalize;
  }
  .plan-txn-amount {
    font-size: 12px;
    grid-row: 1;
    grid-column: 3;
    text-align: right;
  }
  .plan-txn-desc {
    font-size: 10px;
    grid-row: 2;
    grid-column: 1 / -1;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .plan-transactions {
    margin-top: 16px;
  }
}

/* ============================================
   Completed Session Styles
   ============================================ */

/* --- Status badges --- */
.session-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  /* v1.0.403 — never let the badge shrink. With the labeled action
   * buttons making the Actions cell wider, the surrounding flexbox/grid
   * was occasionally pushing this badge into a truncated state. nowrap
   * already prevents text wrapping; flex-shrink: 0 ensures the BADGE
   * itself can't be compressed by neighbouring siblings. */
  flex-shrink: 0;
}
.session-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-ready {
  color: #475569;
  background: rgba(71, 85, 105, 0.08);
}
.status-completed {
  color: #9c9680;
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .status-ready {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}
[data-theme='dark'] .status-completed {
  color: #9c9680;
  background: rgba(255, 255, 255, 0.07);
}
.status-active {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
[data-theme='dark'] .status-active {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}
.table-icon-btn.active {
  background: var(--brand, #e8834a);
  color: #fff;
  box-shadow: 0 1px 3px rgba(232, 131, 74, 0.3);
}
.table-icon-btn.active:hover {
  background: #d4713a;
  color: #fff;
}

/* --- Session section headers (Live / Upcoming / History) --- */
.session-section {
  margin-bottom: 24px;
}
.session-section:last-child {
  margin-bottom: 0;
}
.session-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted, #6b7280);
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .session-section-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.session-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.section-live .session-section-dot {
  background: #1a1a1c;
}
.section-live .session-section-label {
  color: #1a1a1c;
}
.section-upcoming .session-section-dot {
  background: #64748b;
}
.section-upcoming .session-section-label {
  color: #64748b;
}
.section-history .session-section-dot {
  background: #9ca3af;
}
.section-history .session-section-label {
  color: #9ca3af;
}
[data-theme='dark'] .section-live .session-section-dot {
  background: #e2e8f0;
}
[data-theme='dark'] .section-live .session-section-label {
  color: #e2e8f0;
}
[data-theme='dark'] .section-upcoming .session-section-dot {
  background: #94a3b8;
}
[data-theme='dark'] .section-upcoming .session-section-label {
  color: #94a3b8;
}
[data-theme='dark'] .section-history .session-section-dot {
  background: #4b5563;
}
[data-theme='dark'] .section-history .session-section-label {
  color: #4b5563;
}
.session-section .data-table {
  margin-top: 0;
}

/* --- Completed session row --- */
.session-completed {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.session-completed:hover {
  opacity: 0.8;
}
.session-completed td {
  color: var(--text-muted) !important;
}
.session-completed strong {
  color: var(--text-secondary) !important;
}

/* Dark mode — all text white, table headers white, completed row buttons visible */
[data-theme='dark'] .data-table thead th {
  color: #fff;
}
[data-theme='dark'] .data-table tbody td {
  color: #fff;
}
[data-theme='dark'] .data-table tbody td strong {
  color: var(--canvas-950);
}
[data-theme='dark'] .session-completed td {
  color: var(--text-muted) !important;
}
[data-theme='dark'] .session-completed strong {
  color: var(--text-secondary) !important;
}
/* Duplicate & Delete buttons on completed sessions — keep them bright */
[data-theme='dark'] .session-completed .table-icon-btn:not(.disabled):not([disabled]) {
  color: #fff;
  opacity: 1;
}
[data-theme='dark'] .table-icon-btn {
  color: #ccc;
}
[data-theme='dark'] .table-icon-btn:hover {
  background: transparent;
  color: #fff;
}
[data-theme='dark'] .table-icon-btn.primary {
  background: #131314;
  color: #fff;
}
[data-theme='dark'] .table-icon-btn.primary:hover {
  background: #2a2a2c;
  color: #fff;
}

/* ════════════════════════════════════════════
   RESUME PREVIEW MODAL
   ════════════════════════════════════════════ */
@keyframes previewSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes previewSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
}
@keyframes previewOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes previewSpin {
  to {
    transform: rotate(360deg);
  }
}

#resume-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: previewOverlayIn 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#resume-preview-overlay.closing {
  animation: previewOverlayIn 0.2s ease reverse forwards;
}

.resume-preview-modal {
  width: min(92vw, 900px);
  height: min(88vh, 820px);
  background: var(--canvas-950);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: previewSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 88vh;
  max-width: 92vw;
}
#resume-preview-overlay.closing .resume-preview-modal {
  animation: previewSlideOut 0.2s ease forwards;
}

/* Toolbar */
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--canvas-200);
  background: var(--canvas-950);
  flex-shrink: 0;
  gap: 12px;
}
.preview-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.preview-toolbar-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.preview-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.preview-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--canvas-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
  flex-shrink: 0;
}
.preview-title-group {
  min-width: 0;
}
.preview-doc-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.preview-doc-format {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.preview-tool-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.preview-tool-btn:hover {
  background: var(--canvas-100);
  color: var(--text-primary);
}
.preview-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.preview-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--canvas-200);
  margin: 0 4px;
}
.preview-page-indicator {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.preview-zoom-label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Body / Content */
.preview-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--canvas-100);
  position: relative;
}
.preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.preview-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--canvas-300);
  border-top-color: var(--canvas-950);
  border-radius: 50%;
  animation: previewSpin 0.8s linear infinite;
}
.preview-loading-text {
  font-size: 13px;
  color: var(--text-muted);
}
.preview-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 100%;
}

/* PDF page canvases */
.preview-content canvas {
  max-width: 100%;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  background: #fff;
}

/* HTML doc (DOCX) */
.preview-html-doc {
  background: #fff;
  color: #1a1a1a;
  padding: 40px 48px;
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 800px;
  width: 100%;
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
}
.preview-html-doc h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
.preview-html-doc h2 {
  font-size: 18px;
  margin: 16px 0 6px;
}
.preview-html-doc h3 {
  font-size: 15px;
  margin: 14px 0 4px;
}
.preview-html-doc p {
  margin: 6px 0;
}
.preview-html-doc ul,
.preview-html-doc ol {
  padding-left: 24px;
  margin: 6px 0;
}
.preview-html-doc table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}
.preview-html-doc td,
.preview-html-doc th {
  border: 1px solid #ddd;
  padding: 6px 10px;
  font-size: 13px;
}

/* Text doc (TXT/RTF) */
.preview-text-doc {
  background: #fff;
  color: #1a1a1a;
  padding: 40px 48px;
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 800px;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Clickable resume name in session table */
.resume-preview-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.resume-link-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  transition: color 0.15s;
}
.resume-preview-link:hover .resume-link-name {
  color: var(--terra);
}
.resume-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.resume-preview-link:hover .resume-eye-btn {
  opacity: 1;
  color: var(--terra);
}
.resume-eye-btn:hover {
  background: rgba(240, 137, 104, 0.12);
}

/* Error state */
.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--text-muted);
  text-align: center;
}
.preview-error svg {
  color: var(--canvas-400);
}
.preview-error-msg {
  font-size: 14px;
  max-width: 360px;
}

/* ── Dark mode ── */
[data-theme='dark'] .resume-preview-modal {
  background: var(--canvas-50);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .preview-toolbar {
  background: var(--canvas-50);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .preview-file-icon {
  background: var(--canvas-200);
}
[data-theme='dark'] .preview-body {
  background: var(--canvas-100);
}
[data-theme='dark'] .preview-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .preview-tool-sep {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .preview-content canvas {
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .preview-html-doc,
[data-theme='dark'] .preview-text-doc {
  background: var(--canvas-50);
  color: var(--text-primary);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .preview-html-doc td,
[data-theme='dark'] .preview-html-doc th {
  border-color: var(--canvas-300);
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .resume-preview-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .preview-toolbar {
    padding: 10px 12px;
  }
  .preview-toolbar-center {
    display: none;
  }
  .preview-doc-name {
    max-width: 140px;
  }
  .preview-content {
    padding: 12px;
  }
  .preview-html-doc,
  .preview-text-doc {
    padding: 20px 16px;
  }

  /* ── Phone pricing: 1 card per row, full width, vertically tall ── */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pricing-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pricing-card {
    padding: 40px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    border-radius: 22px;
    width: 100%;
    min-height: 380px;
  }
  .pricing-popular,
  .pricing-lifetime {
    padding-top: 48px;
  }
  .pricing-best {
    padding-top: 48px;
  }
  /* Icon — large and prominent */
  .pricing-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 22px;
    flex-shrink: 0;
    border-radius: 22px;
  }
  .pricing-icon svg {
    width: 52px;
    height: 52px;
  }
  /* Tier name — sidebar-size text, uppercase label */
  .pricing-name {
    font-size: 15px;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--canvas-900);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* Price — big bold hero */
  .pricing-price {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1;
  }
  .pricing-interval {
    font-size: 13px;
  }
  .pricing-badge {
    font-size: 10px;
    padding: 4px 14px;
  }
  .pricing-details {
    display: block;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    width: 100%;
  }
  .pricing-details-btn {
    display: none !important;
  }
  /* Credits — largest text on card */
  .pricing-credits-hero {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--terra);
    margin-bottom: 10px;
  }
  .pricing-credits {
    display: none;
  }
  .pricing-per {
    font-size: 14px;
    margin-bottom: 28px;
    color: var(--text-muted);
    font-weight: 400;
  }
  /* Buy button — always at bottom of tall card */
  .pricing-buy {
    font-size: 16px;
    padding: 16px 12px;
    width: 100%;
    border-radius: 14px;
    font-weight: 700;
    margin-top: auto;
  }
}

/* --- Disabled action buttons --- */
.btn-icon[disabled],
.btn-icon.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* --- Session Detail Modal --- */
.modal.modal-lg {
  width: 720px;
  max-width: 92vw;
}

.session-detail-modal .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 12px;
}

/* ── Session detail close button ─────────────────────────────────────── */
.modal-close-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--canvas-400);
  cursor: pointer;
  padding: 0;
  margin-top: 1px;
  transition:
    color 0.16s ease,
    transform 0.16s ease;
  -webkit-appearance: none;
  outline: none;
}
.modal-close-btn:hover {
  background: transparent;
  color: var(--canvas-800);
  transform: scale(1.1);
}
.modal-close-btn:active {
  background: transparent;
  transform: scale(0.95);
  transition-duration: 0.1s;
}
[data-theme='dark'] .modal-close-btn {
  background: transparent;
  color: var(--canvas-500);
}
[data-theme='dark'] .modal-close-btn:hover {
  background: transparent;
  color: var(--canvas-200);
}
[data-theme='dark'] .modal-close-btn:active {
  background: transparent;
}

.detail-header h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 3px;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.detail-stats-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px 12px;
  border-bottom: 1px solid var(--canvas-100);
}

.detail-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.detail-stat svg {
  color: var(--text-muted);
}

/* Tabs */
.detail-tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--canvas-100);
}

.detail-tab-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.detail-tab-btn.active {
  color: var(--canvas-950);
  border-bottom-color: var(--canvas-950);
}

.detail-tab-btn:hover:not(.active) {
  color: var(--text-secondary);
}

/* Body */
.detail-body {
  padding: 16px 22px 22px;
  max-height: 55vh;
  overflow-y: auto;
}

/* Conversation blocks */
.detail-q-block {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--canvas-300);
}

.detail-a-block {
  margin-bottom: 20px;
  padding: 12px 14px;
  background: rgba(16, 185, 129, 0.04);
  border-radius: var(--radius-md);
  border-left: 3px solid #10b981;
}

.detail-speaker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.detail-speaker.interviewer {
  color: var(--canvas-600);
}
.detail-speaker.ai {
  color: #10b981;
}

.detail-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--canvas-800);
}

.detail-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-bullets li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--canvas-800);
  padding: 3px 0 3px 14px;
  position: relative;
}

.detail-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
}

.detail-full-answer {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--canvas-200);
}

.detail-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.detail-tips-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
}

.detail-tip {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border-radius: var(--radius-full);
}

.detail-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* Insights grid */
.detail-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.detail-insight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--canvas-50);
  border-radius: var(--radius-md);
  text-align: center;
}

.detail-insight-card svg {
  color: var(--text-muted);
}

.detail-insight-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--canvas-950);
  font-family: var(--font-display);
}

.detail-insight-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Dark mode overrides */
[data-theme='dark'] .detail-q-block {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--canvas-400);
}
[data-theme='dark'] .detail-a-block {
  background: rgba(16, 185, 129, 0.06);
}
[data-theme='dark'] .detail-text,
[data-theme='dark'] .detail-bullets li {
  color: var(--canvas-300);
}
[data-theme='dark'] .detail-full-answer {
  color: var(--canvas-400);
  border-top-color: var(--canvas-600);
}
[data-theme='dark'] .detail-tip {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}
[data-theme='dark'] .detail-insight-card {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .detail-insight-value {
  color: #fff;
}
[data-theme='dark'] .detail-tab-btn {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .detail-tab-btn.active {
  color: #fff;
  border-bottom-color: #fff;
}
[data-theme='dark'] .detail-tab-btn:hover:not(.active) {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme='dark'] .detail-header h3 {
  color: #fff;
}
[data-theme='dark'] .detail-meta {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme='dark'] .detail-stat {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme='dark'] .detail-stat svg {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .detail-body {
  color: rgba(255, 255, 255, 0.8);
}
[data-theme='dark'] .detail-insight-label {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme='dark'] .detail-text {
  color: rgba(255, 255, 255, 0.75);
}
[data-theme='dark'] .detail-suggest-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme='dark'] .detail-suggest-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
[data-theme='dark'] .session-detail-modal {
  background: #1a1a1e;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .session-detail-modal .modal-close-btn {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .session-detail-modal .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .detail-stats-bar {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .detail-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .detail-insight-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* --- Ask Atlas Feedback Tab --- */
.detail-feedback-intro {
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.detail-feedback-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-suggest-btn {
  background: var(--canvas-50);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.detail-suggest-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-950);
  border-color: var(--canvas-300);
}

.detail-feedback-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 32vh;
  overflow-y: auto;
}

.detail-fb-msg {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88%;
  animation: fadeSlideUp 0.25s ease;
}

.detail-fb-msg.user {
  align-self: flex-end;
  background: var(--canvas-900);
  color: var(--white);
  border-radius: 14px 14px 4px 14px;
}

.detail-fb-msg.ai {
  align-self: flex-start;
  background: var(--canvas-50);
  color: var(--canvas-800);
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--canvas-100);
}

.detail-fb-msg.ai p {
  margin: 0 0 6px;
}
.detail-fb-msg.ai p:last-child {
  margin-bottom: 0;
}
.detail-fb-score {
  font-weight: 700;
  color: #10b981;
}
.detail-fb-verdict {
  font-style: italic;
  color: var(--text-muted);
  font-size: 12.5px;
}

.detail-feedback-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.detail-feedback-input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-full);
  font-family: var(--font);
  font-size: 13.5px;
  background: var(--white);
  color: var(--canvas-950);
  outline: none;
  transition: border-color 0.2s;
}
.detail-feedback-input:focus {
  border-color: var(--canvas-400);
}

.detail-feedback-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--terra);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
  transition: all 0.15s var(--ease);
}
.detail-feedback-send svg {
  overflow: visible;
}
.detail-feedback-send:hover {
  background: var(--terra-dark, #c2643a);
  transform: scale(1.06);
}
[data-theme='dark'] .detail-feedback-send {
  background: var(--terra);
  color: var(--white);
}
[data-theme='dark'] .detail-feedback-send:hover {
  background: var(--terra-dark, #c2643a);
}
[data-theme='dark'] .detail-feedback-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode */
[data-theme='dark'] .detail-suggest-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--canvas-400);
}
[data-theme='dark'] .detail-suggest-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--canvas-200);
}
[data-theme='dark'] .detail-fb-msg.user {
  background: var(--canvas-800);
}
[data-theme='dark'] .detail-fb-msg.ai {
  background: rgba(255, 255, 255, 0.04);
  color: var(--canvas-300);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .detail-feedback-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--canvas-200);
}

@media (max-width: 600px) {
  .detail-insights-grid {
    grid-template-columns: 1fr;
  }
  .detail-stats-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .detail-feedback-suggestions {
    gap: 6px;
  }
}

/* ============================================
   Payment Modal — Single Column, Compact
   ============================================ */

.pm {
  width: 460px;
  max-width: 94vw;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  border-radius: 14px !important;
  overflow: hidden;
  max-height: 92vh;
}
.pm .modal-head,
.pm .modal-foot {
  display: none;
}

/* Top strip — order summary (compact) */
.pm-sidebar {
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: var(--canvas-950);
  color: #fff;
}
.pm-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.pm-plan-label {
  display: none;
}
.pm-plan-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}
.pm-price-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 0;
}
.pm-price {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.3vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.pm-price-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
}
.pm-divider,
.pm-summary-row,
.pm-secure {
  display: none;
}

/* Form area */
.pm-form-side {
  flex: 1;
  padding: 16px 20px 20px;
  overflow-y: auto;
  position: relative;
  background: var(--white);
}
.pm-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px;
  border-radius: 8px;
  transition: all 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Method tabs */
.pm-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  background: var(--canvas-50);
  border-radius: 10px;
  padding: 3px;
}
.pm-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  border-bottom: none;
  margin-bottom: 0;
}
.pm-tab:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.03);
}
.pm-tab.active {
  color: var(--text-primary);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}
.pm-tab.active svg {
  color: var(--text-primary);
}
.pm-tab svg {
  width: 15px;
  height: 15px;
}

/* Form fields */
.pm-field {
  margin-bottom: 12px;
}
.pm-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.pm-field input,
.pm-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text-primary);
  background: var(--white);
  transition: all 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.pm-field select {
  cursor: pointer;
  padding-right: 28px;
}
.pm-field input:focus,
.pm-field select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.08);
}
.pm-field input::placeholder {
  color: var(--canvas-400);
}
.pm-field input.pm-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
.pm-field-row {
  display: flex;
  gap: 8px;
}
.pm-field-row .pm-field {
  flex: 1;
}

/* Card number with brand icons */
.pm-card-input-wrap {
  position: relative;
}
.pm-card-input-wrap input {
  padding-right: 120px;
}
.pm-card-brands {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 3px;
  align-items: center;
}
.pm-card-brands svg {
  border-radius: 3px;
  opacity: 0.3;
  transition: opacity 0.2s;
}
.pm-card-brands svg.pm-brand-detected {
  opacity: 1;
}

.pm-billing-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--canvas-100);
}

/* Error */
.pm-error {
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 13.5px;
  margin-bottom: 10px;
}

/* Pay button */
.pm-pay-btn {
  width: 100%;
  padding: 9px 16px;
  background: var(--terra);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.pm-pay-btn:hover {
  background: var(--terra-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
}
.pm-pay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Stripe Checkout redirect info (BUG C7 FIX) */
.pm-stripe-redirect-info {
  text-align: center;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pm-stripe-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
}
.pm-stripe-info-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}
.pm-stripe-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pm-stripe-method-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--canvas-300);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
[data-theme='dark'] .pm-stripe-info-icon {
  background: rgba(217, 119, 87, 0.15);
}
[data-theme='dark'] .pm-stripe-method-badge {
  background: var(--canvas-200);
  border-color: var(--canvas-400);
  color: var(--canvas-600);
}

/* Apple Pay section */
.pm-apple-prompt {
  text-align: center;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pm-apple-icon {
  display: none;
}
.pm-apple-prompt h4 {
  display: none;
}
.pm-apple-prompt p {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.5;
}
.pm-apple-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
}
.pm-apple-btn:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.pm-apple-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Bank / Plaid section */
.pm-plaid-prompt {
  padding: 4px 0 0;
}
.pm-plaid-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pm-plaid-logo svg {
  color: var(--text-primary);
}
.pm-plaid-logo span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.12em;
}
.pm-plaid-prompt > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pm-plaid-banks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.pm-bank-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-150);
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.pm-bank-chip svg {
  border-radius: 3px;
  flex-shrink: 0;
}
.pm-bank-more {
  background: none;
  border-style: dashed;
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
}
.pm-plaid-btn {
  width: 100%;
  padding: 9px 16px;
  background: var(--canvas-900);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pm-plaid-btn svg {
  border-radius: 2px;
}
.pm-plaid-btn:hover {
  background: var(--canvas-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Plaid connected */
.pm-plaid-connected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  margin-bottom: 12px;
}
.pm-plaid-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-plaid-connected strong {
  font-size: 14.5px;
  color: var(--text-primary);
  display: block;
}
.pm-plaid-connected span {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.pm-plaid-change {
  background: none;
  border: none;
  font-size: 13.5px;
  color: var(--terra);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.pm-plaid-change:hover {
  text-decoration: underline;
}
.pm-plaid-remove {
  color: var(--canvas-500);
  font-weight: 500;
}
.pm-plaid-remove:hover {
  color: #dc2626;
  text-decoration: underline;
}
.pm-bank-pay-btn {
  margin-top: 0;
}

/* Responsive */
@media (max-width: 500px) {
  .pm {
    width: 96vw;
    max-width: 96vw;
    border-radius: 12px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .pm-sidebar {
    padding: 10px 12px;
    gap: 4px;
  }
  .pm-brand {
    font-size: 12.5px;
    gap: 5px;
  }
  .pm-brand svg {
    width: 16px;
    height: 16px;
  }
  .pm-plan-name {
    font-size: 12.5px;
  }
  .pm-price {
    font-size: 18px;
  }
  .pm-price-note {
    font-size: 11px;
  }
  .pm-close {
    padding: 5px;
  }
  .pm-close svg {
    width: 12px;
    height: 12px;
  }
  .pm-form-side {
    padding: 12px 14px 16px;
  }
  .pm-tabs {
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .pm-tab {
    font-size: 12px;
    padding: 6px 10px;
    gap: 5px;
    border-radius: 6px;
  }
  .pm-tab svg {
    width: 12px;
    height: 12px;
  }
  .pm-field {
    margin-bottom: 10px;
  }
  .pm-field label {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .pm-field input,
  .pm-field select {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 7px;
  }
  .pm-field-row {
    gap: 6px;
  }
  .pm-card-brands {
    gap: 3px;
    right: 8px;
  }
  .pm-card-brands svg {
    width: 28px;
    height: 18px;
  }
  .pm-billing-label {
    font-size: 11px;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  .pm-pay-btn {
    font-size: 12.5px;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
  }
  .pm-error {
    font-size: 11px;
    padding: 8px 10px;
  }
  .pm-apple-prompt p {
    font-size: 12px;
  }
  .pm-apple-btn {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 7px;
    gap: 6px;
  }
  .pm-apple-btn svg {
    width: 14px;
    height: 17px;
  }
  .pm-apple-footer {
    font-size: 10px;
  }
  .pm-plaid-prompt > p {
    font-size: 12px;
  }
  .pm-plaid-btn {
    font-size: 12.5px;
    padding: 9px 16px;
  }
  .pm-bank-chip {
    font-size: 12px;
    padding: 5px 8px;
  }
  /* Contact Sales modal */
  .payment-modal {
    max-width: 94vw;
  }
  .payment-modal .modal-head h3 {
    font-size: 13.5px;
  }
  .payment-modal .modal-desc {
    font-size: 12px;
    margin-bottom: 12px;
  }
  .payment-modal .form-group {
    margin-bottom: 10px;
  }
  .payment-modal label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
  }
  .payment-modal .form-input {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .payment-modal textarea.form-input {
    font-size: 12.5px;
  }
  .payment-modal .custom-select .cs-trigger {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .payment-modal .cs-option {
    font-size: 12.5px;
    padding: 7px 10px;
  }
  .payment-modal .btn-primary {
    font-size: 12.5px;
    padding: 9px 14px;
  }
  /* Link bar compact */
  .link-bar {
    margin-bottom: 10px;
  }
  .link-bar-login,
  .link-bar-top {
    padding: 6px 8px;
    border-radius: 8px;
  }
  .link-bar-email {
    font-size: 12.5px;
  }
  .link-bar-badge {
    font-size: 11px;
    padding: 3px 6px;
    gap: 3px;
  }
  .link-bar-badge svg {
    width: 10px;
    height: 10px;
  }
  .link-bar-dots {
    width: 24px;
    height: 24px;
  }
  /* Plan guard modals (cancel / renew / upgrade / feedback) — mobile compact.
   * Trims padding, shrinks the title, keeps the button sizing readable on
   * small screens. Match the billing-v2 desktop spec above as closely as
   * possible so the only visual delta is whitespace. */
  .plan-guard-modal {
    width: 340px;
    max-width: 92vw;
    padding: 22px 22px 18px;
  }
  .plan-guard-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
  }
  .plan-guard-icon svg {
    width: 16px;
    height: 16px;
  }
  .plan-guard-title {
    font-size: 15.5px;
    margin-bottom: 5px;
  }
  .plan-guard-desc {
    font-size: 12.5px;
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .plan-guard-breakdown {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
  }
  .plan-guard-row {
    font-size: 12px;
    padding: 3px 0;
  }
  .plan-guard-row.total {
    margin-top: 6px;
    padding-top: 8px;
    font-size: 12.5px;
  }
  .plan-guard-row.total span:last-child {
    font-size: 13px;
  }
  .plan-guard-actions {
    gap: 8px;
  }
  .plan-guard-actions .btn-guard-primary,
  .plan-guard-actions .btn-guard-secondary {
    padding: 10px 14px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .plan-guard-btn {
    padding: 10px 14px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .plan-guard-btn-ghost {
    padding: 10px 14px;
    font-size: 12.5px;
  }
  .plan-guard-modal .pm-close {
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
  }
  .plan-guard-modal .pm-close {
    width: 26px;
    height: 26px;
    top: 10px;
    right: 10px;
  }
  .plan-guard-modal .pm-close svg {
    width: 13px;
    height: 13px;
  }
  /* Cancel survey form — compact */
  .plan-guard-modal label {
    font-size: 12.5px;
  }
  .plan-guard-modal input[type='radio'] {
    width: 14px;
    height: 14px;
  }
  .plan-guard-modal textarea {
    font-size: 12px;
    padding: 8px 10px;
  }
  /* Profile edit modal — compact */
  .profile-edit-modal {
    width: 320px;
    max-width: 90vw;
  }
  .profile-edit-header {
    padding: 14px 16px 10px;
    gap: 6px;
  }
  .profile-edit-header h3 {
    font-size: 13.5px;
  }
  .profile-edit-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  /* Mobile: tighten the "Change photo" / "Remove" pair */
  .profile-edit-photo-actions {
    gap: 10px;
  }
  .profile-edit-photo-btn {
    font-size: 12px;
    padding: 5px 12px;
  }
  .profile-edit-body {
    padding: 10px 16px;
    gap: 6px;
  }
  .profile-edit-field label {
    font-size: 9.5px;
    letter-spacing: 0.4px;
  }
  .profile-edit-field .input {
    font-size: 12.5px;
    padding: 6px 9px;
  }
  .profile-edit-pw-toggle {
    font-size: 11px;
  }
  .profile-edit-pw-fields {
    gap: 5px;
  }
  .profile-edit-footer {
    padding: 10px 16px;
    gap: 6px;
  }
  .profile-edit-footer .btn {
    font-size: 12px;
    padding: 6px 14px;
  }
  .profile-edit-modal .pm-close {
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
  }
  .profile-edit-modal .pm-close svg {
    width: 12px;
    height: 12px;
  }
}

/* ---- Dark theme ---- */
[data-theme='dark'] .pm-sidebar {
  background: var(--canvas-100);
}
[data-theme='dark'] .pm-form-side {
  background: var(--canvas-50);
}
/* Tabs */
[data-theme='dark'] .pm-tabs {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .pm-tab {
  color: var(--text-muted);
}
[data-theme='dark'] .pm-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .pm-tab.active {
  color: var(--canvas-950);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .pm-tab.active svg {
  color: var(--canvas-950);
}
/* Fields */
[data-theme='dark'] .pm-field label {
  color: var(--text-secondary);
}
[data-theme='dark'] .pm-field input,
[data-theme='dark'] .pm-field select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
[data-theme='dark'] .pm-field input:focus,
[data-theme='dark'] .pm-field select:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .pm-field input::placeholder {
  color: var(--canvas-500);
}
[data-theme='dark'] .pm-field select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
[data-theme='dark'] .pm-billing-label {
  color: var(--text-secondary);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .pm-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
[data-theme='dark'] .pm-pay-btn {
  background: var(--terra);
}
[data-theme='dark'] .pm-pay-btn:hover {
  background: var(--terra-700);
}
/* Card brands */
[data-theme='dark'] .pm-card-brands svg {
  opacity: 0.5;
}
[data-theme='dark'] .pm-card-brands svg.pm-brand-detected {
  opacity: 1;
}
/* Apple Pay — intentional inverse for Apple branding */
[data-theme='dark'] .pm-apple-prompt p {
  color: var(--text-muted);
}
[data-theme='dark'] .pm-apple-btn {
  background: #fff;
  color: #000;
}
[data-theme='dark'] .pm-apple-btn:hover {
  background: #eee;
}
[data-theme='dark'] .pm-apple-btn svg {
  fill: #000;
}
[data-theme='dark'] .pm-apple-footer {
  color: var(--canvas-500);
}
/* Plaid */
[data-theme='dark'] .pm-plaid-logo svg {
  color: var(--text-secondary);
}
[data-theme='dark'] .pm-plaid-logo span {
  color: var(--text-primary);
}
[data-theme='dark'] .pm-plaid-prompt > p {
  color: var(--text-muted);
}
[data-theme='dark'] .pm-bank-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}
[data-theme='dark'] .pm-bank-more {
  color: var(--canvas-500);
}
/* Plaid button — intentional inverse for Plaid branding */
[data-theme='dark'] .pm-plaid-btn {
  background: #eee;
  color: #111;
}
[data-theme='dark'] .pm-plaid-btn:hover {
  background: #fff;
}
[data-theme='dark'] .pm-plaid-btn svg path {
  fill: #111;
}
[data-theme='dark'] .pm-plaid-connected {
  background: rgba(22, 163, 106, 0.1);
  border-color: rgba(22, 163, 106, 0.25);
}
[data-theme='dark'] .pm-plaid-connected strong {
  color: var(--text-primary);
}
[data-theme='dark'] .pm-plaid-connected span {
  color: var(--text-muted);
}

/* ---- Link (inline in Card tab) ---- */
.link-bar {
  margin-bottom: 14px;
}
.link-bar-login,
.link-bar-top {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 8px;
  background: var(--canvas-50);
  position: relative;
  gap: 6px;
}
.link-bar-email {
  flex: 1;
  border: none !important;
  background: none !important;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text-primary);
  padding: 2px 0;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0;
}
.link-bar-email::placeholder {
  color: var(--canvas-400);
}
.link-bar-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-500);
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.link-bar-badge:hover {
  background: rgba(0, 214, 111, 0.08);
}
.link-bar-badge span {
  color: #00d66f;
}
.link-bar-dots {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--canvas-400);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.link-bar-dots:hover {
  background: var(--canvas-100);
  color: var(--canvas-600);
}
.link-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 140px;
  z-index: 10;
  overflow: hidden;
}
.link-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font);
}
.link-menu button:hover {
  background: var(--canvas-50);
}
.link-bar-email-display {
  flex: 1;
  font-size: 14.5px;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-bar-logout {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.link-bar-logout:hover {
  text-decoration: underline;
}
.link-saved-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 8px;
  margin-top: 8px;
  background: var(--white);
}
.link-saved-card-brand {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.link-saved-card-info {
  flex: 1;
  min-width: 0;
}
.link-saved-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}
.link-saved-card-num {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.link-saved-change {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
}
.link-saved-change:hover {
  text-decoration: underline;
}
/* OTP overlay */
.link-otp-overlay {
  padding: 14px 0 4px;
  text-align: center;
}
.link-otp-overlay p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.link-otp-overlay p strong {
  color: var(--text-primary);
}
.link-otp-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.link-otp-digit {
  width: 36px;
  height: 42px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 8px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.link-otp-digit:focus {
  border-color: #00d66f;
  box-shadow: 0 0 0 3px rgba(0, 214, 111, 0.15);
}
.link-otp-dash {
  font-size: 16px;
  color: var(--canvas-300);
  margin: 0 2px;
}
.link-resend {
  background: none;
  border: none;
  color: #00d66f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  font-family: var(--font);
}
.link-resend:hover {
  text-decoration: underline;
}
/* Card selector list (Link) */
.link-cards-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.link-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.link-card-item:hover {
  background: var(--canvas-50);
}
.link-card-item.selected {
  border-color: #00d66f;
  background: rgba(0, 214, 111, 0.04);
}
.link-card-brand {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.link-card-brand.visa {
  background: #1a1f71;
}
.link-card-brand.mastercard {
  background: #eb001b;
}
.link-card-brand.amex {
  background: #2e77bc;
}
.link-card-brand.discover {
  background: #ff6000;
}
.link-card-brand.default {
  background: var(--canvas-400);
}
.link-card-info {
  flex: 1;
  min-width: 0;
}
.link-card-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.link-card-exp {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.link-card-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--canvas-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.link-card-item.selected .link-card-check {
  background: #00d66f;
  border-color: #00d66f;
}
.link-add-card-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #00d66f;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font);
}
.link-add-card-btn:hover {
  text-decoration: underline;
}
/* Dark theme Link */
[data-theme='dark'] .link-bar-login,
[data-theme='dark'] .link-bar-top {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .link-bar-email {
  color: var(--text-primary);
}
[data-theme='dark'] .link-bar-email::placeholder {
  color: var(--canvas-500);
}
[data-theme='dark'] .link-saved-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .link-otp-digit {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
[data-theme='dark'] .link-otp-digit:focus {
  border-color: #00d66f;
  box-shadow: 0 0 0 3px rgba(0, 214, 111, 0.15);
}
[data-theme='dark'] .link-menu {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .link-menu button {
  color: var(--text-secondary);
}
[data-theme='dark'] .link-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .link-card-item {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .link-card-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .link-card-item.selected {
  border-color: #00d66f;
  background: rgba(0, 214, 111, 0.08);
}
[data-theme='dark'] .link-card-check {
  border-color: #555;
}

/* ============================================
   Global Mobile Responsive Fixes
   ============================================ */

/* iOS Safari auto-zoom prevention moved to main.css global rule:
   input, textarea, select, button { font-size: max(16px, 1em); }
   No per-class overrides needed — the global rule covers all form elements. */

/* Tablet (768px) */
@media (max-width: 768px) {
  .input-row {
    grid-template-columns: 1fr;
  }
  .modal {
    width: 92vw;
  }
  .modal-head {
    padding: 16px 18px 0;
  }
  .modal-body {
    padding: 14px 18px;
  }
  .modal-foot {
    padding: 12px 18px;
  }
  .settings-row-label {
    white-space: normal;
  }
  .settings-shortcut {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Settings tablet — token-driven values inherited from desktop.
   * Removed the legacy mini-typography here that was forcing 11px
   * uppercase h3 with bottom-padding underline; the new design system
   * already handles section titles consistently across viewports. */
  .settings-hint {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .settings-row {
    padding: 6px 0;
    gap: 8px;
  }
  .settings-row-label {
    font-size: 12px;
  }
  .toggle-row {
    font-size: 12px;
    padding: 7px 0;
  }
  .toggle {
    width: 28px;
    height: 16px;
    border-radius: 8px;
  }
  .toggle::after {
    width: 12px;
    height: 12px;
  }
  .toggle-row input:checked + .toggle::after {
    transform: translateX(12px);
  }
  .pill-btn {
    font-size: 12px;
    padding: 4px 10px;
  }
  .pill-group {
    gap: 4px;
  }
  .settings-shortcut {
    padding: 6px 0;
    font-size: 12px;
  }
  kbd {
    font-size: 10px;
    padding: 2px 5px;
    min-width: 18px;
    min-height: 18px;
  }
  .settings-about-row {
    padding: 6px 0;
    font-size: 12px;
  }
  .settings-about-val,
  .settings-about-link {
    font-size: 11px;
  }
  .settings-profile-avatar {
    width: 32px;
    height: 32px;
    font-size: 13.5px;
  }
  .settings-profile-name {
    font-size: 13px;
  }
  .settings-profile-email {
    font-size: 11px;
  }
  .settings-profile-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .settings-profile-edit-btn {
    width: 26px;
    height: 26px;
  }
  .theme-opt {
    padding: 7px 14px;
    font-size: 12.5px;
    gap: 5px;
  }
  .theme-switcher {
    padding: 3px;
    border-radius: 12px;
  }
  .settings-theme-card {
    padding: 10px 12px;
    gap: 8px;
    max-width: 280px;
    border-radius: 12px;
  }
  .stc-icon-wrap {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .stc-icon-wrap svg {
    width: 15px;
    height: 15px;
  }
  .stc-info strong {
    font-size: 12.5px;
  }
  .stc-info span {
    font-size: 10.5px;
  }
  .stc-cycle svg {
    width: 14px;
    height: 14px;
  }
  .settings-password-form .input-sm {
    padding: 6px 9px;
    font-size: 12px;
  }
  .settings-pm-card {
    font-size: 12.5px;
  }
  /* Plan tab compact */
  .plan-hero {
    margin-bottom: 20px;
    min-height: auto;
    flex-direction: column;
  }
  .plan-hero-left {
    padding: 14px 16px;
  }
  .plan-hero-left::after {
    display: none;
  }
  .plan-hero-right {
    width: 100%;
    padding: 0 16px 14px;
    gap: 8px;
  }
  .plan-hero-name {
    font-size: 16px;
  }
  .plan-hero-status {
    font-size: 10px;
    gap: 5px;
    letter-spacing: 0.6px;
  }
  .plan-hero-pulse {
    width: 6px;
    height: 6px;
  }
  .plan-hero-desc {
    font-size: 12px;
  }
  .plan-hero-meta {
    gap: 12px;
  }
  .plan-hero-meta-item {
    font-size: 12px;
    gap: 4px;
  }
  .plan-hero-perks {
    gap: 5px;
  }
  .plan-hero-perk {
    font-size: 11px;
    gap: 5px;
  }
  .plan-hero-manage-btn {
    font-size: 12.5px;
    padding: 6px 12px;
  }
  .plan-hero-cancel-btn {
    font-size: 11px;
    padding: 4px 12px;
  }
  .plan-usage-row {
    margin-bottom: 16px;
  }
  .plan-usage-card {
    padding: 12px 14px;
  }
  .plan-usage-title {
    font-size: 12px;
  }
  .plan-usage-period {
    font-size: 10.5px;
  }
  .plan-usage-num {
    font-size: 16px;
  }
  .plan-usage-label {
    font-size: 10.5px;
  }
  .plan-usage-header {
    margin-bottom: 8px;
  }
  .plan-usage-stats {
    margin-bottom: 10px;
  }
  .plan-usage-footer {
    font-size: 10.5px;
    margin-top: 8px;
  }
  .plan-balance-row,
  .plan-free-row {
    gap: 10px;
    margin-bottom: 20px;
  }
  .plan-balance-card,
  .plan-trial-card {
    padding: 12px;
  }
  .plan-balance-card .stat-num {
    font-size: 13.5px;
  }
  .plan-balance-card .stat-lbl {
    font-size: 10.5px;
  }
  .plan-mode-box {
    border-radius: 12px;
  }
  .plan-mode-tabs {
    margin-bottom: 0;
  }
  .plan-mode-tab {
    padding: 10px 8px;
    font-size: 11.5px;
  }
  .plan-mode-content {
    padding: 14px;
  }
  .plan-manage-item {
    font-size: 12.5px;
    padding: 7px 10px;
    gap: 8px;
  }
  .share-options {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px;
  }
  .share-option {
    flex-direction: row;
    text-align: left;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 10px;
  }
  .share-option .share-option-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .share-option .share-option-icon svg {
    width: 16px;
    height: 16px;
  }
  .share-option strong {
    font-size: 12px;
  }
  .share-option span {
    font-size: 10px;
  }
  /* Hide desktop-only share options on mobile */
  .share-option-desktop {
    display: none;
  }
  .radio-card {
    padding: 14px 16px;
  }
  .file-info-bar {
    flex-wrap: wrap;
  }
  .session-history-item {
    gap: 10px;
    padding: 12px 14px;
  }
  /* Data table — extra compact at tablet, also hide Created column */
  .data-table thead th {
    padding: 4px 6px;
    font-size: 9.5px;
  }
  .data-table tbody td {
    padding: 8px 6px;
    font-size: 11px;
  }
  .data-table thead th:nth-child(6),
  .data-table tbody td:nth-child(6) {
    display: none;
  }
  /* Restore Actions column (nth-child 6) for sessions and resumes */
  #tab-sessions .data-table thead th:nth-child(6),
  #tab-sessions .data-table tbody td:nth-child(6),
  #tab-resumes .data-table thead th:nth-child(6),
  #tab-resumes .data-table tbody td:nth-child(6) {
    display: table-cell;
  }
  .table-icon-btn {
    width: 24px;
    height: 24px;
  }
  .table-icon-btn svg {
    width: 11px;
    height: 11px;
  }
  /* Create/Edit Session wizard — compact */
  .modal.modal-wizard {
    width: 92vw;
  }
  .wizard-dot {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .wizard-line {
    width: 24px;
  }
  .session-mode-toggle {
    gap: 8px;
    margin-bottom: 14px;
  }
  .session-mode-btn {
    padding: 12px 10px;
  }
  .session-mode-btn svg {
    width: 22px;
    height: 22px;
  }
  .session-mode-btn span {
    font-size: 12.5px;
  }
  .session-mode-btn small {
    font-size: 11px;
  }
  .model-grid {
    gap: 6px;
  }
  .model-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .model-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }
  .model-card-icon svg {
    width: 18px;
    height: 18px;
  }
  .model-name {
    font-size: 12.5px;
  }
  .model-tier {
    font-size: 10px;
  }
  .model-card-tag {
    font-size: 8.5px;
    top: 5px;
    right: 6px;
    padding: 1px 5px;
  }
  .auto-answer-row {
    padding: 12px;
    margin-top: 10px;
  }
  .auto-answer-label {
    font-size: 12.5px;
  }
  .auto-answer-desc {
    font-size: 11px;
  }
  .custom-prompt-recommend {
    padding: 10px 12px;
  }
  .recommend-actions {
    flex-direction: row;
  }
  /* Confirm action dialogs — mobile-friendly touch targets */
  .confirm-action-card {
    width: calc(100vw - 40px);
    max-width: 380px;
    padding: 24px 20px 20px;
  }
  .confirm-action-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .confirm-action-icon svg {
    width: 22px;
    height: 22px;
  }
  .confirm-action-title {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .confirm-action-msg {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.55;
  }
  .confirm-action-btns .btn {
    min-width: 100px;
    font-size: 15px;
    padding: 11px 20px;
    min-height: 44px;
    border-radius: 10px;
  }
  /* Custom select dropdown — compact on mobile */
  .csel-trigger {
    padding: 8px 12px;
    font-size: 13px;
  }
  .csel-item {
    padding: 8px 12px;
    font-size: 13px;
    gap: 8px;
  }
  .csel-menu {
    padding: 4px;
  }
}

/* Compact layout — Material Design 3 "Compact" window class only (<600px).
   Phones get card-style data tables, full-width content, big touch targets.
   Tablets ≥600px (portrait + landscape) and desktop get the wide-table layout.
   Material Design 3 window size classes:
     Compact:   <600px  → mobile cards (this block)
     Medium:    600-839 → desktop layout
     Expanded:  ≥840    → desktop layout
   Reference: developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes */
@media (max-width: 599px) {
  /* Heatmap — compact for small phones */
  .heatmap-section {
    padding: 10px;
  }
  .heatmap-header {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .heatmap-title {
    font-size: 13px;
    width: 100%;
  }
  .heatmap-tabs {
    order: 2;
  }
  .heatmap-year-nav {
    order: 1;
  }
  .heatmap-tab {
    font-size: 10.5px;
    padding: 3px 7px;
  }
  .heatmap-year-btn {
    font-size: 12.5px;
    padding: 2px 5px;
  }
  .heatmap-year-label {
    font-size: 10.5px;
    min-width: 30px;
  }
  .heatmap-cell {
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
  }
  .heatmap-month-label {
    font-size: 8px;
    height: 12px;
    line-height: 12px;
  }
  .heatmap-day-labels span {
    font-size: 8px;
    height: 9px;
    line-height: 9px;
    width: 18px;
  }
  .heatmap-day-labels {
    padding-top: 12px;
    gap: 2px;
  }
  .heatmap-grid {
    gap: 2px;
  }
  .heatmap-week {
    gap: 2px;
  }
  .heatmap-grid-wrap {
    gap: 2px;
  }
  .heatmap-stats {
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
  }
  .heatmap-stat-val {
    font-size: 13.5px;
  }
  .heatmap-stat-lbl {
    font-size: 10.5px;
  }
  .heatmap-legend-label {
    font-size: 8px;
  }
  .heatmap-legend .heatmap-cell {
    width: 8px;
    height: 8px;
  }
  .heatmap-footer {
    margin-top: 6px;
  }
  .btn {
    font-size: 12.5px;
    padding: 7px 14px;
  }
  .modal {
    max-width: 100vw;
    border-radius: var(--radius-xl) !important;
    touch-action: manipulation;
  }
  .modal-desc {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .modal-close {
    width: 36px;
    height: 36px;
  }
  .modal.modal-sm {
    width: calc(100vw - 32px);
    max-width: 400px;
  }
  .modal-head h3 {
    font-size: 16px;
  }
  .modal-body {
    padding: 16px 18px;
    font-size: 14px;
  }
  .modal-foot {
    padding: 14px 18px;
    gap: 10px;
  }
  .modal-foot .btn {
    flex: 1;
    min-height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .stat-card {
    padding: 14px 10px 12px;
    gap: 4px;
    border-radius: var(--radius-lg);
  }
  .stat-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .stat-icon-illustrative svg {
    width: 28px;
    height: 28px;
  }
  .stat-num {
    font-size: 22px;
  }
  .stat-lbl {
    font-size: 13px;
  }
  .upload-zone {
    padding: 20px;
  }
  .toggle-row {
    font-size: 15px;
  }
  .settings-row {
    flex-wrap: wrap;
    padding: 6px 0;
  }
  /* Settings mobile — DO NOT force uppercase or shrink h3 here.
   * The token-driven design system in the desktop block (~line 5897)
   * already declares the correct sentence-case 15px/600 treatment for
   * .settings-section h3, and the @media (max-width: 599px) tokens at
   * the bottom of this file tighten the card padding for phones.
   * The old "uppercase 13px letterspaced" override that lived here was
   * the source of the unprofessional ALL-CAPS section labels. */
  .settings-row-label {
    font-size: 15px;
  }
  .toggle-row {
    font-size: 15px;
    padding: 8px 0;
  }
  .toggle {
    width: 34px;
    height: 20px;
    border-radius: 10px;
  }
  .toggle::after {
    width: 16px;
    height: 16px;
  }
  .toggle-row input:checked + .toggle::after {
    transform: translateX(14px);
  }
  .pill-btn {
    font-size: 13px;
    padding: 6px 12px;
  }
  .pill-group {
    gap: 4px;
  }
  .settings-shortcut {
    padding: 6px 0;
    font-size: 14px;
  }
  kbd {
    font-size: 12px;
    padding: 3px 6px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 5px;
  }
  .settings-about-row {
    padding: 6px 0;
    font-size: 14px;
  }
  .settings-about-val,
  .settings-about-link {
    font-size: 13px;
  }
  .settings-profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .settings-profile-name {
    font-size: 15px;
  }
  .settings-profile-email {
    font-size: 13px;
  }
  .settings-profile-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .theme-opt {
    padding: 8px 14px;
    font-size: 14px;
  }
  .settings-theme-card {
    padding: 10px 12px;
    gap: 8px;
    max-width: 280px;
    border-radius: 12px;
  }
  .stc-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .stc-icon-wrap svg {
    width: 16px;
    height: 16px;
  }
  .stc-info strong {
    font-size: 14px;
  }
  .stc-info span {
    font-size: 12px;
  }
  .stc-cycle svg {
    width: 14px;
    height: 14px;
  }
  .radio-card {
    padding: 12px 14px;
  }
  .radio-card strong {
    font-size: 15px;
  }
  .radio-card span {
    font-size: 13px;
  }
  .settings-password-form .input-sm {
    padding: 8px 12px;
    font-size: 15px;
  }
  .coach-scope-tabs {
    width: 100%;
  }
  .coach-scope-tab {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .session-history-item {
    gap: 10px;
    padding: 12px 14px;
  }
  .session-history-item .sh-score {
    display: none;
  }
  /* Create/Edit Session wizard — extra compact, no zoom/flex */
  .modal.modal-wizard {
    width: 96vw;
    touch-action: manipulation;
  }
  .modal.modal-wizard input,
  .modal.modal-wizard select,
  .modal.modal-wizard textarea {
    font-size: 16px !important;
  }
  .wizard-step {
    max-height: calc(85vh - 120px);
    padding-bottom: 16px !important;
  }
  .wizard-dot {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .wizard-line {
    width: 20px;
    margin: 0 3px;
  }
  .session-mode-toggle {
    gap: 6px;
    margin-bottom: 12px;
  }
  .session-mode-btn {
    padding: 10px 8px;
    border-radius: 10px;
  }
  .session-mode-btn svg {
    width: 20px;
    height: 20px;
  }
  .session-mode-btn span {
    font-size: 14px;
  }
  .session-mode-btn small {
    font-size: 12px;
  }
  .session-mode-badge {
    font-size: 11px;
  }
  .model-grid {
    gap: 8px;
    grid-template-columns: 1fr;
  }
  .model-card {
    padding: 8px 10px;
    gap: 7px;
    border-radius: 10px;
  }
  .model-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }
  .model-card-icon svg {
    width: 16px;
    height: 16px;
  }
  .model-name {
    font-size: 14px;
  }
  .model-tier {
    font-size: 12px;
  }
  .model-card-tag {
    font-size: 10px;
    top: 4px;
    right: 5px;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .auto-answer-row {
    padding: 10px;
    margin-top: 8px;
    border-radius: 10px;
  }
  .auto-answer-label {
    font-size: 12px;
  }
  .auto-answer-desc {
    font-size: 10.5px;
  }
  .custom-prompt-recommend {
    padding: 8px 10px;
    margin-top: 8px;
  }
  .recommend-header {
    font-size: 11.5px;
  }
  .recommend-desc {
    font-size: 11px;
  }
  .recommend-actions .btn-sm {
    font-size: 11px;
    padding: 4px 12px;
  }
  .toggle-switch {
    width: 34px;
    height: 19px;
  }
  .toggle-slider::before {
    width: 14px;
    height: 14px;
    left: 2.5px;
    bottom: 2.5px;
  }
  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(15px);
  }
  .input-group label {
    font-size: 12.5px !important;
    margin-bottom: 4px !important;
  }
  .input-group input,
  .input-group select,
  .input-group textarea {
    padding: 8px 10px !important;
  }
  .csel-trigger {
    padding: 7px 10px;
  }
  .csel-item {
    padding: 7px 10px;
    font-size: 12.5px;
    gap: 6px;
  }
  .csel-menu {
    padding: 3px;
  }
  .inline-upload-row .btn-sm {
    font-size: 11px;
    padding: 5px 10px;
  }
  /* Confirm action dialogs — small phones still get readable sizes */
  .confirm-action-card {
    width: calc(100vw - 32px);
    max-width: 320px;
    padding: 20px 16px 16px;
  }
  .confirm-action-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }
  .confirm-action-icon svg {
    width: 20px;
    height: 20px;
  }
  .confirm-action-title {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .confirm-action-msg {
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .confirm-action-btns {
    gap: 8px;
  }
  .confirm-action-btns .btn {
    min-width: 90px;
    font-size: 14px;
    padding: 10px 16px;
    min-height: 42px;
  }
  .confirm-action-card .input {
    font-size: 14px;
    padding: 10px 12px;
  }
  /* Plan tab — extra compact */
  .plan-hero {
    margin-bottom: 16px;
    border-radius: 12px;
  }
  .plan-hero-left {
    padding: 12px 14px;
  }
  .plan-hero-right {
    padding: 0 14px 12px;
  }
  .plan-hero-name {
    font-size: 14.5px;
  }
  .plan-hero-status {
    font-size: 9.5px;
  }
  .plan-hero-desc {
    font-size: 11px;
  }
  .plan-hero-meta-item {
    font-size: 11px;
  }
  .plan-hero-perk {
    font-size: 10.5px;
  }
  .plan-hero-manage-btn,
  .plan-hero-cancel-btn,
  .plan-hero-renew-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
  }
  .plan-usage-card {
    padding: 10px 12px;
  }
  .plan-usage-title {
    font-size: 11px;
  }
  .plan-usage-num {
    font-size: 14.5px;
  }
  .plan-usage-label {
    font-size: 10px;
  }
  .plan-balance-row,
  .plan-free-row {
    gap: 8px;
    margin-bottom: 14px;
  }
  .plan-balance-card,
  .plan-trial-card {
    padding: 10px;
  }
  .plan-balance-card .stat-num {
    font-size: 12.5px;
  }
  .plan-mode-box {
    border-radius: 10px;
  }
  .plan-mode-tab {
    padding: 14px 6px;
    min-height: 44px;
    font-size: 11.5px;
  }
  .plan-mode-content {
    padding: 12px;
  }
  .plan-mode-tabs {
    margin-bottom: 12px;
  }
  .pricing-current-badge {
    font-size: 9.5px;
    padding: 3px 6px;
  }
  /* Info box — extra compact */
  .plan-info-box {
    padding: 10px 12px;
    margin-top: 10px;
    border-radius: 8px;
  }
  .plan-info-title {
    font-size: 10.5px;
    margin-bottom: 5px;
  }
  .plan-info-items {
    gap: 4px;
  }
  .plan-info-items span {
    font-size: 9.5px;
    padding: 3px 7px;
  }
  .plan-info-note {
    font-size: 9.5px;
    margin-top: 5px;
  }
  /* Transaction — extra compact */
  .plan-section-title {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .plan-txn-empty {
    padding: 16px;
    font-size: 12px;
  }
  .plan-txn-row {
    padding: 7px 8px;
    gap: 2px 6px;
  }
  .plan-txn-date {
    font-size: 10.5px;
  }
  .plan-txn-type {
    font-size: 10px;
  }
  .plan-txn-amount {
    font-size: 11px;
  }
  .plan-txn-desc {
    font-size: 9.5px;
  }
  .plan-transactions {
    margin-top: 14px;
  }
  /* Settings — mobile uses the SAME design tokens as desktop. We only
   * override the body gutter (so cards have viewport-edge breathing
   * room) and tighten card padding by ~4px to make better use of the
   * narrow screen. Everything else (typography, borders, hierarchy) is
   * inherited from the token-driven rules earlier in this file. */
  .settings-body {
    /* Mobile padding tokens — 20px gives a CLEARLY visible gutter
     * between content and the card border on phones, matching the
     * Linear / Stripe / Notion mobile settings calibre. */
    --st-card-pad-x: 20px;
    --st-card-pad-y: 20px;
    --st-row-pad-y: 14px;
    padding: 4px 14px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .settings-section .pill-group {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Mobile: pill-group can overflow the row, so allow wrapping below
   * the label instead of horizontal-clipping. */
  .settings-field {
    display: block;
  }
  /* On a phone, the action-row (Download my data / Delete) needs its
   * sub-text to wrap below the title, so let the row reflow. */
  .settings-action-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .settings-action-row > div:first-child {
    flex: 1 1 100%;
  }
  /* Data table — responsive card layout */
  .data-table {
    display: block;
  }
  .data-table thead {
    display: none;
  }
  .data-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .data-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 16px;
    background: var(--canvas-50);
    border-radius: var(--radius-lg);
  }
  .data-table tbody td {
    padding: 0;
    font-size: 13px;
    border: none;
    overflow: visible;
  }
  /* Title row — full width */
  .data-table tbody td:first-child {
    width: 100%;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
  }
  /* ── Session card metadata layout ── */
  /* Type · Mode — left side of metadata row */
  #tab-sessions .data-table tbody td:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    color: var(--text-secondary);
  }
  #tab-sessions .data-table tbody td:nth-child(2)::after {
    content: ' · ' attr(data-mode);
    color: var(--text-tertiary);
  }
  /* Mode cell hidden — shown inline via ::after on Type */
  #tab-sessions .data-table tbody td:nth-child(3) {
    display: none !important;
  }
  /* Status badge — right side of metadata row, never overflow */
  #tab-sessions .data-table tbody td:nth-child(4) {
    flex: 0 0 auto;
    text-align: right;
  }
  /* Ensure status badges don't overflow on any width */
  #tab-sessions .data-table tbody td:nth-child(4) .session-status-badge {
    white-space: nowrap;
    font-size: 11.5px;
  }
  /* Hide Resume on mobile cards */
  #tab-sessions .data-table tbody td:nth-child(5) {
    display: none !important;
  }
  /* Created date — full width row below metadata */
  #tab-sessions .data-table tbody td:nth-child(6) {
    display: block !important;
    width: 100%;
    font-size: 12px;
    color: var(--text-tertiary);
  }
  /* Actions row — full width, large buttons spread across entire row.
       !important beats #tab-sessions td:nth-child(7) { width: 14% } ID specificity. */
  .data-table tbody td:last-child {
    width: 100% !important;
    overflow: visible !important;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--canvas-200);
  }
  .data-table tbody td:last-child .table-actions {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 0 6px;
  }
  .data-table tbody td:last-child .table-icon-btn {
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--canvas-100);
    color: var(--canvas-700);
    border: 1px solid var(--canvas-200);
    box-sizing: border-box;
    transition:
      background 0.15s ease,
      transform 0.12s ease;
  }
  .data-table tbody td:last-child .table-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .data-table tbody td:last-child .table-icon-btn:active {
    transform: scale(0.93);
  }
  .data-table tbody td:last-child .table-icon-btn.primary {
    background: var(--canvas-950);
    color: #fff;
    border-color: var(--canvas-950);
  }
  /* In Progress / Continue — solid terra orange + white play, matches web app.
   * !important pins this against any cached or competing rule so the active
   * button NEVER renders as white-on-white. */
  .data-table tbody td:last-child .table-icon-btn.active {
    background: #e8834a !important;
    color: #fff !important;
    border-color: #e8834a !important;
    box-shadow: 0 1px 3px rgba(232, 131, 74, 0.28) !important;
  }
  /* Delete + Cancel actions — outline-only treatment per design feedback.
   * Solid red fill was reading as too aggressive in the History row; now
   * the danger button is transparent with a red icon and a soft red
   * outline that intensifies on hover. The Live "End session" button has
   * its own solid-red look applied via inline style at the call-site so
   * it's still clearly an emergency stop. */
  .data-table tbody td:last-child .table-icon-btn.danger {
    background: transparent !important;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
  }
  .data-table tbody td:last-child .table-icon-btn.danger:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: #dc2626 !important;
  }
  /* BUG-A FIX (2026-05): The Live row's End-session button must stay solid
   * red on mobile too — the generic .danger rule above paints it transparent
   * which makes a small red icon on a white background, when the user expects
   * a solid red emergency-stop button (matches enterprise mobile + desktop).
   * Hardcoded hex (#cc3333 bg / #fff fg) — does not depend on tokens. */
  .data-table tbody td:last-child .table-icon-btn.danger.is-end-session {
    background: #cc3333 !important;
    color: #ffffff !important;
    border-color: #cc3333 !important;
  }
  .data-table tbody td:last-child .table-icon-btn.danger.is-end-session:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
  }
  .data-table tbody td:last-child .table-icon-btn.danger.is-end-session svg,
  .data-table tbody td:last-child .table-icon-btn.danger.is-end-session svg path {
    fill: #ffffff !important;
    stroke: none !important;
    color: #ffffff !important;
  }
  .data-table tbody td:last-child .table-icon-btn.disabled,
  .data-table tbody td:last-child .table-icon-btn[disabled] {
    background: var(--canvas-50);
    color: var(--canvas-300);
    border-color: var(--canvas-150);
    opacity: 0.6;
  }
  .data-table tbody td:last-child .table-icon-btn:hover {
    background: var(--canvas-150);
  }
  .data-table tbody td:last-child .table-icon-btn.primary:hover {
    background: var(--canvas-800);
  }
  .data-table tbody td:last-child .table-icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .data-table tbody td:last-child .table-icon-btn + .table-icon-btn {
    margin-left: 0;
  }
  /* Restore Actions cell hidden by 768px nth-child(6) rule */
  #tab-sessions .data-table tbody td:nth-child(6),
  #tab-resumes .data-table tbody td:nth-child(6) {
    display: block;
    width: 100%;
  }
  /* Answer toolbar wrap */
  .answer-toolbar {
    flex-wrap: wrap;
  }
  /* Dark mode — canvas-100 = #111110 (page bg) is darker than card bg #1C1B19, invisible.
       Use canvas-300 (#2E2C28) which is lighter than the dark card, making buttons visible. */
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn {
    background: var(--canvas-300);
    color: var(--canvas-900);
    border-color: var(--canvas-400);
  }
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn:hover {
    background: var(--canvas-400);
  }
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn.primary {
    background: var(--canvas-950);
    color: var(--canvas-50);
    border-color: var(--canvas-950);
  }
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn.primary:hover {
    background: var(--canvas-900);
  }
  /* In Progress / Continue — solid terra orange + white play, matches web app */
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn.active {
    background: #e8834a;
    color: #fff;
    border-color: #e8834a;
  }
  /* End — solid red + white square, matches web app */
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn.danger {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
  }
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn.disabled,
  [data-theme='dark'] .data-table tbody td:last-child .table-icon-btn[disabled] {
    background: var(--canvas-200);
    color: var(--canvas-500);
    border-color: var(--canvas-300);
  }
}

/* ── Electron desktop app — escape hatch from mobile/tablet breakpoints ────
 * The desktop window can be smaller than 1024px on a small laptop, but
 * Electron should ALWAYS render the full desktop table layout regardless
 * of width. These selectors revert the card-stack transformations so the
 * .data-table renders as a normal HTML table with all columns visible. */
body.is-electron .data-table {
  display: table !important;
  table-layout: auto !important;
  width: 100% !important;
}
/* Electron renders its own 5-cell sessions DOM (Title/Mode/Status/Resume/
   Actions) via desktop/app.js — column widths set in desktop/app.html. */
body.is-electron .data-table thead {
  display: table-header-group !important;
}
body.is-electron .data-table tbody {
  display: table-row-group !important;
}
body.is-electron .data-table tbody tr {
  display: table-row !important;
  flex-wrap: nowrap !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.is-electron .data-table tbody td,
body.is-electron .data-table thead th {
  display: table-cell !important;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-top: none !important;
}
body.is-electron .data-table tbody td:last-child .table-icon-btn {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
}
body.is-electron .data-table tbody td:last-child .table-actions {
  display: inline-flex !important;
  width: auto !important;
  gap: 4px !important;
  padding: 0 !important;
}

/* Ultra-small (320px — iPhone SE) */
@media (max-width: 360px) {
  /* Heatmap — ultra compact */
  .heatmap-section {
    padding: 8px;
  }
  .heatmap-header {
    gap: 4px;
    margin-bottom: 6px;
  }
  .heatmap-title {
    font-size: 12px;
  }
  .heatmap-tab {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .heatmap-year-btn {
    font-size: 11px;
    padding: 2px 4px;
  }
  .heatmap-year-label {
    font-size: 10px;
    min-width: 28px;
  }
  .heatmap-cell {
    width: 7px;
    height: 7px;
    border-radius: 1px;
  }
  .heatmap-month-label {
    font-size: 7px;
    height: 10px;
    line-height: 10px;
  }
  .heatmap-day-labels span {
    font-size: 7px;
    height: 7px;
    line-height: 7px;
    width: 14px;
  }
  .heatmap-day-labels {
    padding-top: 10px;
    gap: 2px;
  }
  .heatmap-grid {
    gap: 1.5px;
  }
  .heatmap-week {
    gap: 1.5px;
  }
  .heatmap-grid-wrap {
    gap: 1.5px;
  }
  .heatmap-stats {
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .heatmap-stat-val {
    font-size: 12.5px;
  }
  .heatmap-stat-lbl {
    font-size: 8.5px;
  }
  .heatmap-legend-label {
    font-size: 7px;
  }
  .heatmap-legend .heatmap-cell {
    width: 7px;
    height: 7px;
  }
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stat-card {
    padding: 12px 8px 10px;
  }
  .stat-icon-illustrative svg {
    width: 22px;
    height: 22px;
  }
  .stat-num {
    font-size: 17px;
  }
  .stat-lbl {
    font-size: 11px;
  }
  .modal-head {
    padding: 14px 14px 0;
  }
  .modal-body {
    padding: 10px 14px;
  }
  .modal-foot {
    padding: 10px 14px;
  }
  .csel-trigger {
    padding: 6px 8px;
    font-size: 12px;
  }
  .csel-item {
    padding: 6px 8px;
    font-size: 12px;
    gap: 5px;
  }
  .csel-menu {
    padding: 3px;
  }
  .plan-txn-row {
    padding: 6px 6px;
    gap: 1px 5px;
  }
  /* Mobile ≤480: same hierarchy, slightly tighter */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pricing-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pricing-card {
    padding: 40px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    border-radius: 22px;
    width: 100%;
    min-height: 380px;
  }
  .pricing-popular,
  .pricing-lifetime {
    padding-top: 48px;
  }
  .pricing-best {
    padding-top: 48px;
  }
  /* Icon — large and prominent */
  .pricing-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 22px;
    flex-shrink: 0;
    border-radius: 22px;
  }
  .pricing-icon svg {
    width: 52px;
    height: 52px;
  }
  /* Tier name — sidebar-size text */
  .pricing-name {
    font-size: 15px;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--canvas-900);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* Price — big bold hero */
  .pricing-price {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1;
  }
  .pricing-interval {
    font-size: 13px;
  }
  .pricing-badge {
    font-size: 10px;
    padding: 4px 14px;
  }
  .pricing-details {
    display: block;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    width: 100%;
  }
  .pricing-details-btn {
    display: none !important;
  }
  /* Credits — largest text on card */
  .pricing-credits-hero {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--terra);
    margin-bottom: 10px;
  }
  .pricing-credits {
    display: none;
  }
  .pricing-per {
    font-size: 14px;
    margin-bottom: 28px;
    color: var(--text-muted);
  }
  /* Buy button — always at bottom of tall card */
  .pricing-buy {
    font-size: 16px;
    padding: 16px 12px;
    width: 100%;
    border-radius: 14px;
    font-weight: 700;
    margin-top: auto;
  }
  /* Session wizard — ultra compact */
  .session-mode-btn {
    padding: 8px 6px;
  }
  .session-mode-btn svg {
    width: 18px;
    height: 18px;
  }
  .session-mode-btn span {
    font-size: 11px;
  }
  .session-mode-btn small {
    font-size: 10px;
  }
  .model-card {
    padding: 7px 8px;
    gap: 6px;
  }
  .model-card-icon {
    width: 22px;
    height: 22px;
  }
  .model-card-icon svg {
    width: 14px;
    height: 14px;
  }
  .model-name {
    font-size: 11px;
  }
  .model-tier {
    font-size: 9px;
  }
  /* Confirm dialogs — ultra small still readable */
  .confirm-action-card {
    width: calc(100vw - 28px);
    max-width: 280px;
    padding: 18px 14px 14px;
  }
  .confirm-action-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }
  .confirm-action-title {
    font-size: 15px;
  }
  .confirm-action-msg {
    font-size: 12.5px;
    margin-bottom: 14px;
  }
  .confirm-action-btns .btn {
    min-width: 80px;
    font-size: 13px;
    padding: 9px 14px;
    min-height: 40px;
  }
}

/* ── Social Login Buttons ─────────────────────────────────────────────────── */
.social-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid var(--canvas-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  font-family: var(--font);
}
.btn-social:hover {
  background: var(--canvas-50);
  border-color: var(--canvas-300);
  transform: translateY(-1px);
}
.btn-social:active {
  transform: translateY(0);
}
.btn-social svg {
  flex-shrink: 0;
}
[data-theme='dark'] .btn-social {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--dark-text, #f0ede8);
}
[data-theme='dark'] .btn-social:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Auth divider — "or continue with email" */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  color: var(--text-muted);
  font-size: 12.5px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--canvas-200);
}
[data-theme='dark'] .auth-divider::before,
[data-theme='dark'] .auth-divider::after {
  background: rgba(255, 255, 255, 0.1);
}

/* Capacitor: larger touch targets */
body.is-capacitor .btn-social {
  padding: 14px 18px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  min-height: 52px !important;
  gap: 12px !important;
}
body.is-capacitor .social-btns {
  gap: 12px !important;
  margin-bottom: 20px !important;
}
body.is-capacitor .auth-divider {
  font-size: 14px !important;
  margin: 4px 0 18px !important;
}

/* ── Accessibility: focus-visible overrides for inputs that suppress outline ── */
/* Atlas history search — no :focus visual indicator defined, add one */
.atlas-history-search:focus-visible {
  outline: 2px solid var(--terra, #d97757);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Atlas compose input — parent .atlas-compose already shows focus ring */
.atlas-compose-input:focus-visible {
  outline: none !important;
}

/* ── Month-based heatmap grid ────────────────────────────────────────────── */
.heatmap-grid-months {
  display: flex;
  gap: 0;
}
.heatmap-month-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4px;
}
.heatmap-month-block .heatmap-month-label {
  text-align: center;
  width: 100%;
  margin-bottom: 4px;
}
.heatmap-month-weeks {
  display: flex;
  gap: 2px;
}
/* Link bar email inline input — no :focus visual indicator defined */
.link-bar-email:focus-visible {
  outline: 2px solid var(--terra, #d97757) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* ── Email Verification Modal ── */
.verify-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verify-modal {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px !important;
  width: 90% !important;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.verify-code-inputs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 4px auto 0;
  width: fit-content;
}
.verify-code-inputs input {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
  height: 48px;
  flex: 0 0 44px;
  text-align: center;
  font-size: 24px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  border: 2px solid var(--canvas-300);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  padding: 0;
  box-sizing: border-box;
}
.verify-code-inputs input:focus {
  border-color: var(--terra, #d97757);
}
.verify-code-inputs input:disabled {
  opacity: 0.5;
}
.verify-code-inputs.shake {
  animation: verifyShake 0.4s ease;
}
@keyframes verifyShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}
.verify-status.error {
  color: #ef4444;
}
.verify-status.success {
  color: #22c55e;
}

/* ── Email Verification Banner ── */
.verify-banner {
  background: var(--terra-50, rgba(217, 119, 87, 0.08));
  padding: 10px 16px;
  border-radius: 8px;
  margin: 8px 16px;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.verify-banner button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra, #d97757);
}
.verify-banner button.dismiss {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  padding: 0 2px;
}

/* ── Session draft card ──────────────────────────────────────────────────── */
.session-draft-card {
  background: var(--bg-card, #fff);
  border: 1.5px dashed var(--terra, #d97757);
  border-radius: var(--radius-lg, 16px);
  padding: 14px 18px;
  margin-bottom: 12px;
}
[data-theme='dark'] .session-draft-card {
  border-color: rgba(217, 119, 87, 0.3);
}
.session-draft-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.session-draft-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra, #d97757);
  background: rgba(217, 119, 87, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}
.session-draft-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1f1e1a);
}
[data-theme='dark'] .session-draft-title {
  color: var(--text-primary, #f2f0eb);
}
.session-draft-actions {
  display: flex;
  gap: 8px;
}

/* ============================================
   GLOBAL MICRO-INTERACTIONS — Emil Kowalski
   Applies to every interactive element across
   all pages: landing, studio, enterprise, admin
   ============================================ */

/* --- Universal press feedback for all clickable elements --- */
a.btn:active:not(:disabled),
button:active:not(:disabled):not(.topbar-btn):not(.btn-send):not(.btn) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* --- Icon buttons (close, delete, edit, copy) — everywhere --- */
.btn-icon-only:active,
.icon-btn:active,
[class*='close-btn']:active,
[class*='copy-btn']:active,
[class*='edit-btn']:active,
[class*='delete-btn']:active {
  transform: scale(0.9);
  transition-duration: 80ms;
}

/* --- Cards — hover lift + shadow bloom --- */
.card,
[class*='-card']:not(.answer-item):not(.ep-plan-card) {
  transition:
    transform 0.25s var(--ease-out-snap, ease),
    box-shadow 0.25s var(--ease-out-snap, ease);
}
.card:hover,
[class*='-card']:not(.answer-item):not(.ep-plan-card):hover {
  transform: translateY(-2px);
}

/* --- Toggles and switches --- */
.toggle,
.switch,
[class*='-toggle'],
[class*='-switch'] {
  transition: all 0.2s var(--ease-out-snap, ease);
}

/* --- Badges and pills — subtle pop on hover --- */
.badge:hover,
.pill:hover,
[class*='-badge']:hover,
[class*='-pill']:hover {
  transform: scale(1.03);
  transition: transform 0.15s var(--ease-out-snap, ease);
}

/* --- Dropdown menus — snappy entry --- */
.dropdown-menu,
[class*='-dropdown'],
.cs-dropdown {
  animation: dropdownIn 0.2s var(--ease-out-snap, ease);
}
@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Tooltips — fast entry, instant skip if another is open --- */
[data-tooltip]:hover::after,
.tooltip {
  animation: tooltipIn 0.15s var(--ease-out-snap, ease);
}
@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Checkboxes & radio — pop on check --- */
input[type='checkbox']:checked,
input[type='radio']:checked {
  animation: checkPop 0.2s var(--ease-out-snap, ease);
}
@keyframes checkPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* --- Links — underline slide-in --- */
a:not(.btn):not(.nav-link):hover {
  transition: color 0.15s var(--ease-out-snap, ease);
}

/* --- Tab active indicator — smooth slide --- */
.tab-active-indicator,
[class*='-tab'].active::after {
  transition:
    left 0.25s var(--ease-out-snap, ease),
    width 0.25s var(--ease-out-snap, ease);
}

/* --- Error shake animation (global) --- */
.shake {
  animation: errorShake 0.4s var(--ease-out-snap, ease);
}
@keyframes errorShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* --- Success checkmark pop --- */
.success-pop {
  animation: successPop 0.35s var(--ease-out-snap, ease);
}
@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* --- Fade-in-up (reusable across all pages) --- */
.fade-in-up {
  animation: fadeInUp 0.35s var(--ease-out-snap, ease) both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Stagger delays (use on children) --- */
.stagger-1 {
  animation-delay: 0.05s;
}
.stagger-2 {
  animation-delay: 0.1s;
}
.stagger-3 {
  animation-delay: 0.15s;
}
.stagger-4 {
  animation-delay: 0.2s;
}
.stagger-5 {
  animation-delay: 0.25s;
}
.stagger-6 {
  animation-delay: 0.3s;
}

/* --- Reduced motion: respect user preferences globally --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * BILLING V2 — ElevenLabs-inspired monochrome redesign (theme-aware)
 *
 * Scope: `.billing-v2` applied on the #tab-plan root. Every rule is scoped
 * to that class so legacy .plan-* / .pricing-* styles are unaffected on
 * other pages. Rules use !important because they override base rules
 * spread across ~2000 lines above.
 *
 * Design principles (ElevenLabs subscription page reference):
 *   - Canvas-first: light theme is the primary design (white background,
 *     dark text). Dark theme inverts via [data-theme='dark'] overrides.
 *   - Hairline 1px borders. No drop shadows on cards.
 *   - Big black numerals for prices (42px). Small uppercase tracking
 *     label above the price for tier name.
 *   - No decorative icons on pricing cards.
 *   - "Popular" / "Best Value" = thin outlined pill top-right, no fill.
 *   - Step sections: monospace 01/02/03 above a hairline top border.
 *   - Primary CTA is high-contrast: black button with white text in light
 *     mode, white button with black text in dark mode.
 *   - Mobile: all grids collapse to 1 column. Every wrapper has
 *     max-width:100% + overflow-x:hidden + min-width:0 so the page can
 *     never scroll horizontally or diagonally.
 *
 * All tokens are declared as --bv-* CSS variables on the .billing-v2 scope
 * and overridden under [data-theme='dark'] .billing-v2, so every rule
 * below uses the tokens (never hardcoded rgba) and both themes Just Work.
 * ════════════════════════════════════════════════════════════════════════ */

.billing-v2 {
  /* Light-theme tokens (default) */
  --bv-surface-0: #ffffff;
  --bv-surface-1: #fafafa;
  --bv-surface-2: #f4f4f3;
  --bv-border: rgba(0, 0, 0, 0.08);
  --bv-border-strong: rgba(0, 0, 0, 0.16);
  --bv-border-hover: rgba(0, 0, 0, 0.24);
  --bv-text: #0a0a0a;
  --bv-text-muted: rgba(0, 0, 0, 0.56);
  --bv-text-subtle: rgba(0, 0, 0, 0.4);
  --bv-text-faint: rgba(0, 0, 0, 0.28);
  --bv-btn-bg: #0a0a0a;
  --bv-btn-text: #ffffff;
  --bv-btn-hover: #1c1c1c;
  --bv-check: rgba(0, 0, 0, 0.72);
  --bv-check-stroke: '%230a0a0a';
}
[data-theme='dark'] .billing-v2 {
  --bv-surface-0: transparent;
  --bv-surface-1: rgba(255, 255, 255, 0.02);
  --bv-surface-2: rgba(255, 255, 255, 0.035);
  --bv-border: rgba(255, 255, 255, 0.08);
  --bv-border-strong: rgba(255, 255, 255, 0.18);
  --bv-border-hover: rgba(255, 255, 255, 0.28);
  --bv-text: #ffffff;
  --bv-text-muted: rgba(255, 255, 255, 0.58);
  --bv-text-subtle: rgba(255, 255, 255, 0.42);
  --bv-text-faint: rgba(255, 255, 255, 0.28);
  --bv-btn-bg: #ffffff;
  --bv-btn-text: #0a0a0a;
  --bv-btn-hover: #f4f4f3;
  --bv-check: rgba(255, 255, 255, 0.82);
  --bv-check-stroke: '%23ffffff';
}

/* ── Mobile scroll lock — every wrapper + card gets overflow-x:hidden and
     min-width:0. Final safety net at the root level. ─────────────────── */
.billing-v2,
.billing-v2 .tab-body,
.billing-v2 .plan-mode-box,
.billing-v2 .plan-mode-content,
.billing-v2 .pricing-grid,
.billing-v2 .ent-overview,
.billing-v2 .ent-overview-steps,
.billing-v2 .plan-free-row,
.billing-v2 .plan-info-box {
  max-width: 100% !important;
  overflow-x: hidden !important;
  min-width: 0 !important;
}
/* plan-balance-row intentionally omitted from overflow-x:hidden — the
   Manage Plan dropdown is absolute-positioned inside it and would be clipped */
.billing-v2 .plan-balance-row {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.billing-v2 .pricing-card,
.billing-v2 .plan-balance-card,
.billing-v2 .plan-trial-card,
.billing-v2 .ent-ov-step {
  min-width: 0 !important;
}
.tab-content#tab-plan.billing-v2 {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── Top row: Credits Remaining card only ─────────────────────────────
 * The legacy .plan-trial-card on the right was redundant — it just showed
 * a star icon + "Free Trial" text, which is already communicated by the
 * "Current · Free Trial" pill INSIDE the balance card on the left. Hiding
 * it and letting the balance card take a narrower left-aligned width
 * matches the ElevenLabs "Top up balance" panel density. */
.billing-v2 .plan-free-row,
.billing-v2 .plan-balance-row {
  grid-template-columns: minmax(0, 520px) !important;
  gap: 14px !important;
}
.billing-v2 .plan-trial-card {
  display: none !important;
}
.billing-v2 .plan-balance-card {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 18px !important;
  padding: 32px 34px !important;
  box-shadow: none !important;
}
.billing-v2 .plan-balance-card .stat-num {
  color: var(--bv-text) !important;
  font-family: var(--font) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.billing-v2 .plan-balance-card .stat-lbl {
  color: var(--bv-text-subtle) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  letter-spacing: 0 !important;
}
.billing-v2 .plan-current-label {
  background: transparent !important;
  color: var(--bv-text-muted) !important;
  border: 1px solid var(--bv-border-strong) !important;
  padding: 4px 10px !important;
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  margin-bottom: 14px !important;
}
.billing-v2 .plan-current-dot {
  background: var(--bv-text-muted) !important;
  animation: none !important;
  width: 5px !important;
  height: 5px !important;
}
.billing-v2 .plan-card-active {
  background: var(--bv-surface-1) !important;
  border-bottom: 1px solid var(--bv-border-strong) !important;
}

/* ── New Grad verification banner ─────────────────────────────────────
 * Override the legacy olive/gold pending banner to match the neutral
 * billing-v2 aesthetic. Uses the same surface/border tokens as every
 * other card on the page so it reads as a normal "needs action" row
 * instead of a warning stripe. State is communicated by the "Pending"
 * tag on the right, not by color. */
.billing-v2 .ng-banner,
.billing-v2 .ng-banner.ng-pending,
.billing-v2 .ng-banner.ng-active {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin: 14px 0 !important;
  overflow: hidden !important;
}
.billing-v2 .ng-banner-title,
.billing-v2 .ng-banner.ng-pending .ng-banner-title,
.billing-v2 .ng-banner.ng-active .ng-banner-title {
  color: var(--bv-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.billing-v2 .ng-banner-desc {
  color: var(--bv-text-muted) !important;
}
.billing-v2 .ng-banner-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--bv-border-strong) !important;
  color: var(--bv-text-muted) !important;
}
.billing-v2 .ng-banner-btn-secondary:hover {
  color: var(--bv-text) !important;
  border-color: var(--bv-border-hover) !important;
  background: var(--bv-surface-2) !important;
}
/* "Pending" / "Active" state chip on the right — muted pill */
.billing-v2 .ng-banner.ng-pending .ng-banner-btn,
.billing-v2 .ng-banner.ng-active .ng-banner-btn {
  background: var(--bv-surface-2) !important;
  color: var(--bv-text-muted) !important;
  border: 1px solid var(--bv-border) !important;
  cursor: default !important;
  box-shadow: none !important;
}
.billing-v2 .ng-banner .ng-banner-btn {
  /* default "Verify Now" CTA — high-contrast primary button */
  background: var(--bv-btn-bg) !important;
  color: var(--bv-btn-text) !important;
  border: none !important;
}

/* ── Auto-reload card ─────────────────────────────────────────────────── */
.billing-v2 .ar-card {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.billing-v2 .ar-card-icon {
  background: var(--bv-surface-2) !important;
  color: var(--bv-text-muted) !important;
}
.billing-v2 .ar-toggle input:checked + .ar-toggle-slider {
  background: var(--bv-btn-bg) !important;
}
.billing-v2 .ar-pack-option {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
}
.billing-v2 .ar-pack-option.is-selected {
  border-color: var(--bv-border-hover) !important;
  background: var(--bv-surface-2) !important;
}
.billing-v2 .ar-pack-option.is-selected .ar-pack-check {
  background: var(--bv-btn-bg) !important;
  color: var(--bv-btn-text) !important;
}
.billing-v2 .ar-btn-primary {
  background: var(--bv-btn-bg) !important;
  color: var(--bv-btn-text) !important;
  border: none !important;
  box-shadow: none !important;
}
.billing-v2 .ar-btn-primary:hover {
  background: var(--bv-btn-hover) !important;
  transform: none !important;
}

/* ── Plan-mode tab strip: filled-tab → underline ──────────────────────── */
.billing-v2 .plan-mode-box {
  background: transparent !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.billing-v2 .plan-mode-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--bv-border) !important;
  padding: 0 18px !important;
  gap: 4px !important;
  border-radius: 14px 14px 0 0 !important;
}
.billing-v2 .plan-mode-tab {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bv-text-subtle) !important;
  padding: 18px 20px !important;
  min-height: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  flex: 0 0 auto !important;
  text-align: center !important;
}
.billing-v2 .plan-mode-tab:hover {
  color: var(--bv-text) !important;
  background: transparent !important;
}
.billing-v2 .plan-mode-tab.active {
  color: var(--bv-text) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--bv-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.billing-v2 .plan-mode-content {
  padding: 32px !important;
}

/* ── Pricing grid: responsive, never horizontally scrollable ──────────── */
.billing-v2 .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 100% !important;
  padding-top: 14px !important;
}
.billing-v2 .pricing-grid.pricing-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  .billing-v2 .pricing-grid,
  .billing-v2 .pricing-grid.pricing-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .billing-v2 .pricing-grid,
  .billing-v2 .pricing-grid.pricing-grid-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Pricing cards — denser, more product-spec than hero-banner ─────── */
.billing-v2 .pricing-card {
  position: relative !important;
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 14px !important;
  padding: 22px 20px !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;   /* cancel landing-page mobile min-height:380px at all breakpoints */
}
.billing-v2 .pricing-card:hover {
  background: var(--bv-surface-2) !important;
  border-color: var(--bv-border-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.billing-v2 .pricing-popular,
.billing-v2 .pricing-best,
.billing-v2 .pricing-lifetime {
  border-color: var(--bv-border-strong) !important;
  padding-top: 26px !important;
  background: var(--bv-surface-2) !important;
}
.billing-v2 .pricing-card.is-current-plan {
  border-color: var(--bv-text) !important;
  box-shadow: none !important;
}

/* Hide decorative plant/tree SVG icons */
.billing-v2 .pricing-icon {
  display: none !important;
}

/* "Popular" / "Best Value" badge — centered ribbon on top border */
.billing-v2 .pricing-badge {
  top: -11px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background: var(--bv-btn-bg) !important;
  color: var(--bv-btn-text) !important;
  border: none !important;
  padding: 4px 12px !important;
  font-family: var(--font) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

/* Tier name — real title, not a tiny label. ElevenLabs shows the model
 * name as the primary identifier, not the price. */
.billing-v2 .pricing-name {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bv-text) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 2px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
/* Subtitle under the tier name — only renders when data-subtitle is set
 * on the element, so legacy .pricing-name without the attribute shows no
 * empty gap. */
.billing-v2 .pricing-name[data-subtitle]::after {
  content: attr(data-subtitle);
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bv-text-subtle);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

/* Price — medium neutral numeral (not hero-banner huge) */
.billing-v2 .pricing-price {
  font-family: var(--font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--bv-text) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-top: 14px !important;
  margin-bottom: 2px !important;
}
.billing-v2 .pricing-interval {
  font-size: 13px !important;
  color: var(--bv-text-subtle) !important;
  font-weight: 400 !important;
}
.billing-v2 .pricing-credits,
.billing-v2 .pricing-credits-hero {
  font-size: 11.5px !important;
  color: var(--bv-text-subtle) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 16px !important;
}
/* pricing-details is always shown inline in billing-v2, so the mobile-only
   hero (outside .pricing-details) would duplicate the credits count */
.billing-v2 .pricing-credits-hero {
  display: none !important;
}
.billing-v2 .pricing-per {
  font-size: 11px !important;
  color: var(--bv-text-subtle) !important;
  margin-bottom: 16px !important;
}
.billing-v2 .pricing-compare-strike {
  color: var(--bv-text-faint) !important;
}
.billing-v2 .pricing-compare-note {
  color: var(--bv-text-subtle) !important;
}
.billing-v2 .pricing-savings-badge {
  background: var(--bv-surface-2) !important;
  color: var(--bv-text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  border: 1px solid var(--bv-border-strong) !important;
}

/* Benefits list — tighter than the legacy spacing */
.billing-v2 .pricing-benefits {
  gap: 6px !important;
  margin: 0 0 14px !important;
}
.billing-v2 .pricing-benefits li {
  color: var(--bv-text-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  padding-left: 16px !important;
}
.billing-v2 .pricing-benefits li::before {
  /* SVG encoded with a stroke color that adapts to theme via --bv-check-stroke.
     Light mode = black stroke, dark mode = white stroke. */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L11 4.5' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.72'/%3E%3C/svg%3E") !important;
}
[data-theme='dark'] .billing-v2 .pricing-benefits li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L11 4.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.72'/%3E%3C/svg%3E") !important;
}

/* Primary CTA — high contrast (black on white / white on black) */
.billing-v2 .pricing-buy,
.billing-v2 .btn.pricing-buy {
  background: var(--bv-btn-bg) !important;
  color: var(--bv-btn-text) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
  margin-top: auto !important;
  transition: background 0.15s ease !important;
}
.billing-v2 .pricing-buy:hover {
  background: var(--bv-btn-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* "Details" disclosure (mobile only) */
.billing-v2 .pricing-details-btn {
  color: var(--bv-text-muted) !important;
}
.billing-v2 .pricing-details-btn::after {
  border-color: var(--bv-text-muted) !important;
}
.billing-v2 .pricing-details {
  border-top-color: var(--bv-border) !important;
}

/* ── Info box below the grids ─────────────────────────────────────────── */
.billing-v2 .plan-info-box {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  border-radius: 14px !important;
}
.billing-v2 .plan-info-title {
  color: var(--bv-text) !important;
}
.billing-v2 .plan-info-items span {
  background: var(--bv-surface-2) !important;
  border-color: var(--bv-border) !important;
  color: var(--bv-text-muted) !important;
}
.billing-v2 .plan-info-note {
  color: var(--bv-text-subtle) !important;
}

/* ── "How X Works" step sections — flat collapsible (no box) ────────────
 * The pre-disclosure version of these blocks rendered as a 28px-padded
 * card with uppercase title and hidden icon. Now that the section is a
 * <details>/<summary> disclosure, the card has been removed and BOTH
 * the leading icon AND the chevron must be visible. The base flat
 * styles live earlier in this file (~line 8986) — these billing-v2
 * scoped rules only need to ensure they don't fight back. */
.billing-v2 .ent-overview {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--bv-border) !important;
}
.billing-v2 .ent-overview:last-of-type {
  border-bottom: none !important;
}
.billing-v2 .ent-overview-header {
  color: var(--bv-text) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0 !important;
  padding: 14px 2px !important;
}
/* Restore icon + chevron visibility — the previous rule used a blanket
 * `svg { display:none !important }` which killed both. Show them, and
 * keep the chevron rotation animation working in the [open] state. */
.billing-v2 .ent-overview-header svg {
  display: inline-block !important;
}
.billing-v2 .ent-overview-chevron {
  color: var(--bv-text) !important;
  opacity: 0.7;
}
.billing-v2 .ent-overview[open] .ent-overview-chevron {
  opacity: 1;
}
.billing-v2 .ent-overview-steps {
  gap: 20px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.billing-v2 .ent-ov-step {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--bv-border-strong) !important;
  border-radius: 0 !important;
  padding: 18px 16px 0 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 10px !important;
}
.billing-v2 .ent-ov-step:hover {
  background: transparent !important;
  border-color: var(--bv-border-hover) !important;
  box-shadow: none !important;
}
/* Numbered circle → monospace "01/02/03" label above the step */
.billing-v2 .ent-ov-num {
  background: transparent !important;
  color: var(--bv-text-subtle) !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}
.billing-v2 .ent-ov-num::before {
  content: '0';
}
.billing-v2 .ent-ov-text strong {
  font-size: 13px !important;
  color: var(--bv-text) !important;
  font-weight: 600 !important;
}
.billing-v2 .ent-ov-text span {
  color: var(--bv-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
.billing-v2 .ent-overview-note {
  background: var(--bv-surface-1) !important;
  border: 1px solid var(--bv-border) !important;
  color: var(--bv-text-muted) !important;
  border-radius: 10px !important;
}
.billing-v2 .ent-overview-note svg {
  color: var(--bv-text-subtle) !important;
}

/* ── Transaction History — separated from pricing grids ──────────────── */
.billing-v2 .plan-transactions {
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--bv-border) !important;
}
.billing-v2 .plan-section-title {
  padding-left: 6px !important;
}

/* ── Mobile layout — vertical-only scroll enforced ────────────────────── */
@media (max-width: 720px) {
  .billing-v2 .plan-free-row,
  .billing-v2 .plan-balance-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .billing-v2 .ent-overview-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .billing-v2 .plan-mode-tabs {
    padding: 0 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .billing-v2 .plan-mode-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .billing-v2 .plan-mode-tab {
    padding: 14px 14px !important;
    font-size: 12px !important;
    flex: 1 1 0 !important;
  }
  .billing-v2 .plan-mode-content {
    padding: 20px !important;
  }
  .billing-v2 .pricing-card {
    padding: 18px 18px 16px !important;
    height: auto !important;        /* don't stretch to grid row height */
    min-height: 0 !important;       /* cancel the 380px min-height from landing-page mobile rules */
    align-items: stretch !important; /* undo the landing-page center-align */
    text-align: left !important;     /* undo center-text from landing-page mobile rules */
  }
  .billing-v2 .pricing-card.pricing-popular,
  .billing-v2 .pricing-card.pricing-best,
  .billing-v2 .pricing-card.pricing-lifetime {
    padding-top: 26px !important;   /* ribbon clearance */
  }
  /* Always show details inline — no expand/collapse toggle on mobile */
  .billing-v2 .pricing-details {
    display: flex !important;
    flex: none !important;          /* don't grow; card shrinks to content */
  }
  .billing-v2 .pricing-details-btn {
    display: none !important;       /* hide toggle since details are always open */
  }
  /* Fixed gap instead of margin-top:auto so button sits right after content */
  .billing-v2 .pricing-buy,
  .billing-v2 .btn.pricing-buy {
    margin-top: 12px !important;
  }
  .billing-v2 .pricing-price {
    font-size: 30px !important;
  }
  .billing-v2 .ent-overview {
    /* Stay flat on mobile — no padding override that would re-introduce
     * a card around the disclosure header. */
    padding: 0 !important;
  }
}

/* ============================================================================
 * Unified modern close-button pattern (consumer studio).
 *
 * Applies to every modal/popover/drawer X across the app — no separate
 * background card, no border, no shadow. Just a 32×32 transparent hit area
 * with a centered X glyph that micro-scales on hover and presses in on
 * click. Pattern matches enterprise-grade products (Linear / Vercel /
 * Anthropic Claude UI). No rotation gimmick — the user explicitly rejected
 * the rotate-90 spin earlier.
 *
 * Selectors covered:
 *   .modal-close-btn        — session-detail modal, generic modals
 *   .modal-close            — creator-modal, sub-modals
 *   .pe-modal-close         — pricing/enterprise pricing modal
 *   .preview-close-btn      — resume preview overlay
 *   .sfb-close-btn          — referral feedback banner inline X
 *   .guide-close-btn        — getting-started guide overlay
 *   .notif-panel-close-btn  — notifications drawer
 *   .nav-drawer-close       — mobile nav drawer
 *   .atlas-canvas-close-btn — Atlas chat canvas
 * ========================================================================== */
.modal-close-btn,
.modal-close,
.pe-modal-close,
.preview-close-btn,
.sfb-close-btn,
.guide-close-btn,
.notif-panel-close-btn,
.nav-drawer-close,
.atlas-canvas-close-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition:
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 180ms ease,
    opacity 180ms ease !important;
  transform: scale(1) !important;
}
.modal-close-btn:hover,
.modal-close:hover,
.pe-modal-close:hover,
.preview-close-btn:hover,
.sfb-close-btn:hover,
.guide-close-btn:hover,
.notif-panel-close-btn:hover,
.nav-drawer-close:hover,
.atlas-canvas-close-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.12) !important;
  color: var(--canvas-900, #18181b) !important;
}
.modal-close-btn:active,
.modal-close:active,
.pe-modal-close:active,
.preview-close-btn:active,
.sfb-close-btn:active,
.guide-close-btn:active,
.notif-panel-close-btn:active,
.nav-drawer-close:active,
.atlas-canvas-close-btn:active {
  transform: scale(0.92) !important;
  transition-duration: 80ms !important;
}
[data-theme='dark'] .modal-close-btn:hover,
[data-theme='dark'] .modal-close:hover,
[data-theme='dark'] .pe-modal-close:hover,
[data-theme='dark'] .preview-close-btn:hover,
[data-theme='dark'] .sfb-close-btn:hover,
[data-theme='dark'] .guide-close-btn:hover,
[data-theme='dark'] .notif-panel-close-btn:hover,
[data-theme='dark'] .nav-drawer-close:hover,
[data-theme='dark'] .atlas-canvas-close-btn:hover {
  color: var(--canvas-50, #fafafa) !important;
}


/* ── Atlas inline-edit (Gemini-style: Cancel + Update below bubble) ─── */
.atlas-msg.user.atlas-msg-editing {
  flex-direction: column;
  align-items: flex-end;
}
.atlas-msg.user.atlas-msg-editing .atlas-user-text {
  width: 100%;
  border: 1.5px solid var(--canvas-300);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #fff);
  padding: 10px 14px;
  box-sizing: border-box;
}
.atlas-inline-edit-ta {
  width: 100%;
  min-height: 56px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--canvas-900);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: none;
  box-sizing: border-box;
  display: block;
}
.atlas-inline-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 6px;
}
.atlas-inline-edit-btn {
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.atlas-inline-edit-cancel {
  background: transparent;
  border: 1px solid var(--canvas-300);
  color: var(--canvas-600);
}
.atlas-inline-edit-cancel:hover {
  background: var(--canvas-100);
}
.atlas-inline-edit-send {
  background: var(--terra, #d97757);
  border: none;
  color: #fff;
}
.atlas-inline-edit-send:hover {
  opacity: 0.88;
}
[data-theme='dark'] .atlas-msg.user.atlas-msg-editing .atlas-user-text {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .atlas-inline-edit-ta {
  color: var(--canvas-100);
}
[data-theme='dark'] .atlas-inline-edit-cancel {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--canvas-400);
}

/* ── Knowledge Base sparkle star (shared — consumer has this inline too) ──── */
.kb-star {
  animation: kb-twinkle 4s ease-in-out infinite;
  color: #d97757;
  filter: drop-shadow(0 0 4px rgba(217,119,87,0.55));
}
@keyframes kb-twinkle {
  0%   { transform: scale(1)    rotate(0deg);   filter: drop-shadow(0 0 4px rgba(217,119,87,0.5)); }
  20%  { transform: scale(1.3)  rotate(18deg);  filter: drop-shadow(0 0 9px rgba(176,95,222,0.85)); }
  40%  { transform: scale(0.82) rotate(0deg);   filter: drop-shadow(0 0 5px rgba(94,178,255,0.7)); }
  65%  { transform: scale(1.2)  rotate(-15deg); filter: drop-shadow(0 0 8px rgba(217,119,87,0.7)); }
  100% { transform: scale(1)    rotate(0deg);   filter: drop-shadow(0 0 4px rgba(217,119,87,0.5)); }
}