/* Period skin — evokes the 1999 Heinemann/LANGMaster TOEFL CD: periwinkle ground,
   navy beveled headings, red accents, embossed Win9x-style panels. */
:root{
  --peri:#8f9cc0; --peri-lt:#c3cbe1; --paper:#eef1f8; --panel:#e2e7f2;
  --navy:#16336e; --navy2:#24478f; --red:#b81f28; --ink:#1a2236;
  --dim:#5b678a; --line:#9aa6c6; --good:#1e874b; --bad:#c0392b;
  --up:#ffffff; --dn:#7c88ab; /* bevel light / shadow */
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);
  background:var(--peri);
  background-image:linear-gradient(180deg,#9aa7cb,#7e8cb4 60%,#717fab);
  font:15px/1.5 "Trebuchet MS",Tahoma,"Segoe UI",system-ui,sans-serif}

/* header — product title bar */
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.55rem 1rem;position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-bottom:2px solid #0d2350;box-shadow:0 2px 6px #0004}
h1{margin:0;font-size:1.15rem;color:#eaf0ff;letter-spacing:.5px;
  text-shadow:1px 1px 0 #0b1d45}
h1 span{color:#ffd94a;font-style:italic}
.homelink{color:#cfe0ff;text-decoration:none;font-size:.85rem;border:1px solid #ffffff40;
  padding:.25rem .55rem;border-radius:4px;margin-right:.3rem}
.homelink:hover{background:#ffffff1f}
.pickers{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
label{color:#cdd9f5;font-size:.82rem;display:flex;gap:.35rem;align-items:center}

/* beveled controls */
select,.mode,.check{font-family:inherit;font-size:.85rem;color:var(--ink);
  background:linear-gradient(180deg,#fff,#dfe4f0);
  border:1px solid;border-color:var(--up) var(--dn) var(--dn) var(--up);
  border-radius:3px;padding:.3rem .55rem;cursor:pointer}
select:active,.mode:active,.check:active{border-color:var(--dn) var(--up) var(--up) var(--dn)}
button{cursor:pointer;font-family:inherit}
.segbtns{display:flex;gap:2px}
.segbtns button{font-size:.82rem;color:var(--navy);font-weight:600;padding:.32rem .7rem;
  background:linear-gradient(180deg,#eef1f8,#c8d0e6);
  border:1px solid;border-color:var(--up) var(--dn) var(--dn) var(--up);border-radius:3px 3px 0 0}
.segbtns button.active{background:linear-gradient(180deg,#fff,#e6ebf6);color:var(--red);
  border-bottom-color:#fff}
.mode.on{color:var(--red);font-weight:600}
.check{color:#fff;background:linear-gradient(180deg,#2e56a8,#183a7e);border-color:#5f7dc0 #0d2350 #0d2350 #5f7dc0}
.score{color:#fff2b0;font-weight:700;font-size:.9rem;min-width:5rem;text-align:right;text-shadow:1px 1px 0 #0b1d45}

/* audio player */
#player{position:sticky;top:3.1rem;z-index:9;max-width:940px;margin:1rem auto 0;
  background:var(--panel);padding:.7rem .9rem;border:2px solid;
  border-color:var(--up) var(--dn) var(--dn) var(--up)}
.nowplaying{display:flex;justify-content:space-between;margin-bottom:.4rem;color:var(--navy);font-weight:600}
.time{color:var(--dim);font-variant-numeric:tabular-nums;font-size:.82rem}
.controls{display:flex;align-items:center;gap:.7rem}
.play{width:38px;height:38px;border-radius:50%;flex:0 0 auto;color:#fff;font-size:.95rem;
  background:radial-gradient(circle at 35% 30%,#3a63bd,#16336e);border:1px solid #0d2350}
.seek{flex:1;accent-color:var(--navy)} .rate{white-space:nowrap;color:var(--navy)}

main{max-width:940px;margin:1.1rem auto;padding:0 1rem}
.status{color:#e9edf8}
.part{margin-bottom:1.8rem}
.part h2{font-size:1.05rem;color:#fff;letter-spacing:.5px;text-transform:uppercase;
  background:linear-gradient(180deg,var(--red),#8f151c);padding:.4rem .7rem;
  border:1px solid; border-color:#e88 #6a0f14 #6a0f14 #e88;margin:0 0 1rem;
  text-shadow:1px 1px 0 #5a0d12}

/* reading passage */
.passage{background:var(--paper);padding:1rem 1.2rem;margin-bottom:1.1rem;line-height:1.7;
  border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up)}
.passage p{margin:.55rem 0}

/* listening block */
.block{background:var(--panel);padding:.9rem 1rem;margin-bottom:.9rem;
  border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up)}
.bhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;color:var(--navy);font-weight:700}
.playseg{font-size:.8rem;color:#fff;background:linear-gradient(180deg,#2e56a8,#16336e);
  border:1px solid;border-color:#5f7dc0 #0d2350 #0d2350 #5f7dc0;border-radius:3px;padding:.25rem .6rem}
.transcript{margin:.35rem 0 .8rem;color:#333;line-height:1.9;background:#fbfcff;padding:.5rem .6rem;
  border:1px solid var(--line)}
.transcript.blurred{filter:blur(5px);opacity:.5;user-select:none}
.line{padding:.03rem .2rem;border-radius:3px;cursor:pointer}
.line:hover{background:#dfe6fb}
.line.on{background:#ffe27a;color:#4a3600;font-weight:600}

/* questions */
.q{background:var(--paper);padding:.85rem 1rem;margin-bottom:.75rem;
  border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up)}
.block .q{margin-top:.6rem;background:#fbfcff}
.stem{font-weight:600;color:var(--ink);margin-bottom:.55rem}
.choices{display:grid;gap:.4rem}
.choice{display:flex;gap:.65rem;align-items:center;text-align:left;color:var(--ink);font-size:.95rem;
  background:linear-gradient(180deg,#fff,#e9edf7);padding:.5rem .65rem;border:1px solid;
  border-color:var(--up) var(--dn) var(--dn) var(--up);border-radius:2px}
.choice:hover{background:#eef2fc}
.choice:active{border-color:var(--dn) var(--up) var(--up) var(--dn)}
.choice .letter{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(180deg,#5f7dc0,#2f4f96);border:1px solid #1c356e}
.choice.sel{border-color:var(--navy);box-shadow:0 0 0 2px #2f4f9655}
.choice.sel .letter{background:linear-gradient(180deg,#ffd94a,#e0a800);color:#3a2a00;border-color:#7a5c00}
.choice.correct{background:#e5f6ea;border-color:#8fd0a5} .choice.correct .letter{background:var(--good);border-color:#0f5c30}
.choice.wrong{background:#fbeaea;border-color:#e0a0a0} .choice.wrong .letter{background:var(--bad);border-color:#7a2318}

footer{max-width:940px;margin:0 auto;padding:1rem;color:#e9edf8;font-size:.78rem;opacity:.85}

/* ---- Course / Lessons viewer ---- */
.learn{max-width:1000px;margin:1rem auto;padding:0 1rem;display:grid;
  grid-template-columns:220px 1fr;grid-template-areas:"cat cat" "pages prose";gap:1rem}
.catnav{grid-area:cat;display:flex;flex-wrap:wrap;gap:2px}
.catnav .catbtn{font-size:.85rem;color:var(--navy);font-weight:600;padding:.35rem .8rem;
  background:linear-gradient(180deg,#eef1f8,#c8d0e6);border:1px solid;
  border-color:var(--up) var(--dn) var(--dn) var(--up);border-radius:3px 3px 0 0}
.catnav .catbtn.active{background:linear-gradient(180deg,var(--red),#8f151c);color:#fff;
  border-color:#e88 #6a0f14 #6a0f14 #e88}
.pagenav{grid-area:pages;display:flex;flex-direction:column;gap:3px;max-height:74vh;overflow:auto;
  align-self:start;position:sticky;top:3.4rem}
.pagebtn{text-align:left;font-size:.82rem;color:var(--ink);padding:.4rem .55rem;
  background:linear-gradient(180deg,#fff,#e9edf7);border:1px solid;
  border-color:var(--up) var(--dn) var(--dn) var(--up);border-radius:2px;line-height:1.3}
.pagebtn.active{background:linear-gradient(180deg,#fff7d9,#ffe27a);border-color:#e0b400}
.prose{grid-area:prose;background:var(--paper);padding:1.2rem 1.5rem;line-height:1.7;
  border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up);min-height:60vh}
.prose h2{color:#fff;background:linear-gradient(180deg,var(--red),#8f151c);margin:-1.2rem -1.5rem 1rem;
  padding:.5rem .8rem;font-size:1.05rem;border-bottom:1px solid #6a0f14}
.prose p{margin:.6rem 0}
.prose b{color:var(--navy)}
.pend{color:var(--red);font-style:italic;font-size:.85rem;font-weight:normal}
@media(max-width:640px){.learn{grid-template-columns:1fr;grid-template-areas:"cat" "pages" "prose"}
  .pagenav{position:static;max-height:none;flex-direction:row;flex-wrap:wrap}}

/* ---- Notebook ---- */
#nbBtn{position:fixed;right:14px;bottom:14px;z-index:30;font-size:.85rem;color:#fff;
  background:linear-gradient(180deg,#2e56a8,#16336e);border:1px solid #0d2350;border-radius:20px;
  padding:.5rem .9rem;box-shadow:0 3px 10px #0005}
#nbBtn:hover{background:linear-gradient(180deg,#3a63bd,#1c3f86)}
#nbModal{position:fixed;inset:0;z-index:31;background:#0a1024aa;display:grid;place-items:center}
#nbModal[hidden]{display:none}
.nb-box{width:min(560px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:.6rem;
  background:var(--paper);border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up);
  padding:1rem;border-radius:4px}
.nb-head{display:flex;justify-content:space-between;align-items:center;color:var(--navy);font-size:1.05rem}
.nb-x{background:none;border:none;font-size:1rem;color:var(--navy)}
.nb-new{width:100%;min-height:70px;font-family:inherit;font-size:.9rem;padding:.5rem;
  border:1px solid var(--line);border-radius:3px;resize:vertical}
.nb-row{display:flex;gap:.5rem;align-items:center}
.nb-add{color:#fff;background:linear-gradient(180deg,#2e56a8,#16336e);border:1px solid #0d2350;
  border-radius:3px;padding:.4rem .8rem;font-size:.85rem}
.nb-search{flex:1;padding:.4rem .5rem;border:1px solid var(--line);border-radius:3px;font-family:inherit}
.nb-list{overflow:auto;display:flex;flex-direction:column;gap:.5rem}
.nb-item{background:#fff;border:1px solid var(--line);border-radius:3px;padding:.5rem .6rem}
.nb-meta{font-size:.72rem;color:var(--dim);display:flex;justify-content:space-between;margin-bottom:.25rem}
.nb-del{background:none;border:none;color:var(--bad);font-size:.72rem;cursor:pointer}
.nb-text{white-space:pre-wrap;font-size:.9rem}
.nb-empty{color:var(--dim);text-align:center}

/* ---- Personal Plan / Progress ---- */
.planwrap{max-width:800px;margin:1.1rem auto;padding:0 1rem}
.ptest{background:var(--paper);border:2px solid;border-color:var(--up) var(--dn) var(--dn) var(--up);
  padding:.8rem 1rem;margin-bottom:.8rem}
.ptest h3{margin:.1rem 0 .6rem;color:var(--navy)}
.prow{display:grid;grid-template-columns:90px 1fr auto;gap:.6rem;align-items:center;margin:.35rem 0}
.plabel{font-size:.85rem;color:var(--ink)}
.pbar{height:14px;background:#d3daea;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pbar span{display:block;height:100%}
.pnum{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.prose ul,.passage ul{margin:.4rem 0;padding-left:1.3rem} .passage li{margin:.3rem 0}

/* ---- Exercises ---- */
.wlabel{font-size:.82rem;color:var(--dim);margin:.3rem 0 .2rem}
.model{margin-top:.5rem;padding:.4rem .6rem;background:#e5f6ea;border:1px solid #8fd0a5;border-radius:3px;font-size:.9rem}
.ans{color:var(--good);font-weight:600;font-size:.85rem;margin-left:.5rem}
.dropwrap{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0}
.drop{display:inline-flex;align-items:center;gap:.3rem;color:var(--navy);font-size:.9rem}
.drop select{padding:.25rem;border:1px solid var(--line);border-radius:3px;font-family:inherit}
.inputwrap{display:flex;align-items:center;gap:.3rem;margin:.3rem 0}
.exinput{padding:.4rem .5rem;border:1px solid var(--line);border-radius:3px;font-family:inherit;min-width:220px}

/* ---- Explanations (review mode) ---- */
.expl{margin-top:.6rem;padding:.55rem .7rem;background:#fbf7e6;border:1px solid #e6d48a;
  border-radius:3px;font-size:.9rem;line-height:1.5;color:#453b1a}
.expl b{color:var(--navy)}

/* ---- Timer / scaled score ---- */
.timer{color:#ffd94a;font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem;min-width:4rem;text-shadow:1px 1px 0 #0b1d45}
.tscore{color:var(--good);font-size:.85rem;font-weight:600}
.pnote{font-size:.78rem;color:var(--dim);margin-top:.3rem}