:root {
    --bg: #f7f5f0;
    --fg: #1d1d1b;
    --muted: #6b6b66;
    --accent: #1f6f4a;
    --accent-fg: #fff;
    --border: #d8d4ca;
    --alert-bg: #fbe9e7;
    --alert-fg: #8a1c12;
    --card: #fff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161614;
        --fg: #ecebe6;
        --muted: #a3a29b;
        --accent: #4fbf8a;
        --accent-fg: #0d1a13;
        --border: #3a3935;
        --alert-bg: #3b1814;
        --alert-fg: #ffb4a8;
        --card: #1f1f1c;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--fg);
}
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; color: var(--fg); text-decoration: none; }
main { max-width: 32rem; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 16px; }
a { color: var(--accent); }
.stack { display: grid; gap: 14px; margin: 16px 0; }
label { display: grid; gap: 4px; font-weight: 500; }
input {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--fg);
    width: 100%;
}
button, .button {
    font: inherit;
    font-weight: 600;
    padding: 11px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 500; }
form.inline { display: inline; margin: 0; }
.alert { background: var(--alert-bg); color: var(--alert-fg); padding: 10px 12px; border-radius: 8px; }
.muted { color: var(--muted); font-size: 0.9rem; }
.qr { display: block; background: #fff; padding: 8px; border-radius: 8px; margin: 12px 0; }
.secret { word-break: normal; }
.codes { columns: 2; padding-left: 1.2rem; font-size: 1.05rem; }
.tabs {
    display: flex;
    gap: 0;
    padding: 0 8px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs a {
    padding: 10px 4px;
    font-size: 0.9rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
h2.day { position: sticky; top: 0; background: var(--bg); padding: 8px 0; margin: 16px 0 4px; z-index: 1; }
.notice { background: var(--card); border-left: 4px solid var(--accent); padding: 10px 12px; border-radius: 6px; }
.saved { font-weight: 600; color: var(--accent); }
.ok { color: var(--accent); font-size: 0.9rem; margin-left: 6px; }
.steps { padding-left: 1.2rem; display: grid; gap: 8px; }
.steps li.done a { color: var(--muted); }
button.danger { background: transparent; color: var(--alert-fg); border: 1px solid var(--alert-fg); }
button.sticky { position: sticky; bottom: 12px; width: 100%; box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); margin-top: 12px; }
.list, .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist { max-height: 60vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--card); gap: 2px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; padding: 6px 4px; }
.check input, .class-row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.item, .class-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.class-row { margin-bottom: 8px; font-weight: 400; cursor: pointer; }
.class-row.watched { border-color: var(--accent); }
.item-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.time { font-variant-numeric: tabular-nums; font-weight: 600; width: 3rem; flex: none; }
.error-text { color: var(--alert-fg); font-size: 0.9rem; }
.badge { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--fg); white-space: nowrap; }
.badge-booked { background: var(--accent); color: var(--accent-fg); }
.badge-waitlisted { background: #c98a12; color: #fff; }
.badge-failed, .badge-full { background: var(--alert-bg); color: var(--alert-fg); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.filters select:first-child { grid-column: 1 / -1; }
select {
    font: inherit;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--fg);
    width: 100%;
    min-width: 0;
}
.subnav { display: flex; gap: 16px; overflow-x: auto; margin: 0 0 8px; font-size: 0.95rem; }
.subnav a { color: var(--muted); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.subnav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom: 2px solid var(--accent); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.actions summary { cursor: pointer; color: var(--accent); font-size: 0.95rem; }
.actions form { margin-top: 8px; }
.actions button { width: 100%; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; background: var(--bg); }
.nowrap { white-space: nowrap; }
.notice input { margin-top: 6px; font-size: 0.85rem; }
main:has(.table-wrap) { max-width: 60rem; }
fieldset.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
fieldset.choices legend { font-weight: 500; margin-bottom: 4px; padding: 0; }
.check input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.clear-old { margin: 0 0 12px; }