@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===================================================
   CreatorCalc - styles.css
   Phase 1: CSS variable palette + dark mode
   =================================================== */

/* ─── CSS Custom Properties (Light Theme) ──────────────────────────────────── */
:root {
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
  /* Page */
  --cc-bg:             #f8fafc;
  --cc-bg-grad-1:      rgba(99,102,241,0.10);
  --cc-bg-grad-2:      rgba(16,185,129,0.07);

  /* Surfaces */
  --cc-surface:        #ffffff;
  --cc-surface-raised: #ffffff;
  --cc-card-subtle:    #f8fafc;

  /* Nav */
  --cc-nav-bg:         rgba(255,255,255,0.92);
  --cc-nav-border:     rgba(15,23,42,0.08);

  /* Segmented control */
  --cc-seg-bg:         rgba(15,23,42,0.06);
  --cc-tab-active-bg:  #ffffff;
  --cc-tab-active-text:#1e293b;
  --cc-tab-text:       #475569;
  --cc-tab-hover-bg:   rgba(15,23,42,0.05);
  --cc-tab-hover-text: #0f172a;
  --cc-tab-shadow:     0 1px 6px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.06);

  /* Region selector */
  --cc-region-bg:      rgba(15,23,42,0.06);
  --cc-region-border:  rgba(15,23,42,0.08);
  --cc-region-text:    #334155;
  --cc-region-focus-bg:#ffffff;

  /* Text */
  --cc-text:           #0f172a;
  --cc-text-body:      #1e293b;
  --cc-text-muted:     #475569;
  --cc-text-faint:     #94a3b8;

  /* Borders */
  --cc-border:         #e2e8f0;
  --cc-border-card:    #f1f5f9;

  /* Inputs */
  --cc-input-bg:       #ffffff;
  --cc-input-border:   #e2e8f0;
  --cc-input-text:     #0f172a;

  /* Dropdown menu */
  --cc-dropdown-bg:    #ffffff;
  --cc-dropdown-hover: #f8fafc;

  /* Modals */
  --cc-modal-bg:       #ffffff;
  --cc-modal-overlay:  rgba(15,23,42,0.55);
  --cc-modal-header-bg:#ffffff;
  --cc-modal-border:   #f1f5f9;
  --cc-modal-text:     #475569;
  --cc-modal-h3:       #94a3b8;

  /* FAQ */
  --cc-faq-bg:         #ffffff;
  --cc-faq-btn-text:   #374151;
  --cc-faq-body-bg:    #ffffff;

  /* Footer */
  --cc-footer-bg:      #ffffff;
  --cc-footer-border:  #e2e8f0;

  /* Accent */
  --cc-accent:         #6366f1;

  /* Scrollbar */
  --cc-scrollbar-thumb:#e2e8f0;

  /* Dark toggle */
  --cc-toggle-bg:      rgba(15,23,42,0.06);
  --cc-toggle-border:  rgba(15,23,42,0.10);
  --cc-toggle-text:    #475569;
  --cc-toggle-hover:   rgba(15,23,42,0.10);

  /* Copy button */
  --cc-copy-bg:        #f1f5f9;
  --cc-copy-text:      #64748b;
  --cc-copy-hover-bg:  #e2e8f0;
  --cc-copy-success-bg:#d1fae5;
  --cc-copy-success-text:#059669;
}

