/* ==========================================================================
   GTO Школа — дизайн-система
   mobile-first: 360 / 600 / 840 / 1200
   Тёмная тема через prefers-color-scheme
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
    --md-sys-color-primary:#1a5276;
    --md-sys-color-on-primary:#ffffff;
    --md-sys-color-primary-container:#d6e8f5;
    --md-sys-color-on-primary-container:#0c3552;
    --md-sys-color-secondary:#2e86c1;
    --md-sys-color-on-secondary:#ffffff;
    --md-sys-color-secondary-container:#d1eaf8;
    --md-sys-color-on-secondary-container:#144d74;
    --md-sys-color-tertiary:#b8860b;
    --md-sys-color-on-tertiary:#ffffff;
    --md-sys-color-tertiary-container:#fdecc8;
    --md-sys-color-on-tertiary-container:#6b4e02;
    --md-sys-color-error:#ba1a1a;
    --md-sys-color-on-error:#ffffff;
    --md-sys-color-error-container:#ffdad6;
    --md-sys-color-on-error-container:#410002;
    --md-sys-color-surface:#fcfcff;
    --md-sys-color-on-surface:#1b1c1e;
    --md-sys-color-surface-variant:#e0e6ec;
    --md-sys-color-on-surface-variant:#42474d;
    --md-sys-color-surface-container-lowest:#ffffff;
    --md-sys-color-surface-container-low:#f2f5f8;
    --md-sys-color-surface-container:#eceff3;
    --md-sys-color-surface-container-high:#e6e9ee;
    --md-sys-color-surface-container-highest:#e0e4e9;
    --md-sys-color-outline:#73777f;
    --md-sys-color-outline-variant:#c3c8cf;
    --md-sys-color-inverse-surface:#313134;
    --md-sys-color-inverse-on-surface:#f1f0f4;
    --md-sys-color-gold:#f6b93b;
    --md-sys-color-silver:#9aa5b1;
    --md-sys-color-bronze:#cd7f32;

    /* Легаси-алиасы */
    --md-primary:var(--md-sys-color-primary);
    --md-accent:var(--md-sys-color-gold);
    --md-on-primary:var(--md-sys-color-on-primary);
    --md-outline:var(--md-sys-color-outline-variant);
    --md-on-surface-variant:var(--md-sys-color-on-surface-variant);

    /* Расширенные цвета для значков и секундомера */
    --md-badge-gold-bg:#fff8e1;
    --md-badge-gold-text:#856404;
    --md-badge-silver-bg:#f3f4f6;
    --md-badge-silver-text:#4a5568;
    --md-badge-bronze-bg:#fef3e9;
    --md-badge-bronze-text:#8b5e3c;
    --md-badge-no-bg:var(--md-sys-color-error-container);
    --md-badge-no-text:var(--md-sys-color-on-error-container);

    --md-med-bg:#fff8e1;
    --md-med-border:#e0a800;
    --md-med-text:#856404;

    --md-offline-bg:#fff3cd;
    --md-offline-text:#856404;
    --md-offline-border:#e0c060;
    --md-online-bg:#d4edda;
    --md-online-text:#155724;
    --md-online-border:#90c695;

    --md-success:#2e7d32;
    --md-success-hover:#1b5e20;
    --md-warning:#b8860b;
    --md-warning-hover:#6b4e02;

    --md-sw-start:#27ae60;
    --md-sw-start-hover:#1e8449;
    --md-sw-stop:#f39c12;
    --md-sw-stop-hover:#d68910;
    --md-sw-reset:#e0e0e0;
    --md-sw-reset-hover:#bdbdbd;
    --md-sw-finish:#e74c3c;
    --md-sw-finish-hover:#c0392b;
    --md-sw-shadow:0 8px 32px rgba(0,0,0,.25);
    --md-sw-shadow-sm:0 2px 6px rgba(0,0,0,.15);

    --md-stage-header-bg:#ebf5fb;
    --md-stage-gender:#374151;
    --md-chip-border-hover:#ffc107;

    --md-import-popup-shadow:0 8px 32px rgba(0,0,0,.2);

    /* Цвета диаграммы рейтинга классов (7 групп) */
    --md-chart-speed:#1a5276;
    --md-chart-power:#2e86c1;
    --md-chart-strength:#27ae60;
    --md-chart-flex:#e67e22;
    --md-chart-coord:#8e44ad;
    --md-chart-endurance:#c0392b;
    --md-chart-applied:#16a085;

    /* Типографика — system font stack */
    --md-sys-typescale-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    --md-sys-typescale-label:.875rem;

    /* Шкала 4/8 */
    --md-sys-spacing-2xs:4px;
    --md-sys-spacing-xs:8px;
    --md-sys-spacing-s:12px;
    --md-sys-spacing-m:16px;
    --md-sys-spacing-l:24px;
    --md-sys-spacing-xl:32px;
    --md-sys-spacing-2xl:48px;
    --md-sys-spacing-3xl:64px;

    /* Алиасы elevation для обратной совместимости */
    --md-sys-elevation-1:var(--md-sys-shadow-sm);
    --md-sys-elevation-2:var(--md-sys-shadow-md);
    --md-sys-elevation-3:var(--md-sys-shadow-lg);
    --md-sys-elevation-4:var(--md-sys-shadow-xl);

    /* Скругления: sm=4, md=8, lg=16 */
    --md-sys-shape-sm:4px;
    --md-sys-shape-md:8px;
    --md-sys-shape-lg:16px;
    --md-sys-shape-full:999px;

    /* Алиасы для обратной совместимости (shape) */
    --md-sys-shape-xs:var(--md-sys-shape-sm);
    --md-sys-shape-s:var(--md-sys-shape-md);
    --md-sys-shape-m:var(--md-sys-shape-lg);

    /* Тени: 5 уровней */
    --md-sys-shadow-xs:0 1px 2px rgba(0,0,0,.08);
    --md-sys-shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
    --md-sys-shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
    --md-sys-shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
    --md-sys-shadow-xl:0 20px 25px rgba(0,0,0,.1),0 8px 10px rgba(0,0,0,.06);

    /* Transition */
    --md-sys-transition:150ms ease-in-out;
    --md-sys-transition-long:300ms ease-in-out;

    --md-sys-container-max:1200px;
    --md-sys-nav-height-mobile:80px;
}

