/* Visual theme matching the classroom PPT. Behaviour stays in app.js. */
:root{color-scheme:dark;--bg:#19192d;--ink:#f5f2ff;--muted:#b5add1;--green:#b29aff;--line:#463b6a;--soft:#2b2546;--warm:#32243f;--pink:#ff5b96;--violet:#9571ff;--play:#18513f}
html{min-height:100%;background:#19192d}body{position:relative;background:transparent;color:var(--ink);isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-2;background:#19192d url('/assets/music-party-background.webp') no-repeat center top;background-size:cover;pointer-events:none}
body::after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,25,45,.92) 0%,rgba(25,25,45,.88) 38%,rgba(25,25,45,.30) 76%,rgba(25,25,45,.3)),linear-gradient(0deg,rgba(25,25,45,.96),transparent 70%);pointer-events:none}
.site-header{border-color:#b091ff24;background:#19192d55;padding:18px 32px;gap:15px}.brand{gap:13px;font-size:19px;letter-spacing:.5px}.brand-logo{width:52px;height:52px;flex-shrink:0;object-fit:cover;border-radius:13px;border:1px solid #a47dff75;box-shadow:0 0 20px #945bff24}.brand-tag{color:#aca0d6;font-size:9px;letter-spacing:2.5px;margin-left:16px}.teacher-link{color:#d2c3ff;border:1px solid #6d579575;padding:8px 14px;border-radius:999px;background:#29233c9e;font-size:12px}.teacher-link:hover{border-color:#bd8cff;background:#3c2d59}
main{padding-top:38px}.hero{min-height:248px;grid-template-columns:minmax(0,1fr);padding:16px 0 20px;margin-bottom:24px}.hero>div:first-child{max-width:760px}.chapter-label{display:flex;align-items:center;gap:12px;color:#d3c6ff;font-size:11px;letter-spacing:3px;font-weight:700;margin-bottom:20px}.chapter-label span{font-size:29px;line-height:1;background:linear-gradient(120deg,#8058ff,#ff5c9c);background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:-1px}.hero .eyebrow{font-size:10px;color:#a397c3;letter-spacing:3px;margin-bottom:12px}h1{letter-spacing:-1px;font-weight:800}.hero h1{font-size:clamp(36px,4.6vw,54px);line-height:1.35;margin-bottom:18px}.hero h1 span{display:inline-block;background:linear-gradient(100deg,#d5baff,#ff82b0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:.72em;white-space:normal}.hero p{max-width:620px;color:#c0b8d6;font-size:14px;line-height:1.9}.record{display:none!important}
.card{background:rgba(36,32,57,.94);border:1px solid #68518b70;box-shadow:0 12px 32px #09071322;border-radius:20px}.card h2,.card h3{color:#f7f3ff}.card.empty{color:#c6b9e2}.note,.muted{color:#b2a7ca}.chip{background:#32294d;color:#dfd3ff;border:1px solid #8260b050;padding:5px 13px}.chip.warm{color:#ffbdd5;background:#43283d}.banner{background:#362a41e8;border-color:#a066925c;color:#ead2df}.statusline{margin-bottom:4px}.join{margin-top:22px}.join h3{font-size:19px}.groups{gap:12px}.group{background:#221e35;color:#c7badf;border-color:#604975a8}.group:hover:not(:disabled){background:#39294f;border-color:#a780e2}.group.selected{background:linear-gradient(115deg,#7652c5,#ad4e87);color:#fff;border-color:#c39aff;box-shadow:0 0 20px #a471ff1c}.group:disabled{opacity:.72}
.grid{gap:22px}.module{min-height:245px;background:linear-gradient(125deg,#2e2543ed,#221f37ed)}.module .module-no{color:#a798c5;margin-bottom:30px;font-size:10px;letter-spacing:2.5px}.module h2{font-size:25px;margin-bottom:11px}.module p{color:#b9accf}.module-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid #7b5aa16b;background:#44345b55;right:24px;top:21px;color:#c0a1ff}.module-icon svg{width:24px;height:24px}.primary{background:linear-gradient(105deg,#7954d8,#aa4d9a);color:#fff;border:1px solid #b38be55e;box-shadow:0 4px 18px #7e3fb51f}.primary:hover:not(:disabled){filter:brightness(1.14);box-shadow:0 0 20px #b774f133}.secondary{background:#362b4e;color:#e1d4ff;border:1px solid #7c5ba06e}.secondary:hover:not(:disabled){background:#47325f;border-color:#b17de4}.danger{background:#4b273f;color:#ffb5ce;border:1px solid #a952797a}.thin-link{color:#c4adf5}.thin-link:hover{color:#ff9dc1}.back{color:#c7b7e3}.back:hover{color:#fff}.eyebrow{color:#a79ac5}
.narrow{max-width:720px}.question-card{padding:28px}.question-card h2{font-size:25px;line-height:1.55;margin-bottom:20px}.question-card>.eyebrow{color:#b4a1d0;letter-spacing:2.5px}.steps{gap:9px}.steps span{background:#382e4a;height:4px}.steps span.done{background:linear-gradient(90deg,#9270ff,#f563a0);box-shadow:0 0 9px #bb7dff3b}.listening-flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 18px}.listening-flow:empty{display:none}.listening-flow span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;color:#eadfff;font-size:12px;font-weight:700;border:1px solid #8063b774;background:#34294f;border-radius:14px}.listening-flow span svg{width:15px;height:15px;color:#bd9cff}.listening-flow span:nth-of-type(2) svg{color:#ff619e}.listening-flow i{font-size:20px;font-style:normal;color:#795ba4}
.player{border:1px solid #7354a66b;border-radius:18px;background:linear-gradient(135deg,#302640,#242039);padding:22px;margin:20px 0 24px}.waveform-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.waveform-label span{display:flex;align-items:center;gap:8px;color:#d8c8ff;font-size:11px;letter-spacing:1px;font-weight:750}.waveform-label svg{width:15px;height:15px;color:#aa80ff}.waveform-label small{font-size:10px;color:#b1a1c7}.wave{height:88px;gap:4px;margin:8px 0 12px;align-items:center}.wave i{flex:1;min-width:3px;max-width:10px;border-radius:8px;background:#9b74fa;height:var(--h)}.wave i:nth-child(3n+2){background:#ff5d96}.wave i:nth-child(4n+1){background:#7057f6}.wave i:nth-child(7n){background:#b49bff}.playing .wave i{animation:pulse .65s ease-in-out infinite alternate;animation-delay:var(--d);box-shadow:0 0 8px #9e69ff22}.clock{color:#eee6ff;font-variant-numeric:tabular-nums;font-size:27px}.clock small{color:#ad9fc6}.player video{background:#100e20;border:1px solid #6a4f8e6b;border-radius:12px}.player .note{color:#bdb1d0;font-size:12px}
.player .playback-button{background:#18513f;color:#f5fff9;border:1px solid #4c997c;box-shadow:0 0 18px #2cbb8b15;min-height:47px}.player .playback-button:hover:not(:disabled){background:#216b53;box-shadow:0 0 16px #53d7a92d}.player .playback-button:disabled{opacity:.68;background:#213e36;border-color:#44705f;color:#ceded5}
.audio-question .options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.audio-question .option{flex-direction:column;justify-content:flex-start;text-align:center;gap:12px;padding:18px 10px;min-height:145px;border-radius:16px}.option{background:#241e36;border-color:#5e4979;color:#e9dff7}.option b{background:#302440;border:1px solid #8e6bac75;color:#cfb7ff;border-radius:50%}.audio-question .option b{width:46px;height:46px;font-size:21px;background:#221b35;border:2px dashed #9772d2;box-shadow:0 0 16px #b46af70b;flex-shrink:0}.audio-question .option:nth-child(2) b{color:#ff70a9;border-color:#bc5998}.audio-question .option:nth-child(3) b{color:#c6a3ff;border-color:#8d67bf}.audio-question .option>span{font-size:14px;line-height:1.6;overflow-wrap:anywhere}.option:hover{background:#352445;border-color:#a072cc}.option.selected{border-color:#c693ff;background:#3f2b53;box-shadow:0 0 19px #a45df819}.option.selected b{color:#fff;background:#8e4cad;border-color:#edacdd}.audio-question .option.selected b{background:#9a4e9d;border-style:solid;color:#fff}
progress{accent-color:#a675f2;background:#40324f}progress::-webkit-progress-bar{background:#40324f}progress::-webkit-progress-value{background:linear-gradient(90deg,#8d69fb,#ff659e)}progress::-moz-progress-bar{background:linear-gradient(90deg,#8d69fb,#ff659e)}.score{background:linear-gradient(120deg,#b28aff,#ff7cb4);background-clip:text;-webkit-background-clip:text;color:transparent}.score small{color:#b9a9ce;-webkit-text-fill-color:#b9a9ce}.summary span{color:#c8b9da}.review-row{border-color:#6b4d88}.rank-no{color:#c49bff}.rank-points{color:#f1d7ff}.rank-points small,.rank-card .detail{color:#b6a6c9}
input,select,textarea{color:#eee5f9;background:#1e192e;border-color:#725187}input::placeholder,textarea::placeholder{color:#92829f}input:focus,select:focus,textarea:focus{border-color:#bd8cf4;box-shadow:0 0 0 3px #b97df019;outline:none}input[type=checkbox]{accent-color:#b379ec}label{color:#e3d8ef}.config-question{border-color:#684f7d}.config-options{gap:12px}dialog{background:#272039;color:#f2e8ff;border-color:#8865ac;box-shadow:0 20px 100px #0b071cb3}dialog p{color:#c1b1d1}dialog::backdrop{background:#100c20ba}#notice{background:#49305d;border:1px solid #ae78d0;color:#fff0fb;box-shadow:0 6px 30px #0005}footer{border-color:#9f70c72b;color:#9c90b2;font-size:11px}.rank-card{background:#282039e8}.admin-tools{gap:12px}
@media(min-width:1000px){body::before{background-position:right top;background-size:100% auto}.hero{min-height:275px}.hero>div:first-child{max-width:700px}.grid .module{padding:30px}}
@media(max-width:650px){body::before{background-position:60% top;background-size:auto 100vh}body::after{background:linear-gradient(180deg,#19192dcf 0%,#19192de8 38%,#19192df7 70%)}.site-header{padding:15px 18px;gap:8px}.brand-logo{width:43px;height:43px;border-radius:11px}.brand{font-size:17px;gap:10px}.brand-tag{display:none}.teacher-link{font-size:10px;padding:7px 10px;white-space:nowrap}main{padding:23px 17px 38px}.hero{display:block;min-height:0;padding:7px 0 8px;margin-bottom:22px}.chapter-label{font-size:9px;letter-spacing:2px;margin-bottom:17px;gap:9px}.chapter-label span{font-size:26px}.hero .eyebrow{font-size:8px;letter-spacing:2.2px}.hero h1{font-size:37px;line-height:1.4;margin-bottom:12px}.hero h1 span{font-size:25px;white-space:normal;letter-spacing:0}.hero p{font-size:12px;line-height:1.9;max-width:95%}.card{padding:21px;border-radius:18px}.groups{gap:7px}.group{font-size:13px;min-height:46px;border-radius:11px}.module{min-height:222px}.module h2{font-size:23px}.module p{font-size:12px}.module .module-no{font-size:9px;letter-spacing:2px}.statusline{gap:6px}.statusline>.note{font-size:11px}.join h3{font-size:18px}.question-card{padding:19px 16px}.question-card h2{font-size:22px}.listening-flow{gap:6px;margin-top:5px}.listening-flow span{gap:5px;font-size:11px;padding:6px 9px;border-radius:12px}.listening-flow span svg{width:13px;height:13px}.listening-flow i{font-size:16px}.player{padding:18px 14px}.waveform-label{gap:6px;align-items:flex-start}.waveform-label span{font-size:10px;letter-spacing:.5px}.waveform-label small{display:none}.wave{gap:3px;height:90px}.wave i{min-width:2px;max-width:7px}.audio-question .options{gap:8px}.audio-question .option{min-height:137px;padding:16px 7px;gap:11px}.audio-question .option>span{font-size:12px}.audio-question .option b{width:43px;height:43px;font-size:20px}.clock{font-size:25px}.player .note{font-size:11px}.primary,.secondary,.danger{font-size:13px}.narrow>.note.center{font-size:11px}.rank-card{padding:20px 15px}.rank-points{font-size:26px}.card>.actions{gap:10px}.config-question label{font-size:13px}footer{padding:18px;gap:5px}}
@media(prefers-reduced-motion:reduce){.playing .wave i{animation:none}}