:root {
    --app-background:#f6f5f1;
    --app-surface:#fffdfc;
    --app-text:#202a35;
    --app-muted:#5b6470;
    --app-border:#dde0e3;
    --app-field-border:#7b8592;
    --app-primary:#274c77;
    --app-primary-hover:#1e3a5b;
    --app-focus:#2563eb;
    --app-pending:#7c4a12;
    --app-pending-background:#fff2dd;
    --bs-body-font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    --bs-body-color:var(--app-text);
    --bs-body-bg:var(--app-background);
    --bs-primary:#274c77;
    --bs-primary-rgb:39,76,119;
    --bs-link-color:#274c77;
    --bs-link-color-rgb:39,76,119;
    --bs-link-hover-color:#1e3a5b;
    --bs-link-hover-color-rgb:30,58,91;
    --bs-secondary-color:#5b6470;
    --bs-secondary-rgb:91,100,112;
    --bs-success-rgb:36,99,75;
    --bs-danger-rgb:160,47,47;
    --bs-border-color:var(--app-border);
    --bs-border-radius:.5rem;
    --bs-border-radius-lg:.625rem;
}

body {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    line-height:1.5;
}

main {
    flex:1;
    min-width:0;
}

.container {
    max-width:1120px;
    padding-inline:1rem;
}

.app-main {
    padding-block:1.5rem 3rem;
}

h1,h2,h3,h4,h5,h6 {
    color:var(--app-text);
    font-weight:600;
    letter-spacing:-.025em;
}

h1,.h2 {
    font-size:1.5rem;
    line-height:1.25;
}

.text-muted,.form-text {
    color:var(--app-muted)!important;
}

.form-text,.small,small {
    font-size:.875rem;
}

a {
    text-underline-offset:.2em;
}

:where(a,button,input,select,textarea,summary):focus-visible {
    outline:3px solid var(--app-focus)!important;
    outline-offset:3px;
    box-shadow:none!important;
}

[id] {
    scroll-margin-block:1rem 10rem;
}

.skip-link:focus {
    position:absolute;
    z-index:1100;
    inset:.5rem auto auto .5rem;
    background:var(--app-surface);
    padding:.75rem;
}

.app-header {
    background:var(--app-surface);
    border-bottom:1px solid var(--app-border);
}

.navbar {
    --bs-navbar-color:var(--app-muted);
    --bs-navbar-active-color:var(--app-text);
    padding-block:.625rem;
}

.navbar-brand {
    font-size:1rem;
    letter-spacing:-.025em;
    font-weight:600;
    min-height:44px;
    display:flex;
    align-items:center;
    margin-right:1.5rem;
}

.navbar-toggler {
    min-height:44px;
    min-width:44px;
    border-color:var(--app-border);
    padding:.375rem;
}

.nav-link {
    min-height:44px;
    display:flex;
    align-items:center;
    border-radius:.375rem;
}

.nav-link[aria-current="page"] {
    color:var(--app-primary);
    font-weight:600;
    background:#e9eff7;
}

.account-area {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:center;
    margin-top:.75rem;
    padding-top:.75rem;
    border-top:1px solid var(--app-border);
}

.account-name {
    color:var(--app-muted);
    font-size:.8125rem;
    overflow-wrap:anywhere;
    min-width:0;
    flex:1;
}

.app-footer {
    border-top:1px solid var(--app-border);
    padding-block:1rem;
    font-size:.8125rem;
    color:var(--app-muted);
}

.btn {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.375rem;
    padding:.625rem .875rem;
    font-size:.875rem;
    font-weight:600;
    border-radius:.5rem;
    line-height:1.25;
    box-shadow:none!important;
}

.btn-primary {
    --bs-btn-color:#fffdfc;
    --bs-btn-bg:#274c77;
    --bs-btn-border-color:#274c77;
    --bs-btn-hover-color:#fffdfc;
    --bs-btn-hover-bg:#1e3a5b;
    --bs-btn-hover-border-color:#1e3a5b;
    --bs-btn-active-color:#fffdfc;
    --bs-btn-active-bg:#1e3a5b;
    --bs-btn-active-border-color:#1e3a5b;
    --bs-btn-disabled-bg:#274c77;
    --bs-btn-disabled-border-color:#274c77;
}