@media (prefers-color-scheme: dark){
    :root{
        --md-sys-color-primary:#a6c9e8;
        --md-sys-color-on-primary:#06324f;
        --md-sys-color-primary-container:#0f4c73;
        --md-sys-color-on-primary-container:#d6e8f5;
        --md-sys-color-secondary:#9dcef0;
        --md-sys-color-on-secondary:#0c3d5e;
        --md-sys-color-secondary-container:#2a6c94;
        --md-sys-color-on-secondary-container:#d1eaf8;
        --md-sys-color-tertiary:#e4c77a;
        --md-sys-color-on-tertiary:#493a00;
        --md-sys-color-tertiary-container:#7a6100;
        --md-sys-color-on-tertiary-container:#fdecc8;
        --md-sys-color-error:#ffb4ab;
        --md-sys-color-on-error:#690005;
        --md-sys-color-error-container:#93000a;
        --md-sys-color-on-error-container:#ffdad6;
        --md-sys-color-surface:#131316;
        --md-sys-color-on-surface:#e3e2e6;
        --md-sys-color-surface-variant:#42474d;
        --md-sys-color-on-surface-variant:#c3c8cf;
        --md-sys-color-surface-container-lowest:#0e0e11;
        --md-sys-color-surface-container-low:#1b1c1f;
        --md-sys-color-surface-container:#1f2023;
        --md-sys-color-surface-container-high:#292a2e;
        --md-sys-color-surface-container-highest:#34353a;
        --md-sys-color-outline:#8d9299;
        --md-sys-color-outline-variant:#42474d;
        --md-sys-color-inverse-surface:#e0e4e9;
        --md-sys-color-inverse-on-surface:#313134;
        --md-sys-color-gold:#f6b93b;
        --md-sys-color-silver:#a8b3be;
        --md-sys-color-bronze:#d69055;

        /* Расширенные цвета — тёмная тема */
        --md-badge-gold-bg:#5c4a00;
        --md-badge-gold-text:#ffd54f;
        --md-badge-silver-bg:#2d3136;
        --md-badge-silver-text:#c3c8cf;
        --md-badge-bronze-bg:#4a3010;
        --md-badge-bronze-text:#d69055;

        --md-med-bg:#5c4a00;
        --md-med-border:#f0b300;
        --md-med-text:#ffd54f;

        --md-offline-bg:#5c4a00;
        --md-offline-text:#ffd54f;
        --md-offline-border:#f0b300;
        --md-online-bg:#1a4730;
        --md-online-text:#a5d6a7;
        --md-online-border:#66bb6a;

        --md-stage-header-bg:#1b2b3a;
        --md-stage-gender:#c3c8cf;

        --md-sw-start:#43a047;
        --md-sw-start-hover:#388e3c;
        --md-sw-stop:#f39c12;
        --md-sw-stop-hover:#e67e22;
        --md-sw-reset:#555;
        --md-sw-reset-hover:#666;
        --md-sw-finish:#e53935;
        --md-sw-finish-hover:#c62828;

        --md-sw-shadow:0 8px 32px rgba(0,0,0,.5);
        --md-sw-shadow-sm:0 2px 6px rgba(0,0,0,.3);
        --md-import-popup-shadow:0 8px 32px rgba(0,0,0,.5);

        /* Тёмные версии диаграммы */
        --md-chart-speed:#5dade2;
        --md-chart-power:#85c1e9;
        --md-chart-strength:#58d68d;
        --md-chart-flex:#f0b27a;
        --md-chart-coord:#bb8fce;
        --md-chart-endurance:#f1948a;
        --md-chart-applied:#76d7c4;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
    font-size:100%;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    font-family:var(--md-sys-typescale-font);
    font-size:1rem;
    line-height:1.5;
    color:var(--md-sys-color-on-surface);
    background:var(--md-sys-color-surface);
    min-height:100vh;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--md-sys-color-primary);text-decoration:none;transition:color var(--md-sys-transition)}
