#projectsCard{order:1}
#scratchCard{order:2}
#scoreCard{order:3}
#bookerCard{order:4}
#reflectionCard{margin:16px 0 0;background:#12161c;border:1px solid #303640;padding:16px}
.project-link{cursor:pointer}
.project-link:hover{border-color:var(--gold)}
@media(max-width:650px){
  #projectsCard,#scratchCard,#scoreCard,#bookerCard{order:initial}
}
:root{--bg:#101318;--panel:#181d24;--line:#3a3f47;--text:#f5f0e6;--muted:#a9adb5;--gold:#d6b56d;--red:#bd7777}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,sans-serif}
main{max-width:1050px;margin:0 auto;padding:30px 20px 60px}
h1{font-weight:400;letter-spacing:.03em;margin-bottom:4px}
h2{font-size:18px;font-weight:400;color:var(--gold);margin-top:0}
h3{font-size:16px;font-weight:500;margin-bottom:6px}
.subtitle{color:var(--muted);margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px;margin:16px 0}
button{background:var(--gold);color:#111;border:0;border-radius:5px;padding:9px 13px;margin:4px;cursor:pointer}
button.secondary{background:#303640;color:var(--text)}
button.danger{background:#6d3d42;color:var(--text)}
input,textarea,select{width:100%;background:#0e1116;color:var(--text);border:1px solid #555;border-radius:5px;padding:11px;margin:7px 0;min-height:42px}
select{appearance:auto}
#readingCard > h3{color:var(--gold);font-size:15px;font-weight:500;letter-spacing:.04em;margin:24px 0 8px}
#readingCard .reading-item{padding:7px 0;border:0}
#readingCard .reading-item h3{color:var(--text);font-size:16px;font-weight:500;margin:0 0 4px}
#readingCard details{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
#readingCard details summary{display:inline-block;color:var(--gold);font-size:15px;cursor:pointer;padding:8px 0}
#readingCard details[open]{background:#12161c;border:1px solid var(--line);border-radius:7px;padding:14px 16px;margin-top:24px}
#readingCard details[open] summary{padding-top:0}
.reading-status{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;letter-spacing:.02em;text-transform:capitalize}
.reading-status-queued{background:#3b3424;color:var(--gold)}
.reading-status-in_progress{background:#263b45;color:#a9d7e8}
.reading-status-finished{background:#29382d;color:#a9d5ad}
small,.muted{color:var(--muted)}
.hidden{display:none}
.note{border-top:1px solid var(--line);padding:12px 0}
.status{color:var(--gold)}

#readingCard .reading-section-title{
  margin:28px 0 10px;
  padding:10px 12px;
  border-left:4px solid var(--gold);
  border-bottom:1px solid var(--line);
  font-size:19px;
  font-weight:600;
  letter-spacing:.02em;
}
#readingCard .academic-heading{border-left-color:#8fb8d8}
#readingCard .craft-heading{border-left-color:#d6b56d}
#readingCard .recreational-heading{border-left-color:#a9adb5}
#bookerSearchControls{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
#bookerSearchControls input{flex:1}