.btn-outline-primary {
    --bs-btn-color:#274c77;
    --bs-btn-border-color:#7b8592;
    --bs-btn-hover-color:#274c77;
    --bs-btn-hover-bg:#e9eff7;
    --bs-btn-hover-border-color:#274c77;
    --bs-btn-active-color:#fffdfc;
    --bs-btn-active-bg:#274c77;
    --bs-btn-active-border-color:#274c77;
    --bs-btn-disabled-color:#274c77;
    --bs-btn-disabled-border-color:#7b8592;
}

.btn-outline-secondary {
    --bs-btn-color:#5b6470;
    --bs-btn-border-color:#7b8592;
    --bs-btn-hover-color:#202a35;
    --bs-btn-hover-bg:#f0efeb;
    --bs-btn-hover-border-color:#5b6470;
}

.btn-outline-danger {
    --bs-btn-color:#a02f2f;
    --bs-btn-border-color:#a02f2f;
    --bs-btn-hover-bg:#a02f2f;
    --bs-btn-hover-border-color:#a02f2f;
}

.btn-danger {
    --bs-btn-bg:#a02f2f;
    --bs-btn-border-color:#a02f2f;
    --bs-btn-hover-bg:#852525;
    --bs-btn-hover-border-color:#852525;
}

.btn:disabled {
    opacity:.55;
}

.form-control,.form-select {
    min-height:44px;
    font-size:1rem;
    color:var(--app-text);
    background-color:var(--app-surface);
    border-color:var(--app-field-border);
    border-radius:.5rem;
}

.form-control:focus,.form-select:focus {
    border-color:var(--app-primary);
    box-shadow:none;
}

.form-label {
    font-size:.875rem;
    font-weight:600;
    margin-bottom:.375rem;
}

textarea.form-control {
    min-height:5rem;
    resize:vertical;
}

.validation-summary-valid,.field-validation-valid {
    display:none;
}

.validation-summary-errors {
    background:#fbefec;
    color:#a02f2f;
    border:1px solid #e6c4c0;
    padding:.875rem 1rem;
    border-radius:.5rem;
    margin-bottom:1rem;
}

.validation-summary-errors ul {
    margin-bottom:0;
    padding-left:1.25rem;
}

.field-validation-error {
    display:block;
    margin-top:.375rem;
    font-size:.875rem;
}

.alert {
    border-radius:.5rem;
    font-size:.9375rem;
}

.alert-info {
    --bs-alert-color:#274c77;
    --bs-alert-bg:#e9eff7;
    --bs-alert-border-color:#cbd7e5;
}

.alert-warning {
    --bs-alert-color:#7c4a12;
    --bs-alert-bg:#fff2dd;
    --bs-alert-border-color:#e7d4b5;
}

.alert-success {
    --bs-alert-color:#24634b;
    --bs-alert-bg:#eaf4ee;
    --bs-alert-border-color:#c6dece;
}

.alert-danger {
    --bs-alert-color:#a02f2f;
    --bs-alert-bg:#fbefec;
    --bs-alert-border-color:#e6c4c0;
}

.card,.surface {
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:.625rem;
    box-shadow:none;
}

.card-body {
    padding:1rem;
}

.page-heading {
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:1.5rem;
}

.page-heading h1 {
    margin-bottom:.375rem;
}

.page-heading p {
    color:var(--app-muted);
    margin-bottom:0;
    max-width:44rem;
}

.page-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    align-items:center;
}

.back-link,.context-links a,.auth-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
}

.back-link {
    font-size:.875rem;
    margin-bottom:.5rem;
}

.context-links {
    display:flex;
    flex-wrap:wrap;
    column-gap:1.25rem;
    font-size:.875rem;
}

.management-form {
    max-width:40rem;
    padding:1rem;
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:.625rem;
}

.management-form form {
    padding:0;
}

.management-form textarea {
    min-height:16rem;
}

.empty-state {
    padding:1.5rem;
    border:1px dashed #bbc2c9;
    border-radius:.625rem;
    background:var(--app-surface);
}

.empty-state h2 {
    font-size:1.125rem;
    margin-bottom:.5rem;
}

.empty-state p {
    color:var(--app-muted);
    margin-bottom:1rem;
    max-width:38rem;
}

