/* Recorded classes page. Colours and fonts come from style.css */
.cls{min-height:100vh;min-height:100dvh;background:#eef9f5;display:flex;flex-direction:column}
.cls-bar{background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 28px}
.cls-logo img{display:block;width:auto;height:96px;background:none;object-fit:contain}
.cls-actions{display:flex;align-items:center;gap:20px}
.cls-link{font-size:14px;font-weight:600}
.cls-link:hover{text-decoration:underline}
.cls-out{font:inherit;font-size:13px;font-weight:600;color:#fff;background:none;border:2px solid var(--brand-2);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .3s,color .3s}
.cls-out:hover{background:var(--brand-2);color:var(--on)}
.cls-main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:24px 28px 48px;display:flex;flex-direction:column}
.cls-banner{background:#fff4d6;color:#5c4300;border-radius:12px;padding:11px 16px;font-size:14px;font-weight:500;margin-bottom:18px}

.cls-locked{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 0}
.cls-locked[hidden],.cls-room[hidden]{display:none}
.lock{width:68px;height:68px;border-radius:50%;background:var(--grad);display:grid;place-items:center}
.lock svg{width:30px;height:30px;fill:none;stroke:var(--on);stroke-width:1.700;stroke-linecap:round;stroke-linejoin:round}
.cls-locked h1{font-size:clamp(30px,4vw,44px)}
.cls-locked p{max-width:440px;color:#44504d;font-size:17px;line-height:1.5;margin-bottom:8px}

.cls-room{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.cls-frame{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--dark);box-shadow:0 30px 60px -36px rgba(10,47,44,.6)}
.cls-frame video,.cls-frame iframe{display:block;width:100%;height:100%;border:0}
.cls-player h1{font-size:clamp(23px,2.6vw,30px);margin-top:18px}
.cls-meta{color:#5b6764;font-size:15px;margin-top:6px}
.cls-list{background:#fff;border-radius:20px;padding:18px 12px 12px}
.cls-list h2{font-size:18px;letter-spacing:-.02em;padding:0 10px 12px}
.cls-list h2 span{color:#5b6764;font-weight:500}
.cls-list ol{list-style:none;display:grid;gap:4px;max-height:560px;overflow:auto}
.cls-list button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-radius:12px;padding:11px 10px;cursor:pointer;transition:background .25s}
.cls-list button:hover{background:#eef9f5}
.cls-list button[aria-current=true]{background:#dcf3ea}
.cls-list i{flex:none;width:30px;height:30px;border-radius:50%;background:#e7f6f0;color:#0d7a70;font-style:normal;font-size:13px;font-weight:700;display:grid;place-items:center}
.cls-list button[aria-current=true] i{background:var(--grad);color:var(--on)}
.cls-list b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.cls-list small{display:block;color:#5b6764;font-size:13px;margin-top:3px}

@media(max-width:900px){
 .cls-bar{padding:6px 16px}.cls-logo img{height:80px}
 .cls-main{padding:14px 14px 32px}
 .cls-room{grid-template-columns:1fr;gap:18px}
 .cls-frame{border-radius:14px}
 .cls-list ol{max-height:none}
}
.btn[hidden]{display:none}

/* ===== Change password ===== */
.cls-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px 14px}
.cls-out[hidden]{display:none}
.cls-dlg{border:0;padding:0;margin:auto;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border-radius:20px;color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.cls-dlg::backdrop{background:rgba(6,36,33,.55)}
.cls-dlg form{display:grid;gap:13px;padding:22px}
.cls-dlg h2{font-size:23px}
.cls-dlg label{display:grid;gap:6px;font-size:14px;font-weight:600}
.cls-dlg input{width:100%;font:inherit;font-size:16px;font-weight:400;padding:11px 13px;border:1.5px solid #d5e0dc;border-radius:11px;outline:0}
.cls-dlg input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(29,170,158,.18)}
.cls-pw-msg{font-size:14px;line-height:1.4;color:#8a1f15;min-height:20px}
.cls-pw-msg.ok{color:#0a5f57;font-weight:600}
.cls-dlg-act{display:flex;justify-content:flex-end;gap:10px}
.cls-cancel,.cls-save{font:inherit;font-size:14px;font-weight:600;border:0;border-radius:11px;padding:11px 16px;cursor:pointer}
.cls-cancel{background:#eef2f1;color:#33403d}
.cls-save{background:var(--grad);color:var(--on);font-weight:700}
.cls-save[hidden]{display:none}
.cls-save:disabled{opacity:.6;cursor:default}
@media(max-width:520px){.cls-link{display:none}.cls-out{padding:8px 12px;font-size:12px}}