/* PLIK GENEROWANY przez backend/tools/build-scholar-bundle.mjs - NIE edytowac recznie.
   Zrodla: frontend/src/palette.css, frontend/src/assets/main.css, frontend/src/assets/design-buttons.css, frontend/src/assets/design-cards.css, frontend/platform/assets/scholar.css */

/* Mulish variable 400-900, deklaracje 1:1 z frontend/platform/index.html [F1] */
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/platform/fonts/mulish-latin-ext-var.woff2?v=2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/platform/fonts/mulish-latin-var.woff2?v=2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== frontend/src/palette.css ==== */
/*
 * Matematyzm Color Palette - JEDYNE zrodlo prawdy dla kolorow w CSS.
 *
 * REGULA: Zaden plik w projekcie NIE moze zawierac hardcoded hex.
 * Wszystkie kolory = mix 7 base colors w drabince co 5% (mix-XX nazewnictwo).
 *
 * Owner: platform | Since: 2026-05 | Stability: @stable | See: palette.js
 *
 * Konwencja nazwania mix-tokenow:
 *   --{baseA}-{baseB}-{ratio}  =  color-mix(in srgb, {baseA} (100 - ratio)%, {baseB} ratio%)
 *   np. --primary-dark-20  =  80% primary + 20% dark
 *       --dark-light-50    =  50% dark + 50% light  (czysty szary)
 *
 * Konwencja alpha:
 *   --{base}-a{XX}  =  base z {XX}% opacity (0..95)
 *
 * Drabinka kroku: 5% (0, 5, 10, 15, ..., 95, 100).
 *   - 0% = czysty baseA (= --primary, --dark itd.)
 *   - 100% = czysty baseB (nie generujemy - to po prostu drugi base)
 */