.class-list,.student-list {
    list-style:none;
    padding:0;
    margin:0;
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:.625rem;
}

.class-row,.student-row {
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    min-width:0;
}

.class-row+.class-row,.student-row+.student-row {
    border-top:1px solid var(--app-border);
}

.class-title {
    font-size:1.0625rem;
    margin-bottom:.25rem;
    overflow-wrap:anywhere;
}

.class-meta {
    color:var(--app-muted);
    font-size:.875rem;
    margin-bottom:0;
}

.class-row-content,.student-row-content {
    min-width:0;
}

.class-actions,.student-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.student-row-content {
    font-weight:500;
    overflow-wrap:anywhere;
}

.student-ref {
    display:inline-block;
    color:var(--app-muted);
    font-size:.75rem;
    font-weight:400;
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:.75rem;
}

.section-heading h2 {
    font-size:1.125rem;
    margin:0;
}

.dashboard-summary {
    display:grid;
    gap:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-block:1px solid var(--app-border);
    margin:0 0 1.25rem;
}

.dashboard-stat {
    padding:1rem 0;
    min-width:0;
}

.dashboard-stat+.dashboard-stat {
    border-top:1px solid var(--app-border);
}
.dashboard-stat:nth-child(2) {
    border-top:0;
    border-left:1px solid var(--app-border);
    padding-left:1rem;
}
.dashboard-stat:nth-child(3) {
    grid-column:1 / -1;
}

.dashboard-stat dt {
    font-size:.875rem;
    font-weight:400;
    color:var(--app-muted);
}

.dashboard-stat dd {
    font-size:1.875rem;
    font-weight:600;
    letter-spacing:-.04em;
    line-height:1.25;
    margin:.375rem 0 0;
    overflow-wrap:anywhere;
}

.dashboard-stat small {
    display:block;
    font-size:.75rem;
    color:var(--app-muted);
    margin-top:.375rem;
}

.dashboard-sections {
    display:grid;
    gap:1.5rem;
}
.dashboard-sections>section {
    min-width:0;
}
.dashboard-sections .class-row {
    flex-direction:column;
    align-items:stretch;
    padding:1rem;
    gap:.625rem;
}
.recent-scores-help {
    color:var(--app-muted);
    font-size:.8125rem;
    margin:-.25rem 0 .75rem;
}
.recent-score-list {
    padding:0;
    margin:0;
    list-style:none;
    border:1px solid var(--app-border);
    border-radius:.625rem;
    background:var(--app-surface);
    overflow:hidden;
}
.recent-score-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.75rem;
    padding:.875rem 1rem;
}
.recent-score-row+.recent-score-row {
    border-top:1px solid var(--app-border);
}
.recent-score-content h3 {
    font-size:.9375rem;
    margin:0 0 .25rem;
    overflow-wrap:anywhere;
}
.recent-score-meta {
    display:flex;
    flex-wrap:wrap;
    gap:.125rem .75rem;
    color:var(--app-muted);
    font-size:.8125rem;
    margin:0;
    overflow-wrap:anywhere;
}
.recent-score-value {
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.recent-score-value strong {
    display:block;
    font-size:.9375rem;
}
.recent-score-value time {
    display:block;
    color:var(--app-muted);
    font-size:.75rem;
    margin-top:.25rem;
}

.dashboard-stat dd,.score-totals strong,.ranking-number,#ranking-list strong,.ranking-metrics p {
    font-variant-numeric:tabular-nums;
}

.welcome {
    max-width:44rem;
    padding-block:2rem;
}

.welcome h1 {
    font-size:clamp(1.75rem,4vw,2.75rem);
    max-width:36rem;
}

.welcome-lead {
    color:var(--app-muted);
    font-size:1.0625rem;
    margin-block:1rem 1.5rem;
    max-width:34rem;
}

.welcome-note {
    margin-top:2rem;
    padding-top:1rem;
    border-top:1px solid var(--app-border);
    font-size:.875rem;
    color:var(--app-muted);
}

.account-panel {
    max-width:28rem;
    padding:1.5rem;
    margin:1rem auto;
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:.625rem;
}

.account-panel h1 {
    font-size:1.5rem;
}

