/* ================================================================
   Vision Therapy Suite v4 — vts.css
   Medical-luxury aesthetic · DM Serif Display + DM Sans
   ================================================================ */

/* ── RESET & TOKENS ─────────────────────────────────────────── */
:root {
  --navy:       #0B1426;
  --navy-2:     #111E35;
  --blue:       #2563EB;
  --blue-light: #EFF6FF;
  --blue-mid:   #BFDBFE;
  --teal:       #0EA5E9;
  --green:      #16A34A;
  --green-lt:   #DCFCE7;
  --amber:      #D97706;
  --amber-lt:   #FEF3C7;
  --red:        #DC2626;
  --red-lt:     #FEE2E2;
  --purple:     #7C3AED;
  --purple-lt:  #EDE9FE;
  --gray-900:   #0F172A;
  --gray-800:   #1E293B;
  --gray-700:   #334155;
  --gray-600:   #475569;
  --gray-500:   #64748B;
  --gray-400:   #94A3B8;
  --gray-300:   #CBD5E1;
  --gray-200:   #E2E8F0;
  --gray-100:   #F1F5F9;
  --gray-50:    #F8FAFC;
  --white:      #FFFFFF;
  --vts-muted:  var(--gray-500);
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07);
  --shadow:     0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.13);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.18);
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
}