:root {
    /* ========================================================================
       CORE - 7 base colors (jedyne hardcoded hex w calym projekcie)
       ======================================================================== */
    --primary:  #DFC173;
    --dark:     #171B34;
    --light:    #FFFFFF;
    --accent1:  #F9B132;  /* orange/gold */
    --accent2:  #3A6AB2;  /* blue */
    --accent3:  #B64E94;  /* pink/magenta */
    --accent4:  #E62B48;  /* red */

    /* ========================================================================
       DRABINKA primary <-> dark (cieniowanie primary)
       ======================================================================== */
    --primary-dark-05: color-mix(in srgb, var(--primary) 95%, var(--dark));
    --primary-dark-10: color-mix(in srgb, var(--primary) 90%, var(--dark));
    --primary-dark-15: color-mix(in srgb, var(--primary) 85%, var(--dark));
    --primary-dark-20: color-mix(in srgb, var(--primary) 80%, var(--dark));
    --primary-dark-25: color-mix(in srgb, var(--primary) 75%, var(--dark));
    --primary-dark-30: color-mix(in srgb, var(--primary) 70%, var(--dark));
    --primary-dark-35: color-mix(in srgb, var(--primary) 65%, var(--dark));
    --primary-dark-40: color-mix(in srgb, var(--primary) 60%, var(--dark));
    --primary-dark-45: color-mix(in srgb, var(--primary) 55%, var(--dark));
    --primary-dark-50: color-mix(in srgb, var(--primary) 50%, var(--dark));
    --primary-dark-55: color-mix(in srgb, var(--primary) 45%, var(--dark));
    --primary-dark-60: color-mix(in srgb, var(--primary) 40%, var(--dark));
    --primary-dark-65: color-mix(in srgb, var(--primary) 35%, var(--dark));
    --primary-dark-70: color-mix(in srgb, var(--primary) 30%, var(--dark));
    --primary-dark-75: color-mix(in srgb, var(--primary) 25%, var(--dark));
    --primary-dark-80: color-mix(in srgb, var(--primary) 20%, var(--dark));
    --primary-dark-85: color-mix(in srgb, var(--primary) 15%, var(--dark));
    --primary-dark-90: color-mix(in srgb, var(--primary) 10%, var(--dark));
    --primary-dark-95: color-mix(in srgb, var(--primary) 5%, var(--dark));

    /* ========================================================================
       DRABINKA primary <-> light (rozjasnianie primary)
       ======================================================================== */
    --primary-light-05: color-mix(in srgb, var(--primary) 95%, var(--light));
    --primary-light-10: color-mix(in srgb, var(--primary) 90%, var(--light));
    --primary-light-15: color-mix(in srgb, var(--primary) 85%, var(--light));
    --primary-light-20: color-mix(in srgb, var(--primary) 80%, var(--light));
    --primary-light-25: color-mix(in srgb, var(--primary) 75%, var(--light));
    --primary-light-30: color-mix(in srgb, var(--primary) 70%, var(--light));
    --primary-light-35: color-mix(in srgb, var(--primary) 65%, var(--light));
    --primary-light-40: color-mix(in srgb, var(--primary) 60%, var(--light));
    --primary-light-45: color-mix(in srgb, var(--primary) 55%, var(--light));
    --primary-light-50: color-mix(in srgb, var(--primary) 50%, var(--light));
    --primary-light-55: color-mix(in srgb, var(--primary) 45%, var(--light));
    --primary-light-60: color-mix(in srgb, var(--primary) 40%, var(--light));
    --primary-light-65: color-mix(in srgb, var(--primary) 35%, var(--light));
    --primary-light-70: color-mix(in srgb, var(--primary) 30%, var(--light));
    --primary-light-75: color-mix(in srgb, var(--primary) 25%, var(--light));
    --primary-light-80: color-mix(in srgb, var(--primary) 20%, var(--light));
    --primary-light-85: color-mix(in srgb, var(--primary) 15%, var(--light));
    --primary-light-90: color-mix(in srgb, var(--primary) 10%, var(--light));
    --primary-light-95: color-mix(in srgb, var(--primary) 5%, var(--light));

    /* ========================================================================
       DRABINKA dark <-> light (skala szarosci)
       ======================================================================== */
    --dark-light-05: color-mix(in srgb, var(--dark) 95%, var(--light));
    --dark-light-10: color-mix(in srgb, var(--dark) 90%, var(--light));
    --dark-light-15: color-mix(in srgb, var(--dark) 85%, var(--light));
    --dark-light-20: color-mix(in srgb, var(--dark) 80%, var(--light));
    --dark-light-25: color-mix(in srgb, var(--dark) 75%, var(--light));
    --dark-light-30: color-mix(in srgb, var(--dark) 70%, var(--light));
    --dark-light-35: color-mix(in srgb, var(--dark) 65%, var(--light));
    --dark-light-40: color-mix(in srgb, var(--dark) 60%, var(--light));
    --dark-light-45: color-mix(in srgb, var(--dark) 55%, var(--light));
    --dark-light-50: color-mix(in srgb, var(--dark) 50%, var(--light));
    --dark-light-55: color-mix(in srgb, var(--dark) 45%, var(--light));
    --dark-light-60: color-mix(in srgb, var(--dark) 40%, var(--light));
    --dark-light-65: color-mix(in srgb, var(--dark) 35%, var(--light));
    --dark-light-70: color-mix(in srgb, var(--dark) 30%, var(--light));
    --dark-light-75: color-mix(in srgb, var(--dark) 25%, var(--light));
    --dark-light-80: color-mix(in srgb, var(--dark) 20%, var(--light));
    --dark-light-85: color-mix(in srgb, var(--dark) 15%, var(--light));
    --dark-light-90: color-mix(in srgb, var(--dark) 10%, var(--light));
    --dark-light-95: color-mix(in srgb, var(--dark) 5%, var(--light));

    /* ========================================================================
       DRABINKA accent1 <-> dark/light (cieniowanie/rozjasnianie pomaranczy)
       ======================================================================== */
    --accent1-dark-10:  color-mix(in srgb, var(--accent1) 90%, var(--dark));
    --accent1-dark-20:  color-mix(in srgb, var(--accent1) 80%, var(--dark));
    --accent1-dark-30:  color-mix(in srgb, var(--accent1) 70%, var(--dark));
    --accent1-dark-40:  color-mix(in srgb, var(--accent1) 60%, var(--dark));
    --accent1-dark-50:  color-mix(in srgb, var(--accent1) 50%, var(--dark));
    --accent1-light-10: color-mix(in srgb, var(--accent1) 90%, var(--light));
    --accent1-light-20: color-mix(in srgb, var(--accent1) 80%, var(--light));
    --accent1-light-30: color-mix(in srgb, var(--accent1) 70%, var(--light));
    --accent1-light-40: color-mix(in srgb, var(--accent1) 60%, var(--light));
    --accent1-light-50: color-mix(in srgb, var(--accent1) 50%, var(--light));
    --accent1-light-70: color-mix(in srgb, var(--accent1) 30%, var(--light));
    --accent1-light-85: color-mix(in srgb, var(--accent1) 15%, var(--light));

    /* ========================================================================
       DRABINKA accent2 <-> dark/light (cieniowanie/rozjasnianie niebieskiego)
       ======================================================================== */
    --accent2-dark-10:  color-mix(in srgb, var(--accent2) 90%, var(--dark));
    --accent2-dark-20:  color-mix(in srgb, var(--accent2) 80%, var(--dark));
    --accent2-dark-30:  color-mix(in srgb, var(--accent2) 70%, var(--dark));
    --accent2-dark-40:  color-mix(in srgb, var(--accent2) 60%, var(--dark));
    --accent2-dark-50:  color-mix(in srgb, var(--accent2) 50%, var(--dark));
    --accent2-light-10: color-mix(in srgb, var(--accent2) 90%, var(--light));
    --accent2-light-20: color-mix(in srgb, var(--accent2) 80%, var(--light));
    --accent2-light-30: color-mix(in srgb, var(--accent2) 70%, var(--light));
    --accent2-light-40: color-mix(in srgb, var(--accent2) 60%, var(--light));
    --accent2-light-50: color-mix(in srgb, var(--accent2) 50%, var(--light));
    --accent2-light-70: color-mix(in srgb, var(--accent2) 30%, var(--light));
    --accent2-light-85: color-mix(in srgb, var(--accent2) 15%, var(--light));

    /* ========================================================================
       DRABINKA accent3 <-> dark/light (rozowy/magenta)
       ======================================================================== */
    --accent3-dark-10:  color-mix(in srgb, var(--accent3) 90%, var(--dark));
    --accent3-dark-20:  color-mix(in srgb, var(--accent3) 80%, var(--dark));
    --accent3-dark-30:  color-mix(in srgb, var(--accent3) 70%, var(--dark));
    --accent3-dark-40:  color-mix(in srgb, var(--accent3) 60%, var(--dark));
    --accent3-dark-50:  color-mix(in srgb, var(--accent3) 50%, var(--dark));
    --accent3-light-10: color-mix(in srgb, var(--accent3) 90%, var(--light));
    --accent3-light-20: color-mix(in srgb, var(--accent3) 80%, var(--light));
    --accent3-light-30: color-mix(in srgb, var(--accent3) 70%, var(--light));
    --accent3-light-40: color-mix(in srgb, var(--accent3) 60%, var(--light));
    --accent3-light-50: color-mix(in srgb, var(--accent3) 50%, var(--light));
    --accent3-light-70: color-mix(in srgb, var(--accent3) 30%, var(--light));
    --accent3-light-85: color-mix(in srgb, var(--accent3) 15%, var(--light));

    /* ========================================================================
       DRABINKA accent4 <-> dark/light (czerwony)
       ======================================================================== */
    --accent4-dark-10:  color-mix(in srgb, var(--accent4) 90%, var(--dark));
    --accent4-dark-20:  color-mix(in srgb, var(--accent4) 80%, var(--dark));
    --accent4-dark-30:  color-mix(in srgb, var(--accent4) 70%, var(--dark));
    --accent4-dark-40:  color-mix(in srgb, var(--accent4) 60%, var(--dark));
    --accent4-dark-50:  color-mix(in srgb, var(--accent4) 50%, var(--dark));
    --accent4-light-10: color-mix(in srgb, var(--accent4) 90%, var(--light));
    --accent4-light-20: color-mix(in srgb, var(--accent4) 80%, var(--light));
    --accent4-light-30: color-mix(in srgb, var(--accent4) 70%, var(--light));
    --accent4-light-40: color-mix(in srgb, var(--accent4) 60%, var(--light));
    --accent4-light-50: color-mix(in srgb, var(--accent4) 50%, var(--light));
    --accent4-light-70: color-mix(in srgb, var(--accent4) 30%, var(--light));
    --accent4-light-85: color-mix(in srgb, var(--accent4) 15%, var(--light));

    /* ========================================================================
       DRABINKA accent1 <-> accent4 (ciepla rampa gold->red, gradient "ognia")
       ======================================================================== */
    --accent1-accent4-10: color-mix(in srgb, var(--accent1) 90%, var(--accent4));
    --accent1-accent4-20: color-mix(in srgb, var(--accent1) 80%, var(--accent4));
    --accent1-accent4-30: color-mix(in srgb, var(--accent1) 70%, var(--accent4));
    --accent1-accent4-40: color-mix(in srgb, var(--accent1) 60%, var(--accent4));
    --accent1-accent4-50: color-mix(in srgb, var(--accent1) 50%, var(--accent4));
    --accent1-accent4-70: color-mix(in srgb, var(--accent1) 30%, var(--accent4));
    --accent1-accent4-85: color-mix(in srgb, var(--accent1) 15%, var(--accent4));

    /* ========================================================================
       ALPHA - przezroczystosc na 7 base colors (drabinka co 5)
       ======================================================================== */
    --primary-a05: color-mix(in srgb, var(--primary) 5%,  transparent);
    --primary-a10: color-mix(in srgb, var(--primary) 10%, transparent);
    --primary-a15: color-mix(in srgb, var(--primary) 15%, transparent);
    --primary-a20: color-mix(in srgb, var(--primary) 20%, transparent);
    --primary-a25: color-mix(in srgb, var(--primary) 25%, transparent);
    --primary-a30: color-mix(in srgb, var(--primary) 30%, transparent);
    --primary-a40: color-mix(in srgb, var(--primary) 40%, transparent);
    --primary-a50: color-mix(in srgb, var(--primary) 50%, transparent);
    --primary-a60: color-mix(in srgb, var(--primary) 60%, transparent);
    --primary-a70: color-mix(in srgb, var(--primary) 70%, transparent);
    --primary-a80: color-mix(in srgb, var(--primary) 80%, transparent);
    --primary-a90: color-mix(in srgb, var(--primary) 90%, transparent);

    --dark-a05: color-mix(in srgb, var(--dark) 5%,  transparent);
    --dark-a10: color-mix(in srgb, var(--dark) 10%, transparent);
    --dark-a15: color-mix(in srgb, var(--dark) 15%, transparent);
    --dark-a20: color-mix(in srgb, var(--dark) 20%, transparent);
    --dark-a25: color-mix(in srgb, var(--dark) 25%, transparent);
    --dark-a30: color-mix(in srgb, var(--dark) 30%, transparent);
    --dark-a35: color-mix(in srgb, var(--dark) 35%, transparent);
    --dark-a40: color-mix(in srgb, var(--dark) 40%, transparent);
    --dark-a45: color-mix(in srgb, var(--dark) 45%, transparent);
    --dark-a50: color-mix(in srgb, var(--dark) 50%, transparent);
    --dark-a55: color-mix(in srgb, var(--dark) 55%, transparent);
    --dark-a60: color-mix(in srgb, var(--dark) 60%, transparent);
    --dark-a65: color-mix(in srgb, var(--dark) 65%, transparent);
    --dark-a70: color-mix(in srgb, var(--dark) 70%, transparent);
    --dark-a75: color-mix(in srgb, var(--dark) 75%, transparent);
    --dark-a80: color-mix(in srgb, var(--dark) 80%, transparent);
    --dark-a85: color-mix(in srgb, var(--dark) 85%, transparent);
    --dark-a90: color-mix(in srgb, var(--dark) 90%, transparent);

    --light-a05: color-mix(in srgb, var(--light) 5%,  transparent);
    --light-a10: color-mix(in srgb, var(--light) 10%, transparent);
    --light-a15: color-mix(in srgb, var(--light) 15%, transparent);
    --light-a20: color-mix(in srgb, var(--light) 20%, transparent);
    --light-a30: color-mix(in srgb, var(--light) 30%, transparent);
    --light-a40: color-mix(in srgb, var(--light) 40%, transparent);
    --light-a50: color-mix(in srgb, var(--light) 50%, transparent);
    --light-a60: color-mix(in srgb, var(--light) 60%, transparent);
    --light-a70: color-mix(in srgb, var(--light) 70%, transparent);
    --light-a80: color-mix(in srgb, var(--light) 80%, transparent);
    --light-a90: color-mix(in srgb, var(--light) 90%, transparent);
    --light-a95: color-mix(in srgb, var(--light) 95%, transparent);

    --accent1-a10: color-mix(in srgb, var(--accent1) 10%, transparent);
    --accent1-a20: color-mix(in srgb, var(--accent1) 20%, transparent);
    --accent1-a30: color-mix(in srgb, var(--accent1) 30%, transparent);
    --accent1-a50: color-mix(in srgb, var(--accent1) 50%, transparent);
    --accent1-a70: color-mix(in srgb, var(--accent1) 70%, transparent);

    --accent2-a10: color-mix(in srgb, var(--accent2) 10%, transparent);
    --accent2-a20: color-mix(in srgb, var(--accent2) 20%, transparent);
    --accent2-a30: color-mix(in srgb, var(--accent2) 30%, transparent);
    --accent2-a50: color-mix(in srgb, var(--accent2) 50%, transparent);
    --accent2-a70: color-mix(in srgb, var(--accent2) 70%, transparent);

    --accent3-a10: color-mix(in srgb, var(--accent3) 10%, transparent);
    --accent3-a20: color-mix(in srgb, var(--accent3) 20%, transparent);
    --accent3-a30: color-mix(in srgb, var(--accent3) 30%, transparent);
    --accent3-a50: color-mix(in srgb, var(--accent3) 50%, transparent);
    --accent3-a70: color-mix(in srgb, var(--accent3) 70%, transparent);

    --accent4-a10: color-mix(in srgb, var(--accent4) 10%, transparent);
    --accent4-a20: color-mix(in srgb, var(--accent4) 20%, transparent);
    --accent4-a30: color-mix(in srgb, var(--accent4) 30%, transparent);
    --accent4-a50: color-mix(in srgb, var(--accent4) 50%, transparent);
    --accent4-a70: color-mix(in srgb, var(--accent4) 70%, transparent);

    /* ========================================================================
       SEMANTIC ALIASES - readable shortcuts
       ======================================================================== */
    --primary-hover: var(--primary-dark-20);
    --primary-light: var(--primary-light-30);
    --primary-dark:  var(--primary-dark-30);

    /* Srebro - chlodny metalik z delikatnym niebieskim akcentem (accent2).
     * Wzor: bazowy szary (dark-light-25) + 12% accent2 -> srebro nabiera "chlodu"
     * jak realne polerowane srebro (lekko niebieskawy odcien w cieniach).
     * --silver-base = czysty szary (fallback), --silver = z niebieskim akcentem. */
    --silver-base:   color-mix(in srgb, var(--dark) 25%, var(--light));
    --silver:        color-mix(in srgb, var(--silver-base) 50%, var(--accent2));
    --silver-light:  color-mix(in srgb, var(--dark-light-85) 60%, var(--accent2));
    --silver-dark:   color-mix(in srgb, var(--dark-light-45) 50%, var(--accent2));
    --diamond:       var(--accent3);
    --diamond-light: var(--accent3-light-30);

    --success: var(--accent2);
    --warning: var(--accent1);
    --error:   var(--accent4);
    --info:    var(--accent2);

    /* Paper variants (CKE arkusze, gallery backgrounds) - mixy primary/dark z light */
    --paper:       var(--primary-light-85);          /* przelamana biel jak papier maturalny */
    --paper-light: color-mix(in srgb, var(--accent1) 8%, var(--light));  /* lekko cieplejsza */
    --paper-dark:  var(--dark-light-90);             /* prawie czarne tlo galerii */

    /* ========================================================================
       Z-INDEX WARSTWY (UI hierarchy)
       ======================================================================== */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    1100;
    --z-max:      9999;
}