.account-panel>p {
    color:var(--app-muted);
    font-size:.9375rem;
}

.account-panel form {
    margin-top:1.5rem;
}

.account-panel .auth-link {
    font-weight:600;
}

.score-settings {
    padding:1rem;
    margin-bottom:1rem;
    border:1px solid var(--app-border);
    border-radius:.625rem;
    background:var(--app-surface);
}

.score-settings-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:.75rem;
}

.score-note summary,.pending-details summary {
    min-height:44px;
    cursor:pointer;
    color:var(--app-primary);
    font-size:.875rem;
    font-weight:600;
    padding-block:.625rem;
}

.score-note summary {
    list-style-position:inside;
}

.score-note label {
    margin-top:.5rem;
}

@media(max-width:575.98px) {
    .score-note[open] {
        grid-column:1 / -1;
    }
    .score-note summary .fw-normal {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap;
    }
}

.score-student .card-body {
    padding:1rem;
}

.score-student h2 {
    font-size:1.125rem;
    font-weight:600;
    line-height:1.4;
    margin-bottom:.625rem;
}

.score-totals {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.5rem;
    margin-bottom:.875rem;
    font-size:.8125rem;
    color:var(--app-muted);
}

.score-totals>span {
    padding:.375rem .625rem;
    border-radius:.375rem;
}
.score-totals>span:first-child {
    padding-left:0;
}

.score-totals strong {
    display:block;
    margin-top:.125rem;
    font-size:1.375rem;
    font-weight:600;
    color:var(--app-text);
    overflow-wrap:anywhere;
}

.pending-total {
    color:var(--app-pending);
    background:var(--app-pending-background);
}

.pending-total strong {
    color:var(--app-pending);
}

.student-search {
    margin-bottom:1rem;
}
.student-search-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.5rem;
}
.student-search-actions input {
    min-width:0;
}
.student-search .form-text {
    margin-bottom:0;
}
.score-student-column[hidden] {
    display:none!important;
}

.score-type-group {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.25rem;
    margin-bottom:.75rem;
}

.score-type-button {
    min-width:0;
    gap:.125rem;
    padding:.375rem .25rem;
    font-size:.8125rem;
    line-height:1.2;
    transition:none;
}

.score-type-check {
    flex-shrink:0;
    visibility:hidden;
}

.score-type-button[aria-pressed="true"] {
    font-weight:600;
}

.score-type-button[aria-pressed="true"] .score-type-check {
    visibility:visible;
}

.quick-points {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.5rem;
    margin-bottom:.75rem;
}

.score-button {
    min-width:44px;
    min-height:44px;
}

.quick-points .btn {
    font-size:1rem;
}

.custom-points-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.5rem;
}

.custom-points-row input {
    min-width:0;
}

.score-feedback:empty {
    display:none;
}

.score-feedback {
    font-size:.875rem;
    padding:.75rem 0;
}

.pending-details {
    margin-top:1rem;
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:.625rem;
    padding:.25rem 1rem;
}

.pending-details summary {
    font-size:.9375rem;
}

#pending-list {
    margin-bottom:1rem;
}

#pending-list .list-group-item {
    font-size:.875rem;
    background:var(--app-surface);
    border-color:var(--app-border);
}

#pending-list .list-group-item-warning {
    color:var(--app-pending);
    background:var(--app-pending-background);
}

.score-save-bar {
    flex-shrink:0;
    width:calc(100% - 2rem);
    max-width:1088px;
    margin:0 auto calc(.5rem + env(safe-area-inset-bottom, 0px));
    padding:.875rem;
    background:var(--app-surface);
    border:1px solid var(--app-field-border);
    border-radius:.625rem;
}

.score-save-inner {
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.score-save-copy {
    min-width:0;
}

.score-save-copy h2 {
    font-size:.9375rem;
    margin:0 0 .25rem;
}

#pending-summary {
    font-size:.8125rem;
    color:var(--app-muted);
    margin:0;
    overflow-wrap:anywhere;
}

#unsaved-warning {
    font-size:.8125rem;
    color:var(--app-pending);
    background:var(--app-pending-background);
    padding:.5rem .625rem;
    margin-bottom:1rem;
    border-radius:.375rem;
}