a:hover{text-decoration:underline;color:var(--md-sys-color-on-primary-container)}
a:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:var(--md-sys-shape-sm)}

button{font-family:inherit;cursor:pointer}
button:disabled{cursor:default}

h1,h2,h3,h4,h5,h6{line-height:1.2;color:var(--md-sys-color-on-surface)}

:focus{outline:none}
:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:var(--md-sys-shape-sm)}

/* ---------- 3. Typography ---------- */
.typ-display-large{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:400;line-height:1.1;letter-spacing:-.02em}
.typ-display-small{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:400;line-height:1.2}
.typ-headline-large{font-size:clamp(1.5rem,3vw,2rem);font-weight:500;line-height:1.2}
.typ-headline-medium{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:500;line-height:1.3}
.typ-headline-small{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;line-height:1.3}
.typ-title-large{font-size:clamp(1rem,1.8vw,1.375rem);font-weight:600;line-height:1.3}
.typ-title-medium{font-size:1rem;font-weight:600;line-height:1.4}
.typ-title-small{font-size:.875rem;font-weight:600;line-height:1.4}
.typ-body-large{font-size:1rem;line-height:1.5}
.typ-body-medium{font-size:.875rem;line-height:1.5}
.typ-body-small{font-size:.75rem;line-height:1.5}
.typ-label-large{font-size:.875rem;font-weight:600;letter-spacing:.01em}
.typ-label-medium{font-size:.75rem;font-weight:600;letter-spacing:.02em}
.typ-label-small{font-size:.625rem;font-weight:600;letter-spacing:.04em}

/* ---------- 4. Container & Grid ---------- */
.l-container{max-width:1200px;margin:0 auto;padding:0 var(--md-sys-spacing-m);width:100%}
.l-grid{display:grid;gap:var(--md-sys-spacing-m)}
.l-grid--2{grid-template-columns:1fr}
.l-grid--3{grid-template-columns:1fr}
.l-grid--4{grid-template-columns:repeat(2,1fr)}
.l-section{padding:var(--md-sys-spacing-2xl) var(--md-sys-spacing-m)}

