:root { --fg:#1c1c1c; --muted:#666; --bg:#fafafa; --card:#fff; --line:#ddd; --accent:#0b5cad; --danger:#b3261e; --ok:#1b7f3b; --warn:#a15c00; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
header.top { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1.2rem; background:#fff; border-bottom:1px solid var(--line); }
header .brand { font-weight:700; color:var(--fg); text-decoration:none; }
header nav { display:flex; gap:1rem; align-items:center; }
header .who { color:var(--muted); }
main { max-width: 1100px; margin: 1.2rem auto; padding: 0 1.2rem; }
main.wide { max-width: none; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; } h2 { font-size:1.15rem; margin:.2rem 0 .6rem; }
a { color:var(--accent); }
.muted { color:var(--muted); font-weight:400; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.card.narrow { max-width: 420px; margin: 3rem auto; }
ul.cards { list-style:none; padding:0; margin:0 0 1rem; }
.table { width:100%; border-collapse:collapse; margin:.5rem 0 1rem; }
.table th, .table td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table th { font-weight:600; color:var(--muted); font-size:.9rem; }
form.grid { display:grid; grid-template-columns: 1fr 1fr; gap:.7rem 1rem; align-items:end; margin-top:.5rem; }
form.grid .wide { grid-column: 1 / -1; }
form.grid button { justify-self:start; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.92rem; color:var(--muted); }
input, select, textarea { font:inherit; color:var(--fg); padding:.45rem .55rem; border:1px solid #bbb; border-radius:6px; background:#fff; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem; }
button { font:inherit; padding:.5rem .9rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); }
button.link { background:none; border:none; color:var(--accent); padding:0; text-decoration:underline; cursor:pointer; }
button.link.danger { color:var(--danger); }
form.inline { display:inline; }
details > summary { cursor:pointer; color:var(--accent); margin:.3rem 0; }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; background:#e8f1fb; border:1px solid #b7d3f2; }
.flash-error { background:#fbe9e7; border-color:#f1b5ad; }
.error { color:var(--danger); }
.ok { color:var(--ok); } .warn { color:var(--warn); }
.pill { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.8rem; border:1px solid var(--line); background:#f3f3f3; }
.pill.ok { background:#e6f4ea; border-color:#b7dfc2; } .pill.warn { background:#fff4e5; border-color:#f3cf9a; }
hr { border:none; border-top:1px solid var(--line); margin:1rem 0; }

/* page assignment */
.pages-layout { display:grid; grid-template-columns: 260px 1fr; gap:1rem; align-items:start; }
.qlist { position:sticky; top:1rem; }
.qlist button.q { display:flex; justify-content:space-between; width:100%; text-align:left; background:#fff; color:var(--fg); border:1px solid var(--line); margin-bottom:.35rem; padding:.45rem .6rem; }
.qlist button.q.active { border-color:var(--accent); box-shadow: 0 0 0 2px #cfe1f7; }
.qlist button.q .count { color:var(--muted); font-size:.85rem; }
.qlist button.q.unassigned .count { color:var(--warn); }
.thumbs { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:.8rem; }
.thumb { background:#fff; border:2px solid var(--line); border-radius:6px; padding:.4rem; cursor:pointer; user-select:none; }
.thumb.assigned-active { border-color:var(--accent); background:#eef5fd; }
.thumb canvas { width:100%; height:auto; display:block; border:1px solid #eee; background:#fff; }
.thumb .meta { display:flex; justify-content:space-between; align-items:center; margin-top:.3rem; font-size:.85rem; color:var(--muted); }
.thumb .tags { display:flex; flex-wrap:wrap; gap:.2rem; }
.thumb .tags span { background:#e8f1fb; border:1px solid #b7d3f2; color:var(--accent); border-radius:4px; padding:0 .3rem; font-size:.78rem; }
.sticky-actions { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:.6rem 0; margin-top:1rem; display:flex; gap:1rem; align-items:center; }
.dropzone { border:2px dashed #bbb; border-radius:8px; padding:1.4rem; text-align:center; color:var(--muted); background:#fff; }
.dropzone.over { border-color:var(--accent); background:#eef5fd; }
kbd { font: .8rem ui-monospace, Menlo, monospace; background:#f3f3f3; border:1px solid #ccc; border-bottom-width:2px; border-radius:4px; padding:0 .3rem; }

/* grading screen */
main.wide { max-width:none; padding:0 1rem; margin-top:.6rem; }
.grade-top { display:flex; gap:1rem; align-items:center; padding:.4rem .2rem .6rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.grade-top .spacer, .viewer-bar .spacer { flex:1; }
.grade-top select { max-width:260px; }
button.small { padding:.25rem .6rem; font-size:.9rem; }
.grade-layout { display:grid; grid-template-columns: 1fr 400px; gap:1rem; margin-top:.6rem; }
.viewer { min-width:0; }
.viewer-bar { display:flex; gap:.8rem; align-items:center; font-size:.9rem; color:var(--muted); margin-bottom:.4rem; }
.viewer-bar label.inline { flex-direction:row; align-items:center; gap:.3rem; }
.pages { height: calc(100vh - 150px); overflow:auto; background:#e9e9e9; padding:.6rem; border-radius:6px; }
.pages .page { margin:0 auto .8rem; width:max-content; max-width:100%; }
.pages .page canvas { display:block; box-shadow:0 1px 4px rgba(0,0,0,.25); background:#fff; max-width:100%; height:auto; }
.pages .pagenum { font-size:.75rem; color:var(--muted); margin:0 0 .15rem .1rem; }
.rubric { position:sticky; top:.5rem; align-self:start; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; max-height: calc(100vh - 110px); overflow:auto; }
.rubric .score { font-size:1.1rem; margin-bottom:.6rem; } .rubric .score b { font-size:1.4rem; }
.items { list-style:none; padding:0; margin:0 0 .6rem; }
.items li { display:flex; gap:.5rem; align-items:baseline; padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; margin-bottom:.3rem; cursor:pointer; background:#fff; }
.items li.applied { background:#e6f4ea; border-color:#5cb176; }
.items li .pts { min-width:2.6rem; font-variant-numeric: tabular-nums; color:var(--danger); font-weight:600; }
.items li.applied .pts { color:#0b6b2b; }
.items li .desc { flex:1; }
.items li .edit { color:var(--muted); text-decoration:none; }
.items li .edit-form { display:flex; gap:.3rem; flex-wrap:wrap; width:100%; }
.items li .edit-form input[name=d] { flex:1; min-width:10rem; }
.add-item { display:flex; gap:.3rem; margin-bottom:.6rem; } .add-item input:first-child { flex:1; }
.rubric label { margin-top:.5rem; }
.small { font-size:.85rem; }
.progress { display:inline-block; width:120px; height:8px; background:#eee; border-radius:4px; vertical-align:middle; overflow:hidden; }
.progress div { height:100%; background:var(--ok); }
.msg { padding:.5rem 0; border-bottom:1px solid var(--line); } .msg:last-child { border-bottom:none; }
.msg p { margin:.2rem 0 0; }
td .pts { display:inline-block; min-width:2.2rem; font-variant-numeric:tabular-nums; font-weight:600; color:var(--danger); }
.grade-top .qnav { display:flex; gap:.4rem; align-items:center; }
.grade-top .qnav a { text-decoration:none; }
.thumb .meta a { color:var(--accent); text-decoration:none; font-weight:600; }

/* AI grades */
.ai-panel { border:1px solid var(--line); border-radius:6px; padding:.5rem .6rem; margin-bottom:.7rem; background:#f7f9fc; }
.ai-panel.flagged { border-color:#f3cf9a; background:#fff8ee; }
.ai-head { display:flex; gap:.4rem; align-items:baseline; flex-wrap:wrap; }
.ai-head .pill { margin-left:auto; }
.ai-reasons { margin:.35rem 0 .2rem 1.1rem; padding:0; font-size:.88rem; color:var(--warn); }
.ai-q { margin:.35rem 0; font-size:.88rem; }
.ai-actions { margin:.45rem 0 .1rem; }
.ai-transcript { white-space:pre-wrap; font-size:.8rem; max-height:16rem; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:4px; padding:.4rem; margin:.2rem 0 0; }
.ai-evidence { display:block; font-size:.8rem; color:var(--muted); margin-top:.15rem; }
.ai-banner { margin:0 0 .6rem; padding:.35rem .5rem; background:#e8f1fb; border:1px solid #b7d3f2; border-radius:6px; font-size:.9rem; }
.flag { color:var(--warn); font-weight:600; text-decoration:none; }