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

:root{
  --navy-950:#060b1a; --navy-900:#0c1730; --navy-800:#132349; --navy-700:#1b2f5e; --navy-600:#26407a;
  --line: rgba(255,255,255,0.08);
  --obbligo:#3d7fff; --obbligo-soft:#7ba7ff;
  --verde:#2fbf71; --ambra:#f2a93b; --rosso:#e5484d;
  --text-hi:#eef2fb; --text-mid:#a9b6d6; --text-low:#647294;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--navy-950); color:var(--text-hi); font-family:var(--font-body); min-height:100vh; -webkit-font-smoothing:antialiased;}
::selection{background:var(--obbligo); color:#fff;}
:focus-visible{outline:2px solid var(--obbligo-soft); outline-offset:2px;}
button{font-family:inherit;}
a{color:var(--obbligo-soft);}

.browserbar{display:flex; align-items:center; gap:10px; padding:10px 18px; background:var(--navy-900); border-bottom:1px solid var(--line);}
.browserbar__dots{display:flex; gap:6px;}
.browserbar__dots span{width:9px; height:9px; border-radius:50%; background:var(--navy-600); display:block;}
.browserbar__url{flex:1; background:var(--navy-800); border:1px solid var(--navy-600); border-radius:7px; padding:6px 12px; font-family:var(--font-mono); font-size:12px; color:var(--text-mid); overflow-x:auto; white-space:nowrap;}
.browserbar__url b{color:var(--obbligo-soft); font-weight:500;}

.wrap{max-width:640px; margin:0 auto; padding:48px 22px 80px;}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--obbligo-soft); margin-bottom:10px;}
h1{font-family:var(--font-display); font-size:27px; font-weight:600; letter-spacing:-.01em; margin-bottom:10px;}
.lede{color:var(--text-mid); font-size:14.5px; line-height:1.6; margin-bottom:26px;}
.card{background:var(--navy-900); border:1px solid var(--line); border-radius:14px; padding:28px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--text-mid); margin-bottom:6px;}
.field input{width:100%; background:var(--navy-800); border:1px solid var(--navy-600); border-radius:8px; padding:11px 14px; color:var(--text-hi); font-size:14.5px; font-family:var(--font-body);}
.field input:focus{border-color:var(--obbligo-soft);}
.field.error input{border-color:var(--rosso);}
.field-error{color:var(--rosso); font-size:12px; margin-top:6px; display:none;}
.field.error .field-error{display:block;}

