*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0D1B3D;--navy2:#1E3A8A;--teal:#0BA7A0;--teal-lt:#e4f7f3;--teal-md:#b2e8de;
  --gold:#c9a84c;--gold-lt:#fdf6e3;--gold-md:#f0d88a;
  --text:#1a1a1a;--muted:#6B7280;--border:#e2e6ea;--surface:#f8f9fb;--white:#fff;
  --red:#dc2626;--red-lt:#fef2f2;--green:#16a34a;--green-lt:#dcfce7;
  --radius:8px;
}
body{font-family:'Sora',system-ui,sans-serif;background:#f0f2f5;color:var(--text);min-height:100vh}

/* ── TOPBAR ── */
.topbar{background:var(--navy);height:52px;display:flex;align-items:center;padding:0 1.5rem;gap:12px;position:sticky;top:0;z-index:50}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo-mark{width:30px;height:30px;background:var(--teal);border-radius:7px;display:flex;align-items:center;justify-content:center}
.logo-mark img{width:20px;height:auto}
.logo-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}
.logo-name span{color:var(--teal)}
.logo-module{font-size:12px;color:rgba(255,255,255,.45);margin-left:2px;font-weight:400}
.top-space{flex:1}
.top-user{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.6)}
.top-avatar{width:30px;height:30px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0}
.top-company{font-size:11px;color:rgba(255,255,255,.4)}
.top-signout{background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.6);font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer;font-family:'Sora',system-ui,sans-serif}
.top-signout:hover{background:rgba(255,255,255,.18);color:#fff}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:#f0f2f5}
.login-card{background:var(--white);border-radius:16px;border:0.5px solid var(--border);padding:2.5rem;width:100%;max-width:380px}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:.5rem}
.login-logo .mark{width:42px;height:42px;background:var(--navy);border-radius:10px;display:flex;align-items:center;justify-content:center}
.login-logo .mark img{width:28px;height:auto}
.login-logo .name{font-size:24px;font-weight:700;color:var(--navy)}
.login-logo .name span{color:var(--teal)}
.login-tagline{font-size:12px;color:var(--muted);margin-bottom:2rem;letter-spacing:.03em}
.login-module{font-size:13px;font-weight:500;color:var(--navy);margin-bottom:1.5rem;padding:.75rem 1rem;background:var(--teal-lt);border-radius:var(--radius);border-left:3px solid var(--teal)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.field input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--white);font-family:'Sora',system-ui,sans-serif;transition:border-color .12s}
.field input:focus{outline:none;border-color:var(--teal)}
.login-btn{width:100%;padding:11px;background:var(--navy);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:'Sora',system-ui,sans-serif;margin-top:.5rem;transition:background .12s}
.login-btn:hover{background:var(--navy2)}
.login-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
.login-err{font-size:13px;color:var(--red);background:var(--red-lt);border:0.5px solid #fca5a5;border-radius:var(--radius);padding:9px 12px;margin-bottom:1rem;display:none}
.login-footer{text-align:center;font-size:11px;color:var(--muted);margin-top:1.5rem}
.login-footer span{color:var(--teal);font-weight:600}

/* ── LAYOUT ── */
.app{display:none}
.page{max-width:1200px;margin:0 auto;padding:1.5rem}

/* ── CARDS ── */
.card{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:1rem}

/* ── WELCOME BAR ── */
.welcome-bar{background:var(--navy);border-radius:12px;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem}
.welcome-left h2{font-size:18px;font-weight:600;color:#fff;margin-bottom:3px}
.welcome-left p{font-size:13px;color:rgba(255,255,255,.5)}
.welcome-stats{display:flex;gap:1rem}
.welcome-stat{text-align:center}
.welcome-stat-num{font-size:22px;font-weight:700;color:var(--teal)}
.welcome-stat-label{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em}

/* ── TABS ── */
.tab-bar{display:flex;gap:4px;background:var(--surface);border-radius:10px;padding:4px;margin-bottom:1.25rem}
.tab-btn{flex:1;padding:8px;border:none;background:transparent;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;font-family:'Sora',system-ui,sans-serif;transition:all .12s}
.tab-btn.active{background:var(--white);color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── TRAINING MODULES ── */
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.module-grid{grid-template-columns:1fr}}
.module-card{border:1.5px solid var(--border);border-radius:12px;padding:1.25rem;background:var(--white);cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.module-card:hover{border-color:var(--teal);box-shadow:0 2px 8px rgba(11,167,160,.1)}
.module-card.completed{border-color:var(--teal);background:var(--teal-lt)}
.module-card.locked{opacity:.5;cursor:not-allowed}
.module-status{position:absolute;top:12px;right:12px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.module-status.done{background:var(--green-lt);color:var(--green)}
.module-status.todo{background:var(--surface);color:var(--muted);border:0.5px solid var(--border)}
.module-status.required{background:var(--gold-lt);color:#92710a;border:0.5px solid var(--gold-md)}
.module-icon{font-size:28px;margin-bottom:.75rem}
.module-name{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px}
.module-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:.75rem}
.module-meta{display:flex;gap:8px;flex-wrap:wrap}
.module-tag{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500}
.module-tag.annual{background:var(--gold-lt);color:#92710a;border:0.5px solid var(--gold-md)}
.module-tag.hipaa{background:#f0e4ff;color:#7c3aed;border:0.5px solid #d8b4fe}
.module-tag.clinical{background:var(--teal-lt);color:#0a6b58;border:0.5px solid var(--teal-md)}
.module-tag.mins{background:var(--surface);color:var(--muted);border:0.5px solid var(--border)}

/* ── TRAINING VIEWER ── */
.training-viewer{display:none}
.training-header{display:flex;align-items:center;gap:12px;margin-bottom:1.25rem}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--white);color:var(--text);font-size:13px;cursor:pointer;font-family:'Sora',system-ui,sans-serif;font-weight:500}
.back-btn:hover{background:var(--surface)}
.training-progress{background:var(--surface);border-radius:12px;height:6px;margin-bottom:1.5rem;overflow:hidden}
.training-progress-bar{height:100%;background:var(--teal);border-radius:12px;transition:width .3s}
.section-card{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1rem}
.section-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:.5rem}
.section-title{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:.75rem}
.section-body{font-size:14px;color:var(--text);line-height:1.8}
.section-body ul{padding-left:1.25rem;margin:.5rem 0}
.section-body li{margin-bottom:.35rem}
.section-body strong{color:var(--navy)}
.key-points{background:var(--teal-lt);border:0.5px solid var(--teal-md);border-radius:var(--radius);padding:1rem 1.25rem;margin-top:1rem}
.key-points-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:.5rem}
.key-points ul{padding-left:1rem;font-size:13px;color:#0a6b58;line-height:1.7}

/* ── QUIZ ── */
.quiz-card{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1rem}
.quiz-q{font-size:15px;font-weight:500;color:var(--navy);margin-bottom:1rem;line-height:1.5}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-opt{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px;font-family:'Sora',system-ui,sans-serif;background:var(--white);text-align:left;color:var(--text);transition:all .12s;line-height:1.4}
.quiz-opt:hover:not(:disabled){border-color:var(--teal);background:var(--teal-lt)}
.quiz-opt.correct{border-color:var(--green);background:var(--green-lt);color:var(--green)}
.quiz-opt.wrong{border-color:var(--red);background:var(--red-lt);color:var(--red)}
.quiz-feedback{font-size:13px;padding:10px 12px;border-radius:var(--radius);margin-top:.75rem;display:none;line-height:1.5}
.quiz-feedback.correct{background:var(--green-lt);color:var(--green)}
.quiz-feedback.wrong{background:var(--red-lt);color:var(--red)}

/* ── ATTESTATION ── */
.attest-card{background:var(--navy);border-radius:12px;padding:1.5rem;color:#fff;margin-bottom:1rem}
.attest-title{font-size:15px;font-weight:600;margin-bottom:.75rem}
.attest-text{font-size:13px;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:1.25rem}
.attest-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:1rem;cursor:pointer}
.attest-check input{accent-color:var(--teal);width:16px;height:16px;flex-shrink:0;margin-top:2px;cursor:pointer}
.attest-check span{font-size:13px;color:rgba(255,255,255,.8);line-height:1.5}
.complete-btn{width:100%;padding:12px;background:var(--teal);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;color:#fff;cursor:pointer;font-family:'Sora',system-ui,sans-serif;transition:background .12s}
.complete-btn:hover:not(:disabled){background:#089478}
.complete-btn:disabled{background:rgba(255,255,255,.15);color:rgba(255,255,255,.4);cursor:not-allowed}

/* ── NAV ACTIONS ── */
.nav-actions{display:flex;gap:8px;justify-content:space-between;margin-top:1rem}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius);border:0.5px solid var(--border);background:var(--white);color:var(--text);font-size:13px;cursor:pointer;font-family:'Sora',system-ui,sans-serif;font-weight:500;transition:all .12s}
.btn:hover{background:var(--surface)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:#089478}

/* ── ADMIN VIEW ── */
.staff-table{width:100%;border-collapse:collapse;font-size:13px;min-width:1100px}
.staff-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--surface);border-bottom:0.5px solid var(--border)}
.staff-table td{padding:8px 12px;border-bottom:0.5px solid var(--border);vertical-align:middle}
.staff-table tr:last-child td{border-bottom:none}
.progress-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.progress-pill.all{background:var(--green-lt);color:var(--green)}
.progress-pill.some{background:var(--gold-lt);color:#92710a}
.progress-pill.none{background:var(--red-lt);color:var(--red)}
.module-dots{display:flex;gap:4px;flex-wrap:wrap}
.mdot{width:10px;height:10px;border-radius:50%}
.mdot.done{background:var(--teal)}
.mdot.todo{background:var(--border)}

/* ── STATUS BAR ── */
.status-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;font-weight:500}
.status-bar.loading{background:#fef9ec;color:#92710a;border:0.5px solid #f6e298}
.status-bar.ok{background:var(--teal-lt);color:#0a6b58;border:0.5px solid var(--teal-md)}
.status-bar.err{background:var(--red-lt);color:var(--red);border:0.5px solid #fca5a5}
.spinner{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

.callout{border-left:4px solid var(--teal);background:var(--teal-lt);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0;font-size:13px;color:#0a6b58;line-height:1.65}
.callout.warn{border-color:var(--gold);background:var(--gold-lt);color:#92710a}
.callout.danger{border-color:var(--red);background:var(--red-lt);color:var(--red)}
.section-body ul,.section-body ol{padding-left:1.25rem;margin:.5rem 0}
.section-body li{margin-bottom:.35rem;font-size:14px;line-height:1.7}
.section-body p{font-size:14px;line-height:1.75;margin-bottom:.75rem}
.section-body strong{color:var(--navy)}
.listen-bar{display:flex;align-items:center;gap:8px;background:var(--teal-lt);border:0.5px solid var(--teal-md);border-radius:var(--radius);padding:8px 12px;margin-bottom:1rem;flex-wrap:wrap}
.listen-btn{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.listen-btn.playing{background:var(--navy)}
.speed-btn{padding:4px 8px;border-radius:6px;border:0.5px solid var(--teal-md);background:var(--white);color:var(--teal);font-size:13px;font-weight:700;cursor:pointer}
.speed-label{font-size:12px;font-weight:700;color:var(--teal);min-width:28px;text-align:center}
.staff-table td:last-child{white-space:nowrap;min-width:420px}
.staff-table td:last-child .btn{white-space:nowrap;font-size:11px;padding:4px 8px}
/* ── MOBILE ── */
@media(max-width:768px){
  /* Page */
  .page{padding:1rem .75rem}
  
  /* Topbar */
  .topbar{padding:0 1rem;height:48px}
  .logo-name{font-size:15px}
  .top-user .top-company{display:none}
  .top-signout{font-size:11px;padding:4px 8px}

  /* Welcome bar */
  .welcome-bar{padding:1rem;flex-direction:column;gap:.5rem}
  .welcome-stats{gap:.75rem}
  .welcome-stat-num{font-size:18px}

  /* Tab bar */
  .tab-bar{gap:2px;padding:3px}
  .tab-btn{font-size:11px;padding:6px 4px}

  /* Module grid */
  .module-grid{grid-template-columns:1fr}
  .module-card{padding:1rem}

  /* Training viewer */
  .section-card{padding:1rem}
  .section-title{font-size:15px}
  .section-body{font-size:13px}
  .section-body li{font-size:13px}
  .callout{padding:10px 12px;font-size:12px}
  .listen-bar{gap:6px;padding:6px 10px}
  .listen-btn{font-size:11px;padding:5px 10px}

  /* Quiz */
  .quiz-card{padding:1rem}
  .quiz-opt{padding:9px 12px;font-size:13px}

  /* Nav actions */
  .nav-actions{flex-wrap:wrap;gap:6px}
  .btn{font-size:12px;padding:7px 12px}

  /* Login */
  .login-card{padding:1.5rem 1.25rem;margin:.5rem}

  /* Staff table */
  .staff-table{min-width:500px;font-size:12px}
  .staff-table th{font-size:9px;padding:6px 8px}
  .staff-table td{padding:7px 8px}
  .staff-table td:last-child{min-width:unset}
  
  /* Admin table */
  .progress-pill{font-size:10px;padding:2px 6px}
  .module-dots{gap:3px}
  .mdot{width:8px;height:8px}

  /* Card */
  .card{padding:1rem}
  .card-title{font-size:10px}

  /* Super admin cards */
  #companyCards{grid-template-columns:1fr}
  
  /* Drawer grids */
  #companyDrawer .grid-2{grid-template-columns:1fr}
  
  /* Attest card */
  .attest-card{padding:1rem}
}

@media(max-width:480px){
  .tab-btn{font-size:10px;padding:5px 3px}
  .welcome-bar h2{font-size:15px}
  .top-user #topName{font-size:12px}
  .top-avatar{width:26px;height:26px;font-size:10px}
}