/* ─── Dark Theme Overrides ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --cc-bg:             #0A0A0A;
  --cc-bg-grad-1:      rgba(99,102,241,0.08);
  --cc-bg-grad-2:      rgba(16,185,129,0.04);

  --cc-surface:        #121212;
  --cc-surface-raised: #18181b;
  --cc-card-subtle:    #18181b;

  --cc-nav-bg:         rgba(9,9,11,0.92);
  --cc-nav-border:     rgba(255,255,255,0.08);

  --cc-seg-bg:         rgba(255,255,255,0.05);
  --cc-tab-active-bg:  #18181b;
  --cc-tab-active-text:#e2e8f0;
  --cc-tab-text:       #94a3b8;
  --cc-tab-hover-bg:   rgba(255,255,255,0.06);
  --cc-tab-hover-text: #e2e8f0;
  --cc-tab-shadow:     0 1px 6px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);

  --cc-region-bg:      rgba(255,255,255,0.07);
  --cc-region-border:  rgba(255,255,255,0.08);
  --cc-region-text:    #cbd5e1;
  --cc-region-focus-bg:#18181b;

  --cc-text:           #f1f5f9;
  --cc-text-body:      #e2e8f0;
  --cc-text-muted:     #94a3b8;
  --cc-text-faint:     #64748b;

  --cc-border:         rgba(255,255,255,0.08);
  --cc-border-card:    rgba(255,255,255,0.08);

  --cc-input-bg:       #1A1A1A;
  --cc-input-border:   rgba(255,255,255,0.08);
  --cc-input-text:     #f1f5f9;

  --cc-dropdown-bg:    #121212;
  --cc-dropdown-hover: #1A1A1A;

  --cc-modal-bg:       #121212;
  --cc-modal-overlay:  rgba(0,0,0,0.75);
  --cc-modal-header-bg:#121212;
  --cc-modal-border:   rgba(255,255,255,0.08);
  --cc-modal-text:     #94a3b8;
  --cc-modal-h3:       #64748b;

  --cc-faq-bg:         #121212;
  --cc-faq-btn-text:   #cbd5e1;
  --cc-faq-body-bg:    #121212;

  --cc-footer-bg:      #121212;
  --cc-footer-border:  rgba(255,255,255,0.08);

  --cc-scrollbar-thumb:#334155;

  --cc-toggle-bg:      rgba(255,255,255,0.07);
  --cc-toggle-border:  rgba(255,255,255,0.10);
  --cc-toggle-text:    #94a3b8;
  --cc-toggle-hover:   rgba(255,255,255,0.12);

  --cc-copy-bg:        #263347;
  --cc-copy-text:      #94a3b8;
  --cc-copy-hover-bg:  #334155;
  --cc-copy-success-bg:#064e3b;
  --cc-copy-success-text:#34d399;
}

  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: 'Geist', 'Inter', system-ui, sans-serif; }
  .font-serif { font-family: 'Instrument Serif', serif; }

/* ─── View Transition: Directional Circle Wipe ──────────────────────────── */
/* Kill default cross-fade blend */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  display: block;
}

/* ── Light → Dark: new dark page EXPANDS in as a circle ───────────── */
html.theme-to-dark::view-transition-old(root) {
  z-index: 1;
  animation: none;
}
html.theme-to-dark::view-transition-new(root) {
  z-index: 2;
  animation: circle-expand .55s cubic-bezier(.65, 0, .35, 1) forwards;
}

/* ── Dark → Light: old dark page SHRINKS away, light revealed beneath ─── */
html.theme-to-light::view-transition-old(root) {
  z-index: 2;
  animation: circle-collapse .55s cubic-bezier(.65, 0, .35, 1) forwards;
}
html.theme-to-light::view-transition-new(root) {
  z-index: 1;
  animation: none;
}

