/* ==========================================================================
   Egzamin8klasa — neonowy skin landingu dla wszystkich podstron.
   Ładowany na każdej stronie PO magic.css, a PRZED magic-home.css /
   gaming-home.css (strona główna ma własne, bardziej szczegółowe reguły).
   Tokeny identyczne z gaming-home.css i game-gaming.css: ciemny baseline,
   mint/cyjan jako kolor akcji, złoto dla logowania i nagród, róż na akcenty.
   Tylko kolory / fonty / ramki / cienie — bez zmian layoutu.
   ========================================================================== */

/* --- Tokeny ---------------------------------------------------------------- */
:root{
  --bg:#06070d;
  --bg-2:#0a0c16;
  --panel:#0d1020;
  --panel-2:#131736;
  --ink:#eef1ff;
  --muted:#97a1c6;
  --muted-2:#6f7aa3;
  --primary:#7c5cff;
  --primary-2:#9d85ff;
  --accent:#ffd23f;
  --accent-2:#ffe28a;
  --success:#25f4c8;
  --pop:#ff2e88;
  --pop-2:#ff6fb0;
  --mint:#25f4c8;
  --gold:#ffd23f;
  --purple:#b04dff;
  --lavender:#b07cff;
  --line:rgba(126,150,255,.18);
  --line-strong:rgba(126,150,255,.4);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --glow-cyan:0 0 24px rgba(37,244,200,.35);
  --glow-violet:0 0 24px rgba(124,92,255,.35);
  --font-h:'Chakra Petch','Manrope',system-ui,sans-serif;
  --gh-clip:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --gh-card:
    linear-gradient(90deg,var(--primary),var(--mint)) top/100% 2px no-repeat,
    linear-gradient(165deg,#0e1226,#080a15);
}

body.magic-theme{
  background:
    radial-gradient(ellipse 80% 50% at 88% -10%, rgba(124,92,255,.13), transparent 62%),
    radial-gradient(ellipse 55% 40% at 8% 32%, rgba(37,244,200,.07), transparent 60%),
    var(--bg);
  color:var(--ink);
}
body.magic-theme ::selection{background:#25f4c8;color:#04060d}

/* Pływające widżety (Tycik, Niko, wybór klasy) są ukryte na landingu i w grze —
   tak samo na podstronach, żeby wszędzie był ten sam, czysty ekran. */
.tycik-widget,.niko-widget,.classpicker-widget,.exam-picker-widget{display:none!important}

/* --- Nawigacja i footer ---------------------------------------------------- */
body.magic-theme header.nav,body.magic-theme header.nav.scrolled{
  background:rgba(6,7,13,.92);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(37,244,200,.08),0 10px 40px rgba(0,0,0,.4);
}
body.magic-theme .nav-links a{
  font-family:var(--font-h);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;color:var(--muted);
}
body.magic-theme .nav-links a:hover{color:var(--mint);text-shadow:0 0 14px rgba(37,244,200,.6)}
body.magic-theme .student-login-link{
  font-family:var(--font-h);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px;
  color:var(--gold);border:1px solid rgba(255,210,63,.45);border-radius:0;padding:9px 14px;
  clip-path:var(--gh-clip);background:rgba(255,210,63,.07);
}
body.magic-theme .student-login-link:hover{background:rgba(255,210,63,.16);box-shadow:0 0 18px rgba(255,210,63,.25)}
body.magic-theme .nav-toggle{color:var(--mint);border:1px solid var(--line-strong)}
body.magic-theme .mobile-menu{background:#090b16}
body.magic-theme .mobile-menu a{border-bottom:1px solid var(--line);color:var(--muted)}
body.magic-theme footer{
  background:#05060b;border-top:1px solid var(--line-strong);
  position:relative;
}
body.magic-theme footer::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#25f4c8 30%,#7c5cff 70%,transparent);
}
body.magic-theme .foot-col h5{color:var(--mint);font-family:var(--font-h);letter-spacing:.18em}
body.magic-theme .foot-col a:hover{color:var(--mint)}

/* --- Typografia ------------------------------------------------------------ */
main h1,main h2,main h3{font-family:var(--font-h);font-weight:700;letter-spacing:-.01em}
main h1 em,main h2 em,.hero .grad,.sec-head .grad{
  font-style:normal;
  background:linear-gradient(92deg,#25f4c8 10%,#7c5cff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px rgba(37,244,200,.3);
}
/* Eyebrow jak na landingu: [ TEKST ] zamiast pigułki z kropką. */
main .eyebrow{
  font-family:var(--font-h);font-size:11px;font-weight:600;letter-spacing:.24em;
  color:var(--mint);background:none;border:0;border-radius:0;padding:0;box-shadow:none;
}
main .eyebrow::before{
  content:'[';display:inline!important;color:var(--pop);
  background:none;width:auto;height:auto;border-radius:0;margin:0 8px 0 0;box-shadow:none;
}
main .eyebrow::after{content:']';color:var(--pop);margin-left:8px}
main .eyebrow .dot{display:none}
.prose a,main .back-link{color:var(--mint)}
.prose h2{font-family:var(--font-h)}

/* --- Hero i sekcje --------------------------------------------------------- */
.hero,.subhead{
  background:
    radial-gradient(ellipse at 90% 0%,rgba(124,92,255,.16),transparent 62%),
    radial-gradient(ellipse at 0% 100%,rgba(37,244,200,.06),transparent 55%);
  border-bottom:1px solid var(--line);
}
.blk.alt{background:#080a14}

/* --- Przyciski: ścięte rogi, neon ---------------------------------------- */
main .btn,.cookie-banner .btn,.modal .btn{
  border-radius:0;clip-path:var(--gh-clip);
  font-family:var(--font-h);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  /* wersaliki są szersze — przycisk musi się zawinąć, zamiast wyjść poza ekran */
  max-width:100%;white-space:normal;text-align:center;
}
@media(max-width:600px){main .btn,.cookie-banner .btn,.modal .btn{letter-spacing:.06em}}
main .btn-primary,.cookie-banner .btn-primary,.modal .btn-primary{
  color:#04060d;border:0;
  background:linear-gradient(92deg,#25f4c8,#4dd7ff 55%,#7c5cff);
  box-shadow:0 0 0 1px rgba(37,244,200,.5),var(--glow-cyan);
}
main .btn-primary:hover,.cookie-banner .btn-primary:hover,.modal .btn-primary:hover{
  color:#04060d;transform:translateY(-2px);
  background:linear-gradient(92deg,#5cffdb,#6ee0ff 55%,#9d85ff);
  box-shadow:0 0 0 1px rgba(37,244,200,.8),0 0 42px rgba(37,244,200,.55);
}
main .btn-ghost,.cookie-banner .btn-ghost,.modal .btn-ghost{
  background:rgba(13,16,32,.7);color:var(--ink);border:1px solid var(--line-strong);
}
main .btn-ghost:hover,.cookie-banner .btn-ghost:hover,.modal .btn-ghost:hover{
  border-color:rgba(37,244,200,.55);color:var(--mint);box-shadow:0 0 16px rgba(37,244,200,.18);
}
main .btn-accent{
  color:var(--gold);border:1px solid rgba(255,210,63,.55);
  background:rgba(255,210,63,.07);box-shadow:inset 0 0 22px rgba(255,210,63,.06);
}
main .btn-accent:hover{color:var(--gold);background:rgba(255,210,63,.16);box-shadow:0 0 26px rgba(255,210,63,.3)}

/* --- Karty i panele: ciemny gradient, neonowa linia u góry, ścięte rogi --- */
.price-card,.plan-teaser,.gate-card,.gate-box,.post-card,.arch-card,.kp-card,
.tutor-card,.rev-card,.konto-auth-card,.uczen-card,.uczen-login-form,
.countdown-card,.role-card{
  background:var(--gh-card);
  border:1px solid var(--line-strong);border-radius:0;
  clip-path:var(--gh-clip);
  box-shadow:none;
}
/* Logowanie ucznia: karta dostaje tło, ramkę i ścięte rogi (wyżej), ale nie miała wewnętrznego odstępu —
   etykiety leżały na krawędzi i pod neonową linią. Etykiety jak w formularzu zamówienia: małe, stonowane. */
.uczen-login-form{max-width:420px;padding:30px 28px 26px;gap:8px}
.uczen-login-form>label:not(.form-check){font-size:.84rem;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-top:8px}
.uczen-login-form>label:first-of-type{margin-top:0}
.uczen-login-form>small{font-size:.8rem}
.uczen-login-form>.form-check{margin-top:6px}
.uczen-login-form>.btn{margin-top:10px}
@media(max-width:600px){.uczen-login-form{padding:22px 18px 20px}}
.post-card:hover,.arch-card:hover,.kp-card:hover,.tutor-card:hover{
  border-color:rgba(37,244,200,.55);
  background:
    linear-gradient(90deg,var(--mint),var(--gold)) top/100% 2px no-repeat,
    linear-gradient(165deg,#121735,#0a0d1c);
}
.price-card.featured{border-color:rgba(37,244,200,.6)}
.plan-teaser-badge,.price-card-badge{
  color:var(--mint);background:rgba(37,244,200,.07);border:1px solid rgba(37,244,200,.35);
  border-radius:0;clip-path:var(--gh-clip);
}
.plan-teaser-row{border-color:var(--line);border-radius:0;clip-path:var(--gh-clip);background:rgba(10,12,22,.65)}
.plan-teaser-row:has(input:checked){border-color:rgba(37,244,200,.6);background:rgba(37,244,200,.05)}
.plan-teaser-row input{accent-color:var(--mint)}
.plan-teaser-row-head em,.price-card .amt{color:var(--mint)}
.plan-teaser-row-art{border-radius:0;clip-path:var(--gh-clip)}

/* Zakładki filtrów (porady, korepetytorzy). */
.lib-tab{
  border-radius:0;clip-path:var(--gh-clip);background:rgba(13,16,32,.7);
  font-family:var(--font-h);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;
}
.lib-tab.active{
  background:rgba(37,244,200,.12);color:var(--mint);border-color:rgba(37,244,200,.55);
  box-shadow:0 0 14px rgba(37,244,200,.18);
}

/* Pola formularzy. */
main input:not([type=checkbox]):not([type=radio]):not([type=submit]),main select,main textarea{
  background:var(--bg-2);border-color:var(--line-strong);color:var(--ink);border-radius:0;
}
main input:focus,main select:focus,main textarea:focus{border-color:rgba(37,244,200,.6)}
main input[type=checkbox],main input[type=radio]{accent-color:var(--mint)}

/* FAQ na podstronach — styl terminala jak na landingu. */
main .wrap-narrow>details{
  border:1px solid var(--line);border-radius:0;clip-path:var(--gh-clip);
  background:rgba(10,12,22,.65);padding:16px 20px;margin-top:10px;
}
main .wrap-narrow>details[open]{border-color:rgba(37,244,200,.6);box-shadow:0 0 26px rgba(37,244,200,.12)}
main .wrap-narrow>details>summary{font-family:var(--font-h);font-weight:600;color:var(--ink);cursor:pointer}
main .wrap-narrow>details>summary::marker{color:var(--pop)}
main .wrap-narrow>details p{color:var(--muted)}
main .wrap-narrow>details a{color:var(--mint)}

/* --- Baner cookies i modale ------------------------------------------------ */
.cookie-banner{background:rgba(9,11,22,.96);border:1px solid var(--line-strong);border-radius:0;clip-path:var(--gh-clip)}
.modal{background:#090b16;border:1px solid var(--line-strong);border-radius:0}

/* --- Uzupełnienia z globalnej skórki (dawny gaming-global.css) ------------
   Elementy, których powyższe reguły nie obejmowały: konto w nawigacji,
   przyciski i pola formularzy e8k, karty, zakładki stron przedmiotów,
   odliczanie, dolna nawigacja mobilna. Tylko kolory/fonty/ramki. */
input,textarea,select{color-scheme:dark}
h4,.card h3,.countdown-card,.grade-tab,.wariant-tab{font-family:var(--font-h)}
body.magic-theme .nav-account-link{
  font-family:var(--font-h);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px;
  color:var(--mint);border:1px solid rgba(37,244,200,.45);border-radius:0;padding:9px 14px;
  clip-path:var(--gh-clip);background:rgba(37,244,200,.07);
}
body.magic-theme .nav-account-link:hover{background:rgba(37,244,200,.16);box-shadow:0 0 18px rgba(37,244,200,.25)}
/* e8k.css maluje przyciski formularzy własnym gradientem (.e8k-form button bije .btn). */
.e8k-form button,.e8k-form .button,.e8k-form input[type=submit]{
  background:linear-gradient(92deg,#25f4c8,#4dd7ff 55%,#7c5cff);color:#04060d;border:0;
  border-radius:0;clip-path:var(--gh-clip);box-shadow:0 0 0 1px rgba(37,244,200,.5),var(--glow-cyan);
  font-family:var(--font-h);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.e8k-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.e8k-form textarea,.e8k-form select{
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line-strong);border-radius:0;
}
.e8k-form input:focus,.e8k-form textarea:focus,.e8k-form select:focus{
  border-color:var(--mint);box-shadow:0 0 0 1px rgba(37,244,200,.35),0 0 18px rgba(37,244,200,.18);outline:none;
}
main .card{
  background:var(--gh-card);border:1px solid var(--line-strong);border-radius:0;clip-path:var(--gh-clip);box-shadow:none;
}
main .card h3{color:var(--ink)}
.hero .lead,.hero-stats{color:var(--muted)}
.cd-unit{background:#ffffff08;border:1px solid var(--line);border-radius:0}
.grade-tab,.wariant-tab{border-radius:0;clip-path:var(--gh-clip)}
.grade-tab.active{background:rgba(37,244,200,.12);color:var(--mint);border-color:rgba(37,244,200,.55);box-shadow:0 0 14px rgba(37,244,200,.18)}
.wariant-tab.active{background:rgba(255,210,63,.12);color:var(--gold);border-color:rgba(255,210,63,.55)}
.temat-badge{background:linear-gradient(92deg,#25f4c8,#4dd7ff);color:#04060d}
.bottom-nav{background:#080a12f5;border-top:1px solid var(--line-strong)}
.bottom-nav-item.active{color:var(--mint);text-shadow:0 0 14px rgba(37,244,200,.5)}

/* Stan konta rodzica pozostaje widoczny także na telefonie. */
body.magic-theme .nav-parent-account{display:inline-flex;align-items:center;letter-spacing:.03em}
@media(max-width:600px){body.magic-theme .nav-parent-account{font-size:9px;padding:8px 6px}.shell-parent .logo img{width:140px}}