:root {
    --background: #F8F6FC;
    --surface: #FFFEFF;
    --surface-secondary: #F1EDF8;
    --primary: #7C3AED;
    --primary-hover: #6D28D9;
    --primary-soft: #F0E8FF;
    --accent: #EC4899;
    --success: #2E849B;
    --success-strong: #75C9E0;
    --success-soft: #E3F6FA;
    --success-tone-text: #1F5968;
    --warning: #F59E0B;
    --error: #C04747;
    --error-strong: #E36262;
    --error-soft: #FDE9E9;
    --error-tone-text: #8F2F2F;
    --text: #111827;
    --text-secondary: #6B7280;
    --border: #E5DDF0;
    --shadow: 0 8px 28px rgba(17, 24, 39, .07);
    --sidebar-width: 260px;
    --radius: 14px;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="system"] { color-scheme: light dark; }

html[data-theme="dark"] {
    --background: #12101A;
    --surface: #1E1A29;
    --surface-secondary: #2B2639;
    --primary: #8B5CF6;
    --primary-hover: #A78BFA;
    --primary-soft: #30264A;
    --accent: #F472B6;
    --success: #75C9E0;
    --success-strong: #75C9E0;
    --success-soft: #214751;
    --success-tone-text: #D5F6FF;
    --warning: #FBBF24;
    --error: #F17B7B;
    --error-strong: #E36262;
    --error-soft: #592D32;
    --error-tone-text: #FFD7D7;
    --text: #F9FAFB;
    --text-secondary: #9CA3AF;
    --border: #3A334A;
    --shadow: 0 12px 36px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --background: #12101A; --surface: #1E1A29; --surface-secondary: #2B2639;
        --primary: #8B5CF6; --primary-hover: #A78BFA; --accent: #F472B6;
        --primary-soft: #30264A;
        --success: #75C9E0; --success-strong: #75C9E0; --success-soft: #214751; --success-tone-text: #D5F6FF;
        --warning: #FBBF24; --error: #F17B7B; --error-strong: #E36262; --error-soft: #592D32; --error-tone-text: #FFD7D7;
        --text: #F9FAFB; --text-secondary: #A9A3B5; --border: #3A334A;
        --shadow: 0 12px 36px rgba(0, 0, 0, .22);
    }
}

html[data-accent="ocean"] {
    --background: #F3F9FC;
    --surface: #FCFEFF;
    --surface-secondary: #E8F3F8;
    --border: #D3E6EF;
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-soft: #E8F0FF;
    --accent: #0891B2;
}
html[data-theme="dark"][data-accent="ocean"] {
    --background: #0C171E;
    --surface: #152631;
    --surface-secondary: #203A48;
    --border: #2C4C5B;
    --primary: #60A5FA;
    --primary-hover: #93C5FD;
    --primary-soft: #203A5C;
    --accent: #22D3EE;
}
html[data-accent="indigo_coral"] {
    --background: #F6F6FC;
    --surface: #FEFEFF;
    --surface-secondary: #ECECF8;
    --border: #DCDDF0;
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-soft: #ECEBFF;
    --accent: #D95757;
}
html[data-theme="dark"][data-accent="indigo_coral"] {
    --background: #111425;
    --surface: #1D2136;
    --surface-secondary: #2B3049;
    --border: #3C4260;
    --primary: #818CF8;
    --primary-hover: #A5B4FC;
    --primary-soft: #30335C;
    --accent: #F17B7B;
}
html[data-accent="emerald"] {
    --background: #F3FAF6;
    --surface: #FCFFFD;
    --surface-secondary: #E7F4EC;
    --border: #CFE6D8;
    --primary: #1D8A5B;
    --primary-hover: #166F49;
    --primary-soft: #DDF4E7;
    --accent: #65B96F;
}
html[data-theme="dark"][data-accent="emerald"] {
    --background: #0D1813;
    --surface: #17271F;
    --surface-secondary: #243B30;
    --border: #315343;
    --primary: #55C88A;
    --primary-hover: #7ADAA5;
    --primary-soft: #204631;
    --accent: #8BCC7B;
}
html[data-accent="amber"] {
    --background: #FCF7F2;
    --surface: #FFFEFC;
    --surface-secondary: #F8EDE1;
    --border: #EED9C5;
    --primary: #C8662D;
    --primary-hover: #A94F1E;
    --primary-soft: #FBE7D6;
    --accent: #E99A52;
}
html[data-theme="dark"][data-accent="amber"] {
    --background: #1A120D;
    --surface: #2A1D15;
    --surface-secondary: #3B291D;
    --border: #5A3B29;
    --primary: #F0A15F;
    --primary-hover: #F7BC88;
    --primary-soft: #56321F;
    --accent: #F2B66D;
}
html[data-accent="plum"] {
    --background: #FAF5FA;
    --surface: #FFFDFF;
    --surface-secondary: #F2E7F2;
    --border: #E4CFE2;
    --primary: #8A3F78;
    --primary-hover: #703061;
    --primary-soft: #F2DFF0;
    --accent: #B776A8;
}
html[data-theme="dark"][data-accent="plum"] {
    --background: #180F18;
    --surface: #281A28;
    --surface-secondary: #3A2739;
    --border: #543951;
    --primary: #D18BC2;
    --primary-hover: #E4AED8;
    --primary-soft: #4C2A47;
    --accent: #DFA3D2;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-accent="ocean"] {
        --background: #0C171E; --surface: #152631; --surface-secondary: #203A48; --border: #2C4C5B;
        --primary: #60A5FA; --primary-hover: #93C5FD; --primary-soft: #203A5C; --accent: #22D3EE;
    }
    html[data-theme="system"][data-accent="indigo_coral"] {
        --background: #111425; --surface: #1D2136; --surface-secondary: #2B3049; --border: #3C4260;
        --primary: #818CF8; --primary-hover: #A5B4FC; --primary-soft: #30335C; --accent: #F17B7B;
    }
    html[data-theme="system"][data-accent="emerald"] {
        --background: #0D1813; --surface: #17271F; --surface-secondary: #243B30; --border: #315343;
        --primary: #55C88A; --primary-hover: #7ADAA5; --primary-soft: #204631; --accent: #8BCC7B;
    }
    html[data-theme="system"][data-accent="amber"] {
        --background: #1A120D; --surface: #2A1D15; --surface-secondary: #3B291D; --border: #5A3B29;
        --primary: #F0A15F; --primary-hover: #F7BC88; --primary-soft: #56321F; --accent: #F2B66D;
    }
    html[data-theme="system"][data-accent="plum"] {
        --background: #180F18; --surface: #281A28; --surface-secondary: #3A2739; --border: #543951;
        --primary: #D18BC2; --primary-hover: #E4AED8; --primary-soft: #4C2A47; --accent: #DFA3D2;
    }
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--background); color: var(--text); }
body { margin: 0; min-height: 100vh; background: var(--background); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 24px 18px 18px; background: var(--surface); border-right: 1px solid var(--border); z-index: 30; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: white; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 7px 20px color-mix(in srgb, var(--primary) 30%, transparent); }
.brand strong { display: block; font-size: 20px; letter-spacing: -.4px; }
.brand small, .user-card small, .school-context small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.school-context { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.school-context strong { display: block; margin-top: 3px; font-size: 14px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 12px; border-radius: 10px; color: var(--text-secondary); font-weight: 600; font-size: 14px; transition: .18s ease; }
.side-nav a span { display: inline-grid; place-items: center; width: 22px; color: var(--text-secondary); font-size: 17px; }
.side-nav a:hover { color: var(--text); background: var(--surface-secondary); transform: translateX(2px); }
.side-nav a.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.side-nav a.active span { color: var(--primary); }
.nav-section { margin: 14px 12px 5px; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.theme-toggle, .logout-link { width: 100%; border: 0; background: transparent; color: var(--text-secondary); text-align: left; padding: 8px 10px; border-radius: 9px; }
.theme-toggle:hover, .logout-link:hover { background: var(--surface-secondary); color: var(--text); }
.logout-link {
    color: color-mix(in srgb, var(--error) 82%, var(--text));
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}
.logout-link:hover { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }

.academic-year-context { position: relative; margin-top: .3rem; }
.academic-year-context summary { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); font-size: .86rem; cursor: pointer; list-style: none; }
.academic-year-context summary::after { content: "⌄"; }
.academic-year-context summary::-webkit-details-marker { display: none; }
.academic-year-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + .45rem); min-width: 9.5rem; padding: .35rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); box-shadow: var(--shadow); }
.academic-year-menu button { width: 100%; padding: .55rem .7rem; border: 0; border-radius: .55rem; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.academic-year-menu button:hover, .academic-year-menu button.active { color: var(--primary); background: var(--primary-soft); }

.platform-maintenance-section { margin-bottom: 28px; }
.platform-maintenance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.platform-maintenance-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; }
.platform-maintenance-card h3 { margin: 10px 0 4px; }
.platform-maintenance-card p, .platform-maintenance-card small { color: var(--text-secondary); }