@keyframes circle-expand {
  from { clip-path: circle(0px     at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
  to   { clip-path: circle(150vmax at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
}
@keyframes circle-collapse {
  from { clip-path: circle(150vmax at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
  to   { clip-path: circle(0px     at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}
/* While the wipe is playing, freeze all per-element colour transitions so
   nothing "fades" under the circle — everything flips instantly. 
   We exclude #dark-toggle so the sun/moon sliding animation still plays. */
.no-transitions *:not(#dark-toggle, #dark-toggle *),
.no-transitions *:not(#dark-toggle, #dark-toggle *)::before,
.no-transitions *:not(#dark-toggle, #dark-toggle *)::after {
  transition: none !important;
  animation-duration: 0s !important;
}


/* ─── Page background ──────────────────────────────────────────────────────── */
.page-bg {
  background-color: var(--cc-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      var(--cc-bg-grad-1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 90%,
      var(--cc-bg-grad-2) 0%, transparent 60%);
  color: var(--cc-text-body);
}

/* ─── Top navigation bar ───────────────────────────────────────────────────── */
.site-nav {
  background: var(--cc-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--cc-nav-border);
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* ─── Segmented tab control ────────────────────────────────────────────────── */
.seg-control {
  background: var(--cc-seg-bg);
  transition: background 0.25s ease;
}

.tab-btn {
  color: var(--cc-tab-text);
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.tab-btn:hover:not(.active) {
  color: var(--cc-tab-hover-text);
  background: var(--cc-tab-hover-bg);
}
.tab-btn.active {
  background: var(--cc-tab-active-bg);
  color: var(--cc-tab-active-text);
  box-shadow: var(--cc-tab-shadow);
}

/* ─── Region selector ──────────────────────────────────────────────────────── */
.region-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cc-region-bg);
  border: 1px solid var(--cc-region-border);
  border-radius: 10px;
  padding: 6px 10px 6px 8px;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.25s ease;
}
.region-select-wrap:focus-within {
  background: var(--cc-region-focus-bg);
  box-shadow: 0 1px 6px rgba(15,23,42,0.12), 0 0 0 1px rgba(99,102,241,0.35);
}
.region-globe {
  display: flex;
  align-items: center;
  color: #64748b;
  flex-shrink: 0;
}
.region-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-region-text);
  cursor: pointer;
  padding-right: 4px;
  white-space: nowrap;
}
.region-select:focus { outline: none; }

/* ─── Dropdown menu ────────────────────────────────────────────────────────── */
#region-menu {
  background: var(--cc-dropdown-bg);
  border: 1px solid var(--cc-border);
  transition: background 0.25s ease;
}
#region-menu a {
  color: var(--cc-text-muted);
}
#region-menu a:hover,
#region-menu a.selected-region {
  background: var(--cc-dropdown-hover);
  color: var(--cc-text);
}



/* ─── Calculator panel ───────────────────────────────────────────────────────── */
.calc-panel {
  display: block;
  width: 100%;
  position: relative;
  isolation: isolate;
}
/* ─── Hero tagline text ────────────────────────────────────────────────────── */
.hero-title  { color: var(--cc-text); }
.hero-sub    { color: var(--cc-text-muted); }

/* ─── Calculator card surfaces ─────────────────────────────────────────────── */


/* ─── Text inputs ───────────────────────────────────────────────────────────── */
.field-input {
  border: 1.5px solid var(--cc-input-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cc-input-text);
  background: var(--cc-input-bg);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.25s ease, color 0.25s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Currency prefix label ────────────────────────────────────────────────── */
.currency-symbol-label { color: var(--cc-text-faint); }

/* ─── Range sliders ─────────────────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: var(--cc-border);
  cursor: pointer;
  outline: none;
  transition: background 0.25s ease;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cc-surface);
  border: 2.5px solid #6366f1;
  box-shadow: 0 1px 6px rgba(99,102,241,0.28);
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s, background 0.25s ease;
}
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cc-surface);
  border: 2.5px solid #6366f1;
  cursor: grab;
}
input[type="range"].stripe-slider::-webkit-slider-thumb {
  border-color: #7c3aed;
  box-shadow: 0 1px 6px rgba(124,58,237,0.28);
}
input[type="range"].stripe-slider::-moz-range-thumb {
  border-color: #7c3aed;
}

/* ─── Shared Base Styles ─── */
  body {
    background-color: var(--cc-bg);
    color: var(--cc-text);
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image: 
    radial-gradient(at 0% 0%, var(--cc-bg-grad-1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, var(--cc-bg-grad-2) 0px, transparent 50%);
  background-attachment: fixed;
}



.tabular-nums {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

button {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
button:active {
  transform: scale(0.96);
}

/* ─── Result metric cards ───────────────────────────────────────────────────── */
.metric-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.10);
}

/* ─── Stripe fee progress bar ────────────────────────────────────────────────── */
.fee-bar { transition: width 0.55s cubic-bezier(0.4,0,0.2,1); }

/* ─── Collapsible FAQ ───────────────────────────────────────────────────────── */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s ease;
}
.faq-body.open { max-height: 900px; }
.faq-chevron  { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* FAQ button and body surfaces */
.faq-toggle-btn {
  background: var(--cc-faq-bg) !important;
  color: var(--cc-faq-btn-text) !important;
  border-color: var(--cc-border-card) !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.faq-toggle-btn:hover {
  color: var(--cc-text) !important;
}
.faq-content-box {
  background: var(--cc-faq-body-bg) !important;
  border-color: var(--cc-border-card) !important;
  color: var(--cc-text-muted) !important;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.faq-content-box strong { color: var(--cc-text) !important; }
.faq-content-box ul li  { color: var(--cc-text-muted) !important; }

/* ─── Copy Result Button ────────────────────────────────────────────────────── */
.copy-result-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--cc-border);
  background: var(--cc-copy-bg);
  color: var(--cc-copy-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.copy-btn:hover {
  background: var(--cc-copy-hover-bg);
  color: var(--cc-text);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15,23,42,0.10);
}
.copy-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.copy-btn.copied {
  background: var(--cc-copy-success-bg);
  color: var(--cc-copy-success-text);
  border-color: transparent;
}
.copy-btn svg { flex-shrink: 0; }

/* ─── Slate text overrides (dark mode support) ──────────────────────────────── */
[data-theme="dark"] .text-slate-800 { color: var(--cc-text) !important; }
[data-theme="dark"] .text-slate-700 { color: var(--cc-text-body) !important; }
[data-theme="dark"] .text-slate-600 { color: var(--cc-text-muted) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--cc-text-muted) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--cc-text-faint) !important; }
[data-theme="dark"] .text-slate-900 { color: var(--cc-text) !important; }

/* Dark card / surface overrides */
[data-theme="dark"] .bg-white          { background-color: var(--cc-surface) !important; }
[data-theme="dark"] .bg-slate-50       { background-color: var(--cc-surface) !important; }
[data-theme="dark"] .border-slate-100  { border-color: var(--cc-border-card) !important; }
[data-theme="dark"] .border-slate-200  { border-color: var(--cc-border) !important; }

/* FAQ info box overrides */
[data-theme="dark"] .bg-amber-50   { background-color: #2d1f0a !important; }
[data-theme="dark"] .border-amber-200 { border-color: #92400e !important; }
[data-theme="dark"] .text-amber-800  { color: #fbbf24 !important; }
[data-theme="dark"] .bg-indigo-50  { background-color: #1e1b4b !important; }
[data-theme="dark"] .border-indigo-200 { border-color: #3730a3 !important; }
[data-theme="dark"] .text-indigo-800  { color: #a5b4fc !important; }
[data-theme="dark"] .bg-teal-50    { background-color: #042f2e !important; }
[data-theme="dark"] .border-teal-200  { border-color: #0f766e !important; }
[data-theme="dark"] .text-teal-800   { color: #5eead4 !important; }

/* Metric card dark overrides */
[data-theme="dark"] .bg-rose-50    { background-color: #1f0d10 !important; }
[data-theme="dark"] .border-rose-100  { border-color: #9f1239 !important; }
[data-theme="dark"] .bg-orange-50  { background-color: #1c0f05 !important; }
[data-theme="dark"] .border-orange-100 { border-color: #9a3412 !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: #022c22 !important; }
[data-theme="dark"] .border-emerald-100 { border-color: #065f46 !important; }
[data-theme="dark"] .border-emerald-200 { border-color: #065f46 !important; }
[data-theme="dark"] .bg-red-50     { background-color: #1f0707 !important; }
[data-theme="dark"] .border-red-100  { border-color: #991b1b !important; }
[data-theme="dark"] .bg-slate-200  { background-color: #334155 !important; }
[data-theme="dark"] .bg-indigo-50.metric-card  { background-color: #1e1b4b !important; }
[data-theme="dark"] .bg-violet-50  { background-color: #2e1065 !important; }
[data-theme="dark"] .border-violet-200 { border-color: #6d28d9 !important; }
[data-theme="dark"] .border-indigo-100 { border-color: #3730a3 !important; }

/* Gradient hero metric overrides */
[data-theme="dark"] .from-indigo-50 { --tw-gradient-from: #1e1b4b !important; }
[data-theme="dark"] .to-violet-50   { --tw-gradient-to:   #2e1065 !important; }
[data-theme="dark"] .from-emerald-50 { --tw-gradient-from: #022c22 !important; }
[data-theme="dark"] .to-teal-50     { --tw-gradient-to:   #042f2e !important; }

/* Footer */
[data-theme="dark"] .border-t { border-color: var(--cc-footer-border) !important; }

/* ─── Modal overlay ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--cc-modal-overlay);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ─── Modal box ─────────────────────────────────────────────────────────────── */
.modal-box {
  background: var(--cc-modal-bg);
  border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15,23,42,0.06);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--cc-scrollbar-thumb) transparent;
}
.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}
.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: var(--cc-scrollbar-thumb); border-radius: 99px; }

/* ─── Modal header ──────────────────────────────────────────────────────────── */
.modal-header {
  position: sticky;
  top: 0;
  background: var(--cc-modal-header-bg);
  border-bottom: 1px solid var(--cc-modal-border);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--cc-copy-bg);
  color: var(--cc-copy-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.modal-close-btn:hover {
  background: var(--cc-copy-hover-bg);
  color: var(--cc-text);
}
.modal-body {
  padding: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--cc-modal-text);
  transition: color 0.25s ease;
}
.modal-body h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cc-modal-h3);
  margin: 1.25rem 0 0.4rem;
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 0.75rem; color: var(--cc-modal-text); }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body a { color: var(--cc-accent); text-decoration: underline; }
.modal-body ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.modal-body ul li { margin-bottom: 0.25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 ADDITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Scrollable Tab Wrapper ────────────────────────────────────────────────── */
.seg-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
}
.seg-wrapper::-webkit-scrollbar { display: none; }
.seg-control { min-width: max-content; }

/* ─── CSS Tooltip ─────────────────────────────────────────────────────────── */
.has-tooltip {
  position: relative;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Tooltip bubble */
.has-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
  padding: 10px 14px;
  border-radius: 10px;
  width: 280px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  z-index: 200;
  transition: opacity 0.18s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  white-space: normal;
}
/* Tooltip arrow */
.has-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #0f172a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 200;
}
.has-tooltip:hover::after,
.has-tooltip:hover::before { opacity: 1; }
/* Dark mode tooltip */
[data-theme="dark"] .has-tooltip::after {
  background: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
[data-theme="dark"] .has-tooltip::before {
  border-top-color: #e2e8f0;
}

/* ─── Tooltip Info Icon ─────────────────────────────────────────────────────── */
.tooltip-icon {
  width: 14px;
  height: 14px;
  color: var(--cc-text-faint);
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─── Niche / Custom Select Dropdown ────────────────────────────────────────── */
.niche-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1.5px solid var(--cc-input-border);
  border-radius: 10px;
  padding: 10px 38px 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cc-input-text);
  background-color: var(--cc-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.25s ease, color 0.25s ease;
}
.niche-select:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
}

/* ─── Invoice Preview Box ────────────────────────────────────────────────────── */
.inv-preview {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78125rem;
  line-height: 1.85;
  color: var(--cc-text-muted);
  background: var(--cc-card-subtle);
  border: 1.5px solid var(--cc-border);
  border-radius: 12px;
  padding: 18px 22px;
  white-space: pre;
  overflow-x: auto;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ─── Revenue Comparison Bars ────────────────────────────────────────────────── */
.rev-bar-track {
  height: 10px;
  background: var(--cc-border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
.rev-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.55s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Phase 2 Dark Mode — Blue card overrides ────────────────────────────────── */
[data-theme="dark"] .bg-blue-50      { background-color: #0c1e3e !important; }
[data-theme="dark"] .border-blue-100 { border-color: #1e3a5f !important; }
[data-theme="dark"] .border-blue-200 { border-color: #1d4ed8 !important; }
[data-theme="dark"] .text-blue-400   { color: #60a5fa !important; }
[data-theme="dark"] .text-blue-500   { color: #60a5fa !important; }
[data-theme="dark"] .text-blue-600   { color: #93c5fd !important; }
[data-theme="dark"] .text-blue-700   { color: #93c5fd !important; }
[data-theme="dark"] .from-blue-50    { --tw-gradient-from: #0c1e3e !important; }
[data-theme="dark"] .to-cyan-50      { --tw-gradient-to:   #062d3a !important; }

/* Cyan */
[data-theme="dark"] .bg-cyan-50      { background-color: #062d3a !important; }
[data-theme="dark"] .border-cyan-100 { border-color: #164e63 !important; }
[data-theme="dark"] .border-cyan-200 { border-color: #0e7490 !important; }
[data-theme="dark"] .text-cyan-400   { color: #22d3ee !important; }
[data-theme="dark"] .text-cyan-500   { color: #22d3ee !important; }
[data-theme="dark"] .text-cyan-600   { color: #67e8f9 !important; }

/* Amber supplement */
[data-theme="dark"] .text-amber-400  { color: #fbbf24 !important; }
[data-theme="dark"] .text-amber-600  { color: #f59e0b !important; }
[data-theme="dark"] .text-amber-700  { color: #fbbf24 !important; }
[data-theme="dark"] .from-amber-50   { --tw-gradient-from: #2d1f0a !important; }
[data-theme="dark"] .to-orange-50    { --tw-gradient-to:   #1c0f05 !important; }

/* Slate hero metric (invoice) */
[data-theme="dark"] .bg-slate-100    { background-color: #1e293b !important; }
[data-theme="dark"] .border-slate-300 { border-color: #334155 !important; }

/* ─── Panel Slide Animations ─── */
/* Removed old inline slide animations */

/* ─── Scrollable Nav Layout & Fade Mask ─── */
.seg-wrapper {
  /* Premium Edge Fade */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
}

.seg-control {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

/* Hide scrollbar for Chrome, Safari and Opera */
.seg-control::-webkit-scrollbar {
  display: none;
}

/* ─── Bouncy Bear Theme Toggle ─── */

/* Override #dark-toggle to not apply SVG transforms (handled by aria-pressed) */
#dark-toggle {
  flex-shrink: 0;
  display: block;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  margin-left: 4px;
}
#dark-toggle:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
  border-radius: 100vh;
}

*,

*:after,

*:before {

	box-sizing: border-box;

}



#dark-toggle {

  --slide-ease: cubic-bezier(.4,-0.3,.6,1.3);

/*   --slide-ease: cubic-bezier(.8,-0.3,.2,1.3); */

	--easing: var(--slide-ease);

	--speed: 0.5s;

	--width: 72px;

	--ar: 8 / 3;

	--ray: hsl(0 0% 100% / 0.5);

	--sun: hsl(47, 91%, 58%);

	--moon: hsl(212, 13%, 82%);

	--crater: hsl(221, 16%, 68%);

	--bg: hsl(219, 30%, 88%);

	--bear-speed: 10s;

  --color: hsl(219 30% 20%);

}















.toggle__backdrop:first-of-type .clouds path:first-of-type {

	fill: var(--ray);

}



.toggle {

  -webkit-tap-highlight-color: transparent;

	width: var(--width);

  /* random attempts at tackling the overflow iOS issue */

  z-index: 10;

  will-change: transform;

  isolation: isolate;

  transform: translate3d(0, 0, 0);

  /* End of workaround city   */

	aspect-ratio: var(--ar);

	border-radius: 100vh;

	border: 0;

	position: relative;

	padding: 0;

	overflow: hidden;

	cursor: pointer;

	transition: background var(--speed) var(--easing);

	--sky: hsl(204, 53%, 47%);

	--night: hsl(229, 25%, 16%);

	outline-color: transparent;

	background: hsl(

		calc(204 + (var(--dark, 0) * 25))

		calc((53 - (var(--dark, 0) * 28)) * 1%)

		calc((47 - (var(--dark, 0) * 31)) * 1%)

	);

	box-shadow:

		calc(var(--width) * 0) calc(var(--width) * 0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210 10% 100% / 0.95),

		calc(var(--width) * 0) calc(var(--width) * -0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210 10% 10% / 0.2),

		calc(var(--width) * 0) calc(var(--width) * 0.02) calc(var(--width) * 0.5) 0 hsl(210 10% 100% / 0.15);

}



.toggle:after {

	content: "";

	position: absolute;

	inset: 0;

	box-shadow:

		calc(var(--width) * 0) calc(var(--width) * -0.025) calc(var(--width) * 0.025) 0 hsl(210 10% 10% / 0.15) inset,

		calc(var(--width) * 0) calc(var(--width) * 0.025) calc(var(--width) * 0.025) 0 hsl(210 10% 10% / 0.65) inset;

	border-radius: 100vh;

}



.toggle__content {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  overflow: hidden;

  border-radius: 100vh;

  display: block;

  clip-path: inset( 0 0 0 0 round 100vh);

  container-type: inline-size;

}



.toggle__backdrop {

  overflow: visible !important;

	position: absolute;

	bottom: 0;

	width: 100%;

	left: 0;

	transition: translate var(--speed) var(--easing);

	translate: 0 calc(

		var(--dark, 0) * (100% - (3 / 8 * var(--width)))

	);

}



[aria-pressed=false] .toggle__backdrop:last-of-type {

	transition-timing-function: cubic-bezier(.2,-0.6,.7,1.6);

}

[aria-pressed=false] .stars path {

	transition-delay: 0s;

}



.stars path {

	transform-box: fill-box;

	transform-origin: 25% 50%;

	scale: calc(0.25 + (var(--dark, 0) * 0.75));

	transition: scale var(--speed) calc(var(--speed) * 0.5) var(--easing);

}



.toggle__indicator {

	height: 100%;

	aspect-ratio: 1;

	border-radius: 0%;

	display: grid;

	place-items: center;

	padding: 3%;

  transition: translate var(--speed) var(--slide-ease);

  translate: calc(var(--dark, 0) * (100cqi - 100%)) 0;

}



.pilot-bear {

	position: absolute;

	width: 25%;

}



.toggle__star {

	height: 100%;

	aspect-ratio: 1;

	border-radius: 50%;

	position: relative;

	transition: translate var(--speed) var(--easing);

	translate: calc((var(--dark, 0) * -10%) + 5%) 0;

/* 	translate: calc((var(--dark, 0) * -18%) + 5%) 0; */

}



.sun {

	background: var(--sun);

	position: absolute;

	inset: 0;

	border-radius: 50%;

	overflow: hidden;

	box-shadow:

		calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 100% / 0.95) inset,

		calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 20% / 0.5) inset;

}

.moon {

	position: absolute;

	inset: -1%;

	border-radius: 50%;

	background: var(--moon);

  transition: translate var(--speed) ease-in-out;

	translate: calc((100 - (var(--dark, 0) * 100)) * 1%) 0%;

	box-shadow:

		calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 100% / 0.95) inset,

		calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 10% / 0.95) inset;

}



.moon__crater {

	position: absolute;

	background: var(--crater);

	border-radius: 50%;

	width: calc(var(--size, 10) * 1%);

	aspect-ratio: 1;

	left: calc(var(--x) * 1%);

	top: calc(var(--y) * 1%);

	box-shadow:

		calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.01) 0 hsl(210 10% 6% / 0.25) inset,

		0 calc(var(--width) * 0.005) calc(var(--width) * 0.01) 0 hsl(210 10% 100% / 0.25);

}



.moon__crater:nth-of-type(1) {

	--size: 18;

	--x: 40;

	--y: 15;

}

.moon__crater:nth-of-type(2) {

	--size: 20;

	--x: 65;

	--y: 58;

}

.moon__crater:nth-of-type(3) {

	--size: 34;

	--x: 18;

	--y: 40;

}



.toggle__star:before {

	content: "";

	z-index: -1;

	width: 356%;

	background:

		radial-gradient(hsl(0 0% 100% / 0.25) 40%, transparent 40.5%),

		radial-gradient(hsl(0 0% 100% / 0.25) 56%, transparent 56.5%)

	  hsl(0 0% 100% / 0.25);

	border-radius: 50%;

	aspect-ratio: 1;

	position: absolute;

	top: 50%;

	left: 50%;

	transition: translate var(--speed) var(--easing);

	translate: calc(

		(50 - (var(--dark, 0) * 4)) *

		-1%

	)

	-50%;

}



.toggle__star:after {

	content: "";

	position: absolute;

	inset: 0;

	display: block;

	background: hsl(0 0% 0% / 0.5);

	filter: blur(4px);

	translate: 2% 4%;

	border-radius: 50%;

	z-index: -1;

}



.toggle__indicator-wrapper {

	position: absolute;

	inset: 0;

}



[aria-pressed=true] {

	--dark: 1;

}



/* Fun stuff! */



/* We have 11 stars */



.stars g {

	transform-box: fill-box;

	transform-origin: 50% 50%;

}

.stars g:nth-of-type(3) {

	animation: twinkle 4s -2s infinite;

}



.stars g:nth-of-type(11) {

	animation: twinkle 6s -2s infinite;

}



.stars g:nth-of-type(9) {

	animation: twinkle 4s -1s infinite;

}



@keyframes twinkle {

	0%, 40%, 60%, 100% {

		transform: scale(1);

	}

	50% {

		transform: scale(0);

	}

}



.astrobear {

	width: 12%;

	position: absolute;

	top: 100%;

	left: 0%;

	transition: translate calc(var(--speed) + (var(--dark, 0) * (var(--bear-speed) - var(--speed))))

		calc(var(--bear-speed) * (0.4 * var(--dark, 0))) linear;

	translate: calc(var(--dark, 0) * 400%) calc(var(--dark, 0) * -350%);

}



.astrobear svg {

	transform-origin: 50% 75%;

	scale: var(--dark, 0);

	rotate: calc(var(--dark, 0) * 360deg);

	transition: rotate calc(var(--speed) + (var(--dark, 0) * (var(--bear-speed) - var(--speed)))) calc(var(--bear-speed) * 0.4) linear, scale var(--speed) ease-in-out;

}





.astrobear__container {

	position: absolute;

	overflow: hidden;

	inset: 0;

	clip-path: inset(0 0 0 0);

	opacity: var(--dark, 0);

	translate: 0 calc(-200% + (var(--dark, 0) * 200%));

	transition: opacity var(--speed) var(--easing), translate var(--speed) var(--easing);

}



.pilot__container {

	position: absolute;

	overflow: hidden;

	inset: 0;

	clip-path: inset(0 0 0 0);

	opacity: calc(1 - var(--dark, 0));

	translate: 0 calc(var(--dark, 0) * 200%);

	transition: opacity var(--speed) var(--easing), translate var(--speed) var(--easing);

}



.pilot-bear {

	width: 18%;

	position: absolute;

	top: 70%;

	left: 100%;

	transition:

		translate

			calc(

				var(--speed) + ((1 - var(--dark, 0)) *

					((var(--bear-speed) * 0.5) - var(--speed))))

			calc((var(--bear-speed) * 0.5) * ((1 - var(--dark, 0)) * 0.4)) linear;

	translate:

		calc(

			(0 - (1 - var(--dark, 0))) * (var(--width) + 100%)

		) calc(

		(0 - (1 - var(--dark, 0))) * (200%)

	);

}



.pilot {

	rotate: 12deg;

	animation: fly 4s infinite ease-in-out;

}



@keyframes fly {

	50% { translate: 0 -25%; }

}



.controls {

  position: fixed;

  bottom: 1rem;

  right: 1rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-family: sans-serif;

  color: var(--color);

  transition: color var(--speed) var(--easing);

}



[type=checkbox] {

  accent-color: var(--color);

  transition: accent-color var(--speed) var(--easing);

}



.bear-link {

	color: canvasText;

	position: fixed;

	top: 1rem;

	left: 1rem;

	width: 48px;

	aspect-ratio: 1;

	display: grid;

	place-items: center;

	opacity: 0.8;

  transition: color var(--speed);

}



:where(.x-link, .bear-link):is(:hover, :focus-visible) {

	opacity: 1;

}

.bear-link svg {

	width: 75%;

}


/* Removed old duplicate inline slide animations */


body { overflow-x: hidden; }