@media (min-width:600px){
    .l-grid--2{grid-template-columns:repeat(2,1fr)}
    .l-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:840px){
    .l-grid--3{grid-template-columns:repeat(3,1fr)}
    .l-grid--4{grid-template-columns:repeat(4,1fr)}
    .l-section{padding:clamp(2rem,6vw,4rem) var(--md-sys-spacing-m)}
}

/* ---------- 5. Shadows ---------- */
.shadow-xs{box-shadow:var(--md-sys-shadow-xs)}
.shadow-sm{box-shadow:var(--md-sys-shadow-sm)}
.shadow-md{box-shadow:var(--md-sys-shadow-md)}
.shadow-lg{box-shadow:var(--md-sys-shadow-lg)}
.shadow-xl{box-shadow:var(--md-sys-shadow-xl)}

/* ---------- 6. Buttons ---------- */
.md-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--md-sys-spacing-s);
    min-height:40px;
    padding:0 var(--md-sys-spacing-l);
    border-radius:var(--md-sys-shape-full);
    border:1.5px solid transparent;
    font-size:var(--md-sys-typescale-label);
    font-weight:600;
    letter-spacing:.02em;
    cursor:pointer;
    text-decoration:none;
    transition:background var(--md-sys-transition),box-shadow var(--md-sys-transition),color var(--md-sys-transition),border-color var(--md-sys-transition);
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance:none;
    appearance:none;
    user-select:none;
    white-space:nowrap;
}
.md-btn:active{transform:scale(.97)}
.md-btn:disabled{opacity:.38;pointer-events:none}

/* Primary (default) */
.md-btn--primary,.md-btn{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:transparent}
.md-btn--primary:hover,.md-btn:hover{background:var(--md-sys-color-on-primary-container);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-shadow-sm)}
.md-btn--primary:active{background:var(--md-sys-color-primary)}
.md-btn--primary:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}

/* Secondary */
.md-btn--secondary{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary);border-color:transparent}
.md-btn--secondary:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);box-shadow:var(--md-sys-shadow-sm)}
.md-btn--secondary:active{background:var(--md-sys-color-secondary)}

/* Ghost (text only, no bg) */
.md-btn--ghost{background:transparent;color:var(--md-sys-color-primary);border-color:transparent}
.md-btn--ghost:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary)}
.md-btn--ghost:active{background:var(--md-sys-color-primary-container)}

/* Danger */
.md-btn--danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);border-color:transparent}
.md-btn--danger:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);box-shadow:var(--md-sys-shadow-sm)}
.md-btn--danger:active{background:var(--md-sys-color-error)}

/* Outlined (variant on top) */
.md-btn--outlined{background:transparent;color:var(--md-sys-color-primary);border-color:var(--md-sys-color-outline)}
.md-btn--outlined:hover{background:var(--md-sys-color-primary-container);border-color:var(--md-sys-color-primary)}
.md-btn--outlined:active{background:var(--md-sys-color-primary-container)}

/* Sizes */
.md-btn--sm{min-height:32px;padding:0 var(--md-sys-spacing-m);font-size:.8125rem}
.md-btn--lg{min-height:48px;padding:0 var(--md-sys-spacing-xl);font-size:1rem}
.md-btn--icon{width:40px;padding:0;border-radius:var(--md-sys-shape-full)}

/* ---------- 7. Cards ---------- */
.md-card{
    background:var(--md-sys-color-surface-container-lowest);
    border-radius:var(--md-sys-shape-lg);
    box-shadow:var(--md-sys-shadow-sm);
    padding:var(--md-sys-spacing-m);
    transition:box-shadow var(--md-sys-transition);
    overflow:hidden;
}
.md-card--hover:hover{box-shadow:var(--md-sys-shadow-md)}
.md-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--md-sys-spacing-s);margin-bottom:var(--md-sys-spacing-m)}
.md-card__title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface)}
.md-card__body{color:var(--md-sys-color-on-surface-variant)}