/* ==== frontend/src/assets/main.css ==== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* [3.2] Stylizacja kontenerów KaTeX */
.katex,
.katex .mord,
.katex .mathord,
.katex .mathsymbol,
.katex .mathalpha,
.katex .mathnormal,
.katex .mathit,
.katex .mathbinary,
.katex .mathrelation,
.katex .mathopen,
.katex .mathclose,
.katex .mathpunct {
    font-family: 'Mulish', sans-serif !important;
    /* !important: katex.min.css laduje sie lazy (po tym arkuszu) - shorthand `font:`
       i line-height z KaTeXa nie moga wygrac kolejnoscia kaskady */
    font-size: 1em !important;
    line-height: 1.4 !important;
}

/* [3.3] Force Mulish dla greckich liter i zmiennych w KaTeX */
.katex .mord.mathnormal,
.katex .mord.mathit,
.katex span.mathnormal,
.katex span.mathit {
    font-family: 'Mulish', sans-serif !important;
    font-style: normal;
}

/* [B] Treść zadania – globalnie ciemny kolor  */
.zadanie-tresc {
    color: theme('colors.dark') !important; /* var(--dark) */
}

.btn-primary {
    @apply bg-primary text-light px-4 py-2 rounded shadow hover:opacity-10 transition;
}

.katex {
    display: inline-block;
    /* !important: katex.min.css laduje sie lazy (po tym arkuszu) i ustawia 1.21em -
       bez !important kolejnosc kaskady decydowalaby o rozmiarze formul */
    font-size: 1em !important;
    max-width: 100%;
}

.katex-display {
    display: block;
    text-align: center;
    margin: 1em 0;
    font-size: clamp(1em, 2vw, 1.2em);
    line-height: 1.6;
}


/* ==== frontend/src/assets/design-buttons.css ==== */
/* Summary: Przyciski design systemu (.dsb) - globalne, wspolne dla platform i practice
 * Owner: platform | Since: 2026-07 | Stability: @stable | See: /platform/test/design-system
 *
 * [0] Zrodlo prawdy dla WSZYSTKICH przyciskow w aplikacji.
 *     Wyciete z DesignSystemPanel.vue (<style scoped>), gdzie zyly jako katalog
 *     wizualny niemozliwy do uzycia poza tym jednym komponentem - kazdy nowy widok
 *     musialby je kopiowac. Teraz panel showcase renderuje dokladnie te klasy,
 *     ktorych uzywa reszta aplikacji, wiec katalog nie moze sie rozjechac z rzeczywistoscia.
 *
 * [0.1] Importowane w obu entry pointach (platform/main.js, practice/main.js) -
 *     scholar.css nie nadawal sie na ten plik, bo practice go nie laduje.
 *
 * [0.2] Zasada: ZERO border-left / kolorowego paska. Wyroznik = fill/border/tint.
 *
 * [0.3] Zasada: ZERO cieni i poswiat (box-shadow) na jakimkolwiek wariancie.
 *     Jedyny dozwolony box-shadow to ring :focus-visible - to sygnal dostepnosci,
 *     nie dekoracja. Hover jest minimalistyczny: zmienia sie kolor/tlo/ramka,
 *     nigdy geometria - zadnego translate ani scale, bo skaczacy layout pod
 *     kursorem czyta sie jako blad, nie jako reakcja.
 *
 * Uzycie:
 *   <button class="dsb dsb--solid">Zapisz</button>
 *   <router-link class="dsb dsb--solid dsb--lg">Zacznij za darmo</router-link>
 *   <button class="dsb dsb--outline dsb--sm">Anuluj</button>
 *
 * Skala mocy akcentu (od najcichszej): --soft -> --normal -> --solid.
 * Akcent kolorystyczny doklejany osobno: --blue / --pink / --gold / --danger-fill.
 *   <button class="dsb dsb--normal dsb--blue">Zobacz szczegoly</button>
 */

