:root {color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172d38; background: #f1f5f5; line-height: 1.5;}
* {box-sizing: border-box;}
body {margin: 0;}
.site-header {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1.2rem, calc((100vw - 1320px) / 2)); background: #fff; border-bottom: 1px solid #d5e1e3;}
.brand {font-size: 1.3rem; font-weight: 750; color: #123d43; text-decoration: none; white-space: nowrap;}
.brand span {color: #53767a; font-weight: 400;}
.account, .actions {display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;}
.account {justify-content: flex-end;}
main {max-width: 1320px; margin: 2.2rem auto; padding: 0 1.2rem;}
h1 {font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; margin: .3rem 0 .8rem; letter-spacing: -.035em;}
h2 {font-size: 1.25rem; margin: 0;}
p {color: #4c646d; margin: .5rem 0 1rem;}
.eyebrow {font-size: .7rem; letter-spacing: .14em; font-weight: 750; color: #3c7478;}
.page-intro {display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem;}
.badge {background: #e1eded; color: #28555c; padding: .45rem .8rem; border-radius: 1rem; font-size: .8rem; white-space: nowrap;}
.card {background: white; border: 1px solid #d5e1e3; border-radius: 14px; padding: 1.5rem; margin-bottom: 1.3rem; box-shadow: 0 3px 12px #123d4305;}
.section-heading {display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem;}
.section-heading p {margin: .3rem 0 0; font-size: .9rem;}
.step {border-radius: 8px; background: #e8f0ef; color: #1c6366; padding: .45rem .6rem; font-weight: 700; font-size: .85rem;}
label {display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600;}
input {padding: .7rem .8rem; border: 1px solid #b8cbcf; border-radius: 6px; font: inherit; min-width: 0; width: 100%; background: white; color: #172d38;}
input:focus, button:focus-visible, a:focus-visible, summary:focus-visible {outline: 3px solid #82bcc4; outline-offset: 2px;}
input[type="color"] {height: 44px; padding: .25rem; min-width: 70px;}
button, .button {display: inline-block; background: #17636a; color: white; border: 1px solid #17636a; padding: .65rem 1rem; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; text-decoration: none; font-weight: 600;}
button:hover, .button:hover {background: #0d4d53;}
.secondary {background: white; color: #245c62; border-color: #b5cbce;}
.secondary:hover {background: #edf5f5;}
button:disabled {cursor: not-allowed; opacity: .45;}
.small {padding: .3rem .65rem; font-size: .8rem;}
.upload-fields {display: grid; grid-template-columns: 1fr 2fr; gap: 1rem;}
.recognized {display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0;}
.recognized div {background: #f5f8f8; padding: .7rem; border-radius: 7px; min-width: 0;}
dt {font-size: .75rem; color: #557078; text-transform: uppercase; font-weight: 700;}
dd {font-size: .82rem; margin: .2rem 0 0; overflow-wrap: anywhere;}
.job-panel {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dce6e7;}
.progress-label {display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem;}
progress {width: 100%; height: 16px; accent-color: #197c7a;}
#job-status {font-size: .8rem; margin-bottom: 0;}
.table-scroll {overflow-x: auto; margin: 1rem 0;}
table {border-collapse: collapse; width: 100%; text-align: left; font-size: .85rem;}
th {color: #48636b; background: #f2f6f6; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;}
th, td {padding: .75rem; border-bottom: 1px solid #dde6e7; vertical-align: top;}
.override-form {display: grid; grid-template-columns: 1fr 2fr 1.3fr 1fr .6fr; gap: .8rem; margin: 1.2rem 0;}
.override-form .actions {grid-column: 1 / -1;}
details {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dce6e7;}
summary {cursor: pointer; color: #285f65; font-size: .9rem; font-weight: 600;}
#saved-overrides {padding-left: 1rem;}
#saved-overrides li {margin: .5rem 0; overflow-wrap: anywhere;}
#saved-overrides button {margin-left: .7rem;}
.notice {padding: .8rem 1rem; border-radius: 7px; background: #e4f2ee; color: #245b4c; overflow-wrap: anywhere;}
.error {background: #fff0ef; color: #993e34;}
.warning {background: #fff7df; color: #745419;}
.svg-scroll {overflow-x: auto; margin-top: 1.2rem; border: 1px solid #e1e7e8; border-radius: 8px;}
#svg-preview {display: block; width: 100%; min-width: 1300px; height: auto;}
#weekly-table {min-width: 900px;}
.lesson-detail {font-size: .8rem; font-weight: 400; padding: .5rem; text-align: left; width: 100%;}
.login-card {max-width: 480px; margin: 4rem auto;}
.form-grid {display: grid; gap: 1rem;}
footer {text-align: center; color: #6d8187; font-size: .75rem; padding: 1rem;}
[hidden] {display: none !important;}
@media (max-width: 750px) {
    main {margin-top: 1.3rem; padding: 0 .75rem;}
    .card {padding: 1rem;}
    .page-intro {display: block;}
    .badge {display: inline-block;}
    .upload-fields, .recognized, .override-form {grid-template-columns: 1fr;}
    .site-header {padding: .75rem; flex-wrap: wrap;}
    .brand {font-size: 1.1rem;}
    .export-actions .button {flex: 1 1 45%; text-align: center;}
}
.registration-link {margin-top: 1.25rem; font-size: .9rem;}
a {color: #17636a;}
.admin-create {display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1rem 0;}
.admin-create > label {flex: 1 1 160px;}
.checkbox {display: flex; flex-direction: row; align-items: center; padding: .8rem 0;}
.checkbox input {width: 1.1rem; height: 1.1rem; accent-color: #17636a;}
.user-card {border-top: 1px solid #dce6e7; padding: 1rem 0; margin-top: 1rem;}
.user-card h3 {margin: 0;}
.danger {background: #9b3c35; border-color: #9b3c35;}
.danger:hover {background: #792b26;}

select {width: 100%; padding: .8rem; border: 1px solid #b8cbcf; border-radius: 6px; background: white; font: inherit;}
.version-library {margin-bottom: 1rem;}
.version-status {font-weight: 750; border: 2px solid currentColor;}