/* ---------- 8. Chips ---------- */
.md-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--md-sys-spacing-s);
    min-height:32px;
    padding:0 var(--md-sys-spacing-m);
    border-radius:var(--md-sys-shape-md);
    background:var(--md-sys-color-surface-container-low);
    color:var(--md-sys-color-on-surface);
    font-size:.875rem;
    font-weight:500;
    border:1px solid transparent;
    transition:background var(--md-sys-transition);
    -webkit-tap-highlight-color:transparent;
}
.md-chip--filter{cursor:pointer}
.md-chip--filter:hover{background:var(--md-sys-color-surface-container-high)}
.md-chip--selected{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.md-chip--assist{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer}
.md-chip--assist:hover{background:var(--md-sys-color-surface-container-high)}

/* ---------- 9. Forms ---------- */
.md-field{
    display:flex;
    flex-direction:column;
    gap:var(--md-sys-spacing-xs);
    margin-bottom:var(--md-sys-spacing-m);
}
.md-field__label{
    font-size:.8125rem;
    font-weight:600;
    color:var(--md-sys-color-on-surface-variant);
    letter-spacing:.01em;
    line-height:1.2;
}
.md-field__input{
    width:100%;
    min-height:44px;
    padding:.5rem .75rem;
    border:1.5px solid var(--md-sys-color-outline-variant);
    border-radius:var(--md-sys-shape-md);
    background:var(--md-sys-color-surface-container-lowest);
    color:var(--md-sys-color-on-surface);
    font-size:.9375rem;
    font-family:inherit;
    transition:border-color var(--md-sys-transition),box-shadow var(--md-sys-transition);
    -webkit-appearance:none;
    appearance:none;
}
.md-field__input::placeholder{color:var(--md-sys-color-on-surface-variant);opacity:.6}
.md-field__input:hover{border-color:var(--md-sys-color-outline)}
.md-field__input:focus,.md-field__input:focus-visible{outline:none;border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1.5px var(--md-sys-color-primary)}
.md-field__input:disabled{opacity:.5;cursor:not-allowed;background:var(--md-sys-color-surface-container-low)}

/* Error state */
.md-field--error .md-field__label{color:var(--md-sys-color-error)}
.md-field--error .md-field__input{border-color:var(--md-sys-color-error)}
.md-field--error .md-field__input:focus,.md-field--error .md-field__input:focus-visible{border-color:var(--md-sys-color-error);box-shadow:inset 0 0 0 1.5px var(--md-sys-color-error)}
.md-field__error{
    font-size:.75rem;
    color:var(--md-sys-color-error);
    display:none;
    gap:var(--md-sys-spacing-xs);
    align-items:center;
}
.md-field--error .md-field__error{display:flex}

/* textarea */
textarea.md-field__input{min-height:80px;resize:vertical}

/* select */
select.md-field__input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2342474d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:2rem}

/* ---------- 10. Tables ---------- */
.md-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-table{width:100%;border-collapse:collapse;font-size:.875rem}
.md-table th{text-align:left;padding:var(--md-sys-spacing-s);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--md-sys-color-on-surface-variant);border-bottom:1px solid var(--md-sys-color-outline-variant);white-space:nowrap}
.md-table td{padding:var(--md-sys-spacing-s);border-bottom:1px solid var(--md-sys-color-outline-variant);vertical-align:middle;color:var(--md-sys-color-on-surface)}
.md-table tr:nth-child(even) td{background:var(--md-sys-color-surface-container-low)}
.md-table tr:hover td{background:var(--md-sys-color-surface-container)}
.md-table .t-strong{font-weight:700}
.md-table .t-primary{color:var(--md-sys-color-primary);font-weight:700}
.md-table .t-muted{color:var(--md-sys-color-on-surface-variant)}

