:root{--navy:#1f3b73;--navy2:#2a4d93;--acc:#f5a623;--ok:#1c8a4a;--bad:#c0392b;--bg:#f4f6fa;--line:#e3e6ee;--txt:#1d2333;--mut:#6b7387}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--txt);background:var(--bg);font-size:15px;line-height:1.45}
a{color:var(--navy2)}h1{font-size:1.45rem;margin:.2rem 0 .4rem}h2{font-size:1.15rem;margin:0 0 .3rem}h3{font-size:1rem;margin:0 0 .5rem}
.sub{color:var(--mut);font-size:.9rem}
.logo{font-weight:800;font-size:1.5rem;color:var(--navy);text-align:center;margin-bottom:1rem}.logo span{color:var(--acc)}.logo small{display:block;font-size:.8rem;font-weight:600;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.logo.sm{font-size:1.15rem;margin:0;text-decoration:none;color:#fff}
body.auth{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(160deg,#1f3b73,#2a4d93 60%,#3d63b0)}
.auth-card{background:#fff;border-radius:16px;padding:1.6rem;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
label{display:block;font-weight:600;font-size:.9rem;margin:.7rem 0}
input[type=email],input[type=password],input[type=text],input:not([type]),input[inputmode]{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;border:1px solid #cfd5e2;border-radius:10px;font-size:1rem;background:#fff}
input:focus{outline:2px solid var(--navy2);border-color:transparent}
.otp{font-size:1.5rem!important;letter-spacing:.35em;text-align:center;font-family:ui-monospace,Menlo,monospace}
label.check{display:flex;gap:.5rem;align-items:center;font-weight:500}
.btn{display:inline-block;border:1px solid #cfd5e2;background:#fff;color:var(--txt);padding:.6rem 1rem;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy2)}
.btn.ghost{background:transparent}.btn.block{width:100%;margin-top:.5rem;padding:.8rem}
.alert{padding:.7rem .9rem;border-radius:10px;margin:0 0 1rem;background:#e9f8ef;border:1px solid #bfe8cf}.alert.err{background:#fdecec;border-color:#f5c2c2}.alert.warn{background:#fff6e5;border-color:#f6dca6}
.steps{display:flex;gap:.3rem;margin-bottom:1rem}.steps b{flex:1;text-align:center;font-size:.75rem;padding:.35rem 0;border-radius:20px;background:#eef0f4;color:var(--mut)}.steps b.on{background:var(--navy);color:#fff}.steps b.done{background:#e1f6e8;color:var(--ok)}
.qr{width:210px;margin:.5rem auto;background:#fff}.qr svg{width:100%;height:auto}
.howto{padding-left:1.2rem;margin:.6rem 0}.howto li{margin:.25rem 0}
details{margin:.4rem 0;font-size:.9rem}code{background:#f1f3f8;padding:.1rem .35rem;border-radius:5px}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.8rem 0}.codes code{text-align:center;padding:.45rem;font-size:1rem}
.bar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;position:sticky;top:0;z-index:5}
.bar nav a{color:#dfe6f5;text-decoration:none;margin-left:1rem;font-weight:600;font-size:.9rem}.bar nav a:hover{color:#fff}
.wrap{max-width:960px;margin:0 auto;padding:1.2rem 1rem 2rem}
.foot{text-align:center;color:var(--mut);font-size:.85rem;padding:1rem 1rem 2rem}
.card,.course{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.course{margin:1rem 0 1.5rem;padding:1.2rem}
.course-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.ring{--p:0;width:64px;height:64px;flex:none;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#e8ebf2 0);display:grid;place-items:center}
.ring span{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.notice{background:#fff6e5;border:1px solid #f6dca6;border-radius:10px;padding:.7rem .9rem;margin-bottom:.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem}
.payrow{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}.payrow.total{border:0;font-size:1rem}
.due{color:var(--bad)}.ok{color:var(--ok)}
h3.sec{margin:1.2rem 0 .5rem}
.sessions{list-style:none;padding:0;margin:0}.sessions li a{display:flex;gap:.8rem;align-items:center;padding:.7rem .4rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--txt)}
.sessions li a:hover{background:#f7f8fb}.sessions .num{width:32px;height:32px;flex:none;border-radius:50%;background:#eef0f4;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.sessions li.ok .num{background:var(--ok);color:#fff}.sessions .t{display:flex;flex-direction:column}.sessions small{color:var(--mut)}
.empty{color:var(--mut);background:#f7f8fb;border:1px dashed var(--line);border-radius:10px;padding:1rem;text-align:center}
.player{width:100%;max-height:70vh;background:#000;border-radius:10px;margin:.6rem 0}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem}.row form{margin:0}
.notes{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
@media (max-width:560px){.bar nav a{margin-left:.6rem;font-size:.82rem}.logo.sm{font-size:1rem}.wrap{padding:1rem .7rem}}