:root{--navy:#122844;--navy2:#1b3959;--gold:#e9b775;--ink:#20324b;--muted:#78869a;--bg:#f4f7fc;--green:#16a879}*{box-sizing:border-box}body{margin:0;font:15px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #e9b775;outline-offset:2px}.app{display:flex;min-height:100vh}.sidebar{width:248px;position:sticky;top:0;height:100vh;background:var(--navy);color:white;padding:28px 16px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:.4px;margin:0 6px 45px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#b6c6d9}.mark{background:var(--gold);color:var(--navy);width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:28px}.nav{display:block;width:100%;text-align:left;padding:15px 16px;margin-bottom:8px;border:0;border-radius:12px;background:transparent;color:#d4e0ed;font-weight:750}.nav:hover,.nav.active{background:#294663;color:#fff}.sidebar-note{margin-top:auto;color:#aabdd1;font-size:11px;letter-spacing:1.3px;padding:14px;border-top:1px solid #36516b}.sidebar-note small{letter-spacing:0}.main{flex:1;min-width:0}.topbar{height:76px;background:white;border-bottom:1px solid #e5eaf2;display:flex;align-items:center;justify-content:flex-end;padding:0 5%}.stats{display:flex;gap:22px;font-weight:800}.stats span{white-space:nowrap}.menu,.mobilebrand{display:none}.page{max-width:1100px;margin:auto;padding:36px 35px 50px}.hidden{display:none!important}.hero{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:30px;padding:44px;border-radius:22px;background:linear-gradient(120deg,#122844,#254f70);color:white;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:900}.eyebrow.dark{color:#b77d42}.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.16;margin:10px 0 15px}.hero h1 em{color:var(--gold);font-style:normal}.hero p:not(.eyebrow){color:#d2dfec;max-width:490px}.primary{background:#e9b775;color:#162c46;border:0;border-radius:11px;padding:13px 21px;font-weight:850;box-shadow:0 4px 0 #b4864f}.primary:hover{filter:brightness(1.06)}.primary:disabled{opacity:.45;cursor:not-allowed}.hero-art{text-align:center;font-size:85px;transform:rotate(-5deg)}.art-terminal{transform:rotate(5deg);text-align:left;font:13px/1.8 monospace;color:#b9f6d6;background:#09192a;padding:18px;border:1px solid #53708c;border-radius:12px;box-shadow:0 16px 30px #06152766}.art-terminal i{color:#71e9b5;font-style:normal}.heading{display:flex;align-items:center;justify-content:space-between;margin-top:42px;gap:12px}.heading h2,.page h2{font-size:30px;margin:3px 0 18px}.pill{background:#e5edf6;color:#31516d;border-radius:99px;padding:7px 13px;font-weight:800;font-size:12px}.unit{background:white;border:1px solid #e4eaf2;border-radius:18px;margin:18px 0;padding:23px;box-shadow:0 10px 30px #152c4308}.unit-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.unit h3{margin:0;font-size:19px}.unit p{color:var(--muted);margin:3px 0 20px}.path{display:flex;flex-wrap:wrap;gap:13px}.node{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:125px;flex:1;border:2px solid #e2e8f0;border-radius:14px;padding:17px 9px;background:#fff;color:var(--ink);font-weight:800;transition:transform .2s,border-color .2s}.node:hover:not(:disabled){transform:translateY(-4px)}.node span{font-size:27px}.node small{color:var(--muted);font-size:11px}.node.done{border-color:#7cdec0;background:#f0fff8}.node.next{border-color:#e8b46f;background:#fffaf0}.node:disabled{opacity:.55;cursor:not-allowed}.back{border:0;background:none;font-weight:750;color:#476587;padding:8px 0 20px}.lesson-shell{max-width:720px;margin:0 auto;background:white;border-radius:20px;padding:35px;box-shadow:0 15px 40px #1b39590d}.lesson-progress{height:10px;background:#e9eef5;border-radius:99px;overflow:hidden;margin-bottom:25px}.lesson-progress div{height:100%;background:var(--green);transition:width .4s}.lesson-meta{display:flex;align-items:center;justify-content:space-between;color:#9b712f;font-weight:800}.lesson-shell h2{margin:25px 0 10px}.lesson-body{background:#f4f7fb;border-left:4px solid var(--gold);padding:18px;border-radius:8px;line-height:1.8}.question{font-size:20px;font-weight:850;margin:24px 0 15px}.options{display:grid;gap:11px}.option{width:100%;text-align:left;padding:15px;border:2px solid #e2e8f0;border-radius:11px;background:white;font-weight:750}.option.selected{border-color:#3e85d0;background:#edf6ff}.option.correct{border-color:#16a879;background:#eafff4}.option.wrong{border-color:#df5863;background:#fff0f0}.answer-input{width:100%;border:2px solid #dce5ef;border-radius:12px;padding:15px;text-transform:uppercase;font-family:monospace;font-size:17px}.feedback{padding:15px;border-radius:11px;margin-top:20px;font-weight:750;animation:pop .35s ease}.feedback.good{background:#e6fff2;color:#087e55}.feedback.bad{background:#fff0f1;color:#a53240}.feedback.hint{background:#fff7e8;color:#926018}.lesson-actions{display:flex;justify-content:space-between;gap:10px;margin-top:25px}.secondary{background:white;border:2px solid #dce4ee;border-radius:10px;padding:12px 19px;font-weight:800}.terminal{border-radius:17px;overflow:hidden;background:#071827;color:#d9f5e7;box-shadow:0 16px 40px #13284422}.terminal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 19px;background:#162c42;color:#a9bdd0;font-size:12px}.terminal-head span{color:#e7a65e}.terminal-head button{background:transparent;border:1px solid #536e84;color:#dce9f2;border-radius:6px;padding:5px 12px}.terminal-output{min-height:330px;max-height:470px;overflow:auto;padding:24px;font:14px/1.8 'Courier New',monospace;white-space:pre-wrap;overflow-wrap:anywhere}.terminal-line{margin-bottom:15px}.terminal-command{color:#6aefae}.terminal-response{color:#d6e5f0}.terminal-input{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid #2b485c;color:#6aefae}.terminal-input input{background:transparent;border:0;outline:0;color:white;min-width:0;flex:1;font:15px monospace}.terminal-input button{background:#e9b775;color:#10233c;border:0;border-radius:7px;padding:9px;font-weight:850}.tip,.panel{margin-top:22px;background:white;padding:22px;border-radius:15px;border:1px solid #e1e8f0}.muted{color:var(--muted)}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.profile-card{background:white;border:1px solid #e2e8f0;border-radius:16px;padding:24px;text-align:center;display:grid;gap:6px}.profile-card span{font-size:32px}.profile-card b{font-size:33px}.profile-card small{color:var(--muted)}.danger{border:1px solid #e8b0b5;color:#a72d37;background:#fff0f1;border-radius:9px;padding:10px 14px;font-weight:750}.badge-item{display:inline-block;background:#fff7e8;border:1px solid #edcf9d;border-radius:12px;padding:13px;margin:6px}footer{text-align:center;color:#9ca9b8;font-size:11px;padding:20px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,120px);background:#142844;color:white;border-radius:12px;padding:13px 24px;box-shadow:0 15px 40px #12284444;transition:transform .3s;z-index:9}.toast.show{transform:translate(-50%,0)}.confetti-piece{position:fixed;top:-20px;width:9px;height:14px;z-index:10;animation:fall 1.5s linear forwards;pointer-events:none}@keyframes fall{to{transform:translateY(105vh) rotate(650deg);opacity:0}}@keyframes pop{0%{transform:scale(.95)}60%{transform:scale(1.025)}100%{transform:scale(1)}}@media(max-width:850px){.sidebar{width:75px;padding:20px 8px}.brand{font-size:0;margin:0 7px 30px}.brand>span:last-child{display:none}.nav{font-size:0;text-align:center}.nav::first-letter{font-size:24px}.sidebar-note{display:none}.hero{grid-template-columns:1fr}.hero-art{display:none}.page{padding:25px 18px}}@media(max-width:600px){.sidebar{display:none;position:fixed;z-index:20;width:245px;box-shadow:0 0 0 100vw #0006}.sidebar.open{display:flex}.sidebar.open .brand>span:last-child{display:block;font-size:21px}.sidebar.open .nav{font-size:15px;text-align:left}.topbar{height:65px;justify-content:space-between;padding:0 17px}.menu,.mobilebrand{display:block}.menu{border:0;background:none;font-size:22px}.stats{gap:9px;font-size:12px}.hero{padding:28px 23px}.hero h1{font-size:33px}.heading h2,.page h2{font-size:25px}.path{display:grid;grid-template-columns:repeat(2,1fr)}.node{min-width:0}.lesson-shell{padding:21px}.profile-grid{gap:8px}.profile-card{padding:13px}.profile-card b{font-size:23px}.terminal-output{min-height:260px}.terminal-input{padding:10px}}

/* GAMADEUS Student Authentication */
#authOpen{margin-right:18px;padding:9px 15px;font-size:13px;white-space:nowrap}
.auth-modal{position:fixed;inset:0;z-index:100;background:rgba(8,23,42,.72);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.auth-panel{position:relative;width:100%;max-width:430px;max-height:calc(100dvh - 40px);overflow-y:auto;background:#fff;border-radius:22px;padding:34px;box-shadow:0 25px 80px #0005}
.auth-panel h2{font-size:27px;color:var(--navy);margin:0 0 12px}
.auth-panel label{display:block;font-size:13px;font-weight:800;color:var(--ink);margin:15px 0 6px}
.auth-panel input{width:100%;padding:13px 14px;border:2px solid #dce5ef;border-radius:11px;background:#fff;color:var(--ink)}
.auth-panel input:focus{border-color:#b4864f}
#authClose{position:absolute;right:18px;top:15px;background:#f0f3f8;border:0;border-radius:9px;width:35px;height:35px;font-size:17px}
#authSubmit{display:block;width:100%;margin-top:23px}
#authSwitch{display:block;width:100%;margin-top:15px}
#authMessage{font-size:13px;min-height:20px;color:#a53240;margin:0}
@media(max-width:600px){
 #authOpen{margin-right:7px;padding:7px 9px;font-size:11px}
 .auth-panel{padding:26px 20px;border-radius:17px}
 .auth-panel h2{font-size:23px}
}

/* GAMADEUS Password Visibility Toggle */
.auth-password-wrap {
  position: relative;
  width: 100%;
}

.auth-password-wrap #authPassword {
  padding-right: 52px;
}

.auth-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  color: #52647a;
}

.auth-password-toggle:hover {
  color: #122844;
}

.auth-password-toggle:focus-visible {
  outline: 2px solid #b4864f;
  border-radius: 8px;
}


/* GAMADEUS Responsive Authentication Layout v2 */
.auth-modal {
  padding: 16px;
  overscroll-behavior: contain;
}

.auth-panel {
  width: min(100%, 540px);
  max-width: 540px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 32px;
  border: 1px solid #e4eaf2;
  border-radius: 20px;
}

.auth-panel h2 {
  padding-right: 42px;
  line-height: 1.3;
}

.auth-panel input {
  min-height: 46px;
}

#authClose {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5;
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  margin: -12px -12px 0 8px;
}

#authSubmit,
#authSwitch,
#authVerifyExisting,
#authResend {
  width: 100%;
}

#authVerifyExisting,
#authResend {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .auth-modal {
    padding: 10px;
  }

  .auth-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 22px 18px;
    border-radius: 16px;
  }

  .auth-panel h2 {
    font-size: 22px;
  }

  #authClose {
    margin: -5px -4px 0 8px;
  }
}


/* GAMADEUS Compact Registration Layout v3 */
.auth-modal {
  padding: 10px;
}

.auth-panel {
  max-width: 760px;
  width: min(760px, 96vw);
  padding: 20px 26px;
  border-radius: 18px;
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.auth-panel h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.auth-panel label {
  font-size: 11px;
  margin: 5px 0 2px;
  font-weight: 700;
}

.auth-panel input,
.auth-panel select {
  width: 100%;
  min-height: 34px;
  height: 34px;
  padding: 5px 10px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #fff;
  color: #20324b;
  font-size: 12px;
}

.auth-panel input:focus,
.auth-panel select:focus {
  border-color: #b4864f;
}

#authProfileFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 2px;
}

#authProfileFields > label,
#authProfileFields > input,
#authProfileFields > select {
  grid-column: auto;
}

#authClose {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  margin: -8px -12px 0 8px;
}

#authSubmit,
#authSwitch,
#authVerifyExisting,
#authResend {
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 8px;
  min-height: 34px;
}

#authMessage {
  font-size: 12px;
  min-height: 16px;
}

@media (max-width: 600px) {
  .auth-panel {
    width: 100%;
    padding: 16px;
    max-height: calc(100dvh - 20px);
  }

  #authProfileFields {
    grid-template-columns: 1fr;
  }
}


