:root {
    --ink: #182027;
    --muted: #66737a;
    --paper: #f7f5ef;
    --surface: #fffefa;
    --line: #d9ded9;
    --accent: #d45735;
    --accent-dark: #a63c24;
    --success: #246b54;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 100% 0, #e5efe7 0, transparent 34rem), var(--paper); font: 16px/1.5 Georgia, 'Times New Roman', serif; }
a { color: var(--accent-dark); }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1080px; margin: auto; padding: 1.5rem 1.25rem; }
.brand { color: var(--ink); font-weight: bold; font-size: 1.2rem; text-decoration: none; letter-spacing: .02em; }
nav { display: flex; align-items: center; gap: 1.25rem; font-family: system-ui, sans-serif; font-size: .9rem; }
nav a { text-decoration: none; }
.language-picker { display: flex; align-items: center; gap: .35rem; margin: 0; font: .75rem system-ui, sans-serif; }
.language-picker label { margin: 0; }
.language-picker select { width: auto; padding: .35rem; font: inherit; }
.container { width: min(100% - 2.5rem, 1080px); margin: 3rem auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
h1, h2, p { margin-top: 0; } h1 { max-width: 700px; margin-bottom: .25rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -.03em; } h2 { font-size: 1.3rem; }
.eyebrow { margin-bottom: .6rem; color: var(--accent-dark); font: 700 .75rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.intro, .summary-card small, .form-note { color: var(--muted); }
.button { display: inline-block; border: 0; border-radius: 3px; padding: .7rem 1rem; color: white; background: var(--accent); font: 700 .9rem system-ui, sans-serif; text-decoration: none; cursor: pointer; } .button:hover { background: var(--accent-dark); } .button-small { padding: .45rem .7rem; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.action-row, .subject-actions { display: flex; align-items: center; gap: .5rem; }
.help-tip { position: relative; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 1px solid currentColor; border-radius: 50%; cursor: help; font: 700 .75rem/1 system-ui, sans-serif; }
.help-tip::after { position: absolute; z-index: 5; bottom: calc(100% + .5rem); left: 0; display: none; width: min(280px, 80vw); padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--surface); box-shadow: 0 8px 24px #18202722; content: attr(data-help); font: .82rem/1.4 system-ui, sans-serif; }
.help-tip:hover::after, .help-tip:focus::after { display: block; }
.summary-card, .empty-state, .form-shell { border: 1px solid var(--line); border-radius: 3px; background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 1.5rem; }
.summary-card span, .summary-card small { display: block; font-family: system-ui, sans-serif; } .summary-card strong { display: block; margin: .35rem 0; font-size: 2.4rem; }
.group-title { border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin: 2.25rem 0 0; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: var(--surface); } th, td { padding: .9rem .75rem; border-bottom: 1px solid var(--line); text-align: left; } th { color: var(--muted); font: 700 .75rem system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.form-shell { width: min(100%, 560px); margin: 0 auto; } form { display: grid; gap: .45rem; } label { margin-top: .7rem; font: 700 .85rem system-ui, sans-serif; } input, select { width: 100%; border: 1px solid #b7c1bd; border-radius: 2px; padding: .75rem; color: var(--ink); background: #fff; font: inherit; } form .button { margin-top: 1rem; }
.compact-form { margin-top: 2rem; } .inline-form { display: flex; align-items: center; gap: .4rem; } .inline-form input, .inline-form select { min-width: 88px; padding: .45rem; } .inline-form .button { margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .alert { margin: 0 auto 1.5rem; border-left: 4px solid; padding: .8rem 1rem; font-family: system-ui, sans-serif; } .alert-error { border-color: var(--accent); background: #fbece7; } .alert-success { border-color: var(--success); background: #e6f2ed; }
.empty-state { text-align: center; } .site-footer { max-width: 1080px; margin: 4rem auto 2rem; padding: 0 1.25rem; color: var(--muted); font: .8rem system-ui, sans-serif; }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.setup-grid .form-shell { width: auto; margin: 0; }
.setup-grid > .button { grid-column: 1 / -1; justify-self: start; }
.subject-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.subject-section { border-top: 2px solid var(--ink); }
.subject-section h2 { margin: .75rem 0; }
.subject-list { background: var(--surface); border: 1px solid var(--line); }
.subject-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.subject-row strong, .subject-row small { display: block; }
.subject-row small { color: var(--muted); font: .8rem system-ui, sans-serif; }
.subject-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; }
.subject-main small { grid-column: 1 / -1; }
.subject-grade { font: 700 1.8rem/1 system-ui, sans-serif; }
.grade-low { color: #b23a35; } .grade-mid { color: #b27a16; } .grade-high { color: #247553; } .grade-empty { color: var(--muted); }
.icon-button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); text-decoration: none; font: 1.2rem/1 system-ui, sans-serif; }
.icon-button:hover { color: white; background: var(--accent); }
.quick-grade { display: none; grid-template-columns: 1fr 1fr 1.4fr auto; align-items: end; gap: .4rem; padding: .7rem 1rem; background: #f2f5f0; }
.quick-grade:target { display: grid; }
.quick-grade input { padding: .45rem; }
.branch-toggle { margin-top: 1.5rem; }
.branch-form { display: none; }
.branch-form:target { display: block; }
.danger-zone { margin-top: 2rem; }
.compact-danger { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; width: min(100%, 560px); padding: 1rem; }
.compact-danger label { margin: 0; }
.compact-danger input { width: 12rem; padding: .45rem; }
.subject-edit { width: min(100%, 680px); margin: 1rem 0; }
.check-label { display: flex; align-items: center; gap: .45rem; }
.check-label input { width: auto; }
.button-danger { background: #8e2e2e; } .button-danger:hover { background: #671f1f; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.account-grid .form-shell { width: auto; margin: 0; }
.admin-list { display: grid; gap: .75rem; }
.admin-user { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.admin-user small { display: block; margin-top: .25rem; color: var(--muted); font: .85rem system-ui, sans-serif; }
.admin-user details { min-width: min(100%, 680px); }
.admin-user details form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.admin-user details input, .admin-user details select { width: auto; min-width: 10rem; padding: .45rem; }
summary { cursor: pointer; color: var(--accent-dark); font: 700 .85rem system-ui, sans-serif; }
@media (max-width: 760px) { body { font-size: 15px; } .site-header, .page-heading { align-items: flex-start; flex-direction: column; } .container { width: min(100% - 1.25rem, 1080px); margin-top: 1.5rem; } .summary-grid, .setup-grid, .subject-columns, .account-grid { grid-template-columns: 1fr; } nav { flex-wrap: wrap; gap: .7rem; } .language-picker { margin-top: .25rem; } .quick-grade { grid-template-columns: 1fr 1fr; } .quick-grade input[type=date], .quick-grade button { grid-column: 1 / -1; } .subject-row { padding: .75rem; } .subject-grade { font-size: 1.55rem; } .admin-user { grid-template-columns: 1fr; } .admin-user details { min-width: 0; } .admin-user details form { align-items: stretch; } .admin-user details input, .admin-user details select, .admin-user details button { width: 100%; } .table-wrap table { min-width: 560px; } .form-row { grid-template-columns: 1fr; gap: .25rem; } .action-row { flex-wrap: wrap; } }

.site-footer a {
    color: var(--accent-dark);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}