/* [1] Baza */
.dsb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease, filter 0.18s ease;
}
.dsb:active { transform: translateY(1px) scale(0.99); }
.dsb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-a40);
}
.dsb:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* [2] Solid - pelne wypelnienie (primary domyslnie).
   Bez cienia: wypelnienie samo odcina przycisk od tla, cien tylko dokladal
   glebi, ktorej reszta systemu nie ma. Hover = przyciemnienie, nic wiecej. */
.dsb--solid {
    background: var(--primary);
    color: var(--dark);
}
.dsb--solid:hover:not(:disabled) {
    filter: brightness(0.95);
}
.dsb--blue   { background: var(--accent2); color: var(--light); }
.dsb--pink   { background: var(--accent3); color: var(--light); }
.dsb--gold   { background: var(--accent1); color: var(--dark);  }
.dsb--danger-fill { background: var(--accent4); color: var(--light); }

/* [3] Soft - polprzezroczysty odcien */
.dsb--soft {
    background: var(--primary-a20);
    color: var(--primary-dark-40);
}
.dsb--soft:hover:not(:disabled) { background: var(--primary-a30); }
.dsb--soft-blue { background: var(--accent2-a10); color: var(--accent2); }
.dsb--soft-blue:hover:not(:disabled) { background: var(--accent2-a20); }
.dsb--soft-pink { background: var(--accent3-a10); color: var(--accent3); }
.dsb--soft-pink:hover:not(:disabled) { background: var(--accent3-a20); }
.dsb--soft-gold { background: var(--accent1-a20); color: var(--accent1-dark-30); }
.dsb--soft-gold:hover:not(:disabled) { background: var(--accent1-a30); }
.dsb--soft-red  { background: var(--accent4-a10); color: var(--accent4); }
.dsb--soft-red:hover:not(:disabled) { background: var(--accent4-a20); }

/* [3.5] Normal - warstwa posrednia miedzy --soft (tinta 10-20%) a --solid (100%).
   Tinta akcentu PLUS ramka w tym samym akcencie: dwa sygnaly naraz daja mu wlasna
   tozsamosc, wiec nie myli sie ani z --soft (samo tlo), ani z --outline (sama ramka).

   Roznica wzgledem --outline [4]: outline jest zawsze NEUTRALNY (ramka --dark-a15,
   tekst --dark) i sluzy za "anuluj". Normal niesie KOLOR akcentu, wiec czyta sie
   jako akcja drugorzedna, ale wciaz wazna.

   Akcent nadaje sie doklejajac --blue / --pink / --gold, tak samo jak w --solid.
   Reguly ida PO [2], wiec nadpisuja tlo ustawione tam przez te same klasy. */
.dsb--normal {
    background: var(--primary-a10);
    border-color: var(--primary);
    color: var(--primary-dark-40);
}
.dsb--normal:hover:not(:disabled) { background: var(--primary-a30); }
.dsb--normal.dsb--blue { background: var(--accent2-a10); border-color: var(--accent2); color: var(--accent2); }
.dsb--normal.dsb--blue:hover:not(:disabled) { background: var(--accent2-a20); }
.dsb--normal.dsb--pink { background: var(--accent3-a10); border-color: var(--accent3); color: var(--accent3); }
.dsb--normal.dsb--pink:hover:not(:disabled) { background: var(--accent3-a20); }
.dsb--normal.dsb--gold { background: var(--accent1-a20); border-color: var(--accent1); color: var(--accent1-dark-30); }
.dsb--normal.dsb--gold:hover:not(:disabled) { background: var(--accent1-a30); }
.dsb--normal.dsb--danger-fill { background: var(--accent4-a10); border-color: var(--accent4); color: var(--accent4); }
.dsb--normal.dsb--danger-fill:hover:not(:disabled) { background: var(--accent4-a20); }

/* [4] Outline */
.dsb--outline {
    background: transparent;
    border-color: var(--dark-a15);
    color: var(--dark);
}
.dsb--outline:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-a10);
}

/* [5] Ghost */
.dsb--ghost {
    background: transparent;
    color: var(--dark-a70);
}
.dsb--ghost:hover:not(:disabled) {
    background: var(--dark-a05);
    color: var(--dark);
}

/* [6] Danger (outline-owy wariant ostrzegawczy) */
.dsb--danger {
    background: transparent;
    border-color: var(--accent4-a30);
    color: var(--accent4);
}
.dsb--danger:hover:not(:disabled) {
    background: var(--accent4);
    border-color: var(--accent4);
    color: var(--light);
}

/* [6.1] Plain - biale tlo bez ramki. Stan "nieaktywny" w grupach przelacznikow
   (np. taby), gdzie --ghost/--outline gubia sie na szarym tle sekcji.
   Od tla sekcji odcina go sam kolor karty - bez cienia i bez ramki, ktora
   dokladala druga krawedz i robila z nieaktywnej pozycji cos glosniejszego
   niz aktywna.
   Bez hoveru: w przelaczniku podswietlanie pozycji pod kursorem klamie, ze cos sie
   stanie z ta konkretna, a jedyne co robi klik to przerzucenie stanu na nia. */
.dsb--plain {
    background: var(--card);
    border-color: transparent;
    color: var(--dark);
}

/* [6.2] Glow - biale tlo z radialna poswiata akcentu. Wziete z .bl-new (przycisk
   "Nowa tablica", BoardListView [472]), ale poswiata wysrodkowana (at 50% 50%),
   a nie zepchnieta w lewo jak w oryginale - w przelaczniku symetria czyta sie lepiej.
   Stan "aktywny" obok --plain.
   Nazwa myli: to gradient WEWNATRZ przycisku (wypelnienie tla), nie swiatlo
   rzucane na zewnatrz - zadnego box-shadow tu nie ma i byc nie moze.
   Kolor poswiaty zmienia sie przez --cta-accent, np. style="--cta-accent: var(--accent2)". */
.dsb--glow {
    --cta-accent: var(--primary);
    border-color: transparent;
    color: var(--dark);
    background:
        radial-gradient(110% 140% at 50% 50%,
            color-mix(in srgb, var(--cta-accent) 60%, transparent) 0%,
            color-mix(in srgb, var(--cta-accent) 25%, transparent) 34%,
            transparent 62%),
        var(--card);
    /* .dsb ma border 2px solid transparent (zeby --outline nie zmienial rozmiaru),
       a gradient domyslnie startuje od padding-box i jest rysowany do border-box -
       przez to poswiata bylaby przesunieta, a jej krawedz przebijala przez ramke.
       border-box wyrownuje oba pudelka, wiec gradient wypelnia przycisk rowno. */
    background-origin: border-box;
    background-clip: border-box;
}
/* Bez hoveru, tak samo jak --plain [6.1]: pozycja JUZ jest aktywna, wiec nie ma
   czego zapowiadac. Zostaje sam kursor. */

/* [7] Rozmiary */
.dsb--sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.dsb--lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }

/* [7.1] Brand - duze CTA landingow. Ksztalt wziety z .button na landingach
   korepetycji (backend/public/styles.css:385): duzy radius 20px i gruba krawedz
   4px, ale wypelnione --primary zamiast outline. Ramka w kolorze tla trzyma
   rozmiar bez rysowania obwodki. Wewnatrz aplikacji zostaje --solid.
   Ustawia wlasny padding/radius, wiec NIE laczyc z --sm / --lg. */