.vts-app, .vts-landing, .vts-auth-wrap, .vts-redirect-notice, .vts-no-patient {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-700);
  -webkit-font-smoothing: antialiased;
}
.vts-app *, .vts-landing * { box-sizing: border-box; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
.vts-serif { font-family: var(--font-serif); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.vts-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px; background: var(--blue); color: var(--white);
  border: none; border-radius: var(--radius); font-family: var(--font-sans);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.vts-btn-primary:hover  { background: #1d4ed8; color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.4); }
.vts-btn-primary:active { transform: translateY(0); }
.vts-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vts-btn-ghost   { display:inline-flex;align-items:center;gap:6px;padding:11px 20px;background:transparent;color:var(--gray-700);border:1.5px solid var(--gray-300);border-radius:var(--radius);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s; }
.vts-btn-ghost:hover { border-color:var(--blue);color:var(--blue); }
.vts-btn-outline { display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;background:transparent;color:var(--blue);border:1.5px solid var(--blue);border-radius:var(--radius);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s; }
.vts-btn-outline:hover { background:var(--blue-light); }
.vts-btn-sm { padding:7px 14px;font-size:12px;font-weight:600;border:1.5px solid var(--gray-300);border-radius:8px;background:var(--white);cursor:pointer;transition:.12s;white-space:nowrap; }
.vts-btn-sm:hover { border-color:var(--blue);color:var(--blue); }
.vts-btn-full { width:100%;justify-content:center; }
.vts-btn-danger { padding:8px 16px;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.12s; }
.vts-btn-danger:hover { background:var(--red-lt); }

/* ── FORMS ───────────────────────────────────────────────────── */
.vts-field { margin-bottom: 16px; }
.vts-field label { display:block;font-weight:600;font-size:13px;color:var(--gray-700);margin-bottom:5px; }
.vts-app input[type=text],
.vts-app input[type=email],
.vts-app input[type=password],
.vts-app input[type=date],
.vts-app select,
.vts-app textarea {
  display:block;width:100%;padding:10px 13px;border:1.5px solid var(--gray-300);
  border-radius:var(--radius);font-family:var(--font-sans);font-size:14px;
  color:var(--gray-900);background:var(--white);transition:.15s;
}
.vts-app input:focus,.vts-app select:focus,.vts-app textarea:focus {
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.vts-row2 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.vts-form-msg { font-size:13px;margin-top:10px;min-height:18px; }
.vts-color-row { display:flex;align-items:center;gap:10px; }
.vts-color-hint { font-size:12px;color:var(--gray-500); }

/* ── CARDS ───────────────────────────────────────────────────── */
.vts-card { background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden; }
.vts-card-hd { padding:16px 20px;border-bottom:1px solid var(--gray-100); }
.vts-card-hd h3 { font-size:14px;font-weight:700;color:var(--gray-900);margin:0; }
.vts-card-body { padding:20px; }

/* ── BADGES / PILLS ─────────────────────────────────────────── */
.vts-pill { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.2px; }
.pill-blue   { background:var(--blue-light);color:var(--blue); }
.pill-green  { background:var(--green-lt);color:var(--green); }
.pill-amber  { background:var(--amber-lt);color:var(--amber); }
.pill-red    { background:var(--red-lt);color:var(--red); }
.pill-purple { background:var(--purple-lt);color:var(--purple); }
.pill-gray   { background:var(--gray-100);color:var(--gray-600); }
.vts-lv1 { background:#DCFCE7;color:#15803D; }
.vts-lv2 { background:#DBEAFE;color:#1D4ED8; }
.vts-lv3 { background:#EDE9FE;color:#6D28D9; }
.status-active     { background:var(--green-lt);color:var(--green); }
.status-discharged { background:var(--gray-100);color:var(--gray-500); }
.plan-free    { background:var(--gray-100);color:var(--gray-600); }
.plan-starter { background:var(--blue-light);color:var(--blue); }
.plan-pro     { background:var(--purple-lt);color:var(--purple); }

/* ================================================================
   AUTH SCREENS
   ================================================================ */
.vts-auth-wrap {
  min-height:70vh;display:flex;align-items:center;justify-content:center;
  padding:40px 16px;background:var(--gray-50);
}
.vts-auth-card {
  background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  padding:40px;width:100%;max-width:460px;
}
.vts-auth-logo {
  display:flex;align-items:center;gap:8px;font-family:var(--font-serif);
  font-size:20px;color:var(--navy);text-decoration:none;margin-bottom:28px;font-weight:400;
}
.vts-logo-eye { font-size:24px; }
.vts-invite-banner {
  background:#f0fdf4;border:1px solid #86efac;border-radius:var(--radius);
  padding:12px 14px;color:var(--green);font-size:13px;margin-bottom:20px;
}
.vts-auth-tabs { display:flex;background:var(--gray-100);border-radius:10px;padding:3px;margin-bottom:24px; }
.vts-tab { flex:1;padding:9px;border:none;background:transparent;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;color:var(--gray-500);transition:.15s; }
.vts-tab.active { background:var(--white);color:var(--blue);box-shadow:var(--shadow-sm); }
.vts-tab-pane { display:none; }
.vts-tab-pane.active { display:block; }
.vts-auth-alt { font-size:13px;color:var(--gray-500);margin-top:20px;text-align:center; }
.vts-auth-alt a { color:var(--blue);text-decoration:none;font-weight:600; }

/* Redirect / no-patient */
.vts-redirect-notice, .vts-no-patient { display:flex;align-items:center;justify-content:center;min-height:60vh;padding:40px; }
.vts-rn-inner, .vts-np-inner { text-align:center;max-width:400px; }
.vts-rn-inner span, .vts-np-icon { font-size:52px;display:block;margin-bottom:16px; }
.vts-rn-inner h2, .vts-np-inner h2 { font-family:var(--font-serif);font-size:24px;margin-bottom:10px; }
.vts-np-hint { font-size:13px;color:var(--gray-500);margin:16px 0; }

/* ================================================================
   PATIENT APP
   ================================================================ */

/* NAV */
.vts-nav {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:var(--navy);color:var(--white);
  position:sticky;top:0;z-index:200;
}
.vts-nav-brand { display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-size:18px; }
.vts-nav-eye { font-size:20px; }
.vts-nav-right { display:flex;align-items:center;gap:12px; }
.vts-streak-pill { background:rgba(255,255,255,.12);padding:5px 12px;border-radius:20px;font-size:13px;font-weight:700; }
.vts-nav-avatar { width:34px;height:34px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px; }
.vts-nav-logout { font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:6px; }
.vts-nav-logout:hover { color:var(--white);border-color:rgba(255,255,255,.5); }

/* VIEWS */
.vts-view { display:none; }
.vts-view.active { display:block; }

/* DASHBOARD */
.vts-dash-wrap { max-width:900px;margin:0 auto;padding:32px 20px 80px; }
.vts-section-hd { display:flex;align-items:baseline;gap:12px;margin-bottom:14px; }
.vts-section-hd h2 { font-family:var(--font-serif);font-size:20px;font-weight:400;margin:0;color:var(--gray-900); }
.vts-section-sub { font-size:13px;color:var(--gray-500); }

/* Greeting row */
.vts-greeting-row { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:28px; }
.vts-greeting-time { font-size:13px;color:var(--gray-500);margin-bottom:4px; }
.vts-greeting-name { font-family:var(--font-serif);font-size:28px;font-weight:400;color:var(--navy);margin:0 0 10px; }
.vts-dx-pill { display:inline-flex;align-items:center;gap:6px;background:var(--blue-light);color:var(--blue);padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600; }
.vts-kpi-row { display:flex;gap:12px;flex-wrap:wrap; }
.vts-kpi { background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px 18px;text-align:center;min-width:80px;box-shadow:var(--shadow-sm); }
.vts-kpi-val { font-family:var(--font-serif);font-size:24px;color:var(--navy); }
.vts-kpi-lbl { font-size:11px;color:var(--gray-500);margin-top:2px; }

/* Exercise plan grid */
.vts-ex-plan-grid { display:flex;flex-direction:column;gap:10px; }
.vts-ex-plan-card {
  display:flex;align-items:center;gap:16px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s;
}
.vts-ex-plan-card:hover { box-shadow:var(--shadow);border-color:var(--blue-mid);transform:translateY(-1px); }
.vts-ex-plan-icon { font-size:28px;flex-shrink:0;width:46px;text-align:center; }
.vts-ex-plan-body { flex:1;min-width:0; }
.vts-ex-plan-title { font-weight:700;font-size:15px;color:var(--gray-900); }
.vts-ex-plan-cat   { font-size:12px;color:var(--blue);font-weight:600;margin-top:1px; }
.vts-ex-plan-last  { font-size:12px;color:var(--gray-500);margin-top:2px; }
.vts-ex-plan-right { display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0; }
.vts-start-btn { padding:9px 20px;background:var(--blue);color:var(--white);border:none;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:.12s; }
.vts-start-btn:hover { background:#1d4ed8; }
.vts-level-indicator { display:flex;gap:4px;align-items:center; }
.vts-lv-dot { width:8px;height:8px;border-radius:50%;background:var(--gray-200); }
.vts-lv-dot.active { background:var(--blue); }
.vts-lv-dot.lv-3.active { background:var(--purple); }
.vts-lv-badge { font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px; }
.vts-ex-empty { text-align:center;padding:48px 20px;color:var(--gray-500); }
.vts-ex-empty-icon { font-size:48px;margin-bottom:12px; }

/* Session list */
.vts-session-list { border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white);overflow:hidden; }
.vts-session-row { display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--gray-100); }
.vts-session-row:last-child { border-bottom:none; }
.vts-session-emoji { font-size:22px;flex-shrink:0; }
.vts-session-info { flex:1; }
.vts-session-name { font-weight:600;font-size:14px;color:var(--gray-900); }
.vts-session-meta { font-size:12px;color:var(--gray-500); }
.vts-session-stats { display:flex;gap:10px;font-size:12px;color:var(--gray-500);flex-wrap:wrap;text-align:right; }

/* ── EXERCISE BRIEF SCREEN ──────────────────────────────────── */
.vts-brief-screen {
  min-height:100vh;background:var(--gray-50);
  display:flex;flex-direction:column;align-items:center;
  padding:24px 20px 60px;
}
.vts-brief-wrap { width:100%;max-width:660px; }
.vts-brief-back { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gray-500);background:none;border:1.5px solid var(--gray-200);border-radius:8px;padding:6px 14px;cursor:pointer;margin-bottom:24px;transition:.12s; }
.vts-brief-back:hover { color:var(--blue);border-color:var(--blue); }
.vts-brief-card { background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:36px; }
.vts-brief-emoji { font-size:56px;margin-bottom:14px; }
.vts-brief-card h1 { font-family:var(--font-serif);font-size:28px;font-weight:400;color:var(--navy);margin:0 0 6px; }
.vts-brief-tag { font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.5px;text-transform:uppercase;margin-bottom:18px; }
.vts-brief-why { background:var(--blue-light);border-left:4px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin-bottom:20px;font-size:14px;line-height:1.7;color:var(--gray-700); }
.vts-brief-why strong { color:var(--navy); }
.vts-brief-section { font-size:13px;font-weight:700;color:var(--gray-500);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px; }
.vts-brief-levels { display:flex;flex-direction:column;gap:8px;margin-bottom:24px; }
.vts-brief-level { display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:.15s; }
.vts-brief-level.lv-1 { background:#f0fdf4;border-color:#86efac; }
.vts-brief-level.lv-2 { background:var(--blue-light);border-color:var(--blue-mid); }
.vts-brief-level.lv-3 { background:var(--purple-lt);border-color:#c4b5fd; }
.vts-brief-level.selected { box-shadow:0 0 0 2px var(--blue); }
.vts-brief-lv-num { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0; }
.lv-1 .vts-brief-lv-num { background:#16a34a;color:#fff; }
.lv-2 .vts-brief-lv-num { background:var(--blue);color:#fff; }
.lv-3 .vts-brief-lv-num { background:var(--purple);color:#fff; }
.vts-brief-lv-text { font-size:13px;color:var(--gray-700); }
.vts-brief-lv-locked { margin-left:auto;font-size:11px;color:var(--gray-400); }
.vts-brief-instructions { background:var(--gray-50);border-radius:var(--radius);padding:18px;font-size:14px;margin-bottom:24px; }
.vts-brief-instructions ol { margin:0;padding-left:20px; }
.vts-brief-instructions li { margin-bottom:7px;line-height:1.65; }
.vts-brief-begin { display:block;width:100%;padding:15px;background:var(--navy);color:var(--white);border:none;border-radius:var(--radius-lg);font-family:var(--font-serif);font-size:18px;cursor:pointer;transition:.15s;letter-spacing:.2px; }
.vts-brief-begin:hover { background:#1e3a5f; }

/* ── ACTIVE EXERCISE SCREEN ─────────────────────────────────── */
.vts-ex-screen { display:flex;flex-direction:column;min-height:100vh;background:#0d1117; }
.vts-ex-bar {
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.vts-ex-bar-left { display:flex;align-items:center;gap:12px; }
.vts-ex-back { background:none;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);padding:5px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:.12s; }
.vts-ex-back:hover { color:#fff;border-color:rgba(255,255,255,.5); }
.vts-ex-name { font-weight:700;color:#fff;font-size:14px; }
.vts-ex-chips { display:flex;gap:8px; }
.vts-ex-chip { background:rgba(255,255,255,.1);color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700; }
.vts-ex-body { flex:1;padding:24px 20px;overflow-y:auto; }
.vts-ex-footer { padding:16px 20px;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:center;gap:12px; }
.vts-ex-done { padding:13px 36px;background:#16a34a;color:#fff;border:none;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;transition:.15s; }
.vts-ex-done:hover { background:#15803d; }
.vts-ex-tip { color:rgba(255,255,255,.55);font-size:13px;margin-bottom:14px;line-height:1.6; }
.vts-canvas { display:block;width:100%;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);margin-bottom:14px; }

/* Pursuit */
.vts-pursuit-wrap { max-width:880px;margin:0 auto; }
#pursuitTrack { position:relative;height:160px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden;margin-bottom:16px; }
#pursuitDot { width:28px;height:28px;background:radial-gradient(circle,#ff8080,#dc2626);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 0 14px rgba(220,38,38,.7); }
.vts-speed-row { display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.5);font-size:13px; }
.vts-speed-row input[type=range] { flex:1;max-width:240px; }

/* Saccades */
.vts-sacc-wrap { max-width:800px;margin:0 auto; }
#sacc-area { position:relative;height:240px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);margin-bottom:12px; }
#sacc-btn { width:52px;height:52px;border-radius:50%;background:#16a34a;color:#fff;border:none;font-weight:900;font-size:14px;cursor:pointer;box-shadow:0 0 16px rgba(22,163,74,.5);transition:.1s; }
#sacc-btn:hover { background:#15803d; }
.vts-rt-label { color:rgba(255,255,255,.35);font-size:12px;margin-top:6px; }

/* Brock */
.vts-brock-wrap { max-width:680px;margin:0 auto; }
.vts-brock-tip { background:rgba(255,255,255,.05);border-left:3px solid var(--blue);padding:11px 14px;border-radius:0 8px 8px 0;margin-bottom:14px;font-size:13px;color:rgba(255,255,255,.65);line-height:1.65; }
.vts-brock-btns { display:flex;gap:10px;justify-content:center;margin-top:14px; }
.vts-brock-btn { padding:10px 18px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);font-weight:700;font-size:14px;cursor:pointer;border-radius:8px;transition:.12s; }
.vts-brock-fb { text-align:center;margin-top:10px;color:rgba(255,255,255,.4);font-size:13px; }

/* Jump vergence */
.vts-jump-wrap { max-width:680px;margin:0 auto;color:#fff;text-align:center; }
.vts-jump-targets { display:flex;gap:28px;justify-content:center;margin:20px 0; }
.vts-jump-target-box { background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:30px 40px;transition:.3s; }
.vts-jump-target-box.active { border-color:var(--blue);background:rgba(37,99,235,.15); }
.vts-jump-tgt-label { font-size:11px;font-weight:800;letter-spacing:1px;color:rgba(255,255,255,.4);margin-top:8px; }
.vts-jump-near-dot { font-size:50px;color:var(--blue); }
.vts-jump-far-dot  { font-size:30px;color:rgba(255,255,255,.5); }
.vts-jump-prompt { color:rgba(255,255,255,.55);font-size:14px;margin-bottom:16px; }
.vts-jump-count-lbl { color:rgba(255,255,255,.4);font-size:13px;margin-top:12px; }

/* Vergence facility */
.vts-vf-wrap { max-width:680px;margin:0 auto;text-align:center;color:#fff; }
.vts-vf-fb { margin:12px 0;font-size:14px;color:rgba(255,255,255,.6); }

/* Accommodative facility */
.vts-af-wrap { max-width:520px;margin:0 auto;text-align:center;color:#fff; }
.vts-af-display { padding:36px 20px;background:rgba(255,255,255,.05);border-radius:16px;margin:16px 0;transition:.3s; }
.vts-af-display.plus  { border:2px solid #60a5fa; }
.vts-af-display.minus { border:2px solid #34d399; }
.vts-af-lens { font-size:14px;font-weight:700;padding:5px 14px;border-radius:20px;display:inline-block;margin-bottom:10px; }
.plus  .vts-af-lens { background:rgba(96,165,250,.2); color:#93c5fd; }
.minus .vts-af-lens { background:rgba(52,211,153,.2); color:#6ee7b7; }
.vts-af-letter { font-size:80px;font-weight:900;line-height:1; }
.vts-af-prompt { color:rgba(255,255,255,.45);font-size:13px;margin-top:10px; }
.vts-af-stats { font-size:14px;color:rgba(255,255,255,.5);margin-top:12px; }

/* Hart chart */
.vts-hart-wrap { max-width:680px;margin:0 auto;color:#fff; }
#hart-grid { display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:14px 0; }
.hart-cell { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:9px 4px;cursor:pointer;text-align:center;font-family:monospace;font-weight:700;border-radius:5px;transition:.1s; }
.hart-cell:hover { background:rgba(255,255,255,.15); }
.hart-cell.hl { transform:scale(1.5);z-index:1;background:var(--blue);border-color:var(--blue); }

/* Near-far */
.vts-nf-wrap { max-width:480px;margin:0 auto;text-align:center;color:#fff; }
.vts-nf-inst { font-size:18px;font-weight:700;margin-bottom:20px; }
#nf-dot { width:48px;height:48px;border-radius:50%;background:var(--blue);margin:0 auto 24px;transition:transform .4s,box-shadow .4s;box-shadow:0 0 20px rgba(37,99,235,.6); }
#nf-dot.far { transform:scale(.4);box-shadow:none; }

/* RG bar */
.vts-rg-wrap { max-width:780px;margin:0 auto;color:#fff; }
.vts-rg-note { background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:14px;color:#fcd34d; }
.vts-rg-arena { position:relative;width:100%;height:100px;overflow:hidden;background:#000;border-radius:12px;border:1px solid rgba(255,255,255,.07); }
.vts-rg-text { position:absolute;top:50%;left:0;white-space:nowrap;font-size:48px;font-weight:900;color:#fff;transform:translateY(-50%);will-change:transform; }
.vts-rg-stripes { position:absolute;inset:0;display:flex;z-index:2;pointer-events:none; }
.rg-stripe { flex:1; }
.rg-stripe:nth-child(odd)  { background:#ff0000;opacity:.7; }
.rg-stripe:nth-child(even) { background:#00ff00;opacity:.7; }

/* Dichoptic */
.vts-dicho-wrap { max-width:680px;margin:0 auto;text-align:center;color:#fff; }
.vts-dicho-display { background:rgba(255,255,255,.04);border-radius:16px;padding:32px 20px;margin:16px 0; }
.vts-dicho-word { min-height:80px;display:flex;align-items:center;justify-content:center; }
.vts-dicho-sub { color:rgba(255,255,255,.4);font-size:14px;margin-top:8px; }
.vts-dicho-choices { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px; }
.vts-dicho-btn { padding:12px 24px;background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.18);border-radius:var(--radius);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:.12s; }
.vts-dicho-btn:hover { background:rgba(255,255,255,.18); }
.vts-dicho-fb { min-height:22px;font-size:14px;margin-bottom:8px; }

/* Worth 4-dot */
.vts-w4d-wrap { max-width:580px;margin:0 auto;text-align:center;color:#fff; }
.vts-w4d-canvas { display:block;width:100%;height:280px;background:#111827;border-radius:12px;border:1px solid rgba(255,255,255,.07);margin-bottom:14px; }
.vts-w4d-choices { display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px; }
.vts-w4d-btn { padding:12px 20px;background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.18);border-radius:var(--radius);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.12s; }
.vts-w4d-btn:hover { background:rgba(255,255,255,.18); }
.vts-w4d-fb { min-height:22px;font-size:14px;margin-bottom:10px;color:rgba(255,255,255,.6); }
.vts-w4d-key { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12px;margin-top:6px; }
.w4d-ok { color:#4ade80; } .w4d-warn { color:#fbbf24; } .w4d-bad { color:#f87171; }

/* Contrast */
.vts-contrast-wrap { max-width:680px;margin:0 auto;color:#fff; }
.vts-contrast-canvas { display:block;width:100%;height:260px;border-radius:12px;background:#111;border:1px solid rgba(255,255,255,.07);margin-bottom:14px;cursor:pointer; }
.vts-contrast-btns { display:flex;gap:12px;justify-content:center;margin-bottom:14px; }
.vts-contrast-info { font-size:13px;color:rgba(255,255,255,.45);text-align:center;margin-bottom:6px; }

/* RDS */
.vts-rds-wrap { max-width:680px;margin:0 auto;color:#fff; }
.vts-rds-canvas { display:block;width:100%;height:300px;cursor:crosshair;border-radius:12px;border:1px solid rgba(255,255,255,.07);margin-bottom:14px; }
.vts-rds-controls { display:flex;align-items:center;gap:16px;margin-bottom:12px; }
.vts-rds-fb { color:rgba(255,255,255,.5);font-size:13px; }

/* Aperture */
.vts-aperture-wrap { max-width:680px;margin:0 auto;color:#fff; }
.vts-aper-controls { display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0;color:rgba(255,255,255,.65); }
.vts-aper-fb { text-align:center;color:rgba(255,255,255,.45);font-size:13px; }

/* Diverge */
.vts-div-wrap { max-width:680px;margin:0 auto;color:#fff; }
.vts-div-controls { display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0;color:rgba(255,255,255,.65); }
.vts-div-fb { text-align:center;color:rgba(255,255,255,.45);font-size:14px;margin-bottom:10px; }

/* DEM */
.vts-dem-wrap { max-width:680px;margin:0 auto;color:#fff; }
#dem-grid { display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:14px 0; }
.dem-cell { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 4px;text-align:center;font-weight:700;font-size:16px;cursor:pointer;transition:.1s; }
.dem-cell:hover { background:rgba(255,255,255,.16); }
.dem-cell.done  { background:rgba(22,163,74,.4);border-color:#4ade80;cursor:default; }
.dem-cell.error { background:rgba(220,38,38,.5);border-color:#f87171; }
.vts-dem-stats { font-size:13px;color:rgba(255,255,255,.45);margin-bottom:8px; }
.vts-dem-complete { background:rgba(22,163,74,.15);border:1px solid #4ade80;border-radius:var(--radius);padding:14px;margin-top:10px;display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;font-size:14px; }

/* Marsden */
.vts-marsden-wrap { max-width:680px;margin:0 auto;color:#fff; }
.vts-marsden-canvas { display:block;width:100%;height:300px;background:#0d1117;border-radius:12px;border:1px solid rgba(255,255,255,.07);margin-bottom:14px; }

/* Fixation */
.vts-fix-wrap { max-width:680px;margin:0 auto;color:#fff;text-align:center; }

/* ── COMPLETION SCREEN ───────────────────────────────────────── */
.vts-complete-screen { min-height:100vh;background:var(--gray-50);display:flex;align-items:center;justify-content:center;padding:40px 20px; }
.vts-complete-card { background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:44px 40px;max-width:560px;width:100%;text-align:center; }
.vts-complete-emoji { font-size:64px;margin-bottom:18px; }
.vts-complete-h1 { font-family:var(--font-serif);font-size:30px;font-weight:400;color:var(--navy);margin-bottom:6px; }
.vts-complete-ex { font-size:14px;color:var(--blue);font-weight:700;margin-bottom:28px; }
.vts-complete-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-bottom:24px; }
.vts-cs { background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px 8px; }
.vts-cs-val { font-family:var(--font-serif);font-size:22px;color:var(--navy); }
.vts-cs-lbl { font-size:11px;color:var(--gray-500);margin-top:2px; }
.vts-pb-banner { background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-weight:800;padding:10px 20px;border-radius:var(--radius);margin-bottom:16px;font-size:15px; }
.vts-delta-chip { padding:7px 14px;border-radius:8px;font-size:13px;font-weight:700;margin-bottom:14px;display:inline-block; }
.delta-up   { background:var(--green-lt);color:var(--green); }
.delta-down { background:var(--red-lt);color:var(--red); }
.delta-same { background:var(--gray-100);color:var(--gray-600); }
.vts-lv-unlock { background:var(--purple-lt);border:1px solid #c4b5fd;border-radius:var(--radius);padding:14px;margin-bottom:16px;color:var(--purple);font-weight:700; }
.vts-complete-msg { color:var(--gray-600);font-size:14px;line-height:1.7;padding:14px;background:var(--gray-50);border-radius:var(--radius);text-align:left;margin-bottom:28px; }
.vts-complete-actions { display:flex;gap:12px;justify-content:center; }

/* ================================================================
   OPTOMETRIST PORTAL
   ================================================================ */
.vts-opto-app { display:flex;min-height:100vh;background:var(--gray-50); }

/* SIDEBAR */
.vts-sidebar {
  width:256px;background:var(--navy);color:var(--white);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  flex-shrink:0;overflow-y:auto;
}
.vts-sidebar-top { flex:1;padding:0; }
.vts-sidebar-brand { display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.07); }
.vts-sb-eye { font-size:26px; }
.vts-sb-clinic { font-weight:700;font-size:14px;line-height:1.2; }
.vts-sb-plan { font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;display:inline-block;margin-top:3px; }
.vts-sb-nav { padding:16px 12px; }
.vts-sb-link {
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);
  color:rgba(255,255,255,.6);text-decoration:none;font-size:13px;font-weight:600;
  margin-bottom:2px;transition:.15s;
}
.vts-sb-link svg { width:16px;height:16px;flex-shrink:0; }
.vts-sb-link:hover { background:rgba(255,255,255,.08);color:#fff; }
.vts-sb-link.active { background:var(--blue);color:#fff; }
.vts-sb-count { margin-left:auto;background:rgba(255,255,255,.2);padding:1px 7px;border-radius:10px;font-size:11px; }
.vts-sb-footer { padding:16px;border-top:1px solid rgba(255,255,255,.07); }
.vts-usage { margin-bottom:12px; }
.vts-usage-lbl { font-size:12px;color:rgba(255,255,255,.5);margin-bottom:6px; }
.vts-usage-bar { height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden; }
.vts-usage-fill { height:100%;background:var(--blue);border-radius:2px;transition:.3s; }
.vts-upgrade-link { font-size:12px;color:#fbbf24;font-weight:600;text-decoration:none;display:block;margin-top:6px; }
.vts-sb-logout { display:block;text-align:center;padding:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.45);text-decoration:none;font-size:13px;transition:.12s; }
.vts-sb-logout:hover { color:#fff;border-color:rgba(255,255,255,.3); }

/* MAIN */
.vts-opto-main { flex:1;min-width:0;overflow-y:auto; }
.vts-oview { display:none;padding:28px;max-width:1060px; }
.vts-oview.active { display:block; }
.vts-oview-hd { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px; }
.vts-oview-hd h1 { font-family:var(--font-serif);font-size:24px;font-weight:400;color:var(--navy);margin:0; }

/* Overview stats */
.vts-ov-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px; }
.vts-ovs { background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 16px;text-align:center;box-shadow:var(--shadow-sm); }
.vts-ovs-val { font-family:var(--font-serif);font-size:28px;color:var(--blue); }
.vts-ovs-lbl { font-size:12px;color:var(--gray-500);margin-top:4px; }

/* Activity */
.vts-ov-activity { padding:4px 0; }
.vts-act-row { display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--gray-100); }
.vts-act-row:last-child { border-bottom:none; }
.vts-act-av { width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0; }
.vts-act-info { flex:1; }
.vts-act-info strong { display:block;font-size:14px;color:var(--gray-900); }
.vts-act-info span { font-size:12px;color:var(--gray-500); }
.vts-act-right { display:flex;flex-direction:column;align-items:flex-end;gap:4px; }

/* Patients list */
.vts-patients-list { display:flex;flex-direction:column;gap:10px; }
.vts-pt-card { display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-sm);transition:.15s; }
.vts-pt-card:hover { box-shadow:var(--shadow);border-color:var(--blue-mid); }
.vts-pt-av { width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0; }
.vts-pt-info { flex:1;min-width:0; }
.vts-pt-name { font-weight:700;font-size:15px;color:var(--gray-900); }
.vts-pt-email { font-size:12px;color:var(--gray-500); }
.vts-pt-dx { font-size:12px;color:var(--blue);margin-top:2px;font-weight:600; }
.vts-pt-right { display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0; }
.vts-pt-stats { display:flex;gap:12px;font-size:12px;color:var(--gray-500); }
.vts-pt-actions { display:flex;gap:6px; }

/* Patient detail */
.vts-pt-detail { max-width:900px; }
.vts-pt-detail-hd { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:28px; }
.vts-pt-detail-identity { display:flex;align-items:center;gap:14px; }
.vts-pt-detail-av { width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px; }
.vts-pt-detail-identity h2 { font-family:var(--font-serif);font-size:22px;margin:0 0 4px; }
.vts-pt-detail-identity p  { font-size:13px;color:var(--gray-500);margin:0; }
.vts-pt-detail-hd-actions { display:flex;gap:10px;flex-wrap:wrap; }
.vts-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px; }
.vts-ci-row { display:flex;gap:12px;padding:10px 20px;border-bottom:1px solid var(--gray-100);font-size:14px; }
.vts-ci-row label { font-weight:600;color:var(--gray-500);width:120px;flex-shrink:0; }
.vts-tbl-wrap { overflow-x:auto; }
.vts-tbl { width:100%;border-collapse:collapse;font-size:13px; }
.vts-tbl th { background:var(--gray-50);padding:10px 14px;text-align:left;font-weight:700;color:var(--gray-700);border-bottom:2px solid var(--gray-200); }
.vts-tbl td { padding:10px 14px;border-bottom:1px solid var(--gray-100); }
.vts-tbl tr:last-child td { border-bottom:none; }
.vts-trend-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:16px 20px; }
.vts-trend-item h4 { font-size:12px;color:var(--gray-500);margin:0 0 8px; }

/* Settings */
.vts-settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.vts-current-plan { border-radius:var(--radius);padding:16px;margin-bottom:16px;text-align:center; }
.vts-cp-name { font-family:var(--font-serif);font-size:22px;margin-bottom:4px; }
.vts-cp-detail { font-size:13px;color:var(--gray-500); }
.plan-free .vts-current-plan   { background:var(--gray-50);border:2px solid var(--gray-200); }
.plan-starter .vts-current-plan { background:var(--blue-light);border:2px solid var(--blue-mid); }
.plan-pro .vts-current-plan    { background:var(--purple-lt);border:2px solid #c4b5fd; }
.vts-plan-cards { display:grid;grid-template-columns:1fr;gap:8px; }
.vts-pc { border:2px solid var(--gray-200);border-radius:var(--radius);padding:12px 14px;transition:.12s; }
.vts-pc.current { border-color:var(--blue);background:var(--blue-light); }
.vts-pc-name  { font-weight:800;font-size:14px;color:var(--gray-900); }
.vts-pc-price { font-size:13px;color:var(--blue);font-weight:700;margin-bottom:4px; }
.vts-pc-features { font-size:12px;color:var(--gray-500);display:flex;flex-direction:column;gap:2px;margin-bottom:8px; }
.vts-pc-current { font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-light);display:inline-block;padding:2px 8px;border-radius:10px; }

/* MODALS */
.vts-modal[hidden] { display:none !important; }
.vts-modal { position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px; }
.vts-modal-bg { position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px); }
.vts-modal-box { position:relative;z-index:1;background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:28px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto; }
.vts-modal-wide { max-width:760px; }
.vts-modal-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:22px; }
.vts-modal-hd h3 { font-family:var(--font-serif);font-size:20px;font-weight:400;margin:0;color:var(--navy); }
.vts-modal-x { background:none;border:none;font-size:18px;cursor:pointer;color:var(--gray-500);padding:4px 8px;border-radius:6px;line-height:1; }
.vts-modal-x:hover { background:var(--gray-100); }
.vts-modal-note { font-size:13px;color:var(--gray-500);margin-bottom:16px; }
.vts-modal-actions { display:flex;gap:10px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--gray-100);margin-top:16px; }

/* Prescribe grid */
.vts-rx-grid { max-height:400px;overflow-y:auto;border:1px solid var(--gray-200);border-radius:var(--radius);padding:8px; }
.vts-rx-row { display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;gap:12px;transition:.1s; }
.vts-rx-row:hover { background:var(--gray-50); }
.vts-rx-check { display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer; }
.vts-rx-check input[type=checkbox] { width:16px;height:16px;accent-color:var(--blue);flex-shrink:0; }
.vts-rx-emoji { font-size:18px; }
.vts-rx-info strong { display:block;font-size:13px;color:var(--gray-900); }
.vts-rx-info small  { font-size:11px;color:var(--gray-500); }
.vts-rx-opts { display:flex;gap:8px; }
.vts-rx-opts select { padding:5px 8px;font-size:12px;border:1px solid var(--gray-300);border-radius:6px; }

/* ================================================================
   LANDING PAGE
   ================================================================ */
.vts-landing { font-family:var(--font-sans);background:var(--white);color:var(--gray-700); }
.vts-landing * { box-sizing:border-box; }
.vl-section-inner { max-width:1080px;margin:0 auto;padding:80px 24px; }
.vl-section-label { font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:12px; }
.vl-section-title { font-family:var(--font-serif);font-size:36px;font-weight:400;color:var(--navy);line-height:1.2;margin-bottom:12px; }
.vl-section-sub { font-size:16px;color:var(--gray-500);max-width:600px;line-height:1.65; }

/* Hero */
.vl-hero { position:relative;background:var(--navy);padding:0;overflow:hidden; }
.vl-hero-bg { position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(37,99,235,.35),transparent);pointer-events:none; }
.vl-hero-inner { max-width:1080px;margin:0 auto;padding:100px 24px 90px;position:relative;z-index:1; }
.vl-hero-eyebrow { font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px; }
.vl-hero-title { font-family:var(--font-serif);font-size:clamp(36px,5vw,60px);font-weight:400;color:#fff;line-height:1.15;margin-bottom:18px; }
.vl-hero-title em { color:#93c5fd;font-style:italic; }
.vl-hero-sub { font-size:17px;color:rgba(255,255,255,.65);max-width:560px;line-height:1.7;margin-bottom:36px; }
.vl-hero-ctas { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px; }
.vl-btn-primary { display:inline-flex;align-items:center;padding:13px 26px;background:var(--blue);color:#fff;border-radius:var(--radius);font-weight:700;font-size:15px;text-decoration:none;transition:.15s;box-shadow:0 4px 16px rgba(37,99,235,.4); }
.vl-btn-primary:hover { background:#1d4ed8;color:#fff;transform:translateY(-1px); }
.vl-btn-ghost { display:inline-flex;align-items:center;padding:13px 22px;background:transparent;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.25);border-radius:var(--radius);font-weight:600;font-size:15px;text-decoration:none;transition:.15s; }
.vl-btn-ghost:hover { color:#fff;border-color:rgba(255,255,255,.6); }
.vl-btn-outline { display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;background:transparent;color:var(--navy);border:2px solid var(--gray-300);border-radius:var(--radius);font-weight:600;font-size:15px;text-decoration:none;transition:.15s;width:100%; }
.vl-btn-outline:hover { border-color:var(--blue);color:var(--blue); }
.vl-btn-lg { padding:16px 36px;font-size:16px; }
.vl-hero-proof { display:flex;gap:20px;flex-wrap:wrap; }
.vl-hero-proof span { font-size:13px;color:rgba(255,255,255,.5);font-weight:600; }

/* Plans */
.vl-plans { background:var(--gray-50);border-top:1px solid var(--gray-100); }
.vl-plans-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px; }
.vl-plan-card { background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius-xl);padding:28px;position:relative;transition:.15s; }
.vl-plan-card.popular { border-color:var(--blue);transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.vl-plan-popular { position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:800;padding:4px 14px;border-radius:20px;white-space:nowrap; }
.vl-plan-name  { font-weight:800;font-size:15px;color:var(--navy);margin-bottom:6px; }
.vl-plan-price { font-family:var(--font-serif);font-size:34px;color:var(--navy);margin-bottom:2px; }
.vl-plan-price span { font-family:var(--font-sans);font-size:14px;color:var(--gray-500);font-weight:400; }
.vl-plan-patients { font-size:13px;color:var(--blue);font-weight:700;margin-bottom:16px; }
.vl-plan-features { list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px; }
.vl-plan-features li { font-size:13px;color:var(--gray-700); }

/* Conditions */
.vl-conditions-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px; }
.vl-condition-card { background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;transition:.12s; }
.vl-condition-card:hover { box-shadow:var(--shadow);border-color:var(--blue-mid); }
.vl-condition-abbr { font-family:var(--font-serif);font-size:28px;color:var(--blue);margin-bottom:8px; }
.vl-condition-card h3 { font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px; }
.vl-condition-card p  { font-size:13px;color:var(--gray-600);line-height:1.6;margin-bottom:10px; }
.vl-condition-exercises { font-size:12px;color:var(--gray-500);line-height:1.8; }

/* Exercise library */
.vl-exercises { background:var(--gray-50); }
.vl-ex-filter { display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 24px; }
.vl-filter-btn { padding:7px 16px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:.12s;color:var(--gray-600); }
.vl-filter-btn:hover,.vl-filter-btn.active { background:var(--blue);border-color:var(--blue);color:#fff; }
.vl-ex-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px; }
.vl-ex-card { background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:22px;transition:.12s; }
.vl-ex-card:hover { box-shadow:var(--shadow);border-color:var(--blue-mid); }
.vl-ex-card-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.vl-ex-emoji { font-size:28px; }
.vl-ex-tag { font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.3px;text-align:right; }
.vl-ex-card h3 { font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px; }
.vl-ex-card p  { font-size:13px;color:var(--gray-600);line-height:1.6;margin-bottom:14px; }
.vl-ex-levels { display:flex;flex-direction:column;gap:6px; }
.vl-ex-level { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray-600); }
.vl-lv-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.vl-lv-dot.lv-1 { background:#16a34a; }
.vl-lv-dot.lv-2 { background:var(--blue); }
.vl-lv-dot.lv-3 { background:var(--purple); }

/* How it works */
.vl-how { background:var(--white); }
.vl-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px; }
.vl-step { text-align:center; }
.vl-step-num { width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:22px;margin:0 auto 16px; }
.vl-step h3 { font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px; }
.vl-step p  { font-size:13px;color:var(--gray-600);line-height:1.65; }

/* CTA footer */
.vl-cta-footer { background:var(--navy); }
.vl-cta-inner { text-align:center; }
.vl-cta-inner h2 { font-family:var(--font-serif);font-size:34px;color:#fff;font-weight:400;margin-bottom:12px; }
.vl-cta-inner p  { color:rgba(255,255,255,.6);font-size:16px;margin-bottom:28px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px) {
  .vts-opto-app { flex-direction:column; }
  .vts-sidebar { width:100%;height:auto;position:relative; }
  .vts-sb-nav { display:flex;padding:8px 12px;gap:4px;overflow-x:auto; }
  .vts-sb-link { white-space:nowrap; }
  .vts-sb-footer { display:none; }
  .vts-ov-stats,.vts-kpi-row { grid-template-columns:1fr 1fr; }
  .vts-detail-grid,.vts-settings-grid { grid-template-columns:1fr; }
  .vts-oview { padding:16px; }
  .vl-plans-grid { grid-template-columns:1fr; }
  .vl-conditions-grid { grid-template-columns:1fr 1fr; }
  .vl-steps { grid-template-columns:1fr 1fr; }
  .vl-plan-card.popular { transform:none; }
}
@media (max-width:600px) {
  .vts-greeting-row { flex-direction:column; }
  .vts-row2 { grid-template-columns:1fr; }
  .vts-complete-actions { flex-direction:column; }
  .vts-jump-targets { flex-direction:column;align-items:center; }
  .vts-settings-grid { grid-template-columns:1fr; }
  .vl-conditions-grid { grid-template-columns:1fr; }
  .vl-steps { grid-template-columns:1fr; }
  .vl-hero-ctas { flex-direction:column; }
  #hart-grid { grid-template-columns:repeat(5,1fr); }
}

/* ── FIX 1: Waiting screen invite recovery box ─────────────── */
.vts-np-inner { max-width:480px !important; text-align:left !important; }
.vts-np-inner h2 { text-align:center; }
.vts-np-inner .vts-np-icon { text-align:center; }
.vts-np-invite-box {
    background:var(--gray-50);
    border:1.5px solid var(--gray-200);
    border-radius:12px;
    padding:20px;
    margin:20px 0;
}
.vts-invite-error {
    background:#fef2f2;
    border:1px solid #fca5a5;
    border-radius:8px;
    padding:12px 16px;
    color:#dc2626;
    font-size:13px;
    margin-bottom:14px;
}
/* ── FIX 2: Forgot password link styling ───────────────────── */
.vts-forgot-link {
    display:block;
    text-align:center;
    font-size:12px;
    color:var(--gray-400);
    margin-top:10px;
    text-decoration:none;
}
.vts-forgot-link:hover { color:var(--blue); }