/* ═══════════════════════════════════════════════
   Corpistance — Complete Stylesheet
   Dark theme, professional corporate feel
═══════════════════════════════════════════════ */

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

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; background: #0f172a; color: #e2e8f0; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; outline: none; }
img  { max-width: 100%; }

/* ── Variables ── */
:root {
  --navy:     #1d4ed8;
  --navy-dk:  #1e3a8a;
  --navy-lt:  #dbeafe;
  --teal:     #0d9488;
  --teal-lt:  #ccfbf1;
  --grey-0:   #0f172a;
  --grey-1:   #1e293b;
  --grey-2:   #334155;
  --grey-3:   #475569;
  --grey-4:   #64748b;
  --grey-5:   #94a3b8;
  --grey-6:   #cbd5e1;
  --grey-7:   #e2e8f0;
  --white:    #ffffff;
  --green:    #16a34a;
  --green-lt: #dcfce7;
  --amber:    #d97706;
  --amber-lt: #fef3c7;
  --red:      #dc2626;
  --red-lt:   #fee2e2;
  --radius:   8px;
  --radius-lg:12px;
  --shadow:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg:0 10px 25px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; transition: all 0.15s;
  cursor: pointer; white-space: nowrap;
}
.btn-primary  { background: var(--navy); color: #fff; border: none; }
.btn-primary:hover  { background: #1e40af; transform: translateY(-1px); }
.btn-ghost    { background: transparent; color: var(--grey-5); border: 1px solid var(--grey-2); }
.btn-ghost:hover { border-color: var(--grey-4); color: var(--grey-7); }
.btn-outline  { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-outline:hover { background: var(--navy-lt); color: var(--navy-dk); }
.btn-danger   { background: rgba(220,38,38,0.1); color: var(--red); border: 1px solid rgba(220,38,38,0.3); }
.btn-lg   { padding: 11px 24px; font-size: 14px; }
.btn-xl   { padding: 14px 32px; font-size: 16px; }
.btn-sm   { padding: 5px 10px; font-size: 12px; }
.btn-block{ width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.badge        { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-green  { background: var(--green-lt); color: var(--green); }
.badge-blue   { background: var(--navy-lt); color: var(--navy); }
.badge-amber  { background: var(--amber-lt); color: var(--amber); }

.alert { padding: 12px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.alert-error  { background: var(--red-lt); color: var(--red); border: 1px solid rgba(220,38,38,0.3); }
.alert-success{ background: var(--green-lt); color: var(--green); border: 1px solid rgba(22,163,74,0.3); }

.card { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title  { font-size: 14px; font-weight: 600; color: var(--grey-7); }
.card-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey-4); margin-bottom: 10px; }

.form-group   { margin-bottom: 16px; }
.form-label   { display: block; font-size: 12px; font-weight: 600; color: var(--grey-5); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.form-input   { width: 100%; background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 9px 12px; font-size: 13px; color: var(--grey-7); transition: border-color 0.2s; }
.form-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29,78,216,0.15); }
.form-input::placeholder { color: var(--grey-4); }
.form-hint    { font-size: 11px; color: var(--grey-4); margin-top: 5px; }
.form-row-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input-wrap   { position: relative; }
.input-wrap .form-input { padding-right: 40px; }
.input-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--grey-4); font-size: 16px; }

.text-center { text-align: center; }
.text-accent { color: var(--navy); }
.bg-alt { background: var(--grey-1); }

.hidden { display: none !important; }

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--grey-1);
  border-bottom: 1px solid var(--grey-2);
  position: sticky; top: 0; z-index: 100;
}
.nav-brand, .brand-link { display: flex; align-items: center; gap: 8px; }
.brand-icon { width: 30px; height: 30px; background: var(--navy); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.brand-icon-sm { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--grey-7); }
.brand-accent { color: var(--navy); }
.nav-links { display: flex; gap: 24px; }
.nav-link { font-size: 13px; color: var(--grey-5); transition: color 0.15s; }
.nav-link:hover { color: var(--grey-7); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-hamburger { display: none; color: var(--grey-5); font-size: 20px; }
.nav-mobile { position: absolute; top: 57px; left: 0; right: 0; background: var(--grey-1); border-bottom: 1px solid var(--grey-2); z-index: 99; padding: 8px 0; }
.nav-mobile-link { display: block; padding: 10px 24px; font-size: 14px; color: var(--grey-5); }
.nav-mobile-link:hover { color: var(--grey-7); background: var(--grey-2); }
.nav-mobile-primary { color: var(--navy); font-weight: 600; }

/* ══════════════════════════════════════════════
   APP LAYOUT (sidebar + main)
══════════════════════════════════════════════ */
.app-layout { display: flex; height: calc(100vh - 0px); overflow: hidden; }

.sidebar {
  width: 220px; min-width: 220px;
  background: var(--grey-0);
  border-right: 1px solid var(--grey-2);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.sb-brand { padding: 14px 16px 12px; border-bottom: 1px solid var(--grey-2); }
.sb-brand-link { display: flex; align-items: center; gap: 8px; }
.sb-logo { width: 26px; height: 26px; background: var(--navy); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; }
.sb-name-wrap { display: flex; flex-direction: column; }
.sb-company { font-size: 12px; font-weight: 700; color: var(--grey-7); line-height: 1.2; }
.sb-portal  { font-size: 10px; color: var(--grey-4); }
.sb-nav { flex: 1; padding: 8px 0; }
.sb-section-label { padding: 10px 16px 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--grey-4); }
.sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 12.5px; color: var(--grey-5);
  transition: all 0.15s; cursor: pointer; position: relative;
}
.sb-item:hover { color: var(--grey-7); background: var(--grey-2); }
.sb-item.active { color: #fff; background: var(--navy); }
.sb-item.done   { color: var(--green); }
.sb-item.locked { opacity: 0.5; cursor: default; }
.sb-item i { font-size: 15px; }
.sb-lock    { margin-left: auto; font-size: 12px; color: var(--grey-4); }
.sb-check   { margin-left: auto; color: var(--green); font-size: 13px; }
.sb-badge   { margin-left: auto; background: var(--red); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.sb-footer  { padding: 12px 16px; border-top: 1px solid var(--grey-2); }
.sb-prog-label { font-size: 10px; color: var(--grey-5); margin-bottom: 6px; }
.sb-prog-track { height: 4px; background: var(--grey-2); border-radius: 4px; }
.sb-prog-fill  { height: 4px; background: var(--navy); border-radius: 4px; transition: width 0.5s ease; }
.sb-prog-text  { font-size: 10px; color: var(--grey-4); margin-top: 4px; }
.sb-upgrade-link { color: var(--amber); font-weight: 600; font-size: 11px; }

.app-main { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* ══════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════ */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--grey-2);
  background: var(--grey-0); position: sticky; top: 0; z-index: 10;
}
.topbar-greeting { font-size: 14px; color: var(--grey-7); }
.topbar-meta { display: flex; gap: 10px; align-items: center; }
.topbar-id   { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--grey-4); }
.topbar-plan { padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.plan-paid { background: rgba(29,78,216,0.15); color: #93c5fd; }
.plan-free { background: var(--grey-2); color: var(--grey-5); }

/* ══════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════ */
.module-pills { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--grey-2); overflow-x: auto; }
.mpill {
  padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--grey-2); color: var(--grey-4); white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.mpill-done   { background: var(--green-lt); color: var(--green); border-color: rgba(22,163,74,0.3); }
.mpill-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.mpill-locked { opacity: 0.4; }

.dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: 0; padding: 20px; gap: 16px; }