.dsb--brand {
    background: var(--primary);
    border: 4px solid var(--primary);
    border-radius: 20px;
    color: var(--dark);
    padding: 21px 36px;
    font-size: 16px;
}
.dsb--brand:hover:not(:disabled) {
    filter: brightness(0.95);
}

/* [7.2] Brand-outline - druga akcja OBOK --brand (np. "Mam już konto" pod "Zacznij
   za darmo" na landingu /zacznij). Geometria 1:1 z --brand (radius, padding, gruba
   krawedz), wiec para czyta sie jako dwie rownorzedne opcje tej samej decyzji;
   hierarchie niesie wylacznie wypelnienie vs obrys. Kolorystyka i hover jak w
   --outline [4]: neutralna ramka, tekst --dark. Tak samo jak --brand NIE laczyc
   z --sm / --lg. */
.dsb--brand-outline {
    background: transparent;
    border: 4px solid var(--dark-a15);
    border-radius: 20px;
    color: var(--dark);
    padding: 21px 36px;
    font-size: 16px;
}
.dsb--brand-outline:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-a10);
}

/* [8] Modyfikatory */
.dsb--block { width: 100%; }
.dsb--icon-only { padding: 9px; }
.dsb--icon-only.dsb--sm { padding: 6px; }
.dsb-ico { width: 17px; height: 17px; flex-shrink: 0; }
.dsb--sm .dsb-ico { width: 15px; height: 15px; }

/* [9] Loading spinner */
.dsb--is-loading { pointer-events: none; }
.dsb-spin {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dsb-spin 0.7s linear infinite;
}
@keyframes dsb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dsb { transition: none; }
    .dsb:active { transform: none; }
    .dsb-spin { animation-duration: 2s; }
}


/* ==== frontend/src/assets/design-cards.css ==== */
/* Summary: Karty design systemu (.dsc) - globalne, wspolne dla platform i practice
 * Owner: platform | Since: 2026-07 | Stability: @stable | See: /platform/test/design-system
 *
 * [0] Zrodlo prawdy dla kart w calej aplikacji. Wyciete z DesignSystemPanel.vue
 *     (<style scoped>), gdzie zyly jako katalog niemozliwy do uzycia poza panelem.
 *     Importowane w obu entry pointach - patrz design-buttons.css [0.1].
 *
 * Warianty: --stat | --feature | --context | --note | --selectable | --trust
 * Modyfikatory tla/krawedzi: --tinted (szare tlo) | --elevated (biel + cien granatowy)
 *                            | --elevated-soft (ten sam cien o polowe slabszy)
 *                            | --bordered (biel + ramka 2px w 25% zlota)
 *                            | --borderless (biel bez ramki, sam ksztalt tla)
 */

/* [0.1] Zasada: ZERO cieni. Karte od tla odcina ramka i kolor tla, nie glebia -
   patrz design-buttons.css [0.3]. Hover zmienia wylacznie kolor ramki/tla,
   nigdy geometrie. */
.dsc {
    background: var(--light);
    /* Ramka przezroczysta, nie zdjeta: warianty ponizej (--note, --selectable, --bordered)
       zapalaja ja samym border-color, a stala szerokosc 1px trzyma te sama geometrie boxa
       niezaleznie od tego, czy krawedz akurat widac. Kolor --dark-a05 odpadl, kiedy karty
       dostaly cien [C.9a]: ledwo widoczna kreska POD cieniem tylko brudzila styk z tlem. */
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 20px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.dsc-title { font-size: 15px; font-weight: 800; color: var(--dark); margin: 0; }
.dsc-body { font-size: 13px; line-height: 1.5; color: var(--dark-a60); margin: 8px 0 0; }

/* [C.1] Karta z nagłówkiem */
.dsc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dsc-head-text { display: flex; flex-direction: column; gap: 2px; }
.dsc-sub { font-size: 11px; font-weight: 600; color: var(--dark-a40); }
.dsc-bar {
    margin-top: 14px;
    height: 7px;
    background: var(--dark-a05);
    border-radius: 4px;
    overflow: hidden;
}
.dsc-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.dsc-actions { display: flex; gap: 8px; margin-top: 16px; }

/* [C.2] Karta statystyki */
.dsc--stat { display: flex; align-items: center; gap: 14px; }
.dsc-stat-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    display: grid; place-items: center;
}
.dsc-stat-ico svg { width: 22px; height: 22px; }
.dsc-stat-ico--blue { background: var(--accent2-a10); color: var(--accent2); }
.dsc-stat-body { display: flex; flex-direction: column; line-height: 1.1; }
.dsc-stat-value { font-size: 26px; font-weight: 900; color: var(--dark); }
.dsc-stat-label { font-size: 12px; font-weight: 600; color: var(--dark-a50); margin-top: 2px; }
.dsc-stat-delta {
    margin-left: auto;
    font-size: 12px; font-weight: 800;
    padding: 3px 8px; border-radius: 20px;
}
.dsc-stat-delta--up { color: var(--accent2); background: var(--accent2-a10); }

/* [C.3] Karta feature */
.dsc--feature { display: flex; flex-direction: column; }
.dsc-feature-ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    margin-bottom: 12px;
}
.dsc-feature-ico svg { width: 24px; height: 24px; }
.dsc-feature-ico--pink { background: var(--accent3-a10); color: var(--accent3); }
.dsc--feature .dsb { margin-top: 16px; }

/* [C.4] Karta context */
.dsc-ctx-top { display: flex; gap: 6px; margin-bottom: 10px; }
.dsc-tag {
    font-size: 11px; font-weight: 800;
    padding: 3px 9px; border-radius: 6px;
}
.dsc-tag--gold { background: var(--accent1-a20); color: var(--accent1-dark-30); }
.dsc-tag--ghost { background: var(--dark-a05); color: var(--dark-a60); }
.dsc-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dsc-meta-item { font-size: 12px; font-weight: 600; color: var(--dark-a50); }
.dsc-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dark-a30); }

/* [C.5] Karta note (highlight tłem, nie paskiem) */
.dsc--note {
    display: flex;
    gap: 14px;
    background: var(--accent1-light-85);
    border-color: var(--accent1-a20);
}
.dsc-note-ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--accent1-a20);
    color: var(--accent1-dark-30);
}
.dsc-note-ico svg { width: 20px; height: 20px; }

/* [C.6] Karta klikalna / wybieralna */
.dsc--selectable { cursor: pointer; position: relative; outline: none; }
.dsc--selectable:hover,
.dsc--selectable:focus-visible {
    border-color: var(--primary);
}
.dsc-sel-mark {
    position: absolute;
    top: 16px; right: 16px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary);
    color: var(--dark);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.dsc-sel-mark svg { width: 14px; height: 14px; }
.dsc--selectable:hover .dsc-sel-mark,
.dsc--selectable:focus-visible .dsc-sel-mark { opacity: 1; }
.dsc-price {
    display: block;
    margin-top: 14px;
    font-size: 24px; font-weight: 900;
    color: var(--dark);
}
.dsc-price small { font-size: 13px; font-weight: 700; color: var(--dark-a40); margin-left: 2px; }

/* [C.7] Karta trust - pas zaufania na landingu (odpowiedzi na obiekcje goscia).
   Uklad wysrodkowany, ikona w kwadracie obroconym 45 stopni (symbol w srodku
   kontr-obrocony, zeby stal prosto). Biale tlo odcina sie od tla strony, wiec karta
   nie zapala ramki - kolor niosa same ikony.
   Wariant NIE nadpisuje juz 'border' na 'none': geometria boxa zostaje ta sama co w
   .dsc (1px przezroczystej ramki), zeby karta zestawiona w siatce z --context
   czy --elevated-soft nie przesuwala sie o 1px wzgledem sasiadek.
   Kolor nadaje modyfikator na .dsc-trust-ico (--blue / --violet / --red / --gold). */
.dsc--trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 30px 22px 26px;
    background: var(--light);
    border-radius: 18px;
}
/* Kwadrat obrocony o 45 stopni zajmuje wizualnie przekatna (~1.41x boku), ale w
   layoucie nadal liczy sie jego bok - dlatego margines dolny musi pokryc nadwyzke
   (przy 66px przekatna ma ~93px, czyli wystaje ~13px ponad box), inaczej rog wchodzi
   w tytul karty. */
