* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: var(--font-size)/1.6 var(--font-body); color: var(--color-text); background: var(--color-bg); }
body > main { flex: 1; }
.site-footer { position: relative; padding: 18px 14px; text-align: center; font-size: .8125rem; background: var(--color-bg); }
.site-footer a { color: var(--color-muted); }
@media(max-width:780px) { body > main { width: 100%; } }
button, input, select { font: inherit; font-size: .875rem; }
button, select, .file-label { cursor: pointer; }
button { border: 0; border-radius: var(--radius-sm); padding: 8px 18px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 500; }
button:hover { opacity: .82; }
button:disabled { opacity: .35; cursor: default; }
input, select { min-width: 0; padding: 8px 11px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-bg); }
button.secondary { background: var(--color-surface); color: var(--color-text); }
button.textbutton { color: var(--color-muted); background: transparent; padding: 4px 8px; }
button.textbutton:hover { color: var(--color-accent); background: var(--color-accent-soft); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted, small { color: var(--color-muted); }
h1 { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -.5px; }
h2 { font-size: 1rem; font-weight: 600; margin: 0; }
p { margin: 0; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--color-sidebar); padding: 30px 18px; border-right: 1px solid var(--color-line); }
.brand { display: block; margin: 0 12px 38px; font: italic 700 1.5rem var(--font-brand); letter-spacing: -.8px; color: var(--color-text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand span { display: block; margin-top: 10px; font: .75rem var(--font-body); letter-spacing: 1px; color: var(--color-muted); }
nav { display: grid; gap: 5px; }
nav a { padding: 8px 12px; font-size: .875rem; border-radius: var(--radius-sm); color: var(--color-muted); }
nav a:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
nav a[aria-current] { color: var(--color-accent); background: var(--color-accent-soft); }
main { width: min(calc(100% - var(--sidebar-width) - 96px), var(--content-width)); margin: 0 auto; position: relative; left: calc(var(--sidebar-width)/2); padding: 38px 0 40px; }
.pagehead, .sectionhead, .titleline, .listbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pagehead { padding-bottom: 22px; border-bottom: 1px solid var(--color-line); }
.upload { display: flex; align-items: center; gap: 14px; min-width: 0; }
.file-label { color: var(--color-muted); font-size: .875rem; position: relative; overflow: hidden; white-space: nowrap; }
.file-label:focus-within { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.file-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
#file-label { font-size: .75rem; max-width: 180px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#status { font-size: .8rem; color: var(--color-muted); min-height: 28px; padding-top: 6px; }
#status:empty { min-height: 20px; }
#status.error { color: var(--color-error); }
.sectionhead { margin-bottom: 14px; }
.source-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
#source { font-size: .8rem; }
.result-state { flex: none; border-radius: 999px; padding: 2px 8px; color: var(--color-warning); background: var(--color-warning-bg); font-size: .7rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.export button { font-size: .8rem; padding: 6px 12px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.card { background: var(--color-surface); padding: 19px 20px; border-radius: var(--radius-md); }
.card .label { font-size: .8rem; }
.card .value { font: 500 2rem/1.3 var(--font-number); letter-spacing: -.6px; font-variant-numeric: tabular-nums; margin: 8px 0 5px; }
.card .meta { color: var(--color-muted); font-size: .75rem; }
.card:last-child .value { color: var(--color-accent); }
.workspace-stale .cards { opacity: .58; }
.panel { margin-top: var(--space-section); }
.tablewrap { overflow: auto; border-top: 1px solid var(--color-line); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .875rem; text-align: left; }
th { font-weight: 400; color: var(--color-muted); font-size: .8rem; background: var(--color-bg); white-space: nowrap; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 8px; }
td { font-variant-numeric: tabular-nums; }
td small { display: block; font-size: .75rem; margin-top: 2px; }
tbody tr:hover { background: var(--color-surface); }
.distribution .tablewrap { max-height: 320px; }
.distribution table { min-width: 530px; }
.titleline { justify-content: flex-start; gap: 12px; }
#shown { font-size: .8rem; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 18px; }
.toolbar-label { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.quick { gap: 6px; }
.quick button { background: var(--color-surface); color: var(--color-text); padding: 5px 11px; font-size: .8rem; border-radius: 20px; }
.filters { display: flex; gap: 8px; }
.filters input { flex: 1; }
.filters select { max-width: 180px; background: var(--color-surface); border-color: transparent; }
.listbar { margin: 12px 0 8px; }
.listbar .actions { gap: 4px; }
#delta { font-size: .75rem; text-align: right; }
.course-scroll { max-height: 560px; }
.courses { min-width: 900px; }
thead th { position: sticky; top: 0; z-index: 1; }
.courses td:nth-child(2) { min-width: 195px; max-width: 290px; }
.courses td:nth-child(3) { font-size: .75rem; color: var(--color-muted); max-width: 110px; }
.courses td:last-child { font-size: .75rem; color: var(--color-muted); max-width: 200px; }
.courses select { background: transparent; padding: 4px 6px; border-color: transparent; font-size: .8rem; max-width: 108px; }
.courses select:hover { border-color: var(--color-line); }
.courses input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.notice { margin-top: 18px; padding: 12px 16px; background: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius-sm); font-size: .875rem; }
.notice ul { max-height: 180px; overflow: auto; }
summary { cursor: pointer; }
.rules { margin-top: 28px; color: var(--color-muted); font-size: .8rem; }
.rule-content { max-width: 760px; padding: 14px 0; }
.rule-content p { margin-bottom: 10px; }
.empty { margin-top: 18px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--color-surface); border-radius: var(--radius-md); gap: 8px; }
.empty-symbol { position: relative; width: 48px; height: 48px; padding: 0; font-size: 0; color: var(--color-muted); background: transparent; border-radius: 50%; }
.empty-symbol::before, .empty-symbol::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); pointer-events: none; }
.empty-symbol::after { transform: translate(-50%, -50%) rotate(90deg); }
.empty-symbol:hover { background: var(--color-accent-soft); color: var(--color-accent); opacity: 1; }
.empty.drag-over { background: var(--color-accent-soft); outline: 2px dashed var(--color-accent); outline-offset: -2px; }
.empty.drag-over .empty-symbol { color: var(--color-accent); }
.empty p { font-size: .875rem; }
.export-guide { max-width: 630px; margin: 8px 24px 0; padding-left: 22px; text-align: left; font-size: .875rem; line-height: 1.8; color: var(--color-muted); }
.export-guide li + li { margin-top: 6px; }
dialog { width: min(430px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius-md); color: var(--color-text); background: var(--color-bg); box-shadow: 0 18px 60px rgb(0 0 0 / .22); }
dialog::backdrop { background: rgb(22 24 29 / .42); }
dialog form { padding: 26px 28px 22px; }
dialog h2 { font-size: 1.05rem; margin-bottom: 12px; }
dialog p { color: var(--color-muted); font-size: .875rem; line-height: 1.75; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
[hidden] { display: none!important; }
@media(max-width:1100px) { :root { --sidebar-width: 150px; } main { width: calc(100% - var(--sidebar-width) - 48px); } .card { padding: 16px 12px; } .card .value { font-size: 1.7rem; } }
@media(max-width:780px) { .sidebar { position: static; width: 100%; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--color-line); display:flex; justify-content:space-between; align-items:center; } .brand { margin:0; font-size:1.3rem; } .brand span { display:none; } nav { display:flex; gap:0; } nav a { padding:5px 9px; font-size:.8rem; } main { width:auto; left:0; padding:24px 20px; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .toolbar { align-items:flex-start; } .filters { flex-wrap:wrap; } .filters input { flex-basis:100%; } .filters select { flex:1; max-width:none; } .listbar { align-items:flex-start; } }
@media(max-width:450px) { main { padding:20px 14px; } .sidebar { padding:14px; } .pagehead { gap:10px; } #file-label { display:none; } .upload { gap:10px; } .sectionhead { flex-wrap:wrap; gap:8px; } .card .value { font-size:1.8rem; } .card .meta { font-size:.75rem; } .listbar { flex-direction:column; gap:4px; } #delta { text-align:left; } .toolbar { flex-direction:column; gap:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }