/* ============================================================
   MIRRORA — system wizualny 3.0 (stonowany)
   Zasady: jeden kolor akcentu, reszta w skali szarości.
   Typografia systemowa w skali obu serwisów. Bez gradientów w UI.
   Mobile first · WCAG AA · prefers-reduced-motion
   ============================================================ */

:root{
  /* --- powierzchnie: biel na chłodnej szarości --- */
  --m-bg:#F7F8FA;--m-bg2:#FFFFFF;--m-s1:#FFFFFF;--m-s2:#F2F3F5;--m-s3:#E9EBEE;
  --m-b1:#E4E6EB;--m-b2:#DADDE1;

  /* --- JEDEN kolor akcentu: głęboki granat. Pozostałe nazwy z dawnej
         palety celowo wskazują na ten sam akcent albo na atrament,
         dzięki czemu cały interfejs schodzi do minimum barw. --- */
  --m-accent:#1B3A6B;--m-accent-h:#132B50;--m-accent-t:#E9EEF7;
  --m-blue:#1B3A6B;--m-teal:#1B3A6B;--m-violet:#1B3A6B;
  --m-orange:#65676B;--m-pink:#65676B;--m-yellow:#8A8D91;
  --m-ice:#F2F3F5;--m-navy:#050505;

  /* --- atrament: trzy poziomy czytelności --- */
  --m-text:#050505;--m-t2:#65676B;--m-t3:#8A8D91;
  --m-ok:#31A24C;--m-err:#FA383E;--m-warn:#C77700;

  /* płaskie „gradienty" — zgodność wsteczna, bez efektu gradientu */
  --m-grad:#1B3A6B;
  --m-grad-warm:#65676B;

  /* --- promienie: karta 10, kontrolka 8, pigułka tylko dla chipów --- */
  --m-radius:10px;--m-radius-s:8px;

  /* --- cień: ledwie obecny, jak w obu serwisach --- */
  --m-shadow:0 1px 2px rgba(0,0,0,.08);
  --m-shadow-lg:0 2px 12px rgba(0,0,0,.12);

  /* --- typografia systemowa: krój dostarcza system operacyjny --- */
  --m-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --m-font-display:var(--m-font);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.mirrora{
  background:var(--m-bg);
  color:var(--m-text);font-family:var(--m-font);font-size:15px;line-height:1.3333;
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
a{color:var(--m-accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;border-radius:4px}
.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}
::selection{background:rgba(27,58,107,.18)}

/* ---------- logo ---------- */
.m-logo{font-weight:700;letter-spacing:-.02em;font-size:21px;color:var(--m-text)}
.m-logo-mark{width:30px;height:30px;flex:0 0 auto}
.m-tagline{font-size:13px;color:var(--m-t2);letter-spacing:0;text-transform:none}

/* ---------- layout ---------- */
.m-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.m-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:8px 16px;min-height:56px;background:var(--m-s1);border-bottom:1px solid var(--m-b1)}
.m-top .sp{flex:1}
.m-main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:16px 16px calc(104px + env(safe-area-inset-bottom))}
@media(min-width:900px){.m-main{padding:24px 20px 40px}}

/* nawigacja: na telefonie pływająca kapsuła nad treścią,
   na desktopie kolumna po lewej. Aktywny element ma pigułkę pod ikoną. */
.m-nav{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:70;display:flex;justify-content:space-between;gap:2px;width:min(360px,calc(100vw - 24px));
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.14);padding:6px}
.m-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:44px;border-radius:999px;color:var(--m-t2);text-decoration:none;font-size:10px;font-weight:500}
.m-nav a:hover{text-decoration:none;color:var(--m-text)}
.m-nav a.on{color:var(--m-text);background:var(--m-s3)}
.m-nav a.on .m-ic{color:var(--m-text)}
.m-nav .m-ic{width:24px;height:24px}
@media(min-width:900px){
  .m-nav{top:57px;bottom:auto;left:0;right:auto;transform:none;flex-direction:column;justify-content:flex-start;
    height:calc(100vh - 57px);width:84px;border:none;border-right:1px solid var(--m-b1);border-radius:0;
    background:var(--m-s1);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;gap:2px;padding:12px 6px}
  .m-nav a{flex:0 0 auto;border-radius:var(--m-radius-s);min-height:56px}
  .m-nav a.on{background:var(--m-accent-t);color:var(--m-accent)}
  .m-nav a.on .m-ic{color:var(--m-accent)}
  .m-main{margin-left:84px;max-width:calc(100% - 84px);padding-left:24px;padding-right:24px}
  @media(min-width:1100px){.m-main{max-width:680px;margin:0 auto}}
}

