:root { color-scheme: light dark; font-family: Inter, "Segoe UI", Arial, sans-serif; --navy:#102a43; --blue:#1769aa; --blue-soft:#eaf3fb; --ink:#172033; --muted:#5c6b7a; --line:#d9e2ec; --surface:#fff; --canvas:#f4f7fa; --good:#167044; --warn:#9a6700; --bad:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-size:14px; line-height:1.45; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; background:var(--navy); color:#dbeafe; }
.brand { display:grid; gap:2px; margin:0 8px 28px; color:#fff; text-decoration:none; line-height:1.2; }.brand span { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#a8c9e8; }.brand strong { font-size:15px; font-weight:650; }
.nav-group { margin:0 0 20px; }.nav-group p { margin:0 8px 6px; color:#8eacc6; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.nav-item { display:flex; justify-content:space-between; align-items:center; min-height:34px; padding:7px 10px; border-radius:5px; color:#dce8f4; font-size:13px; }.nav-item:hover,.nav-item.is-active { background:#1c486d; color:#fff; text-decoration:none; }.nav-item.is-active { box-shadow:inset 3px 0 #69b7ef; }.nav-item small { color:#8eacc6; font-size:10px; }.nav-item.is-disabled { opacity:.54; cursor:not-allowed; }
.app-main { min-width:0; display:flex; flex-direction:column; }.topbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 28px; border-bottom:1px solid var(--line); background:var(--surface); }.topbar-section { display:block; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.topbar strong { font-size:15px; }.dev-context { padding:5px 8px; border:1px solid #e7c46a; border-radius:4px; background:#fff8e3; color:#71510c; font-size:11px; font-weight:700; }.nav-toggle { display:none; }
.content { width:min(1240px,100%); margin:0 auto; padding:26px 28px 42px; }.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:20px; }.page-heading h1 { margin:0; color:var(--navy); font-size:25px; line-height:1.15; }.page-heading p { max-width:660px; margin:6px 0 0; color:var(--muted); }.eyebrow { margin:0 0 5px; color:var(--blue); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.development-notice,.notice { margin:0 0 18px; padding:10px 12px; border:1px solid #e7c46a; border-radius:5px; background:#fff8e3; color:#71510c; font-size:13px; }.panel { margin:0 0 16px; padding:18px; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:0 1px 2px rgb(16 42 67 / .04); }.panel h2 { margin:0; color:var(--navy); font-size:17px; }.panel h3 { margin:0; color:var(--navy); font-size:14px; }.panel-intro,.muted { color:var(--muted); }.panel-intro { margin:6px 0 0; }
.section-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr); gap:16px; }.queue-grid,.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }.queue-card,.summary-card { padding:14px; border:1px solid var(--line); border-radius:5px; background:#fbfcfe; }.queue-card p,.summary-card p { margin:5px 0 0; color:var(--muted); }.summary-card strong { display:block; color:var(--navy); font-size:23px; }
.table-wrap { overflow-x:auto; margin-top:12px; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:9px 10px; border-bottom:2px solid var(--line); color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; } tbody tr:last-child td { border-bottom:0; }.table-primary { color:var(--navy); font-weight:700; }.table-subtle { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.status-badge { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border:1px solid currentColor; border-radius:999px; font-size:11px; font-weight:750; white-space:nowrap; }.status-queued { color:#0e5a8a; background:#e9f5fc; }.status-claimed,.status-scheduled { color:#5f4497; background:#f3effc; }.status-progress { color:#9a6700; background:#fff7dd; }.status-completed { color:var(--good); background:#ecfdf3; }.status-failed,.status-cancelled { color:var(--bad); background:#fff0ef; }.status-warning { color:#9a6700; background:#fff7dd; }.status-draft { color:#526171; background:#f1f4f7; }.status-submitted { color:#275f9d; background:#eaf3fb; }.status-neutral { color:#526171; background:#f1f4f7; }
.form-row { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(200px,2fr) auto; gap:10px; align-items:end; margin-top:14px; }.session-form { display:grid; gap:8px; max-width:560px; margin-top:14px; }.form-row label,.session-form label { color:var(--muted); font-size:12px; font-weight:750; } select,input,textarea { width:100%; min-height:36px; padding:8px 9px; border:1px solid #b7c4d1; border-radius:4px; background:var(--surface); color:var(--ink); font:inherit; } textarea { min-height:90px; resize:vertical; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 12px; border:1px solid var(--blue); border-radius:4px; background:var(--blue); color:#fff; cursor:pointer; font:inherit; font-weight:700; text-decoration:none; } button:hover,.button:hover { background:#0e568d; text-decoration:none; }.secondary-button,.button-secondary { border-color:#738396; background:#fff; color:#334e68; }.secondary-button:hover,.button-secondary:hover { background:#edf2f7; }.inline-action,.confirmation-actions { display:inline-flex; flex-wrap:wrap; gap:7px; margin-top:7px; }.detail-link { font-weight:700; }.success-message { border-color:#91c9a7; background:#f0fbf4; color:#155d35; }.form-error { border-color:#e2a5a2; background:#fff4f3; color:#922018; }.confirmation-panel,.assessment-panel { border-color:#b5d4eb; background:#f5faff; }.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0 0; }.detail-grid div { display:grid; gap:2px; }.detail-grid dt { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; }.detail-grid dd { margin:0; color:var(--navy); font-weight:650; }
.empty-state { padding:22px 6px; color:var(--muted); text-align:center; }.app-footer { margin-top:auto; padding:18px 28px; color:var(--muted); font-size:12px; }.app-footer span { margin-left:8px; }.entry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.entry-card { display:flex; flex-direction:column; min-height:180px; padding:18px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }.entry-card p { color:var(--muted); }.entry-card .button { margin-top:auto; align-self:flex-start; }
@media (prefers-color-scheme: dark) { :root { --navy:#d8e8f7; --blue:#58aee8; --blue-soft:#132c41; --ink:#e5edf5; --muted:#aebdca; --line:#324454; --surface:#182532; --canvas:#111a23; --good:#5ed18b; --warn:#efbd4e; --bad:#fa928b; }.sidebar { background:#0b1723; }.topbar { background:var(--surface); }.nav-item:hover,.nav-item.is-active { background:#173a58; }.dev-context,.development-notice,.notice { background:#3a2d11; border-color:#88681d; color:#f0c865; }.queue-card,.summary-card { background:#14212d; }.success-message { background:#123522; border-color:#287247; }.form-error { background:#3d1e20; border-color:#824044; }.confirmation-panel,.assessment-panel { background:#122c42; border-color:#2d628a; }.secondary-button,.button-secondary { background:#1d2b38; color:var(--ink); } }
@media (max-width: 800px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:10; width:260px; height:100vh; transform:translateX(-105%); transition:transform .2s ease; }.sidebar.is-open { transform:translateX(0); }.nav-toggle { display:inline-flex; min-height:32px; padding:5px 9px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }.topbar { padding:10px 16px; }.dev-context { display:none; }.content { padding:20px 16px 32px; }.section-grid,.entry-grid { grid-template-columns:1fr; }.page-heading { display:block; }.form-row { grid-template-columns:1fr; }.app-footer { padding:16px; } }