.dsc-trust-ico {
    width: 66px; height: 66px;
    border-radius: 18px;
    transform: rotate(45deg);
    display: grid; place-items: center;
    margin-bottom: 34px;
    flex-shrink: 0;
}
/* Symbol jest kontr-obrocony, wiec stoi prosto WEWNATRZ rombu. Najwiekszy prosty
   kwadrat mieszczacy sie w rombie z boku 66px ma bok ~46px (polowa przekatnej),
   wiec 40px wypelnia go niemal calkowicie, zostawiajac tylko lekki oddech. */
.dsc-trust-ico svg {
    width: 40px; height: 40px;
    transform: rotate(-45deg);
    color: var(--light);
}
.dsc-trust-ico--blue   { background: var(--accent2); }
.dsc-trust-ico--violet { background: var(--accent3); }
.dsc-trust-ico--red    { background: var(--accent4); }
.dsc-trust-ico--gold   { background: var(--accent1); }
.dsc--trust .dsc-title { font-size: 16px; margin-bottom: 10px; }
.dsc--trust .dsc-body { margin: 0; font-size: 13.5px; line-height: 1.6; }
/* [C.8] Modyfikator tla: chlodna szarosc zamiast bieli (--dark-light-95 = 5% granatu
   na bieli). Karta odcina sie od kremowego tla strony, ktore od v0.7.53 jest cieple
   (--primary-light-95), a bialy prostokat gubil na nim krawedz. Osobny modyfikator,
   a nie zmiana samego .dsc, bo wiekszosc kart ma zostac biala.
   Regula stoi na koncu pliku swiadomie: wygrywa z tlami wariantow (--note), gdy
   ktos zestawi je razem. */
.dsc--tinted { background: var(--dark-light-95); }

/* [C.9] Wyjatek od zasady "zero cieni" [0.1]: biala karta na kremowym tle strony
   gubila krawedz, a druga droga (szare tlo [C.8]) nie zawsze jest do przyjecia -
   karta bywa nosnikiem tresci, ktora ma zostac na bieli. Cien jest granatowy,
   nie czarny: strona nie ma ani jednego czystego czarnego piksela, wiec szara
   poswiata czytalaby sie jak brud. Dwie warstwy - szeroka daje uniesienie,
   waska styka karte z tlem, zeby nie plywala. */
.dsc--elevated {
    background: var(--light);
    box-shadow: 0 6px 18px var(--dark-a10), 0 1px 2px var(--dark-a10);
}

/* [C.9a] Ten sam cien o polowe ciszej: mniejszy rozmyw, mniejsze przesuniecie i
   krycie 5% zamiast 10%. Do kart, ktore maja odstawac od tla, ale nie wybijac sie
   ponad sasiadki w tej samej siatce.
   To jest ten sam cien, co --sch-shadow w platform/assets/scholar.css (dashboard,
   .scholar-card): wartosc jest powielona, bo ten plik obsluguje takze practice,
   gdzie scholar.css nie jest ladowany. ZMIENIASZ? Popraw w OBU miejscach. */
.dsc--elevated-soft {
    background: var(--light);
    box-shadow: 0 3px 10px var(--dark-a05), 0 1px 2px var(--dark-a05);
}

/* [C.10] Trzeci sposob odciecia karty od tla (obok [C.8] i [C.9]): sama ramka, tyle
   ze zlota i podwojnej grubosci zamiast ledwo widocznego --dark-a05. Karta zostaje
   biala i plaska, a mimo to nie znika na kremowym tle. --primary-light-75 to 25%
   zlota (drabinka liczy udzial DRUGIEGO koloru, patrz palette.css) - ramka jest
   widoczna, ale nie konkuruje z trescia karty. Grubosc 2px, bo w tym rozcienczeniu
   linia 1px gubi sie obok kremowego tla strony. */
.dsc--bordered {
    background: var(--light);
    border: 2px solid var(--primary-light-75);
}

/* [C.11] Odwrotnosc [C.10]: karta bez zadnej krawedzi, odcina ja od strony sama biel
   na kremowym tle. Wariant najcichszy z czterech - dla kart, ktore maja byc tlem dla
   swojej tresci, a nie osobnym przedmiotem na stronie.
   'border-color: transparent' zamiast 'border: none' zostawia te sama geometrie boxa,
   wiec tresc nie przesuwa sie o 1px wzgledem sasiednich kart w siatce. */
.dsc--borderless {
    background: var(--light);
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .dsc { transition: none; }
}


/* ==== frontend/platform/assets/scholar.css ==== */
/* Summary: Scholar Unified design system - reusable .scholar-* component classes across all platform pages
 * Owner: platform | Since: 2026-03 | Stability: @draft | See: DashboardView.vue V6 */

/* [0] Extended design tokens for Scholar Unified */
:root {
    --sch-space-xs: 4px;
    --sch-space-sm: 8px;
    --sch-space-md: 16px;
    --sch-space-lg: 24px;
    --sch-space-xl: 32px;
    --sch-space-2xl: 48px;

    --sch-text-xs: 10px;
    --sch-text-sm: 12px;
    --sch-text-base: 14px;
    --sch-text-lg: 16px;
    --sch-text-xl: 20px;
    --sch-text-2xl: 28px;

    /* Wartosc rowna .dsc--elevated-soft z src/assets/design-cards.css [C.9a] - dwie
       warstwy zamiast jednej: szeroka unosi karte, waska styka ja z tlem, zeby nie
       plywala. Oba pliki musza tu mowic to samo, bo karta .scholar-card i karta .dsc
       staja obok siebie w tych samych widokach. ZMIENIASZ? Popraw w OBU miejscach
       (design-cards.css nie moze siegnac po ten token: jest wspolny dla platform
       i practice, a scholar.css laduje tylko platforma). */
    --sch-shadow: 0 3px 10px var(--dark-a05), 0 1px 2px var(--dark-a05);
    --sch-shadow-hover: 0 6px 20px color-mix(in srgb, var(--dark) 9%, transparent);
    --sch-shadow-table: 0 2px 12px color-mix(in srgb, var(--dark) 6%, transparent);

    --sch-border: 3px;
    --sch-radius: 14px;

    --sch-pill-all-bg: color-mix(in srgb, var(--primary) 14%, transparent);
    --sch-pill-all-fg: var(--primary-dark);
    --sch-pill-egz8-bg: color-mix(in srgb, var(--accent1) 14%, transparent);
    --sch-pill-egz8-fg: var(--accent1);
    --sch-pill-matp-bg: color-mix(in srgb, var(--accent2) 10%, transparent);
    --sch-pill-matp-fg: var(--accent2);
    --sch-pill-matr-bg: color-mix(in srgb, var(--accent4) 8%, transparent);
    --sch-pill-matr-fg: var(--accent4);
}

/* [1] Page wrapper */
.scholar-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 24px 76px;
}
@media (max-width: 768px) {
    .scholar-page { padding: 24px 16px 72px; }
}
@media (max-width: 640px) {
    .scholar-page { padding: 22px 14px 72px; }
}
@media (max-width: 480px) {
    .scholar-page { padding: 16px 10px 68px; }
}

