/* =====================================================================
   Učiteľský Šuflík – vzhľad „Čierny piatok“
   Načítava sa po system.css a zosit.css: zošit (strana, krúžky, linajky) ostáva, mení sa nálada.
   Čierna, výrazná žltá a výpredajová červená – cenovky so zľavou. Zladené s akciou (App\\Support\\Sale).
   ===================================================================== */
:root {
    --zs-desk: #000000; --zs-page: #0b0b0c; --zs-page-2: #080809;
    --zs-rule: rgba(255,255,255,0.05); --zs-margin: rgba(250,204,21,0.55);
    --zs-glow-1: rgba(250,204,21,0.07); --zs-glow-2: rgba(255,59,92,0.07); --zs-glow-3: rgba(255,255,255,0.02);
    --zs-page-edge: rgba(255,255,255,0.08); --zs-nav: rgba(10,10,11,0.9); --zs-nav-border: rgba(250,204,21,0.25); --zs-footer: rgba(0,0,0,0.96);
    --m-bg: #080809; --m-surface: #141415; --m-surface-2: #1a1a1c; --m-input: #0d0d0e;
    --m-border: rgba(255,255,255,0.1); --m-border-strong: rgba(255,255,255,0.2);
    --color-ink: #0d0d0e; --color-slate-950: #0d0d0e; --color-slate-900: #141415; --color-slate-800: #26262a; --color-slate-700: #36363b;
    --color-slate-600: #55555c; --color-slate-500: #9d9da6; --color-slate-400: #bdbdc4; --color-slate-300: #d9d9de; --color-slate-200: #ebebee; --color-slate-100: #f6f6f7;
    --color-pink: #ff4d6d; --color-pink-dark: #ff2e55; --color-pencil: #facc15; --color-mint: #A9E8A1; --color-mint-dark: #95d68d;
    --su-pink: #ff4d6d; --su-pencil: #facc15; --su-pink-solid: #e11d48; --su-pink-solid-hover: #be123c;
}
[data-theme="light"] {
    --zs-desk: #e5e5e5; --zs-page: #ffffff; --zs-page-2: #f7f7f7;
    --zs-rule: rgba(0,0,0,0.08); --zs-margin: rgba(202,138,4,0.5);
    --zs-glow-1: rgba(250,204,21,0.08); --zs-glow-2: rgba(225,29,72,0.04); --zs-glow-3: transparent;
    --zs-page-edge: rgba(20, 10, 20, 0.09); --zs-nav: rgba(255,255,255,0.94); --zs-nav-border: rgba(20, 10, 20, 0.1); --zs-footer: #f2f2f2;
    --m-bg: #f7f7f7; --m-surface: #ffffff; --m-surface-2: #fafafa; --m-input: #fafafa;
    --m-border: rgba(30, 15, 30, 0.11); --m-border-strong: rgba(30, 15, 30, 0.19);
    --color-white: #0a0a0a; --color-ink: #ffffff; --color-slate-950: #f6f3f2; --color-slate-900: #ffffff; --color-slate-800: #ece5e3; --color-slate-700: #ddd3d1;
    --color-slate-600: #a89d9b; --color-slate-500: #5a5a62; --color-slate-400: #46464d; --color-slate-300: #333338; --color-slate-200: #222226; --color-slate-100: #141416; --color-slate-50: #0a0a0a;
    --color-pink: #be123c; --color-pink-dark: #9f1239; --color-pencil: #854d0e; --color-mint: #15703a; --color-mint-dark: #115e30;
    --su-pink: #be123c; --su-pencil: #854d0e; --su-pink-solid: var(--color-pink); --su-pink-solid-hover: var(--color-pink-dark);
}
.text-gradient { background-image: linear-gradient(120deg, #fde047 0%, #facc15 40%, #ff4d6d 100%); }
[data-theme="light"] .text-gradient { background-image: linear-gradient(120deg, #a16207 0%, #be123c 100%); }
.bz-tag { position: absolute; animation: bz-swing 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes bz-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .bz-tag { animation: none; } }