/* ---------- pasek „relacji" ----------
   Obrączka niesie stan, nie ozdobę: akcent = nowe, szara = odwiedzone.
   Jeden kolor obrączki, zgodnie z resztą palety. */
.m-relations{display:flex;gap:14px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;
  margin-bottom:12px;border-bottom:1px solid var(--m-b1)}
.m-relations::-webkit-scrollbar{display:none}
.m-story{flex:0 0 auto;width:68px;text-align:center;background:none;border:none;padding:0;cursor:pointer;font:inherit}
.m-story .ring{width:62px;height:62px;border-radius:50%;padding:2px;margin:0 auto;
  border:2px solid var(--m-b2);display:flex;align-items:center;justify-content:center;position:relative}
.m-story.new .ring{border-color:var(--m-accent)}
.m-story .ring>*{width:100%;height:100%;border-radius:50%;font-size:19px}
.m-story .ring .m-ava{width:100%;height:100%;border-radius:50%}
.m-story .add{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--m-accent);color:#fff;border:2px solid var(--m-s1);display:flex;align-items:center;justify-content:center}
.m-story .nm{display:block;font-size:12px;color:var(--m-t2);margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-story.on .nm{color:var(--m-text);font-weight:500}

/* ---------- komponenty ---------- */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:var(--m-radius-s);border:none;cursor:pointer;font-weight:600;font-size:15px;color:#fff;
  background:var(--m-accent);transition:background .1s;text-decoration:none;line-height:1}
.m-btn:hover{background:var(--m-accent-h);text-decoration:none}
.m-btn:disabled{opacity:.45;cursor:not-allowed}
.m-btn.sec{background:var(--m-s3);color:var(--m-text);border:none}
.m-btn.sec:hover{background:var(--m-b2)}
.m-btn.ghost{background:transparent;color:var(--m-t2);border:none;min-height:36px;padding:0 10px;font-weight:500}
.m-btn.ghost:hover{background:var(--m-s2);color:var(--m-text)}
/* przycisk konturowy — lekka akcja wtórna towarzysząca treści */
.m-btn.outline{background:transparent;color:var(--m-text);border:1px solid var(--m-b2);border-radius:999px;
  min-height:32px;padding:0 16px;font-size:14px;font-weight:600}
.m-btn.outline:hover{background:var(--m-s2)}
.m-btn.outline.acc{color:var(--m-accent);border-color:var(--m-accent)}
.m-btn.danger{background:transparent;border:1px solid var(--m-err);color:var(--m-err)}
.m-btn.danger:hover{background:rgba(250,56,62,.06)}
.m-btn.sm{min-height:32px;padding:0 12px;font-size:13px}

.m-card{background:var(--m-s1);border:1px solid var(--m-b1);border-radius:var(--m-radius);padding:16px;box-shadow:none}
.m-card h3{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
/* mikro-etykieta: bez wersalików — drobny, szary tekst */
.m-kicker{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--m-t2)}
.m-h1{font-size:clamp(24px,5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.m-h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.m-muted{color:var(--m-t2);font-size:13px}

.m-input,.m-select{width:100%;min-height:44px;background:var(--m-s2);border:1px solid var(--m-b2);
  border-radius:var(--m-radius-s);padding:10px 14px;color:var(--m-text);font-size:15px;font-family:inherit}
.m-input::placeholder{color:var(--m-t3)}
.m-input:focus,.m-select:focus{border-color:var(--m-accent);background:#fff;outline:none;box-shadow:0 0 0 2px rgba(27,58,107,.15)}
.m-label{display:block;font-size:13px;font-weight:600;color:var(--m-t2);margin:14px 0 6px}
.m-err-msg{color:var(--m-err);font-size:13px;margin-top:8px;min-height:18px}
.m-field-err{border-color:var(--m-err)!important}

.m-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--m-b2);background:var(--m-s1);color:var(--m-text);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .1s,border-color .1s;user-select:none}
.m-chip:hover{background:var(--m-s2)}
.m-chip.on{border-color:var(--m-accent);background:var(--m-accent-t);color:var(--m-accent);font-weight:600}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}

