/* ═══════════════════════════════════════════════════════════════
   WARIANT A — warstwa wizualna
   Układ i nawigacja bez zmian. Zmienia się kolor, głębia, oddech
   i hierarchia. Najniższe ryzyko, najszybszy efekt.
   Nakładka na app.css — nic nie nadpisuje logiki.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Płaskość brała się z jednego odcienia tła i braku cieni.
     Wracają: ciepłe tło, warstwy i prawdziwa głębia kart. */
  --sh-sm:0 1px 2px rgba(20,24,29,.04);
  --sh-md:0 2px 8px -2px rgba(20,24,29,.08), 0 1px 3px rgba(20,24,29,.05);
  --sh-lg:0 20px 48px -20px rgba(20,24,29,.22);
  --r-md:.625rem; --r-lg:.875rem;
  --tint-cieplo:#FDF9F0;
  --tint-akcent:color-mix(in srgb,var(--accent) 7%,transparent);
}
[data-theme="dark"]{
  --sh-md:0 2px 10px -2px rgba(0,0,0,.5);
  --sh-lg:0 24px 56px -24px rgba(0,0,0,.7);
  --tint-cieplo:#141D27;
}

/* tło z delikatnym ociepleniem u góry — koniec z płaską bielą */
.app{background:linear-gradient(to right,var(--deep) 0,var(--deep) var(--nav-w),transparent var(--nav-w));}
.main{background:
  radial-gradient(1200px 400px at 20% 0,var(--tint-akcent) 0,transparent 70%),
  linear-gradient(to bottom,var(--tint-cieplo) 0,var(--bg) 380px);}

/* ODDECH: więcej powietrza wokół treści i wewnątrz kart */
.view{padding:var(--s10) var(--s10) var(--s16);}
.card-h{padding:var(--s6) var(--s6) var(--s4);}
.card-b{padding:var(--s3) var(--s6) var(--s6);}
.stack{gap:var(--s6);}
.grid-2{gap:var(--s6);}
.subj{padding:var(--s5) 0;}

/* GŁĘBIA: karty odrywają się od tła zamiast leżeć płasko */
.card{box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--line) 70%,transparent);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);}
.card:hover{box-shadow:var(--sh-lg);}

/* HIERARCHIA: nagłówek karty wyraźnie mocniejszy od danych w środku */
.card-h h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;}
.card-h .r{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;}

/* kafel „Zacznij od tego" dostaje ciepły gradient zamiast płaskiej czerni */
.now{background:linear-gradient(135deg,var(--deep) 0%,#1B2733 55%,#2A2013 140%);
  box-shadow:var(--sh-lg);padding:var(--s10) var(--s8);}
.now h2{font-size:var(--t-2xl);font-weight:500;letter-spacing:-.02em;}
.now .lab{letter-spacing:.16em;}

/* przedmioty: kolorowy pasek pilności zamiast samych liczb */
.subj{position:relative;padding-left:var(--s4);border-radius:var(--r-md);
  transition:background .18s var(--ease);}
.subj::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:var(--line);transition:height .22s var(--ease);}
.subj:hover{background:var(--bg-2);opacity:1;}
.subj:hover::before{height:62%;}
.subj.hot::before{height:62%;background:#C2410C;}

/* liczba dni jako mocny znak, nie drobny tekst */
.subj .dd{font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;}
.subj.hot .dd{color:#C2410C;}

/* etykiety monospace: mniej szare, bardziej celowe */
.lab{color:var(--ink-2);opacity:.85;}

/* przyciski dostają wypukłość */
.btn-p{box-shadow:0 1px 2px rgba(20,24,29,.14);}
.btn-p:hover{box-shadow:0 4px 12px -2px rgba(20,24,29,.24);}

/* pasek górny: mocniejsze rozmycie i cień przy przewijaniu */
.top{background:color-mix(in srgb,var(--bg) 86%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent);}
.top h1{font-size:var(--t-lg);letter-spacing:-.02em;}