/*
 * SimplyAnswered — Premium UI
 * Violet→teal gradient identity, smooth transitions, micro-interactions.
 * Design language: Linear/Stripe-inspired — generous spacing, glassmorphism,
 * floating labels, animated reveals, gradient accents.
 */
:root {
  /* Brand */
  --brand-primary: #7C5CFF;
  --brand-darker: #6B4AE0;
  --brand-glow: rgba(124, 92, 255, .35);
  --brand-teal: #00D4A6;
  --brand-teal-dim: rgba(0, 212, 166, .12);
  --brand-rgb: 124, 92, 255;

  /* Surfaces */
  --bg: #FAFAFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F4F4FE;
  --bg-glass: rgba(255, 255, 255, .72);
  --bg-glass-border: rgba(255, 255, 255, .45);

  /* Text */
  --text: #0B1026;
  --text-secondary: #3E4463;
  --text-muted: #6E7491;
  --text-inverse: #FFFFFF;
  --text-gradient: linear-gradient(135deg, #0B1026 0%, #3E4463 100%);

  /* Semantic */
  --success: #00C853;
  --success-bg: rgba(0, 200, 83, .08);
  --success-border: rgba(0, 200, 83, .2);
  --warning: #FF9800;
  --warning-bg: rgba(255, 152, 0, .08);
  --warning-border: rgba(255, 152, 0, .2);
  --danger: #FF5252;
  --danger-bg: rgba(255, 82, 82, .08);
  --danger-border: rgba(255, 82, 82, .2);
  --info: #2196F3;
  --info-bg: rgba(33, 150, 243, .08);

  /* Geometry */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(11, 16, 38, .04);
  --shadow-sm: 0 2px 8px rgba(11, 16, 38, .06);
  --shadow-md: 0 4px 16px rgba(11, 16, 38, .08);
  --shadow-lg: 0 8px 32px rgba(11, 16, 38, .1);
  --shadow-xl: 0 16px 48px rgba(11, 16, 38, .12);
  --shadow-glow: 0 0 24px var(--brand-glow);

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* Typography */
  --font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;

  /* Compatibility names still used by a handful of server-rendered views. */
  --primary: var(--brand-primary);
  --light-text: var(--text);
  --text-primary: var(--text);
  --muted-text-light: var(--text-muted);
  --border-light: var(--bg-glass-border);
  --card-light-bg: var(--bg-elevated);
  --portal-success: var(--success);
  --portal-radius-lg: var(--radius-lg);
  --portal-shadow-md: var(--shadow-md);
  --portal-space-2: var(--sp-2);
  --portal-space-3: var(--sp-3);
  --portal-space-4: var(--sp-4);
  --portal-space-5: var(--sp-5);
}

[hidden] { display: none !important; }

/* ---- Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(var(--brand-rgb), .2); }

a { color: var(--brand-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-darker); }

.bx { font-size: 1.125rem; vertical-align: -3px; transition: transform var(--dur) var(--ease-spring); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb), .2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb), .35); }

/* ---- Top bar (app pages) ---- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--bg-glass-border);
  animation: slide-down var(--dur-slow) var(--ease) both;
}
@keyframes slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.03em;
  cursor: pointer; transition: transform var(--dur) var(--ease-spring);
}
.brand:hover { transform: scale(1.02); }
.brand:active { transform: scale(.98); }
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-teal));
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 0.875rem; font-weight: 800;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.2);
}
.brand-logo { height: 32px; width: auto; border-radius: var(--radius-xs); filter: drop-shadow(var(--shadow-xs)); }
.main-nav { display: flex; gap: var(--sp-1); flex: 1; }
.main-nav a {
  padding: 8px 14px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 550; font-size: 0.875rem;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.main-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-teal));
  border-radius: 1px; transition: all var(--dur) var(--ease);
  transform: translateX(-50%);
}
.main-nav a:hover { color: var(--text); background: rgba(var(--brand-rgb), .04); }
.main-nav a:hover::after { width: 60%; }
.main-nav a.active { color: var(--brand-primary); font-weight: 650; }
.main-nav a.active::after { width: 100%; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }

.credit-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(0,212,166,.06));
  border: 1px solid rgba(124,92,255,.15);
  color: var(--brand-primary); font-weight: 700; font-size: 0.875rem;
  border-radius: var(--radius-full); padding: 8px 16px;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.credit-chip:hover { box-shadow: var(--shadow-glow); border-color: rgba(124,92,255,.3); transform: translateY(-1px); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-darker));
  color: white; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem;
  box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.avatar:hover { box-shadow: var(--shadow-glow); transform: scale(1.05); }

/* ---- Shell ---- */
.shell {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  position: relative; z-index: 1;
}

/* ---- Page header ---- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
  animation: fade-up var(--dur-slow) var(--ease) both .1s;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.page-head h1 {
  font-size: clamp(26px, 3.5vw, 36px); line-height: 1.1; letter-spacing: -.035em; font-weight: 750;
  background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-head .sub { color: var(--text-muted); font-size: 0.9375rem; margin-top: 8px; max-width: 560px; }
.head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Cards / panels ---- */
.panel {
  background: var(--bg-elevated);
  border: 1px solid rgba(11, 16, 38, .06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  animation: fade-up var(--dur-slow) var(--ease) both;
}
.panel:not([data-reveal]),[data-stagger] > * { animation: none; opacity: 1; transform: none; }
.panel:hover { box-shadow: var(--shadow-md); }
.panel:nth-child(2) { animation-delay: .06s; }
.panel:nth-child(3) { animation-delay: .12s; }
.panel:nth-child(4) { animation-delay: .18s; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(11, 16, 38, .04);
}
.panel-head h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.panel-head h2 .bx { color: var(--brand-primary); font-size: 20px; }
.panel-head .hint { font-size: 0.875rem; color: var(--text-muted); }
.panel-body { padding: var(--sp-5); }
.panel-body.tight { padding: var(--sp-3) var(--sp-5); }
.panel-foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid rgba(11, 16, 38, .04);
  color: var(--text-muted); font-size: 0.875rem;
}

.grid { display: grid; gap: var(--sp-4); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-side { grid-template-columns: 1fr 340px; align-items: start; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-darker));
  color: var(--text-inverse);
  font: 600 0.875rem/1 var(--font);
  cursor: pointer; text-decoration: none;
  transition: all var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.1));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.btn:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn.secondary {
  background: var(--bg-elevated); border-color: rgba(11, 16, 38, .1); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.btn.secondary:hover { border-color: rgba(124,92,255,.3); background: rgba(124,92,255,.02); box-shadow: var(--shadow-sm); }
.btn.danger { background: linear-gradient(135deg, #FF5252, #E53935); }
.btn.quiet { background: transparent; color: var(--text-muted); }
.btn.quiet:hover { background: rgba(11,16,38,.04); color: var(--text); }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 0.875rem; border-radius: var(--radius-xs); }
.btn.block { width: 100%; }
.btn.pill { border-radius: var(--radius-full); padding: 10px 24px; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Forms ---- */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 6px;
  color: var(--text-secondary); letter-spacing: .01em;
}
.field .help { font-size: 0.875rem; color: var(--text-muted); margin-top: 6px; }
.control {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid rgba(11, 16, 38, .1); border-radius: var(--radius-sm);
  font: 400 0.875rem/1.4 var(--font); color: var(--text);
  background: var(--bg-elevated); outline: none;
  transition: all var(--dur) var(--ease);
}
.control::placeholder { color: rgba(110, 116, 145, .5); }
.control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12), var(--shadow-sm);
  background: var(--bg-elevated);
  color: var(--text);
  caret-color: var(--text);
  -webkit-text-fill-color: var(--text);
}
.control.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
select.control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7491' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea.control { resize: vertical; min-height: 80px; }
.row { display: flex; gap: var(--sp-3); }
.row > * { flex: 1; }

/* Floating label variant for auth pages */
.field-float { position: relative; margin-bottom: var(--sp-4); }
.field-float input {
  width: 100%; min-height: 52px; padding: 18px 16px 6px;
  border: 1.5px solid rgba(11,16,38,.08); border-radius: var(--radius-sm);
  font: 400 0.9375rem/1.4 var(--font); color: var(--text);
  background: var(--bg-elevated); outline: none;
  transition: all var(--dur) var(--ease);
}
.field-float label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 0.9375rem; color: var(--text-muted); pointer-events: none;
  transition: all var(--dur) var(--ease);
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label {
  top: 18px; font-size: 0.875rem; font-weight: 600; color: var(--brand-primary);
  letter-spacing: .03em; text-transform: uppercase;
}
.field-float input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1); }

/* ---- Toggle switch ---- */
.switch-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid rgba(11,16,38,.04);
}
.switch-row:last-child { border-bottom: none; }
.switch-row .txt { flex: 1; }
.switch-row .txt strong { display: block; font-size: 0.875rem; font-weight: 650; }
.switch-row .txt span { display: block; font-size: 0.875rem; color: var(--text-muted); margin-top: 3px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; margin-top: 2px; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 1; margin: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: rgba(11,16,38,.12); transition: all var(--dur) var(--ease);
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 0 rgba(var(--brand-rgb), .2);
  transition: all var(--dur) var(--ease-spring);
}
.switch input:checked + .track {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-teal));
}
.switch input:checked + .track .knob {
  left: 23px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 12px rgba(var(--brand-rgb), .3);
}

/* ---- Badges / alerts ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 650 0.875rem/1 var(--font); padding: 5px 12px; border-radius: var(--radius-full);
  background: rgba(11,16,38,.05); color: var(--text-muted); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.badge.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge.warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.badge.info { background: var(--info-bg); color: var(--info); border: 1px solid rgba(33,150,243,.2); }
.badge.brand { background: rgba(124,92,255,.08); color: var(--brand-primary); border: 1px solid rgba(124,92,255,.15); }

.alert {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 0.875rem; border: 1px solid; margin-bottom: var(--sp-4);
  animation: fade-up var(--dur) var(--ease) both;
}
.alert.info { background: var(--info-bg); border-color: rgba(33,150,243,.15); color: #1565C0; }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-border); color: #E65100; }
.alert.success { background: var(--success-bg); border-color: var(--success-border); color: #2E7D32; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table.portal-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.portal-table th {
  text-align: left; font: 700 0.875rem/1.3 var(--font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 12px 14px; border-bottom: 1px solid rgba(11,16,38,.06); white-space: nowrap;
}
.portal-table td { padding: 14px; border-bottom: 1px solid rgba(11,16,38,.03); font-size: 0.875rem; vertical-align: middle; }
.portal-table tr:last-child td { border-bottom: none; }
.portal-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.portal-table tbody tr:hover { background: rgba(var(--brand-rgb), .02); }
.portal-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- Tabs ---- */
.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1.5px solid rgba(11,16,38,.06);
  margin-bottom: var(--sp-4); overflow-x: auto; padding-bottom: 0;
}
.tabs a {
  padding: 12px 16px; font-weight: 600; font-size: 0.875rem; color: var(--text-muted);
  border-bottom: 2.5px solid transparent; white-space: nowrap;
  transition: all var(--dur) var(--ease); margin-bottom: -1.5px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 650;
}