/* pigułki: jeden neutralny wariant + akcent. Kolorowe klasy celowo zrównane. */
.m-pill{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:0;
  background:var(--m-s3);color:var(--m-t2)}
.m-pill.blue{background:var(--m-accent-t);color:var(--m-accent)}
.m-pill.violet,.m-pill.teal,.m-pill.orange,.m-pill.pink{background:var(--m-s3);color:var(--m-t2)}

.m-progress{height:4px;border-radius:2px;background:var(--m-s3);overflow:hidden}
.m-progress>i{display:block;height:100%;background:var(--m-accent);border-radius:2px;transition:width .4s ease}

.m-grid{display:grid;gap:12px}
@media(min-width:640px){.m-grid.c2{grid-template-columns:1fr 1fr}.m-grid.c3{grid-template-columns:repeat(3,1fr)}.m-grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.m-grid.c4{grid-template-columns:repeat(4,1fr)}}

/* ---------- karta kolekcjonerska 3.0 ---------- */
.mc-wrap{perspective:1500px;width:min(340px,88vw);margin:0 auto}
.mc{position:relative;width:100%;aspect-ratio:5/7;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.35,.1,.2,1);cursor:pointer}
.mc.flipped{transform:rotateY(180deg)}
.mc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--m-radius);overflow:hidden;
  box-shadow:var(--m-shadow-lg);border:1px solid var(--m-b1)}
.mc-front{display:flex;flex-direction:column;padding:0;color:#fff}
.mc-front .bgc{position:absolute;inset:0;z-index:0}
.mc-front .fg{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:16px 18px}
.mc-back{transform:rotateY(180deg);background:#fff;display:flex;flex-direction:column;padding:0;overflow:hidden}
.mc-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.06em}
.mc-num{background:rgba(255,255,255,.20);border-radius:6px;padding:2px 8px}
.mc-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mc-emblem{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.mc-name{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:12px}
.mc-arch{font-size:12px;font-weight:600;letter-spacing:.04em;background:rgba(0,0,0,.24);border-radius:6px;padding:3px 10px;margin-top:8px}
.mc-body{background:rgba(0,0,0,.24);border-radius:8px;padding:12px 14px;margin-top:10px}
.mc-ints{display:flex;justify-content:center;gap:12px;font-size:13px;font-weight:500;flex-wrap:wrap}
.mc-ints span{display:inline-flex;align-items:center;gap:5px}
.mc-picks{text-align:center;font-size:12px;opacity:.9;margin-top:8px}
.mc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:11px;font-weight:600}
.mc-level{display:inline-flex;align-items:center;gap:5px;letter-spacing:.03em}
.mc-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;margin-top:8px}
.mc-progress>i{display:block;height:100%;background:#fff;border-radius:2px}
.mc-hint{text-align:center;font-size:13px;color:var(--m-t2);margin-top:12px;font-weight:400}
/* połysk: usunięty — kolekcjonerskość niesie kompozycja, nie efekt */

/* awers v3 — biała karta, jak post w feedzie */
.mc-front.v3{background:#fff;color:var(--m-text)}
.mc-front.v3 .fg3{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:14px 14px 12px}
.mc3-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--m-t3)}
.mc3-num{background:var(--m-s2);border-radius:6px;padding:2px 8px;color:var(--m-t2);letter-spacing:0}
.mc3-hero{border-radius:8px;overflow:hidden;aspect-ratio:1.45/1;margin-top:10px;background:var(--m-s2)}
.mc3-hero svg,.mc3-hero img{width:100%;height:100%;display:block}
.mc3-name{font-size:17px;margin-top:12px;color:var(--m-text);font-weight:400;letter-spacing:-.01em}
.mc3-name b{font-weight:600}
.mc3-icons{display:flex;gap:14px;margin-top:9px;color:var(--m-t2);align-items:center}
.mc3-sxm{display:flex;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--m-b1)}
.mc3-sxm .txt{display:flex;flex-direction:column;line-height:1.35;gap:1px}
.mc3-sxm .txt b{font-size:12px;letter-spacing:.04em;color:var(--m-text);font-weight:600}
.mc3-sxm .txt span{font-size:12px;color:var(--m-t2);font-weight:400}
.mc3-sxm .txt .n{color:var(--m-t3)}
.mc3-spot{display:flex;gap:10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--m-b1);color:var(--m-text)}
.mc3-spot .k{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--m-t3)}
.mc3-spot b{font-size:14px;font-weight:600}
.mc3-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:var(--m-t3)}
.mc3-foot .lvl{letter-spacing:.02em}

