:root { color-scheme: light dark; --page: light-dark(#f2f5f2,#151e1a); --paper: light-dark(#fff,#202a24); --ink: light-dark(#20362b,#e6eee8); --quiet: light-dark(#52685b,#a8baaf); --line: light-dark(#cedbd2,#495950); --green: light-dark(#226345,#a6dbb8); --on-green: light-dark(#fff,#152b1d); font: 16px/1.55 system-ui,sans-serif; background:var(--page); color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
header { background:var(--paper); border-bottom:1px solid var(--line); padding:15px 0; }
.shell { width:min(100% - 36px, 780px); margin:auto; }
main { padding:26px 0 42px; }
.bar,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.bar { justify-content:space-between; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(1.65rem,4vw,2rem); margin-bottom:16px; }
h2 { font-size:1.22rem; }
h3 { font-size:1rem; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:clamp(15px,4vw,24px); margin-bottom:18px; min-width:0; }
.quiet,#student,.tag { font-size:.88rem; }
.quiet,#student { color:var(--quiet); }
.tag { color:var(--green); }
.assignment { margin-bottom:18px; }
details { margin-top:10px; }
details > p { margin-top:8px; }
summary,button { cursor:pointer; }
button,input,select,textarea { font:inherit; border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--paper); color:var(--ink); }
button:disabled { cursor:default; opacity:.55; }
.primary { background:var(--green); color:var(--on-green); border-color:var(--green); }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
label { display:grid; gap:5px; margin:12px 0; }
input,select,textarea { width:100%; min-width:0; }
.fields { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
dl { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:8px 16px; margin:18px 0; }
dt { color:var(--quiet); }
dd { margin:0; overflow-wrap:anywhere; }
.actions,#submission { margin-top:14px; }
#edit,#observation,.subsection { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
fieldset { border:0; padding:0; margin:14px 0; }
.check { display:flex; align-items:center; gap:8px; margin:6px 0; min-height:34px; }
.check input { width:auto; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; }
#message { margin-bottom:14px; color:light-dark(#963828,#ffa98e); }
#history details { border-top:1px solid var(--line); padding-top:8px; }
#teacher-list { padding-left:20px; }
#teacher-list li { margin-bottom:8px; }
@media (max-width:520px) { .fields { grid-template-columns:1fr; gap:0; } dl { grid-template-columns:1fr; gap:2px; } dd { margin-bottom:8px; } }
progress { display:block; width:100%; height:10px; margin:16px 0; accent-color:var(--green); }
#step-progress { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
#step-progress li { color:var(--quiet); }
#step-progress [data-state="current"] { color:var(--ink); font-weight:600; }
#step-progress [data-state="done"],.step-success { color:var(--green); }
.step-success { display:block; margin:8px 0; font-weight:600; }
#step-title { margin-bottom:10px; }
#notice { position:fixed; bottom:24px; right:24px; z-index:20; display:flex; align-items:center; gap:16px; padding:14px 18px; max-width:min(420px,calc(100% - 32px)); border-radius:8px; background:#176b42; color:#fff; border:0; box-shadow:0 8px 24px #102a1d40; }
#notice[data-kind="error"] { background:#b42318; color:#fff; }
#notice-close { color:inherit; border:0; background:transparent; padding:8px; }
@media (max-width:520px) { #notice { right:16px; bottom:16px; } }