/* ---------- 11. Navigation ---------- */
.md-navbar{
    position:sticky;
    top:0;
    z-index:100;
    background:#2e86c1;
    color:var(--md-sys-color-on-primary);
    box-shadow:var(--md-sys-shadow-sm);
    border-bottom:none;
}
.md-navbar__inner{display:flex;align-items:center;gap:var(--md-sys-spacing-s);min-height:64px}
.md-navbar__brand{display:flex;align-items:center;gap:var(--md-sys-spacing-s);text-decoration:none;color:var(--md-sys-color-on-primary);font-weight:700;font-size:1.125rem;margin-right:auto}
.md-navbar__brand img{width:48px;height:48px;object-fit:contain}
.md-navbar__brand span{color:var(--md-sys-color-on-primary)}
.md-navbar__brand:hover{text-decoration:none}
.md-navbar__burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:rgba(255,255,255,.15);color:var(--md-sys-color-on-primary);cursor:pointer;border-radius:var(--md-sys-shape-full);transition:background var(--md-sys-transition)}
.md-navbar__burger:hover{background:rgba(255,255,255,.3)}
.md-navbar__burger svg{stroke:var(--md-sys-color-on-primary)}
.md-navbar__menu{display:none;flex-direction:column;gap:var(--md-sys-spacing-xs);padding:var(--md-sys-spacing-s) 0 var(--md-sys-spacing-m)}

@media (min-width:840px){
    .md-navbar__menu{display:flex;flex-direction:row;align-items:center;gap:var(--md-sys-spacing-xs);padding:0;background:transparent;box-shadow:none;position:static}
    .md-navbar__menu .md-navbar__link{color:rgba(255,255,255,.88)}
    .md-navbar__menu .md-navbar__link.is-active{background:rgba(255,255,255,.22);color:var(--md-sys-color-on-primary)}
}

.md-navbar__menu.is-open{
    display:flex;
    background:#2e86c1;
    border-radius:0 0 var(--md-sys-shape-lg) var(--md-sys-shape-lg);
    box-shadow:var(--md-sys-shadow-lg);
    padding:var(--md-sys-spacing-s) var(--md-sys-spacing-m) var(--md-sys-spacing-m);
    z-index:200;
    position:absolute;
    top:64px;
    left:0;
    right:0;
}
.md-navbar__menu.is-open .md-navbar__link{color:#fff}
.md-navbar__menu.is-open .md-navbar__link:hover{background:rgba(255,255,255,.15);color:#fff}
.md-navbar__menu.is-open .md-navbar__link.is-active{background:rgba(255,255,255,.22);color:#fff}

.md-navbar__link{
    display:flex;
    align-items:center;
    gap:var(--md-sys-spacing-s);
    padding:var(--md-sys-spacing-s) var(--md-sys-spacing-m);
    border-radius:var(--md-sys-shape-full);
    color:rgba(255,255,255,.88);
    text-decoration:none;
    font-weight:600;
    font-size:.875rem;
    transition:background var(--md-sys-transition),color var(--md-sys-transition);
    -webkit-tap-highlight-color:transparent;
}
.md-navbar__link:hover{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}
.md-navbar__link.is-active{background:rgba(255,255,255,.22);color:var(--md-sys-color-on-primary)}
.md-navbar__link svg{stroke:currentColor}
.md-navbar__link.is-active svg{stroke:var(--md-sys-color-on-primary)}

/* Bottom nav */
.md-bottomnav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
    display:flex;
    background:var(--md-sys-color-secondary);
    border-top:1px solid rgba(255,255,255,.15);
    padding:var(--md-sys-spacing-s) 0 calc(env(safe-area-inset-bottom,0px) + var(--md-sys-spacing-s));
}
.md-bottomnav__item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:var(--md-sys-spacing-xs) 0;
    color:rgba(255,255,255,.75);
    text-decoration:none;
    font-size:.625rem;
    font-weight:600;
    -webkit-tap-highlight-color:transparent;
    transition:color var(--md-sys-transition);
}
.md-bottomnav__item:hover{color:var(--md-sys-color-on-primary);text-decoration:none}
.md-bottomnav__item.is-active{color:var(--md-sys-color-on-primary)}
.md-bottomnav__item svg{width:22px;height:22px;stroke:currentColor;fill:none}
.md-bottomnav__item.is-active svg{stroke:var(--md-sys-color-on-primary)}

@media (min-width:840px){
    .md-navbar__burger{display:none}
    .md-navbar__menu{display:flex;flex-direction:row;align-items:center;gap:var(--md-sys-spacing-xs);padding:0}
    .md-bottomnav{display:none}
    body{padding-bottom:0}
}
@media (max-width:839px){
    body{padding-bottom:calc(var(--md-sys-nav-height-mobile) + env(safe-area-inset-bottom,0px))}
}

/* ---------- 12. Utilities ---------- */
.u-text-center{text-align:center}
.u-text-muted{color:var(--md-sys-color-on-surface-variant)}
.u-flex{display:flex}
.u-flex--center{align-items:center;justify-content:center}
.u-gap-s{gap:var(--md-sys-spacing-s)}
.u-mt-s{margin-top:var(--md-sys-spacing-s)}
.u-mt-m{margin-top:var(--md-sys-spacing-m)}
.u-mb-m{margin-bottom:var(--md-sys-spacing-m)}
.u-w100{width:100%}
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 13. Legacy compatibility ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 .75rem;margin-top:.75rem}
.container-wide{max-width:1200px;margin:0 auto;padding:0 1.25rem}