/* rewers — MIRROR: ta sama biała karta co awers.
   Pusty rewers nie mówi „brak danych" — pokazuje KSZTAŁT tego, co się pojawi,
   dzięki czemu od razu widać, czym karta się wypełni. */
.mc-back{background:#fff;color:var(--m-text)}
.mc-back .fg3{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:14px 14px 12px}
.mcb-mark{display:flex;justify-content:center;margin-top:20px}
.mcb-title{text-align:center;font-size:15px;font-weight:700;letter-spacing:.14em;margin-top:10px}
.mcb-sub{text-align:center;font-size:12px;color:var(--m-t2);margin-top:3px;line-height:1.35;padding:0 6px}
.mcb-list{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.mcb-row .lab{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:500;margin-bottom:5px}
.mcb-row .lab .n{color:var(--m-t3);font-size:11.5px;font-weight:600}
.mcb-row .trk{height:4px;border-radius:2px;background:var(--m-s3);overflow:hidden}
.mcb-row .trk>i{display:block;height:100%;border-radius:2px;background:var(--m-accent)}
.mcb-list.ghost .trk>i{background:var(--m-b2)}
.mcb-list.ghost .ph{display:inline-block;height:8px;border-radius:4px;background:var(--m-s3)}
.mcb-list.ghost .ph.n{width:14px}
.mcb-need{margin-top:16px;text-align:center;font-size:13px;font-weight:600;color:var(--m-accent)}
.mcb-say{margin-top:8px;padding:0 2px;text-align:center;font-size:12px;color:var(--m-t2);line-height:1.45}
.mcb-note{margin-top:2px;background:var(--m-s2);border-radius:8px;padding:9px 11px;font-size:12px;color:var(--m-t2);line-height:1.4}
.mcb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--m-t2);font-size:13px;gap:10px;padding:0 14px}

/* ---------- mapa / glob ---------- */
.mg-stage{position:relative;border-radius:var(--m-radius);overflow:hidden;
  background:var(--m-s2);border:1px solid var(--m-b1);box-shadow:none}
.mg-stage.borderless{border:none;background:transparent;box-shadow:none;border-radius:0}
.mg-canvas{display:block;width:100%;touch-action:none;cursor:grab}
.mg-canvas:active{cursor:grabbing}
.mg-hud{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:5}
.mg-hud .m-chip{min-height:32px;padding:4px 12px;font-size:13px;background:rgba(255,255,255,.96)}
.mg-legend{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.96);border:1px solid var(--m-b1);
  border-radius:var(--m-radius-s);padding:8px 12px;font-size:12px;color:var(--m-t2);z-index:5;max-width:46%;font-weight:400}
.mg-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--m-b2);box-shadow:var(--m-shadow-lg);
  border-radius:var(--m-radius-s);padding:8px 12px;font-size:13px;z-index:6;display:none;max-width:220px}

/* bottom sheet statystyk */
/* arkusz statystyk: `visibility` obok `transform` — element bywa zagnieżdżony
   w kontenerze z własnym `transform`, co unieważnia `position:fixed`;
   ukrycie widocznością działa niezależnie od bloku zawierającego. */