/* [1.1] Hero banner - white card, stacked: greeting top, stats bottom */
.scholar-hero {
    background: var(--light); color: var(--dark);
    border-radius: var(--sch-radius); padding: 32px 36px 28px;
    margin-bottom: var(--sch-space-xl);
    border-left: var(--sch-border) solid var(--primary);
    box-shadow: var(--sch-shadow);
}
.scholar-hero-top {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 20px;
}
.scholar-hero-greeting {
    font-size: 32px; font-weight: 900;
    letter-spacing: -0.5px; margin: 0; line-height: 1.15; color: var(--dark);
}
.scholar-hero-date {
    font-size: 13px; color: var(--dark); opacity: 0.45;
    font-weight: 500; white-space: nowrap;
}
.scholar-hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.scholar-hero-stat {
    display: flex; align-items: center; gap: 12px;
    background: var(--dark-a05); border-radius: 10px;
    padding: 12px 16px; transition: background 0.2s;
}
.scholar-hero-stat:hover { background: var(--dark-a10); }
.scholar-hero-stat-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, transparent); flex-shrink: 0;
}
.scholar-hero-stat-icon svg { width: 18px; height: 18px; color: var(--primary); opacity: 1; }
.scholar-hero-stat-info { display: flex; flex-direction: column; }
.scholar-hero-stat-val {
    font-size: 20px; font-weight: 900; line-height: 1.2; color: var(--dark);
}
.scholar-hero-stat-lbl {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--dark); opacity: 0.45; margin-top: 1px;
}
@media (max-width: 768px) {
    .scholar-hero { padding: 24px 20px 20px; }
    .scholar-hero-top { flex-direction: column; gap: 4px; margin-bottom: 16px; }
    .scholar-hero-greeting { font-size: 24px; }
    .scholar-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .scholar-hero { padding: 18px 14px 14px; }
    .scholar-hero-greeting { font-size: 20px; }
    .scholar-hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .scholar-hero-stat { padding: 10px 12px; gap: 10px; }
    .scholar-hero-stat-val { font-size: 15px; }
}

/* [1.2] Page header (non-hero variant) */
.scholar-header {
    margin-bottom: var(--sch-space-xl);
}
.scholar-greeting {
    font-size: var(--sch-text-2xl); font-weight: 900; color: var(--dark);
    letter-spacing: -0.5px; margin: 0; line-height: 1.2;
}
.scholar-date {
    font-size: 13px; color: var(--dark-a50); margin-top: 6px; font-weight: 500;
}

/* [2] Stats grid (standalone variant) */
.scholar-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: var(--sch-space-xl);
}
.scholar-stat {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: var(--card); border-radius: var(--sch-radius);
    border-left: var(--sch-border) solid var(--dark-a10);
    box-shadow: var(--sch-shadow); transition: box-shadow var(--t-fast);
}
.scholar-stat:hover { box-shadow: var(--sch-shadow-hover); }
.scholar-stat:nth-child(1) { border-left-color: var(--accent1); }
.scholar-stat:nth-child(2) { border-left-color: var(--accent2); }
.scholar-stat:nth-child(3) { border-left-color: var(--accent3); }
.scholar-stat:nth-child(4) { border-left-color: var(--primary); }
.scholar-stat-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scholar-stat-body { display: flex; flex-direction: column; }
.scholar-stat-value { font-size: 17px; font-weight: 900; color: var(--dark); line-height: 1.2; }
.scholar-stat-label {
    font-size: var(--sch-text-xs); font-weight: 700; color: var(--dark-a50);
    text-transform: uppercase; letter-spacing: 0.4px;
}
@media (max-width: 768px) {
    .scholar-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .scholar-stats { grid-template-columns: 1fr; }
}

/* [3] Sections with roman numeral titles */
.scholar-section {
    margin-bottom: 37px; padding-top: 13px;
}
.scholar-section-title {
    font-size: 11px; font-weight: 800; color: var(--dark-a80);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin: 0 0 14px; padding-left: 12px;
    border-left: var(--sch-border) solid var(--primary); line-height: 1.4;
}
.scholar-section-num {
    display: inline; font-weight: 400; color: var(--primary-dark); margin-right: 8px;
}
.scholar-section--egz8 .scholar-section-title { color: var(--accent1); border-left-color: var(--accent1); }
.scholar-section--matp .scholar-section-title { color: var(--accent2); border-left-color: var(--accent2); }
.scholar-section--matr .scholar-section-title { color: var(--accent4); border-left-color: var(--accent4); }

/* [4] Vertical tiles - category cards with icon on top */
.scholar-tile-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.scholar-tile {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 20px; text-decoration: none; color: var(--dark);
    background: var(--card); border-radius: var(--sch-radius);
    border: 1px solid transparent;
    box-shadow: var(--sch-shadow);
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
    min-height: 120px;
}
.scholar-tile:hover {
    box-shadow: var(--sch-shadow-hover);
    border-color: var(--primary-a30);
}
/* [4.0a] Akcent koloru przeniesiony na ikone (.scholar-tile-icon--*); pasek usuniety. */
.scholar-tile--blue:hover   { border-color: var(--accent2-a30); }
.scholar-tile--purple:hover { border-color: var(--accent3-a30); }
.scholar-tile--red:hover    { border-color: var(--accent4-a30); }
.scholar-tile--amber:hover  { border-color: var(--accent1-a30); }
.scholar-tile--silver:hover { border-color: var(--dark-a20); }

.scholar-tile-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.scholar-tile-icon--gold   { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-dark); }
.scholar-tile-icon--amber  { background: color-mix(in srgb, var(--accent1) 12%, transparent); color: var(--accent1); }
.scholar-tile-icon--blue   { background: color-mix(in srgb, var(--accent2) 10%, transparent); color: var(--accent2); }
.scholar-tile-icon--purple { background: color-mix(in srgb, var(--accent3) 10%, transparent); color: var(--accent3); }
.scholar-tile-icon--red    { background: color-mix(in srgb, var(--accent4) 8%, transparent); color: var(--accent4); }
.scholar-tile-icon--silver { background: var(--dark-a05); color: var(--dark-a50); }

.scholar-tile-name {
    font-size: var(--sch-text-base); font-weight: 800; color: var(--dark);
    margin-bottom: 2px;
}
.scholar-tile-desc {
    font-size: var(--sch-text-sm); color: var(--dark-a50); line-height: 1.3;
}

.scholar-tile-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .scholar-tile-grid { grid-template-columns: repeat(2, 1fr); }
    .scholar-tile { min-height: 100px; padding: 16px; }
}
@media (max-width: 480px) {
    .scholar-tile-grid { grid-template-columns: 1fr; gap: 8px; }
    .scholar-tile { min-height: 80px; padding: 14px; }
    .scholar-tile-icon { width: 34px; height: 34px; margin-bottom: 10px; }
}

/* [5] Horizontal cards - for compact items (exams, generator) */
.scholar-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; background: var(--card);
    border-radius: var(--sch-radius);
    /* Przezroczysta, nie zdjeta - hover nizej zapala ja samym border-color, a stala
       szerokosc trzyma geometrie boxa. Powod jak w design-cards.css [0.1]. */
    border: 1px solid transparent;
    text-decoration: none; color: var(--dark);
    box-shadow: var(--sch-shadow);
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.scholar-card:hover {
    box-shadow: var(--sch-shadow-hover);
    border-color: var(--primary-a30);
}
/* [5.0a] Akcent koloru przeniesiony na ikone (.scholar-card-icon--*); pasek usuniety. */
.scholar-card--blue:hover   { border-color: var(--accent2-a30); }
.scholar-card--purple:hover { border-color: var(--accent3-a30); }
.scholar-card--red:hover    { border-color: var(--accent4-a30); }
.scholar-card--amber:hover  { border-color: var(--accent1-a30); }

.scholar-card-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scholar-card-icon--gold   { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-dark); }
.scholar-card-icon--amber  { background: color-mix(in srgb, var(--accent1) 14%, transparent); color: var(--accent1); }
.scholar-card-icon--blue   { background: color-mix(in srgb, var(--accent2) 10%, transparent); color: var(--accent2); }
.scholar-card-icon--purple { background: color-mix(in srgb, var(--accent3) 10%, transparent); color: var(--accent3); }
.scholar-card-icon--red    { background: color-mix(in srgb, var(--accent4) 8%, transparent); color: var(--accent4); }

.scholar-card-body { flex: 1; min-width: 0; }
.scholar-card-text { font-size: var(--sch-text-base); font-weight: 700; color: var(--dark); }
.scholar-card-desc { font-size: var(--sch-text-sm); color: var(--dark-a50); margin-top: 2px; line-height: 1.4; }