/* ---- KPI / stats ---- */
.kpi-label {
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px;
}
.kpi-value {
  font-size: 36px; font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text), var(--brand-primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.counter-arrived { animation: counter-arrive .32s var(--ease-out) both; }
@keyframes counter-arrive {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.kpi-sub { font-size: 0.875rem; color: var(--text-muted); margin-top: 6px; }

/* ---- Steps / onboarding ---- */
.steps { list-style: none; }
.steps li {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 0.875rem;
  transition: all var(--dur) var(--ease);
}
.steps .dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
  background: var(--success-bg); color: var(--success);
  transition: all var(--dur) var(--ease-spring);
}
.steps li.todo .dot { background: rgba(11,16,38,.04); color: var(--text-muted); }
.steps li.current .dot {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-teal));
  color: white; box-shadow: var(--shadow-glow);
}
.steps li.current { font-weight: 650; }

/* ---- Activity ---- */
.activity { list-style: none; }
.activity li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 0; border-bottom: 1px solid rgba(11,16,38,.03); font-size: 0.875rem;
  animation: fade-in var(--dur) var(--ease) both;
}
.activity li:last-child { border-bottom: none; }
.activity .amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.plus { color: var(--success); }
.amt.minus { color: var(--text); }

/* ---- Empty state ---- */
.empty {
  text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted);
}
.empty .bx { font-size: 44px; display: block; margin-bottom: 12px; opacity: .3; }
.empty strong { display: block; font-size: 1rem; color: var(--text-secondary); margin-bottom: 4px; }

/* ---- Divider ---- */
.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--text-muted); font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  margin: var(--sp-4) 0;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: rgba(11,16,38,.06); }

/* ---- Search bar ---- */
.search-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elevated);
  border: 1.5px solid rgba(11,16,38,.06);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-4);
  min-height: 52px;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
}
.search-bar:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .08), var(--shadow-md);
}
.search-bar input {
  flex: 1; border: none; outline: none; font: 400 0.9375rem var(--font);
  color: var(--text); background: transparent;
}
.search-bar input::placeholder { color: rgba(110,116,145,.4); }
.search-bar .bx { color: var(--text-muted); font-size: 20px; }
.search-bar .btn { flex: none; }

/* ---- Auth pages (login/signup) — no nav, centered ---- */
.auth-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); position: relative; z-index: 1;
  /* safe center: falls back to flex-start when the card exceeds viewport */
  align-items: safe center;
}
.auth-page .auth-wrap { width: min(100% - 32px, 480px); display: flex; padding: 52px 0 34px; }
.auth-page .auth-column { position: relative; z-index: 2; }
.auth-card {
  width: 100%; max-width: 440px; max-height: calc(100dvh - var(--sp-8));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  animation: scale-in 480ms var(--ease-spring) both;
  position: relative;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.auth-brand img { height: 48px; width: auto; filter: drop-shadow(var(--shadow-sm)); }
.auth-brand h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; text-align: center; }
.auth-brand p { font-size: 0.875rem; color: var(--text-muted); text-align: center; max-width: 320px; margin: 0 auto; }
.social-row { display: grid; gap: 10px; margin-bottom: var(--sp-3); }
.btn.social {
  background: var(--bg-elevated); border: 1px solid rgba(11,16,38,.08); color: var(--text);
  font-weight: 600; box-shadow: var(--shadow-xs);
}
.btn.social.apple { background: #000; color: white; border-color: #000; }
.btn.social.apple:hover { background: #1a1a1a; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--text-muted); }
.checkbox-row input { margin-top: 3px; accent-color: var(--brand-primary); width: 16px; height: 16px; }
.type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-toggle label {
  border: 1.5px solid rgba(11,16,38,.06); border-radius: var(--radius-sm);
  padding: 12px 14px; font-weight: 600; font-size: 0.875rem; cursor: pointer;
  display: flex; gap: 8px; align-items: center;
  transition: all var(--dur) var(--ease);
}
.type-toggle input { accent-color: var(--brand-primary); }
.type-toggle label:has(input:checked) {
  border-color: var(--brand-primary);
  background: rgba(var(--brand-rgb), .03);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .08);
}

/* ---- Toast ---- */
.toast-region {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: grid; gap: 10px; max-width: 380px;
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid rgba(11,16,38,.06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px; display: flex; gap: 12px; font-size: 0.875rem;
  align-items: flex-start;
  animation: toast-in 300ms var(--ease-spring) both;
  backdrop-filter: blur(12px);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.toast .bx { font-size: 22px; flex: none; }
.toast.success .bx { color: var(--success); }
.toast.error .bx { color: var(--danger); }
.toast.warning .bx { color: var(--warning); }
.toast.info .bx { color: var(--brand-primary); }

/* ---- Busy overlay ---- */
.page-busy {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(250,250,255,.7); backdrop-filter: blur(4px);
}
.page-busy.on { display: flex; animation: fade-in 200ms var(--ease); }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(124,92,255,.15); border-top-color: var(--brand-primary);
  animation: spin 700ms linear infinite;
}
.spinner.large { width: 36px; height: 36px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Footer ---- */
.footer {
  max-width: 1280px; margin: 0 auto; padding: var(--sp-5) var(--sp-5);
  color: var(--text-muted); font-size: 0.875rem;
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  border-top: 1px solid rgba(11,16,38,.04);
}
.footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--brand-primary); }

/* ---- Mobile nav ---- */
.mobile-tabs {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--bg-glass-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabs a {
  flex: 1; text-align: center; color: var(--text-muted);
  font-size: 0.875rem; font-weight: 600; padding: 6px 2px;
  border-radius: var(--radius-xs); transition: all var(--dur) var(--ease);
}
.mobile-tabs a .bx { display: block; font-size: 22px; margin: 0 auto 2px; transition: transform var(--dur) var(--ease-spring); }
.mobile-tabs a.active { color: var(--brand-primary); }
.mobile-tabs a.active .bx { transform: scale(1.15); }
.mobile-tabs a:hover { text-decoration: none; }

/* ---- Sticky save bar ---- */
.sticky-save {
  position: sticky; bottom: 12px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; z-index: 50;
  animation: fade-up var(--dur) var(--ease) both;
}

/* ---- Number cards in shop ---- */
.number-card {
  position: relative; overflow: hidden;
}
.number-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-teal));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.number-card:hover::before { opacity: 1; }
.number-card .number-display {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .grid-side { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .auth-wrap { padding: var(--sp-4); }
  .auth-card { max-width: 480px; }
}
@media (max-width: 768px) {
  .main-nav, .topbar-actions .credit-chip, .topbar-actions .avatar { display: none; }
  .mobile-tabs { display: flex; }
  body { padding-bottom: 84px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 0; }
  .row > * { margin-bottom: var(--sp-3); }
  .panel-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head h1 { font-size: 24px; }
  .page-head .sub { font-size: 0.875rem; }
  .page-head .head-actions { width: 100%; flex-direction: column; }
  .page-head .head-actions .btn { width: 100%; }
  .panel-body { padding: var(--sp-4); }
  .panel-head { padding: var(--sp-3) var(--sp-4); }
  .shell { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .hide-md { display: none !important; }

  /* Auth card on mobile — allow scrolling, no overflow */
  .auth-wrap {
    padding: var(--sp-3);
    align-items: flex-start;
    padding-top: max(var(--sp-6), env(safe-area-inset-top));
    min-height: auto;
    display: block;
  }
  .auth-card {
    padding: var(--sp-4);
    max-width: 100%;
    border-radius: var(--radius-lg);
    max-height: none;
    overflow-y: visible;
    margin: 0 auto;
    margin-bottom: var(--sp-3);
  }
  .auth-brand img { height: 36px; }
  .social-row { gap: 8px; }
  .btn.social { min-height: 48px; font-size: 0.9375rem; }
  .field-float input { min-height: 52px; font-size: 1rem; } /* 16px prevents iOS zoom */
  .type-toggle { grid-template-columns: 1fr; }

  /* Tables on mobile: horizontal scroll with snap */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .portal-table { min-width: 600px; }
  .portal-table th, .portal-table td { padding: 10px 12px; font-size: 0.875rem; }

  /* Tabs on mobile */
  .tabs { gap: 0; padding: 0; }
  .tabs a { padding: 10px 12px; font-size: 0.875rem; }

  /* Search bar on mobile */
  .search-bar { padding: 0 var(--sp-3); min-height: 48px; }
  .search-bar input { font-size: 1rem; } /* prevent iOS zoom */

  /* Sticky save */
  .sticky-save { bottom: 8px; padding: 12px var(--sp-4); flex-direction: column; gap: var(--sp-2); }
  .sticky-save .btn { width: 100%; }

  /* Shop cards on mobile */
  .grid.grid-3 { gap: var(--sp-3); }

  /* Dashboard stats on mobile */
  .kpi-value { font-size: 28px; }

  /* Footer */
  .footer { padding: var(--sp-4) var(--sp-3); font-size: 0.875rem; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center; }

  /* Toast */
  .toast-region { right: 12px; bottom: 90px; left: 12px; max-width: none; }

  /* Fix mobile bottom tabs with safe area */
  .mobile-tabs { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

  /* Fix number cards */
  .number-card .number-display { font-size: 20px; }

  /* Call handling page: tables need scroll */
  .call-handling-table { overflow-x: auto; }
}
@media (max-width: 480px) {
  .shell { padding: var(--sp-3) var(--sp-3) var(--sp-8); }
  .auth-card { padding: var(--sp-3); }
  .btn { min-height: 48px; font-size: 0.9375rem; }
  .btn.small { min-height: 40px; font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Premium animation system ---- */

/* Scroll-triggered reveals (used with data-reveal attribute) */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
[data-reveal="left"] { transform: translateX(-12px); }
[data-reveal="right"] { transform: translateX(12px); }
[data-reveal="scale"] { transform: scale(.98); }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* Staggered children (apply data-stagger to parent) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(8px);
  animation: stagger-in .3s var(--ease-out) forwards;
}
[data-stagger] > *:nth-child(2) { animation-delay: 45ms; }
[data-stagger] > *:nth-child(3) { animation-delay: 90ms; }
[data-stagger] > *:nth-child(4) { animation-delay: 135ms; }
[data-stagger] > *:nth-child(5) { animation-delay: 180ms; }
[data-stagger] > *:nth-child(6) { animation-delay: 225ms; }
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Card hover lift with glow */
.lift {
  transition: transform .18s var(--ease-out), box-shadow .18s ease;
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Skeleton loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(11,16,38,.04);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Smooth accordion (dependent sections) */
.dependent {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  opacity: 0;
}
.dependent.open {
  max-height: 500px;
  opacity: 1;
}

/* Smooth page enter (applied on navigation) */
.page-enter {
  animation: page-enter .26s var(--ease-out) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   SimplyAnswered 2026 interface
   A calm operating surface for sole traders: crisp, tactile and app-like.
   ========================================================================== */

:root {
  --brand-primary: #5b5cf0;
  --brand-darker: #4146d8;
  --brand-teal: #16b8a6;
  --brand-lime: #c7f36b;
  --brand-glow: rgba(91, 92, 240, .22);
  --bg: #f3f5f9;
  --bg-elevated: #fff;
  --bg-sunken: #e9edf4;
  --bg-glass: rgba(255, 255, 255, .78);
  --bg-glass-border: rgba(15, 23, 42, .08);
  --text: #111521;
  --text-secondary: #394150;
  --text-muted: #71798a;
  --text-gradient: none;
  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(17, 21, 33, .03);
  --shadow-sm: 0 2px 8px rgba(17, 21, 33, .04), 0 1px 2px rgba(17, 21, 33, .04);
  --shadow-md: 0 14px 36px rgba(17, 21, 33, .08), 0 2px 8px rgba(17, 21, 33, .04);
  --shadow-lg: 0 24px 64px rgba(17, 21, 33, .12);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1018;
  --bg-elevated: #151923;
  --bg-sunken: #0a0d14;
  --bg-glass: rgba(20, 24, 34, .8);
  --bg-glass-border: rgba(255, 255, 255, .09);
  --text: #f5f7fb;
  --text-secondary: #c7ccda;
  --text-muted: #8f98aa;
  --text-inverse: #fff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 46px rgba(0, 0, 0, .32);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
  --success-bg: rgba(0, 200, 83, .13);
  --warning-bg: rgba(255, 152, 0, .13);
  --danger-bg: rgba(255, 82, 82, .13);
  --info-bg: rgba(33, 150, 243, .13);
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(var(--brand-rgb), .08), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(22, 184, 166, .06), transparent 28rem),
    var(--bg);
  letter-spacing: -.006em;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% -10%, rgba(var(--brand-rgb), .14), transparent 34rem),
    radial-gradient(circle at 92% 4%, rgba(22, 184, 166, .09), transparent 30rem),
    var(--bg);
}

button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .22); outline-offset: 2px; }

/* Floating app chrome */
.topbar {
  top: 12px;
  width: min(calc(100% - 32px), 1240px);
  margin: 12px auto 0;
  border: 1px solid var(--bg-glass-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.topbar-inner { min-height: 66px; padding: 8px 10px 8px 12px; gap: 20px; }
.brand { color: var(--text); font-size: 1rem; gap: 9px; white-space: nowrap; }
.brand:hover { color: var(--text); transform: translateY(-1px); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(145deg, var(--brand-primary), #7779ff 55%, var(--brand-teal));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(var(--brand-rgb), .22);
  letter-spacing: -.08em;
}
.main-nav { justify-content: center; gap: 4px; }
.main-nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-radius: 11px; font-size: 0.875rem; font-weight: 620;
}
.main-nav a::after { display: none; }
.main-nav a:hover { background: var(--bg-sunken); color: var(--text); transform: translateY(-1px); }
.main-nav a.active { color: var(--text); background: var(--bg-sunken); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .08); }
.main-nav a.active .bx { color: var(--brand-primary); transform: scale(1.08); }
.topbar-actions { gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border: 1px solid var(--bg-glass-border); border-radius: 11px;
  display: inline-grid; place-items: center; color: var(--text-muted); background: transparent;
  cursor: pointer; transition: transform var(--dur) var(--ease-spring), color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover { transform: translateY(-2px); color: var(--text); background: var(--bg-sunken); }
.icon-btn:active { transform: scale(.94); }
.credit-chip {
  min-height: 38px; padding: 7px 13px; background: rgba(var(--brand-rgb), .075);
  border-color: rgba(var(--brand-rgb), .13); color: var(--brand-primary);
}
.credit-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--brand-rgb), .13); }
.avatar { list-style: none; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; }
.avatar::-webkit-details-marker { display: none; }
.user-menu { position: relative; }
.user-menu[open] .avatar { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12); }
.user-menu-popover {
  position: absolute; top: calc(100% + 12px); right: 0; width: 240px; padding: 8px;
  border: 1px solid var(--bg-glass-border); border-radius: 16px; background: var(--bg-elevated);
  box-shadow: var(--shadow-lg); animation: menu-pop .22s var(--ease-out) both; z-index: 120;
}
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.user-menu-head { padding: 10px 11px 12px; border-bottom: 1px solid var(--bg-glass-border); margin-bottom: 5px; }
.user-menu-head strong, .user-menu-head span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head strong { font-size: 0.875rem; }
.user-menu-head span { color: var(--text-muted); font-size: 0.875rem; margin-top: 2px; }
.user-menu-popover a, .user-menu-popover button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; font-size: 0.875rem; text-align: left; cursor: pointer; }
.user-menu-popover a:hover, .user-menu-popover a.active, .user-menu-popover button:hover { color: var(--text); background: var(--bg-sunken); }
.user-menu-popover form { margin: 0; }
.user-menu-popover button { color: var(--danger); }

.shell { max-width: 1240px; padding: 54px 24px 72px; }
.page-head { align-items: center; margin-bottom: 30px; }
.page-head h1 {
  color: var(--text); background: none; -webkit-text-fill-color: currentColor;
  font-size: clamp(30px, 4vw, 44px); font-weight: 760; letter-spacing: -.055em;
}
.page-head .sub { color: var(--text-muted); max-width: 660px; font-size: 0.9375rem; }
.head-actions .btn { box-shadow: 0 10px 24px rgba(var(--brand-rgb), .14); }

/* Content surfaces */
.panel {
  border-color: rgba(17, 21, 33, .075); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s;
}
html[data-theme="dark"] .panel { border-color: rgba(255,255,255,.075); }
.panel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb), .15); }
.panel-head { min-height: 60px; border-color: var(--bg-glass-border); }
.panel-head h2 { font-size: 0.96875rem; }
.panel-head h2 .bx { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(var(--brand-rgb), .08); }
.panel-body { padding: 24px; }
.panel-foot { border-color: var(--bg-glass-border); }
.kpi-label { letter-spacing: .09em; font-weight: 750; font-size: 0.875rem; }
.kpi-value { letter-spacing: -.055em; }
.empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text-muted); }
.empty > .bx { width: 52px; height: 52px; display: grid; place-items: center; background: var(--bg-sunken); border-radius: 17px; font-size: 25px; margin-bottom: 8px; }

.btn { min-height: 42px; border-radius: 12px; font-weight: 670; box-shadow: 0 7px 18px rgba(var(--brand-rgb), .16); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--brand-rgb), .24); }
.btn:hover .bx:last-child { transform: translateX(3px); }
.btn.secondary, .btn.quiet { box-shadow: none; }
.btn.secondary { background: var(--bg-elevated); border-color: rgba(17,21,33,.1); }
html[data-theme="dark"] .btn.secondary { border-color: rgba(255,255,255,.12); }
.btn.secondary:hover { background: var(--bg-sunken); border-color: rgba(var(--brand-rgb), .25); box-shadow: var(--shadow-sm); }
.control, .field-float input {
  background: var(--bg-elevated); color: var(--text); border-color: rgba(17,21,33,.11);
  border-radius: 12px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
html[data-theme="dark"] .control, html[data-theme="dark"] .field-float input { border-color: rgba(255,255,255,.12); }
.control:focus, .field-float input:focus { animation: none; transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .1); }
.switch-row { border-radius: 14px; transition: background .2s, transform .25s var(--ease-out); }
.switch-row:hover { background: rgba(var(--brand-rgb), .035); transform: translateX(2px); }
.track { transition: background .25s, box-shadow .25s; }
.switch input:checked + .track { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .1); }
.portal-table th { color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; font-size: 0.875rem; }
.portal-table td { border-color: var(--bg-glass-border); }
.portal-table tbody tr { transition: background .2s, transform .2s; }
.portal-table tbody tr:hover { background: rgba(var(--brand-rgb), .035); }
.badge { border-radius: 999px; }

/* Authentication and public pages */
.eyebrow { display: inline-flex; align-items: center; font-size: 0.875rem; font-weight: 720; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); }
.auth-column { width: 100%; }
.auth-card {
  max-width: 480px; margin: 0 auto; padding: 38px; border-radius: 26px;
  border: 1px solid var(--bg-glass-border); box-shadow: var(--shadow-lg); background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.auth-card:hover { transform: none; }
.auth-brand { margin-bottom: 26px; }
.auth-card .btn { animation-timing-function: var(--ease-out); }
.jmb-lockup { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 22px auto 0; color: var(--text-muted); font-size: 0.875rem; font-weight: 740; letter-spacing: .1em; }
.jmb-lockup img { height: 20px; width: auto; opacity: .5; }
html[data-theme="dark"] .jmb-lockup img, html[data-theme="dark"] .footer img { filter: invert(1); }
.public-content-page .auth-wrap { display: block; max-width: 900px; padding-top: 70px; }
.public-content-page .auth-column { max-width: 900px; margin: 0 auto; }
.public-content-page .auth-card { max-width: 900px; }
.demo-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--text-muted); font-size: 0.875rem; }
.demo-divider::before, .demo-divider::after { content: ''; height: 1px; flex: 1; background: var(--bg-glass-border); }
.demo-entry { justify-content: flex-start; text-align: left; padding: 11px 14px; }
.demo-entry > span { flex: 1; }
.demo-entry strong, .demo-entry small { display: block; }
.demo-entry strong { color: var(--text); font-size: 0.875rem; }
.demo-entry small { color: var(--text-muted); font-size: 0.875rem; margin-top: 2px; }
.demo-entry > .bx:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.1); font-size: 20px; }
.demo-ribbon { min-height: 44px; margin: -28px 0 28px; padding: 9px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,174,70,.22); border-radius: 13px; background: rgba(255,174,70,.075); color: var(--text-secondary); font-size: 0.875rem; }
.demo-ribbon > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; color: var(--warning); white-space: nowrap; }
.demo-ribbon p { flex: 1; }
.demo-ribbon form { margin: 0; }.demo-ribbon button { padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 680; cursor: pointer; }

/* Mobile app navigation */
.mobile-tabs {
  left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 20px), 560px); min-height: 66px; padding: 6px;
  border: 1px solid var(--bg-glass-border); border-radius: 19px; background: var(--bg-glass);
  box-shadow: 0 18px 46px rgba(17,21,33,.17); backdrop-filter: blur(20px) saturate(170%);
}
.mobile-tabs a { min-width: 0; border-radius: 13px; color: var(--text-muted); gap: 2px; font-size: 0.875rem; font-weight: 620; }
.mobile-tabs a .bx { font-size: 20px; }
.mobile-tabs a.active { color: var(--text); background: var(--bg-sunken); }
.mobile-tabs a.active .bx { color: var(--brand-primary); animation: tab-pop .34s var(--ease-spring); }
@keyframes tab-pop { 50% { transform: translateY(-3px) scale(1.16); } }

/* Movement carries meaning; nothing runs ambiently. */
.panel { animation: surface-in .3s var(--ease-out) both; }
.grid > .panel:nth-child(2) { animation-delay: .04s; }
.grid > .panel:nth-child(3) { animation-delay: .08s; }
.grid > .panel:nth-child(4) { animation-delay: .12s; }
@keyframes surface-in { from { opacity: 0; transform: translateY(8px); } }
.dependent.open { max-height: 1100px; }

@media (max-width: 1100px) {
  .topbar { width: calc(100% - 24px); }
  .topbar-inner { gap: 12px; }
  .main-nav a { padding-inline: 10px; }
  .main-nav a .bx { display: none; }
}