.appbar{
    background:var(--md-sys-color-primary);
    color:var(--md-sys-color-on-primary);
    padding:.75rem 0;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:var(--md-sys-shadow-sm);
}
.appbar .container{max-width:960px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.appbar .brand{display:flex;align-items:center;gap:.6rem;margin-right:.75rem;flex-shrink:0}
.appbar .brand img{width:40px;height:40px;object-fit:contain}
.appbar .brand-text{display:flex;flex-direction:column;line-height:1.1}
.appbar .brand-text .b-title{color:var(--md-sys-color-on-primary);font-weight:700;font-size:1.05rem}
.appbar .brand-text .b-sub{color:rgba(255,255,255,.85);font-size:.72rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase}
.appbar h1{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-primary)}
.appbar .back{color:var(--md-sys-color-on-primary);opacity:.85;text-decoration:none;font-size:.85rem}
.appbar .logout{color:var(--md-sys-color-on-primary);opacity:.85;text-decoration:none;font-size:.85rem}
.appbar .menu-toggle{display:none;background:0;border:0;color:var(--md-sys-color-on-primary);font-size:1.3rem;cursor:pointer;padding:.2rem;line-height:1}
.appbar-actions{display:flex;gap:.5rem;align-items:center}
.appbar-actions.show{display:flex}
.appbar-actions .btn{color:rgba(255,255,255,.95)!important;border-color:rgba(255,255,255,.5)!important;background:rgba(255,255,255,.12)}
.appbar .btn.active{background:rgba(255,255,255,.25);color:var(--md-sys-color-on-primary);border-color:rgba(255,255,255,.6)}
.appbar-actions .appbar-extra-btn{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;padding:.35rem .7rem;border-radius:var(--md-sys-shape-full);font-size:.8rem;font-weight:600;text-decoration:none;cursor:pointer}