.scholar-chev {
    flex-shrink: 0; color: var(--dark-a20);
    margin-left: auto;
    transition: color var(--t-fast), transform var(--t-fast);
}
.scholar-card:hover .scholar-chev { color: var(--dark-a50); transform: translateX(2px); }

.scholar-card-stack { display: flex; flex-direction: column; gap: 8px; }
.scholar-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 768px) {
    .scholar-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .scholar-card-grid { grid-template-columns: 1fr; }
}

/* [5.1] Generator card - gradient variant */
.scholar-card--gradient {
    background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, var(--card) 50%);
}
.scholar-card--gradient:hover {
    background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 14%, transparent) 0%, var(--card) 50%);
}

/* [6] Pills - inline badges */
.scholar-pill {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 900;
    padding: 5px 10px; border-radius: 6px;
    letter-spacing: 0.3px; flex-shrink: 0; line-height: 1;
}
.scholar-pill--all  { background: var(--sch-pill-all-bg);  color: var(--sch-pill-all-fg); }
.scholar-pill--egz8 { background: var(--sch-pill-egz8-bg); color: var(--sch-pill-egz8-fg); }
.scholar-pill--matp { background: var(--sch-pill-matp-bg); color: var(--sch-pill-matp-fg); }
.scholar-pill--matr { background: var(--sch-pill-matr-bg); color: var(--sch-pill-matr-fg); }

/* [7] Slider filter */
.scholar-slider {
    display: inline-grid; grid-template-columns: repeat(4, 1fr);
    position: relative; background: var(--card);
    border-radius: 12px; padding: 6px;
    margin-bottom: var(--sch-space-lg);
    box-shadow: var(--sch-shadow);
}
.scholar-slider-track {
    position: absolute; inset: 6px; pointer-events: none;
}
.scholar-slider-thumb {
    position: absolute; top: 0; left: 0;
    width: 25%; height: 100%;
    border-radius: 8px;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--dark) 12%, transparent);
}
.scholar-slider-thumb--all    { background: var(--primary); }
.scholar-slider-thumb--egz8   { background: var(--accent1); }
.scholar-slider-thumb--matp   { background: var(--accent2); }
.scholar-slider-thumb--matr   { background: var(--accent4); }
.scholar-slider-thumb--studia { background: var(--accent3); }
.scholar-slider-btn {
    position: relative; z-index: 1;
    padding: 5px 20px; border: none; background: none;
    font-size: 13px; font-weight: 700; font-family: inherit;
    color: var(--dark-a50); cursor: pointer;
    transition: color 0.3s var(--ease);
    white-space: nowrap;
}
.scholar-slider-btn:hover { color: var(--dark); }
.scholar-slider-btn.active { color: var(--dark); }
.scholar-slider-btn--matp.active,
.scholar-slider-btn--matr.active,
.scholar-slider-btn--studia.active { color: var(--light); }
@media (max-width: 480px) {
    .scholar-slider-btn { padding: 6px 8px; font-size: 11px; }
}

/* [7.1] Sections grid - 3 columns when "Wszystkie" filter active */
.scholar-sections-grid--all {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.scholar-sections-grid--all .scholar-section { margin-bottom: 0; }
@media (max-width: 768px) {
    .scholar-sections-grid--all { grid-template-columns: 1fr; }
}

/* [7.2] Tabs - wspolne zakladki widokow (ArkuszeCKEList, FriendsView, StudentReviewView).
   Jedna definicja globalna zamiast scoped kopii per widok - kopie zdazyly sie rozjechac
   (12px vs 14px, rozne kolory aktywnej). Spacing pod zakladkami nadaje widok. */
.scholar-tabs {
    display: flex; gap: 8px;
    margin-bottom: var(--sch-space-lg);
    border-bottom: 2px solid var(--dark-a10);
}
.scholar-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none; border: none;
    padding: 10px 18px;
    font-size: 14px; font-weight: 700;
    font-family: inherit;
    color: var(--dark-a50);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.scholar-tab:hover { color: var(--dark); }
.scholar-tab--active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

/* [8] Tables */
.scholar-table-wrap {
    background: var(--card); border-radius: var(--sch-radius);
    box-shadow: var(--sch-shadow-table);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.scholar-table { width: 100%; border-collapse: collapse; }
.scholar-table th {
    padding: 12px 16px; text-align: left;
    font-size: var(--sch-text-sm); font-weight: 800;
    color: var(--dark); text-transform: uppercase; letter-spacing: 0.4px;
    background: var(--primary);
    border-bottom: 2px solid var(--primary);
}
.scholar-table td {
    padding: 12px 16px; text-align: left;
    font-size: var(--sch-text-base); color: var(--dark);
    border-bottom: 1px solid var(--dark-a05);
}
.scholar-table tbody tr { transition: background var(--t-fast); }
.scholar-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.scholar-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
    .scholar-table { font-size: 12px; }
    .scholar-table th, .scholar-table td { padding: 10px 12px; }
}
@media (max-width: 640px) {
    .scholar-table { font-size: 12px; }
    .scholar-table th, .scholar-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .scholar-table { font-size: 11px; }
    .scholar-table th, .scholar-table td { padding: 6px 8px; }
}

/* [8.1] Table → card-view modifier - stacked rows on mobile, readable via data-label on each <td> */
@media (max-width: 640px) {
    .scholar-table--cards { box-shadow: none; background: transparent; }
    .scholar-table--cards thead { display: none; }
    .scholar-table--cards tbody tr {
        display: block; padding: 12px 14px;
        background: var(--card);
        border: 1px solid var(--dark-a10);
        border-radius: var(--sch-radius);
        box-shadow: var(--sch-shadow);
        margin-bottom: 10px;
    }
    .scholar-table--cards tbody tr:hover { background: var(--card); }
    .scholar-table--cards tbody tr:last-child { margin-bottom: 0; }
    .scholar-table--cards td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 12px; padding: 6px 0; border: none;
        text-align: right;
        font-size: 13px;
    }
    .scholar-table--cards td::before {
        content: attr(data-label);
        font-weight: 800; color: var(--dark-a50);
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
        text-align: left; flex-shrink: 0;
    }
    .scholar-table--cards td[data-label=""]::before,
    .scholar-table--cards td:not([data-label])::before { display: none; }
}

/* [9] Buttons */
.scholar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 700; font-family: inherit;
    border: none; cursor: pointer; text-decoration: none;
    transition: filter 0.2s var(--ease), transform 0.15s var(--ease);
    line-height: 1;
}
.scholar-btn:hover { filter: brightness(0.92); }
.scholar-btn:active { transform: scale(0.98); }
.scholar-btn--primary { background: var(--primary); color: var(--dark); }
.scholar-btn--outline {
    background: transparent; border: 2px solid var(--primary);
    color: var(--dark); padding: 6px 14px;
}
.scholar-btn--outline:hover { background: var(--primary); filter: none; }
.scholar-btn--sm { padding: 5px 10px; font-size: 12px; }
.scholar-btn--outline.scholar-btn--sm { padding: 3px 8px; }

/* [10] Breadcrumb */
.scholar-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--sch-text-sm); font-weight: 600;
    color: var(--dark-a50); margin-bottom: var(--sch-space-lg);
    padding-left: 12px; border-left: var(--sch-border) solid var(--dark-a10);
}
.scholar-breadcrumb a {
    color: var(--dark-a50); text-decoration: none;
    transition: color var(--t-fast);
}
.scholar-breadcrumb a:hover { color: var(--primary-dark); }
.scholar-breadcrumb-sep { color: var(--dark-a20); font-size: 10px; }
.scholar-breadcrumb-current { color: var(--dark-a80); font-weight: 700; }

/* [utility] Blur content overlay - paired with absolute-positioned .login-overlay (guest state) */
.mtz-blur {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

/* [utility] Text ellipsis - 1-liniowy skrót długiego tekstu (emaile, ścieżki, tytuły) */
.scholar-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}