* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: var(--text-base)/1.5 var(--body); }
button,input,textarea,select { font: inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-small); padding: .5rem .8rem; color: var(--ink); background: var(--surface); font-size: var(--text-sm); }
button:hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
a { color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
button.primary { color: var(--surface); background: var(--accent); border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--display); font-weight: 600; }
h1 { font-size: var(--text-title); letter-spacing: -.045em; margin-bottom: var(--space-1); }
h2 { font-size: var(--text-lg); margin-bottom: 0; }
h3 { font-size: var(--text-base); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.shell { max-width: 1360px; margin: auto; padding: var(--space-8); }
header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-8); }
.brand { display: flex; align-items: center; gap: var(--space-4); }
.mark { width: 30px; height: 34px; border-inline: 7px solid var(--accent); transform: skew(-15deg); flex: none; }
.brand p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.header-actions,.actions,.section-heading { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.section-heading { justify-content: space-between; margin-bottom: var(--space-4); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); margin-bottom: var(--space-6); }
.zoom-heading { display: flex; align-items: baseline; gap: var(--space-3); }
.tag { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-small); color: var(--muted); background: var(--surface-soft); font-size: var(--text-xs); line-height: 1.5; }
.tag.good { color: var(--success); background: var(--success-soft); }
.tag.warn { color: var(--warning); background: var(--warning-soft); }
.tag.bad { color: var(--danger); background: var(--danger-soft); }
.metrics { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: var(--space-6); padding: var(--space-3) 0 var(--space-6); }
.metric span { display: block; color: var(--muted); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.metric strong { font-weight: 600; font-size: var(--text-lg); overflow-wrap: anywhere; }
.metric.account strong { font: var(--text-base) var(--body); }
.health-line { border-top: 1px solid var(--line); display: flex; gap: var(--space-4); padding-top: var(--space-4); color: var(--muted); font-size: var(--text-xs); flex-wrap: wrap; }
.notice { border-left: 3px solid var(--warning); background: var(--warning-soft); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin: var(--space-4) 0 0; }
.notice:empty { display:none; }
.empty { color: var(--muted); padding: var(--space-3) 0; margin: 0; font-size: var(--text-sm); }
.table-head,.lesson { display: grid; grid-template-columns: 110px minmax(180px,1.5fr) minmax(120px,1fr) minmax(120px,1fr) 220px; gap: var(--space-4); align-items: start; }
.table-head { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: .65rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.lesson { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.lesson:last-child { border-bottom: none; }
.lesson>div { min-width: 0; }
.lesson-title { font-size: var(--text-base); font-weight: 600; line-height: 1.35; margin-bottom: var(--space-1); }
.lesson .actions { gap: var(--space-2); }
.lesson .actions button { padding: .4rem .6rem; }
.lesson .actions a { font-size: var(--text-sm); }
.lesson details { margin-top: var(--space-2); }
.lesson summary { color: var(--muted); cursor: pointer; font-size: var(--text-xs); }
.lesson pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-xs)/1.6 var(--body); margin-bottom: 0; }
.date { font-weight: 600; margin-bottom: var(--space-1); }
.source-note { font-size: var(--text-xs); color: var(--muted); margin: var(--space-2) 0 0; }
.live-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.live-row:last-child { border-bottom: none; }
footer { color: var(--muted); font-size: var(--text-xs); display: flex; justify-content: space-between; gap: var(--space-4); }
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); background: var(--surface); color: var(--ink); width: min(720px,calc(100% - 24px)); max-height: 90dvh; box-shadow: var(--shadow); }
dialog::backdrop { background: var(--backdrop); }
fieldset { padding: var(--space-4) 0; margin: 0; border: 0; border-top: 1px solid var(--line); }
legend { font-family: var(--display); font-weight: 600; padding: var(--space-3) 0; }
label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-4); }
input:not([type=checkbox]),textarea,select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); padding: .65rem .75rem; color: var(--ink); margin-top: var(--space-1); }
textarea { resize: vertical; font: var(--text-xs)/1.5 var(--mono); }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: middle; margin-right: var(--space-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.form-help { font-size: var(--text-xs); color: var(--muted); }
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.login-card { width: min(420px,100%); padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.login-card .brand { margin-bottom: var(--space-8); }
.login-card button { width: 100%; }
.login-card h1 { font-size: 1.65rem; }
#toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); max-width: min(600px,calc(100% - 32px)); padding: var(--space-3) var(--space-6); border-radius: var(--radius); color: var(--surface); background: var(--ink); box-shadow: var(--shadow); z-index: 5; font-size: var(--text-sm); }
#toast:empty { display:none; }
@media(max-width:1000px) { .table-head,.lesson { grid-template-columns: 100px minmax(180px,1fr) 130px 180px; } .table-head>span:nth-child(3) { display:none; } .lesson>.teacher { grid-column: 2; grid-row:2; margin-top:-.6rem; } .lesson>.subject { grid-column:2; } .lesson>.state { grid-column:3; grid-row:1/3; } .lesson>.links { grid-column:4; grid-row:1/3; } .metrics { grid-template-columns: 1.6fr 1fr 1fr; } }
@media(max-width:640px) { .shell { padding: var(--space-4); } header { align-items:flex-start; padding: var(--space-2) 0 var(--space-6); } .brand { gap:var(--space-3); } h1 { font-size:1.6rem; } .mark { width:24px; height:28px; border-width:6px; } .header-actions { flex-direction:column; align-items:stretch; } .panel { padding:var(--space-4); } .metrics { grid-template-columns: 1fr 1fr; gap:var(--space-4); } .metric.account { grid-column:1/-1; } .table-head { display:none; } .lesson { grid-template-columns: 88px minmax(0,1fr); gap:var(--space-2) var(--space-3); padding:var(--space-4) 0; } .lesson>.teacher { grid-column:2; grid-row:auto; margin:0; } .lesson>.state { grid-column:2; grid-row:auto; } .lesson>.links { grid-column:2; grid-row:auto; padding-top:var(--space-2); } .lesson .actions button { min-height:44px; } .lesson-title { font-size:var(--text-sm); } .live-row { grid-template-columns:1fr 1fr; } .form-grid { grid-template-columns:1fr; } .section-heading { align-items:flex-start; } footer { flex-direction:column; gap:var(--space-1); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }