/* Mediconecta App Móvil — estilos */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --brand:        #4cb1dc;
  --brand-dark:   #2a8cb8;
  --brand-hover:  #3a9ac4;
  --brand-light:  #e8f4fa;
  --brand-50:     #f1f9fd;

  /* Slate */
  --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* States */
  --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-50: #ecfdf5;
  --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-50: #fffbeb;
  --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-50: #fef2f2;
  --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-50: #f5f3ff;
  --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-50: #f0fdfa;
  --pink-400: #f472b6; --pink-500: #ec4899; --pink-50: #fdf2f8;
  --orange-400: #fb923c; --orange-500: #f97316; --orange-50: #fff7ed;

  /* Surfaces (light) */
  --bg-canvas:  #f6f7f8;
  --bg-surface: #ffffff;
  --bg-subtle:  #f8fafc;
  --bg-muted:   #f1f5f9;

  --fg-strong: var(--slate-800);
  --fg-body:   var(--slate-700);
  --fg-muted:  var(--slate-500);
  --fg-subtle: var(--slate-400);

  --border-default: var(--slate-200);
  --border-subtle:  var(--slate-100);

  /* Radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-brand: 0 6px 20px rgba(76,177,220,0.30);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-canvas:  #0b1220;
  --bg-surface: #131c2e;
  --bg-subtle:  #1a2336;
  --bg-muted:   #1f2a40;

  --fg-strong: #f8fafc;
  --fg-body:   #cbd5e1;
  --fg-muted:  #94a3b8;
  --fg-subtle: #64748b;

  --border-default: #243049;
  --border-subtle:  #1e2940;

  --brand-light: rgba(76,177,220,0.16);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: #e8eaef;
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-theme="dark"] body { background: #050813; }

/* Stage holding the iPhone frame */
.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  position: relative;
}

/* Inside-frame screen container */
.screen {
  width: 100%; height: 100%;
  background: var(--bg-canvas);
  color: var(--fg-body);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* Material symbols sizing presets */
.mi { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; line-height: 1;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  text-transform: none;
  letter-spacing: normal;
  overflow-wrap: normal;
}
.mi-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ── Status bar (top safe area, brand-controlled, 44px) ── */
.status-bar {
  height: 50px; padding: 14px 26px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 600;
  color: var(--fg-strong);
  background: transparent;
  position: relative; z-index: 5;
}
.status-bar.dark-text { color: #fff; }
.status-bar .right { display: flex; gap: 6px; align-items: center; }

/* ── App bar ── */
.app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 14px;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 10;
}
.app-bar.transparent { background: transparent; border-bottom: 0; }
.app-bar .title { font-size: 18px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em; }
.app-bar .ic-btn {
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  color: var(--fg-body); cursor: pointer; transition: all 200ms var(--ease);
  position: relative;
}
.app-bar .ic-btn:hover { background: var(--brand-light); }
.app-bar .ic-btn .badge {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--red-500); border: 2px solid var(--bg-surface);
}

/* ── Bottom nav ── */
.bottom-nav {
  display: flex; align-items: stretch;
  background: var(--bg-surface); border-top: 1px solid var(--border-default);
  padding: 8px 6px 24px;
  position: relative; z-index: 5;
}
.bottom-nav .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 6px 4px;
  color: var(--fg-subtle); font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: color 200ms var(--ease);
  font-family: inherit;
}
.bottom-nav .tab .mi { font-size: 24px; }
.bottom-nav .tab.active { color: var(--brand); }
.bottom-nav .tab.active .mi { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ── Card primitives ── */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-xl); padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card.tap { cursor: pointer; }
.card.tap:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 24px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: all 200ms var(--ease); width: 100%;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn-primary:disabled { background: var(--slate-300); color: var(--slate-100); box-shadow: none; cursor: not-allowed; }
.btn-secondary {
  background: var(--bg-surface); color: var(--fg-strong);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-tertiary {
  background: transparent; color: var(--brand); height: 44px;
}
.btn-danger { background: transparent; color: var(--red-500); border: 1px solid var(--red-100, #fee2e2); }

[data-theme="dark"] .btn-danger { border-color: rgba(239,68,68,0.25); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  color: var(--fg-body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 200ms var(--ease);
  white-space: nowrap;
}
.chip:hover { background: var(--bg-subtle); }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.chip.outline { background: transparent; }
.chip .mi { font-size: 16px; }

/* Search input */
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  padding: 11px 16px;
  font-size: 15px; color: var(--fg-body);
  width: 100%; box-shadow: var(--shadow-sm);
}
.search-box .mi { color: var(--fg-muted); font-size: 22px; }
.search-box input {
  flex: 1; background: none; border: 0; outline: 0;
  font-family: inherit; font-size: 15px; color: var(--fg-body);
  min-width: 0;
}
.search-box input::placeholder { color: var(--fg-subtle); }

/* Input field */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; color: var(--fg-subtle);
}
.field-input {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-lg); padding: 12px 14px;
  font-family: inherit; font-size: 15px; color: var(--fg-strong);
  outline: 0; transition: border-color 200ms var(--ease);
}
.field-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(76,177,220,0.15); }
textarea.field-input { resize: none; min-height: 84px; }

/* Avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); font-weight: 600; color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 44px; height: 44px; font-size: 14px; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.avatar-xl { width: 96px; height: 96px; font-size: 28px; }

/* Specialty colors */
.bg-card { background: var(--red-400); }
.bg-ped { background: var(--violet-400); }
.bg-gin { background: var(--pink-400); }
.bg-der { background: var(--amber-400); }
.bg-odo { background: var(--teal-400); }
.bg-psi { background: var(--brand); }
.bg-nut { background: var(--emerald-400); }
.bg-oft { background: var(--teal-400); }

/* Verified blue dot */
.verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--brand); color: #fff; font-size: 12px;
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.badge-emerald { background: var(--emerald-50); color: var(--emerald-600); }
.badge-amber   { background: var(--amber-50);   color: var(--amber-600); }
.badge-red     { background: var(--red-50);     color: var(--red-600); }
.badge-violet  { background: var(--violet-50);  color: var(--violet-600); }
.badge-brand   { background: var(--brand-light); color: var(--brand-dark); }
.badge-slate   { background: var(--bg-muted);   color: var(--fg-muted); }

[data-theme="dark"] .badge-emerald { background: rgba(16,185,129,0.16); color: #6ee7b7; }
[data-theme="dark"] .badge-amber   { background: rgba(245,158,11,0.16); color: #fcd34d; }
[data-theme="dark"] .badge-red     { background: rgba(239,68,68,0.16);  color: #fca5a5; }
[data-theme="dark"] .badge-violet  { background: rgba(139,92,246,0.16); color: #c4b5fd; }
[data-theme="dark"] .badge-brand   { background: rgba(76,177,220,0.20); color: #93d5ed; }

/* Star row */
.stars { display: inline-flex; gap: 1px; align-items: center; color: var(--amber-500); }
.stars .mi { font-size: 14px; }

/* Section header */
.section-h {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 16px 10px;
}
.section-h .h {
  font-size: 16px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em;
}
.section-h .more { font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(76,177,220,0.5); }
  100% { box-shadow: 0 0 0 28px rgba(76,177,220,0); }
}
@keyframes pulse-soft {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-30%); opacity: 0.5; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.fade-up { animation: fadeUp 380ms var(--ease) both; }
.fade-in { animation: fadeIn 250ms var(--ease) both; }

/* Skeleton */
.skel {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-subtle) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-lg);
}

/* Page transition wrapper */
.page-enter { animation: fadeUp 280ms var(--ease) both; }

/* Bottom sheet */
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 90;
  animation: fadeIn 200ms var(--ease) both;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-surface);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 8px 0 24px;
  z-index: 91; max-height: 88%;
  display: flex; flex-direction: column;
  animation: sheetUp 280ms var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet .grabber {
  width: 38px; height: 5px; background: var(--slate-300); border-radius: var(--r-full);
  margin: 6px auto 6px;
}

/* Modal full */
.modal-full {
  position: absolute; inset: 0; z-index: 95;
  background: var(--bg-canvas);
  display: flex; flex-direction: column;
  animation: fadeIn 200ms var(--ease) both;
}

/* Toast */
.toast {
  position: absolute; left: 16px; right: 16px; top: 70px;
  background: var(--slate-900); color: #fff;
  padding: 12px 14px; border-radius: var(--r-lg);
  font-size: 13px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  z-index: 80;
  animation: fadeUp 220ms var(--ease) both;
}

/* Stepper */
.stepper { display: flex; align-items: center; gap: 6px; padding: 0 16px 6px; }
.stepper .step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--fg-subtle);
}
.stepper .num {
  width: 22px; height: 22px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--fg-muted);
  font-size: 11px; font-weight: 700;
}
.stepper .step.active .num { background: var(--brand); color: #fff; }
.stepper .step.done .num { background: var(--emerald-500); color: #fff; }
.stepper .bar { flex: 1; height: 2px; background: var(--border-default); border-radius: 1px; }
.stepper .bar.done { background: var(--brand); }

/* Calendar mini */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 16px; }
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  cursor: pointer; transition: all 180ms var(--ease);
}
.cal-day .dow { font-size: 10px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-day .num { font-size: 17px; font-weight: 700; color: var(--fg-strong); }
.cal-day .dot { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--emerald-500); }
.cal-day.disabled { opacity: 0.35; cursor: not-allowed; }
.cal-day.disabled .dot { background: transparent; }
.cal-day.active { background: var(--brand); border-color: var(--brand); }
.cal-day.active .dow, .cal-day.active .num { color: #fff; }
.cal-day.active .dot { background: #fff; }

/* Slot grid */
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.slot {
  padding: 10px 4px; text-align: center;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  font-size: 13px; font-weight: 600; color: var(--fg-body);
  cursor: pointer; transition: all 180ms var(--ease);
}
.slot.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.slot.full { color: var(--fg-subtle); background: var(--bg-muted); cursor: not-allowed; }

/* Wallet timeline */
.tl-month { font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; padding: 12px 16px 6px; }
.tl-item {
  display: flex; gap: 12px; padding: 14px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
.tl-item:hover { background: var(--bg-subtle); }
.tl-icon {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tl-icon.tipo-receta { background: var(--brand-light); color: var(--brand-dark); }
.tl-icon.tipo-orden  { background: var(--violet-50); color: var(--violet-600); }
.tl-icon.tipo-resultado { background: var(--emerald-50); color: var(--emerald-600); }
.tl-icon.tipo-ficha  { background: var(--amber-50); color: var(--amber-600); }
[data-theme="dark"] .tl-icon.tipo-orden { background: rgba(139,92,246,0.16); color: #c4b5fd; }
[data-theme="dark"] .tl-icon.tipo-resultado { background: rgba(16,185,129,0.16); color: #6ee7b7; }
[data-theme="dark"] .tl-icon.tipo-ficha { background: rgba(245,158,11,0.16); color: #fcd34d; }

/* Pulse for live elements */
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* Onboarding dots */
.dots { display: flex; gap: 6px; justify-content: center; }
.dots .d { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--slate-300); transition: width 200ms var(--ease); }
.dots .d.active { width: 22px; background: var(--brand); }

/* Wallet QR placeholder */
.qr-box {
  width: 180px; height: 180px; border-radius: var(--r-xl);
  background:
    repeating-linear-gradient(0deg, var(--slate-900) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(90deg, var(--slate-900) 0 4px, transparent 4px 9px),
    var(--bg-surface);
  border: 1px solid var(--border-default);
  position: relative; margin: 0 auto;
}
.qr-box::before, .qr-box::after,
.qr-box > .corner-br {
  content: ''; position: absolute; width: 36px; height: 36px;
  border: 6px solid var(--slate-900); border-radius: 6px;
  background: var(--bg-surface);
}
.qr-box::before { top: 8px; left: 8px; }
.qr-box::after  { top: 8px; right: 8px; }
.qr-box > .corner-br { bottom: 8px; left: 8px; }

[data-theme="dark"] .qr-box {
  background:
    repeating-linear-gradient(0deg, #f8fafc 0 4px, transparent 4px 9px),
    repeating-linear-gradient(90deg, #f8fafc 0 4px, transparent 4px 9px),
    #131c2e;
}
[data-theme="dark"] .qr-box::before,
[data-theme="dark"] .qr-box::after,
[data-theme="dark"] .qr-box > .corner-br {
  border-color: #f8fafc; background: #131c2e;
}

/* Map placeholder */
.map-placeholder {
  background:
    linear-gradient(135deg, #dde7ee 0%, #e7eff5 100%);
  position: relative; overflow: hidden;
}
.map-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-theme="dark"] .map-placeholder { background: linear-gradient(135deg, #1f2a40, #243049); }
[data-theme="dark"] .map-placeholder::before {
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}

/* Logo isotipo */
.iso {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; border-radius: 11px;
  font-weight: 800; letter-spacing: -0.04em;
  font-family: 'Inter', sans-serif;
}
.iso-sm { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
.iso-md { width: 44px; height: 44px; font-size: 19px; }
.iso-lg { width: 80px; height: 80px; font-size: 34px; border-radius: 18px; box-shadow: 0 20px 50px rgba(76,177,220,0.45); }

/* Page wrapper for transitions */
.pages { position: relative; flex: 1; overflow: hidden; }
.pages > * { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* Generic icon button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: transparent; border: 0; color: var(--fg-body);
  cursor: pointer; transition: all 200ms var(--ease);
}
.icon-btn:hover { background: var(--bg-muted); }

/* Divider */
.div-h { height: 1px; background: var(--border-subtle); margin: 0 16px; }
.div-vh { display: inline-block; width: 3px; height: 3px; border-radius: var(--r-full); background: var(--fg-subtle); margin: 0 6px; vertical-align: middle; }

/* Tab bar (sticky on profile) */
.tabs {
  display: flex; gap: 4px; padding: 0 8px;
  background: var(--bg-canvas); border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 8;
}
.tabs .t {
  flex: 1; padding: 12px 6px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--fg-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.tabs .t.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Big confirmation tick */
.big-tick {
  width: 88px; height: 88px; border-radius: var(--r-full);
  background: var(--emerald-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 12px 30px rgba(16,185,129,0.35);
}
.big-tick .mi { font-size: 50px; }

/* Sticky bottom CTA */
.sticky-cta {
  position: sticky; bottom: 0;
  padding: 12px 16px 14px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  z-index: 6;
}

/* Helper rows */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row-center  { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.strong { color: var(--fg-strong); }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.txt-sm { font-size: 13px; }
.txt-xs { font-size: 11px; }
.txt-lg { font-size: 17px; }
.txt-xl { font-size: 22px; }

/* Splash */
.splash {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  z-index: 100;
  color: #fff;
}
.splash .iso-lg { animation: float-y 3s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(76,177,220,0.6); }
.splash .iso-lg.ring { animation: pulse-ring 2s ease-out infinite, float-y 3s ease-in-out infinite; }
.splash .tag { font-size: 14px; font-weight: 500; opacity: 0.7; letter-spacing: 0.04em; }

/* Score ring (provider compare) */
.ring-progress {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: conic-gradient(var(--brand) calc(var(--p, 0) * 1%), var(--bg-muted) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ring-progress::before {
  content: ''; position: absolute; inset: 4px; border-radius: var(--r-full); background: var(--bg-surface);
}
.ring-progress .v { position: relative; font-size: 11px; font-weight: 700; color: var(--fg-strong); }

/* Progress bar */
.prog-bar { height: 6px; background: var(--bg-muted); border-radius: 3px; overflow: hidden; }
.prog-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width 600ms var(--ease); }

/* Video call pieces */
.video-hero {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.video-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.video-hero .scan {
  position: absolute; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(76,177,220,0.18), transparent);
  animation: scanline 4.2s linear infinite;
  pointer-events: none;
}
.pip {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 84px; height: 112px; border-radius: 14px;
  background: linear-gradient(135deg, #2a8cb8, #1e293b);
  border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* Tweaks panel positioning override (relative to viewport, not frame) */
.tweaks-host { z-index: 200; }