:root {
    --op-primary: #2457d6;
    --op-primary-dark: #173b9a;
    --op-ink: #172033;
    --op-muted: #667085;
    --op-bg: #f4f7fb;
    --op-line: #e4e9f2;
    --op-success: #16865f;
}

* { box-sizing: border-box; }
body {
    background: var(--op-bg);
    color: var(--op-ink);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.login-page {
    background:
        radial-gradient(circle at 15% 15%, rgba(36, 87, 214, .16), transparent 32rem),
        radial-gradient(circle at 85% 85%, rgba(22, 134, 95, .11), transparent 28rem),
        var(--op-bg);
}
.login-card { width: min(100%, 480px); border-radius: 1.4rem; }
.brand-mark {
    display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem;
    background: linear-gradient(145deg, var(--op-primary), var(--op-primary-dark));
    color: white; font-weight: 800; letter-spacing: .04em; box-shadow: 0 12px 30px rgba(36, 87, 214, .25);
}
.brand-mark-small { width: 2.7rem; height: 2.7rem; border-radius: .85rem; font-size: .85rem; }
.eyebrow { color: var(--op-primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-control, .form-select { border-color: #d7deea; border-radius: .7rem; }
.form-control:focus, .form-select:focus { border-color: var(--op-primary); box-shadow: 0 0 0 .22rem rgba(36, 87, 214, .12); }
.btn { border-radius: .7rem; font-weight: 650; }
.btn-primary { background-color: var(--op-primary); border-color: var(--op-primary); }
.app-header { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--op-line); backdrop-filter: blur(12px); }
.phase-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.phase-button {
    border: 1px solid var(--op-line); background: #fff; color: var(--op-muted); border-radius: .9rem;
    padding: .85rem 1rem; font-weight: 700; text-align: right; transition: .18s ease;
}
.phase-button span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-left: .45rem; border-radius: 50%; background: #edf1f7; }
.phase-button.active { border-color: var(--op-primary); color: var(--op-primary); box-shadow: 0 7px 20px rgba(36, 87, 214, .09); }
.phase-button.active span { background: var(--op-primary); color: #fff; }
.card { border-radius: 1rem; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.info-item { border: 1px solid var(--op-line); background: #fff; border-radius: .85rem; padding: 1rem; }
.info-item small { display: block; color: var(--op-muted); margin-bottom: .35rem; }
.info-item strong { font-size: 1.04rem; }
.level-block { border: 1px solid var(--op-line); border-radius: .85rem; padding: 1rem; height: 100%; background: #fff; }
.class-chip, .level-chip { display: inline-flex; padding: .34rem .62rem; margin: .18rem; border-radius: 2rem; background: #edf3ff; color: var(--op-primary-dark); font-size: .84rem; font-weight: 650; }
.teacher-card { border: 1px solid var(--op-line); border-radius: .85rem; padding: 1rem; background: #fff; height: 100%; }
.teacher-id { color: var(--op-primary); font-size: .76rem; font-weight: 800; }
.assignment-table-wrap { max-height: calc(100vh - 330px); min-height: 390px; }
.assignment-table thead { position: sticky; top: 0; z-index: 2; }
.assignment-table th { background: #eef3fb; color: #40506b; white-space: nowrap; border: 0; }
.assignment-table td { border-color: #edf0f5; }
.assignment-table .form-select { min-width: 220px; }
.status-dot { width: .58rem; height: .58rem; border-radius: 50%; display: inline-block; margin-left: .35rem; background: #d0d5dd; }
.status-dot.ok { background: var(--op-success); }
.status-dot.warn { background: #d9901a; }
.validation-line { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid #f0f2f5; font-size: .88rem; }
.validation-line:last-child { border-bottom: 0; }
.load-meter { height: .55rem; border-radius: 2rem; background: #e8edf5; overflow: hidden; }
.load-meter > span { display: block; height: 100%; background: var(--op-primary); border-radius: inherit; }
.load-meter > span.over { background: #c33f4f; }
.filter-row { min-width: min(100%, 270px); }
.loading-panel { color: var(--op-muted); }

@media (max-width: 720px) {
    .phase-nav { grid-template-columns: 1fr; }
    .phase-button { padding: .65rem .8rem; }
    .assignment-table-wrap { max-height: none; }
}