.score-save-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.score-save-actions .btn {
    flex:1 1 auto;
    white-space:nowrap;
}

.score-save-limit {
    font-size:.75rem;
    color:var(--app-muted);
    margin:.625rem 0 0;
}

.score-page {
    height:100dvh;
    min-height:0;
    overflow:hidden;
}
.score-page .app-main {
    min-height:0;
    overflow-y:auto;
    padding-bottom:1rem;
}
.score-page .app-footer {
    display:none;
}
.score-keyboard-open .score-page {
    height:auto;
    min-height:100dvh;
    overflow:visible;
}
.score-keyboard-open .score-page .app-main {
    overflow:visible;
}
.score-keyboard-open .score-save-bar {
    margin-top:1rem;
}

.ranking-filter .card-body {
    padding:1rem;
}

.ranking-metrics {
    margin-block:1rem 1.5rem;
}

.ranking-metrics .card {
    background:transparent;
    border:0;
    border-radius:0;
    border-left:1px solid var(--app-border);
}

.ranking-metrics .card-body {
    padding:.5rem .875rem;
}

.ranking-metrics h3 {
    font-size:.8125rem;
    font-weight:400;
    letter-spacing:0;
}

.ranking-metrics p.h4 {
    font-size:1.5rem;
    font-weight:600;
}

.ranking-distribution .progress {
    height:.375rem;
    background:#e8e8e4;
}

.progress-bar {
    background:var(--app-primary);
}

.ranking-top {
    border-left:3px solid var(--app-primary)!important;
    background:#edf2f8!important;
}

.ranking-number {
    min-width:2rem;
    padding:.5rem;
    font-size:.875rem;
    background:#e9eff7!important;
    color:var(--app-primary)!important;
    border-radius:.375rem;
}

.ranking-student-content {
    min-width:0;
}

#ranking-list {
    border-radius:.625rem;
}

#ranking-list>li {
    background:var(--app-surface);
    border-color:var(--app-border);
}

.ranking-detail summary {
    min-height:44px;
    padding:.625rem 0;
    font-size:.8125rem;
    cursor:pointer;
    color:var(--app-primary);
}

.ranking-detail p,.ranking-detail dl {
    font-size:.8125rem;
}

.ranking-detail dd {
    font-variant-numeric:tabular-nums;
}

@media(min-width:576px) {
    .dashboard-summary {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .dashboard-stat {
        padding:1rem;
    }
    .dashboard-stat:first-child {
        padding-left:0;
    }
    .dashboard-stat+.dashboard-stat {
        border-top:0;
        border-left:1px solid var(--app-border);
    }
    .dashboard-stat:nth-child(3) {
        grid-column:auto;
    }
    .management-form {
        padding:1.5rem;
    }
    .student-row {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
    .score-settings-row {
        grid-template-columns:minmax(12rem,1fr) minmax(0,2fr);
        align-items:start;
    }
    .score-save-inner {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
    .score-save-actions {
        flex-shrink:0;
    }
}

@media(min-width:768px) {
    .app-main {
        padding-top:2.5rem;
    }
    h1,.h2 {
        font-size:1.75rem;
    }
    .page-heading {
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }
    .class-row {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding:1.25rem;
    }
    .score-type-button {
        font-size:.875rem;
    }
}

@media(min-width:992px) {
    .dashboard-sections {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .navbar-nav {
        gap:.375rem;
    }
    .navbar .nav-link {
        padding-inline:.75rem!important;
    }
    .nav-link[aria-current="page"] {
        background:transparent;
        border-radius:0;
        box-shadow:inset 0 -2px var(--app-primary);
    }
    .account-area {
        margin:0 0 0 auto;
        padding:0 0 0 1rem;
        border:0;
        flex-wrap:nowrap;
    }
    .account-name {
        max-width:9rem;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

@media(max-width:359px) {
    .container {
        padding-inline:.75rem;
    }
    .score-student .card-body {
        padding:.875rem;
    }
    .account-panel {
        padding:1rem;
    }
    .class-actions .btn {
        padding-inline:.625rem;
    }
}

@media(max-height:500px) {
    .score-page {
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }
    .score-page .app-main {
        overflow:visible;
    }
    .score-save-bar {
        margin-top:1rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}