/* ============================================================
   Vision Therapy Suite v3.0 — vts.css
   Professional clinical UI design system
   ============================================================ */

/* ─── RESET & VARIABLES ───────────────────────────────────── */
:root {
  --vts-blue:      #0066ff;
  --vts-blue-dark: #0052cc;
  --vts-blue-light:#e8f0ff;
  --vts-green:     #16a34a;
  --vts-red:       #dc2626;
  --vts-yellow:    #d97706;
  --vts-navy:      #0f172a;
  --vts-slate:     #1e293b;
  --vts-gray-900:  #111827;
  --vts-gray-700:  #374151;
  --vts-gray-500:  #6b7280;
  --vts-gray-300:  #d1d5db;
  --vts-gray-100:  #f3f4f6;
  --vts-gray-50:   #f9fafb;
  --vts-white:     #ffffff;
  --vts-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --vts-shadow:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --vts-shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --vts-radius-sm: 8px;
  --vts-radius:    12px;
  --vts-radius-lg: 18px;
  --sidebar-w:     260px;
}

.vts-app, .vts-app * { box-sizing: border-box; }
.vts-app { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5; color: var(--vts-gray-700); }
.vts-muted { color: var(--vts-gray-500); font-size: 13px; }

/* ─── AUTH SCREEN ─────────────────────────────────────────── */
.vts-auth-screen { display:flex; align-items:center; justify-content:center; min-height:60vh; padding:40px 16px; }
.vts-auth-card {
  background: var(--vts-white); border-radius: var(--vts-radius-lg);
  box-shadow: var(--vts-shadow-lg); padding: 40px 36px; width:100%; max-width:460px; text-align:center;
}
.vts-logo { font-size:22px; font-weight:800; color: var(--vts-navy); margin-bottom:20px; }
.vts-logo span { vertical-align: middle; margin-left: 8px; }
.vts-auth-card h2 { font-size:22px; font-weight:700; margin:0 0 8px; color: var(--vts-gray-900); }
.vts-auth-card p  { color: var(--vts-gray-500); margin-bottom:24px; }
.vts-invite-note  { background:#f0fdf4; border:1px solid #86efac; border-radius:8px; padding:10px 14px; color: var(--vts-green); font-size:13px; margin-bottom:16px; }
.vts-auth-tabs    { display:flex; background: var(--vts-gray-100); border-radius:8px; padding:3px; margin-bottom:20px; }
.vts-tab-btn      { flex:1; padding:8px; border:none; background:transparent; border-radius:6px; font-weight:600; cursor:pointer; color: var(--vts-gray-500); transition:.15s; }
.vts-tab-btn.active { background:var(--vts-white); color:var(--vts-blue); box-shadow:var(--vts-shadow-sm); }
.vts-tab-content  { display:none; }
.vts-tab-content.active { display:block; }
.vts-auth-optometrist-link { font-size:13px; color:var(--vts-gray-500); margin-top:20px; }

/* ─── FORMS ───────────────────────────────────────────────── */
.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 14px; margin-bottom:12px;
  border:1.5px solid var(--vts-gray-300); border-radius:var(--vts-radius-sm);
  font-size:14px; color:var(--vts-gray-900); background:var(--vts-white);
  transition: border-color .15s, box-shadow .15s;
}
.vts-app input:focus, .vts-app select:focus, .vts-app textarea:focus {
  outline:none; border-color:var(--vts-blue); box-shadow:0 0 0 3px rgba(0,102,255,.1);
}
.vts-field label  { display:block; font-weight:600; font-size:13px; color:var(--vts-gray-700); margin-bottom:5px; }
.vts-field        { margin-bottom:14px; }
.vts-form-row     { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vts-form-note    { font-size:12px; color:var(--vts-gray-500); margin:0 0 12px; }
.vts-form-msg     { font-size:13px; margin-top:8px; }
.vts-form-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:12px; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.vts-btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 20px; background:var(--vts-blue); color:#fff; border:none;
  border-radius:var(--vts-radius-sm); font-weight:600; font-size:14px; cursor:pointer;
  transition: background .15s, transform .1s; text-decoration:none;
}
.vts-btn-primary:hover { background:var(--vts-blue-dark); color:#fff; }
.vts-btn-primary:active { transform:scale(.98); }
.vts-btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; background:var(--vts-white); color:var(--vts-gray-700); border:1.5px solid var(--vts-gray-300); border-radius:var(--vts-radius-sm); font-weight:600; font-size:14px; cursor:pointer; transition:.15s; text-decoration:none; }
.vts-btn-secondary:hover { border-color:var(--vts-blue); color:var(--vts-blue); }
.vts-btn-sm { padding:6px 12px; font-size:12px; font-weight:600; border:1.5px solid var(--vts-gray-300); border-radius:6px; background:var(--vts-white); cursor:pointer; transition:.12s; white-space:nowrap; }
.vts-btn-sm:hover { border-color:var(--vts-blue); color:var(--vts-blue); }
.vts-btn-begin { display:block; width:100%; padding:14px; background:var(--vts-blue); color:#fff; border:none; border-radius:var(--vts-radius-sm); font-size:16px; font-weight:700; cursor:pointer; margin-top:24px; transition:.15s; }
.vts-btn-begin:hover { background:var(--vts-blue-dark); }
.vts-btn-done { padding:12px 28px; background:#16a34a; color:#fff; border:none; border-radius:var(--vts-radius-sm); font-size:15px; font-weight:700; cursor:pointer; transition:.15s; }
.vts-btn-done:hover { background:#15803d; }
.vts-btn-upgrade { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; border:none; border-radius:var(--vts-radius-sm); font-weight:700; font-size:14px; cursor:pointer; }
.vts-upgrade-link { font-size:12px; color:#f59e0b; text-decoration:none; font-weight:600; display:block; margin-top:6px; }

/* ─── NOTICE / BADGES ─────────────────────────────────────── */
.vts-notice { padding:14px 18px; border-radius:var(--vts-radius-sm); margin:16px 0; font-size:14px; }
.vts-notice-info  { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.vts-notice-error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.vts-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; background:var(--vts-blue); color:#fff; border-radius:10px; font-size:11px; font-weight:700; margin-left:6px; }
.vts-plan-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; }
.plan-free    { background:#f1f5f9; color:#64748b; }
.plan-starter { background:#eff6ff; color:#1d4ed8; }
.plan-pro     { background:#f5f3ff; color:#7c3aed; }
.plan-clinic  { background:#fff7ed; color:#c2410c; }
.vts-status-chip { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:capitalize; }
.status-active     { background:#dcfce7; color:#166534; }
.status-discharged { background:#f1f5f9; color:#64748b; }
.status-on-hold    { background:#fff7ed; color:#92400e; }
.vts-diff-badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; }
.diff-1 { background:#f0fdf4; color:#16a34a; }
.diff-2 { background:#fffbeb; color:#d97706; }
.diff-3 { background:#fef2f2; color:#dc2626; }

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

/* ─── PATIENT APP LAYOUT ─────────────────────────────────── */
.vts-topnav {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:var(--vts-navy); color:#fff; position:sticky; top:0; z-index:100;
}
.vts-topnav-brand { font-weight:800; font-size:16px; }
.vts-topnav-right { display:flex; align-items:center; gap:12px; }
.vts-streak-chip  { background:rgba(255,255,255,.12); padding:4px 10px; border-radius:20px; font-size:13px; font-weight:700; }
.vts-user-chip    { font-size:13px; color:rgba(255,255,255,.7); }
.vts-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:4px; }
.vts-logout:hover { color:#fff; border-color:rgba(255,255,255,.5); }

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

.vts-container { max-width:960px; margin:0 auto; padding:28px 20px 60px; }

/* Hero stats */
.vts-hero { background:linear-gradient(135deg,#0f2557,#0066ff); border-radius:var(--vts-radius-lg); padding:28px; color:#fff; margin-bottom:24px; }
.vts-hero-greeting h1 { font-size:22px; font-weight:800; margin:0 0 6px; }
.vts-diagnosis-chip { display:inline-block; background:rgba(255,255,255,.15); padding:4px 12px; border-radius:20px; font-size:13px; margin-top:4px; }
.vts-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
.vts-stat { background:rgba(255,255,255,.12); border-radius:10px; padding:14px 10px; text-align:center; }
.vts-stat-val { font-size:22px; font-weight:800; }
.vts-stat-lbl { font-size:11px; opacity:.75; margin-top:2px; }

.vts-section-title { font-size:16px; font-weight:700; color:var(--vts-gray-900); margin:28px 0 14px; padding-left:12px; border-left:4px solid var(--vts-blue); }

/* Exercise cards */
.vts-exercise-grid { display:flex; flex-direction:column; gap:10px; }
.vts-ex-card {
  display:flex; align-items:center; gap:14px;
  background:var(--vts-white); border:1px solid var(--vts-gray-300);
  border-radius:var(--vts-radius); padding:14px 16px;
  box-shadow:var(--vts-shadow-sm); transition:.15s;
}
.vts-ex-card:hover { box-shadow:var(--vts-shadow); border-color:var(--vts-blue); }
.vts-ex-card-icon  { font-size:28px; flex-shrink:0; width:44px; text-align:center; }
.vts-ex-card-body  { flex:1; min-width:0; }
.vts-ex-card-title { font-weight:700; font-size:15px; color:var(--vts-gray-900); }
.vts-ex-card-cat   { font-size:12px; color:var(--vts-blue); font-weight:600; margin-top:1px; }
.vts-ex-card-last, .vts-ex-card-new { font-size:12px; color:var(--vts-gray-500); margin-top:3px; }
.vts-ex-card-new   { color:var(--vts-green); font-weight:600; }
.vts-ex-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.vts-btn-start { padding:8px 18px; background:var(--vts-blue); color:#fff; border:none; border-radius:6px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.vts-btn-start:hover { background:var(--vts-blue-dark); }

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

/* Empty/loading states */
.vts-empty-state { text-align:center; padding:48px 20px; }
.vts-empty-icon  { font-size:48px; margin-bottom:12px; }
.vts-empty-state p { color:var(--vts-gray-500); }
.vts-loading-state { padding:32px; text-align:center; color:var(--vts-gray-500); }
.vts-loading-spinner { display:flex; flex-direction:column; align-items:center; padding:40px; gap:12px; }
.spinner { width:32px; height:32px; border:3px solid var(--vts-gray-300); border-top-color:var(--vts-blue); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── EXERCISE BRIEFING SCREEN ───────────────────────────── */
.vts-brief-screen { display:flex; align-items:flex-start; justify-content:center; padding:32px 20px 60px; background:var(--vts-gray-50); min-height:80vh; }
.vts-back-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:transparent; border:1.5px solid var(--vts-gray-300); border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; color:var(--vts-gray-500); margin-bottom:20px; }
.vts-back-btn:hover { border-color:var(--vts-blue); color:var(--vts-blue); }
.vts-brief-card { background:var(--vts-white); border-radius:var(--vts-radius-lg); box-shadow:var(--vts-shadow-lg); padding:36px; max-width:640px; width:100%; }
.vts-brief-icon { font-size:52px; margin-bottom:12px; }
.vts-brief-card h2 { font-size:24px; font-weight:800; margin:0 0 6px; color:var(--vts-gray-900); }
.vts-brief-category { font-size:13px; color:var(--vts-blue); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:18px; }
.vts-brief-why { background:var(--vts-blue-light); border-left:4px solid var(--vts-blue); border-radius:0 8px 8px 0; padding:14px 16px; margin-bottom:18px; font-size:14px; line-height:1.7; color:var(--vts-gray-700); }
.vts-brief-diff { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:14px; }
.vts-diff-desc { font-size:13px; color:var(--vts-gray-500); }
.vts-brief-instructions { background:var(--vts-gray-50); border-radius:var(--vts-radius-sm); padding:18px; font-size:14px; line-height:1.8; }
.vts-brief-instructions ol { margin:0; padding-left:20px; }
.vts-brief-instructions li { margin-bottom:6px; }

/* ─── ACTIVE EXERCISE SCREEN ─────────────────────────────── */
.vts-exercise-screen { display:flex; flex-direction:column; min-height:100vh; background:var(--vts-gray-900); }
.vts-ex-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; gap:10px; }
.vts-ex-topbar-left { display:flex; align-items:center; gap:12px; }
.vts-ex-topbar .vts-back-btn { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); margin-bottom:0; }
.vts-ex-topbar .vts-back-btn:hover { color:#fff; border-color:rgba(255,255,255,.5); }
.vts-ex-topbar-name { font-size:15px; font-weight:700; color:#fff; }
.vts-ex-topbar-right { display:flex; align-items:center; gap:10px; }
.vts-ex-stat-chip { background:rgba(255,255,255,.1); color:#fff; padding:6px 14px; border-radius:20px; font-size:14px; font-weight:700; }
.vts-ex-body { flex:1; padding:28px 20px; overflow-y:auto; }
.vts-ex-footer { padding:16px 20px; background:rgba(0,0,0,.2); border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:center; }
.vts-ex-live-tip { color:rgba(255,255,255,.6); font-size:13px; margin:0 0 16px; }

/* Pursuit container */
.vts-pursuit-wrap { max-width:900px; margin:0 auto; }
#pursuitContainer { position:relative; height:150px; border:2px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.04); overflow:hidden; margin-bottom:16px; }
#pursuitDot { width:30px; height:30px; background:radial-gradient(circle,#ff6b6b,#e74c3c); border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); box-shadow:0 0 12px rgba(231,76,60,.7); }
.vts-speed-row { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.6); font-size:13px; }
.vts-speed-row input[type=range] { flex:1; max-width:260px; }

/* Saccades */
.vts-saccade-wrap { max-width:800px; margin:0 auto; }
#saccadeArea { position:relative; height:220px; border:2px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.04); margin-bottom:12px; }
#saccadeBtn { width:56px; height:56px; border-radius:50%; background:#16a34a; color:#fff; border:none; font-weight:800; font-size:13px; cursor:pointer; box-shadow:0 0 16px rgba(22,163,74,.5); transition:.1s; }
#saccadeBtn:hover { background:#15803d; }
.vts-ex-reaction { color:rgba(255,255,255,.4); font-size:12px; margin-top:6px; }

/* Pencil push-up */
.vts-pushup-wrap { max-width:700px; margin:0 auto; color:#fff; }
.vts-npc-guide { background:rgba(255,255,255,.07); border-left:3px solid var(--vts-blue); padding:12px 16px; border-radius:0 8px 8px 0; margin-bottom:16px; font-size:13px; color:rgba(255,255,255,.7); line-height:1.6; }
#pushupArea { position:relative; height:240px; background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.1); border-radius:12px; margin-bottom:16px; overflow:hidden; }
#pencilImg { position:absolute; left:50%; bottom:10px; width:44px; transform:translateX(-50%) rotate(-90deg); transition:bottom .2s; }
#vts-npc-label { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.4); }
.vts-npc-controls { margin-bottom:14px; }
.vts-npc-slider-wrap label { color:rgba(255,255,255,.7); font-size:14px; }
#pushupRange { width:100%; margin-top:8px; }
.vts-npc-key { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; }
.npc-good { color:#4ade80; } .npc-ok { color:#fbbf24; } .npc-warn { color:#f87171; }
.vts-rep-row { display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.7); font-size:14px; }
.vts-rep-row #repBtn { border-color:rgba(255,255,255,.2); color:#fff; background:rgba(255,255,255,.08); }
.vts-npc-history { margin-top:12px; font-size:13px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.05); padding:10px 14px; border-radius:8px; }

/* Brock */
.vts-brock-wrap { max-width:700px; margin:0 auto; }
.vts-brock-tip { color:rgba(255,255,255,.6); font-size:13px; line-height:1.7; margin-bottom:12px; background:rgba(255,255,255,.05); padding:10px 14px; border-radius:8px; }
.vts-canvas-ex { display:block; width:100%; height:320px; border-radius:12px; background:#111827; border:1px solid rgba(255,255,255,.08); margin-bottom:14px; }
.vts-brock-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.vts-brock-btn { padding:10px 18px; border:2px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.07); font-weight:700; cursor:pointer; font-size:14px; }
.vts-brock-btn:hover { background:rgba(255,255,255,.15); }
.vts-brock-feedback { text-align:center; margin-top:12px; color:rgba(255,255,255,.5); font-size:13px; }

/* Jump vergence */
.vts-jump-wrap { max-width:700px; margin:0 auto; color:#fff; text-align:center; }
.vts-jump-display { display:flex; gap:24px; justify-content:center; margin:20px 0; }
.vts-jump-screen { background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.1); border-radius:12px; padding:28px 40px; text-align:center; transition:.3s; }
.vts-jump-screen.near-screen { border-color:var(--vts-blue); }
.vts-jump-target.near { font-size:48px; color:var(--vts-blue); }
.vts-jump-target.far  { font-size:28px; color:rgba(255,255,255,.6); }
.vts-jump-label { font-size:11px; color:rgba(255,255,255,.4); font-weight:700; margin-top:8px; letter-spacing:1px; }
.vts-jump-prompt { color:rgba(255,255,255,.6); margin-bottom:16px; font-size:14px; }
.vts-jump-count { margin-top:12px; color:rgba(255,255,255,.5); font-size:13px; }

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

/* Accommodative facility */
.vts-accfac-wrap { max-width:600px; margin:0 auto; color:#fff; text-align:center; }
.vts-accfac-prompt { padding:40px 20px; border-radius:12px; margin-bottom:20px; transition:.3s; }
.prompt-near { background:rgba(0,102,255,.2); border:2px solid var(--vts-blue); }
.prompt-far  { background:rgba(22,163,74,.15); border:2px solid #16a34a; }
.vts-accfac-label { font-size:13px; font-weight:800; letter-spacing:2px; opacity:.7; }
.vts-accfac-target { font-size:72px; font-weight:900; margin-top:8px; }
.vts-accfac-inst { color:rgba(255,255,255,.6); font-size:13px; margin-bottom:16px; line-height:1.6; }

/* Barrel */
.vts-barrel-wrap { max-width:700px; margin:0 auto; color:#fff; }
.vts-barrel-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0; color:rgba(255,255,255,.7); }
.vts-barrel-feedback { text-align:center; color:rgba(255,255,255,.5); font-size:13px; }

/* Reading saccades */
.vts-readsacc-wrap { max-width:700px; margin:0 auto; color:#fff; }
.vts-readsacc-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin:16px 0; }
.vts-rs-cell { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:10px 6px; text-align:center; font-weight:700; font-size:16px; }

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

/* Hart */
.vts-hart-wrap { max-width:700px; margin:0 auto; color:#fff; }
.vts-hart-tip { color:rgba(255,255,255,.6); font-size:13px; margin-bottom:12px; line-height:1.6; }
#hartChart { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin-bottom:14px; }
.hart-cell { background:rgba(255,255,255,.08); padding:8px 4px; cursor:pointer; text-align:center; font-family:monospace; font-weight:700; border-radius:4px; transition:.12s; border:1px solid transparent; }
.hart-cell:hover { background:rgba(255,255,255,.15); }
.hart-cell.large { transform:scale(1.6); z-index:1; background:var(--vts-blue); border-color:var(--vts-blue); }

/* Near-far */
.vts-nf-wrap { max-width:500px; margin:0 auto; text-align:center; color:#fff; }
.vts-nf-prompt-box { margin-bottom:16px; }
.vts-nf-instruction { font-size:18px; font-weight:700; color:#fff; }
#nfArea { width:44px; height:44px; border-radius:50%; background:var(--vts-blue); margin:20px auto; transition:transform .3s; box-shadow:0 0 20px rgba(0,102,255,.5); }
.nf-near { transform:scale(1.8); }
.nf-far  { transform:scale(.45); box-shadow:none; }
.vts-nf-tip { font-size:12px; color:rgba(255,255,255,.4); margin-top:14px; }

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

/* ─── COMPLETION SCREEN ──────────────────────────────────── */
.vts-complete-screen { display:flex; align-items:center; justify-content:center; padding:40px 20px; min-height:80vh; background:var(--vts-gray-50); }
.vts-complete-card { background:var(--vts-white); border-radius:var(--vts-radius-lg); box-shadow:var(--vts-shadow-lg); padding:40px 36px; max-width:540px; width:100%; text-align:center; }
.vts-complete-icon { font-size:60px; margin-bottom:16px; }
.vts-complete-title { font-size:28px; font-weight:800; color:var(--vts-gray-900); }
.vts-complete-ex-name { font-size:15px; color:var(--vts-blue); font-weight:700; margin-top:4px; margin-bottom:28px; }
.vts-complete-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:14px; margin-bottom:24px; }
.vts-cstat { background:var(--vts-gray-50); border:1px solid var(--vts-gray-300); border-radius:10px; padding:14px 8px; }
.vts-cstat-val { font-size:22px; font-weight:800; color:var(--vts-gray-900); }
.vts-cstat-lbl { font-size:11px; color:var(--vts-gray-500); margin-top:2px; }
.vts-pb-banner { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:800; padding:10px 20px; border-radius:8px; margin-bottom:16px; font-size:16px; }
.vts-pb-chip   { background:#f0fdf4; color:#16a34a; font-weight:700; padding:6px 14px; border-radius:6px; margin-bottom:12px; font-size:13px; }
.vts-down-chip { background:#fef2f2; color:#dc2626; font-weight:700; padding:6px 14px; border-radius:6px; margin-bottom:12px; font-size:13px; }
.vts-same-chip { background:#f1f5f9; color:#64748b; font-weight:600; padding:6px 14px; border-radius:6px; margin-bottom:12px; font-size:13px; }
.vts-complete-msg { color:var(--vts-gray-500); font-size:14px; line-height:1.7; margin-bottom:28px; padding:14px; background:var(--vts-gray-50); border-radius:8px; text-align:left; }
.vts-complete-actions { display:flex; gap:12px; justify-content:center; }

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

/* Sidebar */
.vts-sidebar { width:var(--sidebar-w); background:var(--vts-navy); color:#fff; display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.vts-sidebar-brand { display:flex; align-items:center; gap:12px; padding:24px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.vts-brand-icon { font-size:28px; }
.vts-brand-name { font-weight:800; font-size:15px; line-height:1.2; }
.vts-sidebar-nav { padding:16px 12px; flex:1; }
.vts-nav-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; color:rgba(255,255,255,.6); text-decoration:none; font-size:14px; font-weight:600; transition:.15s; margin-bottom:4px; }
.vts-nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.vts-nav-item.active { background:var(--vts-blue); color:#fff; }
.vts-sidebar-footer { padding:16px; border-top:1px solid rgba(255,255,255,.08); }
.vts-usage-bar { margin-bottom:12px; }
.vts-usage-label { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:6px; }
.vts-progress-bar { height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.vts-progress-fill { height:100%; background:var(--vts-blue); border-radius:2px; transition:.3s; }
.vts-logout-btn { display:block; text-align:center; padding:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:6px; color:rgba(255,255,255,.5); text-decoration:none; font-size:13px; transition:.15s; }
.vts-logout-btn:hover { color:#fff; border-color:rgba(255,255,255,.3); }

/* Main content */
.vts-opto-main { flex:1; min-width:0; overflow-y:auto; }
.vts-opto-view { display:none; padding:28px; max-width:1080px; }
.vts-opto-view.active { display:block; }
.vts-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.vts-page-header h2 { font-size:22px; font-weight:800; color:var(--vts-gray-900); margin:0; }

/* Overview stats */
.vts-overview-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vts-ostat { background:var(--vts-white); border:1px solid var(--vts-gray-300); border-radius:var(--vts-radius); padding:20px 16px; text-align:center; box-shadow:var(--vts-shadow-sm); }
.vts-ostat-val { font-size:28px; font-weight:800; color:var(--vts-blue); }
.vts-ostat-lbl { font-size:12px; color:var(--vts-gray-500); margin-top:4px; }

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

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

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

/* Settings */
.vts-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.vts-plan-current { background:var(--vts-gray-50); border-radius:8px; padding:16px; margin-bottom:16px; }
.vts-plan-name { font-size:18px; font-weight:800; margin-bottom:6px; }
.vts-plan-detail { font-size:13px; color:var(--vts-gray-500); }
.vts-plan-tiers { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.vts-tier-card { border:2px solid var(--vts-gray-300); border-radius:var(--vts-radius-sm); padding:14px; position:relative; transition:.15s; }
.vts-tier-card.current { border-color:var(--vts-blue); background:var(--vts-blue-light); }
.vts-tier-card:hover { border-color:var(--vts-blue); }
.vts-tier-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.vts-tier-name  { font-weight:800; font-size:14px; }
.vts-tier-price { font-size:13px; color:var(--vts-blue); font-weight:700; }
.vts-tier-patients { font-size:12px; color:var(--vts-gray-500); margin-bottom:3px; }
.vts-tier-feat  { font-size:11px; color:var(--vts-gray-500); margin-bottom:10px; }
.vts-tier-current-badge { display:inline-block; background:var(--vts-blue); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.vts-btn-tier { padding:5px 12px; background:var(--vts-white); border:1.5px solid var(--vts-blue); border-radius:6px; color:var(--vts-blue); font-weight:700; font-size:12px; cursor:pointer; }
.vts-btn-tier:hover { background:var(--vts-blue); color:#fff; }

/* ─── MODALS ──────────────────────────────────────────────── */
.vts-modal { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; }
.vts-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.vts-modal-box { position:relative; z-index:1; background:var(--vts-white); border-radius:var(--vts-radius-lg); box-shadow:var(--vts-shadow-lg); padding:28px; width:100%; max-width:540px; max-height:90vh; overflow-y:auto; }
.vts-modal-wide { max-width:740px; }
.vts-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.vts-modal-header h3 { font-size:18px; font-weight:800; margin:0; }
.vts-modal-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--vts-gray-500); padding:4px 8px; border-radius:4px; }
.vts-modal-close:hover { background:var(--vts-gray-100); }

/* Prescribe */
.vts-prescribe-grid { display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; border:1px solid var(--vts-gray-300); border-radius:var(--vts-radius-sm); padding:8px; }
.vts-prescribe-row  { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:6px; gap:12px; }
.vts-prescribe-row:hover { background:var(--vts-gray-50); }
.vts-prescribe-check { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.vts-prescribe-check input[type=checkbox] { width:16px; height:16px; accent-color:var(--vts-blue); flex-shrink:0; }
.vts-prescribe-check label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.vts-ex-icon-sm { font-size:18px; }
.vts-prescribe-check strong { display:block; font-size:13px; }
.vts-prescribe-check small  { font-size:11px; color:var(--vts-gray-500); }
.vts-prescribe-freq select { padding:4px 8px; font-size:12px; border:1px solid var(--vts-gray-300); border-radius:4px; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .vts-opto-app    { flex-direction:column; }
  .vts-sidebar     { width:100%; height:auto; position:relative; }
  .vts-sidebar-nav { display:flex; padding:8px 12px; overflow-x:auto; gap:4px; }
  .vts-nav-item    { white-space:nowrap; }
  .vts-sidebar-footer { display:none; }
  .vts-overview-stats { grid-template-columns:1fr 1fr; }
  .vts-detail-grid    { grid-template-columns:1fr; }
  .vts-settings-grid  { grid-template-columns:1fr; }
  .vts-opto-view      { padding:16px; }
}

@media (max-width: 640px) {
  .vts-stat-grid   { grid-template-columns:1fr 1fr; }
  .vts-form-row    { grid-template-columns:1fr; }
  .vts-plan-tiers  { grid-template-columns:1fr; }
  .vts-detail-actions { flex-direction:column; }
  .vts-ex-card     { flex-wrap:wrap; }
  .vts-patient-card { flex-wrap:wrap; }
  .vts-complete-actions { flex-direction:column; }
  #hartChart       { grid-template-columns:repeat(5,1fr); }
  .vts-brief-card  { padding:24px 18px; }
}

/* ─── NEW EXERCISE STYLES ─────────────────────────────────── */

/* Dichoptic */
.vts-dichoptic-wrap { max-width:700px; margin:0 auto; color:#fff; text-align:center; }
.vts-dichoptic-display { padding:30px 20px; background:rgba(0,0,0,.4); border-radius:12px; margin:16px 0; }
.vts-dichoptic-word { min-height:80px; display:flex; align-items:center; justify-content:center; }
.vts-dichoptic-sub { color:rgba(255,255,255,.5); font-size:14px; margin-top:10px; }
.vts-dichoptic-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,.1); border:2px solid rgba(255,255,255,.2); border-radius:8px; color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:.12s; }
.vts-dicho-btn:hover { background:rgba(255,255,255,.2); border-color:#fff; }
.vts-dichoptic-feedback { min-height:22px; font-size:14px; margin-bottom:8px; }
.vts-dichoptic-score { color:rgba(255,255,255,.5); font-size:13px; }

/* Contrast */
.vts-contrast-wrap { max-width:700px; 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,.08); margin-bottom:14px; }
.vts-contrast-btns { display:flex; gap:12px; justify-content:center; margin-bottom:14px; }
.vts-contrast-info { font-size:13px; color:rgba(255,255,255,.5); text-align:center; margin-bottom:8px; }
.vts-contrast-tip { font-size:12px; color:rgba(255,255,255,.3); text-align:center; }

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

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

/* MAF */
.vts-maf-wrap { max-width:500px; margin:0 auto; color:#fff; text-align:center; }
.vts-maf-display { padding:32px 20px; background:rgba(255,255,255,.05); border-radius:12px; margin:16px 0; }
.vts-maf-lens-label { font-size:16px; font-weight:700; padding:6px 16px; border-radius:20px; display:inline-block; margin-bottom:12px; background:rgba(0,102,255,.2); }
.vts-maf-target { font-size:80px; font-weight:900; line-height:1; }
.vts-maf-prompt { color:rgba(255,255,255,.5); font-size:13px; margin-top:10px; }
.vts-maf-stats { margin:14px 0; font-size:14px; }

/* Divergence */
.vts-diverge-wrap { max-width:700px; margin:0 auto; color:#fff; }
.vts-diverge-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0; color:rgba(255,255,255,.7); }
.vts-diverge-feedback { text-align:center; color:rgba(255,255,255,.5); font-size:14px; margin-bottom:10px; }

/* Worth 4-dot */
.vts-w4d-wrap { max-width:600px; margin:0 auto; color:#fff; text-align:center; }
.vts-w4d-canvas { display:block; width:100%; height:280px; margin-bottom:14px; background:#111827; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.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,.1); border:2px solid rgba(255,255,255,.2); border-radius:8px; color:#fff; font-weight:700; font-size:15px; cursor:pointer; transition:.12s; }
.vts-w4d-btn:hover { background:rgba(255,255,255,.2); }
.vts-w4d-feedback { min-height:22px; font-size:14px; color:rgba(255,255,255,.6); margin-bottom:10px; }
.vts-w4d-key { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size:12px; margin-top:8px; }
.w4d-normal { color:#4ade80; } .w4d-suppress { color:#fbbf24; } .w4d-diplopia { color:#f87171; }

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

/* Marsden */
.vts-marsden-wrap { max-width:700px; 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,.08); margin-bottom:14px; }

/* BAF */
.vts-baf-wrap { max-width:500px; margin:0 auto; color:#fff; text-align:center; }
.vts-baf-display { padding:32px 20px; background:rgba(255,255,255,.05); border-radius:12px; margin:16px 0; }
.vts-baf-lens-label { font-size:16px; font-weight:700; padding:6px 16px; border-radius:20px; display:inline-block; margin-bottom:12px; background:rgba(0,102,255,.2); }
.vts-baf-target { font-size:80px; font-weight:900; line-height:1; }
.vts-baf-instruction { color:rgba(255,255,255,.5); font-size:13px; margin-top:10px; }
.vts-baf-stats { margin:14px 0; font-size:14px; }