:root { --ink:#1f2430; --muted:#606979; --header:#dfe2eb; --nav:#f1f2f7; --line:#d8dbe5; --blue:#4f6edb; --blue-dark:#3957bf; --green:#43a047; --orange:#d88900; --red:#c94444; --soft-blue:#f5f7ff; }
* { box-sizing:border-box; } html { background:#fff; } body { margin:0; color:var(--ink); background:#fff; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; } a { color:var(--blue); } .page-width { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }.skip-link { position:fixed; z-index:10; left:12px; top:10px; transform:translateY(-150%); background:#111; color:#fff; padding:9px 12px; }.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-header { background:var(--header); border-bottom:1px solid #cdd1dc; }.app-bar { min-height:62px; display:flex; align-items:center; gap:22px; }.brand { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; text-decoration:none; white-space:nowrap; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--blue); color:#fff; border-radius:2px; font:bold 10px/1 ui-monospace,monospace; }.course-context { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }.course-context a { text-decoration:none; }.course-context strong { color:var(--ink); font-weight:600; }.account-menu { margin-left:auto; display:flex; align-items:center; gap:13px; font-size:13px; }.account-name { color:#303746; }.logout-form { display:inline; }.logout-link { appearance:none; border:0; padding:0; background:transparent; color:var(--blue); cursor:pointer; font:inherit; }.secondary-nav { background:var(--nav); border-top:1px solid #d1d4df; }.nav-links { display:flex; gap:0; }.nav-links a { display:block; padding:11px 18px; color:#384253; border-right:1px solid #d9dce5; text-decoration:none; font-weight:600; }.nav-links a:first-child { border-left:1px solid #d9dce5; }.nav-links a:hover,.nav-links a.active { color:var(--blue); background:#fff; }
main { min-height:calc(100vh - 166px); padding-bottom:45px; } footer { border-top:1px solid var(--line); padding-block:19px 34px; color:var(--muted); display:flex; justify-content:space-between; font-size:12px; } h1,h2,h3,p { margin-top:0; }.page-heading { padding:30px 0 20px; }.breadcrumb { margin-bottom:13px; color:var(--muted); font-size:13px; }.breadcrumb a { text-decoration:none; }.breadcrumb span { margin:0 6px; color:#8a91a1; }.page-heading h1 { margin-bottom:7px; font-size:29px; font-weight:500; letter-spacing:-.025em; }.page-heading > p:last-child { max-width:760px; margin-bottom:0; color:#535e6f; font-size:15px; }
.student-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,1fr); gap:18px; margin:10px 0 26px; }.student-panel,.quota-panel { min-height:92px; border:1px solid var(--line); background:#fff; padding:15px 18px; }.student-panel h2,.quota-panel h2 { margin-bottom:7px; color:#4b5565; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.student-identity { margin-bottom:0; font-size:16px; font-weight:600; }.muted { margin:3px 0 0; color:var(--muted); font-size:13px; }.quota-count { margin:0; font-weight:600; }.quota-count strong { margin-right:5px; font-size:19px; }.quota-good strong { color:var(--green); }.quota-low strong { color:var(--orange); }.quota-empty strong { color:var(--red); }.quota-message { margin:5px 0 0; color:#854040; font-size:12px; }
.submission-workspace { border:1px solid var(--line); background:#fff; padding:23px 25px 27px; }.workspace-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:14px; }.workspace-heading h2 { margin:0; font-size:20px; font-weight:500; }.workspace-heading a { font-size:13px; }.instruction { margin:15px 0 22px; color:var(--muted); }.submission-workspace form { display:grid; gap:22px; } fieldset { min-width:0; margin:0; padding:0; border:0; }.selection-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.selection-fields legend { width:100%; margin-bottom:8px; color:#3a4352; font-size:13px; font-weight:700; } label,.field-label { color:#3d4758; font-size:13px; font-weight:600; } label > span { display:block; margin-bottom:6px; } select { width:100%; min-height:38px; border:1px solid #bfc6d4; border-radius:2px; padding:7px 10px; background:#fff; color:var(--ink); font:inherit; }.required { color:var(--red); }.upload-field { display:grid; gap:8px; }.drop-zone { min-height:245px; border:2px solid #5271e6; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:25px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s; }.drop-zone:hover,.drop-zone.dragging { background:var(--soft-blue); border-color:var(--blue-dark); }.drop-zone input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.drop-zone:focus-within { outline:3px solid rgba(79,110,219,.35); outline-offset:3px; }.drop-title { color:#35415a; font-size:18px; font-weight:500; }.drop-or,.drop-help { color:var(--muted); font-size:13px; font-weight:400; }.choose-file { border:1px solid #9ca9c6; border-radius:2px; padding:8px 14px; background:#fff; color:var(--blue); font-size:14px; font-weight:600; }.selected-file { min-height:20px; margin:0; color:var(--muted); font-size:13px; }.form-actions { display:flex; align-items:center; gap:18px; }.primary-action,.download-button { min-height:39px; border:1px solid #368c3c; border-radius:2px; padding:8px 17px; background:var(--green); color:#fff; cursor:pointer; font:600 14px inherit; text-decoration:none; }.primary-action:hover,.download-button:hover { background:#35853a; }.primary-action:disabled { border-color:#b8bec7; background:#c7cbd2; cursor:not-allowed; }.form-status { margin:0; color:var(--red); }.workflow { margin-top:28px; }.workflow h2 { margin-bottom:12px; font-size:17px; font-weight:500; }.workflow ol { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; border:1px solid var(--line); list-style:none; counter-reset:workflow; }.workflow li { min-height:102px; position:relative; display:grid; align-content:center; gap:5px; padding:15px 18px 15px 54px; border-right:1px solid var(--line); counter-increment:workflow; }.workflow li:last-child { border-right:0; }.workflow li::before { content:counter(workflow); position:absolute; left:18px; top:20px; color:var(--blue); font-weight:700; }.workflow strong { font-size:14px; }.workflow span { color:var(--muted); font-size:13px; }
.job-shell,.staff-shell { padding:30px 0 50px; }.eyebrow { margin-bottom:8px; color:var(--blue); font-size:12px; font-weight:700; text-transform:uppercase; }.job-shell h1,.staff-shell h1 { margin-bottom:12px; font-size:30px; font-weight:500; }.job-id { color:var(--muted); }.panel { border:1px solid var(--line); background:#fff; }.progress-panel { max-width:820px; padding:22px; }.progress-heading h2 { font-size:19px; font-weight:500; }.progress-heading p,.staff-intro,.staff-note { color:var(--muted); }.progress-list { margin:12px 0 0; padding:0; list-style:none; }.progress-list li { display:flex; gap:13px; align-items:center; padding:14px 0; border-top:1px solid var(--line); color:#7b8493; }.progress-list strong,.progress-list small { display:block; }.progress-list small { color:var(--muted); font-size:12px; }.status-icon { display:grid; place-items:center; flex:none; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; }.progress-list .complete { color:var(--green); }.progress-list .active { color:var(--blue); }.progress-list .failed { color:var(--red); }.job-result { padding-top:18px; }.job-result h2 { font-size:18px; font-weight:500; }.download-button { display:inline-block; margin-top:6px; }.text-link { display:inline-block; margin-top:22px; font-weight:600; text-decoration:none; }
.table-panel { overflow-x:auto; }.table-heading { display:flex; justify-content:space-between; align-items:baseline; padding:17px 20px; }.table-heading h2 { margin:0; font-size:18px; font-weight:500; }.table-heading p,.table-note { margin:4px 0 0; color:var(--muted); font-size:12px; } table { width:100%; border-collapse:collapse; text-align:left; } th,td { padding:12px 14px; border-top:1px solid var(--line); font-size:13px; vertical-align:top; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }.state { display:inline-block; padding:3px 7px; border-radius:2px; background:#eef0f4; color:#455063; font-size:12px; }.state-succeeded { background:#e4f2e5; color:#287230; }.state-rejected,.state-internal_error,.state-mutation_failed,.state-original_build_failed { background:#f7e5e5; color:#a33434; }.audit-summary { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }.audit-summary div { padding:14px; border-right:1px solid var(--line); }.audit-summary div:last-child { border-right:0; }.audit-summary span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; }.audit-panel { margin-top:18px; padding:20px; }.audit-panel h2 { font-size:18px; font-weight:500; }.audit-panel details { padding:12px 0; border-top:1px solid var(--line); }.audit-panel summary { cursor:pointer; font-weight:600; }.audit-panel pre { overflow:auto; margin:12px 0 0; padding:14px; background:#272c36; color:#f3f5f9; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }.attempt-facts { display:grid; grid-template-columns:max-content 1fr; gap:5px 16px; }.attempt-facts dd { margin:0; }.attempt-facts dt { color:var(--muted); }
.auth-page { width:min(440px,calc(100% - 40px)); margin:55px auto; }.auth-card { border:1px solid var(--line); padding:26px; background:#fff; }.auth-card h1 { font-size:25px; font-weight:500; }.auth-card form { display:grid; gap:16px; }.auth-card input,.staff-search input,.admin-form input { width:100%; min-height:39px; border:1px solid #bfc6d4; padding:8px; font:inherit; }.flash-error { padding:10px; background:#fae8e8; color:#992e2e; }.roster-heading { display:flex; justify-content:space-between; align-items:baseline; gap:18px; }.roster-heading h1 { margin-bottom:12px; }.roster-count { margin:0; color:var(--muted); font-size:13px; white-space:nowrap; }.staff-search { display:flex; gap:10px; margin:20px 0; }.staff-search input { flex:1; }.secondary-action { min-height:38px; border:1px solid #9ea8ba; background:#fff; padding:7px 12px; color:#34415b; font:600 13px inherit; cursor:pointer; }.support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.support-card { border:1px solid var(--line); padding:18px; }.support-card h2 { font-size:17px; font-weight:500; }.support-facts { display:grid; grid-template-columns:max-content 1fr; gap:7px 18px; }.support-facts dt { color:var(--muted); }.support-facts dd { margin:0; }.admin-form { display:grid; gap:10px; margin-top:14px; }.admin-form input { max-width:160px; min-height:36px; }.admin-form .confirm-control { display:flex; align-items:flex-start; gap:8px; max-width:360px; color:#5b2930; font-weight:400; }.admin-form .confirm-control input { flex:none; width:16px; min-height:16px; margin:2px 0 0; padding:0; }.danger-action { color:#982f2f; border-color:#d89b9b; }.user-pill { border:1px solid #b8c2da; padding:3px 7px; color:#3e527e; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid rgba(79,110,219,.35); outline-offset:2px; } @media (max-width:760px) { .page-width { width:min(100% - 28px,1160px); }.app-bar { align-items:flex-start; flex-wrap:wrap; padding-block:11px; gap:9px 15px; }.course-context { order:3; width:100%; }.account-menu { margin-left:auto; }.nav-links { overflow-x:auto; }.nav-links a { padding-inline:12px; white-space:nowrap; }.student-summary,.selection-fields,.support-grid { grid-template-columns:1fr; }.workflow ol { grid-template-columns:1fr; }.workflow li { border-right:0; border-bottom:1px solid var(--line); }.workflow li:last-child { border-bottom:0; }.form-actions,footer { align-items:flex-start; flex-direction:column; }.audit-summary { grid-template-columns:1fr 1fr; }.audit-summary div:nth-child(2) { border-right:0; } }
.mutation-editor { min-width:0; max-width:100%; margin-top:18px; padding:20px; }.mutation-editor textarea,.mutation-editor input,.mutation-editor select { width:100%; max-width:100%; box-sizing:border-box; margin:6px 0 14px; border:1px solid #bfc6d4; padding:8px; font:inherit; }.mutation-editor textarea { resize:vertical; overflow-wrap:anywhere; }.editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.checkbox-row { display:flex; flex-wrap:wrap; gap:12px 20px; margin-bottom:16px; }.checkbox-row label,.checkbox-label { display:flex; align-items:center; gap:7px; }.composition { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; }.composition dt { color:var(--muted); }.composition dd { margin:0; min-width:0; }.prompt-preview { max-width:100%; min-width:0; box-sizing:border-box; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow-wrap:anywhere; margin:12px 0 0; padding:14px; background:#272c36; color:#f3f5f9; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; } @media (max-width:760px) { .editor-grid { grid-template-columns:1fr; }.composition { grid-template-columns:1fr; gap:3px; }.composition dd { margin-bottom:10px; } }