.m-sheet{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--m-b1);
  border-radius:12px 12px 0 0;box-shadow:0 -2px 16px rgba(0,0,0,.12);transform:translateY(105%);
  visibility:hidden;transition:transform .25s ease,visibility .25s;
  max-height:72vh;overflow-y:auto;padding:10px 18px calc(20px + env(safe-area-inset-bottom))}
.m-sheet.open{transform:translateY(0);visibility:visible}
.m-sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--m-b2);margin:4px auto 14px}
@media(min-width:900px){.m-sheet{left:auto;width:380px;right:24px;bottom:24px;border-radius:var(--m-radius);border:1px solid var(--m-b1);max-height:70vh}}

/* wynik ankiety — paski */
.m-bar{margin:12px 0}
.m-bar .lab{display:flex;justify-content:space-between;font-size:14px;font-weight:400;margin-bottom:6px}
.m-bar .trk{height:6px;border-radius:3px;background:var(--m-s3);overflow:hidden}
.m-bar .trk>i{display:block;height:100%;border-radius:3px;transition:width .5s ease}

/* ---------- onboarding ---------- */
.m-ob-q{max-width:520px;margin:0 auto;text-align:center}
.m-ob-prompt{font-size:clamp(20px,4.6vw,24px);font-weight:700;letter-spacing:-.02em;margin:20px 0 22px}
.m-ob-opts{display:grid;gap:10px}
.m-ob-opts.ab{grid-template-columns:1fr 1fr}
.m-ob-opt{min-height:88px;border-radius:var(--m-radius);border:1px solid var(--m-b2);background:#fff;box-shadow:none;
  color:var(--m-text);font-size:15px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.m-ob-opt .em{line-height:1;color:var(--m-t2)}
.m-ob-opt:hover{border-color:var(--m-t3);background:var(--m-s2)}
.m-ob-opt.picked{border-color:var(--m-accent);border-width:2px;background:var(--m-accent-t)}
.m-scale{display:flex;gap:8px;justify-content:center}
.m-scale button{width:48px;height:48px;border-radius:50%;border:1px solid var(--m-b2);background:#fff;
  color:var(--m-text);font-size:16px;font-weight:600;cursor:pointer}
.m-scale button:hover{background:var(--m-s2)}
.m-scale button.picked{border-color:var(--m-accent);border-width:2px;background:var(--m-accent-t);color:var(--m-accent)}

/* ---------- warstwy profilu ---------- */
.m-layers{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.m-layers::-webkit-scrollbar{display:none}
.m-layer-tab{flex:0 0 auto;padding:8px 14px;border-radius:var(--m-radius-s);border:none;background:var(--m-s3);
  color:var(--m-t2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.m-layer-tab:hover{background:var(--m-b2)}
.m-layer-tab.on{color:var(--m-accent);background:var(--m-accent-t)}
.m-rings{width:132px;height:132px;margin:0 auto}

/* ---------- elementy listy treści ----------
   Rząd akcji pod treścią, czas względny, nagłówek z tytułem. */
.m-actions{display:flex;align-items:center;gap:16px;padding:8px 0 2px;color:var(--m-text)}
.m-actions button{background:none;border:none;padding:4px;cursor:pointer;color:inherit;display:inline-flex;
  align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;border-radius:8px}
.m-actions button:hover{opacity:.6}
.m-actions .sp{flex:1}
.m-time{font-size:12px;color:var(--m-t3);margin-top:4px}
.m-head-c{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.m-head-c h1{flex:1;font-size:20px;font-weight:700;letter-spacing:-.02em}
.m-head-c .sub{font-size:13px;color:var(--m-t2);font-weight:400;margin-top:1px}

/* ---------- listy (wiersz jak w feedzie) ---------- */
.m-match{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--m-b1);border-radius:var(--m-radius);
  background:#fff;box-shadow:none;cursor:pointer;transition:background .1s;flex-wrap:wrap}
.m-match:hover{background:var(--m-s2)}
.m-ava{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:16px;color:#fff}
.m-match .inf{flex:1;min-width:140px}
.m-match .nm{font-weight:600;font-size:15px;letter-spacing:-.01em}
.m-match .why{font-size:13px;color:var(--m-t2);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.m-score{font-size:15px;font-weight:600;color:var(--m-t2);flex:0 0 auto}

/* ---------- cennik ---------- */
.m-price{border:1px solid var(--m-b1);border-radius:var(--m-radius);padding:20px;background:#fff;box-shadow:none;position:relative}
.m-price.hot{border-color:var(--m-accent)}
.m-price .amt{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:6px 0}
.m-price .amt small{font-size:13px;color:var(--m-t2);font-weight:400;letter-spacing:0}
.m-price ul{list-style:none;margin:14px 0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.m-price li{padding-left:24px;position:relative;color:var(--m-t2)}
.m-price li::before{content:'';position:absolute;left:3px;top:5px;width:10px;height:6px;
  border-left:2px solid var(--m-accent);border-bottom:2px solid var(--m-accent);transform:rotate(-45deg)}

/* ---------- stany ---------- */
.m-empty{text-align:center;padding:44px 20px;color:var(--m-t2);font-size:14px}
.m-empty svg{margin-bottom:14px;opacity:.5}
.m-skel{border-radius:var(--m-radius-s);background:linear-gradient(90deg,var(--m-s2) 25%,var(--m-s3) 50%,var(--m-s2) 75%);background-size:200% 100%}
@media(prefers-reduced-motion:no-preference){.m-skel{animation:m-shim 1.4s infinite}}
@keyframes m-shim{to{background-position:-200% 0}}
.m-spin{width:24px;height:24px;border:2px solid var(--m-s3);border-top-color:var(--m-t3);border-radius:50%;margin:30px auto}
@media(prefers-reduced-motion:no-preference){.m-spin{animation:m-rot .8s linear infinite}}
@keyframes m-rot{to{transform:rotate(360deg)}}
.m-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:120;background:#050505;color:#fff;
  border-radius:var(--m-radius-s);padding:12px 18px;font-size:14px;font-weight:400;box-shadow:var(--m-shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:88vw;text-align:center}
.m-toast.show{opacity:1}
.m-toast.err{background:var(--m-err)}
@media(min-width:900px){.m-toast{bottom:28px}}

/* modal */
.m-modal{position:fixed;inset:0;z-index:110;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.m-modal.open{display:flex}
.m-modal .box{background:#fff;border-radius:12px 12px 0 0;width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;padding:20px;box-shadow:var(--m-shadow-lg)}
@media(min-width:640px){.m-modal{align-items:center}.m-modal .box{border-radius:var(--m-radius)}}

/* landing hero */
.m-hero{text-align:center;padding:28px 0 8px;position:relative}
.m-hero .glow{display:none}
.m-hero-globe{width:min(280px,66vw);margin:16px auto 8px}

/* kafle-sceny (obrazkowe wybory A/B) */
.m-ob-opt.scene{padding:0;min-height:0;aspect-ratio:4/5;display:block;position:relative;overflow:hidden;border-width:1px}
.m-ob-opt.scene.picked{border-width:2px}
.m-ob-opt.scene .bg{position:absolute;inset:0}
.m-ob-opt.scene .bg svg{width:100%;height:100%;display:block}
.m-ob-opt.scene .lb{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.68));color:#fff;font-weight:600;font-size:14px;
  letter-spacing:0;text-transform:none;text-align:center;line-height:1.25}
/* wachlarz kart na landingu */
.mc-fan{position:relative;height:206px;margin:22px auto 4px;width:min(320px,82vw)}
.mc-fan .f{position:absolute;top:8px;left:50%;width:124px;aspect-ratio:5/7;border-radius:10px;overflow:hidden;
  box-shadow:var(--m-shadow-lg);border:3px solid #fff}
.mc-fan .f svg{width:100%;height:100%;display:block}

/* animacja wejścia */
@media(prefers-reduced-motion:no-preference){
  .m-fade{animation:m-in .25s ease both}
  @keyframes m-in{from{opacity:0;transform:translateY(6px)}}
}

@media print{.m-nav,.m-top,.m-sheet{display:none!important}}