@font-face {
    font-family: "Eduryo Fredoka";
    src: url("../fonts/fredoka-variable.7b33fede4d21.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Eduryo Emoji";
    src: url("../fonts/noto-color-emoji-eduryo.752818be1143.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

: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;
    --sidebar-compact-width: 112px;
    --radius: 14px;
    --ui-accent-wash: 10%;
    --ui-accent-border: 20%;
    --decorative-1: #8B5CF6;
    --decorative-2: #27AFD3;
    --decorative-3: #E66AA6;
    --decorative-4: #E9A13C;
    --decorative-5: #2B9B72;
    --decorative-6: #E77936;
    /* Palette du journal : les premières classes alternent des familles éloignées. */
    --journal-color-1: #3B82F6;
    --journal-color-2: var(--decorative-4);
    --journal-color-3: var(--decorative-5);
    --journal-color-4: var(--decorative-1);
    --journal-color-5: var(--decorative-2);
    --journal-color-6: var(--decorative-3);
    --journal-color-7: var(--decorative-6);
    --journal-color-8: color-mix(in srgb, var(--decorative-1) 50%, var(--decorative-2));
    --journal-color-9: color-mix(in srgb, var(--decorative-4) 55%, var(--decorative-5));
    --journal-color-10: color-mix(in srgb, var(--decorative-3) 50%, var(--decorative-4));
    --journal-today-color: #22C55E;
    --journal-pedagogical-color: #16A34A;
    --journal-pedagogical-text: #166534;
    --journal-homeroom-color: #2563EB;
    --journal-homeroom-text: #1E40AF;
    --journal-parent-meeting-color: #8B5CF6;
    --journal-parent-meeting-text: #5B21B6;
}

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;
    --journal-pedagogical-color: #4ADE80;
    --journal-pedagogical-text: #DCFCE7;
    --journal-homeroom-color: #60A5FA;
    --journal-homeroom-text: #DBEAFE;
    --journal-parent-meeting-color: #A78BFA;
    --journal-parent-meeting-text: #EDE9FE;
    --text: #F9FAFB;
    --text-secondary: #9CA3AF;
    --border: #3A334A;
    --shadow: 0 12px 36px rgba(0, 0, 0, .22);
    --ui-accent-wash: 6%;
    --ui-accent-border: 15%;
}

@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;
        --journal-pedagogical-color: #4ADE80; --journal-pedagogical-text: #DCFCE7;
        --journal-homeroom-color: #60A5FA; --journal-homeroom-text: #DBEAFE;
        --journal-parent-meeting-color: #A78BFA; --journal-parent-meeting-text: #EDE9FE;
        --text: #F9FAFB; --text-secondary: #A9A3B5; --border: #3A334A;
        --shadow: 0 12px 36px rgba(0, 0, 0, .22);
        --ui-accent-wash: 6%; --ui-accent-border: 15%;
    }
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--background); color: var(--text); }
body { max-width: 100%; margin: 0; min-height: 100vh; overflow-x: clip; background: var(--background); }
/* Les deux palettes d’accent reprennent le souffle chromatique du hero public
   sur les écrans authentifiés, sans modifier les thèmes complets. */
html:is([data-accent="violet_rose"], [data-accent="ocean"]) body:not(.landing-body) {
    --page-bottom-blob-opacity: 18%;
    --page-bottom-blob-mobile-opacity: 9%;
    --page-bottom-wash-opacity: 9%;
    --page-bottom-wash-mobile-opacity: 5%;
    background-color: var(--background);
    background-image:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38rem),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) var(--page-bottom-blob-opacity), transparent), transparent 42rem),
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--background)), var(--background) 48%, color-mix(in srgb, var(--primary) var(--page-bottom-wash-opacity), var(--background)));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
html[data-theme="light"]:is([data-accent="violet_rose"], [data-accent="ocean"]) body:not(.landing-body) { --page-bottom-blob-opacity: 6%; --page-bottom-blob-mobile-opacity: 3%; --page-bottom-wash-opacity: 2%; --page-bottom-wash-mobile-opacity: 2%; }
@media (prefers-color-scheme: light) {
    html[data-theme="system"]:is([data-accent="violet_rose"], [data-accent="ocean"]) body:not(.landing-body) { --page-bottom-blob-opacity: 6%; --page-bottom-blob-mobile-opacity: 3%; --page-bottom-wash-opacity: 2%; --page-bottom-wash-mobile-opacity: 2%; }
}
html:is([data-accent="violet_rose"], [data-accent="ocean"]) body:not(.landing-body) .main-content { background: transparent; }
@media (max-width: 760px) {
    html:is([data-accent="violet_rose"], [data-accent="ocean"]) body:not(.landing-body) {
        background-image:
            radial-gradient(circle at -25% -5%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 28rem),
            radial-gradient(circle at 110% 100%, color-mix(in srgb, var(--primary) var(--page-bottom-blob-mobile-opacity), transparent), transparent 32rem),
            linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--background)), var(--background) 55%, color-mix(in srgb, var(--primary) var(--page-bottom-wash-mobile-opacity), var(--background)));
        background-attachment: scroll;
    }
}
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; transition: grid-template-columns .22s ease; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 24px 18px 18px; overflow: visible; background: var(--surface); border-right: 1px solid var(--border); z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 34px 0 8px; }
.sidebar-size-toggle { position: absolute; z-index: 2; top: 30px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--text-secondary); background: transparent; transition: color .18s ease, background .18s ease; }
.sidebar-size-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.sidebar-size-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar-size-toggle-icon::before { content: "«"; display: block; font-size: 18px; font-weight: 800; line-height: 1; transform: translateY(-1px); }
.sidebar-size-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.brand-mark { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 7px 20px color-mix(in srgb, var(--primary) 30%, transparent); }
.brand-mark::before { position: absolute; inset: 2px; border-radius: 50%; background: white; content: ""; }
.brand-mark::after { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary), var(--accent)); content: ""; -webkit-mask: url("../img/eduryo-icon.52d896ea812a.png") center / contain no-repeat; mask: url("../img/eduryo-icon.52d896ea812a.png") center / contain no-repeat; }
.brand-mark img { width: 100%; height: 100%; opacity: 0; }
.brand strong { display: block; font-size: 20px; letter-spacing: -.4px; }
html:not([data-accent="retro_95"]):not([data-accent="windows_xp"]):not([data-accent="medieval_fantasy"]) :is(.sidebar .brand, .mobile-brand) strong { font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-weight: 600; font-size: 26px; letter-spacing: .1px; line-height: 1.15; }
.brand small, .user-card small, .school-context small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.school-context { position: relative; flex-shrink: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 62px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.school-context-logo { display: grid; place-items: center; width: 32px; height: 32px; max-width: 100%; object-fit: contain; border-radius: 6px; font-size: 24px; }
.school-context-copy { display: grid; gap: 2px; min-width: 0; }
.school-context:has(details[open]) { z-index: 60; }
.school-context strong { display: block; font-size: 14px; line-height: 1.2; }
.school-context-copy > strong { margin: 0; }
.school-switch-context { position: relative; }
.school-switch-context > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.school-switch-context > summary::-webkit-details-marker { display: none; }
.school-switch-context > summary::after { content: "⇄"; display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, transparent); font-size: 13px; }
.school-switch-context[open] > summary::after { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.school-switch-menu { top: calc(100% + .55rem); width: min(260px, calc(100vw - 42px)); }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.side-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    margin-inline-end: -14px;
    padding-inline-end: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--text-secondary) 58%, transparent) transparent;
    scrollbar-width: thin;
}
.side-nav > * { flex-shrink: 0; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 58%, transparent); }
.side-nav::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-secondary) 78%, transparent); }
.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 .nav-unavailable { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 12px; border-radius: 10px; color: var(--text-secondary); opacity: .78; font-size: 14px; font-weight: 600; cursor: not-allowed; }
.side-nav .nav-unavailable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.side-nav .nav-unavailable > .emoji-icon { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; font-size: 17px; }
.nav-submenu { position: relative; margin: 0; }
.nav-submenu > summary { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 12px; border-radius: 10px; color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.nav-submenu > summary .emoji-icon { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; font-size: 17px; line-height: 1; }
.nav-submenu > summary::-webkit-details-marker { display: none; }
.nav-submenu > summary::after { content: "›"; margin-left: auto; color: var(--text-secondary); font-size: 22px; line-height: 1; transition: transform .18s ease; }
.nav-submenu[open] > summary::after { transform: translateX(2px); }
.nav-submenu-menu { position: fixed; left: 0; top: 0; z-index: 80; display: none; width: 214px; max-height: min(390px, calc(100vh - 32px)); overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: 0 8px 22px rgba(17, 24, 39, .12); }
.nav-submenu[open] > .nav-submenu-menu { display: grid; gap: 2px; }
.nav-submenu-menu > a { min-height: 38px; padding: 9px 10px; border-radius: 8px; font-size: 13px; }
.nav-submenu-menu > a:hover { transform: none; }
.nav-submenu > summary:hover, .nav-submenu > summary:focus-visible { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.nav-submenu.is-active > summary { color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
.nav-submenu.is-active > summary .emoji-icon { color: var(--primary); }
.nav-submenu > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-admin-menu-content { display: grid; gap: 3px; }

@media (max-width: 900px) {
    .side-nav { overflow-x: hidden; overflow-y: auto; }
    .nav-submenu-menu { position: static; display: none; width: auto; max-height: none; overflow: visible; margin-left: 16px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .nav-submenu[open] > .nav-submenu-menu { display: grid; }
    .nav-submenu-menu > a { padding-left: 18px; min-height: 38px; }
}
.emoji-icon,
.side-nav a .emoji-icon,
.theme-toggle [data-theme-icon],
.achievement-notification-icon,
.achievement-illustration,
.colleague-trophy-icon,
.teacher-tool-icon {
    font-family: "Eduryo Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-variant-emoji: emoji;
}
.noto-emoji-image { display: block; width: 1em; height: 1em; max-width: 100%; object-fit: contain; }
.side-nav a > .emoji-icon { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; color: var(--text-secondary); font-size: 17px; line-height: 1; }
.side-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--primary) var(--ui-accent-wash), var(--surface-secondary)); transform: translateX(2px); }
.side-nav a.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
.side-nav a.active > .emoji-icon { color: var(--primary); }
.nav-notification-badge { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 21px; height: 21px; margin-left: auto; padding: 0 6px; border: 2px solid var(--surface); border-radius: 999px; color: #fff; background: var(--error); font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 2px 7px color-mix(in srgb, var(--error) 35%, transparent); }
.nav-submenu > summary .nav-notification-badge { margin-left: auto; }
.nav-section { margin: 14px 12px 5px; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.sidebar-footer { display: grid; grid-template-columns: minmax(0, 1fr) 38px 38px; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.sidebar-footer > .user-card { grid-column: 1; gap: 7px; min-width: 0; padding: 3px; }
.sidebar-footer > .user-card::before, .sidebar-footer > .user-card small { display: none; }
.sidebar-footer > .user-card > span:last-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
.sidebar-footer > .user-card strong { max-width: none; }
.sidebar-footer > .theme-toggle { grid-column: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.sidebar-footer > .theme-toggle [data-theme-icon] { width: 22px; height: 22px; margin: 0; font-size: 22px; line-height: 1; }
.sidebar-footer > .theme-toggle [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sidebar-footer > .sidebar-footer-logout { grid-column: 3; display: grid; place-items: center; }
.sidebar-footer > .sidebar-footer-logout .logout-link { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.sidebar-footer > .sidebar-footer-logout .logout-icon { display: block; }
.sidebar-footer > .sidebar-footer-logout .logout-label { display: none; }
.sidebar-account-menu { display: none; }
.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); }
.theme-toggle [data-theme-icon] { display: inline-grid; place-items: center; width: 24px; margin-right: 3px; }
.theme-toggle.is-seasonal-locked { color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 72%, var(--border)); background: color-mix(in srgb, var(--primary) 18%, var(--surface-secondary)); box-shadow: inset 3px 0 0 var(--primary); }
.theme-toggle.is-seasonal-locked:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 28%, var(--surface-secondary)); }
.theme-toggle.is-seasonal-locked { display: flex; align-items: center; gap: 3px; }
.sidebar-footer > .theme-toggle.is-seasonal-locked { display: grid; place-items: center; }
.theme-toggle.is-seasonal-locked [data-theme-label] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seasonal-theme-notice { color: var(--text); border-color: color-mix(in srgb, var(--warning) 72%, var(--border)); border-left: 5px solid var(--warning); background: linear-gradient(110deg, color-mix(in srgb, var(--warning) 24%, var(--surface)), var(--surface)); font-weight: 500; }
.logout-link {
    color: color-mix(in srgb, var(--error) 40%, var(--text));
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}
.logout-link:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: color-mix(in srgb, var(--error) 25%, var(--text)); }
.logout-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.logout-icon { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 781px) {
    html.sidebar-compact .app-shell { grid-template-columns: var(--sidebar-compact-width) minmax(0, 1fr); }
    html.sidebar-compact .main-content { --main-sidebar-width: var(--sidebar-compact-width); }
    html.sidebar-compact .sidebar { gap: 11px; padding: 66px 9px 12px; }
    html.sidebar-compact body .sidebar .sidebar-brand {
        position: absolute; top: 17px; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
        border: 0; border-radius: 50%; color: inherit; background: transparent; box-shadow: none;
        transform: translateX(-50%);
    }
    html.sidebar-compact .sidebar .sidebar-brand > span:last-child { display: none; }
    html.sidebar-compact .sidebar .sidebar-brand .brand-mark { width: 38px; height: 38px; }
    html.sidebar-compact .sidebar-size-toggle { top: 22px; right: 4px; width: 26px; height: 28px; }
    html.sidebar-compact .sidebar-size-toggle-icon::before { content: "»"; }
    html.sidebar-compact .school-context { display: block; min-height: 0; padding: 10px 5px; text-align: center; }
    html.sidebar-compact .school-context-logo,
    html.sidebar-compact .school-context :is(.academic-year-context, .academic-year-label) { display: none; }
    html.sidebar-compact .school-context-copy { display: block; }
    html.sidebar-compact .school-context-copy > strong,
    html.sidebar-compact .school-switch-context > summary > strong {
        display: -webkit-box;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    html.sidebar-compact .school-switch-context > summary { justify-content: center; }
    html.sidebar-compact .school-switch-context > summary::after { display: none; }
    html.sidebar-compact .school-switch-menu { left: calc(100% + 12px); top: 0; }
    html.sidebar-compact .side-nav { gap: 5px; margin-inline-end: -4px; padding-inline-end: 4px; }
    html.sidebar-compact .side-nav .nav-section { display: none; }
    html.sidebar-compact .side-nav a,
    html.sidebar-compact .side-nav .nav-unavailable,
    html.sidebar-compact .nav-submenu > summary {
        position: relative;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 63px;
        padding: 7px 3px;
        text-align: center;
        font-size: 0;
        line-height: 1.05;
    }
    html.sidebar-compact .side-nav a::after,
    html.sidebar-compact .side-nav .nav-unavailable::after,
    html.sidebar-compact .nav-submenu > summary::after {
        content: attr(data-short-label);
        display: block;
        width: 100%;
        overflow: hidden;
        font-size: 9px;
        font-weight: 650;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.sidebar-compact .nav-submenu > summary::after { margin-left: 0; color: inherit; transform: none; }
    html.sidebar-compact .nav-notification-badge { position: absolute; top: 4px; right: 4px; min-width: 19px; height: 19px; margin: 0; padding: 0 5px; font-size: 10px; }
    html.sidebar-compact .side-nav a > .emoji-icon,
    html.sidebar-compact .side-nav .nav-unavailable > .emoji-icon,
    html.sidebar-compact .nav-submenu > summary .emoji-icon { flex-basis: 28px; width: 28px; font-size: 25px; }
    html.sidebar-compact .side-nav a:hover { transform: none; }
    html.sidebar-compact .side-nav a.active,
    html.sidebar-compact .nav-submenu.is-active > summary { box-shadow: inset 0 3px 0 var(--primary); }
    html.sidebar-compact .nav-admin-menu-content { gap: 5px; }
    html.sidebar-compact .nav-submenu-menu > a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        min-height: 38px;
        padding: 9px 10px;
        text-align: left;
        font-size: 13px;
        line-height: normal;
    }
    html.sidebar-compact .nav-submenu-menu > a::after { display: none; content: none; }
    html.sidebar-compact .nav-submenu-menu > a > .emoji-icon { flex-basis: 24px; width: 24px; font-size: 17px; }
    html.sidebar-compact .sidebar-footer { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    html.sidebar-compact .sidebar-footer > :is(.user-card, .theme-toggle, .sidebar-footer-logout) { display: none; }
    html.sidebar-compact .sidebar-account-menu { position: relative; display: block; }
    html.sidebar-compact .sidebar-account-menu > summary { display: grid; place-items: center; width: 46px; height: 46px; padding: 3px; border-radius: 50%; cursor: pointer; list-style: none; }
    html.sidebar-compact .sidebar-account-menu > summary::-webkit-details-marker { display: none; }
    html.sidebar-compact .sidebar-account-menu > summary:hover { background: var(--surface-secondary); }
    html.sidebar-compact .sidebar-account-menu > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    html.sidebar-compact .sidebar-account-menu > summary .avatar { width: 40px; height: 40px; }
    html.sidebar-compact .sidebar-account-menu-panel { position: absolute; z-index: 90; bottom: 0; left: calc(100% + 12px); display: none; width: 212px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
    html.sidebar-compact .sidebar-account-menu[open] > .sidebar-account-menu-panel { display: grid; gap: 2px; }
    html.sidebar-compact .sidebar-account-menu-panel > a,
    html.sidebar-compact .sidebar-account-menu-panel > .theme-toggle,
    html.sidebar-compact .sidebar-account-menu-panel > form > .logout-link { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; font-weight: 600; }
    html.sidebar-compact .sidebar-account-menu-panel > a:hover { color: var(--primary); background: var(--surface-secondary); }
    html.sidebar-compact .sidebar-account-menu-panel .emoji-icon,
    html.sidebar-compact .sidebar-account-menu-panel .logout-icon { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; font-size: 20px; }
    html.sidebar-compact .sidebar-account-menu-panel > form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell, .sidebar-size-toggle { transition: none; }
}

/* Keep navigation usable on short laptop displays: only the links need to scroll. */
@media (min-width: 781px) and (max-height: 820px) {
    .sidebar { gap: 10px; padding: 14px 14px 10px; }
    .sidebar-brand .brand-mark { width: 36px; height: 36px; }
    html:not(.sidebar-compact) .sidebar-size-toggle { top: 17px; }
    .school-context { min-height: 52px; padding: 7px 9px; }
    html.sidebar-compact .sidebar { gap: 8px; padding: 62px 9px 9px; }
    html.sidebar-compact .side-nav a, html.sidebar-compact .nav-submenu > summary { min-height: 63px; gap: 4px; }
    html.sidebar-compact .side-nav a > .emoji-icon, html.sidebar-compact .nav-submenu > summary .emoji-icon { font-size: 22px; }
}

.academic-year-context { position: relative; }
.academic-year-context summary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 22px; gap: .75rem; padding: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.2; cursor: pointer; list-style: none; }
.academic-year-context summary::after { content: "⌄"; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: .88rem; line-height: 1; transition: transform .18s ease, background .18s ease; }
.academic-year-context[open] summary::after { transform: rotate(180deg); background: color-mix(in srgb, var(--primary) 17%, transparent); }
.academic-year-context summary::-webkit-details-marker { display: none; }
.academic-year-label { display: flex; align-items: center; min-height: 22px; color: var(--text-secondary); font-size: .82rem; line-height: 1.2; }
.academic-year-menu { position: absolute; z-index: 70; 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-top: 34px; }
.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; }
.maintenance-illustration { display: block; width: min(48vw, 780px); max-width: 100%; height: auto; filter: drop-shadow(0 34px 44px rgba(0,0,0,.3)); }
@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-illustration { width: min(92vw, 620px); }
    .maintenance-brand { margin-bottom: 28px; }
}

.cookie-notice { position: fixed; z-index: 120; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 20px; width: min(680px, calc(100vw - 44px)); padding: 17px 18px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 16px; color: var(--text); background: color-mix(in srgb, var(--surface) 94%, var(--primary)); box-shadow: 0 18px 55px rgba(17, 24, 39, .22); }
.cookie-notice[hidden] { display: none; }
.cookie-notice strong { display: block; margin-bottom: 4px; }
.cookie-notice p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.cookie-notice-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.cookie-notice-actions > a { color: var(--primary); font-size: 12px; font-weight: 750; white-space: nowrap; }
.legal-page { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 64px; }
.legal-page > .brand { margin-bottom: 28px; }
.legal-card { padding: clamp(24px, 5vw, 50px); }
.legal-card h1 { margin: 8px 0 26px; font-size: clamp(30px, 4vw, 44px); }
.legal-card h2 { margin: 30px 0 8px; font-size: 20px; }
.legal-card p { color: var(--text-secondary); line-height: 1.7; }
.legal-note { margin: 34px 0 24px; padding: 15px; border-radius: 11px; background: var(--surface-secondary); font-size: 13px; }
.privacy-controller-card { margin: 26px 0 8px; padding: 20px; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.privacy-controller-card h2 { margin: 6px 0 8px; }
.privacy-controller-card p { margin: 0; }
.privacy-controller-card a { color: var(--primary); font-weight: 750; }
.legal-actions { margin: 18px 0 8px; }
.privacy-request-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.privacy-request-item { align-items: flex-start; }
.privacy-request-item > span:first-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.privacy-response, .privacy-decision { margin-top: 5px; color: var(--text); line-height: 1.45; }
.privacy-request-overdue td { background: color-mix(in srgb, var(--error) 7%, var(--surface)); }
.privacy-request-summary h3 { margin: 28px 0 8px; }
.privacy-request-details { padding: 15px; border-radius: 11px; background: var(--surface-secondary); line-height: 1.6; }
.privacy-legal-warning { margin-bottom: 22px; line-height: 1.5; }
.privacy-legal-warning strong { display: block; margin-bottom: 4px; }
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.detail-list dt { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.detail-list dd { margin: 0; }
.settings-section-heading { margin: 32px 0 18px; padding-top: 26px; border-top: 1px solid var(--border); }
.settings-section-heading h3 { margin: 5px 0 7px; font-size: 21px; }
.settings-section-heading p { margin: 0; line-height: 1.5; }
.settings-overview-grid, .settings-detail-grid { align-items: start; }
.settings-detail-grid { margin-top: 18px; }
.settings-grid > .card { position: relative; overflow: hidden; }
.settings-grid > .card::before { position: absolute; inset: 1px 1px auto; width: auto; height: 3px; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; background: linear-gradient(90deg, var(--primary), var(--accent)); content: ""; opacity: .72; }
.settings-grid h2 { margin-top: 4px; }
.settings-identity-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.settings-identity-form .settings-field-name,
.settings-identity-form .settings-field-address,
.settings-identity-form .settings-field-logo,
.settings-identity-form > .button,
.settings-identity-form > .errorlist { grid-column: 1 / -1; }
.settings-identity-form > .button { justify-self: start; }
.settings-preferences-card { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) var(--ui-accent-wash), var(--surface)), var(--surface) 42%); }
.settings-privacy-card { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) var(--ui-accent-wash), var(--surface)), var(--surface) 42%); }
.settings-preferences-card > p, .settings-privacy-card > p { margin-bottom: 22px; line-height: 1.55; }

@media (max-width: 900px) {
    .privacy-request-grid { grid-template-columns: 1fr; }
}

.password-requirements { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.password-requirements li { display: flex; align-items: flex-start; gap: 7px; transition: color .16s ease; }
.password-requirements li::before { flex: 0 0 auto; content: "•"; color: var(--text-secondary); font-weight: 900; }
.password-requirements.is-active li.is-valid { color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.password-requirements.is-active li.is-valid::before { content: "✓"; color: #16a34a; }
.password-requirements.is-active li.is-invalid { color: color-mix(in srgb, var(--error) 78%, var(--text)); }
.password-requirements.is-active li.is-invalid::before { content: "×"; color: var(--error); }

@media (max-width: 720px) {
    .cookie-notice { align-items: stretch; flex-direction: column; gap: 14px; right: 12px; bottom: 12px; width: calc(100vw - 24px); }
    .cookie-notice-actions { justify-content: space-between; }
}

/* Générateur de groupes */
.group-generator-header { margin-bottom: 20px; }
.group-generator-header-actions { align-items: center; }
.group-generator-form-card { margin-bottom: 24px; scroll-margin-top: 18px; }
.group-generator-form { display: grid; gap: 20px; }
.group-generator-fields { display: grid; grid-template-columns: 1.2fr 1fr minmax(190px, .6fr); gap: 14px; }
.group-generator-fields .form-field { margin: 0; }
.group-generator-fields label, .group-exclusion-heading strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.group-generator-fields input, .group-generator-fields select { width: 100%; }
.group-remainder-fieldset { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.group-remainder-fieldset legend { padding: 0 6px; font-weight: 800; }
.group-remainder-fieldset ul { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.group-remainder-fieldset label { display: flex; align-items: center; gap: 7px; }
.group-remainder-fieldset small, .group-exclusions small { display: block; margin-top: 7px; color: var(--text-secondary); }
.group-exclusions { padding: 16px; border-radius: 13px; background: var(--surface-secondary); }
.group-exclusion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.group-exclusion-search { display: block; margin-top: 13px; }
.group-exclusion-search input { width: 100%; background: var(--surface); }
.group-exclusion-panel { margin-top: 10px; }
.group-exclusion-panel[hidden] { display: none; }
.group-exclusion-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.group-exclusion-results label { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.group-exclusion-results label[hidden] { display: none; }
.group-exclusion-results label:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.group-exclusion-results label span { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.group-exclusion-prompt { margin: 8px 2px 0; color: var(--text-secondary); font-size: 12px; }
.group-exclusion-prompt[hidden] { display: none; }
.group-suspense-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--decorative-4) 42%, var(--border)); border-radius: 13px; background: linear-gradient(125deg, color-mix(in srgb, var(--decorative-4) 13%, var(--surface)), color-mix(in srgb, var(--decorative-1) 8%, var(--surface))); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.group-suspense-option:hover { border-color: color-mix(in srgb, var(--decorative-4) 70%, var(--border)); transform: translateY(-1px); }
.group-suspense-option:has(input:checked) { border-color: var(--decorative-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--decorative-4) 18%, transparent); }
.group-suspense-option input { width: 18px; height: 18px; accent-color: var(--decorative-1); }
.group-suspense-option > span:not(.group-suspense-spark) { display: grid; flex: 1; gap: 2px; }
.group-suspense-option small { color: var(--text-secondary); font-weight: 500; }
.group-suspense-spark { color: var(--decorative-4); font-size: 25px; transition: transform .25s ease; }
.group-suspense-option:has(input:checked) .group-suspense-spark { transform: rotate(24deg) scale(1.18); }
.group-generation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card.group-generation-card {
    --generation-card-color: var(--decorative-1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 17px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--generation-card-color) 48%, var(--border));
    background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--generation-card-color) 22%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--generation-card-color) 20%, var(--surface)), var(--surface) 78%);
    box-shadow: inset 5px 0 0 color-mix(in srgb, var(--generation-card-color) 82%, transparent), var(--shadow);
    scroll-margin-top: 18px;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.group-generation-card > * { position: relative; z-index: 1; }
.group-generation-card:nth-child(4n + 2) { --generation-card-color: var(--decorative-2); }
.group-generation-card:nth-child(4n + 3) { --generation-card-color: var(--decorative-3); }
.group-generation-card:nth-child(4n + 4) { --generation-card-color: var(--decorative-4); }
.group-generation-card.group-generation-color-1 { --generation-card-color: var(--decorative-1); }
.group-generation-card.group-generation-color-2 { --generation-card-color: var(--decorative-2); }
.group-generation-card.group-generation-color-3 { --generation-card-color: var(--decorative-3); }
.group-generation-card.group-generation-color-4 { --generation-card-color: var(--decorative-4); }
.group-generation-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--generation-card-color) 62%, var(--border)); box-shadow: inset 4px 0 0 var(--generation-card-color), 0 15px 32px color-mix(in srgb, var(--generation-card-color) 14%, transparent); }
.group-generation-card.is-editing { grid-column: 1 / -1; }
.group-generation-card.is-selected { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--generation-card-color) 72%, var(--border)); box-shadow: 0 15px 38px color-mix(in srgb, var(--generation-card-color) 18%, transparent); }
.group-generation-summary-card { flex-direction: row; align-items: center; justify-content: space-between; min-height: 150px; }
.group-generation-summary-card .group-generation-actions { position: absolute; z-index: 3; top: 22px; right: 22px; }
.group-generation-card-main { align-self: stretch; display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; padding-right: 96px; color: var(--text); text-decoration: none; }
.group-generation-card-main::before { position: absolute; inset: -22px; border-radius: inherit; content: ""; }
.group-generation-card-main:focus-visible { outline: 3px solid color-mix(in srgb, var(--generation-card-color) 58%, transparent); outline-offset: 4px; border-radius: 8px; }
.group-generation-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.group-generation-card .eyebrow { color: color-mix(in srgb, var(--generation-card-color) 82%, var(--text)); }
.group-generation-card h2 { margin: 3px 0 5px; font-size: 20px; }
.group-generation-card header small { color: var(--text-secondary); }
.group-generation-actions { display: flex; align-items: center; gap: 7px; }
.generated-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.generated-groups section { min-width: 0; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--generation-card-color) 24%, var(--border)); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--generation-card-color) 8%, transparent); }
.generated-groups h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: color-mix(in srgb, var(--generation-card-color) 72%, var(--text-secondary)); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.generated-groups ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--text); font-size: 17px; font-weight: 750; line-height: 1.35; }
.group-dnd-help { margin: -3px 0 0; color: var(--text-secondary); }
.group-dnd-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.group-dnd-column { min-height: 160px; padding: 12px; border: 1px solid color-mix(in srgb, var(--generation-card-color) 26%, var(--border)); border-radius: 13px; background: var(--surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--generation-card-color) 7%, transparent); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.group-dnd-column:focus-visible, .group-dnd-column.is-drag-over { outline: none; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.group-dnd-column > h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: color-mix(in srgb, var(--generation-card-color) 72%, var(--text-secondary)); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.group-dnd-members { display: grid; gap: 7px; min-height: 95px; }
.group-dnd-student { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-secondary); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: grab; box-shadow: 0 4px 12px color-mix(in srgb, var(--generation-card-color) 6%, transparent); transition: border-color .15s ease, transform .15s ease, opacity .15s ease; }
.group-dnd-student:hover, .group-dnd-student:focus-visible, .group-dnd-student.is-selected { border-color: var(--primary); outline: none; transform: translateY(-1px); }
.group-dnd-student.is-selected { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.group-dnd-student.is-dragging { opacity: .45; cursor: grabbing; }
.group-dnd-handle { flex: 0 0 auto; color: var(--primary); font-size: 15px; }
.group-dnd-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.group-suspense-stage { display: grid; gap: 18px; padding-top: 4px; }
.group-suspense-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--decorative-1) 34%, var(--border)); border-radius: 14px; background: linear-gradient(125deg, color-mix(in srgb, var(--decorative-1) 14%, var(--surface)), color-mix(in srgb, var(--decorative-4) 11%, var(--surface))); }
.group-suspense-title { display: flex; align-items: center; gap: 14px; }
.group-suspense-title h3 { margin: 3px 0 0; font-size: 17px; }
.group-suspense-orbit { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border: 2px solid color-mix(in srgb, var(--decorative-1) 30%, transparent); border-radius: 50%; animation: suspense-spin 1.8s linear infinite; }
.group-suspense-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--decorative-1); box-shadow: 0 0 12px color-mix(in srgb, var(--decorative-1) 70%, transparent); }
.group-suspense-orbit i:nth-child(1) { top: -4px; left: 17px; }
.group-suspense-orbit i:nth-child(2) { right: -3px; bottom: 8px; background: var(--decorative-2); }
.group-suspense-orbit i:nth-child(3) { bottom: 1px; left: 3px; background: var(--decorative-4); }
.suspense-groups [data-suspense-group] { transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease; }
.suspense-groups [data-suspense-member] { transition: opacity .28s ease, transform .28s ease; }
.group-suspense-stage.is-running [data-suspense-group]:not(.is-revealed) { opacity: 0; transform: translateY(18px) scale(.96); }
.group-suspense-stage.is-running [data-suspense-member]:not(.is-revealed) { opacity: 0; transform: translateX(-10px); }
.group-suspense-stage [data-suspense-group].is-revealed { box-shadow: 0 10px 24px color-mix(in srgb, var(--generation-card-color) 12%, transparent); }
.group-suspense-finale { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; color: color-mix(in srgb, var(--decorative-1) 76%, var(--text)); opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .35s ease; }
.group-suspense-finale.is-visible { opacity: 1; transform: scale(1); }
.group-suspense-stage.is-complete .group-suspense-orbit { animation-play-state: paused; }
@keyframes suspense-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .group-suspense-orbit { animation: none; } .suspense-groups [data-suspense-group], .suspense-groups [data-suspense-member], .group-suspense-finale { transition: none; } }

@media (max-width: 900px) {
    .group-generator-fields, .group-generation-grid { grid-template-columns: 1fr; }
    .group-exclusion-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .group-generator-header-actions, .group-generator-header-actions .button, .group-generator-header-actions .disabled-action-tooltip { width: 100%; }
    .group-exclusion-heading { align-items: flex-start; flex-direction: column; }
    .group-exclusion-results, .generated-groups { grid-template-columns: 1fr; }
    .group-dnd-actions { align-items: stretch; flex-direction: column; }
}
.user-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; }
.user-card::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--border); content: ""; pointer-events: none; }
.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: 600; }
.avatar-image { object-fit: cover; }

.main-content {
    --main-sidebar-width: var(--sidebar-width);
    --main-base-gutter: clamp(22px, 4vw, 56px);
    --main-base-inner-width: calc(100vw - var(--main-sidebar-width) - var(--main-base-gutter) - var(--main-base-gutter));
    --main-reclaimed-gutter: clamp(0px, calc((1000px - var(--main-base-inner-width)) / 4), 34px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 36px max(16px, calc(var(--main-base-gutter) - var(--main-reclaimed-gutter))) 0;
    background: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent) calc(var(--ui-accent-wash) + 2%), transparent), transparent 24rem), radial-gradient(circle at 15% 95%, color-mix(in srgb, var(--primary) var(--ui-accent-wash), transparent), transparent 28rem);
}
.main-content-body { flex: 1 0 auto; min-width: 0; container: app-content / inline-size; }
/* A grid/flex child must be allowed to shrink before its contents can reflow. */
.main-content :where(section, article, form, fieldset, .card, .page-header > *, .filters > *) { min-width: 0; }
.main-content :where(input, select, textarea, img, video) { max-width: 100%; }
.main-content :where(.button, .badge, h1, h2, h3) { overflow-wrap: anywhere; }
.app-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 25px; min-height: 110px; margin-top: 64px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; }
.app-footer-brand { display: inline-flex; align-items: center; justify-self: start; gap: 11px; width: fit-content; }
.app-footer-brand .brand-mark { width: 36px; height: 36px; }
.app-footer-brand strong { display: block; color: var(--text); font-size: 17px; letter-spacing: -.3px; }
.app-footer-copyright { display: inline-flex; align-items: center; justify-self: center; gap: 5px; margin: 0; white-space: nowrap; }
.app-footer-credit { justify-self: end; white-space: nowrap; }
.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; }
.dashboard-greeting-name { color: var(--primary); overflow-wrap: anywhere; }
html[data-accent="windows_xp"] .dashboard-greeting-name { color: inherit; text-decoration: underline; text-decoration-color: var(--surface); text-underline-offset: 5px; }
/* Essai Fredoka sur les titres principaux : retirer ce bloc pour revenir à la police précédente.
   Les tailles, sous-titres et typographies des thèmes rétro restent inchangés. */
html:not([data-accent="retro_95"]):not([data-accent="windows_xp"]):not([data-accent="medieval_fantasy"]) .main-content h1 {
    font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif;
    font-weight: 600;
}
.page-header p { margin: 7px 0 0; color: var(--text-secondary); max-width: 720px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.role-permissions-page { display: grid; gap: 20px; }
.role-permissions-page > h2 { margin: 0; }
.role-permissions-group { min-width: 0; margin: 0 0 24px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.role-permissions-group legend { padding: 0 8px; font-size: 1.15rem; font-weight: 700; }
.role-permissions-protected { margin-top: 16px; color: var(--text-secondary); }
.role-permissions-page summary { cursor: pointer; font-weight: 700; }
.role-permissions-page .card, .role-permissions-page .form-field { min-width: 0; }
.role-permissions-page .page-actions { margin-top: 16px; }
@media (max-width: 600px) {
    .role-permissions-page .role-permissions-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-permissions-nav .button { min-width: 0; white-space: normal; text-align: center; }
}
.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; }
.stats-grid > a.stat-card { color: var(--text); text-decoration: none; cursor: pointer; }
.stats-grid > a.stat-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 48%, transparent); outline-offset: 3px; }
.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); }
.stat-card { --stat-color: var(--primary); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card::after { position: absolute; top: -54px; right: -36px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--stat-color) 28%, transparent), transparent 70%); content: ""; pointer-events: none; }
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 12%, transparent); }
.stat-card-students { --stat-color: var(--decorative-1); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 34%, var(--surface)), color-mix(in srgb, var(--stat-color) 12%, var(--surface))); }
.stat-card-classes { --stat-color: var(--decorative-2); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 33%, var(--surface)), color-mix(in srgb, var(--stat-color) 12%, var(--surface))); }
.stat-card-courses { --stat-color: var(--decorative-3); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 33%, var(--surface)), color-mix(in srgb, var(--stat-color) 12%, var(--surface))); }
.stat-card-degrees { --stat-color: var(--decorative-3); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 33%, var(--surface)), color-mix(in srgb, var(--stat-color) 12%, var(--surface))); }
.stat-card-periods { --stat-color: var(--decorative-4); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 34%, var(--surface)), color-mix(in srgb, var(--stat-color) 12%, var(--surface))); }
.stat-card-teachers { --stat-color: var(--decorative-1); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 31%, var(--surface)), color-mix(in srgb, var(--stat-color) 10%, var(--surface))); }
.stat-card-pending { --stat-color: var(--decorative-4); border-color: color-mix(in srgb, var(--stat-color) 64%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 31%, var(--surface)), color-mix(in srgb, var(--stat-color) 10%, var(--surface))); }
html[data-theme="dark"] .stat-card { background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 27%, var(--surface)), color-mix(in srgb, var(--stat-color) 9%, var(--surface))); }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .stat-card { background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 27%, var(--surface)), color-mix(in srgb, var(--stat-color) 9%, var(--surface))); } }
.stat-card .stat-icon { color: var(--stat-color); background: color-mix(in srgb, var(--stat-color) 29%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-color) 26%, transparent); }
.dashboard-timeline { margin: 0; padding: 0 0 20px; }
.dashboard-timeline-chart { padding: 10px 0 8px; }
.dashboard-timeline-track { position: relative; width: 100%; height: 12px; border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 13%, var(--surface-secondary)); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--text) 9%, transparent); }
.dashboard-timeline-fill { position: absolute; inset: -1px auto -1px -1px; max-width: calc(100% + 2px); border: 1px solid color-mix(in srgb, var(--primary) 70%, var(--border)); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 24%, transparent); }
.dashboard-timeline-marker { position: absolute; top: 50%; z-index: 2; display: block; transform: translate(-50%, -50%); }
.dashboard-timeline-marker.is-last { left: calc(100% - 11px) !important; }
.dashboard-timeline-dot { display: block; width: 16px; height: 16px; border: 4px solid var(--surface); border-radius: 6px; background: color-mix(in srgb, var(--text-secondary) 45%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-secondary) 34%, var(--border)), 0 4px 10px color-mix(in srgb, var(--text) 15%, transparent); transform: rotate(45deg); }
.dashboard-timeline-marker.is-reached .dashboard-timeline-dot { background: var(--primary); box-shadow: 0 0 0 2px var(--primary), 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.dashboard-timeline-marker.is-current .dashboard-timeline-dot { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.dashboard-timeline-label { position: absolute; left: 50%; bottom: 20px; display: block; width: max-content; color: var(--text-secondary); line-height: 1.25; text-align: center; transform: translateX(-50%); }
.dashboard-timeline-label strong { display: block; color: var(--text); font-size: 12px; }
.dashboard-timeline-marker.is-current .dashboard-timeline-label strong { color: var(--text); }
.accent-panel { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 48%, var(--border)) !important; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--accent) 11%, var(--surface))) !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 13%, transparent); }
.accent-panel::before { position: absolute; top: -85px; right: -45px; width: 210px; height: 210px; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); content: ""; pointer-events: none; }
.accent-panel > * { position: relative; z-index: 1; }
.encoding-selected-banner { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)) !important; }
.card { padding: 22px; border-color: color-mix(in srgb, var(--primary) var(--ui-accent-border), var(--border)); }
.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-coordination { display: block; margin-top: 3px; color: color-mix(in srgb, var(--success) 72%, 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; }
.class-list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; }
.class-list-title-line { display: flex; align-items: center; gap: 10px; }
.class-colors-icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 10%, transparent); cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.class-colors-icon-button:hover { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); transform: translateY(-1px); }
.class-colors-icon-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.class-colors-icon { display: flex; align-items: center; gap: 2px; }
.class-colors-icon i { display: block; width: 7px; height: 16px; border-radius: 999px; background: var(--decorative-1); }
.class-colors-icon i:nth-child(2) { height: 20px; background: var(--decorative-2); }
.class-colors-icon i:nth-child(3) { background: var(--decorative-3); }
.class-colors-icon-button[data-mode="monochrome"] .class-colors-icon i { background: var(--text-secondary); }
.class-list-toolbar > .filters { position: relative; flex: 1 1 280px; margin: 0; min-width: 0; }
.class-list-toolbar .search-status { position: absolute; top: calc(100% + 3px); left: 0; white-space: nowrap; }
.class-list-toolbar input[type="search"] { max-width: 320px; }
.class-list-toolbar > button { margin-left: auto; min-height: 42px; }
.encoding-super-class-grid { margin-bottom: 24px; }
html:is([data-accent="violet_rose"], [data-accent="ocean"]) #class-results[data-class-colors="monochrome"] .class-card { --class-card-color: var(--decorative-1); }
html[data-accent="ocean"] #class-results[data-class-colors="monochrome"] .class-card { --class-card-color: var(--decorative-2); }
.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: 600; font-size: 14px; transition: .18s ease; }
body:not(.landing-body) .button:not(.button-secondary):not(.button-danger) { background: linear-gradient(115deg, var(--primary), color-mix(in srgb, var(--accent) 68%, var(--primary))); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 18%, transparent); }
.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.student-tracking-link { gap: 9px; padding: 6px 14px 6px 7px; color: var(--text); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); box-shadow: none; }
.student-tracking-link-icon { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 12%, var(--surface-secondary)); font-size: 15px; line-height: 1; }
.button.student-tracking-link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 56%, var(--border)); box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 12%, transparent); }
.button.student-tracking-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.button-danger { background: var(--error); }
.button-danger:hover { background: var(--error-strong); }
.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: 600; }
.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); }
/* Badges de la gestion des utilisateurs : couleurs fixes et contrastées. */
.user-table-section .user-role-badge, .user-table-section .user-status-badge { background: color-mix(in srgb, var(--user-badge-color, #475569) 20%, var(--surface)); color: light-dark(color-mix(in srgb, var(--user-badge-color, #475569) 85%, #000000), color-mix(in srgb, var(--user-badge-color, #475569) 35%, #FFFFFF)); border: 1px solid color-mix(in srgb, var(--user-badge-color, #475569) 32%, var(--surface)); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; padding: 4px 8px; }
.user-edit-form-card [data-role-assignment-form] label:has(input[name="roles"]) { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; }
.user-role-eduryo { --user-badge-color: #4338CA; }
.user-role-admin { --user-badge-color: #7E22CE; }
.user-role-direction { --user-badge-color: #BE185D; }
.user-role-secretary { --user-badge-color: #6D28D9; }
.user-role-executive_secretary { --user-badge-color: #9F1239; }
.user-role-teacher { --user-badge-color: #1D4ED8; }
.user-role-educator { --user-badge-color: #0F766E; }
.user-role-parent_student { --user-badge-color: #C2410C; }

.staff-assignments-page { display: grid; gap: 22px; }
.staff-assignment-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.staff-assignment-summary > span { display: grid; min-width: 92px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); text-align: center; }
.staff-assignment-summary strong { color: var(--primary); font-size: 22px; line-height: 1; }
.staff-assignment-summary small { margin-top: 4px; color: var(--text-secondary); }
.staff-assignment-summary .is-inactive { border-color: color-mix(in srgb, var(--danger) 24%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.staff-assignment-summary .is-inactive strong { color: var(--danger); }
.staff-assignment-search { position: relative; display: grid; grid-template-columns: minmax(0, 720px); justify-content: start; }
.staff-assignment-search > input { width: 100%; max-width: none; }
.staff-assignment-search .search-status { position: absolute; top: 100%; left: 0; }
.staff-assignment-details { border-top: 1px solid var(--border); padding-top: 12px; }
.staff-assignment-details > summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--primary); font-weight: 600; list-style: none; }
.staff-assignment-details > summary::-webkit-details-marker { display: none; }
.staff-assignment-details > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.staff-assignment-details[open] > summary > span { transform: rotate(180deg); }
.staff-assignment-details > .staff-assignment-columns { border-top: 0; }
.staff-assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.staff-assignment-card { display: grid; align-content: start; gap: 20px; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); }
.staff-assignment-card.is-inactive { opacity: .82; }
.staff-assignment-identity { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; }
.staff-assignment-avatar { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 24px; color: white; background: linear-gradient(135deg, var(--primary), var(--accent)); font-size: 24px; font-weight: 600; }
.staff-assignment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-assignment-person { display: grid; min-width: 0; gap: 4px; }
.staff-assignment-person > a { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.staff-assignment-person > small { color: var(--text-secondary); }
.staff-assignment-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-assignment-name-line > strong { font-size: 19px; }
.staff-assignment-columns { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(220px, 1.3fr); gap: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.staff-assignment-columns h2 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.staff-assignment-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.staff-assignment-course-list { display: grid; gap: 7px; }
.staff-assignment-course-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 12px; background: var(--surface-secondary); }
.staff-assignment-course-list > div > span:first-child { display: grid; min-width: 0; }
.staff-assignment-course-list small { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.staff-assignment-empty { grid-column: 1 / -1; }
@container app-content (max-width: 1000px) {
    .staff-assignment-grid { grid-template-columns: 1fr; }
}
@container app-content (max-width: 620px) {
    .staff-assignment-search { grid-template-columns: 1fr; }
    .staff-assignment-search .button { width: 100%; }
    .staff-assignment-identity { grid-template-columns: 60px minmax(0, 1fr); }
    .staff-assignment-avatar { width: 60px; height: 60px; border-radius: 20px; }
    .staff-assignment-columns { grid-template-columns: 1fr; }
}
.user-status-active { --user-badge-color: #15803D; }
.user-status-disabled { --user-badge-color: #C62828; }
.user-status-pending { --user-badge-color: #B45309; }
.user-status-not-invited { --user-badge-color: #475569; }
.user-table-section .user-status-not-invited { background: light-dark(#E5E7EB, #374151); color: light-dark(#475569, #E5E7EB); border-color: light-dark(#D1D5DB, #6B7280); }
.user-table-section .user-email-link { color: light-dark(#1D4ED8, #93C5FD); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.user-table-section .user-email-link:hover { text-decoration-thickness: 2px; }
.user-table-section .user-email-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.badge-primary { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); color: var(--primary); }
.student-name-link { color: var(--text); text-decoration: none; }
.student-name-link:hover { color: var(--primary); text-decoration: none; }
.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: none; }
.course-name-link:hover { color: var(--primary); text-decoration: none; }
.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: 600; 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; margin-bottom: 22px; 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: color-mix(in srgb, var(--primary) var(--ui-accent-wash), var(--surface-secondary)); color: color-mix(in srgb, var(--primary) 34%, 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: 1; color: color-mix(in srgb, var(--error) 76%, var(--text)); background: color-mix(in srgb, var(--error) 10%, var(--surface)); }
.data-table .inactive-row td { background: color-mix(in srgb, var(--error) 8%, var(--surface)); }
.data-table .inactive-row td:first-child { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--error) 78%, transparent); }
.data-table .inactive-row:hover td { background: color-mix(in srgb, var(--error) 13%, var(--surface)); }
.data-table .numeric { text-align: right; }
.data-table .center { text-align: center; }
.data-table th.sortable-column { cursor: pointer; user-select: none; }
.data-table th.sortable-column::before { display: inline-block; margin-right: 6px; content: "⇅"; opacity: .38; font-size: 12px; line-height: 1; vertical-align: .04em; }
.data-table th.sortable-column[aria-sort="ascending"]::before { content: "↑"; opacity: 1; color: var(--primary); }
.data-table th.sortable-column[aria-sort="descending"]::before { content: "↓"; opacity: 1; color: var(--primary); }
.data-table th.sortable-column:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

.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-summary-shortcuts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.encoding-summary-periods { margin: 0; }
.encoding-overview-banner { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), color-mix(in srgb, var(--accent) 18%, var(--surface))); box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 16%, transparent); }
.encoding-overview-banner::after { position: absolute; top: -105px; right: -42px; width: 260px; height: 250px; border-radius: 56% 44% 63% 37% / 48% 62% 38% 52%; background: radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 48%, transparent 72%); content: ""; filter: blur(24px); opacity: .86; pointer-events: none; transform: rotate(-8deg) scale(1.08); transform-origin: center; animation: encoding-banner-blob 9s ease-in-out infinite alternate; will-change: transform, border-radius; }
.encoding-overview-banner > * { position: relative; z-index: 1; }
@keyframes encoding-banner-blob {
    0% { border-radius: 56% 44% 63% 37% / 48% 62% 38% 52%; transform: translate3d(0, 0, 0) rotate(-8deg) scale(1.04); }
    52% { border-radius: 39% 61% 46% 54% / 61% 42% 58% 39%; transform: translate3d(-18px, 12px, 0) rotate(7deg) scale(1.13); }
    100% { border-radius: 66% 34% 52% 48% / 39% 55% 45% 61%; transform: translate3d(8px, -5px, 0) rotate(15deg) scale(1.07); }
}
.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); }
.badge-own-course { color: color-mix(in srgb, var(--primary) 82%, var(--text)); border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); background: color-mix(in srgb, var(--primary) 15%, var(--surface)); white-space: nowrap; }
.encoding-course-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.encoding-course-heading > div:first-child { min-width: 0; }
.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; flex: 0 0 auto; 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-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.encoding-confirmation-link { text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.encoding-confirmation-link:hover { text-decoration: none; background: var(--primary-soft); color: var(--primary); }
.encoding-confirmation-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#encoding-confirmation { scroll-margin-top: 90px; }
.homeroom-confirmation { padding: 22px; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.homeroom-confirmation:empty { display: none; }
.homeroom-confirmation-button { width: 100%; min-height: 56px; white-space: normal; font-size: 16px; }
.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; 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; }
.class-summary-header { align-items: center; flex-wrap: wrap; width: 100%; max-width: 1180px; margin: 0 auto 14px; }
.class-summary-header h1 { margin: 0; }
.class-summary-title-name { color: var(--primary); }
.class-summary-header-controls { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 680px; flex-wrap: wrap; gap: 10px; }
.class-summary-class-selector { flex: 0 1 auto; min-width: 0; margin: 0; }
.class-summary-class-selector select { width: auto; min-width: 0; max-width: min(260px, calc(100vw - 48px)); min-height: 42px; }
.class-summary-header-controls .period-tabs { flex: 0 0 auto; margin: 0; }
.class-summary-header-controls .student-summary-selector { flex: 0 1 auto; margin: 0; }
.student-summary-selector { display: flex; align-items: center; justify-content: flex-start; min-width: 0; gap: 8px; margin: 0; }
.student-summary-selector label { margin: 0; font-size: 12px; font-weight: 600; }
.student-summary-selector select { width: auto; min-width: 0; max-width: min(430px, calc(100vw - 190px)); min-height: 42px; }
.student-summary-selector > span { color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.student-summary-selector .student-summary-arrow { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; color: var(--primary); background: var(--surface); font-size: 18px; font-weight: 600; line-height: 1; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.student-summary-selector a.student-summary-arrow:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); transform: translateY(-1px); }
.student-summary-selector a.student-summary-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.student-summary-selector .student-summary-arrow.is-disabled { color: var(--text-secondary); background: var(--surface-secondary); opacity: .45; }
.student-summary-card { display: flex; flex-direction: column; gap: 22px; }
.student-summary-identity { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.student-summary-identity .student-course-comment-toolbar { margin: 0 0 0 auto; }
.homeroom-comment-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.homeroom-comment-section .comment-editor-heading { flex-wrap: wrap; }
.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-mobile { display: none; }
.student-results-table th:first-child { min-width: 250px; }
.student-results-table .selected-period { background: color-mix(in srgb, var(--primary) 7%, 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; }
.student-result-badge { display: inline-grid; place-items: center; min-width: 34px; min-height: 30px; padding: 5px 9px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 950; line-height: 1; }
.student-result-badge.is-success { color: #FFFFFF; border-color: #046D3B; background: #078447; box-shadow: 0 5px 13px rgba(7, 132, 71, .2); }
.student-result-badge.is-error { color: #FFFFFF; border-color: #A92533; background: #C93645; box-shadow: 0 5px 13px rgba(201, 54, 69, .2); }
.student-result-badge.is-neutral { color: var(--text); border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: color-mix(in srgb, var(--warning) 32%, var(--surface)); }
.student-result-badge.is-empty { min-width: 30px; min-height: 24px; padding: 3px 8px; color: var(--text-secondary); border-color: transparent; background: var(--surface-secondary); box-shadow: none; }
.student-course-comment { min-width: 0; }
.student-course-comment-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.student-course-comment > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 4px 6px; border-radius: 7px; cursor: pointer; list-style: none; transition: color .15s ease, background .15s ease; }
.student-course-comment > summary::-webkit-details-marker { display: none; }
.student-course-comment > summary::after { color: var(--primary); content: "⌄"; font-size: 14px; transition: transform .16s ease; }
.student-course-comment > summary:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.student-course-comment > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.student-course-comment[open] > summary::after { transform: rotate(180deg); }
.student-course-comment-content { margin: 5px 6px 7px; padding: 10px 12px; border-left: 3px solid var(--primary); border-radius: 0 9px 9px 0; background: color-mix(in srgb, var(--primary) 7%, var(--surface-secondary)); }
.student-course-comment-content > span { display: block; margin-bottom: 4px; color: var(--primary); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.student-course-comment-content p { margin: 0; color: var(--text); font-size: 12px; font-weight: 550; line-height: 1.45; }
.student-course-comment-content p.muted { color: var(--text-secondary); }
.homeroom-comment-section { padding-top: 20px; border-top: 1px solid var(--border); }
.homeroom-comment-section h2 { margin: 5px 0; }
.homeroom-comment-help { margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
.homeroom-comment-section form { margin: 16px 0 0; }
.homeroom-comment-section textarea { min-height: 150px; }
.homeroom-comment-section > .save-indicator:empty { display: none; }
.homeroom-comment-section + .homeroom-confirmation { margin-top: -10px; padding-top: 14px; }
.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; align-items: center; flex-wrap: wrap; gap: 7px; }
.table-actions form { margin: 0; }
.user-row-actions { display: grid; grid-template-columns: 96px 36px 36px; gap: 8px; align-items: center; }
.user-row-actions > form { grid-column: 1; grid-row: 1; }
.user-row-actions > .edit-icon-button { grid-column: 2; grid-row: 1; }
.user-row-actions > form:has(.delete-icon-button) { grid-column: 3; }
.user-row-actions > form > .button { width: 100%; min-height: 36px; padding-inline: 8px; }
.user-row-actions > .edit-icon-button, .user-row-actions .delete-icon-button { width: 36px; height: 36px; min-width: 36px; }
.user-row-actions:has(.user-preview-form) { grid-template-columns: 96px 36px 36px 36px; }
.user-row-actions:has(.user-preview-form) > .user-preview-form { grid-column: 2; grid-row: 1; }
.user-row-actions:has(.user-preview-form) > .edit-icon-button { grid-column: 3; }
.user-row-actions:has(.user-preview-form) > form:has(.delete-icon-button) { grid-column: 4; }
.user-row-actions .user-preview-button { width: 36px; height: 36px; min-width: 36px; }
.user-preview-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-row-actions > .protected-account-label { grid-column: 1 / -1; grid-row: 2; min-height: 0; font-size: 12px; }
.protected-account-label { display: inline-flex; align-items: center; min-height: 34px; white-space: nowrap; }
.user-table-identity { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.user-name-link { color: var(--text); text-decoration: none; }
.user-name-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.user-name-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.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: 600; 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; }
.user-bulk-invite-bar { position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); box-shadow: var(--shadow); }
.user-bulk-invite-bar[hidden] { display: none; }
.user-bulk-invite-bar strong { font-size: 13px; }
.user-bulk-select-column { width: 78px; text-align: center; }
.user-bulk-select-column > span { display: block; margin-bottom: 5px; font-size: 10px; }
.data-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.parent-invitation-campaign-card { margin-bottom: 18px; }
.user-invitations { margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.user-invitations > summary { padding: 13px 18px; cursor: pointer; color: var(--text); }
.user-invitations > summary::marker { color: var(--primary); }
.user-invitations > summary strong { margin-inline: 6px 16px; }
.user-invitations > summary span { color: var(--text-secondary); font-size: 13px; }
.user-invitations > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius); }
.user-invitations[open] > summary { border-bottom: 1px solid var(--border); }
.user-invitations-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-invitations-content > .parent-invitation-campaign-card { min-width: 0; margin: 0; padding: 18px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.user-invitations-content > .parent-invitation-campaign-card + .parent-invitation-campaign-card { border-left: 1px solid var(--border); }
.user-invitations .parent-campaign-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
.user-invitations .parent-campaign-heading p { font-size: 13px; }
@media (max-width: 700px) {
    .user-invitations > summary span { display: block; margin: 5px 0 0 22px; }
    .user-invitations-content { grid-template-columns: minmax(0, 1fr); }
    .user-invitations-content > .parent-invitation-campaign-card + .parent-invitation-campaign-card { border-left: 0; border-top: 1px solid var(--border); }
}
.parent-campaign-heading { align-items: center; margin: 0; }
.parent-campaign-heading h2 { margin: 4px 0 5px; }
.parent-campaign-heading p { max-width: 720px; margin: 0; color: var(--text-secondary); }
.parent-campaign-list { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.parent-campaign-row { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-secondary); }
.parent-campaign-summary, .parent-campaign-counts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; }
.parent-campaign-summary strong { font-size: 13px; }
.parent-campaign-counts { justify-content: flex-start; color: var(--text-secondary); font-size: 12px; }
.parent-campaign-counts > span:last-of-type { margin-left: auto; font-weight: 800; }
.parent-campaign-counts form { margin: 0; }
.text-error { color: var(--error); }
.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; }
.bulletin-generation-list { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 18px; padding-top: 17px; border-top: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); }
.bulletin-generation-actions { display: flex; align-items: center; gap: 8px; }
.bulletin-generation-actions form { margin: 0; }
.bulletin-generation-job { display: grid; gap: 9px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.bulletin-generation-job.is-complete { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.bulletin-generation-job.is-failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.bulletin-generation-heading, .bulletin-generation-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulletin-generation-heading > div { display: flex; flex-direction: column; }
.bulletin-generation-heading small { color: var(--text-secondary); }
.bulletin-generation-result-actions { display: flex; align-items: center; gap: 8px; }
.bulletin-generation-result-actions form, .bulletin-generation-result > form { margin: 0; }
.bulletin-generation-result > .alert { flex: 1; margin: 0; }
.competency-panel-heading { align-items: center; }
.competency-add-button { appearance: none; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; box-sizing: border-box; margin: 0; padding: 0 0 2px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 7px 18px color-mix(in srgb, var(--primary) 24%, transparent); font: inherit; font-size: 25px; font-weight: 750; line-height: 1; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.competency-add-button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 22px color-mix(in srgb, var(--primary) 30%, transparent); }
.competency-inline-form { display: flex; align-items: flex-end; gap: 9px; margin: 0 0 12px; padding: 11px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--primary) 5%, var(--surface-secondary)); }
.competency-inline-form[hidden] { display: none; }
.competency-inline-form > div { display: grid; flex: 1; gap: 5px; }
.competency-inline-form label { font-size: 12px; font-weight: 800; }
.competency-edit-form { grid-column: 1 / -1; width: 100%; margin: 8px 0 0; }
.sortable-item:has(.competency-edit-form:not([hidden])) { flex-wrap: wrap; }
.bulletin-job-progress-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.import-errors-toggle { margin-top: 13px; }
.button-memory-game { border-color: color-mix(in srgb, #1f9c70 72%, var(--border)); color: #126747; background: color-mix(in srgb, #33c78d 27%, var(--surface)); box-shadow: 0 5px 15px color-mix(in srgb, #238d69 12%, transparent); }
.button-memory-game:hover { border-color: #187d59; color: #0b4f36; background: color-mix(in srgb, #33c78d 39%, var(--surface)); box-shadow: 0 9px 22px color-mix(in srgb, #238d69 22%, transparent); }
.button-import-list { border-color: color-mix(in srgb, #218eb7 72%, var(--border)); color: #155f7c; background: color-mix(in srgb, #32b7dc 27%, var(--surface)); box-shadow: 0 5px 15px color-mix(in srgb, #218eb7 12%, transparent); }
.button-import-list:hover { border-color: #197594; color: #0e4a61; background: color-mix(in srgb, #32b7dc 39%, var(--surface)); box-shadow: 0 9px 22px color-mix(in srgb, #218eb7 22%, transparent); }
html[data-theme="dark"] .button-memory-game { color: #89edc7; background: color-mix(in srgb, #21996f 30%, var(--surface)); }
html[data-theme="dark"] .button-memory-game:hover { color: #b5f7de; background: color-mix(in srgb, #27b684 43%, var(--surface)); }
html[data-theme="dark"] .button-import-list { color: #8cdef4; background: color-mix(in srgb, #238eae 31%, var(--surface)); }
html[data-theme="dark"] .button-import-list:hover { color: #c1f1fc; background: color-mix(in srgb, #2eabd0 43%, var(--surface)); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .button-memory-game { color: #89edc7; background: color-mix(in srgb, #21996f 30%, var(--surface)); }
    html[data-theme="system"] .button-import-list { color: #8cdef4; background: color-mix(in srgb, #238eae 31%, var(--surface)); }
}
.badge-organization { border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); color: color-mix(in srgb, var(--success) 78%, var(--text)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.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; }
.attendance-student-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.attendance-student-photo-card { display: grid; gap: 18px; }
.attendance-student-photo-frame { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; color: var(--primary); background: var(--primary-soft); }
.attendance-student-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.attendance-student-photo-frame > span { font-size: clamp(48px, 8vw, 82px); font-weight: 600; letter-spacing: -.06em; }
.attendance-photo-form { display: grid; gap: 9px; }
.attendance-photo-form label { font-weight: 600; }
.attendance-photo-form input[type="file"] { min-width: 0; max-width: 100%; }
.attendance-photo-form .button { justify-self: start; margin-top: 3px; }
.attendance-student-main { display: grid; gap: 20px; min-width: 0; }
.attendance-student-info-card h2, .attendance-entry-card h2 { margin: 0; }
.attendance-student-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 20px 0 0; }
.attendance-student-details div { min-width: 0; }
.attendance-student-details dt { margin-bottom: 4px; color: var(--text-secondary); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.attendance-student-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.attendance-entry-card form { margin-top: 20px; }
.user-edit-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(290px, 420px); gap: 24px; align-items: start; }
.user-edit-form-card { max-width: none; min-width: 0; }
.user-assignments-card { position: sticky; top: 20px; min-width: 0; }
.user-assignments-heading { margin-bottom: 18px; }
.user-assignments-heading h2 { margin: 4px 0 5px; }
.user-assignments-heading p { margin: 0; color: var(--text-secondary); }
.user-assignment-section { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); }
.user-assignment-section + .user-assignment-section { margin-top: 20px; }
.user-assignment-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.user-assignment-section h3, .user-assignment-section h4 { margin: 0; }
.user-assignment-section h3 { font-size: 18px; }
.user-assignment-section h4 { margin-top: 4px; color: var(--text-secondary); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.user-assignment-list { display: grid; gap: 7px; }
.user-assignment-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface-secondary); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.user-assignment-item:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); transform: translateX(2px); }
.user-assignment-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 2px; }
.user-assignment-item span:first-child { min-width: 0; }
.user-assignment-item strong, .user-assignment-item small { display: block; }
.user-assignment-item strong { overflow-wrap: anywhere; }
.user-assignment-item small { margin-top: 2px; color: var(--text-secondary); }
.user-assignment-empty { margin: 0; padding: 8px 2px; }
.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-details-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 18px 10px; container: student-details / inline-size; }
.student-details-card > * { grid-column: 1 / -1; min-width: 0; }
.student-details-card > .student-field-registration_number,
.student-details-card > .student-field-last_name,
.student-details-card > .student-field-first_name { grid-column: span 4; }
.student-details-card > .student-field-gender,
.student-details-card > .student-field-birth_date { grid-column: span 6; }
.student-details-card > .student-field-class_group { grid-column: span 4; }
.student-details-card > .student-field-orientation_code { grid-column: span 3; }
.student-details-card > .student-field-orientation_label { grid-column: span 5; }
.student-details-card .form-field > label,
.student-details-card .searchable-staff-field > label,
.student-details-card .student-form-status-field > span > strong { font-weight: 600; }
.student-photo-upload .student-photo-form-preview { width: 86px; height: 86px; flex-basis: 86px; border-radius: 50%; }
.student-form-layout > .student-form-save { grid-column: 1 / -1; gap: 10px; margin: 0 auto; }
.student-courses-card { position: sticky; top: 20px; }
.student-courses-heading { margin-bottom: 16px; }
.student-courses-heading h2 { margin: 0; }
.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: center; gap: 11px; min-width: 0; padding: 10px 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 { flex: 0 0 auto; width: auto; margin: 0; accent-color: var(--primary); }
.student-course-option span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.student-course-option strong { min-width: 0; overflow-wrap: anywhere; }
.student-course-option small { color: var(--text-secondary); white-space: nowrap; }
@container student-details (max-width: 540px) {
    .student-details-card > .student-field-class_group { grid-column: 1 / -1; }
    .student-details-card > .student-field-orientation_code { grid-column: span 4; }
    .student-details-card > .student-field-orientation_label { grid-column: span 8; }
}
@container student-details (max-width: 460px) {
    .student-details-card > .student-field-registration_number { grid-column: span 4; }
    .student-details-card > .student-field-last_name { grid-column: span 8; }
    .student-details-card > .student-field-first_name { grid-column: 1 / -1; }
    .student-photo-upload { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .student-photo-upload .profile-photo-action { width: 100%; }
}
@container student-details (max-width: 370px) {
    .student-details-card > .student-field-registration_number,
    .student-details-card > .student-field-last_name,
    .student-details-card > .student-field-gender,
    .student-details-card > .student-field-birth_date,
    .student-details-card > .student-field-orientation_code,
    .student-details-card > .student-field-orientation_label { grid-column: 1 / -1; }
}
.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: 600; }
.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); }
img[src*="/fichiers/photos-eleves/"], img[src*="/fichiers/photos-eleves-historiques/"] { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.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; }
.memory-game-card { position: relative; display: grid; gap: 16px; max-width: 1040px; margin-inline: auto; padding: clamp(18px, 2.5vw, 30px); overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface) 36%); }
.memory-game-card::before { content: ""; position: absolute; z-index: 0; top: -130px; right: -100px; width: 310px; height: 310px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, transparent); filter: blur(10px); pointer-events: none; }
.memory-game-card > * { position: relative; z-index: 1; }
.memory-game-scorebar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.memory-game-scorebar > span { display: grid; min-width: 96px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); text-align: center; }
.memory-game-scorebar small { color: var(--text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.memory-game-scorebar strong { margin-top: 2px; font-size: 20px; }
.memory-game-scorebar form { margin: 0; }
.memory-game-photo-wrap { overflow: hidden; width: min(100%, clamp(190px, 37dvh, 330px)); aspect-ratio: 4 / 5; margin-inline: auto; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 26px; background: var(--surface-secondary); box-shadow: 0 24px 52px color-mix(in srgb, var(--primary) 18%, transparent); }
.memory-game-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.memory-game-panel { display: grid; gap: 13px; width: min(100%, 650px); margin-inline: auto; }
.memory-game-question { display: grid; gap: 5px; text-align: center; }
.memory-game-question .eyebrow { font-size: 14px; }
.memory-game-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; }
.memory-game-choice { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 15px; color: var(--text); background: color-mix(in srgb, var(--primary) 5%, var(--surface-secondary)); box-shadow: 0 6px 16px rgba(17, 24, 39, .05); font: inherit; font-weight: 600; text-align: center; transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
button.memory-game-choice { cursor: pointer; }
button.memory-game-choice:hover { color: white; border-color: var(--primary); background: var(--primary); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent); transform: translateY(-2px); }
.memory-game-feedback { display: grid; gap: 4px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 14px; text-align: center; }
.memory-game-feedback.is-correct { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.memory-game-feedback.is-incorrect { border-color: color-mix(in srgb, var(--error) 50%, var(--border)); background: color-mix(in srgb, var(--error) 10%, var(--surface)); }
.memory-game-choices.is-answered .memory-game-choice { opacity: .62; }
.memory-game-choice.is-answer { color: white; border-color: var(--success); background: color-mix(in srgb, var(--success) 84%, #18343d); box-shadow: 0 10px 24px color-mix(in srgb, var(--success) 24%, transparent); opacity: 1 !important; }
.memory-game-choice.is-selected-wrong { color: white; border-color: var(--error); background: color-mix(in srgb, var(--error) 86%, #4b1717); box-shadow: 0 10px 24px color-mix(in srgb, var(--error) 22%, transparent); opacity: 1 !important; }
.memory-game-next { display: grid; gap: 7px; color: var(--text-secondary); font-size: 12px; text-align: center; }
.memory-game-next i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: var(--surface-secondary); }
.memory-game-next i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: left; animation: memory-game-next 2.5s linear forwards; }
.memory-game-next a { color: var(--primary); font-weight: 750; }
@keyframes memory-game-next { to { transform: scaleX(0); } }
.memory-game-empty { max-width: 720px; margin-inline: auto; text-align: center; }
.memory-game-back-compact { display: none; }
@media (min-width: 960px) {
    .memory-game-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "score score" "photo panel"; align-items: center; gap: 16px 26px; }
    .memory-game-scorebar { grid-area: score; }
    .memory-game-photo-wrap { grid-area: photo; width: min(100%, clamp(200px, 43dvh, 340px)); }
    .memory-game-panel { grid-area: panel; }
}
@media (max-width: 600px) {
    .page-header.memory-game-page-header { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
    .memory-game-page-header h1 { font-size: clamp(21px, 6vw, 26px); line-height: 1.12; }
    .memory-game-page-header p, .memory-game-back-full { display: none; }
    .memory-game-back { display: grid; flex: 0 0 44px; place-items: center; width: 44px; min-height: 44px; padding: 0; font-size: 23px; }
    .memory-game-back-compact { display: inline; }
    .card.memory-game-card { gap: 8px; padding: 12px; border-radius: 17px; }
    .memory-game-scorebar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
    .memory-game-scorebar > span { min-width: 0; padding: 5px 7px; border-radius: 10px; }
    .memory-game-scorebar small { font-size: 9px; }
    .memory-game-scorebar strong { font-size: 16px; }
    .memory-game-scorebar form { min-width: 0; }
    .memory-game-scorebar .button { min-height: 44px; padding: 6px 8px; font-size: 11px; }
    .memory-game-photo-wrap { width: min(100%, clamp(150px, 25dvh, 215px)); border-radius: 18px; }
    .memory-game-panel { gap: 8px; }
    .memory-game-question { gap: 0; }
    .memory-game-question .eyebrow { font-size: 13px; }
    .memory-game-question small { display: none; }
    .memory-game-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .memory-game-choice { min-height: 48px; padding: 6px 8px; border-radius: 11px; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
    .memory-game-feedback { gap: 2px; padding: 7px 9px; font-size: 12px; line-height: 1.25; }
    .memory-game-next { gap: 3px; font-size: 11px; }
    .memory-game-panel > small { font-size: 11px; text-align: center; }
}
.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-own-course .class-course-title-line > strong { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.class-course-origin { color: var(--primary); font-weight: 600; }
.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); cursor: default; }
.class-course-link.is-disabled:hover { color: var(--text); }
.class-course-item form { flex: 0 0 auto; margin: 0; }
.management-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.management-card { --management-accent: var(--primary); display: flex; flex-direction: column; min-height: 280px; padding: 0; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.management-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 13%, transparent); }
.management-card-header, .management-card-footer, .management-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.management-card-header { min-height: 68px; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--management-accent) 34%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--management-accent) 18%, var(--surface-secondary)), color-mix(in srgb, var(--management-accent) 7%, var(--surface-secondary))); }
.management-card-code { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--management-accent) 34%, var(--border)); border-radius: 999px; color: color-mix(in srgb, var(--management-accent) 78%, var(--text)); background: color-mix(in srgb, var(--management-accent) 10%, var(--surface)); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.management-card-actions { justify-content: flex-end; }
.management-card-actions form, .management-card-footer form { margin: 0; }
.management-card-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 14px; color: var(--text); text-decoration: none; }
.management-card-title:hover { color: var(--primary); }
.management-card-title > span:last-child:not(:first-child) { color: var(--primary); font-size: 22px; transition: transform .16s ease; }
.management-card-title:hover > span:last-child { transform: translateX(3px); }
.management-card-title h2 { margin: 0; font-size: 22px; }
.management-card-title strong { display: block; margin-bottom: 4px; color: var(--primary); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.management-card-title.is-static { cursor: default; }
.management-card-title.is-static:hover { color: var(--text); }
.management-card-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 9px; margin: 0; padding: 0 20px 20px; }
.management-card-details > div { min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.management-card-details dt { margin-bottom: 5px; color: var(--text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.management-card-details dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.management-card-details dd > strong { color: var(--primary); font-size: 22px; font-weight: 600; }
.management-card-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-secondary) 72%, var(--surface)); }
.management-card-empty { grid-column: 1 / -1; min-height: 180px; }
.school-request-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(340px, 30%)), 1fr)); }
.school-request-card { --management-accent: var(--decorative-2); min-height: 0; border-color: color-mix(in srgb, var(--management-accent) 27%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--management-accent) 5%, var(--surface)), var(--surface) 34%); }
.school-request-card.is-resolved { --management-accent: var(--success); }
.school-request-card .management-card-header { min-height: 64px; padding: 12px 18px; }
.school-request-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.school-request-person > span:last-child { display: grid; min-width: 0; gap: 2px; }
.school-request-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.school-request-person small { color: var(--text-secondary); font-size: 11px; }
.school-request-person-avatar, .school-request-message-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--management-accent) 36%, var(--border)); border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--management-accent) 18%, var(--surface)); font-size: 13px; font-weight: 600; }
.school-request-person-avatar img, .school-request-message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.school-request-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.school-request-header-actions form { margin: 0; }
.school-request-header-actions .delete-icon-button { width: 32px; height: 32px; font-size: 20px; }
.school-request-card .management-card-title { padding: 17px 18px 12px; }
.school-request-card .management-card-title h2 { font-size: 19px; line-height: 1.25; }
.school-request-details { margin: 0 18px 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--management-accent) 17%, var(--border)); border-left: 3px solid var(--management-accent); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--management-accent) 5%, var(--surface)); overflow-wrap: anywhere; line-height: 1.5; }
.school-request-thread { margin: 0 18px 18px; }
.school-request-thread h3 { margin: 0 0 11px; color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.school-request-message-list { display: grid; gap: 10px; }
.school-request-message { --message-accent: var(--decorative-2); display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; max-width: 94%; padding: 12px; border: 1px solid color-mix(in srgb, var(--message-accent) 34%, var(--border)); border-radius: 15px 15px 15px 5px; background: color-mix(in srgb, var(--message-accent) 10%, var(--surface)); }
.school-request-message.is-admin { --message-accent: var(--primary); justify-self: end; border-radius: 15px 15px 5px 15px; }
.school-request-message-avatar { width: 32px; height: 32px; border-color: color-mix(in srgb, var(--message-accent) 40%, var(--border)); background: color-mix(in srgb, var(--message-accent) 20%, var(--surface)); font-size: 11px; }
.school-request-message header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--text-secondary); font-size: 11px; }
.school-request-message header strong { color: var(--text); font-size: 12px; }
.school-request-message header time { margin-left: auto; }
.school-request-message header .badge { padding: 2px 7px; font-size: 9px; }
.school-request-message p { grid-column: 2; margin: 7px 0 0; overflow-wrap: anywhere; line-height: 1.5; }
.school-request-message-form { display: grid; gap: 10px; margin: 0 18px 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.school-request-message-form label { font-weight: 600; }
.school-request-message-form textarea { width: 100%; resize: vertical; }
.school-request-message-form .button { justify-self: start; }
.school-request-thread-closed { margin: 0 18px 18px; color: var(--text-secondary); font-size: 13px; }
.school-request-footer { align-items: center; flex-wrap: wrap; }
.school-request-footer small { color: var(--text-secondary); }
.school-request-resolution-form { display: flex; justify-content: flex-end; width: 100%; }
.school-request-response { margin: 0 18px 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-secondary)); }
.school-request-response strong { color: var(--primary); }
.school-request-response p { margin: 6px 0 0; overflow-wrap: anywhere; }
.school-request-form-card { max-width: 760px; border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface) 48%); }
.school-request-history { margin-top: 28px; }
.school-request-card-personal { min-height: 0; }
@media (max-width: 600px) {
    .school-request-card .management-card-header { flex-wrap: wrap; }
    .school-request-message { max-width: 100%; }
    .school-request-message header time { width: 100%; margin-left: 0; }
}
.degree-card:nth-child(6n + 1) { --management-accent: var(--decorative-1); }
.degree-card:nth-child(6n + 2) { --management-accent: var(--decorative-2); }
.degree-card:nth-child(6n + 3) { --management-accent: var(--decorative-3); }
.degree-card:nth-child(6n + 4) { --management-accent: var(--decorative-4); }
.degree-card:nth-child(6n + 5) { --management-accent: var(--decorative-5); }
.degree-card:nth-child(6n) { --management-accent: var(--decorative-6); }
.degree-card .management-card-header { background: linear-gradient(120deg, color-mix(in srgb, var(--management-accent) 48%, var(--surface)), color-mix(in srgb, var(--management-accent) 27%, var(--surface-secondary))); }
.period-card { --management-accent: #D63D4C; border-color: color-mix(in srgb, var(--management-accent) 65%, var(--border)); }
.period-card.is-open { --management-accent: #079455; border-color: color-mix(in srgb, var(--management-accent) 72%, var(--border)); }
.period-card .management-card-header { background: linear-gradient(120deg, color-mix(in srgb, var(--management-accent) 48%, var(--surface)), color-mix(in srgb, var(--management-accent) 28%, var(--surface-secondary))); }
.period-card .management-card-title strong { color: color-mix(in srgb, var(--management-accent) 82%, var(--text)); }
.period-card.is-final { box-shadow: 0 16px 38px color-mix(in srgb, var(--primary) 12%, transparent); }
.period-card-details dd { display: flex; align-items: center; }
.badge-period-final { color: #fff; background: var(--primary); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 24%, transparent); }
.badge-period-intermediate { border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, var(--border)); color: color-mix(in srgb, var(--text-secondary) 82%, var(--text)); background: color-mix(in srgb, var(--text-secondary) 14%, var(--surface)); }
.class-course-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; min-width: 0; }
.class-course-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.class-course-hours-badge { border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); color: color-mix(in srgb, var(--primary) 78%, var(--text)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.class-course-teacher-badge { max-width: 100%; border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, var(--border)); color: var(--text-secondary); background: var(--surface-secondary); overflow-wrap: anywhere; white-space: normal; }
.class-course-teacher-badge.is-unassigned { font-weight: 650; }
.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; }
.course-detail-title-line { display: flex; align-items: center; gap: 10px; }
.course-detail-title-line h1 { min-width: 0; }
.course-info-toggle { flex: 0 0 auto; }
.course-info-inline-card { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding-block: 18px; }
.course-info-inline-card h2 { margin: 2px 0 4px; font-size: 19px; }
.course-info-inline-form { display: flex; flex: 1 1 620px; align-items: end; justify-content: flex-end; gap: 10px; margin: 0; }
.course-info-inline-form .form-field { flex: 1 1 300px; margin: 0; }
.course-info-inline-form .course-info-hours-field { flex: 0 1 150px; }
.course-info-inline-form label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.course-info-inline-form input { width: 100%; }
.course-info-inline-form .button { flex: 0 0 auto; min-height: 42px; }
.teacher-subgroup-card { margin-top: 22px; }
.teacher-subgroup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.teacher-subgroup-heading h2 { margin-bottom: 6px; }
.teacher-subgroup-heading p { margin: 0; color: var(--text-secondary); }
.teacher-subgroup-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 24px; }
.teacher-subgroup-card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.teacher-subgroup-student-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-bottom: 18px; }
.teacher-subgroup-student { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.teacher-subgroup-student:hover { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); transform: translateY(-1px); }
.teacher-subgroup-student.is-selected, .teacher-subgroup-student:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.teacher-subgroup-student > input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); }
.teacher-subgroup-student .student-compact-identity { min-width: 0; }
.teacher-subgroup-student .student-compact-identity > span:last-child { min-width: 0; }
.teacher-subgroup-student small { color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }
.teacher-subgroup-card.is-disabled { cursor: help; opacity: .58; }
.teacher-subgroup-card.is-disabled * { pointer-events: none; }
.admin-teacher-distribution-card { margin-top: 22px; }
.distribution-period-form { display: grid; gap: 6px; min-width: min(100%, 280px); }
.distribution-period-form label { font-weight: 700; }
.admin-teacher-allocation-list { display: grid; gap: 16px; margin-top: 20px; }
.teacher-allocation-editor { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-secondary); }
.teacher-allocation-editor legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0 4px; }
.teacher-allocation-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.teacher-allocation-editor .teacher-subgroup-student-grid { margin: 12px 0 0; }
.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-bottom: 18px; }
.inline-group-form { display: grid; grid-template-columns: minmax(240px, 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:not(:has(input:checked)),
.staff-checkbox-list[hidden] { display: none; }
.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 { position: relative; padding: 26px; }
.unsaved-dialog-close { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-secondary); font-size: 23px; line-height: 1; }
.unsaved-dialog-close:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 42%, var(--border)); background: color-mix(in srgb, var(--error) 9%, var(--surface)); }
.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; }
.global-confirm-dialog .unsaved-dialog-content p { max-width: 48ch; white-space: pre-line; }
.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,
.student-details-card .searchable-staff-field,
.student-details-card .student-form-status-field { margin: 0; }
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: 500; }
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; }
input[type="search"] { padding-left: 42px !important; background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 18px 18px !important; }
html[data-theme="dark"] input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; }
html[data-accent^="halloween"] input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; } }
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; }
.inline-checkbox-control { display: flex; align-items: center; gap: 8px; width: fit-content; }
.inline-checkbox-control label { margin: 0; }
.inline-checkbox-control input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.academic-year-active-field .helptext { display: block; margin-top: 7px; }
.inline-checkbox-field .helptext { margin-top: 7px; }
.import-file-field .helptext { margin: 5px 0 11px; }
.parent-dashboard-actions { align-items: flex-end; }
.parent-year-selector { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.parent-year-selector label { margin: 0; }
.parent-year-selector select { min-height: 42px; }

.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); }
.school-setup-alert { display: flex; align-items: center; gap: 14px; margin: 8px 0 34px; padding: 17px 20px; color: var(--error-tone-text); border: 1px solid color-mix(in srgb, var(--error) 58%, var(--border)); border-left: 6px solid var(--error); background: linear-gradient(100deg, color-mix(in srgb, var(--error) 22%, var(--surface)), color-mix(in srgb, var(--error) 10%, var(--surface))); box-shadow: 0 12px 30px color-mix(in srgb, var(--error) 15%, transparent); }
.school-setup-alert-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: white; background: var(--error); font-weight: 900; }
.school-setup-alert > span:last-child { display: grid; gap: 3px; }
.school-setup-alert strong { color: var(--error-tone-text); }

.import-processing-card { max-width: 760px; margin-inline: auto; padding: clamp(24px, 4vw, 40px); }
.import-processing-card > div { width: 100%; }
.import-processing-card h2 { margin: 5px 0 8px; }
.import-processing-card p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.import-processing-spinner { flex: 0 0 52px; width: 52px; height: 52px; border: 5px solid color-mix(in srgb, var(--primary) 16%, var(--border)); border-top-color: var(--primary); border-radius: 50%; animation: import-spin .85s linear infinite; }
.import-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 22px; }
.import-progress-row strong { min-width: 48px; color: var(--primary); text-align: right; }
.import-progress { height: 11px; }
.import-progress.is-indeterminate > span { width: 28% !important; animation: import-progress-indeterminate 1.3s ease-in-out infinite; }
@keyframes import-progress-indeterminate { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@keyframes import-spin { to { transform: rotate(360deg); } }
.import-confirm-card { margin-top: 18px; }
.import-confirm-card form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.import-confirm-card .is-disabled { opacity: .48; pointer-events: none; }
.import-confirm-card small { flex-basis: 100%; }
.import-fatal-error, .import-complete-message { display: grid; gap: 4px; margin-bottom: 18px; }
.import-preview-banner { border-left-width: 1px; }
.import-preview-banner.alert-success { color: var(--success-tone-text); border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, var(--success) 23%, var(--surface)), color-mix(in srgb, var(--success) 11%, var(--surface))); }
.import-preview-banner.alert-warning { color: color-mix(in srgb, var(--warning) 70%, var(--text)); border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, var(--warning) 24%, var(--surface)), color-mix(in srgb, var(--warning) 10%, var(--surface))); }
.import-preview-banner.alert-error { color: var(--error-tone-text); border-color: color-mix(in srgb, var(--error) 55%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, var(--error) 23%, var(--surface)), color-mix(in srgb, var(--error) 10%, var(--surface))); }
@media (max-width: 600px) { .import-processing-card { align-items: flex-start; } .import-processing-spinner { flex-basis: 38px; width: 38px; height: 38px; } }

.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-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.dashboard-updates-trigger { position: relative; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.dashboard-updates-trigger:hover { transform: translateY(-2px); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: var(--shadow); }
.dashboard-updates-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 3px; }
.dashboard-updates-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-updates-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--text-secondary); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease; }
.dashboard-updates-trigger.has-unread { color: white; border-color: color-mix(in srgb, white 72%, var(--primary)); background: linear-gradient(145deg, var(--primary), var(--primary-hover)); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 24%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), 0 10px 26px color-mix(in srgb, var(--primary) 38%, transparent); }
.dashboard-updates-trigger.has-unread:hover { color: white; border-color: white; background: linear-gradient(145deg, var(--primary-hover), var(--primary)); }
.dashboard-updates-trigger.has-unread .dashboard-updates-dot { width: 11px; height: 11px; opacity: 1; transform: scale(1); border-color: white; background: var(--warning); animation: dashboard-updates-pulse 1.8s ease-in-out infinite; }
@keyframes dashboard-updates-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--warning) 0%, transparent); } 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 45%, transparent); } }

.site-updates-dialog-open { overscroll-behavior: none; }
body.site-updates-dialog-open { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
.dashboard-updates-dialog { width: min(940px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 28px 90px rgba(15, 23, 42, .32); overflow: hidden; overscroll-behavior: contain; }
.dashboard-updates-dialog::backdrop { background: rgba(15, 23, 42, .58); backdrop-filter: blur(5px); }
.dashboard-updates-dialog-shell { position: relative; display: flex; flex-direction: column; max-height: min(820px, calc(100vh - 32px)); overflow: hidden; }
.dashboard-updates-close { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0 0 2px; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 12px; font-size: 25px; line-height: 1; cursor: pointer; }
.dashboard-updates-close:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.dashboard-updates-dialog-heading { display: flex; align-items: center; gap: 16px; padding: 28px 72px 23px 28px; background: linear-gradient(125deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), color-mix(in srgb, var(--decorative-2) 11%, var(--surface))); border-bottom: 1px solid var(--border); }
.dashboard-updates-dialog-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; color: var(--primary); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 16px; font-size: 21px; box-shadow: var(--shadow); }
.dashboard-updates-dialog-icon svg, .dashboard-updates-empty svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-updates-dialog-heading > div { display: flex; flex-direction: column; justify-content: space-between; min-height: 48px; }
.dashboard-updates-dialog-heading h2 { margin: 0; font-size: 25px; line-height: 1.12; }
.dashboard-updates-dialog-heading p { margin: 0; color: var(--text-secondary); }
.dashboard-updates-dialog-grid { flex: 1 1 auto; min-height: 300px; overflow: auto; overscroll-behavior: contain; }
.dashboard-updates-dialog-grid.has-editor { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); }
.dashboard-updates-feed { display: grid; align-content: start; gap: 13px; padding: 24px 28px 30px; }
.dashboard-update-entry { position: relative; padding: 18px 19px 19px 23px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 16px; }
.dashboard-update-entry::before { content: ""; position: absolute; left: -1px; top: 17px; bottom: 17px; width: 4px; background: linear-gradient(var(--primary), var(--decorative-2)); border-radius: 0 4px 4px 0; }
.dashboard-update-entry.is-future { border-style: dashed; opacity: .78; }
.dashboard-update-entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dashboard-update-entry-meta span { padding: 3px 7px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-radius: 999px; font-size: 10px; }
.dashboard-update-entry h3 { margin: 0 0 7px; font-size: 17px; }
.dashboard-update-entry p { margin: 0; color: var(--text-secondary); line-height: 1.55; overflow-wrap: anywhere; }
.dashboard-updates-empty { align-self: center; padding: 40px 20px; text-align: center; color: var(--text-secondary); }
.dashboard-updates-empty > span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-radius: 18px; font-size: 22px; }
.dashboard-updates-empty h3 { margin: 0 0 6px; color: var(--text); }
.dashboard-updates-empty p { margin: 0; }
.dashboard-updates-editor { padding: 25px 28px 30px; background: color-mix(in srgb, var(--surface-secondary) 75%, var(--surface)); border-left: 1px solid var(--border); }
.dashboard-updates-editor h3 { margin: 4px 0 5px; font-size: 19px; }
.dashboard-updates-editor > p { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.dashboard-updates-editor .form-group { margin-bottom: 13px; }
.dashboard-updates-editor textarea { min-height: 112px; resize: vertical; }
.dashboard-updates-editor .button { width: 100%; margin-top: 3px; }
.platform-updates-section { margin-bottom: 32px; }
.platform-updates-panel { padding: 0; overflow: hidden; }
.platform-updates-panel .dashboard-updates-feed { max-height: 480px; overflow: auto; }
.platform-update-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.platform-update-edit summary { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.platform-update-edit summary::-webkit-details-marker { display: none; }
.platform-update-edit[open] summary { margin-bottom: 14px; }
.platform-update-edit form { display: grid; gap: 12px; }
.platform-update-edit .form-group { margin: 0; }
.platform-update-edit textarea { min-height: 96px; resize: vertical; }
.platform-update-edit form > small { color: var(--text-secondary); }
.platform-update-edit .button { justify-self: start; }
@media (max-width: 760px) {
    .dashboard-header-actions { width: 100%; justify-content: flex-start; }
    .dashboard-header-actions .button { flex: 1 1 auto; }
    .dashboard-updates-dialog { position: fixed; inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left)); box-sizing: border-box; width: auto; max-width: none; height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); max-height: none; margin: 0; border-radius: 18px; }
    .dashboard-updates-dialog-shell { height: 100%; max-height: none; }
    .dashboard-updates-dialog-grid { min-height: 0; }
    .dashboard-updates-dialog-grid.has-editor { display: block; }
    .dashboard-updates-dialog-heading { padding: 22px 58px 20px 20px; }
    .dashboard-updates-dialog-icon { display: none; }
    .dashboard-updates-feed, .dashboard-updates-editor { padding: 20px; }
    .dashboard-updates-editor { border-top: 1px solid var(--border); border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-updates-trigger, .dashboard-updates-dot { transition: none; }
    .dashboard-updates-trigger.has-unread .dashboard-updates-dot { animation: none; }
}
/* Le décor doit finir avec le contenu : la transparence ne supprime pas le débordement défilable. */
.dashboard-ambient { position: absolute; z-index: 0; inset: -36px calc(-1 * clamp(22px, 4vw, 56px)) 0; overflow: clip; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 220px), transparent 100%); }
.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; }
html[data-theme="light"]:is([data-accent="violet_rose"], [data-accent="ocean"]) .dashboard-blob-blue { opacity: .05; }
@media (prefers-color-scheme: light) {
    html[data-theme="system"]:is([data-accent="violet_rose"], [data-accent="ocean"]) .dashboard-blob-blue { opacity: .05; }
}
@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); } }
@media (max-width: 760px) {
    .dashboard-ambient { display: none; }
}

.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-progress-section { margin-top: 30px; }
.dashboard-idle-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 16px; }
.dashboard-idle-grid.is-teacher { grid-template-areas: "hero suggestions" "hero trophies"; grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.dashboard-idle-hero { position: relative; grid-area: hero; display: flex; min-width: 0; min-height: 560px; flex-direction: column; padding: clamp(25px, 3vw, 38px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: calc(var(--radius) + 5px); color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 15%, var(--surface)), color-mix(in srgb, var(--decorative-2) 11%, var(--surface)) 62%, var(--surface)); box-shadow: var(--shadow); }
.dashboard-idle-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--decorative-2) 15%, transparent), transparent 29%), linear-gradient(115deg, transparent 55%, color-mix(in srgb, var(--primary) 6%, transparent)); content: ""; pointer-events: none; }
.dashboard-idle-hero-topline { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-idle-hero-copy { position: relative; z-index: 2; max-width: 660px; margin-top: clamp(22px, 3vw, 40px); }
.dashboard-idle-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.dashboard-idle-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent); }
.dashboard-idle-hero h2 { max-width: 650px; margin: 5px 0 0; color: var(--text); font-family: Fredoka, ui-rounded, system-ui, sans-serif; font-size: clamp(30px, 3vw, 44px); line-height: 1.02; letter-spacing: -.03em; }
.dashboard-idle-hero-copy p { max-width: 620px; margin: 14px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.dashboard-idle-identity { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 7px 11px 7px 7px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px); }
.dashboard-idle-identity > div > strong, .dashboard-idle-identity > div > small { display: block; max-width: 180px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-idle-identity > div > strong { font-size: 12px; }
.dashboard-idle-identity > div > small { margin-top: 2px; color: var(--text-secondary); font-size: 10px; }
.dashboard-idle-avatar { position: relative; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border: 2px solid color-mix(in srgb, var(--primary) 30%, var(--surface)); border-radius: 50%; color: var(--primary); background: var(--surface); box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 12%, transparent); font-size: 18px; font-weight: 850; }
.dashboard-idle-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: cover; object-position: center; border-radius: 50%; clip-path: circle(50%); }
.staff-assignment-avatar:has(img), .colleague-achievement-avatar:has(img) { border-radius: 50%; }
.dashboard-idle-avatar > i { position: absolute; right: -2px; bottom: -1px; display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: var(--primary); font-size: 8px; font-style: normal; }
.dashboard-idle-hero-tools { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(128px, auto); gap: 14px; margin-top: 30px; }
.dashboard-idle-hero .dashboard-idle-tool { grid-template-columns: 56px minmax(0, 1fr) 34px; gap: 16px; min-height: 128px; padding: 18px 20px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(7px); }
.dashboard-idle-hero .dashboard-idle-tool > span { width: 56px; height: 56px; border-radius: 16px; font-size: 25px; }
.dashboard-idle-hero .dashboard-idle-tool strong { font-size: 15px; line-height: 1.3; }
.dashboard-idle-hero .dashboard-idle-tool small { display: -webkit-box; margin-top: 7px; overflow: hidden; font-size: 11px; line-height: 1.45; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-idle-hero .dashboard-idle-tool > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-size: 16px; transition: transform .16s ease, background .16s ease; }
.dashboard-idle-hero .dashboard-idle-tool:hover:not(.is-disabled) > i { transform: translateX(3px); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.dashboard-idle-hero-link { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; color: var(--primary); font-size: 14px; font-weight: 600; }
.dashboard-idle-orbit { position: absolute; z-index: 1; right: -95px; bottom: -125px; width: 350px; height: 350px; border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 50%; }
.dashboard-idle-orbit::before, .dashboard-idle-orbit::after { position: absolute; border: 1px solid color-mix(in srgb, var(--primary) 9%, transparent); border-radius: 50%; content: ""; }
.dashboard-idle-orbit::before { inset: 45px; }
.dashboard-idle-orbit::after { inset: 100px; background: color-mix(in srgb, var(--primary) 3%, transparent); }
.dashboard-idle-orbit i { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent); }
.dashboard-idle-orbit i:nth-child(1) { top: 46px; left: 56px; }
.dashboard-idle-orbit i:nth-child(2) { top: 132px; left: -4px; width: 7px; height: 7px; }
.dashboard-idle-orbit i:nth-child(3) { top: 98px; right: 32px; width: 6px; height: 6px; }
.dashboard-idle-trophies, .dashboard-idle-prep, .dashboard-idle-assignments, .dashboard-idle-suggestions { display: flex; min-width: 0; flex-direction: column; padding: 21px; overflow: hidden; }
.dashboard-idle-grid.is-teacher .dashboard-idle-trophies, .dashboard-idle-grid.is-teacher .dashboard-idle-prep { grid-area: trophies; }
.dashboard-idle-grid:not(.is-teacher) > .dashboard-idle-hero { grid-area: auto; }
.dashboard-admin-idle { padding: clamp(24px, 2.5vw, 36px); }
.dashboard-admin-idle h2 { margin: 7px 0 11px; }
.dashboard-admin-idle > p { color: var(--text-secondary); }
.dashboard-admin-actions { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.dashboard-admin-actions .dashboard-idle-tool { grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 15px; min-height: 132px; padding: 19px 20px; }
.dashboard-admin-actions .dashboard-idle-tool > span { width: 54px; height: 54px; border-radius: 16px; font-size: 25px; }
.dashboard-admin-actions .dashboard-idle-tool strong { font-size: 16px; line-height: 1.3; }
.dashboard-admin-actions .dashboard-idle-tool small { margin-top: 7px; font-size: 12px; line-height: 1.4; white-space: normal; }
.dashboard-admin-actions .dashboard-idle-tool > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--idle-tool-tone); background: color-mix(in srgb, var(--idle-tool-tone) 11%, var(--surface)); font-size: 17px; font-style: normal; }
.dashboard-admin-actions .dashboard-idle-tool > span { position: relative; }
.dashboard-admin-notification { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; color: white; background: var(--error); border: 2px solid var(--surface); border-radius: 999px; box-shadow: 0 5px 12px color-mix(in srgb, var(--error) 32%, transparent); font: 800 11px/1 inherit; }
.dashboard-idle-grid.is-teacher .dashboard-idle-suggestions { grid-area: suggestions; }
.dashboard-idle-card-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; }
.dashboard-idle-card-heading h3 { margin: 3px 0 0; font-size: 17px; }
.dashboard-idle-card-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-size: 18px; }
.dashboard-idle-card-icon.is-gold { color: color-mix(in srgb, var(--decorative-4) 78%, var(--text)); border-color: color-mix(in srgb, var(--decorative-4) 50%, var(--border)); background: color-mix(in srgb, var(--decorative-4) 14%, var(--surface)); }
.dashboard-idle-card-icon.is-cyan { color: color-mix(in srgb, var(--decorative-2) 78%, var(--text)); border-color: color-mix(in srgb, var(--decorative-2) 50%, var(--border)); background: color-mix(in srgb, var(--decorative-2) 14%, var(--surface)); }
.dashboard-trophy-score { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--decorative-4) 14%, var(--surface)), var(--surface-secondary)); }
.dashboard-trophy-score > div > strong, .dashboard-trophy-score > div > small { display: block; }
.dashboard-trophy-score > div > small { margin-top: 4px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.dashboard-trophy-ring { --trophy-progress: 0%; display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, var(--surface) 55%, transparent 57%), conic-gradient(var(--decorative-4) var(--trophy-progress), color-mix(in srgb, var(--decorative-4) 15%, var(--border)) 0); }
.dashboard-trophy-ring strong { font-size: 18px; }
.dashboard-trophy-ring small { font-size: 10px; }
.dashboard-trophy-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.dashboard-trophy-shelf > span { min-width: 0; padding: 9px 5px; border: 1px solid var(--border); border-radius: 11px; text-align: center; background: var(--surface-secondary); }
.dashboard-trophy-shelf i, .dashboard-trophy-shelf small { display: block; }
.dashboard-trophy-shelf i { font-style: normal; font-size: 20px; }
.dashboard-trophy-shelf small { margin-top: 5px; overflow: hidden; color: var(--text-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-idle-text-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 15px; color: var(--primary); font-size: 12px; font-weight: 600; }
.dashboard-idle-trophy-invite p { margin: 3px 0 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.dashboard-idle-trophy-invite .button { align-self: flex-start; margin-top: auto; }
.dashboard-idle-checks { display: grid; gap: 7px; }
.dashboard-idle-checks a { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; min-height: 45px; padding: 8px 10px; border-radius: 10px; color: var(--text); background: var(--surface-secondary); }
.dashboard-idle-checks a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.dashboard-idle-checks a > span { color: var(--text-secondary); font-size: 9px; font-weight: 800; }
.dashboard-idle-checks a > strong { font-size: 12px; }
.dashboard-idle-checks a > i { font-style: normal; }
.dashboard-idle-assignments { grid-column: 1 / -1; }
.dashboard-idle-grid.is-teacher .dashboard-idle-class-list { grid-template-columns: 1fr; }
.dashboard-idle-class-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dashboard-idle-class-list > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface-secondary); }
.dashboard-idle-class-list > a:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: translateY(-1px); }
.dashboard-idle-class-list > a span, .dashboard-idle-class-list > a strong, .dashboard-idle-class-list > a small { display: block; min-width: 0; }
.dashboard-idle-class-list > a strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-idle-class-list > a small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.dashboard-idle-class-list > a i { color: var(--text-secondary); font-style: normal; }
.dashboard-idle-class-list > p { grid-column: 1 / -1; margin: 0; padding: 18px; border-radius: 12px; color: var(--text-secondary); background: var(--surface-secondary); text-align: center; }
.dashboard-idle-class-list > p span, .dashboard-idle-class-list > p strong, .dashboard-idle-class-list > p small { display: block; }
.dashboard-idle-class-list > p span { margin-bottom: 5px; font-size: 22px; }
.dashboard-idle-class-list > p small { margin-top: 4px; }
.dashboard-idle-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin-top: auto; padding-top: 15px; font-size: 11px; font-weight: 750; }
.dashboard-idle-card-footer a { color: var(--primary); }
.dashboard-idle-card-footer small { margin-left: auto; color: var(--text-secondary); }
.dashboard-idle-management-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.dashboard-idle-management-links a { display: grid; place-items: center; gap: 7px; min-height: 92px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--surface-secondary); }
.dashboard-idle-management-links a:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: translateY(-2px); }
.dashboard-idle-management-links span { font-size: 22px; }
.dashboard-idle-management-links strong { font-size: 11px; }
.dashboard-idle-tool { --idle-tool-tone: var(--decorative-1); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; min-height: 74px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--idle-tool-tone) 40%, var(--border)); border-radius: 13px; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--idle-tool-tone) 12%, var(--surface)), var(--surface)); }
.dashboard-idle-tool.is-cyan { --idle-tool-tone: var(--decorative-2); }
.dashboard-idle-tool.is-pink { --idle-tool-tone: var(--decorative-3); }
.dashboard-idle-tool.is-gold, .dashboard-idle-tool.is-orange { --idle-tool-tone: var(--decorative-4); }
.dashboard-idle-tool.is-green { --idle-tool-tone: var(--decorative-5); }
.dashboard-idle-tool:hover:not(.is-disabled) { border-color: color-mix(in srgb, var(--idle-tool-tone) 72%, var(--border)); transform: translateY(-2px); box-shadow: 0 9px 22px color-mix(in srgb, var(--idle-tool-tone) 13%, transparent); }
.dashboard-idle-tool > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--idle-tool-tone) 17%, var(--surface)); font-size: 18px; }
.dashboard-idle-tool strong, .dashboard-idle-tool small { display: block; overflow: hidden; text-overflow: ellipsis; }
.dashboard-idle-tool strong { font-size: 11px; line-height: 1.25; }
.dashboard-idle-tool small { margin-top: 4px; color: var(--text-secondary); font-size: 9px; white-space: nowrap; }
.dashboard-idle-tool > i { color: var(--text-secondary); font-style: normal; }
.dashboard-idle-tool.is-disabled { opacity: .58; }
.dashboard-tool-kind { display: block; margin-bottom: 4px; color: var(--idle-tool-tone); font-size: 8px; font-weight: 700; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
.dashboard-idle-hero .dashboard-tool-kind { margin-bottom: 6px; font-size: 9px; }
.dashboard-suggestion-list { display: grid; gap: 9px; }
.dashboard-idle-suggestions .dashboard-idle-tool { min-height: 84px; padding: 11px 12px; }
.dashboard-idle-suggestions .dashboard-idle-tool small { white-space: normal; }

/* Accueil enseignant sans période ouverte : vitrine d’outils et parcours annuel. */
.dashboard-teacher-home { display: grid; gap: 18px; margin-top: 28px; }
.dashboard-tool-showcase { position: relative; padding: clamp(24px, 3vw, 38px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 43%, var(--border)); border-radius: calc(var(--radius) + 7px); background: linear-gradient(125deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--decorative-2) 15%, var(--surface)) 48%, color-mix(in srgb, var(--accent) 12%, var(--surface))); background-size: 180% 180%; box-shadow: var(--shadow); animation: dashboard-tool-showcase-background 9s ease-in-out infinite; }
.dashboard-tool-showcase::before { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(color-mix(in srgb, var(--primary) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent) 1px, transparent 1px); background-position: 0 0; background-size: 42px 42px; content: ""; pointer-events: none; }
.dashboard-tool-showcase::after { position: absolute; inset: -35% -45%; background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--primary) 5%, transparent) 47%, color-mix(in srgb, var(--accent) 7%, transparent) 53%, transparent 64%); content: ""; pointer-events: none; will-change: transform; animation: dashboard-tool-grid-light 12s ease-in-out infinite alternate; }
.dashboard-tool-showcase-glow { position: absolute; top: -230px; left: -220px; width: 540px; height: 540px; border-radius: 50%; opacity: .52; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%); filter: blur(24px); pointer-events: none; animation: dashboard-tool-showcase-glow 10s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes dashboard-tool-showcase-background { 0%, 100% { background-position: 0% 45%; } 50% { background-position: 100% 55%; } }
@keyframes dashboard-tool-showcase-glow { from { transform: translate3d(0, 0, 0) scale(.92); } to { transform: translate3d(calc(100vw - 260px), 220px, 0) scale(1.08); } }
@keyframes dashboard-tool-grid-light { from { transform: translate3d(-22%, 0, 0); } to { transform: translate3d(22%, 0, 0); } }
.dashboard-tool-showcase-header { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.dashboard-tool-showcase-header h2 { margin: 0; font-family: Fredoka, ui-rounded, system-ui, sans-serif; font-size: clamp(25px, 3vw, 34px); line-height: 1.04; letter-spacing: -.03em; }
.dashboard-tool-showcase-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-tool-showcase-item { --tool-showcase-tone: var(--decorative-1); display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-width: 0; min-height: 88px; padding: 15px; border: 1px solid color-mix(in srgb, var(--tool-showcase-tone) 38%, var(--border)); border-radius: 16px; color: var(--text); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 7%, transparent); backdrop-filter: blur(9px); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dashboard-tool-showcase-item.is-cyan { --tool-showcase-tone: var(--decorative-2); }
.dashboard-tool-showcase-item.is-pink { --tool-showcase-tone: var(--decorative-3); }
.dashboard-tool-showcase-item.is-gold, .dashboard-tool-showcase-item.is-orange { --tool-showcase-tone: var(--decorative-4); }
.dashboard-tool-showcase-item.is-green { --tool-showcase-tone: var(--decorative-5); }
.dashboard-tool-showcase-item:hover { border-color: color-mix(in srgb, var(--tool-showcase-tone) 78%, var(--border)); box-shadow: 0 17px 34px color-mix(in srgb, var(--tool-showcase-tone) 17%, transparent); transform: translateY(-4px); }
.dashboard-tool-showcase-item.is-pinned { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--tool-showcase-tone) 72%, var(--primary)), 0 12px 28px color-mix(in srgb, var(--text) 7%, transparent); }
.dashboard-tool-showcase-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid color-mix(in srgb, var(--tool-showcase-tone) 44%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--tool-showcase-tone) 17%, var(--surface)); font-size: 23px; }
.dashboard-tool-showcase-icon .comment-outline-icon { width: 28px; height: 28px; }
.dashboard-tool-showcase-copy { display: block; min-width: 0; }
.dashboard-tool-showcase-copy > small { display: block; margin-bottom: 3px; color: var(--tool-showcase-tone); font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-tool-showcase-copy > strong { display: block; font-size: 13px; line-height: 1.25; }
.dashboard-tool-showcase-item > i { color: var(--tool-showcase-tone); font-size: 17px; font-style: normal; transition: transform .2s ease; }
.dashboard-tool-showcase-item:hover > i { transform: translateX(3px); }

.dashboard-setup-guide { padding: clamp(23px, 2.7vw, 35px); overflow: hidden; }
.dashboard-setup-guide-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; padding-bottom: 23px; border-bottom: 1px solid var(--border); }
.dashboard-setup-guide-heading { display: flex; align-items: flex-start; gap: 15px; }
.dashboard-setup-guide-heading > span { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--decorative-2) 12%, var(--surface))); font-size: 25px; }
.dashboard-setup-guide-heading h2 { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 31px); letter-spacing: -.02em; }
.dashboard-setup-guide-heading p { max-width: 720px; margin: 8px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.dashboard-setup-guide-header > form { flex: 0 0 auto; }
.dashboard-setup-roadmap { position: relative; display: grid; gap: 0; margin: 0; padding: 7px 0 0; list-style: none; counter-reset: setup-stage; }
.dashboard-setup-roadmap::before { position: absolute; top: 38px; bottom: 38px; left: 21px; width: 2px; border-radius: 2px; background: linear-gradient(var(--primary), var(--decorative-2), var(--decorative-3), var(--decorative-4)); content: ""; }
.dashboard-setup-roadmap > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px; padding: 16px 0; }
.dashboard-setup-roadmap > li + li { border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.dashboard-setup-marker { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 5px solid var(--surface); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, var(--border)); font-size: 12px; font-weight: 850; }
.dashboard-setup-roadmap > li:nth-child(2) .dashboard-setup-marker { background: var(--decorative-2); }
.dashboard-setup-roadmap > li:nth-child(3) .dashboard-setup-marker { background: var(--decorative-3); }
.dashboard-setup-roadmap > li:nth-child(4) .dashboard-setup-marker { background: color-mix(in srgb, var(--decorative-4) 72%, var(--text)); }
.dashboard-setup-roadmap > li:nth-child(5) .dashboard-setup-marker { background: var(--decorative-5); }
.dashboard-setup-roadmap > li:nth-child(6) .dashboard-setup-marker { background: var(--primary); }
.dashboard-setup-roadmap > li:nth-child(7) .dashboard-setup-marker { background: var(--decorative-2); }
.dashboard-setup-stage { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: start; gap: 12px; min-width: 0; padding: 1px 10px 1px 0; border-radius: 13px; color: var(--text); transition: color .17s ease, background .17s ease, transform .17s ease; }
.dashboard-setup-stage.is-link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); transform: translateX(3px); }
.dashboard-setup-stage-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: color-mix(in srgb, var(--primary) 9%, var(--surface-secondary)); font-size: 19px; }
.dashboard-setup-stage small { display: block; color: var(--primary); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-setup-stage h3 { margin: 3px 0 0; font-size: 15px; }
.dashboard-setup-stage p { margin: 6px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.dashboard-setup-stage-arrow { align-self: center; color: var(--primary); font-size: 16px; font-style: normal; }
.dashboard-setup-guide-return { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 17px; border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.dashboard-setup-guide-return strong, .dashboard-setup-guide-return small { display: block; }
.dashboard-setup-guide-return strong { font-size: 12px; }
.dashboard-setup-guide-return small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }

@media (max-width: 1350px) {
    .dashboard-tool-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
    .dashboard-teacher-home.has-visible-setup-guide { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); align-items: start; }
    .dashboard-teacher-home.has-visible-setup-guide > .dashboard-setup-guide { grid-column: 1; grid-row: 1; }
    .dashboard-teacher-home.has-visible-setup-guide > .dashboard-tool-showcase { grid-column: 2; grid-row: 1; }
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-setup-guide-header { flex-direction: column; }
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-setup-guide-header > form { align-self: flex-start; }
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-tool-showcase-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1700px) {
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-setup-guide-header { flex-direction: row; }
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-setup-guide-header > form { align-self: auto; }
    .dashboard-teacher-home.has-visible-setup-guide .dashboard-tool-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1179px) {
    .dashboard-teacher-home > .dashboard-tool-showcase { order: 1; }
    .dashboard-teacher-home > .dashboard-setup-guide,
    .dashboard-teacher-home > .dashboard-setup-guide-return { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-tool-showcase, .dashboard-tool-showcase::after, .dashboard-tool-showcase-glow { animation: none; }
}
.dashboard-announcement { position: relative; z-index: 1; margin-bottom: 20px; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.dashboard-announcement::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -135px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, color-mix(in srgb, var(--primary) 5%, transparent) 35%, transparent 70%); 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: 600; 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); }
.rich-text-character-counter { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; text-align: right; }
.rich-text-character-counter.is-error { color: var(--error); font-weight: 750; }
.dashboard-announcement-visibility { display: flex; align-items: center; gap: 9px; }
.dashboard-announcement-visibility label { margin: 0; }
.profile-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.profile-main-column, .profile-side-column { display: grid; align-content: start; gap: 18px; min-width: 0; }
.profile-layout .card > h2 { margin: 0 0 18px; }
.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-layout .form-field > label, .profile-layout .inline-checkbox-control > label { font-weight: 600; }
.profile-info-card { container: profile-info / inline-size; }
.profile-identity-fields { display: grid; grid-template-columns: minmax(90px, .7fr) repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.profile-identity-fields > .form-field:not(.profile-civility-field):not(.profile-name-field) { grid-column: 1 / -1; }
.profile-identity-fields > .form-field { min-width: 0; }
@container profile-info (max-width: 430px) {
    .profile-identity-fields { grid-template-columns: minmax(0, 1fr); }
}
.profile-photo-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 160px; padding: 18px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 15px; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)); }
.profile-avatar-preview { display: grid; justify-items: center; gap: 7px; width: 108px; margin: 0; padding: 0; border: 0; background: transparent; }
.profile-avatar-placeholder { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 32px; font-weight: 600; }
.profile-avatar-preview span { text-align: center; }
.profile-avatar-preview > span:last-child { font-weight: 600; }
.profile-photo-action { display: grid; align-content: center; gap: 7px; min-width: 0; }
.profile-photo-action > strong { font-size: 14px; font-weight: 600; }
.profile-photo-action > p { margin: 0 0 5px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.profile-photo-action > input[type="file"] { min-width: 0; max-width: 100%; }
.profile-photo-action > input[type="file"]::file-selector-button { margin-right: 11px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--primary); background: var(--surface); font: inherit; font-weight: 600; cursor: pointer; }
.profile-themes-card { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); }
.profile-themes-card .profile-accent-field { margin: 0; }
.profile-themes-card .appearance-accordion { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.profile-themes-card .appearance-accordion, .profile-achievement-card { background: var(--surface); }
.profile-themes-card .appearance-accordion:target { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent); }
.profile-trophies-card { background: linear-gradient(125deg, color-mix(in srgb, var(--decorative-4) 11%, var(--surface)), color-mix(in srgb, var(--primary) 5%, var(--surface))); }
.profile-trophies-card .button { margin-top: 16px; }
.profile-achievement-card {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px;
    min-height: 76px; margin: 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--decorative-4) 44%, var(--border)); border-radius: 14px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--decorative-4) 9%, transparent); cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.profile-achievement-card:hover { border-color: color-mix(in srgb, var(--decorative-4) 68%, var(--border)); transform: translateY(-1px); }
.profile-achievement-card:has(input:checked) { border-color: color-mix(in srgb, var(--decorative-4) 80%, var(--primary)); box-shadow: 0 10px 25px color-mix(in srgb, var(--decorative-4) 15%, transparent); }
.profile-achievement-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent); outline-offset: 2px; }
.profile-achievement-card:has(input:disabled) { cursor: not-allowed; filter: saturate(.55); }
.profile-achievement-card:has(input:disabled):hover { transform: none; }
.profile-achievement-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--decorative-4) 48%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--decorative-4) 18%, var(--surface)); font-size: 24px; }
.profile-achievement-icon .noto-emoji-image { width: 27px; height: 27px; }
.profile-achievement-copy { display: grid; gap: 4px; min-width: 0; }
.profile-achievement-copy strong { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.25; }
.profile-achievement-copy small { color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; }
.profile-achievement-checkbox { display: grid; place-items: center; }
.profile-achievement-checkbox input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--decorative-4); cursor: pointer; }
.profile-achievement-checkbox input[type="checkbox"]:disabled { cursor: not-allowed; }
.profile-accent-field { margin-top: 8px; }
.appearance-choice-section { scroll-margin-top: 92px; }
.appearance-choice-section + .appearance-choice-section { margin-top: 11px; }
.appearance-accordion { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); outline: none; }
.appearance-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-radius: 12px; cursor: pointer; list-style: none; transition: color .16s ease, background .16s ease; }
.appearance-accordion > summary::-webkit-details-marker { display: none; }
.appearance-accordion > summary:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.appearance-accordion > summary:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.appearance-accordion[open] > summary { color: var(--primary); }
.appearance-choice-heading { display: grid; gap: 3px; min-width: 0; }
.appearance-choice-heading strong { color: inherit; font-size: 16px; }
.appearance-choice-heading small { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.appearance-accordion-chevron { flex: 0 0 auto; color: var(--text-secondary); font-size: 21px; font-weight: 850; line-height: 1; transition: transform .18s ease; }
.appearance-accordion[open] .appearance-accordion-chevron { transform: rotate(180deg); }
.appearance-accordion-content { padding: 2px 16px 16px; }
@container app-content (max-width: 900px) {
    .profile-layout { grid-template-columns: minmax(0, 1fr); }
}
@container app-content (max-width: 480px) {
    .profile-photo-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .profile-photo-action { width: 100%; }
    .profile-trophies-card .profile-achievement-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; padding: 12px; }
    .profile-trophies-card .profile-achievement-icon { width: 40px; height: 40px; }
}
.profile-privacy-card { overflow: hidden; background: linear-gradient(125deg, color-mix(in srgb, var(--primary) calc(var(--ui-accent-wash) + 3%), var(--surface)), color-mix(in srgb, var(--accent) var(--ui-accent-wash), var(--surface))); }
.profile-privacy-card > p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.profile-privacy-actions { align-items: center; margin-top: 22px; }
.profile-json-link { color: var(--primary); font-size: 13px; font-weight: 600; }
.profile-json-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.accent-choice-grid { display: grid; grid-template-columns: repeat(2, 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[data-theme-tooltip] { position: relative; }
.accent-choice[data-theme-tooltip]::after {
    content: attr(data-theme-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 30;
    width: max-content; max-width: min(280px, 82vw); padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); background: var(--surface); box-shadow: var(--shadow); font-size: 11px; font-weight: 650; line-height: 1.4;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .14s ease, transform .14s ease;
}
.accent-choice[data-theme-tooltip]:hover::after,
.accent-choice[data-theme-tooltip]:focus-within::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.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-choice-copy { display: grid; gap: 2px; }
.accent-choice-copy small { color: var(--text-secondary); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.accent-choice.is-unavailable { cursor: not-allowed; filter: grayscale(.78); background: color-mix(in srgb, var(--surface-secondary) 84%, var(--background)); }
.accent-choice.is-unavailable > * { opacity: .68; }
.accent-choice.is-unavailable:hover { border-color: var(--border); transform: none; }
.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-christmas .accent-swatch { background: linear-gradient(135deg, #9B3040 48%, #236247 52%); }
.accent-choice-christmas_frost .accent-swatch { background: linear-gradient(135deg, #DCEAF0 42%, #276786 43% 70%, #A8314B 71%); }
.accent-choice-halloween .accent-swatch { background: linear-gradient(135deg, #B94D10 48%, #6D35A8 52%); }
.accent-choice-halloween_moon .accent-swatch { background: linear-gradient(135deg, #14213B 42%, #D1A843 43% 69%, #B95718 70%); }
.accent-choice-carnival .accent-swatch { background: linear-gradient(135deg, #813D99 38%, #C7561D 39% 68%, #E2B72B 69%); }
.accent-choice-carnival_venetian .accent-swatch { background: linear-gradient(135deg, #120C22 38%, #7F356D 39% 68%, #D3AA3C 69%); }
.accent-choice-easter .accent-swatch { background: linear-gradient(135deg, #F2E8F4 38%, #A94871 39% 68%, #587A37 69%); }
.accent-choice-easter_garden .accent-swatch { background: linear-gradient(135deg, #F4E7A8 38%, #97483C 39% 68%, #47734A 69%); }
.accent-choice-monochrome .accent-swatch { background: linear-gradient(135deg, #111111 49%, #FFFFFF 50%); }
.accent-choice-blue_white .accent-swatch { background: linear-gradient(135deg, #173F63 45%, #FFFFFF 46% 70%, #4E91C7 71%); }
.accent-choice-terracotta_sand .accent-swatch { background: linear-gradient(135deg, #743927 45%, #F8F0E6 46% 70%, #335F6B 71%); }
.accent-choice-retro_95 .accent-swatch { border-radius: 1px; background: linear-gradient(135deg, #008080 45%, #C0C0C0 46% 70%, #000080 71%); }
.accent-choice-windows_xp .accent-swatch { border: 1px solid #0647AD; border-radius: 5px; background: linear-gradient(160deg, #65B9F3 0% 43%, #77BA30 44% 65%, #215DCF 66%); box-shadow: inset 0 2px 2px #FFFFFF99; }
.accent-choice-cyberpunk .accent-swatch { background: linear-gradient(135deg, #070513 40%, #C2188E 41% 68%, #00D7E8 69%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 0 10px rgba(0, 215, 232, .32); }
.accent-choice-medieval_fantasy .accent-swatch { background: linear-gradient(135deg, #3B403F 35%, #D9C28E 36% 68%, #7D302D 69% 84%, #A9843E 85%); box-shadow: inset 0 0 0 1px rgba(255, 248, 219, .45); }
.accent-choice-classroom .accent-swatch { background: linear-gradient(135deg, #234F43 0 44%, #FFFDF3 45% 72%, #D6A549 73% 88%, #B75A4C 89%); box-shadow: inset 0 0 0 1px rgba(42, 73, 62, .28); }

.platform-theme-section { margin-top: 34px; }
.platform-theme-form { display: grid; gap: 20px; }
.platform-theme-override { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-secondary)); }
.platform-theme-override > div { display: grid; gap: 4px; }
.platform-theme-override small { color: var(--text-secondary); }
.platform-theme-override input { width: auto; min-width: 42px; }
.platform-theme-window-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platform-theme-window-grid fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.platform-theme-window-grid legend { grid-column: 1 / -1; padding: 0 5px; font-weight: 850; }
.platform-theme-window-field { display: grid; align-content: start; gap: 5px; min-width: 0; }
.platform-theme-window-grid label { min-width: 0; color: var(--text-secondary); font-size: 11px; font-weight: 750; }
.platform-theme-window-grid input { min-width: 0; width: 100%; }
.platform-theme-window-grid .errorlist { margin: 0; }

.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: 600; }
.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: 600; }
.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: 600; }
.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: 600; }
.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; }
.bulletin-photo-column { width: 60px; min-width: 60px; padding-inline: 10px !important; text-align: center; }
.bulletin-list-student-photo { display: grid; place-items: center; width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px; max-height: 40px; aspect-ratio: 1; margin-inline: auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 10px; object-fit: cover; background: var(--surface-secondary); }
.bulletin-list-student-photo-fallback { color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); font-size: 11px; font-weight: 700; }
.bulletin-student-link { color: inherit; text-decoration: none; }
.bulletin-student-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.bulletin-student-link:focus-visible,
.bulletin-class-filter-link:focus-visible { border-radius: 6px; outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; }
.bulletin-class-filter-link { text-decoration: none; }
.bulletin-class-filter-link:hover { filter: brightness(.96); }
.bulletin-period-open { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 17%, transparent); }

.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); }
.role-dashboard-section { margin-top: 30px; }
.role-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dashboard-module { display: flex; min-width: 0; min-height: 290px; flex-direction: column; padding: 20px; overflow: hidden; }
.dashboard-module-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.dashboard-module-heading h3 { margin: 3px 0 0; font-size: 18px; }
.dashboard-module-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid color-mix(in srgb, var(--decorative-2) 46%, var(--border)); border-radius: 13px; color: color-mix(in srgb, var(--decorative-2) 72%, var(--text)); background: color-mix(in srgb, var(--decorative-2) 18%, var(--surface)); font-size: 20px; font-weight: 900; }
.dashboard-module-icon.is-pink { color: color-mix(in srgb, var(--decorative-3) 70%, var(--text)); border-color: color-mix(in srgb, var(--decorative-3) 48%, var(--border)); background: color-mix(in srgb, var(--decorative-3) 17%, var(--surface)); }
.dashboard-module-icon.is-gold { color: color-mix(in srgb, var(--decorative-4) 72%, var(--text)); border-color: color-mix(in srgb, var(--decorative-4) 55%, var(--border)); background: color-mix(in srgb, var(--decorative-4) 18%, var(--surface)); }
.dashboard-number-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 3px 0 17px; }
.dashboard-number-strip > span { min-width: 0; padding: 14px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); text-align: center; }
.dashboard-number-strip strong, .dashboard-number-strip small { display: block; }
.dashboard-number-strip strong { font-size: 23px; }
.dashboard-number-strip small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; line-height: 1.25; }
.dashboard-module-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); color: var(--primary); font-size: 13px; font-weight: 850; }
.dashboard-module-link span { font-size: 18px; transition: transform .16s ease; }
.dashboard-module-link:hover span { transform: translateX(3px); }
.dashboard-compact-list { display: grid; gap: 7px; margin-bottom: 15px; }
.dashboard-compact-list > a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 11px; color: var(--text); background: color-mix(in srgb, var(--primary) 5%, var(--surface-secondary)); }
.dashboard-compact-list > a:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface-secondary)); }
.dashboard-compact-list > a > span:nth-child(2), .dashboard-course-list > a > span:first-child, .dashboard-job-list > a > span:first-child { min-width: 0; flex: 1; }
.dashboard-compact-list strong, .dashboard-compact-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-compact-list strong { font-size: 13px; }
.dashboard-compact-list small { margin-top: 2px; color: var(--text-secondary); font-size: 10px; }
.dashboard-compact-list b { margin-left: auto; color: var(--primary); }
.dashboard-person-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 12px; font-weight: 600; }
.dashboard-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-module-empty { display: flex; align-items: center; gap: 9px; margin: 4px 0; padding: 13px; border-radius: 11px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 12px; }
.dashboard-module-empty > span { color: var(--success); font-weight: 900; }
.dashboard-check-list { display: grid; gap: 9px; }
.dashboard-check-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-secondary); }
.dashboard-check-list a:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.dashboard-check-list span { color: var(--text-secondary); font-size: 12px; }
.dashboard-check-list strong { display: grid; place-items: center; min-width: 30px; min-height: 30px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.dashboard-degree-list { display: grid; gap: 13px; margin-bottom: 15px; }
.dashboard-degree-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.dashboard-degree-list span:first-child strong, .dashboard-degree-list span:first-child small { display: block; }
.dashboard-degree-list span:first-child strong { color: var(--primary); font-size: 13px; }
.dashboard-degree-list span:first-child small { color: var(--text-secondary); font-size: 10px; }
.dashboard-degree-list > div > b { align-self: center; font-size: 14px; }
.dashboard-degree-track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-secondary); }
.dashboard-degree-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.dashboard-job-list .badge { flex: 0 0 auto; margin-left: auto; }
.direction-dashboard, .care-dashboard { margin-top: 28px; }
.direction-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr); gap: 14px; }
.direction-dashboard-feature { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 274px; padding: clamp(22px, 2.5vw, 32px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 20px; background: radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--decorative-2) 24%, transparent), transparent 44%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, var(--surface)), color-mix(in srgb, var(--decorative-2) 8%, var(--surface)) 72%); box-shadow: var(--shadow); }
.direction-dashboard-feature-top { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.direction-dashboard-spark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 15%, var(--surface)); font-size: 16px; }
.direction-dashboard-feature-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
.direction-dashboard-feature-copy { min-width: 0; max-width: 560px; }
.direction-dashboard-feature h3 { margin: 0; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(24px, 2.4vw, 35px); line-height: 1.1; }
.direction-dashboard-feature p { max-width: 540px; margin: 12px 0 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.direction-dashboard-feature-link, .care-dashboard-link { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-size: 13px; font-weight: 600; }
.direction-dashboard-feature-link:hover, .care-dashboard-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.direction-dashboard-ring { display: grid; place-items: center; flex: 0 0 138px; width: 138px; height: 138px; border-radius: 50%; background: conic-gradient(var(--primary) var(--direction-fill), color-mix(in srgb, var(--primary) 17%, var(--surface)) 0); box-shadow: 0 12px 25px color-mix(in srgb, var(--primary) 15%, transparent); }
.direction-dashboard-ring > span { display: grid; place-content: center; width: 107px; height: 107px; border-radius: 50%; background: var(--surface); text-align: center; }
.direction-dashboard-ring strong { color: var(--text); font-size: 25px; line-height: 1; }
.direction-dashboard-ring small { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.direction-dashboard-side { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.direction-dashboard-tile { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px; border: 1px solid color-mix(in srgb, var(--decorative-3) 30%, var(--border)); border-radius: 17px; color: var(--text); background: linear-gradient(130deg, color-mix(in srgb, var(--decorative-3) 14%, var(--surface)), var(--surface) 80%); box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; }
.direction-dashboard-tile.is-student { border-color: color-mix(in srgb, var(--decorative-2) 35%, var(--border)); background: linear-gradient(130deg, color-mix(in srgb, var(--decorative-2) 16%, var(--surface)), var(--surface) 80%); }
.direction-dashboard-tile:hover { transform: translateY(-2px); border-color: var(--primary); }
.direction-dashboard-tile-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 15px; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); font-size: 27px; }
.direction-dashboard-tile > span:last-child { display: grid; gap: 4px; min-width: 0; }
.direction-dashboard-tile small { color: var(--text-secondary); font-size: 11px; }
.direction-dashboard-tile strong { font-size: 18px; }
.direction-dashboard-tile em { margin-top: 5px; color: var(--primary); font-size: 12px; font-style: normal; font-weight: 600; }
.care-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 14px; }
.care-dashboard-grid > article { min-width: 0; padding: 22px; }
.care-dashboard-overview { border-color: color-mix(in srgb, var(--decorative-2) 32%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--decorative-2) 10%, var(--surface)), var(--surface) 70%); }
.care-dashboard-intro, .care-dashboard-latest-heading { display: flex; align-items: center; gap: 13px; }
.care-dashboard-symbol { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-size: 25px; }
.care-dashboard-symbol.is-pink { color: color-mix(in srgb, var(--decorative-3) 72%, var(--text)); background: color-mix(in srgb, var(--decorative-3) 16%, var(--surface)); }
.care-dashboard-intro strong, .care-dashboard-intro span:last-child { display: block; }
.care-dashboard-intro strong { font-size: 28px; line-height: 1; }
.care-dashboard-intro span:last-child { margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.care-dashboard-bars { display: grid; gap: 11px; margin: 21px 0 18px; }
.care-dashboard-bar { --care-bar: var(--decorative-2); }
.care-dashboard-bar.is-absence { --care-bar: var(--primary); }
.care-dashboard-bar.is-late { --care-bar: var(--decorative-4); }
.care-dashboard-bar.is-forgotten_material { --care-bar: var(--decorative-1); }
.care-dashboard-bar.is-pedagogical_remark { --care-bar: var(--decorative-2); }
.care-dashboard-bar.is-disciplinary_remark { --care-bar: var(--error); }
.care-dashboard-bar > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 12px; }
.care-dashboard-bar strong { color: var(--text); }
.care-dashboard-track { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--care-bar) 15%, var(--surface-secondary)); }
.care-dashboard-track > i { display: block; height: 100%; border-radius: inherit; background: var(--care-bar); }
.care-dashboard-latest { display: flex; flex-direction: column; border-color: color-mix(in srgb, var(--decorative-3) 30%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--decorative-3) 8%, var(--surface)), var(--surface) 72%); }
.care-dashboard-latest h3 { margin: 2px 0 0; font-size: 19px; }
.care-dashboard-fiche-list { display: grid; gap: 8px; margin-top: 19px; }
.care-dashboard-fiche { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.care-dashboard-fiche-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--decorative-2); }
.care-dashboard-fiche-dot.is-disciplinary_remark { background: var(--error); }
.care-dashboard-fiche > div { min-width: 0; }
.care-dashboard-fiche strong, .care-dashboard-fiche small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-dashboard-fiche strong { font-size: 13px; }
.care-dashboard-fiche small { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.care-dashboard-empty { margin: 0; padding: 17px; border-radius: 12px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 12px; }
@media (max-width: 1100px) {
    .direction-dashboard-grid, .care-dashboard-grid { grid-template-columns: 1fr; }
    .direction-dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}
@media (max-width: 680px) {
    .direction-dashboard-feature { min-height: 0; gap: 18px; }
    .direction-dashboard-feature-body { align-items: flex-start; flex-wrap: wrap; }
    .direction-dashboard-ring { flex-basis: 94px; width: 94px; height: 94px; }
    .direction-dashboard-ring > span { width: 73px; height: 73px; }
    .direction-dashboard-ring strong { font-size: 17px; }
    .direction-dashboard-ring small { font-size: 8px; }
    .direction-dashboard-side { grid-template-columns: 1fr; }
    .direction-dashboard-tile { padding: 15px; }
    .care-dashboard-grid > article { padding: 17px; }
}
.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; }
.self-assignment-settings-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 20px; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.self-assignment-settings-card.is-enabled { background: linear-gradient(125deg, color-mix(in srgb, var(--success) 11%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface))); border-color: color-mix(in srgb, var(--success) 44%, var(--border)); }
.self-assignment-settings-card h2 { margin: 4px 0 7px; }
.self-assignment-settings-card p { max-width: 850px; margin: 0 0 5px; color: var(--text-secondary); }
.self-assignment-settings-card form { flex: 0 0 auto; margin: 0; }
.disabled-action-tooltip { position: relative; display: inline-flex; }
.disabled-action-tooltip .button[aria-disabled="true"] { cursor: help; opacity: .5; }
.disabled-action-tooltip [role="tooltip"] { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 8; width: max-content; max-width: 280px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); box-shadow: var(--shadow); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; }
.disabled-action-tooltip:hover [role="tooltip"], .disabled-action-tooltip:focus-within [role="tooltip"], .disabled-action-tooltip.is-visible [role="tooltip"] { opacity: 1; transform: translateY(0); }
.self-assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
@container app-content (max-width: 1000px) {
    .self-assignment-grid { grid-template-columns: minmax(0, 1fr); }
    #class-results > .card-grid { grid-template-columns: minmax(0, 1fr); }
}
.self-assignment-result-section + .self-assignment-result-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.self-assignment-class-card { --assignment-color: var(--primary); min-height: 0; padding: 0; overflow: visible; background-clip: padding-box; border-color: color-mix(in srgb, var(--assignment-color) 48%, var(--border)); }
html[data-accent="violet_rose"] .self-assignment-class-card { --assignment-color: var(--decorative-1); }
html[data-accent="ocean"] .self-assignment-class-card { --assignment-color: var(--decorative-2); }
.self-assignment-class-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 13px 17px; list-style: none; cursor: pointer; border-radius: max(0px, calc(var(--radius) - 1px)); background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--assignment-color) 22%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--assignment-color) 20%, var(--surface)), var(--surface) 78%); }
.self-assignment-class-card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.self-assignment-class-card > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.self-assignment-class-card > summary::-webkit-details-marker { display: none; }
.self-assignment-class-card > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.self-assignment-class-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.self-assignment-class-card > summary .eyebrow { color: color-mix(in srgb, var(--assignment-color) 82%, var(--text)); }
.self-assignment-summary-meta { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); white-space: nowrap; }
.self-assignment-class-card[open] .accordion-chevron { transform: rotate(180deg); }
.self-assignment-card-body { padding: 14px; border-top: 1px solid color-mix(in srgb, var(--assignment-color) 42%, var(--border)); }
.self-assignment-class-card h2 { margin: 0; font-size: 19px; }
.self-assignment-course-list { display: grid; gap: 8px; margin-top: 8px; }
.self-assignment-choice { display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.self-assignment-choice:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.self-assignment-choice:has(input:disabled) { cursor: not-allowed; border-style: dashed; }
.self-assignment-choice:has(input:disabled):hover { transform: none; border-color: var(--border); }
.self-assignment-choice:has(input:checked) { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.self-assignment-choice input { flex: 0 0 auto; margin: 0; }
.self-assignment-choice span { display: flex; flex-direction: column; gap: 2px; }
.self-assignment-choice > .self-assignment-choice-main { flex: 1 1 auto; min-width: 0; }
.self-assignment-choice > .self-assignment-roster { position: relative; flex: 0 1 46%; align-items: flex-end; margin-left: auto; color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1.3; text-align: right; }
.self-assignment-choice > .self-assignment-roster.has-tooltip { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--text-secondary) 62%, transparent); text-underline-offset: 3px; }
.self-assignment-roster-tooltip { position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 60; display: grid !important; gap: 3px !important; width: max-content; max-width: min(300px, 72vw); padding: 9px 11px; visibility: hidden; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 10px; color: var(--text); background: var(--surface); box-shadow: 0 14px 34px rgba(10, 14, 25, .22); font-size: 12px; font-weight: 600; line-height: 1.4; opacity: 0; pointer-events: none; text-align: left; text-decoration: none; white-space: normal; }
.self-assignment-roster-tooltip::after { position: absolute; right: 18px; bottom: -6px; width: 10px; height: 10px; border-right: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-bottom: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); background: var(--surface); content: ""; transform: rotate(45deg); }
.self-assignment-roster-tooltip strong { margin-bottom: 2px; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.self-assignment-roster.has-tooltip:hover .self-assignment-roster-tooltip,
.self-assignment-roster.has-tooltip:focus .self-assignment-roster-tooltip,
.self-assignment-roster.has-tooltip:focus-within .self-assignment-roster-tooltip { visibility: visible; opacity: 1; }
.self-assignment-choice small { color: var(--text-secondary); font-weight: 500; }
.self-assignment-role-title { text-transform: uppercase; }
.self-assignment-homeroom + .self-assignment-homeroom { margin-top: 8px; }
.self-assignment-homeroom { flex: 0 0 auto; border-color: color-mix(in srgb, var(--assignment-color) 64%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--assignment-color) 28%, var(--surface)), color-mix(in srgb, var(--assignment-color) 15%, var(--surface-secondary))); box-shadow: inset 4px 0 0 var(--assignment-color); }
.self-assignment-homeroom:hover { border-color: var(--assignment-color); background: linear-gradient(120deg, color-mix(in srgb, var(--assignment-color) 35%, var(--surface)), color-mix(in srgb, var(--assignment-color) 20%, var(--surface-secondary))); }
.self-assignment-homeroom:has(input:checked) { border-color: color-mix(in srgb, var(--success) 62%, var(--assignment-color)); background: linear-gradient(120deg, color-mix(in srgb, var(--success) 24%, var(--surface)), color-mix(in srgb, var(--assignment-color) 18%, var(--surface-secondary))); }
.self-assignment-page-header { margin-bottom: 12px; }
.self-assignment-search { max-width: 860px; margin-bottom: 14px; }
.self-assignment-search input { min-width: min(100%, 420px); }
.sticky-form-actions { position: sticky; z-index: 5; bottom: 16px; display: flex; justify-content: center; margin: 24px auto 0; padding: 12px; width: fit-content; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 15px 38px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.achievement-page { position: relative; }
.achievement-hero { padding: 25px 28px; border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border)); border-radius: var(--radius); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 13%, transparent); }
.achievement-hero h1 { margin-bottom: 6px; }
.achievement-hero-actions { display: flex; align-items: center; gap: 12px; }
.achievement-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.achievement-filters input { flex: 1 1 260px; max-width: 380px; }
.achievement-filters select { flex: 0 1 250px; }
.achievement-show-more { display: flex; margin: 18px auto 0; }
.achievement-level { display: grid; min-width: 175px; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 78%, transparent); text-align: center; }
.achievement-level span, .achievement-level small { color: var(--text-secondary); }
.achievement-level strong { font-size: 31px; color: var(--primary); }
.career-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0 28px; }
.career-stat-grid article { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 2px 12px; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.career-stat-grid article > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-size: 19px; }
.career-stat-grid strong { font-size: 23px; }
.career-stat-grid small { color: var(--text-secondary); }
.achievement-section { margin-top: 26px; }
.achievement-reset-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.achievement-reset-card h2 { margin: 3px 0 5px; }
.achievement-reset-card p { margin: 0; color: var(--text-secondary); }
.achievement-reset-card form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 7px 10px; min-width: min(100%, 470px); }
.achievement-reset-card form label { grid-column: 1 / -1; margin: 0; }
.achievement-category + .achievement-category { margin-top: 22px; }
.achievement-category-title { margin: 0 0 12px; color: var(--text-secondary); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.achievement-card { position: relative; display: flex; gap: 15px; min-height: 180px; padding: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.achievement-card.is-unlocked:hover { transform: translateY(-4px); box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 14%, transparent); }
.achievement-card.is-locked { filter: grayscale(.75); opacity: .56; }
.achievement-card.tone-violet { --achievement-color: var(--decorative-1); }
.achievement-card.tone-amber { --achievement-color: var(--decorative-4); }
.achievement-card.tone-green { --achievement-color: var(--decorative-5); }
.achievement-card.tone-rose { --achievement-color: var(--decorative-3); }
.achievement-card.tone-blue { --achievement-color: var(--decorative-2); }
.achievement-card.is-unlocked { border-color: color-mix(in srgb, var(--achievement-color) 52%, var(--border)); background: linear-gradient(140deg, color-mix(in srgb, var(--achievement-color) 14%, var(--surface)), var(--surface)); }
.achievement-illustration { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; border-radius: 18px; background: color-mix(in srgb, var(--achievement-color, var(--primary)) 18%, var(--surface-secondary)); font-size: 32px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--achievement-color, var(--primary)) 30%, transparent); }
.achievement-card h3 { margin: 7px 0 6px; font-size: 18px; }
.achievement-card p { margin: 0 0 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.achievement-card small { color: var(--achievement-color, var(--primary)); font-weight: 600; }
.achievement-status { color: var(--achievement-color, var(--primary)); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.achievement-copy { position: relative; flex: 1; min-width: 0; padding-bottom: 35px; }
.achievement-points { position: absolute; top: 0; right: 0; padding: 4px 7px; border-radius: 999px; color: var(--achievement-color, var(--primary)); background: color-mix(in srgb, var(--achievement-color, var(--primary)) 14%, var(--surface)); font-size: 11px; font-weight: 600; }
.achievement-edit-link { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--achievement-color, var(--primary)) 30%, var(--border)); border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--achievement-color, var(--primary)) 9%, var(--surface)); font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.achievement-edit-link:hover { border-color: color-mix(in srgb, var(--achievement-color, var(--primary)) 58%, var(--border)); color: var(--achievement-color, var(--primary)); background: color-mix(in srgb, var(--achievement-color, var(--primary)) 16%, var(--surface)); transform: translateY(-1px); }
.colleague-leaderboard { margin-top: 28px; }
.leaderboard-list { display: grid; gap: 8px; }
.leaderboard-row { display: grid; grid-template-columns: 48px 46px minmax(180px, 1fr) repeat(2, minmax(90px, auto)); align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-secondary); }
.leaderboard-row.is-current { border-color: color-mix(in srgb, var(--primary) 52%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.leaderboard-row.rank-1 { border-color: color-mix(in srgb, #d9a62e 58%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, #d9a62e 13%, var(--surface)), var(--surface-secondary)); }
.leaderboard-row.rank-2 { border-color: color-mix(in srgb, #aeb7c2 58%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, #c3ccd6 12%, var(--surface)), var(--surface-secondary)); }
.leaderboard-row.rank-3 { border-color: color-mix(in srgb, #b87333 55%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, #b87333 12%, var(--surface)), var(--surface-secondary)); }
.leaderboard-position { color: var(--primary); font-size: 17px; }
.leaderboard-avatar { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 40px; width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px; max-height: 40px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--primary) 56%, var(--border)); border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); font-weight: 600; transition: transform .18s ease, box-shadow .18s ease; }
.leaderboard-avatar img { display: block; width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px; max-height: 40px; border-radius: 50%; object-fit: cover; }
.leaderboard-avatar:has(img):hover, .leaderboard-avatar:has(img):focus { z-index: 8; transform: scale(2.35); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.leaderboard-name { display: flex; flex-direction: column; }
.leaderboard-name small, .leaderboard-row > span:not(.leaderboard-name):not(.leaderboard-avatar) small { display: block; color: var(--text-secondary); }
.achievement-toast { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--decorative-4) 56%, var(--border)); border-radius: 13px; background: linear-gradient(120deg, color-mix(in srgb, var(--decorative-4) 18%, var(--surface)), color-mix(in srgb, var(--primary) 9%, var(--surface))); box-shadow: 0 13px 30px color-mix(in srgb, var(--decorative-4) 14%, transparent); }
.achievement-toast > span { font-size: 30px; }
.achievement-toast > div { display: flex; flex: 1; flex-direction: column; }
.achievement-toast small { color: var(--text-secondary); }
.achievement-toast a { color: var(--primary); font-weight: 600; }
.achievement-notification-stack { position: fixed; z-index: 1200; top: 22px; right: 22px; display: grid; gap: 12px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.achievement-notification { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 15px 17px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--decorative-4) 62%, var(--border)); border-radius: 15px; color: var(--text); background: linear-gradient(120deg, color-mix(in srgb, var(--decorative-4) 24%, var(--surface)), color-mix(in srgb, var(--primary) 13%, var(--surface))); box-shadow: 0 22px 52px rgba(10, 14, 25, .26); animation: achievement-notification-in .38s cubic-bezier(.2,.8,.2,1) both; pointer-events: none; }
.achievement-notification::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--decorative-4), var(--primary)); transform-origin: left; animation: achievement-notification-progress var(--achievement-notification-duration, 8s) linear both; }
.achievement-notification-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: color-mix(in srgb, var(--decorative-4) 20%, var(--surface)); font-size: 29px; }
.achievement-notification > span:last-child { display: grid; gap: 2px; }
.achievement-notification small { color: var(--text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.achievement-notification strong { font-size: 16px; }
.achievement-notification b { color: color-mix(in srgb, #d98a16 78%, var(--text)); font-size: 12px; }
.achievement-notification-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
.achievement-notification em { color: var(--primary); font-size: 12px; font-style: normal; font-weight: 600; }
.achievement-notification.is-leaving { animation: achievement-notification-out .4s ease both; }
@keyframes achievement-notification-in { from { opacity: 0; transform: translateX(42px) scale(.96); } }
@keyframes achievement-notification-out { to { opacity: 0; transform: translateX(46px) scale(.96); } }
@keyframes achievement-notification-progress { to { transform: scaleX(0); } }
.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; }
.progression-period-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(100%, 360px); margin-bottom: 22px; }
.progression-period-filter select { min-width: 0; }
.progression-current-period { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 22px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 10px; color: var(--text-secondary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.progression-current-period strong { color: var(--primary); }
.progression-ready-total { align-self: center; padding: 10px 14px; font-size: 14px; }
.progression-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.progression-card { display: flex; flex-direction: column; gap: 17px; min-width: 0; border-color: color-mix(in srgb, var(--primary) 26%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 11%, transparent), transparent 34%), var(--surface); }
.progression-card.is-ready { border-color: color-mix(in srgb, var(--success) 52%, var(--border)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--success) 78%, transparent), var(--shadow); }
.progression-card-header, .progression-course-summary > div:first-child, .progression-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.progression-card-header h2 { margin: 3px 0 0; }
.progression-status-badge { --progression-state-color: var(--warning); border: 1px solid color-mix(in srgb, var(--progression-state-color) 48%, var(--border)); color: color-mix(in srgb, var(--progression-state-color) 72%, var(--text)); background: color-mix(in srgb, var(--progression-state-color) 20%, var(--surface)); box-shadow: 0 4px 12px color-mix(in srgb, var(--progression-state-color) 13%, transparent); font-weight: 700; }
.progression-status-badge.is-ready { --progression-state-color: var(--decorative-5); }
.progression-course-summary { display: grid; gap: 9px; }
.progression-course-summary > div:first-child span { color: var(--text-secondary); font-size: 13px; font-weight: 800; }
.progression-course-summary .progress { height: 8px; }
.progression-homeroom-state { --progression-state-color: var(--warning); display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--progression-state-color) 44%, var(--border)); border-radius: 12px; background: linear-gradient(100deg, color-mix(in srgb, var(--progression-state-color) 21%, var(--surface)), color-mix(in srgb, var(--progression-state-color) 7%, var(--surface-secondary)) 48%, color-mix(in srgb, var(--progression-state-color) 16%, var(--surface)) 68%, var(--surface-secondary)); background-size: 190% 100%; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--progression-state-color) 72%, transparent); }
.progression-homeroom-state:not(.is-complete) { animation: progression-pending-sweep 4.8s ease-in-out infinite alternate; }
@keyframes progression-pending-sweep { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
.progression-homeroom-state > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: color-mix(in srgb, var(--progression-state-color) 76%, var(--text)); background: color-mix(in srgb, var(--progression-state-color) 16%, var(--surface)); font-weight: 900; }
.progression-homeroom-state div { display: grid; gap: 2px; }
.progression-homeroom-state small { color: var(--text-secondary); }
.progression-homeroom-state.is-complete { --progression-state-color: var(--decorative-5); background: linear-gradient(100deg, color-mix(in srgb, var(--progression-state-color) 18%, var(--surface)), color-mix(in srgb, var(--progression-state-color) 7%, var(--surface-secondary))); }
.progression-homeroom-state.is-complete > span { color: white; background: var(--progression-state-color); }
@media (prefers-reduced-motion: reduce) {
    .progression-homeroom-state:not(.is-complete) { animation: none; }
}
.progression-course-details { border-top: 1px solid var(--border); }
.progression-course-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 0; cursor: pointer; font-weight: 600; }
.progression-course-details summary::-webkit-details-marker { display: none; }
.progression-course-details[open] summary span { transform: rotate(180deg); }
.progression-course-details ul { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.progression-course-details li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; background: var(--surface-secondary); }
.progression-course-details li > span:first-child { color: var(--text-secondary); font-weight: 900; }
.progression-course-details li small { color: var(--text-secondary); }
.progression-course-details li.is-complete > span:first-child, .progression-course-details li.is-complete small { color: var(--success); }
.progression-course-details li.is-empty { display: block; color: var(--text-secondary); }
.progression-card-footer { min-height: 40px; margin-top: auto; }
.progression-card-footer small { color: var(--text-secondary); }
.progression-show-more { display: flex; 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: 600; }
.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: #fff; background: #078447; border-color: #078447; }
.badge-period-closed { color: #fff; background: #C93645; border-color: #C93645; }
.period-toggle-button { min-width: 96px; border: 0; }
.period-toggle-button.is-closed { color: #fff; background: #078447; }
.period-toggle-button.is-open { color: #fff; background: #c94c5c; }
.period-toggle-button:hover { filter: saturate(1.12) brightness(.98); }
.period-card .management-card-footer { flex-wrap: wrap; }
.period-card-state-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.period-card .management-card-actions { margin-left: auto; }
.period-card.is-completed { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); }
.actions-column { width: 78px; }

.encoding-student-list { display: flex; flex-direction: column; gap: 18px; }
.encoding-student-card { padding: 0; overflow: hidden; border-top: 3px solid color-mix(in srgb, var(--primary) 58%, var(--accent)); }
.encoding-student-header { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 790px); 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-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.encoding-student-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.encoding-student-identity > div { min-width: 0; }
.encoding-student-identity > div > .eyebrow,
.encoding-special-student-header > .eyebrow { font-size: 12px; }
.encoding-student-identity h2 { margin: 4px 0 0; font-size: 20px; }
.encoding-student-photo { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 15px; object-fit: cover; background: var(--surface); }
.encoding-student-photo[data-photo-preview] { cursor: zoom-in; outline: none; }
.encoding-student-photo[data-photo-preview]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.encoding-student-photo-fallback { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 13px; font-weight: 600; }
.encoding-decision-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; justify-self: end; gap: 12px; width: 100%; max-width: 790px; }
.encoding-decision-grid > .encoding-decision-control { flex: 1 1 180px; }
@media (min-width: 1300px) {
    .encoding-decision-grid > .encoding-decision-control:only-child { flex: 0 1 320px; }
}
.encoding-decision-grid > .external-evaluation-control { flex: 0 0 auto; max-width: 100%; }
.external-evaluation-control .score-input-control { width: 100px; margin: 0; }
.encoding-decision-grid .external-evaluation-control input[type="number"] { width: 100px; max-width: 100%; min-height: 40px; padding-right: 29px; appearance: textfield; -moz-appearance: textfield; }
.external-evaluation-control input::-webkit-inner-spin-button, .external-evaluation-control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.external-evaluation-control label { white-space: nowrap; }
.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; }
@media (min-width: 1901px) {
    .encoding-student-body { grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); }
}
.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; }
.competency-entry-table .score-cell > .save-indicator { display: flex; justify-content: center; min-height: 16px; line-height: 16px; text-align: center; }
.score-input-control { position: relative; width: 104px; max-width: 100%; margin: 0 auto; }
.score-input-control input[data-score-input] { font-weight: 400; }
.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 form { position: relative; margin: 0; }
.encoding-appreciation textarea { min-height: 142px; padding-right: 54px; }
.encoding-appreciation .comment-preset-picker { position: absolute; top: 8px; right: 8px; z-index: 3; }
.comment-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comment-editor-heading h2, .comment-editor-heading label { margin-bottom: 8px; }
.encoding-history-periods { display: grid; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.encoding-history-periods > span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.encoding-history-periods > div { display: flex; flex-wrap: wrap; gap: 7px; }
.encoding-history-periods .button { min-width: 52px; }
.encoding-history-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; color: var(--text); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.encoding-history-dialog::backdrop { background: rgba(10,14,25,.62); backdrop-filter: blur(3px); }
.encoding-history-dialog-body > p { display: grid; place-items: center; min-height: 120px; margin: 0; padding: 28px; color: var(--text-secondary); text-align: center; }
.encoding-history-dialog-body > .alert { margin: 28px; }
.encoding-history-dialog-content { position: relative; display: grid; gap: 18px; padding: 28px; }
.encoding-history-dialog-content h2 { margin: 3px 44px 0 0; }
.encoding-history-dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 11px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 23px; cursor: pointer; }
.encoding-history-dialog-close:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 42%, var(--border)); }
.encoding-history-status, .encoding-history-global-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.encoding-history-status > span, .encoding-history-global-result > span { color: var(--text-secondary); font-weight: 600; }
.encoding-history-results-wrap { box-shadow: none; }
.encoding-history-results th:last-child, .encoding-history-results td:last-child { text-align: right; }
.encoding-history-comment { padding: 15px 17px; border-left: 4px solid var(--primary); border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-secondary)); }
.encoding-history-comment h3 { margin: 0 0 7px; font-size: 14px; }
.encoding-history-comment p { margin: 0; color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap; }
.encoding-history-empty { margin: 0; }
.comment-preset-picker { position: relative; flex: 0 0 auto; }
.comment-outline-icon { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; vertical-align: middle; color: var(--primary); }
.comment-outline-icon > path { fill: color-mix(in srgb, var(--accent) 24%, var(--surface)); stroke: var(--primary); }
.comment-outline-icon circle { fill: var(--primary); }
.comment-outline-icon circle:nth-child(2) { fill: var(--accent); }
.teacher-tool-icon .comment-outline-icon { width: 28px; height: 28px; }
.comment-preset-picker summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border)); border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); cursor: pointer; list-style: none; transition: .18s ease; }
.comment-preset-picker summary::-webkit-details-marker { display: none; }
.comment-preset-picker summary:hover, .comment-preset-picker[open] summary { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 16%, transparent); }
.comment-preset-menu { position: absolute; z-index: 45; top: calc(100% + 8px); right: 0; width: min(330px, 78vw); max-height: 310px; overflow-y: auto; padding: 9px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.comment-preset-menu > strong { display: block; padding: 7px 9px 9px; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.comment-preset-menu button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px; border: 0; border-radius: 9px; color: var(--text); background: transparent; text-align: left; }
.comment-preset-menu button:hover { color: var(--primary); background: var(--primary-soft); }
.comment-preset-menu button small { color: var(--text-secondary); line-height: 1.35; }
.comment-preset-empty { margin: 2px 8px 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.comment-preset-manage-link { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 5px; padding: 8px 10px; border-top: 1px solid var(--border); border-radius: 8px; color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.comment-preset-manage-link:hover { background: var(--primary-soft); text-decoration: none; }
.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); }

.mobile-app-header { display: none; }
.sidebar-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.sidebar-toggle-icon { display: block; width: 18px; height: 14px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
.mobile-brand { display: none; }
.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: 600; font-size: 1.35rem; }
.platform-school-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.platform-school-card { position: relative; display: flex; flex-direction: column; gap: 20px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.platform-school-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 13%, transparent); }
.platform-school-cover { position: absolute; z-index: 1; inset: 0; margin: 0; }
.platform-school-cover button { width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.platform-school-cover button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 48%, transparent); outline-offset: 3px; }
.platform-school-card > header, .platform-school-card > .platform-school-stats { position: relative; z-index: 2; pointer-events: none; }
.platform-school-card > footer { position: relative; z-index: 3; }
.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: center; justify-content: flex-end; flex-flow: row nowrap; gap: 6px; white-space: nowrap; }
.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); }
.user-preview-result { width: 100%; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.user-preview-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.user-preview-banner { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 8px 18px; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); background: linear-gradient(105deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), color-mix(in srgb, var(--accent) 17%, var(--surface))); box-shadow: var(--shadow); }
.user-preview-banner > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.user-preview-banner small { color: var(--text-secondary); }
.user-preview-banner form { margin-left: 8px; }
body.is-user-preview { padding-top: 58px; }
body.is-user-preview .mobile-app-header { top: 58px; }
@media (max-width: 680px) {
    .user-preview-banner { justify-content: flex-start; min-height: 70px; padding-inline: 12px; }
    .user-preview-banner > span:first-child { display: none; }
    .user-preview-banner form { margin-left: auto; }
    .user-preview-banner small { display: none; }
    body.is-user-preview { padding-top: 70px; }
    body.is-user-preview .mobile-app-header { top: 70px; }
}
.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: color-mix(in srgb, var(--warning) 82%, var(--text)); font-weight: 600; }
.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)); align-items: start; gap: 12px; }
.free-grading-control { display: grid; grid-template-columns: auto minmax(104px, 1fr); grid-template-rows: auto minmax(14px, auto); align-content: start; align-items: center; column-gap: 12px; row-gap: 6px; min-width: 0; }
.free-grading-control-label { grid-column: 1; grid-row: 1; color: var(--text-secondary); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.free-grading-control form { grid-column: 2; grid-row: 1; justify-self: start; width: 100%; max-width: 200px; margin: 0; }
.free-grading-control > .save-indicator { grid-column: 2; grid-row: 2; justify-self: start; justify-content: center; width: 100%; max-width: 200px; min-height: 16px; line-height: 16px; text-align: center; }
.free-grading-control select { min-width: 0; }

.auth-body { background: #f6f3fc; }
.login-page { --background: #f6f3fc; --surface: #fff; --surface-secondary: #f8f6fc; --text: #171326; --text-secondary: #716a7e; --border: #e3dced; --primary: #7137ed; --primary-hover: #6226db; --primary-soft: #f0e9ff; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(550px, .94fr) minmax(540px, 1.06fr); min-height: 100vh; overflow: hidden; color: var(--text); background: linear-gradient(135deg, #f8f3ff 0%, #f8f6ff 48%, #effbff 100%); }
.login-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.login-ambient span { position: absolute; border-radius: 50%; filter: blur(105px); opacity: .58; }
.login-ambient span:nth-child(1) { top: -18%; left: -10%; width: 46vw; height: 46vw; background: #e889ca; }
.login-ambient span:nth-child(2) { right: -14%; bottom: -22%; width: 51vw; height: 51vw; background: #8adcec; }
.login-ambient span:nth-child(3) { top: 24%; left: 38%; width: 38vw; height: 38vw; background: #c5a7ff; opacity: .2; }
.login-showcase { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: clamp(42px, 6vw, 100px); }
.login-showcase::before { position: absolute; inset: 9% 8%; opacity: .3; background-image: radial-gradient(circle, rgba(113,55,237,.22) 1px, transparent 1.5px); background-size: 28px 28px; mask-image: radial-gradient(ellipse, black, transparent 72%); content: ""; }
.login-illustration-halo { position: absolute; width: min(700px, 78%); aspect-ratio: 1.1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.38) 46%, transparent 72%); filter: blur(16px); }
.login-illustration { position: relative; z-index: 1; display: block; width: min(760px, 100%); max-height: 78vh; object-fit: contain; filter: drop-shadow(0 35px 50px rgba(54,31,99,.2)); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4.5vw, 72px); }
.login-panel-inner { width: min(550px, 100%); padding: clamp(32px, 4vw, 56px); border: 1px solid rgba(113,55,237,.13); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 32px 90px rgba(56,35,99,.17); backdrop-filter: blur(18px); }
.login-panel .brand { padding: 0; }
.login-panel .brand-mark { width: 49px; height: 49px; }
.login-panel .brand strong { font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: 29px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.login-panel .brand small { margin-top: 4px; color: #716a7e; font-size: 11px; }
.login-form { width: 100%; margin-top: 48px; }
.login-form .eyebrow { color: #7137ed; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.login-form h1 { margin: 13px 0 10px; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(2.35rem, 3.5vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.login-form > p { margin: 0 0 30px; color: #716a7e; font-size: 14px; line-height: 1.6; }
.login-form form > div { margin-bottom: 19px; }
.login-form form label { margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.login-form input:not([type="checkbox"]):not([type="radio"]) { min-height: 52px; padding: 12px 14px; border-color: #ddd5e9; border-radius: 13px; background: #fbfaff; }
.login-form input:focus { border-color: #7137ed; background: white; box-shadow: 0 0 0 4px rgba(113,55,237,.12); }
.login-form form .button { width: 100%; min-height: 52px; margin-top: 5px; border-radius: 999px; background: linear-gradient(110deg, #7137ed, #8f3ee7 60%, #df36a2); box-shadow: 0 15px 32px rgba(113,55,237,.23); font-weight: 600; }
.login-form form .button:hover { background: linear-gradient(110deg, #6326df, #8231db 60%, #ce258f); box-shadow: 0 18px 36px rgba(113,55,237,.3); transform: translateY(-1px); }
.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-form-links { display: flex; justify-content: center; gap: 16px; margin-top: 20px; font-size: 12px; font-weight: 700; }
.login-form-links a { color: #665e73; }
.login-form-links a:hover { color: var(--primary); }
.required-marker { color: var(--error); font-weight: 850; }
.login-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ece6f2; color: #8a8294; font-size: 10px; font-weight: 600; }
.login-panel-footer a { color: #7137ed; font-weight: 600; }
@media (max-width: 1120px) {
    .login-page { grid-template-columns: 1fr; }
    .login-showcase { display: none; }
    .login-panel { min-height: 100vh; padding: 34px; }
    .login-panel-inner { width: min(500px, 100%); }
}
@media (max-width: 560px) {
    .login-panel { align-items: stretch; padding: 0; }
    .login-panel-inner { width: 100%; min-height: 100vh; padding: 32px 22px; border: 0; border-radius: 0; background: rgba(255,255,255,.89); box-shadow: none; }
    .login-form { margin-top: clamp(55px, 12vh, 90px); }
    .login-form h1 { font-size: 2.5rem; }
    .login-panel-footer { margin-top: 38px; }
}

.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-footer-links { display: flex; align-items: center; gap: 18px; }
.landing-footer-links a { 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; }
}

/* Leave enough room for competency labels before moving comments below. */
@media (max-width: 1350px) {
    .encoding-student-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1050px) {
    .user-edit-layout { grid-template-columns: 1fr; }
    .user-assignments-card { position: static; }
    .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-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)); }
    .role-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-dashboard-grid > :last-child { grid-column: 1 / -1; }
    .dashboard-idle-grid, .dashboard-idle-grid.is-teacher { grid-template-columns: 1fr; }
    .dashboard-idle-grid.is-teacher { grid-template-areas: "hero" "suggestions" "trophies"; grid-template-rows: auto; }
    .dashboard-idle-hero { min-height: 0; }
    .dashboard-admin-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-setup-roadmap > li { grid-template-columns: 44px minmax(0, 1fr); }
    .dashboard-setup-stage { grid-column: 2; }
}
@media (max-width: 780px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar-size-toggle { display: none; }
    .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); }
    .mobile-app-header { position: fixed; inset: 0 0 auto; z-index: 19; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; min-height: 70px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 8%, transparent); }
    .sidebar-toggle { display: grid; grid-column: 1; place-items: center; }
    .mobile-brand { grid-column: 2; display: flex; align-items: center; justify-self: center; gap: 9px; min-height: 42px; color: var(--text); text-decoration: none; }
    .mobile-brand .brand-mark { width: 36px; height: 36px; }
    .mobile-brand strong { font-size: 18px; letter-spacing: -.3px; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(17, 24, 39, .48); }
    .main-content { padding: 88px 16px 0; }
    .app-footer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; min-height: 0; margin-top: 42px; padding: 26px 0 30px; }
    .app-footer-brand { justify-self: start; }
    .app-footer-brand .brand-mark { width: 32px; height: 32px; }
    .app-footer-brand strong { font-size: 16px; }
    .app-footer-copyright { grid-column: 1 / -1; grid-row: 2; }
    .app-footer-credit { grid-column: 2; grid-row: 1; }
    .page-header { align-items: flex-start; flex-direction: column; text-align: left; }
    .page-header > .eyebrow,
    .page-header > div > .eyebrow { display: none; }
    .encoding-course-page-header { align-items: flex-start; }
    .encoding-course-page-header > *,
    .encoding-change-course { align-self: flex-start; text-align: left; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { min-height: 82px; gap: 9px; padding: 12px; }
    .stat-card .stat-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
    .stat-card > span:last-child { min-width: 0; }
    .stat-card strong { font-size: 21px; letter-spacing: -.35px; }
    .stat-card small { display: block; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
    .role-dashboard-grid { grid-template-columns: 1fr; }
    .role-dashboard-grid > :last-child { grid-column: auto; }
    .dashboard-teacher-home { margin-top: 22px; }
    .dashboard-tool-showcase { padding: 20px; }
    .dashboard-tool-showcase-header { align-items: flex-start; flex-direction: column; gap: 15px; }
    .dashboard-tool-showcase-grid { grid-template-columns: 1fr; gap: 9px; }
    .dashboard-tool-showcase-item { min-height: 82px; padding: 12px; }
    .dashboard-setup-guide { padding: 19px; }
    .dashboard-setup-guide-header { align-items: flex-start; flex-direction: column; }
    .dashboard-setup-guide-heading > span { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 21px; }
    .dashboard-setup-guide-heading h2 { font-size: 23px; }
    .dashboard-setup-guide-header > form { align-self: flex-start; }
    .dashboard-setup-roadmap > li { gap: 12px; padding: 17px 0; }
    .dashboard-setup-stage { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .dashboard-setup-stage-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
    .dashboard-setup-guide-return { align-items: flex-start; flex-direction: column; }
    .dashboard-module { min-height: 0; }
    .attendance-student-layout, .attendance-student-details { grid-template-columns: 1fr; }
    .attendance-student-photo-card { width: 100%; max-width: 420px; }
    .dashboard-timeline { padding: 0 0 20px; }
    .dashboard-timeline-chart { padding-top: 10px; }
    .dashboard-timeline-label { bottom: 18px; }
    .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; width: 100%; 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; }
    .dashboard-idle-hero { padding: 22px 18px; }
    .dashboard-idle-hero-topline { align-items: flex-start; flex-direction: column-reverse; gap: 18px; }
    .dashboard-idle-identity { max-width: 100%; }
    .dashboard-idle-hero-copy { margin-top: 30px; }
    .dashboard-idle-hero h2 { font-size: clamp(30px, 9vw, 40px); }
    .dashboard-idle-hero-tools, .dashboard-idle-class-list { grid-template-columns: 1fr; }
    .dashboard-idle-hero-tools { grid-auto-rows: minmax(108px, auto); gap: 11px; }
    .dashboard-idle-hero .dashboard-idle-tool { grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 12px; min-height: 108px; padding: 14px; }
    .dashboard-idle-hero .dashboard-idle-tool > span { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
    .dashboard-idle-hero .dashboard-idle-tool strong { font-size: 13px; }
    .dashboard-idle-hero .dashboard-idle-tool small { font-size: 10px; }
    .dashboard-idle-hero .dashboard-idle-tool > i { width: 30px; height: 30px; }
    .dashboard-admin-actions { grid-template-columns: 1fr; gap: 12px; }
    .dashboard-admin-actions .dashboard-idle-tool { min-height: 108px; padding: 14px; }
    .dashboard-admin-actions .dashboard-idle-tool > span { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
    .dashboard-admin-actions .dashboard-idle-tool { grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 12px; }
    .dashboard-admin-actions .dashboard-idle-tool > i { width: 30px; height: 30px; }
    .dashboard-idle-management-links { grid-template-columns: repeat(2, minmax(0, 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-selector { justify-content: flex-start; }
    .student-summary-selector label { grid-column: 1 / -1; }
    .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: 500px;
    margin: 22px 0 10px;
    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.1rem, 5.5vw, 6.4rem);
    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: 1 / -1; }
.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-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: 440px; padding: 27px 20px; }
    .landing-bento-reordered .landing-bento-top-cta .landing-bento-kicker { font-size: 10px; }
    .landing-bento-reordered .landing-bento-top-cta h1 { margin: 18px 0 14px; font-size: clamp(2rem, 9.5vw, 2.75rem); line-height: .93; }
    .landing-bento-reordered .landing-bento-top-cta > p { margin-bottom: 18px; font-size: 14px; line-height: 1.4; }
    .landing-bento-reordered .landing-bento-top-cta .landing-bento-primary { min-height: 48px; padding: 11px 17px; }
    .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; }
    .landing-bento-orb { 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 { --council-table-budget: calc(100dvh - 320px); display: flex; flex-direction: column; gap: 12px; }
.main-content:has(.class-council-view) > .app-footer { min-height: 48px; margin-top: 16px; }
.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: 600; 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; align-content: start; align-self: start; gap: 14px; padding: 14px; }
.council-student-picker-navigation { display: grid !important; grid-template-columns: max-content minmax(190px, 280px); align-items: center; justify-content: center; gap: 12px; }
.council-student-picker-label { display: grid; gap: 2px; text-align: right; }
.council-student-picker-label > span { color: var(--primary); font-size: 11px; font-weight: 650; }
.council-student-picker-label > strong { font-size: 12px; white-space: nowrap; }
.council-student-picker { min-width: 190px; max-width: 280px; height: 38px; margin: 0; font-weight: 400; }
.council-student-picker option { font-weight: 400; }
.council-student-first-name { color: var(--primary); }
.council-keyboard-hint { grid-column: 1 / -1; order: 99; margin: 0; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); color: var(--text-secondary); font-size: 10px; text-align: center; }
.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: 600; }
.council-student-information h1 { margin: 0 0 16px; font-size: clamp(22px, 2vw, 30px); font-weight: 850; line-height: 1.1; letter-spacing: -.6px; overflow-wrap: anywhere; }
.council-student-information dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.council-student-information dl div { min-width: 0; }
.council-student-information dt { color: var(--text-secondary); font-size: 10.5px; font-weight: 650; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.council-student-information dd { margin: 4px 0 0; font-size: 16px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.council-student-information .council-attendance-fact { grid-row: 2; padding-top: 12px; border-top: 1px solid var(--border); }

.class-council-results-card { display: flex; align-self: start; 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: 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: 600; }
.class-council-results-table { width: 100%; min-height: 0; border-collapse: collapse; table-layout: fixed; font-size: clamp(12px, min(.85vw, 1.55dvh), 14px); }
.class-council-results-table th:first-child { width: 45%; }
.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: auto; }
.class-council-results-table td { height: clamp(34px, calc(var(--council-table-budget) / var(--council-course-count, 15)), 60px); padding: 2px 12px; }
.council-course-cell strong { display: block; font-size: 1em; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.council-course-cell small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .82em; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.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-final-status.is-success { color: white; background: #20b8f1; }
.council-situation-button { display: grid; place-items: center; width: 100%; min-height: 36px; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.council-situation-button:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.council-restricted-course { color: var(--text-secondary); background: var(--surface-secondary); text-align: center; font-size: .9em; overflow-wrap: anywhere; }
.council-points-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border); }
.council-points-heading h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.council-points-heading form { flex-shrink: 0; margin: 0; }
.council-points-content { padding: 0 16px 16px; }
.council-points-row { padding: 12px 0; border-top: 1px solid var(--border); }
.council-points-row h3 { margin: 0 0 8px; font-size: 16px; }
.council-points-comment { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.council-points-row dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin: 0; }
.council-points-row dt { color: var(--text-secondary); font-size: 13px; }
.council-points-row dd { margin: 4px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.main-content table.class-council-results-table.adaptive-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-course-cell { display: block; padding: 10px 12px; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-course-cell::before { content: none; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-status-cell { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-status-cell::before { padding: 8px 12px; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-restricted-course { display: block; padding: 12px; text-align: center; }
.main-content table.class-council-results-table.adaptive-table > tbody > tr > td.council-restricted-course::before { content: none; }
@media (max-width: 620px) {
    .council-student-picker-navigation { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .council-student-picker-label { text-align: center; }
    .council-student-picker { min-width: 0; max-width: 100%; width: 100%; }
    .class-council-pagination { gap: 6px; }
    .council-nav-button { padding: 7px 9px; }
    .council-points-heading { align-items: start; }
}

.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; }

@container app-content (max-width: 980px) {
    .class-council-view { --council-table-budget: calc(100dvh - 560px); }
    .class-council-grid { grid-template-columns: minmax(0, 1fr); }
    .class-council-student-card { grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto; }
    .council-student-photo, .class-council-student-card img.council-student-photo { grid-row: 1; height: 140px; min-height: 0; max-height: 140px; }
}
@container app-content (max-width: 420px) {
    .class-council-student-card { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto auto; }
    .council-student-photo, .class-council-student-card img.council-student-photo { grid-row: 1; height: 80px; max-height: 80px; }
    .council-student-information { display: contents; }
    .council-student-information h1 { align-self: center; margin: 0; }
    .council-student-information dl { grid-column: 1 / -1; }
}

@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; }
    .council-pagination-context small { display: none; }
}

/* 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;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    isolation: isolate;
    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: 0; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(85px); opacity: .2; pointer-events: none; will-change: transform; }
.landing-bento-orb-one { top: 28%; left: -16rem; background: var(--landing-pink); animation: landing-blob-drift-one 18s ease-in-out infinite alternate; }
.landing-bento-orb-two { right: -15rem; bottom: 2%; background: var(--landing-cyan); animation: landing-blob-drift-two 22s ease-in-out infinite alternate; }
.landing-bento-orb-three { top: 62%; left: 35%; width: 25rem; height: 25rem; background: var(--landing-yellow); opacity: .13; animation: landing-blob-drift-two 20s -7s ease-in-out infinite alternate-reverse; }
.landing-bento-orb-four { top: -11rem; left: 43%; width: 27rem; height: 27rem; background: var(--landing-purple); opacity: .15; animation: landing-blob-drift-one 24s -4s ease-in-out infinite alternate-reverse; }
.landing-bento-nav,
.landing-bento-shell,
.landing-bento-footer { position: relative; z-index: 1; 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: 50%; color: white; background: linear-gradient(135deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 10px 25px rgba(113, 55, 245, .26); }
.landing-bento-page .landing-brand .brand-mark::after { background: linear-gradient(135deg, var(--landing-purple), var(--landing-pink)); }
.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-nav > .landing-brand strong { font-size: 27px; font-weight: 750; letter-spacing: -.035em; text-shadow: none; }
.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-typewriter { display: inline-block; box-sizing: content-box; width: 21.25ch; overflow: hidden; padding-right: .25ch; border-right: 2px solid currentColor; font: inherit; white-space: nowrap; animation: landing-typewriter 5.6s steps(19, end) infinite, landing-typewriter-caret .72s step-end infinite; }
.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: 30px; }
.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-feature-council .landing-bento-result-grid span { color: #121127; background: white; }
.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-features-reordered .landing-bento-feature-imports,
.landing-bento-features-reordered .landing-bento-feature-teachers,
.landing-bento-features-reordered .landing-bento-feature-privacy { grid-column: span 4; min-height: 360px; }
.landing-bento-feature-imports { background: linear-gradient(145deg, #e7fbff, #fff 58%, #e4f6ff); }
.landing-bento-feature-teachers { background: linear-gradient(145deg, #fff4cf, #fffaf0 55%, #ffe7b0); }
.landing-bento-feature-privacy { color: white; background: linear-gradient(145deg, #151229, #33205f 58%, #7230bd); }
.landing-bento-feature-privacy .landing-bento-feature-head,
.landing-bento-feature-privacy p { color: rgba(255,255,255,.76); }
.landing-feature-meter { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 28px; padding: 17px; border: 1px solid rgba(34,198,230,.2); border-radius: 17px; background: rgba(255,255,255,.82); }
.landing-feature-meter i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 99px; background: #dcecf2; }
.landing-feature-meter i::after { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20c6e6, #7137f5); content: ""; }
.landing-feature-meter strong { font-size: 13px; }
.landing-feature-meter span { color: #18794e; font-size: 12px; font-weight: 850; }
.landing-feature-toolbox { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.landing-feature-toolbox span { padding: 11px 13px; border: 1px solid rgba(113,55,245,.13); border-radius: 999px; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 850; }
.landing-feature-shield { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 26px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.08); }
.landing-feature-shield > span { grid-row: span 2; font-size: 27px; }
.landing-feature-shield strong { font-size: 13px; }
.landing-feature-shield small { color: rgba(255,255,255,.62); font-size: 11px; }

/* Landing bento — cartes fonctionnelles sans numérotation. */
.landing-bento-section-reordered { padding-top: 34px; }
.landing-bento-features-reordered { grid-auto-rows: minmax(345px, auto); }
.landing-bento-feature > * { position: relative; z-index: 1; }
.landing-bento-feature::after { position: absolute; right: -84px; bottom: -94px; z-index: 0; width: 250px; height: 250px; border-radius: 48% 52% 58% 42%; background: radial-gradient(circle at 42% 42%, var(--feature-glow, rgba(113, 55, 245, .18)) 0%, color-mix(in srgb, var(--feature-glow, rgba(113, 55, 245, .18)) 54%, transparent) 42%, transparent 73%); filter: blur(32px); opacity: .42; pointer-events: none; content: ""; animation: landing-feature-glow 7s ease-in-out infinite alternate; }
.landing-bento-feature-head span { display: inline-flex; align-items: center; gap: 9px; }
.landing-bento-feature-head span > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .58); font-family: "Noto Color Emoji Eduryo", "Segoe UI Emoji", sans-serif; font-size: 17px; font-style: normal; transition: transform .22s ease; }
.landing-bento-feature:hover .landing-bento-feature-head span > i { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
.landing-feature-encoding { --feature-glow: rgba(210, 55, 196, .46); grid-column: span 7; background: linear-gradient(145deg, #d9c5ff 0%, #f0dcff 53%, #ffbcdb 100%); }
.landing-feature-bulletins { --feature-glow: rgba(255, 167, 35, .42); grid-column: span 5; background: linear-gradient(150deg, #fff9d9, #ffdf65 100%); }
.landing-feature-organisation { --feature-glow: rgba(18, 176, 163, .38); grid-column: span 5; background: linear-gradient(145deg, #c9f8f2, #8ce5db 100%); }
.landing-feature-pilotage { --feature-glow: rgba(55, 227, 238, .32); grid-column: span 7; color: white; background: linear-gradient(145deg, #141227, #292252 60%, #46328d); }
.landing-feature-tools { --feature-glow: rgba(112, 244, 255, .4); grid-column: span 7; color: white; background: linear-gradient(135deg, #0846bd, #087fc7 55%, #14bfcf); }
.landing-feature-trust { --feature-glow: rgba(79, 78, 235, .42); grid-column: span 5; background: linear-gradient(145deg, #c8edff, #7fd8f5 58%, #91c8ff 100%); }
.landing-feature-pilotage .landing-bento-feature-head,
.landing-feature-pilotage p { color: rgba(255, 255, 255, .74); }
.landing-feature-tools .landing-bento-feature-head,
.landing-feature-tools p { color: rgba(255, 255, 255, .8); }

.landing-encoding-preview { display: grid; grid-template-columns: 1.15fr .7fr 1fr; gap: 10px; margin-top: 28px; }
.landing-encoding-preview > div { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-radius: 17px; color: white; background: #6d36e8; }
.landing-encoding-preview > div span,
.landing-encoding-preview > span { display: flex; flex-direction: column; gap: 5px; }
.landing-encoding-preview > div b { padding: 7px 10px; border-radius: 999px; color: #126239; background: #c8f5d9; font-size: 11px; animation: landing-save-pulse 2.8s ease-in-out infinite; }
.landing-encoding-preview > span { min-width: 0; padding: 14px; border: 1px solid rgba(113, 55, 245, .14); border-radius: 15px; background: rgba(255, 255, 255, .74); }
.landing-encoding-preview small { color: #6c6481; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.landing-encoding-preview > div small { color: rgba(255, 255, 255, .72); }
.landing-encoding-preview strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.landing-bulletin-preview { position: relative; min-height: 190px; margin-top: 22px; }
.landing-bulletin-sheet { position: absolute; inset: 8px 10% 0 14%; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 20px; border: 1px solid rgba(105, 76, 0, .16); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 35px rgba(106, 75, 0, .14); transform: rotate(2deg); animation: landing-paper-float 5s ease-in-out infinite; }
.landing-bulletin-sheet-back { inset: 20px 15% 0 9%; background: #fff5bd; transform: rotate(-5deg); animation: landing-paper-back 5.6s -.8s ease-in-out infinite; }
.landing-bulletin-sheet > i { grid-column: 1 / -1; width: 38px; height: 7px; border-radius: 99px; background: #7137f5; }
.landing-bulletin-sheet strong { grid-column: 1 / -1; font-size: 14px; }
.landing-bulletin-sheet small { color: #6e6650; font-size: 11px; }
.landing-bulletin-sheet b { width: 68px; height: 7px; border-radius: 99px; background: #ded8c6; }
.landing-bulletin-sheet em { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 7px 10px; border-radius: 999px; color: #0b6b3a; background: #c8f5d9; font-size: 10px; font-style: normal; font-weight: 900; }

.landing-organisation-preview { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin-top: 30px; }
.landing-organisation-preview > span { padding: 10px 12px; border: 1px solid rgba(5, 96, 87, .16); border-radius: 999px; background: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 900; white-space: nowrap; }
.landing-organisation-preview > span.is-school { color: white; background: #087f72; }
.landing-organisation-preview > i { height: 2px; border-radius: 99px; background: rgba(8, 127, 114, .38); }
.landing-organisation-preview > b { grid-column: span 1; margin-top: 8px; padding: 12px 8px; border-radius: 13px; color: #075f57; background: rgba(255, 255, 255, .48); font-size: 11px; text-align: center; }
.landing-organisation-preview > b:nth-of-type(1) { grid-column: 1 / span 2; }
.landing-organisation-preview > b:nth-of-type(2) { grid-column: 3; }
.landing-organisation-preview > b:nth-of-type(3) { grid-column: 4 / span 2; }

.landing-pilotage-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.landing-pilotage-preview > span { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 17px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px; background: rgba(255, 255, 255, .08); }
.landing-pilotage-preview b { font-size: 13px; }
.landing-pilotage-preview em { color: #fff; font-size: 12px; font-style: normal; font-weight: 900; }
.landing-pilotage-preview i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .13); }
.landing-pilotage-preview i::after { display: block; width: var(--landing-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20dce5, #ff61bc); transform-origin: left; content: ""; animation: landing-progress-grow 1.3s ease-out both; }
.landing-pilotage-preview .is-progress-high { --landing-progress: 92%; }
.landing-pilotage-preview .is-progress-medium { --landing-progress: 68%; }
.landing-pilotage-preview .is-progress-low { --landing-progress: 41%; }

.landing-tools-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.landing-tools-preview > span { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 9px; min-height: 88px; padding: 10px 6px; border: 1px solid rgba(161, 31, 94, .12); border-radius: 17px; background: rgba(255, 255, 255, .65); text-align: center; }
.landing-tools-preview i { font-family: "Noto Color Emoji Eduryo", "Segoe UI Emoji", sans-serif; font-size: 23px; font-style: normal; }
.landing-tools-preview b { font-size: 11px; }
.landing-feature-tools .landing-tools-preview > span { border-color: rgba(255, 255, 255, .26); color: white; background: rgba(255, 255, 255, .15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); animation: landing-tool-float 5s ease-in-out infinite; }
.landing-feature-tools .landing-tools-preview > span:nth-child(2) { animation-delay: -.8s; }
.landing-feature-tools .landing-tools-preview > span:nth-child(3) { animation-delay: -1.6s; }
.landing-feature-tools .landing-tools-preview > span:nth-child(4) { animation-delay: -2.4s; }

.landing-trust-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 27px; }
.landing-trust-preview > span { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 15px; border-radius: 16px; background: rgba(255, 255, 255, .72); }
.landing-trust-preview > span i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 99px; background: #d5eaf2; }
.landing-trust-preview > span i::after { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16a8d8, #7137f5); transform-origin: left; content: ""; animation: landing-progress-grow 1.35s .2s ease-out both; }
.landing-trust-preview strong { font-size: 11px; }
.landing-trust-preview small { color: #0c7047; font-size: 10px; font-weight: 900; }
.landing-trust-preview > b { padding: 12px 10px; border: 1px solid rgba(17, 105, 137, .12); border-radius: 13px; color: #15586f; background: rgba(255, 255, 255, .48); font-size: 10px; text-align: center; }

.landing-footer-links { display: inline-flex; align-items: center; gap: 24px; }
.landing-footer-links a { font-weight: 800; }
.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); } }
@keyframes landing-blob-drift-one { from { transform: translate3d(-3vw, -3vh, 0) scale(.9); } to { transform: translate3d(18vw, 13vh, 0) scale(1.18); } }
@keyframes landing-blob-drift-two { from { transform: translate3d(3vw, 8vh, 0) scale(1.12); } to { transform: translate3d(-20vw, -12vh, 0) scale(.88); } }
@keyframes landing-typewriter { 0%, 10% { width: 0; } 45%, 74% { width: 21.25ch; } 92%, 100% { width: 0; } }
@keyframes landing-typewriter-caret { 50% { border-color: transparent; } }
@keyframes landing-feature-glow { from { transform: translate3d(-10px, 8px, 0) rotate(-8deg) scale(.88); } to { transform: translate3d(18px, -16px, 0) rotate(12deg) scale(1.12); } }
@keyframes landing-save-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 245, 217, .15); } 50% { box-shadow: 0 0 0 8px rgba(200, 245, 217, .12); } }
@keyframes landing-paper-float { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes landing-paper-back { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(5px) rotate(-3deg); } }
@keyframes landing-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes landing-tool-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@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; }
    .landing-bento-features-reordered .landing-bento-feature-imports,
    .landing-bento-features-reordered .landing-bento-feature-teachers { grid-column: span 6; }
    .landing-bento-features-reordered .landing-bento-feature-privacy { grid-column: 1 / -1; }
    .landing-feature-encoding,
    .landing-feature-bulletins,
    .landing-feature-organisation,
    .landing-feature-pilotage,
    .landing-feature-tools,
    .landing-feature-trust { grid-column: span 6; }
    .landing-pilotage-preview { grid-template-columns: 1fr; }
    .landing-tools-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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-nav > .landing-brand strong { font-size: 24px; }
    .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; gap: 20px; }
    .landing-bento-feature { min-height: 0; padding: 25px 21px; }
    .landing-bento-feature h3 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
    .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); }
    .profile-privacy-heading { align-items: center; }
    .settings-identity-form { grid-template-columns: 1fr; }
    .settings-identity-form > *,
    .settings-identity-form .settings-field-name,
    .settings-identity-form .settings-field-address,
    .settings-identity-form .settings-field-logo { grid-column: 1; }
    .landing-bento-progress { grid-template-columns: 1fr; }
    .landing-encoding-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-encoding-preview > span:last-child { grid-column: 1 / -1; }
    .landing-encoding-preview > div { align-items: flex-start; flex-direction: column; }
    .landing-bulletin-preview { min-height: 180px; }
    .landing-organisation-preview { display: flex; flex-wrap: wrap; }
    .landing-organisation-preview > i { flex: 1 1 16px; min-width: 10px; }
    .landing-organisation-preview > b,
    .landing-organisation-preview > b:nth-of-type(1),
    .landing-organisation-preview > b:nth-of-type(2),
    .landing-organisation-preview > b:nth-of-type(3) { flex: 1 1 28%; }
    .landing-pilotage-preview { grid-template-columns: 1fr; }
    .landing-tools-preview { grid-template-columns: repeat(2, minmax(0, 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: center; flex-direction: column; padding: 30px 0; text-align: center; }
    .landing-bento-footer .landing-brand { justify-content: center; }
    .landing-footer-links { justify-content: center; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-bento-visual img,
    .landing-bento-feature-community img,
    .landing-bento-cta-shape,
    .landing-bento-feature::after,
    .landing-encoding-preview > div b,
    .landing-bulletin-sheet,
    .landing-pilotage-preview i::after,
    .landing-feature-tools .landing-tools-preview > span,
    .landing-trust-preview > span i::after { animation: none; }
    .landing-typewriter { width: 21.25ch; border-right: 0; animation: none; }
}
/* Landing éditoriale 2026 — récit pleine largeur, sans navigation d'en-tête. */
.landing-story-page { --story-ink: #171328; --story-muted: #6f6980; --story-purple: #6f35f2; --story-pink: #ed3b9d; --story-cyan: #38d6dc; overflow-x: hidden; color: var(--story-ink); background: #fbfaff; }
.landing-story-page *, .landing-story-page *::before, .landing-story-page *::after { box-sizing: border-box; }
.landing-story-page a { color: inherit; text-decoration: none; }
.landing-story-wrap { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.landing-story-section { position: relative; padding: clamp(82px, 9vw, 132px) 0; }
.landing-story-copy h2, .landing-story-heading h2, .landing-teacher-heading h2, .landing-security-content h2 { margin: 0; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(2.75rem, 4.6vw, 5rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.landing-story-copy > p, .landing-story-heading > p, .landing-teacher-heading > p { max-width: 620px; margin: 28px 0 0; color: var(--story-muted); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.75; }
.landing-story-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); align-items: center; gap: clamp(60px, 8vw, 130px); }
.landing-story-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 58px; overflow: hidden; padding: 14px 24px; border: 0; border-radius: 999px; background-clip: padding-box; font-size: 14px; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.landing-story-button:hover { transform: translateY(-3px); }
.landing-story-button span { font-size: 18px; }
.landing-story-button-primary { color: white !important; background: linear-gradient(115deg, var(--story-purple), #973cf0 58%, var(--story-pink)); box-shadow: 0 18px 40px rgba(111, 53, 242, .25); }
.landing-story-button-primary:hover { box-shadow: 0 22px 50px rgba(111, 53, 242, .34); }
.landing-story-button-ghost { box-shadow: inset 0 0 0 1px rgba(23, 19, 40, .12); background: rgba(255,255,255,.64); }
.landing-story-button-light { color: #171328 !important; background: white; box-shadow: 0 18px 45px rgba(0,0,0,.18); }

.landing-story-document { scroll-behavior: smooth; }
.landing-story-hero { position: relative; display: grid; min-height: 80svh; place-items: center; overflow: clip; padding: 38px 24px 48px; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.88) 0 18%, rgba(255,255,255,.38) 46%, transparent 70%), #eee7ff; text-align: center; }
.landing-story-hero::before { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(111,53,242,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(111,53,242,.22) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 88%); content: ""; }
.landing-story-hero::after { position: absolute; inset: 4% 50% auto auto; z-index: 0; width: min(1180px, 92vw); height: 72%; border-radius: 50%; background: radial-gradient(ellipse, rgba(248,246,255,.82) 0 42%, rgba(248,246,255,.45) 60%, rgba(248,246,255,.12) 75%, transparent 88%); filter: blur(28px); transform: translateX(50%); pointer-events: none; content: ""; }
.landing-story-glow { position: absolute; width: min(45vw, 650px); aspect-ratio: 1; border-radius: 50%; filter: blur(78px); opacity: .36; pointer-events: none; will-change: transform; }
.landing-story-glow-one { top: -22%; left: -12%; background: var(--story-pink); animation: landing-story-drift-one 10s cubic-bezier(.42,0,.58,1) infinite; }
.landing-story-glow-two { right: -12%; bottom: 4%; background: var(--story-cyan); animation: landing-story-drift-two 12s -4s cubic-bezier(.42,0,.58,1) infinite; }
.landing-feature-streams { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.landing-feature-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.landing-feature-row { position: absolute; bottom: 7%; left: 0; width: 100%; overflow: visible; padding-block: 24px; }
.landing-feature-track { --landing-marquee-offset: 12px; display: flex; width: max-content; gap: 24px; will-change: transform; animation: landing-feature-marquee 132s linear infinite reverse; }
.landing-feature-group { display: flex; flex: 0 0 auto; gap: 24px; }
.landing-feature-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 17px; width: 305px; min-height: 138px; overflow: hidden; padding: 20px; border: 1px solid rgba(111,53,242,.17); border-radius: 24px; color: #272033; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,242,255,.9)); opacity: .94; }
.landing-feature-card.is-wide { width: 365px; }
.landing-feature-card.is-compact { width: 265px; }
.landing-feature-card > i { position: relative; z-index: 1; display: grid; grid-row: 1 / 3; width: 58px; height: 58px; place-items: center; align-self: center; border: 1px solid rgba(255,255,255,.64); border-radius: 17px; color: #5d2dcc; background: rgba(255,255,255,.7); box-shadow: 0 8px 18px rgba(63,35,116,.08); font-size: 12px; font-style: normal; font-weight: 700; }
.landing-feature-card > i svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-feature-card > span { display: grid; align-content: center; min-width: 0; text-align: left; }
.landing-feature-card b { position: relative; z-index: 1; overflow: hidden; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.landing-feature-card small { position: relative; z-index: 1; overflow: hidden; margin-top: 4px; color: #655e72; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.landing-feature-card > em { position: absolute; right: 16px; bottom: 14px; z-index: 1; max-width: calc(100% - 32px); overflow: hidden; padding: 5px 11px; border-radius: 999px; color: #6533cd; background: rgba(255,255,255,.78); font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.landing-feature-card.is-purple { background: linear-gradient(135deg, #ede4ff, #d9c5ff); }
.landing-feature-card.is-pink { background: linear-gradient(135deg, #ffe7f4, #ffcce7); }
.landing-feature-card.is-cyan { background: linear-gradient(135deg, #e1fbfc, #bceff2); }
.landing-feature-card.is-violet { background: linear-gradient(135deg, #eee8ff, #d9cffd); }
.landing-feature-card.is-blue { background: linear-gradient(135deg, #e5f3ff, #c7e3ff); }
.landing-feature-card.is-yellow { background: linear-gradient(135deg, #fff8d9, #ffe9a6); }
.landing-feature-card.is-coral { background: linear-gradient(135deg, #ffebe5, #ffcfc1); }
.landing-feature-card.is-dark { color: white; border-color: rgba(255,255,255,.15); background: linear-gradient(135deg, #261c3d, #4a2767); }
.landing-feature-card.is-dark small { color: rgba(255,255,255,.7); }
.landing-feature-card.is-dark > i, .landing-feature-card.is-dark > em { color: white; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.13); }
.landing-feature-streams.is-orbit-ready .landing-feature-row { inset: 0; width: 100%; height: 100%; padding: 0; }
.landing-feature-streams.is-orbit-ready .landing-feature-track { position: absolute; inset: 0; display: block; width: 100%; height: 100%; animation: none; }
.landing-feature-streams.is-orbit-ready .landing-feature-group:first-child { position: absolute; inset: 0; display: block; }
.landing-feature-streams.is-orbit-ready .landing-feature-group + .landing-feature-group { display: none; }
.landing-feature-streams.is-orbit-ready .landing-feature-card { position: absolute; top: 0; left: 0; width: clamp(290px, 21vw, 340px); min-height: 138px; opacity: 0; will-change: transform, opacity; }
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact { width: clamp(290px, 21vw, 340px); }
.landing-story-hero-inner { position: relative; z-index: 2; isolation: isolate; width: min(980px, 100%); transform: translateY(-68px); }
.landing-story-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid rgba(111,53,242,.13); border-radius: 999px; color: #5e36ba; background: rgba(255,255,255,.62); backdrop-filter: blur(10px); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.landing-story-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--story-pink); box-shadow: 0 0 0 5px rgba(237,59,157,.12); animation: landing-story-pulse 2s ease-in-out infinite; }
.landing-story-logo { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 2.5vw, 30px); margin: clamp(26px, 3.5vh, 42px) 0 20px; padding-inline: 18px; }
.landing-story-logo .brand-mark { width: clamp(66px, 8.5vw, 104px); height: clamp(66px, 8.5vw, 104px); filter: drop-shadow(0 22px 28px rgba(111,53,242,.25)); }
.landing-story-logo .brand-mark::before { display: block; }
.landing-story-logo .brand-mark::after { display: block; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); }
.landing-story-logo .brand-mark img { opacity: 0; }
.landing-story-logo strong { padding: .06em .06em .1em 0; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(4.1rem, 8.3vw, 7.1rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; background: linear-gradient(115deg, #5222c5 5%, #8a35ed 52%, #e83998 92%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.landing-story-hero h1 { max-width: 940px; margin: 0 auto; font-size: clamp(1.45rem, 2.7vw, 2.7rem); font-weight: 650; line-height: 1.15; letter-spacing: -.04em; }
.landing-story-hero-inner > p { max-width: 630px; margin: 23px auto 0; color: var(--story-muted); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.6; }
.landing-story-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.landing-story-actions .landing-story-button { gap: 10px; font-weight: 700; }
.landing-story-button-icon { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.landing-story-year { overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(56,214,220,.15), transparent 28%), radial-gradient(circle at 8% 85%, rgba(237,59,157,.12), transparent 26%), #fff; }
.landing-story-year::before { position: absolute; inset: -22% -8%; opacity: .72; background: repeating-linear-gradient(118deg, transparent 0 84px, rgba(111,53,242,.04) 84px 86px, transparent 86px 126px); mask-image: linear-gradient(90deg, transparent, #000 38%, #000); content: ""; }
.landing-year-contact { width: fit-content; margin-top: 32px; padding-inline: 27px; font-weight: 700; }
.landing-year-contact span { transition: transform .2s ease; }
.landing-year-contact:hover span { transform: translateX(4px); }
.landing-contact-success { max-width: 520px; margin-top: 25px !important; padding: 13px 16px; border: 1px solid #a9e6c2; border-radius: 15px; color: #17633b !important; background: #eafaf1; font-size: 13px !important; font-weight: 650; }
.landing-contact-dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 28px; color: #171328; background: transparent; box-shadow: 0 35px 100px rgba(31,18,58,.3); }
.landing-contact-dialog::backdrop { background: rgba(25,16,48,.46); backdrop-filter: blur(10px); }
.landing-contact-panel { position: relative; padding: 24px 36px 20px; background: radial-gradient(circle at 100% 0, rgba(58,210,226,.18), transparent 34%), radial-gradient(circle at 0 100%, rgba(237,59,157,.16), transparent 38%), #fff; }
.landing-contact-close { position: absolute; top: 18px; right: 18px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(111,53,242,.14); border-radius: 50%; color: #34294b; background: rgba(255,255,255,.76); font-size: 25px; line-height: 1; cursor: pointer; }
.landing-contact-kicker { color: var(--story-purple); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landing-contact-panel h2 { max-width: 570px; margin: 8px 0 0; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(2rem, 4vw, 2.65rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; }
.landing-contact-panel > p { max-width: 570px; margin: 12px 0 0; color: var(--story-muted); line-height: 1.5; }
.landing-contact-panel form { margin-top: 19px; }
.landing-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.landing-contact-fields label { display: grid; gap: 8px; color: #342d43; font-size: 13px; font-weight: 700; }
.landing-contact-fields label > span { display: inline-flex; align-items: baseline; gap: 4px; }
.landing-contact-fields label > span i { font-style: normal; }
.landing-contact-fields label.is-wide { grid-column: 1 / -1; }
.landing-contact-fields input, .landing-contact-fields textarea { width: 100%; border: 1px solid rgba(111,53,242,.18); border-radius: 14px; outline: 0; color: #171328; background-color: #fff !important; background-image: none !important; color-scheme: light; font: inherit; font-weight: 500; appearance: none; }
.landing-contact-fields input { min-height: 44px; padding: 9px 12px; }
.landing-contact-fields textarea { min-height: 88px; padding: 12px; resize: vertical; }
.landing-contact-fields input:focus, .landing-contact-fields textarea:focus { border-color: var(--story-purple); box-shadow: 0 0 0 4px rgba(111,53,242,.1); }
.landing-contact-errors, .landing-contact-fields .errorlist { margin: 0 0 18px; padding: 11px 14px; border-radius: 12px; color: #8d1831; background: #fff0f3; font-size: 12px; font-weight: 650; list-style: none; }
.landing-contact-fields .errorlist { margin: 0; }
.landing-contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.landing-contact-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.landing-contact-actions small { max-width: 265px; color: var(--story-muted); font-size: 11px; line-height: 1.45; }
.landing-contact-actions .landing-story-button { flex: 0 0 auto; font-weight: 700; }
.landing-contact-actions .landing-story-button { min-height: 52px; }
.landing-story-checks { display: grid; gap: 13px; margin: 32px 0 0; padding: 0; list-style: none; }
.landing-story-checks li { display: flex; align-items: center; gap: 12px; color: #4f495e; font-size: 14px; font-weight: 650; }
.landing-story-checks li::before { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: white; background: var(--story-purple); content: "✓"; font-size: 12px; }
.landing-year-visual { position: relative; min-width: 0; min-height: 510px; padding: 15px 14px 0 0; }
.landing-year-label { display: block; color: var(--story-pink); font-size: 13px; font-weight: 850; letter-spacing: .16em; text-align: right; text-transform: uppercase; }
.landing-year-visual > strong { display: block; padding-right: .06em; color: transparent; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); background-clip: text; -webkit-background-clip: text; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(7.5rem, 15vw, 12.5rem); font-weight: 600; line-height: .9; letter-spacing: -.055em; text-align: right; -webkit-text-fill-color: transparent; }
.landing-year-window { position: absolute; right: 2%; bottom: 0; display: grid; grid-template-columns: 72px 1fr; width: 94%; height: 345px; overflow: hidden; border: 1px solid rgba(111,53,242,.22); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.2), transparent 34%), radial-gradient(circle at 0 100%, rgba(237,59,157,.08), transparent 35%), #fff; box-shadow: 0 38px 90px rgba(68,42,121,.24); transform: rotate(-.65deg); }
.landing-year-window::after { position: absolute; top: 0; right: 72px; left: 0; height: 4px; background: linear-gradient(90deg, var(--story-purple), var(--story-pink), var(--story-cyan)); content: ""; }
.landing-window-dots { position: absolute; top: 18px; right: 20px; z-index: 2; display: flex; gap: 5px; }
.landing-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dcd7e7; }
.landing-year-window-sidebar { display: flex; align-items: center; flex-direction: column; gap: 23px; padding: 18px; background: #21153d; }
.landing-year-window-sidebar b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); }
.landing-year-window-sidebar i { width: 27px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); }
.landing-year-window-main { padding: 45px 27px 22px; }
.landing-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.landing-dashboard-heading small, .landing-dashboard-heading strong { display: block; }
.landing-dashboard-heading small { color: var(--story-purple); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.landing-dashboard-heading strong { margin-top: 6px; font-size: 22px; }
.landing-year-window-main > .landing-dashboard-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
.landing-dashboard-cards > i { display: grid; align-content: start; min-height: 91px; padding: 13px; border-radius: 15px; background: linear-gradient(145deg, #f0ebff, #fff); box-shadow: inset 0 0 0 1px rgba(111,53,242,.08); font-style: normal; }
.landing-dashboard-cards > i:nth-child(2) { background: linear-gradient(145deg, #ffe8f5, #fff); }
.landing-dashboard-cards > i:nth-child(3) { background: linear-gradient(145deg, #dffbfc, #fff); }
.landing-dashboard-cards small { color: #81798e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.landing-dashboard-cards b { margin-top: 5px; font-size: 20px; }
.landing-dashboard-cards em { margin-top: 6px; color: #6f35f2; font-size: 9px; font-style: normal; font-weight: 700; }
.landing-dashboard-cards em u { display: inline; width: auto; height: auto; color: #168253; background: none; text-decoration: none; }
.landing-dashboard-cards span { height: 5px; overflow: hidden; margin-top: 9px; border-radius: 99px; background: #d7eef0; }
.landing-dashboard-cards u { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--story-cyan), var(--story-purple)); }
.landing-dashboard-bottom { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9px; margin-top: 10px; }
.landing-dashboard-activity { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #eee9f5; border-radius: 13px; background: rgba(255,255,255,.78); }
.landing-dashboard-activity span b, .landing-dashboard-activity span small { display: block; }
.landing-dashboard-activity span b { font-size: 10px; }
.landing-dashboard-activity span small { margin-top: 2px; color: #81798e; font-size: 9px; }
.landing-dashboard-activity > strong { color: var(--story-purple); font-size: 11px; }
.landing-dashboard-update { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #eee9f5; border-radius: 13px; background: linear-gradient(135deg, #fff6fb, #fff); }
.landing-dashboard-update b, .landing-dashboard-update small { display: block; }
.landing-dashboard-update b { font-size: 10px; }
.landing-dashboard-update small { margin-top: 2px; color: #81798e; font-size: 8px; }
.landing-dashboard-avatars { display: flex; min-width: 54px; }
.landing-dashboard-avatars i { display: grid; width: 23px; height: 23px; margin-left: -7px; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: #6f35f2; font-size: 6px; font-style: normal; font-weight: 800; }
.landing-dashboard-avatars i:first-child { margin-left: 0; background: #24aecb; }
.landing-dashboard-avatars i:last-child { background: #e63b9b; }

.landing-story-fwb { overflow: hidden; color: white; background: #191428; }
.landing-story-fwb::after { position: absolute; inset: 0; background: radial-gradient(circle at 25% 50%, rgba(237,59,157,.21), transparent 30%), radial-gradient(circle at 90% 10%, rgba(56,214,220,.14), transparent 35%); content: ""; }
.landing-fwb-layout { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(70px, 10vw, 150px); }
.landing-belgium-orbit { position: relative; display: grid; width: min(390px, 100%); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.landing-belgium-orbit::before, .landing-belgium-orbit::after { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.landing-belgium-orbit::before { inset: 13%; }
.landing-belgium-orbit::after { inset: -9%; border-style: dashed; animation: landing-story-spin 28s linear infinite; }
.landing-belgium-flag { display: flex; width: 170px; height: 120px; overflow: hidden; border: 1px solid rgba(104,91,115,.82); border-radius: 12px; box-shadow: 0 25px 65px rgba(0,0,0,.36); transform: rotate(-5deg); }
.landing-belgium-flag i { flex: 1; background: #1b1b1b; }
.landing-belgium-flag i:nth-child(2) { background: #fdda24; }
.landing-belgium-flag i:nth-child(3) { background: #ef3340; }
.landing-belgium-orbit > b { position: absolute; top: 15%; right: 4%; display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: #191428; background: var(--story-cyan); font-size: 15px; }
.landing-belgium-orbit > span:last-child { position: absolute; bottom: 12%; left: 0; padding: 10px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 800; }
.landing-story-fwb .landing-story-copy > p { color: rgba(255,255,255,.68); }
.landing-fwb-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.landing-fwb-tags span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); font-size: 12px; font-weight: 700; }

.landing-story-core { overflow: hidden; background: radial-gradient(circle at 88% 18%, rgba(56,214,220,.14), transparent 27%), radial-gradient(circle at 8% 85%, rgba(237,59,157,.1), transparent 25%), #f7f4ff; }
.landing-story-core::before { position: absolute; right: -110px; bottom: -130px; width: 430px; height: 430px; border: 1px solid rgba(111,53,242,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(111,53,242,.035), 0 0 0 110px rgba(111,53,242,.025); content: ""; }
.landing-story-heading { display: grid; grid-template-columns: 1fr minmax(280px, .5fr); align-items: end; gap: 50px; }
.landing-story-heading h2 em { color: var(--story-purple); font-style: normal; }
.landing-story-heading > p { margin: 0 0 7px; }
.landing-core-layout { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(550px, 1.28fr); align-items: center; gap: clamp(45px, 7vw, 90px); margin-top: 85px; }
.landing-core-features article { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(23,19,40,.1); }
.landing-core-features article:last-child { border-bottom: 1px solid rgba(23,19,40,.1); }
.landing-core-feature-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(111,53,242,.14); border-radius: 13px; color: var(--story-purple); background: linear-gradient(145deg, #fff, #eee8ff); box-shadow: 0 7px 18px rgba(79,48,139,.08); }
.landing-core-feature-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-core-features h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.landing-core-features p { margin: 7px 0 0; color: var(--story-muted); font-size: 15px; line-height: 1.68; }
.landing-encoding-screen { overflow: hidden; border: 1px solid rgba(111,53,242,.2); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.16), transparent 30%), radial-gradient(circle at 0 100%, rgba(237,59,157,.07), transparent 28%), white; box-shadow: 0 38px 95px rgba(67,43,119,.24); transform: rotate(.55deg); }
.landing-screen-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; height: 52px; padding: 0 20px; border-bottom: 1px solid #ebe7f3; background: #fdfcff; font-size: 10px; }
.landing-screen-top > span { display: flex; gap: 5px; }
.landing-screen-top i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #d8d3e1; }
.landing-screen-top b { text-align: center; }
.landing-screen-top em { padding: 6px 9px; border-radius: 999px; color: #168253; background: #dcf8e9; font-style: normal; font-weight: 800; }
.landing-screen-body { display: grid; grid-template-columns: 67px 1fr; min-height: 485px; }
.landing-screen-body aside { display: flex; align-items: center; flex-direction: column; gap: 24px; padding: 19px; background: #251846; }
.landing-screen-body aside strong { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); }
.landing-screen-body aside i { width: 27px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.17); }
.landing-screen-content { min-width: 0; padding: 22px 30px 25px; }
.landing-screen-context { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 19px; }
.landing-screen-context > span { min-width: 105px; padding: 8px 10px; border: 1px solid #ebe6f3; border-radius: 10px; background: #faf8fd; }
.landing-screen-context small, .landing-screen-context b { display: block; }
.landing-screen-context small { color: #8a8296; font-size: 8px; text-transform: uppercase; }
.landing-screen-context b { margin-top: 2px; font-size: 9px; }
.landing-screen-kicker { color: var(--story-purple); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.landing-screen-content h3 { margin: 8px 0 14px; font-size: 22px; }
.landing-screen-tabs { display: flex; gap: 5px; margin-bottom: 12px; padding: 4px; border-radius: 11px; background: #f4f0fb; }
.landing-screen-tabs span { flex: 1; padding: 7px 5px; border-radius: 8px; color: #81798e; font-size: 9px; font-weight: 750; text-align: center; }
.landing-screen-tabs .is-active { color: #5d2fc0; background: white; box-shadow: 0 4px 12px rgba(63,39,110,.1); }
.landing-student-row { display: grid; grid-template-columns: minmax(140px, 1fr) 60px 76px; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid #eeeaf3; font-size: 12px; }
.landing-student-row > span { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.landing-student-row span i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: #6434c1; background: #eee7ff; font-size: 8px; font-style: normal; }
.landing-student-row > b { font-size: 11px; }
.landing-student-row.is-heading { min-height: 35px; color: #898294; font-size: 9px; text-transform: uppercase; }
.landing-student-row .is-success, .landing-student-row .is-watch { justify-self: start; padding: 6px 8px; border-radius: 999px; color: #17754e; background: #dcf8e9; }
.landing-student-row .is-watch { color: #93610c; background: #fff2ce; }
.landing-screen-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 20px; }
.landing-screen-progress > span { height: 8px; overflow: hidden; border-radius: 99px; background: #eeeaf5; }
.landing-screen-progress b { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--story-purple), var(--story-pink)); }
.landing-screen-progress em { color: var(--story-purple); font-size: 10px; font-style: normal; font-weight: 800; }

.landing-story-teachers { overflow: hidden; color: white; background: linear-gradient(145deg, #5725ce, #8530e4 55%, #ce318f); }
.landing-story-teachers::before { position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px; content: ""; }
.landing-teacher-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 60px; }
.landing-teacher-heading > p { color: rgba(255,255,255,.73); }
.landing-tools-track { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; width: max(100%, 1220px); margin-top: 54px; }
.landing-tools-track article { position: relative; min-height: 225px; padding: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 25px; outline: 0; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); cursor: default; transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease; }
.landing-tools-track article::after { position: absolute; right: -50px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); content: ""; transform: scale(.6); transition: transform .3s ease; }
.landing-tools-track article:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.19); box-shadow: 0 24px 48px rgba(31,16,59,.24); transform: translateY(-9px); }
.landing-tools-track article:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 4px; }
.landing-tools-track article:hover::after { transform: scale(1); }
.landing-tools-track article > .landing-tool-symbol { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(31,20,57,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); font-family: "Eduryo Fredoka", sans-serif; font-size: 22px; font-weight: 600; }
.landing-tool-symbol.is-grade { display: flex !important; align-items: baseline; justify-content: center; font-size: 18px !important; }
.landing-tool-symbol.is-grade span { font-size: 9px; }
.landing-tools-track h3 { margin: 25px 0 8px; font-size: 18px; }
.landing-tools-track p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.6; }
.landing-tools-track article > .landing-tool-symbol { transition: transform .28s ease, background .28s ease; }
.landing-tools-track article:hover > .landing-tool-symbol { background: rgba(255,255,255,.24); transform: rotate(-5deg) scale(1.08); }
.landing-tools-track .landing-tools-more { color: white; background: rgba(34,17,65,.38); }
.landing-tools-track .landing-tools-more > .landing-tool-symbol { position: relative; color: #2b173d; background: #ff9bd0; font-size: 0; }
.landing-tools-track .landing-tools-more > .landing-tool-symbol::before,
.landing-tools-track .landing-tools-more > .landing-tool-symbol::after { position: absolute; top: 50%; left: 50%; width: 16px; height: 4px; border-radius: 99px; background: #2b173d; content: ""; transform: translate(-50%, -50%); }
.landing-tools-track .landing-tools-more > .landing-tool-symbol::after { transform: translate(-50%, -50%) rotate(90deg); }
.landing-tools-track .landing-tools-more p { color: rgba(255,255,255,.68); }
.landing-story-admin { overflow: hidden; background: radial-gradient(circle at 85% 25%, rgba(111,53,242,.1), transparent 29%), #fff; }
.landing-story-admin::before { position: absolute; top: 12%; right: 4%; width: 300px; height: 300px; border-radius: 50%; background: rgba(56,214,220,.11); filter: blur(70px); content: ""; }
.landing-admin-layout { grid-template-columns: minmax(0, .85fr) minmax(470px, 1.15fr); gap: clamp(55px, 7vw, 95px); }
.landing-admin-layout .landing-story-copy h2 { max-width: 580px; font-size: clamp(2.8rem, 4.25vw, 4.6rem); }
.landing-import-panel { padding: 34px; border: 1px solid rgba(111,53,242,.2); border-radius: 30px; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.13), transparent 31%), linear-gradient(145deg, #fff, #faf5ff); box-shadow: 0 35px 90px rgba(66,41,117,.21); transform: rotate(-.55deg); }
.landing-import-title { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 15px; }
.landing-import-title > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: white; background: var(--story-purple); font-size: 22px; }
.landing-import-title strong, .landing-import-title small { display: block; }
.landing-import-title strong { font-size: 16px; }
.landing-import-title small { margin-top: 4px; color: var(--story-muted); font-size: 11px; }
.landing-import-title > b { padding: 8px 11px; border-radius: 999px; color: #17754e; background: #dcf8e9; font-size: 10px; }
.landing-import-progress { height: 8px; overflow: hidden; margin: 30px 0; border-radius: 99px; background: #e8e2f2; }
.landing-import-progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--story-purple), var(--story-pink)); }
.landing-import-steps { display: grid; gap: 0; }
.landing-import-steps > span { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; min-height: 78px; }
.landing-import-steps > span:not(:last-child)::before { position: absolute; top: 31px; bottom: -2px; left: 15px; width: 2px; background: #d7cfeb; content: ""; }
.landing-import-steps i { z-index: 1; display: grid; grid-row: span 2; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: white; background: var(--story-purple); font-size: 11px; font-style: normal; }
.landing-import-steps b { font-size: 13px; }
.landing-import-steps small { color: var(--story-muted); font-size: 11px; }

.landing-story-mobile { overflow: hidden; background: linear-gradient(145deg, #ecfbff, #f5f3ff 55%, #fff0f8); }
.landing-mobile-layout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(60px, 9vw, 135px); }
.landing-devices { position: relative; min-height: 610px; }
.landing-tablet, .landing-phone { position: absolute; border: 9px solid #211a31; background: white; box-shadow: 0 38px 80px rgba(38,30,60,.23); }
.landing-tablet { top: 20px; left: 0; width: 82%; height: 500px; overflow: hidden; border-radius: 30px; }
.landing-tablet > span { position: absolute; top: 50%; left: 5px; width: 5px; height: 5px; border-radius: 50%; background: #5e586b; }
.landing-tablet > div { height: 100%; padding: 32px 34px; background: #f8f6fc; }
.landing-tablet header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #e8e2f0; }
.landing-tablet header b { color: var(--story-purple); font-family: "Eduryo Fredoka", sans-serif; font-size: 18px; }
.landing-tablet header em { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); font-size: 9px; font-style: normal; }
.landing-tablet > div > small { display: block; margin-top: 20px; color: var(--story-purple); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.landing-tablet h3 { margin: 14px 0 12px; font-size: 19px; }
.landing-tablet-journal { font-size: 8px; }
.landing-journal-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 4px; border: 1px solid #d8c7fb; border-radius: 12px; background: #fbf9ff; }
.landing-journal-week > span { display: grid; gap: 2px; place-items: center; padding: 6px 3px; border-radius: 9px; color: #766e80; font-weight: 750; text-transform: uppercase; }
.landing-journal-week small { color: inherit; font-size: 7px; }
.landing-journal-week .is-active { color: white; background: var(--story-purple); box-shadow: 0 5px 12px rgba(111,53,242,.23); }
.landing-journal-grid { display: grid; grid-template-columns: 48px 1fr; gap: 4px 5px; margin-top: 7px; }
.landing-journal-grid > b { display: grid; place-items: center; min-height: 39px; border: 1px solid #d7c1ff; border-radius: 10px; color: var(--story-purple); background: #eee5ff; font-size: 10px; }
.landing-journal-grid article { position: relative; display: grid; align-content: center; min-height: 39px; overflow: hidden; padding: 6px 11px; border: 1px solid #61c8e6; border-radius: 10px; background: #dff7ff; }
.landing-journal-grid article::after { position: absolute; top: 0; right: 0; border-top: 15px solid #29b5d7; border-left: 15px solid transparent; content: ""; }
.landing-journal-grid article strong { font-size: 8px; text-transform: uppercase; }
.landing-journal-grid article small, .landing-journal-grid article em { color: #1385b1; font-size: 6px; font-style: normal; }
.landing-journal-grid article em { margin-top: 2px; }
.landing-journal-grid .is-free { place-items: center; border-style: dashed; border-color: #ddd6e8; color: #777080; background: #fbf9fd; font-size: 9px; }
.landing-journal-grid .is-free::after, .landing-journal-grid .is-lunch::after { display: none; }
.landing-journal-grid .is-lunch { display: flex; align-items: center; justify-content: center; gap: 5px; border-color: #83d5e8; background: repeating-linear-gradient(135deg, #e6faff 0 8px, #d4f4fb 8px 16px); }
.landing-journal-grid .is-lunch strong { font-size: 7px; text-transform: none; }
.landing-journal-grid .is-orange { border-color: #f69a62; background: #fff0e7; }
.landing-journal-grid .is-orange::after { border-top-color: #ef7c39; }
.landing-journal-grid .is-orange small { color: #d76527; }
.landing-phone { right: 1%; bottom: 0; z-index: 2; width: 230px; height: 470px; overflow: hidden; border-width: 8px; border-radius: 40px; }
.landing-phone > span { position: absolute; top: 9px; left: 50%; z-index: 2; width: 70px; height: 19px; border-radius: 99px; background: #211a31; transform: translateX(-50%); }
.landing-phone > div { display: flex; flex-direction: column; height: 100%; padding: 45px 16px 14px; background: #f8f6fc; }
.landing-phone small { color: var(--story-muted); font-size: 9px; }
.landing-phone > div > b { margin-top: 7px; font-size: 19px; }
.landing-phone-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 9px; padding: 4px; border: 1px solid #d8c7fb; border-radius: 11px; background: white; }
.landing-phone-days > span { display: grid; place-items: center; padding: 5px 2px; border-radius: 8px; color: #756d80; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.landing-phone-days small { color: inherit; font-size: 6px; }
.landing-phone-days .is-active { color: white; background: var(--story-purple); }
.landing-phone section { display: grid; gap: 5px; margin-top: 8px; }
.landing-phone section > span { display: grid; grid-template-columns: 33px 1fr; gap: 2px 6px; min-height: 56px; padding: 8px; border: 1px solid #62c8e6; border-radius: 11px; background: #dff7ff; box-shadow: 0 6px 14px rgba(47,34,78,.05); }
.landing-phone section > span.is-free { place-items: center start; border-style: dashed; border-color: #ded7e8; background: white; }
.landing-phone section > span.is-lunch { border-color: #89d5e8; background: repeating-linear-gradient(135deg, #e6faff 0 7px, #d4f4fb 7px 14px); }
.landing-phone section > span.is-orange { border-color: #f19a64; background: #fff0e7; }
.landing-phone section time { grid-row: span 2; color: #766e80; font-size: 7px; }
.landing-phone section b { align-self: end; font-size: 10px; }
.landing-phone section small { font-size: 7px; }
.landing-phone footer { display: flex; justify-content: space-around; margin-top: auto; padding: 11px 8px; border-radius: 13px; color: #625a71; background: white; font-size: 12px; }

.landing-story-roles { overflow: hidden; background: linear-gradient(145deg, #fff7fb, #f2edff 58%, #e9fbff); }
.landing-story-roles::after { position: absolute; inset: 0; opacity: .11; background-image: radial-gradient(circle, #6f35f2 1px, transparent 1px); background-size: 29px 29px; mask-image: linear-gradient(90deg, transparent, #000 62%, #000); content: ""; }
.landing-story-roles::before { position: absolute; top: -20%; right: -10%; width: 520px; aspect-ratio: 1; border-radius: 50%; background: rgba(237,59,157,.1); filter: blur(90px); content: ""; }
.landing-roles-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; }
.landing-roles-heading h2 { margin: 0; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: clamp(2.75rem, 4.6vw, 5rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.landing-roles-heading > p { max-width: 520px; margin: 0 0 7px; color: var(--story-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.7; }
.landing-roles-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: center; gap: clamp(45px, 7vw, 90px); margin-top: 65px; }
.landing-role-list { display: grid; }
.landing-role-list > span { display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 2px 13px; padding: 16px 10px; border-bottom: 1px solid rgba(23,19,40,.1); }
.landing-role-list > span:first-child { border-top: 1px solid rgba(23,19,40,.1); }
.landing-role-list i { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: #5c35b7; background: #eae1ff; font-size: 9px; font-style: normal; font-weight: 800; }
.landing-role-list b { align-self: center; font-size: 14px; }
.landing-role-list .is-parent { margin-top: 7px; border: 1px solid rgba(237,59,157,.18); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(95,46,121,.08); }
.landing-role-list .is-parent i { color: white; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); }
.landing-parent-portal { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(111,53,242,.21); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.12), transparent 30%), white; box-shadow: 0 38px 95px rgba(63,39,110,.23); transform: rotate(.45deg); }
.landing-parent-top { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 24px; border-bottom: 1px solid #ece7f3; background: linear-gradient(90deg, rgba(111,53,242,.06), rgba(237,59,157,.05), rgba(56,214,220,.06)); }
.landing-parent-top > span { display: flex; align-items: center; gap: 10px; }
.landing-parent-top .brand-mark { width: 31px; height: 31px; }
.landing-parent-top span > b { color: #342b43; font-family: "Eduryo Fredoka", sans-serif; font-size: 15px; }
.landing-parent-top > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--story-purple), var(--story-pink)); font-size: 8px; font-style: normal; font-weight: 800; }
.landing-parent-welcome { display: flex; align-items: center; justify-content: space-between; padding: 28px 30px 20px; }
.landing-parent-welcome small, .landing-parent-welcome strong { display: block; }
.landing-parent-welcome small { color: var(--story-purple); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.landing-parent-welcome strong { margin-top: 5px; font-size: 20px; }
.landing-parent-welcome > b { padding: 8px 11px; border-radius: 999px; color: #6333c0; background: #eee6ff; font-size: 10px; }
.landing-parent-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; padding: 0 30px; }
.landing-parent-grid article { min-width: 0; padding: 17px; border: 1px solid #ebe5f2; border-radius: 17px; background: #fcfbfe; }
.landing-parent-bulletin { display: grid; grid-template-columns: 1fr auto; gap: 12px; background: linear-gradient(145deg, #fff, #faf2ff) !important; box-shadow: 0 10px 25px rgba(99,51,192,.07); }
.landing-parent-bulletin small, .landing-parent-bulletin span > b { display: block; }
.landing-parent-bulletin small, .landing-parent-attendance > small { color: #898092; font-size: 9px; }
.landing-parent-bulletin span > b { margin-top: 3px; font-size: 13px; }
.landing-parent-bulletin > em { align-self: start; padding: 5px 7px; border-radius: 999px; color: #17754e; background: #dcf8e9; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-parent-bulletin > div { grid-column: 1 / -1; display: grid; gap: 6px; }
.landing-parent-bulletin > div i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #ddd6eb 72%, #f2eef6 72%); }
.landing-parent-bulletin > div i:nth-child(2) { background: linear-gradient(90deg, #a87cf5 88%, #f2eef6 88%); }
.landing-parent-bulletin > div i:nth-child(3) { background: linear-gradient(90deg, #ef80ba 64%, #f2eef6 64%); }
.landing-parent-bulletin > a { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 1px; color: var(--story-purple); font-size: 9px; font-weight: 800; }
.landing-parent-attendance { background: linear-gradient(145deg, #f4fdff, #f8f4ff) !important; box-shadow: 0 10px 25px rgba(19,143,168,.07); }
.landing-parent-attendance > strong { display: block; margin-top: 4px; font-size: 13px; }
.landing-parent-attendance > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.landing-parent-attendance > div span { padding: 12px 8px; border-radius: 12px; background: #f2edff; text-align: center; }
.landing-parent-attendance span b, .landing-parent-attendance span small { display: block; }
.landing-parent-attendance span b { color: var(--story-purple); font-size: 18px; }
.landing-parent-attendance span small { margin-top: 2px; color: #7c7488; font-size: 6px; }
.landing-parent-notice { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin: 12px 30px 0; padding: 11px 13px; border: 1px solid rgba(55,188,211,.25); border-radius: 15px; background: linear-gradient(100deg, #e9fbff, #f7f2ff); }
.landing-parent-notice > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #138fa8; background: white; box-shadow: 0 6px 15px rgba(55,188,211,.14); }
.landing-parent-notice svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-parent-notice small, .landing-parent-notice b { display: block; }
.landing-parent-notice small { color: #138fa8; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.landing-parent-notice b { margin-top: 2px; font-size: 10px; }
.landing-parent-notice em { padding: 6px 8px; border-radius: 999px; color: #6333c0; background: white; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-parent-children { display: grid; grid-template-columns: repeat(2, 1fr) auto; align-items: center; gap: 10px; margin: 14px 30px 28px; padding-top: 14px; border-top: 1px solid #eee9f3; }
.landing-parent-children > span { display: grid; grid-template-columns: 30px 1fr; gap: 1px 8px; }
.landing-parent-children span i { display: grid; grid-row: span 2; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #6335bd; background: #eee6ff; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-parent-children span b { align-self: end; font-size: 8px; }
.landing-parent-children span small { color: #898192; font-size: 7px; }
.landing-parent-children > em { color: var(--story-purple); font-size: 7px; font-style: normal; font-weight: 800; }

.landing-story-updates { overflow: hidden; background: radial-gradient(circle at 10% 15%, rgba(56,214,220,.16), transparent 25%), radial-gradient(circle at 90% 88%, rgba(237,59,157,.14), transparent 28%), #eef7fb; }
.landing-story-updates::before { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(27,98,128,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(27,98,128,.16) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 70% 50%, #000, transparent 72%); content: ""; }
.landing-updates-layout { display: grid; grid-template-columns: minmax(370px, .82fr) minmax(570px, 1.18fr); align-items: center; gap: clamp(55px, 8vw, 110px); }
.landing-updates-copy h2 em { color: #138fa8; font-style: normal; }
.landing-story-trophies { overflow: hidden; color: white; background: radial-gradient(circle at 12% 18%, rgba(56,214,220,.2), transparent 24%), radial-gradient(circle at 88% 75%, rgba(237,59,157,.24), transparent 27%), linear-gradient(145deg, #171125, #2c1852 52%, #4a1d68); }
.landing-trophies-layout { display: grid; grid-template-columns: minmax(350px, .78fr) minmax(580px, 1.22fr); align-items: center; gap: clamp(50px, 7vw, 100px); }
.landing-trophies-copy h2 em { color: #ff9bd0; font-style: normal; }
.landing-trophies-copy > p { color: rgba(255,255,255,.7); }
.landing-trophy-benefits { display: flex; gap: 11px; margin-top: 32px; }
.landing-trophy-benefits > span { flex: 1; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.07); }
.landing-trophy-benefits b, .landing-trophy-benefits small { display: block; }
.landing-trophy-benefits b { color: #ffd46b; font-family: "Eduryo Fredoka", sans-serif; font-size: 25px; }
.landing-trophy-benefits small { margin-top: 3px; color: rgba(255,255,255,.6); font-size: 9px; }
.landing-trophy-showcase { position: relative; padding: 25px; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: rgba(255,255,255,.09); box-shadow: 0 35px 90px rgba(0,0,0,.32); backdrop-filter: blur(18px); transform: rotate(1.2deg); }
.landing-trophy-profile { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }
.landing-trophy-avatar { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid rgba(255,255,255,.5); border-radius: 15px; color: #291445; background: linear-gradient(135deg, #ffd46b, #ff9bd0); font-size: 11px; font-weight: 900; }
.landing-trophy-profile small, .landing-trophy-profile b { display: block; }
.landing-trophy-profile small { color: #ffcf67; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.landing-trophy-profile b { margin-top: 3px; font-size: 16px; }
.landing-trophy-profile em { padding: 8px 11px; border-radius: 999px; color: #2b1742; background: #ffd46b; font-size: 9px; font-style: normal; font-weight: 850; }
.landing-trophy-progress { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; margin-top: 22px; padding: 14px 15px; border-radius: 15px; background: rgba(0,0,0,.16); }
.landing-trophy-progress span b, .landing-trophy-progress span small { display: block; }
.landing-trophy-progress span b { font-size: 12px; }
.landing-trophy-progress span small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 9px; }
.landing-trophy-progress > strong { color: #ffd46b; font-size: 19px; }
.landing-trophy-progress > i { grid-column: 1 / -1; height: 7px; overflow: hidden; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.landing-trophy-progress > i u { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd46b, #ff78bd); }
.landing-trophy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.landing-trophy-grid article { --trophy-color: #ffd46b; display: grid; grid-template-columns: 48px 1fr; gap: 11px; min-height: 125px; padding: 13px; border: 1px solid color-mix(in srgb, var(--trophy-color) 32%, rgba(255,255,255,.12)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--trophy-color) 16%, transparent), rgba(255,255,255,.06)); }
.landing-trophy-grid article.is-blue { --trophy-color: #55d7ee; }
.landing-trophy-grid article.is-pink { --trophy-color: #ff78bd; }
.landing-trophy-grid article.is-green { --trophy-color: #75e2aa; }
.landing-trophy-grid article > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--trophy-color) 20%, rgba(255,255,255,.08)); font-family: "Eduryo Emoji", "Noto Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 25px; }
.landing-trophy-grid small, .landing-trophy-grid b, .landing-trophy-grid p, .landing-trophy-grid em { display: block; }
.landing-trophy-grid small { color: var(--trophy-color); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.landing-trophy-grid b { margin-top: 3px; font-size: 11px; line-height: 1.25; }
.landing-trophy-grid p { margin: 5px 0 0; color: rgba(255,255,255,.62); font-size: 8px; line-height: 1.42; }
.landing-trophy-grid em { margin-top: 5px; color: rgba(255,255,255,.58); font-size: 8px; font-style: normal; font-weight: 750; }
.landing-trophy-ranking { display: grid; gap: 5px; margin-top: 12px; }
.landing-trophy-ranking > span { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 11px; color: rgba(255,255,255,.72); background: rgba(0,0,0,.12); font-size: 9px; }
.landing-trophy-ranking > span.is-current { color: white; background: rgba(255,212,107,.14); box-shadow: inset 3px 0 #ffd46b; }
.landing-trophy-ranking i, .landing-trophy-ranking em { font-style: normal; }
.landing-trophy-ranking i { color: #ffd46b; font-weight: 850; }
.landing-trophy-ranking em { color: rgba(255,255,255,.58); }

.landing-story-security { overflow: hidden; color: white; background: #12101d; text-align: center; }
.landing-security-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.landing-security-content { display: flex; align-items: center; flex-direction: column; }
.landing-security-shield { display: block; width: 126px; height: 140px; margin-bottom: 38px; filter: drop-shadow(0 0 38px rgba(111,53,242,.34)); }
.landing-security-shield svg { display: block; width: 100%; height: 100%; overflow: visible; }
.landing-security-content h2 { max-width: 970px; }
.landing-security-content > p { max-width: 750px; margin: 30px auto 0; color: rgba(255,255,255,.65); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.75; }
.landing-security-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 36px 0; }
.landing-security-points span { padding: 11px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 700; }

.landing-story-final { padding: clamp(110px, 14vw, 190px) 0; background: #fff; text-align: center; }
.landing-story-final .brand-mark { width: 76px; height: 76px; margin: 0 auto 40px; filter: drop-shadow(0 16px 20px rgba(111,53,242,.24)); }
.landing-story-final .brand-mark::before, .landing-story-final .brand-mark::after { display: none; }
.landing-story-final .brand-mark img { width: 100%; height: 100%; opacity: 1; }
.landing-story-final h2 { font-size: clamp(3.2rem, 7vw, 7.2rem); }
.landing-story-final p { margin: 28px auto 34px; color: var(--story-muted); font-size: 17px; }
.landing-story-footer { padding: 28px 0; border-top: 1px solid rgba(23,19,40,.1); color: var(--story-muted); background: white; font-size: 12px; }
.landing-story-footer .landing-story-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.landing-story-footer .landing-footer-brand { display: flex; align-items: center; gap: 10px; }
.landing-footer-brand .brand-mark { width: 38px; height: 38px; box-shadow: 0 5px 14px rgba(111,53,242,.2); }
.landing-footer-brand > span { display: grid; gap: 0; }
.landing-footer-brand strong { color: #4b4657; font-family: "Eduryo Fredoka", "Trebuchet MS", sans-serif; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.landing-footer-brand small { margin-top: 3px; color: var(--story-muted); font-size: 9px; }
.landing-story-footer nav { display: flex; justify-content: flex-end; gap: 22px; font-weight: 600; }
.landing-back-top { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 0; min-height: 46px; overflow: hidden; padding: 4px; border: 1px solid rgba(23,19,40,.2); border-radius: 999px; color: var(--story-ink) !important; background: rgba(255,255,255,.94); box-shadow: 0 12px 32px rgba(30,18,55,.14); backdrop-filter: blur(12px); }
.landing-back-top > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--story-ink); background: transparent; font-size: 18px; font-weight: 500; }
.landing-back-top > b { max-width: 0; overflow: hidden; font-size: 11px; white-space: nowrap; opacity: 0; transition: max-width .2s ease, margin .2s ease, opacity .2s ease; }
.landing-back-top:hover > b, .landing-back-top:focus-visible > b { max-width: 100px; margin: 0 12px 0 9px; opacity: 1; }

@keyframes landing-story-drift-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 35% { transform: translate3d(7vw, 3vh, 0) scale(1.12); } 70% { transform: translate3d(15vw, 10vh, 0) scale(.92); } }
@keyframes landing-story-drift-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 40% { transform: translate3d(-9vw, -4vh, 0) scale(1.14); } 75% { transform: translate3d(-16vw, 5vh, 0) scale(.9); } }
@keyframes landing-story-pulse { 50% { box-shadow: 0 0 0 8px rgba(237,59,157,0); } }
@keyframes landing-story-spin { to { transform: rotate(360deg); } }
@keyframes landing-feature-marquee { to { transform: translate3d(calc(-50% - var(--landing-marquee-offset)), 0, 0); } }

@media (max-width: 980px) {
    .landing-story-split, .landing-fwb-layout, .landing-mobile-layout { grid-template-columns: 1fr; }
    .landing-story-split, .landing-fwb-layout { gap: 75px; }
    .landing-story-heading { grid-template-columns: 1fr; gap: 24px; }
    .landing-story-heading > p { margin-top: 0; }
    .landing-core-layout { grid-template-columns: 1fr; }
    .landing-core-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
    .landing-year-visual { width: min(650px, 100%); margin-inline: auto; }
    .landing-belgium-orbit { margin-inline: auto; }
    .landing-teacher-heading { grid-template-columns: 1fr; gap: 24px; }
    .landing-tools-track { grid-template-columns: repeat(5, 230px); overflow: visible; }
    .landing-admin-layout .landing-story-copy { max-width: 700px; }
    .landing-mobile-layout .landing-devices { order: 2; width: min(650px, 100%); margin-inline: auto; }
    .landing-roles-heading, .landing-roles-layout { grid-template-columns: 1fr; }
    .landing-roles-heading { gap: 24px; }
    .landing-roles-heading > p { margin: 0; }
    .landing-role-list { grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
    .landing-role-list .is-parent { margin-top: 0; }
    .landing-parent-portal { width: min(720px, 100%); margin-inline: auto; }
    .landing-updates-layout { grid-template-columns: 1fr; }
    .landing-updates-copy { max-width: 720px; }
    .landing-trophies-layout { grid-template-columns: 1fr; }
    .landing-trophies-copy { max-width: 720px; }
    .landing-trophy-showcase { width: min(720px, 100%); margin-inline: auto; transform: none; }
}

@media (min-width: 641px) and (max-width: 980px) {
    .landing-story-hero { min-height: 82svh; padding-inline: 20px; }
    .landing-story-hero-inner { transform: translateY(-48px); }
    .landing-feature-streams.is-orbit-ready .landing-feature-card,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact { grid-template-columns: 46px minmax(0, 1fr); width: clamp(230px, 31vw, 275px); min-height: 108px; padding: 14px; border-radius: 19px; }
    .landing-feature-card > i { width: 46px; height: 46px; border-radius: 14px; }
    .landing-feature-card > i svg { width: 23px; height: 23px; }
    .landing-feature-card b { font-size: 14px; }
    .landing-feature-card small { font-size: 9px; }
    .landing-feature-card > em { right: 12px; bottom: 11px; padding: 4px 9px; font-size: 8px; }
}

@media (max-width: 640px) {
    .landing-story-wrap { width: min(100% - 28px, 1180px); }
    .landing-story-section { padding: 95px 0; }
    .landing-story-hero { display: flex; flex-direction: column; justify-content: center; min-height: 90svh; padding: 48px 14px 36px; background: transparent; }
    .landing-story-hero::before, .landing-story-hero::after, .landing-story-hero > .landing-story-glow { display: none; }
    .landing-feature-streams { position: relative; inset: auto; order: 2; flex: 0 0 154px; width: calc(100% + 28px); margin: 24px -14px 0; overflow-x: auto; overflow-y: hidden; pointer-events: auto; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
    .landing-feature-streams::-webkit-scrollbar { display: none; }
    .landing-feature-streams:focus-visible { outline: 2px solid var(--story-purple); outline-offset: -2px; }
    .landing-feature-row { position: relative; bottom: auto; left: auto; width: max-content; padding: 12px max(0px, calc((100vw - clamp(260px, 78vw, 304px)) / 2)); }
    .landing-feature-track, .landing-feature-group { gap: 12px; }
    .landing-feature-track { --landing-marquee-offset: 6px; animation: none; }
    .landing-feature-card { grid-template-columns: 42px minmax(0, 1fr); width: 230px; min-height: 104px; padding: 13px; border-radius: 17px; opacity: .94; box-shadow: 0 12px 28px rgba(63,35,116,.08); }
    .landing-feature-card.is-wide { width: 270px; }
    .landing-feature-card.is-compact { width: 205px; }
    .landing-feature-card > i { width: 42px; height: 42px; border-radius: 12px; font-size: 9px; }
    .landing-feature-card > i svg { width: 21px; height: 21px; }
    .landing-feature-card b { font-size: 13px; }
    .landing-feature-card small { font-size: 9px; }
    .landing-feature-card > em { right: 10px; bottom: 10px; padding: 4px 9px; font-size: 9px; }
    .landing-story-hero-inner { transform: none; }
    .landing-story-eyebrow { max-width: 90%; font-size: 9px; }
    .landing-story-logo { align-items: center; gap: 11px; }
    .landing-story-logo .brand-mark { width: 59px; height: 59px; }
    .landing-story-logo { padding-inline: 6px; }
    .landing-story-logo strong { font-size: clamp(3.7rem, 22vw, 5.7rem); }
    .landing-story-hero h1 { font-size: 1.35rem; }
    .landing-story-actions { flex-direction: column; }
    .landing-story-button { width: 100%; }
    .landing-contact-panel { padding: 32px 20px 22px; }
    .landing-contact-fields { grid-template-columns: 1fr; }
    .landing-contact-fields label.is-wide { grid-column: auto; }
    .landing-contact-actions { align-items: stretch; flex-direction: column; }
    .landing-contact-actions small { max-width: none; }
    .landing-story-copy h2, .landing-story-heading h2, .landing-teacher-heading h2, .landing-security-content h2 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
    .landing-year-visual { min-height: 410px; }
    .landing-year-visual > strong { font-size: 29vw; }
    .landing-year-window { grid-template-columns: 48px 1fr; width: 96%; height: 250px; }
    .landing-year-window-sidebar { gap: 20px; padding: 12px 8px; }
    .landing-year-window-sidebar b { width: 31px; height: 31px; }
    .landing-year-window-sidebar i { width: 22px; }
    .landing-year-window-main { padding: 52px 16px 20px; }
    .landing-dashboard-heading strong { font-size: 15px; }
    .landing-dashboard-heading > em { display: none; }
    .landing-year-window-main > .landing-dashboard-cards { margin-top: 18px; }
    .landing-dashboard-cards > i { min-height: 73px; padding: 9px; }
    .landing-dashboard-cards b { font-size: 16px; }
    .landing-dashboard-cards em { font-size: 6px; }
    .landing-dashboard-bottom { display: none; }
    .landing-fwb-layout { grid-template-columns: 1fr; }
    .landing-belgium-orbit { width: 290px; }
    .landing-belgium-flag { width: 125px; height: 88px; }
    .landing-core-features { grid-template-columns: 1fr; }
    .landing-encoding-screen { border-radius: 20px; transform: none; }
    .landing-screen-top { grid-template-columns: auto 1fr; }
    .landing-screen-top em { display: none; }
    .landing-screen-body { grid-template-columns: 43px 1fr; min-height: 370px; }
    .landing-screen-body aside { gap: 20px; padding: 12px 6px; }
    .landing-screen-body aside strong { width: 29px; height: 29px; }
    .landing-screen-body aside i { width: 22px; }
    .landing-screen-content { padding: 18px 13px 25px; }
    .landing-screen-context { display: none; }
    .landing-screen-content h3 { font-size: 18px; }
    .landing-screen-tabs span { padding-inline: 2px; font-size: 6px; }
    .landing-student-row { grid-template-columns: minmax(100px, 1fr) 35px 62px; font-size: 9px; }
    .landing-student-row span i { display: none; }
    .landing-tools-track { grid-template-columns: repeat(5, 215px); }
    .landing-tools-track article { min-height: 220px; padding: 24px; }
    .landing-import-panel { padding: 22px 18px; }
    .landing-import-title { grid-template-columns: 42px 1fr; }
    .landing-import-title > span { width: 42px; height: 42px; }
    .landing-import-title > b { grid-column: 2; justify-self: start; }
    .landing-admin-stats { gap: 24px; }
    .landing-devices { min-height: 460px; transform: scale(.86); transform-origin: top center; }
    .landing-tablet { width: 92%; height: 390px; }
    .landing-phone { width: 180px; height: 380px; }
    .landing-phone section > span { min-height: 61px; }
    .landing-role-list { grid-template-columns: 1fr; }
    .landing-roles-heading h2 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
    .landing-roles-layout { margin-top: 45px; }
    .landing-parent-portal { border-radius: 20px; transform: none; }
    .landing-parent-top { height: 58px; padding-inline: 16px; }
    .landing-parent-welcome { padding: 22px 17px 16px; }
    .landing-parent-grid { grid-template-columns: 1fr; padding-inline: 17px; }
    .landing-parent-notice { grid-template-columns: 32px 1fr; margin-inline: 17px; }
    .landing-parent-notice > em { display: none; }
    .landing-parent-children { grid-template-columns: 1fr 1fr; margin: 13px 17px 22px; }
    .landing-parent-children > em { grid-column: 1 / -1; }
    .landing-trophy-benefits { flex-wrap: wrap; }
    .landing-trophy-benefits > span { flex-basis: calc(50% - 6px); }
    .landing-trophy-showcase { padding: 16px; border-radius: 21px; }
    .landing-trophy-profile { grid-template-columns: 42px 1fr; }
    .landing-trophy-avatar { width: 42px; height: 42px; }
    .landing-trophy-profile > em { grid-column: 2; justify-self: start; }
    .landing-trophy-grid { grid-template-columns: 1fr; }
    .landing-trophy-ranking > span { grid-template-columns: 30px 1fr auto; }
    .landing-security-points { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
    .landing-story-final h2 { font-size: clamp(3rem, 16vw, 4.8rem); }
    .landing-story-footer .landing-story-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .landing-story-footer nav { justify-content: center; }
    .landing-back-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-story-document { scroll-behavior: auto; }
    .landing-story-glow, .landing-story-eyebrow i, .landing-belgium-orbit::after, .landing-feature-track { animation: none; }
    .landing-story-button { transition: 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; }
.class-editor-layout .form-card > .form-field { margin-bottom:1.15rem; }
.class-active-toggle { display:flex; align-items:center; justify-content:flex-start; gap:.65rem; }
.class-active-toggle label { margin:0; }
.class-active-toggle input { flex:0 0 auto; width:auto; margin:0; }
.class-active-field .helptext { display:block; margin-top:.35rem; }
.special-feature-toggle { margin-block:1.55rem !important; padding:1rem 1.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; } }

@media (max-width: 900px) {
    .platform-school-grid { grid-template-columns: 1fr; }
    .progression-grid { grid-template-columns: 1fr; }
    .self-assignment-settings-card { align-items: flex-start; flex-direction: column; }
    .career-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .achievement-reset-card { align-items: stretch; flex-direction: column; }
    .achievement-reset-card form { min-width: 0; }
    .leaderboard-row { grid-template-columns: 40px 42px minmax(0, 1fr); }
    .leaderboard-row > span:not(.leaderboard-avatar):not(.leaderboard-name) { grid-column: 3; }
}

@media (max-width: 600px) {
    .career-stat-grid { grid-template-columns: 1fr; }
    .achievement-hero, .achievement-hero-actions { align-items: flex-start; flex-direction: column; }
    .achievement-reset-card form { grid-template-columns: 1fr; }
    .achievement-reset-card form label { grid-column: auto; }
    .self-assignment-class-card { padding: 0; }
    .self-assignment-class-card > summary { min-height: 68px; padding: 12px 14px; }
    .self-assignment-homeroom { width: 100%; }
    .seasonal-fall span:nth-child(n + 13) { display: none; }
    .student-summary-selector { flex-wrap: wrap; }
    .student-summary-selector > span { justify-self: start; }
    .progression-card-header { align-items: flex-start; flex-direction: column; }
    .progression-course-details li { grid-template-columns: auto minmax(0, 1fr); }
    .progression-course-details li small { grid-column: 2; }
}

/* Le contenu disponible, et non l'écran, détermine le passage en cartes. */
@container app-content (max-width: 720px) {
    .main-content, .main-content > *, .card, .page-header > *, .page-actions { min-width: 0; max-width: 100%; }
    .card { padding: 18px; }
    .self-assignment-class-card,
    .management-card,
    .encoding-class-accordion-item,
    .dashboard-progress-card,
    .encoding-student-card,
    .encoding-special-student-card { padding: 0; }
    .encoding-class-accordion-item > summary { padding: 18px; }
    .encoding-class-accordion-item > .encoding-course-grid { padding: 0 12px 12px; }
    .encoding-class-accordion-item > .encoding-course-grid .encoding-course-card { margin-top: 12px; padding: 16px; }
    .encoding-homeroom-toolbar { margin: 12px; }
    .encoding-course-heading { gap: 10px; }
    .encoding-course-heading h2 { font-size: 21px; line-height: 1.22; }
    .encoding-student-header { padding: 14px; }
    .encoding-student-body { gap: 16px; padding: 16px 14px 18px; }
    .page-header .page-actions { width: 100%; }
    .page-header .page-actions .button { flex: 1 1 auto; }
    .page-header:not(.encoding-course-page-header) > .button,
    .page-header:not(.encoding-course-page-header) > .disabled-action-tooltip,
    .page-header:not(.encoding-course-page-header) > .disabled-action-tooltip > .button { width: 100%; }
    .filters > input, .filters > select, .filters > form,
    .achievement-filters > input, .achievement-filters > select { flex: 1 1 100%; width: 100%; max-width: 100% !important; }
    .pagination-summary { flex-basis: 100%; margin-right: 0; text-align: center; }
    img, svg, video { max-width: 100%; }
    pre, code, .activation-link { overflow-wrap: anywhere; word-break: break-word; }

    .table-wrap:has(> .responsive-data-table) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .responsive-data-table,
    .responsive-data-table tbody { display: block; width: 100%; }
    .responsive-data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .responsive-data-table tbody { display: grid; gap: 12px; }
    .responsive-data-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 10px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
    .responsive-data-table tbody td { display: grid; grid-template-columns: minmax(92px, .46fr) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent); overflow-wrap: anywhere; }
    .responsive-data-table tbody td::before { content: attr(data-label); color: var(--text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
    .responsive-data-table tbody td[colspan] { display: block; grid-column: 1 / -1; border-bottom: 0; }
    .responsive-data-table tbody td[colspan]::before { content: none; }
    .responsive-data-table tbody tr > td:nth-last-child(-n + 2) { border-bottom-color: transparent; }
    .responsive-data-table .table-actions { justify-content: flex-end; }
    .responsive-data-table tbody td.table-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 7px; }
    .responsive-data-table tbody td.table-actions::before { flex: 1 1 auto; min-width: 92px; }
    .responsive-data-table .numeric, .responsive-data-table .center { text-align: left; }
    .responsive-data-table .inactive-row td:first-child { box-shadow: none; }
    .responsive-data-table .inactive-row { border-color: color-mix(in srgb, var(--error) 48%, var(--border)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--error) 72%, transparent), var(--shadow); }
}

/* Use the same list cards when overflow is detected before the CSS breakpoint. */
    .table-wrap:has(> .responsive-data-table.is-card-layout) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .responsive-data-table.is-card-layout,
    .responsive-data-table.is-card-layout tbody { display: block; width: 100%; }
    .responsive-data-table.is-card-layout thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .responsive-data-table.is-card-layout tbody { display: grid; gap: 12px; }
    .responsive-data-table.is-card-layout tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 10px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
    .responsive-data-table.is-card-layout tbody td { display: grid; grid-template-columns: minmax(92px, .46fr) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent); overflow-wrap: anywhere; }
    .responsive-data-table.is-card-layout tbody td::before { content: attr(data-label); color: var(--text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
    .responsive-data-table.is-card-layout tbody td[colspan] { display: block; grid-column: 1 / -1; border-bottom: 0; }
    .responsive-data-table.is-card-layout tbody td[colspan]::before { content: none; }
    .responsive-data-table.is-card-layout tbody tr > td:nth-last-child(-n + 2) { border-bottom-color: transparent; }
    .responsive-data-table.is-card-layout .table-actions { justify-content: flex-end; }
    .responsive-data-table.is-card-layout tbody td.table-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 7px; }
    .responsive-data-table.is-card-layout tbody td.table-actions::before { flex: 1 1 auto; min-width: 92px; }
    .responsive-data-table.is-card-layout .numeric, .responsive-data-table.is-card-layout .center { text-align: left; }
    .responsive-data-table.is-card-layout .inactive-row td:first-child { box-shadow: none; }
    .responsive-data-table.is-card-layout .inactive-row { border-color: color-mix(in srgb, var(--error) 48%, var(--border)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--error) 72%, transparent), var(--shadow); }
@container app-content (max-width: 480px) {
    .responsive-data-table.is-card-layout tbody tr { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .responsive-data-table tbody tr { grid-template-columns: 1fr; }
    .responsive-data-table tbody tr > td { border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent); }
    .responsive-data-table tbody tr > td:last-child { border-bottom-color: transparent; }
    .page-actions > .button, .page-actions > form { width: 100%; }
    .page-actions > form > .button { width: 100%; }
    .encoding-course-periods > .button,
    .encoding-homeroom-toolbar .page-actions > .button { flex: 0 0 auto; width: auto; }
}

.teacher-comments-header { margin-bottom: 22px; }
.teacher-comments-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); align-items: stretch; gap: 22px; }
.teacher-comment-create-card { position: relative; align-self: stretch; height: 100%; padding: 24px; border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 19%, transparent), transparent 34%), linear-gradient(150deg, color-mix(in srgb, var(--primary) 15%, var(--surface)), var(--surface) 64%); }

/* Harmonisation visuelle des écrans applicatifs. */
body:not(.landing-body) .button:not(.button-secondary):not(.button-danger):not(.button-ghost):not(.period-toggle-button) {
    isolation: isolate;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--primary) 72%, var(--primary-hover));
    background-color: var(--primary);
    background-image: linear-gradient(115deg, var(--primary) 0%, var(--primary-hover) 100%);
    background-clip: border-box;
    -webkit-background-clip: border-box;
}
body:not(.landing-body) .button:not(.button-secondary):not(.button-danger):not(.button-ghost):not(.period-toggle-button):hover {
    background-color: var(--primary-hover);
    background-image: linear-gradient(115deg, var(--primary-hover) 0%, var(--primary) 100%);
}

.settings-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 18px; }
.settings-overview-side { display: grid; grid-template-rows: minmax(0, 1fr); gap: 18px; min-width: 0; overflow: visible; }
@media (max-width: 1350px) {
    .settings-overview-grid { grid-template-columns: minmax(0, 1fr); }
}
.settings-panel { --settings-panel-fill: linear-gradient(var(--surface), var(--surface)); position: relative; overflow: hidden; border: 1px solid var(--border); border-top: 4px solid transparent; border-top-color: transparent !important; background: var(--settings-panel-fill) padding-box, linear-gradient(90deg, var(--primary), var(--accent)) border-box !important; }
.settings-grid > .card::before,
.settings-panel::before { content: none; }
.settings-establishment-card { --settings-panel-fill: linear-gradient(145deg, color-mix(in srgb, var(--decorative-2) 9%, var(--surface)), var(--surface) 66%); height: 100%; }
.settings-years-card { --settings-panel-fill: linear-gradient(145deg, color-mix(in srgb, var(--decorative-3) 9%, var(--surface)), var(--surface) 66%); min-height: 0; }
.settings-year-row { align-items: flex-start; }
.settings-year-row > span:first-child { flex: 1 1 auto; min-width: 120px; }
.settings-preferences-card { --settings-panel-fill: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); margin-top: 18px; }
.settings-preference-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.settings-preferences-card { container-type: inline-size; }
.settings-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 18px 0; }
.settings-feature-option { --feature-color: var(--primary); display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; align-content: start; gap: 12px; min-width: 0; padding: 17px; border: 1px solid color-mix(in srgb, var(--feature-color) 38%, var(--border)); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--feature-color) 24%, var(--surface)), color-mix(in srgb, var(--feature-color) 10%, var(--surface))); }
.settings-feature-option:nth-child(1) { --feature-color: var(--decorative-4); }
.settings-feature-option:nth-child(2) { --feature-color: var(--decorative-5); }
.settings-feature-option:nth-child(3) { --feature-color: var(--decorative-2); }
.settings-feature-option:nth-child(4) { --feature-color: var(--decorative-3); }
.settings-feature-option:nth-child(5) { --feature-color: var(--decorative-1); }
.settings-feature-option:nth-child(6) { --feature-color: var(--decorative-6); }
.settings-feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--feature-color) 22%, var(--surface)); font-size: 23px; }
.settings-feature-option label { display: block; margin: 1px 0 5px; font-weight: 600; }
.settings-feature-option p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.settings-feature-option select { grid-column: 1 / -1; width: 100%; min-width: 0; border: 1px solid color-mix(in srgb, var(--feature-color) 38%, var(--border)); font-family: inherit; font-size: 14px; font-weight: 500; }
.settings-teacher-pack { margin: 20px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.settings-teacher-pack > summary { padding: 16px; color: var(--primary); cursor: pointer; }
.settings-teacher-pack > summary span { margin-left: 12px; color: var(--text-secondary); font-size: 13px; }
.settings-teacher-pack > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: var(--radius); }
.settings-teacher-pack > .settings-feature-grid { padding: 0 14px 14px; margin: 0; }
@container (min-width: 640px) {
    .settings-preferences-card .settings-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1000px) {
    .settings-preferences-card .settings-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .settings-teacher-pack > summary span { display: block; margin: 5px 0 0 18px; }
}
.settings-feature-option .errorlist { grid-column: 1 / -1; }
.settings-feature-option .external-final-evaluation-classes { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 12px; }
.external-final-evaluation-classes[hidden] { display: none; }
.settings-feature-option .external-final-evaluation-classes p { min-height: 0; margin-bottom: 10px; }
.external-final-evaluation-classes label { display: flex; align-items: center; gap: 8px; }
.external-final-evaluation-classes input { width: auto; }
.external-final-evaluation-classes { margin: 0 0 22px; padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-secondary); }
.external-final-evaluation-classes legend { padding: 0 7px; font-weight: 600; }
.external-final-evaluation-classes > p { margin: 0 0 10px; font-size: 12px; }
.settings-overview-side .self-assignment-settings-card { --settings-panel-fill: linear-gradient(135deg, color-mix(in srgb, var(--decorative-2) 16%, var(--surface)), color-mix(in srgb, var(--primary) 11%, var(--surface))); align-items: flex-start; flex-direction: column; justify-content: center; height: 100%; margin: 0; }
.settings-overview-side .self-assignment-settings-card form { margin-top: 13px; }
.self-assignment-settings-card { overflow: visible !important; }
.self-assignment-settings-card .disabled-action-tooltip [role="tooltip"] { right: auto; left: 0; z-index: 50; }

.class-card { --class-card-color: var(--decorative-1); border-color: color-mix(in srgb, var(--class-card-color) 48%, var(--border)); background: radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--class-card-color) 22%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--class-card-color) 20%, var(--surface)), var(--surface) 78%); box-shadow: inset 5px 0 0 color-mix(in srgb, var(--class-card-color) 82%, transparent), var(--shadow); }
.card-grid > .class-card:nth-child(4n+2) { --class-card-color: var(--decorative-2); }
.card-grid > .class-card:nth-child(4n+3) { --class-card-color: var(--decorative-3); }
.card-grid > .class-card:nth-child(4n+4) { --class-card-color: var(--decorative-4); }
.class-card:hover { border-color: color-mix(in srgb, var(--class-card-color) 62%, var(--border)); box-shadow: inset 4px 0 0 var(--class-card-color), 0 15px 32px color-mix(in srgb, var(--class-card-color) 14%, transparent); }
.class-card .eyebrow { color: color-mix(in srgb, var(--class-card-color) 78%, var(--text)); }
.class-card-main .badge { color: var(--text); background: color-mix(in srgb, var(--class-card-color) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--class-card-color) 42%, var(--border)); font-weight: 600; }

.parent-child-card { --child-card-color: var(--decorative-1); border-color: color-mix(in srgb, var(--child-card-color) 52%, var(--border)); background: radial-gradient(circle at 96% 5%, color-mix(in srgb, var(--child-card-color) 25%, transparent), transparent 31%), linear-gradient(145deg, color-mix(in srgb, var(--child-card-color) 22%, var(--surface)), var(--surface) 72%); box-shadow: inset 0 5px 0 color-mix(in srgb, var(--child-card-color) 82%, transparent), var(--shadow); }
.parent-child-card:nth-child(3n+2) { --child-card-color: var(--decorative-2); }
.parent-child-card:nth-child(3n+3) { --child-card-color: var(--decorative-3); }
.parent-child-card::before { background: radial-gradient(circle, color-mix(in srgb, var(--child-card-color) 34%, transparent), transparent 68%); }
.parent-child-card .eyebrow { color: color-mix(in srgb, var(--child-card-color) 76%, var(--text)); }

.student-list-filters { align-items: center; }
.memory-game-filter-action { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 15px; border: 0; border-radius: 13px; outline: 0; color: white; background: linear-gradient(125deg, #087b65 0%, #176f91 58%, #2858a8 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px rgba(16, 120, 101, .22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.memory-game-filter-action > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: rgba(255,255,255,.15); font-size: 17px; }
.memory-game-filter-action strong { white-space: nowrap; font-size: 13px; }
.memory-game-filter-action:hover { color: white; filter: brightness(1.09); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16, 120, 101, .28); }
.memory-game-filter-action:focus-visible { outline: 3px solid color-mix(in srgb, #20bfa0 42%, transparent); outline-offset: 3px; }

.personal-achievement-page::before { position: fixed; z-index: -1; top: 7%; right: 3%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--decorative-4) 12%, transparent), transparent 70%); content: ""; pointer-events: none; }
.achievement-hero { background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--decorative-4) 26%, transparent), transparent 28%), linear-gradient(120deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), color-mix(in srgb, var(--accent) 17%, var(--surface))); }
.career-stat-grid article { --career-color: var(--decorative-1); border-color: color-mix(in srgb, var(--career-color) 40%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--career-color) 13%, var(--surface)), var(--surface)); }
.career-stat-grid article:nth-child(2) { --career-color: var(--decorative-2); }
.career-stat-grid article:nth-child(3) { --career-color: var(--decorative-3); }
.career-stat-grid article:nth-child(4) { --career-color: var(--decorative-4); }
.career-stat-grid article > span { color: var(--career-color); background: color-mix(in srgb, var(--career-color) 20%, var(--surface)); }
.personal-achievement-collection { padding: 24px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 20px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 19%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
.personal-achievement-collection { container: trophy-collection / inline-size; }
@container trophy-collection (max-width: 1100px) {
    .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container trophy-collection (max-width: 720px) {
    .achievement-grid { grid-template-columns: minmax(0, 1fr); }
}
@container trophy-collection (max-width: 420px) {
    .achievement-card { flex-direction: column; }
}
.achievement-copy > .achievement-status { display: block; padding-right: 62px; }
.achievement-card.is-unlocked { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--achievement-color) 28%, transparent), transparent 42%), linear-gradient(140deg, color-mix(in srgb, var(--achievement-color) 21%, var(--surface)), var(--surface)); }

.colleague-achievement-page { max-width: 1180px; margin-inline: auto; }
.colleague-achievement-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr) auto; align-items: center; gap: 24px; padding: 28px; overflow: hidden; border-color: color-mix(in srgb, var(--decorative-4) 50%, var(--border)); background: radial-gradient(circle at 94% 0, color-mix(in srgb, var(--decorative-4) 25%, transparent), transparent 28%), linear-gradient(125deg, color-mix(in srgb, var(--primary) 21%, var(--surface)), color-mix(in srgb, var(--decorative-4) 12%, var(--surface))); }
.colleague-achievement-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.colleague-achievement-identity h1 { margin: 4px 0; }
.colleague-achievement-identity p { margin: 0; color: var(--text-secondary); }
.colleague-achievement-avatar { display: grid; place-items: center; flex: 0 0 76px; width: 76px; height: 76px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--decorative-4) 54%, white); border-radius: 23px; color: white; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 22%, transparent); font-size: 30px; font-weight: 600; }
.colleague-achievement-avatar img { width: 100%; height: 100%; object-fit: cover; }
.colleague-achievement-progress { display: grid; gap: 6px; min-width: 210px; }
.colleague-achievement-progress span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.colleague-achievement-progress strong { color: color-mix(in srgb, #d8911e 74%, var(--text)); font-size: 32px; }
.colleague-achievement-progress i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--border) 74%, transparent); }
.colleague-achievement-progress i span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--decorative-4), var(--accent)); }
.colleague-showcase { margin-top: 28px; }
.colleague-trophy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.colleague-trophy-card { --achievement-color: var(--decorative-1); position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; min-height: 160px; padding: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--achievement-color) 48%, var(--border)); border-radius: 18px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--achievement-color) 26%, transparent), transparent 38%), linear-gradient(140deg, color-mix(in srgb, var(--achievement-color) 16%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
.colleague-trophy-card.tone-amber { --achievement-color: var(--decorative-4); }
.colleague-trophy-card.tone-green { --achievement-color: var(--decorative-5); }
.colleague-trophy-card.tone-rose { --achievement-color: var(--decorative-3); }
.colleague-trophy-card.tone-blue { --achievement-color: var(--decorative-2); }
.colleague-trophy-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; background: color-mix(in srgb, var(--achievement-color) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--achievement-color) 40%, transparent); font-size: 33px; }
.colleague-trophy-card h3 { margin: 5px 0; }
.colleague-trophy-card p { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.colleague-trophy-card small { color: var(--achievement-color); font-weight: 600; }
.colleague-trophy-points { position: absolute; top: 15px; right: 15px; padding: 5px 8px; border-radius: 999px; color: var(--achievement-color); background: color-mix(in srgb, var(--achievement-color) 16%, var(--surface)); font-size: 11px; }

@media (max-width: 1000px) {
    .settings-overview-grid, .settings-preference-fields { grid-template-columns: 1fr; }
    .settings-feature-grid { grid-template-columns: 1fr; }
    .settings-feature-option p { min-height: 0; }
    .colleague-achievement-hero { grid-template-columns: 1fr auto; }
    .colleague-achievement-progress { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .student-list-filters .memory-game-filter-action { flex: 1 1 100%; justify-content: center; order: 3; width: 100%; }
    .colleague-achievement-hero { grid-template-columns: 1fr; }
    .colleague-achievement-hero > .button { justify-self: start; }
    .colleague-trophy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .personal-achievement-page .achievement-hero { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 10px; padding: 14px; }
    .personal-achievement-page .achievement-hero h1 { margin: 0; font-size: 25px; }
    .personal-achievement-page .achievement-hero p { display: none; }
    .personal-achievement-page .achievement-hero-actions { flex-direction: row; align-items: center; margin-left: auto; }
    .personal-achievement-page .achievement-level { min-width: 76px; padding: 6px 9px; }
    .personal-achievement-page .achievement-level strong { font-size: 20px; }
    .personal-achievement-page .achievement-level small { display: none; }
    .career-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
    .career-stat-grid article { grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; padding: 9px; }
    .career-stat-grid article > span { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
    .career-stat-grid strong { font-size: 18px; line-height: 1.1; }
    .career-stat-grid small { font-size: 11px; line-height: 1.2; }
    .achievement-section, .colleague-leaderboard, .colleague-showcase { margin-top: 18px; }
    .personal-achievement-collection { padding: 12px; }
    .personal-achievement-collection > .section-heading { gap: 7px; margin: 0 0 11px; }
    .personal-achievement-collection > .section-heading h2 { margin: 0; font-size: 20px; }
    .personal-achievement-collection > .section-heading .badge { font-size: 11px; }
    .achievement-filters { gap: 7px; margin-bottom: 12px; }
    .achievement-filters input, .achievement-filters select { flex: 1 1 100%; max-width: none; min-height: 42px; }
    .achievement-category + .achievement-category { margin-top: 14px; }
    .achievement-category-title { margin-bottom: 7px; }
    .achievement-grid { gap: 8px; }
    .personal-achievement-page .achievement-card { flex-direction: row; gap: 10px; min-height: 0; padding: 11px; }
    .personal-achievement-page .achievement-illustration { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
    .personal-achievement-page .achievement-copy { padding-bottom: 0; }
    .personal-achievement-page .achievement-card h3 { margin: 4px 0 3px; font-size: 15px; line-height: 1.2; }
    .personal-achievement-page .achievement-card p { margin-bottom: 3px; font-size: 12px; line-height: 1.35; }
    .personal-achievement-page .achievement-edit-link { position: static; margin-top: 6px; }
    .achievement-show-more { margin-top: 12px; }
    .colleague-leaderboard { padding: 14px; }
    .colleague-leaderboard > .section-heading { align-items: center; gap: 8px; margin: 0; }
    .colleague-leaderboard > .section-heading h2 { margin: 0; font-size: 17px; }
    .achievement-leaderboard-toggle { flex: 0 0 auto; min-height: 44px; padding-inline: 9px; font-size: 11px; }
    .colleague-leaderboard #achievement-leaderboard-content:not([hidden]) { margin-top: 12px; }
    .leaderboard-row { gap: 6px; padding: 8px; }
    .colleague-achievement-hero { gap: 12px; padding: 14px; }
    .colleague-achievement-avatar { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 21px; }
    .colleague-achievement-identity { gap: 10px; }
    .colleague-achievement-identity h1 { font-size: 23px; }
    .colleague-achievement-identity p { display: none; }
    .colleague-achievement-progress { gap: 3px; min-width: 0; }
    .colleague-achievement-progress strong { font-size: 22px; }
    .colleague-showcase > .section-heading { margin: 0 0 12px; }
    .colleague-showcase > .section-heading h2 { margin: 0; font-size: 20px; }
    .colleague-trophy-grid { gap: 8px; }
    .colleague-trophy-card { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 11px; }
    .colleague-trophy-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
    .colleague-trophy-card h3 { margin: 4px 0 3px; padding-right: 48px; font-size: 15px; line-height: 1.2; }
    .colleague-trophy-card p { margin-bottom: 3px; font-size: 12px; line-height: 1.35; }
    .colleague-trophy-points { top: 10px; right: 10px; padding: 3px 5px; }
}
.teacher-comment-card-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.teacher-comment-card-heading h2 { margin: 3px 0 0; }
.teacher-comment-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); font-size: 23px; }
.teacher-comment-create-card textarea, .teacher-comment-edit-card textarea { min-height: 124px; resize: vertical; }
.teacher-comment-create-card .button { width: 100%; }
.teacher-comment-library { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 24px; border-color: color-mix(in srgb, var(--decorative-2) 34%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--decorative-2) 16%, transparent), transparent 34%), linear-gradient(150deg, color-mix(in srgb, var(--decorative-2) 10%, var(--surface)), var(--surface) 66%); }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-heading-row h2 { margin: 4px 0 0; }
.teacher-comment-grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teacher-comment-preset-card { --comment-card-color: var(--decorative-1); display: flex; flex-direction: column; min-height: 210px; padding: 20px; overflow: hidden; border-color: color-mix(in srgb, var(--comment-card-color) 42%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--comment-card-color) 14%, var(--surface)), var(--surface) 72%); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--comment-card-color) 72%, transparent), var(--shadow); }
.teacher-comment-preset-card:nth-child(3n+2) { --comment-card-color: var(--decorative-2); }
.teacher-comment-preset-card:nth-child(3n+3) { --comment-card-color: var(--decorative-3); }
.teacher-comment-preset-card > header { display: flex; align-items: center; gap: 12px; }
.teacher-comment-preset-card h3 { margin: 0 0 2px; }
.teacher-comment-preset-card header small { color: var(--text-secondary); }
.teacher-comment-preset-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-secondary)); }
.teacher-comment-preset-card > p { flex: 1; margin: 18px 0; color: var(--text-secondary); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.teacher-comment-preset-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.teacher-comment-preset-card > footer form { margin: 0; }
.teacher-comments-empty { grid-column: 1 / -1; min-height: 260px; height: 100%; border: 1px dashed color-mix(in srgb, #2ba9ce 32%, var(--border)); border-radius: 16px; background: color-mix(in srgb, #2ba9ce 5%, var(--surface)); }
.teacher-comments-empty > span { display: block; margin-bottom: 10px; font-size: 34px; }
.teacher-comment-edit-card { max-width: 820px; }

@media (max-width: 1050px) {
    .teacher-comments-layout { grid-template-columns: 1fr; }
    .teacher-comment-create-card { position: static; }
}

@media (max-width: 640px) {
    .teacher-comment-grid { grid-template-columns: 1fr; }
    .comment-editor-heading { align-items: flex-start; }
}

/* Accents plus affirmés dans le thème clair, sans colorer les grandes zones
   de lecture. */
html[data-theme="light"] .bulk-bulletin-card,
html[data-theme="system"] .bulk-bulletin-card {
    border-color: color-mix(in srgb, var(--primary) 43%, var(--border));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 21%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), var(--surface) 72%);
}
html[data-theme="light"] .bulletin-generation-job,
html[data-theme="system"] .bulletin-generation-job {
    border-color: color-mix(in srgb, var(--decorative-2) 35%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--decorative-2) 12%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface)));
}
html[data-theme="light"] .achievement-hero,
html[data-theme="system"] .achievement-hero {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--decorative-4) 34%, transparent), transparent 29%), linear-gradient(120deg, color-mix(in srgb, var(--primary) 34%, var(--surface)), color-mix(in srgb, var(--accent) 25%, var(--surface)));
}
html[data-theme="light"] .career-stat-grid article,
html[data-theme="system"] .career-stat-grid article {
    background: linear-gradient(135deg, color-mix(in srgb, var(--career-color) 22%, var(--surface)), var(--surface));
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .bulk-bulletin-card { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface))); }
    html[data-theme="system"] .bulletin-generation-job { background: color-mix(in srgb, var(--surface) 84%, transparent); }
    html[data-theme="system"] .achievement-hero { background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--decorative-4) 26%, transparent), transparent 28%), linear-gradient(120deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), color-mix(in srgb, var(--accent) 17%, var(--surface))); }
    html[data-theme="system"] .career-stat-grid article { background: linear-gradient(135deg, color-mix(in srgb, var(--career-color) 13%, var(--surface)), var(--surface)); }
}

@media (prefers-reduced-motion: reduce) {
    .encoding-overview-banner::after { animation: none; }
}

/* Journal de classe */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.journal-page-header { align-items: flex-end; margin-bottom: 20px; }
.journal-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.journal-mobile-actions { display: none; }
.journal-title-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.journal-title-line h1 { min-width: 0; margin-right: 0; }
.journal-export-form { display: inline-flex; flex: 0 0 auto; margin: 0; }
.journal-export-icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 10%, transparent); cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.journal-export-icon-button:hover { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); transform: translateY(-1px); }
.journal-export-icon-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.journal-export-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.journal-week-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: -8px 0 10px; }
.journal-mobile-toolbar, .journal-week-label-compact { display: none; }
.journal-week-previous { grid-column: 1; justify-self: start; }
.journal-week-center { grid-column: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.journal-week-picker { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.journal-week-picker input[type="date"] { width: 144px; min-width: 0; min-height: 34px; padding: 5px 8px; font-size: 12px; }
.journal-week-next { grid-column: 3; justify-self: end; }
.journal-table-wrap { position: relative; max-width: 100%; overflow: auto; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); scrollbar-gutter: stable; }
.journal-timetable { width: 100%; min-width: 910px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
/* Preserve the five-day overview on narrower laptops without scaling down the whole interface. */
@container app-content (min-width: 801px) and (max-width: 1050px) {
    .journal-desktop-view { scrollbar-gutter: auto; }
    .journal-desktop-view .journal-timetable { min-width: 0; border-spacing: 3px; }
    .journal-desktop-view .journal-timetable thead th { height: 43px; padding: 4px; }
    .journal-desktop-view .journal-timetable thead th:first-child,
    .journal-desktop-view .journal-timetable tbody > tr > th { width: clamp(54px, 6.4cqi, 68px); min-width: clamp(54px, 6.4cqi, 68px); }
    .journal-desktop-view .journal-timetable thead th:first-child { font-size: 11px; }
    .journal-desktop-view .journal-timetable thead th span { font-size: 10px; }
    .journal-desktop-view .journal-timetable thead th strong { font-size: 15px; }
    .journal-desktop-view .journal-cell { padding: 7px 6px; }
    .journal-desktop-view .journal-cell-course { padding-left: 14px; }
    .journal-desktop-view .journal-cell-course strong { font-size: 11px; overflow-wrap: anywhere; -webkit-line-clamp: 3; }
    .journal-desktop-view .journal-course-dot { width: 7px; height: 7px; }
    .journal-desktop-view .journal-cell:is(.is-free, .is-lunch) { font-size: 12px; }
}
.journal-timetable th, .journal-timetable td { padding: 0; }
.journal-timetable tbody > tr { height: 72px; }
.journal-timetable thead th { position: sticky; z-index: 4; top: 0; height: 50px; padding: 6px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--primary) 24%, var(--surface)); text-align: center; }
.journal-timetable thead th.journal-day-today { isolation: isolate; overflow: hidden; background: color-mix(in srgb, var(--journal-today-color) 42%, var(--surface)); animation: journal-today-breathe 4.8s ease-in-out infinite; }
.journal-timetable thead th.journal-day-today::before { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 24%, color-mix(in srgb, var(--surface) 38%, transparent) 50%, transparent 76%); content: ""; pointer-events: none; transform: translateX(-110%); animation: journal-today-sweep 4.8s ease-in-out infinite; }
.journal-timetable thead th.journal-day-today :is(span, strong) { position: relative; z-index: 1; color: color-mix(in srgb, var(--journal-today-color) 35%, var(--text)); }
@keyframes journal-today-breathe { 0%, 100% { background-color: color-mix(in srgb, var(--journal-today-color) 42%, var(--surface)); } 50% { background-color: color-mix(in srgb, var(--journal-today-color) 58%, var(--surface)); } }
@keyframes journal-today-sweep { 0%, 12% { transform: translateX(-110%); } 68%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
    .journal-timetable thead th.journal-day-today { animation: none; background: color-mix(in srgb, var(--journal-today-color) 52%, var(--surface)); }
    .journal-timetable thead th.journal-day-today::before { display: none; }
}
.journal-timetable thead th:first-child { z-index: 6; left: 0; width: 96px; }
.journal-timetable thead th span, .journal-timetable thead th strong { display: block; }
.journal-timetable th, .journal-timetable th strong { font-weight: 600; }
.journal-timetable thead th span { color: var(--text-secondary); font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.journal-timetable thead th strong { margin-top: 2px; font-size: 17px; }
.journal-timetable tbody > tr > th { position: sticky; z-index: 3; left: 0; width: 96px; min-width: 96px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); text-align: center; }
.journal-timetable tbody > tr > th span, .journal-timetable tbody > tr > th strong { display: block; }
.journal-timetable tbody > tr > th span { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto 3px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); font-weight: 600; }
.journal-timetable tbody > tr > th strong { font-size: 12px; }
/* Rester dans la teinte du cours : des dégradés croisés finissaient par confondre deux classes. */
.journal-cell { --course-color: var(--primary); --course-gradient-neighbor: color-mix(in srgb, var(--course-color) 65%, var(--text)); --journal-cell-accent-ink: color-mix(in srgb, var(--course-color) 42%, var(--text)); --journal-cell-muted-ink: color-mix(in srgb, var(--course-color) 30%, var(--text)); position: relative; display: grid; align-content: start; gap: 3px; width: 100%; min-height: 72px; padding: 8px 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--course-color) 70%, var(--border)); border-radius: 11px; color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--course-color) 40%, var(--surface)) 0%, color-mix(in srgb, var(--course-gradient-neighbor) 35%, var(--surface)) 100%); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.journal-cell::after { position: absolute; inset: 0 0 auto auto; width: 32px; height: 32px; background: linear-gradient(225deg, var(--course-color) 0 50%, transparent 51%); content: ""; }
.journal-cell:hover, .journal-cell:focus-visible { border-color: var(--course-color); box-shadow: 0 8px 20px color-mix(in srgb, var(--course-color) 17%, transparent); transform: translateY(-1px); }
.journal-cell.is-completed { box-shadow: inset 3px 0 0 var(--course-color); }
.journal-cell.is-cancelled { border-color: var(--text-secondary); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-secondary) 10%, var(--surface)) 0 12px, color-mix(in srgb, var(--text-secondary) 17%, var(--surface)) 12px 24px); }
.journal-cell.is-cancelled::after { display: none; }
.journal-cancelled-label { justify-self: start; margin-top: 5px; padding: 3px 7px; border-radius: 6px; color: var(--text); background: color-mix(in srgb, var(--text-secondary) 22%, var(--surface)); font-size: 11px; font-weight: 800; }
.journal-week-course-wrap { position: relative; height: 100%; }
.journal-week-course-wrap > .journal-cell { height: 100%; }
.journal-week-remove { position: absolute; z-index: 2; top: 2px; right: 2px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); font-size: 18px; line-height: 1; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.journal-week-course-wrap:hover .journal-week-remove:not(:disabled), .journal-week-course-wrap:focus-within .journal-week-remove:not(:disabled) { opacity: 1; }
.journal-week-remove:not(:disabled):hover, .journal-week-remove:not(:disabled):focus-visible { color: var(--error); background: var(--surface); }
.journal-week-remove:disabled { cursor: not-allowed; }
.journal-personal-cell { cursor: pointer; }
.journal-personal-cell:active, .journal-cell[draggable="true"]:active { cursor: grabbing; }
.journal-cell[draggable="true"] { cursor: grab; }
.journal-drop-preview { position: absolute; z-index: 7; pointer-events: none; border: 2px solid var(--primary); border-radius: 12px; background: color-mix(in srgb, var(--primary) 15%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent), 0 12px 24px color-mix(in srgb, var(--primary) 16%, transparent); }
.journal-drop-preview[hidden] { display: none; }
.journal-special-header { align-items: flex-end; }
.journal-special-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.journal-special-create > form, .journal-special-card { padding: 20px; }
.journal-special-create h2, .journal-special-existing h2 { margin: 0 0 14px; font-size: 19px; }
.journal-special-create > form, .journal-special-card > form { display: grid; gap: 15px; }
.journal-special-create > form > .form-field, .journal-special-card > form > .form-field { margin-bottom: 0; }
.journal-special-create > form > .button { justify-self: start; }
.journal-special-list { display: grid; gap: 12px; }
.journal-special-classes { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.journal-special-classes legend { padding: 0 5px; color: var(--text); font-weight: 700; }
.journal-special-classes legend span { color: var(--text-secondary); font-weight: 400; }
.journal-special-classes p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.journal-special-class-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px 12px; max-height: 180px; overflow-y: auto; }
.journal-special-class-list label { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 13px; cursor: pointer; }
.journal-special-class-list label[hidden], .journal-special-classes p[hidden] { display: none; }
.journal-special-class-list input { flex: 0 0 auto; width: 16px; height: 16px; min-width: 16px; margin: 0; accent-color: var(--primary); }
.journal-special-other-classes { margin-top: 11px; border-top: 1px solid var(--border); padding-top: 9px; }
.journal-special-other-classes summary { width: fit-content; color: var(--primary); font-size: 13px; font-weight: 700; cursor: pointer; }
.journal-special-other-classes summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.journal-special-other-content { display: grid; gap: 8px; margin-top: 10px; }
.journal-special-other-content > label { font-size: 13px; font-weight: 600; }
.journal-special-other-content input[type="search"] { width: 100%; }
.journal-special-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.journal-special-delete { margin: 0; }
.journal-special-actions small { color: var(--text-secondary); }
.journal-week-add-content label { font-weight: 700; }
.journal-week-add-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.journal-week-add-dialog::backdrop { background: color-mix(in srgb, var(--text) 45%, transparent); }
.journal-deadlines-dialog { width: min(920px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.journal-deadlines-dialog::backdrop { background: color-mix(in srgb, var(--text) 48%, transparent); }
.journal-deadlines-content { --journal-deadline-columns: minmax(140px, 1.1fr) 94px 88px minmax(105px, .85fr) minmax(170px, 2fr); position: relative; padding: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 12%, transparent), transparent 44%), var(--surface); }
.journal-deadlines-content h2 { margin: 0 0 3px; }
.journal-deadlines-content > p { margin: 0 42px 14px 0; color: var(--text-secondary); font-size: 13px; }
.journal-deadlines-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.journal-deadlines-filter { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); background: var(--surface); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.journal-deadlines-filter[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.journal-deadlines-filter[aria-pressed="true"]::before { margin-right: 5px; content: "✓"; }
.journal-deadlines-filter:hover { border-color: var(--primary); }
.journal-deadlines-filter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.journal-deadlines-content .journal-deadlines-status { margin: 18px 0 0; }
.journal-deadlines-grid-heading, .journal-deadline-item { display: grid; grid-template-columns: var(--journal-deadline-columns); align-items: center; gap: 10px; }
.journal-deadlines-grid-heading { padding: 0 12px 7px; color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.journal-deadlines-list { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; list-style: none; }
.journal-deadline-item { padding: 10px 12px; background: var(--surface); }
.journal-deadline-item + .journal-deadline-item { border-top: 1px solid var(--border); }
.journal-deadline-item:nth-child(even) { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.journal-deadline-item[hidden] { display: none; }
.journal-deadline-item time { color: var(--text); font-size: 12px; font-weight: 700; }
.journal-deadline-period { display: grid; gap: 2px; color: var(--text); font-size: 12px; }
.journal-deadline-period small { color: var(--text-secondary); font-size: 10px; }
.journal-deadline-kind { justify-self: start; padding: 3px 7px; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); font-size: 10px; font-weight: 700; }
.journal-deadline-kind.is-test { color: color-mix(in srgb, var(--journal-color-2) 55%, var(--text)); background: color-mix(in srgb, var(--journal-color-2) 13%, var(--surface)); }
.journal-deadline-class { color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.journal-deadline-item p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.journal-deadlines-empty { margin: 0; padding: 22px 12px; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-secondary); background: var(--surface-secondary); text-align: center; }
.journal-deadlines-content > .journal-deadlines-filter-empty { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; text-align: center; }
@media (max-width: 720px) {
    .journal-deadlines-content { padding: 20px; }
    .journal-deadlines-grid-heading { display: none; }
    .journal-deadline-item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
    .journal-deadline-item time { grid-column: 1; }
    .journal-deadline-period { grid-column: 1; grid-row: 2; display: flex; gap: 6px; }
    .journal-deadline-kind { grid-column: 2; grid-row: 1 / 3; }
    .journal-deadline-class, .journal-deadline-item p { grid-column: 1 / -1; }
}
.journal-week-add-content { position: relative; display: grid; gap: 14px; padding: 26px; }
.journal-week-add-content h2, .journal-week-add-content p { margin: 0; }
.journal-week-add-content p { color: var(--text-secondary); }
.journal-week-add-schedule-link { color: color-mix(in srgb, var(--primary) 65%, var(--text)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.journal-week-add-schedule-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.journal-week-add-content form { display: grid; gap: 9px; }
.journal-week-add-content select { width: 100%; }
.journal-week-add-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.journal-week-hint { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; text-align: right; }
@media (hover: none) { .journal-week-remove:not(:disabled) { opacity: 1; } }
@container app-content (max-width: 760px) { .journal-special-layout { grid-template-columns: minmax(0, 1fr); } }

/* Concepteur de bulletins (super administration). */
.bulletin-designer { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr); gap: 24px; align-items: start; }
.bulletin-designer-form { display: grid; gap: 12px; }
.bulletin-designer-form fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bulletin-designer-form legend { margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; }
.bulletin-designer-accordion { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.bulletin-designer-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none; user-select: none; }
.bulletin-designer-accordion > summary::-webkit-details-marker { display: none; }
.bulletin-designer-accordion > summary::after { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); content: "+"; font-size: 20px; line-height: 1; }
.bulletin-designer-accordion[open] > summary { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.bulletin-designer-accordion[open] > summary::after { content: "−"; }
.bulletin-designer-accordion > summary span { display: grid; gap: 2px; }
.bulletin-designer-accordion > summary b { font-size: .98rem; }
.bulletin-designer-accordion > summary small { color: var(--text-secondary); font-size: .78rem; font-weight: 500; }
.bulletin-designer-accordion-body { display: grid; gap: 20px; padding: 17px 16px; }
.bulletin-designer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bulletin-designer-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); cursor: pointer; }
.bulletin-designer-toggle input { flex: 0 0 auto; }
.bulletin-template-field-primary_color, .bulletin-template-field-accent_color { display: grid !important; grid-template-columns: 52px 7.3rem; justify-content: start; align-items: center; gap: 6px; }
.bulletin-template-field-primary_color > label, .bulletin-template-field-accent_color > label, .bulletin-template-field-primary_color > small, .bulletin-template-field-accent_color > small, .bulletin-template-field-primary_color > .errorlist, .bulletin-template-field-accent_color > .errorlist { grid-column: 1 / -1; }
.bulletin-template-field-primary_color input[type="color"], .bulletin-template-field-accent_color input[type="color"] { width: 52px; min-height: 40px; padding: 3px; cursor: pointer; }
.bulletin-color-hex { width: 7.3rem !important; min-height: 34px !important; padding: 6px 8px !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; text-transform: uppercase; }
.bulletin-designer-floating-save { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); min-height: 46px; padding-inline: 22px; border-radius: 999px; box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 34%, transparent); }
.bulletin-block-style-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bulletin-block-style-options > label { display: grid; gap: 6px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); font-size: .86rem; font-weight: 650; }
.bulletin-block-style-options > label > span:last-child { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 500; }
.bulletin-block-style-options input[type="color"] { width: 42px; height: 30px; padding: 2px; }
.bulletin-designer-preview-wrap { position: sticky; top: 20px; min-width: 0; }
.bulletin-preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.bulletin-preview-toolbar > div:first-child { display: grid; gap: 2px; }
.bulletin-preview-toolbar small { color: var(--text-secondary); }
.bulletin-designer-preview { --bulletin-primary: #20b8f1; --bulletin-accent: #ec209c; --bulletin-section-gap: 12px; --bulletin-inner-margin: 0px; position: relative; display: grid; align-content: start; gap: var(--bulletin-section-gap); width: min(100%, 620px); aspect-ratio: 210 / 297; box-sizing: border-box; margin-inline: auto; padding: calc(clamp(20px, 3vw, 35px) + var(--bulletin-inner-margin)); color: #111827; border: 1px solid #d9dee7; border-radius: 2px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .16); overflow: hidden; font-family: Helvetica, Arial, sans-serif; font-size: 8px; line-height: 1.2; }
.bulletin-designer-preview[hidden], [data-final-preview-label][hidden] { display: none; }
.bulletin-designer-preview.is-landscape { width: 100%; aspect-ratio: 297 / 210; }
.bulletin-designer-preview > header { display: flex; gap: 0; align-items: center; min-height: 50px; padding-bottom: 8px; border-bottom: 2px solid var(--bulletin-primary); }
.bulletin-designer-preview > header > [data-subblock-key="logo"] { flex: 0 0 50px; }
.bulletin-designer-preview > header > [data-subblock-key="school"] { flex: 1 1 auto; min-width: 0; }
.bulletin-designer-preview > header > [data-subblock-key="title"] { flex: 0 0 168px; }
.bulletin-designer-preview.without-header-rule > header { border-bottom: 0; }
.bulletin-designer-preview[data-header-style="centered"] > header { flex-direction: column; align-items: center; text-align: center; }
.bulletin-designer-preview[data-header-style="centered"] > header > [data-subblock-key] { flex: 0 0 auto; width: 100%; }
.bulletin-designer-preview[data-header-style="centered"] .bulletin-preview-title { text-align: center; }
.bulletin-designer-preview[data-header-style="minimal"] > header { border-bottom-width: 1px; }
.bulletin-designer-preview[data-header-style="minimal"] > header { min-height: 31px; }
.bulletin-designer-preview[data-header-style="minimal"] > header > [data-subblock-key="logo"] { flex-basis: 31px; }
.bulletin-designer-preview[data-header-style="minimal"] .bulletin-preview-logo { width: 24px; height: 24px; }
.bulletin-designer-preview[data-header-style="minimal"] > header strong { font-size: 14px; }
.bulletin-designer-preview[data-header-style="minimal"] .bulletin-preview-identity { padding: 3px 2px; border-width: 1px 0; background: transparent; }
.bulletin-designer-preview[data-density="compact"] { --bulletin-section-gap: 8px; padding: clamp(14px, 2vw, 24px); }
.bulletin-designer-preview[data-density="compact"] .bulletin-preview-table span { padding-block: 2px; }
.bulletin-designer-preview[data-density="airy"] { --bulletin-section-gap: 20px; }
.bulletin-designer-preview[data-density="airy"] .bulletin-preview-table span { padding-block: 5px; }
.bulletin-designer-preview header strong, .bulletin-designer-preview header small, .bulletin-preview-identity b, .bulletin-preview-identity small { display: block; }
.bulletin-designer-preview header small, .bulletin-preview-identity small, .bulletin-preview-table small { color: #6b7280; }
.bulletin-designer-preview > header strong { color: var(--bulletin-primary); font-size: 17px; line-height: 1.1; }
.bulletin-designer-preview > header small { margin-top: 4px; font-size: 8px; }
.bulletin-designer-preview:not(.is-complete-preview) > header { min-height: 42px; padding-bottom: 4px; }
.bulletin-designer-preview:not(.is-complete-preview) > header strong { font-size: 13px; line-height: 1.08; }
.bulletin-designer-preview:not(.is-complete-preview) > header small { margin-top: 2px; line-height: 1.08; }
.bulletin-preview-logo { display: grid; place-items: center; width: 42px; height: 42px; color: var(--bulletin-primary); font-size: 15px; font-weight: 700; }
.bulletin-preview-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bulletin-preview-photo { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; color: #fff; background: var(--bulletin-accent); font-weight: 700; }
.bulletin-preview-title { text-align: right; color: var(--bulletin-accent); }
.bulletin-preview-title b { display: block; font-size: 10px; text-transform: uppercase; }
.bulletin-preview-identity { display: flex; gap: 0; align-items: stretch; padding: 0; border: 1px solid color-mix(in srgb, var(--bulletin-primary) 55%, #d9dee7); background: color-mix(in srgb, var(--bulletin-primary) 9%, white); }
.bulletin-preview-identity > span { display: flex; align-items: center; min-width: 0; padding: 7px 8px; border-right: 1px solid #d9dee7; }
.bulletin-preview-identity > [data-subblock-key="student"] { flex: 43 1 0; }
.bulletin-preview-identity > [data-subblock-key="class"] { flex: 14 1 0; }
.bulletin-preview-identity > [data-subblock-key="attendance"] { flex: 43 1 0; }
.bulletin-preview-identity > span:last-child { border-right: 0; }
.bulletin-preview-identity > [data-subblock-key="attendance"] { background: color-mix(in srgb, var(--bulletin-accent) 7%, white); }
.bulletin-preview-student { gap: 7px; }
.bulletin-preview-table { border: 1px solid #d9dee7; }
.bulletin-preview-table > div { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--simplified-result-column-count, 3), minmax(28px, 46px)); }
.bulletin-preview-table span { min-width: 0; padding: 3px 4px; border-right: 1px solid #d9dee7; border-bottom: 1px solid #d9dee7; }
.bulletin-preview-table span:last-child { border-right: 0; }
.bulletin-preview-table .is-heading { background: color-mix(in srgb, var(--bulletin-primary) 12%, white); font-weight: 700; }
.bulletin-designer-preview:not(.is-complete-preview) .bulletin-preview-table .is-heading { font-size: 10px; line-height: 1.15; }
.bulletin-designer-preview:not(.is-complete-preview) .bulletin-preview-table .is-heading .is-current-period { color: white; background: var(--bulletin-accent); }
.bulletin-preview-table .preview-wide { grid-column: 2 / -1; }
.bulletin-preview-course-heading { display: grid; gap: 3px; margin: 5px 4px 7px; color: var(--bulletin-accent); }
.bulletin-preview-course-heading b { font-size: 12px; }
.bulletin-preview-course-heading small { color: #6b7280; }
.bulletin-preview-course-comments { position: relative; display: grid; margin-top: 6px; border: 1px solid #d9dee7; }
.bulletin-preview-course-comments > b { padding: 3px 4px; color: #6b7280; }
.bulletin-preview-course-comments > div { display: grid; grid-template-columns: 46px 1fr; border-top: 1px solid #d9dee7; }
.bulletin-preview-course-comments > div > * { padding: 3px 4px; }
.bulletin-preview-course-comments > div > strong { border-right: 1px solid #d9dee7; text-align: center; }
.bulletin-preview-general-comments { display: grid; gap: 5px; }
.bulletin-designer-preview.is-complete-preview .bulletin-preview-table { font-size: 7.5px; }
.bulletin-designer-preview.is-complete-preview .bulletin-preview-table > div:not(.complete-period-heading) { grid-template-columns: minmax(0, 1fr) repeat(4, 46px) 70px; }
.bulletin-designer-preview.is-complete-preview .complete-period-heading { grid-template-columns: minmax(0, 1fr) 92px 92px 70px; }
.bulletin-designer-preview.is-complete-preview.without-final-validation .bulletin-preview-table > div:not(.complete-period-heading) { grid-template-columns: minmax(0, 1fr) repeat(4, 46px); }
.bulletin-designer-preview.is-complete-preview.without-final-validation .complete-period-heading { grid-template-columns: minmax(0, 1fr) 92px 92px; }
.bulletin-designer-preview.is-complete-preview .complete-period-heading span:not(:first-child), .bulletin-designer-preview.is-complete-preview .complete-score-heading span:not(:first-child) { text-align: center; }
.bulletin-designer-preview.is-complete-preview .complete-score-heading { font-size: 7px; }
.bulletin-preview-table [data-preview-status="success"] { color: #13451f; background: #44eb70; font-weight: 700; }
.bulletin-preview-table [data-preview-status="failure"] { color: #4c1717; background: #e36262; font-weight: 700; }
.bulletin-preview-table [data-preview-status="neutral"] { color: #111827; background: #fce3bb; font-weight: 700; }
.bulletin-preview-table [data-preview-status] { display: grid; place-items: center; font-size: 11px; line-height: 1; }
.bulletin-preview-table [data-preview-empty-result] { color: #7c8798; font-weight: 400; }
.bulletin-designer-preview.without-status-colors [data-preview-status] { color: inherit; background: transparent; }
.bulletin-preview-comment, .bulletin-preview-special { padding: 6px; border: 1px solid var(--bulletin-primary); background: color-mix(in srgb, var(--bulletin-primary) 7%, white); }
.bulletin-preview-comment p { margin: 4px 0 0; }
.bulletin-preview-special { color: var(--bulletin-accent); }
.bulletin-preview-signatures { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 53px; border: 1px solid var(--bulletin-primary); }
.bulletin-preview-signatures > [data-subblock-key] { padding: 5px; border-right: 1px solid #d9dee7; background: color-mix(in srgb, var(--bulletin-primary) 9%, white); text-align: center; font-size: 7.5px; }
.bulletin-preview-signatures > [data-subblock-key="guardian"] { background: color-mix(in srgb, var(--bulletin-accent) 7%, white); }
.bulletin-preview-signatures > [data-subblock-key]:last-of-type { border-right: 0; }
.bulletin-preview-login-qr { display: grid; justify-items: center; gap: 2px; padding-top: 4px; }
.bulletin-preview-login-qr img { display: block; width: 46px; height: 46px; }
.bulletin-preview-login-qr small { color: #6b7280; font-size: 6px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bulletin-designer-preview > footer { min-height: 1em; color: #6b7280; text-align: center; font-size: 7px; }
.bulletin-preview-page-number { position: absolute; right: 20px; bottom: 10px; color: #6b7280; font-size: .7rem; }
.bulletin-designer-preview.is-split-footer { grid-template-columns: minmax(0, 3fr) minmax(105px, 1fr); }
.bulletin-designer-preview.is-split-footer > header { order: -200; }
.bulletin-designer-preview.is-split-footer > .bulletin-preview-identity { order: -100; }
.bulletin-designer-preview.is-split-footer > footer { order: 1000; }
.bulletin-designer-preview.is-split-footer > header, .bulletin-designer-preview.is-split-footer > .bulletin-preview-identity, .bulletin-designer-preview.is-split-footer > [data-layout-section="results"], .bulletin-designer-preview.is-split-footer > footer { grid-column: 1 / -1; }
.bulletin-designer-preview.is-split-footer > [data-layout-section="login_qr"] { grid-column: 1 / -1; }
.bulletin-designer-preview.is-split-footer > [data-layout-section="homeroom_comments"] { grid-column: 1; }
.bulletin-designer-preview.is-split-footer > [data-layout-section="signatures"] { grid-column: 2; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); align-self: stretch; height: auto !important; min-height: 100%; }
.bulletin-designer-preview.is-split-footer > [data-layout-section="signatures"] > [data-subblock-key] { display: grid; min-height: 0; place-items: start center; border-right: 0; border-bottom: 1px solid #d9dee7; }
.bulletin-designer-preview.is-split-footer > [data-layout-section="signatures"] > [data-subblock-key]:last-of-type { border-bottom: 0; }
.bulletin-designer-preview.is-split-footer > .is-joined-before { margin-top: 0; }
.bulletin-designer-preview [hidden] { display: none !important; }
.bulletin-preview-layout-section { position: relative; transition: outline-color .15s ease, opacity .15s ease, transform .15s ease; }
.bulletin-preview-layout-section:hover, .bulletin-preview-layout-section:focus-visible { outline: 2px dashed color-mix(in srgb, var(--bulletin-accent) 70%, transparent); outline-offset: 4px; }
.bulletin-preview-layout-section.is-dragging { z-index: 3; opacity: .55; transform: scale(.985); }
.bulletin-preview-layout-section.is-joined-before { margin-top: calc(-1 * var(--bulletin-section-gap)); }
.bulletin-preview-layout-section.is-snap-target { outline: 3px solid var(--bulletin-accent); outline-offset: 3px; }
.bulletin-preview-layout-section.is-snap-before::before, .bulletin-preview-layout-section.is-snap-after::after { position: absolute; z-index: 5; right: 0; left: 0; height: 4px; border-radius: 99px; background: var(--bulletin-accent); content: ""; pointer-events: none; }
.bulletin-preview-layout-section.is-snap-before::before { top: -4px; }
.bulletin-preview-layout-section.is-snap-after::after { bottom: -4px; }
.bulletin-preview-layout-section[data-layout-resizable] { box-sizing: border-box; overflow: hidden; }
.bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-identity, .bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-table, .bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-comment, .bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-special, .bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-signatures, .bulletin-designer-preview[data-border-radius="small"] .bulletin-preview-course-comments { border-radius: 5px; overflow: hidden; }
.bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-identity, .bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-table, .bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-comment, .bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-special, .bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-signatures, .bulletin-designer-preview[data-border-radius="medium"] .bulletin-preview-course-comments { border-radius: 10px; overflow: hidden; }
.bulletin-designer-preview[data-body-font="times"] { font-family: Georgia, "Times New Roman", serif; }
.bulletin-designer-preview[data-body-font="fredoka"] { font-family: "Eduryo Fredoka", sans-serif; }
.bulletin-designer-preview[data-title-font="times"] :is(header strong, .bulletin-preview-title, .bulletin-preview-course-heading b, .bulletin-preview-comment > b, .bulletin-preview-special > b) { font-family: Georgia, "Times New Roman", serif; }
.bulletin-designer-preview[data-title-font="fredoka"] :is(header strong, .bulletin-preview-title, .bulletin-preview-course-heading b, .bulletin-preview-comment > b, .bulletin-preview-special > b, .bulletin-cover-school, .bulletin-cover-title) { font-family: "Eduryo Fredoka", sans-serif; }
[data-block-color-key].has-custom-block-color:not([data-color-kind="text"]) { background: var(--block-color) !important; }
[data-block-color-key].without-block-color:not([data-color-kind="text"]) { background: transparent !important; }
[data-block-color-key][data-color-kind="text"].has-custom-block-color { color: var(--block-color) !important; }
[data-block-color-key][data-color-kind="text"].without-block-color { color: #111827 !important; }
[data-block-color-key][data-color-kind="text"].has-custom-block-color :is(strong, b) { color: var(--block-color) !important; }
[data-block-color-key][data-color-kind="text"].without-block-color :is(strong, b) { color: #111827 !important; }
[data-subblock-key] { position: relative; }
.bulletin-subblock-drag-handle { position: absolute; z-index: 6; top: 1px; left: 1px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; color: #fff; border: 1px solid #fff; border-radius: 5px; background: var(--bulletin-primary); box-shadow: 0 1px 4px rgba(15, 23, 42, .2); cursor: grab; opacity: 0; }
[data-subblock-key]:hover > .bulletin-subblock-drag-handle, [data-subblock-key]:focus-within > .bulletin-subblock-drag-handle { opacity: 1; }
[data-subblock-key].is-subblock-dragging { opacity: .45; }
[data-subblock-key].is-subblock-target { outline: 2px solid var(--bulletin-primary); outline-offset: -2px; }
.bulletin-layout-drag-handle, .bulletin-layout-resize-handle { position: absolute; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #fff; border: 2px solid #fff; border-radius: 9px; background: var(--bulletin-accent); box-shadow: 0 2px 8px rgba(15, 23, 42, .22); cursor: grab; opacity: 0; transition: opacity .15s ease; }
.bulletin-layout-drag-handle { top: 4px; right: 4px; }
.bulletin-layout-resize-handle { right: 4px; bottom: 4px; cursor: ns-resize; touch-action: none; }
.bulletin-preview-layout-section[data-layout-fixed-first] > .bulletin-layout-drag-handle { display: none; }
.bulletin-preview-layout-section:hover > .bulletin-layout-drag-handle, .bulletin-preview-layout-section:hover > .bulletin-layout-resize-handle, .bulletin-preview-layout-section:focus-within > .bulletin-layout-drag-handle, .bulletin-preview-layout-section:focus-within > .bulletin-layout-resize-handle { opacity: 1; }
.bulletin-layout-drag-handle:active { cursor: grabbing; }
.bulletin-cover-preview-wrap { display: grid; gap: 8px; margin-bottom: 18px; }
.bulletin-cover-preview-wrap[hidden] { display: none; }
.bulletin-course-preview-label { display: block; margin: 0 0 8px; }
.bulletin-cover-preview { place-items: center; padding: calc(clamp(10px, 1.5vw, 18px) + var(--bulletin-inner-margin)); text-align: center; }
.bulletin-cover-frame { position: relative; display: grid; align-content: center; justify-items: center; gap: 13px; width: 96%; height: 94%; box-sizing: border-box; padding: clamp(22px, 3.5vw, 42px); border: 1px solid var(--cover-border, var(--bulletin-primary)); background: var(--cover-background, #fcfaff); }
.bulletin-cover-frame::before { position: absolute; top: 1px; right: 1px; left: 1px; height: 6px; background: var(--cover-accent, var(--bulletin-accent)); content: ""; pointer-events: none; }
.bulletin-cover-frame > [data-subblock-key] { width: 88%; }
.bulletin-cover-logo { display: grid; place-items: center; width: 62px !important; height: 62px; color: var(--bulletin-primary); font-size: 26px; }
.bulletin-cover-logo img { width: 100%; height: 100%; object-fit: contain; }
.bulletin-cover-logo.has-frame { box-sizing: border-box; padding: 4px; border: 1px solid var(--cover-logo-frame, var(--bulletin-primary)); }
.bulletin-cover-student-photo { display: grid; place-items: center; justify-self: center; width: 62px !important; height: 72px; margin-inline: auto; padding: 4px; border: 1px solid var(--bulletin-primary); background: #fff; }
.bulletin-cover-student-photo > span { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; background: var(--bulletin-accent); font-size: 20px; font-weight: 700; }
.bulletin-cover-student-photo[data-photo-size="small"] { width: 46px !important; height: 46px; }
.bulletin-cover-student-photo[data-photo-size="medium"] { width: 62px !important; height: 62px; }
.bulletin-cover-student-photo[data-photo-size="large"] { width: 82px !important; height: 82px; }
.bulletin-cover-student-photo[data-photo-shape="circle"], .bulletin-cover-student-photo[data-photo-shape="circle"] > span { border-radius: 50%; }
.bulletin-cover-school { color: var(--bulletin-primary); font-size: var(--cover-school-font-size, 20px); font-weight: 700; }
.bulletin-cover-school-contact { color: #6b7280; font-size: var(--cover-info-font-size, 10px); line-height: 1.2; }
.bulletin-cover-title { padding-bottom: 10px; color: var(--bulletin-accent); border-bottom: 2px solid var(--cover-accent, var(--bulletin-accent)); font-size: var(--cover-title-font-size, 28px); font-weight: 700; text-transform: uppercase; }
.bulletin-cover-meta { display: grid; justify-items: center; gap: 1px; padding: 1px 8px; }
.bulletin-cover-meta small { color: #6b7280; font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bulletin-cover-meta strong { color: #374151; font-size: var(--cover-meta-font-size, 12px); line-height: 1.2; }
.bulletin-cover-info { display: grid; gap: 3px; box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--cover-border, var(--bulletin-primary)); background: color-mix(in srgb, var(--bulletin-primary) 8%, white); }
.bulletin-cover-info small { color: #6b7280; }
.bulletin-cover-info :is(strong, span) { font-size: var(--cover-info-font-size, 10px); font-weight: 600; }
.bulletin-cover-identity { display: grid; justify-items: center; gap: 2px; padding: 3px 8px; }
.bulletin-cover-identity small { color: #6b7280; font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.bulletin-cover-identity strong { color: var(--bulletin-primary); font-size: var(--cover-student-font-size, 20px); line-height: 1.15; }
.bulletin-cover-identity.is-class strong { font-size: var(--cover-class-font-size, 16px); }
.bulletin-cover-identity:is(.is-teacher, .is-educator, .is-coordinator) strong { font-size: var(--cover-staff-font-size, 14px); }
.bulletin-cover-educator-value { display: flex; align-items: baseline; justify-content: center; gap: 3px 7px; min-width: 0; }
.bulletin-cover-educator-email { color: #6b7280; font-size: 9px; font-weight: 500; overflow-wrap: anywhere; }
.bulletin-cover-frame[data-educator-email-layout="below"] .bulletin-cover-educator-value { flex-direction: column; align-items: center; }
.bulletin-cover-frame[data-cover-staff-layout="inline"] { grid-template-columns: repeat(var(--cover-staff-count, 2), minmax(0, 1fr)); }
.bulletin-cover-frame[data-cover-staff-layout]:not([data-cover-staff-layout="stacked"]):not([data-cover-staff-layout="inline"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bulletin-cover-frame[data-cover-staff-layout]:not([data-cover-staff-layout="stacked"]) > [data-subblock-key] { grid-column: 1 / -1; }
.bulletin-cover-frame[data-cover-staff-layout="inline"] > :is([data-subblock-key="homeroom_teacher"], [data-subblock-key="educator"], [data-subblock-key="coordinator"]),
.bulletin-cover-frame[data-cover-staff-layout]:not([data-cover-staff-layout="stacked"]):not([data-cover-staff-layout="inline"]) > .is-cover-staff-pair { grid-column: auto; width: 100%; }
.bulletin-cover-login-qr { display: grid; justify-items: center; gap: 0; width: auto !important; padding: 2px 8px; }
.bulletin-cover-login-qr img { display: block; width: 58px; height: 58px; }
.bulletin-cover-login-qr small { margin-top: 1px; color: #6b7280; font-size: var(--cover-qr-caption-font-size, 8px); font-weight: 700; letter-spacing: .01em; }
.bulletin-cover-preview[data-cover-border-radius="small"] :is(.bulletin-cover-frame, .bulletin-cover-info, .bulletin-cover-logo.has-frame) { border-radius: 5px; }
.bulletin-cover-preview[data-cover-border-radius="medium"] :is(.bulletin-cover-frame, .bulletin-cover-info, .bulletin-cover-logo.has-frame) { border-radius: 12px; }
.bulletin-final-preview { margin-top: 0; }
.bulletin-designer-preview > .bulletin-preview-running-header { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 18px; padding-bottom: 6px; font-size: 7px; }
.bulletin-preview-running-header span { color: #6b7280; text-align: center; }
.bulletin-preview-running-header b { color: var(--bulletin-accent); text-align: right; }
@media (max-width: 1050px) {
    .bulletin-designer { grid-template-columns: 1fr; }
    .bulletin-designer-preview-wrap { position: static; }
}
@media (max-width: 620px) {
    .bulletin-designer-options { grid-template-columns: 1fr; }
    .bulletin-designer-floating-save { right: 12px; bottom: 12px; min-height: 42px; padding-inline: 16px; }
    .bulletin-block-style-options { grid-template-columns: 1fr; }
    .bulletin-designer-preview { padding: calc(14px + var(--bulletin-inner-margin)); font-size: 6px; }
    .bulletin-designer-preview > header { min-height: 34px; }
    .bulletin-designer-preview > header > [data-subblock-key="logo"] { flex-basis: 34px; }
    .bulletin-designer-preview > header > [data-subblock-key="title"] { flex-basis: 96px; }
    .bulletin-preview-logo { width: 28px; height: 28px; }
    .bulletin-designer-preview > header strong { font-size: 11px; }
    .bulletin-preview-title b { font-size: 7px; }
    .bulletin-preview-identity > span { padding: 4px; }
    .bulletin-preview-photo { width: 22px; height: 22px; }
    .bulletin-designer-preview.is-complete-preview .bulletin-preview-table > div:not(.complete-period-heading) { grid-template-columns: minmax(0, 1fr) repeat(4, 28px) 42px; }
    .bulletin-designer-preview.is-complete-preview .complete-period-heading { grid-template-columns: minmax(0, 1fr) 56px 56px 42px; }
}
.journal-cell.is-free { place-items: center; align-content: center; border-style: dashed; border-color: var(--border); color: var(--text-secondary); background: color-mix(in srgb, var(--surface-secondary) 52%, var(--surface)); cursor: pointer; text-align: center; }
.journal-cell.is-free::after { display: none; }
.journal-cell.is-free span { font-weight: 600; }
.journal-cell.is-free small { font-size: 10px; }
.journal-cell.is-free:disabled { cursor: not-allowed; opacity: .7; }
.journal-free-plus { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--primary); background: var(--surface); box-shadow: 0 5px 16px color-mix(in srgb, var(--primary) 17%, transparent); font-size: 24px; line-height: 1; opacity: 0; transform: translate(-50%, -40%) scale(.86); transition: opacity .16s ease, transform .16s ease; }
.journal-cell.is-free:not(:disabled):focus-visible .journal-free-plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.journal-cell.is-free:not(:disabled):focus-visible .journal-free-label { opacity: .15; }
@media (hover: hover) and (pointer: fine) {
    .journal-cell.is-free:not(:disabled):hover .journal-free-plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .journal-cell.is-free:not(:disabled):hover .journal-free-label { opacity: .15; }
}
.journal-cell.is-lunch { place-items: center; align-content: center; border-color: color-mix(in srgb, var(--decorative-2) 50%, var(--border)); color: var(--text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--decorative-2) 19%, var(--surface)) 0 10px, color-mix(in srgb, var(--decorative-2) 10%, var(--surface)) 10px 20px); cursor: default; text-align: center; }
.journal-cell.is-lunch::after { display: none; }
.journal-cell.is-lunch > span { font-size: 17px; line-height: 1; }
.journal-cell.is-lunch > strong { font-size: 12px; }
.journal-cell.is-lunch > small { color: var(--text-secondary); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.journal-cell-body { position: relative; display: grid; align-content: start; gap: 3px; width: 100%; }
.journal-course-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--course-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-color) 15%, transparent); }
.journal-cell-body > .journal-course-dot { position: absolute; top: 3px; left: 0; }
.journal-cell-course { display: grid; min-width: 0; padding-left: 17px; }
.journal-cell-course strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.journal-cell-class-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.journal-cell-course small { min-width: 0; overflow: hidden; color: var(--journal-cell-accent-ink); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.journal-special-badge { flex: 0 0 auto; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--course-color) 35%, var(--border)); border-radius: 999px; color: var(--journal-cell-accent-ink); background: color-mix(in srgb, var(--surface) 86%, var(--course-color)); font-size: 9px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.journal-historical-label { flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface); font-size: 9px; font-weight: 700; line-height: 1.2; }
.journal-historical-hint { margin: 0 0 16px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 12px; }
.journal-cell-note { color: var(--journal-cell-accent-ink); font-size: 11px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; }
.journal-cell-homework { color: var(--journal-cell-accent-ink); font-size: 11px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; }
.journal-cell-homework b { color: var(--journal-cell-accent-ink); font-weight: 600; }
.journal-cell-planned-work { justify-self: start; width: fit-content; max-width: 100%; padding: 2px 5px; border-radius: 5px; color: var(--journal-cell-accent-ink); background: color-mix(in srgb, var(--course-color) 11%, var(--surface)); font-size: 11px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.journal-cell-planned-work b { margin-right: 3px; font-weight: 600; }
.journal-cell-prompt { align-self: end; margin-top: auto; color: var(--journal-cell-accent-ink); font-size: 11px; font-weight: 600; line-height: 1.25; }
.journal-now-line { position: absolute; z-index: 9; right: 4px; left: 4px; height: 2px; border-radius: 999px; background: var(--error); box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 68%, transparent), 0 2px 8px color-mix(in srgb, var(--error) 38%, transparent); pointer-events: none; }
.journal-now-line[hidden] { display: none; }
.journal-now-line::before { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--error); content: ""; transform: translate(-1px, -50%); }
.journal-now-line span { position: absolute; top: 50%; left: 12px; padding: 2px 6px; border-radius: 999px; color: white; background: var(--error); font-size: 9px; font-weight: 800; line-height: 1.25; transform: translateY(-50%); }
.journal-day-panel[data-journal-now-container] { position: relative; }
.journal-now-line-mobile { right: 0; left: 0; }
.journal-spanned-cell { position: relative; height: 100%; }
.journal-spanned-cell > .journal-cell { position: absolute; inset: 0; align-content: center; width: 100%; height: 100%; min-height: 100%; }
.journal-spanned-cell > .journal-week-course-wrap { position: absolute; inset: 0; }
.journal-spanned-cell > .journal-week-course-wrap > .journal-cell { align-content: center; min-height: 100%; }
.journal-spanned-cell > .journal-event-cell { position: absolute; inset: 0; height: 100%; }
.journal-event-cell { position: relative; display: grid; place-items: center; min-height: 68px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-secondary); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-secondary) 9%, var(--surface)) 0 14px, color-mix(in srgb, var(--text-secondary) 15%, var(--surface)) 14px 28px); text-align: center; overflow: hidden; }
.journal-event-cell > div { position: relative; z-index: 1; max-width: 100%; max-height: 100%; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); overflow: auto; overflow-wrap: anywhere; }
.journal-event-cell strong { display: block; font-size: 15px; font-weight: 700; }
.journal-event-cell small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; }
.journal-event-cell p { max-width: 32ch; margin: 7px auto 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.journal-event-link { display: inline-block; max-width: 100%; margin-top: 9px; color: var(--primary); font-size: 12px; font-weight: 700; line-height: 1.35; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.journal-event-link:hover, .journal-event-link:focus-visible { color: var(--primary-hover); }
.journal-event-cell.is-class_council { border-color: var(--error-strong); color: var(--error-tone-text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--error-strong) 19%, var(--surface)) 0 14px, color-mix(in srgb, var(--error) 29%, var(--surface)) 14px 28px); }
.journal-event-cell.is-pedagogical_day { border-color: var(--journal-pedagogical-color); color: var(--journal-pedagogical-text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--journal-pedagogical-color) 19%, var(--surface)) 0 14px, color-mix(in srgb, var(--journal-pedagogical-color) 30%, var(--surface)) 14px 28px); }
.journal-event-cell.is-homeroom { border-color: var(--journal-homeroom-color); color: var(--journal-homeroom-text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--journal-homeroom-color) 19%, var(--surface)) 0 14px, color-mix(in srgb, var(--journal-homeroom-color) 30%, var(--surface)) 14px 28px); }
.journal-event-cell.is-parent_meeting { border-color: var(--journal-parent-meeting-color); color: var(--journal-parent-meeting-text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--journal-parent-meeting-color) 19%, var(--surface)) 0 14px, color-mix(in srgb, var(--journal-parent-meeting-color) 30%, var(--surface)) 14px 28px); }
.journal-mobile-row.is-event { display: block; }
.journal-mobile-row.is-event .journal-event-cell { min-height: 190px; }
.journal-mobile-row.is-event.is-period-range .journal-event-cell { min-height: 72px; }
.journal-calendar-layout { display: grid; grid-template-columns: minmax(270px, 400px) minmax(0, 1fr); align-items: start; gap: 18px; }
.journal-calendar-editor { padding: 20px; }
.journal-calendar-editor h2, .journal-calendar-list h2 { margin: 0 0 16px; }
.journal-calendar-hint { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.journal-calendar-list { display: grid; align-content: start; gap: 10px; min-width: 0; }
.journal-calendar-list h2 { margin-bottom: 0; }
.journal-calendar-events { padding: 0; overflow: hidden; }
.journal-calendar-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px; border-left: 4px solid var(--text-secondary); }
.journal-calendar-item + .journal-calendar-item { border-top: 1px solid var(--border); }
.journal-calendar-item.is-class_council { border-left-color: var(--error-strong); }
.journal-calendar-item.is-pedagogical_day { border-left-color: var(--journal-pedagogical-color); }
.journal-calendar-item.is-homeroom { border-left-color: var(--journal-homeroom-color); }
.journal-calendar-item.is-parent_meeting { border-left-color: var(--journal-parent-meeting-color); }
.journal-calendar-details { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 14px; min-width: 0; }
.journal-calendar-details > strong { flex: 0 0 120px; font-size: 14px; }
.journal-calendar-details > .journal-calendar-date { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.journal-calendar-details > p { flex: 1 1 160px; min-width: 0; }
.journal-calendar-details > .journal-event-link { font-size: 12px; white-space: nowrap; }
.journal-calendar-editor .form-field.is-disabled { opacity: .58; }
.journal-calendar-editor .form-field[hidden], .journal-calendar-editor [data-journal-period-required][hidden] { display: none; }
.journal-calendar-date { color: var(--text-secondary); font-size: 13px; }
.journal-calendar-item p { margin: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
.journal-calendar-empty { margin: 0; padding: 18px; color: var(--text-secondary); }
.journal-calendar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.journal-calendar-item > .journal-calendar-actions { flex-wrap: nowrap; }
.journal-calendar-actions form { margin: 0; }
@container app-content (max-width: 750px) { .journal-calendar-layout { grid-template-columns: minmax(0, 1fr); } }
@container app-content (max-width: 540px) { .journal-calendar-item { grid-template-columns: minmax(0, 1fr); gap: 7px; } .journal-calendar-details > strong { flex-basis: 95px; } .journal-calendar-item > .journal-calendar-actions { justify-content: flex-start; } }
.course-tone-0 { --course-color: var(--journal-color-1); }
.course-tone-1 { --course-color: var(--journal-color-2); }
.course-tone-2 { --course-color: var(--journal-color-3); }
.course-tone-3 { --course-color: var(--journal-color-4); }
.course-tone-4 { --course-color: var(--journal-color-5); }
.course-tone-5 { --course-color: var(--journal-color-6); }
.course-tone-6 { --course-color: var(--journal-color-7); }
.course-tone-7 { --course-color: var(--journal-color-8); }
.course-tone-8 { --course-color: var(--journal-color-9); }
.course-tone-9 { --course-color: var(--journal-color-10); }
.journal-table-help { margin: 10px 4px 0; color: var(--text-secondary); font-size: 12px; }
.journal-mobile-view { display: none; }
.journal-entry-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: transparent; box-shadow: 0 28px 80px rgba(0,0,0,.36); }
.journal-entry-dialog.is-personal { width: min(620px, calc(100vw - 28px)); }
.journal-entry-dialog::backdrop { background: rgba(13, 10, 22, .64); backdrop-filter: blur(3px); }
.journal-dialog-content { --course-color: var(--primary); position: relative; padding: 28px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--course-color) 22%, transparent), transparent 34%), var(--surface); }
.journal-dialog-content h2 { margin: 5px 0; }
.journal-dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 22px; cursor: pointer; }
.journal-dialog-class { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: var(--text-secondary); font-weight: 600; }
.journal-dialog-layout { display: grid; gap: 0; }
.journal-entry-form { display: grid; gap: 14px; }
.journal-cancel-field { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); }
.journal-entry-form .journal-cancel-field label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.journal-cancel-field input { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.journal-cancel-field small { color: var(--text-secondary); font-size: 11px; }
.journal-student-tracking:disabled { opacity: .65; }
.journal-entry-form .form-field { margin: 0; }
.journal-entry-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.journal-entry-form textarea { width: 100%; min-height: 105px; resize: vertical; }
.journal-note-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 6px; }
.journal-note-heading > label:first-child { margin: 0; }
.journal-entry-form .journal-note-split-toggle { display: inline-flex; justify-self: end; align-items: center; gap: 6px; margin: 0; padding: 3px 7px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 11px; white-space: nowrap; cursor: pointer; }
.journal-note-split-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.journal-class-note-fields { display: grid; gap: 8px; }
.journal-entry-form .journal-class-note-fields textarea { min-height: 48px; }
.journal-entry-form [data-journal-global-note][hidden], .journal-entry-form [data-journal-class-notes][hidden] { display: none; }
.journal-legacy-homework { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--course-color) 6%, var(--surface)); }
.journal-legacy-homework p { margin: 4px 0; color: var(--text-secondary); }
.journal-legacy-homework small { color: var(--text-secondary); font-size: 10px; }
.journal-absence-picker { min-width: 0; margin: 2px 0 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--course-color) 30%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--course-color) 7%, var(--surface)); }
.journal-absence-picker legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.journal-absence-picker legend span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 5px; padding: 0 6px; border-radius: 8px; color: var(--course-color); background: color-mix(in srgb, var(--course-color) 16%, var(--surface)); font-size: 11px; }
.journal-absence-picker input[type="search"] { width: 100%; margin-bottom: 9px; }
.journal-absence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 184px; overflow-y: auto; scrollbar-gutter: stable; }
.journal-entry-form .journal-absence-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 500; cursor: pointer; }
.journal-absence-option:hover, .journal-absence-option:focus-within { border-color: color-mix(in srgb, var(--course-color) 58%, var(--border)); background: color-mix(in srgb, var(--course-color) 10%, var(--surface)); }
.journal-absence-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-absence-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--course-color); }
.journal-absence-empty, .journal-absence-no-result { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.journal-student-tracking-list { grid-template-columns: 1fr; max-height: 260px; }
.journal-entry-form .journal-student-tracking-row { display: grid; grid-template-columns: minmax(130px, 1fr) auto; align-items: center; }
.journal-student-tracking-legend { display: grid; grid-template-columns: repeat(5, 68px); justify-content: end; gap: 4px; margin: 0 8px 5px 0; color: var(--text-secondary); font-size: 9px; font-weight: 600; text-align: center; }
.journal-student-flags { display: grid; grid-template-columns: repeat(5, 68px); gap: 4px; }
.journal-student-flags label { position: relative; display: grid; place-items: center; min-height: 34px; margin: 0; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.journal-student-flags label:has(input:checked) { border-color: color-mix(in srgb, var(--course-color) 65%, #000); color: #fff; background: color-mix(in srgb, var(--course-color) 65%, #000); }
.journal-student-flags label:has(input:checked) > span::before { content: "✓ "; }
.journal-student-flags label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.journal-student-flags label[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.journal-student-flags input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.journal-student-flags label > span { overflow: visible; font-size: 9px; font-weight: 600; }
.journal-dialog-actions, .journal-schedule-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.journal-planning-section { display: grid; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.journal-planning-heading h3 { margin: 2px 0 0; font-size: 17px; }
.journal-planned-work-list { display: grid; gap: 7px; }
.journal-planned-work-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--course-color) 28%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--course-color) 7%, var(--surface)); }
.journal-planned-work-item > div:first-child { display: grid; gap: 2px; min-width: 0; }
.journal-planned-work-item > div:first-child > strong { color: var(--course-color); font-size: 12px; }
.journal-planned-work-item > div:first-child > span { overflow-wrap: anywhere; font-size: 12px; }
.journal-planned-work-item small { color: var(--text-secondary); font-size: 10px; }
.journal-planned-work-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 5px; }
.journal-planned-work-actions form { margin: 0; }
.journal-planning-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.journal-planning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.journal-planning-form .form-field { min-width: 0; margin: 0; }
.journal-planning-form label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; }
.journal-planning-form :is(select, input, textarea) { width: 100%; }
.journal-planning-form textarea { resize: vertical; }
.journal-planning-status { min-height: 15px; margin: -2px 0 0; color: var(--text-secondary); font-size: 11px; }
.journal-planning-status.is-error, .journal-planning-unavailable { color: var(--danger); }
.journal-planning-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.journal-planning-unavailable { margin: 0; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); font-size: 11px; }
@media (min-width: 1100px) {
    .journal-entry-dialog { width: min(1160px, calc(100vw - 48px)); }
    .journal-entry-dialog.is-personal { width: min(620px, calc(100vw - 48px)); }
    .journal-dialog-layout { grid-template-columns: minmax(560px, 1.3fr) minmax(360px, .9fr); align-items: start; gap: 24px; }
    .journal-entry-dialog.is-personal .journal-dialog-layout { grid-template-columns: minmax(0, 1fr); }
    .journal-planning-section { min-width: 0; margin-top: 0; padding-top: 0; padding-left: 24px; border-top: 0; border-left: 1px solid var(--border); }
    .journal-planning-grid { grid-template-columns: minmax(110px, .7fr) minmax(160px, 1fr); }
}
.journal-schedule-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 20px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), var(--surface)); }
.journal-schedule-intro h2 { margin: 3px 0 5px; }
.journal-schedule-intro p { margin: 0; color: var(--text-secondary); }
.journal-week-type { display: inline-block; padding: 3px 7px; border-radius: 7px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-size: 11px; white-space: nowrap; }
.journal-week-cycle { margin: 0 0 8px; }
.journal-alternating-toggle { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.journal-alternating-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.journal-cycle-tabs { display: flex; justify-content: center; gap: 7px; margin: -4px 0 12px; }
.journal-schedule-table td { height: 64px; }
.journal-schedule-mobile { display: none; }
.journal-schedule-day-panel { display: grid; gap: 7px; }
.journal-schedule-day-panel[hidden] { display: none; }
.journal-schedule-mobile-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.journal-schedule-mobile-row > strong { display: grid; place-content: center; justify-items: center; min-height: 64px; padding: 5px 2px; 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) 18%, var(--surface)); font-size: 17px; }
.journal-schedule-mobile-row > strong span { color: var(--text-secondary); font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.journal-schedule-picker { position: relative; width: 100%; height: 100%; }
.journal-schedule-picker > summary { display: grid; align-content: center; min-height: 64px; padding: 8px 28px 8px 10px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 10px; background: var(--surface); cursor: pointer; list-style: none; }
.journal-schedule-picker > summary::-webkit-details-marker { display: none; }
.journal-schedule-picker > summary::after { position: absolute; top: 50%; right: 10px; color: var(--primary); content: "⌄"; transform: translateY(-50%); }
.journal-schedule-picker[open] > summary { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.journal-schedule-picker > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent); outline-offset: 2px; }
.journal-schedule-picker > summary span { overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.journal-schedule-picker > summary small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.journal-schedule-picker-options { position: absolute; z-index: 12; top: calc(100% + 5px); left: 0; display: grid; width: max(230px, 100%); max-height: 280px; padding: 7px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.journal-schedule-picker-options label { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; cursor: pointer; }
.journal-schedule-picker-options label:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.journal-schedule-picker-options .journal-schedule-lunch-option { margin-bottom: 4px; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; color: color-mix(in srgb, var(--decorative-2) 72%, var(--text)); }
.journal-schedule-picker-options label > span { display: grid; min-width: 0; }
.journal-schedule-picker-options label strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.journal-schedule-picker-options label small { color: var(--text-secondary); font-size: 9px; }
.journal-schedule-clear { padding: 7px 6px; border: 0; border-radius: 8px; color: var(--text-secondary); background: transparent; font-weight: 600; text-align: left; cursor: pointer; }
.journal-schedule-clear:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.journal-schedule-actions { position: sticky; z-index: 8; bottom: 12px; width: fit-content; margin: 16px auto 0; padding: 9px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.journal-empty-state { min-height: 240px; }
.settings-journal-hours { grid-column: 1 / -1; }
.settings-journal-hours-fields { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(360px, 100%); }
.settings-journal-hours-fields .form-field { margin: 0; }
.settings-journal-hours-fields .settings-journal-period-count { grid-column: 1 / -1; }
.settings-journal-hours-fields label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; }
.settings-journal-hours-fields input { width: 100%; }
.settings-journal-period-grid { grid-column: 1 / -1; min-width: 0; display: grid; gap: 5px; width: min(560px, 100%); }
.settings-journal-period-heading, .settings-journal-period-row { display: grid; grid-template-columns: 42px repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
.settings-journal-period-heading { padding: 0 8px; color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.settings-journal-period-row { padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); }
.settings-journal-period-row > strong { align-self: center; color: var(--primary); }
.settings-journal-period-row label { display: grid; gap: 3px; min-width: 0; }
.settings-journal-period-row label > span { display: none; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.settings-journal-period-row input { width: 100%; min-width: 0; }
.settings-journal-period-row .errorlist { grid-column: 1 / -1; margin: 2px 0 0; font-size: 10px; }

/* Content-preserving fallback for tables wider than their own available space.
   Headers remain accessible/visible, including sort and assessment controls. */
.main-content .adaptive-table-wrap { min-width: 0; max-width: 100%; overflow: visible; max-height: none; }
.main-content table.adaptive-table { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
.main-content table.adaptive-table colgroup { display: none; }
.main-content table.adaptive-table > thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.main-content table.adaptive-table > thead > tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.main-content table.adaptive-table > thead > tr > th { position: static; flex: 1 1 130px; width: auto; min-width: 0; height: auto; padding: 8px; white-space: normal; overflow-wrap: anywhere; }
.main-content table.adaptive-table > tbody { display: grid; gap: 12px; }
.main-content table.adaptive-table > tbody > tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: visible; }
.main-content table.adaptive-table > tbody > tr > :is(td, th) { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: auto; min-width: 0; max-width: 100%; height: auto; padding: 9px 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.main-content table.adaptive-table > tbody > tr > :is(td, th)::before { content: attr(data-adaptive-label); flex: 0 1 150px; color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.main-content table.adaptive-table > tbody > tr > :is(td, th) > * { min-width: 0; max-width: 100%; }
.main-content table.adaptive-table .table-actions { flex-wrap: wrap; }
.main-content table.adaptive-table .journal-schedule-picker { flex: 1 1 220px; }
.main-content table.adaptive-table .journal-schedule-picker-options { position: static; width: 100%; box-sizing: border-box; }
@container app-content (max-width: 720px) {
    .card-grid, .staff-assignment-grid, .course-group-grid, .teacher-comments-layout,
    .settings-overview-grid, .student-form-layout, .user-edit-layout { grid-template-columns: minmax(0, 1fr); }
    .page-header { flex-wrap: wrap; }
    .journal-schedule-actions { display: flex; flex-wrap: wrap; max-width: 100%; }
}

@container app-content (max-width: 800px) {
    .journal-page-header { align-items: flex-start; flex-direction: column; }
    .journal-header-actions { justify-content: flex-start; width: 100%; }
    .journal-header-actions > .button { width: 100%; }
    .journal-desktop-actions { display: none; }
    .journal-desktop-toolbar { display: none; }
    .journal-week-toolbar.journal-mobile-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px; margin: 12px 0 0; }
    .journal-mobile-toolbar .journal-week-center { flex-wrap: nowrap; }
    .journal-mobile-toolbar .journal-week-picker input[type="date"] { width: 144px; }
    .journal-mobile-toolbar .journal-week-previous,
    .journal-mobile-toolbar .journal-week-next { white-space: nowrap; }
    .journal-header-actions.journal-mobile-actions { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; }
    .journal-desktop-view { display: none; }
    .journal-mobile-view { display: block; }
    .journal-day-panel { display: grid; gap: 5px; }
    .journal-day-panel[hidden] { display: none; }
    .journal-mobile-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 5px; min-width: 0; }
    .journal-mobile-period { display: grid; place-content: center; justify-items: center; min-height: 68px; padding: 5px 2px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); text-align: center; }
    .journal-mobile-period span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); font-weight: 600; }
    .journal-mobile-period.is-multi-period span { width: auto; min-width: 38px; padding: 0 5px; }
    .journal-mobile-period.is-multi-period + :is(.journal-cell, .journal-week-course-wrap) { min-height: 82px; }
    .journal-mobile-period strong { margin-top: 3px; font-size: 9px; line-height: 1.1; }
    .journal-mobile-row .journal-cell { min-height: 68px; padding: 8px 9px; }
    .journal-table-help { display: none; }
}
@container app-content (max-width: 370px) {
    .journal-mobile-toolbar .journal-week-label-full { display: none; }
    .journal-mobile-toolbar .journal-week-label-compact { display: inline; }
    .journal-mobile-toolbar .journal-week-previous,
    .journal-mobile-toolbar .journal-week-next { min-width: 38px; padding-inline: 8px; }
}
@container app-content (max-width: 930px) {
    .journal-day-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; padding: 4px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
    .journal-day-tab { display: grid; gap: 2px; min-width: 0; padding: 8px 2px; border: 0; border-radius: 10px; color: var(--text-secondary); background: transparent; font: inherit; text-align: center; cursor: pointer; }
    .journal-day-tab span { overflow: hidden; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
    .journal-day-tab strong { font-size: 12px; }
    .journal-day-tab.is-active { color: white; background: var(--primary); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 25%, transparent); }
    .journal-schedule-desktop { display: none; }
    .journal-schedule-mobile { display: block; }
    .journal-schedule-mobile .journal-day-tabs { margin-bottom: 10px; }
    .journal-schedule-mobile .journal-day-tab { font-size: 10px; }
    .journal-schedule-mobile .journal-schedule-picker-options { position: static; width: 100%; box-sizing: border-box; margin-top: 5px; }
    .journal-schedule-intro { align-items: stretch; flex-direction: column; }
    .journal-dialog-content { padding: 24px 18px 20px; }
    .journal-absence-list { grid-template-columns: 1fr; max-height: 210px; }
    .journal-entry-form .journal-student-tracking-row { grid-template-columns: 1fr; gap: 7px; }
    .journal-student-tracking-legend { display: none; }
    .journal-student-flags { grid-template-columns: repeat(5, minmax(48px, 1fr)); width: 100%; }
    .journal-dialog-actions .button { flex: 1 1 100%; }
    .journal-planning-grid { grid-template-columns: 1fr; }
    .journal-planned-work-item { align-items: stretch; flex-direction: column; }
    .journal-planned-work-actions .button { flex: 1 1 auto; }
    .settings-journal-hours-fields { grid-template-columns: 1fr; width: 100%; }
    .settings-journal-period-heading { display: none; }
    .settings-journal-period-row { grid-template-columns: 42px repeat(2, minmax(0, 1fr)); }
    .settings-journal-period-row label > span { display: block; }
}

/* Suivi des élèves relevé dans le journal de classe */
.teacher-absence-header { margin-bottom: 20px; }
.teacher-absence-filters { align-items: end; padding: 16px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.teacher-absence-filters .form-field { flex: 1 1 260px; margin: 0; }
.teacher-absence-filters label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.teacher-absence-filters select { width: 100%; }
.teacher-absence-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.teacher-absence-summary .card { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; }
.teacher-absence-summary strong { color: var(--primary); font-size: 24px; }
.teacher-absence-summary span { min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.teacher-absence-table td strong, .teacher-absence-table td small { display: block; }
.teacher-absence-table td small { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.teacher-tracking-student { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.teacher-tracking-student-photo { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: 11px; object-fit: cover; background: var(--surface-secondary); }
.teacher-tracking-student-photo[data-photo-preview] { cursor: zoom-in; outline: none; }
.teacher-tracking-student-photo[data-photo-preview]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.teacher-tracking-student-initials { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 11px; font-weight: 700; }
.teacher-tracking-student-copy { min-width: 0; }
.journal-tracking-kind { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-size: 10px; font-weight: 700; line-height: 1.15; }
.journal-tracking-kind-late { color: color-mix(in srgb, var(--decorative-4) 76%, var(--text)); border-color: color-mix(in srgb, var(--decorative-4) 38%, var(--border)); background: color-mix(in srgb, var(--decorative-4) 11%, var(--surface)); }
.journal-tracking-kind-forgotten_material { color: color-mix(in srgb, var(--decorative-3) 74%, var(--text)); border-color: color-mix(in srgb, var(--decorative-3) 38%, var(--border)); background: color-mix(in srgb, var(--decorative-3) 11%, var(--surface)); }
.journal-tracking-kind-pedagogical_remark { color: color-mix(in srgb, var(--decorative-2) 76%, var(--text)); border-color: color-mix(in srgb, var(--decorative-2) 38%, var(--border)); background: color-mix(in srgb, var(--decorative-2) 11%, var(--surface)); }
.journal-tracking-kind-disciplinary_remark, .journal-tracking-kind-exclusion { color: var(--error-tone-text); border-color: var(--error-strong); background: color-mix(in srgb, var(--error-strong) 30%, var(--surface)); }
.teacher-absence-table td.teacher-absence-action { display: table-cell; vertical-align: middle; white-space: nowrap; }
.teacher-absence-empty { min-height: 220px; }

/* Synthèse globale du préfet de discipline */
.discipline-tracking-header { margin-bottom: 20px; }
.discipline-tracking-filters { display: flex; align-items: end; gap: 14px; margin-bottom: 20px; padding: 16px; border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.discipline-tracking-filters form { display: contents; }
.discipline-tracking-filters .form-field { flex: 1 1 320px; margin: 0; }
.discipline-tracking-filters label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.discipline-tracking-filters select { width: 100%; }
.discipline-student-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 16px; padding: 20px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); box-shadow: var(--shadow); }
.discipline-student-initials { display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid color-mix(in srgb, var(--primary) 48%, var(--border)); border-radius: 19px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); font-size: 19px; font-weight: 800; }
.discipline-student-hero h2 { margin: 3px 0; }
.discipline-student-hero p { margin: 0; color: var(--text-secondary); }
.discipline-student-total { display: grid; min-width: 138px; padding: 13px 16px; border-radius: 15px; background: color-mix(in srgb, var(--surface) 82%, transparent); text-align: center; }
.discipline-student-total strong { color: var(--primary); font-size: 28px; line-height: 1; }
.discipline-student-total span { margin-top: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.discipline-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.discipline-category-card { display: grid; justify-items: start; gap: 13px; padding: 15px; }
.discipline-category-card > strong { justify-self: end; color: var(--primary); font-size: 25px; line-height: 1; }
.discipline-teacher-summary { padding: 0; overflow: hidden; }
.discipline-teacher-summary > .section-heading { padding: 20px 20px 0; }
.discipline-teacher-summary .table-wrap { margin-top: 16px; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.discipline-tracking-table td strong, .discipline-tracking-table td small { display: block; }
.discipline-tracking-table td small { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.discipline-count { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px; border-radius: 9px; color: var(--text-secondary); background: var(--surface-secondary); font-weight: 700; }
.discipline-count.has-value { color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.discipline-tracking-empty { min-height: 230px; }

@media (max-width: 720px) {
    .teacher-absence-header { align-items: flex-start; }
    .teacher-absence-header > .button { width: 100%; }
    .teacher-absence-filters .form-field, .teacher-absence-filters > .button { flex: 1 1 100%; width: 100%; }
    .teacher-absence-summary { grid-template-columns: 1fr; }
    .teacher-absence-summary .card { padding: 13px 16px; }
    .discipline-tracking-filters { align-items: stretch; flex-direction: column; }
    .discipline-tracking-filters .form-field { flex-basis: auto; width: 100%; }
    .discipline-student-hero { grid-template-columns: auto minmax(0, 1fr); }
    .discipline-student-total { grid-column: 1 / -1; }
    .discipline-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .discipline-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container app-content (max-width: 720px) {
    /* La liste d’élèves devient une carte d’identité compacte, puis deux rangées de métadonnées. */
    .responsive-data-table.student-list-table tbody { gap: 14px; }
    .responsive-data-table.student-list-table tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0;
        overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-top: 3px solid color-mix(in srgb, var(--primary) 66%, var(--accent)); border-radius: 17px;
        background: var(--surface); box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 7%, transparent);
    }
    .responsive-data-table.student-list-table tbody td {
        display: grid; grid-template-columns: 1fr; align-content: center; gap: 4px; min-height: 64px; padding: 11px 14px;
        border: 0; border-top: 1px solid var(--border); overflow-wrap: anywhere;
    }
    .responsive-data-table.student-list-table tbody td::before { font-size: 9px; letter-spacing: .07em; }
    .responsive-data-table.student-list-table tbody td:nth-child(2) {
        grid-column: 1 / -1; grid-row: 1; display: block; min-height: 0; padding: 15px 16px;
        border-top: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface)));
    }
    .responsive-data-table.student-list-table tbody td:nth-child(2)::before { content: none; }
    .responsive-data-table.student-list-table tbody td:nth-child(1) { grid-column: 1; grid-row: 2; border-right: 1px solid var(--border); }
    .responsive-data-table.student-list-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .responsive-data-table.student-list-table tbody td:nth-child(4) { grid-column: 1; grid-row: 3; border-right: 1px solid var(--border); }
    .responsive-data-table.student-list-table tbody td:nth-child(5) { grid-column: 2; grid-row: 3; }
    .student-list-table .student-table-identity { min-width: 0; gap: 13px; }
    .student-list-table .student-photo,
    .student-list-table .student-initials { flex-basis: 52px; width: 52px; height: 52px; border-radius: 14px; }
    .student-list-table .student-table-identity strong { font-size: 15px; line-height: 1.25; }
    .student-list-table :is(.badge, .status-toggle-form) { justify-self: start; max-width: 100%; }
    .student-list-table .class-badge-link { white-space: normal; }
    .responsive-data-table.student-list-table tbody tr.student-list-empty-row { display: block; padding: 0; border-top-width: 1px; }
    .responsive-data-table.student-list-table tbody tr.student-list-empty-row td { display: block; min-height: 0; padding: 0; border: 0; }
    .responsive-data-table.student-list-table tbody tr.student-list-empty-row td::before { content: none; }

    /* Sur mobile, les sélecteurs du titulariat restent groupés sous le titre sans hauteur artificielle. */
    .class-summary-header { gap: 14px; margin-bottom: 14px; }
    .class-summary-header > div:first-child { width: 100%; }
    .class-summary-header h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.08; }
    .class-summary-header-controls { display: grid; grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; width: 100%; gap: 9px; }
    .class-summary-class-selector,
    .class-summary-header-controls .student-summary-selector { width: 100%; max-width: none; margin: 0; }
    .class-summary-class-selector select { width: auto; max-width: 100%; }
    .class-summary-header-controls .period-tabs {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); width: 100%; gap: 7px; margin: 0;
    }
    .class-summary-header-controls .period-tabs > .button { width: auto; min-height: 40px; padding: 8px 10px; }
    .class-summary-header-controls .student-summary-selector { justify-content: flex-start; }
    .student-summary { margin-top: 0; }
    .student-summary-card { gap: 16px; padding: 15px; }
    .student-summary-identity { align-items: flex-start; gap: 13px; }
    .student-summary-person { gap: 12px; }
    .student-summary-photo { flex-basis: 64px; width: 64px; height: 64px; border-radius: 17px; }
    .student-summary-identity h2 { font-size: 21px; line-height: 1.15; }
    .student-results-desktop { display: none; }
    .student-results-mobile { display: grid; gap: 10px; }
    .student-course-mobile-card {
        overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 14px;
        background: var(--surface); box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 6%, transparent);
    }
    .student-course-mobile-card > summary {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 68px; padding: 12px 13px;
        border-radius: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface)));
    }
    .student-course-mobile-card > summary:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); }
    .student-course-mobile-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .student-course-mobile-title strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.25; }
    .student-course-mobile-title small { overflow: hidden; color: var(--text-secondary); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .student-course-mobile-current { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px; }
    .student-course-mobile-current > small { color: var(--primary); font-size: 10px; font-weight: 700; }
    .student-course-mobile-current .student-result-badge { min-width: 30px; min-height: 27px; }
    .student-course-mobile-body { display: grid; gap: 11px; padding: 11px 12px 13px; border-top: 1px solid var(--border); }
    .student-course-mobile-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 7px; }
    .student-course-mobile-period {
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; min-width: 0; padding: 8px;
        border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary);
    }
    .student-course-mobile-period.is-current { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
    .student-course-mobile-period > small { color: var(--text-secondary); font-size: 9px; font-weight: 700; }
    .student-course-mobile-period > span:last-child:not(.student-result-badge) { grid-column: 1 / -1; color: var(--text-secondary); font-size: 9px; line-height: 1.25; }
    .student-course-mobile-period .student-result-badge { min-width: 28px; min-height: 24px; padding: 3px 7px; font-size: 11px; }
    .student-course-mobile-card .student-course-comment-content { margin: 0; }

    /* Le suivi place l’élève et la date en en-tête, puis condense le contexte en deux colonnes. */
    .teacher-absence-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .teacher-absence-filters .form-field,
    .teacher-absence-filters > .button { min-width: 0; width: 100%; }
    .teacher-absence-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .teacher-absence-summary .card { align-items: flex-start; flex-direction: column; gap: 3px; min-height: 78px; padding: 11px; }
    .teacher-absence-summary strong { font-size: 20px; line-height: 1; }
    .teacher-absence-summary span { font-size: 9px; line-height: 1.25; }
    .teacher-tracking-student { min-width: 0; gap: 10px; }
    .teacher-tracking-student-photo { flex-basis: 48px; width: 48px; height: 48px; border-radius: 13px; }
    .teacher-tracking-student-copy strong { font-size: 13px; line-height: 1.2; }
}

/* Hub des outils enseignants */
.teacher-tools-page { max-width: 1120px; margin: 0 auto; container: tools-page / inline-size; }
.teacher-tools-header { margin-bottom: 22px; }
.teacher-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.teacher-tool-card {
    --tool-color: var(--primary);
    --tool-action-color: var(--tool-color);
    --tool-action-text: #fff;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-height: 250px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tool-color) 54%, var(--border));
    border-radius: 24px;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tool-color) 43%, transparent), transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--tool-color) 19%, var(--surface)), color-mix(in srgb, var(--tool-color) 6%, var(--surface)));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--tool-color) 16%, transparent);
    text-decoration: none;
    isolation: isolate;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.teacher-tool-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.teacher-tool-card::after {
    position: absolute;
    right: -34px;
    bottom: -52px;
    z-index: -1;
    width: 150px;
    height: 150px;
    border: 28px solid color-mix(in srgb, var(--tool-color) 13%, transparent);
    border-radius: 50%;
    content: "";
    filter: blur(6px);
}
.teacher-tool-card:has(.teacher-tool-card-link:hover) { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tool-color) 70%, var(--border)); box-shadow: 0 20px 42px color-mix(in srgb, var(--tool-color) 18%, transparent); }
.teacher-tool-card:has(.teacher-tool-card-link:focus-visible) { outline: 3px solid color-mix(in srgb, var(--tool-color) 42%, transparent); outline-offset: 3px; }
.teacher-tool-card-violet { --tool-color: var(--decorative-1); }
.teacher-tool-card-cyan { --tool-color: var(--decorative-2); }
.teacher-tool-card-pink { --tool-color: var(--decorative-3); }
.teacher-tool-card-gold { --tool-color: var(--decorative-4); --tool-action-color: color-mix(in srgb, var(--tool-color) 76%, black); }
.teacher-tool-card-green { --tool-color: var(--decorative-5); }
.teacher-tool-card-orange { --tool-color: var(--decorative-6); --tool-action-color: color-mix(in srgb, var(--tool-color) 76%, black); }
.teacher-tool-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid color-mix(in srgb, var(--tool-color) 55%, var(--border)); border-radius: 20px; background: color-mix(in srgb, var(--tool-color) 24%, var(--surface)); font-size: 30px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 65%, transparent); }
.teacher-tool-copy { min-width: 0; }
.teacher-tool-kicker { color: var(--tool-color); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.teacher-tool-copy h2 { margin: 7px 0 9px; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.12; }
.teacher-tool-shortcut-form { position: relative; z-index: 2; align-self: start; }
.teacher-tool-shortcut { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--tool-color) 46%, var(--border)); border-radius: 999px; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 88%, transparent); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.teacher-tool-shortcut:hover { color: var(--text); border-color: var(--tool-color); }
.teacher-tool-shortcut input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.teacher-tool-shortcut span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--text-secondary) 55%, var(--border)); border-radius: 5px; color: transparent; background: var(--surface); font-size: 12px; transition: .18s ease; }
.teacher-tool-shortcut strong { font-size: 11px; white-space: nowrap; }
.teacher-tool-shortcut:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--tool-color) 72%, var(--border)); background: color-mix(in srgb, var(--tool-color) 18%, var(--surface)); }
.teacher-tool-shortcut input:checked + span { color: #fff; border-color: var(--tool-action-color); background: var(--tool-action-color); }
.teacher-tool-shortcut:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--tool-color) 40%, transparent); outline-offset: 2px; }
.teacher-tool-shortcut.is-disabled { cursor: not-allowed; opacity: .7; }
.teacher-tool-description { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.teacher-tool-action, .teacher-tool-disabled { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 36px; padding: 8px 12px; border-radius: 11px; font-size: 13px; font-weight: 600; }
.teacher-tool-action { color: var(--tool-action-text); background: var(--tool-action-color); box-shadow: 0 8px 18px color-mix(in srgb, var(--tool-action-color) 30%, transparent); }
.teacher-tool-action span { font-size: 18px; transition: transform .2s ease; }
.teacher-tool-card:has(.teacher-tool-card-link:hover) .teacher-tool-action span { transform: translateX(4px); }
.teacher-tool-card.is-disabled { --tool-color: var(--text-secondary); border-style: dashed; background: var(--surface-secondary); box-shadow: none; filter: grayscale(.8); opacity: .67; }
.teacher-tool-card.is-disabled::after { opacity: .35; }
.teacher-tool-card.is-disabled .teacher-tool-icon { background: color-mix(in srgb, var(--text-secondary) 10%, var(--surface)); }
.teacher-tool-disabled { color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 9%, var(--surface)); }

@media (max-width: 1350px) {
    .teacher-tools-grid { grid-template-columns: 1fr; }
}
@container tools-page (max-width: 1080px) {
    .teacher-tool-card { min-height: 220px; padding: 20px; border-radius: 20px; }
    .teacher-tool-card { column-gap: 14px; }
    .teacher-tool-icon { width: 56px; height: 56px; border-radius: 17px; font-size: 27px; }
}

@container tools-page (max-width: 560px) {
    .teacher-tool-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
    .teacher-tool-card { grid-template-rows: auto auto 1fr auto; }
    .teacher-tool-shortcut-form { grid-column: 1 / -1; grid-row: 1; justify-self: end; margin: 0; }
    .teacher-tool-icon, .teacher-tool-copy { grid-row: 2; align-self: center; }
    .teacher-tool-description, .teacher-tool-action, .teacher-tool-disabled { grid-column: 1 / -1; }
}

/* Tâches enseignant */
.teacher-todo-page {
    /* Task categories keep their hue independently of the selected theme. */
    --todo-purple: #8B5CF6;
    --todo-pink: #EC4899;
    --todo-blue: #3B82F6;
    --todo-yellow: #F5B800;
    max-width: 1120px;
    margin: 0 auto;
}
.teacher-todo-header { margin-bottom: 22px; }
.teacher-todo-create { display: flex; align-items: end; gap: 14px; margin-bottom: 18px; padding: 18px 20px; }
.teacher-todo-create-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.teacher-todo-create-field label, .teacher-todo-create-field .required-marker { font-weight: 600; }
.teacher-todo-colors { flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.teacher-todo-colors legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.teacher-todo-color-options { display: flex; align-items: center; gap: 6px; min-height: 42px; }
[data-todo-color="purple"] { --todo-color: var(--todo-purple); }
[data-todo-color="pink"] { --todo-color: var(--todo-pink); }
[data-todo-color="blue"] { --todo-color: var(--todo-blue); }
[data-todo-color="yellow"] { --todo-color: var(--todo-yellow); }
.teacher-todo-color-option, .teacher-todo-task[data-todo-color]:not([data-todo-color=""]) { --todo-color-surface: color-mix(in srgb, var(--todo-color) 38%, var(--surface)); }
.teacher-todo-color-option { position: relative; display: grid; place-items: center; width: 30px; height: 34px; cursor: pointer; }
.teacher-todo-color-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.teacher-todo-color-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--todo-color-surface); pointer-events: none; }
.teacher-todo-color-option input:checked + .teacher-todo-color-dot { outline: 2px solid var(--text); outline-offset: 3px; }
.teacher-todo-color-option input:focus-visible + .teacher-todo-color-dot { outline: 2px dashed var(--text); outline-offset: 3px; }
.teacher-todo-color-reset { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 20px; }
.teacher-todo-color-reset:hover { background: var(--primary-soft); color: var(--text); }
.teacher-todo-color-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (min-width: 561px) and (max-width: 850px) {
    .teacher-todo-create { flex-wrap: wrap; }
    .teacher-todo-create-field { flex-basis: calc(100% - 210px); }
}
.teacher-todo-create .button { flex: 0 0 auto; }
.teacher-todo-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.teacher-todo-column { min-width: 0; padding: 20px; }
.teacher-todo-column-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.teacher-todo-column-header h2 { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; font-size: 20px; }
.teacher-todo-column-header form { flex: 0 0 auto; }
.teacher-todo-column-hint { margin-top: 5px; color: var(--text-secondary); font-size: 11px; text-align: right; }
.teacher-todo-list { display: grid; align-content: start; gap: 9px; min-height: 190px; padding: 5px; border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); transition: border-color .18s ease, background .18s ease; }
.teacher-todo-list.is-drag-over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.teacher-todo-task { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); cursor: grab; transition: opacity .15s ease, transform .15s ease, border-color .15s ease; }
.teacher-todo-task:active { cursor: grabbing; }
.teacher-todo-task:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.teacher-todo-task.todo-insert-before, .teacher-todo-task.todo-insert-after { position: relative; }
.teacher-todo-task.todo-insert-before::before, .teacher-todo-task.todo-insert-after::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--primary); pointer-events: none; }
.teacher-todo-task.todo-insert-before::before { top: -6px; }
.teacher-todo-task.todo-insert-after::after { bottom: -6px; }
.teacher-todo-task.is-dragging { opacity: .42; transform: scale(.98); }
.teacher-todo-task.is-completed { border-color: color-mix(in srgb, var(--success) 34%, var(--border)); background: color-mix(in srgb, var(--success-soft) 45%, var(--surface)); }
.teacher-todo-task[data-todo-color]:not([data-todo-color=""]) { border-color: color-mix(in srgb, var(--todo-color) 55%, var(--border)); background: var(--todo-color-surface); }
.teacher-todo-task form { min-width: 0; flex: 1 1 auto; }
.teacher-todo-task-label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.teacher-todo-task-label input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); }
.teacher-todo-task-label span { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.teacher-todo-task.is-completed .teacher-todo-task-label span { color: var(--text-secondary); text-decoration: line-through; }
.teacher-todo-task.is-completed[data-todo-color]:not([data-todo-color=""]) .teacher-todo-task-label span { color: var(--text); }
.teacher-todo-drag-handle { flex: 0 0 auto; color: var(--text-secondary); font-size: 17px; letter-spacing: -3px; user-select: none; }
.teacher-todo-empty { min-height: 82px; display: grid; place-items: center; margin: 0; color: var(--text-secondary); font-size: 13px; text-align: center; }
.teacher-todo-status { min-height: 1.4em; margin: 12px 2px 0; color: var(--text-secondary); font-size: 12px; }

@media (max-width: 850px) {
    .teacher-todo-board { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .teacher-todo-create { align-items: stretch; flex-direction: column; }
    .teacher-todo-create .button { width: 100%; }
    .teacher-todo-column { padding: 16px; }
    .teacher-todo-column-header { align-items: stretch; flex-direction: column; }
    .teacher-todo-column-header form, .teacher-todo-column-header form .button { width: 100%; }
    .teacher-todo-column-hint { margin-top: -7px; text-align: left; }
}

/* Offre commerciale d’une école */
.platform-school-form { display: grid; gap: 24px; }
.platform-school-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.platform-school-fields .form-field { margin: 0; }
.platform-school-field-name, .platform-school-field-billing_email { grid-column: 1 / -1; }
.platform-pack-option { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.platform-pack-option h2 { margin: 5px 0 7px; }
.platform-pack-option p { max-width: 650px; margin: 0; color: var(--text-secondary); }
.platform-pack-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; margin: 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; }
.platform-pack-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.platform-pack-switch-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 42%, var(--surface)); transition: background .18s ease; }
.platform-pack-switch-track span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .18s ease; }
.platform-pack-switch-status { min-width: 68px; color: var(--text-secondary); font-size: 12px; font-weight: 850; }
.platform-pack-switch .is-on { display: none; }
.platform-pack-switch:has(input:checked) { border-color: color-mix(in srgb, var(--success) 52%, var(--border)); }
.platform-pack-switch:has(input:checked) .platform-pack-switch-track { background: var(--success); }
.platform-pack-switch:has(input:checked) .platform-pack-switch-track span { transform: translateX(20px); }
.platform-pack-switch:has(input:checked) .platform-pack-switch-status { color: var(--success); }
.platform-pack-switch:has(input:checked) .is-off { display: none; }
.platform-pack-switch:has(input:checked) .is-on { display: inline; }
.platform-pack-switch:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 3px; }

@media (max-width: 720px) {
    .platform-school-fields { grid-template-columns: 1fr; }
    .platform-school-field-name, .platform-school-field-billing_email { grid-column: 1; }
    .platform-pack-option { align-items: flex-start; flex-direction: column; }
}

/* Pages d’erreur autonomes */
.standalone-error-body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 28%), radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%), var(--background); }
.standalone-error-shell { display: grid; align-content: center; width: min(720px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 32px 0; }
.standalone-error-brand { display: flex; align-items: center; gap: 11px; width: fit-content; margin: 0 auto 22px; color: var(--text); text-decoration: none; }
.standalone-error-brand .brand-mark { width: 52px; height: 52px; }
.standalone-error-brand span { display: grid; }
.standalone-error-brand strong { font-size: 20px; }
.standalone-error-brand small { color: var(--text-secondary); }
.standalone-error-card { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 58px); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 28px; text-align: center; box-shadow: 0 26px 70px color-mix(in srgb, var(--primary) 13%, transparent); }
.standalone-error-card::after { position: absolute; right: -80px; bottom: -100px; width: 250px; height: 250px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 11%, transparent); filter: blur(18px); content: ""; }
.standalone-error-card > * { position: relative; z-index: 1; }
.standalone-error-visual { position: relative; display: grid; place-items: center; width: fit-content; margin: 0 auto 20px; }
.standalone-error-visual strong { color: color-mix(in srgb, var(--primary) 25%, var(--surface)); font-size: clamp(86px, 20vw, 150px); font-weight: 950; letter-spacing: -.09em; line-height: .8; }
.standalone-error-visual span { position: absolute; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 22px; background: color-mix(in srgb, var(--primary) 15%, var(--surface)); box-shadow: var(--shadow); font-size: 34px; transform: rotate(-8deg); }
.standalone-error-card h1 { margin: 8px 0 10px; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.04em; }
.standalone-error-card p { max-width: 500px; margin: 0 auto 24px; color: var(--text-secondary); font-size: 17px; line-height: 1.55; }
.standalone-error-card .button { display: inline-flex; }

/* Carnet de cotes */
.gradebook-page { min-width: 0; container-type: inline-size; }
.gradebook-header { align-items: flex-end; }
.gradebook-toolbar { display: grid; grid-template-columns: minmax(320px, 1fr) auto auto; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gradebook-course-control { display: flex; grid-column: 1; grid-row: 1; align-items: center; gap: 12px; min-width: 320px; }
.gradebook-toolbar-label { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.gradebook-toolbar-label > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 18px; }
.gradebook-toolbar-label strong { font-size: 13px; white-space: nowrap; }
.gradebook-course-picker { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; min-width: 220px; margin: 0; }
.gradebook-course-picker select { width: 100%; height: 42px; min-height: 42px; }
.gradebook-bundle-summary { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.gradebook-bundle-summary > span:not(.badge) { overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-toolbar-action { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 10px; color: var(--text); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.gradebook-toolbar-action strong { font-weight: inherit; }
.gradebook-toolbar-action:hover, .gradebook-toolbar-action:focus-visible { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.gradebook-toolbar-action > span:first-child { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface-secondary)); font-size: 16px; font-weight: 800; line-height: 1; }
.gradebook-bundle-trigger { grid-column: 2; grid-row: 1; }
.gradebook-create-trigger { grid-column: 3; grid-row: 1; color: var(--primary); }
.gradebook-toolbar-action[aria-expanded="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.gradebook-toolbar-panel { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--border); }
.gradebook-bundle-form { display: grid; gap: 12px; padding: 14px 16px 16px; }
.gradebook-bundle-form > p { margin: 0; }
.gradebook-bundle-options { display: flex; flex-wrap: wrap; gap: 8px; }
.gradebook-bundle-options label { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.gradebook-bundle-options label:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-bundle-options input { margin: 0; }
.gradebook-bundle-options strong, .gradebook-bundle-options small { display: block; }
.gradebook-bundle-options small { color: var(--text-secondary); }
.gradebook-bundle-form .button { justify-self: start; }
.gradebook-create-trigger > span:first-child { position: relative; color: transparent; background: var(--primary); font-size: 0; }
.gradebook-create-trigger > span:first-child::before, .gradebook-create-trigger > span:first-child::after { position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; border-radius: 999px; background: #fff; content: ""; transform: translate(-50%, -50%); }
.gradebook-create-trigger > span:first-child::after { transform: translate(-50%, -50%) rotate(90deg); }
.gradebook-assessment-form { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(150px, .7fr) minmax(150px, .7fr); align-items: end; gap: 12px; padding: 16px 18px; }
.gradebook-assessment-form .form-field { margin: 0; }
.gradebook-assessment-form .form-field > label { font-weight: 700; }
.gradebook-assessment-form input { width: 100%; }
.gradebook-global-maximum { max-width: 210px; }
.gradebook-no-competency-help { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.3; }
.gradebook-no-competency-help a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gradebook-no-competency-help a:hover, .gradebook-no-competency-help a:focus-visible { color: var(--primary-hover); }
.gradebook-competency-selector { grid-column: 1 / 4; min-width: 0; margin: 0; padding: 0; border: 0; }
.gradebook-competency-selector legend { margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.gradebook-competency-selector > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.gradebook-competency-option { display: grid; grid-template-columns: minmax(100px, 1fr) auto; align-items: center; flex: 0 1 auto; width: auto; min-width: 220px; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.gradebook-competency-option:has([data-gradebook-competency-check]:checked) { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.gradebook-competency-option > label:first-child { display: flex; align-items: center; gap: 7px; min-height: 38px; margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.gradebook-competency-selector input { width: auto; margin: 0; }
.gradebook-competency-maximum { display: flex; align-items: center; gap: 4px; min-height: 38px; margin: 0; padding: 4px 7px; border-left: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; }
.gradebook-assessment-form .gradebook-competency-maximum input[type="text"] { flex: 0 0 43px; width: 43px; min-width: 43px; max-width: 43px; min-height: 28px; padding: 3px 4px; appearance: textfield; -moz-appearance: textfield; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.gradebook-competency-maximum input::-webkit-inner-spin-button, .gradebook-competency-maximum input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.gradebook-competency-maximum:has(input:disabled) { opacity: .42; }
.gradebook-competency-option > .errorlist { grid-column: 1 / -1; margin: 0; padding: 5px 9px; border-top: 1px solid var(--border); }
.gradebook-assessment-title-field { grid-column: 1 / 3; }
.gradebook-assessment-date-field { grid-column: 3; }
.gradebook-global-maximum { grid-column: 4; }
.gradebook-assessment-type { grid-column: 4; min-width: 0; }
.gradebook-assessment-form > .button { grid-column: 4; justify-self: stretch; }
.gradebook-assessment-form:has(.gradebook-global-maximum) { grid-template-columns: minmax(240px, 1fr) minmax(150px, .34fr) minmax(120px, .22fr) minmax(150px, .3fr) minmax(150px, auto); }
.gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-title-field { grid-column: 1; }
.gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-date-field { grid-column: 2; }
.gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-global-maximum { grid-column: 3; max-width: none; }
.gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-type { grid-column: 4; grid-row: 1; }
.gradebook-assessment-form:has(.gradebook-global-maximum) > .button { grid-column: 5; grid-row: 1; }
.gradebook-viewbar { display: grid; grid-template-columns: auto minmax(150px, 210px) minmax(140px, 190px) minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; }
.gradebook-view-tabs { display: flex; align-self: center; height: 40px; margin: 0; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface-secondary); }
.gradebook-view-tabs button { min-height: 34px; padding: 5px 12px; border: 0; border-radius: 8px; color: var(--text-secondary); background: transparent; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.gradebook-view-tabs button.is-active { color: var(--primary); background: var(--surface); box-shadow: var(--shadow); }
.gradebook-view-select { display: contents; }
.gradebook-view-select > span { color: var(--text-secondary); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gradebook-viewbar select { width: 100%; min-width: 0; min-height: 40px; padding-block: 5px; font-size: 11px; font-weight: 600; }
.gradebook-assessment-title { width: 100%; overflow: hidden; padding: 0; border: 0; color: var(--text); background: transparent; font: inherit; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.gradebook-assessment-title:hover, .gradebook-assessment-title:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.gradebook-assessment-title:disabled { color: var(--text); cursor: not-allowed; opacity: .82; text-decoration: none; }
.gradebook-summary { padding: 0; overflow: hidden; }
.gradebook-summary-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.gradebook-summary-heading h2, .gradebook-summary-heading p { margin: 0; }
.gradebook-summary-heading p { color: var(--text-secondary); font-size: 11px; }
.gradebook-summary .table-wrap { max-height: max(420px, calc(100vh - 330px)); margin: 0; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; scrollbar-color: color-mix(in srgb, var(--primary) 45%, var(--border)) var(--surface-secondary); }
.gradebook-summary-table { width: max-content; min-width: 100%; border-spacing: 0; border-collapse: separate; }
.gradebook-summary-table th, .gradebook-summary-table td { min-width: 94px; }
.gradebook-summary-table thead th { position: sticky; z-index: 3; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-summary-table thead tr:first-child th { top: 0; height: 44px; }
.gradebook-summary-table thead tr:nth-child(2) th { top: 44px; height: 38px; }
.gradebook-summary-table thead tr:first-child th:not(:first-child), .gradebook-summary-table thead tr:nth-child(2) th:nth-child(odd), .gradebook-summary-table tbody td:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); }
.gradebook-summary-table thead th:first-child, .gradebook-summary-table tbody td:first-child { position: sticky; left: 0; min-width: 210px; text-align: left; }
.gradebook-summary-table thead th:first-child { z-index: 5; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.gradebook-summary-table tbody td:first-child { z-index: 2; background: var(--surface); box-shadow: 5px 0 12px color-mix(in srgb, var(--text) 5%, transparent); }
.gradebook-summary-table tbody tr:nth-child(even) td:first-child { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gradebook-summary-table tbody tr:hover td:first-child { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-summary-table td:not(:first-child), .gradebook-summary-table th:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.gradebook-summary-table strong.is-failing { color: var(--error); }
.gradebook-summary-student-name { display: flex; flex-wrap: wrap; gap: 0 .35em; min-width: 0; }
@media (max-width: 620px) {
    .gradebook-summary-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .gradebook-summary .table-wrap { max-height: calc(100dvh - 250px); }
    .gradebook-summary-table th, .gradebook-summary-table td { min-width: 86px; padding: 8px 7px; }
    .gradebook-summary-table thead th:first-child, .gradebook-summary-table tbody td:first-child { min-width: 150px; }
}
.gradebook-edit-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(88vh, 760px); padding: 0; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface); box-shadow: 0 24px 70px color-mix(in srgb, #000 32%, transparent); overflow: auto; }
.gradebook-edit-dialog::backdrop { background: color-mix(in srgb, #000 48%, transparent); backdrop-filter: blur(2px); }
.gradebook-edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 18px; }
.gradebook-edit-form header, .gradebook-edit-form footer, .gradebook-edit-form > .errorlist, .gradebook-edit-form > .form-field:first-of-type, .gradebook-edit-competencies { grid-column: 1 / -1; }
.gradebook-edit-form header, .gradebook-edit-form footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gradebook-edit-form header h2 { margin: 2px 0 0; font-size: 18px; }
.gradebook-edit-form footer { justify-content: flex-end; padding-top: 4px; }
.gradebook-edit-form .form-field { margin: 0; }
.gradebook-edit-form > .form-field input, .gradebook-edit-form > .form-field select { width: 100%; }
.gradebook-edit-competencies > small { display: block; margin-top: 7px; color: var(--text-secondary); font-size: 10px; }
.gradebook-form { min-width: 0; }
.gradebook-form > .gradebook-scroll, .gradebook-form > .gradebook-savebar { margin-bottom: 0; }
.gradebook-mobile-navigator { display: none; }
.gradebook-assessment-cell[hidden] { display: none !important; }
.gradebook-scroll { max-height: max(420px, calc(100vh - 330px)); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); box-shadow: var(--shadow); scrollbar-color: color-mix(in srgb, var(--primary) 45%, var(--border)) var(--surface-secondary); }
.gradebook-scroll:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent); outline-offset: 2px; }
.gradebook-table { width: 100%; min-width: max-content; border-spacing: 0; border-collapse: separate; table-layout: auto; font-size: 13px; }
.gradebook-student-column { width: 176px; }
.gradebook-score-column { width: 106px; }
.gradebook-spacer-column { width: auto; }
.gradebook-average-column { width: 150px; }
.gradebook-table th, .gradebook-table td { width: 106px; min-width: 106px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); text-align: center; }
.gradebook-table thead th { position: sticky; z-index: 3; padding: 0; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); vertical-align: top; }
.gradebook-table thead tr:first-child th { top: 0; height: 78px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 24%, var(--border)); }
.gradebook-table thead tr:nth-child(2) th { top: 78px; height: 42px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 26%, var(--border)); }
.gradebook-table tr:last-child > * { border-bottom: 0; }
.gradebook-table tr > *:last-child { border-right: 0; }
.gradebook-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gradebook-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-scroll-empty { max-height: none; border-radius: var(--radius); }
.gradebook-table-empty { min-width: 0; table-layout: fixed; }
.gradebook-table-empty .gradebook-student-heading { height: 56px; }
.gradebook-table-empty .gradebook-empty-heading { width: auto; min-width: 0; padding: 0 16px; color: var(--text-secondary); text-align: left; vertical-align: middle; }
.gradebook-table-empty .gradebook-empty-cell { width: auto; min-width: 0; }
.gradebook-table .gradebook-student-heading, .gradebook-table tbody th { position: sticky; left: 0; width: 176px; min-width: 176px; text-align: left; }
.gradebook-table .gradebook-student-heading { z-index: 5; display: table-cell; height: 120px; padding: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 26%, var(--border)); vertical-align: middle; }
.gradebook-student-heading span, .gradebook-student-heading small { display: block; }
.gradebook-student-heading span { font-weight: 600; }
.gradebook-student-heading small { margin-top: 3px; color: var(--text-secondary); font-weight: 500; }
.gradebook-table tbody th { z-index: 2; height: 48px; padding: 6px 10px; background: var(--surface); box-shadow: 1px 0 0 color-mix(in srgb, var(--primary) 20%, var(--border)); }
.gradebook-table tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gradebook-table tbody tr:hover th { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-table tbody th strong, .gradebook-table tbody th span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-table tbody th strong { font-weight: 600; }
.gradebook-table tbody th span { font-weight: 400; }
.gradebook-student-identity { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.gradebook-student-identity > span:last-child { min-width: 0; }
.gradebook-student-photo, .gradebook-student-initials { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; }
.gradebook-student-photo { object-fit: cover; cursor: zoom-in; }
.gradebook-table tbody th .gradebook-student-initials { display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); font-size: 10px; font-weight: 600; line-height: 1; text-align: center; }
.gradebook-assessment-group { border-left: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); }
.gradebook-assessment-group.is-locked { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--primary) 70%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--primary) 28%, var(--border)); }
.gradebook-table thead th.gradebook-locked-column { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.gradebook-assessment-heading { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 23px; align-content: center; justify-items: center; gap: 2px; height: 100%; padding: 5px 6px; }
.gradebook-assessment-heading strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.gradebook-assessment-meta { display: grid; justify-items: center; width: 100%; min-width: 0; color: var(--text-secondary); font-size: 10px; font-weight: 400; line-height: 1.2; }
.gradebook-assessment-meta > span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-assessment-actions { display: flex; align-items: center; justify-self: center; gap: 5px; height: 23px; }
.gradebook-assessment-heading .delete-icon-button, .gradebook-lock-button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; font-size: 15px; line-height: 1; }
.gradebook-lock-button { border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.gradebook-lock-button:hover, .gradebook-lock-button:focus-visible { color: var(--surface); background: var(--primary); transform: scale(1.04); }
.gradebook-lock-button.is-locked { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 17%, var(--surface)); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 16%, transparent); }
.gradebook-lock-button span { display: grid; place-items: center; font-size: 12px; line-height: 1; }
.gradebook-assessment-heading .delete-icon-button:disabled, .gradebook-competency-heading .delete-icon-button:disabled { color: var(--text-secondary); border-color: var(--border); background: var(--surface-secondary); cursor: not-allowed; opacity: .55; transform: none; }
.gradebook-table .is-group-start { border-left: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); }
.gradebook-competency-heading { position: relative; display: grid; place-items: center; height: 100%; padding: 5px 6px; }
.gradebook-competency-heading:has(.delete-icon-button) { padding-right: 26px; }
.gradebook-competency-heading strong { width: 100%; overflow: hidden; padding-block: 1px 2px; color: color-mix(in srgb, var(--primary) 45%, var(--text)); font-size: 10px; font-weight: 600; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.gradebook-competency-heading strong small { color: var(--text-secondary); font-size: 8px; font-weight: 500; }
.gradebook-competency-heading .delete-icon-button { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 23px; height: 23px; padding: 0 0 1px; font-size: 15px; line-height: 1; transform: translateY(-50%); }
.gradebook-competency-heading .delete-icon-button:hover { transform: translateY(-50%) scale(1.04); }
.gradebook-score-field { display: flex; align-items: center; justify-content: center; }
.gradebook-score-field input { width: 58px; min-height: 30px; padding: 4px 5px; appearance: textfield; -moz-appearance: textfield; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.gradebook-score-field input::-webkit-inner-spin-button, .gradebook-score-field input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.gradebook-score-field input:focus { position: relative; z-index: 1; }
.gradebook-score-field input.is-failing { color: var(--error); }
.gradebook-score-field input[aria-invalid="true"] { border-color: var(--error); background: color-mix(in srgb, var(--error) 5%, var(--surface)); }
.gradebook-table tbody td.gradebook-locked-cell { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.gradebook-table tbody tr:hover td.gradebook-locked-cell { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.gradebook-locked-cell .gradebook-score-field input:disabled { color: var(--text); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); cursor: not-allowed; opacity: .78; }
.gradebook-locked-cell .gradebook-score-field input.is-failing:disabled { color: var(--error); }
.gradebook-mobile-score-label, .gradebook-mobile-average-label { display: none; }
.gradebook-table .gradebook-flex-spacer { width: auto; min-width: 16px; padding: 0; }
.gradebook-table .gradebook-average-heading, .gradebook-table .gradebook-average-cell { position: sticky; right: 0; width: 150px; min-width: 150px; border-left: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); box-shadow: -5px 0 12px color-mix(in srgb, var(--text) 5%, transparent); }
.gradebook-table .gradebook-average-heading { z-index: 6; display: table-cell; padding: 10px 8px; background: color-mix(in srgb, var(--primary) 13%, var(--surface)); vertical-align: middle; }
.gradebook-average-heading strong, .gradebook-average-heading span { display: block; }
.gradebook-average-heading strong { font-size: 12px; }
.gradebook-average-heading span { margin-top: 2px; color: var(--text-secondary); font-size: 9px; font-weight: 500; }
.gradebook-table .gradebook-average-cell { z-index: 2; background: var(--surface); }
.gradebook-table tbody tr:nth-child(even) .gradebook-average-cell { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gradebook-table tbody tr:hover .gradebook-average-cell { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.gradebook-average-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gradebook-average-item { display: grid; place-items: center; min-width: 0; padding: 3px 2px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); font-variant-numeric: tabular-nums; }
.gradebook-average-item abbr { max-width: 100%; overflow: hidden; color: var(--text-secondary); font-size: 8px; font-weight: 700; letter-spacing: .03em; text-decoration: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gradebook-average-item strong { font-size: 10px; font-weight: 700; }
.gradebook-average-item strong.is-failing { color: var(--error); }
.gradebook-empty-row { padding: 28px !important; color: var(--text-secondary); text-align: center !important; }
.gradebook-savebar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--surface) 94%, var(--primary)); box-shadow: 0 -6px 18px color-mix(in srgb, var(--text) 5%, transparent); }
.gradebook-savebar span { color: var(--text-secondary); font-size: 11px; }
.gradebook-autosave-indicator { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.gradebook-form.is-saving .gradebook-autosave-indicator { background: var(--warning); animation: pulse 1s ease-in-out infinite; }
.gradebook-form.has-save-error .gradebook-autosave-indicator { background: var(--error); }
.gradebook-form.has-save-error .gradebook-savebar [data-gradebook-save-status] { color: var(--error); font-weight: 700; }
.gradebook-empty { display: flex; align-items: center; gap: 18px; }
.gradebook-empty > span { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 18px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-size: 28px; }
.gradebook-empty h2 { margin: 0 0 5px; }
.gradebook-empty p { margin: 0; color: var(--text-secondary); }

@media (max-width: 760px) {
    .course-info-inline-card, .course-info-inline-form { align-items: stretch; flex-direction: column; }
    .course-info-inline-form, .course-info-inline-form .form-field, .course-info-inline-form .course-info-hours-field { flex-basis: auto; width: 100%; }
    .course-info-inline-form .button { width: 100%; }
    .gradebook-header { align-items: flex-start; }
    .gradebook-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .gradebook-course-control { grid-column: 1 / -1; min-width: 0; }
    .gradebook-bundle-trigger { grid-column: 1; grid-row: 2; }
    .gradebook-create-trigger { grid-column: 2; grid-row: 2; }
    .gradebook-toolbar-panel { grid-row: 3; }
    .gradebook-toolbar-action { justify-content: center; }
    .gradebook-bundle-summary { justify-content: flex-start; flex-wrap: wrap; }
    .gradebook-assessment-form, .gradebook-assessment-form:has(.gradebook-global-maximum) { grid-template-columns: 1fr 1fr; }
    .gradebook-assessment-title-field, .gradebook-assessment-form .gradebook-competency-selector { grid-column: 1 / -1; }
    .gradebook-assessment-date-field, .gradebook-global-maximum, .gradebook-assessment-type, .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-type { grid-column: auto; grid-row: auto; }
    .gradebook-assessment-form > .button, .gradebook-assessment-form:has(.gradebook-global-maximum) > .button { grid-column: 2; grid-row: auto; justify-self: stretch; }
    .gradebook-viewbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
    .gradebook-view-tabs { grid-column: 1 / -1; width: 100%; }
    .gradebook-view-tabs button { flex: 1; }
    .gradebook-scroll { max-height: calc(100vh - 280px); border-radius: 13px 13px 0 0; }
    .gradebook-table th, .gradebook-table td { width: 96px; min-width: 96px; padding: 5px; }
    .gradebook-student-column { width: 124px; }
    .gradebook-score-column { width: 96px; }
    .gradebook-spacer-column, .gradebook-table .gradebook-flex-spacer { display: none; }
    .gradebook-average-column { width: 112px; }
    .gradebook-table .gradebook-student-heading, .gradebook-table tbody th { width: 124px; min-width: 124px; }
    .gradebook-table tbody th { padding: 6px 8px; }
    .gradebook-student-photo, .gradebook-student-initials { flex-basis: 28px; width: 28px; height: 28px; }
    .gradebook-score-field input { width: 62px; margin: 0 auto; }
    .gradebook-table .gradebook-average-heading, .gradebook-table .gradebook-average-cell { right: auto; width: 112px; min-width: 112px; box-shadow: none; }
    .gradebook-table .gradebook-average-cell { position: static; }
    .gradebook-average-item abbr { font-size: 7px; }
    .gradebook-average-item strong { font-size: 9px; }
}

@media (max-width: 440px) {
    .gradebook-header .button { width: 100%; }
    .gradebook-scroll { max-height: calc(100dvh - 230px); }
    .gradebook-table th, .gradebook-table td { width: 92px; min-width: 92px; }
    .gradebook-student-column { width: 112px; }
    .gradebook-score-column { width: 92px; }
    .gradebook-average-column { width: 108px; }
    .gradebook-table .gradebook-student-heading, .gradebook-table tbody th { width: 112px; min-width: 112px; }
    .gradebook-table .gradebook-average-heading, .gradebook-table .gradebook-average-cell { width: 108px; min-width: 108px; }
    .gradebook-student-identity { gap: 6px; }
    .gradebook-student-photo, .gradebook-student-initials { flex-basis: 26px; width: 26px; height: 26px; }
    .gradebook-score-field input { width: 60px; }
    .gradebook-assessment-form, .gradebook-assessment-form:has(.gradebook-global-maximum) { grid-template-columns: 1fr; }
    .gradebook-competency-option { grid-template-columns: minmax(0, 1fr) auto; min-width: 100%; }
    .gradebook-assessment-form .form-field:first-of-type, .gradebook-assessment-form .button { grid-column: 1; }
    .gradebook-empty { align-items: flex-start; }
}

@container (max-width: 820px) {
    .gradebook-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .gradebook-course-control { grid-column: 1 / -1; min-width: 0; }
    .gradebook-bundle-trigger { grid-column: 1; grid-row: 2; }
    .gradebook-create-trigger { grid-column: 2; grid-row: 2; }
    .gradebook-toolbar-panel { grid-row: 3; }
    .gradebook-toolbar-action { justify-content: center; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) { grid-template-columns: 1fr 1fr; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-title-field { grid-column: 1 / -1; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-date-field { grid-column: 1; grid-row: auto; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-global-maximum { grid-column: 2; grid-row: auto; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-type { grid-column: 1; grid-row: auto; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) > .button { grid-column: 2; grid-row: auto; }
}

@container (max-width: 620px) {
    .gradebook-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .gradebook-course-control { flex-wrap: wrap; }
    .gradebook-toolbar-label { flex-basis: 100%; }
    .gradebook-course-picker { flex-basis: 100%; min-width: 0; }
    .gradebook-bundle-trigger { grid-column: 1; grid-row: 2; }
    .gradebook-create-trigger { grid-column: 1; grid-row: 3; }
    .gradebook-toolbar-panel { grid-row: 4; }
    .gradebook-toolbar-action { justify-content: flex-start; width: 100%; }
    .gradebook-viewbar { grid-template-columns: 1fr; }
    .gradebook-view-tabs { grid-column: 1; width: 100%; }
    .gradebook-viewbar select { width: 100%; min-width: 0; }
    .gradebook-assessment-form, .gradebook-assessment-form:has(.gradebook-global-maximum) { grid-template-columns: 1fr; }
    .gradebook-assessment-title-field, .gradebook-assessment-date-field, .gradebook-global-maximum, .gradebook-assessment-type, .gradebook-assessment-form .gradebook-competency-selector, .gradebook-assessment-form > .button, .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-type, .gradebook-assessment-form:has(.gradebook-global-maximum) > .button { grid-column: 1; grid-row: auto; }
    .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-title-field, .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-assessment-date-field, .gradebook-assessment-form:has(.gradebook-global-maximum) .gradebook-global-maximum { grid-column: 1; grid-row: auto; }
    .gradebook-edit-form { grid-template-columns: 1fr; }
    .gradebook-edit-form header, .gradebook-edit-form footer, .gradebook-edit-form > .errorlist, .gradebook-edit-form > .form-field:first-of-type, .gradebook-edit-competencies { grid-column: 1; }
    .gradebook-mobile-navigator:not([hidden]) { position: sticky; top: 8px; z-index: 8; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: end; gap: 8px; margin-bottom: 10px; padding: 8px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--surface) 94%, var(--primary)); box-shadow: var(--shadow); }
    .gradebook-mobile-navigator label { display: grid; gap: 3px; min-width: 0; margin: 0; }
    .gradebook-mobile-navigator label span { color: var(--text-secondary); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .gradebook-mobile-navigator select { width: 100%; min-width: 0; min-height: 38px; padding-block: 5px; font-size: 13px; font-weight: 650; }
    .gradebook-mobile-navigator button { display: grid; place-items: center; width: 42px; min-height: 42px; padding: 0 0 3px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 10px; color: var(--primary); background: var(--surface); font: inherit; font-size: 25px; font-weight: 500; line-height: 1; cursor: pointer; }
    .gradebook-mobile-navigator button:disabled { color: var(--text-secondary); cursor: default; opacity: .42; }
    .gradebook-scroll { max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .gradebook-scroll:focus-visible { outline-offset: 4px; }
    .gradebook-table, .gradebook-table tbody { display: block; width: 100%; min-width: 0; }
    .gradebook-table colgroup, .gradebook-table thead { display: none; }
    .gradebook-table tbody { display: grid; gap: 12px; }
    .gradebook-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
    .gradebook-table tbody tr > th { position: static; grid-column: 1 / -1; width: auto; min-width: 0; height: auto; margin: -10px -10px 2px; padding: 10px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: none; }
    .gradebook-table tbody tr:nth-child(even) > th, .gradebook-table tbody tr:hover > th { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
    .gradebook-student-identity { gap: 9px; }
    .gradebook-student-photo, .gradebook-student-initials { flex-basis: 34px; width: 34px; height: 34px; }
    .gradebook-table tbody tr > td:not(.gradebook-flex-spacer) { display: grid; align-content: space-between; gap: 8px; width: auto; min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-secondary); text-align: left; }
    .gradebook-table tbody tr:nth-child(even) > td:not(.gradebook-flex-spacer), .gradebook-table tbody tr:hover > td:not(.gradebook-flex-spacer) { background: var(--surface-secondary); }
    .gradebook-table tbody tr > td.is-group-start { border-left: 1px solid var(--border); }
    .gradebook-mobile-score-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; min-width: 0; line-height: 1.2; }
    .gradebook-mobile-score-label small { grid-column: 1 / -1; overflow: hidden; color: var(--text-secondary); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .gradebook-mobile-score-label strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .gradebook-mobile-score-label > span { align-self: end; color: var(--text-secondary); font-size: 9px; white-space: nowrap; }
    .gradebook-score-field { justify-content: stretch; }
    .gradebook-score-field input { width: 100%; min-height: 44px; margin: 0; font-size: 16px; }
    .gradebook-table tbody tr > .gradebook-average-cell { position: static; display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; width: auto; min-width: 0; padding: 10px; border-left: 1px solid var(--border); box-shadow: none; }
    .gradebook-mobile-average-label { display: block; color: var(--text-secondary); font-size: 10px; font-weight: 650; line-height: 1.25; }
    .gradebook-average-list { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
    .gradebook-empty-row { grid-column: 1 / -1; }
    .gradebook-table-empty tbody tr { grid-template-columns: 1fr; padding: 0; }
    .gradebook-table-empty tbody tr > th { margin: 0; border: 0; border-radius: 13px; }
    .gradebook-table-empty tbody tr > td.gradebook-empty-cell { display: none; }
    .gradebook-table-empty .gradebook-empty-row { display: block; padding: 24px !important; border: 0; background: transparent; }
    .gradebook-savebar { margin-top: 0; border-top: 1px solid var(--border); border-radius: 0 0 13px 13px; }
}

/* Actions groupées administratives */
.bulk-actions-header { align-items: flex-end; }
.bulk-actions-header p { max-width: 680px; margin: 7px 0 0; }
.bulk-actions-filters { margin-bottom: 18px; }
.bulk-actions-filters > input { flex: 0 1 320px; min-width: 220px; }
.bulk-actions-filters > select { flex: 0 1 190px; min-width: 150px; }
.bulk-actions-filters > #bulk-target { flex-basis: 150px; width: 150px; }
.bulk-course-action-card { padding: 0; overflow: hidden; }
.bulk-course-action-controls { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)) auto; align-items: end; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); }
.bulk-course-action-controls .form-field { margin: 0; }
.bulk-course-action-controls input, .bulk-course-action-controls select { width: 100%; }
.bulk-course-action-controls .button { min-height: 43px; }
.bulk-delete-confirmation small { display: block; margin-top: 5px; color: var(--error-tone-text); font-size: 11px; line-height: 1.35; }
.bulk-course-selection-status { margin: 0; padding: 12px 18px; color: var(--text-secondary); background: var(--surface-secondary); }
.bulk-course-selection-status strong { color: var(--text); }
.bulk-course-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.bulk-course-table th:first-child, .bulk-course-table td:first-child { width: 52px; text-align: center; }
.bulk-course-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.bulk-course-table td strong, .bulk-course-table td small { display: block; }
.bulk-course-table td small { margin-top: 3px; color: var(--text-secondary); }
.bulk-course-degree { white-space: nowrap; }

/* Génération administrative des compétences */
.competency-generation-header p { max-width: 760px; margin: 7px 0 0; }
.competency-model-card, .competency-generate-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 390px); align-items: center; gap: 20px; margin-bottom: 20px; }
.competency-step-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: var(--primary); font-size: 20px; font-weight: 900; box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 28%, transparent); }
.competency-step-copy h2, .competency-generate-card h2 { margin: 0 0 6px; }
.competency-step-copy > p, .competency-generate-card > div > p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.competency-model-current { margin-top: 12px !important; color: var(--text) !important; }
.competency-model-current small { display: block; margin-top: 2px; color: var(--text-secondary); }
.competency-upload-form { display: grid; gap: 12px; }
.competency-upload-form .form-field { margin: 0; }
.competency-upload-form input[type="file"] { width: 100%; }
.competency-generate-card > form { justify-self: end; }
.competency-generate-card details { margin-top: 12px; }
.competency-report-heading { display: flex; align-items: end; justify-content: space-between; margin: 28px 0 14px; }
.competency-report-heading h2 { margin: 3px 0 4px; }
.competency-report-heading p { margin: 0; }
.competency-proposal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.competency-proposal-card { display: grid; align-content: start; gap: 12px; min-width: 0; }
.competency-proposal-card.is-validated { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.competency-proposal-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.competency-proposal-meta h3 { margin: 8px 0 2px; }
.competency-proposal-meta small { color: var(--text-secondary); }
.competency-confidence { display: grid; flex: 0 0 auto; justify-items: end; }
.competency-confidence strong { color: var(--primary); font-size: 21px; }
.competency-confidence span { color: var(--text-secondary); font-size: 11px; }
.competency-source { margin: 0; padding: 9px 11px; border-radius: 10px; color: var(--text-secondary); background: var(--surface-secondary); font-size: 12px; }
.competency-proposal-card > label { font-size: 12px; font-weight: 800; }
.competency-proposal-card textarea { width: 100%; min-height: 104px; resize: vertical; line-height: 1.45; }
.competency-proposal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.competency-proposal-actions .badge { margin-right: auto; }
.competency-global-validation { position: sticky; bottom: 14px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); background: color-mix(in srgb, var(--surface) 94%, var(--primary)); box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 14%, transparent); }
.competency-global-validation div { display: grid; gap: 3px; }
.competency-global-validation span { color: var(--text-secondary); font-size: 12px; }

@media (max-width: 920px) {
    .bulk-course-action-controls { grid-template-columns: 1fr 1fr; }
    .bulk-course-action-controls .button { width: 100%; }
    .competency-model-card, .competency-generate-card { grid-template-columns: auto minmax(0, 1fr); }
    .competency-upload-form, .competency-generate-card > form { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
    .competency-upload-form .button, .competency-generate-card > form .button { width: 100%; }
    .competency-proposal-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .bulk-actions-header { align-items: stretch; }
    .bulk-actions-header .button { width: 100%; }
    .bulk-actions-filters > * { flex: 1 1 100%; width: 100%; max-width: none; }
    .bulk-course-action-controls { grid-template-columns: 1fr; }
    .bulk-course-table thead { display: none; }
    .bulk-course-table, .bulk-course-table tbody, .bulk-course-table tr, .bulk-course-table td { display: block; width: 100%; }
    .bulk-course-table tr { position: relative; padding: 12px 14px 12px 50px; border-bottom: 1px solid var(--border); }
    .bulk-course-table td { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 5px 0; border: 0; text-align: left; }
    .bulk-course-table td::before { color: var(--text-secondary); font-size: 11px; font-weight: 800; content: attr(data-label); }
    .bulk-course-table td:first-child { position: absolute; top: 13px; left: 14px; display: block; width: auto; padding: 0; }
    .bulk-course-table td:first-child::before { content: none; }
    .bulk-course-table td[colspan] { display: block; padding: 0; }
    .competency-model-card, .competency-generate-card { align-items: flex-start; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
    .competency-step-number { width: 40px; height: 40px; border-radius: 13px; }
    .competency-global-validation { align-items: stretch; flex-direction: column; bottom: 8px; }
    .competency-global-validation .button { width: 100%; }
}

.pwa-install { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-secondary); }
.pwa-install summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.pwa-install summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pwa-install-icon { color: var(--primary); font-size: 20px; line-height: 1; }
.pwa-install-content { display: grid; gap: 10px; padding: 0 12px 12px; }
.pwa-install-content p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.pwa-install-content .button { width: 100%; min-height: 38px; padding: 8px 11px; }
.login-form .pwa-install { margin-top: 18px; }
.side-nav .pwa-install { flex: 0 0 auto; margin: 14px 4px 4px; }
@media (min-width: 781px) {
    html.sidebar-compact .side-nav .pwa-install { margin: 6px 0 2px; }
    html.sidebar-compact .side-nav .pwa-install summary { flex-direction: column; gap: 2px; padding: 7px 2px; font-size: 10px; text-align: center; }
    html.sidebar-compact .side-nav .pwa-install-icon { font-size: 23px; }
    html.sidebar-compact .side-nav .pwa-install-content { position: fixed; z-index: 90; bottom: 16px; left: calc(var(--sidebar-compact-width) + 8px); width: min(270px, calc(100vw - var(--sidebar-compact-width) - 24px)); padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
}
.bulletin-period-variants { display: grid; gap: .75rem; margin-bottom: 1rem; }
.bulletin-period-copy { display: flex; flex-direction: column; gap: .2rem; }
.bulletin-period-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.bulletin-period-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.bulletin-period-status { color: var(--text-secondary); }
.bulletin-period-tabs .is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
@media (min-width: 900px) {
    .bulletin-period-variants { grid-template-columns: minmax(260px, 1fr) auto; align-items: center; }
    .bulletin-period-controls { justify-content: flex-end; }
    .bulletin-period-status { white-space: nowrap; }
}
.bulletin-extra-pages-list { display: grid; gap: 1rem; margin-bottom: 1rem; }
.bulletin-extra-page-editor { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-secondary); transition: border-color .18s ease, box-shadow .18s ease; }
.bulletin-extra-page-editor.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.bulletin-extra-page-editor > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .8rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.bulletin-extra-page-heading, .bulletin-extra-page-actions, .bulletin-extra-formatting, .bulletin-extra-block-actions { display: flex; align-items: center; gap: .5rem; }
.bulletin-extra-page-heading > div { display: grid; gap: .08rem; }
.bulletin-extra-page-heading small, .bulletin-extra-add-actions > span { color: var(--text-secondary); font-size: .76rem; }
.bulletin-extra-page-number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-weight: 800; }
.bulletin-icon-button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: .65rem; color: var(--text); background: var(--surface); cursor: pointer; }
.bulletin-icon-button:hover, .bulletin-icon-button:focus-visible { border-color: var(--primary); color: var(--primary); }
.bulletin-extra-page-anchor { display: grid; justify-items: center; gap: .1rem; padding: .7rem 1rem; border: 1px dashed color-mix(in srgb, var(--primary) 48%, var(--border)); border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); text-align: center; }
.bulletin-extra-page-anchor span { font-weight: 750; }
.bulletin-extra-page-anchor small { color: var(--text-secondary); font-size: .72rem; }
.bulletin-extra-page-anchor.is-disabled { border-color: var(--border); color: var(--text-secondary); background: var(--surface-secondary); }
.bulletin-extra-audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.bulletin-extra-page-settings { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .65rem .85rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.bulletin-extra-page-settings label, .bulletin-extra-page-settings label > span { display: flex; align-items: center; gap: .4rem; margin: 0; }
.bulletin-extra-page-settings input { width: 4.5rem; }
.bulletin-extra-page-settings small { color: var(--text-secondary); font-size: .74rem; }
.bulletin-extra-page-settings .bulletin-extra-frame-toggle { display: inline-flex; }
.bulletin-extra-page-settings .bulletin-extra-frame-toggle input { width: auto; }
.bulletin-extra-frame-color input[type="color"] { width: 2.2rem; height: 2.2rem; padding: 2px; border-radius: .55rem; cursor: pointer; }
.bulletin-extra-frame-color .bulletin-color-hex { width: 6.4rem !important; }
.bulletin-designer-form .bulletin-extra-degrees { display: flex; align-content: flex-start; align-items: center; flex-wrap: wrap; gap: .4rem; min-width: 0; margin: 0; padding: .7rem .85rem; border: 0; }
.bulletin-designer-form .bulletin-extra-degrees + .bulletin-extra-degrees { border-left: 1px solid var(--border); }
.bulletin-extra-degrees legend { grid-column: 1 / -1; width: 100%; margin: 0 0 .15rem; color: var(--text-secondary); font-size: .76rem; font-weight: 700; }
.bulletin-extra-degree { display: inline-flex; align-items: center; min-width: 0; gap: .35rem; margin: 0; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: .78rem; cursor: pointer; }
.bulletin-extra-degree span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulletin-extra-degree:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.bulletin-extra-degree input { margin: 0; }
.bulletin-extra-blocks { display: grid; gap: 0; padding: 0; border-top: 1px solid var(--border); }
.bulletin-extra-block-editor { display: grid; gap: .65rem; padding: .85rem; border: 0; border-radius: 0; background: var(--surface); }
.bulletin-extra-block-toolbar { display: grid; grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr); grid-template-areas: "type font" "size spacing" "leading leading" "formatting formatting"; align-items: center; gap: .65rem .8rem; min-width: 0; }
.bulletin-extra-block-toolbar select { min-width: 0; width: 100%; }
.bulletin-extra-block-toolbar > [data-block-type] { grid-area: type; }
.bulletin-extra-block-toolbar > [data-block-font] { grid-area: font; }
.bulletin-extra-size { grid-area: size; }
.bulletin-extra-spacing { grid-area: spacing; }
.bulletin-extra-line-height { grid-area: leading; justify-self: start; width: min(100%, 9rem); }
.bulletin-extra-size, .bulletin-extra-spacing, .bulletin-extra-line-height { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .35rem; min-width: 0; margin: 0; color: var(--text-secondary); font-size: .78rem; }
.bulletin-extra-size > span:first-child, .bulletin-extra-spacing > span:first-child, .bulletin-extra-line-height > span:first-child { grid-column: 1 / -1; }
.bulletin-extra-size input, .bulletin-extra-spacing input, .bulletin-extra-line-height input { width: 100%; min-width: 0; }
.bulletin-extra-formatting { grid-area: formatting; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.bulletin-extra-check, .bulletin-extra-color { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; }
.bulletin-extra-color input[type="color"] { width: 2.2rem; height: 2.2rem; padding: 2px; border-radius: .55rem; cursor: pointer; }
.bulletin-extra-color .bulletin-color-hex { width: 6.4rem !important; }
.bulletin-format-button { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--text); background: var(--surface-secondary); cursor: pointer; }
.bulletin-format-button:hover, .bulletin-format-button:focus-visible { border-color: var(--primary); color: var(--primary); }
.bulletin-format-button.is-active { border-color: var(--primary); color: #fff; background: var(--primary); }
.bulletin-format-button.is-mixed { border-style: dashed; border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.bulletin-text-align-controls { display: inline-flex; gap: .25rem; }
.bulletin-align-icon { display: grid; justify-items: start; gap: 2px; width: 15px; }
.bulletin-align-icon i { display: block; width: 15px; height: 2px; border-radius: 999px; background: currentColor; }
.bulletin-align-icon i:nth-child(2) { width: 10px; }
.bulletin-align-icon.is-center { justify-items: center; }
.bulletin-align-icon.is-justify { justify-items: stretch; }
.bulletin-align-icon.is-justify i:nth-child(2) { width: 15px; }
.bulletin-list-button { white-space: nowrap; }
.bulletin-extra-color.is-mixed { padding: .2rem; border: 1px dashed var(--primary); border-radius: .6rem; }
.bulletin-format-summary { flex-basis: 100%; color: var(--text-secondary); font-size: .72rem; }
.bulletin-extra-dynamic-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .45rem .65rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.bulletin-extra-dynamic-fields label { display: grid; gap: .3rem; min-width: 0; margin: 0; color: var(--text-secondary); font-size: .78rem; }
.bulletin-extra-dynamic-fields select { width: 100%; min-width: 0; }
.bulletin-extra-dynamic-fields small { grid-column: 1 / -1; color: var(--text-secondary); font-size: .72rem; }
.bulletin-extra-block-excerpt { width: 100%; padding: .65rem .75rem; overflow: hidden; border: 1px dashed var(--border); border-radius: .6rem; color: var(--text-secondary); background: var(--surface-secondary); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.bulletin-extra-tables { display: grid; gap: .7rem; padding: .8rem .85rem; border-top: 1px solid var(--border); background: var(--surface); }
.bulletin-extra-tables > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.bulletin-extra-tables > header > div { display: grid; gap: .08rem; }
.bulletin-extra-tables > header small, .bulletin-extra-table-editor small { color: var(--text-secondary); font-size: .74rem; }
.bulletin-extra-tables [data-extra-tables] { display: grid; gap: .55rem; }
.bulletin-extra-table-editor { display: grid; grid-template-columns: minmax(7rem, 1fr) auto; align-items: center; gap: .65rem .8rem; padding: .7rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface-secondary); }
.bulletin-extra-table-editor > div:first-child { display: grid; gap: .08rem; }
.bulletin-extra-table-alternate { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; white-space: nowrap; }
.bulletin-extra-table-spacing { grid-column: 1 / -1; display: flex; gap: .75rem; flex-wrap: wrap; }
.bulletin-extra-table-spacing label, .bulletin-extra-table-spacing label > span { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--text-secondary); font-size: .78rem; }
.bulletin-extra-table-spacing input { width: 4.5rem; }
.bulletin-extra-table-actions { grid-column: 1 / -1; display: flex; gap: .45rem; flex-wrap: wrap; }
.bulletin-extra-add-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .75rem .85rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.bulletin-extra-pages-preview { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.bulletin-extra-page-preview-wrap { display: grid; gap: .5rem; padding: 4px; border: 2px solid transparent; border-radius: 8px; transition: border-color .18s ease, background .18s ease; }
.bulletin-extra-page-preview-wrap.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.bulletin-extra-page-preview { box-sizing: border-box; min-height: 720px; padding: clamp(20px, 3vw, 35px); display: block; }
.bulletin-extra-page-preview.is-landscape { min-height: 500px; }
.bulletin-extra-page-preview.has-decorative-frame::after { position: absolute; z-index: 5; inset: 12px; border: 2px solid var(--extra-page-frame-color, var(--bulletin-accent)); content: ""; pointer-events: none; }
.bulletin-extra-rich-block { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.bulletin-extra-rich-block ul { margin: 0; padding-left: 1.65em; }
.bulletin-extra-rich-block li { padding-left: .18em; }
.bulletin-extra-rich-line { min-height: 1.35em; }
.bulletin-extra-page-preview [data-extra-editable] { min-height: 1.35em; border-radius: 5px; white-space: pre-wrap; cursor: text; outline: 1px dashed transparent; outline-offset: 4px; }
.bulletin-extra-page-preview [data-extra-editable]:hover { outline-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.bulletin-extra-page-preview [data-extra-editable]:focus { outline: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.bulletin-extra-dynamic-value { display: inline; padding: 0 .12em; border-radius: .25em; background: color-mix(in srgb, var(--primary) 8%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bulletin-extra-page-preview [contenteditable="true"] .bulletin-extra-dynamic-value { cursor: default; }
.bulletin-extra-table-preview { width: 100%; border-collapse: collapse; table-layout: fixed; color: #111827; font-size: 10px; line-height: 1.3; }
.bulletin-extra-table-preview td { min-width: 0; padding: 5px 6px; border: 1px solid #b8c0cc; vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
.bulletin-extra-table-preview.has-alternate-rows tr:nth-child(even) td { background: #f1f3f5; }
.bulletin-extra-table-preview td:hover { outline: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: -2px; }
.bulletin-extra-table-preview td:focus { outline: 2px solid var(--primary); outline-offset: -2px; background: color-mix(in srgb, var(--primary) 5%, #fff); }
@media (min-width: 1001px) { .bulletin-designer-preview-wrap { max-height: calc(100vh - 40px); padding-right: 8px; overflow-y: auto; scrollbar-gutter: stable; } }
@media (max-width: 700px) { .bulletin-extra-audiences { grid-template-columns: minmax(0, 1fr); } .bulletin-designer-form .bulletin-extra-degrees + .bulletin-extra-degrees { border-top: 1px solid var(--border); border-left: 0; } .bulletin-extra-block-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "type" "font" "size" "spacing" "leading" "formatting"; align-items: start; } .bulletin-extra-dynamic-fields { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .bulletin-extra-dynamic-fields small { grid-column: 1; } .bulletin-extra-table-editor { grid-template-columns: minmax(0, 1fr); } .bulletin-extra-table-alternate, .bulletin-extra-table-actions { grid-column: 1; } }

@media (max-width: 780px) {
    .dashboard-page .page-header { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: start; gap: 14px; width: 100%; }
    .dashboard-page .page-header > div:first-child { grid-column: 1; grid-row: 1; align-self: center; }
    .dashboard-page .page-header h1 { overflow-wrap: anywhere; }
    .dashboard-page .dashboard-header-actions { display: contents; }
    .dashboard-page .dashboard-updates-trigger { grid-column: 2; grid-row: 1; }
    .dashboard-page .dashboard-header-actions .button { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
.mfa-panel { max-width: 42rem; margin-inline: auto; }
.mfa-support-users { display: grid; gap: 12px; margin-block: 20px; }
.mfa-support-layout { max-width: 68rem; margin-inline: auto; }
.mfa-support-search { display: flex; align-items: flex-end; gap: 12px; max-width: 38rem; }
.mfa-support-search > div { flex: 1; min-width: 0; margin: 0; }
.mfa-support-search label { display: block; margin-bottom: 8px; }
.mfa-support-search input { margin: 0; }
.mfa-support-search .button { flex-shrink: 0; }
@media (max-width: 540px) {
    .mfa-support-search { flex-direction: column; align-items: stretch; gap: 10px; }
}
.mfa-support-user { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.mfa-support-user > div { min-width: 0; overflow-wrap: anywhere; }
.mfa-support-user p { margin: 4px 0 0; }
.mfa-support-identity { display: flex; align-items: center; gap: 14px; flex: 1 1 18rem; }
.mfa-support-identity > div { min-width: 0; }
.mfa-support-avatar { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--primary-soft); color: var(--text); font-weight: 600; }
.mfa-support-name { margin: 0; font-size: 1rem; }
.mfa-support-identity .badge { margin-top: 8px; }
#mfa-support-search-status { opacity: 0; }
#mfa-support-search-status.htmx-request { opacity: 1; }
@media (max-width: 540px) {
    .mfa-support-user > .button { width: 100%; white-space: normal; text-align: center; }
}
.mfa-support-code { padding: 20px; text-align: center; font-size: 1.25rem; background: var(--primary-soft); border-radius: 12px; overflow-wrap: anywhere; }
.profile-mfa-card { --mfa-tone: var(--primary); --mfa-soft: var(--primary-soft); --mfa-label: var(--text); background: linear-gradient(115deg, var(--mfa-soft), var(--surface) 72%); }
.profile-mfa-card.is-enabled { --mfa-tone: var(--success); --mfa-soft: var(--success-soft); --mfa-label: var(--success-tone-text); }
.profile-mfa-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.profile-mfa-icon { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border-radius: 16px; background: var(--mfa-soft); color: var(--mfa-tone); border: 1px solid color-mix(in srgb, var(--mfa-tone) 28%, transparent); }
.profile-mfa-icon svg { width: 32px; height: 32px; }
.profile-mfa-title { flex: 1; min-width: 180px; }
.profile-mfa-title h2 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.35; }
.profile-mfa-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.profile-mfa-status { padding: 6px 11px; border-radius: 999px; background: var(--mfa-soft); color: var(--mfa-label); border: 1px solid color-mix(in srgb, var(--mfa-tone) 32%, transparent); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.profile-mfa-card > p { margin: 18px 0; line-height: 1.6; }
.profile-mfa-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.profile-mfa-factors { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: .8rem; }
.profile-mfa-factors > span { display: inline-flex; align-items: center; gap: 6px; }
.profile-mfa-factors b { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: .75rem; }
.profile-mfa-plus { color: var(--text-secondary); }
.profile-mfa-footer .button { gap: 10px; }
@media (max-width: 540px) {
    .profile-mfa-heading { gap: 10px; }
    .profile-mfa-title { min-width: 150px; }
    .profile-mfa-title h2 { font-size: 1rem; }
    .profile-mfa-footer .button { width: 100%; }
}
.mfa-layout { max-width: 42rem; margin-inline: auto; }
.mfa-layout .page-header { text-align: center; justify-content: center; }
.mfa-management-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.mfa-actions .button { white-space: normal; text-align: center; }
.mfa-qr { display: block; max-width: 100%; height: auto; margin-block: 1rem; }
.mfa-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; padding-inline-start: 1.5rem; }
.mfa-codes code { overflow-wrap: anywhere; font-size: .95rem; }
.mfa-panel form button { white-space: normal; }
@media print {
    body:has(.mfa-recovery-sheet) * { visibility: hidden; }
    body:has(.mfa-recovery-sheet) .mfa-recovery-sheet,
    body:has(.mfa-recovery-sheet) .mfa-recovery-sheet * { visibility: visible; }
    body:has(.mfa-recovery-sheet) .mfa-recovery-sheet { position: absolute; inset: 0; max-width: none; }
    body:has(.mfa-recovery-sheet),
    body:has(.mfa-recovery-sheet) .mfa-recovery-sheet { color: #000; background: #fff; box-shadow: none; border: none; }
    body:has(.mfa-recovery-sheet) .mfa-actions { display: none; }
}

/* Commentaires des fiches dans le journal et les suivis. */
.journal-entry-form .journal-fiche-comment { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px 8px; align-items: end; width: 100%; }
.journal-entry-form .journal-fiche-comment[hidden] { display: none; }
.journal-fiche-comment label { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); }
.journal-entry-form .journal-fiche-comment textarea { width: 100%; min-width: 0; min-height: 62px; resize: vertical; }
.journal-entry-form .journal-fiche-comment textarea[readonly] { color: var(--text); background: var(--surface-secondary); cursor: not-allowed; }
.journal-fiche-actions { display: grid; align-self: stretch; align-content: end; gap: 5px; }
.journal-fiche-icon-button { width: 34px; min-height: 30px; padding: 0; font-size: 20px; line-height: 1; }
.journal-fiche-icon-button span { transform: translateY(-1px); }
.journal-student-flags label:has(input[data-journal-fiche-locked="true"]) { opacity: 1; cursor: default; }
.journal-student-tracking-list:has(.journal-fiche-comment:not([hidden])) { max-height: min(55vh, 420px); }
.discipline-tracking-comments { margin-top: 18px; }
.journal-tracking-comment { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.tracking-comment-entry { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tracking-comment-entry:last-child { border-bottom: 0; }

.journal-fiche-status { grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; }
.journal-absence-option .journal-fiche-status { white-space: normal; overflow-wrap: anywhere; }
.journal-fiche-status:empty { display: none; }
.journal-fiche-status.is-error { color: var(--error-tone-text); }

/* Page-based settings groups and full-width controls inside feature cards. */
.settings-page-group { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }
.settings-feature-control, .settings-feature-action, .settings-feature-option .course-order-warning { grid-column: 1 / -1; min-width: 0; }
.settings-feature-control input, .settings-feature-control select { width: 100%; min-width: 0; }
.settings-feature-action { justify-self: start; margin-top: 2px; white-space: normal; text-align: left; }
.settings-annual-option { margin: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.settings-annual-option > button, .settings-annual-option > .disabled-action-tooltip { align-self: flex-start; margin-top: auto; }
.settings-annual-option h3 { margin: 3px 0 6px; font-size: 15px; }
.settings-journal-period-row[hidden] { display: none; }
.school-logo-upload .school-logo-preview { display: grid; padding: 0; background: none; border: 0; }
.school-logo-upload .school-logo-preview img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; }
.school-logo-upload .profile-photo-action { overflow-wrap: anywhere; }
html[data-theme="dark"] .settings-feature-option { background: linear-gradient(145deg, color-mix(in srgb, var(--feature-color) 15%, var(--surface)), var(--surface)); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .settings-feature-option { background: linear-gradient(145deg, color-mix(in srgb, var(--feature-color) 15%, var(--surface)), var(--surface)); }
}

.school-logo-clear { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.school-logo-clear input[type="checkbox"] { width: auto; }

@container (max-width: 450px) {
    .settings-journal-period-row { grid-template-columns: 24px minmax(0, 1fr); }
    .settings-journal-period-row > strong { grid-row: span 2; }
    .settings-journal-period-row label { grid-column: 2; }
    .settings-journal-period-row label > span { display: block; }
    .settings-journal-period-heading { display: none; }
}

.settings-panel > h2 { margin-top: 0; }
.settings-identity-form > .form-field > label { font-weight: 600; }
.settings-feature-action[hidden] { display: none; }
.settings-classes-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.settings-classes-dialog h2 { margin-top: 0; padding-right: 24px; }
.settings-classes-dialog .staff-checkbox-list { display: block; max-height: min(45dvh, 420px); overflow-y: auto; }
.settings-classes-dialog .staff-checkbox-list > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.settings-classes-dialog .staff-checkbox-list label { display: flex; align-items: center; gap: 8px; }
.settings-classes-dialog input[type="checkbox"] { width: auto; }
.gradebook-proposal {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(360px, calc(100vw - 16px));
    max-height: min(420px, calc(100dvh - 16px));
    overflow: auto;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    text-align: left;
    white-space: normal;
}
.gradebook-proposal section + section { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.gradebook-proposal strong { display: block; padding-right: 1.25rem; }
.gradebook-proposal small { display: block; color: var(--text-secondary); margin: .5rem 0; }
.gradebook-proposal details { margin-top: .75rem; font-size: .85rem; }
.gradebook-proposal summary { cursor: pointer; color: var(--primary); }
.gradebook-proposal ul { padding-left: 1.2rem; }
.gradebook-proposal-close { float: right; border: 0; background: var(--surface-secondary); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 1.2rem; }

/* Landing page — illustrations enrichies et cartes de fonctionnalités */
.landing-story-document .landing-feature-card {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 19px;
    width: 350px;
    min-height: 158px;
    padding: 22px 22px 42px;
    border-color: rgba(85, 42, 174, .2);
    border-radius: 27px;
    box-shadow: 0 20px 42px rgba(61, 32, 108, .13), inset 0 1px 0 rgba(255, 255, 255, .74);
    opacity: .98;
}
.landing-story-document .landing-feature-card::before {
    position: absolute;
    top: -55px;
    right: -34px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .64);
    filter: blur(22px);
    content: "";
}
.landing-story-document .landing-feature-card::after {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
    background-position: 12px 12px;
    background-size: 19px 19px;
    mask-image: linear-gradient(130deg, transparent 28%, #000);
    content: "";
}
.landing-story-document .landing-feature-card > i {
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 25px rgba(54, 29, 98, .13);
}
.landing-story-document .landing-feature-card > i svg { width: 32px; height: 32px; stroke-width: 2; }
.landing-story-document .landing-feature-card > span { position: relative; z-index: 2; }
.landing-story-document .landing-feature-card b { font-size: 20px; font-weight: 650; }
.landing-story-document .landing-feature-card small { margin-top: 6px; font-size: 13px; line-height: 1.35; }
.landing-story-document .landing-feature-card > em { right: 18px; bottom: 15px; z-index: 2; padding: 6px 12px; font-size: 11px; box-shadow: 0 6px 14px rgba(54,29,98,.08); }
.landing-story-document .landing-feature-card.is-purple { background: linear-gradient(135deg, #f0e9ff 0%, #d8c6ff 58%, #c8b0ff 100%); }
.landing-story-document .landing-feature-card.is-pink { background: linear-gradient(135deg, #fff0f8 0%, #ffd0e8 58%, #ffb5db 100%); }
.landing-story-document .landing-feature-card.is-cyan { background: linear-gradient(135deg, #e9feff 0%, #bef1f4 58%, #9de6eb 100%); }
.landing-story-document .landing-feature-card.is-violet { background: linear-gradient(135deg, #f3efff 0%, #d9ceff 58%, #c8b8ff 100%); }
.landing-story-document .landing-feature-card.is-blue { background: linear-gradient(135deg, #eef8ff 0%, #cbe8ff 58%, #acd8ff 100%); }
.landing-story-document .landing-feature-card.is-yellow { background: linear-gradient(135deg, #fffbed 0%, #ffeaa9 58%, #ffdb6b 100%); }
.landing-story-document .landing-feature-card.is-coral { background: linear-gradient(135deg, #fff4ef 0%, #ffd4c7 58%, #ffb7a3 100%); }
.landing-story-document .landing-feature-card.is-dark { background: radial-gradient(circle at 100% 0, rgba(237,59,157,.32), transparent 42%), linear-gradient(135deg, #24163c, #543070); }
.landing-feature-streams.is-orbit-ready .landing-feature-card,
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact { width: clamp(330px, 24vw, 390px); min-height: 158px; }

.landing-year-visual { min-height: 610px; padding-top: 5px; }
.landing-year-window {
    grid-template-columns: 70px 1fr;
    width: 100%;
    height: 430px;
    border-color: rgba(99, 50, 192, .25);
    border-radius: 32px;
    background: radial-gradient(circle at 90% 5%, rgba(56,214,220,.2), transparent 30%), radial-gradient(circle at 15% 100%, rgba(237,59,157,.11), transparent 34%), #fdfcff;
    box-shadow: 0 42px 100px rgba(61, 32, 110, .28);
    transform: rotate(-.8deg);
}
.landing-year-window::before { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, #7540d7 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(120deg, transparent 46%, #000); content: ""; pointer-events: none; }
.landing-year-window::after { right: 0; height: 5px; }
.landing-year-window-sidebar { position: relative; z-index: 2; gap: 13px; padding: 20px 12px; background: linear-gradient(180deg, #241440, #371b5d); }
.landing-year-window-sidebar b { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 10px 24px rgba(237,59,157,.25); }
.landing-year-window-sidebar span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: rgba(255,255,255,.56); font-size: 13px; font-weight: 800; }
.landing-year-window-sidebar span.is-active { color: white; background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.landing-year-window-sidebar i { display: grid; width: 36px; height: 36px; margin-top: auto; place-items: center; border-radius: 50%; color: #28153e; background: linear-gradient(135deg, #ffd76b, #ff98cd); font-size: 8px; font-style: normal; font-weight: 900; }
.landing-year-window-main { position: relative; z-index: 1; padding: 20px 23px; }
.landing-dashboard-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(78,52,118,.1); }
.landing-dashboard-top span small, .landing-dashboard-top span b { display: block; }
.landing-dashboard-top small { color: #898093; font-size: 8px; }
.landing-dashboard-top b { margin-top: 2px; font-size: 11px; }
.landing-dashboard-top > em { padding: 6px 9px; border-radius: 999px; color: #6432c5; background: #ede5ff; font-size: 8px; font-style: normal; font-weight: 800; }
.landing-dashboard-heading { margin-top: 15px; }
.landing-dashboard-heading strong { margin-top: 3px; font-size: 20px; }
.landing-dashboard-heading > b { padding: 7px 10px; border-radius: 999px; color: #13724c; background: #dff8eb; font-size: 8px; }
.landing-dashboard-focus { display: grid; grid-template-columns: 1.45fr .75fr; gap: 10px; margin-top: 14px; }
.landing-dashboard-focus article { border: 1px solid rgba(111,53,242,.11); border-radius: 16px; box-shadow: 0 10px 24px rgba(66,38,111,.07); }
.landing-dashboard-agenda { padding: 12px; background: rgba(255,255,255,.84); }
.landing-dashboard-agenda header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.landing-dashboard-agenda header small, .landing-dashboard-agenda header b { display: block; }
.landing-dashboard-agenda header small { color: #713bd4; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.landing-dashboard-agenda header b { margin-top: 2px; font-size: 10px; }
.landing-dashboard-agenda header em { padding: 5px 7px; border-radius: 99px; color: #a31d69; background: #ffe1f1; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-dashboard-agenda > div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid #eee9f4; }
.landing-dashboard-agenda time b, .landing-dashboard-agenda time small, .landing-dashboard-agenda > div > span b, .landing-dashboard-agenda > div > span small { display: block; }
.landing-dashboard-agenda time b { color: #6331c5; font-size: 9px; }
.landing-dashboard-agenda time small, .landing-dashboard-agenda > div > span small { margin-top: 2px; color: #8a8195; font-size: 7px; }
.landing-dashboard-agenda > div > span { position: relative; padding-left: 9px; }
.landing-dashboard-agenda > div > span i { position: absolute; top: 2px; bottom: 2px; left: 0; width: 3px; border-radius: 99px; background: linear-gradient(#6f35f2, #ed3b9d); }
.landing-dashboard-agenda > div > span b { font-size: 9px; }
.landing-dashboard-progress { display: grid; align-content: center; justify-items: center; padding: 13px; background: linear-gradient(145deg, #2b1948, #593270); text-align: center; }
.landing-progress-ring { display: flex; align-items: baseline; justify-content: center; width: 78px; height: 78px; padding-top: 22px; border-radius: 50%; color: white; background: radial-gradient(circle at center, #42245d 53%, transparent 54%), conic-gradient(#ff77bd 0 38%, #71d8e7 38% 82%, rgba(255,255,255,.14) 82%); }
.landing-progress-ring b { font-size: 24px; }
.landing-progress-ring small { color: white; font-size: 9px; }
.landing-dashboard-progress > div small, .landing-dashboard-progress > div b, .landing-dashboard-progress > div em { display: block; }
.landing-dashboard-progress > div small { margin-top: 8px; color: #8be3ec; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.landing-dashboard-progress > div b { margin-top: 2px; color: white; font-size: 9px; }
.landing-dashboard-progress > div em { margin-top: 2px; color: rgba(255,255,255,.58); font-size: 7px; font-style: normal; }
.landing-year-window-main > .landing-dashboard-cards { gap: 10px; margin-top: 10px; }
.landing-dashboard-cards > i { position: relative; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 8px; min-height: 75px; padding: 10px; }
.landing-dashboard-cards > i > span { display: grid; grid-row: span 2; width: 30px; height: 30px; margin: 0; place-items: center; border-radius: 10px; color: #6332c4; background: rgba(255,255,255,.78); font-size: 7px; font-weight: 900; }
.landing-dashboard-cards small { align-self: end; font-size: 7px; }
.landing-dashboard-cards b { align-self: start; margin-top: 0; font-size: 17px; }
.landing-dashboard-cards em { grid-column: 1 / -1; margin-top: 7px; font-size: 7px; }

.landing-encoding-screen { position: relative; border-radius: 32px; color: #21182f; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.22), transparent 32%), radial-gradient(circle at 0 100%, rgba(237,59,157,.09), transparent 30%), #fff; box-shadow: 0 42px 100px rgba(61,32,110,.27); transform: rotate(.65deg); }
.landing-encoding-screen::before { position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #7440d7 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(130deg, transparent 45%, #000); content: ""; pointer-events: none; }
.landing-screen-top { position: relative; z-index: 1; height: 60px; background: rgba(255,255,255,.82); }
.landing-screen-top > span { align-items: center; gap: 9px; }
.landing-screen-top .brand-mark { width: 30px; height: 30px; }
.landing-screen-top > span b { color: #352447; font-family: "Eduryo Fredoka", sans-serif; font-size: 14px; }
.landing-screen-top > small { justify-self: center; padding: 6px 11px; border-radius: 99px; color: #6433c4; background: #eee6ff; font-size: 8px; font-weight: 800; }
.landing-screen-body { position: relative; z-index: 1; grid-template-columns: 72px 1fr; min-height: 560px; }
.landing-screen-body aside { gap: 14px; padding: 20px 13px; background: linear-gradient(180deg, #21123d, #3a1c61); }
.landing-screen-body aside strong { width: 40px; height: 40px; border-radius: 13px; }
.landing-screen-body aside span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: rgba(255,255,255,.56); font-size: 9px; font-weight: 850; }
.landing-screen-body aside span.is-active { color: white; background: rgba(255,255,255,.15); }
.landing-screen-body aside i { display: grid; width: 36px; height: 36px; margin-top: auto; place-items: center; border-radius: 50%; color: #29153f; background: linear-gradient(135deg, #ffd66d, #ff9bd0); font-style: normal; }
.landing-screen-content { padding: 21px 26px 23px; }
.landing-screen-context { justify-content: flex-start; margin-bottom: 14px; }
.landing-screen-context > span { min-width: 150px; border-color: rgba(111,53,242,.12); background: rgba(255,255,255,.78); }
.landing-screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.landing-screen-heading small { color: #733bd5; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.landing-screen-heading h3 { margin: 5px 0 0; }
.landing-screen-heading button { padding: 9px 12px; border: 0; border-radius: 11px; color: white; background: linear-gradient(120deg, #6f35f2, #ed3b9d); box-shadow: 0 10px 20px rgba(111,53,242,.2); font-size: 8px; font-weight: 800; }
.landing-screen-tabs { margin-top: 14px; }
.landing-encoding-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.landing-encoding-summary > span { display: grid; grid-template-columns: 29px auto 1fr; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid rgba(111,53,242,.1); border-radius: 12px; background: linear-gradient(135deg, #f1ebff, #fff); }
.landing-encoding-summary > span:nth-child(2) { background: linear-gradient(135deg, #fff1f8, #fff); }
.landing-encoding-summary > span:nth-child(3) { background: linear-gradient(135deg, #eafcff, #fff); }
.landing-encoding-summary i { display: grid; grid-row: span 2; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #6633c9; background: white; font-size: 9px; font-style: normal; font-weight: 900; }
.landing-encoding-summary b { align-self: end; font-size: 14px; }
.landing-encoding-summary small { align-self: start; color: #81798e; font-size: 7px; }
.landing-student-list { display: grid; gap: 6px; }
.landing-student-list .landing-student-row { grid-template-columns: minmax(170px, 1fr) 64px 75px; min-height: 54px; padding: 6px 9px; border: 1px solid rgba(111,53,242,.08); border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 7px 17px rgba(60,35,100,.045); }
.landing-student-row > span { display: grid; grid-template-columns: 32px 1fr; gap: 0 9px; }
.landing-student-row span i { grid-row: span 2; width: 32px; height: 32px; }
.landing-student-row span b { align-self: end; font-size: 10px; }
.landing-student-row span small { align-self: start; color: #8a8295; font-size: 7px; font-weight: 500; }
.landing-student-row > em { justify-self: start; padding: 6px 8px; border-radius: 9px; color: #4f2a96; background: #eee7ff; font-size: 9px; font-style: normal; font-weight: 850; }
.landing-screen-progress { margin-top: 13px; }

.landing-parent-portal { border-radius: 32px; background: radial-gradient(circle at 100% 0, rgba(56,214,220,.22), transparent 30%), radial-gradient(circle at 5% 100%, rgba(237,59,157,.11), transparent 30%), #fff; box-shadow: 0 42px 100px rgba(61,32,110,.28); transform: rotate(.55deg); }
.landing-parent-portal::before { position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #7540d7 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(130deg, transparent 48%, #000); content: ""; pointer-events: none; }
.landing-parent-portal > * { position: relative; z-index: 1; }
.landing-parent-top { height: 74px; padding: 0 27px; background: linear-gradient(100deg, #2a1747, #512369 62%, #74286f); }
.landing-parent-top span > b { color: white; }
.landing-parent-top nav { display: flex; gap: 7px; margin-left: auto; margin-right: 18px; }
.landing-parent-top nav i { padding: 7px 10px; border-radius: 99px; color: rgba(255,255,255,.62); font-size: 8px; font-style: normal; font-weight: 750; }
.landing-parent-top nav i.is-active { color: #38204f; background: #ffd66d; }
.landing-parent-top > em { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #2d173f; background: linear-gradient(135deg, #8be7ed, #ff9bd0); font-size: 8px; font-style: normal; font-weight: 900; }
.landing-parent-welcome { padding: 24px 28px 17px; }
.landing-parent-welcome > div { text-align: right; }
.landing-parent-welcome > div b, .landing-parent-welcome > div em { display: block; }
.landing-parent-welcome > div b { color: #6230c1; font-size: 12px; }
.landing-parent-welcome > div em { margin-top: 3px; color: #8b8295; font-size: 7px; font-style: normal; }
.landing-parent-grid { grid-template-columns: 1.2fr .8fr; gap: 13px; padding: 0 28px; }
.landing-parent-grid article { padding: 16px; border: 0; }
.landing-parent-bulletin { background: linear-gradient(145deg, #39205a, #643371) !important; box-shadow: 0 18px 35px rgba(61,32,91,.22); }
.landing-parent-bulletin small { color: #9ce9ee; }
.landing-parent-bulletin span > b { color: white; }
.landing-parent-bulletin > em { color: #352047; background: #ffd66d; font-size: 7px; }
.landing-parent-results { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 7px !important; }
.landing-parent-results > span { display: grid; grid-template-columns: 25px 1fr; gap: 0 6px; padding: 8px; border-radius: 11px; background: rgba(255,255,255,.1); }
.landing-parent-results span i { display: grid; grid-row: span 2; width: 24px !important; height: 24px !important; place-items: center; border-radius: 7px !important; color: white; background: rgba(255,255,255,.14) !important; font-size: 6px; font-style: normal; }
.landing-parent-results span b { align-self: end; overflow: hidden; color: rgba(255,255,255,.65); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.landing-parent-results span strong { align-self: start; color: white; font-size: 10px; }
.landing-parent-attendance { background: linear-gradient(145deg, #e8fbfd, #efe7ff) !important; box-shadow: 0 16px 32px rgba(42,117,135,.13); }
.landing-parent-attendance > div { margin-top: 13px; }
.landing-parent-attendance > div span { background: rgba(255,255,255,.72); }
.landing-parent-attendance > p { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: #29765a; font-size: 7px; font-weight: 750; }
.landing-parent-attendance > p i { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: white; background: #37b47e; font-size: 7px; font-style: normal; }
.landing-parent-notice { margin: 13px 28px 0; padding: 12px 14px; border: 0; background: linear-gradient(100deg, #fff1b8, #ffe5f4 60%, #e7faff); box-shadow: 0 11px 25px rgba(91,54,116,.1); }
.landing-parent-notice span i { display: block; margin-top: 2px; color: #8c6680; font-size: 7px; font-style: normal; }
.landing-parent-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 28px 25px; }
.landing-parent-actions > span { display: grid; grid-template-columns: 29px 1fr; gap: 0 7px; padding: 9px; border: 1px solid rgba(111,53,242,.1); border-radius: 12px; background: rgba(255,255,255,.72); }
.landing-parent-actions span i { display: grid; grid-row: span 2; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #6433c4; background: #eee7ff; font-style: normal; font-weight: 850; }
.landing-parent-actions span b { align-self: end; font-size: 8px; }
.landing-parent-actions span small { align-self: start; overflow: hidden; color: #8a8194; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
    .landing-year-window { width: min(720px, 100%); }
}

@media (max-width: 700px) {
    .landing-story-document .landing-feature-card,
    .landing-feature-streams.is-orbit-ready .landing-feature-card,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact { grid-template-columns: 50px minmax(0, 1fr); width: clamp(255px, 74vw, 290px); min-height: 118px; padding: 15px 15px 36px; border-radius: 21px; }
    .landing-story-document .landing-feature-card > i { width: 50px; height: 50px; border-radius: 15px; }
    .landing-story-document .landing-feature-card > i svg { width: 25px; height: 25px; }
    .landing-story-document .landing-feature-card b { font-size: 15px; }
    .landing-story-document .landing-feature-card small { margin-top: 3px; font-size: 10px; }
    .landing-story-document .landing-feature-card > em { right: 12px; bottom: 10px; padding: 5px 9px; font-size: 9px; }
    .landing-year-visual { min-height: 460px; }
    .landing-year-window { grid-template-columns: 48px 1fr; height: 330px; border-radius: 22px; }
    .landing-year-window-sidebar { gap: 9px; padding: 13px 6px; }
    .landing-year-window-sidebar b { width: 34px; height: 34px; }
    .landing-year-window-sidebar span { width: 31px; height: 31px; }
    .landing-year-window-sidebar i { width: 31px; height: 31px; }
    .landing-year-window-main { padding: 13px 11px; }
    .landing-dashboard-top { padding-bottom: 8px; }
    .landing-dashboard-heading { margin-top: 9px; }
    .landing-dashboard-heading strong { font-size: 14px; }
    .landing-dashboard-heading > b { display: none; }
    .landing-dashboard-focus { grid-template-columns: 1fr; margin-top: 9px; }
    .landing-dashboard-progress { display: none; }
    .landing-dashboard-agenda { padding: 8px 9px; }
    .landing-dashboard-agenda header { margin-bottom: 4px; }
    .landing-dashboard-agenda > div { padding: 4px 0; }
    .landing-year-window-main > .landing-dashboard-cards { gap: 5px; margin-top: 6px; }
    .landing-dashboard-cards > i { display: block; min-height: 54px; padding: 7px; }
    .landing-dashboard-cards > i > span { display: none; }
    .landing-dashboard-cards small { font-size: 6px; }
    .landing-dashboard-cards b { display: block; margin-top: 2px; font-size: 14px; }
    .landing-dashboard-cards em { display: block; margin-top: 2px; font-size: 6px; }
    .landing-encoding-screen { border-radius: 22px; transform: none; }
    .landing-screen-top { grid-template-columns: 1fr auto; height: 52px; padding-inline: 12px; }
    .landing-screen-top > small { display: none; }
    .landing-screen-body { grid-template-columns: 43px 1fr; min-height: 465px; }
    .landing-screen-body aside { gap: 9px; padding: 11px 4px; }
    .landing-screen-body aside strong, .landing-screen-body aside span, .landing-screen-body aside i { width: 31px; height: 31px; }
    .landing-screen-content { padding: 13px 10px 17px; }
    .landing-screen-context { display: none; }
    .landing-screen-heading { align-items: start; flex-direction: column; gap: 7px; }
    .landing-screen-heading h3 { font-size: 17px; }
    .landing-screen-heading button { padding: 7px 9px; }
    .landing-screen-tabs { margin-top: 9px; }
    .landing-screen-tabs span { font-size: 7px; }
    .landing-encoding-summary { gap: 4px; }
    .landing-encoding-summary > span { display: block; padding: 7px; text-align: center; }
    .landing-encoding-summary i { display: none; }
    .landing-encoding-summary b { display: block; font-size: 12px; }
    .landing-encoding-summary small { font-size: 6px; }
    .landing-student-list { gap: 4px; }
    .landing-student-list .landing-student-row { grid-template-columns: minmax(100px, 1fr) 50px; min-height: 46px; padding: 4px 6px; }
    .landing-student-row > span { grid-template-columns: 1fr; }
    .landing-student-row span i, .landing-student-row span small { display: none; }
    .landing-student-row > em { padding: 5px 6px; font-size: 8px; }
    .landing-student-row > b { display: none; }
    .landing-screen-progress { grid-template-columns: 1fr; }
    .landing-screen-progress em { font-size: 8px; }
    .landing-parent-portal { border-radius: 22px; transform: none; }
    .landing-parent-top { height: 58px; padding-inline: 14px; }
    .landing-parent-top nav { display: none; }
    .landing-parent-welcome { padding: 18px 15px 13px; }
    .landing-parent-welcome strong { font-size: 17px; }
    .landing-parent-welcome > div em { display: none; }
    .landing-parent-grid { grid-template-columns: 1fr; padding-inline: 14px; }
    .landing-parent-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-parent-results > span { grid-template-columns: 1fr; }
    .landing-parent-results span i { display: none; }
    .landing-parent-notice { grid-template-columns: 31px 1fr; margin-inline: 14px; }
    .landing-parent-notice > em { display: none; }
    .landing-parent-actions { gap: 5px; margin: 9px 14px 18px; }
    .landing-parent-actions > span { grid-template-columns: 1fr; padding: 7px; text-align: center; }
    .landing-parent-actions span i { grid-row: auto; justify-self: center; }
    .landing-parent-actions span small { display: none; }
}

/* Landing page — finitions nettes et illustrations fidèles au produit */
.landing-story-document .landing-feature-card {
    --feature-accent: #6f35f2;
    --feature-accent-deep: #4d209f;
    --feature-surface: #f3edff;
    --feature-icon-ink: #fff;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 18px;
    width: 366px;
    min-height: 164px;
    padding: 24px 22px 43px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--feature-accent) 24%, white);
    border-radius: 25px;
    color: #21172f;
    background: linear-gradient(135deg, #fff 0 45%, var(--feature-surface) 100%);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--feature-accent) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.94);
    opacity: 1;
    text-rendering: geometricPrecision;
}
.landing-story-document .landing-feature-card::before {
    position: absolute;
    inset: 0 -1px 0 42%;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(145deg, transparent 0 28%, color-mix(in srgb, var(--feature-accent) 12%, transparent) 28% 62%, color-mix(in srgb, var(--feature-accent) 5%, transparent) 62%);
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    filter: none;
    content: "";
    pointer-events: none;
}
.landing-story-document .landing-feature-card::after {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    opacity: 1;
    background: linear-gradient(90deg, var(--feature-accent), color-mix(in srgb, var(--feature-accent) 42%, #fff));
    mask-image: none;
    content: "";
}
.landing-story-document .landing-feature-card > i {
    position: relative;
    z-index: 2;
    grid-row: 1 / 3;
    width: 70px;
    height: 70px;
    align-self: center;
    border: 0;
    border-radius: 19px;
    color: var(--feature-icon-ink);
    background: var(--feature-accent);
    box-shadow: 0 11px 23px color-mix(in srgb, var(--feature-accent) 27%, transparent);
}
.landing-story-document .landing-feature-card > i svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
    shape-rendering: geometricPrecision;
}
.landing-story-document .landing-feature-card > span { align-self: center; }
.landing-story-document .landing-feature-card b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.08;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.landing-story-document .landing-feature-card small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px;
    color: #635b70;
    font-size: 13px;
    font-weight: 540;
    line-height: 1.28;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.landing-story-document .landing-feature-card > em {
    right: auto;
    bottom: 14px;
    left: 110px;
    z-index: 2;
    max-width: calc(100% - 132px);
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--feature-accent) 16%, white);
    border-radius: 8px;
    color: var(--feature-accent-deep);
    background: color-mix(in srgb, var(--feature-accent) 9%, white);
    box-shadow: none;
    font-size: 10px;
}
.landing-story-document .landing-feature-card.is-purple { --feature-accent: #6f35f2; --feature-accent-deep: #4d209f; --feature-surface: #e8ddff; }
.landing-story-document .landing-feature-card.is-violet { --feature-accent: #8059d9; --feature-accent-deep: #4d318f; --feature-surface: #eee7ff; }
.landing-story-document .landing-feature-card.is-pink { --feature-accent: #db328e; --feature-accent-deep: #94205e; --feature-surface: #ffe1f0; }
.landing-story-document .landing-feature-card.is-cyan { --feature-accent: #159eb5; --feature-accent-deep: #096878; --feature-surface: #d8f8fb; }
.landing-story-document .landing-feature-card.is-blue { --feature-accent: #327dcc; --feature-accent-deep: #20538d; --feature-surface: #ddecff; }
.landing-story-document .landing-feature-card.is-yellow { --feature-accent: #e1a514; --feature-accent-deep: #795600; --feature-surface: #fff1b9; --feature-icon-ink: #2d2205; }
.landing-story-document .landing-feature-card.is-coral { --feature-accent: #e56448; --feature-accent-deep: #963b29; --feature-surface: #ffe0d7; }
.landing-story-document .landing-feature-card.is-dark {
    --feature-accent: #45c7d4;
    --feature-accent-deep: #d9fbff;
    --feature-surface: #452862;
    color: #fff;
    border-color: rgba(127,224,232,.28);
    background: linear-gradient(135deg, #211539 0 45%, #4a2b65 100%);
}
.landing-story-document .landing-feature-card.is-dark::before { background: linear-gradient(145deg, transparent 0 28%, rgba(69,199,212,.16) 28% 62%, rgba(237,59,157,.09) 62%); }
.landing-story-document .landing-feature-card.is-dark small { color: rgba(255,255,255,.72); }
.landing-story-document .landing-feature-card.is-dark > i { color: #192c34; background: #7fe0e8; }
.landing-story-document .landing-feature-card.is-dark > em { color: #d9fbff; border-color: rgba(127,224,232,.24); background: rgba(69,199,212,.14); }
.landing-feature-streams.is-orbit-ready .landing-feature-card,
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
.landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact { width: clamp(344px, 24vw, 390px); min-height: 164px; }

.landing-year-window,
.landing-encoding-screen,
.landing-parent-portal,
.landing-trophy-showcase {
    transform: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
.landing-year-window {
    border-color: rgba(73,42,126,.2);
    background: #fff;
    box-shadow: 0 32px 80px rgba(45,25,82,.22);
}
.landing-year-window::before {
    position: absolute;
    inset: 0;
    opacity: 1;
    background: linear-gradient(132deg, transparent 0 61%, rgba(56,214,220,.12) 61% 76%, rgba(111,53,242,.055) 76% 88%, rgba(237,59,157,.075) 88%);
    mask-image: none;
    content: "";
    pointer-events: none;
}
.landing-year-window-sidebar span svg,
.landing-screen-body aside span svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.landing-year-window-sidebar i,
.landing-screen-body aside i { border-radius: 12px; }
.landing-dashboard-top small { font-size: 9px; }
.landing-dashboard-top b { font-size: 12px; }
.landing-dashboard-heading strong { font-size: 22px; }
.landing-dashboard-agenda header small,
.landing-dashboard-agenda header em { font-size: 8px; }
.landing-dashboard-agenda header b { font-size: 11px; }
.landing-dashboard-agenda time b,
.landing-dashboard-agenda > div > span b { font-size: 10px; }
.landing-dashboard-agenda time small,
.landing-dashboard-agenda > div > span small,
.landing-dashboard-progress > div small,
.landing-dashboard-progress > div em { font-size: 8px; }
.landing-dashboard-progress > div b { font-size: 10px; }
.landing-dashboard-cards small,
.landing-dashboard-cards em { font-size: 8px; }

.landing-encoding-screen {
    border-color: rgba(73,42,126,.2);
    background: #fff;
    box-shadow: 0 34px 86px rgba(45,25,82,.22);
}
.landing-encoding-screen::before {
    position: absolute;
    inset: 0;
    opacity: 1;
    background: linear-gradient(132deg, transparent 0 69%, rgba(56,214,220,.1) 69% 82%, rgba(111,53,242,.045) 82%);
    mask-image: none;
    content: "";
    pointer-events: none;
}
.landing-screen-top { border-bottom: 1px solid rgba(73,42,126,.11); background: #fff; }
.landing-screen-body aside { background: linear-gradient(180deg, #23163d, #352052 58%, #452760); }
.landing-screen-body aside span { transition: none; }
.landing-screen-body aside i { background: linear-gradient(135deg, #7fe0e8, #ff9ac9); }
.landing-screen-heading small { font-size: 9px; }
.landing-encoding-summary small,
.landing-student-row span small { font-size: 8px; }
.landing-student-row span b { font-size: 11px; }
.landing-student-row > em { font-size: 10px; }

.landing-parent-portal {
    border-color: rgba(73,42,126,.2);
    background: #fff;
    box-shadow: 0 34px 86px rgba(45,25,82,.22);
}
.landing-parent-portal::before {
    position: absolute;
    inset: 74px 0 0;
    opacity: 1;
    background: linear-gradient(128deg, rgba(237,59,157,.055), transparent 27% 70%, rgba(56,214,220,.09));
    mask-image: none;
    content: "";
    pointer-events: none;
}
.landing-parent-actions span i svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.landing-parent-actions > span:nth-child(2) i { color: #09788a; background: #dcf7fa; }
.landing-parent-actions > span:nth-child(3) i { color: #9d255f; background: #ffe2ef; }
.landing-parent-actions span b { font-size: 9px; }
.landing-parent-actions span small { font-size: 7px; }

.landing-updates-layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(32px, 4vw, 54px);
}
.landing-updates-copy {
    display: grid;
    grid-template-columns: minmax(330px, .8fr) minmax(420px, 1.2fr);
    align-items: end;
    gap: clamp(42px, 8vw, 115px);
    max-width: none;
}
.landing-updates-copy > p { margin: 0 0 8px; }
.landing-update-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}
.landing-update-promises > .landing-update-card {
    --update-accent: #159eb5;
    --update-soft: #dff8fb;
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 9px 16px;
    min-width: 0;
    min-height: 176px;
    padding: 25px 24px 23px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--update-accent) 22%, white);
    border-radius: 22px;
    background: linear-gradient(145deg, #fff 0 58%, var(--update-soft));
    box-shadow: 0 18px 40px color-mix(in srgb, var(--update-accent) 10%, transparent);
}
.landing-update-promises > .landing-update-card:nth-child(2) { --update-accent: #6f35f2; --update-soft: #eee6ff; }
.landing-update-promises > .landing-update-card:nth-child(3) { --update-accent: #d73588; --update-soft: #ffe5f2; }
.landing-update-promises > .landing-update-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--update-accent);
    content: "";
}
.landing-update-promises > .landing-update-card::after { content: none; }
.landing-update-promises i {
    display: grid;
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: var(--update-accent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--update-accent) 22%, transparent);
}
.landing-update-promises i svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.landing-update-promises b {
    align-self: end;
    min-width: 0;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
}
.landing-update-promises small {
    grid-column: 2;
    margin: 0;
    color: #645c70;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: normal;
    word-break: normal;
}

.landing-story-trophies {
    background: radial-gradient(ellipse at 8% 22%, rgba(56,214,220,.18), transparent 32%), radial-gradient(ellipse at 88% 78%, rgba(237,59,157,.22), transparent 34%), linear-gradient(145deg, #171125, #2c1852 52%, #4a1d68);
}
.landing-story-trophies::before {
    position: absolute;
    inset: -22% -8%;
    opacity: .72;
    background: repeating-linear-gradient(118deg, transparent 0 84px, rgba(255,255,255,.035) 84px 86px, transparent 86px 126px);
    background-size: auto;
    transform: rotate(-4deg);
    content: "";
    pointer-events: none;
}
.landing-trophy-showcase {
    border-color: rgba(255,255,255,.2);
    background: linear-gradient(145deg, rgba(69,49,98,.98), rgba(61,39,91,.98));
    box-shadow: 0 32px 75px rgba(0,0,0,.3);
    backdrop-filter: none;
}
.landing-trophy-grid article,
.landing-trophy-profile,
.landing-trophy-progress,
.landing-trophy-ranking { text-rendering: geometricPrecision; }

@media (max-width: 980px) {
    .landing-updates-copy { grid-template-columns: 1fr; gap: 18px; }
    .landing-update-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-update-promises > .landing-update-card { grid-template-columns: 48px minmax(0, 1fr); min-height: 190px; padding: 21px 18px; }
    .landing-update-promises i { width: 48px; height: 48px; border-radius: 14px; }
    .landing-update-promises i svg { width: 24px; height: 24px; }
    .landing-update-promises b { font-size: 17px; }
    .landing-update-promises small { font-size: 12px; }
}

@media (max-width: 700px) {
    .landing-story-document .landing-feature-card,
    .landing-feature-streams.is-orbit-ready .landing-feature-card,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-wide,
    .landing-feature-streams.is-orbit-ready .landing-feature-card.is-compact {
        grid-template-columns: 52px minmax(0, 1fr);
        width: clamp(260px, 78vw, 304px);
        min-height: 122px;
        padding: 17px 16px 35px;
        border-radius: 20px;
    }
    .landing-story-document .landing-feature-card::after { height: 4px; }
    .landing-story-document .landing-feature-card > i { width: 52px; height: 52px; border-radius: 15px; }
    .landing-story-document .landing-feature-card > i svg { width: 25px; height: 25px; }
    .landing-story-document .landing-feature-card b { font-size: 15px; }
    .landing-story-document .landing-feature-card small { margin-top: 3px; font-size: 10px; }
    .landing-story-document .landing-feature-card > em { bottom: 9px; left: 84px; max-width: calc(100% - 98px); padding: 4px 7px; font-size: 8px; }
    .landing-update-promises { grid-template-columns: 1fr; }
    .landing-update-promises > .landing-update-card { min-height: 0; }
}

/* Landing page — écrans de démonstration alignés sur l'application réelle */
.landing-story-hero-inner { transform: translateY(-88px); }
.landing-dashboard-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 17px 4px 0;
}
.landing-dashboard-timeline::before {
    position: absolute;
    top: 6px;
    right: 9%;
    left: 9%;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #6f35f2 0 42%, #ded6ea 42%);
    content: "";
}
.landing-dashboard-timeline > span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #938a9c;
    font-size: 8px;
}
.landing-dashboard-timeline i {
    width: 14px;
    height: 14px;
    border: 3px solid #ded6ea;
    border-radius: 50%;
    background: #fff;
}
.landing-dashboard-timeline .is-reached i { border-color: #6f35f2; background: #6f35f2; }
.landing-dashboard-timeline .is-current i { border-color: #ed3b9d; background: #fff; box-shadow: 0 0 0 4px rgba(237,59,157,.13); }
.landing-dashboard-timeline .is-reached,
.landing-dashboard-timeline .is-current { color: #4f2b92; }
.landing-dashboard-focus { grid-template-columns: minmax(0, 1.4fr) minmax(145px, .6fr); margin-top: 12px; }
.landing-dashboard-period {
    display: grid;
    grid-template-columns: 1fr 76px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 15px;
    border: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #2a1946, #55306f) !important;
    box-shadow: 0 14px 30px rgba(52,29,86,.2) !important;
}
.landing-dashboard-period > span:first-child { min-width: 0; }
.landing-dashboard-period small,
.landing-dashboard-period b,
.landing-dashboard-period p,
.landing-dashboard-period em { display: block; }
.landing-dashboard-period small { color: #77dbe5; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.landing-dashboard-period b { margin-top: 3px; font-size: 15px; }
.landing-dashboard-period p { margin: 5px 0 0; color: rgba(255,255,255,.7); font-size: 8px; line-height: 1.35; }
.landing-dashboard-period em { margin-top: 7px; color: #ffc7e4; font-size: 8px; font-style: normal; font-weight: 750; }
.landing-dashboard-period .landing-progress-ring { width: 72px; height: 72px; padding-top: 20px; background: radial-gradient(circle at center, #42245d 51%, transparent 52%), conic-gradient(#ff77bd 0 38%, #71d8e7 38% 82%, rgba(255,255,255,.14) 82%); }
.landing-dashboard-period .landing-progress-ring b { margin: 0; font-size: 22px; }
.landing-dashboard-quick { display: grid; gap: 8px; }
.landing-dashboard-quick > span {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1px 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(111,53,242,.11);
    border-radius: 14px;
    background: #f6f1ff;
}
.landing-dashboard-quick > span:last-child { background: #eafafd; }
.landing-dashboard-quick i { display: grid; grid-row: 1 / 3; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #6733c8; background: #fff; }
.landing-dashboard-quick > span:last-child i { color: #0c7f91; }
.landing-dashboard-quick svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-dashboard-quick small { align-self: end; overflow: hidden; color: #857b91; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.landing-dashboard-quick b { align-self: start; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.landing-year-window-main > .landing-dashboard-cards { grid-template-columns: repeat(4, 1fr); }
.landing-dashboard-cards > i { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; min-height: 61px; padding: 8px; }
.landing-dashboard-cards > i:nth-child(2) { background: #fff0f7; }
.landing-dashboard-cards > i:nth-child(3) { background: #eafafd; }
.landing-dashboard-cards > i:nth-child(4) { background: #fff5d7; }
.landing-dashboard-cards > i > span { grid-row: 1 / 3; }
.landing-dashboard-cards b { font-size: 16px; }

.landing-screen-body { min-height: 535px; }
.landing-screen-content { padding: 23px 27px 25px; }
.landing-screen-heading { align-items: center; }
.landing-screen-heading h3 { font-size: 25px; }
.landing-encoding-course {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(111,53,242,.14);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 13px 28px rgba(61,34,101,.09);
}
.landing-encoding-course::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(#6f35f2, #ed3b9d); content: ""; }
.landing-encoding-course > header { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 16px 17px 12px 21px; }
.landing-encoding-course header small,
.landing-encoding-course header h4 { display: block; }
.landing-encoding-course header small { color: #6e3acd; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.landing-encoding-course header h4 { margin: 4px 0 0; font-family: "Eduryo Fredoka", sans-serif; font-size: 20px; line-height: 1.1; }
.landing-encoding-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.landing-encoding-meta i,
.landing-encoding-course > header > em { padding: 5px 7px; border-radius: 7px; color: #5c2db5; background: #eee7ff; font-size: 7px; font-style: normal; font-weight: 750; }
.landing-encoding-course > header > em { color: #9c255e; background: #ffe2f0; white-space: nowrap; }
.landing-encoding-course-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 12px 17px 13px 21px;
    border-top: 1px solid #eee9f3;
    background: #fcfaff;
}
.landing-encoding-course-progress span small,
.landing-encoding-course-progress span b { display: block; }
.landing-encoding-course-progress span small { color: #8b8295; font-size: 8px; }
.landing-encoding-course-progress span b { margin-top: 2px; font-size: 10px; }
.landing-encoding-course-progress > em { align-self: center; padding: 5px 8px; border-radius: 8px; color: #a16800; background: #fff0c9; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-encoding-course-progress > em.is-success { color: #08734b; background: #dff8eb; }
.landing-encoding-course-progress > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #ebe5f1; }
.landing-encoding-course-progress > i u { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f35f2, #ed3b9d); }
.landing-encoding-course.is-secondary { margin-top: 11px; }
.landing-encoding-course.is-secondary::before { background: linear-gradient(#159eb5, #55d7e3); }
.landing-encoding-course.is-secondary .landing-encoding-course-progress > i u { width: 100%; background: #22b573; }
.landing-encoding-course > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 17px 13px 21px; }
.landing-encoding-course footer > span { display: flex; gap: 5px; }
.landing-encoding-course footer b { padding: 5px 8px; border: 1px solid #e5dff0; border-radius: 7px; color: #756d7e; font-size: 7px; }
.landing-encoding-course footer b.is-active { color: #fff; border-color: #6f35f2; background: #6f35f2; }
.landing-encoding-course footer small { color: #81788b; font-size: 7px; }

.landing-parent-top { background: linear-gradient(100deg, #261640, #45235f 62%, #642766); }
.landing-parent-welcome { align-items: end; }
.landing-parent-welcome span > p { margin: 5px 0 0; color: #7d7488; font-size: 9px; }
.landing-parent-child {
    margin: 0 28px;
    overflow: hidden;
    border: 1px solid rgba(111,53,242,.13);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(61,35,101,.1);
}
.landing-parent-child > header { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 15px 17px; background: linear-gradient(100deg, #f2ebff, #fff 55%, #e9fbfd); }
.landing-parent-child-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #6f35f2, #ed3b9d); font-size: 10px; font-weight: 850; }
.landing-parent-child-avatar.is-cyan { color: #16434a; background: linear-gradient(135deg, #7fe0e8, #c8f4f7); }
.landing-parent-child header small,
.landing-parent-child header strong { display: block; }
.landing-parent-child header small { color: #6935ca; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.landing-parent-child header strong { margin-top: 4px; font-family: "Eduryo Fredoka", sans-serif; font-size: 18px; }
.landing-parent-child header > em { padding: 6px 9px; border-radius: 8px; color: #5b2daf; background: #e9ddff; font-size: 7px; font-style: normal; font-weight: 800; }
.landing-parent-periods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 13px 15px 15px; }
.landing-parent-periods > span { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #e8e2ee; border-radius: 12px; color: #7f7788; background: #f8f6fa; }
.landing-parent-periods > span.is-published { color: #251932; border-color: rgba(111,53,242,.15); background: #f5f0ff; }
.landing-parent-periods > span > i { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: #766e80; background: #ece8f0; font-size: 8px; font-style: normal; font-weight: 850; }
.landing-parent-periods > span.is-published > i { color: #fff; background: linear-gradient(135deg, #6f35f2, #8a55f6); }
.landing-parent-periods b,
.landing-parent-periods small { display: block; }
.landing-parent-periods b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.landing-parent-periods small { margin-top: 2px; color: #91899b; font-size: 7px; }
.landing-parent-periods > span > em { color: #9a929f; font-size: 7px; font-style: normal; font-weight: 700; white-space: nowrap; }
.landing-parent-periods > span.is-published > em { color: #5e2dbb; }
.landing-parent-sibling { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 10px; margin: 11px 28px 24px; padding: 10px 13px; border: 1px solid rgba(21,158,181,.14); border-radius: 14px; background: #ecfbfd; }
.landing-parent-sibling .landing-parent-child-avatar { width: 37px; height: 37px; border-radius: 11px; font-size: 8px; }
.landing-parent-sibling small,
.landing-parent-sibling b { display: block; }
.landing-parent-sibling small { color: #637b80; font-size: 7px; }
.landing-parent-sibling b { margin-top: 2px; font-size: 10px; }
.landing-parent-sibling > em { color: #08798c; font-size: 7px; font-style: normal; font-weight: 750; }

@media (max-width: 820px) {
    .landing-update-promises { grid-template-columns: 1fr; }
    .landing-update-promises > .landing-update-card { min-height: 0; }
}

@media (min-width: 641px) and (max-width: 980px) {
    .landing-story-hero-inner { transform: translateY(-60px); }
}

@media (max-width: 700px) {
    .landing-dashboard-timeline { margin-top: 10px; }
    .landing-dashboard-focus { grid-template-columns: 1fr; margin-top: 8px; }
    .landing-dashboard-period { grid-template-columns: 1fr 60px; padding: 10px; }
    .landing-dashboard-period p { display: none; }
    .landing-dashboard-period .landing-progress-ring { display: flex; width: 58px; height: 58px; padding-top: 17px; }
    .landing-dashboard-period .landing-progress-ring b { font-size: 17px; }
    .landing-dashboard-quick { display: none; }
    .landing-year-window-main > .landing-dashboard-cards { grid-template-columns: repeat(4, 1fr); }
    .landing-dashboard-cards > i { display: block; min-width: 0; min-height: 48px; padding: 6px; }
    .landing-dashboard-cards > i > span { display: none; }
    .landing-dashboard-cards small { display: block; overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
    .landing-dashboard-cards b { display: block; margin-top: 3px; font-size: 13px; }
    .landing-screen-body { min-height: 420px; }
    .landing-screen-content { padding: 13px 10px 16px; }
    .landing-screen-heading h3 { font-size: 18px; }
    .landing-encoding-course { margin-top: 11px; border-radius: 15px; }
    .landing-encoding-course > header { padding: 11px 10px 9px 14px; }
    .landing-encoding-course header h4 { font-size: 15px; }
    .landing-encoding-course > header > em { display: none; }
    .landing-encoding-course-progress { padding: 9px 10px 10px 14px; }
    .landing-encoding-course footer { align-items: start; flex-direction: column; padding: 8px 10px 10px 14px; }
    .landing-encoding-course.is-secondary { display: none; }
    .landing-parent-welcome { padding-bottom: 11px; }
    .landing-parent-welcome span > p { display: none; }
    .landing-parent-child { margin-inline: 14px; border-radius: 16px; }
    .landing-parent-child > header { grid-template-columns: 39px 1fr; padding: 11px; }
    .landing-parent-child header > em { display: none; }
    .landing-parent-child-avatar { width: 39px; height: 39px; border-radius: 12px; }
    .landing-parent-periods { grid-template-columns: 1fr; padding: 9px; }
    .landing-parent-periods > span:nth-child(n+4) { display: none; }
    .landing-parent-sibling { margin: 9px 14px 16px; }
}

@media (max-width: 640px) {
    .landing-story-hero-inner { transform: none; }
}

/* Landing page — tableau de bord enseignant, cartes et finitions */
.landing-story-document .landing-feature-card {
    grid-template-rows: auto;
    align-content: center;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--feature-accent) 34%, white);
}
.landing-story-document .landing-feature-card.is-dark { border-color: rgba(127,224,232,.42); }
.landing-story-document .landing-feature-card::after { content: none; }
.landing-story-document .landing-feature-card > i { grid-row: 1; align-self: center; }
.landing-story-document .landing-feature-card > span { grid-column: 2; grid-row: 1; align-self: center; }
.landing-story-document .landing-feature-card > em {
    right: 18px;
    bottom: 14px;
    left: auto;
    max-width: calc(100% - 36px);
}

.landing-story-year .landing-story-wrap { width: min(100% - 64px, 1320px); }
.landing-story-year .landing-story-split { grid-template-columns: minmax(340px, .72fr) minmax(650px, 1.28fr); gap: clamp(42px, 5vw, 72px); }
.landing-story-year .landing-year-visual { min-height: 710px; }

.landing-year-window.landing-teacher-dashboard {
    grid-template-columns: 1fr;
    width: 96%;
    height: 440px;
    border: 2px solid rgba(111,53,242,.24);
    border-radius: 32px;
    background:
        radial-gradient(circle at 8% 5%, rgba(237,59,157,.14), transparent 30%),
        radial-gradient(circle at 94% 10%, rgba(111,53,242,.14), transparent 32%),
        #fff;
    box-shadow: 0 38px 90px rgba(45,25,82,.22);
}
.landing-year-window.landing-teacher-dashboard::before,
.landing-year-window.landing-teacher-dashboard::after { content: none; }
.landing-teacher-dashboard .landing-year-window-main {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 24px 28px 26px;
}
.landing-teacher-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-teacher-dashboard-heading span small,
.landing-teacher-dashboard-heading span strong { display: block; }
.landing-teacher-dashboard-heading span small { color: #6f35f2; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.landing-teacher-dashboard-heading span strong { margin-top: 3px; font-family: "Eduryo Fredoka", sans-serif; font-size: 29px; line-height: 1.05; }
.landing-teacher-dashboard-heading > i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #e5dcf3;
    border-radius: 14px;
    color: #74677f;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 20px rgba(58,32,99,.08);
}
.landing-teacher-dashboard-heading svg,
.landing-teacher-stats svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-teacher-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 0 14px;
}
.landing-teacher-timeline::before {
    position: absolute;
    top: 29px;
    right: 4%;
    left: 4%;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg, #6f35f2, #ed3b9d 13%, #dcd8e3 13%);
    box-shadow: inset 0 1px 2px rgba(40,25,64,.1);
    content: "";
}
.landing-teacher-timeline > span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; color: #241832; font-size: 10px; }
.landing-teacher-timeline > span i { width: 17px; height: 17px; border: 3px solid #bcc0c9; border-radius: 5px; background: #fff; box-shadow: 0 2px 4px rgba(40,25,64,.12); transform: rotate(45deg); }
.landing-teacher-timeline > span.is-current i { border-color: #ed3b9d; box-shadow: 0 0 0 3px rgba(237,59,157,.12); }
.landing-teacher-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.landing-teacher-stats article {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 2px solid #996cff;
    border-radius: 18px;
    background: linear-gradient(135deg, #e1d2ff, #f4efff);
    box-shadow: 0 12px 25px rgba(111,53,242,.12);
}
.landing-teacher-stats article:nth-child(2) { color: #087d92; border-color: #24bfd7; background: linear-gradient(135deg, #bdeff5, #e9fbfd); box-shadow: 0 12px 25px rgba(36,191,215,.13); }
.landing-teacher-stats article:nth-child(3) { color: #ad1f69; border-color: #ef5da8; background: linear-gradient(135deg, #ffd2e7, #fff0f7); box-shadow: 0 12px 25px rgba(239,93,168,.13); }
.landing-teacher-stats article:nth-child(4) { color: #9a6000; border-color: #eeae32; background: linear-gradient(135deg, #ffe19a, #fff3d5); box-shadow: 0 12px 25px rgba(238,174,50,.14); }
.landing-teacher-stats article > i { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid currentColor; border-radius: 13px; color: #6f35f2; background: rgba(255,255,255,.56); }
.landing-teacher-stats article:nth-child(2) > i,
.landing-teacher-stats article:nth-child(3) > i,
.landing-teacher-stats article:nth-child(4) > i { color: inherit; }
.landing-teacher-stats span b,
.landing-teacher-stats span small { display: block; }
.landing-teacher-stats span b { color: #21162f; font-size: 22px; line-height: 1; }
.landing-teacher-stats span small { overflow: hidden; margin-top: 5px; color: #655c70; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.landing-teacher-progress-title { display: block; margin: 16px 0 9px; font-size: 16px; }
.landing-teacher-progress-card { overflow: hidden; border: 2px solid rgba(111,53,242,.25); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 15px 34px rgba(67,38,107,.1); }
.landing-teacher-progress-card > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(90deg, #e9dcff, #fff0f7); }
.landing-teacher-progress-card > header span { display: flex; align-items: center; gap: 6px; }
.landing-teacher-progress-card > header b { padding: 5px 8px; border-radius: 7px; color: #fff; background: #6f35f2; font-size: 9px; }
.landing-teacher-progress-card > header small { color: #6f35f2; font-size: 10px; }
.landing-teacher-progress-card > header em { padding: 5px 9px; border-radius: 999px; color: #6f35f2; background: #e1d3ff; font-size: 9px; font-style: normal; font-weight: 800; }
.landing-teacher-progress-summary { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 11px 14px 10px; }
.landing-teacher-progress-summary span b,
.landing-teacher-progress-summary span small { display: block; }
.landing-teacher-progress-summary span b { font-size: 12px; }
.landing-teacher-progress-summary span small { margin-top: 3px; color: #6f6579; font-size: 9px; }
.landing-teacher-progress-summary > i { height: 7px; overflow: hidden; border-radius: 99px; background: #e9e2ef; }
.landing-teacher-progress-summary > i u { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f35f2, #ed3b9d); }
.landing-teacher-class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 13px 13px; }
.landing-teacher-class-grid > span { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; min-width: 0; padding: 10px 11px; border: 1px solid #d8c9ee; border-radius: 12px; background: #f3edff; }
.landing-teacher-class-grid > span:nth-child(2) { border-color: #bfe7ec; background: #eaf9fb; }
.landing-teacher-class-grid > span:nth-child(3) { border-color: #f1c2da; background: #fff0f7; }
.landing-teacher-class-grid b { font-size: 10px; }
.landing-teacher-class-grid em { padding: 3px 6px; border-radius: 99px; color: #6f35f2; background: #dfd0ff; font-size: 8px; font-style: normal; font-weight: 800; }
.landing-teacher-class-grid small { grid-column: 1 / -1; color: #675e70; font-size: 8px; }

.landing-encoding-screen { overflow: hidden; background: #fff; }
.landing-encoding-screen::before { content: none; }
.landing-screen-body { min-height: 515px; background: #fbfaff; }
.landing-screen-body aside {
    border-right: 1px solid #e8e0f2;
    color: #766587;
    background: #f5f0fb;
}
.landing-screen-body aside strong { color: #fff; background: linear-gradient(135deg, #6f35f2, #ed3b9d); box-shadow: 0 8px 18px rgba(111,53,242,.2); }
.landing-screen-body aside span { color: #746680; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(89,57,134,.08); }
.landing-screen-body aside span.is-active { color: #6f35f2; background: #fff; box-shadow: 0 7px 16px rgba(76,43,119,.12), inset 0 0 0 1px rgba(111,53,242,.15); }
.landing-screen-body aside i { color: #322044; background: linear-gradient(135deg, #7fe0e8, #ffb0d6); }
.landing-screen-content { background: radial-gradient(circle at 100% 0, rgba(56,214,220,.07), transparent 28%), #fbfaff; }

@media (max-width: 700px) {
    .landing-story-year .landing-story-wrap { width: min(100% - 28px, 1320px); }
    .landing-story-year .landing-year-visual { width: 100%; min-height: 400px; }
    .landing-year-window.landing-teacher-dashboard { height: 260px; border-radius: 21px; }
    .landing-teacher-dashboard .landing-year-window-main { padding: 12px; }
    .landing-story-document .landing-feature-card > em { right: 10px; bottom: 9px; left: auto; max-width: calc(100% - 20px); }
    .landing-teacher-dashboard-heading span strong { font-size: 16px; }
    .landing-teacher-dashboard-heading > i { width: 29px; height: 29px; }
    .landing-teacher-timeline { margin: 6px 0; }
    .landing-teacher-timeline::before { top: 21px; }
    .landing-teacher-timeline > span { gap: 3px; font-size: 6px; }
    .landing-teacher-timeline > span i { width: 11px; height: 11px; border-width: 2px; }
    .landing-teacher-stats { gap: 4px; }
    .landing-teacher-stats article { display: block; min-height: 49px; padding: 6px; border-radius: 10px; }
    .landing-teacher-stats article > i { display: none; }
    .landing-teacher-stats span b { font-size: 13px; }
    .landing-teacher-stats span small { margin-top: 3px; font-size: 6px; }
    .landing-teacher-progress-title { margin: 8px 0 5px; font-size: 10px; }
    .landing-teacher-progress-card > header { padding: 6px 8px; }
    .landing-teacher-progress-summary { padding: 7px 9px 8px; }
    .landing-teacher-class-grid { display: none; }
    .landing-screen-body { min-height: 410px; grid-template-columns: 52px 1fr; }
    .landing-screen-body aside { padding-inline: 8px; }
}

@media (max-width: 980px) {
    .landing-story-year .landing-story-split { grid-template-columns: 1fr; gap: 75px; }
    .landing-tools-track {
        grid-template-columns: repeat(5, 230px);
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 3px 22px;
        scroll-padding-inline: 3px;
        scroll-snap-type: inline proximity;
        scrollbar-color: rgba(255,255,255,.45) rgba(255,255,255,.09);
    }
    .landing-tools-track article { scroll-snap-align: start; }
}

@media (min-width: 701px) and (max-width: 980px) {
    .landing-story-year .landing-story-wrap { width: min(100% - 40px, 900px); }
    .landing-story-year .landing-year-visual { width: min(760px, 100%); min-height: 690px; }
    .landing-year-window.landing-teacher-dashboard { width: 100%; height: 440px; }
}

@media (max-width: 640px) {
    .landing-story-year .landing-story-wrap { width: min(100% - 28px, 1320px); }
    .landing-tools-track { grid-template-columns: repeat(5, 215px); }
}

/* Landing page — captures produit et titres éditoriaux */
.landing-product-screenshot {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(86,48,139,.2);
    border-radius: 28px;
    background: #f9f5ff;
    box-shadow: 0 34px 82px rgba(45,25,82,.22);
}
.landing-product-screenshot img { display: block; width: 100%; height: auto; }
.landing-dashboard-screenshot { position: absolute; right: 0; bottom: 0; width: 100%; }
.landing-encoding-screenshot { width: 100%; }

.landing-story-document .landing-feature-card.is-dark {
    border-color: rgba(30,20,45,.82);
    box-shadow: 0 20px 42px rgba(30,18,50,.2);
}

.landing-roles-heading { display: block; text-align: center; }
.landing-roles-heading h2 { font-size: clamp(2.75rem, 4.2vw, 4rem); white-space: nowrap; }

.landing-updates-layout { gap: clamp(36px, 5vw, 62px); }
.landing-updates-copy { display: block; max-width: none; text-align: center; }
.landing-updates-copy h2 { font-size: clamp(2.65rem, 4.15vw, 4rem); white-space: nowrap; }
.landing-update-promises > .landing-update-card {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 16px;
    min-height: 176px;
    background:
        linear-gradient(var(--update-accent), var(--update-accent)) top / 100% 5px no-repeat,
        linear-gradient(145deg, #fff 0 58%, var(--update-soft));
}
.landing-update-promises > .landing-update-card::before { content: none; }
.landing-update-promises i { grid-row: auto; }
.landing-update-promises > .landing-update-card > span { display: block; min-width: 0; }
.landing-update-promises b,
.landing-update-promises small { display: block; }
.landing-update-promises b { align-self: auto; }
.landing-update-promises small { grid-column: auto; margin-top: 8px; }

@media (max-width: 980px) {
    .landing-roles-heading h2,
    .landing-updates-copy h2 { white-space: normal; }
    .landing-dashboard-screenshot { width: 100%; }
}

@media (max-width: 700px) {
    .landing-product-screenshot { border-radius: 18px; }
    .landing-dashboard-screenshot { bottom: 4px; }
    .landing-update-promises > .landing-update-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 0;
    }
}

/* Landing page — contrastes de sections et interactions légères */
.landing-story-admin {
    background: #edf4f6;
}
.landing-story-admin::before { content: none; }
.landing-update-promises > .landing-update-card {
    border: 2px solid color-mix(in srgb, var(--update-accent) 34%, white);
    background: linear-gradient(145deg, #fff 0 58%, var(--update-soft));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.landing-update-promises i { transition: transform .3s ease, box-shadow .3s ease; }
.landing-import-panel { transition: transform .34s ease, box-shadow .34s ease; }
.landing-import-title > span { transition: transform .34s ease; }

@media (hover: hover) {
    .landing-update-promises > .landing-update-card:hover {
        border-color: color-mix(in srgb, var(--update-accent) 72%, white);
        box-shadow: 0 26px 54px color-mix(in srgb, var(--update-accent) 18%, transparent);
        transform: translateY(-7px);
    }
    .landing-update-promises > .landing-update-card:hover i {
        box-shadow: 0 15px 28px color-mix(in srgb, var(--update-accent) 30%, transparent);
        transform: rotate(-5deg) scale(1.08);
    }
    .landing-import-panel:hover {
        box-shadow: 0 42px 98px rgba(44,92,81,.22);
        transform: translateY(-7px) rotate(0);
    }
    .landing-import-panel:hover .landing-import-title > span { transform: translate(3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-update-promises > .landing-update-card,
    .landing-update-promises i,
    .landing-import-panel,
    .landing-import-title > span { transition: none; }
    .landing-update-promises > .landing-update-card:hover,
    .landing-update-promises > .landing-update-card:hover i,
    .landing-import-panel:hover,
    .landing-import-panel:hover .landing-import-title > span { transform: none; }
}

/* Suivi enseignant : mise en page dédiée, indépendante des tableaux adaptatifs. */
.teacher-absence-filters .form-field:has(input[name="q"]) { flex-grow: 2; }
.teacher-absence-filters [data-tracking-error] { color: var(--error-tone-text); flex-basis: 100%; }
.tracking-results-table .teacher-tracking-student-copy strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.3; }
.tracking-detail-label { display: none; }
.tracking-period-badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--text); background: var(--surface-secondary); }
.tracking-results-table .teacher-absence-action .button { color: var(--text); background: color-mix(in srgb, var(--text) 10%, var(--surface)); border-color: color-mix(in srgb, var(--text) 30%, var(--surface)); box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 10%, transparent); }
.tracking-results-table .teacher-absence-action .button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 17%, var(--surface)); border-color: color-mix(in srgb, var(--text) 45%, var(--surface)); }
@container app-content (max-width: 1100px) {
    .teacher-absence-table-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .tracking-results-table, .tracking-results-table tbody { display: block; width: 100%; }
    .tracking-results-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tracking-results-table tbody { display: grid; gap: 14px; }
    .tracking-results-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "student date" "kind kind" "course class" "period action"; gap: 16px 20px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
    .tracking-results-table tbody td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .tracking-results-table tbody td:nth-child(1) { grid-area: date; text-align: right; color: var(--text-secondary); font-size: 12px; }
    .tracking-results-table tbody td:nth-child(2) { grid-area: student; }
    .tracking-results-table tbody td:nth-child(3) { grid-area: kind; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .tracking-results-table tbody .tracking-course { grid-area: course; }
    .tracking-results-table tbody .tracking-class { grid-area: class; }
    .tracking-results-table tbody :is(.tracking-course, .tracking-class) { font-size: 14px; font-weight: 500; line-height: 1.45; }
    .tracking-results-table .tracking-detail-label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
    .tracking-results-table tbody .tracking-period { grid-area: period; align-self: center; }
    .tracking-results-table tbody td.teacher-absence-action { grid-area: action; display: flex; justify-content: flex-end; align-items: center; white-space: normal; }
    .tracking-results-table .journal-tracking-kind { width: fit-content; max-width: 100%; }
    .tracking-results-table .journal-tracking-comment { margin-top: 12px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
    .tracking-results-table .teacher-tracking-student { min-width: 0; }
}
@container app-content (max-width: 480px) {
    .tracking-results-table tbody tr { gap: 14px 12px; padding: 16px; grid-template-areas: "student student" "date date" "kind kind" "course class" "period action"; }
    .tracking-results-table tbody td:nth-child(1) { display: flex; gap: 8px; align-items: baseline; text-align: left; }
    .teacher-absence-filters .form-field:has(input[name="q"]) { grid-column: 1 / -1; }
}