:root{
  --navy-950:#061327;
  --navy-900:#0A1B35;
  --navy-800:#102B52;
  --navy-700:#173F72;
  --gold-500:#D5AD36;
  --gold-400:#E4C25A;
  --gold-300:#F0D984;
  --ink:#10213A;
  --muted:#68758A;
  --line:#E5EAF1;
  --surface:#FFFFFF;
  --canvas:#F3F6FA;
  --success:#16865B;
  --danger:#B74242;
  --shadow-sm:0 8px 22px rgba(10,27,53,.08);
  --shadow-md:0 18px 45px rgba(7,22,44,.12);
  --shadow-lg:0 30px 90px rgba(3,14,32,.25);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-xl:36px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{max-width:100%;display:block}
.hidden{display:none!important}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold-400);font-size:.76rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
.brand{
  display:flex;align-items:center;gap:13px;
}
.brand-seal{
  width:58px;height:58px;border-radius:50%;object-fit:cover;
  background:white;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.brand-word{font-size:1.62rem;font-weight:850;letter-spacing:-.04em}
.brand-word .x{color:var(--gold-400)}
.brand-caption{font-size:.74rem;color:#8D9BB0;margin-top:1px}
.brand--light .brand-word{color:#fff}
.brand--light .brand-caption{color:#C9D3E2}

.btn{
  border:0;border-radius:14px;min-height:52px;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;transition:.22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:#101A2A;box-shadow:0 12px 28px rgba(213,173,54,.28);
}
.btn-primary:hover{box-shadow:0 18px 36px rgba(213,173,54,.34)}
.btn-dark{background:var(--navy-900);color:#fff}
.btn-ghost{background:#F5F7FA;color:var(--navy-800);border:1px solid var(--line)}
.btn-block{width:100%}
.btn-link{border:0;background:none;color:var(--navy-700);font-weight:800;padding:0}

.field{margin:0 0 17px}
.field label{
  display:block;margin:0 0 8px;font-size:.79rem;font-weight:800;
  letter-spacing:.02em;color:#33435B;
}
.input-wrap{position:relative}
.input{
  width:100%;height:54px;padding:0 16px;border:1px solid #DCE3EC;
  border-radius:14px;background:#FBFCFE;color:var(--ink);
  outline:none;transition:.2s ease;
}
.input:focus{border-color:#B9992D;box-shadow:0 0 0 4px rgba(213,173,54,.12);background:#fff}
.input::placeholder{color:#A0AABA}
.form-error{
  margin:10px 0 0;padding:11px 13px;border-radius:12px;
  background:#FFF1F1;color:var(--danger);font-size:.82rem;font-weight:650;
}
.form-note{font-size:.78rem;color:var(--muted);line-height:1.55}
.divider{display:flex;align-items:center;gap:13px;margin:21px 0;color:#98A3B3;font-size:.73rem;text-transform:uppercase;letter-spacing:.1em}
.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}

/* Auth experience */
.auth-shell{
  min-height:100vh;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%,rgba(41,91,151,.42),transparent 34%),
    radial-gradient(circle at 84% 75%,rgba(213,173,54,.19),transparent 29%),
    linear-gradient(135deg,#061327 0%,#0B1E3A 55%,#102C50 100%);
}
.auth-shell:before{
  content:"";position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.auth-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.auth-orb.one{width:410px;height:410px;right:-110px;top:-150px;border:1px solid rgba(255,255,255,.14)}
.auth-orb.two{width:520px;height:520px;right:-90px;top:-70px;border:1px solid rgba(213,173,54,.14)}
.auth-orb.three{width:270px;height:270px;left:-140px;bottom:-110px;background:rgba(16,67,119,.25);filter:blur(25px)}
.auth-container{
  position:relative;z-index:2;min-height:100vh;max-width:1440px;margin:0 auto;
  padding:44px 62px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.74fr);
  gap:80px;align-items:center;
}
.auth-story{color:#fff;max-width:760px}
.auth-story h1{
  margin:24px 0 20px;font-size:clamp(3.35rem,6vw,6rem);
  line-height:.96;letter-spacing:-.065em;max-width:770px;
}
.auth-story h1 .gold{color:var(--gold-400)}
.auth-story p{
  color:#CDD6E3;font-size:1.13rem;line-height:1.65;max-width:650px;margin:0;
}
.auth-benefits{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}
.auth-benefit{
  min-width:156px;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
}
.auth-benefit strong{display:block;color:white;font-size:.87rem}
.auth-benefit span{color:#AEBBD0;font-size:.73rem}
.auth-card{
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-lg);
}
.auth-card--wide{max-width:620px}
.auth-card-kicker{color:#A47F14;font-size:.73rem;font-weight:850;text-transform:uppercase;letter-spacing:.13em}
.auth-card h2{font-size:2rem;letter-spacing:-.045em;margin:10px 0 8px}
.auth-card .lead{color:var(--muted);line-height:1.58;margin:0 0 25px;font-size:.94rem}
.institution-chip{
  display:flex;align-items:center;gap:11px;margin:0 0 23px;padding:11px 13px;
  border-radius:14px;background:#F4F7FB;border:1px solid var(--line);
}
.institution-chip-mark{
  width:31px;height:31px;border-radius:10px;background:var(--navy-900);
  color:#fff;display:grid;place-items:center;font-size:.68rem;font-weight:850;
}
.institution-chip strong{display:block;font-size:.81rem}
.institution-chip span{font-size:.7rem;color:var(--muted)}
.auth-footer{
  position:absolute;left:62px;bottom:28px;color:#8391A7;font-size:.72rem;z-index:4
}
.role-picker{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px}
.role-option{
  position:relative;padding:15px;border:1px solid var(--line);border-radius:15px;
  background:#F8FAFD;text-align:left;transition:.2s ease;color:var(--ink);
}
.role-option strong{display:block;font-size:.86rem}
.role-option span{display:block;color:var(--muted);font-size:.7rem;margin-top:3px}
.role-option.active{
  background:#FFF9E8;border-color:#D7B33C;box-shadow:0 0 0 3px rgba(213,173,54,.1)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .span-2{grid-column:1/-1}

/* App shell */
.app-body{min-height:100vh;background:#F4F7FB}
.app-header{
  height:88px;background:rgba(255,255,255,.93);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(18px);
}
.app-header-inner{
  max-width:1500px;height:100%;margin:0 auto;padding:0 34px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.header-actions{display:flex;align-items:center;gap:12px}
.inst-pill{
  padding:9px 13px;border:1px solid var(--line);background:#F8FAFD;border-radius:999px;
  color:#536177;font-size:.74rem;font-weight:750;
}
.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-950));color:#fff;font-weight:850;font-size:.78rem;
}
.app-main{max-width:1500px;margin:0 auto;padding:34px}
.dashboard-hero{
  min-height:300px;border-radius:32px;padding:38px;position:relative;overflow:hidden;
  color:#fff;background:
    radial-gradient(circle at 82% 20%,rgba(213,173,54,.27),transparent 27%),
    linear-gradient(135deg,#081A33,#143F72);
  box-shadow:var(--shadow-md);
}
.dashboard-hero:after{
  content:"";position:absolute;width:350px;height:350px;border-radius:50%;
  right:-80px;bottom:-190px;border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018);
}
.dashboard-hero-content{position:relative;z-index:2;max-width:1180px}
.dashboard-hero h1{font-size:clamp(2.4rem,4.3vw,4.5rem);line-height:1;letter-spacing:-.06em;margin:17px 0}
.dashboard-hero p{color:#C7D4E5;font-size:1rem;line-height:1.65;max-width:none;white-space:nowrap}
.hero-meta{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.hero-meta span{
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);
  padding:9px 12px;border-radius:999px;font-size:.75rem;color:#DEE7F2
}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:42px 0 20px}
.section-head h2{margin:0;font-size:1.85rem;letter-spacing:-.04em}
.section-head p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.category-card{
  min-width:0;background:#fff;border:1px solid #E7ECF2;border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.24s ease;display:flex;flex-direction:column;
}
.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#D6DEE9}
.category-art{
  min-height:112px;padding:18px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0B203F,#164C7E);
}
.category-art:before,.category-art:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.category-art:before{width:135px;height:135px;right:-36px;top:-54px}
.category-art:after{width:88px;height:88px;right:10px;top:-23px}
.category-code{
  position:relative;z-index:2;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);font-size:.78rem;font-weight:900;letter-spacing:.05em;
}
.category-status{
  position:absolute;right:15px;bottom:15px;z-index:2;padding:6px 9px;border-radius:999px;
  background:rgba(7,18,35,.6);border:1px solid rgba(255,255,255,.17);
  font-size:.63rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
}
.category-content{padding:19px;display:flex;flex-direction:column;flex:1}
.category-content h3{font-size:1.02rem;line-height:1.22;letter-spacing:-.025em;margin:0 0 9px}
.category-desc{font-size:.76rem;line-height:1.5;color:var(--muted);min-height:57px;margin:0 0 14px}
.program-list{display:grid;gap:7px;margin-bottom:17px}
.program-line{
  border:1px solid #E9EDF3;border-radius:10px;padding:8px 9px;
  color:#5D697B;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:7px;background:#FBFCFE
}
.program-line:before{
  content:"";width:6px;height:6px;border-radius:50%;background:#B7C0CD;flex:none
}
.program-line.open{color:#173E6E;background:#F0F6FD;border-color:#DCEAF8;font-weight:750}
.program-line.open:before{background:var(--success)}
.category-footer{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid #EEF1F5;font-size:.7rem;
}
.card-link{font-weight:850;color:var(--navy-700)}
.lock-label{color:#8A95A5;font-weight:750}
.category-card.accent-violet .category-art{background:linear-gradient(135deg,#26144C,#6B4BC1)}
.category-card.accent-blue .category-art{background:linear-gradient(135deg,#0F315F,#246FC0)}
.category-card.accent-rose .category-art{background:linear-gradient(135deg,#551B3B,#A64676)}
.category-card.accent-emerald .category-art{background:linear-gradient(135deg,#0E463C,#23846D)}
.category-card.accent-amber .category-art{background:linear-gradient(135deg,#5C3B0E,#C18125)}
.category-card.accent-gold .category-art{background:linear-gradient(135deg,#5F440A,#C39A2E)}
.category-card.accent-cyan .category-art{background:linear-gradient(135deg,#0A3D52,#1682A8)}
.category-card.accent-orange .category-art{background:linear-gradient(135deg,#5E270B,#C46621)}
.category-card.accent-slate .category-art{background:linear-gradient(135deg,#1E293B,#526174)}

/* Category / program pages */
.page-hero{
  border-radius:28px;padding:34px;min-height:255px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#07192F,#164574);box-shadow:var(--shadow-md)
}
.page-hero:after{content:"";position:absolute;right:-50px;top:-90px;width:330px;height:330px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 42px rgba(255,255,255,.035)}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:#C8D5E7;font-weight:750;position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1;letter-spacing:-.06em;margin:42px 0 14px;position:relative;z-index:2}
.page-hero p{max-width:1180px;color:#C9D6E7;line-height:1.6;position:relative;z-index:2;white-space:nowrap}
.program-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.program-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.22s ease;display:flex;flex-direction:column;min-height:340px
}
.program-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.program-cover{min-height:150px;padding:20px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,#091C37,#1A538A)}
.program-cover:before{content:"";position:absolute;right:-38px;top:-55px;width:170px;height:170px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 30px rgba(255,255,255,.04)}
.program-cover-label{position:relative;z-index:2;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:850;color:#E3C969}
.program-cover h3{position:absolute;left:20px;right:20px;bottom:19px;margin:0;font-size:1.45rem;line-height:1.05;letter-spacing:-.04em;z-index:2}
.program-body{padding:19px;display:flex;flex-direction:column;flex:1}
.program-body p{font-size:.78rem;color:var(--muted);line-height:1.55;margin:0 0 18px}
.program-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.program-meta span{font-size:.66rem;padding:6px 8px;border-radius:999px;background:#F3F6FA;color:#566379;font-weight:750}
.program-action{margin-top:auto}
.program-card.locked{opacity:.74}
.program-card.locked .program-cover{filter:saturate(.52)}
.locked-button{width:100%;height:46px;border:1px solid var(--line);background:#F6F8FB;color:#788497;border-radius:12px;font-weight:800}

.psl-hero{background:radial-gradient(circle at 83% 20%,rgba(222,181,58,.25),transparent 25%),linear-gradient(135deg,#07182F,#123E70)}
.progress-panel{
  margin-top:22px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  padding:17px;border-radius:17px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13);position:relative;z-index:2
}
.progress-track{height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-400),#F4DE8D)}
.progress-copy strong{display:block;font-size:.82rem}.progress-copy span{font-size:.68rem;color:#C1CEE0}
.progress-number{font-size:1.6rem;font-weight:900;color:var(--gold-300)}
.module-list{display:grid;gap:17px}
.module-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;
  display:grid;grid-template-columns:72px 1fr;gap:18px;box-shadow:var(--shadow-sm)
}
.module-number{
  width:72px;height:72px;border-radius:19px;background:linear-gradient(135deg,#0B203F,#174C7B);
  color:#fff;display:grid;place-items:center;font-size:1.18rem;font-weight:900
}
.module-content h3{margin:3px 0 6px;font-size:1.05rem}.module-content>p{margin:0;color:var(--muted);font-size:.78rem}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.resource-card{
  border:1px solid var(--line);background:#FAFBFD;border-radius:13px;padding:11px;
  display:flex;align-items:center;gap:10px;transition:.2s ease
}
.resource-card:hover{border-color:#C9A331;background:#FFFBEF}
.resource-icon{width:32px;height:32px;border-radius:9px;background:#EAF0F7;color:#173E6E;display:grid;place-items:center;font-size:.62rem;font-weight:900}
.resource-card strong{display:block;font-size:.7rem}.resource-card span{display:block;font-size:.62rem;color:var(--muted);margin-top:2px}

/* Locked screen / styleguide */
.lock-panel{
  min-height:460px;border-radius:28px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;text-align:center;padding:50px
}
.lock-symbol{
  width:96px;height:96px;border-radius:26px;background:#F7F9FC;display:grid;place-items:center;
  border:1px solid #E5EAF1; box-shadow:0 10px 24px rgba(10,27,53,.06);
  color:#738096;font-size:1.7rem;font-weight:900;margin:0 auto 19px; overflow:hidden;
}
.lock-symbol img{
  width:76px;height:76px;object-fit:contain;display:block;
}
.lock-panel h1{font-size:2.2rem;letter-spacing:-.05em;margin:0 0 10px}
.lock-panel p{color:var(--muted);max-width:550px;line-height:1.6}
.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swatch{height:140px;border-radius:18px;padding:16px;color:#fff;display:flex;align-items:end;font-weight:800}
.component-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-sm)}


/* Release-candidate progression controls */
.module-card{position:relative}
.module-card.locked{
  opacity:.58;
  background:#F7F9FC;
  box-shadow:none;
}
.module-card.locked .module-number{
  background:linear-gradient(135deg,#647287,#8490A1);
}
.module-card.locked .resource-card{
  pointer-events:none;
  background:#F1F4F8;
  border-color:#E5EAF0;
}
.module-state{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  padding:6px 9px;border-radius:999px;background:#EDF6F2;color:#167552;
  font-size:.65rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;
}
.module-state.locked-state{background:#EEF1F5;color:#748094}
.module-state.completed-state{background:#FFF7DB;color:#8A6810}
.resource-card{position:relative}
.resource-card.completed{
  border-color:#B9DECf;background:#F1FAF6;
}
.resource-card.completed .resource-icon{background:#D9F2E6;color:#167552}
.resource-status{
  margin-left:auto;flex:none;font-size:.58rem;font-weight:850;
  color:#7D899A;text-transform:uppercase;letter-spacing:.05em;
}
.resource-card.completed .resource-status{color:#167552}
.progress-note{
  margin:0 0 18px;padding:14px 16px;border:1px solid #DFE6EF;
  border-radius:15px;background:#FFFFFF;color:#5D697B;font-size:.78rem;line-height:1.55;
}
.progress-note strong{color:#183B67}
.resource-completion{
  margin-top:24px;padding:20px;border-radius:18px;background:#FFFFFF;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.resource-completion h3{margin:0 0 7px;font-size:1rem}
.resource-completion p{margin:0 0 15px;color:var(--muted);font-size:.79rem;line-height:1.55}
.complete-badge{
  display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;
  background:#EDF8F3;color:#15744F;font-size:.7rem;font-weight:850;
}
.locked-resource-panel{
  min-height:360px;border-radius:24px;background:#FFFFFF;border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;padding:42px;box-shadow:var(--shadow-sm);
}
.locked-resource-panel h2{margin:0 0 9px;letter-spacing:-.04em}
.locked-resource-panel p{max-width:560px;color:var(--muted);line-height:1.6}
.site-footer{
  max-width:1500px;margin:26px auto 0;padding:24px 34px 30px;
  border-top:1px solid #E2E7EE;display:flex;justify-content:space-between;
  align-items:center;gap:18px;color:#7A8697;font-size:.73rem;
}
.site-footer a{color:#173F72;font-weight:850}
.site-footer a:hover{color:#A47F14}
.auth-footer a{color:#DCC36A;font-weight:800}

@media(max-width:1180px){
  .dashboard-hero p,.page-hero p{white-space:normal}
  .auth-container{grid-template-columns:1fr 430px;gap:44px;padding:38px}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .program-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .brand-seal{width:52px;height:52px}
  .brand-word{font-size:1.5rem}
  .site-footer{padding-left:20px;padding-right:20px;flex-direction:column;align-items:flex-start}
  .auth-container{display:block;padding:26px;max-width:680px}
  .auth-story{padding:28px 4px 36px}
  .auth-story h1{font-size:3.3rem}
  .auth-benefits{display:none}
  .auth-card{padding:27px}
  .auth-footer{position:relative;left:auto;bottom:auto;padding:0 30px 24px}
  .app-header-inner,.app-main{padding-left:20px;padding-right:20px}
  .inst-pill{display:none}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .auth-container{padding:19px}
  .auth-story{padding-top:10px}
  .auth-story h1{font-size:2.75rem}
  .auth-story p{font-size:.98rem}
  .auth-card{border-radius:22px;padding:22px}
  .form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-art{min-height:92px;padding:13px}
  .category-content{padding:13px}
  .category-content h3{font-size:.86rem}
  .category-desc{display:none}
  .program-line{font-size:.58rem;padding:7px}
  .category-status{font-size:.54rem;right:10px;bottom:10px}
  .category-code{width:38px;height:38px;font-size:.68rem}
  .app-main{padding-top:20px}
  .dashboard-hero{padding:25px;min-height:260px}
  .dashboard-hero h1{font-size:2.5rem}
  .section-head{margin-top:30px}
  .program-grid{grid-template-columns:1fr}
  .module-card{grid-template-columns:50px 1fr;padding:15px}
  .module-number{width:50px;height:50px;border-radius:14px}
  .resource-grid{grid-template-columns:1fr}
  .style-grid{grid-template-columns:1fr}
}


/* PSL protected-media interface */
.learning-resource-shell{
  background:#FFFFFF;border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.learning-resource-head{
  padding:22px 24px 18px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);
}
.learning-resource-head h2{
  margin:7px 0 5px;font-size:1.6rem;letter-spacing:-.04em;
}
.learning-resource-head p{margin:0;color:var(--muted);font-size:.78rem}
.resource-viewer{background:#122034;padding:18px;user-select:none;-webkit-user-select:none}
.slide-stage{
  max-width:1240px;margin:0 auto;position:relative;border-radius:14px;
  overflow:hidden;background:#0A1422;box-shadow:0 16px 42px rgba(0,0,0,.28);
}
.slide-image{
  width:100%;height:auto;display:block;pointer-events:none;
}
.slide-controls{
  max-width:1240px;margin:14px auto 0;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
}
.slide-button{
  height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;background:rgba(255,255,255,.08);color:#FFF;
  font-weight:850;transition:.2s ease;
}
.slide-button:hover:not(:disabled){background:rgba(213,173,54,.22);border-color:#D5AD36}
.slide-button:disabled{opacity:.35;cursor:not-allowed}
.slide-count{text-align:center;color:#D8E0EB;font-size:.75rem;font-weight:800}
.viewer-note{
  max-width:1240px;margin:10px auto 0;color:#9EABBC;font-size:.68rem;text-align:center;
}
.audio-stage{
  max-width:920px;margin:0 auto;padding:42px 34px;border-radius:20px;
  background:
    radial-gradient(circle at 83% 20%,rgba(213,173,54,.22),transparent 27%),
    linear-gradient(135deg,#07182F,#143F72);
  color:#FFF;box-shadow:0 18px 44px rgba(0,0,0,.24);
}
.audio-art{
  width:92px;height:92px;margin:0 auto 20px;border-radius:28px;
  display:grid;place-items:center;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);font-weight:900;letter-spacing:.08em;
  color:#E6C85E;font-size:1rem;
}
.audio-stage h3{text-align:center;margin:0 0 7px;font-size:1.55rem;letter-spacing:-.04em}
.audio-stage>p{text-align:center;margin:0;color:#C4D0E0;font-size:.78rem}
.audio-controls{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:28px;
}
.audio-play{
  width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(135deg,#E4C25A,#D5AD36);
  color:#10213A;font-weight:900;font-size:.7rem;
}
.audio-range{width:100%;accent-color:#D5AD36}
.audio-time{font-size:.7rem;color:#CFD8E5;min-width:92px;text-align:right}
.audio-security-note{
  margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);
  text-align:center;color:#9FADBF;font-size:.65rem;
}
.resource-placeholder{
  min-height:420px;display:grid;place-items:center;text-align:center;
  border:1px dashed #CCD5E1;border-radius:18px;background:#F8FAFD;padding:38px;
}
.resource-placeholder-mark{
  width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,#0B203F,#174C7B);
  color:#FFF;display:grid;place-items:center;margin:0 auto 17px;font-size:.7rem;
  font-weight:900;letter-spacing:.06em;
}
.resource-placeholder h3{margin:0 0 8px;font-size:1.35rem;letter-spacing:-.035em}
.resource-placeholder p{max-width:590px;margin:0;color:var(--muted);line-height:1.6}
.presentation-completion{
  margin:0;padding:20px 24px;border-top:1px solid var(--line);background:#FBFCFE;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.presentation-completion-copy h3{margin:0 0 5px;font-size:.92rem}
.presentation-completion-copy p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.5}
.resource-gate-note{
  padding:11px 13px;border-radius:12px;background:#FFF6D9;color:#765A0D;
  font-size:.68rem;font-weight:750;margin-top:12px;
}
.btn:disabled{opacity:.46;cursor:not-allowed;transform:none!important;box-shadow:none!important}
@media(max-width:820px){
  .learning-resource-head,.presentation-completion{flex-direction:column;align-items:stretch}
  .resource-viewer{padding:10px}
}
@media(max-width:560px){
  .learning-resource-head{padding:18px}
  .slide-controls{grid-template-columns:1fr 1fr}
  .slide-count{grid-column:1/-1;grid-row:1}
  .audio-stage{padding:28px 18px}
  .audio-controls{grid-template-columns:auto 1fr}
  .audio-time{grid-column:1/-1;text-align:center}
  .presentation-completion{padding:18px}
}


/* Embedded SkillX Knowledge Check */
.quiz-shell{
  max-width:960px;margin:0 auto;background:#FFFFFF;border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.quiz-top{
  padding:22px 24px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#F9FBFD,#F3F7FB);
}
.quiz-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.quiz-top h2{margin:7px 0 6px;font-size:1.65rem;letter-spacing:-.045em}
.quiz-top p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.55}
.quiz-progress-wrap{min-width:170px}
.quiz-progress-label{
  display:flex;justify-content:space-between;gap:10px;color:#5D697B;
  font-size:.68rem;font-weight:800;margin-bottom:8px;
}
.quiz-progress-track{
  height:7px;background:#E6EBF2;border-radius:999px;overflow:hidden;
}
.quiz-progress-fill{
  height:100%;width:10%;background:linear-gradient(90deg,#173F72,#D5AD36);
  border-radius:999px;transition:.3s ease;
}
.quiz-instructions{
  margin:0;padding:18px 24px;border-bottom:1px solid var(--line);
  background:#FFFBEF;color:#654F13;font-size:.76rem;line-height:1.6;
}
.quiz-instructions strong{color:#4B3A0D}
.quiz-body{padding:28px 24px 24px}
.quiz-question-number{
  color:#A47F14;font-size:.72rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:9px;
}
.quiz-question{
  margin:0 0 21px;font-size:1.35rem;line-height:1.35;letter-spacing:-.025em;
}
.quiz-options{display:grid;gap:11px}
.quiz-option{
  width:100%;padding:15px 16px;border:1px solid #DDE4ED;border-radius:15px;
  background:#FBFCFE;text-align:left;color:var(--ink);display:flex;gap:13px;
  align-items:flex-start;transition:.2s ease;
}
.quiz-option:hover:not(:disabled){
  transform:translateY(-1px);border-color:#BDA04A;background:#FFFBEF;
}
.quiz-option:disabled{cursor:default}
.quiz-option-letter{
  width:30px;height:30px;flex:none;border-radius:9px;background:#EAF0F7;
  color:#173F72;display:grid;place-items:center;font-size:.72rem;font-weight:900;
}
.quiz-option-text{padding-top:5px;font-size:.82rem;line-height:1.45;font-weight:700}
.quiz-option.selected{border-color:#173F72;background:#EFF5FC}
.quiz-option.correct{border-color:#60B48D;background:#EFFAF5}
.quiz-option.correct .quiz-option-letter{background:#D7F2E5;color:#14734E}
.quiz-option.incorrect{border-color:#DA8A8A;background:#FFF3F3}
.quiz-option.incorrect .quiz-option-letter{background:#F8DCDC;color:#A43B3B}
.quiz-feedback{
  margin-top:20px;padding:17px 18px;border-radius:15px;border:1px solid #DFE6EF;
  background:#F8FAFD;
}
.quiz-feedback.correct-feedback{background:#EFFAF5;border-color:#BDE3D0}
.quiz-feedback.incorrect-feedback{background:#FFF5F5;border-color:#E8C2C2}
.quiz-feedback-title{font-size:.78rem;font-weight:900;margin-bottom:5px}
.quiz-feedback p{margin:0;color:#596679;font-size:.76rem;line-height:1.55}
.quiz-actions{
  margin-top:22px;display:flex;justify-content:flex-end;gap:10px;
}
.quiz-next{min-width:145px}
.quiz-result{
  padding:34px 24px;text-align:center;
}
.quiz-result-mark{
  width:82px;height:82px;border-radius:24px;margin:0 auto 18px;
  background:linear-gradient(135deg,#0B203F,#174C7B);
  color:#E6C85E;display:grid;place-items:center;font-size:1.1rem;font-weight:900;
}
.quiz-result h2{margin:0 0 9px;font-size:2rem;letter-spacing:-.05em}
.quiz-result p{margin:0 auto 20px;max-width:620px;color:var(--muted);line-height:1.6}
.quiz-score{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  background:#F3F6FA;color:#173F72;font-size:.76rem;font-weight:900;margin-bottom:22px;
}
.quiz-summary{
  display:grid;gap:9px;text-align:left;margin:0 auto 24px;max-width:720px;
}
.quiz-summary-row{
  padding:11px 13px;border:1px solid #E4E9F0;border-radius:12px;background:#FBFCFE;
  font-size:.72rem;color:#596679;
}
.quiz-summary-row strong{color:var(--ink)}
.quiz-complete-note{
  margin-top:15px;color:#15744F;font-size:.72rem;font-weight:850;
}
@media(max-width:700px){
  .quiz-top-row{flex-direction:column}
  .quiz-progress-wrap{width:100%}
  .quiz-body{padding:22px 18px}
  .quiz-top,.quiz-instructions{padding-left:18px;padding-right:18px}
  .quiz-question{font-size:1.15rem}
}


/* Knowledge Check review mode */
.quiz-result-actions{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 24px;
}
.quiz-review{
  padding:28px 24px 24px;
}
.quiz-review-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  margin-bottom:20px;
}
.quiz-review-head h3{
  margin:4px 0 0;font-size:1.35rem;letter-spacing:-.035em;
}
.quiz-review-counter{
  padding:7px 10px;border-radius:999px;background:#F1F5F9;color:#536177;
  font-size:.68rem;font-weight:850;white-space:nowrap;
}
.review-answer{
  padding:13px 14px;border-radius:13px;margin-top:10px;border:1px solid var(--line);
  background:#FAFBFD;font-size:.78rem;line-height:1.5;
}
.review-answer strong{color:var(--ink)}
.review-answer.user-correct{
  background:#EFFAF5;border-color:#BDE3D0;color:#246448;
}
.review-answer.user-incorrect{
  background:#FFF4F4;border-color:#E8C2C2;color:#8F3A3A;
}
.review-answer.correct-answer{
  background:#F1F6FC;border-color:#CEDDEC;color:#254F7D;
}
.quiz-review-explanation{
  margin-top:14px;padding:15px 16px;border-radius:14px;
  background:#FFFBEF;border:1px solid #E9D99B;color:#695414;
  font-size:.76rem;line-height:1.55;
}
.quiz-review-nav{
  display:flex;justify-content:space-between;gap:10px;margin-top:22px;
}
.quiz-review-nav .btn{min-width:150px}
@media(max-width:560px){
  .quiz-review-head{flex-direction:column}
  .quiz-review-nav{flex-direction:column}
  .quiz-review-nav .btn{width:100%}
}


/* v1.6.1 polish */
.brand-lockup{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand-lockup img,
.brand-lockup .brand-seal{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 58px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.brand-lockup .brand-text h1,
.brand-lockup .brand-text .brand-name{
  margin:0;
  line-height:1;
}
.brand-lockup .brand-text .brand-sub{
  margin-top:6px;
  font-size:.9rem;
  opacity:.92;
}

.auth-hero-brand .brand-lockup img,
.auth-hero-brand .brand-lockup .brand-seal{
  width:64px;
  height:64px;
  flex-basis:64px;
}
.auth-card-note.is-hidden{display:none !important;}

.hero-value-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.hero-value-pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  padding:12px 14px;
  min-width:180px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-value-pill strong{
  display:block;
  font-size:1rem;
  font-weight:800;
  color:#fff;
  margin-bottom:2px;
}
.hero-value-pill span{
  display:block;
  font-size:.78rem;
  color:rgba(255,255,255,.78);
  line-height:1.35;
}

.section-action{
  display:flex;
  justify-content:center;
  margin:28px 0 8px;
}
.page-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:220px;
}

.resource-nav-top,
.resource-nav-bottom{
  display:flex;
  justify-content:flex-start;
  margin-bottom:16px;
}
.resource-nav-bottom{
  margin-top:22px;
  margin-bottom:0;
}

.locked-panel-message{
  text-align:center;
  max-width:none !important;
  width:100%;
}
.locked-panel-message p{
  text-align:center;
  white-space:nowrap;
  display:block;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.locked-chip-wrap{
  justify-content:center;
}

@media(max-width:900px){
  .brand-lockup img,
  .brand-lockup .brand-seal,
  .auth-hero-brand .brand-lockup img,
  .auth-hero-brand .brand-lockup .brand-seal{
    width:52px;height:52px;flex-basis:52px;
  }
  .hero-value-pill{min-width:160px}
}
@media(max-width:640px){
  .hero-value-strip{gap:10px}
  .hero-value-pill{
    min-width:calc(50% - 5px);
    padding:10px 12px;
  }
  .locked-panel-message p{
    white-space:normal;
  }
}

/* v1.6.2 Engineering category footer navigation */
.engineering-category-back{
  margin-top:34px;
  margin-bottom:10px;
}

/* v1.6.3 reliable PSL resource navigation */
.resource-page-back{
  display:flex;
  justify-content:center;
  padding:24px 0 4px;
}
.resource-page-back .page-back-button{
  min-width:270px;
}
@media(max-width:560px){
  .resource-page-back .page-back-button{
    width:100%;
    min-width:0;
  }
}


/* v1.6.4 program end return button */
.program-end-back{
  margin:26px 0 10px;
  display:flex;
  justify-content:center;
}
.program-end-back .page-back-button{
  min-width:250px;
}
@media(max-width:560px){
  .program-end-back .page-back-button{
    width:100%;
    min-width:0;
  }
}


/* v1.0.1 — mobile and tablet viewport hotfix */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body.auth-shell{
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-x:none;
}

.auth-container,
.auth-story,
.auth-card,
.auth-card--wide,
form,
.form-grid,
.field,
.input-wrap{
  min-width:0;
  max-width:100%;
}

.auth-container{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
}

.input,
select.input,
textarea{
  min-width:0;
  max-width:100%;
}

.app-body,
.app-header,
.app-header-inner,
.app-main,
.site-footer,
.category-grid,
.program-grid,
.module-list,
.module-card,
.resource-grid{
  min-width:0;
  max-width:100%;
}

@media(max-width:900px){
  .locked-panel-message p{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media(max-width:820px){
  body.auth-shell{
    display:block;
  }

  .auth-container{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    min-height:auto;
    padding-top:24px;
    padding-bottom:24px;
    overflow:visible;
  }

  .auth-story,
  .auth-card,
  .auth-card--wide{
    width:100%;
  }

  .auth-story,
  .auth-card{
    flex:none;
  }

  .auth-card{
    margin-bottom:8px;
  }

  .auth-footer{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:680px;
    margin:0 auto;
    padding:0 26px 28px;
    overflow-wrap:anywhere;
  }
}

@media(max-width:560px){
  .auth-container{
    padding:16px;
  }

  .auth-story{
    padding:6px 0 24px;
  }

  .auth-story h1{
    font-size:clamp(2.35rem,12vw,2.75rem);
    overflow-wrap:anywhere;
  }

  .auth-card{
    width:100%;
    padding:20px;
  }

  .role-picker{
    grid-template-columns:1fr;
  }

  .input,
  select.input{
    width:100%;
    font-size:16px;
  }

  .btn,
  .btn-block{
    max-width:100%;
  }

  .auth-footer{
    max-width:none;
    padding:0 16px 24px;
  }
}


/* v1.0.3 — visually distinct ACTIVE category state */
.category-status.active{
  color:#FFFFFF;
  background:linear-gradient(135deg,#149864,#08784D);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    0 7px 18px rgba(7,120,77,.34),
    0 0 0 3px rgba(42,201,137,.14);
}
.category-status.active::before{
  content:"";
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:6px;
  border-radius:50%;
  background:#B9FFD9;
  box-shadow:0 0 0 3px rgba(185,255,217,.18);
  vertical-align:1px;
}
.category-status.locked{
  color:#FFFFFF;
  background:rgba(7,18,35,.68);
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.category-card.is-active{
  border-color:rgba(27,167,106,.46);
  box-shadow:
    0 12px 32px rgba(8,75,51,.12),
    0 0 0 2px rgba(27,167,106,.09);
}
.category-card.is-active:hover{
  border-color:rgba(27,167,106,.72);
  box-shadow:
    0 18px 42px rgba(8,75,51,.18),
    0 0 0 3px rgba(27,167,106,.12);
}
.category-card.is-active .program-line.open{
  color:#126342;
  background:#EDF9F3;
  border-color:#CDEBDB;
}


/* v1.2.1 — locked-category description: centered single line on desktop */
.lock-panel > div > p{
  width:max-content;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  white-space:nowrap;
}

@media(max-width:900px){
  .lock-panel > div > p{
    width:auto;
    max-width:680px;
    white-space:normal;
  }
}