.btn{font-weight:600; font-size:14px; border:none; border-radius:8px; padding:12px 22px; cursor:pointer; transition:.15s ease; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--obbligo); color:#fff;}
.btn-primary:hover{background:#2f6fef;}
.btn-primary:disabled{background:var(--navy-700); color:var(--text-low); cursor:not-allowed;}
.btn-ghost{background:transparent; color:var(--text-mid); border:1px solid var(--navy-600);}
.btn-ghost:hover{color:var(--text-hi); border-color:var(--obbligo-soft);}
.btn-block{width:100%; justify-content:center;}

.otp-row{display:flex; gap:8px; margin:6px 0 18px;}
.otp-box{width:44px; height:54px; border-radius:8px; background:var(--navy-800); border:1px solid var(--navy-600); text-align:center; font-family:var(--font-mono); font-size:19px; color:var(--text-hi);}
.otp-box:focus{border-color:var(--obbligo-soft);}

.inbox{background:var(--navy-800); border:1px dashed var(--navy-600); border-radius:10px; padding:14px 16px; margin-bottom:20px; font-size:12.5px; color:var(--text-mid);}
.inbox b{color:var(--text-hi);}
.inbox .code{font-family:var(--font-mono); font-size:20px; letter-spacing:.15em; color:var(--verde); margin-top:6px; display:block;}

.toast{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:18px;}
.toast-ok{background:rgba(47,191,113,.1); border:1px solid rgba(47,191,113,.3); color:var(--verde);}
.toast-err{background:rgba(229,72,77,.1); border:1px solid rgba(229,72,77,.3); color:var(--rosso);}

.progress-ring-row{display:flex; align-items:center; gap:18px; margin-bottom:26px;}
.ring{width:58px; height:58px; border-radius:50%; flex-shrink:0;}
.ring span{width:44px; height:44px; border-radius:50%; background:var(--navy-950); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; margin:7px;}

.module-list{display:flex; flex-direction:column; gap:9px;}
.module-row{display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--navy-800); border:1px solid var(--line); border-radius:10px;}
.module-row.is-locked{opacity:.45;}
.module-icon{width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px;}
.module-row.is-done .module-icon{background:var(--verde); color:#062314;}
.module-row.is-current .module-icon{background:var(--obbligo); color:#fff;}
.module-row.is-locked .module-icon{background:var(--navy-700); color:var(--text-low);}
.module-name{font-size:13.5px; font-weight:500;}
.module-meta{font-size:11.5px; color:var(--text-low); margin-top:1px;}
.module-row .btn{margin-left:auto; padding:9px 16px; font-size:13px;}

.player{background:var(--navy-800); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.player video{width:100%; display:block; background:#000; aspect-ratio:16/9;}
.player__bar{padding:14px 18px; display:flex; flex-direction:column; gap:10px;}
.seek{height:8px; background:var(--navy-700); border-radius:99px; position:relative; cursor:pointer;}
.seek__fill{position:absolute; inset:0 auto 0 0; width:0%; background:var(--obbligo); border-radius:99px; transition:width .1s linear;}
.seek__thumb{position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--obbligo);}
.player__time{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; color:var(--text-low);}
.lock-note{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ambra); background:rgba(242,169,59,.08); border:1px solid rgba(242,169,59,.25); border-radius:8px; padding:9px 12px; opacity:0; max-height:0; overflow:hidden; transition:.25s ease;}
.lock-note.is-shown{opacity:1; max-height:60px; margin-top:4px;}
.player__controls{display:flex; gap:10px;}

.quiz-progress{font-family:var(--font-mono); font-size:11.5px; color:var(--text-low); margin-bottom:12px;}
.quiz-q{font-size:15px; font-weight:500; margin-bottom:16px;}
.quiz-opt{display:flex; align-items:center; gap:12px; padding:13px 16px; margin-bottom:9px; background:var(--navy-800); border:1px solid var(--navy-600); border-radius:9px; cursor:pointer; transition:.15s ease; font-size:14px;}
.quiz-opt:hover{border-color:var(--obbligo-soft);}
.quiz-opt.is-selected{border-color:var(--obbligo); background:rgba(61,127,255,.08);}
.quiz-opt.is-correct{border-color:var(--verde); background:rgba(47,191,113,.08);}
.quiz-opt.is-wrong{border-color:var(--rosso); background:rgba(229,72,77,.08);}
.quiz-opt input{accent-color:var(--obbligo); pointer-events:none;}

.cert-doc{background:#0e1a38; border:1px solid var(--navy-600); border-radius:12px; padding:32px; position:relative; margin-bottom:20px;}
.cert-doc::before{content:''; position:absolute; inset:0; border:1px solid rgba(123,167,255,.25); margin:10px; border-radius:8px; pointer-events:none;}
.cert-seal{width:70px; height:70px; border-radius:50%; background:var(--obbligo); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:10.5px; text-align:center; line-height:1.2; margin-bottom:18px; box-shadow:0 0 0 5px rgba(61,127,255,.18);}
.cert-title{font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:4px;}
.cert-sub{color:var(--text-mid); font-size:12.5px; margin-bottom:20px;}
.cert-row{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line);}
.cert-row span:first-child{color:var(--text-low);}
.cert-code{font-family:var(--font-mono); color:var(--obbligo-soft);}

.reset-link{display:block; text-align:center; margin-top:30px; font-size:12px; color:var(--text-low); cursor:pointer; text-decoration:underline; background:none; border:none;}
.badge-ph{font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-low); background:var(--navy-800); border:1px solid var(--navy-600); padding:3px 8px; border-radius:5px;}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.errore-box{max-width:640px;margin:60px auto;padding:0 22px;}