/* Progress card */
.prog-pct       { font-size: 20px; font-weight: 800; color: var(--grey-7); }
.prog-bar-wrap  { margin-bottom: 10px; }
.prog-bar-track { height: 6px; background: var(--grey-2); border-radius: 6px; margin-bottom: 6px; }
.prog-bar-fill  { height: 6px; background: var(--navy); border-radius: 6px; transition: width 0.8s ease; }
.prog-bar-label { font-size: 12px; color: var(--grey-5); }
.peer-note      { font-size: 12px; color: var(--teal); display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--teal-lt); border-radius: var(--radius); }

/* Module detail card */
.mod-detail-card {}
.mod-detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mod-detail-icon { font-size: 28px; }
.mod-detail-num  { font-size: 11px; color: var(--grey-4); }
.mod-detail-title{ font-size: 15px; font-weight: 700; color: var(--grey-7); }

/* Component rows */
.comp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.comp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--grey-2); border-radius: var(--radius);
  background: var(--grey-0);
}
.comp-done    { border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.05); }
.comp-current { border-color: rgba(29,78,216,0.4); background: rgba(29,78,216,0.08); }
.comp-locked  { opacity: 0.45; }
.comp-icon    { font-size: 15px; }
.comp-done .comp-icon { color: var(--green); }
.comp-current .comp-icon { color: var(--navy); }
.comp-label   { flex: 1; font-size: 12px; color: var(--grey-6); }
.comp-status  { font-size: 10px; font-weight: 600; color: var(--grey-4); }
.comp-done .comp-status { color: var(--green); }
.comp-current .comp-status { color: var(--navy); }