@media (max-width: 820px) {
  body.app-page { padding-bottom: 94px; }
  .topbar { top: 8px; margin-top: 8px; border-radius: 16px; }
  .topbar-inner { min-height: 56px; padding: 7px 8px 7px 10px; }
  .main-nav, .topbar-actions .credit-chip { display: none; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .avatar { display: grid; }
  .theme-toggle { display: grid; }
  .mobile-tabs { display: flex; }
  .shell { padding: 42px 14px 76px; }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 30px; }
  .page-head .head-actions { display: grid; grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .panel:hover { transform: none; }
  .panel-head { flex-direction: row; align-items: center; padding: 14px 16px; }
  .panel-body { padding: 18px; }
  .auth-wrap { width: min(100% - 28px, 520px); display: block; padding: 28px 0; }
  .auth-page .auth-wrap { display: flex; padding-top: 32px; }
  .auth-card { max-width: none; padding: 28px; }
  .public-content-page .auth-wrap { width: min(100% - 28px, 900px); }
}

@media (max-width: 520px) {
  .brand > span:last-child { font-size: 0.90625rem; }
  .topbar-actions .theme-toggle { display: none; }
  .shell { padding-inline: 12px; }
  .page-head { gap: 14px; }
  .page-head h1 { font-size: 28px; }
  .page-head .sub { line-height: 1.45; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-4 .panel-body { padding: 16px; }
  .grid-4 .kpi-value { font-size: 26px !important; }
  .panel { border-radius: 18px; }
  .panel-head { align-items: flex-start; }
  .panel-head .hint { text-align: right; }
  .auth-wrap { width: calc(100% - 20px); padding-top: 18px; }
  .auth-page .auth-wrap { width: calc(100% - 20px); padding-top: 18px; }
  .auth-card { padding: 24px 20px; border-radius: 22px; }
  .auth-brand { margin-bottom: 20px; }
  .jmb-lockup { margin-top: 16px; }
  .footer { display: none; }
  .mobile-tabs { width: calc(100% - 14px); bottom: max(7px, env(safe-area-inset-bottom)); border-radius: 17px; }
  .mobile-tabs a { padding-inline: 2px; }
  .demo-ribbon { margin: -22px 0 22px; align-items: flex-start; flex-wrap: wrap; }
  .demo-ribbon p { flex-basis: calc(100% - 130px); }
}

/* Dashboard */
.dashboard-head .eyebrow { margin-bottom: 8px; }
.dashboard-command {
  min-height: 330px; padding: 42px 46px; margin-bottom: 16px; position: relative; overflow: hidden;
  display: flex; align-items: center; border-radius: 28px; color: #fff;
  background:
    linear-gradient(118deg, rgba(10,12,22,.98), rgba(24,27,49,.96)),
    var(--text);
  box-shadow: 0 26px 70px rgba(17,21,33,.2);
  animation: command-arrive .72s var(--ease-out) both;
}
@keyframes command-arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.dashboard-command::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,#000,transparent 82%); }
.command-copy { max-width: 670px; position: relative; z-index: 3; }
.status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 740; letter-spacing: .02em; white-space: nowrap; }
.status-pill.online { color: #bfffdc; background: rgba(28,211,120,.11); border: 1px solid rgba(65,235,146,.2); }
.status-pill.setup { color: #ffe1a8; background: rgba(255,171,59,.1); border: 1px solid rgba(255,171,59,.2); }
.dashboard-command h2 { max-width: 620px; margin: 20px 0 12px; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.065em; }
.dashboard-command p { max-width: 570px; color: rgba(255,255,255,.64); font-size: 1rem; }
.command-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.availability-control { margin-top: 28px; padding: 10px 10px 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.075); display: flex; align-items: center; justify-content: space-between; gap: 16px; backdrop-filter: blur(16px); }
.availability-control > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; min-width: 175px; }
.availability-control > div small { grid-column: 2; color: rgba(255,255,255,.57); font-size: 0.875rem; margin-top: 1px; }
.availability-options { display: flex; gap: 5px; padding: 4px; border-radius: 13px; background: rgba(7,10,24,.34); }
.availability-options button { border: 0; background: transparent; color: rgba(255,255,255,.68); height: 36px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 0.875rem; font-weight: 720; white-space: nowrap; cursor: pointer; transition: background .2s,color .2s,transform .2s,box-shadow .2s; }
.availability-options button:hover { color: #fff; transform: translateY(-1px); }
.availability-options button.active { background: #fff; color: #171b30; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.availability-options i { font-size: 0.9375rem; margin-right: 5px; vertical-align: -2px; }
.command-primary { background: #fff; color: #111521; box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.command-primary:hover { color: #111521; box-shadow: 0 18px 36px rgba(0,0,0,.3); }
.command-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 680; font-size: 0.875rem; }
.dashboard-command .command-link { color: rgba(255,255,255,.74); }
.dashboard-command .command-link:hover { color: #fff; }
.signal-object { position: absolute; width: 360px; height: 360px; right: -10px; top: -14px; }
.signal-ring { position: absolute; border: 1px solid rgba(150,154,255,.23); border-radius: 50%; inset: 0; animation: signal-turn 18s linear infinite; }
.signal-ring::after { content: ''; position: absolute; width: 10px; height: 10px; left: 16%; top: 12%; border-radius: 50%; background: var(--brand-lime); box-shadow: 0 0 25px rgba(199,243,107,.7); }
.signal-ring.ring-two { inset: 52px; animation-duration: 13s; animation-direction: reverse; border-color: rgba(22,184,166,.3); }
.signal-ring.ring-two::after { width: 7px; height: 7px; left: auto; right: 10%; top: 57%; background: var(--brand-teal); }
.signal-ring.ring-three { inset: 106px; animation-duration: 9s; }
.signal-ring.ring-three::after { display: none; }
@keyframes signal-turn { to { transform: rotate(360deg); } }
.signal-core { position: absolute; inset: 126px; display: grid; place-items: center; border-radius: 42%; color: #fff; background: radial-gradient(circle at 30% 22%,#9294ff,var(--brand-primary) 52%,#323475); box-shadow: 0 24px 50px rgba(var(--brand-rgb),.42), inset 0 1px 0 rgba(255,255,255,.32); animation: signal-float 4.5s var(--ease-in-out) infinite alternate; }
.signal-core::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 38%; }
.signal-core .bx { font-size: 30px; }
@keyframes signal-float { to { transform: translateY(-9px) rotate(4deg); } }
.signal-ping { position: absolute; border-radius: 50%; background: rgba(var(--brand-rgb),.2); animation: signal-ping 2.8s ease-out infinite; }
.signal-ping.ping-one { width: 90px; height: 90px; right: 6px; bottom: 62px; }
.signal-ping.ping-two { width: 56px; height: 56px; left: 26px; top: 86px; animation-delay: 1.4s; }
@keyframes signal-ping { from { transform: scale(.25); opacity: .8; } to { transform: scale(1.25); opacity: 0; } }

.dashboard-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 28px; }
.metric-card { min-height: 100px; display: flex; align-items: center; gap: 13px; padding: 17px; border-radius: 17px; background: var(--bg-elevated); border: 1px solid rgba(17,21,33,.075); box-shadow: var(--shadow-xs); color: var(--text); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
html[data-theme="dark"] .metric-card { border-color: rgba(255,255,255,.075); }
.metric-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb),.18); }
.metric-card > .bx { margin-left: auto; color: var(--text-muted); }
.metric-card:hover > .bx { transform: translateX(3px); color: var(--brand-primary); }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { color: var(--text-muted); font-size: 0.875rem; }
.metric-card strong { margin-top: 2px; font-size: 22px; letter-spacing: -.04em; }
.metric-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; }
.metric-icon .bx { font-size: 21px; }
.metric-icon.violet { color: #7879ff; background: rgba(var(--brand-rgb),.1); }
.metric-icon.mint { color: #11a995; background: rgba(22,184,166,.11); }
.metric-icon.blue { color: #398be5; background: rgba(57,139,229,.1); }
.metric-icon.lime { color: #6f922a; background: rgba(171,217,79,.16); }

.onboarding-panel { display: grid; grid-template-columns: .75fr 1.55fr; gap: 32px; padding: 28px; margin-bottom: 28px; }
.onboarding-copy { padding: 3px; }
.onboarding-copy h2 { margin: 8px 0 5px; font-size: 23px; letter-spacing: -.04em; }
.onboarding-copy p { color: var(--text-muted); font-size: 0.875rem; }
.onboarding-progress { height: 7px; margin-top: 22px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.onboarding-progress span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand-primary),var(--brand-teal)); animation: progress-grow .9s var(--ease-out) both; transform-origin: left; }
@keyframes progress-grow { from { transform: scaleX(0); } }
.onboarding-steps { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.onboarding-steps li { min-height: 108px; display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--bg-glass-border); border-radius: 14px; background: var(--bg); opacity: .65; transition: opacity .25s, transform .25s var(--ease-out), border-color .25s; }
.onboarding-steps li:hover { opacity: 1; transform: translateY(-2px); }
.onboarding-steps li.done, .onboarding-steps li.next { opacity: 1; }
.onboarding-steps li.next { border-color: rgba(var(--brand-rgb),.3); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.08); }
.onboarding-steps li > span { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--bg-sunken); color: var(--text-muted); font-size: 0.875rem; font-weight: 760; }
.onboarding-steps li.done > span { color: var(--success); background: var(--success-bg); }
.onboarding-steps li.next > span { color: #fff; background: var(--brand-primary); }
.onboarding-steps strong, .onboarding-steps small { display: block; }
.onboarding-steps strong { font-size: 0.875rem; }
.onboarding-steps small { margin-top: 4px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.3; }

.dashboard-content-grid { grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); align-items: start; }
.dashboard-content-grid > .panel { margin-bottom: 0; }
.dashboard-side-stack { display: grid; gap: 16px; align-self: start; }
.dashboard-side-stack .panel { margin: 0; }
.contact-list { padding: 6px 12px; }
.contact-row { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; color: var(--text); transition: background .2s, transform .25s var(--ease-out); }
.contact-row + .contact-row { border-top: 1px solid var(--bg-glass-border); }
.contact-row:hover { color: var(--text); background: var(--bg-sunken); transform: translateX(3px); }
.contact-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.09); }
.contact-main { min-width: 0; flex: 1; }
.contact-main strong, .contact-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-main strong { font-size: 0.875rem; }
.contact-main small { margin-top: 2px; color: var(--text-muted); font-size: 0.875rem; }
.compact-prompt { display: flex; align-items: center; gap: 12px; }
.compact-prompt > div { min-width: 0; flex: 1; }
.compact-prompt p { color: var(--text-muted); font-size: 0.875rem; }
.compact-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.09); }
.number-mini-list { padding: 7px 12px; }
.number-mini-list > a { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 8px; color: var(--text); border-radius: 12px; }
.number-mini-list > a:hover { background: var(--bg-sunken); color: var(--text); }
.number-mini-list strong, .number-mini-list small { display: block; }
.number-mini-list strong { font-size: 0.875rem; }
.number-mini-list small { color: var(--text-muted); font-size: 0.875rem; }
.greeting-teaser { overflow: hidden; background: linear-gradient(145deg,rgba(var(--brand-rgb),.09),rgba(22,184,166,.055)),var(--bg-elevated); }
.greeting-teaser h2 { margin: 8px 0 6px; font-size: 20px; letter-spacing: -.04em; }
.greeting-teaser p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 14px; }
.waveform { height: 42px; display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.waveform i { width: 5px; height: 13px; border-radius: 9px; background: linear-gradient(var(--brand-primary),var(--brand-teal)); animation: wave 1.2s ease-in-out infinite alternate; }
.waveform i:nth-child(2), .waveform i:nth-child(6) { height: 25px; animation-delay: -.5s; }
.waveform i:nth-child(3), .waveform i:nth-child(5) { height: 36px; animation-delay: -.8s; }
.waveform i:nth-child(4) { height: 20px; animation-delay: -.25s; }
@keyframes wave { to { transform: scaleY(.45); opacity: .55; } }
.balance-activity { margin-top: 16px; }
.amount.plus { color: var(--success); }.amount.minus { color: var(--text); }

/* Compact business-line command strip */
.dashboard-command.line-overview { min-height: 0; padding: 22px 24px; display: grid; grid-template-columns: minmax(230px,.75fr) minmax(430px,1.35fr) auto; align-items: center; gap: 22px; border-radius: 22px; }
.line-overview::before { opacity: .45; }
.line-summary { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; min-width: 0; }
.line-summary h2 { margin: 7px 0 2px; font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
.line-summary p { color: rgba(255,255,255,.55); font-size: 0.875rem; }
.line-icon { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#8587ff,var(--brand-primary)); box-shadow: 0 12px 28px rgba(var(--brand-rgb),.35); }
.line-icon .bx { font-size: 23px; }
.line-icon i:last-child { position: absolute; width: 8px; height: 8px; right: -2px; top: -2px; border: 2px solid #181b30; border-radius: 50%; background: var(--brand-lime); animation: status-pulse 2.4s ease-out infinite; }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 7px rgba(199,243,107,0); } }
.line-overview .availability-control { position: relative; z-index: 2; margin: 0; }
.line-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; }
.line-actions .icon-btn { color: rgba(255,255,255,.76); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.line-actions .icon-btn:hover { color: #fff; background: rgba(255,255,255,.13); }

/* Voice greeting studio */
.greeting-builder-grid { grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); align-items: stretch; }
.greeting-builder-grid > .panel { margin: 0 0 18px; }
.greeting-script { resize: vertical; font-size: 0.9375rem; line-height: 1.65; }
.voice-picker { border: 0; padding: 0; margin: 22px 0; }
.voice-picker legend { margin-bottom: 10px; font-size: 0.875rem; font-weight: 730; }
.voice-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.voice-filters button { appearance: none; border: 1px solid var(--bg-glass-border); border-radius: 999px; background: transparent; color: var(--text-muted); padding: 6px 11px; font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: color .18s,border-color .18s,background .18s,transform .18s var(--ease-out); }
.voice-filters button:hover { color: var(--text-primary); transform: translateY(-1px); }
.voice-filters button.active { color: var(--brand-primary); border-color: rgba(var(--brand-rgb),.35); background: rgba(var(--brand-rgb),.09); }
.voice-picker label { min-height: 66px; display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bg-glass-border); border-radius: 14px; cursor: pointer; transition: transform .22s var(--ease-out),border-color .2s,background .2s; }
.voice-picker label[hidden] { display: none; }
.voice-picker label + label { margin-top: 8px; }
.voice-picker label:hover { transform: translateX(3px); border-color: rgba(var(--brand-rgb),.3); }
.voice-picker label:has(input:checked) { border-color: rgba(var(--brand-rgb),.45); background: rgba(var(--brand-rgb),.055); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.08); }
.voice-picker input { position: absolute; opacity: 0; pointer-events: none; }
.voice-picker strong,.voice-picker small { display: block; }
.voice-picker small { color: var(--text-muted); font-size: 0.875rem; margin-top: 2px; }
.voice-picker label > .bx-check { color: var(--brand-primary); opacity: 0; transform: scale(.5); transition: .2s; }
.voice-picker label:has(input:checked) > .bx-check { opacity: 1; transform: scale(1); }
.voice-orb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: rgba(var(--brand-rgb),.1); }
.greeting-checkout { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid var(--bg-glass-border); }
.greeting-checkout strong,.greeting-checkout small { display: block; }
.greeting-checkout small { margin-top: 2px; color: var(--text-muted); font-size: 0.875rem; }
.greeting-preview-note { margin: 10px 0 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.45; }
[data-preview-voice].is-playing i,[data-play-greeting].is-playing i { animation: sa-voice-pulse .85s ease-in-out infinite alternate; }
@keyframes sa-voice-pulse { to { transform: scale(1.28); opacity: .55; } }
.greeting-preview-card { overflow: hidden; color: #fff; background: linear-gradient(145deg,#181b30,#282d54 62%,#313875); }
.greeting-preview-card .panel-body { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 34px; }
.greeting-preview-card h2 { margin: 10px 0; font-size: 28px; line-height: 1.05; letter-spacing: -.05em; }
.greeting-preview-card p { color: rgba(255,255,255,.62); font-size: 0.875rem; }
.greeting-upload-card { overflow: hidden; }
.greeting-upload-intro { margin-bottom: 18px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; }
.greeting-dropzone { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 14px; padding: 18px; border: 1px dashed rgba(var(--brand-rgb),.42); border-radius: 15px; text-align: center; background: rgba(var(--brand-rgb),.045); cursor: pointer; transition: transform .22s var(--ease-spring), border-color .22s ease, background .22s ease; }
.greeting-dropzone:hover { transform: translateY(-2px); border-color: var(--brand-primary); background: rgba(var(--brand-rgb),.075); }
.greeting-dropzone i { margin-bottom: 8px; font-size: 28px; color: var(--brand-primary); }
.greeting-dropzone strong { font-size: 0.875rem; }
.greeting-dropzone span { max-width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.875rem; }
.greeting-upload-submit { width: 100%; justify-content: center; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.waveform.large { height: 82px; gap: 7px; }
.waveform.large i { width: 7px; box-shadow: 0 0 22px rgba(var(--brand-rgb),.3); }
.greeting-list { padding: 6px 12px; }
.greeting-list article { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 10px; }
.greeting-list article + article { border-top: 1px solid var(--bg-glass-border); }
.greeting-list article > div { min-width: 0; flex: 1; }
.greeting-list strong,.greeting-list small { display: block; }
.greeting-list small { margin-top: 3px; color: var(--text-muted); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.greeting-list-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 13px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.09); }

@media (max-width: 980px) {
  .dashboard-command { padding: 36px; }
  .signal-object { right: -120px; opacity: .72; }
  .command-copy { max-width: 66%; }
  .dashboard-metrics { grid-template-columns: repeat(2,1fr); }
  .onboarding-panel { grid-template-columns: 1fr; }
  .dashboard-content-grid { grid-template-columns: 1fr; }
  .greeting-builder-grid { grid-template-columns: 1fr; }
  .dashboard-command.line-overview { grid-template-columns: 1fr auto; }
  .line-overview .availability-control { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 620px) {
  .dashboard-command { min-height: 400px; padding: 28px 22px; align-items: flex-start; }
  .dashboard-command h2 { font-size: 37px; }
  .command-copy { max-width: none; }
  .command-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .availability-control { align-items: stretch; flex-direction: column; }
  .availability-options { display: grid; grid-template-columns: repeat(3,1fr); }
  .availability-options button { padding: 0 6px; }
  .availability-options i { display: block; margin: 0 auto 2px; }
  .signal-object { width: 250px; height: 250px; right: -52px; top: auto; bottom: -112px; opacity: .55; }
  .signal-ring.ring-two { inset: 38px; }.signal-ring.ring-three { inset: 77px; }.signal-core { inset: 90px; }
  .dashboard-metrics { gap: 8px; }
  .metric-card { min-height: 90px; padding: 13px; gap: 9px; }
  .metric-card > .bx { display: none; }
  .metric-icon { width: 36px; height: 36px; border-radius: 11px; }
  .metric-card strong { font-size: 1.125rem; }
  .onboarding-panel { padding: 20px; }
  .onboarding-steps { grid-template-columns: 1fr 1fr; }
  .dashboard-command.line-overview { min-height: 0; padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .line-summary h2 { font-size: 20px; }
  .line-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   SimplyAnswered brand pass — calm control, recognisable voice-line details.
   -------------------------------------------------------------------------- */
:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --bg: #f6f7fb;
  --bg-sunken: #eef0f6;
  --text: #0b1026;
  --text-secondary: #41475f;
  --text-muted: #72778c;
  --brand-primary: #7c5cff;
  --brand-darker: #5e40db;
  --brand-teal: #00bfa0;
  --radius-md: 11px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 6px rgba(11,16,38,.045);
  --shadow-md: 0 10px 30px rgba(11,16,38,.075);
  --shadow-lg: 0 24px 70px rgba(11,16,38,.11);
}

body { letter-spacing: -.006em; }
.cursor-glow { display: none !important; }

.topbar {
  width: min(1240px, calc(100% - 32px));
  margin: 14px auto 0;
  top: 12px;
  border: 1px solid rgba(11,16,38,.075);
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 30px rgba(11,16,38,.055);
}
.topbar-inner { min-height: 62px; padding: 7px 10px 7px 15px; }
.topbar .brand { min-width: 160px; }
.brand-logo { width: 158px; height: auto; border-radius: 0; filter: none; }
html[data-theme="dark"] .brand-logo { content: url('/assets/branding/simplyanswered-logo-white.svg'); }
.main-nav { justify-content: center; }
.main-nav a { padding: 8px 13px; border-radius: 10px; font-size: 0.875rem; }
.main-nav a::after { display: none; }
.main-nav a.active { background: #f0eefb; color: #3e2ca1; box-shadow: none; }
.main-nav a.active .bx { color: var(--brand-primary); }
.credit-chip { border-radius: 11px; }

.shell { max-width: 1180px; padding-top: 42px; }
.page-head { margin-bottom: 25px; }
.page-head h1 { font-weight: 760; letter-spacing: -.052em; }
.page-head .sub { margin-top: 6px; }
.eyebrow { color: #6751cf; letter-spacing: .09em; }

.panel {
  border-color: rgba(11,16,38,.075);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11,16,38,.025);
}
.panel:hover { transform: none; border-color: rgba(11,16,38,.11); box-shadow: var(--shadow-sm); }
.panel-head { min-height: 57px; }
.panel-head h2 .bx { border-radius: 9px; }
.btn { border-radius: 11px; letter-spacing: -.01em; box-shadow: none; }
.btn:hover { transform: translateY(-1px); }
.btn:not(.secondary):not(.quiet):not(.social) { background: #7053ed; }
.btn:not(.secondary):not(.quiet):not(.social):hover { background: #6143dd; box-shadow: 0 8px 20px rgba(112,83,237,.22); }
.control { border-radius: 11px; }

.dashboard-command.line-overview {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid #17e8bc;
  background: #10152b;
  box-shadow: 0 18px 45px rgba(11,16,38,.16);
}
.dashboard-command.line-overview::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 56px;
  right: 22px;
  top: -10px;
  opacity: .18;
  background: repeating-linear-gradient(90deg, #17e8bc 0 4px, transparent 4px 13px);
  clip-path: polygon(0 45%,8% 32%,16% 62%,24% 14%,32% 76%,40% 37%,48% 55%,56% 22%,64% 70%,72% 40%,80% 58%,88% 35%,100% 50%,100% 55%,88% 44%,80% 67%,72% 49%,64% 80%,56% 31%,48% 65%,40% 46%,32% 86%,24% 24%,16% 72%,8% 42%,0 55%);
  animation: answer-line 3.8s ease-in-out infinite alternate;
}
@keyframes answer-line { to { transform: translateX(-18px); opacity: .3; } }
.line-icon { border-radius: 14px; background: linear-gradient(145deg,#8b73ff,#6e4fe8); }
.availability-control { border-radius: 14px; }
.availability-options { border-radius: 10px; }
.availability-options button { border-radius: 8px; }
.dashboard-metrics { gap: 10px; }
.metric-card { position: relative; overflow: hidden; border-radius: 15px; }
.metric-card::after { content: ''; position: absolute; left: 17px; right: 17px; bottom: 0; height: 2px; background: linear-gradient(90deg,var(--brand-primary),var(--brand-teal)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.metric-card:hover { transform: translateY(-2px); }
.metric-card:hover::after { transform: scaleX(1); }
.metric-icon { border-radius: 12px; }

.tabs {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(11,16,38,.07);
  border-radius: 13px;
  background: #edeff5;
}
.tabs a { border: 0; border-radius: 9px; }
.tabs a.active { background: #fff; color: #3f2e9f; box-shadow: 0 1px 4px rgba(11,16,38,.08); }

.demo-ribbon {
  border-color: rgba(124,92,255,.16);
  background: #f0eefb;
  color: #50496b;
}
.demo-ribbon > span { color: #5e40db; }
.demo-ribbon > span .bx { color: #00a98d; }

.auth-wrap { padding: 34px 18px; }
.auth-card {
  max-width: 430px;
  padding: 34px;
  border-radius: 18px;
  border: 1px solid rgba(11,16,38,.08);
  background: rgba(255,255,255,.95);
  box-shadow: 0 22px 65px rgba(11,16,38,.095);
}
.auth-card::before {
  height: 3px;
  background: linear-gradient(90deg,#7c5cff 0 34%,transparent 34% 40%,#00d4a6 40% 58%,transparent 58% 64%,#7c5cff 64% 100%);
}
.auth-brand { margin-bottom: 28px; }
.auth-brand img { width: 224px !important; max-width: 80%; height: auto !important; filter: none; }
.auth-brand,.auth-card .field-float,.auth-card .btn,.tagline-rotate span { animation: none !important; opacity: 1; transform: none; }
.demo-entry { text-align: left; }
.jmb-lockup { opacity: .72; }

.insights-chart { height: 240px; display: grid; grid-template-columns: repeat(auto-fit,minmax(38px,1fr)); align-items: end; gap: 10px; padding: 12px 6px 0; }
.insights-chart-day { height: 100%; display: grid; grid-template-rows: 22px 1fr 22px; gap: 5px; text-align: center; }
.insights-chart-day > strong { font-size: 0.875rem; color: var(--text-secondary); }
.insights-chart-day > small { font-size: 0.875rem; color: var(--text-muted); }
.insights-chart-track { position: relative; display: block; min-height: 140px; border-radius: 9px 9px 4px 4px; background: var(--bg-sunken); overflow: hidden; }
.insights-chart-track i,.insights-chart-track b { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 8px 8px 3px 3px; transform-origin: bottom; animation: chart-rise .7s var(--ease-out) both; }
.insights-chart-track i { background: rgba(124,92,255,.18); }
.insights-chart-track b { left: 25%; right: 25%; background: linear-gradient(#7c5cff,#6949e5); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
@keyframes chart-rise { from { transform: scaleY(0); } }
.hours-chart { display: grid; gap: 9px; }
.hours-chart-row { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 10px; }
.hours-chart-row > span,.hours-chart-row > strong { font-size: 0.875rem; color: var(--text-muted); font-weight: 600; }
.hours-chart-row > i { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg-sunken); }
.hours-chart-row > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c5cff,#00c6a4); animation: hour-grow .8s var(--ease-out) both; transform-origin: left; }
@keyframes hour-grow { from { transform: scaleX(0); } }
.recording-summary td { padding-top: 0 !important; color: var(--text-muted); font-size: 0.875rem; border-top: 0 !important; }
.recording-summary .bx { color: var(--brand-primary); }
.page-analytics .page-head .head-actions { display: grid; grid-template-columns: repeat(4,minmax(48px,1fr)); gap: 5px; }
.page-analytics .page-head .head-actions .btn { width: auto; min-width: 48px; }

html[data-theme="dark"] .topbar { background: rgba(18,22,32,.92); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .main-nav a.active { background: rgba(124,92,255,.14); color: #c9bdff; }
html[data-theme="dark"] .tabs { background: #111620; }
html[data-theme="dark"] .tabs a.active { background: #242936; color: #d1c8ff; }
html[data-theme="dark"] .demo-ribbon { background: rgba(124,92,255,.1); color: #c1bcd3; }

@media (max-width: 760px) {
  .topbar { width: calc(100% - 20px); margin-top: 9px; top: 8px; }
  .brand { min-width: 0; }
  .brand-logo { width: 145px; }
  .shell { padding-top: 30px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs a { flex: 0 0 auto; padding-inline: 13px; }
  .auth-card { padding: 29px 24px; }
  .insights-chart { gap: 6px; padding-inline: 0; }
  .page-analytics .page-head .head-actions { grid-template-columns: repeat(4,1fr); }
  [data-reveal="left"],[data-reveal="right"] { transform: translateY(12px); }
  [data-reveal="left"].revealed,[data-reveal="right"].revealed { transform: none; }
}

@media (max-width: 430px) {
  .brand-logo { width: 132px; }
  .topbar-actions { gap: 5px; }
  .dashboard-metrics { grid-template-columns: 1fr 1fr; }
  .metric-card { align-items: flex-start; flex-direction: column; min-height: 112px; }
  .metric-icon { width: 34px; height: 34px; }
  .auth-card { padding: 26px 20px; }
  .insights-chart { grid-template-columns: repeat(7,1fr); }
  .insights-chart-track b { left: 19%; right: 19%; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-command.line-overview::after,
  .insights-chart-track i,.insights-chart-track b,
  .hours-chart-row > i > b { animation: none; }
}

/* ---- SimplyAnswered sign-in: business line console ---- */
.page-signin {
  --signin-navy: #0c1125;
  --signin-navy-raised: #151b34;
  --signin-paper: #eeefe9;
  --signin-ink: #101426;
  --signin-muted: #6d7180;
  color-scheme: light;
  color: var(--signin-ink);
  background: var(--signin-paper);
  padding-bottom: 0;
}
.page-signin .auth-wrap {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
.page-signin .signin-shell {
  width: min(900px, 100%);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(350px, .84fr) minmax(420px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(16, 20, 38, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 20, 38, .12);
}
.page-signin .signin-identity {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px;
  color: #fff;
  background: var(--signin-navy);
}
.page-signin .signin-identity::after {
  content: '';
  position: absolute;
  right: -22px;
  bottom: 90px;
  width: 178px;
  height: 86px;
  opacity: .08;
  background: repeating-linear-gradient(90deg, #24e2ba 0 3px, transparent 3px 12px);
  clip-path: polygon(0 45%, 8% 45%, 8% 34%, 16% 34%, 16% 58%, 24% 58%, 24% 23%, 32% 23%, 32% 70%, 40% 70%, 40% 9%, 48% 9%, 48% 85%, 56% 85%, 56% 28%, 64% 28%, 64% 66%, 72% 66%, 72% 39%, 80% 39%, 80% 55%, 88% 55%, 88% 45%, 100% 45%, 100% 55%, 88% 55%, 88% 66%, 80% 66%, 80% 50%, 72% 50%, 72% 77%, 64% 77%, 64% 39%, 56% 39%, 56% 96%, 48% 96%, 48% 20%, 40% 20%, 40% 81%, 32% 81%, 32% 34%, 24% 34%, 24% 69%, 16% 69%, 16% 45%, 8% 45%, 8% 56%, 0 56%);
}
.page-signin .signin-identity-head,
.page-signin .signin-identity-foot,
.page-signin .signin-console { position: relative; z-index: 1; }
.page-signin .signin-identity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.page-signin .signin-identity-head img { display: block; width: 178px; height: auto; }
.page-signin .signin-identity-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.page-signin .signin-identity-head > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #24e2ba;
  box-shadow: 0 0 0 4px rgba(36,226,186,.11);
  animation: signin-line-pulse 2.4s ease-in-out infinite;
}
@keyframes signin-line-pulse {
  50% { box-shadow: 0 0 0 7px rgba(36,226,186,0); }
}
.page-signin .signin-console {
  margin: auto 0;
  padding: 30px 0 25px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.page-signin .signin-console-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: rgba(255,255,255,.55);
}
.page-signin .signin-console-label small {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #24e2ba;
}
.page-signin .signin-number {
  display: block;
  font-size: clamp(27px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.page-signin .signin-wave {
  height: 48px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-signin .signin-wave i {
  width: 3px;
  height: 10px;
  border-radius: 4px;
  background: #24e2ba;
  transform-origin: center;
  animation: signin-voice 1.8s ease-in-out infinite alternate;
}
.page-signin .signin-wave i:nth-child(2),
.page-signin .signin-wave i:nth-child(11) { height: 20px; animation-delay: -.5s; }
.page-signin .signin-wave i:nth-child(3),
.page-signin .signin-wave i:nth-child(10) { height: 31px; animation-delay: -.9s; }
.page-signin .signin-wave i:nth-child(4),
.page-signin .signin-wave i:nth-child(9) { height: 17px; animation-delay: -.2s; }
.page-signin .signin-wave i:nth-child(5),
.page-signin .signin-wave i:nth-child(8) { height: 40px; animation-delay: -.7s; }
.page-signin .signin-wave i:nth-child(6) { height: 25px; animation-delay: -1.1s; }
.page-signin .signin-wave i:nth-child(7) { height: 34px; animation-delay: -.35s; }
@keyframes signin-voice { to { transform: scaleY(.58); opacity: .58; } }
.page-signin .signin-call {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: var(--signin-navy-raised);
}
.page-signin .signin-call > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--signin-navy);
  background: #24e2ba;
}
.page-signin .signin-call > span i { font-size: 1.1875rem; }
.page-signin .signin-call small,
.page-signin .signin-call strong { display: block; }
.page-signin .signin-call small { margin-bottom: 2px; font-size: 0.875rem; color: rgba(255,255,255,.5); }
.page-signin .signin-call strong { font-size: 0.875rem; font-weight: 650; }
.page-signin .signin-call time { font-size: 0.875rem; font-weight: 650; color: rgba(255,255,255,.58); }
.page-signin .signin-line-settings { margin: 17px 0 0; padding: 0; list-style: none; }
.page-signin .signin-line-settings li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-signin .signin-line-settings li:last-child { border-bottom: 0; }
.page-signin .signin-line-settings li > i { font-size: 1.0625rem; color: rgba(255,255,255,.62); }
.page-signin .signin-line-settings small,
.page-signin .signin-line-settings strong { display: block; }
.page-signin .signin-line-settings small { margin-bottom: 1px; font-size: 0.875rem; color: rgba(255,255,255,.44); }
.page-signin .signin-line-settings strong { font-size: 0.875rem; font-weight: 550; color: rgba(255,255,255,.84); }
.page-signin .signin-line-settings em {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
  color: #24e2ba;
}
.page-signin .signin-identity-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.page-signin .signin-identity-foot small { font: inherit; color: rgba(255,255,255,.58); }
.page-signin .auth-column { min-width: 0; height: 100%; }
.page-signin .auth-card {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 52px 50px 32px;
  border: 0;
  border-radius: 0;
  color: var(--signin-ink);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.page-signin .auth-card::before,
.page-signin .auth-card::after { display: none; }
.page-signin .signin-heading { margin-bottom: 28px; }
.page-signin .signin-heading > span {
  display: block;
  margin-bottom: 7px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6848e8;
}
.page-signin .signin-heading h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 720;
  letter-spacing: -.045em;
  color: var(--signin-ink);
}
.page-signin .signin-heading p {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--signin-muted);
}
.page-signin .field-float {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  opacity: 1;
  transform: none;
  animation: none;
}
.page-signin .field-float input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #d9dce3;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--signin-ink);
  background: #fbfbfa;
  box-shadow: none;
}
.page-signin .field-float label,
.page-signin .field-float input:focus + label,
.page-signin .field-float input:not(:placeholder-shown) + label {
  position: static;
  order: -1;
  transform: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: #393e51;
  pointer-events: auto;
}
.page-signin .field-float input:focus {
  border-color: #7657ed;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(118,87,237,.12);
  transform: none;
}
.page-signin .auth-card .btn {
  opacity: 1;
  transform: none;
  animation: none;
}
.page-signin .auth-card .btn.pill {
  min-height: 50px;
  border-radius: 10px;
  background: #6e4ce6;
  box-shadow: none;
}
.page-signin .auth-card .btn.pill:hover { background: #5f3fd3; box-shadow: 0 7px 18px rgba(95,63,211,.18); }
.page-signin .demo-divider { margin: 20px 0 13px; }
.page-signin .demo-entry {
  min-height: 58px;
  border: 1px solid #e0e1e6;
  border-radius: 11px;
  color: var(--signin-ink);
  background: #fff;
  box-shadow: none;
}
.page-signin .demo-entry:hover { border-color: #bbb1e9; background: #faf9ff; box-shadow: none; }
.page-signin .demo-entry > .bx:first-child { color: #6e4ce6; }
.page-signin .demo-entry small { color: var(--signin-muted); }
.page-signin .jmb-lockup { display: none; }

@media (max-width: 760px) {
  .page-signin .auth-wrap { padding: 0; place-items: start stretch; }
  .page-signin .signin-shell {
    width: 100%;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 96px 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page-signin .signin-identity {
    padding: 24px;
    justify-content: center;
  }
  .page-signin .signin-identity::after,
  .page-signin .signin-console,
  .page-signin .signin-identity-foot { display: none; }
  .page-signin .signin-identity-head img { width: 176px; }
  .page-signin .auth-card { padding: 35px 24px 24px; }
  .page-signin .signin-heading { margin-bottom: 26px; }
  .page-signin .signin-heading h1 { font-size: 31px; }
}

@media (max-width: 430px) {
  .page-signin .signin-identity { padding-inline: 20px; }
  .page-signin .signin-identity-head > span { font-size: 0.875rem; }
  .page-signin .signin-identity-head img { width: 160px; }
  .page-signin .auth-card { padding: 30px 20px 22px; }
  .page-signin .signin-heading { margin-bottom: 24px; }
  .page-signin .signin-heading h1 { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-signin .signin-identity-head > span i,
  .page-signin .signin-wave i { animation: none; }
}

/* ---- Product controls: calm motion, strong dark-theme consistency ---- */
.dependent.open { max-height: 3000px; }
[data-routing-panel][hidden] { display: none !important; }

.call-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.call-mode-option {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--card-light-bg);
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.call-mode-option:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb), .36); }
.call-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.call-mode-option > span:nth-of-type(2) { min-width: 0; }
.call-mode-option strong,
.call-mode-option small { display: block; }
.call-mode-option strong { margin-bottom: 4px; font-size: 0.875rem; color: var(--text); }
.call-mode-option small { font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); }
.call-mode-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand-primary);
  background: rgba(var(--brand-rgb), .09);
  transition: color .22s ease, background .22s ease, transform .3s var(--ease-spring);
}
.call-mode-icon i { font-size: 20px; }
.call-mode-check {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  font-size: 0.875rem;
  color: transparent;
  transition: all .22s ease;
}
.call-mode-option:has(input:checked) {
  border-color: rgba(var(--brand-rgb), .55);
  background: rgba(var(--brand-rgb), .055);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .075);
}
.call-mode-option:has(input:checked) .call-mode-icon {
  color: #fff;
  background: var(--brand-primary);
  transform: scale(1.04);
}
.call-mode-option:has(input:checked) .call-mode-check {
  border-color: var(--brand-primary);
  color: #fff;
  background: var(--brand-primary);
}
.ivr-setup-panel:not([hidden]) { animation: mode-panel-in .32s var(--ease-out) both; }
@keyframes mode-panel-in { from { opacity: 0; transform: translateY(-6px); } }
.ivr-builder { display: grid; grid-template-columns: 252px minmax(0,1fr); gap: 18px; align-items: stretch; }
.ivr-keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ivr-keypad-key {
  position: relative;
  min-width: 0; min-height: 67px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); border-radius: 13px; color: var(--text); background: var(--card-light-bg);
  cursor: pointer; transition: transform .2s var(--ease-spring), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ivr-keypad-key:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.42); }
.ivr-keypad-key strong { font-size: 1.125rem; line-height: 1; }
.ivr-keypad-key span { max-width: 100%; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--text-muted); }
.ivr-keypad-key.configured::after { content: ''; position: absolute; width: 6px; height: 6px; margin: -45px -51px 0 0; border-radius: 50%; background: var(--brand-teal); box-shadow: 0 0 0 3px rgba(43,224,186,.12); }
.ivr-keypad-key.active { border-color: rgba(var(--brand-rgb),.55); background: rgba(var(--brand-rgb),.09); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.07); }
.ivr-editor-stack { min-width: 0; min-height: 292px; padding: 18px; border: 1px solid var(--border-light); border-radius: 15px; background: var(--bg-sunken); }
.ivr-editor-empty { min-height: 254px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); }
.ivr-editor-empty[hidden] { display: none; }
.ivr-editor-empty i { margin-bottom: 10px; font-size: 31px; color: var(--brand-primary); }
.ivr-editor-empty strong { color: var(--text); font-size: 0.875rem; }
.ivr-editor-empty span { margin-top: 5px; font-size: 0.875rem; }
.ivr-key-editor[hidden] { display: none; }
.ivr-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 0.875rem; color: var(--text-muted); }
.ivr-editor-head strong { margin-left: 4px; color: var(--text); font-size: 1rem; }
.ivr-voicemail-note { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(var(--brand-rgb),.22); border-radius: 12px; background: rgba(var(--brand-rgb),.055); font-size: 0.875rem; color: var(--text-secondary); }
.ivr-voicemail-note[hidden], .ivr-forward-field[hidden] { display: none; }
.ivr-voicemail-note i { font-size: 20px; color: var(--brand-primary); }
.ivr-voicemail-note span { flex: 1; }
.ivr-voicemail-note a { font-weight: 700; white-space: nowrap; }
.ivr-help-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 13px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.ivr-help-row a { font-weight: 680; }

html[data-theme="dark"] .page-call-handling .control,
html[data-theme="dark"] .page-call-handling input.control,
html[data-theme="dark"] .page-call-handling textarea.control,
html[data-theme="dark"] .page-call-handling select.control {
  border-color: rgba(255,255,255,.12);
  color: #f5f7fb;
  background-color: #151923;
  -webkit-text-fill-color: #f5f7fb;
}
html[data-theme="dark"] .page-call-handling .control::placeholder,
html[data-theme="dark"] .page-call-handling input.control::placeholder,
html[data-theme="dark"] .page-call-handling textarea.control::placeholder {
  color: #747b8e;
  -webkit-text-fill-color: #747b8e;
  opacity: 1;
}
html[data-theme="dark"] .page-call-handling select.control option { color: #f5f7fb; background: #151923; }
html[data-theme="dark"] .page-setup .control,
html[data-theme="dark"] .page-setup input.control,
html[data-theme="dark"] .page-setup select.control {
  border-color: rgba(255,255,255,.12); color: #f5f7fb; background-color: #151923; -webkit-text-fill-color: #f5f7fb;
}
html[data-theme="dark"] .page-setup .control::placeholder { color: #747b8e; -webkit-text-fill-color: #747b8e; opacity: 1; }
html[data-theme="dark"] .page-setup select.control option { color: #f5f7fb; background: #151923; }
html[data-theme="dark"] .page-setup .use-card:has(input[name="use"]:checked) { background: rgba(124,92,255,.09); }
.page-setup .use-card { min-width: 0; cursor: pointer; transition: transform .22s var(--ease-spring), border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.page-setup .use-card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.32); }
.page-setup .use-card.selected { border-color: var(--brand-primary); box-shadow: var(--portal-shadow-md); }
.page-setup .use-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); animation: setup-fields-in .22s var(--ease-out) both; }
.page-setup .use-choice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 4px; }
.page-setup .use-choice-heading p { margin: 0; font-weight: 700; }
.page-setup .use-choice-heading label { cursor: pointer; }
.page-setup .use-card.is-unavailable { cursor: default; border-style: dashed; box-shadow: none; }
.page-setup .use-card.is-unavailable:hover { transform: none; border-color: var(--border-light); box-shadow: none; }
.page-setup .use-card.is-unavailable > .panel-body > .bx { color: var(--muted-text-light) !important; }
.page-setup .use-card.is-unavailable .use-choice-heading label { cursor: default; }
.page-setup .use-card.is-unavailable input[type="radio"] { cursor: not-allowed; }
.page-setup .use-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--muted-text-light); background: var(--bg-sunken); font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.page-setup .use-unavailable { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.page-setup .use-unavailable > span { display: flex; gap: 8px; align-items: flex-start; color: var(--muted-text-light); font-size: 0.875rem; line-height: 1.55; }
.page-setup .use-unavailable > span i { flex: 0 0 auto; margin-top: 2px; font-size: 1rem; }
.page-setup .use-unavailable .btn { justify-self: start; }
@keyframes setup-fields-in { from { opacity: 0; transform: translateY(-4px); } }
html[data-theme="dark"] .call-mode-option { border-color: rgba(255,255,255,.09); background: #171b25; }
html[data-theme="dark"] .call-mode-option:has(input:checked) {
  border-color: rgba(142,118,255,.62);
  background: rgba(124,92,255,.12);
  box-shadow: 0 0 0 3px rgba(124,92,255,.09);
}

/* The command bar belongs to the dark line surface, including its active state. */
.availability-options button.active {
  color: #071510;
  background: #2be0ba;
  box-shadow: 0 5px 14px rgba(43,224,186,.18);
}
.availability-options button.active:hover { color: #071510; }

/* API explorer: keep long paths and examples contained on every viewport. */
.page-api-docs .api-key-field { margin-bottom: var(--sp-4); }
.page-api-docs .api-key-field .help { margin-top: 6px; }
.page-api-docs .endpoint-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-api-docs .endpoint-title code {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page-api-docs pre,
.page-api-docs pre code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-api-docs .endpoint-card { overflow: hidden; }
.api-base-url > div { min-width: 0; }
.api-base-url span,
.api-base-url code { display: block; }
.api-base-url code { max-width: 100%; margin-top: 5px; overflow-wrap: anywhere; word-break: break-word; color: var(--text); }
.api-guide-card .panel-body { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 15px; }
.api-guide-card h2 { margin-bottom: 4px; font-size: 0.9375rem; }
.api-guide-card p { color: var(--text-muted); font-size: 0.875rem; }
.api-guide-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.09); }
.api-guide-icon i { font-size: 22px; }
.api-guide-overview .panel-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.api-guide-overview h2 { margin: 5px 0; font-size: 1.125rem; }
.api-guide-overview p { max-width: 720px; color: var(--text-muted); font-size: 0.875rem; }
.api-guide-base { flex: none; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 10px; overflow-wrap: anywhere; word-break: break-word; background: var(--bg-sunken); font-size: 0.875rem; }

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.package-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 19px;
  border: 1px solid var(--border-light);
  border-radius: 15px;
  background: var(--card-light-bg);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.package-card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.35); box-shadow: var(--shadow-sm); }
.package-card.featured { border-color: rgba(var(--brand-rgb),.42); }
.package-card-top { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.package-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--brand-primary);
  background: rgba(var(--brand-rgb),.09);
}
.package-name { margin-top: 17px; font-size: 1.0625rem; letter-spacing: -.025em; }
.package-price { display: flex; align-items: baseline; gap: 5px; margin-top: 7px; }
.package-price strong { font-size: 25px; letter-spacing: -.04em; }
.package-price span { font-size: 0.875rem; color: var(--text-muted); }
.package-annual { margin-top: 7px; color: var(--brand-teal); font-size: 0.875rem; font-weight: 700; }
.annual-package-action { display: block; margin-top: 9px; color: var(--text-muted); font-size: 0.875rem; font-weight: 700; text-align: center; }
.annual-package-action:hover { color: var(--brand-primary); }
.package-features { margin: 17px 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.package-features li { display: flex; gap: 7px; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.package-features i { margin-top: 2px; color: var(--brand-teal); }
.package-card > .btn { margin-top: auto; }
.btn.disabled { pointer-events: none; opacity: .58; }

.package-choice-banner {
  margin-bottom: var(--sp-4);
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid rgba(var(--brand-rgb),.25);
  border-radius: 15px;
  background: rgba(var(--brand-rgb),.055);
}
.package-choice-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--brand-primary); }
.package-choice-icon i { font-size: 21px; }
.package-choice-banner small,
.package-choice-banner strong,
.package-choice-banner div > span { display: block; }
.package-choice-banner small { margin-bottom: 2px; font-size: 0.875rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); }
.package-choice-banner strong { font-size: 0.875rem; }
.package-choice-banner div > span { margin-top: 3px; font-size: 0.875rem; color: var(--text-muted); }

.verification-inline { min-height: 24px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.875rem; }
.verification-inline form { margin: 0; }
.text-action { appearance: none; padding: 0; border: 0; color: var(--brand-primary); background: none; font: inherit; font-weight: 750; cursor: pointer; }
.text-action:hover { text-decoration: underline; text-underline-offset: 3px; }

.purchase-gate {
  margin-bottom: var(--sp-4); display: grid; grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(245,158,11,.28);
  border-radius: 14px; background: color-mix(in srgb, var(--card-light-bg) 94%, #f59e0b 6%);
  box-shadow: 0 8px 24px rgba(17,21,33,.06);
}
.purchase-gate > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #b45309; background: rgba(245,158,11,.12); }
.purchase-gate > span i { font-size: 1.1875rem; }
.purchase-gate strong, .purchase-gate small { display: block; }
.purchase-gate strong { font-size: 0.875rem; letter-spacing: -.01em; }
.purchase-gate small { margin-top: 2px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.4; }

.shop-package-panel { margin-bottom: var(--sp-4); padding: 20px; border: 1px solid var(--border-light); border-radius: 18px; background: var(--card-light-bg); box-shadow: var(--shadow-sm); }
.shop-package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.shop-package-head h2 { margin: 3px 0 4px; font-size: 1.125rem; letter-spacing: -.035em; }
.shop-package-head p { color: var(--text-muted); font-size: 0.875rem; }
.shop-package-head .eyebrow { color: var(--brand-primary); font-size: 0.875rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.package-saving { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; color: var(--brand-teal); background: color-mix(in srgb, var(--card-light-bg) 88%, var(--brand-teal) 12%); font-size: 0.875rem; font-weight: 750; }
.shop-package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.shop-package { min-width: 0; padding: 15px; border: 1px solid var(--border-light); border-radius: 13px; background: var(--bg-sunken); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.shop-package:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.35); box-shadow: 0 10px 24px rgba(17,21,33,.08); }
.shop-package.featured { border-color: rgba(var(--brand-rgb),.36); background: color-mix(in srgb, var(--bg-sunken) 93%, var(--brand-primary) 7%); }
.shop-package small, .shop-package strong { display: block; }
.shop-package small { color: var(--brand-primary); font-size: 0.875rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.shop-package strong { margin-top: 4px; overflow: hidden; color: var(--text-primary); font-size: 0.875rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.shop-package-price { display: flex; align-items: baseline; gap: 4px; margin: 13px 0; }
.shop-package-price b { font-size: 22px; letter-spacing: -.04em; }
.shop-package-price span { color: var(--text-muted); font-size: 0.875rem; }
.shop-package-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.annual-link { color: var(--text-muted); font-size: 0.875rem; font-weight: 700; text-align: right; }
.annual-link:hover { color: var(--brand-primary); }
.shop-payg-divider { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 12px; color: var(--text-muted); font-size: 0.875rem; }
.shop-payg-divider::before, .shop-payg-divider::after { height: 1px; flex: 1; content: ''; background: var(--border-light); }
.shop-payg-divider strong { color: var(--text-secondary); font-size: 0.875rem; }

.payg-rate-list { display: grid; gap: 2px; margin-bottom: 12px; }
.payg-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.payg-rate-row:last-child { border-bottom: 0; }
.payg-rate-row strong, .payg-rate-row small { display: block; }
.payg-rate-row strong { font-size: 0.875rem; }
.payg-rate-row small { margin-top: 2px; color: var(--text-muted); font-size: 0.875rem; }
.payg-rate-row b { flex: none; color: var(--brand-primary); font-size: 0.875rem; }
.payg-full-link { margin-top: 14px; justify-content: flex-start; }
.payg-full-link .bx:last-child { margin-left: auto; }

/* Full PAYG rate card */
.rate-card-head .eyebrow { color: var(--brand-primary); }
.rate-card-search-panel .panel-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.rate-card-search { display: flex; align-items: flex-end; gap: 10px; flex: 1; max-width: 700px; }
.rate-card-search .field { flex: 1; margin: 0; }
.rate-card-search .search-bar { padding-inline: 13px 9px; }
.rate-card-search .search-bar > a { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 8px; color: var(--text-muted); }
.rate-card-search .search-bar > a:hover { color: var(--text); background: rgba(var(--brand-rgb),.08); }
.rate-card-count { flex: none; padding-bottom: 8px; color: var(--text-muted); font-size: 0.875rem; }
.rate-card-count strong { color: var(--text); font-size: 0.9375rem; }
.rate-card-list { display: grid; gap: 8px; }
.rate-card-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(560px,1.7fr); align-items: center; gap: 20px; margin: 0; padding: 15px 18px; border-radius: 14px; }
.rate-card-row:hover { transform: translateY(-1px); }
.rate-card-destination { min-width: 0; }
.rate-card-destination strong,.rate-card-destination small { display: block; }
.rate-card-destination strong { margin-top: 4px; overflow: hidden; color: var(--text); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.rate-card-destination small { margin-top: 3px; color: var(--text-muted); font-size: 0.875rem; }
.rate-prefix { display: inline-flex; padding: 3px 7px; border-radius: 6px; color: var(--brand-primary); background: rgba(var(--brand-rgb),.08); font: 700 0.875rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.rate-card-prices { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0; }
.rate-card-prices div { min-width: 0; }
.rate-card-prices dt { color: var(--text-muted); font-size: 0.875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .055em; }
.rate-card-prices dd { margin-top: 3px; color: var(--text); font-size: 0.875rem; font-weight: 720; white-space: nowrap; }
.rate-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0; }
.rate-pagination span { color: var(--text-muted); font-size: 0.875rem; }
.rate-card-note { margin-top: 20px; }

/* Inputs retain a readable theme through focus, selection and autofill. */
.control,.field-float input { color: var(--text); caret-color: var(--text); -webkit-text-fill-color: var(--text); }
.control:focus,.field-float input:focus {
  color: var(--text); background-color: var(--bg-elevated); caret-color: var(--text); -webkit-text-fill-color: var(--text);
}
.control::selection,.field-float input::selection { color: var(--text); background: rgba(var(--brand-rgb),.24); }
.control:-webkit-autofill,.control:-webkit-autofill:hover,.control:-webkit-autofill:focus,
.field-float input:-webkit-autofill,.field-float input:-webkit-autofill:hover,.field-float input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
  transition: background-color 9999s ease-out 0s;
}
html[data-theme="dark"] .control,html[data-theme="dark"] .field-float input { color-scheme: dark; }

@media (max-width: 760px) {
  .rate-card-search-panel .panel-body { align-items: stretch; flex-direction: column; gap: 12px; }
  .rate-card-search { align-items: stretch; flex-direction: column; max-width: none; }
  .rate-card-search .btn { width: 100%; justify-content: center; }
  .rate-card-count { padding: 0; }
  .rate-card-row { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
  .rate-card-destination strong { white-space: normal; }
  .rate-card-prices { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 8px; }
  .rate-pagination { justify-content: space-between; }
  .call-mode-options { grid-template-columns: 1fr; }
  .call-mode-option { min-height: 84px; }
  .ivr-builder { grid-template-columns: 1fr; }
  .ivr-keypad { max-width: 310px; margin: 0 auto; width: 100%; }
  .ivr-editor-stack { min-height: 0; padding: 14px; }
  .ivr-editor-empty { min-height: 150px; }
  .ivr-editor-head { align-items: flex-start; }
  .ivr-voicemail-note { align-items: flex-start; flex-wrap: wrap; }
  .ivr-voicemail-note a { width: 100%; margin-left: 30px; }
  .ivr-help-row { align-items: flex-start; flex-direction: column; }
  .page-api-docs .api-request-row { align-items: stretch; flex-direction: column; }
  .page-api-docs .api-request-row > .field { width: 100%; flex: none !important; }
  .page-api-docs .endpoint-card .panel-head { align-items: flex-start; flex-wrap: wrap; }
  .page-api-docs .endpoint-title { width: calc(100% - 66px); align-items: flex-start; }
  .page-api-docs .try-endpoint { margin-left: auto; }
  .page-api-docs .btn-row { align-items: stretch; flex-direction: column; }
  .page-api-docs .btn-row .btn { width: 100%; justify-content: center; }
  .api-guide-card .panel-body { grid-template-columns: 40px minmax(0,1fr); }
  .api-guide-card .panel-body > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .api-guide-overview .panel-body { align-items: stretch; flex-direction: column; }
  .api-guide-base { width: 100%; }
  .package-grid { grid-template-columns: 1fr; }
  .package-choice-banner { grid-template-columns: 40px minmax(0,1fr); }
  .package-choice-banner > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .purchase-gate { grid-template-columns: 34px minmax(0,1fr); padding: 11px; }
  .purchase-gate > span { width: 34px; height: 34px; }
  .purchase-gate > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .shop-package-panel { padding: 15px; }
  .shop-package-head { display: block; }
  .package-saving { margin-top: 10px; }
  .shop-package-grid { grid-template-columns: 1fr; }
  .shop-package strong { white-space: normal; }
  .shop-package-actions { justify-content: flex-start; }
  .annual-link { text-align: left; }
  .shop-payg-divider { flex-wrap: wrap; justify-content: center; text-align: center; }
  .shop-payg-divider::before, .shop-payg-divider::after { min-width: 28px; }
  .greeting-checkout { align-items: flex-start; flex-direction: column; }
  .greeting-checkout .btn-row { width: 100%; }
  .greeting-checkout .btn { flex: 1; justify-content: center; }
  .greeting-list article { flex-wrap: wrap; }
  .greeting-list article > div { flex-basis: calc(100% - 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .ivr-setup-panel:not([hidden]) { animation: none; }
}
.lb-voice-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin:2px 0 var(--sp-2)}
.lb-voice-control{min-width:0;padding:14px;border:1px solid var(--border-light);border-radius:14px;background:var(--bg-sunken)}
.lb-voice-select{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.lb-voice-select .btn{white-space:nowrap}
.lb-voice-select .is-playing{color:var(--brand-primary);border-color:rgba(var(--brand-rgb),.35)}
.lb-voice-note{display:flex;align-items:flex-start;gap:6px;margin:0 0 var(--sp-4)}
@media(max-width:700px){.lb-voice-pair{grid-template-columns:1fr}.lb-voice-select{grid-template-columns:minmax(0,1fr) auto}.lb-voice-control{padding:12px}}