/* shadcn/ui "neutral" tokens, matching the supplied Button / Input / Label / Separator / form-layout component */
:root {
  --background:#fff; --foreground:#0a0a0a; --card:#fff; --muted:#f5f5f5; --muted-foreground:#737373;
  --border:#e5e5e5; --input:#e5e5e5; --primary:#171717; --primary-foreground:#fafafa; --accent:#f5f5f5;
  --ring:#a3a3a3; --destructive:#dc2626; --radius:8px;
  color-scheme: light;   /* the site is always white */
}
option { background:var(--card); color:var(--foreground) }
* { box-sizing:border-box; border-color:var(--border) }
body { margin:0; background:var(--background); color:var(--foreground); font:16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased }
.top { border-bottom:1px solid var(--border); padding:12px 24px; display:flex; gap:8px; align-items:center; font-size:14px }
.top #who { margin-left:auto; display:flex; gap:12px; align-items:center; color:var(--muted-foreground) }
main { max-width:960px; margin:0 auto; padding:32px 24px }

h2 { margin:28px 0 10px; font-size:20px; font-weight:600 }
h3 { margin:0; font-size:24px; font-weight:600; letter-spacing:-.01em }
.card h3 { font-size:18px }
.sub, .mute { color:var(--muted-foreground); font-size:14px; margin:4px 0 0 }
.rule { font-size:13px; color:var(--muted-foreground); margin:6px 0 16px }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; margin:0 0 16px; box-shadow:0 1px 2px rgba(0,0,0,.05) }

/* Label */
label { display:flex; align-items:center; gap:8px; font-size:14px; line-height:1; font-weight:500; margin:16px 0 8px; user-select:none }
label .req { color:#ef4444 }
.grid > div > label:first-child { margin-top:0 }

/* Input / Select / Textarea */
input, select, textarea { display:flex; width:100%; min-width:0; height:36px; padding:4px 12px; border:1px solid var(--input); border-radius:6px; background:transparent; color:var(--foreground); font:inherit; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.05); outline:none; transition:color .15s, box-shadow .15s }
textarea { height:auto; padding:8px 12px }
input::placeholder { color:var(--muted-foreground) }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent) }
input:disabled, select:disabled, textarea:disabled { cursor:not-allowed; opacity:.5 }
input[type=checkbox] { width:16px; height:16px; padding:0; flex:none; accent-color:var(--primary) }
input[type=file] { padding:3px 8px; font-size:13px }

/* Button (default / outline / ghost-destructive) */
button { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border:1px solid transparent; border-radius:6px; background:var(--primary); color:var(--primary-foreground); font:inherit; font-size:14px; font-weight:500; white-space:nowrap; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:all .15s }
button:hover { opacity:.9 }
button.alt { background:var(--background); color:var(--foreground); border-color:var(--input) }
button.alt:hover { background:var(--accent); opacity:1 }
button.del { height:32px; padding:0 10px; background:transparent; color:var(--destructive); box-shadow:none }
button.del:hover { background:color-mix(in srgb, var(--destructive) 10%, transparent); opacity:1 }
button:disabled { pointer-events:none; opacity:.5 }
button:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent) }

/* Separator + form actions */
.sep { height:1px; border:0; background:var(--border); margin:24px 0 }
.actions { display:flex; align-items:center; justify-content:flex-end; gap:16px }

/* layout */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px 16px }
.entry { display:grid; grid-template-columns:64px 1fr 200px auto; gap:10px; align-items:start; border-top:1px solid var(--border); padding:12px 0 }
.entry .ref { padding-top:26px }
.entry .fileCell { padding-top:22px; font-size:13px; word-break:break-word }
.entry > .del { margin-top:20px }
.fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px }
.fld label { font-size:12px; font-weight:500; color:var(--muted-foreground); margin:0 0 4px }
.fld.wide { grid-column:span 2 }
.glabel { font-weight:600; font-size:14px; margin:18px 0 0 }
.gate { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:4px 0 8px }
.gate label { margin:0; font-weight:400 }
.gate input[type=radio] { width:16px; height:16px; padding:0; accent-color:var(--primary) }
@media (max-width:760px) { .entry { grid-template-columns:1fr } .entry .ref, .entry .fileCell, .entry > .del { padding-top:0; margin-top:0 } .fld.wide { grid-column:auto } main { padding:20px 16px } }
.ref { font-weight:600; font-size:14px }
.marks { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:14px; font-weight:600 }
.warn { color:var(--destructive); font-size:13px; font-weight:400; margin:0 }
.hod { background:var(--muted); border-radius:8px; padding:12px; margin-top:12px; display:grid; grid-template-columns:120px 1fr; gap:12px }
.hod label { margin-top:0 }
.bar { position:sticky; top:0; z-index:5; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 16px; margin-bottom:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px }
.bar .sp { margin-left:auto; display:flex; gap:12px; align-items:center }
table { width:100%; border-collapse:collapse; font-size:14px }
th { color:var(--muted-foreground); font-weight:500 }
td, th { border-bottom:1px solid var(--border); padding:10px 8px; text-align:left }
.badge { display:inline-flex; padding:2px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-weight:500 }
a { color:var(--foreground); text-underline-offset:4px }
.login { max-width:440px; margin:56px auto }
.login form { margin-top:32px }
.period { display:flex; gap:8px; align-items:center }
.period input { min-width:0 }
.period span { color:var(--muted-foreground); font-size:13px }
input[aria-invalid=true] { border-color:var(--destructive); box-shadow:0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent) }
.note { background:var(--muted); border-radius:8px; padding:10px 14px; margin:10px 0 12px; font-size:13px }
.note p { margin:6px 0 }
.todo { border-color:var(--destructive) }
.todo.ok { border-color:#16a34a }
.todo summary { cursor:pointer; font-size:14px }
.todo ul { margin:10px 0 0; padding-left:20px; font-size:13px; max-height:260px; overflow:auto }
.todo li { margin:3px 0 }
.req { color:#ef4444; font-weight:600 }
/* college letterhead at the top of every page */
.brand { border-bottom:1px solid var(--border); padding:14px 16px 12px; text-align:center }   /* same background as the page: no white block */
.brand img { display:block; margin:0 auto; width:100%; max-width:880px; height:auto }