/* Graduation card */
.grad-card   { text-align: center; padding: 32px; }
.grad-icon   { font-size: 48px; margin-bottom: 12px; }
.grad-title  { font-size: 18px; font-weight: 700; color: var(--grey-7); margin-bottom: 8px; }
.grad-sub    { font-size: 13px; color: var(--grey-5); margin-bottom: 18px; }

/* ID Card widget */
.id-card-widget {}
.id-card-preview {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  border-radius: 10px; padding: 14px; margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.icp-top      { font-size: 8px; color: #93c5fd; letter-spacing: 0.5px; margin-bottom: 10px; }
.icp-avatar   { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.icp-name     { font-size: 13px; font-weight: 700; color: #fff; }
.icp-role     { font-size: 10px; color: #93c5fd; }
.icp-dept     { font-size: 9px; color: #60a5fa; }
.icp-id       { font-size: 9px; color: #60a5fa; margin-top: 6px; letter-spacing: 1px; }

/* Certificates */
.cert-item    { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-2); }
.cert-item:last-child { border-bottom: none; }
.cert-item-icon { font-size: 20px; }
.cert-item-info { flex: 1; }
.cert-item-title { font-size: 12px; font-weight: 600; color: var(--grey-7); }
.cert-item-code  { font-size: 10px; color: var(--grey-4); font-family: monospace; }
.cert-empty   { text-align: center; padding: 16px; color: var(--grey-4); font-size: 12px; }
.cert-empty i { font-size: 28px; display: block; margin-bottom: 6px; opacity: 0.4; }

/* Badges */
.badges-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-item  { font-size: 20px; padding: 4px; cursor: default; }

/* Upgrade prompt */
.upgrade-prompt-card { background: linear-gradient(135deg, rgba(29,78,216,0.15), rgba(29,78,216,0.05)); border: 1px solid rgba(29,78,216,0.3); }
.up-title  { font-size: 14px; font-weight: 700; color: var(--grey-7); margin-bottom: 6px; }
.up-price  { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.up-price span { font-size: 13px; font-weight: 400; color: var(--grey-5); }
.up-features { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 12px; color: var(--grey-5); }
.up-features i { color: var(--green); margin-right: 4px; }

/* Referral */
.referral-card {}
.referral-desc { font-size: 11px; color: var(--grey-5); margin-bottom: 8px; }
.referral-code { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--navy); background: rgba(29,78,216,0.1); border: 1px dashed var(--navy); padding: 8px 12px; border-radius: var(--radius); text-align: center; margin-bottom: 8px; letter-spacing: 2px; }
.referral-stats { font-size: 11px; color: var(--grey-5); text-align: center; margin-top: 6px; }

/* Toast */
.toast-msg { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--grey-1); border: 1px solid var(--navy); color: var(--grey-7); padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: 500; transition: transform 0.3s; z-index: 999; white-space: nowrap; }
.toast-msg.show { transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════
   MODULE PAGES
══════════════════════════════════════════════ */
.module-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--grey-2);
  background: var(--grey-0); position: sticky; top: 0; z-index: 10;
}
.mod-hdr-left { display: flex; flex-direction: column; gap: 4px; }
.back-link    { font-size: 12px; color: var(--grey-5); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.back-link:hover { color: var(--grey-7); }
.mod-hdr-title { font-size: 18px; font-weight: 700; color: var(--grey-7); }
.mod-hdr-meta  { font-size: 12px; color: var(--grey-5); }
.mod-hdr-comp  { color: var(--navy); font-weight: 600; }
.mod-progress-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.ring-pct { position: absolute; font-size: 11px; font-weight: 700; color: var(--grey-7); }

.module-body { padding: 20px; max-width: 820px; margin: 0 auto; }

/* Component sections */
.comp-section { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; transition: all 0.3s; }
.comp-locked-section { opacity: 0.5; pointer-events: none; }
.comp-section-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--grey-2); }
.comp-num { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comp-info { flex: 1; }
.comp-name { font-size: 14px; font-weight: 600; color: var(--grey-7); }
.comp-time { font-size: 11px; color: var(--grey-5); margin-top: 2px; }
.comp-badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.comp-badge-done   { background: var(--green-lt); color: var(--green); }
.comp-badge-locked { background: var(--grey-2); color: var(--grey-4); }
.comp-content { padding: 18px; }
.comp-intro   { font-size: 13px; color: var(--grey-5); margin-bottom: 16px; line-height: 1.6; }
.comp-done-banner { padding: 14px 18px; background: rgba(22,163,74,0.08); border-top: 1px solid rgba(22,163,74,0.2); color: var(--green); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Offer letter */
.offer-letter { background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; position: relative; }
.ol-header    { margin-bottom: 12px; }
.ol-company   { font-size: 14px; font-weight: 700; color: var(--grey-7); }
.ol-address   { font-size: 11px; color: var(--grey-5); }
.ol-date      { font-size: 12px; color: var(--grey-5); margin: 12px 0; }
.ol-to        { font-size: 13px; color: var(--grey-6); margin-bottom: 12px; }
.ol-body      { font-size: 13px; color: var(--grey-6); line-height: 1.8; }
.ol-body p    { margin-bottom: 10px; }
.ol-term      { background: rgba(29,78,216,0.15); color: #93c5fd; border-bottom: 1px dashed #93c5fd; cursor: pointer; padding: 0 2px; border-radius: 2px; transition: background 0.15s; }
.ol-term:hover { background: rgba(29,78,216,0.3); }
.term-popup   { position: fixed; bottom: 24px; right: 24px; width: 320px; background: var(--grey-1); border: 1px solid var(--navy); border-radius: var(--radius-lg); padding: 16px; z-index: 50; box-shadow: var(--shadow-lg); }
.term-popup-close { position: absolute; top: 10px; right: 10px; color: var(--grey-5); font-size: 16px; }
.term-popup-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.term-popup-body  { font-size: 12px; color: var(--grey-6); line-height: 1.6; }

/* Mini quiz */
.mini-quiz   { background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 14px; margin-top: 16px; }
.mq-title    { font-size: 12px; font-weight: 700; color: var(--grey-5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.mq-question { font-size: 13px; color: var(--grey-7); margin-bottom: 10px; }
.mq-options  { display: flex; flex-direction: column; gap: 6px; }
.mq-opt      { padding: 9px 12px; background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius); font-size: 12px; color: var(--grey-6); text-align: left; transition: all 0.15s; cursor: pointer; }
.mq-opt:hover   { border-color: var(--navy); color: var(--grey-7); }
.mq-correct  { border-color: var(--green) !important; background: var(--green-lt) !important; color: var(--green) !important; }
.mq-wrong    { border-color: var(--red)   !important; background: var(--red-lt)   !important; color: var(--red)   !important; }
.mq-result   { margin-top: 12px; padding: 10px 12px; background: var(--grey-1); border-radius: var(--radius); font-size: 12px; color: var(--grey-6); }

/* Document portal */
.doc-portal  { background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); overflow: hidden; }
.dp-header   { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--navy-dk); }
.dp-logo     { width: 28px; height: 28px; background: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--navy-dk); }
.dp-title    { font-size: 12px; font-weight: 600; color: #fff; }
.dp-user     { margin-left: auto; font-size: 10px; color: #93c5fd; font-family: monospace; }
.dp-progress-bar { height: 4px; background: var(--grey-2); }
.dp-prog-fill { height: 4px; background: var(--green); transition: width 0.4s ease; }
.dp-prog-text { padding: 6px 16px; font-size: 10px; color: var(--grey-5); border-bottom: 1px solid var(--grey-2); }
.doc-list    { padding: 8px 0; }
.doc-item    { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--grey-2); transition: background 0.15s; }
.doc-item.doc-done { background: rgba(22,163,74,0.05); }
.doc-icon    { width: 32px; height: 32px; background: var(--grey-1); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--grey-5); flex-shrink: 0; }
.doc-info    { flex: 1; }
.doc-name    { font-size: 12px; font-weight: 600; color: var(--grey-7); }
.doc-hint    { font-size: 10px; color: var(--grey-5); margin-top: 2px; }
.doc-upload-btn { padding: 5px 12px; background: var(--navy); color: #fff; border-radius: var(--radius); font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.doc-status-badge { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--amber); background: var(--amber-lt); padding: 4px 10px; border-radius: 12px; }

/* ID Card builder */
.idcard-builder   { display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-bottom: 14px; }
.avatar-grid      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.avatar-opt       { font-size: 22px; padding: 6px; border: 2px solid var(--grey-2); border-radius: var(--radius); cursor: pointer; text-align: center; transition: all 0.15s; }
.avatar-opt.selected, .avatar-opt:hover { border-color: var(--navy); background: rgba(29,78,216,0.1); }
.idcard-preview-wrap { display: flex; justify-content: center; }
.idcard-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Main quiz */
.quiz-container { background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 16px; }
.quiz-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--grey-5); }
.quiz-prog-track { flex: 1; height: 4px; background: var(--grey-2); border-radius: 4px; }
.quiz-prog-fill  { height: 4px; background: var(--navy); border-radius: 4px; transition: width 0.3s; }
.quiz-question   { font-size: 14px; font-weight: 600; color: var(--grey-7); margin-bottom: 14px; line-height: 1.5; }
.quiz-options    { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt        { padding: 10px 14px; background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius); font-size: 13px; color: var(--grey-6); text-align: left; transition: all 0.15s; cursor: pointer; }
.quiz-opt:hover  { border-color: var(--navy); color: var(--grey-7); }
.quiz-correct    { border-color: var(--green) !important; background: var(--green-lt) !important; color: var(--green) !important; }
.quiz-wrong      { border-color: var(--red) !important; background: var(--red-lt) !important; color: var(--red) !important; }
.quiz-nav        { display: flex; justify-content: space-between; margin-top: 16px; }
.quiz-result     { text-align: center; padding: 24px; background: var(--grey-0); border: 1px solid var(--grey-2); border-radius: var(--radius); }
.qr-score        { font-size: 48px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.qr-msg          { font-size: 14px; color: var(--grey-6); margin-bottom: 16px; }

/* ══════════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════════ */
.hero { padding: 56px 24px 40px; text-align: center; background: var(--grey-0); border-bottom: 1px solid var(--grey-2); }
.hero-inner { max-width: 640px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(29,78,216,0.12); border: 1px solid rgba(29,78,216,0.25); border-radius: 20px; font-size: 12px; color: #93c5fd; margin-bottom: 20px; }
.hero-h1    { font-size: 36px; font-weight: 800; line-height: 1.25; color: var(--grey-7); margin-bottom: 14px; }
.hero-sub   { font-size: 15px; color: var(--grey-5); margin-bottom: 28px; line-height: 1.6; }
.hero-btns  { display: flex; gap: 10px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; }
.stat       { text-align: center; padding: 0 24px; }
.stat-n     { display: block; font-size: 22px; font-weight: 800; color: var(--grey-7); }
.stat-l     { display: block; font-size: 11px; color: var(--grey-5); margin-top: 2px; }
.stat-div   { width: 1px; background: var(--grey-2); margin: 4px 0; }

.section { padding: 40px 24px; }
.section-inner { max-width: 680px; margin: 0 auto; }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--navy); margin-bottom: 8px; }
.section-h2    { font-size: 24px; font-weight: 700; color: var(--grey-7); margin-bottom: 10px; }
.section-sub   { font-size: 13px; color: var(--grey-5); margin-bottom: 24px; line-height: 1.6; }

/* Dashboard preview */
.preview-card { border: 1px solid var(--grey-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.preview-topbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--grey-1); border-bottom: 1px solid var(--grey-2); }
.preview-dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--grey-2); margin-right: 3px; }
.preview-dots span:nth-child(1) { background: #ff5f57; }
.preview-dots span:nth-child(2) { background: #febc2e; }
.preview-dots span:nth-child(3) { background: #28c840; }
.preview-title { flex: 1; font-size: 11px; color: var(--grey-5); text-align: center; }
.preview-plan  { font-size: 10px; color: var(--grey-5); padding: 2px 8px; border: 1px solid var(--grey-2); border-radius: 10px; }
.preview-shell { display: flex; height: 300px; background: var(--grey-0); }
.preview-sidebar { width: 160px; background: var(--grey-0); border-right: 1px solid var(--grey-2); padding: 10px 0; }
.ps-brand { display: flex; align-items: center; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--grey-2); margin-bottom: 6px; }
.ps-logo  { width: 20px; height: 20px; background: var(--navy); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.ps-brand span { font-size: 11px; font-weight: 600; color: var(--grey-7); }
.ps-item  { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 11px; color: var(--grey-5); }
.ps-item.active { background: var(--navy); color: #fff; }
.ps-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 8px; padding: 1px 4px; border-radius: 6px; }
.ps-footer { padding: 8px 12px; margin-top: auto; border-top: 1px solid var(--grey-2); }
.ps-prog-lbl { font-size: 9px; color: var(--grey-5); margin-bottom: 4px; }
.ps-prog-track { height: 3px; background: var(--grey-2); border-radius: 3px; }
.ps-prog-fill  { width: 60%; height: 3px; background: var(--navy); border-radius: 3px; }
.preview-main  { flex: 1; overflow: hidden; padding: 10px; }
.preview-mod-pills { display: flex; gap: 4px; margin-bottom: 10px; }
.pmp { padding: 3px 8px; border-radius: 10px; font-size: 10px; border: 1px solid var(--grey-2); color: var(--grey-5); }
.pmp.done   { background: var(--green-lt); color: var(--green); border-color: transparent; }
.pmp.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.preview-content-row { display: grid; grid-template-columns: 1fr 130px; gap: 8px; }
.preview-mod-card { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: 8px; padding: 10px; }
.pmc-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pmc-icon   { width: 22px; height: 22px; background: rgba(29,78,216,0.15); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #93c5fd; }
.pmc-title  { font-size: 10px; font-weight: 600; color: var(--grey-7); }
.pmc-items  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pmc-item   { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--grey-5); padding: 4px 6px; border-radius: 4px; }
.pmc-item i { font-size: 11px; }
.pmc-item.done { color: var(--green); }
.pmc-item.curr { color: #93c5fd; background: rgba(29,78,216,0.1); }
.pmc-item.lock { opacity: 0.4; }
.pmc-curr   { margin-left: auto; font-size: 9px; }
.pmc-btn    { width: 100%; padding: 5px; background: var(--navy); border: none; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 600; cursor: pointer; }
.preview-widgets { display: flex; flex-direction: column; gap: 6px; }
.pw-card    { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: 8px; padding: 8px; }
.pw-label   { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey-5); margin-bottom: 6px; }
.pw-idcard  { background: var(--navy-dk); border-radius: 5px; padding: 6px; }
.pwid-top   { font-size: 6px; color: #93c5fd; margin-bottom: 4px; }
.pwid-av    { width: 18px; height: 18px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.pwid-name  { font-size: 9px; font-weight: 600; color: #fff; }
.pwid-role  { font-size: 7px; color: #93c5fd; }
.pwid-id    { font-size: 7px; color: #60a5fa; margin-top: 3px; }
.pw-cert    { text-align: center; }
.pwc-icon   { font-size: 18px; margin-bottom: 2px; }
.pwc-text   { font-size: 8px; color: var(--grey-5); }

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.feat-card  { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 16px; }
.feat-icon  { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.feat-icon i { font-size: 18px; }
.feat-blue  { background: rgba(29,78,216,0.12); } .feat-blue i { color: #93c5fd; }
.feat-green { background: rgba(22,163,74,0.12); } .feat-green i { color: var(--green); }
.feat-purple{ background: rgba(124,58,237,0.12); }.feat-purple i { color: #a78bfa; }
.feat-amber { background: rgba(217,119,6,0.12); } .feat-amber i { color: var(--amber); }
.feat-title { font-size: 13px; font-weight: 600; color: var(--grey-7); margin-bottom: 4px; }
.feat-desc  { font-size: 11px; color: var(--grey-5); line-height: 1.5; }

/* 5 modules flow */
.modules-flow { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.mod-step   { flex: 1; min-width: 120px; background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 14px 10px; text-align: center; }
.mod-free   { border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.05); }
.mod-emoji  { font-size: 24px; margin-bottom: 6px; }
.mod-num    { font-size: 9px; color: var(--grey-5); text-transform: uppercase; letter-spacing: 0.5px; }
.mod-name   { font-size: 12px; font-weight: 600; color: var(--grey-7); margin: 4px 0; }
.mod-dur    { font-size: 10px; color: var(--grey-5); margin-bottom: 8px; }
.mod-items  { margin-bottom: 10px; }
.mod-item   { font-size: 10px; color: var(--grey-5); padding: 3px 0; border-bottom: 1px solid var(--grey-2); text-align: left; }
.mod-item:last-child { border-bottom: none; }
.mod-tag    { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.mod-tag-free { background: var(--green-lt); color: var(--green); }
.mod-tag-paid { background: var(--navy-lt); color: var(--navy); }
.mod-arrow  { color: var(--grey-3); font-size: 18px; margin-top: 40px; flex-shrink: 0; }

/* Docs grid */
.docs-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.doc-card   { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 14px; text-align: center; }
.doc-icon   { font-size: 28px; margin-bottom: 6px; }
.doc-name   { font-size: 12px; font-weight: 600; color: var(--grey-7); margin-bottom: 3px; }
.doc-type   { font-size: 10px; color: var(--grey-5); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 540px; margin: 0 auto 16px; }
.price-card   { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 22px; }
.price-card-featured { border: 2px solid var(--navy); }
.price-badge  { display: inline-block; background: rgba(29,78,216,0.12); color: #93c5fd; font-size: 10px; padding: 3px 10px; border-radius: 10px; margin-bottom: 10px; font-weight: 600; }
.price-plan   { font-size: 14px; font-weight: 600; color: var(--grey-7); margin-bottom: 4px; }
.price-amt    { font-size: 28px; font-weight: 800; color: var(--grey-7); margin-bottom: 4px; }
.price-sub    { font-size: 13px; font-weight: 400; color: var(--grey-5); }
.price-desc   { font-size: 12px; color: var(--grey-5); margin-bottom: 14px; }
.price-feats  { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.price-feats li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--grey-6); }
.price-feats i  { color: var(--green); font-size: 14px; }
.pricing-note { text-align: center; font-size: 11px; color: var(--grey-5); }

/* CTA section */
.cta-section { background: linear-gradient(135deg, rgba(29,78,216,0.12), rgba(29,78,216,0.04)); border-top: 1px solid rgba(29,78,216,0.2); }
.cta-h2   { font-size: 24px; font-weight: 700; color: var(--grey-7); margin-bottom: 10px; }
.cta-sub  { font-size: 14px; color: var(--grey-5); margin-bottom: 22px; }
.cta-note { font-size: 12px; color: var(--grey-5); margin-top: 12px; }

/* ══════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════ */
.auth-page { min-height: calc(100vh - 130px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-card { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 560px; }
.auth-card-sm { max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 22px; }
.auth-logo   { width: 48px; height: 48px; background: var(--navy); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; margin: 0 auto 12px; }
.auth-title  { font-size: 20px; font-weight: 700; color: var(--grey-7); margin-bottom: 6px; }
.auth-sub    { font-size: 13px; color: var(--grey-5); }
.auth-form   {}
.auth-terms  { font-size: 11px; color: var(--grey-5); text-align: center; margin-top: 12px; }
.auth-terms a { color: var(--navy); }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--grey-5); }
.auth-switch a { color: var(--navy); font-weight: 600; }

/* Industry grid */
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.industry-option input { display: none; }
.industry-card { border: 1px solid var(--grey-2); border-radius: var(--radius); padding: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
.industry-card:hover { border-color: var(--navy); }
.industry-card.selected { border-color: var(--navy); background: rgba(29,78,216,0.08); }
.industry-icon { font-size: 22px; display: block; margin-bottom: 4px; }
.industry-name { font-size: 12px; font-weight: 600; color: var(--grey-7); display: block; }
.industry-eg   { font-size: 10px; color: var(--grey-5); display: block; margin-top: 2px; }

/* ══════════════════════════════════════════════
   UPGRADE PAGE
══════════════════════════════════════════════ */
.upgrade-page { max-width: 560px; margin: 0 auto; padding: 32px 16px; }
.upgrade-heading { text-align: center; margin-bottom: 24px; }
.upgrade-h1 { font-size: 26px; font-weight: 800; color: var(--grey-7); margin-bottom: 8px; }
.upgrade-sub { font-size: 14px; color: var(--grey-5); }
.upgrade-card { background: var(--grey-1); border: 2px solid var(--navy); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.upgrade-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.upgrade-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--grey-6); }
.upgrade-feats i { color: var(--green); font-size: 16px; margin-top: 1px; }
.upgrade-price-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--grey-2); margin-top: 14px; }
.upgrade-price-label { font-size: 14px; color: var(--grey-6); }
.upgrade-price-val   { font-size: 24px; font-weight: 800; color: var(--grey-7); }

/* Verify page */
.verify-page { max-width: 520px; margin: 60px auto; padding: 0 16px; text-align: center; }
.verify-badge-valid   { font-size: 56px; margin-bottom: 16px; }
.verify-badge-invalid { font-size: 56px; margin-bottom: 16px; }
.verify-title { font-size: 22px; font-weight: 700; color: var(--grey-7); margin-bottom: 8px; }
.verify-sub   { font-size: 13px; color: var(--grey-5); margin-bottom: 20px; }
.verify-card  { background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); padding: 20px; text-align: left; margin-bottom: 16px; }
.verify-row   { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--grey-2); font-size: 13px; }
.verify-row:last-child { border-bottom: none; }
.verify-label { color: var(--grey-5); }
.verify-val   { color: var(--grey-7); font-weight: 600; }

/* Footer */
.footer { background: var(--grey-1); border-top: 1px solid var(--grey-2); padding: 20px 24px; }
.footer-inner { max-width: 680px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 12px; color: var(--grey-5); }
.footer-links a:hover { color: var(--grey-7); }
.footer-copy  { font-size: 11px; color: var(--grey-5); }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: block; }
  .app-layout { flex-direction: column; height: auto; }
  .sidebar { width: 100%; min-width: unset; height: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--grey-2); }
  .sb-brand, .sb-footer, .sb-section-label { display: none; }
  .sb-nav { display: flex; flex-direction: row; padding: 0; overflow-x: auto; }
  .sb-item { white-space: nowrap; padding: 10px 14px; border-right: 1px solid var(--grey-2); }
  .app-main { height: auto; }
  .dash-grid { grid-template-columns: 1fr; }
  .features-grid, .docs-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .hero-h1 { font-size: 26px; }
  .modules-flow { flex-direction: column; }
  .mod-arrow { transform: rotate(90deg); margin: 0 auto; }
  .idcard-builder { grid-template-columns: 1fr; }
  .preview-content-row { grid-template-columns: 1fr; }
  .preview-widgets { display: none; }
}

/* ── Replay Button (inside done banners) ── */
.replay-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px; padding: 3px 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px; color: inherit;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.replay-btn:hover { background: rgba(255,255,255,0.22); }
.replay-btn i { font-size: 12px; }

/* ── Sidebar sign out footer ── */
.sb-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--grey-2);
  margin-top: auto;
}
.sb-signout {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--grey-5); text-decoration: none;
}
.sb-signout:hover { background: rgba(220,38,38,0.08); color: var(--red); }
.sb-signout i { font-size: 16px; }