.card{
    background:var(--md-sys-color-surface-container-lowest);
    border-radius:var(--md-sys-shape-lg);
    box-shadow:var(--md-sys-shadow-sm);
    padding:1.25rem;
    margin-bottom:1rem;
}
.card h2{font-size:1rem;font-weight:600;margin-bottom:.75rem;color:var(--md-sys-color-on-surface)}
.card h2 .badge{font-size:.75rem;font-weight:400;color:var(--md-sys-color-on-surface-variant)}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.6rem 1rem;
    border-radius:var(--md-sys-shape-lg);
    background:var(--md-sys-color-primary);
    color:var(--md-sys-color-on-primary);
    font-weight:600;
    font-size:.9rem;
    border:1.5px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:background var(--md-sys-transition),box-shadow var(--md-sys-transition);
}
.btn:hover{background:var(--md-sys-color-primary);box-shadow:var(--md-sys-shadow-sm)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.38;pointer-events:none}
.btn-sm{padding:.35rem .7rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.5rem;font-size:1rem;width:100%}
.btn-outline{background:transparent;color:var(--md-sys-color-primary);border-color:var(--md-sys-color-outline)}
.btn-outline:hover{background:var(--md-sys-color-primary-container);border-color:var(--md-sys-color-primary)}
.btn-success{background:#2e7d32;color:#fff}
.btn-success:hover{background:#1b5e20}
.btn-warning{background:#b8860b;color:#fff}
.btn-warning:hover{background:#6b4e02}
.btn-danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}
.btn-danger:hover{background:var(--md-sys-color-error)}

input,select,textarea{
    font-size:.95rem;
    font-family:inherit;
    border-radius:var(--md-sys-shape-sm);
    padding:.6rem .75rem;
    border:1.5px solid var(--md-sys-color-outline-variant);
    outline:0;
    width:100%;
    color:var(--md-sys-color-on-surface);
    background:var(--md-sys-color-surface-container-lowest);
    transition:border-color var(--md-sys-transition);
}
input:focus,select:focus,textarea:focus{
    border-color:var(--md-sys-color-primary);
    box-shadow:inset 0 0 0 1.5px var(--md-sys-color-primary);
}
input[type="file"]{padding:.3rem}

.badge-gold,.badge-silver,.badge-bronze,.badge-no{
    display:inline-block;
    font-size:.7rem;
    font-weight:600;
    padding:.1rem .4rem;
    border-radius:var(--md-sys-shape-full);
    text-transform:uppercase;
    letter-spacing:.03em;
}
.badge-gold{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
.badge-silver{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}
.badge-bronze{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
.badge-no{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}

.age-stage{display:inline-block;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);padding:.15rem .5rem;border-radius:var(--md-sys-shape-sm);font-size:.8rem;font-weight:500}

.msg{padding:.6rem .75rem;border-radius:var(--md-sys-shape-md);margin-bottom:.75rem;font-size:.85rem}
.msg-ok{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.msg-err{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}

.form-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.form-row>*{flex:1;min-width:120px}
.form-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.form-top>*{flex:1;min-width:100px}
.input-file-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.input-file-row input[type="file"]{flex:1;min-width:150px;padding:.3rem}

.tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.tab{
    flex:1;
    text-align:center;
    padding:.5rem;
    border-radius:var(--md-sys-shape-lg);
    cursor:pointer;
    font-weight:500;
    border:1.5px solid var(--md-sys-color-outline-variant);
    background:var(--md-sys-color-surface-container-lowest);
    color:var(--md-sys-color-on-surface);
    min-width:80px;
    transition:all var(--md-sys-transition);
    font-size:.9rem;
}
.tab.active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-weight:600}
.tab-content{display:none}
.tab-content.active{display:block}

.p-item,.participant-row,.attempt-item{display:flex;align-items:center;justify-content:space-between;padding:.55rem .5rem;border-bottom:1px solid var(--md-sys-color-outline-variant);gap:.5rem;flex-wrap:wrap}
.p-item:last-child,.participant-row:last-child,.attempt-item:last-child{border-bottom:0}
.p-name{font-weight:500;font-size:.95rem}
.p-sub{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}
.p-class{font-size:.75rem;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);padding:.1rem .4rem;border-radius:var(--md-sys-shape-sm);font-weight:500}
.p-info{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}
.p-creds{font-size:.8rem;color:var(--md-sys-color-primary);font-weight:500;margin-top:.15rem}

.footer{text-align:center;padding:1rem .5rem .5rem;color:var(--md-sys-color-on-surface-variant);font-size:.7rem;border-top:1px solid var(--md-sys-color-outline-variant);margin-top:1.5rem}
.footer a{color:var(--md-sys-color-primary);text-decoration:none;font-weight:500}

@media (max-width:839px){
    .appbar .menu-toggle{display:block}
    .appbar-actions{
        display:none;
        position:fixed;
        top:56px;
        left:0;
        right:0;
        margin:0;
        background:var(--md-sys-color-surface-container);
        flex-direction:column;
        align-items:stretch;
        padding:.5rem 1rem;
        gap:.3rem;
        box-shadow:var(--md-sys-shadow-lg);
        z-index:20;
        max-height:calc(100vh - 56px);
        overflow-y:auto;
    }
    .appbar-actions .btn{width:100%;justify-content:flex-start}
    .card{padding:.75rem;border-radius:var(--md-sys-shape-lg)}
    .form-row>*{min-width:100%}
}
@media (min-width:840px){
    .appbar .menu-toggle{display:none}
}