/* GAMADEUS Compact Registration Grid v4 */
#authNameWrap:not(.hidden) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}

#authNameWrap .auth-field {
  min-width: 0;
}

#authNameWrap .auth-field label {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
}

#authNameWrap .auth-field input,
#authNameWrap .auth-field select {
  display: block;
  width: 100%;
  height: 34px;
}

@media (max-width: 600px) {
  #authNameWrap:not(.hidden) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 9px;
  }
  #authNameWrap .auth-field input,
  #authNameWrap .auth-field select {
    font-size: 11px;
    padding: 5px 7px;
  }
}

/* Reset Password Eye Toggle */
.reset-password-field {
  position: relative;
}
.reset-password-field input {
  padding-right: 48px;
}
.reset-eye {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #52647a;
  font-size: 19px;
  padding: 5px 8px;
  cursor: pointer;
}
.reset-eye:hover {
  color: #122844;
}


/* GAMADEUS Authentication Text Links v1 */
#authForgot,
#authResetBack {
  display: inline-block;
  width: auto;
  min-height: auto;
  margin: 8px 0 0;
  padding: 3px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #315c91;
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#authForgot:hover,
#authResetBack:hover {
  color: #122844;
}

#authResetSubmit {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 10px;
}

#authResetBack {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
}

#authForgot {
  display: block;
  width: fit-content;
  margin-left: auto;
}

/* Pending Email Verification Link */
#authVerifyExisting {
  display: block;
  width: fit-content;
  margin: 6px 0 8px auto;
  padding: 3px 0;
  min-height: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #315c91;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#authVerifyExisting:hover {
  color: #122844;
}
#authVerifyExisting.hidden {
  display: none;
}

/* Keep auth panels usable on narrow screens and mobile keyboards. */
.auth-panel { max-height: 90dvh; overflow-y: auto; }
.auth-panel input, .auth-panel select { max-width: 100%; box-sizing: border-box; }
#authForgot.hidden, #authResetForm.hidden { display: none; }
@media(max-width: 480px) { .topbar { flex-wrap: wrap; gap: 8px; } .stats { flex-wrap: wrap; } .auth-panel input, .auth-panel select { font-size: 16px; } }