.maintenance-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(139,92,246,.22), transparent 35%),
        radial-gradient(circle at 85% 82%, rgba(236,72,153,.18), transparent 34%),
        #111827;
    color: #f9fafb;
}
.maintenance-page { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .85fr) minmax(440px, 1.15fr); align-items: center; gap: 7vw; padding: clamp(32px, 7vw, 110px); overflow: hidden; }
.maintenance-copy { max-width: 680px; }
.maintenance-brand { display: inline-flex; margin-bottom: 54px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; font-weight: 900; letter-spacing: .12em; }
.maintenance-copy h1 { max-width: 720px; margin: 12px 0 22px; font-size: clamp(48px, 6vw, 92px); line-height: .96; letter-spacing: -.055em; }
.maintenance-copy > p:not(.eyebrow) { max-width: 600px; color: #cbd5e1; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; }
.maintenance-copy .maintenance-time { display: inline-flex; margin: 22px 0; padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; }
.maintenance-scene { position: relative; min-height: 640px; display: grid; place-items: center; perspective: 1000px; }
.maintenance-island { position: relative; width: min(38vw, 600px); aspect-ratio: 1; border-radius: 28%; background: linear-gradient(145deg, #f3f4f6, #c4b5fd); box-shadow: 55px 70px 0 #7c3aed, 70px 95px 80px rgba(0,0,0,.35); transform: rotateX(58deg) rotateZ(-38deg); }
.maintenance-road { position: absolute; inset: 17% 9%; border-radius: 30px; background: #374151; box-shadow: inset 0 0 0 8px #4b5563; }
.maintenance-road::after { content: ""; position: absolute; left: 49%; top: 7%; bottom: 7%; border-left: 8px dashed #fbbf24; }
.maintenance-barrier { position: absolute; left: 25%; top: 40%; width: 52%; height: 14%; display: flex; border: 10px solid #7c2d12; background: #fff; transform: translateZ(80px); box-shadow: 0 22px 30px rgba(0,0,0,.25); }
.maintenance-barrier i { flex: 1; background: linear-gradient(120deg, #fff 0 28%, #f97316 28% 64%, #fff 64%); }
.maintenance-cone { position: absolute; width: 10%; height: 18%; background: linear-gradient(90deg, #c2410c, #fb923c); clip-path: polygon(40% 0,60% 0,90% 80%,100% 80%,100% 100%,0 100%,0 80%,10% 80%); transform: translateZ(50px); filter: drop-shadow(0 15px 10px rgba(0,0,0,.25)); }
.cone-one { left: 14%; top: 19%; }.cone-two { right: 15%; bottom: 17%; }
.maintenance-sign { position: absolute; right: 18%; top: 19%; width: 16%; aspect-ratio: 1; display: grid; place-items: center; border: 10px solid #fff; background: #fbbf24; color: #111827; font-size: 52px; font-weight: 900; transform: translateZ(75px) rotateZ(45deg); box-shadow: 0 20px 30px rgba(0,0,0,.25); }
.maintenance-sign span { transform: rotateZ(-45deg); }
.maintenance-worker { position: absolute; left: 18%; bottom: 20%; width: 13%; aspect-ratio: .75; border-radius: 45% 45% 25% 25%; background: #2563eb; transform: translateZ(70px); }
.maintenance-worker::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; left: 11%; top: -52%; border-radius: 50%; background: #fed7aa; border-top: 15px solid #f59e0b; }
@media (max-width: 900px) {
    .platform-maintenance-grid { grid-template-columns: 1fr; }
    .maintenance-page { grid-template-columns: 1fr; padding: 34px 24px; }
    .maintenance-scene { min-height: 390px; }
    .maintenance-island { width: min(78vw, 430px); }
    .maintenance-brand { margin-bottom: 28px; }
}
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--border); }
.user-card-link { border-radius: 10px; transition: background .16s ease, color .16s ease; }
.user-card-link:hover { background: var(--surface-secondary); color: var(--text); }
.user-card strong { display: block; font-size: 13px; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--primary); font-weight: 800; }
.avatar-image { object-fit: cover; }

.main-content { min-width: 0; padding: 36px clamp(22px, 4vw, 56px) 60px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-header-centered-actions { align-items: center; }
.page-header h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.7px; }
.page-header p { margin: 7px 0 0; color: var(--text-secondary); max-width: 720px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0 14px; }
.section-heading h2 { margin: 0; font-size: 18px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card { display: flex; align-items: center; gap: 15px; padding: 20px; }
.stat-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary); font-size: 21px; }
.stat-card strong { display: block; font-size: 25px; letter-spacing: -.5px; }
.stat-card small { color: var(--text-secondary); }
.card { padding: 22px; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.flex-list { display: flex; flex-direction: column; gap: 10px; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item strong { display: block; }
.list-item small { color: var(--text-secondary); }
.inactive-item { opacity: .62; background: color-mix(in srgb, var(--error) 5%, transparent); }
.inactive-item strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.class-card { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 0; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.class-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 34%, var(--border)); box-shadow: 0 12px 28px rgba(17, 24, 39, .12); }
.class-card-main { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.class-card-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.class-card-code { display: block; margin-top: 5px; font-size: 22px; }
.class-card-homeroom { display: block; margin-top: 9px; color: color-mix(in srgb, var(--primary) 72%, var(--text-secondary)); }
.class-card-educators { display: block; margin-top: 3px; color: color-mix(in srgb, var(--accent) 68%, var(--text-secondary)); }
.class-card-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding-left: 16px; }
.class-card-actions form { margin: 0; }
.edit-icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 9px; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); font-size: 17px; font-weight: 800; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.edit-icon-button:hover { color: white; background: var(--primary); transform: scale(1.04); }
.delete-icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--error) 42%, var(--border)); border-radius: 9px; color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--surface)); font: 700 22px/1 inherit; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.delete-icon-button:hover { color: white; background: var(--error); transform: scale(1.04); }
.table-primary-link { color: var(--text-primary); font-weight: 700; }
.table-primary-link:hover { color: var(--primary); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; background: var(--primary); color: white; font-weight: 700; font-size: 14px; transition: .18s ease; }
.button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.button-secondary { color: var(--text); background: var(--surface); border-color: var(--border); }
.button-secondary:hover { background: var(--surface-secondary); }
.button-danger { background: var(--error); }
.button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.button-small { min-height: 32px; padding: 6px 10px; font-size: 12px; border-radius: 8px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: var(--surface-secondary); color: var(--text-secondary); font-size: 11px; font-weight: 800; }
.badge-success { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.badge-error { background: color-mix(in srgb, var(--error) 14%, var(--surface)); color: var(--error); }
.badge-warning { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); }
.badge-primary { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.student-name-link { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); text-underline-offset: 3px; }
.student-name-link:hover { color: var(--primary); text-decoration-color: var(--primary); }
.class-badge-link { transition: color .15s ease, background .15s ease, transform .15s ease; }
.class-badge-link:hover { color: white; background: var(--primary); transform: translateY(-1px); }
.course-name-link { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); text-underline-offset: 3px; }
.course-name-link:hover { color: var(--primary); text-decoration-color: var(--primary); }
.course-page-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; max-width: 620px; }
.course-page-actions small { color: var(--text-secondary); text-align: right; line-height: 1.45; }
.course-page-actions small span { display: block; }

.status-toggle-form { margin: 0; }
.status-switch { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 4px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 11px; font-weight: 800; transition: .18s ease; }
.status-switch:hover { border-color: var(--primary); color: var(--text); }
.status-switch-track { position: relative; width: 28px; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 38%, var(--surface)); transition: .18s ease; }
.status-switch-knob { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s ease; }
.status-switch.is-active { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.status-switch.is-active .status-switch-track { background: var(--success); }
.status-switch.is-active .status-switch-knob { transform: translateX(12px); }
.student-form-status-field { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-secondary); }
.student-form-status-field > span { display: flex; flex-direction: column; gap: 3px; }
.student-form-status-field small { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.student-form-status-control { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; margin: 0; padding: 5px 9px 5px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; }
.student-form-status-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.student-form-status-control:has(input:checked) .status-switch-track { background: var(--success); }
.student-form-status-control:has(input:checked) .status-switch-knob { transform: translateX(12px); }
.student-form-status-active, .student-form-status-inactive { font-size: 11px; font-weight: 800; }
.student-form-status-active { display: none; color: var(--success); }
.student-form-status-control:has(input:checked) .student-form-status-active { display: inline; }
.student-form-status-control:has(input:checked) .student-form-status-inactive { display: none; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { padding: 13px 15px; background: var(--surface-secondary); color: var(--text-secondary); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.data-table td { padding: 13px 15px; border-top: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.data-table .inactive-row { opacity: .62; }
.data-table .numeric { text-align: right; }
.data-table .center { text-align: center; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filters input, .filters select { min-height: 42px; }
.search-status { align-self: center; color: var(--text-secondary); font-size: 12px; }
.muted { color: var(--text-secondary); }
.encoding-class-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.encoding-class-toolbar h2 { margin: 3px 0; }
.encoding-class-toolbar p { margin: 0; color: var(--text-secondary); }
.encoding-course-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.encoding-course-card.is-own-course { border-color: color-mix(in srgb, var(--primary) 46%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 3%, var(--surface))); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 10%, transparent); }
.encoding-course-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.encoding-course-heading h2 { margin: 5px 0 7px; }
.encoding-course-heading p { margin: 0; }
.course-encoding-progress { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--primary) 5%, var(--surface-secondary)); }
.course-encoding-progress.is-complete { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); background: color-mix(in srgb, var(--success) 7%, var(--surface-secondary)); }
.encoding-course-card.is-encoding-complete { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, var(--surface)), color-mix(in srgb, var(--primary) 3%, var(--surface))); }
.encoding-course-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.course-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-progress-heading strong { font-size: 13px; }
.course-encoding-progress .progress { height: 6px; }
.course-encoding-progress small, .course-monitoring-note { color: var(--text-secondary); font-size: 12px; }
.course-monitoring-note { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); line-height: 1.5; }
.encoding-course-periods { margin-top: auto; }
.encoding-class-accordion { display: flex; flex-direction: column; gap: 14px; }
.encoding-class-accordion-item { padding: 0; overflow: clip; }
.encoding-class-accordion-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; transition: background .16s ease; }
.encoding-class-accordion-item > summary::-webkit-details-marker { display: none; }
.encoding-class-accordion-item > summary:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.encoding-class-accordion-item > summary strong { display: block; margin-top: 4px; font-size: 22px; }
.encoding-class-summary-meta { display: flex; align-items: center; gap: 12px; }
.accordion-chevron { color: var(--text-secondary); font-size: 22px; transition: transform .18s ease; }
.encoding-class-accordion-item[open] .accordion-chevron { transform: rotate(180deg); }
.encoding-class-accordion-item > .encoding-course-grid { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.encoding-class-accordion-item > .encoding-course-grid .encoding-course-card { margin-top: 20px; box-shadow: none; }
.encoding-homeroom-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 20px 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.encoding-students-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.period-tabs { margin-bottom: 18px; }
.student-summary { max-width: 1180px; margin: 0 auto; }
.student-summary-card { display: flex; flex-direction: column; gap: 22px; }
.student-summary-identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.student-summary-identity h2 { margin: 4px 0; font-size: 26px; }
.student-summary-identity p { margin: 0; color: var(--text-secondary); }
.student-pagination-top { margin: 0 0 14px; }
.student-pagination-bottom { margin-top: 14px; }
.student-results-wrap { box-shadow: none; }
.student-results-table th:first-child { min-width: 250px; }
.student-results-table .selected-period { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.result-period-cell { min-width: 130px; }
.result-period-cell small { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.homeroom-comment-section { padding-top: 20px; border-top: 1px solid var(--border); }
.homeroom-comment-section h2 { margin: 5px 0; }
.homeroom-comment-section form { margin: 16px 0 0; }
.homeroom-comment-section textarea { min-height: 150px; }
.activation-preview { margin-bottom: 18px; border-left: 4px solid var(--warning); }
.activation-preview h2 { margin-bottom: 6px; }
.activation-preview p { color: var(--text-secondary); }
.activation-link { display: flex; align-items: center; gap: 10px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.table-actions form { margin: 0; }
.user-table-identity { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.user-table-identity > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.user-table-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); }
.user-table-avatar-fallback { display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface-secondary)); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.user-filters { align-items: center; }
.user-filters input { flex: 1 1 360px; max-width: 620px; }
.user-filters select { flex: 0 1 260px; max-width: 260px; }
.current-image-preview { display: flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin: 9px 0 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.current-image-preview img { display: block; object-fit: contain; border-radius: 9px; background: var(--surface); }
.current-image-preview span { color: var(--text-secondary); font-size: 12px; font-weight: 750; }
.profile-avatar-preview img { width: 86px; height: 86px; object-fit: cover; border-radius: 50%; }
.school-logo-preview img { width: 118px; height: 88px; }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pagination-summary { color: var(--text-secondary); font-size: 13px; margin-right: 8px; }
.compact-heading { margin-top: 0; }
.compact-heading small { display: block; margin-top: 4px; color: var(--text-secondary); }
.sortable-list { gap: 0; }
.sortable-item { cursor: default; transition: background .15s ease, opacity .15s ease, transform .15s ease; }
.sortable-item[draggable="true"] { cursor: grab; }
.sortable-item.is-dragging { opacity: .45; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.drag-handle { flex: 0 0 auto; color: var(--text-secondary); font-size: 18px; letter-spacing: -4px; user-select: none; }
.sortable-label { flex: 1; min-width: 0; }
.bulk-bulletin-card { margin-bottom: 24px; padding: 20px 22px; }
.bulk-bulletin-card .section-heading { margin-bottom: 12px; }
.bulk-bulletin-form { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(260px, auto); align-items: end; gap: 12px; }
.bulk-bulletin-form > div { margin: 0; }
.bulk-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bulk-submit small { color: var(--text-secondary); font-size: 11px; }
.bulk-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.bulk-loading[hidden] { display: none; }
.loading-spinner { width: 21px; height: 21px; border: 3px solid color-mix(in srgb, var(--primary) 22%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: loading-spinner-rotate .72s linear infinite; }
@keyframes loading-spinner-rotate { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
.form-card { max-width: 820px; }
.student-form-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.student-details-card, .student-courses-card { min-width: 0; }
.student-courses-card { position: sticky; top: 20px; }
.student-courses-heading { margin-bottom: 16px; }
.student-courses-heading h2 { margin: 4px 0 5px; }
.student-courses-heading p { margin: 0; color: var(--text-secondary); }
.student-course-choices { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 240px); overflow: auto; padding-right: 4px; }
.student-course-option { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-secondary); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.student-course-option:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.student-course-option:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.student-course-option input { width: auto; margin-top: 3px; accent-color: var(--primary); }
.student-course-option span, .student-course-option small { display: block; }
.student-course-option small { margin-top: 3px; color: var(--text-secondary); }
.class-student-item { padding: 12px; border-radius: 11px; transition: color .15s ease, background .15s ease, transform .15s ease; }
a.class-student-item:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); transform: translateX(2px); }
.class-student-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.student-initials { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 12px; font-weight: 850; }
.student-photo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); background: var(--surface-secondary); }
.student-photo[data-photo-preview] { cursor: zoom-in; outline: none; }
.student-photo[data-photo-preview]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.student-photo-preview-overlay { position: fixed; z-index: 1000; width: 230px; height: 230px; padding: 7px; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 18px; background: var(--surface); box-shadow: 0 20px 50px rgba(10, 18, 35, .28); opacity: 0; transform: translateY(5px) scale(.97); transform-origin: top left; pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.student-photo-preview-overlay.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.student-photo-preview-overlay img { display: block; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.student-table-identity { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.student-table-identity > span:last-child { min-width: 0; }
.class-student-meta, .class-course-link { display: flex; align-items: center; gap: 10px; }
.list-chevron { color: var(--text-secondary); font-size: 22px; line-height: 1; }
.class-course-item { gap: 10px; padding: 9px 0; }
.class-course-item.is-inactive-course { padding-inline: 10px; border: 1px dashed color-mix(in srgb, var(--error) 38%, var(--border)); border-radius: 10px; opacity: .68; background: color-mix(in srgb, var(--error-soft) 38%, var(--surface)); }
.class-course-link { flex: 1; justify-content: space-between; min-width: 0; transition: color .15s ease; }
.class-course-link:hover { color: var(--primary); }
.class-course-link.is-disabled { color: var(--text-secondary); cursor: default; }
.class-course-link.is-disabled:hover { color: var(--text-secondary); }
.class-course-item form { flex: 0 0 auto; margin: 0; }
.class-course-title-line { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.class-course-title-line small { flex: 0 0 auto; color: var(--text-secondary); white-space: nowrap; }
.class-staff-summary { color: var(--text-secondary); }
.class-staff-homeroom { color: color-mix(in srgb, var(--primary) 72%, var(--text-secondary)); }
.class-staff-educators { color: color-mix(in srgb, var(--accent) 68%, var(--text-secondary)); }
.class-staff-person[data-photo-preview],
.teacher-avatar[data-photo-preview] { cursor: zoom-in; outline: none; }
.class-staff-person[data-photo-preview] { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.class-staff-person[data-photo-preview]:focus-visible,
.teacher-avatar[data-photo-preview]:focus-visible { border-radius: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.staff-checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 240px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); }
.staff-checkbox-list > div { margin: 0; }
.staff-checkbox-list label { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--surface); cursor: pointer; }
.staff-checkbox-list label:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.staff-checkbox-list input { flex: 0 0 auto; accent-color: var(--primary); }
.course-group-summary { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.course-group-summary:last-child { border-bottom: 0; }
.course-group-summary > span { display: flex; justify-content: space-between; gap: 12px; }
.course-group-summary small { color: var(--text-secondary); }
.course-group-teachers { display: grid; gap: 8px; }
.group-period-picker { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.group-period-picker form { display: grid; gap: 7px; min-width: min(360px, 100%); }
.course-groups-form { display: grid; gap: 18px; }
.course-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-group-editor { min-width: 0; }
.group-name-input { margin-top: 5px; font-size: 1.15rem; font-weight: 750; }
.group-student-distribution { display: grid; gap: 16px; }
.group-student-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
.group-student-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.student-compact-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.student-compact-identity > span:last-child { display: grid; min-width: 0; }
.student-compact-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-compact-identity small { color: var(--text-secondary); }
.sticky-form-actions { position: sticky; bottom: 16px; z-index: 10; width: fit-content; padding: 8px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.add-course-group-card { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 18px; }
.inline-group-form { display: grid; grid-template-columns: 180px minmax(220px, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 900px) {
    .course-group-grid, .group-student-grid { grid-template-columns: 1fr; }
    .add-course-group-card { align-items: stretch; flex-direction: column; }
    .inline-group-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .group-student-row { grid-template-columns: 1fr; }
}
.searchable-staff-field { margin-bottom: 20px; }
.searchable-staff-field > label { font-size: 14px; }
.searchable-staff-field .staff-checkbox-list { margin-top: 9px; }
.searchable-staff-field:not(.is-ready) .staff-checkbox-list > div:not(:has(input:checked)) { display: none; }
.searchable-checklist-hint { margin: 9px 2px 0; color: var(--text-secondary); font-size: 12px; }
.unsaved-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.unsaved-dialog::backdrop { background: rgba(15, 23, 42, .58); backdrop-filter: blur(3px); }
.unsaved-dialog-content { padding: 26px; }
.unsaved-dialog-content h2 { margin: 6px 0 8px; font-size: 22px; }
.unsaved-dialog-content p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.unsaved-dialog-actions { margin-top: 22px; }
.button-ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
.button-ghost:hover { color: var(--text); background: var(--surface-secondary); }
form .form-row, form > div { margin-bottom: 16px; }
.student-details-card .form-field { margin-bottom: 21px; }
.student-details-card .form-field + .form-field { margin-top: 3px; }
input[readonly], input:disabled { color: var(--text-secondary); background: var(--surface-secondary); cursor: not-allowed; }
label { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; font-weight: 750; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; outline: none; transition: .16s ease; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.helptext, .field-help { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.user-invitation-form [data-standard-user-fields] { display: flex; flex-direction: column; gap: 14px; }
.user-invitation-form .invitation-role-field { margin-bottom: 18px; }
.user-invitation-form > .page-actions { margin-top: 18px; }
.errorlist { margin: 5px 0; padding: 0; color: var(--error); list-style: none; font-size: 12px; }
.checkbox-group > div { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-group label { display: flex; align-items: center; gap: 6px; font-weight: 600; }

.messages { position: fixed; top: 20px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 40px)); }
.alert { padding: 13px 15px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: opacity .18s ease, transform .18s ease; }
.alert.is-dismissing { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.alert-success { border-left: 4px solid var(--success); }
.alert-error { border-left: 4px solid var(--error); }
.alert-warning { border-left: 4px solid var(--warning); }

.progress { width: 100%; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-secondary); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.empty-state { padding: 50px 20px; text-align: center; color: var(--text-secondary); }
.empty-state strong { display: block; margin-bottom: 7px; color: var(--text); font-size: 17px; }

.dashboard-page { position: relative; isolation: isolate; }
.dashboard-page-content { position: relative; z-index: 1; }
.dashboard-ambient { position: absolute; z-index: 0; inset: -36px calc(-1 * clamp(22px, 4vw, 56px)) -60px; overflow: visible; pointer-events: none; }
.dashboard-blob { position: absolute; display: block; border-radius: 50%; filter: blur(64px); opacity: .14; will-change: transform; }
.dashboard-blob-primary { top: -55px; right: -35px; width: 360px; height: 290px; background: var(--primary); opacity: .16; animation: dashboard-blob-drift-one 18s ease-in-out infinite alternate; }
.dashboard-blob-accent { top: 255px; left: -95px; width: 340px; height: 315px; background: var(--accent); opacity: .13; animation: dashboard-blob-drift-two 22s ease-in-out infinite alternate; }
.dashboard-blob-blue { top: 470px; right: 8%; width: 290px; height: 260px; background: var(--success-strong); opacity: .12; animation: dashboard-blob-drift-three 20s ease-in-out infinite alternate; }
@keyframes dashboard-blob-drift-one { to { transform: translate(-70px, 55px) scale(1.12); } }
@keyframes dashboard-blob-drift-two { to { transform: translate(90px, -45px) scale(.92); } }
@keyframes dashboard-blob-drift-three { to { transform: translate(55px, 75px) scale(1.08); } }

.dashboard-section-heading { align-items: flex-end; }
.dashboard-section-heading p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; }
.dashboard-progress-card { padding: 0; overflow: hidden; }
.dashboard-period-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; background: var(--surface-secondary); border-bottom: 1px solid var(--border); }
.dashboard-period-tab { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--text-secondary); background: transparent; transition: .18s ease; }
.dashboard-period-tab strong { color: inherit; }
.dashboard-period-tab small { color: inherit; opacity: .82; }
.dashboard-period-tab:hover { color: var(--text); background: var(--surface); }
.dashboard-period-tab.is-active { color: var(--primary); background: var(--surface); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 5px 15px color-mix(in srgb, var(--primary) 10%, transparent); }
.dashboard-period-panel { padding: 22px; }
.dashboard-progress-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dashboard-progress-summary strong { display: block; margin-top: 4px; font-size: 18px; }
.dashboard-progress-summary small { display: block; margin-top: 3px; color: var(--text-secondary); }
.dashboard-announcement { position: relative; z-index: 1; margin-bottom: 20px; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface))); }
.dashboard-announcement::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -95px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); filter: blur(2px); pointer-events: none; }
.dashboard-announcement-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.dashboard-announcement-heading h2 { margin: 3px 0 0; font-size: 21px; }
.dashboard-announcement-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-weight: 900; font-family: Georgia, serif; font-size: 21px; }
.dashboard-announcement-content { position: relative; z-index: 1; margin: 16px 0 0 51px; }

.rich-text-content { line-height: 1.6; overflow-wrap: anywhere; }
.rich-text-content > :first-child { margin-top: 0; }
.rich-text-content > :last-child { margin-bottom: 0; }
.rich-text-content h2, .rich-text-content h3 { margin: 18px 0 8px; }
.rich-text-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.rich-text-content img { display: block; max-width: min(100%, 760px); max-height: 440px; width: auto; height: auto; margin: 14px 0; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.rich-text-content blockquote { margin: 14px 0; padding: 10px 15px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--text-secondary); }
.dashboard-announcement-form { max-width: 1000px; }
.rich-text-toolbar { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; border: 1px solid var(--border); border-bottom: 0; border-radius: 11px 11px 0 0; background: var(--surface-secondary); }
.rich-text-toolbar button, .rich-text-image-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); font-size: 13px; font-weight: 700; cursor: pointer; }
.rich-text-toolbar button:hover, .rich-text-image-button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.rich-text-toolbar button.is-active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.rich-text-editor { min-height: 240px; padding: 18px; border: 1px solid var(--border); border-radius: 0 0 11px 11px; background: var(--surface); color: var(--text); line-height: 1.6; overflow-wrap: anywhere; outline: none; }
.rich-text-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent); }
.rich-text-editor:empty::before { content: "Rédigez votre message…"; color: var(--text-secondary); pointer-events: none; }
.rich-text-editor img { display: block; max-width: min(100%, 760px); max-height: 440px; width: auto; height: auto; margin: 14px 0; border-radius: 12px; }
.rich-text-upload-status { min-height: 20px; margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; }
.rich-text-upload-status.is-error { color: var(--error); }
.dashboard-announcement-visibility { display: flex; align-items: center; gap: 9px; }
.dashboard-announcement-visibility label { margin: 0; }
.profile-role-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; margin: 0 0 22px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.profile-role-summary > span { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-role-summary small { grid-column: 1 / -1; color: var(--text-secondary); }
.profile-accent-field { margin-top: 8px; }
.accent-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.accent-choice { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; background: var(--surface-secondary); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.accent-choice:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); transform: translateY(-1px); }
.accent-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 13%, transparent); }
.accent-choice input { width: auto; margin: 0; accent-color: var(--primary); }
.accent-choice strong { font-size: 13px; }
.accent-swatch { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); }
.accent-choice-violet_rose .accent-swatch { background: linear-gradient(135deg, #7C3AED, #EC4899); }
.accent-choice-ocean .accent-swatch { background: linear-gradient(135deg, #2563EB, #0891B2); }
.accent-choice-indigo_coral .accent-swatch { background: linear-gradient(135deg, #4F46E5, #D95757); }
.accent-choice-emerald .accent-swatch { background: linear-gradient(135deg, #1D8A5B, #8BCC7B); }
.accent-choice-amber .accent-swatch { background: linear-gradient(135deg, #C8662D, #E99A52); }
.accent-choice-plum .accent-swatch { background: linear-gradient(135deg, #8A3F78, #B776A8); }

.parent-invitation-panel { padding: 18px; border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.parent-invitation-panel h2 { margin: 3px 0 5px; }
.parent-invitation-panel > p { margin: 0 0 15px; color: var(--text-secondary); }

.parent-dashboard-page { min-height: calc(100vh - 80px); }
.parent-dashboard-header h1 { font-size: clamp(38px, 5vw, 62px); }
.parent-dashboard-header p { max-width: 620px; }
.parent-children-section { position: relative; }
.parent-child-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 20px; }
.parent-child-card { position: relative; overflow: hidden; padding: 24px; border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.parent-child-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -65px; top: -85px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 68%); pointer-events: none; }
.parent-child-identity { position: relative; display: flex; align-items: center; gap: 17px; margin-bottom: 20px; }
.parent-child-identity img, .parent-child-photo-fallback { width: 82px; height: 82px; flex: 0 0 82px; border-radius: 22px; border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 13%, transparent); }
.parent-child-identity img { object-fit: cover; }
.parent-child-photo-fallback { display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-secondary)); font-size: 25px; font-weight: 850; }
.parent-child-identity h3 { margin: 3px 0; font-size: 25px; }
.parent-child-identity small { color: var(--text-secondary); }
.parent-period-list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.parent-period-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.parent-period-card > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.parent-period-card small { color: var(--text-secondary); }
.parent-period-card.is-published { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); transition: transform .16s ease, border-color .16s ease; }
.parent-period-card.is-published:hover { transform: translateY(-2px); border-color: var(--primary); }
.parent-period-card.is-unpublished { opacity: .58; background: var(--surface-secondary); }
.parent-period-arrow { color: var(--primary); font-size: 22px; }
.parent-empty-state { grid-column: 1 / -1; }

.parent-bulletin-page { display: flex; flex-direction: column; gap: 20px; }
.parent-bulletin-header { margin-bottom: 0; }
.parent-bulletin-student { display: flex; align-items: center; gap: 16px; }
.parent-bulletin-student img, .parent-bulletin-photo-fallback { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.parent-bulletin-student img { object-fit: cover; }
.parent-bulletin-photo-fallback { display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); font-size: 24px; font-weight: 850; }
.parent-bulletin-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.parent-bulletin-summary-card { display: flex; flex-direction: column; gap: 5px; min-height: 92px; justify-content: center; }
.parent-bulletin-summary-card strong { font-size: 18px; }
.parent-course-list { display: flex; flex-direction: column; gap: 14px; }
.parent-course-card { padding: 0; overflow: hidden; }
.parent-course-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; list-style: none; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface))); }
.parent-course-card > summary::-webkit-details-marker { display: none; }
.parent-course-card > summary strong, .parent-course-card > summary small { display: block; }
.parent-course-card > summary small { margin-top: 4px; color: var(--text-secondary); }
.parent-course-final { padding: 9px 13px; border: 1px solid color-mix(in srgb, #25B4E6 62%, var(--border)); border-radius: 999px; color: #073B4C !important; background: #75C9E0 !important; box-shadow: 0 7px 18px color-mix(in srgb, #25B4E6 22%, transparent); font-size: 13px; font-weight: 900; }
.parent-course-content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 18px; padding: 18px 20px 20px; }
.parent-course-sheet { overflow: hidden; }
.parent-course-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.parent-course-sheet-heading > div > strong, .parent-course-sheet-heading > div > small { display: block; }
.parent-course-sheet-heading > div > strong { font-size: 18px; }
.parent-course-sheet-heading > div > small { margin-top: 3px; color: var(--text-secondary); }
.parent-course-sheet .parent-results-scroll { padding: 16px 18px 0; }
.parent-course-sheet .parent-results-desktop { padding: 16px 18px 0; }
.parent-results-scroll { min-width: 0; overflow-x: auto; }
.parent-results-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.parent-results-table th, .parent-results-table td { padding: 11px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.parent-results-table th:first-child, .parent-results-table td:first-child { min-width: 240px; text-align: left; }
.parent-results-table th { background: var(--surface-secondary); color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.parent-results-table tr > :last-child { border-right: 0; }
.parent-results-table tbody tr:last-child > * { border-bottom: 0; }
.parent-complete-table thead tr:first-child th:not(:first-child) { color: var(--text); text-align: center; }
.parent-complete-table thead tr:first-child th { border-bottom-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.parent-complete-table { table-layout: fixed; }
.parent-complete-table th:first-child, .parent-complete-table td:first-child { width: 28%; min-width: 0; }
.parent-results-mobile { display: none; }
.parent-period-status-row th { color: var(--text); text-transform: none; }
.parent-period-status-row td { font-weight: 900; }
.parent-period-status-row .status-r, .parent-final-cell.status-r { color: var(--success-tone-text); background: #44eb70; }
.parent-period-status-row .status-e, .parent-final-cell.status-e { color: #fff; background: #e36262; }
.parent-course-comments h3 { margin: 0 0 10px; }
.parent-comments-table-wrap { padding: 14px 18px 18px; }
.parent-comments-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.parent-comments-table th, .parent-comments-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.parent-comments-table th { width: 150px; color: var(--text); background: var(--surface-secondary); }
.parent-comments-table tr:last-child > * { border-bottom: 0; }
.parent-comments-table tr.is-current > * { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.parent-comments-table tr.is-current th { box-shadow: inset 3px 0 var(--primary); }
.parent-comment-grid { display: grid; gap: 9px; }
.parent-comment-grid article { padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); }
.parent-comment-grid article.is-current { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: inset 3px 0 var(--primary); }
.parent-comment-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.parent-comment-grid p { margin: 7px 0 0; color: var(--text-secondary); line-height: 1.5; }
.status-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 24px; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.status-r { color: var(--success-tone-text); background: var(--success-soft); }
.status-e { color: var(--error-tone-text); background: var(--error-soft); }
.parent-general-comments { margin-bottom: 20px; }
.bulletin-period-statuses { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bulletin-period-status { display: inline-flex; align-items: center; gap: 5px; }

.educator-dashboard-section { margin-top: 28px; }
.educator-dashboard-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 13px; }
.educator-dashboard-overview article { display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); box-shadow: var(--shadow); }
.educator-dashboard-overview article > span { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 19px; font-weight: 900; }
.educator-dashboard-overview strong, .educator-dashboard-overview small { display: block; }
.educator-dashboard-overview strong { font-size: 22px; }
.educator-dashboard-overview small { margin-top: 2px; color: var(--text-secondary); }
.educator-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.educator-class-card { display: flex; flex-direction: column; gap: 7px; padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease; }
.educator-class-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); }
.educator-class-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--primary); font-size: 19px; }
.educator-class-card > small, .educator-class-attendance { color: var(--text-secondary); }
.educator-class-attendance { font-size: 12px; }
.educator-class-attendance b { color: var(--text); }
.import-template-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 20px; padding: 18px 20px; }
.import-template-card h2 { margin: 2px 0 0; font-size: 19px; }
.class-course-heading { align-items: center; margin-bottom: 12px; }
.class-course-heading h2 { margin-bottom: 2px; }
.class-course-heading form { margin: 0; }
.class-course-sortable .class-course-item { gap: 9px; }
.class-course-drag-handle { flex: 0 0 auto; color: var(--text-secondary); font-weight: 900; cursor: grab; user-select: none; }
.class-course-item.is-dragging { opacity: .48; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.course-order-warning { margin-top: 11px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.course-order-warning p { margin: 4px 0 9px; color: var(--text-secondary); font-size: 13px; }
.course-order-warning > div { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-overall-progress { height: 9px; margin: 15px 0 20px; }
.class-progress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.class-progress-item { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-secondary) 72%, var(--surface)); transition: .18s ease; }
.class-progress-item:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); transform: translateY(-1px); }
.class-progress-item.is-complete { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); }
.class-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.class-progress-heading strong { font-size: 17px; }
.class-progress-count { font-size: 13px; font-weight: 700; }
.class-progress-item > small { color: var(--text-secondary); }
.class-progress-item .progress { height: 6px; }
.dashboard-progress-toggle { margin: 18px auto 0; }
.teacher-assignment-card .field-help { max-width: 680px; margin: -4px 0 18px; line-height: 1.5; }
.teacher-list-item { align-items: center; }
.teacher-list-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.teacher-list-identity > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.teacher-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border)); }
.teacher-avatar-fallback { display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 12px; font-weight: 800; }
.encoding-course-page-header { align-items: flex-end; }
.encoding-course-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.encoding-change-course { flex: 0 0 auto; }
.badge-period-open { color: color-mix(in srgb, #258746 82%, var(--text)); background: color-mix(in srgb, #44eb70 12%, var(--surface)); border-color: color-mix(in srgb, #44eb70 30%, var(--border)); }
.badge-period-closed { color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 13%, var(--surface)); border-color: color-mix(in srgb, var(--text-secondary) 24%, var(--border)); }
.period-toggle-button { min-width: 96px; }
.period-toggle-button.is-closed { color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 36%, var(--border)); }
.period-toggle-button.is-open { color: color-mix(in srgb, #c64f4f 84%, var(--text)); background: color-mix(in srgb, #e36262 11%, var(--surface)); border-color: color-mix(in srgb, #e36262 34%, var(--border)); }
.period-toggle-button:hover { filter: saturate(1.12) brightness(.98); }
.actions-column { width: 78px; }

.encoding-student-list { display: flex; flex-direction: column; gap: 18px; }
.encoding-student-card { padding: 0; overflow: hidden; }
.encoding-student-header { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(450px, 560px); align-items: center; gap: 24px; padding: 14px 22px; background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface-secondary))); border-top: 3px solid color-mix(in srgb, var(--primary) 58%, var(--accent)); border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.encoding-student-identity h2 { margin: 4px 0 0; font-size: 20px; }
.encoding-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); justify-self: end; gap: 12px; width: 100%; max-width: 560px; }
.encoding-decision-control { min-width: 0; }
.encoding-decision-control label { margin-bottom: 5px; }
.encoding-decision-control form { margin: 0; }
.encoding-decision-control select { min-height: 38px; }
.final-decision-control { padding-left: 14px; border-left: 3px solid var(--accent); }
.encoding-student-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: 20px; padding: 20px 22px 22px; }
.competency-entry-wrap { box-shadow: none; }
.competency-entry-table { width: 100%; min-width: 0; table-layout: fixed; }
.competency-entry-table col.competency-name-column { width: 40%; }
.competency-entry-table col.grading-result-column { width: calc(60% / var(--grading-column-count, 2)); }
.competency-entry-table.is-free-grading col.competency-name-column { width: 34%; }
.competency-entry-table.is-free-grading col.free-grading-column { width: 66%; }
.competency-entry-wrap.is-free-grading { overflow-x: hidden; }
.competency-entry-table td:first-child { overflow-wrap: anywhere; }
.competency-entry-table .score-cell { padding: 10px 12px; }
.competency-entry-table .score-cell form { margin: 0; }
.score-input-control { position: relative; width: 104px; max-width: 100%; margin: 0 auto; }
.competency-entry-table input[data-score-input] { width: 100%; min-width: 0; max-width: 104px; margin: 0 auto; padding-right: 29px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.competency-entry-table input[data-score-input]::-webkit-inner-spin-button,
.competency-entry-table input[data-score-input]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.score-stepper { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; grid-template-rows: 1fr 1fr; width: 25px; overflow: hidden; border-left: 1px solid var(--border); border-radius: 0 8px 8px 0; }
.score-stepper button { display: grid; place-items: center; min-height: 0; padding: 0; border: 0; color: var(--text-secondary); background: color-mix(in srgb, var(--surface-secondary) 72%, transparent); font-size: 8px; line-height: 1; }
.score-stepper button + button { border-top: 1px solid var(--border); }
.score-stepper button:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.score-stepper button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.score-stepper button:disabled { cursor: not-allowed; opacity: .45; }
.competency-entry-table input[data-score-input].result-tone-success,
.competency-entry-table select.result-tone-success,
.encoding-decision-control select.result-tone-success { color: var(--success-tone-text); background: var(--success-soft); border-color: var(--success-strong); box-shadow: inset 4px 0 0 var(--success-strong); }
.competency-entry-table input[data-score-input].result-tone-error,
.competency-entry-table select.result-tone-error,
.encoding-decision-control select.result-tone-error { color: var(--error-tone-text); background: var(--error-soft); border-color: var(--error-strong); box-shadow: inset 4px 0 0 var(--error-strong); }
.competency-entry-table input[data-score-input].result-tone-success:focus,
.competency-entry-table select.result-tone-success:focus,
.encoding-decision-control select.result-tone-success:focus { box-shadow: inset 4px 0 0 var(--success-strong), 0 0 0 3px color-mix(in srgb, var(--success-strong) 24%, transparent); }
.competency-entry-table input[data-score-input].result-tone-error:focus,
.competency-entry-table select.result-tone-error:focus,
.encoding-decision-control select.result-tone-error:focus { box-shadow: inset 4px 0 0 var(--error-strong), 0 0 0 3px color-mix(in srgb, var(--error-strong) 24%, transparent); }
.encoding-appreciation label { margin-bottom: 8px; }
.encoding-appreciation form { margin: 0; }
.encoding-appreciation textarea { min-height: 142px; }
.character-counter { display: block; margin-top: 6px; color: var(--text-secondary); text-align: right; font-size: 11px; }
.character-counter.is-near-limit { color: var(--warning); }
.save-indicator { display: inline-flex; align-items: center; min-width: 68px; color: var(--text-secondary); font-size: 11px; }
.save-indicator.success { color: var(--success); }
.save-indicator.error { color: var(--error); }
.htmx-request .save-indicator, .htmx-request.save-indicator { color: var(--warning); }

.sidebar-toggle { display: none; position: fixed; left: 14px; top: 14px; z-index: 50; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.sidebar-backdrop { display: none; }

.student-photo-form-control,
.student-summary-person,
.bulletin-student-identity { display: flex; align-items: center; gap: 16px; }
.student-photo-form-preview,
.student-summary-photo,
.bulletin-student-photo { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 18px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--surface-secondary); }
.student-summary-photo,
.bulletin-student-photo { width: 96px; height: 96px; flex-basis: 96px; border-radius: 22px; }
.student-photo-form-preview.student-avatar,
.student-summary-photo-fallback,
.bulletin-student-photo-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 800; font-size: 1.35rem; }
.platform-school-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.platform-school-card { display: flex; flex-direction: column; gap: 20px; }
.platform-school-card > footer .delete-icon-button { width: 44px; height: 44px; min-height: 44px; }
.platform-school-card.is-default-school { border-color: color-mix(in srgb, var(--primary) 34%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface) 58%); box-shadow: 0 16px 38px color-mix(in srgb, var(--primary) 10%, transparent); }
.platform-school-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.platform-school-badges { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; }
.platform-school-identity { display: flex; align-items: center; gap: 14px; }
.platform-school-identity > img,
.platform-school-identity > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 15px; object-fit: contain; color: var(--primary); font-size: 1.4rem; font-weight: 800; background: var(--primary-soft); }
.platform-school-identity h2 { margin: 2px 0; }
.platform-school-identity p { margin: 0; color: var(--text-secondary); }
.platform-school-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.platform-school-stats span { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: var(--surface-secondary); }
.platform-school-stats strong { font-size: 1.25rem; }
.platform-school-stats small { color: var(--text-secondary); }
.button-default-school { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); color: white; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 76%, var(--accent)), var(--accent)); }
.button-default-school:hover { filter: saturate(1.08) brightness(.96); transform: translateY(-1px); }
.parent-preview-search-card { display: grid; gap: 8px; }
.parent-preview-results { display: grid; gap: 8px; margin-top: 10px; }
.parent-preview-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-secondary); transition: .16s ease; }
.parent-preview-result:hover { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); transform: translateX(2px); }
.parent-preview-result strong, .parent-preview-result small { display: block; }
.parent-preview-result small { margin-top: 2px; color: var(--text-secondary); }
.encoding-confirmation-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.encoding-confirmation-card h2 { margin: 4px 0 5px; }
.encoding-confirmation-card p { margin: 0; color: var(--text-secondary); }
.encoding-confirmation-warning { display: block; margin-top: 8px; color: var(--warning); font-weight: 750; }
.confirmation-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; color: var(--text); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.confirmation-dialog::backdrop { background: rgba(10,14,25,.62); backdrop-filter: blur(3px); }
.confirmation-dialog-content { padding: 26px; }
.confirmation-dialog-content h2 { margin: 6px 0 8px; }
.confirmation-dialog-content p { color: var(--text-secondary); }
@media (max-width: 680px) { .encoding-confirmation-card { align-items: stretch; flex-direction: column; } }
.grading-builder { margin: 26px 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface)); }
.grading-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grading-rule-editor { display: grid; gap: 14px; margin-top: 10px; }
.grading-config-list { display: grid; gap: 9px; margin-bottom: 12px; }
.grading-config-row { display: grid; align-items: center; gap: 10px; }
.grading-config-row.is-points-rule { grid-template-columns: minmax(180px, 1fr) minmax(120px, 150px) minmax(110px, auto) 42px; }
.grading-config-row.is-options-rule { grid-template-columns: minmax(180px, 1fr) minmax(110px, auto) 42px; }
.grading-column-maximum { display: grid; grid-template-columns: auto minmax(66px, 86px); align-items: center; gap: 7px; margin: 0; }
.grading-column-maximum > span { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.grading-column-maximum input { min-width: 0; }
.grading-column-preview { padding: 9px 12px; border-radius: 10px; color: var(--text-secondary); font-weight: 700; text-align: center; background: var(--surface-secondary); }
.grading-fixed-note { margin: 0; padding: 12px 14px; border-radius: 12px; color: var(--text-secondary); background: var(--surface-secondary); }
.grading-competency-card { padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.grading-competency-card h3 { margin: 0 0 14px; }
.grading-competency-rule { display: grid; gap: 12px; }
.grading-inline-max { max-width: 220px; }
.grading-system-caption { display: block; margin-top: 4px; color: var(--text-secondary); text-transform: capitalize; }
.free-grading-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; }
.free-grading-control { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 6px; min-width: 0; }
.free-grading-control > span { color: var(--text-secondary); font-size: .78rem; font-weight: 750; }
.free-grading-control form { margin: 0; }
.free-grading-control select { min-width: 0; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .92fr) 1.08fr; background: var(--background); }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 96px); background: var(--surface); }
.login-panel > .brand, .login-panel > .login-form { width: min(440px, 100%); }
.login-panel-inner { width: min(440px, 100%); margin: 0 auto; }
.login-panel .brand { padding: 0; }
.login-form { width: 100%; margin-top: 54px; }
.login-form h1 { margin: 12px 0 8px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.8px; }
.login-form > p { margin: 0 0 24px; color: var(--text-secondary); }
.login-form form .button { width: 100%; }
.login-back-link { display: block; margin-top: 20px; color: var(--text-secondary); text-align: center; font-size: 13px; font-weight: 650; }
.login-back-link:hover { color: var(--primary); }
.login-visual { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(32px, 4vw, 68px); color: white; background: radial-gradient(circle at 18% 12%, rgba(32,184,241,.38), transparent 31%), radial-gradient(circle at 84% 82%, rgba(236,32,156,.58), transparent 38%), linear-gradient(145deg, #5724c9, #7c3aed 48%, #98105e); }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.login-visual-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); }
.login-illustration { display: block; width: min(680px, 100%); max-height: 52vh; object-fit: contain; filter: drop-shadow(0 26px 45px rgba(32, 10, 76, .24)); }
.login-copy { width: min(610px, 100%); margin-top: -10px; text-align: center; }
.login-visual h2 { margin: 0; font-size: clamp(32px, 3.2vw, 52px); line-height: 1.04; letter-spacing: -1.6px; }
.login-visual p { max-width: 560px; margin: 18px auto 0; font-size: 16px; line-height: 1.55; opacity: .88; }

.landing-body { --landing-ink: #111827; --landing-muted: #667085; --landing-purple: #7c3aed; margin: 0; color: var(--landing-ink); background: #fbfbfe; }
.landing-shell { position: relative; min-height: 100vh; overflow: hidden; }
.landing-ambient { position: absolute; inset: 0; pointer-events: none; }
.landing-ambient span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .16; }
.landing-ambient span:nth-child(1) { top: 40px; left: -160px; width: 420px; height: 420px; background: #75c9e0; }
.landing-ambient span:nth-child(2) { top: 80px; right: -120px; width: 430px; height: 430px; background: #ec4899; }
.landing-ambient span:nth-child(3) { top: 570px; left: 42%; width: 300px; height: 300px; background: #8b5cf6; opacity: .1; }
.landing-nav, .landing-hero, .landing-feature-section, .landing-role-section, .landing-footer { position: relative; z-index: 1; width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.landing-brand { display: flex; align-items: center; gap: 12px; }
.landing-brand strong { display: block; font-size: 20px; letter-spacing: -.4px; }
.landing-brand small { display: block; margin-top: 1px; color: var(--landing-muted); font-size: 11px; }
.landing-nav nav { display: flex; align-items: center; gap: 28px; color: #475467; font-size: 14px; font-weight: 650; }
.landing-nav nav > a:not(.button):hover, .landing-text-link:hover { color: var(--landing-purple); }
.landing-nav .button-secondary { min-height: 42px; padding-inline: 20px; color: var(--landing-purple); background: rgba(255,255,255,.72); border-color: rgba(124,58,237,.24); backdrop-filter: blur(12px); }
.landing-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); align-items: center; gap: 38px; min-height: 660px; padding: 62px 0 90px; }
.landing-hero-copy { position: relative; z-index: 2; }
.landing-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(124,58,237,.16); border-radius: 99px; color: #6941c6; background: rgba(255,255,255,.68); box-shadow: 0 8px 28px rgba(124,58,237,.08); backdrop-filter: blur(10px); font-size: 12px; font-weight: 750; }
.landing-pill span { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #ec4899); box-shadow: 0 0 0 4px rgba(124,58,237,.09); }
.landing-hero h1 { margin: 25px 0 22px; max-width: 660px; font-size: clamp(48px, 5.5vw, 76px); line-height: .98; letter-spacing: -4px; }
.landing-hero h1 em { color: transparent; background: linear-gradient(100deg, #6d28d9, #9b40d0 48%, #ec4899); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.landing-hero-copy > p { max-width: 590px; margin: 0; color: var(--landing-muted); font-size: 18px; line-height: 1.65; }
.landing-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.landing-primary-cta { min-height: 52px; padding-inline: 23px; background: linear-gradient(110deg, #6d28d9, #8b5cf6 62%, #d83d9a); box-shadow: 0 16px 35px rgba(109,40,217,.25); }
.landing-primary-cta span { margin-left: 9px; font-size: 19px; transition: transform .18s ease; }
.landing-primary-cta:hover span { transform: translateX(3px); }
.landing-text-link { color: #344054; font-size: 14px; font-weight: 750; }
.landing-trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #667085; font-size: 12px; }
.landing-trust-row strong { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; color: #146c81; background: #e3f6fa; }
.landing-product-scene { position: relative; min-height: 510px; perspective: 1300px; }
.landing-product-glow { position: absolute; inset: 12% 2% 1% 8%; border-radius: 48%; background: radial-gradient(circle, rgba(124,58,237,.35), rgba(236,72,153,.13) 43%, transparent 70%); filter: blur(34px); }
.landing-app-preview { position: absolute; top: 52px; right: -18px; display: grid; grid-template-columns: 60px minmax(0,1fr); width: min(680px, 106%); height: 410px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 35px 80px rgba(51,23,94,.2), 0 8px 24px rgba(17,24,39,.08); transform: rotateY(-7deg) rotateX(2deg); backdrop-filter: blur(18px); }
.landing-app-preview aside { display: flex; flex-direction: column; align-items: center; gap: 21px; padding: 18px 10px; background: #111827; }
.landing-mini-brand { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; color: white; background: linear-gradient(135deg, #7c3aed, #ec4899); font-size: 14px; font-weight: 850; }
.landing-app-preview aside i { width: 22px; height: 7px; border-radius: 99px; background: #374151; }
.landing-app-preview aside i.active { background: #8b5cf6; box-shadow: 0 0 16px rgba(139,92,246,.62); }
.landing-preview-content { padding: 27px 28px; }
.landing-preview-content > header { display: flex; align-items: center; justify-content: space-between; }
.landing-preview-content > header span { display: flex; flex-direction: column; gap: 3px; }
.landing-preview-content > header small { color: #8b5cf6; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.landing-preview-content > header strong { font-size: 22px; letter-spacing: -.6px; }
.landing-preview-content > header b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #7c3aed; background: #f0e9ff; font-size: 11px; }
.landing-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0 16px; }
.landing-preview-stats span { display: flex; flex-direction: column; gap: 2px; padding: 15px; border: 1px solid #eaecf0; border-radius: 13px; background: white; }
.landing-preview-stats strong { font-size: 21px; }
.landing-preview-stats small, .landing-preview-panel small { color: #98a2b3; font-size: 9px; }
.landing-preview-panel { padding: 18px; border: 1px solid #eaecf0; border-radius: 15px; background: #fff; }
.landing-preview-panel > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.landing-preview-panel > div:first-child strong { font-size: 12px; }
.landing-preview-progress { display: block; height: 7px; margin: 16px 0; overflow: hidden; border-radius: 99px; background: #f2f4f7; }
.landing-preview-progress i { display: block; width: 91%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c3aed,#ec4899); }
.landing-preview-classes { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.landing-preview-classes span { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 9px; background: #f9fafb; }
.landing-preview-classes b { font-size: 11px; }
.landing-float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.85); border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 18px 40px rgba(71,34,120,.17); backdrop-filter: blur(14px); }
.landing-float-card > b { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #146c81; background: #e3f6fa; font-size: 12px; }
.landing-float-card span { display: flex; flex-direction: column; }
.landing-float-card strong { font-size: 11px; }
.landing-float-card small { margin-top: 2px; color: #98a2b3; font-size: 9px; }
.landing-float-card-one { right: 8px; bottom: 5px; }
.landing-float-card-two { left: -14px; top: 16px; }
.landing-float-card-two > b { color: #b42318; background: #fee4e2; }
.landing-feature-section { padding: 94px 0 110px; }
.landing-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.landing-section-heading > span, .landing-section-kicker { color: #7c3aed; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.landing-section-heading h2 { max-width: 640px; margin: 0; font-size: clamp(34px,4vw,52px); line-height: 1.05; letter-spacing: -2px; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.landing-feature-grid article { padding: 25px; border: 1px solid rgba(124,58,237,.1); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 16px 45px rgba(17,24,39,.055); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease; }
.landing-feature-grid article:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(77,36,124,.1); }
.feature-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; font-size: 18px; }
.feature-purple { color: #6d28d9; background: #eee5ff; }.feature-blue { color: #187b95; background: #e3f6fa; }.feature-pink { color: #c52c82; background: #fce7f3; }.feature-yellow { color: #9a6700; background: #fff4ce; }
.landing-feature-grid h3 { margin: 19px 0 9px; font-size: 18px; }
.landing-feature-grid p { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 1.6; }
.landing-role-section { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 70px; margin-bottom: 100px; padding: 58px; overflow: hidden; border-radius: 30px; color: white; background: radial-gradient(circle at 90% 15%, rgba(236,72,153,.35), transparent 32%), radial-gradient(circle at 12% 90%, rgba(117,201,224,.24), transparent 35%), #17172b; box-shadow: 0 30px 70px rgba(17,24,39,.18); }
.landing-role-section h2 { margin: 14px 0 18px; font-size: clamp(34px,3.6vw,48px); line-height: 1.06; letter-spacing: -1.8px; }
.landing-role-section p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.65; }
.landing-role-stack { display: grid; gap: 10px; }
.landing-role-stack span { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.06); }
.landing-role-stack b { font-size: 14px; }.landing-role-stack small { color: rgba(255,255,255,.58); text-align: right; }
.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 35px 0 44px; border-top: 1px solid #eaecf0; color: #667085; font-size: 12px; }
.landing-footer .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.landing-footer .landing-brand strong { color: #111827; font-size: 16px; }
.landing-footer > a:last-child { color: #7c3aed; font-weight: 750; }

/* Landing éditoriale */
.landing-v2 { --lv2-ink:#111827; --lv2-muted:#667085; --lv2-paper:#f7f6fb; color:var(--lv2-ink); background:var(--lv2-paper); }
.landing-v2-shell { overflow:hidden; background:radial-gradient(circle at 78% 4%,rgba(117,201,224,.22),transparent 23%),radial-gradient(circle at 10% 32%,rgba(236,72,153,.1),transparent 19%),var(--lv2-paper); }
.landing-v2-nav,.landing-v2-hero,.landing-v2-flow,.landing-v2-bento,.landing-v2-cta,.landing-v2-footer { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.landing-v2-nav { display:flex; align-items:center; justify-content:space-between; min-height:88px; border-bottom:1px solid #ddd9e8; }
.landing-v2-nav nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:750; }.landing-v2-nav nav>a:not(.button):hover{color:#7c3aed}
.landing-v2-index { color:#7c3aed; font-size:10px; font-weight:900; letter-spacing:.12em; }
.landing-v2-hero { display:grid; grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr); align-items:center; gap:58px; min-height:720px; padding:72px 0 100px; }
.landing-v2-copy h1 { max-width:650px; margin:22px 0; font-size:clamp(54px,6vw,84px); line-height:.92; letter-spacing:-5px; }.landing-v2-copy h1 em{color:#7c3aed;font-style:normal}.landing-v2-copy p{max-width:590px;color:var(--lv2-muted);font-size:18px;line-height:1.65}
.landing-v2-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:32px}.landing-v2-actions>a:last-child{font-size:13px;font-weight:800;color:#475467}
.landing-v2-board{position:relative;display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto 1fr;min-height:520px;overflow:hidden;border:1px solid rgba(124,58,237,.2);border-radius:28px;background:#171827;box-shadow:0 45px 90px rgba(45,24,76,.22);transform:rotate(1.2deg)}
.landing-v2-board-top{grid-column:1/-1;display:flex;justify-content:space-between;padding:14px 20px;color:#c4b5fd;border-bottom:1px solid #34364a;font-size:9px;font-weight:850;letter-spacing:.08em}.landing-v2-board-top b{color:#fff}
.landing-v2-student{padding:18px 15px;border-right:1px solid #34364a}.landing-v2-portrait svg{display:block;width:100%;border-radius:18px}.landing-v2-student>div:last-child{display:flex;flex-direction:column;margin-top:14px}.landing-v2-student small{color:#8b5cf6;font-size:7px;font-weight:900}.landing-v2-student strong{margin:5px 0;color:#fff;font-size:17px}.landing-v2-student span{color:#9ca3af;font-size:8px}
.landing-v2-results{align-self:start;margin:18px;border:1px solid #34364a;border-radius:14px;overflow:hidden}.landing-v2-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(4,46px);min-height:62px;border-bottom:1px solid #34364a}.landing-v2-row:last-child{border-bottom:0}.landing-v2-row>span{display:flex;flex-direction:column;justify-content:center;padding:9px 12px;color:#fff;font-size:11px;font-weight:800}.landing-v2-row small{margin-top:2px;color:#8f96a7;font-size:7px}.landing-v2-row i{display:grid;place-items:center;border-left:1px solid #34364a;color:#9ca3af;font-size:10px;font-style:normal;font-weight:900}.landing-v2-row.head{min-height:34px;background:#25283a}.landing-v2-row.head span,.landing-v2-row.head i{color:#9ca3af;font-size:7px;text-transform:uppercase}.landing-v2-row i.ok{color:#063d20;background:#44eb70}.landing-v2-row i.no{color:white;background:#e36262}.landing-v2-note{position:absolute;right:28px;bottom:13px;padding:7px 10px;border-radius:99px;color:#33234d;background:#e9ddff;font-size:7px;font-weight:850}
.landing-v2-flow{padding:100px 0}.landing-v2-flow header{display:grid;grid-template-columns:.6fr 1.4fr;align-items:end;margin-bottom:50px}.landing-v2-flow h2{margin:0;font-size:clamp(38px,4.5vw,60px);line-height:1.02;letter-spacing:-2.5px}.landing-v2-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cfc9dc}.landing-v2-flow-grid article{position:relative;padding:30px 25px 34px;border-right:1px solid #cfc9dc}.landing-v2-flow-grid article:last-child{border-right:0}.landing-v2-flow-grid b{position:absolute;right:18px;top:-16px;color:#b4adbf;background:var(--lv2-paper);font-size:11px}.landing-v2-flow-grid span{color:#7c3aed;font-size:9px;font-weight:900}.landing-v2-flow-grid h3{margin:35px 0 12px;font-size:20px}.landing-v2-flow-grid p{color:var(--lv2-muted);font-size:13px;line-height:1.6}
.landing-v2-bento{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;padding:30px 0 110px}.landing-v2-bento article{padding:34px;border:1px solid #ded9e8;border-radius:26px;background:rgba(255,255,255,.75)}.landing-v2-bento .wide{grid-row:span 2;min-height:470px;background:linear-gradient(145deg,#fff,#eee8ff)}.landing-v2-bento h2{margin:24px 0;font-size:clamp(36px,4vw,58px);line-height:1.02;letter-spacing:-2px}.landing-v2-bento h3{font-size:25px}.landing-v2-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:90px}.landing-v2-pills span{padding:11px 14px;border:1px solid #cfc1f5;border-radius:99px;color:#6030b5;background:white;font-size:12px;font-weight:800}.landing-v2-bento .dark{color:white;background:#181927;border-color:#181927}.landing-v2-bento .dark p{color:#a9afbe;line-height:1.6}.landing-v2-bento .visual{display:flex;align-items:center;gap:25px;background:#e6f7fb}.landing-v2-phone{display:grid;gap:6px;width:150px;padding:16px;border:5px solid #151625;border-radius:23px;background:white;box-shadow:0 18px 35px rgba(17,24,39,.15)}.landing-v2-phone small{color:#7c3aed}.landing-v2-phone strong{font-size:18px}.landing-v2-phone span{font-size:10px}.landing-v2-phone i{padding:5px 8px;border-radius:7px;background:#eef0f4;font-size:8px;font-style:normal}.landing-v2-phone i:nth-of-type(-n+2){background:#dcfce7}
.landing-v2-cta{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:90px;padding:58px;border-radius:30px;color:white;background:linear-gradient(125deg,#171827 60%,#312354)}.landing-v2-cta h2{margin:14px 0 0;font-size:clamp(38px,4vw,58px);line-height:1.03;letter-spacing:-2px}.landing-v2-footer{display:flex;justify-content:space-between;padding:30px 0 40px;border-top:1px solid #ddd9e8;color:#667085;font-size:12px}
@media(max-width:980px){.landing-v2-hero{grid-template-columns:1fr;padding-top:55px}.landing-v2-board{width:min(760px,100%);margin:auto}.landing-v2-flow-grid{grid-template-columns:repeat(2,1fr)}.landing-v2-bento{grid-template-columns:1fr}.landing-v2-bento .wide{grid-row:auto}.landing-v2-flow header{grid-template-columns:1fr;gap:18px}}
@media(max-width:640px){.landing-v2-nav,.landing-v2-hero,.landing-v2-flow,.landing-v2-bento,.landing-v2-cta,.landing-v2-footer{width:calc(100% - 28px)}.landing-v2-nav nav>a:not(.button){display:none}.landing-v2-copy h1{font-size:48px;letter-spacing:-3px}.landing-v2-board{grid-template-columns:1fr;transform:none}.landing-v2-student{display:none}.landing-v2-row{grid-template-columns:minmax(130px,1fr) repeat(4,35px)}.landing-v2-flow-grid{grid-template-columns:1fr}.landing-v2-flow-grid article{border-right:0;border-bottom:1px solid #cfc9dc}.landing-v2-bento .visual,.landing-v2-cta{align-items:flex-start;flex-direction:column}.landing-v2-cta{padding:34px 25px}.landing-v2-footer{flex-wrap:wrap;gap:14px}}

@media (max-width: 1000px) {
    .landing-hero { grid-template-columns: 1fr; padding-top: 45px; }
    .landing-hero-copy { text-align: center; }
    .landing-hero-copy > p { margin-inline: auto; }
    .landing-hero-actions, .landing-trust-row { justify-content: center; }
    .landing-product-scene { width: min(700px,100%); margin-inline: auto; }
    .landing-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .landing-section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
    .landing-nav, .landing-hero, .landing-feature-section, .landing-role-section, .landing-footer { width: min(100% - 30px,1180px); }
    .landing-nav nav > a:not(.button) { display: none; }
    .landing-hero { min-height: auto; padding: 42px 0 65px; }
    .landing-hero h1 { font-size: clamp(43px,13vw,62px); letter-spacing: -2.8px; }
    .landing-hero-copy > p { font-size: 16px; }
    .landing-product-scene { min-height: 390px; }
    .landing-app-preview { right: 0; grid-template-columns: 42px minmax(0,1fr); width: 100%; height: 330px; transform: none; }
    .landing-app-preview aside { gap: 15px; padding: 13px 7px; }
    .landing-mini-brand { width: 27px; height: 27px; }
    .landing-preview-content { padding: 20px 16px; }
    .landing-preview-stats span { padding: 10px; }
    .landing-preview-stats strong { font-size: 16px; }
    .landing-float-card-two { left: -5px; top: 25px; }
    .landing-float-card-one { right: -5px; }
    .landing-feature-section { padding: 55px 0 70px; }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-role-section { grid-template-columns: 1fr; gap: 35px; padding: 32px 24px; }
    .landing-role-stack span { align-items: flex-start; flex-direction: column; gap: 4px; }
    .landing-role-stack small { text-align: left; }
    .landing-footer { flex-wrap: wrap; }
}

@media (max-width: 1050px) {
    .student-form-layout { grid-template-columns: 1fr; }
    .student-courses-card { position: static; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid { grid-template-columns: 1fr; }
    .bulk-bulletin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comment-grid { grid-template-columns: 1fr; }
    .encoding-student-body { grid-template-columns: 1fr; }
    .encoding-student-header { grid-template-columns: 1fr; gap: 14px; }
    .encoding-decision-grid { justify-self: stretch; max-width: none; }
    .class-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .parent-course-content { grid-template-columns: 1fr; }
    .educator-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: transform .22s ease; width: min(var(--sidebar-width), calc(100vw - 55px)); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-toggle { display: grid; place-items: center; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(17, 24, 39, .48); }
    .main-content { padding: 72px 16px 45px; }
    .page-header { flex-direction: column; }
    .stats-grid { grid-template-columns: 1fr; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .class-card, .class-card-main { align-items: flex-start; flex-direction: column; }
    .class-card-actions { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
    .bulk-bulletin-form { grid-template-columns: 1fr; }
    .accent-choice-grid { grid-template-columns: 1fr; }
    .encoding-class-toolbar { align-items: flex-start; flex-direction: column; }
    .course-page-actions { align-items: flex-start; max-width: none; }
    .course-page-actions small { text-align: left; }
    .encoding-student-header { grid-template-columns: 1fr; align-items: start; }
    .encoding-decision-grid { justify-content: flex-start; width: 100%; }
    .encoding-decision-control { width: 100%; }
    .final-decision-control { padding: 12px 0 0; border-left: 0; border-top: 3px solid var(--accent); }
    .competency-entry-table col.competency-name-column { width: 38%; }
    .competency-entry-table.is-free-grading col.competency-name-column { width: 32%; }
    .dashboard-section-heading, .dashboard-progress-summary { align-items: flex-start; flex-direction: column; }
    .dashboard-period-tab small { display: none; }
    .dashboard-period-panel { padding: 16px; }
    .class-progress-grid { grid-template-columns: 1fr; }
    .parent-bulletin-summary-grid, .parent-period-list { grid-template-columns: 1fr; }
    .parent-bulletin-student { align-items: flex-start; }
    .parent-course-sheet-heading { align-items: flex-start; flex-direction: column; }
    .parent-results-desktop { display: none; }
    .parent-results-mobile { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 0; }
    .parent-mobile-competency { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
    .parent-mobile-competency h4 { margin: 0; padding: 12px 13px; border-bottom: 1px solid var(--border); background: var(--surface-secondary); font-size: 15px; }
    .parent-mobile-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .parent-mobile-period { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .parent-mobile-period:nth-child(even) { border-right: 0; }
    .parent-mobile-period > strong { display: block; margin-bottom: 7px; color: var(--primary); }
    .parent-mobile-period > div { display: flex; flex-wrap: wrap; gap: 8px; }
    .parent-mobile-period span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 66px; flex: 1; padding: 7px 8px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
    .parent-mobile-period small { color: var(--text-secondary); font-size: 10px; }
    .parent-mobile-period b { font-size: 15px; }
    .parent-mobile-statuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
    .parent-mobile-statuses span { display: flex; align-items: center; flex-direction: column; gap: 3px; padding: 9px 5px; border-right: 1px solid var(--border); text-align: center; }
    .parent-mobile-statuses span:last-child { border-right: 0; }
    .parent-mobile-statuses small { font-size: 10px; }
    .parent-mobile-statuses strong { font-size: 16px; }
    .parent-comments-table th { width: 54px; }
    .educator-dashboard-overview, .educator-class-grid { grid-template-columns: 1fr; }
    .student-summary-photo, .bulletin-student-photo { width: 72px; height: 72px; flex-basis: 72px; }
    .grading-builder-grid, .grading-config-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-blob { animation: none; }
}

/* Landing 2026 — ordre éditorial resserré et animations locales. */
.landing-bento-reordered .landing-bento-top-cta {
    min-height: 610px;
    margin: 22px 0 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.landing-bento-reordered .landing-bento-top-cta h1 {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: 30px 0 22px;
    font-size: clamp(3.35rem, 6.25vw, 7.2rem);
    line-height: .9;
    letter-spacing: -.072em;
}
.landing-bento-reordered .landing-bento-top-cta h1 em {
    color: var(--landing-yellow);
    font-family: Georgia, serif;
    font-weight: 500;
}
.landing-bento-reordered .landing-bento-top-cta > p {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(16px, 1.35vw, 21px);
    line-height: 1.55;
}
.landing-bento-section-reordered { padding-top: 0; }
.landing-bento-features-reordered .landing-bento-feature-council { grid-column: span 7; }
.landing-bento-features-reordered .landing-bento-feature-family { grid-column: span 5; }
.landing-bento-features-reordered .landing-bento-feature-admin { grid-column: 1 / -1; }
.landing-bento-features-reordered .landing-bento-feature-points { grid-column: span 5; }
.landing-bento-features-reordered .landing-bento-feature-community { grid-column: span 7; }
.landing-bento-features-reordered .landing-bento-feature h2 {
    margin: 26px 0 14px;
    font-size: clamp(1.75rem, 2.8vw, 3.3rem);
    line-height: 1;
    letter-spacing: -.05em;
}
.landing-bento-features-reordered .landing-bento-feature-community {
    min-height: 390px;
}
.landing-bento-features-reordered .landing-bento-feature-community h2,
.landing-bento-features-reordered .landing-bento-feature-community p {
    position: relative;
    z-index: 3;
    max-width: 52%;
}
.landing-community-scene {
    position: absolute;
    right: -1%;
    bottom: -7%;
    width: 48%;
    aspect-ratio: 1.1;
}
.landing-bento-feature-community .landing-community-scene img {
    position: absolute;
    inset: auto -8% -8% auto;
    width: 112%;
    max-width: none;
    opacity: .92;
    filter: drop-shadow(0 28px 24px rgba(25, 7, 64, .28));
    animation: none;
}
.landing-community-float {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 15px;
    color: white;
    background: rgba(18, 17, 39, .62);
    box-shadow: 0 12px 28px rgba(25, 7, 64, .28);
    backdrop-filter: blur(8px);
    font-size: 19px;
    font-weight: 900;
}
.landing-community-float.float-star { top: 8%; left: 4%; background: #f03fa5; animation: landing-object-float 4.8s ease-in-out infinite; }
.landing-community-float.float-message { top: 26%; right: 4%; background: #22c6e6; animation: landing-object-float 5.6s .7s ease-in-out infinite; }
.landing-community-float.float-lock { right: 18%; bottom: 12%; background: #ffd84d; color: #121127; animation: landing-object-float 5.1s 1.15s ease-in-out infinite; }
@keyframes landing-object-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
    50% { transform: translate3d(0, -12px, 0) rotate(4deg); }
}

@media (max-width: 960px) {
    .landing-bento-reordered .landing-bento-top-cta { min-height: 540px; }
    .landing-bento-features-reordered .landing-bento-feature-council,
    .landing-bento-features-reordered .landing-bento-feature-family,
    .landing-bento-features-reordered .landing-bento-feature-points,
    .landing-bento-features-reordered .landing-bento-feature-community { grid-column: span 6; }
    .landing-bento-features-reordered .landing-bento-feature-community h2,
    .landing-bento-features-reordered .landing-bento-feature-community p { max-width: 70%; }
    .landing-community-scene { width: 58%; opacity: .72; }
}

@media (max-width: 720px) {
    .landing-bento-reordered .landing-bento-top-cta { min-height: 560px; padding: 34px 24px; }
    .landing-bento-reordered .landing-bento-top-cta h1 { font-size: clamp(3rem, 15vw, 5rem); }
    .landing-bento-features-reordered { display: flex; flex-direction: column; }
    .landing-bento-features-reordered .landing-bento-feature-community { min-height: 500px; }
    .landing-bento-features-reordered .landing-bento-feature-community h2,
    .landing-bento-features-reordered .landing-bento-feature-community p { max-width: 100%; }
    .landing-community-scene { right: -8%; width: 82%; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-community-float { animation: none !important; }
}

/* Bulletin individuel : vue compacte pour les conseils de classe. */
.main-content:has(.class-council-view) { padding-top: 20px; padding-bottom: 24px; }
.class-council-view { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 44px); min-height: 650px; }
.class-council-pagination { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 18px; min-height: 56px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.council-pagination-context { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.council-pagination-context strong { margin-top: 3px; font-size: 13px; }
.council-pagination-context small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.council-nav-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; width: max-content; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); font-size: 13px; font-weight: 800; transition: transform .16s ease, color .16s ease, background .16s ease; }
.council-nav-button:last-child { justify-self: end; }
.council-nav-button:hover { color: white; background: var(--primary); transform: translateY(-1px); }
.council-nav-button.is-disabled { color: var(--text-secondary); border-color: var(--border); background: var(--surface-secondary); opacity: .45; cursor: not-allowed; }

.class-council-grid { display: grid; grid-template-columns: minmax(285px, 330px) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.class-council-student-card,
.class-council-results-card { min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.class-council-student-card { display: grid; grid-template-rows: auto auto auto; align-content: start; align-self: start; gap: 14px; padding: 14px; }
.council-student-photo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; border: 2px solid color-mix(in srgb, var(--primary) 42%, var(--border)); border-radius: 16px; object-fit: contain; object-position: center top; background: var(--surface-secondary); }
.class-council-student-card img.council-student-photo { display: block; height: auto; max-height: 52vh; }
.council-student-photo-fallback { aspect-ratio: 1; height: auto; }
.council-student-photo-fallback { color: var(--primary); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 850; }
.council-student-information h1 { margin: 5px 0 10px; font-size: clamp(22px, 2vw, 30px); line-height: 1.03; letter-spacing: -.6px; }
.council-student-information dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 0; }
.council-student-information dl div { min-width: 0; }
.council-student-information dt { color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.council-student-information dd { overflow: hidden; margin: 2px 0 0; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.council-attendance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.council-attendance article { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 9px 5px; text-align: center; }
.council-attendance article + article { border-left: 1px solid var(--border); }
.council-attendance strong { font-size: 21px; line-height: 1; }
.council-attendance span { margin-top: 4px; color: var(--text-secondary); font-size: 9px; font-weight: 750; }

.class-council-results-card { display: flex; flex-direction: column; }
.council-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 9px 15px; border-bottom: 1px solid var(--border); background: linear-gradient(105deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.council-results-heading h2 { margin: 2px 0 0; font-size: 20px; }
.council-period-badge { display: grid; place-items: center; min-width: 42px; min-height: 32px; padding: 6px 10px; border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); font-size: 13px; font-weight: 850; }
.class-council-results-table { width: 100%; min-height: 0; border-collapse: collapse; table-layout: fixed; font-size: clamp(10.5px, .76vw, 13px); }
.class-council-results-table.period-count-1 { width: 62%; }
.class-council-results-table.period-count-2 { width: 72%; }
.class-council-results-table.period-count-3 { width: 84%; }
.class-council-results-table th,
.class-council-results-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.class-council-results-table th { height: 34px; padding: 5px 10px; color: var(--text-secondary); background: var(--surface-secondary); font-size: .82em; text-align: left; text-transform: uppercase; letter-spacing: .05em; }
.class-council-results-table th:not(:first-child) { width: clamp(54px, 7vw, 88px); }
.class-council-results-table td { height: clamp(24px, calc((100vh - 160px) / var(--council-course-count, 15)), 44px); padding: clamp(2px, .34vh, 5px) 10px; }
.council-course-cell strong { display: block; overflow: hidden; font-size: 1em; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.council-course-cell small { display: block; overflow: hidden; margin-top: 2px; color: var(--text-secondary); font-size: .82em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.class-council-results-table tbody tr { transition: background .14s ease; }
.class-council-results-table tbody tr:hover .council-course-cell { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.class-council-results-table tbody tr:hover .council-status-cell { filter: brightness(.96); }
.council-status-cell { padding: 0 !important; color: var(--text-secondary); background: var(--surface); font-size: 1.06em; }
.council-status-cell strong,
.council-status-cell > span { display: grid; place-items: center; width: 100%; height: 100%; min-height: 24px; }
.council-status-cell.is-success { color: #13451f; background: #44eb70; }
.council-status-cell.is-error { color: #fff; background: #e36262; }
.council-status-cell.is-neutral { color: var(--text); background: color-mix(in srgb, var(--warning) 28%, var(--surface)); }
.council-status-cell.has-comment { cursor: help; }
.council-final-status.is-success { color: white; background: #20b8f1; }
.council-documents-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.council-documents-card h2 { margin: 3px 0 0; font-size: 20px; }
.council-documents-card p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; }

.bulk-submit-actions { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
.bulk-submit-actions .button { white-space: nowrap; }
.bulk-submit-actions small { flex-basis: 100%; }
.bulk-publication-help { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }

@media (max-width: 1050px) {
    .class-council-view { height: auto; min-height: 0; }
    .class-council-grid { grid-template-columns: 240px minmax(0, 1fr); }
    .class-council-student-card { grid-template-rows: auto auto auto; }
    .class-council-results-card { overflow-x: auto; }
    .class-council-results-table { width: 100% !important; min-width: 620px; }
}

@media (max-width: 780px) {
    .main-content:has(.class-council-view) { padding-top: 72px; }
    .class-council-pagination { grid-template-columns: auto 1fr auto; }
    .council-nav-button span { display: none; }
    .class-council-grid { grid-template-columns: 1fr; }
    .class-council-student-card { grid-template-columns: 120px 1fr; grid-template-rows: auto auto; }
    .council-student-photo { grid-row: 1 / span 2; min-height: 170px; }
    .council-attendance { align-self: end; }
    .council-pagination-context small { display: none; }
    .council-documents-card { align-items: flex-start; flex-direction: column; }
}

/* Public landing — asymmetric bento composition */
.landing-bento-page {
    --landing-ink: #121127;
    --landing-paper: #f7f4ff;
    --landing-purple: #7137f5;
    --landing-pink: #f03fa5;
    --landing-cyan: #22c6e6;
    --landing-yellow: #ffd84d;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--landing-ink);
    background:
        radial-gradient(circle at 7% 8%, rgba(240, 63, 165, .12), transparent 24rem),
        radial-gradient(circle at 91% 20%, rgba(34, 198, 230, .14), transparent 27rem),
        var(--landing-paper);
}
.landing-bento-page a { color: inherit; text-decoration: none; }
.landing-bento-orb { position: fixed; z-index: -1; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(85px); opacity: .24; pointer-events: none; }
.landing-bento-orb-one { top: 34%; left: -18rem; background: var(--landing-pink); }
.landing-bento-orb-two { right: -18rem; bottom: 3%; background: var(--landing-cyan); }
.landing-bento-nav,
.landing-bento-shell,
.landing-bento-footer { width: min(1420px, calc(100% - 48px)); margin-inline: auto; }
.landing-bento-nav { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.landing-bento-nav nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 750; }
.landing-bento-nav nav > a:not(.button) { transition: color .18s ease, transform .18s ease; }
.landing-bento-nav nav > a:not(.button):hover { color: var(--landing-purple); transform: translateY(-1px); }
.landing-bento-page .landing-brand { display: inline-flex; align-items: center; gap: 11px; }
.landing-bento-page .landing-brand .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 10px 25px rgba(113, 55, 245, .26); font-size: 19px; font-weight: 900; }
.landing-bento-page .landing-brand strong,
.landing-bento-page .landing-brand small { display: block; }
.landing-bento-page .landing-brand strong { font-size: 19px; line-height: 1.05; }
.landing-bento-page .landing-brand small { margin-top: 3px; color: #6e6a82; font-size: 11px; }
.landing-bento-login { gap: 8px; min-height: 44px; padding-inline: 18px; border: 1px solid rgba(18, 17, 39, .12); color: var(--landing-ink); background: white; box-shadow: 0 8px 24px rgba(26, 18, 68, .08); }
.landing-bento-login:hover { color: white; border-color: var(--landing-ink); background: var(--landing-ink); }
.landing-bento-card { position: relative; overflow: hidden; border: 1px solid rgba(31, 21, 75, .1); border-radius: 28px; background: rgba(255, 255, 255, .84); box-shadow: 0 24px 70px rgba(51, 35, 112, .1); }
.landing-bento-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(275px, auto) 180px; gap: 18px; min-height: 650px; padding-top: 22px; }
.landing-bento-lead { grid-column: 1 / span 8; grid-row: 1; padding: clamp(36px, 5vw, 72px); background: linear-gradient(145deg, #fff 0%, #fbf8ff 65%, #f2eaff 100%); }
.landing-bento-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--landing-purple); font-size: 12px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.landing-bento-kicker i { width: 9px; height: 9px; border-radius: 50%; background: var(--landing-pink); box-shadow: 0 0 0 5px rgba(240, 63, 165, .12); }
.landing-bento-lead h1 { max-width: 900px; margin: 28px 0 24px; font-size: clamp(3.2rem, 6.2vw, 7.3rem); line-height: .88; letter-spacing: -.075em; }
.landing-bento-lead h1 em,
.landing-bento-cta h2 em { color: var(--landing-purple); font-family: Georgia, serif; font-weight: 500; }
.landing-bento-lead p { max-width: 680px; margin: 0; color: #625e77; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.55; }
.landing-bento-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 34px; }
.landing-bento-actions > a:not(.button) { color: #625e77; font-size: 14px; font-weight: 750; }
.landing-bento-actions > a:not(.button):hover { color: var(--landing-purple); }
.landing-bento-primary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; padding: 13px 22px; border: 0; color: white !important; background: var(--landing-ink); box-shadow: 0 14px 30px rgba(18, 17, 39, .2); }
.landing-bento-primary span { font-size: 20px; transition: transform .18s ease; }
.landing-bento-primary:hover { background: var(--landing-purple); transform: translateY(-2px); }
.landing-bento-primary:hover span { transform: translateX(4px); }
.landing-bento-stamp { position: absolute; right: -36px; bottom: -40px; display: grid; place-items: center; width: 178px; aspect-ratio: 1; border: 1px dashed rgba(113, 55, 245, .25); border-radius: 50%; color: rgba(113, 55, 245, .22); transform: rotate(-12deg); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.landing-bento-stamp b { position: absolute; font-size: 55px; font-weight: 300; }
.landing-bento-visual { grid-column: 9 / -1; grid-row: 1 / span 2; min-height: 630px; isolation: isolate; }
.landing-bento-cyan { color: #082d39; background: linear-gradient(155deg, #6ee8f3, #24c7e6 56%, #2f9df3); }
.landing-bento-number { position: absolute; top: 26px; right: 28px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(8, 45, 57, .18); border-radius: 50%; font-size: 12px; font-weight: 900; }
.landing-bento-visual-copy { position: relative; z-index: 2; padding: 36px; }
.landing-bento-visual-copy span,
.landing-bento-feature-head span { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.landing-bento-visual-copy h2 { margin: 12px 0 0; font-size: clamp(2rem, 3.2vw, 3.7rem); line-height: .96; letter-spacing: -.055em; }
.landing-bento-visual img { position: absolute; z-index: 1; right: -20%; bottom: -5%; width: 135%; max-width: none; filter: drop-shadow(0 30px 28px rgba(8, 45, 57, .25)); animation: landing-bento-float 6s ease-in-out infinite; }
.landing-bento-mini { display: flex; align-items: center; gap: 16px; min-height: 170px; padding: 24px; transition: transform .22s ease, box-shadow .22s ease; }
.landing-bento-mini:hover,
.landing-bento-feature:hover { transform: translateY(-5px); box-shadow: 0 28px 75px rgba(51, 35, 112, .16); }
.landing-bento-mini:nth-child(3) { grid-column: 1 / span 4; grid-row: 2; }
.landing-bento-mini:nth-child(4) { grid-column: 5 / span 4; grid-row: 2; }
.landing-bento-yellow { background: var(--landing-yellow); }
.landing-bento-pink { color: white; background: linear-gradient(140deg, #ff5db8, var(--landing-pink)); }
.landing-bento-icon { display: grid; flex: 0 0 58px; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 255, 255, .62); font-size: 22px; font-weight: 900; }
.landing-bento-mini strong,
.landing-bento-mini small { display: block; }
.landing-bento-mini strong { font-size: 18px; }
.landing-bento-mini small { margin-top: 6px; color: currentColor; font-size: 13px; line-height: 1.4; opacity: .7; }
.landing-bento-section { padding: 130px 0 30px; }
.landing-bento-section-title { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 30px; margin-bottom: 40px; }
.landing-bento-section-title > span { color: var(--landing-purple); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.landing-bento-section-title h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 5.7rem); line-height: .94; letter-spacing: -.065em; }
.landing-bento-features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 18px; }
.landing-bento-feature { min-height: 320px; padding: 32px; transition: transform .22s ease, box-shadow .22s ease; }
.landing-bento-feature-head { display: flex; align-items: center; justify-content: space-between; color: var(--landing-purple); }
.landing-bento-feature-head b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; }
.landing-bento-feature h3 { margin: 26px 0 14px; font-size: clamp(1.75rem, 2.8vw, 3.3rem); line-height: 1; letter-spacing: -.05em; }
.landing-bento-feature p { max-width: 590px; margin: 0; color: #6b667c; font-size: 15px; line-height: 1.55; }
.landing-bento-feature-points { grid-column: span 5; background: #fff; }
.landing-bento-score-stack { display: grid; gap: 9px; margin-top: 26px; }
.landing-bento-score-stack span { display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 10px 16px; border: 1px solid rgba(113, 55, 245, .12); border-radius: 15px; background: #f7f3ff; }
.landing-bento-score-stack i { color: #706a83; font-size: 12px; font-style: normal; font-weight: 800; }
.landing-bento-score-stack b { font-size: 20px; }
.landing-bento-score-stack .is-success { color: #0a5930; background: #bff7d0; }
.landing-bento-feature-community { grid-column: span 7; color: white; background: linear-gradient(145deg, #5c2bc4, #8c41ec 55%, #f03fa5); }
.landing-bento-feature-community .landing-bento-feature-head,
.landing-bento-feature-community p { color: rgba(255, 255, 255, .76); }
.landing-bento-feature-community h3,
.landing-bento-feature-community p { position: relative; z-index: 2; max-width: 54%; }
.landing-bento-feature-community img { position: absolute; right: -8%; bottom: -20%; width: 60%; max-width: none; filter: drop-shadow(0 30px 28px rgba(25, 7, 64, .32)); animation: landing-bento-float 7s ease-in-out infinite reverse; }
.landing-bento-feature-council { grid-column: span 7; background: var(--landing-ink); color: white; }
.landing-bento-feature-council .landing-bento-feature-head { color: #bfa5ff; }
.landing-bento-result-grid { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(4, 50px); overflow: hidden; margin-top: 25px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 16px; }
.landing-bento-result-grid > * { display: grid; min-height: 44px; place-items: center; border-right: 1px solid rgba(255, 255, 255, .11); border-bottom: 1px solid rgba(255, 255, 255, .11); font-size: 12px; }
.landing-bento-result-grid span { justify-content: start; padding-left: 14px; }
.landing-bento-result-grid b.ok { color: #124b27; background: #52e87b; }
.landing-bento-result-grid b.no { color: white; background: #e36262; }
.landing-bento-feature-family { grid-column: span 5; background: linear-gradient(155deg, #fff7cf, var(--landing-yellow)); }
.landing-bento-feature-family .landing-bento-feature-head { color: #7b5a00; }
.landing-bento-periods { display: flex; gap: 9px; margin-top: 28px; }
.landing-bento-periods span { display: flex; align-items: center; justify-content: space-between; min-width: 66px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .65); font-size: 13px; font-weight: 900; }
.landing-bento-periods i { color: #0d6b38; font-style: normal; }
.landing-bento-feature-admin { grid-column: 1 / -1; min-height: 300px; background: linear-gradient(125deg, #eefaff, #fff 55%, #fff0f8); }
.landing-bento-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.landing-bento-progress span { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 20px; border: 1px solid rgba(34, 198, 230, .18); border-radius: 18px; background: rgba(255, 255, 255, .78); }
.landing-bento-progress b { font-size: 16px; }
.landing-bento-progress em { font-size: 13px; font-style: normal; font-weight: 900; }
.landing-bento-progress i { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: #eceaf4; }
.landing-bento-progress i::after { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--landing-purple), var(--landing-pink)); content: ""; }
.landing-bento-ribbon { display: flex; align-items: center; justify-content: space-around; margin: 70px 0 18px; padding: 27px 35px; color: white; background: var(--landing-ink); font-size: clamp(12px, 1.3vw, 18px); font-weight: 900; letter-spacing: .09em; }
.landing-bento-ribbon i { color: var(--landing-cyan); font-size: 22px; font-style: normal; }
.landing-bento-cta { min-height: 420px; margin-bottom: 70px; padding: clamp(40px, 6vw, 82px); color: white; background: linear-gradient(135deg, #6329d1, #8d42ee 56%, #ee3f9f); }
.landing-bento-cta .landing-bento-kicker { color: white; }
.landing-bento-cta .landing-bento-kicker i { background: var(--landing-yellow); }
.landing-bento-cta h2 { position: relative; z-index: 2; max-width: 900px; margin: 30px 0; font-size: clamp(3rem, 5.8vw, 6.4rem); line-height: .9; letter-spacing: -.07em; }
.landing-bento-cta h2 em { color: var(--landing-yellow); }
.landing-bento-cta .landing-bento-primary { position: relative; z-index: 2; background: white; color: var(--landing-ink) !important; }
.landing-bento-cta-shape { position: absolute; right: -7%; bottom: -35%; width: 42%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .22); border-radius: 33% 67% 60% 40% / 45% 40% 60% 55%; transform: rotate(20deg); box-shadow: inset 0 0 0 55px rgba(255, 216, 77, .09), inset 0 0 0 110px rgba(34, 198, 230, .08); animation: landing-bento-turn 18s linear infinite; }
.landing-bento-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 110px; border-top: 1px solid rgba(18, 17, 39, .1); color: #6b667c; font-size: 13px; }
.landing-bento-footer > a:last-child { color: var(--landing-purple); font-weight: 850; }

@keyframes landing-bento-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes landing-bento-turn { to { transform: rotate(380deg); } }

@media (max-width: 1000px) {
    .landing-bento-hero { grid-template-rows: auto 200px auto; }
    .landing-bento-lead { grid-column: 1 / -1; }
    .landing-bento-visual { grid-column: 7 / -1; grid-row: 2 / span 2; min-height: 500px; }
    .landing-bento-mini:nth-child(3) { grid-column: 1 / span 6; }
    .landing-bento-mini:nth-child(4) { grid-column: 1 / span 6; grid-row: 3; }
    .landing-bento-feature-points,
    .landing-bento-feature-family { grid-column: span 6; }
    .landing-bento-feature-community,
    .landing-bento-feature-council { grid-column: span 6; }
    .landing-bento-feature-community h3,
    .landing-bento-feature-community p { max-width: 74%; }
    .landing-bento-feature-community img { opacity: .65; }
}

@media (max-width: 720px) {
    .landing-bento-nav,
    .landing-bento-shell,
    .landing-bento-footer { width: min(100% - 24px, 1420px); }
    .landing-bento-nav nav > a:not(.button) { display: none; }
    .landing-bento-hero { display: flex; flex-direction: column; min-height: 0; padding-top: 8px; }
    .landing-bento-card { border-radius: 22px; }
    .landing-bento-lead { padding: 34px 24px; }
    .landing-bento-lead h1 { font-size: clamp(3rem, 15vw, 5rem); }
    .landing-bento-visual { min-height: 480px; }
    .landing-bento-visual img { right: -28%; width: 150%; }
    .landing-bento-section { padding-top: 85px; }
    .landing-bento-section-title { display: block; }
    .landing-bento-section-title h2 { margin-top: 18px; }
    .landing-bento-features { display: flex; flex-direction: column; }
    .landing-bento-feature-community { min-height: 470px; }
    .landing-bento-feature-community h3,
    .landing-bento-feature-community p { max-width: 100%; }
    .landing-bento-feature-community img { right: -17%; bottom: -16%; width: 82%; }
    .landing-bento-result-grid { grid-template-columns: minmax(120px, 1fr) repeat(4, 38px); }
    .landing-bento-progress { grid-template-columns: 1fr; }
    .landing-bento-ribbon { overflow-x: auto; justify-content: flex-start; gap: 25px; }
    .landing-bento-cta { min-height: 500px; }
    .landing-bento-cta-shape { right: -25%; bottom: -15%; width: 85%; }
    .landing-bento-footer { align-items: flex-start; flex-direction: column; padding: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-bento-visual img,
    .landing-bento-feature-community img,
    .landing-bento-cta-shape { animation: none; }
}
/* Configuration SIPS et stages */
.class-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); gap:1.25rem; align-items:start; }
.class-editor-layout > .card { margin:0; }
.class-form-actions { margin-top:1rem; }
.special-feature-toggle { padding:.8rem 1rem; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--primary) 5%,var(--surface)); }
.special-feature-toggle label { display:inline-flex; margin-right:.65rem; }
.special-config-panel { display:grid; gap:1.25rem; }
.special-config-panel section { display:grid; gap:1rem; }
.special-config-panel section + section { border-top:1px solid var(--border); padding-top:1.25rem; }
.special-config-empty { text-align:center; padding:3rem 1rem; color:var(--text-secondary); }
.special-section-heading,.special-config-item-heading,.special-inline-row { display:flex; align-items:center; justify-content:space-between; gap:.65rem; }
.special-section-heading > div { min-width:0; }
.special-section-heading p { margin:.2rem 0 0; color:var(--text-secondary); }
.special-columns-editor,.special-config-item { display:grid; gap:.75rem; padding:1rem; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border)); border-radius:16px; background:color-mix(in srgb,var(--primary) 6%,var(--surface)); }
.special-config-item-heading input,.special-inline-row input { flex:1; min-width:0; }
.encoding-special-card { border-color:color-mix(in srgb,var(--accent) 32%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface)); }
.encoding-special-students { display:grid; gap:1.25rem; }
.encoding-special-student-card { padding:0; overflow:hidden; }
.encoding-special-student-header { padding:1.1rem 1.35rem; border-bottom:1px solid var(--border); background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 9%,var(--surface-secondary)),color-mix(in srgb,var(--accent) 7%,var(--surface-secondary))); }
.encoding-special-student-header h2 { margin:.2rem 0 0; }
.encoding-special-section { display:grid; gap:.8rem; padding:1.1rem 1.35rem; }
.encoding-special-section + .encoding-special-section { border-top:1px solid var(--border); }
.encoding-special-section h3 { margin:0; }
.special-result-block { display:grid; gap:.55rem; }
.special-result-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.special-result-table th:not(:first-child),.special-result-table td:not(:first-child) { width:9rem; }
.special-result-input-cell { position:relative; min-width:8rem; }
.special-result-input-cell input { min-width:6.5rem; width:100%; text-align:center; }
.special-result-input-cell .save-indicator { position:absolute; right:.25rem; bottom:.1rem; font-size:.62rem; }
.special-overall-row { background:color-mix(in srgb,var(--primary) 7%,var(--surface-secondary)); }
.special-stage-results { display:grid; gap:.65rem; }
.special-stage-row { display:grid; grid-template-columns:minmax(14rem,1fr) minmax(9rem,18rem) auto; align-items:center; gap:.8rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-secondary); }
.special-stage-row small { display:block; color:var(--text-secondary); margin-top:.15rem; }
@media (max-width:760px) { .special-stage-row { grid-template-columns:1fr; } .special-result-table { min-width:42rem; } }
.special-picker { display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; }
.special-picker legend { padding:0 .35rem; font-weight:700; }
.special-check-option,.special-teacher-option { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .65rem; border-radius:10px; background:var(--surface); }
.special-teacher-picker { display:grid; gap:.5rem; }
.special-teacher-results { display:grid; gap:.4rem; max-height:180px; overflow:auto; }
.special-competency-list { display:grid; gap:.5rem; }
.special-card { background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,var(--surface)),color-mix(in srgb,var(--accent) 9%,var(--surface))); border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); }
@media (max-width:980px) { .class-editor-layout { grid-template-columns:1fr; } .special-section-heading { align-items:flex-start; flex-direction:column; } }