/* ==========================================================================
   FiveHub: desktop
   Styl jak w Duolingo: prosto, przyjaźnie, dużo powietrza. Paleta „grafit i fiolet”: tło #121214, karty #1b1b20,
   pasek boczny #0d0d0f, jeden kolor główny #4820DC (zielony tylko dla „działa / online / gotowe”).
   Zaokrąglona, gruba czcionka (Nunito), przyciski „3D” z grubszą dolną krawędzią, która wciska się
   przy kliknięciu, karty z grubym obramowaniem, ikony 3D (SVG) i animacje Lottie zamiast płaskich ikon.
   Nazwy zmiennych --violet-* zostały dla zgodności z resztą kodu: to kolor główny (fioletowy #4820DC).
   ========================================================================== */

:root {
  --bg: #121214;
  --bg-sunken: #0f0f11;
  --card: #1b1b20;
  --card-hi: #222228;
  --inactive: #222228;
  --inactive-hi: #2a2a31;
  --sidebar: #0d0d0f;

  --glass: var(--card);
  --glass-solid: var(--card);
  --line: #2a2a31;
  --line-hi: #36363f;
  --fill: var(--inactive);
  --fill-hi: var(--inactive-hi);

  --text: #f2f2f5;
  --text-2: #b8b8c4;
  --muted: #84848f;
  --faint: #5c5c66;

  /* kolor główny i jego „krawędź 3D” (ciemniejszy spód przycisków i kart) */
  --accent: #4820dc;
  --accent-hi: #5a33ee;
  --accent-edge: #3114a6;
  --accent-text: #a48cff;
  --violet: var(--accent);
  --violet-hi: var(--accent-hi);
  --violet-text: var(--accent-text);
  --violet-soft: rgba(72, 32, 220, 0.2);
  --violet-line: rgba(124, 92, 255, 0.6);
  --grad: var(--accent);
  --glow: 0 0 #0000;

  /* kolory pomocnicze jak w Duolingo: do ikon 3D, statusów i wyróżnień */
  --green: #00c301;
  --green-soft: rgba(0, 195, 1, 0.13);
  --red: #ff4b4b;
  --red-edge: #c93a3a;
  --red-soft: rgba(255, 75, 75, 0.13);
  --amber: #ffc800;
  --amber-soft: rgba(255, 200, 0, 0.13);
  --blue: #1cb0f6;
  --blue-soft: rgba(28, 176, 246, 0.13);
  --purple: #ce82ff;
  --orange: #ff9600;

  --font: 'Nunito', 'Poppins', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Cascadia Mono', Consolas, monospace;
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --edge: 4px; /* wysokość „krawędzi 3D” przycisków */
  --topbar: 52px;

  --grain: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font: 600 14px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
input, textarea, .selectable, .code, .mono { user-select: text; }
::selection { background: rgba(72, 32, 220, 0.55); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f2f37; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #3d3d47; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.dim { color: var(--text-2); }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row-tight { display: flex; align-items: center; gap: 6px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--violet-text); text-decoration: none; }
b, strong { font-weight: 800; }

/* ikony: Flaticon Uicons Bold Rounded (font, vendor/uicons); znak zajmuje 88% pudełka .i, więc rozmiar ustawia się szerokością i wysokością */
.i { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; container-type: size; }
.i::before { display: block; font-size: 88cqh; line-height: 1; }
.i-lg { width: 20px; height: 20px; }
.i-sm { width: 14px; height: 14px; }

/* ---------- monety: okrągłe ikony i inicjały z „krawędzią 3D” (ciemniejszy dół) */
.coin {
  --c2: var(--accent);
  position: relative; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0;
  background: var(--c2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.22);
}
.coin::after { content: none; }
.coin .i { width: 46%; height: 46%; stroke-width: 2.6; }
.coin-lilac { --c2: var(--purple); }
.coin-dark  { --c2: var(--inactive); color: var(--text-2); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.coin-indigo{ --c2: var(--blue); }
.coin-plum  { --c2: #a560e8; }
.coin-teal  { --c2: var(--accent); }
.coin-amber { --c2: var(--orange); }
.coin-green { --c2: var(--green); }
.coin-sm { width: 30px; height: 30px; font-size: 11px; }
.coin-sm::after { inset: 2px; }
.coin-xs { width: 24px; height: 24px; }
.coin-xs::after { display: none; }
.coin-lg { width: 64px; height: 64px; font-size: 21px; }
.coin-xl { width: 88px; height: 88px; font-size: 28px; }

/* ---------- logo */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.03em; }
.brand .coin { width: 30px; height: 30px; }
.brand .coin svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* logo jak Duolingo: sylwetka smoka i napis w jednym kolorze; po zalogowaniu smok w logo wyskakuje (.hello) */
.fh-logo { display: inline-flex; align-items: center; gap: 0.22em; color: #7d5cff; font: 800 1em/1 var(--font); letter-spacing: -0.02em; white-space: nowrap; }
.fh-logo svg { height: 1.2em; aspect-ratio: 420 / 390; width: auto; fill: currentColor; overflow: visible; margin-bottom: 0.04em; }
.fh-logo.hello svg { animation: logo-hello 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes logo-hello { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
.brand-logo { font-size: 25px; }
.auth-logo { font-size: 30px; }

/* ---------- kontrolki */
/* przyciski „3D” jak w Duolingo: dolna krawędź to cień bez rozmycia, przy kliknięciu przycisk zjeżdża na nią */
.btn {
  --edge-c: var(--line-hi);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border: 2px solid var(--line-hi); border-radius: var(--r);
  background: var(--card); color: var(--text);
  font: 800 14px/1 var(--font); letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 var(--edge) 0 var(--edge-c);
  margin-bottom: var(--edge);
  transition: background 0.12s, color 0.12s, transform 0.08s, box-shadow 0.08s, filter 0.12s;
}
.btn:hover { background: var(--card-hi); }
.btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--edge-c); }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* pola po kliknięciu: tylko fioletowa ramka, bez drugiej obwódki i bez poświaty (podwójna ramka wyglądała źle) */
.input:focus, .input:focus-visible, input:focus, textarea:focus, select:focus { outline: none; }
.btn-primary { --edge-c: var(--accent-edge); background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-soft { --edge-c: rgba(72, 32, 220, 0.35); background: var(--violet-soft); border-color: rgba(72, 32, 220, 0.35); color: var(--accent-text); }
.btn-soft:hover { background: rgba(72, 32, 220, 0.22); }
.btn-ghost { --edge-c: transparent; background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; margin-bottom: 0; }
.btn-ghost:hover { background: var(--inactive); color: var(--text); }
.btn-ghost:active { transform: none; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-soft); color: var(--red); }
.btn-sm { --edge: 3px; height: 34px; padding: 0 13px; font-size: 13px; gap: 7px; border-radius: var(--r-sm); }
.btn-icon { width: 42px; padding: 0; }
.btn-sm.btn-icon { width: 34px; }
.btn-wide { width: 100%; height: 50px; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-on-grad { --edge-c: rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.16); border-color: transparent; color: #fff; }
.btn-on-grad:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin: 0 0 7px 4px; }
.field > small { display: block; color: var(--muted); font-size: 11.5px; margin: 6px 0 0 4px; }
.input, textarea.input {
  width: 100%; height: 46px; padding: 0 16px;
  background: var(--card); color: var(--text);
  border: 2px solid var(--line-hi); border-radius: var(--r);
  font: 700 14px var(--font); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
textarea.input { height: auto; min-height: 104px; padding: 13px 16px; resize: vertical; line-height: 1.55; }
.input.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); background: var(--card); }
.input-icon { position: relative; }
.input-icon > .i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon > .input { padding-left: 42px; }
kbd { font: 500 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line-hi); border-radius: 5px; padding: 2px 6px; background: var(--card); }

.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--card); border: 2px solid var(--line-hi); border-radius: var(--r); }
.seg button { height: 32px; padding: 0 14px; border: 2px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: 800 13px var(--font); cursor: pointer; transition: color 0.15s, background 0.15s; display: inline-flex; align-items: center; gap: 7px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--violet-soft); border-color: var(--violet-line); color: var(--accent-text); }
.seg .count { font-size: 11px; opacity: 0.75; }

/* ---------- statusy */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; display: inline-block; }
.dot-on { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 195, 1, 0.2); }
.dot-live { background: var(--green); animation: live 2s ease-out infinite; }
.dot-white { background: #fff; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(0, 195, 1, 0.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(0, 195, 1, 0); } }
.dot-white.dot-live { animation-name: live-white; }
@keyframes live-white { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--fill-hi); color: var(--text-2); white-space: nowrap; }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-violet { background: var(--accent); color: #fff; }
.tag { display: inline-flex; align-items: center; height: 24px; font: 600 11.5px var(--mono); padding: 0 9px; border-radius: 999px; background: var(--fill-hi); color: var(--text-2); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line-hi); font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.chip .coin { width: 20px; height: 20px; }
.chip .coin::after { display: none; }

/* pasek postępu jak w Duolingo: gruby, zaokrąglony, z jaśniejszym paskiem u góry */
.meter { height: 12px; border-radius: 99px; background: var(--inactive); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent) linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) no-repeat 6px 3px / calc(100% - 12px) 3px; transition: width 0.4s cubic-bezier(.3, 1.3, .5, 1); }

/* ---------- okno / layout */
.drag { -webkit-app-region: drag; }
.no-drag, .drag button, .drag input, .drag a { -webkit-app-region: no-drag; }

.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; height: 100vh; }

/* pasek boczny jak w Duolingo: duże ikony 3D, grube napisy, aktywna pozycja w zielonej ramce */
.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  padding: 14px 14px; border-radius: 0;
  background: var(--sidebar);
  border-right: 2px solid var(--card-hi);
}
.sidebar-top { height: 36px; display: flex; align-items: center; padding: 0 6px; flex: none; }
.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.nav button {
  position: relative; display: flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 14px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--text-2);
  font: 800 14px var(--font); letter-spacing: 0.02em; cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav button:hover { background: var(--card-hi); color: var(--text); }
.nav button .i { color: var(--muted); }
.nav button .nav-ic { width: 20px; height: 20px; }
.nav button.active, .nav button.active:hover { background: var(--accent); color: #fff; }
.nav button.active .i { color: #fff; }
.nav .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; color: var(--text-2); background: var(--inactive); font-weight: 800; }
.nav button.active .count { color: var(--accent); background: #fff; }
.nav .count:empty { display: none; }
.nav-sep { height: 2px; background: var(--line); margin: 10px 12px; border-radius: 2px; }

.avatar { width: 36px; height: 36px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* górny pasek tylko nad środkową stroną: po prawej aktualizacja, szukaj i profil (przyciski okna są nad panelem asystenta) */
.topbar { position: relative; z-index: 30; height: var(--topbar); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 28px; }
.topbar-drag { flex: 1; align-self: stretch; }
.conn { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.conn.ok { color: var(--text-2); }
.conn.bad { color: var(--red); }
.conn.bad .dot { background: var(--red); }
.conn-bar { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--red-soft); font-weight: 800; }

/* profil w prawym górnym rogu: pigułka z awatarem i nickiem, kliknięcie otwiera menu konta */
.me { position: relative; }
.me-btn {
  display: flex; align-items: center; gap: 9px; height: 42px; max-width: 230px; padding: 0 12px 0 4px; margin-bottom: 3px;
  border: 2px solid var(--line-hi); border-radius: 999px; background: var(--card); color: var(--text);
  font: 800 14px var(--font); cursor: pointer;
  box-shadow: 0 3px 0 var(--line-hi);
  transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.08s;
}
.me-btn:hover { background: var(--card-hi); }
.me-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-hi); }
.me.open .me-btn { border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-edge); }
.me-btn .chev { color: var(--muted); }
.me.open .me-btn .chev { transform: rotate(180deg); color: var(--accent-text); }
.me .me-av { width: 30px; height: 30px; font-size: 11.5px; }
/* nick i pod nim mały napis z planem (np. „Plan darmowy”) */
.me-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: left; }
.me-plan { font-size: 11px; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.me-nick { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* odznaka weryfikacji przy kupionym planie: wypełniona niebieska rozetka z białym ptaszkiem jak na Discordzie i X (w menu biała z fioletowym) */
.me-verified { flex: none; display: inline-grid; place-items: center; color: var(--blue); }
.me-verified svg { display: block; width: 16px; height: 16px; }
.me-verified .vb { fill: var(--blue); stroke: var(--blue); stroke-width: 1.4; stroke-linejoin: round; }
.me-verified .vc { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-name .me-verified svg { width: 19px; height: 19px; }
.pm-name .me-verified .vb { fill: #fff; stroke: #fff; }
.pm-name .me-verified .vc { stroke: var(--accent); }

/* menu konta: na górze karta w pełnym fiolecie jak boxy Duolingo, niżej pozycje bez ramek jak w nawigacji */
.pm {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; padding: 8px;
  background: var(--card); border: 2px solid var(--line-hi); border-radius: var(--r-xl);
  box-shadow: 0 4px 0 var(--line-hi), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.me:not(.open) .pm { display: none; }
.pm-head {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--accent-hi), var(--accent)); color: #fff;
  box-shadow: 0 4px 0 var(--accent-edge); margin-bottom: 4px;
}
.pm-head .pm-av { width: 50px; height: 50px; font-size: 17px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.pm-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 900; line-height: 1.25; }
.pm-name span { min-width: 0; }
.pm-plan { flex: none; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.pm-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); margin-top: 2px; }
.pm-status { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 10px 4px 6px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-sunken); font-size: 12.5px; color: var(--muted); }
.pm-status b { color: var(--text); font-weight: 800; }
.pm-status.live { color: var(--text-2); }
.pm-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font: 800 14px var(--font); text-align: left; cursor: pointer;
}
.pm-item:hover { background: var(--card-hi); color: var(--text); }
.pm-item .i { width: 18px; height: 18px; color: var(--muted); }
.pm-item:hover .i { color: var(--text); }
.pm-danger:hover, .pm-danger:hover .i { color: var(--red); }
.pm-danger:hover { background: var(--red-soft); }
.pm-sep { height: 2px; margin: 6px 4px; border-radius: 2px; background: var(--line); }
.pm .conn { margin: 8px 12px 4px; font-size: 11.5px; }

/* miejsce na pasek przewijania zarezerwowane zawsze: krótka i długa zakładka mają tę samą szerokość, nic nie przeskakuje */
.page { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 18px 18px 56px 22px; }
.page-inner { max-width: 1160px; margin: 0 auto; }
/* wejście zakładki (playPageEnter w app.js): cała strona naraz wjeżdża lekko od dołu, bez przenikania. fill-mode backwards,
   więc po wejściu nie zostaje transform (nie psuje position: fixed i sticky w środku) */
.page-enter { animation: page-enter 0.28s cubic-bezier(0.25, 0.6, 0.3, 1) backwards; animation-delay: calc(0ms - var(--enter-elapsed, 0ms)); }
@keyframes page-enter { from { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.page-head h1 { font-size: 30px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
.page-head .sub { color: var(--muted); margin-top: 6px; font-size: 15px; font-weight: 700; }

/* ---------- karty: grube obramowanie i duże zaokrąglenie */
.panel { position: relative; background: var(--glass); border: 2px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 4px; }
.panel-head h2 { font-size: 17px; font-weight: 900; }
.panel-head .muted { font-size: 12.5px; }
.panel-body { padding: 16px 22px 22px; }
.panel-pad { padding: 8px 10px 10px; }

/* tabela jako zaokrąglone wiersze */
.table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.table th { text-align: left; font-weight: 800; font-size: 12px; color: var(--muted); padding: 2px 16px 0; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; }
.table td { padding: 12px 16px; vertical-align: middle; background: var(--card-hi); transition: background 0.15s; }
.table td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.table td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.table tbody tr.click { cursor: pointer; }
.table tbody tr.click:hover td { background: var(--inactive); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; color: var(--muted); }
.empty h3 { color: var(--text); font-size: 18px; font-weight: 900; }
.empty .btn { margin-top: 10px; }
.empty .coin { margin-bottom: 10px; }

/* ---------- pulpit */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }

.now {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  min-height: 250px; padding: 30px 340px 30px 34px;
  border-radius: var(--r-xl); background: var(--accent); color: #fff;
}
.now::before { content: none; }
.now::after { content: none; }
.now-coins { position: absolute; right: 60px; top: 50%; width: 240px; height: 130px; transform: translateY(-50%); z-index: -1; }
.now-coins .coin { position: absolute; }
.now-coins .coin:nth-child(1) { left: 0; top: 34px; transform: rotate(-10deg); }
.now-coins .coin:nth-child(2) { left: 66px; top: 4px; z-index: 1; width: 108px; height: 108px; }
.now-coins .coin:nth-child(3) { right: 0; top: 40px; transform: rotate(10deg); }
.now-coins .coin-lg { width: 72px; height: 72px; }
.now-label { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.14); border: 0; font-size: 12px; font-weight: 500; }
.now-server { font-size: 34px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin: 18px 0 8px; word-break: break-word; }
.now-meta { font-size: 13px; opacity: 0.85; }
.now-actions { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.now-cap { display: flex; align-items: center; gap: 14px; width: 250px; height: 46px; padding: 0 18px 0 20px; border-radius: var(--r); background: rgba(0, 40, 0, 0.28); border: 0; }
.now-cap .n { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.now-cap .n span { font-size: 13px; opacity: 0.6; margin-left: 2px; font-weight: 400; }
.now-cap .l { font-size: 11px; opacity: 0.75; margin-bottom: 5px; line-height: 1; }
.now .btn-on-grad { height: 46px; padding: 0 20px; }
.now-cap .meter { background: rgba(255, 255, 255, 0.18); }
.now-cap .meter > span { background: #fff; }
.now.idle { background: var(--glass); border: 1px solid var(--line); color: var(--text); box-shadow: none; grid-template-columns: minmax(0, 1fr); }
.now.idle::after { opacity: 0.05; }
.now.idle .now-label { background: var(--inactive); color: var(--text-2); }
.now.idle .now-server { font-size: 30px; }
.now.idle .now-meta { color: var(--text-2); opacity: 1; max-width: 460px; }

.checklist { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; }
.check-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: var(--r-sm); background: var(--card-hi); }
.check-item .c { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-hi); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.check-item.done { background: transparent; }
.check-item.done .c { border: 0; background: var(--accent); color: #fff; }
.check-item.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.check-item .t { font-weight: 500; }
.check-item .d { font-size: 12px; color: var(--muted); }

.activity { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 12px; }
.act { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); transition: background 0.15s; }
.act:hover { background: rgba(255, 255, 255, 0.03); }
.act-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.act-ico .i { width: 14px; height: 14px; stroke-width: 2; }
.act-ico.ok { background: var(--green-soft); color: var(--green); }
.act-ico.err { background: var(--red-soft); color: var(--red); }
.act-ico.wait { background: var(--amber-soft); color: var(--amber); }
.act .txt { line-height: 1.45; }
.act .txt .mono { color: var(--text); }
.act .sub { font-size: 12px; color: var(--muted); }
.act .time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.server-cell { display: flex; align-items: center; gap: 10px; }
.cap-cell { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.cap-cell .meter { flex: 1; }
.cap-cell span { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-2); min-width: 40px; text-align: right; }

/* ---------- sklep */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .input-icon { width: 320px; }
.toolbar .input { border-radius: var(--r); }
/* wyszukiwarka skryptów (Ctrl+K z każdego miejsca w aplikacji) */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.script-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line);
  cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.script-card:hover { border-color: var(--accent); }
.script-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.script-card .name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.script-card .by { font-size: 12px; color: var(--muted); margin-top: 2px; }
.script-card .desc { color: var(--text-2); font-size: 12.5px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 58px; }
.script-card .foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.script-card .dl { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- szuflada (detale skryptu) */
.drawer-bg { position: fixed; inset: 0; background: rgba(6, 7, 14, 0.55); z-index: 40; }
.drawer {
  position: fixed; top: 10px; right: 10px; bottom: 10px; width: 460px; max-width: calc(100vw - 20px); z-index: 41;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-hi); border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } }
.drawer-hero { position: relative; isolation: isolate; overflow: hidden; padding: 22px 28px 26px; background: var(--accent); }
.drawer-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.drawer-hero .x { position: absolute; top: 14px; right: 14px; }
.drawer-hero h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.035em; margin-top: 18px; }
.drawer-hero .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: rgba(255, 255, 255, 0.82); }
.drawer-hero .tag { background: rgba(255, 255, 255, 0.18); color: #fff; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 28px; }
.drawer-foot { padding: 16px 20px 20px; }
.drawer .desc { color: var(--text-2); margin-bottom: 20px; white-space: pre-wrap; user-select: text; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.035); }
.fact .k { font-size: 11.5px; color: var(--muted); }
.fact .v { margin-top: 2px; font-weight: 500; }
.section-label { font-size: 12px; color: var(--muted); font-weight: 500; margin: 22px 0 10px; }
.on-server { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.035); margin-bottom: 6px; }

/* ---------- serwery */
.split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.server-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.server-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; }
.server-item:hover { background: var(--fill); }
.server-item.active { background: var(--accent); color: #fff; }
.server-item.active .s { color: rgba(255, 255, 255, 0.75); }
.server-item .n { font-weight: 500; }
.server-item .s { font-size: 11.5px; color: var(--muted); }
.server-list .add { margin: 6px 4px 2px; }

.detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.detail-head h1 { font-size: 32px; font-weight: 400; letter-spacing: -0.035em; display: flex; align-items: center; gap: 14px; line-height: 1.15; }
.detail-head .host { color: var(--muted); margin-top: 4px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 16px 18px; min-width: 0; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.stat .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.stat .v { font-size: 22px; font-weight: 400; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.stat .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
.stat .meter { margin-top: 10px; }

.tabs { margin: 26px 0 16px; }

/* nowa zakładka Serwery: przełącznik w poziomie, karta serwera, statystyki układające się same */
/* przełącznik serwerów: karty 3D z avatarem serwera (ikona z listy FiveM albo kafelek), kropka stanu na rogu avatara */
.srv-switch { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 14px; scrollbar-width: thin; }
.srv-chip {
  flex: none; display: flex; align-items: center; gap: 12px; min-width: 190px; max-width: 260px; padding: 9px 16px 9px 10px; text-align: left;
  border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line-hi); color: var(--text); font: inherit; cursor: pointer;
}
.srv-chip:hover { background: var(--card-hi); }
.srv-chip:active { transform: translateY(4px); box-shadow: none; }
.srv-chip.on { background: var(--accent); border-color: var(--accent-hi); box-shadow: 0 4px 0 var(--accent-edge); color: #fff; }
.srv-chip .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.srv-chip .n { font-size: 14px; font-weight: 900; }
.srv-chip .s { font-size: 12px; font-weight: 700; color: var(--muted); }
.srv-chip.on .s { color: rgba(255, 255, 255, 0.78); }
.srv-chip-av { position: relative; flex: none; width: 40px; height: 40px; }
.srv-chip-av > img, .srv-chip-av > .srv-chip-tile { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.srv-chip.on .srv-chip-av > img, .srv-chip.on .srv-chip-av > .srv-chip-tile { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.srv-chip-dot { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); border: 3px solid var(--card); }
.srv-chip-dot.on { background: var(--green); }
.srv-chip.on .srv-chip-dot { border-color: var(--accent); }
.srv-chip.srv-add { min-width: 0; gap: 8px; padding: 0 18px; border-style: dashed; box-shadow: none; color: var(--text-2); font-size: 14px; font-weight: 800; }
.srv-chip.srv-add:hover { color: var(--text); border-color: var(--accent-hi); }
/* karta serwera jak profil na Discordzie: baner z portalu Cfx na górze (bez banera fioletowa karta w kropki), ikona serwera
   nachodzi na baner w obwódce w kolorze karty, pod nią nazwa (900), tagline, opis z listy FiveM i pigułki (stan, język z flagą) */
.srv-hero { position: relative; margin-bottom: 12px; overflow: hidden; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.srv-banner { height: 150px; background: var(--card-hi); }
.srv-banner img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.srv-banner-empty {
  height: 96px;
  background: radial-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2.5px) 0 0 / 22px 22px, linear-gradient(120deg, #5a33ee, #4820dc 55%, #3114a6);
}
.srv-hero-body { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 20px; padding: 0 24px 22px; }
.srv-hero-body > .grow { min-width: 220px; padding-top: 14px; }
.srv-avatar {
  flex: none; display: grid; place-items: center; width: 104px; height: 104px; margin-top: -44px; overflow: hidden;
  border: 5px solid var(--card); border-radius: 26px; background: var(--card-hi); box-shadow: 0 4px 0 var(--line);
}
.srv-avatar img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.srv-avatar .coin-lg { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.srv-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.srv-hero-tags .pill .i-sm { width: 12px; height: 12px; }
.srv-flag { width: 16px; height: 12px; border-radius: 3px; object-fit: cover; }
.srv-hero h1 { margin-top: 8px; font-size: 28px; font-weight: 900; line-height: 1.2; }
.srv-tagline { margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--text-2); overflow-wrap: anywhere; }
.srv-hero .host { margin-top: 4px; max-width: 760px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.srv-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
/* podpowiedź na banerze, gdy czegoś brakuje: biała pigułka w prawym górnym rogu */
.srv-hero-edit {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 99px; background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.srv-hero-edit:hover { background: rgba(0, 0, 0, 0.5); }
.srv-page .stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* ekran startowy (~2,6 s) jak w Duolingo: pełny fiolet, biały smok z logo spada z odbiciem (zgniecenie i rozciągnięcie),
   za nim rozchodzi się biały pierścień, smok macha prawą łapką, „fivehub” wyskakuje litera po literze, na koniec radosny podskok */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(55% 45% at 50% 48%, rgba(255, 255, 255, 0.13), transparent 70%), var(--accent);
  transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.intro.done { opacity: 0; visibility: hidden; }
.ix { display: flex; flex-direction: column; align-items: center; transition: transform 0.45s ease; }
.intro.done .ix { transform: scale(1.08); }
.ix-hop { position: relative; width: 204px; height: 190px; transform-origin: 50% 100%; animation: ix-in 0.7s 0.1s both; }
.ix-mark { position: relative; z-index: 1; display: block; width: 100%; height: 100%; fill: #fff; overflow: visible; transform-origin: 50% 100%; animation: ix-joy 0.5s 1.85s; }
.ix-arm { transform-box: fill-box; transform-origin: 12% 88%; animation: ix-wave 0.9s ease-in-out 0.8s; }
.ix-ring { position: absolute; left: 50%; top: 52%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 10px solid rgba(255, 255, 255, 0.55); opacity: 0; animation: ix-ring 0.7s ease-out 0.42s; }
.ix-word { display: flex; margin-top: 10px; color: #fff; font: 800 88px/1 var(--font); letter-spacing: -0.02em; }
.ix-word i { display: block; font-style: normal; animation: ix-letter 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.55s + var(--i) * 0.06s) both; }
@keyframes ix-in {
  0% { opacity: 0; transform: translateY(-90px) scale(0.4); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  20% { opacity: 1; }
  45% { transform: translateY(0) scale(1.14, 0.86); animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  66% { transform: translateY(-16px) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  84% { transform: translateY(0) scale(1.04, 0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes ix-wave { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(26deg); } 40%, 80% { transform: rotate(-8deg); } }
@keyframes ix-ring { 0% { opacity: 1; transform: scale(0.45); } 100% { opacity: 0; transform: scale(1.5); border-width: 2px; } }
@keyframes ix-letter { from { opacity: 0; transform: translateY(30px) scale(0.4); } }
@keyframes ix-joy {
  0%, 100% { transform: none; }
  25% { transform: scale(1.08, 0.9); }
  55% { transform: translateY(-18px) scale(0.96, 1.05); }
  80% { transform: scale(1.04, 0.96); }
}
@media (prefers-reduced-motion: reduce) { .intro, .intro * { animation: none !important; } }

/* pasek zakładek serwera: ikona, nazwa, licznik; aktywna podkreślona */
/* nawigacja serwera prosta dla każdego: pięć dużych przycisków 3D jak w Duolingo, wybrany w pełnym fiolecie */
.srv-nav { display: flex; gap: 10px; margin: 18px 0 18px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.srv-nav::-webkit-scrollbar { display: none; }
.srv-nav button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 18px;
  border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); color: var(--text-2); box-shadow: 0 4px 0 var(--line-hi);
  font: 800 15px var(--font); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.srv-nav button .i { width: 17px; height: 17px; }
.srv-nav button:hover { background: var(--card-hi); color: var(--text); }
.srv-nav button:active { transform: translateY(4px); box-shadow: none; }
.srv-nav button.on { background: var(--accent); border-color: var(--accent-hi); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.srv-nav .count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--fill-hi); color: var(--text-2); font-size: 12px; font-weight: 900; display: inline-grid; place-items: center; }
.srv-nav button.on .count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.srv-nav .lock { color: var(--amber); }
.srv-nav button.on .lock { color: #ffd84d; }
.srv-panel .panel-head { padding-bottom: 10px; }

/* Przegląd */
/* karta „co z serwerem”: duża ikona w kolorze stanu, jedno zdanie i duże przyciski */
.ov-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 20px 22px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.ov-ctl > .grow { min-width: 240px; }
.ov-ctl h2 { font-size: 22px; font-weight: 900; line-height: 1.2; }
.ov-ctl p { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.ov-ctl-ic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--card-hi); color: var(--muted); box-shadow: 0 4px 0 var(--line-hi); }
.ov-ctl-ic .i { width: 24px; height: 24px; }
.ov-on .ov-ctl-ic { background: var(--green); color: #fff; box-shadow: 0 4px 0 #009a01; }
.ov-wait .ov-ctl-ic { background: #ffc800; color: #5c3b00; box-shadow: 0 4px 0 #d29e00; }
.ov-bad .ov-ctl-ic { background: #ff4b4b; color: #fff; box-shadow: 0 4px 0 #d33131; }
.ov-off .ov-ctl-ic { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.ov-ctl-act { display: flex; flex-wrap: wrap; gap: 10px; }
/* cztery kolorowe karty jak boxy Duolingo (kolory z rekordów: .rec-blue, .rec-violet, .rec-yellow, .rec-orange) */
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ov-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 16px 18px 18px; text-align: left;
  border: 0; border-radius: 20px; background: var(--rc); color: #fff; box-shadow: 0 5px 0 var(--rc-edge); font: inherit; cursor: pointer;
}
.ov-stat:hover { filter: brightness(1.06); }
.ov-stat:active { transform: translateY(5px); box-shadow: none; }
.ov-stat.rec-yellow { color: var(--rc-ink); }
.ov-stat-k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-sub); }
.ov-stat b { font-size: 30px; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ov-stat b span { font-size: 16px; opacity: 0.75; }
.ov-stat small { font-size: 13px; font-weight: 800; color: var(--rc-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 980px) { .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* „Więcej”: duże kafelki z monetą, tytułem i jednym zdaniem; podstrona ma nad sobą przycisk powrotu */
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.more-tile {
  display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 20px; text-align: left; color: var(--text);
  border: 2px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 0 var(--line); font: inherit; cursor: pointer;
}
.more-tile:hover { background: var(--card-hi); }
.more-tile:active { transform: translateY(4px); box-shadow: none; }
.more-tile .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.more-tile b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; }
.more-tile b .lock { color: var(--amber); }
.more-tile small { font-size: 13px; font-weight: 600; color: var(--muted); }
.more-tile > .i:last-child { flex: none; color: var(--muted); }
.srv-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-bottom: 12px; padding: 0 14px 0 10px; border: 2px solid var(--line-hi); border-radius: 99px; background: var(--card); color: var(--text-2); font: 800 13px var(--font); cursor: pointer; }
.srv-back:hover { background: var(--card-hi); color: var(--text); }
.stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.stat .v-sm { font-size: 16px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 18px; align-items: start; }
.ov-grid .ov-card { border-width: 2px; border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.ov-grid .panel-head h2 { font-size: 17px; font-weight: 900; }
.ov-row { font-weight: 700; }
.ov-card { padding-bottom: 10px; }
.ov-card .panel-head { padding: 16px 18px 8px; }
.ov-wide { grid-column: 1 / -1; }
.ov-local { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px 18px; }
.ov-local .grow { min-width: 220px; }
.ov-local .t { font-weight: 500; display: flex; align-items: center; gap: 10px; }
.ov-local .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ov-local .row { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-full { flex-basis: 100%; }
.ov-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.ov-row > .i { color: var(--muted); flex: none; }
.ov-row .k { color: var(--text-2); }
.ov-row .v { margin-left: auto; text-align: right; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-empty { padding: 8px 18px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ov-empty { padding-bottom: 14px; }
.ov-empty p { font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* skrypty jako karty i aktywność jako oś czasu */
.srv-scripts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 6px 14px 8px; }
.ov-card .srv-scripts { grid-template-columns: minmax(0, 1fr); }
/* wszystkie zasoby na serwerze (zakładka Skrypty): wyszukiwarka, filtry jak pigułki i siatka wierszy z kropką stanu */
.res-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 14px 10px; }
.res-search { position: relative; flex: 1 1 220px; min-width: 0; }
.res-search .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--muted); pointer-events: none; }
.res-search .input { width: 100%; height: 40px; padding-left: 34px; border-radius: 999px; }
.res-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.res-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 0 var(--line); transition: background 0.12s, border-color 0.12s; }
.res-chip:hover { background: var(--card-hi); }
.res-chip span { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--bg-sunken); font-size: 11px; }
.res-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-edge); }
.res-chip.on span { background: rgba(255, 255, 255, 0.22); }
.res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; padding: 0 14px 14px; }
.res-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg-sunken); }
.res-row.off { opacity: 0.62; }
.res-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint, #5c5c66); }
.res-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 195, 1, 0.18); }
.res-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--text); }
.res-ver { flex: none; font-size: 11px; color: var(--muted); }
.res-st { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.res-row .pill { flex: none; }
.srv-script { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--fill); border: 1px solid var(--line); min-width: 0; }
.srv-script .grow { min-width: 0; }
.srv-script .n { font-size: 13px; color: var(--text); }
.srv-script .s { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.srv-script .s .pill { height: 20px; font-size: 11px; }
.srv-activity { display: flex; flex-direction: column; padding: 4px 8px 6px; }
.srv-act { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; }
.srv-act + .srv-act { border-top: 1px solid var(--line); border-radius: 0; }
.srv-act .grow { min-width: 0; }
.srv-act .t { font-size: 13px; }
.srv-act .t .mono { color: var(--text); }
.srv-act .d { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.srv-act .when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; white-space: nowrap; }
.act-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fill-hi); color: var(--text-2); }
.act-dot.ok, .st.ok { color: var(--green); }
.act-dot.err, .st.err { color: var(--red); }
.act-dot.run, .st.run { color: var(--violet-text); }
.act-dot.wait, .st.wait { color: var(--amber); }
.act-dot.ok { background: var(--green-soft); }
.act-dot.err { background: var(--red-soft); }
.act-dot.run { background: var(--violet-soft); }
.act-dot.wait { background: var(--amber-soft); }

/* asystent AI: maskotka w prawym dolnym rogu i dymek z czatem nad nią */
.main-body { flex: 1; display: flex; min-height: 0; position: relative; }
.main-body > .page { min-width: 0; }

/* ---------- okno asystenta AI w stylu aplikacji: karta z ramką 2px i krawędzią 3D, fioletowy nagłówek z awatarem smoka,
   stały panel po prawej, dymki czatu (Twoje w pełnym fiolecie z prawej, asystenta na jaśniejszej karcie z krawędzią 3D z lewej, z ogonkiem przy awatarze),
   bez podpowiedzi w pustej rozmowie, pole jak pigułka z okrągłym przyciskiem wysyłania, licznik Free z paskiem */
/* stały panel po prawej stronie okna, na pełną wysokość obok strony (jak nawigacja po lewej), z ramką po lewej */
.assistant { position: relative; width: var(--asst-w, 420px); min-height: 0; display: flex; flex-direction: column; background: var(--card); border-left: 2px solid var(--card-hi); overflow: hidden; }
/* pasek u góry panelu na wysokość górnego paska: pod przyciskami okna, do przeciągania okna */
.asst-bar { flex: none; height: var(--topbar); }
.asst-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* w aplikacji powiadomienia wyskakują obok panelu asystenta, nie na nim (na logowaniu panelu nie ma) */
body:has(#shell:not(.hidden)) #toasts { right: 380px; }
.asst-av { flex: none; display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #1d1040; -webkit-user-drag: none; }
.asst-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); color: #fff; }
.asst-head .grow { min-width: 0; overflow: hidden; }
.asst-head-av { position: relative; flex: none; }
.asst-head-av .asst-av { width: 44px; height: 44px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95); }
.asst-online { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--accent); }
.asst-head .t { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; white-space: nowrap; }
.asst-plan { height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-size: 10.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.asst-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.asst-sub .i { flex: none; width: 12px; height: 12px; }
.asst-sub .asst-srv { margin-top: 0; min-width: 0; }
.asst-srv { max-width: 100%; padding: 0 18px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center; color: #fff; font: 700 12px var(--font); appearance: none; cursor: pointer; text-overflow: ellipsis; }
.asst-srv option { background: var(--card); color: var(--text); }
.asst-hbtn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; transition: background 0.12s; }
.asst-hbtn:hover { background: rgba(255, 255, 255, 0.28); }
.asst-hbtn .i { width: 15px; height: 15px; }

.asst-msgs { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.asst-msg { display: flex; gap: 8px; align-items: flex-end; }
.asst-msg .asst-bubble { position: relative; min-width: 0; max-width: 86%; padding: 10px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.55; user-select: text; overflow-wrap: anywhere; }
.asst-msg.me { justify-content: flex-end; }
.asst-msg.me .asst-bubble { border-radius: 18px 18px 6px 18px; background: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.asst-msg.ai .asst-bubble { flex: 0 1 auto; border-radius: 18px 18px 18px 6px; background: var(--card-hi); border: 2px solid var(--line-hi); color: var(--text-2); box-shadow: 0 3px 0 var(--line-hi); }
.asst-msg.ai .asst-bubble p + p, .asst-msg.ai .asst-bubble p + ul, .asst-msg.ai .asst-bubble p + ol, .asst-msg.ai .asst-bubble ul + p, .asst-msg.ai .asst-bubble ol + p { margin-top: 8px; }
.asst-msg.ai .asst-bubble ul, .asst-msg.ai .asst-bubble ol { padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.asst-msg.ai .asst-bubble b { color: var(--text); font-weight: 900; }
.asst-msg.ai .asst-bubble code { font: 12px var(--mono); padding: 1px 5px; border-radius: 6px; background: var(--bg-sunken); color: var(--accent-text); }
.asst-msg.ai .asst-bubble .code { margin: 8px 0; padding: 12px 14px; padding-right: 96px; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; border-radius: 12px; }
.asst-err { display: flex; align-items: center; gap: 8px; color: var(--red); }
.asst-typing { display: flex; gap: 5px; padding: 6px 2px; }
.asst-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); opacity: 0.4; animation: asst-dot 1s infinite ease-in-out; }
.asst-typing i:nth-child(2) { animation-delay: 0.15s; }
.asst-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes asst-dot { 50% { opacity: 1; transform: translateY(-4px); } }

/* asystent jak Claude: co robi na serwerze (linijki z ptaszkiem), pytanie z opcjami i karta zmienionych plików z diffem */
.asst-msg.ai:has(.asst-changes, .asst-ask) .asst-bubble { flex: 1 1 auto; max-width: 100%; }
.asst-steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.asst-steps:last-child { margin-bottom: 0; }
.asst-step { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.asst-step .i { flex: none; width: 12px; height: 12px; color: var(--green); }
.asst-step .spinner { width: 12px; height: 12px; }
/* kroki między akapitami jak w Claude: w trakcie lista, po skończeniu zwinięty pasek „5 kroków: …” do rozwinięcia */
.asst-msg.ai:has(.asst-tools) .asst-bubble { flex: 1 1 auto; max-width: 100%; }
.asst-tools { margin: 8px 0 10px; }
.asst-tools:first-child { margin-top: 0; }
.asst-tools:last-child { margin-bottom: 0; }
.asst-tools .asst-steps { margin-bottom: 0; }
details.asst-tools > summary { list-style: none; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg-sunken); font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
details.asst-tools > summary::-webkit-details-marker { display: none; }
details.asst-tools > summary:hover { border-color: var(--line-hi); background: var(--card); }
details.asst-tools > summary .i { flex: none; width: 12px; height: 12px; }
details.asst-tools > summary > .i:first-child { color: var(--green); }
details.asst-tools > summary b { flex: none; color: var(--text-2); font-weight: 800; }
details.asst-tools > summary .ellipsis { flex: 1; min-width: 0; }
/* podsumowanie grupy jak w Claude („Przeczytano 5 plików, sprawdzono dokumentację 3 razy”), pierwsza litera wielka */
details.asst-tools > summary .asst-sum { color: var(--text-2); font-weight: 700; }
details.asst-tools > summary .asst-sum::first-letter { text-transform: uppercase; }
details.asst-tools > summary .chev { opacity: 0.7; transition: transform 0.15s; }
details.asst-tools[open] > summary { border-color: var(--line-hi); }
details.asst-tools[open] > summary .chev { transform: rotate(180deg); }
details.asst-tools[open] > .asst-steps { padding: 8px 4px 2px 12px; }

.asst-ask { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.asst-bubble > .asst-ask:first-child { margin-top: 0; }
.asst-ask-q { font-size: 14px; font-weight: 900; color: var(--text); }
.asst-opts { display: flex; flex-direction: column; gap: 6px; }
.asst-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; color: var(--text);
  border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--line-hi); font: inherit; cursor: pointer;
}
.asst-opt:hover:not(:disabled) { border-color: var(--accent-hi); }
.asst-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.asst-opt.on { border-color: var(--accent-hi); background: rgba(72, 32, 220, 0.18); }
.asst-opt:disabled { cursor: default; opacity: 0.55; }
.asst-opt.on:disabled { opacity: 1; }
.asst-opt .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.asst-opt b { font-size: 13.5px; font-weight: 900; color: var(--text); }
.asst-opt small { font-size: 12px; font-weight: 600; color: var(--muted); }
.asst-opt-n, .asst-opt-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line-hi); font-size: 12px; font-weight: 900; color: var(--text-2); }
.asst-opt.on .asst-opt-n, .asst-opt.on .asst-opt-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.asst-opt-box .i { width: 12px; height: 12px; }
.asst-ask-send { align-self: flex-start; }
.asst-ask-hint { font-size: 12px; font-weight: 600; color: var(--muted); }

.asst-changes { margin-top: 10px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); overflow: hidden; }
.asst-ch-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); border-bottom: 2px solid var(--line); }
.asst-ch-head .i { color: var(--accent-text); }
.asst-ch-group + .asst-ch-group { border-top: 2px solid var(--line); }
.asst-ch-gh { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 12px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.asst-ch-gh .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.asst-ch-err { padding: 0 12px 8px; font-size: 12px; font-weight: 700; color: var(--red); }
.asst-file summary { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--text-2); cursor: pointer; list-style: none; }
.asst-file summary::-webkit-details-marker { display: none; }
.asst-file summary:hover { background: var(--card-hi); }
.asst-file .chev { flex: none; width: 11px; height: 11px; color: var(--muted); transition: transform 0.15s; }
.asst-file[open] .chev { transform: rotate(90deg); }
.asst-add { font-weight: 900; color: var(--green); }
.asst-del { font-weight: 900; color: var(--red); }
.asst-diff { max-height: 320px; overflow: auto; background: var(--bg-sunken); font-size: 11px; line-height: 1.55; border-top: 1px solid var(--line); }
.dr { display: flex; min-width: max-content; white-space: pre; }
.dr .dn { flex: none; width: 34px; padding-right: 6px; text-align: right; color: var(--faint); user-select: none; }
.dr .ds { flex: none; width: 14px; text-align: center; user-select: none; }
.dr .dl { padding-right: 12px; }
.dr-add { background: rgba(0, 195, 1, 0.13); color: #b9f5b9; }
.dr-add .ds { color: var(--green); }
.dr-del { background: rgba(255, 75, 75, 0.13); color: #ffc2c2; }
.dr-del .ds { color: var(--red); }
.dr-ctx { color: var(--muted); }
.dr-gap { justify-content: center; padding: 2px 0; color: var(--faint); background: var(--card); }

.asst-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; }
.asst-empty .asst-av-lg { width: 88px; height: 88px; margin-bottom: 6px; box-shadow: 0 0 0 4px var(--accent), 0 5px 0 4px var(--accent-edge); }
.asst-empty h3 { font-size: 18px; font-weight: 900; }
.asst-empty p { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.5; max-width: 300px; }

.asst-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 12px 8px; border-top: 2px solid var(--line); }
.asst-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; padding: 12px 16px; border-radius: 23px; line-height: 1.45; font-size: 13.5px; }
.asst-send { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--accent-edge); transition: background 0.12s; }
.asst-send:hover { background: var(--accent-hi); }
.asst-send:active { transform: translateY(4px); box-shadow: none; }
.asst-send:disabled { opacity: 0.45; cursor: default; }
/* w trakcie odpowiedzi: Zatrzymaj, ciemny przycisk z kwadratem jak w Claude */
.asst-send.stop { background: var(--card-hi); color: var(--text); box-shadow: 0 4px 0 var(--line-hi); }
.asst-send.stop:hover { background: var(--line-hi); }
.asst-send.stop .i { width: 15px; height: 15px; }
.asst-send .i { width: 18px; height: 18px; }
/* wybór modelu asystenta: pigułka pod polem, lista otwiera się w górę; gwiazdki to skuteczność */
.asst-tools { position: relative; padding: 0 12px 10px; }
.asst-model { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 10px 0 11px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 0 var(--line); transition: border-color 0.12s, background 0.12s; }
.asst-model:hover { background: var(--card-hi); }
.asst-model.open { border-color: var(--accent); }
.asst-model .i { width: 12px; height: 12px; flex: none; opacity: 0.7; }
.stars { display: inline-flex; gap: 1px; flex: none; }
.star { position: relative; display: block; width: 12px; height: 12px; }
.star .fi { position: absolute; left: 0; top: 0; display: block; height: 12px; font-size: 12px; line-height: 12px; color: var(--line-hi); overflow: hidden; white-space: nowrap; }
.star .fi.on { color: #ffc800; }
.asst-models { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 2px); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line), 0 18px 40px rgba(0, 0, 0, 0.45); }
.asst-models-head { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px; }
.asst-models-head b { font-size: 13.5px; font-weight: 900; color: var(--text); }
.asst-models-head span { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.asst-mopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 2px solid transparent; border-radius: 14px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background 0.12s; }
.asst-mopt:hover { background: var(--card-hi); }
.asst-mopt.on { border-color: var(--accent); background: rgba(72, 32, 220, 0.14); }
.asst-mopt .grow { min-width: 0; }
.asst-mopt .n { font-size: 13.5px; font-weight: 900; }
.asst-mopt .d { margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.asst-mopt .m { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; font-weight: 800; color: var(--text-2); }
.asst-mopt.locked .n, .asst-mopt.locked .d, .asst-mopt.locked .m { opacity: 0.55; }
.asst-mcheck { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; }
.asst-mcheck .i { width: 11px; height: 11px; }
.asst-mlock { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(72, 32, 220, 0.2); color: var(--accent-text); font-size: 11px; font-weight: 900; }
.asst-mlock .i { width: 11px; height: 11px; }
.asst-foot { padding: 0 16px 12px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.asst-foot a { color: var(--accent-text); font-weight: 800; text-decoration: none; }
.asst-foot a:hover { color: #fff; }
.asst-quota { display: flex; align-items: center; gap: 8px; }
.asst-meter { height: 8px; margin-top: 6px; }
.asst-quota b { color: var(--text); font-weight: 900; }
.asst-week { margin-top: 6px; font-size: 11px; opacity: 0.85; }
.asst-limit { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-size: 11.5px; line-height: 1.4; }
.asst-limit .i { flex: none; }
.asst-form textarea:disabled { opacity: 0.5; }
/* pole wiadomości bez paska przewijania (przy dłuższym tekście dalej przewija się kółkiem) */
.asst-form textarea { scrollbar-width: none; }
.asst-form textarea::-webkit-scrollbar { display: none; }


.code { position: relative; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; font: 400 12.5px/1.8 var(--mono); color: var(--text-2); white-space: pre; overflow-x: auto; }
.code .copy { position: absolute; top: 10px; right: 10px; }
.code .k { color: var(--violet-text); }
.code .s { color: #93e2b8; }
.code .c { color: var(--faint); }

.keybox { display: flex; align-items: center; gap: 8px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 6px 6px 14px; }
.keybox code { flex: 1; font: 500 12.5px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.log { font: 400 12px/1.5 var(--mono); padding: 8px 10px; }
.log-row { display: grid; grid-template-columns: 110px 92px minmax(0, 1fr); gap: 14px; padding: 10px 12px; border-radius: var(--r-xs); align-items: baseline; }
.log-row:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
.log-row .when { color: var(--faint); }
.log-row .st-done { color: var(--green); }
.log-row .st-error { color: var(--red); }
.log-row .st-sent, .log-row .st-pending { color: var(--amber); }
.log-row .msg { color: var(--text-2); overflow-wrap: anywhere; }

.setup { padding: 26px 26px 28px; }
.setup h2 { font-size: 20px; font-weight: 400; letter-spacing: -0.03em; }
.steps { margin-top: 22px; }
.step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; left: 14.5px; top: 36px; bottom: 6px; width: 1px; background: var(--line-hi); }
.step:last-child::before { display: none; }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--fill-hi); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
.step.done .n { background: var(--accent); color: #fff; }
.step .t { font-weight: 500; padding-top: 4px; }
.step .d { color: var(--text-2); margin-top: 3px; }
.step .x { margin-top: 14px; }

/* Usuń serwer: cały box w pełnej czerwieni jak karty Duolingo, biały tekst i biały przycisk z czerwonym napisem */
.danger-zone { background: linear-gradient(160deg, #ff5f5f, var(--red)); border-color: var(--red); box-shadow: 0 4px 0 var(--red-edge); color: #fff; }
.danger-zone .setting-row:hover { background: rgba(255, 255, 255, 0.08); }
.danger-zone .setting-row .t { font-weight: 800; }
.danger-zone .setting-row .d { color: rgba(255, 255, 255, 0.85); }
.danger-zone .btn-danger { --edge-c: var(--red-edge); background: #fff; border-color: #fff; color: var(--red); }
.danger-zone .btn-danger:hover { background: #ffecec; border-color: #ffecec; color: var(--red); }
.setting-list { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 14px; border-radius: var(--r-sm); }
.setting-row:hover { background: rgba(255, 255, 255, 0.02); }
.setting-row .t { font-weight: 500; }
.setting-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- publikacja */
.publish-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.picker { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 1.5px dashed var(--line-hi); border-radius: var(--r); background: var(--bg-sunken); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color 0.15s, background 0.15s; }
.picker:hover { border-color: var(--violet-line); background: rgba(72, 32, 220, 0.06); }
.picker .t { font-weight: 500; }
.picker .d { font-size: 12px; color: var(--muted); }
.tree { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-sunken); padding: 10px 0; font: 400 12px/1.4 var(--mono); max-height: 240px; overflow-y: auto; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 4px 16px; color: var(--text-2); }
.tree-row .i { width: 13px; height: 13px; color: var(--muted); }
.tree-row.dir { color: var(--text); }
.tree-row.dir .i { color: var(--violet-text); }
.tree-row .sz { margin-left: auto; color: var(--faint); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; }

/* ---------- skaner */
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.small-note { font-size: 11.5px; padding: 0 22px 18px; margin-top: -2px; }
.stack > .small-note { padding: 4px 6px 0; }

.drop { position: relative; overflow: hidden; isolation: isolate; min-height: 420px; display: grid; place-items: center; border-style: dashed; border-width: 1.5px; border-color: var(--line-hi); transition: border-color 0.2s, background 0.2s; }
.drop.over { border-color: var(--accent); background: var(--violet-soft); }
.drop-glow { display: none; }
.drop-inner { text-align: center; padding: 40px 30px; max-width: 560px; }
.drop-inner h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.035em; margin-top: 22px; }
.drop-inner p { margin-top: 8px; }
.drop-coins { display: flex; align-items: center; justify-content: center; }
.drop-coins .coin:nth-child(1) { transform: rotate(-12deg) translateX(12px); }
.drop-coins .coin:nth-child(2) { z-index: 1; width: 96px; height: 96px; }
.drop-coins .coin:nth-child(3) { transform: rotate(12deg) translateX(-12px); }
.drop.over .drop-coins .coin:nth-child(2) { animation: drop-bob 0.9s ease-in-out infinite; }
@keyframes drop-bob { 50% { transform: translateY(-8px) scale(1.04); } }
.drop-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 28px; text-align: left; font-size: 12px; color: var(--text-2); }
.drop-checks span { display: flex; align-items: center; gap: 8px; }
.drop-checks .i { color: var(--green); }
.drop.busy { border-style: solid; border-color: var(--line); }
.spinner.big { width: 46px; height: 46px; border-width: 3px; margin: 0 auto; display: block; }

.verdict { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 24px; padding: 28px 30px; border-radius: var(--r-xl); color: #fff; box-shadow: none; }
.verdict::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.verdict-glow { display: none; }
.verdict.v-clean { background: #1f7a5a; }
.verdict.v-review { background: #8a611f; }
.verdict.v-suspicious { background: #a5491d; }
.verdict.v-danger { background: #a3243f; }
.verdict-coin { --c1: #ffffff; --c2: rgba(255, 255, 255, 0.55); --c3: rgba(255, 255, 255, 0.12); color: #fff; }
.verdict-label { font-size: 12px; opacity: 0.82; }
.verdict h2 { font-size: 36px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; margin-top: 4px; }
.verdict p { opacity: 0.88; margin-top: 4px; max-width: 520px; }
.verdict .sev { background: rgba(255, 255, 255, 0.18); color: #fff; }
.verdict-stats { display: flex; flex-direction: column; gap: 8px; min-width: 120px; }
.verdict-stats div { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.14); }
.verdict-stats b { font-size: 16px; font-weight: 500; }
.verdict-stats span { font-size: 11.5px; opacity: 0.8; }

.lvl-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.lvl-dot.v-clean { background: var(--green-soft); color: var(--green); }
.lvl-dot.v-review { background: var(--amber-soft); color: var(--amber); }
.lvl-dot.v-suspicious { background: rgba(238, 138, 79, 0.14); color: #f39a63; }
.lvl-dot.v-danger { background: var(--red-soft); color: var(--red); }

.sev { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.sev-critical { background: var(--red-soft); color: var(--red); }
.sev-high { background: rgba(238, 138, 79, 0.14); color: #f39a63; }
.sev-medium { background: var(--amber-soft); color: var(--amber); }
.sev-info { background: var(--fill-hi); color: var(--text-2); }

.res-card { padding: 8px; }
.res-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; }
.res-name { font-weight: 600; font-size: 14px; font-family: var(--mono); }
.res-head .sub { font-size: 12px; color: var(--muted); }
.findings { display: flex; flex-direction: column; gap: 6px; }
.finding { padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); }
.f-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f-top .mono { font-size: 11.5px; }
.finding p { margin-top: 6px; font-size: 12.5px; }
.f-code { margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.f-code .ln { display: inline-block; min-width: 30px; color: var(--faint); user-select: none; }

.clean-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; border: 0; background: transparent; color: var(--text); font: 500 13px var(--font); cursor: pointer; text-align: left; border-radius: var(--r-lg); }
.clean-toggle:hover { background: rgba(255, 255, 255, 0.02); }
.clean-list { padding: 0 20px 16px 62px; display: flex; flex-direction: column; gap: 6px; }
.clean-item { display: flex; gap: 12px; font-size: 12px; }
.act.hist { cursor: pointer; grid-template-columns: 30px minmax(0, 1fr) auto; }
.act.hist.on { background: var(--fill-hi); }
.act.hist [data-hist-del] { opacity: 0; transition: opacity 0.15s; }
.act.hist:hover [data-hist-del] { opacity: 1; }

/* ---------- discord */
.flip { transform: rotate(180deg); }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-color: rgba(243, 187, 107, 0.25); }
.notice > .i { color: var(--amber); margin-top: 2px; }
.notice .dim { font-size: 12.5px; margin-top: 2px; }
.section-title { font-size: 13px; color: var(--muted); font-weight: 500; margin: 6px 0 -4px 4px; }

.dc-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 28px; padding: 30px 34px; border-radius: var(--r-xl); color: #fff; background: var(--accent); box-shadow: none; }
.dc-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.dc-hero h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.035em; }
.dc-hero p { opacity: 0.88; margin-top: 6px; max-width: 520px; }
.dc-hero-coins { display: flex; align-items: center; flex: none; }
.dc-hero-coins .coin:nth-child(2) { margin-left: -18px; transform: rotate(12deg); }

.guilds { display: flex; gap: 8px; flex-wrap: wrap; }
.guild { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; max-width: 260px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); color: var(--text); font: 500 13px var(--font); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.guild img { width: 32px; height: 32px; border-radius: 50%; }
.guild:hover { border-color: var(--line-hi); }
.guild.on { border-color: var(--accent); background: var(--violet-soft); }
.guild.add { padding: 0 16px; color: var(--text-2); border-style: dashed; }

.embed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tpl, .saved { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 16px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.tpl:hover, .saved:hover { border-color: var(--line-hi); }
.tpl-bar, .saved-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.tpl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-hi); color: var(--violet-text); margin-bottom: 8px; }
.tpl .muted, .saved .muted { font-size: 12px; }
.saved { flex-direction: row; align-items: center; gap: 12px; }

.ed-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ed-name { font: 400 26px var(--font); letter-spacing: -0.03em; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 2px 10px; min-width: 120px; max-width: 420px; outline: none; }
.ed-name:hover { border-color: var(--line); }
.ed-name:focus { border-color: var(--violet-line); background: var(--bg-sunken); }
.editor { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(380px, 1.05fr); gap: 14px; align-items: start; }
.ed-form { padding: 6px 8px; max-height: calc(100vh - 190px); overflow-y: auto; }
.ed-sec { padding: 16px 14px 6px; border-bottom: 1px solid var(--line); }
.ed-sec:last-child { border-bottom: 0; }
.ed-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ed-sec-head h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.ed-sec .field { margin-bottom: 12px; }
.ed-sec .input { height: 40px; font-size: 13px; }
.ed-sec textarea.input { height: auto; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); cursor: pointer; padding: 0; transition: transform 0.15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { border-color: #fff; }
.swatch.custom { position: relative; display: grid; place-items: center; background: var(--fill-hi); color: var(--text-2); overflow: hidden; }
.swatch.custom input { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }
.list-row { display: grid; grid-template-columns: 1fr 1.3fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; margin-bottom: 12px; }
.list-row .check { margin: 0; }
.check input { accent-color: var(--violet); width: 15px; height: 15px; }
.btn-row { padding: 10px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.btn-row-top { display: flex; align-items: center; gap: 6px; }
.btn-row-top .input { flex: 1; min-width: 0; }
.btn-row .input.emoji { flex: none; width: 54px; text-align: center; padding: 0 6px; }
.btn-row .input.style { flex: none; width: 130px; }
select.input { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d7b98' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
select.input option { background: var(--card); }
.img-row { display: flex; gap: 12px; align-items: flex-start; }
.img-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); border: 1.5px dashed var(--line-hi); display: grid; place-items: center; color: var(--muted); cursor: pointer; overflow: hidden; background: var(--bg-sunken); transition: border-color 0.15s; }
.img-thumb:hover { border-color: var(--violet-line); color: var(--violet-text); }
.img-thumb.has { border-style: solid; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ed-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.ed-send { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ed-send .row .input { height: 42px; }

/* podgląd wiadomości — kolory i proporcje Discorda (motyw ciemny) */
.dc-window { border-radius: var(--r-lg); overflow: hidden; background: #313338; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8); }
.dc-channel { height: 44px; display: flex; align-items: center; padding: 0 16px; color: #f2f3f5; font: 600 14px 'Segoe UI', 'gg sans', sans-serif; border-bottom: 1px solid #26272b; }
.dc-msg { display: flex; gap: 16px; padding: 16px 16px 20px; font: 400 15px/1.375 'Segoe UI', 'gg sans', 'Noto Sans', sans-serif; color: #dbdee1; user-select: text; }
.dc-avatar { width: 40px !important; height: 40px !important; }
.dc-avatar-img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: #1e1f22; }
.dc-avatar svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-body { flex: 1; min-width: 0; }
.dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-name { color: #f2f3f5; font-weight: 600; font-size: 15px; }
.dc-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; line-height: 15px; }
.dc-time { color: #949ba4; font-size: 12px; margin-left: 2px; }
.dc-content { margin-bottom: 4px; }
.dc-embed { position: relative; max-width: 520px; margin-top: 4px; padding: 10px 16px 14px 14px; background: #2b2d31; border-radius: 4px; border-left: 4px solid var(--bar); display: flex; flex-direction: column; gap: 8px; }
.dc-embed-row { display: flex; gap: 16px; }
.dc-embed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.dc-author { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: 14px; font-weight: 600; }
.dc-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dc-title { color: #f2f3f5; font-size: 16px; font-weight: 600; }
.dc-title.link { color: #00a8fc; }
.dc-desc { font-size: 14px; color: #dbdee1; overflow-wrap: anywhere; }
.dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dc-field { grid-column: 1 / -1; font-size: 14px; }
.dc-field.inline { grid-column: auto; }
.dc-fname { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.dc-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; flex: none; }
.dc-image { max-width: 100%; max-height: 300px; object-fit: cover; border-radius: 4px; margin-top: 8px; }
.dc-footer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b5bac1; margin-top: 2px; }
.dc-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dc-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 3px; color: #fff; font-size: 14px; font-weight: 500; cursor: default; }
.dc-btn.primary { background: #5865f2; }
.dc-btn.success { background: #248046; }
.dc-btn.secondary, .dc-btn.link { background: #4e5058; }
.dc-btn.danger { background: #da373c; }
.dc-code { background: #1e1f22; border-radius: 4px; padding: 0 3px; font-family: Consolas, monospace; font-size: 85%; }
.dc-pre { background: #1e1f22; border: 1px solid #1e1f22; border-radius: 4px; padding: 7px; margin: 4px 0; font: 13px/1.4 Consolas, monospace; white-space: pre-wrap; }
.dc-link { color: #00a8fc; }
.dc-mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; }
.dc-h1 { font-size: 22px; font-weight: 700; color: #f2f3f5; margin: 4px 0 2px; }
.dc-h2 { font-size: 19px; font-weight: 700; color: #f2f3f5; margin: 4px 0 2px; }
.dc-h3 { font-size: 16px; font-weight: 700; color: #f2f3f5; margin: 4px 0 2px; }
.dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; }
.dc-li { padding-left: 6px; }
.dc-empty { color: #949ba4; font-size: 13px; font-style: italic; margin-top: 6px; }

/* centrum modułów bota */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mod-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; min-height: 196px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.mod-card:hover { border-color: var(--line-hi); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.mod-card:hover::before, .mod-card.on::before { opacity: 1; }
.mod-card.on { border-color: rgba(72, 32, 220, 0.28); }
.mod-card.locked { opacity: 0.55; }
.mod-card.locked:hover { transform: none; }
.mod-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.mod-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-sm); background: var(--fill); color: var(--muted); font-size: 11.5px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mod-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.mod-state.on { background: var(--green-soft); color: var(--green); }
.mod-state.on i { background: var(--green); }
.mod-card b { font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; }
.mod-desc { font-size: 12.5px; color: var(--text-2); flex: 1; }
.mod-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--violet-text); }
.mod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mod-head h1 { font-size: 28px; font-weight: 400; letter-spacing: -0.035em; }
.mod-sub { margin: 0 0 20px; max-width: 640px; }
.mod-enable { background: var(--violet-soft); border-radius: var(--r); margin: 8px 6px 4px; border-bottom: 0 !important; padding-bottom: 4px !important; }
.notice-inline { display: flex; gap: 10px; align-items: flex-start; margin: 10px 8px 0; padding: 12px 14px; border-radius: var(--r); background: var(--amber-soft); color: var(--text); font-size: 12.5px; }
.notice-inline .i { color: var(--amber); margin-top: 2px; }
.guild-ico { width: 32px; height: 32px; border-radius: 50%; }

/* zakładka Bot */
.connect-art { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 18px; }
.connect-dots { display: flex; gap: 6px; }
.connect-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-hi); animation: dots 1.2s ease-in-out infinite; }
.connect-dots i:nth-child(2) { animation-delay: 0.15s; }
.connect-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
.fallback { margin-top: 4px; font-size: 12.5px; }
.fallback summary { cursor: pointer; color: var(--muted); }
.fallback p { margin-top: 10px; }

.wz-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wz-step { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.wz-step span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-hi); font-size: 12px; font-weight: 600; }
.wz-step.on { color: #fff; border-color: transparent; background: var(--grad); box-shadow: var(--glow); }
.wz-step.on span { background: rgba(255, 255, 255, 0.2); }
.wz-step.done { color: var(--text-2); }
.wz-step.done span { background: var(--green-soft); color: var(--green); }
.wz-line { flex: 1; max-width: 60px; height: 1px; background: var(--line-hi); }
.wz-body { padding: 26px 26px 22px; }
.wz-title { font-size: 24px; font-weight: 400; letter-spacing: -0.035em; }
.wz-sub { margin: 6px 0 22px; }
.wz-images { display: flex; gap: 12px; margin-bottom: 16px; }
.wz-img { width: 130px; height: 130px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-hi); background: var(--bg-sunken) center / cover no-repeat; color: var(--muted); font: 12px var(--font); cursor: pointer; transition: border-color 0.15s; }
.wz-img.wide { flex: 1; width: auto; }
.wz-img:hover { border-color: var(--violet-line); color: var(--violet-text); }
.wz-img.has { border-style: solid; border-color: var(--line); }
.wz-img b { color: var(--text); font-weight: 500; font-size: 13px; }
.wz-img .i { width: 22px; height: 22px; margin-bottom: 4px; }
.wz-summary { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r); background: var(--bg-sunken); margin-bottom: 18px; }
.wz-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.wz-summary div:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.wz-summary b { font-weight: 500; text-align: right; }
.wz-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

.bot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.counter-opt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); margin-bottom: 10px; transition: border-color 0.15s, background 0.15s; }
.counter-opt.on { border-color: var(--accent); background: var(--violet-soft); }
.counter-opt .switch { margin-top: 2px; }
.counter-opt b { font-weight: 500; }
.small-text { font-size: 12px; }
.preview-line { font-size: 12px; color: var(--muted); margin-top: 8px; }
.preview-line b { color: var(--text); font-weight: 500; }
.tokens { font-size: 11.5px; color: var(--muted); margin: 4px 0 16px; }
.tokens code { font-family: var(--mono); color: var(--violet-text); background: var(--fill); padding: 1px 6px; border-radius: 6px; }

.dc-profile-wrap { position: sticky; top: 0; }
.dc-profile { border-radius: 18px; overflow: hidden; background: #232428; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8); font-family: 'Segoe UI', 'gg sans', sans-serif; }
.dc-banner { height: 120px; background: var(--accent); background-size: cover; background-position: center; }
.dc-pavatar { position: relative; width: 92px; height: 92px; margin: -46px 0 0 16px; border-radius: 50%; border: 6px solid #232428; background: #232428; }
.dc-pavatar img, .dc-pavatar .coin { width: 80px !important; height: 80px !important; border-radius: 50%; object-fit: cover; display: block; }
.dc-pavatar .coin svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-online { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: #23a55a; border: 4px solid #232428; }
.dc-pbody { padding: 10px 16px 16px; color: #dbdee1; }
.dc-pname { font-size: 20px; font-weight: 700; color: #f2f3f5; display: flex; align-items: center; gap: 6px; word-break: break-word; }
.dc-ptag { font-size: 13px; color: #b5bac1; margin-top: 2px; }
.dc-pbio { font-size: 13.5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); white-space: pre-wrap; }
.dc-pmember { display: flex; flex-direction: column; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #1e1f22; font-size: 12px; }
.dc-pmember b { color: #f2f3f5; font-weight: 600; margin-top: 2px; }
.dc-sidebar { margin-top: 12px; padding: 14px 10px; border-radius: 14px; background: #2b2d31; font: 14px 'Segoe UI', sans-serif; color: #949ba4; }
.dc-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 0 8px 6px; }
.dc-vc, .dc-tc { padding: 5px 8px; border-radius: 4px; }
.dc-vc { color: #f2f3f5; background: rgba(78, 80, 88, 0.45); font-weight: 500; }

@media (max-width: 1180px) { .bot-grid { grid-template-columns: minmax(0, 1fr); } .dc-profile-wrap { position: static; } .editor, .scan-grid { grid-template-columns: minmax(0, 1fr); } .ed-side { position: static; } .ed-form { max-height: none; } }

/* ---------- plany: wspólne */
.plan-chip { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; margin-right: 6px; border-radius: var(--r-sm); border: 0; font: 600 10px var(--font); letter-spacing: 0.02em; cursor: pointer; background: var(--fill-hi); color: var(--text-2); vertical-align: 1px; }
.plan-chip.pro, .plan-chip.team { background: var(--grad); color: #fff; }
.seg .lock { width: 12px; height: 12px; color: var(--amber); }
.upsell { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--violet-soft); border: 1px solid rgba(72, 32, 220, 0.22); }
.upsell .dim { font-size: 12.5px; margin-top: 3px; }
.notice.soft { border-color: var(--line); }
.notice.soft > .i { color: var(--violet-text); }

/* ---------- konsola */
/* konsola: karta jak reszta (ramka 2px, krawędź 3D), ciemne wnętrze, nagłówek z ikoną i pigułką stanu, komendy jako pigułki */
.term { overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 22px; background: #0c0d13; box-shadow: 0 4px 0 var(--line); }
.term-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; background: var(--card); border-bottom: 2px solid var(--line); }
.term-head .grow { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.term-head b { font-size: 16px; font-weight: 900; color: var(--text); }
.term-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #0c0d13; color: var(--accent-text); border: 2px solid var(--line-hi); }
.term-ic .i { width: 17px; height: 17px; }
.term-state { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--fill-hi); color: var(--muted); font-size: 12px; font-weight: 800; }
.term-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.term-state.on { background: rgba(0, 195, 1, 0.14); color: #5fe35f; }
.term-state.on i { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 195, 1, 0.25); animation: term-live 1.6s ease-in-out infinite; }
@keyframes term-live { 50% { box-shadow: 0 0 0 6px rgba(0, 195, 1, 0); } }
.term-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.term-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 2px solid var(--line-hi); border-radius: 99px;
  background: var(--card); color: var(--text-2); box-shadow: 0 3px 0 var(--line-hi); font: 800 12.5px var(--font); cursor: pointer;
}
.term-chip:hover:not(:disabled) { background: var(--card-hi); color: var(--text); }
.term-chip:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.term-chip:disabled { opacity: 0.45; cursor: default; }
.term-chip .i { width: 12px; height: 12px; }
.term-body { height: 440px; overflow-y: auto; padding: 10px 6px 10px 0; font: 400 12px/1.7 var(--mono); }
.term-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; font-family: var(--font); color: var(--muted); }
.term-empty .coin { margin-bottom: 6px; }
.term-empty b { font-size: 17px; font-weight: 900; color: var(--text); }
.term-empty span { max-width: 360px; font-size: 13.5px; font-weight: 600; }
.term-empty .btn { margin-top: 8px; }
.tl { display: flex; gap: 12px; padding: 1px 14px 1px 15px; align-items: baseline; border-left: 3px solid transparent; }
.tl:hover { background: rgba(255, 255, 255, 0.03); }
.tl .tt { color: var(--faint); flex: none; font-size: 11px; }
.tl .tm { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.tl.err { background: rgba(255, 75, 75, 0.08); border-left-color: #ff4b4b; }
.tl.err .tm { color: #ffb3b3; }
.tl.warn { background: rgba(255, 200, 0, 0.06); border-left-color: #ffc800; }
.tl.warn .tm { color: #ffe08a; }
.fix-ai { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-edge); font: 800 11px var(--font); cursor: pointer; align-self: center; }
.term-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border-top: 2px solid var(--line); }
.term-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 2px solid var(--line-hi); border-radius: 14px; background: #0c0d13; cursor: text; }
.term-field:focus-within { border-color: var(--accent-hi); }
.term-field.off { opacity: 0.6; cursor: default; }
.term-field .p { color: var(--accent-text); font: 900 18px var(--mono); line-height: 1; }
.term-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 400 13px var(--mono); }
.term-input .btn { height: 46px; }

/* ---------- gracze */
.announce { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--line); }
.announce .input { border: 0; background: transparent; height: 38px; padding: 0 6px; }
.announce .input:focus { box-shadow: none; }
.ping { font: 500 12px var(--mono); color: var(--green); }
.ping.mid { color: var(--amber); }
.ping.bad { color: var(--red); }

/* ---------- restarty */
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.switch input { display: none; }
.switch span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--fill-hi); transition: background 0.2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(16px); }
.times { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.time-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 14px; border-radius: var(--r-sm); background: var(--violet-soft); color: var(--violet-text); font: 600 13px var(--mono); }
.time-chip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: inherit; display: grid; place-items: center; cursor: pointer; }
.time-add { display: inline-flex; gap: 6px; align-items: center; }
.time-add input { height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-sunken); color: var(--text); padding: 0 12px; font: 13px var(--mono); color-scheme: dark; }
.check-pill input { display: none; }
.check-pill span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.check-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- AI Studio */
.credits { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.credits > span { display: flex; align-items: center; gap: 6px; }
.credits b { font-size: 16px; color: var(--text); font-weight: 600; }
.credits .meter { width: 70px; }
.ai-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.ai-source { position: sticky; top: 0; }
.files-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; font-size: 12px; color: var(--muted); }
.ai-files { max-height: 360px; overflow-y: auto; border-radius: var(--r); background: var(--bg-sunken); border: 1px solid var(--line); padding: 6px; }
.ai-file { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.ai-file:hover { background: rgba(255, 255, 255, 0.03); }
.ai-file input { accent-color: var(--violet); }
.ai-file .mono { flex: 1; min-width: 0; color: var(--text-2); }
.ai-file .sz { color: var(--faint); font-size: 11px; }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mode:hover { border-color: var(--line-hi); }
.mode.on { border-color: var(--accent); background: var(--violet-soft); }
.mode b { font-weight: 500; font-size: 13px; margin-top: 8px; }
.mode span:last-child { font-size: 11.5px; color: var(--muted); }
.mode-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-hi); color: var(--violet-text); }
.mode.on .mode-ico { background: var(--grad); color: #fff; }
.arrow { color: var(--muted); padding-top: 22px; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; }
.chip-btn { height: 28px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 12px var(--font); cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.ai-running { min-height: 420px; display: grid; place-items: center; }
.ai-orb { display: flex; justify-content: center; }
.ai-orb .coin { animation: orb 2.4s ease-in-out infinite; }
@keyframes orb { 0%, 100% { transform: translateY(0) rotate(0); box-shadow: none; } 50% { transform: translateY(-8px) rotate(8deg); box-shadow: none; } }
.ai-summary { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: var(--r-xl); background: var(--grad); color: #fff; box-shadow: none; }
.ai-summary::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.ai-summary .coin { --c1: #fff; --c2: rgba(255, 255, 255, 0.6); --c3: rgba(255, 255, 255, 0.15); }
.ai-summary .label { font-size: 12px; opacity: 0.8; }
.ai-summary p { font-size: 15px; line-height: 1.55; margin-top: 6px; white-space: pre-wrap; }
.changes { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.change { border-radius: var(--r); background: rgba(255, 255, 255, 0.025); overflow: hidden; }
.change-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: var(--text); font: 13px var(--font); cursor: pointer; text-align: left; }
.change-head .mono { font-size: 12.5px; }
.change-head .add { color: var(--green); font: 600 12px var(--mono); }
.change-head .del { color: var(--red); font: 600 12px var(--mono); }
.change-note { padding: 0 14px 10px; font-size: 12px; color: var(--muted); }
.diff { max-height: 460px; overflow: auto; border-top: 1px solid var(--line); background: rgba(6, 7, 14, 0.5); font: 12px/1.6 var(--mono); }
.dl { display: flex; white-space: pre; }
.dl .ln { flex: none; width: 44px; padding-right: 8px; text-align: right; color: var(--faint); user-select: none; }
.dl .sg { flex: none; width: 16px; color: var(--muted); user-select: none; }
.dl .dc { flex: 1; color: var(--text-2); padding-right: 14px; }
.dl.add { background: rgba(90, 214, 150, 0.1); }
.dl.add .dc, .dl.add .sg { color: #a9f0c8; }
.dl.del { background: rgba(244, 104, 127, 0.1); }
.dl.del .dc, .dl.del .sg { color: #ffb3bf; }
.dl.gap { color: var(--faint); justify-content: center; padding: 2px 0; background: rgba(255, 255, 255, 0.02); }
.diff-empty { padding: 20px; color: var(--muted); font-family: var(--font); }
.ai-actions { display: flex; align-items: center; gap: 10px; }
.applied { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green); font-size: 13px; }

/* ---------- ekran planów */
.plans-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin: 8px 0 28px; }
.plans-head h1 { font-size: 40px; font-weight: 300; letter-spacing: -0.045em; margin-top: 18px; }
.plans-head p { margin-top: 8px; }
.usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.usage-item { padding: 14px 18px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); font-size: 12.5px; }
.usage-item .meter { margin-top: 10px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--line); }
.plan h2 { font-size: 18px; font-weight: 500; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 20px; }
.plan .price b { font-size: 38px; font-weight: 400; letter-spacing: -0.04em; }
.plan .price span { color: var(--muted); }
.plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; font-size: 13px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .i { margin-top: 3px; color: var(--green); }
.plan li.off { color: var(--faint); }
.plan li.off .i { color: var(--faint); }
.plan.current { border-color: var(--violet-line); }
.plan.featured { background: var(--grad); border-color: transparent; color: #fff; box-shadow: none; }
.plan.featured::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.plan.featured .price span, .plan.featured li.off, .plan.featured li.off .i { color: rgba(255, 255, 255, 0.55); }
.plan.featured li .i { color: #fff; }
.plan-badge { position: absolute; top: 22px; right: 22px; height: 26px; padding: 0 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.24); display: grid; place-items: center; font-size: 11.5px; font-weight: 500; }

@media (max-width: 1080px) { .ai-grid, .plans, .usage { grid-template-columns: minmax(0, 1fr); } .ai-source { position: static; } }

/* ---------- modal / toast */
.modal-bg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(6, 7, 14, 0.6); padding: 20px; }
.modal { width: 480px; max-width: 100%; background: var(--card); border: 1px solid var(--line-hi); border-radius: var(--r-xl); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 26px 26px 0; }
.modal-head h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.03em; }
.modal-head p { color: var(--muted); margin-top: 6px; }
.modal-body { padding: 20px 26px 4px; }
.modal-body:last-child { padding-bottom: 24px; } /* okno bez stopki z przyciskami */
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 26px 24px; }

.choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; margin-top: 8px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, background 0.15s; }
.choice:first-child { margin-top: 0; }
.choice:hover { border-color: var(--line-hi); }
.choice .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-hi); flex: none; display: grid; place-items: center; }
.choice.on { border-color: var(--accent); background: var(--violet-soft); }
.choice.on .radio { border-color: var(--violet-hi); }
.choice.on .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-hi); }
.choice .n { font-weight: 500; }
.choice .s { font-size: 12px; color: var(--muted); }

.link-code { display: flex; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.link-code span { width: 50px; height: 60px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line-hi); font: 500 24px var(--mono); color: #fff; }
.chat-line { display: flex; align-items: center; gap: 10px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 5px 5px 18px; font: 500 13px var(--mono); }
.chat-line .p { color: var(--violet-text); }
.waiting { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 16px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: var(--violet-hi); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* powiadomienia jak karty Duolingo: pełny kolor, krawędź 3D, animowana ikonka, smok przycięty prawą i dolną krawędzią */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.toast {
  --t1: #5a33ee; --t2: #4820dc; --edge-c: #3114a6; --tt: #fff;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  width: 380px; max-width: calc(100vw - 40px); min-height: 76px; padding: 14px 96px 16px 14px; margin-bottom: 5px;
  border-radius: 22px; background: linear-gradient(135deg, var(--t1), var(--t2)); color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 var(--edge-c), 0 20px 44px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.42s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.toast.ok { --t1: #2bd42c; --t2: #00b201; --edge-c: #008a01; }
.toast.err { --t1: #7d2424; --t2: #561616; --edge-c: #380b0b; --tt: #ff8f87; }
.toast-ic { flex: none; width: 52px; height: 52px; }
.toast-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toast-t b { font-size: 18px; font-weight: 900; line-height: 1.2; color: var(--tt); }
.toast-t span { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: rgba(255, 255, 255, 0.92); overflow-wrap: anywhere; }
.toast.err .toast-t span { color: rgba(255, 220, 216, 0.92); }
.toast-dragon { position: absolute; right: -14px; bottom: -40px; width: 108px; height: 108px; transform: rotate(-10deg); animation: toast-peek 0.5s 0.12s cubic-bezier(0.3, 1.5, 0.5, 1) both; pointer-events: none; }
.toast-dragon svg { display: block; width: 100%; height: 100%; }
.toast-time { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(255, 255, 255, 0.35); transform-origin: left; animation: toast-time 4.5s linear forwards; }
.toast.out { opacity: 0; transform: translateX(30px); transition: opacity 0.25s, transform 0.25s; }
@keyframes toast-peek { from { transform: translateY(70px) rotate(-10deg); } }
@keyframes toast-time { to { transform: scaleX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(46px) scale(0.94); } }

/* ---------- logowanie i nowe konto: scena jak w Duolingo
   Gładkie fioletowe niebo.
   Po lewej smok (anim.js) z dymkiem, który mówi, co robi; po prawej karta z kreskówkowymi kontrolkami. */
.auth {
  --sky-1: #170c46; --sky-2: #23127a; --sky-3: #3a21b2;
  --ms: clamp(230px, 27vw, 330px); /* rozmiar smoka */
  position: relative; height: 100vh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: 60px 32px 36px;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 100%);
}
.auth-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.auth-stage { display: grid; grid-template-columns: minmax(280px, 400px) 400px; gap: clamp(28px, 6vw, 96px); align-items: center; }
.auth-hero { position: relative; display: flex; flex-direction: column; align-items: center; }
/* poświata za smokiem, żeby fioletowa postać odcinała się od fioletowego nieba */
.auth-hero::before { content: ''; position: absolute; left: 50%; bottom: calc(var(--ms) * 0.02); width: calc(var(--ms) * 1.35); height: calc(var(--ms) * 1.35); translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(176, 156, 255, 0.34) 0%, rgba(176, 156, 255, 0.12) 45%, transparent 68%); z-index: -1; }
.auth-mascot { position: relative; z-index: 1; width: var(--ms); height: var(--ms); }
/* okrągły podest z krawędzią 3D pod nóżkami smoka (nóżki kończą się na 87% wysokości kadru animacji) i cień na nim */
.auth-shadow {
  position: relative; width: calc(var(--ms) * 0.74); height: calc(var(--ms) * 0.17); margin-top: calc(var(--ms) * -0.215);
  border-radius: 50%; background: #5b3fe4; box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.14), 0 9px 0 #2f1a99;
}
.auth-shadow::after { content: ''; position: absolute; left: 22%; right: 22%; top: 30%; height: 34%; border-radius: 50%; background: rgba(20, 8, 70, 0.45); }
/* miejsce na dymek ma stałą wysokość (dwie linie), dymek leży na dole: dłuższy tekst nie przesuwa smoka */
.bubble-slot { height: 92px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
/* dymek jak w Duolingo: biały, gruba krawędź 3D, ogonek do smoka */
.bubble {
  position: relative; max-width: 310px; padding: 13px 20px;
  background: #fff; color: #2a1a6e; border: 2px solid #e4dcff; border-radius: 20px;
  font: 800 16.5px/1.35 var(--font); text-align: center;
  box-shadow: 0 4px 0 #cfc3ff; transform-origin: 50% 100%;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; margin-left: -8px;
  background: #fff; border: 2px solid #e4dcff; border-top: 0; border-left: 0; border-radius: 0 0 5px 0; transform: rotate(45deg);
  box-shadow: 3px 3px 0 #cfc3ff;
}
.bubble.pop { animation: bubble-pop 0.42s cubic-bezier(0.3, 1.7, 0.5, 1); }
/* pisanie: litera wskakuje z małym podskokiem; słowo (.w) nie łamie się w środku */
#auth-bubble-text .w { white-space: nowrap; }
#auth-bubble-text i { display: inline-block; font-style: normal; opacity: 0; }
#auth-bubble-text i.on { opacity: 1; animation: char-in 0.18s ease-out; }
@keyframes char-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes bubble-pop { 0% { transform: scale(0.86); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* warstwy smoka: widać zawsze tylko jedną, przełączaną od razu (bez przenikania, które zostawiało zarys postaci) */
.mascot-stage { position: relative; }
.mascot-layer { position: absolute; inset: 0; visibility: hidden; }
.mascot-layer.on { visibility: visible; }

/* karta biała jak w jasnym Duolingo: pasuje do białego dymka i mocno odcina się od fioletowego nieba */
.auth-card {
  --ac-text: #2a1a6e; --ac-muted: #9b91c2; --ac-field: #f7f5ff; --ac-line: #e2dbff;
  width: 400px; padding: 26px 26px 16px; text-align: center; color: var(--ac-text);
  background: #fff; border: 2px solid #e6e0fa; border-radius: 26px;
  box-shadow: 0 8px 0 #cfc3ff, 0 34px 70px rgba(8, 2, 44, 0.45);
}
.auth-card .auth-logo { display: flex; justify-content: center; margin: 0 0 12px; color: #6a45ff; }
.auth-card h1 { font: 900 26px/1.15 var(--font); letter-spacing: -0.01em; margin-bottom: 18px; color: var(--ac-text); }
.auth-card h1.pop { animation: bubble-pop 0.42s cubic-bezier(0.3, 1.7, 0.5, 1); }
/* zakładki: suwak z krawędzią 3D przeskakuje z odbiciem */
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px 5px 9px; margin-bottom: 18px; background: #f1edff; border: 2px solid var(--ac-line); border-radius: 18px; }
.auth-tabs button { position: relative; z-index: 1; height: 40px; border: 0; background: transparent; color: var(--muted); font: 900 14px var(--font); letter-spacing: 0.02em; cursor: pointer; transition: color 0.25s; }
.auth-tabs button:not(.on) { color: #8b80b5; }
.auth-tabs button:not(.on):hover { color: var(--ac-text); }
.auth-tabs button.on { color: #fff; }
.auth-knob { position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: 40px; border-radius: 13px; background: var(--accent); box-shadow: 0 4px 0 var(--accent-edge); transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.auth-tabs[data-mode="register"] .auth-knob { transform: translateX(100%); }
/* pola: duże, zaokrąglone, ikona podskakuje przy wejściu w pole */
.af {
  display: flex; align-items: center; gap: 10px; height: 54px; margin-bottom: 12px; padding: 0 8px 0 16px;
  background: var(--ac-field); border: 2px solid var(--ac-line); border-radius: 16px; cursor: text;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.af > .i { width: 20px; height: 20px; color: var(--ac-muted); transition: color 0.15s, transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1); }
.af input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: 800 15px var(--font); }
.af input::placeholder { color: var(--ac-muted); font-weight: 700; }
.af:focus-within { border-color: #6a45ff; background: #fff; }
.af:focus-within > .i { color: #6a45ff; transform: scale(1.2) rotate(-10deg); }
.af.bad { border-color: var(--red); animation: shake 0.4s; }
.af-eye { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ac-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.af-eye:hover { background: #ece7ff; color: var(--ac-text); }
.af-eye .i { width: 19px; height: 19px; }
/* pole e-mail wysuwa się tylko przy nowym koncie */
.af-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.25s; }
.af-wrap > div { overflow: hidden; padding: 4px; margin: -4px; }
.auth-card[data-mode="register"] .af-wrap { grid-template-rows: 1fr; opacity: 1; }
.auth-fields { margin-bottom: 16px; }
.auth-error:empty { display: none; }
.auth-error { margin: -4px 0 14px; color: #e53b3b; font: 800 13.5px/1.4 var(--font); }

/* kreskówkowy przycisk: gruba krawędź 3D, podskakuje przy najechaniu, wciska się przy kliknięciu */
.cbtn {
  --c: var(--accent); --c-hi: var(--accent-hi); --edge-c: var(--accent-edge); --e: 6px;
  position: relative; width: 100%; height: 58px; margin-bottom: var(--e);
  border: 0; border-radius: 18px; background: var(--c); color: #fff; cursor: pointer;
  font: 900 16px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 var(--e) 0 var(--edge-c);
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.14s, background 0.15s;
}
.cbtn:hover { background: var(--c-hi); transform: translateY(-2px); box-shadow: 0 calc(var(--e) + 2px) 0 var(--edge-c); }
.cbtn:hover .cbtn-label { animation: jelly 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cbtn:active { transform: translateY(var(--e)); box-shadow: 0 0 0 var(--edge-c); transition-duration: 0.05s; }
.cbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cbtn-label { display: inline-block; transition: opacity 0.15s; }
.cbtn-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity 0.15s; }
.cbtn-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: dot-hop 0.9s ease-in-out infinite; }
.cbtn-dots i:nth-child(2) { animation-delay: 0.12s; }
.cbtn-dots i:nth-child(3) { animation-delay: 0.24s; }
.cbtn.busy { pointer-events: none; }
.cbtn.busy .cbtn-label { opacity: 0; }
.cbtn.busy .cbtn-dots { opacity: 1; }
.cbtn.ok { --c: var(--green); --c-hi: var(--green); --edge-c: #008a01; pointer-events: none; animation: jelly 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes jelly { 0% { transform: scale(1, 1); } 35% { transform: scale(1.08, 0.92); } 65% { transform: scale(0.96, 1.04); } 100% { transform: scale(1, 1); } }
@keyframes dot-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.auth-card.shake { animation: shake 0.45s; }
/* link pod przyciskiem („Nie pamiętasz hasła?”, „Wróć do logowania”) i karta resetu hasła */
.auth-link { display: block; margin: 12px auto 2px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: #6a45ff; font: 800 13.5px var(--font); cursor: pointer; }
.auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-link[hidden] { display: none; }
.auth-card[data-mode="register"] #auth-forgot { visibility: hidden; }
.reset-lead { margin: -6px 0 18px; color: var(--ac-muted); font: 700 14px/1.45 var(--font); }
.reset-links { display: flex; justify-content: center; gap: 8px; }
.reset-links .auth-link { margin: 12px 0 2px; }
/* krok 2 (kod i nowe hasło) wysuwa się po wysłaniu kodu, jak pole e-mail przy nowym koncie */
.reset-step2 { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.25s; }
.reset-step2 > div { overflow: hidden; padding: 4px; margin: -4px; }
#reset-form[data-step="2"] .reset-step2 { grid-template-rows: 1fr; opacity: 1; }
.auth-card.pop-in { animation: card-in 0.5s cubic-bezier(0.3, 1.35, 0.5, 1); }

/* wejście: smok wyskakuje, dymek i karta z odbiciem, elementy karty po kolei */
.auth.enter .auth-mascot { animation: pop-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s backwards; }
.auth.enter .auth-shadow { animation: pop-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s backwards; }
.auth.enter .bubble { animation: pop-in 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) 0.75s backwards; }
.auth.enter .auth-card { animation: card-in 0.65s cubic-bezier(0.3, 1.35, 0.5, 1) 0.15s backwards; }
.auth.enter .auth-card > * { animation: fade-up 0.45s ease backwards; }
.auth.enter .auth-card > :nth-child(1) { animation-delay: 0.3s; }
.auth.enter .auth-card > :nth-child(2) { animation-delay: 0.36s; }
.auth.enter .auth-card > :nth-child(3) { animation-delay: 0.42s; }
.auth.enter .auth-card > :nth-child(4) { animation-delay: 0.48s; }
.auth.enter .auth-card > :nth-child(n + 5) { animation-delay: 0.54s; }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } }
@keyframes card-in { from { transform: translateY(40px) scale(0.96); opacity: 0; } }
@keyframes fade-up { from { transform: translateY(10px); opacity: 0; } }
/* wyjście po zalogowaniu: karta odlatuje w górę, scena znika */
.auth.leave { animation: auth-out 0.45s ease 0.15s forwards; pointer-events: none; }
.auth.leave .auth-card { animation: card-out 0.45s cubic-bezier(0.5, -0.4, 0.7, 0.6) forwards; }
@keyframes auth-out { to { opacity: 0; } }
@keyframes card-out { to { transform: translateY(-60px) scale(0.94); opacity: 0; } }

@media (max-width: 1040px) { .auth-stage { grid-template-columns: minmax(240px, 300px) 400px; } }
@media (max-height: 700px) { .auth { --ms: 220px; } .auth-card { padding-top: 20px; } .auth-card .auth-logo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth, .auth * { animation: none !important; transition: none !important; }
}
.drag-strip { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar); z-index: 0; }
/* tylko dla ekranu logowania: w aplikacji pasek leżałby pod przyciskami górnej belki i Electron na Windows gubiłby ich kliknięcia */
.drag-strip:has(~ #shell:not(.hidden)) { display: none; }

@media (max-width: 1080px) {
  .home-grid, .publish-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .now-coins { display: none; }
}

/* ---------------------------------------------------------------- Postaw serwer */

.start-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.start-grid .mod-card { min-height: 250px; padding: 26px; }
.start-grid .mod-card b { font-size: 19px; }
.add-choice { grid-template-columns: 1fr 1fr; }
.add-choice .mod-card { min-height: 220px; }
.pack-grid .mod-card { min-height: 220px; }
.pack-grid .mod-card.on { border-color: var(--violet-line); box-shadow: none; }
.pack-size { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.wz-step:disabled { cursor: default; }
.lic-steps { margin-top: 0; }
.lic-steps .step:last-child { padding-bottom: 0; }
.lic-steps .input { max-width: 460px; }
#wz-license-hint.bad { color: var(--red); }

/* instalacja serwera jak lekcja Duolingo: smok z dymkiem po lewej, po prawej gruby pasek, kroki-kółka na ścieżce i to, co robimy teraz */
.install { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 28px 26px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.inst-side { display: flex; flex-direction: column; align-items: center; }
.install .inst-bubble { max-width: 190px; margin-bottom: 16px; font-size: 13.5px; }
.inst-mascot-slot { width: 160px; height: 160px; }
.inst-main { min-width: 0; }
.inst-top { display: flex; align-items: flex-start; gap: 18px; }
.inst-top h2 { margin-top: 2px; font-size: 24px; font-weight: 900; line-height: 1.2; }
.inst-top .dim { margin-top: 4px; font-size: 13.5px; font-weight: 600; }
.inst-pct { flex: none; font-size: 40px; font-weight: 900; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.inst-pct b { font-weight: 900; color: var(--text); }

/* pasek 16px jak w lekcji, z jasnym paskiem u góry i jasnym błyskiem, który przesuwa się w pętli; szerokość dojeżdża miękko */
.inst-bar { position: relative; height: 16px; margin: 18px 0 22px; border-radius: 99px; background: var(--inactive); overflow: hidden; }
.inst-bar > span {
  position: relative; display: block; height: 100%; min-width: 16px; border-radius: inherit; overflow: hidden;
  background: var(--accent) linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) no-repeat 8px 4px / calc(100% - 16px) 4px;
  transition: width 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.inst-bar > span::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60px; width: 60px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: inst-shine 1.8s ease-in-out infinite;
}
@keyframes inst-shine { to { left: 100%; } }

/* kroki: kółka połączone linią jak „Pierwsze kroki”, zrobiona część linii jest zielona i dojeżdża do aktualnego kółka */
.inst-path { --n: 4; --f: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.inst-path::before, .inst-path::after { content: ''; position: absolute; top: 20px; left: calc(50% / var(--n)); height: 6px; border-radius: 3px; }
.inst-path::before { right: calc(50% / var(--n)); background: var(--line-hi); }
.inst-path::after { width: calc((100% - 100% / var(--n)) * var(--f)); background: var(--green); transition: width 0.6s cubic-bezier(0.22, 0.8, 0.3, 1); }
.inst-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.inst-step b { font-size: 13px; font-weight: 900; color: var(--muted); }
.inst-dot {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--card-hi); border: 3px solid var(--line-hi); color: var(--faint); box-shadow: 0 4px 0 var(--line-hi);
}
.inst-dot .i { width: 18px; height: 18px; }
.inst-done .inst-dot { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 0 #009a01; }
.inst-done b { color: var(--text-2); }
.inst-on .inst-dot { background: var(--accent); border-color: var(--accent-hi); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.inst-on b { color: var(--text); }
/* aktualny krok: obwódka kręci się wokół kółka (zamiast małego spinnera) */
.inst-on .inst-dot::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 3px solid rgba(164, 140, 255, 0.18); border-top-color: var(--accent-text);
  animation: spin 1.1s linear infinite;
}
.inst-step.pop .inst-dot { animation: inst-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1); }
@keyframes inst-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.inst-now { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px 10px 10px; min-height: 48px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg-sunken); }
.inst-dots { flex: none; width: 34px; height: 26px; }
.inst-txt { flex: none; font-size: 14px; font-weight: 800; }
.inst-det { min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .install { grid-template-columns: minmax(0, 1fr); }
  .inst-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inst-bar > span::after, .inst-on .inst-dot::after, .inst-step.pop .inst-dot { animation: none; }
  .inst-bar > span, .inst-path::after { transition: none; }
}

.local-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 14px 14px 18px; }
.lb-state { display: flex; align-items: center; gap: 12px; }
.lb-state .muted { font-size: 12.5px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: var(--r); font-size: 13px; }
.banner-red { background: var(--red-soft); color: #ffc2cc; border: 1px solid rgba(244, 104, 127, 0.25); }
.banner-red > .i { color: var(--red); flex: none; }

/* ---------------------------------------------------------------- aktualizacje */

.upd-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 1px solid var(--violet-line); border-radius: var(--r-sm); background: var(--violet-soft); color: var(--violet-text); font: 500 12px var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; }
.upd-pill:hover:not(:disabled) { background: rgba(72, 32, 220, 0.24); color: #fff; }
.upd-pill:disabled { cursor: default; }
.upd-pill.ready { border-color: transparent; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.upd-meter { margin-top: 8px; max-width: 320px; }

/* ---------------------------------------------------------------- panel w przeglądarce */

html.web .topbar { padding-right: 28px; }
.needs-app { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--r); background: var(--violet-soft); border: 1px solid rgba(72, 32, 220, 0.2); }
.needs-app b { display: block; font-weight: 500; margin-bottom: 2px; }
.needs-app .muted { font-size: 13px; }

/* ---------------------------------------------------------------- Discord: wspólne drobiazgi */

.coin-md { width: 44px; height: 44px; font-size: 15px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--violet-text); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: #fff; }
.field-count { float: right; margin-right: 4px; font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Discord: ustawianie bota jak lekcja Duolingo
   Pasek postępu u góry, po lewej smok z dymkiem, jeden krok naraz, na dole pasek z „Pomiń” i „Dalej” (przyklejony do dołu). */

.btn-lg { --edge: 5px; height: 52px; padding: 0 30px; border-radius: 16px; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }
.btn-lg .i { width: 18px; height: 18px; }
.btn-white { --edge-c: rgba(0, 0, 0, 0.22); background: #fff; border-color: #fff; color: var(--accent); }
.btn-white:hover { background: #f1edff; border-color: #f1edff; }

/* na ekranie lekcji strona nie ma marginesu u dołu: pasek z przyciskami leży na samej krawędzi okna i zasłania to, co pod nim */
.page:has(.wiz) { padding-bottom: 0; }
.wiz { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar) - 18px); }
.wiz-top { display: flex; align-items: center; gap: 18px; height: 48px; margin-bottom: 18px; }
.wiz-x { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.wiz-x:hover { background: var(--card-hi); color: var(--text); }
.wiz-x .i { width: 20px; height: 20px; }
.wiz-top-t { font-size: 15px; font-weight: 900; color: var(--text-2); }
.wiz-bar { flex: 1; height: 16px; border-radius: 99px; background: var(--inactive); overflow: hidden; }
.wiz-bar > span { display: block; height: 100%; min-width: 16px; border-radius: inherit; background: var(--accent) linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) no-repeat 8px 4px / calc(100% - 16px) 4px; }

.wiz-body { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }
.wiz-side { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.wiz-bubble {
  position: relative; max-width: 220px; margin-bottom: 20px; padding: 14px 16px;
  border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line-hi);
  font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; color: var(--text);
}
.wiz-bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px; background: var(--card); border-right: 2px solid var(--line-hi); border-bottom: 2px solid var(--line-hi); border-bottom-right-radius: 4px; transform: translateX(-50%) rotate(45deg); }
.wiz-bubble.pop { animation: bubble-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.wiz-mascot-slot { width: 200px; height: 200px; }
.wiz-mascot { width: 100%; height: 100%; }

.wiz-main { min-width: 0; }
.wiz-kicker { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.wiz-main h1 { margin-top: 4px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.wiz-lead { max-width: 620px; margin: 6px 0 22px; font-size: 15px; color: var(--text-2); }
.wiz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; align-items: start; }
.wiz-form { padding: 20px 20px 6px; border: 2px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.wiz-form .ed-sec { padding: 4px 0 6px; margin-bottom: 14px; border-bottom: 2px solid var(--line); }
.wiz-form .ed-sec:last-child { margin-bottom: 0; border-bottom: 0; }
.wiz-form .ed-sec-head h3 { font-size: 14px; font-weight: 900; }
.wiz-form .notice-inline { margin: 0 0 14px; }
.wiz-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.wiz-preview .dc-window .dc-msg + .dc-msg { padding-top: 0; }
.wiz-note { text-align: center; font-size: 12.5px; color: var(--muted); }
.wiz-test { align-self: center; }
.wiz .bot-grid [data-act="save-counter"] { display: none; } /* licznik zapisuje się przyciskiem na dole kroku */

/* „Odśwież kanały i role”: nowa rola albo kanał z Discorda nie pojawiają się same */
.wiz-tools { display: flex; align-items: center; gap: 12px; margin: -8px 0 18px; font-size: 13px; color: var(--muted); }

/* weryfikacja: dwie duże karty do wyboru (przycisk albo reakcja), emoji reakcji z szybkim wyborem */
.vmode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.vmode-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px 14px; margin-bottom: 4px;
  border: 2px solid var(--line-hi); border-radius: var(--r-lg); background: var(--bg-sunken); color: var(--text-2);
  font: inherit; text-align: center; cursor: pointer; box-shadow: 0 4px 0 var(--line-hi);
  transition: background 0.12s, transform 0.08s, box-shadow 0.08s;
}
.vmode-opt:hover { background: var(--card-hi); }
.vmode-opt:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line-hi); }
.vmode-opt.on { border-color: var(--accent); background: var(--violet-soft); color: var(--text); box-shadow: 0 4px 0 var(--accent-edge); }
.vmode-opt > .i, .vmode-emoji { width: 28px; height: 28px; margin-bottom: 4px; font-size: 24px; line-height: 28px; color: var(--accent-text); }
.vmode-opt b { font-size: 15px; font-weight: 900; }
.vmode-opt span:last-child { font-size: 12px; color: var(--muted); }
.vemoji { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.vemoji .input.emoji { flex: none; width: 64px; height: 44px; padding: 0 6px; text-align: center; font-size: 20px; }
.vemoji-pick { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--bg-sunken); font-size: 20px; cursor: pointer; }
.vemoji-pick:hover { border-color: var(--accent-text); }
.vemoji-pick.on { border-color: var(--accent); background: var(--violet-soft); }

/* reakcja pod wiadomością w podglądzie (jak na Discordzie) */
.dc-reacts { display: flex; gap: 4px; margin-top: 6px; }
.dc-react { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid #5865f2; border-radius: 8px; background: rgba(88, 101, 242, 0.15); font-size: 15px; }
.dc-react b { font-size: 13px; font-weight: 600; color: #dee0fc; }

.wiz-foot { position: sticky; bottom: 0; z-index: 5; margin-top: 28px; padding: 16px 0 22px; border-top: 2px solid var(--line); background: var(--bg); }
.wiz-foot-in { display: flex; align-items: center; gap: 12px; }

/* krok „Dodaj na Discord”: trzy ponumerowane kroki */
.wiz-howto { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.wiz-howto li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.wiz-howto li > span { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 17px; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22); }
.wiz-howto b { font-size: 15px; font-weight: 900; }
.wiz-howto p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.wiz-warn { max-width: 560px; margin: 0 0 16px; }

/* krok bez czego zacząć (brak serwera FiveM) albo już zrobiony (status wisi) */
.wiz-empty { display: flex; align-items: center; gap: 18px; max-width: 620px; padding: 22px; border: 2px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.wiz-empty b { font-size: 16px; font-weight: 900; }
.wiz-empty p { margin-top: 4px; color: var(--muted); }
.wiz-empty.ok { border-color: rgba(0, 195, 1, 0.3); }
.wiz-empty.ok .coin { --c2: var(--green); }

/* ekran „gotowe”: co działa, co pominięte */
.wiz-done { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.wiz-sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); font-size: 14.5px; }
.wiz-sum b { font-weight: 800; }
.wiz-sum:not(.on) { opacity: 0.7; }

/* krok wyglądu: smoki do wyboru jako awatar, banner, opis */
.lk-avatars { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 2px; }
.lk-av {
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--bg-sunken); color: var(--accent-text); cursor: pointer;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--line-hi); transition: box-shadow 0.12s, transform 0.12s;
}
.lk-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; -webkit-user-drag: none; }
.lk-av:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent-text); }
.lk-av.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--accent); }
.lk-up { border: 2px dashed var(--line-hi); box-shadow: none; }
.lk-up:hover { border-color: var(--accent-text); box-shadow: none; }
.lk-up .i { width: 20px; height: 20px; }
.lk-banner { position: relative; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed var(--line-hi); border-radius: var(--r-lg); background: var(--bg-sunken) center / cover no-repeat; color: var(--muted); font-size: 12px; cursor: pointer; }
.lk-banner b { color: var(--text-2); font-weight: 800; }
.lk-banner:hover { border-color: var(--accent-text); color: var(--accent-text); }
.lk-banner.has { border-style: solid; border-color: transparent; }
.lk-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 14, 13, 0.75); color: #fff; cursor: pointer; }
.lk-x:hover { background: var(--red); }

/* ---------------------------------------------------------------- Discord: pulpit botów */

.bots { display: flex; flex-wrap: wrap; gap: 10px; }
.bot-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 260px; height: 60px; margin-bottom: 4px; padding: 0 16px 0 8px;
  border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--line-hi);
  transition: background 0.12s, transform 0.08s, box-shadow 0.08s;
}
.bot-chip:hover { background: var(--card-hi); }
.bot-chip:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line-hi); }
.bot-chip.on { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-edge); }
.bot-chip-av { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.bot-chip-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bot-chip-warn { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border: 3px solid var(--card); border-radius: 50%; background: var(--amber); }
.bot-chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bot-chip-t b { font-size: 14px; font-weight: 900; }
.bot-chip-t span { font-size: 12px; color: var(--muted); }
.bot-new { border-style: dashed; box-shadow: none; }
.bot-new:active { transform: none; }
.bot-new .bot-chip-av { background: var(--bg-sunken); color: var(--accent-text); }

/* karta bota w pełnym fiolecie jak boxy Duolingo */
.bot-hero { display: flex; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, #3a17c0); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.bot-hero-av { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95); }
.bot-hero-name { font-size: 26px; font-weight: 900; line-height: 1.2; }
.bot-hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.bot-hero-sub b { color: #fff; }
.bot-hero-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.bot-hero-progress b { color: #fff; font-weight: 900; }
.bot-hero-progress .meter { width: 200px; background: rgba(255, 255, 255, 0.22); }
.bot-hero-progress .meter > span { background-color: #fff; }
.bot-hero-act { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }

/* lista funkcji bota: wiersze bez ramek jak w nawigacji */
.bf { padding: 8px 10px 10px; }
.bf-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px; }
.bf-head h2 { font-size: 18px; font-weight: 900; }
.bf-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bf-row:hover { background: var(--card-hi); }
.bf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bf-text b { font-size: 15px; font-weight: 900; }
.bf-text span { font-size: 13px; color: var(--muted); }
.bf-row .pill { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.bf-go { flex: none; width: 76px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13px; font-weight: 900; color: var(--accent-text); }
.bf-row.on .bf-go { color: var(--muted); }
.bf-unlink { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r); }
.bf-unlink b { font-weight: 800; }

/* brak botów: fioletowa karta jak w „Zainstaluj skrypty”, tekst i przycisk po lewej, ilustracja na prawej połowie.
   Ilustracja ma tło w kolorze karty (--bots-bg, zmierzony z obrazka), więc karta jest jednolita i przejścia nie widać (bez animacji wejścia) */
.bots-empty { --bots-bg: #4d29d8; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 350px; padding: 30px 32px; border-radius: 24px; color: #fff;
  background: var(--bots-bg); box-shadow: 0 5px 0 var(--accent-edge); }
.bots-empty-t { position: relative; z-index: 1; max-width: min(460px, 44%); }
.bots-empty h2 { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.bots-empty p { margin: 6px 0 20px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
/* obrazek (1500x858, przycięty ciasno do sceny) zawsze cały i zawsze na pełną wysokość karty, przy prawej krawędzi.
   Nigdy go nie ucinamy ani nie zmniejszamy; w węższym oknie może wejść pod tekst (tekst jest na wierzchu). Bez przenikania */
.bots-empty-art { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1500 / 858; pointer-events: none; }
.bots-empty-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
/* pusty stan (emptyCard w app.js): ta sama karta co „Nie masz jeszcze bota”, ilustracja zawsze cała po prawej */
.empty-card { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 300px; padding: 30px 32px; border-radius: 24px; color: #fff;
  background: #4820dc; box-shadow: 0 5px 0 var(--accent-edge); }
.empty-card-t { position: relative; z-index: 1; max-width: min(440px, 46%); }
.empty-card h2 { margin-top: 12px; font-size: 28px; font-weight: 900; line-height: 1.15; }
.empty-card p { margin: 6px 0 20px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.empty-card-art { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; }
.empty-card-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }

/* „Jak może wyglądać Twój bot”: po lewej przykładowy profil bota jak na Discordzie, po prawej okno Discorda z przykładami
   wiadomości (weryfikacja, powitanie, status, tickety) przełączanymi pigułkami 3D */
.dcx { margin-top: 26px; }
.dcx-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.dcx-banner { background: linear-gradient(135deg, #7a5cff, var(--accent) 55%, #ffc800); }
.dcx-note { margin-top: 10px; font-size: 12.5px; text-align: center; }
.dcx-win { overflow: hidden; border: 2px solid var(--line); border-radius: 22px; background: #313338; box-shadow: 0 4px 0 var(--line); }
.dcx-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 14px 12px; background: var(--card); border-bottom: 2px solid var(--line); }
.dcx-tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); color: var(--text-2);
  font: 800 13px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.dcx-tab:hover { background: var(--card-hi); color: var(--text); }
.dcx-tab:active { transform: translateY(3px); box-shadow: none; }
.dcx-tab.on { border-color: var(--accent); background: var(--violet-soft); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.dcx-chan { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #26272b; font: 600 15px 'Segoe UI', sans-serif; color: #f2f3f5; }
.dcx-chan span { font-size: 22px; color: #80848e; }
.dcx-msg { min-height: 260px; padding: 6px 4px 10px; }
@media (max-width: 1000px) { .dcx-grid { grid-template-columns: minmax(0, 1fr); } .dcx-profile { max-width: 340px; } }

@media (max-width: 1100px) {
  .wiz-body, .wiz-cols { grid-template-columns: minmax(0, 1fr); }
  .wiz-side { position: static; flex-direction: row; gap: 16px; }
  .wiz-side .wiz-mascot-slot { order: -1; width: 120px; height: 120px; }
  .wiz-bubble { margin-bottom: 0; }
  .wiz-bubble::after { display: none; }
  .wiz-preview { position: static; }
  .bot-hero { flex-wrap: wrap; }
}

/* stopka FiveHub na pulpicie bota */
.st-brand { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.st-brand.on { border-color: rgba(72, 32, 220, 0.22); background: var(--violet-soft); }
.st-brand b { font-weight: 500; font-size: 13.5px; }
.st-brand .pill { flex: none; }
.dc-subtext { margin-top: 2px; font-size: 12px; color: #949ba4; }

/* ---------------------------------------------------------------- zakładka „Postaw serwer” */

.section-label { margin: 26px 0 10px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.mod-card.static { cursor: default; }
.mod-card.static:hover { transform: none; border-color: var(--line); box-shadow: none; }
.mod-card.static:hover::before { opacity: 0; }

.create-web { display: flex; align-items: center; gap: 28px; padding: 30px 32px; overflow: hidden; isolation: isolate; }
.create-web::before { content: ''; position: absolute; inset: 0; z-index: -1; background: none; }
.create-web h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.035em; }
.create-web .dim { margin-top: 8px; max-width: 620px; }

.create-done-actions { margin: 14px 0 6px; flex-wrap: wrap; }

/* ---------- „Postaw serwer” w naszym stylu: fioletowa karta z ilustracją smoka budowniczego (brand/postaw-smok.jpg, 1400x850),
   ścieżka kroków jak w Duolingo, pod nią ciemna karta kroku z kafelkami wyboru 3D i dużymi przyciskami */
.cw-hero { --cw-wall: #4f29dc; --cw-floor: #9877fb; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 330px; padding: 28px 32px;
  border-radius: 24px; background: var(--cw-wall); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.cw-hero-t { position: relative; z-index: 1; width: min(520px, 50%); }
.cw-hero h1 { margin-top: 12px; font-size: 32px; font-weight: 900; line-height: 1.1; }
.cw-hero-t > p { margin-top: 6px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
/* obrazek zawsze cały, na pełną wysokość, przy prawej krawędzi; jego podłoga (od 65,2% wysokości) ciągnie się w lewo i łagodnie zanika w ścianę */
.cw-hero-art { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1400 / 850; pointer-events: none; }
.cw-hero-art img { position: relative; display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.cw-hero-art::before { content: ''; position: absolute; right: 100%; bottom: 0; height: 34.8%; width: 520px; background: linear-gradient(90deg, transparent, var(--cw-floor)); }
.cw-path { display: flex; align-items: center; margin-top: 22px; }
.cw-line { flex: 1; max-width: 46px; min-width: 14px; height: 5px; margin: 0 4px 22px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.cw-line.done { background: #fff; }
.cw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: default; }
.cw-step.s-done { cursor: pointer; }
.cw-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 15px; font-weight: 900; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.75); }
.s-done .cw-dot { background: #fff; border-color: #fff; color: var(--accent); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.s-now .cw-dot { background: var(--yellow, #ffc800); border-color: #fff; color: #3a2400; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.22); }
.cw-name { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.s-now .cw-name, .s-done .cw-name { color: #fff; }
.cw-step.s-done:hover .cw-dot { transform: scale(1.06); }

.cw-card { margin-top: 18px; padding: 26px 28px 24px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.cw-card .wz-title { font-size: 24px; font-weight: 900; letter-spacing: 0; }
.cw-card .field > span { font-size: 13px; font-weight: 800; }
.cw-card .field .input, .cw-card .keybox { height: 50px; border-radius: 14px; }
.cw-card .keybox { padding: 6px 6px 6px 16px; border: 2px solid var(--line-hi); }
.cw-card .wz-nav { border-top: 2px solid var(--line); }
.cw-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* pierwszy krok: gdzie stawiamy serwer (za darmo na komputerze albo hosting), dwa kafelki obok siebie */
.cw-packs.cw-where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* liczba slotów: rząd kafelków 3D z dużą liczbą (wybrany w pełnym fiolecie) */
.slot-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 66px; padding: 0 6px; border: 2px solid var(--line-hi); border-radius: 14px;
  background: var(--card-hi); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: border-color 0.15s, background 0.15s; }
.slot:hover { border-color: var(--accent); }
.slot:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-hi); }
.slot b { font-size: 20px; font-weight: 900; line-height: 1; }
.slot small { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.slot-own { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.slot-own > span { font-size: 13px; font-weight: 800; color: var(--text-2); }
.slot-own .input { width: 150px; height: 44px; font-weight: 800; }
.slot.on, .ec.on { border-color: var(--accent-hi); background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.slot.on small, .ec.on span, .ec.on small { color: rgba(255, 255, 255, 0.85); }
/* pytanie o Element Club przed slotami: liliowa ramka z wyjaśnieniem i linkiem do portalu, pod nią cztery kafelki (Nie mam, Argentum, Aurum, Platinum) */
.ec-card { display: flex; align-items: center; gap: 20px; margin: 4px 0 16px; padding: 20px 22px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #6a46f5, var(--accent) 70%); box-shadow: 0 4px 0 var(--accent-edge); }
.ec-card-t { flex: 1; min-width: 0; }
.ec-kicker { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 11.5px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.ec-card h3 { margin-top: 8px; font-size: 20px; font-weight: 900; }
.ec-card p { margin-top: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.ec-card .btn { margin-top: 12px; }
.ec-card-num { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 138px; height: 118px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.14); border: 2px solid rgba(255, 255, 255, 0.22); text-align: center; }
.ec-card-num b { font-size: 40px; font-weight: 900; line-height: 1; }
.ec-card-num small { margin-top: 6px; padding: 0 10px; font-size: 11.5px; font-weight: 800; line-height: 1.25; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 760px) { .ec-card { flex-direction: column; align-items: stretch; } .ec-card-num { width: auto; height: 90px; } }
.ec-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ec { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card-hi); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: border-color 0.15s, background 0.15s; }
.ec:hover { border-color: var(--accent); }
.ec:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-hi); }
.ec b { font-size: 15px; font-weight: 900; }
.ec span { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.ec small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 760px) { .ec-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* lokalizacja serwera na hostingu: menu jak wybór języka (przycisk na całą szerokość, lista miast z flagami) */
.region-pick { position: relative; }
.region-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; padding: 0 14px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card-hi);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: border-color 0.15s; }
.region-btn:hover, .region-pick.open .region-btn { border-color: var(--accent); }
.region-btn > .i { margin-left: auto; color: var(--muted); transition: transform 0.2s; }
.region-pick.open .region-btn > .i { transform: rotate(180deg); }
.region-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 16px; border: 2px solid var(--line-hi); background: var(--card);
  box-shadow: 0 5px 0 var(--line-hi), 0 18px 40px rgba(0, 0, 0, 0.45); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.15s; }
.region-pick.open .region-menu { opacity: 1; visibility: visible; transform: none; }
.region-menu button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 11px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.region-menu button:hover { background: var(--card-hi); }
.region-menu button.on { background: var(--accent); color: #fff; }
.region-menu button.on small { color: rgba(255, 255, 255, 0.8); }
.region-menu button > .i { margin-left: auto; }
.region-flag { flex: none; width: 28px; height: 21px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.region-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.region-t b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-t small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 2px solid var(--line-hi); border-radius: 20px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--line-hi); transition: background 0.15s, border-color 0.15s; }
.cw-pack:hover { background: var(--card-hi); }
.cw-pack:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-hi); }
.cw-pack.on { border-color: var(--accent-hi); background: var(--violet-soft); box-shadow: 0 4px 0 var(--accent-edge); }
/* polecana paczka (ESX Legacy, ma pigułkę „Polecana”) zawsze w pełnym fiolecie, wybrana dostaje białą obwódkę i biały ptaszek */
.cw-pack.rec { background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); border-color: var(--accent-hi); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.cw-pack.rec:hover { background: linear-gradient(135deg, #6a46f5, var(--accent-hi) 70%); }
.cw-pack.rec:active { box-shadow: 0 1px 0 var(--accent-edge); }
.cw-pack.rec .cw-pack-d, .cw-pack.rec .cw-pack-size { color: rgba(255, 255, 255, 0.85); }
.cw-pack.rec .pill-violet { background: #fff; color: var(--accent); }
.cw-pack.rec .cw-check { border-color: rgba(255, 255, 255, 0.55); }
.cw-pack.rec.on { border-color: #fff; box-shadow: 0 4px 0 var(--accent-edge), 0 0 0 4px rgba(72, 32, 220, 0.35); }
.cw-pack.rec.on .cw-check { background: #fff; border-color: #fff; color: var(--accent); }
.cw-pack-top { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; }
.cw-check { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; border: 2px solid var(--line-hi); color: transparent; }
.cw-pack.on .cw-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.cw-pack b { font-size: 17px; font-weight: 900; }
.cw-pack-d { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cw-pack-size { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.cw-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cw-sum > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card-hi); }
.cw-sum .coin { grid-row: span 2; width: 40px; height: 40px; }
.cw-sum .coin .i { width: 18px; height: 18px; }
.cw-sum > div > span:not(.coin) { font-size: 12px; font-weight: 700; color: var(--muted); }
.cw-sum b { font-size: 14.5px; font-weight: 900; min-width: 0; }
.cw-note { margin-top: 14px; font-size: 12.5px; }
.cw-lic .step .n { width: 32px; height: 32px; background: var(--accent); color: #fff; font-weight: 900; box-shadow: 0 3px 0 var(--accent-edge); }
.cw-lic .step .t { font-weight: 900; font-size: 15px; }
.cw-lic .step::before { left: 15px; width: 3px; border-radius: 2px; background: var(--line-hi); }
.cw-lic .input { height: 50px; border-radius: 14px; }
.cw-local { margin-top: 18px; }
@media (max-width: 1000px) { .cw-packs, .cw-packs.cw-where { grid-template-columns: minmax(0, 1fr); } .cw-sum { grid-template-columns: minmax(0, 1fr); } }

/* serwer gotowy: zielona karta jak powiadomienie „Gotowe!”, po prawej ilustracja smoka z pucharem na podium (brand/gotowe-smok.jpg, 960x778, ciasny kadr)
   na jednolitym tle w kolorze karty, bez poświat i przenikania. Większa niż karta (118% wysokości): dół podium chowa się za dolną krawędzią, jak w kartach Duolingo */
.cw-done { --done-bg: #03bb01; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 270px; margin-top: 18px; padding: 28px 32px;
  border-radius: 24px; color: #fff; background: var(--done-bg); box-shadow: 0 5px 0 #008a00; }
.cw-done-t { position: relative; z-index: 1; max-width: 60%; }
.cw-done h2 { font-size: 28px; font-weight: 900; }
.cw-done p { margin-top: 6px; font-size: 14.5px; color: rgba(255, 255, 255, 0.9); }
.cw-done .btn-white { color: #008a00; }
.cw-done-again { margin-top: 6px; color: #fff; font-weight: 800; }
.cw-done-art { position: absolute; top: 0; right: 0; height: 118%; aspect-ratio: 960 / 778; pointer-events: none; }
.cw-done-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }

/* ---------------------------------------------------------------- Zainstaluj skrypty: karty, okno skryptu, galeria */

/* fioletowa karta na górze jak boxy Duolingo: tytuł, wyszukiwarka i smok zza prawej dolnej krawędzi */
.shop-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 196px; padding: 26px 30px; border-radius: 24px; background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, #3a17c0); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.shop-hero-t { position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 560px; }
.shop-kicker { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 12.5px; font-weight: 800; }
.shop-hero h1 { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.shop-hero p { margin-top: 4px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.shop-search { position: relative; display: flex; align-items: center; margin-top: 18px; max-width: 460px; }
.shop-search > .i { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--accent); pointer-events: none; }
.shop-search input { width: 100%; height: 52px; padding: 0 84px 0 46px; border: 0; border-radius: 16px; background: #fff; color: #2a1a6e; font: 700 15px var(--font); outline: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.shop-search input::placeholder { color: #9c8fd0; }
.shop-search input:focus { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.shop-search kbd { position: absolute; right: 12px; border-color: #e2dbff; background: #f7f5ff; color: #6b5cae; pointer-events: none; }
/* ilustracja w prawej połowie karty (brand/sklep-smok.jpg): smok przy komputerze w fioletowym pokoju.
   Lewa krawędź przechodzi łagodnie w fiolet karty, obrazek wypełnia połowę i jest przycinany krawędziami karty. Bez animacji wejścia, stoi od razu. */
/* tło karty płynnie ciemnieje w prawo do koloru ściany z obrazka (#251168), a obrazek wchodzi długim, wygładzonym przenikaniem,
   więc nie widać granicy między fioletem karty a ilustracją */
.shop-hero { min-height: 260px; background: linear-gradient(90deg, var(--accent-hi) 0%, var(--accent) 26%, #3a1bb8 44%, #2c1484 58%, #251168 72%); }
.shop-hero-t { max-width: min(560px, 48%); }
.shop-art { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; pointer-events: none;
  --fade: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.42) 25%, rgba(0, 0, 0, 0.68) 34%, rgba(0, 0, 0, 0.88) 42%, #000 50%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.shop-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; -webkit-user-drag: none; }
@media (max-width: 1000px) { .shop-art { width: 46%; } }

/* kafelki kategorii: przyciski 3D z kolorową monetą, wybrany ma fioletową ramkę jak wybrana odpowiedź w Duolingo */
.shop-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 22px; }
.shop-cats button { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 10px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); color: var(--text-2); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: background 0.15s, color 0.15s; }
.shop-cats button:hover { background: var(--card-hi); color: var(--text); }
.shop-cats button:active { transform: translateY(3px); box-shadow: none; }
.shop-cats button.on { border-color: var(--accent); background: var(--violet-soft); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.shop-cats .coin { width: 26px; height: 26px; }
.shop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-head h2 { font-size: 20px; font-weight: 900; }
.shop-head .seg button .i { width: 13px; height: 13px; }
.shop-empty { display: flex; align-items: center; gap: 22px; padding: 26px 30px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.shop-empty-dragon { flex: none; width: 110px; height: 110px; }
.shop-empty-dragon svg { display: block; width: 100%; height: 100%; }
.shop-empty h3 { font-size: 19px; font-weight: 900; }
.shop-empty p { margin-top: 4px; color: var(--muted); }

/* karty skryptów: ramka 2px i krawędź 3D, po najechaniu lekko się unoszą */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.sc { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 2px solid var(--line); background: var(--card); cursor: pointer; box-shadow: 0 4px 0 var(--line); transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), border-color 0.15s, box-shadow 0.15s; }
.sc:hover { transform: translateY(-3px); border-color: var(--line-hi); box-shadow: 0 7px 0 var(--line-hi); }
.sc:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line-hi); }
.sc-cover { position: relative; aspect-ratio: 16 / 9; background: var(--bg-sunken) center / cover no-repeat; }
.sc-cover.empty { background: color-mix(in srgb, var(--tint) 55%, var(--card)); }
.sc-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.sc-cat { position: absolute; z-index: 1; top: 10px; left: 10px; height: 30px; padding: 0 12px 0 3px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: rgba(18, 18, 20, 0.82); color: #fff; font-size: 12px; font-weight: 800; }
.sc-cat .coin { width: 24px; height: 24px; }
.sc-installed { position: absolute; z-index: 1; bottom: 10px; right: 10px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 3px 0 #009a01; }
.sc-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.sc-play i { width: 0; height: 0; margin-left: 5px; border-left: 16px solid var(--accent); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sc-play.small { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.sc-play.small i { margin-left: 3px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.sc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sc-name { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); min-width: 0; }
.sc-meta > .coin { width: 22px; height: 22px; font-size: 9px; margin-right: -4px; }
.sc-meta > span { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.sc-meta .sc-by { flex: 1; min-width: 0; display: block; color: var(--text-2); }
.sc-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--line); }
.sc-fw { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--card-hi); border: 2px solid var(--line-hi); color: var(--text-2); font-size: 11.5px; font-weight: 800; }
/* karty „ładuje się” zamiast kręciołka */
.sc-skel { cursor: default; pointer-events: none; }
.sc-skel .sc-cover, .sc-skel .sc-body i { background: var(--card-hi); animation: skel 1.2s ease-in-out infinite alternate; }
.sc-skel .sc-body i { display: block; height: 14px; border-radius: 999px; }
.sc-skel .sc-body i:nth-child(1) { width: 70%; height: 18px; }
.sc-skel .sc-body i:nth-child(2) { width: 45%; }
.sc-skel .sc-body i:nth-child(3) { width: 30%; height: 30px; margin: 8px 0 0 auto; }
@keyframes skel { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sc-skel .sc-cover, .sc-skel .sc-body i { animation: none !important; } }

/* okno skryptu */
.sm-wrap { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 28px; }
.sm-bg { position: absolute; inset: 0; background: rgba(6, 7, 14, 0.7); }
.sm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; width: min(1240px, 100%); max-height: 100%; overflow: hidden; border-radius: 24px; border: 2px solid var(--line-hi); background: var(--card); box-shadow: 0 6px 0 var(--line-hi), 0 40px 100px -30px rgba(0, 0, 0, 0.95); }
.sm-media { position: relative; display: flex; flex-direction: column; min-width: 0; background: #07080d; }
.sm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #07080d; }
.sm-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.sm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(255, 255, 255, 0.75); font-size: 13px; background: radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--tint) 70%, white 8%), var(--tint) 45%, var(--bg-sunken) 100%); }
.sm-yt-link { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--accent); font: 800 12.5px var(--font); cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.sm-arrow { position: absolute; top: calc(50% - 60px); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #fff; color: var(--accent); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.sm-arrow:hover { background: #f1edff; }
.sm-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.sm-arrow.prev { left: 16px; }
.sm-arrow.next { right: 16px; }
.sm-thumbs { display: flex; gap: 10px; padding: 14px 16px; overflow-x: auto; border-top: 2px solid var(--line); background: var(--bg-sunken); }
.sm-thumb { position: relative; flex: none; width: 104px; height: 60px; padding: 0; border-radius: 14px; border: 3px solid transparent; background: #111 center / cover no-repeat; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; }
.sm-thumb:hover { opacity: 0.9; }
.sm-thumb.on { opacity: 1; border-color: var(--accent-hi); }
.sm-side { position: relative; display: flex; flex-direction: column; height: 0; min-height: 100%; align-self: stretch; border-left: 2px solid var(--line); background: var(--card); }
.sm-x { position: absolute; z-index: 1; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-hi); background: var(--card); color: var(--text-2); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.sm-x:hover { color: #fff; background: var(--card-hi); }
.sm-x:active { transform: translateY(3px); box-shadow: none; }
.sm-scroll { flex: 1; overflow-y: auto; padding: 24px 24px 28px; }
.sm-cat { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 3px; border-radius: 999px; background: var(--card-hi); border: 2px solid var(--line-hi); color: var(--text); font-size: 12px; font-weight: 800; }
.sm-cat .coin { width: 22px; height: 22px; }
.sm-scroll h2 { margin: 14px 44px 0 0; font-size: 26px; font-weight: 900; line-height: 1.15; }
.sm-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.sm-author b { display: block; font-weight: 900; font-size: 14px; }
.sm-author span { display: block; font-size: 12px; color: var(--muted); }
.sm-dl { display: inline-flex !important; align-items: center; gap: 5px; }
.sm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.sm-section { padding-top: 22px; }
.sm-label { margin-bottom: 10px; font-size: 16px; font-weight: 900; color: var(--text); }
.sm-section .on-server + .on-server { margin-top: 6px; }
.sm-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.65; user-select: text; word-break: break-word; }
.sm-desc .dc-h1, .sm-desc .dc-h2, .sm-desc .dc-h3 { color: var(--text); font-weight: 900; margin: 10px 0 4px; }
.sm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-facts > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 16px; background: var(--card-hi); border: 2px solid var(--line-hi); min-width: 0; }
.sm-facts span { font-size: 12px; font-weight: 700; color: var(--muted); }
.sm-facts b { font-weight: 900; font-size: 14px; }
.sm-fws { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12px; }
.sm-fws .muted { margin-right: 4px; }

@media (max-width: 1100px) {
  .sm { grid-template-columns: 1fr; height: 100%; overflow-y: auto; }
  .sm-media { min-height: 46vh; }
  .sm-side { border-left: 0; border-top: 2px solid var(--line); }
  .sm-scroll { overflow: visible; }
}

/* galeria w formularzu */
.me-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.me-item, .me-add { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; }
.me-item { background: var(--bg-sunken) center / cover no-repeat; border: 1px solid var(--line); overflow: hidden; }
.me-item.cover { box-shadow: 0 0 0 2px var(--violet-hi); border-color: transparent; }
.me-badge { position: absolute; left: 8px; bottom: 8px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 600; }
.me-act { position: absolute; left: 8px; bottom: 8px; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: rgba(14, 14, 13, 0.8); color: #fff; font: 500 10.5px var(--font); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.me-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 14, 13, 0.8); color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.me-x:hover { background: var(--red); }
.me-item:hover .me-act, .me-item:hover .me-x { opacity: 1; }
.me-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px dashed var(--line-hi); background: var(--bg-sunken); color: var(--muted); font: 11px var(--font); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.me-add:hover { border-color: var(--violet-line); color: var(--violet-text); }
.me-add b { color: var(--text); font-weight: 500; font-size: 12.5px; }
.me-yt-row { display: flex; gap: 8px; margin-top: 10px; }
.me-hint { display: block; margin: 8px 0 0 4px; font-size: 11.5px; color: var(--muted); }

.fw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fw-chip input { display: none; }
.fw-chip span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-hi); background: var(--bg-sunken); color: var(--text-2); font-size: 12.5px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.fw-chip input:checked + span { color: #fff; border-color: var(--accent); background: var(--accent); }
#publish-form .form-row, .se-form .form-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

.modal.modal-wide { width: 720px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.modal.modal-wide .modal-body { overflow-y: auto; }

/* dopasowanie paczki do serwera przed instalacją */
.fit-ctx { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fit-h { font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
.fit-list { display: flex; flex-direction: column; gap: 6px; }
.fit-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--fill-hi); }
.fit-row > .i { flex: none; margin-top: 2px; }
.fit-row .t { font-size: 13px; font-weight: 500; }
.fit-row .d { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.fit-ok > .i { color: var(--green); }
.fit-info > .i { color: var(--violet-text); }
.fit-warn > .i { color: var(--amber); }
.fit-error > .i { color: var(--red); }
.fit-error { box-shadow: inset 0 0 0 1px rgba(244, 104, 127, 0.35); }
.fit-verdict { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.fit-verdict p { font-size: 13px; line-height: 1.55; }
.fit-guide { padding: 12px 0; border-top: 1px solid var(--line); }
.fit-guide .t { font-size: 13px; font-weight: 500; }
.fit-guide .d { font-size: 12.5px; color: var(--text-2); margin: 4px 0 8px; line-height: 1.5; }
.fit-guide .code { white-space: pre-wrap; padding-right: 100px; }
.fit-change { border-top: 1px solid var(--line); padding: 10px 0; }
.fit-change summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12.5px; list-style: none; }
.fit-change summary::-webkit-details-marker { display: none; }
.fit-change .code { margin-top: 8px; max-height: 280px; overflow: auto; }

.my-script { grid-template-columns: 64px minmax(0, 1fr) auto auto !important; align-items: center; }
.my-cover { position: relative; width: 64px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: center / cover no-repeat; overflow: hidden; }
.my-cover:not([style*="url"]) { background: color-mix(in srgb, var(--tint) 55%, var(--card)); }
.warn-text { color: var(--amber) !important; }

/* ---------- ustawienia konta */
.field[hidden] { display: none; }
.user-av { display: block; flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #161825; -webkit-user-drag: none; }
.user-av.coin-sm { width: 30px; height: 30px; }
.coin-red { --c2: var(--red); }

/* ustawienia: fioletowa karta profilu jak boxy Duolingo, pod nią sekcje z wierszami bez ramek */
.set { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.set-hero { display: flex; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, #3a17c0); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.set-av { position: relative; flex: none; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1); }
.set-av:hover { transform: scale(1.04); }
.set .set-av-img { width: 104px; height: 104px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95); }
.set-av-edit { position: absolute; right: -2px; bottom: 2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 3px 0 #cfc3ff; }
.set-av-edit .i { width: 15px; height: 15px; }
.set-name { font-size: 26px; font-weight: 900; line-height: 1.2; }
.set-mail { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.set-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.set-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 12.5px; font-weight: 800; }
.set-sec { padding: 8px 10px 10px; }
.set-h { padding: 14px 12px 6px; font-size: 18px; font-weight: 900; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-lg); }
.set-row:has(.set-inline) { align-items: flex-start; } /* wiersz z polem do wpisania: ikonka przy tytule */
.set-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-t > b { font-size: 15px; font-weight: 900; }
.set-t > span { font-size: 13px; color: var(--muted); }
.set-t .conn { margin-top: 6px; }
.set-inline { display: flex; gap: 8px; margin-top: 10px; max-width: 460px; }
.set-inline .input { height: 44px; }
.set-inline .btn { height: 44px; }
.set-row > .pill { flex: none; }
/* wiersz aktualizacji: treść z updateRow() (tekst i przycisk) */
.set-upd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.set-upd > div:first-child { flex: 1; min-width: 0; }
.set-upd .t { font-size: 15px; font-weight: 900; }
.set-upd .d { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .set-hero { flex-wrap: wrap; } }

/* okno wyboru awatara: podgląd na górze, siatka kółek ze smokami; wybrany ma fioletową obwódkę i ptaszek */
.modal.modal-av { width: 640px; }
.modal.modal-av .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; }
.modal.modal-av .av-grid { max-height: 250px; }
.av-hero { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; border-radius: var(--r-lg); background: var(--bg-sunken); border: 2px solid var(--line); }
.av-hero .av-hero-img { width: 76px; height: 76px; box-shadow: 0 0 0 4px var(--bg-sunken), 0 0 0 6px var(--accent); }
.av-hero-name { font-size: 18px; font-weight: 900; }
.av-hero-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 8px; max-height: 360px; overflow-y: auto; padding: 4px 2px 8px; }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--text-2); font: 800 12px var(--font); cursor: pointer; }
.av-circle { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--line-hi); transition: box-shadow 0.12s, transform 0.12s; }
.av-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; -webkit-user-drag: none; }
.av-opt:hover .av-circle { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent-text); transform: translateY(-2px); }
.av-opt:hover { color: var(--text); }
.av-opt.on { color: var(--text); }
.av-opt.on .av-circle { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--accent); }
.av-opt.on .av-circle::after { content: '\2713'; position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 0 0 3px var(--card); }
.av-up .av-circle { background: var(--bg-sunken); color: var(--accent-text); box-shadow: none; border: 2px dashed var(--line-hi); }
.av-up .av-circle .i { width: 24px; height: 24px; }
.av-up:hover .av-circle { box-shadow: none; border-color: var(--accent-text); }
.code-flow .field:last-of-type { margin-bottom: 10px; }
.code-sent { font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.code-sent b { color: var(--text); font-weight: 500; }
.code-input { font: 600 22px var(--mono); letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; }
.code-input::placeholder { color: var(--faint); }
.code-target { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-sm); background: var(--fill, rgba(255, 255, 255, 0.03)); }
.code-target .t { font-size: 12px; color: var(--muted); }
.code-target .d { font-weight: 500; margin-top: 1px; }
.link-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* ---------- pulpit: postaw serwer, hosting, co daje FiveHub */
.home-playing { display: flex; align-items: center; gap: 8px; }
.home-playing b { color: var(--text); font-weight: 800; }
/* fioletowa karta „postaw serwer” jak w „Zainstaluj skrypty” i Discordzie: tekst i paczki po lewej, ilustracja smoka odpalającego serwer
   (brand/pulpit-smok.jpg, 1400x918, tło jednolite w kolorze karty) zawsze cała, na pełną wysokość, przy prawej krawędzi; może wejść pod tekst */
.home-hero { --home-bg: #4c1fde; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 380px; padding: 30px 32px;
  border-radius: 24px; background: var(--home-bg); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.home-hero-t { position: relative; z-index: 1; width: min(440px, 46%); }
.home-hero h2 { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.home-hero-t > p { margin-top: 6px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.home-hero-art { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1400 / 918; pointer-events: none; }
.home-hero-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.home-packs { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.home-pack { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border: 2px solid color-mix(in srgb, #fff 26%, var(--home-bg)); border-radius: 16px; background: color-mix(in srgb, #fff 15%, var(--home-bg));
  color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); transition: background 0.12s, color 0.12s; }
.home-pack:active { transform: translateY(3px); box-shadow: none; }
.home-pack-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-pack b { font-size: 15px; font-weight: 900; }
.home-pack small { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.home-pack > .i { color: rgba(255, 255, 255, 0.8); }
.home-pack:hover { background: #fff; color: var(--accent); }
.home-pack:hover small { color: #7a68c8; }
.home-pack:hover > .i { color: var(--accent); }
.home-hero-link { display: inline-block; margin-top: 14px; color: #fff; font-size: 13px; font-weight: 800; }
.home-hero-link:hover { color: #e4dcff; }
/* „Pierwsze kroki” jak ścieżka w Duolingo: pasek postępu i kroki z kółkami połączonymi linią.
   Liczba kolumn idzie z HOME_STEPS (--n), linia zaczyna się i kończy na środku pierwszego i ostatniego kółka.
   Zrobione: zielone kółko z ptaszkiem i pigułka „Gotowe”; aktualny: fioletowe kółko z pulsującą obwódką i fioletowy przycisk; dalsze: szare */
.home-steps { margin-top: 22px; padding: 22px 24px 24px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.home-steps-head { display: flex; align-items: center; gap: 12px; }
.home-steps-head h2 { font-size: 20px; font-weight: 900; }
.home-steps-meter { flex: 1; max-width: 260px; margin-left: auto; }
.home-path { --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.home-path::before { content: ''; position: absolute; left: calc((100% - (var(--n) - 1) * 14px) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * 14px) / var(--n) / 2); top: 27px; height: 6px; border-radius: 3px; background: var(--line-hi); }
.home-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.home-step-dot { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; background: var(--card-hi); border: 3px solid var(--line-hi); color: var(--muted); box-shadow: 0 4px 0 var(--line-hi); }
.home-step-dot .i { width: 24px; height: 24px; }
.home-step b { font-size: 15px; font-weight: 900; }
.home-step-d { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 210px; }
.home-step .btn { margin-top: 6px; }
.home-step .pill { margin: 11px 0 5px; } /* pigułka 24px w miejscu przycisku 34px: środek na tej samej wysokości co przyciski obok */
.home-step.step-done .home-step-dot { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 0 #009a01; }
.home-step.step-done b { color: var(--text-2); }
.home-step.step-now .home-step-dot { background: var(--accent); border-color: var(--accent-hi); color: #fff; box-shadow: 0 4px 0 var(--accent-edge), 0 0 0 6px rgba(72, 32, 220, 0.25); animation: step-pulse 2s ease-in-out infinite; }
@keyframes step-pulse { 50% { box-shadow: 0 4px 0 var(--accent-edge), 0 0 0 12px rgba(72, 32, 220, 0.08); } }
@media (prefers-reduced-motion: reduce) { .home-step.step-now .home-step-dot { animation: none; } }
@media (max-width: 900px) { .home-path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } .home-path::before { display: none; } }

/* polecane skrypty: te same karty co w „Zainstaluj skrypty”, cztery w rzędzie */
.home-scripts { margin: 26px 0 18px; container-type: inline-size; }
.home-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-sec-head h2 { font-size: 20px; font-weight: 900; }
.home-sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 860px) { .home-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* rekordy i odznaki na Pulpicie: mozaika kart jak boxy streak w Duolingo (szeroka i wąska na zmianę),
   tło karty to zmierzony kolor brzegów ilustracji z Weave (tools/build-records-art.js), więc obrazek nie ma granicy */
.home-stats { margin-top: 26px; container-type: inline-size; }
.rec-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 16px; }
.rec-wide { grid-column: span 5; }
.rec-narrow { grid-column: span 4; }
@container (max-width: 820px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } .rec-wide, .rec-narrow { grid-column: auto; } }
.rec-orange { --rc: #fe9104; --rc-edge: #d27400; --rc-sub: #fff1dc; --rc-ink: #fd9104; }
.rec-red { --rc: #791e1d; --rc-edge: #551211; --rc-sub: #ffb3ab; --rc-ink: #d8322d; }
.rec-violet { --rc: #4723d6; --rc-edge: #3114a6; --rc-sub: #d9ccff; --rc-ink: #4a24d7; }
.rec-indigo { --rc: #4d24e0; --rc-edge: #3114a6; --rc-sub: #d9ccff; --rc-ink: #4e25e0; }
.rec-blue { --rc: #26b0f6; --rc-edge: #0f86c4; --rc-sub: #e3f6ff; --rc-ink: #1898da; }
.rec-yellow { --rc: #fec404; --rc-edge: #d29e00; --rc-sub: #7a5200; --rc-ink: #5c3b00; }
.rec-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; min-height: 210px;
  border-radius: 24px; background: var(--rc); color: #fff; box-shadow: 0 5px 0 var(--rc-edge);
}
.rec-yellow { color: var(--rc-ink); }
.rec-t { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 24px 22px; max-width: 64%; }
.rec-narrow .rec-t { max-width: 47%; }
.rec-narrow .rec-big { font-size: 32px; }
.rec-kicker { font-size: 12.5px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rc-sub); opacity: 0.9; }
.rec-big { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 36px; font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.rec-big .i { flex: none; width: 30px; height: 30px; }
.rec-sub { font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--rc-sub); }
.rec-art { position: absolute; z-index: 0; top: 0; right: 0; height: 100%; width: auto; pointer-events: none; user-select: none; }

/* tydzień serii: kółka połączone paskiem, zrobione dni białe z ptaszkiem w kolorze karty */
.rec-week { position: relative; display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.rec-week::before { content: ''; position: absolute; left: 16px; right: 16px; bottom: 13px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.rec-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rec-day small { font-size: 12px; font-weight: 900; color: var(--rc-sub); }
.rec-day i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); font-style: normal; }
.rec-day i .i { width: 16px; height: 16px; color: var(--rc-ink); }
.rec-day-on i { background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
.rec-day-now i { background: transparent; box-shadow: inset 0 0 0 3px #fff; }

/* pasek do następnego poziomu na karcie skryptów */
.rec-meter { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; margin-top: auto; padding-top: 14px; }
.rec-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(92, 59, 0, 0.18); overflow: hidden; }
.rec-bar span { display: block; height: 100%; border-radius: inherit; background: #fff linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) no-repeat 6px 3px / calc(100% - 12px) 3px; }
.rec-meter small { font-size: 13px; font-weight: 900; }

/* odznaki: medal z Weave, pod nim wstążka z poziomem; zablokowany szary */
.badges-head { margin-top: 26px; }
.badge-list { border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.badge-row { display: flex; align-items: center; gap: 20px; padding: 18px 24px 20px; }
.badge-row + .badge-row { border-top: 2px solid var(--line); }
.badge-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.badge-name { display: flex; align-items: baseline; gap: 10px; }
.badge-name b { font-size: 17px; font-weight: 900; }
.badge-name span { font-size: 13px; font-weight: 800; color: var(--muted); }
.badge-goal { font-size: 14px; font-weight: 700; color: var(--text-2); }
.badge-meter { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.badge-meter .meter { flex: 1; }
.badge-meter small { min-width: 64px; text-align: right; font-size: 13px; font-weight: 800; color: var(--muted); }
.badge-meter small .i { color: var(--green); }
.meter-orange > span { background-color: #ff9600; }
.meter-blue > span { background-color: #1cb0f6; }
.meter-violet > span { background-color: var(--accent); }
.meter-yellow > span { background-color: #ffc800; }
.badge-orange { --b1: #ff9600; --b-edge: #c96f00; }
.badge-blue { --b1: #1cb0f6; --b-edge: #0f84bd; }
.badge-violet { --b1: #7d5cff; --b-edge: #3114a6; }
.badge-yellow { --b1: #ffc800; --b-edge: #b88a00; }
.badge-art { position: relative; flex: none; display: grid; place-items: center; width: 84px; height: 84px; }
.badge-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25)); }
.badge-art.locked img { filter: grayscale(1) brightness(0.55) contrast(0.9); opacity: 0.55; }
.badge-lvl {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--b1); box-shadow: 0 2px 0 var(--b-edge); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase;
}
.badge-yellow.badge-lvl { color: #5c3b00; }

/* świętowanie nowej odznaki: promienie w kolorze odznaki kręcą się za medalem, medal wyskakuje, konfetti */
.celebrate-bg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(6, 7, 14, 0.72); animation: fade-in 0.2s both; }
.celebrate-bg.out { opacity: 0; transition: opacity 0.2s; }
.celebrate {
  position: relative; overflow: hidden; width: 400px; max-width: 100%; padding: 0 30px 26px; text-align: center;
  border: 2px solid var(--line-hi); border-radius: 28px; background: var(--card); box-shadow: 0 6px 0 var(--line-hi), 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: celebrate-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.celebrate-stage { position: relative; display: grid; place-items: center; height: 250px; margin: 0 -30px 6px; }
.celebrate-rays {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: 0.32;
  background: repeating-conic-gradient(var(--b1) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: rays-spin 14s linear infinite;
}
.badge-art-big { width: 176px; height: 176px; animation: medal-pop 0.65s 0.12s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.badge-art-big .badge-lvl { bottom: -6px; padding: 4px 13px; font-size: 13px; box-shadow: 0 3px 0 var(--b-edge); }
.celebrate-kicker { font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b1); }
.celebrate h2 { margin-top: 2px; font-size: 30px; font-weight: 900; }
.celebrate p { margin: 4px 0 22px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.celebrate-ok { width: 100%; }
.celebrate-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.celebrate-confetti i {
  position: absolute; width: 9px; height: 15px; border-radius: 3px; background: #ffc800; opacity: 0;
  transform: rotate(calc(var(--i) * 16.36deg)) translateY(0);
  animation: confetti 1.2s calc(0.2s + var(--i) * 0.01s) cubic-bezier(0.2, 0.8, 0.4, 1) both;
}
.celebrate-confetti i:nth-child(4n + 1) { background: #1cb0f6; }
.celebrate-confetti i:nth-child(4n + 2) { background: #ff4b8b; }
.celebrate-confetti i:nth-child(4n + 3) { background: #7d5cff; }
@keyframes celebrate-in { from { opacity: 0; transform: translateY(30px) scale(0.92); } }
@keyframes medal-pop { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes confetti {
  15% { opacity: 1; }
  to { opacity: 0; transform: rotate(calc(var(--i) * 16.36deg)) translateY(-170px) rotate(240deg); }
}
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .celebrate, .celebrate-bg, .badge-art-big, .celebrate-rays { animation: none !important; }
  .celebrate-confetti { display: none; }
}
/* okno „Seria przedłużona” jak ekran serii w Duolingo: cała karta pomarańczowa, na środku animowany smok z ognia
   (brand/rekordy/smok-ogien.svg, animacja w samym pliku), ogromna jasnożółta liczba przeskakuje z wczoraj na dziś
   (stara odjeżdża w górę, nowa wskakuje z dołu z odbiciem), pasek tygodnia dojeżdża do dziś, biały przycisk */
.celebrate-streak {
  width: 520px; max-width: calc(100vw - 40px); padding: 18px 48px 40px; border: 0; border-radius: 32px; background: #ff9600; color: #fff;
  box-shadow: 0 6px 0 #c96f00, 0 40px 90px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: center;
}
.streak-fire { width: 340px; height: 350px; margin: -10px 0 -30px; object-fit: contain; pointer-events: none; }
.streak-num {
  position: relative; display: block; height: 132px; overflow: hidden; font-size: 132px; line-height: 132px; font-weight: 900; letter-spacing: -0.03em;
  color: #ffe9a0; text-shadow: 0 5px 0 rgba(176, 72, 0, 0.3);
}
.streak-num b { display: block; }
.streak-old { animation: streak-out 0.42s 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.streak-old + .streak-new { position: absolute; left: 0; right: 0; top: 0; transform: translateY(105%); animation: streak-in 0.62s 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.streak-new:only-child { animation: medal-pop 0.6s 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.streak-label { margin-top: 4px; font-size: 30px; font-weight: 900; }
.celebrate-streak .streak-sub { margin: 12px 0 0; max-width: 360px; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.celebrate-streak .celebrate-confetti { top: 380px; }
.celebrate-streak .celebrate-confetti i { animation-delay: calc(0.95s + var(--i) * 0.01s); }
.celebrate-streak .celebrate-confetti i:nth-child(4n) { background: #fff; }

/* pasek tygodnia: skróty dni, tor, wypełnienie od początku serii i gałka z płomieniem na dziś */
.streak-bar-days { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; margin-top: 40px; }
.streak-bar-days small { text-align: center; font-size: 14px; font-weight: 900; color: rgba(255, 255, 255, 0.82); }
.streak-bar-days small.today { color: #fff; }
.streak-bar { position: relative; width: 100%; height: 18px; margin: 14px 0 44px; border-radius: 99px; background: rgba(255, 255, 255, 0.3); }
.streak-bar-fill {
  position: absolute; top: 0; bottom: 0; left: var(--from); width: var(--today); border-radius: 99px;
  background: linear-gradient(90deg, #fff6c8, #ffffff); box-shadow: 0 0 14px rgba(255, 247, 200, 0.85);
  animation: bar-grow 0.7s 1.05s cubic-bezier(0.3, 1.2, 0.5, 1) both;
}
.streak-bar-knob {
  position: absolute; top: 50%; left: var(--knob); display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: #fff; color: #ff8a00; box-shadow: 0 3px 0 #e07a00, 0 0 0 6px rgba(255, 255, 255, 0.28);
  animation: day-pop 0.6s 1.55s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
.streak-bar-knob .i { width: 18px; height: 18px; }
.streak-bar-knob::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #fff; opacity: 0; animation: day-ring 0.8s 1.75s ease-out both; }
.streak-ok { --edge-c: #d97400; width: 100%; border-color: #fff; background: #fff; color: #ff8a00; }
.streak-ok:hover { background: #fff7e6; border-color: #fff7e6; }
@keyframes streak-out { to { transform: translateY(-105%); opacity: 0; } }
@keyframes streak-in { to { transform: translateY(0); } }
@keyframes bar-grow { from { width: var(--yday); } }
@keyframes day-pop { from { transform: scale(0); } }
@keyframes day-ring { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .streak-new:only-child, .streak-bar-fill, .streak-bar-knob, .streak-bar-knob::after { animation: none !important; }
  .streak-old { display: none; }
  .streak-old + .streak-new { position: static; transform: none; animation: none; }
}
/* wielkie momenty (pierwszy gracz, rekord, gotowy serwer, urodziny): okno jak ekran serii, cała karta w kolorze momentu,
   na środku płaski smok w tym kolorze (heroDragon w app.js) z ruchem w CSS, duży tekst, podpis i biały przycisk */
.celebrate-moment {
  width: 520px; max-width: calc(100vw - 40px); padding: 22px 48px 40px; border: 0; border-radius: 32px; color: #fff;
  background: var(--mc); box-shadow: 0 6px 0 var(--mc-edge), 0 40px 90px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: center;
}
.moment-violet { --mc: #4820dc; --mc-edge: #3114a6; --mc-ink: #4820dc; --mc-big: #e9e1ff; }
.moment-blue { --mc: #1cb0f6; --mc-edge: #0f84bd; --mc-ink: #1590d2; --mc-big: #ffffff; }
.moment-green { --mc: #12bf12; --mc-edge: #008a01; --mc-ink: #00a301; --mc-big: #f0ffe4; }
.moment-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); font-size: 13px; font-weight: 900; }
.moment-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-dragon { width: 370px; height: 344px; margin: -4px 0 -14px; overflow: visible; }
.moment-big {
  max-width: 100%; text-align: center; overflow-wrap: anywhere; font-size: 96px; line-height: 1.05; font-weight: 900; letter-spacing: -0.02em;
  color: var(--mc-big); text-shadow: 0 5px 0 rgba(0, 0, 0, 0.16); animation: medal-pop 0.6s 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.moment-big.long { font-size: 60px; }
.moment-label { margin-top: 6px; text-align: center; font-size: 26px; font-weight: 900; line-height: 1.25; }
.celebrate-moment .moment-sub { margin: 12px 0 34px; max-width: 380px; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.moment-ok { --edge-c: var(--mc-edge); width: 100%; border-color: #fff; background: #fff; color: var(--mc-ink); }
.moment-ok:hover { background: #f4f4ff; border-color: #f4f4ff; }
.celebrate-moment .celebrate-confetti { top: 290px; }
.celebrate-moment .celebrate-confetti i { animation-delay: calc(0.5s + var(--i) * 0.01s); }
.celebrate-moment .celebrate-confetti i:nth-child(4n) { background: #fff; }

/* ruch smoka w oknach momentów: kołysanie, machanie łapką (z pucharem wolniej), mruganie, czapeczka, iskierki, poświata */
.hero-dragon .hd-root { transform-box: view-box; transform-origin: 200px 386px; animation: hd-bob 2.4s ease-in-out infinite; }
.hero-dragon .hd-arm-r { transform-box: view-box; transform-origin: 330px 250px; animation: hd-wave 1.1s ease-in-out infinite; }
.hero-dragon .hd-arm-r.hd-slow { animation: hd-lift 1.8s ease-in-out infinite; }
.hero-dragon .hd-arm-l { transform-box: view-box; transform-origin: 70px 250px; animation: hd-wave-l 1.1s ease-in-out -0.55s infinite; }
.hero-dragon .hd-eyes { transform-box: view-box; transform-origin: 200px 194px; animation: hd-blink 3.6s infinite; }
.hero-dragon .hd-hat { transform-box: view-box; transform-origin: 200px 92px; animation: hd-hat 1.2s ease-in-out infinite; }
.hero-dragon .hd-glow { transform-box: view-box; transform-origin: 200px 200px; animation: hd-glow 2.4s ease-in-out infinite; }
.hero-dragon .hd-spark { transform-box: fill-box; transform-origin: center; animation: hd-twinkle 1.8s ease-in-out infinite both; }
@keyframes hd-bob { 50% { transform: translateY(-12px); } }
@keyframes hd-wave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(12deg); } }
@keyframes hd-wave-l { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-12deg); } }
@keyframes hd-lift { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg) translateY(-6px); } }
@keyframes hd-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes hd-hat { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hd-glow { 50% { transform: scale(1.06); opacity: 0.8; } }
@keyframes hd-twinkle { 0%, 100% { transform: scale(0.35); opacity: 0.25; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-dragon *, .moment-big { animation: none !important; } }

/* nagrody za serię: pomarańczowa obwódka awatara od 30 dni i bonus asystenta od 7 dni */
/* obwódki awatara (FRAMES w app.js): pierścień za awatarem z maską, więc nie zmienia jego rozmiaru ani układu;
   kolor i poświata z --fr i --fr-glow, Smocza i Legenda kręcą się w kółko */
.av-frame { --fw: 4px; position: relative; display: inline-flex; flex: none; border-radius: 50%; isolation: isolate; }
.av-frame::before {
  content: ''; position: absolute; z-index: -1; inset: calc(-1 * var(--fw) - 2px); border-radius: 50%; background: var(--fr);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 0.5px));
}
.av-frame::after { content: ''; position: absolute; z-index: -2; inset: calc(-1 * var(--fw) - 2px); border-radius: 50%; box-shadow: 0 0 12px 2px var(--fr-glow, transparent); pointer-events: none; }
.av-frame .pm-av, .av-frame .av-hero-img { box-shadow: none; }
.fr-starter { --fr: conic-gradient(#00c301, #7be35a, #00c301, #7be35a, #00c301); --fr-glow: rgba(0, 195, 1, 0.3); }
.fr-crowd { --fr: conic-gradient(#1cb0f6, #9be0fd, #1cb0f6, #9be0fd, #1cb0f6); --fr-glow: rgba(28, 176, 246, 0.4); }
.fr-community { --fr: conic-gradient(#7d5cff, #c3b2ff, #7d5cff, #c3b2ff, #7d5cff); --fr-glow: rgba(125, 92, 255, 0.45); }
.fr-collector { --fr: conic-gradient(from 30deg, #ffc800, #fff1a8, #e8a400, #fff1a8, #ffc800); --fr-glow: rgba(255, 200, 0, 0.4); }
.fr-fire { --fr: conic-gradient(#ff9600, #ffd23a, #ff5a00, #ffd23a, #ff9600); --fr-glow: rgba(255, 150, 0, 0.5); }
.fr-birthday { --fr: repeating-conic-gradient(#ff4b8b 0 22.5deg, #ffc800 22.5deg 45deg); --fr-glow: rgba(255, 75, 139, 0.4); }
.fr-dragon { --fr: conic-gradient(#ff3d00, #ff9600, #ffe14d, #ff9600, #ff3d00); --fr-glow: rgba(255, 90, 0, 0.6); --fw: 5px; }
.fr-legend { --fr: conic-gradient(#ff4b4b, #ff9600, #ffc800, #00c301, #1cb0f6, #7d5cff, #ff4b8b, #ff4b4b); --fr-glow: rgba(164, 140, 255, 0.55); --fw: 5px; }
.fr-dragon::before { animation: fr-spin 2.6s linear infinite; }
.fr-legend::before { animation: fr-spin 4s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fr-dragon::before, .fr-legend::before { animation: none; } }

/* wybór obwódki w oknie awatara: podgląd na aktualnym awatarze, zablokowane szare z kłódką i warunkiem */
.av-hero .av-frame { --fw: 5px; }
.fr-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 12px; }
.fr-head b { font-size: 15px; font-weight: 900; }
.fr-head span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 8px; padding: 4px 2px 6px; }
.fr-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 16px; background: none; color: var(--text-2); font: 800 12px var(--font); cursor: pointer; }
.fr-opt:hover { background: var(--card-hi); color: var(--text); }
.fr-opt.on { border-color: var(--accent); background: rgba(72, 32, 220, 0.14); color: var(--text); }
.fr-opt small { font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--muted); text-align: center; }
.fr-prev { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; }
.fr-prev .user-av { width: 52px; height: 52px; }
.fr-opt.locked .fr-prev .av-frame, .fr-opt.locked .fr-prev .user-av { filter: grayscale(1) brightness(0.55); }
.fr-lock { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card-hi); border: 2px solid var(--line-hi); font-style: normal; color: var(--muted); }
.fr-lock .i { width: 12px; height: 12px; }
.pm-streak { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 150, 0, 0.16); color: #ff9600; font-size: 12px; font-weight: 900; }
.asst-bonus { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: #ff9600; }
.plan-bonus { margin: 14px 0; padding: 12px 16px; border: 2px solid rgba(255, 150, 0, 0.35); border-radius: 16px; background: rgba(255, 150, 0, 0.1); font-size: 14px; }

/* ---------- okno „Dodaj serwer”: dwie opcje jako wiersze */
.add-opts { display: flex; flex-direction: column; gap: 8px; }
.add-opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: var(--r); background: var(--inactive); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.12s; }
.add-opt-ico { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg); color: var(--accent-text); transition: background 0.12s, color 0.12s; }
.add-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.add-opt-t b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.add-opt-t small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.add-opt > .i { flex: none; color: var(--muted); }
.add-opt:hover { background: var(--accent); }
.add-opt:hover .add-opt-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.add-opt:hover small, .add-opt:hover > .i { color: rgba(255, 255, 255, 0.8); }
.add-opt:hover .pill-violet { background: rgba(255, 255, 255, 0.2); }

/* podziękowania (licencje) na dole Ustawień */
.attribution { color: var(--muted); font-size: 12px; text-align: center; margin-top: 4px; }

/* ---------- szukaj wszędzie (Ctrl+K): przycisk na górnym pasku i okno z wynikami */
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font: 800 13px var(--font); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.search-btn:hover { color: var(--text); border-color: var(--line-hi); }
.search-btn .i { width: 15px; height: 15px; }
.search-btn kbd { margin-left: 6px; }
.cmdk-bg { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(5, 5, 8, 0.6); }
.cmdk { width: min(620px, calc(100vw - 40px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--line-hi); border-radius: 20px; box-shadow: 0 6px 0 var(--bg-sunken), 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; animation: card-in 0.25s cubic-bezier(0.3, 1.35, 0.5, 1); }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 2px solid var(--line); flex: none; }
.cmdk-input .i { width: 18px; height: 18px; color: var(--muted); }
.cmdk-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 800 16px var(--font); }
.cmdk-input input::placeholder { color: var(--muted); font-weight: 700; }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-group { padding: 10px 10px 6px; color: var(--muted); font: 900 11px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: 800 14px var(--font); text-align: left; cursor: pointer; }
.cmdk-item .i { width: 17px; height: 17px; color: var(--muted); }
.cmdk-item.on { background: var(--accent); color: #fff; }
.cmdk-item.on .i, .cmdk-item.on .cmdk-sub { color: #fff; }
.cmdk-sub { color: var(--muted); font-size: 12px; font-weight: 700; }
.cmdk-empty { padding: 26px 10px; text-align: center; color: var(--muted); font-weight: 800; }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 2px solid var(--line); color: var(--muted); font-size: 12px; flex: none; }
.cmdk-foot kbd { margin-right: 4px; }

/* ---------------------------------------------------------------- Odkrywaj serwery: lista jak tabela ligi w Duolingo
   (miejsce, ikona, nazwa i opis, gracze z paskiem, „Dołącz”), pierwsze trzy miejsca z medalem; okno serwera z bannerem */
/* fioletowa karta na górze jak w „Zainstaluj skrypty”: tytuł, kraj, wyszukiwarka i liczniki po lewej, ilustracja smoka przed telewizorem
   (brand/odkrywaj-smok.jpg, 1400x794, tło jednolite w kolorze karty) zawsze cała, na pełną wysokość, przy prawej krawędzi; może wejść pod tekst */
.dsc-hero { --dsc-bg: #4d24d9; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 330px; padding: 28px 32px;
  border-radius: 24px; background: var(--dsc-bg); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.dsc-hero-t { position: relative; z-index: 1; width: min(560px, 52%); }
.dsc-hero h2 { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.15; }
.dsc-hero-t > p { margin: 4px 0 18px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.dsc-hero-art { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1400 / 794; pointer-events: none; }
.dsc-hero-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.dsc-hero .dsc-country { border-color: #fff; background: #fff; color: #2a1a6e; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.dsc-hero .dsc-country:hover { background: #f1edff; }
.dsc-hero .dsc-country > .i { color: var(--accent); }
.dsc-hero .dsc-stats .pill { background: rgba(255, 255, 255, 0.18); color: #fff; }
.dsc-hero .dsc-upd { color: rgba(255, 255, 255, 0.75); }
.dsc-hero .dsc-search { flex-basis: 240px; }
.dsc-bar-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dsc-search { position: relative; display: flex; align-items: center; flex: 1 1 360px; max-width: 520px; }
.dsc-search > .i { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--accent); pointer-events: none; }
.dsc-search input { width: 100%; height: 52px; padding: 0 18px 0 46px; border: 0; border-radius: 16px; background: #fff; color: #2a1a6e; font: 700 15px var(--font); outline: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.dsc-search input::placeholder { color: #9c8fd0; }
.dsc-search input:focus { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.dsc-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsc-stats .pill .i { width: 12px; height: 12px; }
.dsc-stats .dot { width: 7px; height: 7px; }
.dsc-upd { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.dsc-cats { margin: 22px 0 22px; }
.dsc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.dsc-row { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 14px 18px 14px 14px; border: 2px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 0 var(--line); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dsc-row:hover { border-color: var(--line-hi); background: var(--card-hi); }
.dsc-ours .dsc-row { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-edge); }
.dsc-rank { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font: 900 15px var(--font); }
.dsc-rank-1, .dsc-rank-2, .dsc-rank-3 { color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.dsc-rank-1 { background: #ffc800; color: #6b4b00; }
.dsc-rank-2 { background: #c9d2e3; color: #3b4458; }
.dsc-rank-3 { background: #e5884a; color: #5a2a0c; }
/* „Tu mógłby być Twój serwer”: fioletowy wiersz na samej górze „Wszystkie”, złota korona zamiast miejsca, kafelek z plusem, biały przycisk */
.dsc-yours { border-color: var(--accent-hi); background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.dsc-yours:hover { border-color: var(--accent-hi); background: linear-gradient(135deg, #6a46f5, var(--accent-hi) 70%); }
.dsc-yours .dsc-name { color: #fff; }
.dsc-yours .dsc-host { color: rgba(255, 255, 255, 0.85); }
.dsc-rank-you { background: #ffc800; color: #6b4b00; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.dsc-rank-you .i { width: 16px; height: 16px; }
.dsc-ic.dsc-ic-you { display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.14); color: #fff; }
.dsc-ic.dsc-ic-you .i { width: 22px; height: 22px; }
.dsc-yours .btn-white { color: var(--accent); }
.dsc-ic { flex: none; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; background: var(--card-hi); }
.coin.dsc-ic { font-size: 18px; }
.dsc-main { flex: 1; min-width: 0; }
.dsc-name { font-size: 16.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsc-host { margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dsc-tags .pill { height: 22px; font-size: 11.5px; }
.dsc-tags .pill .i { width: 11px; height: 11px; }
.dsc-pl { flex: none; width: 112px; text-align: right; }
.dsc-pl b { font: 900 18px var(--font); }
.dsc-pl small { color: var(--muted); font-size: 13px; font-weight: 800; }
.dsc-pl.empty b { color: var(--muted); }
.dsc-bar { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--fill-hi); overflow: hidden; }
.dsc-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--green); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25); }
.dsc-join { flex: none; }
.dsc-more { display: flex; justify-content: center; min-height: 40px; margin: -6px 0 30px; }
.dsc-loading { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; }
/* lista wirtualna: wiersze na stałych pozycjach (104 px + 10 px odstępu), w DOM tylko widoczne; pigułki w jednej linii, żeby wysokość się nie zmieniała */
.dsc-vlist { position: relative; margin-bottom: 26px; }
.dsc-vlist .dsc-row { position: absolute; left: 0; right: 0; height: 104px; min-height: 0; box-sizing: border-box; }
.dsc-vlist .dsc-tags { flex-wrap: nowrap; overflow: hidden; }
.dsc-yours-list { margin-bottom: 10px; }
.dsc-skel { pointer-events: none; }
.dsc-skel .dsc-rank, .dsc-skel .dsc-ic, .dsc-skel .dsc-main i { background: var(--card-hi); animation: skel 1.2s ease-in-out infinite alternate; }
.dsc-skel .dsc-main i { display: block; height: 14px; width: 40%; border-radius: 999px; }
.dsc-skel .dsc-main i + i { width: 65%; margin-top: 10px; }
@media (max-width: 760px) { .dsc-pl { display: none; } }

.modal.dsc-modal { width: 560px; }
.dsc-banner { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 16px; margin-bottom: 16px; background: var(--card-hi); }
.dsc-m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dsc-m-stats > div { padding: 12px 14px; border: 2px solid var(--line-hi); border-radius: 16px; }
.dsc-m-stats b { display: block; font: 900 20px var(--font); }
.dsc-m-stats small { color: var(--muted); font-size: 13px; }
.dsc-m-stats span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.dsc-m-desc { margin: 16px 0 0; color: var(--text-2); font-weight: 700; line-height: 1.55; }
.dsc-m-wl { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--violet-soft); }
.dsc-m-wl > .i { flex: none; margin-top: 3px; color: var(--accent-text); }
.dsc-m-wl p { margin: 2px 0 0; color: var(--text-2); font-weight: 700; white-space: pre-line; }
.dsc-m-link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 8px 8px 14px; border: 2px solid var(--line-hi); border-radius: 14px; }
.dsc-m-link > .i { color: var(--muted); }

/* wykres graczy z 14 dni w oknie serwera (mountHistory w app.js): karta z krawędzią 3D, fioletowa linia z polem, kafelki statystyk */
.dsc-hist { margin-top: 14px; padding: 14px 16px 16px; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line-hi); }
.dsc-hist-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dsc-hist-head > b { display: inline-flex; align-items: center; gap: 8px; font: 900 15px var(--font); }
.dsc-hist-head > b > .i { color: var(--accent-text); }
.dsc-seg { padding: 3px; gap: 3px; }
.dsc-seg button { height: 28px; padding: 0 10px; font-size: 12px; }
.dsc-hist-wait { display: grid; place-items: center; height: 150px; margin: 0; color: var(--muted); font-weight: 700; }
.dsc-chart { position: relative; height: 150px; cursor: crosshair; }
.dsc-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dsc-grid { stroke: var(--line-hi); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dsc-area { fill: var(--violet-soft); }
.dsc-line { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dsc-y { position: absolute; left: 0; transform: translateY(-120%); color: var(--muted); font-size: 11px; font-weight: 800; pointer-events: none; }
.dsc-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; }
.dsc-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--violet-line); pointer-events: none; }
.dsc-guide > i { position: absolute; left: -8px; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent-text); }
.dsc-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; padding: 6px 10px; border: 2px solid var(--line-hi); border-radius: 10px; background: var(--card-hi); white-space: nowrap; pointer-events: none; }
.dsc-tip small { color: var(--muted); font-size: 11.5px; font-weight: 800; }
.dsc-tip b { font: 900 14px var(--font); }
.dsc-hist-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.dsc-hist-stats > div { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--card-hi); }
.dsc-hist-stats b { display: flex; align-items: center; gap: 5px; font: 900 18px var(--font); }
.dsc-hist-stats span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.dsc-hist-stats small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.dsc-hist-stats .up b { color: var(--green); }
.dsc-hist-stats .down b { color: var(--red); }
.dsc-hist-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.dsc-hist-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--violet-soft); }
.dsc-hist-empty > .i { font-size: 26px; color: var(--accent-text); }
.dsc-hist-empty p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; font-weight: 700; }
@media (max-width: 600px) { .dsc-hist-stats { grid-template-columns: repeat(2, 1fr); } }

/* wybór kraju w „Odkrywaj serwery”: przycisk jak kafelek 3D z kodem kraju, okno z szukaniem i listą krajów */
.dsc-country { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 10px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); color: var(--text); font: 800 15px var(--font); cursor: pointer; box-shadow: 0 4px 0 var(--line-hi); transition: background 0.15s; }
.dsc-country:hover { background: var(--card-hi); }
.dsc-country:active { transform: translateY(4px); box-shadow: none; }
.dsc-country > .i { color: var(--muted); }
.dsc-cc { flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--accent); color: #fff; font: 900 12.5px var(--font); letter-spacing: 0.04em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.dsc-cc .i { width: 15px; height: 15px; }
/* kraj z flagą: zaokrąglony box z flagą 4:3, cienka jasna ramka i krawędź 3D na dole */
.dsc-cc.dsc-flag { width: 40px; min-width: 40px; height: 30px; padding: 0; overflow: hidden; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12), 0 3px 0 rgba(0, 0, 0, 0.22); }
.dsc-cc.dsc-flag img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.dsc-pflag { width: 18px; height: 13px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.dsc-stats { margin-top: 16px; }
.modal.dsc-cmodal { width: 520px; }
.dsc-cs { max-width: none; margin-bottom: 12px; }
.dsc-cs input { height: 46px; border-radius: 14px; }
.dsc-clist { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; margin: 0 -6px; padding: 0 6px 4px; }
.dsc-citem { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 8px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--text); font: 800 14.5px var(--font); text-align: left; cursor: pointer; }
.dsc-citem:hover { background: var(--card-hi); }
.dsc-citem.on { border-color: var(--accent); background: var(--violet-soft); }
.dsc-cn { color: var(--muted); font-size: 12.5px; font-weight: 700; }

/* ---------------------------------------------------------------- Zamów skrypt: skrypty na zamówienie u developerów FiveHub
   fioletowa karta z ilustracją smoka developera (brand/zamow-smok.jpg, 1400x928, tło jednolite w kolorze karty), „Jak to działa”,
   trzy pakiety z ceną (środkowy polecany w pełnym fiolecie), formularz, Twoje zamówienia i najczęstsze pytania */
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.ord-hero { --ord-bg: #4e22d6; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 340px; padding: 30px 32px;
  border-radius: 24px; background: var(--ord-bg); color: #fff; box-shadow: 0 5px 0 var(--accent-edge); }
.ord-hero-t { position: relative; z-index: 1; width: min(520px, 50%); }
.ord-hero h2 { margin-top: 12px; font-size: 32px; font-weight: 900; line-height: 1.1; }
.ord-hero-t > p { margin: 6px 0 16px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.ord-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ord-perks span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 12.5px; font-weight: 800; }
.ord-hero-art { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1400 / 928; pointer-events: none; }
.ord-hero-art img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.ord-hero .btn-white { color: var(--accent); }

.ord-sec { margin-top: 28px; }
.ord-sec-note { font-size: 13px; font-weight: 700; }
.ord-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ord-how-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 2px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 0 var(--line); }
.ord-how-step .coin { margin-bottom: 6px; }
.ord-how-step b { font-size: 16px; font-weight: 900; }
.ord-how-step > span:last-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.ord-how-n { position: absolute; top: 14px; right: 16px; color: var(--line-hi); font: 900 28px/1 var(--font); }

.ord-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ord-pack { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 2px solid var(--line-hi); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line-hi); }
.ord-pack.on { border-color: var(--accent-hi); box-shadow: 0 4px 0 var(--accent-edge); }
.ord-pack-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ord-pack-name { font-size: 19px; font-weight: 900; }
.ord-pack-d { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ord-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; font: 900 32px/1 var(--font); }
.ord-price small { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--muted); }
.ord-feats { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 18px; padding: 0; list-style: none; }
.ord-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.ord-feats .i { flex: none; margin-top: 2px; color: var(--green); }
.ord-pick { width: 100%; }
/* polecany pakiet zawsze w pełnym fiolecie jak ESX w „Postaw serwer” */
.ord-pack.rec { background: linear-gradient(160deg, var(--accent-hi), var(--accent) 65%); border-color: var(--accent-hi); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.ord-pack.rec.on { border-color: #fff; box-shadow: 0 4px 0 var(--accent-edge), 0 0 0 4px rgba(72, 32, 220, 0.35); }
.ord-pack.rec .ord-pack-d, .ord-pack.rec .ord-feats li, .ord-pack.rec .ord-price small { color: rgba(255, 255, 255, 0.85); }
.ord-pack.rec .ord-feats .i { color: #fff; }
.ord-pack.rec .pill-violet { background: #fff; color: var(--accent); }
.ord-pack.rec .btn-white { color: var(--accent); }

.ord-form-card { margin-top: 28px; padding: 26px 28px 24px; border: 2px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line); scroll-margin-top: 16px; }
.ord-form-head h2 { font-size: 22px; font-weight: 900; }
.ord-form-head p { margin-top: 4px; }
.ord-chosen { color: var(--accent-text); font-weight: 900; }
.ord-form { margin-top: 18px; }
.ord-form .field > span { font-size: 13px; font-weight: 800; }
.ord-form .input { border-radius: 14px; }
.ord-form input.input, .ord-form select.input { height: 50px; }
.ord-form .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ord-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-chip { height: 42px; padding: 0 16px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); color: var(--text-2); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.ord-chip:hover { background: var(--card-hi); color: var(--text); }
.ord-chip:active { transform: translateY(3px); box-shadow: none; }
.ord-chip.on { border-color: var(--accent); background: var(--violet-soft); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.ord-submit { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 2px solid var(--line); }
.ord-submit p { flex: 1; font-size: 13px; }
.ord-mine { margin-top: 28px; scroll-margin-top: 16px; }
.ord-row { cursor: default; }
.ord-row:hover { background: transparent; }

.ord-faq { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.ord-q { border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 3px 0 var(--line); }
.ord-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 15px; font-weight: 900; cursor: pointer; list-style: none; }
.ord-q summary::-webkit-details-marker { display: none; }
.ord-q summary .i { color: var(--muted); transition: transform 0.2s; }
.ord-q[open] summary .i { transform: rotate(180deg); }
.ord-q p { padding: 0 18px 16px; color: var(--text-2); font-size: 14px; font-weight: 600; }
@media (max-width: 1000px) { .ord-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ord-packs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- wybór języka panelu (Ustawienia, sekcja Aplikacja): pigułka z flagą i lista języków jak menu konta */
.lang-pick { position: relative; flex: none; }
.lp-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 10px; border-radius: 12px; border: 2px solid var(--line-hi); background: var(--card-hi);
  color: var(--text); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: border-color 0.15s; }
.lp-btn:hover, .lang-pick.open .lp-btn { border-color: var(--accent); }
.lp-btn .i { color: var(--muted); transition: transform 0.2s; }
.lang-pick.open .lp-btn .i { transform: rotate(180deg); }
.lp-flag { width: 22px; height: 16px; border-radius: 4px; object-fit: cover; flex: none; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 200px; padding: 6px; border-radius: 16px; border: 2px solid var(--line-hi); background: var(--card);
  box-shadow: 0 5px 0 var(--line-hi), 0 18px 40px rgba(0, 0, 0, 0.45); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.15s; }
.lang-pick.open .lp-menu { opacity: 1; visibility: visible; transform: none; }
.lp-menu button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: none; color: var(--text-2); font: 800 14px var(--font); text-align: left; cursor: pointer; }
.lp-menu button:hover { background: var(--card-hi); color: var(--text); }
.lp-menu button.on { background: var(--accent); color: #fff; }
.lp-menu button .i { margin-left: auto; }
/* pierwsze uruchomienie w innym języku: treść czeka chwilę na słownik */
html.lang-wait #shell, html.lang-wait #auth { visibility: hidden; }

/* ---------------------------------------------------------------- Administrator (renderAdmin w app.js) */
.page-head [data-adm-refresh] { margin-left: auto; }
.adm-tabs { margin-bottom: 18px; }
/* cztery główne liczby jak karty Duolingo: pełny kolor, krawędź 3D, gruba liczba i krótki podpis */
.adm-heroes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.adm-hero { padding: 18px 20px; border-radius: var(--r-xl); color: #fff; min-width: 0; }
.adm-hero .k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.adm-hero .v { margin-top: 8px; font-size: 32px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adm-hero .d { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-violet { background: linear-gradient(160deg, #5a33ee, #4820dc); box-shadow: 0 4px 0 #3114a6; }
.adm-blue { background: linear-gradient(160deg, #3cbcf8, #1cb0f6); box-shadow: 0 4px 0 #1488c0; }
.adm-orange { background: linear-gradient(160deg, #ffa61f, #ff9600); box-shadow: 0 4px 0 #cc7700; }
.adm-plum { background: linear-gradient(160deg, #b578ee, #a560e8); box-shadow: 0 4px 0 #7f3fc0; }
.adm-stats { margin: 18px 0 14px; }
.adm-stats .stat .v small { margin-left: 2px; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* słupki dzień po dniu */
.adm-chart { position: relative; padding-top: 18px; }
.adm-max { position: absolute; top: 0; left: 0; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.adm-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 2px solid var(--line); }
.adm-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.adm-bar > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); }
.adm-bar:hover > span { background: var(--accent-hi); }
.adm-bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 9px; border-radius: 8px; background: var(--card-hi); border: 2px solid var(--line-hi); color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.adm-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.adm-plan { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 12px; margin-bottom: 10px; }
.adm-plan b { text-align: right; font-variant-numeric: tabular-nums; }
.adm-sub { margin: 18px 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.adm-list { display: flex; flex-direction: column; gap: 4px; }
.adm-li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--card-hi); font-size: 13.5px; }
.adm-li .muted { font-size: 12.5px; white-space: nowrap; }
.adm-rank { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--violet-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 900; }
.adm-none { font-size: 13px; }
.adm-search { width: 280px; height: 38px; }
.adm-user { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 340px; }
.adm-user .pill { height: 20px; font-size: 11px; margin-left: 4px; vertical-align: 1px; }
.adm-av { width: 32px; height: 32px; }
.adm-select { width: auto; min-width: 120px; height: 36px; font-size: 13px; }
.adm-orders { display: flex; flex-direction: column; gap: 12px; }
.adm-order { padding: 16px 18px; }
.adm-order-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-order-head .muted { font-size: 12.5px; }
.adm-order-desc { margin: 12px 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; max-height: 160px; overflow: auto; }
.adm-order-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.adm-order-foot span { display: inline-flex; align-items: center; gap: 6px; }
.adm-note { margin-top: 12px; height: 38px; font-size: 13px; }
@media (max-width: 1180px) { .adm-heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-grid { grid-template-columns: minmax(0, 1fr); } }
/* Administrator → Skrypty: pod polem wyboru folderu link do archiwum .zip / .rar */
.pick-archive { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; }
/* karta skryptu: podpis pod „Zainstaluj automatycznie” i „Pobierz plik .zip” */
.sm-hint { margin: 2px 2px 0; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.45; }
/* Administrator → Skrypty: pasek wysyłki dużej paczki pod przyciskiem „Opublikuj skrypt” */
.pub-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 700; }

/* ---------------------------------------------------------------- Hosting FiveHub: moje serwery na hostingu i pakiety */
.host-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.host-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: 800; }
.host-list { display: grid; gap: 12px; }
.host-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 4px 0 var(--line); }
.host-top { display: flex; align-items: center; gap: 14px; }
.host-name { font-size: 17px; font-weight: 900; }
.host-top .pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.host-top .pill .spinner { width: 12px; height: 12px; border-width: 2px; }
.host-addr { margin: 0; }
.host-actions { gap: 8px; }
.host-city::before { content: " · "; }

/* Połącz Discord (Ustawienia): przycisk otwarcia Discorda pod kodem */
.dc-link-open { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }

/* Logo i nazwa (generator AI): karta jak na Pulpicie z ilustracją smoka-grafika (brand/logo-smok.jpg), kroki w panelach,
   style jako kafelki 3D z Postaw serwer, kolory jako okrągłe próbki, nazwy z AI jako kafelki, galeria z akcjami */
/* (2026-11-10) tło karty w kolorze krawędzi obrazka logo-smok.jpg (#5825db), a lewa krawędź obrazka miękko znika, więc nie widać przejścia */
.br-hero { --home-bg: #5825db; min-height: 330px; margin-bottom: 18px; }
.br-hero .home-hero-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); }
.br-hero-q { margin-top: 18px; }
.br-sec { margin-bottom: 16px; }
.br-pad { padding: 10px 20px 20px; }
.br-about { width: 100%; resize: vertical; min-height: 64px; font: inherit; }
.br-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .br-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.br-styles .cw-pack { padding: 14px; }
.br-styles .cw-pack-d { font-size: 12.5px; }
.br-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.br-color { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 8px 4px; border: 2px solid transparent; border-radius: 16px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.br-color span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-hi); box-shadow: 0 3px 0 var(--line-hi); }
.br-color small { font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.2; }
.br-color:hover { background: var(--card); }
.br-color.on { border-color: var(--accent-hi); background: var(--violet-soft); color: var(--text); }
.br-name-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-bottom: 12px; }
.br-name-row.br-name-one { grid-template-columns: minmax(0, 420px); }
.br-text-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.br-text-note .i { flex: none; color: var(--accent-text); }
.br-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.br-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.br-name b { font-size: 15px; font-weight: 900; }
.br-name small { font-size: 12px; color: var(--muted); }
.br-name:hover { background: var(--card-hi); }
.br-name:active { transform: translateY(3px); box-shadow: none; }
.br-name.on { border-color: var(--accent-hi); background: var(--violet-soft); box-shadow: 0 3px 0 var(--accent-edge); }
.br-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px 20px; border-top: 2px solid var(--line); }
.br-foot .notice-inline { margin: 0; }
.br-hint { padding: 0 20px; font-size: 12.5px; }
.br-hint code { font-family: var(--mono); color: var(--violet-text); }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.br-card { align-self: start; display: flex; flex-direction: column; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: 0 4px 0 var(--line-hi); }
.br-card.wide { grid-column: span 2; }
.br-img { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; }
.br-card.wide .br-img { aspect-ratio: auto; }
.br-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.br-wait .br-img { background: var(--bg-sunken); color: var(--muted); font-size: 13px; font-weight: 800; gap: 10px; align-content: center; }
.br-card-t { display: flex; flex-direction: column; padding: 10px 12px 0; min-width: 0; }
.br-card-t b { font-weight: 900; }
.br-card-t small { color: var(--muted); font-size: 12px; }
.br-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px 12px; }
@media (max-width: 900px) { .br-name-row { grid-template-columns: 1fr; } .br-card.wide { grid-column: auto; } }

/* Balans: pigułka na górnym pasku obok profilu (zielona moneta z portfelem, kwota, fioletowy plus), okno z kartą,
   szybkimi kwotami doładowania, najbliższymi płatnościami i historią */
.wallet-pill { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 5px 0 5px; margin-bottom: 3px; border: 2px solid var(--line-hi); border-radius: 999px;
  background: var(--card); color: var(--text); font: 900 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); transition: background 0.12s, transform 0.08s, box-shadow 0.08s; }
.wallet-pill:hover { background: var(--card-hi); }
.wallet-pill:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-hi); }
.wallet-pill b { font-weight: 900; white-space: nowrap; }
.wp-coin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.wp-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-edge); }
.wallet-pill:hover .wp-plus { background: var(--accent-hi); }
.wl-kicker { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 12.5px; font-weight: 800; }
.wl-amount { margin-top: 10px; font-size: 38px; font-weight: 900; line-height: 1.1; }
.wl-need { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 12px; border-radius: 12px; background: #fff; color: var(--accent); font-size: 13px; font-weight: 900; }
.wl-amt { height: 48px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); color: var(--text); font: 900 14.5px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.wl-amt:hover { background: var(--card-hi); }
.wl-amt:active { transform: translateY(3px); box-shadow: none; }
.wl-amt.on { border-color: var(--accent-hi); background: var(--violet-soft); box-shadow: 0 3px 0 var(--accent-edge); }
.wl-list { display: flex; flex-direction: column; gap: 2px; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.wl-row:last-child { border-bottom: 0; }
.wl-row .grow { min-width: 0; display: flex; flex-direction: column; }
.wl-row .grow b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-row small { color: var(--muted); font-size: 12px; }
.wl-sum { font-weight: 900; white-space: nowrap; }
.wl-sum.plus { color: var(--green); }
.plan-pay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; text-align: center; }
.host-paid { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12.5px; font-weight: 700; }

/* Kreator grafik do embedów (creator.js): pełny ekran nad aplikacją, pod oknami potwierdzeń. Pasek u góry (rozmiary,
   cofnij, „Użyj grafiki”), z lewej szyna zakładek i panel, w środku płótno z ramką zaznaczenia, z prawej właściwości. */
.cr { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); }
.cr-top { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; border-bottom: 2px solid var(--line); flex: none; }
/* po prawej przyciski okna Windows (titleBarOverlay 52 px wysokości, ok. 140 px szerokości): pasek kreatora zostawia na nie miejsce */
.cr-top { padding-right: 156px; }
html.web .cr-top { padding-right: 16px; }
/* pod kreatorem leżą paski przeciągania okna aplikacji: cała treść kreatora nie przeciąga, więc da się w nią klikać */
.cr-body { -webkit-app-region: no-drag; }
.cr-top .cr-sizes { -webkit-app-region: no-drag; }
.cr-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 10px 6px 6px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--text); font: 800 12.5px var(--font); cursor: pointer; }
.cr-back:hover { border-color: var(--accent-hi); }
.cr-layer.on { border-color: var(--accent-hi); background: var(--violet-soft); }
.cr-title { font-size: 17px; font-weight: 900; margin-right: 10px; }
.cr-sizes { display: flex; gap: 6px; }
.cr-size { display: flex; flex-direction: column; align-items: center; padding: 5px 12px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--text); font: 800 12.5px var(--font); cursor: pointer; line-height: 1.15; }
.cr-size small { font-size: 10.5px; color: var(--muted); }
.cr-size.on { border-color: var(--accent-hi); background: var(--violet-soft); }
.cr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 78px 290px 1fr 290px; }
.cr-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-right: 2px solid var(--line); }
.cr-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border: 0; border-radius: 14px; background: none; color: var(--muted); font: 800 11px var(--font); cursor: pointer; }
.cr-tab .i { width: 20px; height: 20px; font-size: 18px; }
.cr-tab:hover { background: var(--card); color: var(--text); }
.cr-tab.on { background: var(--violet-soft); color: var(--accent-text); }
.cr-panel, .cr-props { overflow-y: auto; overflow-x: hidden; padding: 16px; }
.cr-panel { border-right: 2px solid var(--line); }
.cr-props { border-left: 2px solid var(--line); }
.cr-panel h3, .cr-props h3 { font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.cr-props h4 { font-size: 13px; font-weight: 900; margin: 16px 0 8px; color: var(--muted); }
.cr-hint { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.cr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cr-field > span { font-size: 12px; font-weight: 800; color: var(--muted); }
.cr-field input[type=range] { width: 100%; accent-color: var(--accent-hi); }
.cr-field textarea { resize: vertical; font: inherit; }
.cr-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.cr-seg button, .cr-chip { padding: 7px 10px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--text); font: 800 12.5px var(--font); cursor: pointer; }
.cr-seg button.on, .cr-chip.on { border-color: var(--accent-hi); background: var(--violet-soft); color: var(--accent-text); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip small { margin-left: 5px; color: var(--muted); }
.cr-flip { transform: scaleX(-1); }
.cr-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-sw { position: relative; width: 26px; height: 26px; border: 2px solid var(--line-hi); border-radius: 50%; cursor: pointer; padding: 0; }
.cr-sw.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-hi); }
.cr-sw-pick, .cr-sw-none { display: grid; place-items: center; background: var(--card); color: var(--muted); }
.cr-sw-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-add { min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 10px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); color: var(--text); font: 800 12.5px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); }
.cr-add:hover { background: var(--card-hi); }
.cr-add:active { transform: translateY(3px); box-shadow: none; }
.cr-neon { color: #fff; font-size: 22px; text-shadow: 0 0 6px #ff5fb0, 0 0 14px #ff5fb0; }
.cr-add i[class^=cr-ico] { display: block; background: var(--accent-hi); }
.cr-ico-rect { width: 44px; height: 28px; }
.cr-ico-round { width: 44px; height: 28px; border-radius: 9px; }
.cr-ico-pill { width: 50px; height: 20px; border-radius: 99px; }
.cr-ico-circle { width: 32px; height: 32px; border-radius: 50%; }
.cr-add i.cr-ico-frame { width: 44px; height: 28px; border-radius: 6px; background: none; border: 4px solid var(--accent-hi); }
.cr-ico-line { width: 50px; height: 5px; border-radius: 3px; }
.cr-emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 14px; }
.cr-emo { aspect-ratio: 1; border: 0; border-radius: 10px; background: none; font-size: 24px; cursor: pointer; }
.cr-emo:hover { background: var(--card); }
.cr-lib-up { width: 100%; margin: 12px 0; justify-content: center; }
.cr-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cr-lib.bgs { grid-template-columns: 1fr; }
.cr-lib-item { position: relative; aspect-ratio: 1; border: 2px solid var(--line-hi); border-radius: 14px; overflow: hidden; cursor: pointer;
  background: repeating-conic-gradient(#2a2a33 0% 25%, #22222a 0% 50%) 50% / 16px 16px; }
.cr-lib.bgs .cr-lib-item { aspect-ratio: 16 / 9; }
.cr-lib-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cr-lib.bgs .cr-lib-item img { object-fit: cover; }
.cr-lib-item:hover { border-color: var(--accent-hi); }
.cr-lib-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; opacity: 0; }
.cr-lib-item:hover .cr-lib-del { opacity: 1; }
.cr-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 0; overflow: hidden; }
.cr-canvas-wrap { position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); border-radius: 6px; touch-action: none; cursor: default; }
.cr-canvas-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 6px; }
.cr-sel { position: absolute; border: 2px solid #fff; outline: 1px solid var(--accent-hi); border-radius: 2px; pointer-events: none; }
.cr-h { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-hi); pointer-events: auto; }
.cr-h-se { right: -10px; bottom: -10px; cursor: nwse-resize; }
.cr-h-rot { left: 50%; top: -34px; margin-left: -8px; cursor: grab; }
.cr-h-rot::after { content: ''; position: absolute; left: 50%; top: 13px; width: 2px; height: 16px; margin-left: -1px; background: #fff; }
.cr-guide { position: absolute; background: #ff4fd8; pointer-events: none; }
.cr-guide-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.cr-guide-h { top: 50%; left: 0; right: 0; height: 1px; }
.cr-tip { color: var(--muted); font-size: 12px; text-align: center; max-width: 560px; }
.cr-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cr-layers { display: flex; flex-direction: column; gap: 4px; }
.cr-layer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: 800 12.5px var(--font); cursor: pointer; text-align: left; min-width: 0; }
.cr-layer:hover { border-color: var(--accent-hi); }
.cr-layer span { min-width: 0; }
@media (max-width: 1200px) { .cr-body { grid-template-columns: 70px 250px 1fr 250px; } .cr-sizes small { display: none; } }

/* kreator: nazwa grafiki w pasku, kilka zaznaczonych naraz (przerywany obrys bez uchwytów), Moje grafiki */
.cr-name { width: 220px; height: 40px; font-weight: 900; -webkit-app-region: no-drag; }
.cr-sel.multi { border-style: dashed; }
.cr-sel.multi .cr-h { display: none; }
#cr-more { position: absolute; inset: 0; pointer-events: none; }
.cr-mine { display: flex; flex-direction: column; gap: 10px; }
.cr-mine-item { border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); overflow: hidden; box-shadow: 0 3px 0 var(--line-hi); }
.cr-mine-item.on { border-color: var(--accent-hi); }
.cr-mine-img { aspect-ratio: 5 / 2; background: repeating-conic-gradient(#2a2a33 0% 25%, #22222a 0% 50%) 50% / 16px 16px; }
.cr-mine-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cr-mine-t { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 0; min-width: 0; }
.cr-mine-t b { font-size: 13px; font-weight: 900; min-width: 0; }
.cr-mine-t small { color: var(--muted); font-size: 11px; flex: none; }
.cr-mine-act { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; }
.cr-mine-act .btn-icon { margin-left: auto; }

/* Moje obrazki w kreatorze: po najechaniu na miniaturę pasek „przenieś do” z innymi kategoriami */
.cr-my-move { position: absolute; left: 4px; right: 4px; bottom: 4px; display: none; flex-wrap: wrap; gap: 3px; }
.cr-lib-item:hover .cr-my-move { display: flex; }
.cr-my-move button { padding: 2px 6px; border: 0; border-radius: 6px; background: rgba(10, 10, 16, 0.82); color: #fff; font: 800 10.5px var(--font); cursor: pointer; }
.cr-my-move button:hover { background: var(--accent); }

/* pola z liczbami bez strzałek góra/dół (decyzja użytkownika): wpisuje się liczbę, strzałki na klawiaturze dalej działają */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { appearance: textfield; }

/* okno Balans (wersja 2): karta z kwotą i białym przyciskiem Historia, doładowanie i płatności w panelach,
   historia w osobnym oknie */
.wl-card { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); }
.wl-card-t { flex: 1; min-width: 0; }
.wl-card-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.82); }
.wl-hist-btn { background: #fff; border-color: #fff; color: var(--accent); --edge-c: #d8ccff; }
.wl-hist-btn:hover { background: #f1edff; }
.wl-card .wl-need { flex-basis: 100%; margin-top: 0; justify-content: flex-start; width: fit-content; }
.wl-box { margin-top: 14px; padding: 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--glass); }
.wl-h { margin: 0 0 12px; font-size: 15px; font-weight: 900; }
.wl-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wl-own { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wl-own-l { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.wl-own .input { flex: 1; height: 46px; padding-right: 48px; font-weight: 800; }
.wl-own-c { position: absolute; right: 14px; color: var(--muted); font-size: 12px; font-weight: 800; pointer-events: none; }
.wl-go { margin-top: 12px; }
.wl-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.wl-note .i { flex: none; margin-top: 1px; }
.wl-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.wl-hist { max-height: 56vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

/* panel administratora: Koszty AI (tabele, plany z kosztem na osobę) */
.adm-wide { grid-column: 1 / -1; }
.adm-table-wrap { overflow-x: auto; }
.adm-costs-table td, .adm-costs-table th { white-space: nowrap; }
.adm-costs-table td:first-child { white-space: normal; }
.adm-plan-cost { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-plan-cost:last-child { border-bottom: 0; }
.adm-plan-cost .grow { min-width: 0; display: flex; flex-direction: column; }
.adm-plan-cost small { color: var(--muted); font-size: 12px; }
.adm-plan-avg { display: flex; flex-direction: column; align-items: flex-end; }
.adm-plan-avg small { color: var(--muted); font-size: 11.5px; }
.adm-note { margin-top: 10px; font-size: 12px; }
.adm-costs-table .mono { white-space: nowrap; }

/* Logo i nazwa: zakładki galerii (Logo, Bannery) i okno „Ustaw jako ikonę serwera” */
.br-tabs { flex: none; }
.br-tabs small { margin-left: 6px; color: var(--muted); font-weight: 800; }
.br-grid-wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.br-grid-wide .br-card.wide { grid-column: auto; }
.br-icon-prev { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
.br-icon-prev img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #fff; }
.br-icon-prev span { font-weight: 900; }
.br-icon-list { display: flex; flex-direction: column; gap: 8px; }
.br-icon-srv { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card); color: var(--text); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--line-hi); text-align: left; min-width: 0; }
.br-icon-srv:hover:not(:disabled) { border-color: var(--accent-hi); background: var(--violet-soft); }
.br-icon-srv:disabled { opacity: 0.55; cursor: default; }
.br-icon-srv small { color: var(--muted); font-size: 12.5px; }

/* Podłącz istniejący serwer: szukanie na liście FiveM, wybrany serwer z banerem i kod do konsoli */
.cn-search { position: relative; }
.cn-search > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cn-search .input { padding-left: 38px; }
.cn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 340px; overflow-y: auto; }
.cn-hint { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cn-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; color: var(--text);
  border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 var(--line-hi); font: inherit; cursor: pointer;
}
.cn-item:hover { border-color: var(--accent-hi); background: var(--card-hi); }
.cn-item:active { transform: translateY(3px); box-shadow: none; }
.cn-item .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-item b { font-size: 14px; font-weight: 900; }
.cn-item small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cn-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.cn-ic-lg { width: 64px; height: 64px; border-radius: 18px; border: 4px solid var(--card); margin-top: -30px; }
.cn-other { margin-top: 14px; font-size: 13px; }
.cn-picked { overflow: hidden; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card-hi); }
.cn-banner { height: 84px; }
.cn-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cn-banner.srv-banner-empty { height: 64px; }
.cn-picked-row { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 12px; }
.cn-picked-row .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.cn-picked-row b { font-size: 16px; font-weight: 900; }
.cn-picked-row small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cn-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
/* okno po podłączeniu: co da bridge */
.nudge-list { display: flex; flex-direction: column; gap: 8px; }
.nudge-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--text); }

/* zakładki rozmów asystenta jak w Claude: pigułki w poziomym pasku pod nagłówkiem, wybrana w pełnym fiolecie, × przy najechaniu */
.asst-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--line); flex: none; }
.asst-tabs::-webkit-scrollbar { display: none; }
.asst-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 170px; height: 30px; padding: 0 6px 0 12px;
  border: 2px solid var(--line-hi); border-radius: 99px; background: var(--card); color: var(--text-2); font: 800 12px var(--font); cursor: pointer;
}
.asst-tab:hover { background: var(--card-hi); color: var(--text); }
.asst-tab.on { background: var(--accent); border-color: var(--accent-hi); color: #fff; }
.asst-tab .spinner { flex: none; width: 11px; height: 11px; }
.asst-tab-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; opacity: 0; color: inherit; }
.asst-tab:hover .asst-tab-x, .asst-tab.on .asst-tab-x { opacity: 0.7; }
.asst-tab-x:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.18); }
.asst-tab-x .i { width: 10px; height: 10px; }
.cn-item small.cn-id { font-size: 11px; color: var(--faint); }

/* panel asystenta: rozciąganie za lewą krawędź (fioletowa linia przy najechaniu i w trakcie) */
.asst-resize { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 6px; cursor: col-resize; }
.asst-resize::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; transition: background 0.15s; }
.asst-resize:hover::after, body.asst-resizing .asst-resize::after { background: var(--accent-hi); }
body.asst-resizing { cursor: col-resize; user-select: none; }
body.asst-resizing * { pointer-events: none; }
body.asst-resizing .asst-resize { pointer-events: auto; }

/* karta zmian: wiersz na zasób, nazwa zawsze widoczna, stan małym tekstem pod nią, mały przycisk po prawej */
.asst-ch-gh { gap: 10px; padding: 9px 10px 9px 12px; }
.asst-ch-gh > .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.asst-ch-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--fill-hi); color: var(--accent-text); }
.asst-ch-ic .i { width: 13px; height: 13px; }
.asst-ch-ic.k-delete { background: rgba(255, 75, 75, 0.14); color: #ff6b6b; }
.asst-ch-ic.k-disable { background: rgba(255, 200, 0, 0.14); color: #ffc800; }
.asst-ch-ic.k-cfg { background: rgba(28, 176, 246, 0.14); color: #1cb0f6; }
.asst-ch-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.asst-ch-st { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.asst-ch-st.ok { color: #4fd64f; }
.asst-ch-st.warn { color: #ffc800; }
.asst-ch-st.bad { color: #ff6b6b; }
.asst-ch-undo {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 2px solid var(--line-hi); border-radius: 99px;
  background: var(--card); color: var(--text-2); box-shadow: 0 2px 0 var(--line-hi); font: 800 11.5px var(--font); cursor: pointer;
}
.asst-ch-undo:hover { color: var(--text); border-color: var(--accent-hi); }
.asst-ch-undo:active { transform: translateY(2px); box-shadow: none; }
.asst-ch-undo:disabled { opacity: 0.5; }
.asst-ch-undo .i { width: 11px; height: 11px; }
.asst-ch-group + .asst-ch-group { border-top-width: 1px; }

/* ---------- Stwórz animację: pole AI, pasek projektu i studio (scena 3D, panel kości, oś czasu) */
/* pole AI pływa na dole sceny 3D (app.js przenosi je do .st-view), jak okno czatu nad postacią */
.an-ai { display: none; }
.an-ai.in-view { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; max-width: 680px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 2px solid var(--accent-hi); border-radius: 18px; background: rgba(27, 27, 32, 0.94); backdrop-filter: blur(6px); box-shadow: 0 4px 0 var(--accent-edge), 0 14px 32px rgba(0, 0, 0, 0.4); transition: border-color 0.2s; }
.an-ai.in-view:focus-within { border-color: #a48cff; }
.an-ai-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); }
.an-ai-ic .i { width: 18px; height: 18px; }
.an-ai textarea { flex: 1; min-height: 40px; max-height: 96px; resize: none; font-size: 14px; font-weight: 700; line-height: 1.45; padding-top: 9px; }
.an-ai textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ai .btn-lg { flex: none; height: 40px; }
.an-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.an-proj { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--muted); }
.an-proj select { height: 30px; border: 0; background: transparent; color: var(--text); font: 800 13px var(--font); outline: none; }
.an-name { width: 220px; height: 38px; font-weight: 800; }
.an-host { min-height: 520px; }

.st { display: flex; flex-direction: column; gap: 12px; }
.st-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.st-view { position: relative; height: 520px; overflow: hidden; border: 2px solid var(--line); border-radius: 22px; background: #0f0f13; box-shadow: 0 4px 0 var(--line); }
.st-view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.st-hud { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.st-hud > * { pointer-events: auto; }
.st-hud-t { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12.5px; font-weight: 800; }
.st-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 2px solid var(--line-hi); border-radius: 99px; background: var(--card); color: var(--text-2); box-shadow: 0 2px 0 var(--line-hi); font: 800 12px var(--font); cursor: pointer; white-space: nowrap; }
.st-chip:hover:not(:disabled) { background: var(--card-hi); color: var(--text); }
.st-chip:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.st-chip:disabled { opacity: 0.45; cursor: default; }
.st-chip.st-del { color: #ff6b6b; }
.st-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: 520px; }
.st-card { border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 3px 0 var(--line); }
.st-card-h { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px 14px; }
.st-card-h b { font-size: 14px; font-weight: 900; color: var(--text); }
.st-hint { padding: 0 14px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.st-pose { flex: none; padding-bottom: 8px; }
.st-axis { display: grid; grid-template-columns: 78px minmax(0, 1fr) 58px; align-items: center; gap: 8px; padding: 4px 14px; font-size: 12px; font-weight: 800; color: var(--text-2); }
.st-axis input[type=range] { width: 100%; accent-color: var(--accent-hi); }
.st-axis input[type=number] { width: 58px; height: 28px; padding: 0 6px; border: 2px solid var(--line-hi); border-radius: 8px; background: var(--bg-sunken); color: var(--text); font: 700 12px var(--mono); }
.st-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.st-opt select, .st-opt input[type=number] { height: 28px; padding: 0 6px; border: 2px solid var(--line-hi); border-radius: 8px; background: var(--card); color: var(--text); font: 800 12px var(--font); }
.st-opt input[type=number] { width: 58px; }
.st-interp { display: flex; justify-content: space-between; padding: 8px 14px 4px; }
.st-pose .st-del { margin: 6px 14px 4px; }
.st-bones { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-bone-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.st-group summary { padding: 6px 8px; font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.st-bone { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 700 12.5px var(--font); text-align: left; cursor: pointer; }
.st-bone:hover { background: var(--card-hi); color: var(--text); }
.st-bone.on { background: var(--accent); color: #fff; }
.st-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: rgba(255, 200, 0, 0.18); color: #ffc800; font-size: 11px; font-weight: 900; display: inline-grid; place-items: center; }
.st-bone.on .st-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }

.st-tl { border: 2px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 0 var(--line); overflow: hidden; }
.st-tl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border-bottom: 2px solid var(--line); }
.st-play { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-edge); cursor: pointer; }
.st-play:active { transform: translateY(3px); box-shadow: none; }
.st-play .fi { font-size: 15px; line-height: 1; display: block; margin-top: 2px; }
.st-frame { min-width: 120px; font: 700 13px var(--mono); color: var(--text-2); }
.st-frame b { color: var(--text); font-size: 15px; }
.st-frame small { margin-left: 6px; color: var(--muted); font-size: 11px; }
.st-loop input { accent-color: var(--accent-hi); }
/* stała wysokość: dodanie wiersza nie zmienia wielkości sceny; linijka przyklejona u góry przy przewijaniu */
.st-tl-body { position: relative; height: 196px; overflow-y: auto; padding: 0 0 8px; }
.st-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; min-height: 32px; }
.st-row-n { height: 32px; padding: 0 14px; border: 0; background: transparent; color: var(--text-2); font: 800 12.5px var(--font); text-align: left; cursor: pointer; }
.st-row-n:hover { color: var(--text); }
.st-row.on .st-row-n { color: #fff; box-shadow: inset 4px 0 0 var(--accent-hi); }
.st-lane { position: relative; height: 24px; margin: 4px 18px 4px 0; border-radius: 8px; background: var(--bg-sunken); cursor: pointer; transition: background 0.15s; }
.st-lane:hover { background: #26262d; }
.st-row.on .st-lane { background: rgba(72, 32, 220, 0.2); box-shadow: inset 0 0 0 2px rgba(124, 92, 255, 0.4); }
.st-span { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: rgba(255, 200, 0, 0.18); pointer-events: none; }
.st-ruler { position: sticky; top: 0; z-index: 5; background: var(--card); }
.st-ruler .st-lane { height: 30px; margin: 0 18px 0 0; border-radius: 0; background: transparent; border-bottom: 2px solid var(--line-hi); }
.st-ruler .st-lane:hover { background: transparent; }
.st-ruler i { position: absolute; top: 7px; transform: translateX(-50%); font: 800 11px var(--mono); color: var(--muted); font-style: normal; }
.st-ruler s { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line-hi); }
.st-head { position: absolute; top: 0; width: 2px; height: 186px; margin-left: -1px; background: var(--accent-hi); pointer-events: none; z-index: 2; box-shadow: 0 0 8px rgba(124, 92, 255, 0.6); }
.st-head::before { content: attr(data-f); position: absolute; top: 4px; left: 50%; transform: translateX(-50%); min-width: 28px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-edge); font: 900 11px/22px var(--mono); text-align: center; }
.st-key { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 3px; background: #ffc800; transform: rotate(45deg); box-shadow: 0 0 0 2px #1b1b20; cursor: pointer; z-index: 3; transition: transform 0.12s; }
.st-key:hover { transform: rotate(45deg) scale(1.2); }
.st-key:hover, .st-key.on { background: #fff; box-shadow: 0 0 0 2px var(--accent-hi); }
.st-key.sel { background: var(--accent-hi); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(124, 92, 255, 0.45); }
.st-tl-empty { margin: 14px 18px 0 14px; padding: 22px 16px; border: 2px dashed var(--line-hi); border-radius: 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 1100px) { .st-main { grid-template-columns: minmax(0, 1fr); } .st-side { height: auto; } .st-bones { max-height: 280px; } }

/* tryb skupienia (studio animacji): jeden płynny ruch (0,42 s). Pasek boczny zwija się do ikon (ikony stoją w miejscu,
   napisy i słowo w logo gasną na początku ruchu), asystent odjeżdża w prawo i gaśnie, a strona rośnie razem z kolumnami.
   Przy powrocie napisy wracają pod koniec ruchu. Kolumna asystenta ma stałą szerokość (--asst-w), więc siatka może ją animować. */
.shell { --fx: cubic-bezier(0.65, 0, 0.25, 1); grid-template-columns: 250px minmax(0, 1fr) var(--asst-w, 420px); overflow: hidden; transition: grid-template-columns 0.42s var(--fx); }
body.asst-resizing .shell { transition: none; }
.sidebar { overflow: hidden; transition: padding 0.42s var(--fx); }
.sidebar-top { transition: padding 0.42s var(--fx); }
.nav button { overflow: hidden; white-space: nowrap; }
.nav-t { display: inline-block; transition: opacity 0.22s ease 0.16s, transform 0.32s cubic-bezier(0.3, 1.3, 0.5, 1) 0.14s; }
.nav-sep { transition: margin 0.42s var(--fx); }
.brand-word { display: inline-block; max-width: 5em; overflow: hidden; transition: opacity 0.22s ease 0.16s, max-width 0.42s var(--fx); }
.brand-logo { transition: gap 0.42s var(--fx); }
.assistant { transition: opacity 0.3s ease 0.1s, transform 0.42s var(--fx), visibility 0s linear 0s; }
body.focus-mode .shell { grid-template-columns: 78px minmax(0, 1fr) 0px; }
body.focus-mode .assistant { opacity: 0; transform: translateX(48px); visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.42s var(--fx), visibility 0s linear 0.42s; }
body.focus-mode .sidebar-top { padding: 0 10px; }
body.focus-mode .brand-logo { gap: 0; }
body.focus-mode .brand-word { opacity: 0; max-width: 0; transition: opacity 0.12s ease, max-width 0.42s var(--fx); }
body.focus-mode .nav-t { opacity: 0; transform: translateX(-10px); transition: opacity 0.12s ease, transform 0.2s ease; }
body.focus-mode .nav .count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; animation: fx-count 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s backwards; }
@keyframes fx-count { from { transform: scale(0); } }
body.focus-mode .nav-sep { margin: 10px 6px; }
@media (prefers-reduced-motion: reduce) { .shell, .sidebar, .sidebar-top, .nav-t, .nav-sep, .brand-word, .brand-logo, .assistant { transition: none !important; } }
body.focus-mode .page-inner { max-width: none; }

/* studio na całą szerokość: scena wysoka, panele „Poza” i „Kości” unoszą się po prawej na scenie */
body.focus-mode .page { display: flex; flex-direction: column; padding-bottom: 18px; }
body.focus-mode .page-inner { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
body.focus-mode .page-head { margin-bottom: 14px; }
body.focus-mode .an-bar { margin-top: 0; }
body.focus-mode .an-host { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
body.focus-mode .st { flex: 1 0 auto; }
body.focus-mode .st-main { position: relative; flex: 1 0 auto; display: flex; }
body.focus-mode .st-view { flex: 1; height: auto; min-height: 400px; }
body.focus-mode .an-ai.in-view { right: 314px; }
/* niskie okno: krótszy nagłówek i oś czasu, żeby wszystko zmieściło się bez przewijania */
@media (max-height: 800px) {
  body.focus-mode .page-head .sub { display: none; }
  body.focus-mode .page-head { margin-bottom: 10px; }
  body.focus-mode .st-view { min-height: 330px; }
  body.focus-mode .st-tl-body { height: 150px; }
  body.focus-mode .st-head { height: 140px; }
}
body.focus-mode .st-side { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 290px; height: auto; pointer-events: none; }
body.focus-mode .st-side > * { pointer-events: auto; background: rgba(27, 27, 32, 0.92); backdrop-filter: blur(6px); }
body.focus-mode .st-hud { right: 314px; }

/* poradnik studia animacji: przyciemnienie z okienkiem wokół elementu i karta ze smokiem jak lekcja Duolingo */
.tour { position: fixed; inset: 0; z-index: 9000; animation: tour-in 0.25s ease; }
.tour.leaving { opacity: 0; transition: opacity 0.2s ease; }
@keyframes tour-in { from { opacity: 0; } }
.tour-hole {
  position: fixed; pointer-events: none; border-radius: 22px;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.9), 0 0 32px 6px rgba(90, 51, 238, 0.55), 0 0 0 200vmax rgba(8, 6, 20, 0.74);
  transition: left 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), top 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), width 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), height 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.tour-card {
  position: fixed; width: 380px; max-width: calc(100vw - 32px); padding: 16px 16px 14px;
  border: 2px solid var(--line-hi); border-radius: 22px; background: var(--card); box-shadow: 0 5px 0 var(--line-hi), 0 30px 60px rgba(0, 0, 0, 0.5);
  transition: left 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), top 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.tour-card.pop .tour-t { animation: bubble-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tour-top { display: flex; align-items: center; gap: 12px; }
.tour-bar { flex: 1; height: 14px; border-radius: 99px; background: var(--inactive); overflow: hidden; }
.tour-bar > span { display: block; height: 100%; min-width: 14px; border-radius: inherit; background: var(--green) linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) no-repeat 7px 3px / calc(100% - 14px) 3px; transition: width 0.4s cubic-bezier(0.3, 1.2, 0.5, 1); }
.tour-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.tour-x:hover { background: var(--card-hi); color: var(--text); }
.tour-body { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.tour-mascot { flex: none; width: 96px; height: 96px; margin: -6px -4px -4px -8px; }
.tour-mascot > img { width: 72px; height: 72px; margin: 12px; border-radius: 50%; }
.tour-t { position: relative; flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid var(--line-hi); border-radius: 16px; background: var(--card-hi); }
.tour-t::before { content: ''; position: absolute; left: -9px; top: 26px; width: 14px; height: 14px; background: var(--card-hi); border-left: 2px solid var(--line-hi); border-bottom: 2px solid var(--line-hi); border-bottom-left-radius: 3px; transform: rotate(45deg); }
.tour-t h3 { font-size: 16px; font-weight: 900; line-height: 1.25; color: var(--text); }
.tour-t p { margin-top: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--text-2); }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-foot .btn-primary { min-width: 120px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card, .tour-bar > span { transition: none; } .tour-card.pop .tour-t { animation: none; } }

/* przejścia między klatkami: kafelki z krzywą i edytor krzywej (cubic-bezier z uchwytami) */
.st-ease { padding: 6px 14px 4px; }
.st-ease-h { margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.st-ease-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.st-ease-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--text-2); box-shadow: 0 2px 0 var(--line-hi); font: 800 11px var(--font); cursor: pointer; }
.st-ease-tile:hover { border-color: var(--accent-hi); color: var(--text); }
.st-ease-tile:active { transform: translateY(2px); box-shadow: none; }
.st-ease-tile.on { background: var(--accent); border-color: var(--accent-hi); box-shadow: 0 2px 0 var(--accent-edge); color: #fff; }
.st-ease-tile svg { width: 40px; height: 28px; overflow: visible; }
.st-ease-tile path { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.st-ease-tile.on path { stroke: #fff; }
.st-curve { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.st-curve svg { width: 100%; max-width: 240px; align-self: center; aspect-ratio: 1; touch-action: none; }
.cv-box { fill: var(--bg-sunken); stroke: var(--line-hi); stroke-width: 2; }
.cv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.cv-arm { stroke: var(--faint); stroke-width: 2; }
.cv-line { fill: none; stroke: var(--accent-hi); stroke-width: 3.5; stroke-linecap: round; }
.cv-end { fill: var(--text-2); }
.cv-handle { fill: #fff; stroke: var(--accent-hi); stroke-width: 3; cursor: grab; }
.cv-handle:hover { fill: var(--accent-text); }
.cv-handle:active { cursor: grabbing; }
.st-curve-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.st-curve > .st-chip { align-self: flex-start; }
/* przeciąganie klatek kluczowych */
.st-key { cursor: ew-resize; }
.st-key.dragging { background: var(--accent-hi); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(124, 92, 255, 0.45); }
.st.st-dragging, .st.st-dragging * { cursor: ew-resize !important; user-select: none; }

/* poradnik interaktywny: przyciemnienie nie blokuje klikania, zielone „Super!” po wykonaniu zadania, kółko wokół stawu */
.tour { pointer-events: none; }
.tour-card { pointer-events: auto; }
.tour-hole { transition-property: left, top, width, height, border-radius; }
.tour-hole[style*="50%"] { animation: tour-ring 1.4s ease-in-out infinite; }
@keyframes tour-ring { 50% { box-shadow: 0 0 0 7px rgba(124, 92, 255, 0.95), 0 0 40px 12px rgba(90, 51, 238, 0.6), 0 0 0 200vmax rgba(8, 6, 20, 0.74); } }
.tour-ok { display: none; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 900; color: #4fd64f; }
.tour-card.solved .tour-ok { display: flex; animation: bubble-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tour-card.solved .tour-t { border-color: rgba(0, 195, 1, 0.55); }
.tour-card.solved .tour-bar > span { box-shadow: 0 0 12px rgba(0, 195, 1, 0.6); }
.tour-foot [data-tour="next"]:disabled { opacity: 0.45; }
.tour-foot [data-tour="back"] { width: 38px; padding: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tour-hole[style*="50%"] { animation: none; } }

/* menu animacji w studiu (zamiast białej listy systemowej): pigułka jak wybór języka i ciemna lista projektów */
.an-pick { position: relative; }
.an-pick-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 38px; padding: 0 12px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--card); color: var(--text); box-shadow: 0 3px 0 var(--line-hi); font: 800 13px var(--font); cursor: pointer; }
.an-pick-btn > .i:first-child { color: var(--accent-text); }
.an-pick-btn:hover, .an-pick.open .an-pick-btn { border-color: var(--accent-hi); }
.an-pick-btn .chev { color: var(--muted); transition: transform 0.2s; }
.an-pick.open .an-pick-btn .chev { transform: rotate(180deg); }
.an-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 320px; padding: 8px; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line-hi), 0 20px 50px rgba(0, 0, 0, 0.5); display: none; }
.an-pick.open .an-menu { display: block; animation: bubble-pop 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); transform-origin: top left; }
.an-menu-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.an-menu-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.an-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.an-menu-item:hover { background: var(--card-hi); }
.an-menu-item.on { background: var(--accent); color: #fff; }
.an-menu-item .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.an-menu-item b { font-size: 13.5px; font-weight: 900; }
.an-menu-item small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.an-menu-item.on small { color: rgba(255, 255, 255, 0.78); }
.an-menu-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--fill-hi); color: var(--accent-text); }
.an-menu-item.on .an-menu-ic { background: rgba(255, 255, 255, 0.2); color: #fff; }
.an-menu-new { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 2px dashed var(--line-hi); border-radius: 12px; background: transparent; color: var(--text-2); font: 800 13px var(--font); cursor: pointer; }
.an-menu-new:hover { border-color: var(--accent-hi); color: var(--text); }
/* pozostałe listy wyboru w studiu: ciemne okienko systemowe zamiast białego */
.st select, .st-opt select { color-scheme: dark; }
.st select option { background: var(--card); color: var(--text); }

/* menu zapisów postępu (to samo okno co menu animacji, przy prawej krawędzi) */
.an-vers .an-menu { left: auto; right: 0; width: 360px; transform-origin: top right; }
.an-vers .an-pick-btn .pill { height: 20px; padding: 0 7px; font-size: 11px; }
.an-ver { cursor: default; }
.an-ver:hover { background: var(--card-hi); }
.an-ver .btn-sm { flex: none; height: 30px; }
.an-menu-empty { padding: 10px 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--muted); }


/* ---------------------------------------------------------------- instalacja skryptu: AI analizuje na żywo (2026-11-06)
   Okno jak lekcja Duolingo, ten sam układ co stawianie serwera: po lewej smok z dymkiem, po prawej procent, pasek z błyskiem,
   kroki-kółka i pod spodem lista tego, co teraz robimy (nowa linijka wjeżdża od dołu, poprzednia dostaje zielony ptaszek). */
.fx-modal.modal-wide { width: 760px; }
.fx { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; padding: 4px 2px 6px; }
.fx-side { display: flex; flex-direction: column; align-items: center; }
.fx .fx-bubble { max-width: 160px; margin-bottom: 14px; padding: 12px 14px; font-size: 13px; }
.fx-mascot { width: 136px; height: 136px; }
.fx-main { min-width: 0; }
.fx .inst-top h2 { font-size: 22px; }
.fx .wiz-kicker { display: flex; align-items: center; gap: 6px; }
.fx .inst-bar { margin: 16px 0 20px; }
.fx .inst-dot { width: 42px; height: 42px; }
.fx .inst-path::before, .fx .inst-path::after { top: 18px; }

.fx-feed {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 172px; margin-top: 20px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 16px; background: var(--bg-sunken); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 46px); mask-image: linear-gradient(transparent 0, #000 46px);
}
.fx-line { display: flex; align-items: center; gap: 10px; min-height: 28px; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text); }
.fx-line.in { animation: fx-line-in 0.32s cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes fx-line-in { from { transform: translateY(14px); opacity: 0; } }
.fx-line.done { color: var(--text-2); }
.fx-line .t { flex: none; }
.fx-line .d { min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.fx-ico .i { width: 12px; height: 12px; }
.fx-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(164, 140, 255, 0.2); border-top-color: var(--accent-text); animation: spin 0.8s linear infinite; }
.fx-line.done .fx-ico { background: var(--green); color: #fff; box-shadow: 0 2px 0 #009a01; }
.fx-line.done .fx-ico .i { animation: inst-pop 0.4s cubic-bezier(0.3, 1.7, 0.5, 1); }
.fx-line.bad { color: #ffb3b3; }
.fx-line.bad .fx-ico { background: var(--red); color: #fff; box-shadow: 0 2px 0 #c93636; }
.fx-bad .inst-bar > span { background-color: var(--red); }
.fx-bad .inst-on .inst-dot { background: var(--red); border-color: #ff7f78; box-shadow: 0 4px 0 #c93636; }
.fx-bad .inst-on .inst-dot::after { display: none; }

/* raport po analizie: werdykt jak kolorowa karta Duolingo (zielona gotowe, fioletowa dopasowanie, ciemnoczerwona ryzyko) */
.fx-report .fit-h { font-size: 16px; font-weight: 900; margin: 22px 0 10px; }
.fx-report .fit-row .t { font-weight: 800; }
.fx-verdict { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 18px; border-radius: 20px; color: #fff; }
.fx-verdict p { margin-top: 3px; font-size: 13.5px; font-weight: 700; line-height: 1.5; opacity: 0.92; }
.fx-v-t { font-size: 19px; font-weight: 900; }
.fx-v-coin { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); animation: inst-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1); }
.fx-v-coin .i { width: 22px; height: 22px; }
.fx-v-ready { background: linear-gradient(135deg, #1fd61f, #00b201); box-shadow: 0 4px 0 #009a01; }
.fx-v-ready .fx-v-coin { color: #00b201; }
.fx-v-adjust { background: linear-gradient(135deg, var(--accent-hi), var(--accent)); box-shadow: 0 4px 0 var(--accent-edge); }
.fx-v-adjust .fx-v-coin { color: var(--accent); }
.fx-v-risky { background: linear-gradient(135deg, #7d2424, #561616); box-shadow: 0 4px 0 #3d0f0f; }
.fx-v-risky .fx-v-t { color: #ffb4a8; }
.fx-v-risky .fx-v-coin { color: #c93636; }
.fx-note { margin-top: 14px; }
.fx-meta { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 700; }

/* instrukcja „jak uruchomić”: co daje skrypt, potem kroki jak ścieżka (fioletowe numery połączone linią) */
.guide-what { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--card-hi); box-shadow: 0 4px 0 var(--line); }
.guide-what p { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--text); }
.guide-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 16px; font-weight: 900; }
.guide-h .i { color: var(--accent-text); }
.guide-step { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.guide-step:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 36px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--line-hi); }
.guide-step .grow { min-width: 0; padding-top: 4px; }
.guide-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 3px 0 var(--accent-edge); }
.guide-step .t { font-size: 14.5px; font-weight: 900; }
.guide-step .d { margin-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--text-2); }
.guide-code { margin-top: 8px; padding: 12px 104px 12px 14px; white-space: pre-wrap; word-break: break-word; }
.guide-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 18px; text-align: center; }
.guide-empty h3 { font-size: 19px; font-weight: 900; }
.guide-empty p { max-width: 440px; font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 1.5; }

/* karta skryptu na serwerze: nazwa i stan, pod spodem co daje skrypt (z instrukcji AI) i przycisk „Jak uruchomić” */
.srv-script { flex-direction: column; align-items: stretch; gap: 10px; }
.srv-script-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srv-script-what { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-script-guide { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .fx { grid-template-columns: minmax(0, 1fr); }
  .fx-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-line.in, .fx-line.done .fx-ico .i, .fx-v-coin, .fx-spin { animation: none; }
}

/* ---------------------------------------------------------------- Administrator: „Do akceptacji” (skrypty od twórców ze strony /upload)
   Karta zgłoszenia: okładka 16:9 po lewej (kliknięcie otwiera podgląd jak w sklepie), dane paczki, pigułki kategorii, frameworków
   i wyniku skanera, na dole przyciski z Akceptuj po prawej. Obok kolumna z twórcami i ostatnio rozpatrzonymi. */
.nav .count-hot { background: var(--orange); color: #fff; }
.adm-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; }
.adm-tab-n.hidden { display: none; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.rv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-card { padding: 16px; }
.rv-main { display: flex; gap: 16px; min-width: 0; }
.rv-cover { position: relative; flex: none; width: 220px; aspect-ratio: 16 / 9; border-radius: var(--r); border: 2px solid var(--line-hi); background: var(--tint, var(--card-hi)) center / cover no-repeat; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform 0.15s, border-color 0.15s; }
.rv-cover:hover { border-color: var(--accent); transform: translateY(-2px); }
.rv-n { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 800; }
.rv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-title b { font-size: 18px; font-weight: 900; min-width: 0; }
.rv-title .pill { flex: none; }
.rv-meta { font-size: 13px; color: var(--text-2); }
.rv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-tags .sm-cat { margin: 0; }
.rv-tags .pill .i { width: 12px; height: 12px; }
.rv-by { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13px; }
.rv-by .muted { font-size: 12.5px; }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line); }
.rv-actions .btn.on { border-color: var(--accent); color: var(--accent-text); }
.rv-detail { margin-top: 14px; }
.rv-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rv-tree { max-height: 360px; margin-top: 8px; }
.rv-scan { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.rv-scan .sub { font-size: 12.5px; }
.rv-detail .findings { max-height: 320px; overflow-y: auto; }
.rv-add { display: flex; gap: 8px; margin-bottom: 12px; }
.rv-add .input { flex: 1; min-width: 0; height: 40px; }
.rv-creator .muted { font-size: 12px; white-space: normal; }
.rv-done { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--card-hi); font-size: 13px; }
.rv-done-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-done-top b { flex: 1; min-width: 0; }
.rv-done .pill { flex: none; height: 22px; font-size: 11px; }
.rv-done .pill .i { width: 11px; height: 11px; }
.rv-done .muted { font-size: 12px; }
.rv-reason { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--red-soft); color: var(--text); font-size: 12.5px; white-space: pre-line; overflow-wrap: anywhere; }
.rv-why { width: 100%; min-height: 110px; resize: vertical; }
.rv-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-hints .chip { height: auto; min-height: 30px; padding: 5px 12px; cursor: pointer; text-align: left; font-family: var(--font); }
.rv-hints .chip:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 1250px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rv-main { flex-direction: column; }
  .rv-cover { width: 100%; }
}

/* ---------- serwer z hostingu: dostęp SFTP i hasła, baza danych (zakładki pod „Więcej”, app.js accessTab/databaseTab) */
.host-code { margin-left: 10px; padding: 2px 8px; border-radius: 8px; background: var(--fill-hi); color: var(--muted); font-size: 12px; font-weight: 800; vertical-align: 2px; }
.hacc-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-color: var(--accent-hi); background: linear-gradient(135deg, rgba(90, 51, 238, 0.24), rgba(72, 32, 220, 0.06)); box-shadow: 0 4px 0 var(--accent-edge); }
.hacc-hero small { display: block; font-size: 11.5px; font-weight: 800; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.06em; }
.hacc-hero b { display: block; font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.2; }
.hacc-hero .dim { display: block; font-size: 12.5px; margin-top: 2px; }
.hacc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hacc-card { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 4px 0 var(--line); }
.hacc-card-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.hacc-card-h h2 { font-size: 16px; font-weight: 900; }
.hacc-card-h p { font-size: 12.5px; margin-top: 2px; }
.hacc-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 12px; border-radius: var(--r-sm); background: var(--card-hi); }
.hacc-row .k { font-size: 12px; font-weight: 800; color: var(--muted); }
.hacc-row .v { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hacc-secret { letter-spacing: 0.04em; }
.hacc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hacc-foot .dim { font-size: 12px; }
.hacc-help { padding-bottom: 16px; }
.hacc-help ol { margin: 10px 20px 10px 40px; display: grid; gap: 7px; font-size: 13.5px; }
.hacc-help p { padding: 0 20px; font-size: 12.5px; }
@media (max-width: 1100px) { .hacc-grid { grid-template-columns: minmax(0, 1fr); } }

.dbx { overflow: hidden; }
.dbx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 2px solid var(--line); }
.dbx-head h2 { font-size: 17px; font-weight: 900; }
.dbx-meta { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.dbx-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 520px; }
.dbx-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 2px solid var(--line); }
.dbx-find { position: relative; display: flex; align-items: center; }
.dbx-find .i { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.dbx-find .input { width: 100%; height: 36px; padding-left: 32px; }
.dbx-list { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }
.dbx-t { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 700 12.5px var(--font); text-align: left; cursor: pointer; }
.dbx-t:hover { background: var(--card-hi); color: var(--text); }
.dbx-t.on { background: var(--accent); color: #fff; }
.dbx-t small { margin-left: auto; font-size: 11px; opacity: 0.7; }
.dbx-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; }
.dbx-bar { display: flex; align-items: center; gap: 10px; }
.dbx-bar b { font-size: 15px; font-weight: 900; }
.dbx-search { width: 250px; }
.dbx-grid { max-height: 560px; overflow: auto; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg-sunken); transition: opacity 0.15s; }
.dbx-grid.busy { opacity: 0.55; pointer-events: none; }
.dbx-table { min-width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dbx-table th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; border-bottom: 2px solid var(--line-hi); background: var(--card); text-align: left; white-space: nowrap; }
.dbx-table th[data-dbx-sort] { cursor: pointer; }
.dbx-table th[data-dbx-sort]:hover span { color: var(--accent-text); }
.dbx-table th span { display: flex; align-items: center; gap: 5px; font-weight: 900; color: var(--text); }
.dbx-table th small { display: block; font: 600 10.5px var(--mono); color: var(--faint); }
.dbx-pk { color: #ffc800; }
.dbx-table td { max-width: 280px; padding: 7px 12px; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); color: var(--text-2); }
.dbx-table tbody tr[data-dbx-row] { cursor: pointer; }
.dbx-table tbody tr[data-dbx-row]:hover td { background: rgba(72, 32, 220, 0.16); color: var(--text); }
.dbx-null { color: var(--faint); font-style: italic; }
.dbx-bin { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.dbx-more { color: var(--accent-text); }
.dbx-table td.dbx-empty { padding: 30px; text-align: center; font-family: var(--font); color: var(--muted); }
.dbx-pager { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dbx-sql { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.dbx-sql textarea { min-height: 130px; resize: vertical; font-size: 13px; }
.dbx-sql-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dbx-sql-bar .dim { font-size: 12px; }
.dbx-results { display: flex; flex-direction: column; gap: 8px; }
.dbx-err { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 2px solid rgba(255, 75, 75, 0.35); border-radius: var(--r); background: rgba(255, 75, 75, 0.12); color: #ff8b8b; font: 600 12.5px var(--mono); white-space: pre-wrap; }
.dbx-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: rgba(0, 195, 1, 0.12); color: #58d65a; font-size: 13px; font-weight: 800; }
.dbx-backup { display: grid; gap: 12px; padding: 16px; }
.dbx-box { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card-hi); box-shadow: 0 3px 0 var(--line); }
.dbx-box b { font-size: 15px; font-weight: 900; }
.dbx-box p { margin-top: 2px; font-size: 12.5px; }
.dbx-form { display: grid; gap: 12px; }
.dbx-f { display: flex; flex-direction: column; gap: 5px; }
.dbx-f > span { display: flex; align-items: center; gap: 8px; }
.dbx-f small { font: 600 11px var(--mono); color: var(--faint); }
.dbx-f .pill { height: 20px; padding: 0 8px; font-size: 10.5px; }
.dbx-nullbox { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.dbx-f .input:disabled { opacity: 0.45; }
.dbx-f textarea { resize: vertical; font-size: 12.5px; }
@media (max-width: 980px) { .dbx-body { grid-template-columns: minmax(0, 1fr); } .dbx-side { border-right: 0; border-bottom: 2px solid var(--line); } .dbx-list { max-height: 180px; } }

/* ---------- hosting: dodatek ochrona DDoS (kreator hostingu i karta serwera) */
.cw-addons { margin-top: 16px; display: grid; gap: 8px; }
.cw-addons-h { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cw-addon { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 2px solid var(--line-hi); border-radius: 18px; background: var(--card-hi); box-shadow: 0 3px 0 var(--line-hi); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.cw-addon:hover { border-color: var(--accent-hi); }
.cw-addon:active { transform: translateY(2px); box-shadow: none; }
.cw-addon.on { border-color: var(--accent-hi); background: var(--violet-soft); box-shadow: 0 3px 0 var(--accent-edge); }
.cw-addon b { display: block; font-size: 15px; font-weight: 900; }
.cw-addon small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.cw-addon-price { flex: none; text-align: right; font-size: 15px; font-weight: 900; white-space: nowrap; }
.cw-addon-price small { display: block; margin: 0; font-size: 11.5px; }
.cw-addon-sw { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--fill-hi); transition: background 0.2s; }
.cw-addon-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.cw-addon.on .cw-addon-sw { background: var(--accent); }
.cw-addon.on .cw-addon-sw i { transform: translateX(18px); }
.cw-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--violet-soft); border: 2px solid var(--violet-line); }
.cw-total span { font-size: 13px; font-weight: 800; color: var(--accent-text); }
.cw-total b { font-size: 20px; font-weight: 900; }
.host-ddos .i { color: var(--muted); }
.host-ddos.on .i { color: #00c301; }

/* hosting: własna domena serwera (connect olympus.pl) i rekordy DNS do ustawienia u rejestratora */
.host-domain { margin-top: 0; }
.host-domain .i { color: var(--muted); }
.host-domain.on .i { color: #00c301; }
.host-domain .pill { padding: 3px 10px; font-size: 11.5px; }
.host-domain-name { color: var(--text); }
.host-dns { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--bg-sunken); }
.host-dns-t { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.host-dns-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--card); font-size: 13px; }
.host-dns-row .i { color: var(--faint, var(--muted)); }
.host-dns-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-dns-k { flex: none; min-width: 58px; padding: 3px 8px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 900; text-align: center; letter-spacing: 0.5px; }
.host-dns-v { color: var(--violet-text); font-weight: 800; }
.host-dns-note { padding: 0 4px 6px; color: var(--muted); font-size: 12px; }
.host-dns .notice-inline { margin: 4px 0; }

/* kreator hostingu: miasto bez wolnych maszyn wybranego pakietu (dostępność z Vultr) */
.region-menu button.off { opacity: 0.45; cursor: not-allowed; }
.region-menu button.off:hover { background: none; }
.region-menu button.off small { color: #ff8b8b; }

/* ---------- Malowanie aut (livery.js): studio w ramce na całą stronę, obok #page (ramka nie może się przepinać, bo przeładowałaby studio) */
.lv-layer { position: absolute; inset: 14px 18px 18px 22px; display: flex; }
.lv-layer.hidden { display: none; }
.lv-frame { flex: 1; width: 100%; height: 100%; border: 0; border-radius: 18px; background: var(--bg); }
body.lv-mode .page { visibility: hidden; }
/* Kreator ubrań (clothing.js): ta sama ramka co malowanie aut */
body.cc-mode .page { visibility: hidden; }
.cc-exp-note { display: flex; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card-hi); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.cc-exp-note .i { flex: none; margin-top: 2px; color: #a48cff; }
.lv-exp { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.lv-exp-art { aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); overflow: hidden;
  background: repeating-conic-gradient(#26262c 0 25%, #1d1d22 0 50%) 0 0 / 18px 18px; }
.lv-exp-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lv-exp-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lv-exp-none { font-size: 13px; }
.lv-exp-go { width: 100%; justify-content: center; margin-top: 14px; }
.lv-exp-go + .lv-exp-go { margin-top: 8px; }
.lv-exp-status { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; color: var(--text-2); }

/* ---------- Prześlij opinię (2026-11-10): trzy karty rodzaju jak pakiety, gwiazdki, formularz jak „Zamów skrypt” */
.fb-card { margin-top: 4px; }
.fb-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.fb-kind { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--line); border-radius: 18px; background: var(--card-hi);
  box-shadow: 0 4px 0 var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; }
.fb-kind:hover { border-color: var(--line-hi); }
.fb-kind:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.fb-kind .fb-kind-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-kind b { font-size: 16px; font-weight: 900; }
.fb-kind small { font-size: 12.5px; color: var(--muted); }
.fb-kind.on { border-color: #7c5cff; background: rgba(72, 32, 220, 0.16); box-shadow: 0 4px 0 #3114a6; }
.fb-rate { display: flex; align-items: center; gap: 6px; }
.fb-star { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 14px; background: var(--card-hi);
  box-shadow: 0 3px 0 var(--line); color: var(--faint); cursor: pointer; }
.fb-star .i { width: 22px; height: 22px; }
.fb-star.on { color: #ffc800; border-color: #ffc800; background: rgba(255, 200, 0, 0.12); box-shadow: 0 3px 0 #b88a00; }
.fb-rate-t { margin-left: 8px; font-weight: 800; color: var(--text-2); }
.fb-meta { margin: 2px 0 6px; }
.fb-reply { display: flex; gap: 10px; align-items: flex-start; margin: -4px 12px 10px 58px; padding: 10px 14px; border-radius: 14px; background: rgba(72, 32, 220, 0.16);
  border: 2px solid rgba(124, 92, 255, 0.45); color: var(--text); font-size: 13px; line-height: 1.45; }
.fb-reply .i { color: #a48cff; margin-top: 2px; flex: none; }
.fb-reply span { display: flex; flex-direction: column; gap: 2px; }
.fb-reply b { font-size: 12px; color: #c9bbff; }
@media (max-width: 900px) { .fb-kinds { grid-template-columns: 1fr; } }

/* panel administratora: zakładka „Opinie” */
.adm-fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-fb-n { margin-left: 7px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 11px; }
.adm-fb-new { border-color: #7c5cff; }
.adm-fb-stars { color: #ffc800; letter-spacing: 1px; }

/* ---------- waluta konta (2026-11-10): wiersz w oknie Balansu i okno wyboru waluty jak karty 3D */
.wl-cur { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card-hi); font-size: 13px; color: var(--text-2); }
.wl-cur .i { color: #a48cff; flex: none; }
.wl-cur span { flex: 1; min-width: 0; }
.wl-cur b { color: var(--text); }
.cur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cur-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--card-hi);
  box-shadow: 0 3px 0 var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cur-opt:hover { border-color: var(--line-hi); }
.cur-opt.on { border-color: #7c5cff; background: rgba(72, 32, 220, 0.16); box-shadow: 0 3px 0 #3114a6; }
.cur-sym { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #4820dc; color: #fff; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 #3114a6; }
.cur-t { display: flex; flex-direction: column; min-width: 0; }
.cur-t b { font-weight: 900; }
.cur-t small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* awatar z własnego obrazka (2026-11-10): obrazek z przezroczystym tłem (np. nóż) wystawał poza koło w „Wybierz awatar”.
   Obrazek leży teraz w kole na ciemnym tle i jest przycięty do koła (bez przycinania .user-av, bo ucięłoby to fioletowe obwódki). */
.av-circle { background: #161825; }
.av-up .av-circle { background: var(--bg-sunken); }
.av-circle img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; clip-path: circle(50% at 50% 50%); }

/* ---------- wybór metody płatności (2026-11-10): karty 3D w dwóch kolumnach, logotypy na białych plakietkach jak przy kasie w sklepach */
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--card-hi);
  box-shadow: 0 3px 0 var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; }
.pay-opt:hover { border-color: var(--line-hi); }
.pay-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.pay-opt.on { border-color: #7c5cff; background: rgba(72, 32, 220, 0.16); box-shadow: 0 3px 0 #3114a6; }
.pay-logos { display: flex; gap: 4px; flex: none; }
.pay-logo { height: 34px; min-width: 50px; padding: 4px 8px; display: grid; place-items: center; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.pay-logo img { height: 24px; width: auto; max-width: 64px; object-fit: contain; display: block; -webkit-user-drag: none; }
/* logotypy w wersji na ciemne tło (biały napis): czarna plakietka */
.pay-logo.pay-blik, .pay-logo.pay-applepay, .pay-logo.pay-googlepay, .pay-logo.pay-pix { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pay-opt { min-width: 0; }
.pay-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-t b { font-weight: 900; font-size: 14.5px; }
.pay-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .pay-grid { grid-template-columns: 1fr; } }
/* „Inne metody” (2026-11-10): metody z innych krajów pod głównymi, z kwotą w walucie metody */
.pay-other-h { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 10px; }
.pay-other-h b { font-size: 14px; font-weight: 900; color: var(--text); }
.pay-other-h span { font-size: 12.5px; color: var(--muted); }

/* ---------- płatność w oknie aplikacji (2026-11-10): BLIK kodem, karta w formularzu Stripe, kryptowaluty z adresem i QR */
/* monety jako plakietki: Bitcoin pomarańczowy z ikoną marki, Litecoin niebieski z literą Ł */
.pay-logo.pay-coin { min-width: 34px; width: 34px; padding: 0; border-radius: 50%; color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.pay-logo.pay-btc { background: #f7931a; }
.pay-logo.pay-btc .fi { font-size: 17px; line-height: 1; display: block; }
.pay-logo.pay-ltc { background: #345d9d; }
.pay-logo.pay-ltc b { font-size: 18px; font-weight: 900; line-height: 1; }
.pay-err { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 11px 13px; border: 2px solid rgba(255, 75, 75, 0.35); border-radius: 14px;
  background: rgba(255, 75, 75, 0.1); color: #ff8f8f; font-size: 13px; font-weight: 800; line-height: 1.4; }
.pay-err .i { flex: none; margin-top: 2px; }
.pay-err[hidden] { display: none; }
/* ekran „Gotowe!” */
.pay-ok { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 6px; text-align: center; }
.pay-ok .coin { width: 76px; height: 76px; font-size: 30px; margin-bottom: 6px; animation: pay-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.pay-ok b { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.pay-ok span { color: var(--text-2, #c9c9d1); font-size: 14.5px; font-weight: 700; max-width: 340px; }
.modal-foot.pay-foot-c { justify-content: center; }
@keyframes pay-pop { from { transform: scale(0.4); opacity: 0; } }
.modal-head:empty { display: none; }

/* BLIK: sześć kafelków 3D na kod (przerwa po trzeciej cyfrze jak w aplikacjach banków) */
.blik { display: flex; flex-direction: column; align-items: center; text-align: center; }
.blik-logo { height: 46px; min-width: 86px; border-radius: 12px; margin: 4px 0 12px; }
.blik-logo img { height: 30px; max-width: 80px; }
.blik-hint { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; font-weight: 700; max-width: 330px; }
.blik-code { display: flex; align-items: center; gap: 8px; }
.blik-gap { width: 10px; }
.blik-d { width: 50px; height: 62px; border: 2px solid var(--line-hi); border-radius: 14px; background: var(--card-hi); box-shadow: 0 3px 0 var(--line-hi);
  color: var(--text); font: 900 28px/1 var(--font); text-align: center; caret-color: #7c5cff; outline: none; transition: border-color 0.1s, box-shadow 0.1s; }
.blik-d:focus { border-color: #7c5cff; box-shadow: 0 3px 0 #3114a6; }
.blik .pay-err { align-self: stretch; text-align: left; }
.blik-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; }
.blik-wait > b { font-size: 18px; font-weight: 900; margin-top: 10px; }
.blik-wait > span { color: var(--muted); font-size: 13.5px; font-weight: 700; max-width: 340px; }
.blik-phone { position: relative; display: grid; place-items: center; }
.blik-phone .coin { width: 70px; height: 70px; font-size: 28px; animation: blik-buzz 1.6s ease-in-out infinite; }
.blik-ping { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #7c5cff; animation: blik-ping 1.6s ease-out infinite; pointer-events: none; }
@keyframes blik-buzz { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-9deg); } 72% { transform: rotate(8deg); } 78% { transform: rotate(-6deg); } 84% { transform: rotate(4deg); } }
@keyframes blik-ping { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.blik-bar { width: 100%; max-width: 320px; height: 12px; margin-top: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.blik-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(#9a80ff, #7c5cff); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  transform-origin: left; animation: blik-time 120s linear forwards; }
@keyframes blik-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#blik-go[hidden] { display: none; }

/* karta: formularz Stripe w ramce, ta sama karta tła co okno */
.card-pay { display: flex; flex-direction: column; }
.card-load { display: flex; align-items: center; justify-content: center; gap: 10px; height: 150px; color: var(--muted); font-size: 13.5px; font-weight: 800; }
.card-frame { width: 100%; height: 150px; border: 0; display: block; background: transparent; transition: height 0.2s; }
.card-frame[hidden] { display: none; }

/* kryptowaluty: wybór monety, karta z QR i adresem, stan wpłaty */
.cx-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cx-coin { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--card-hi);
  box-shadow: 0 3px 0 var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; }
.cx-coin:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.cx-coin.on { border-color: #7c5cff; background: rgba(72, 32, 220, 0.16); box-shadow: 0 3px 0 #3114a6; }
.cx-coin span { display: flex; flex-direction: column; }
.cx-coin b { font-weight: 900; font-size: 14px; }
.cx-coin small { font-size: 12px; color: var(--muted); font-weight: 800; }
.cx-card { display: flex; gap: 16px; padding: 14px; border: 2px solid var(--line); border-radius: 18px; background: var(--card-hi); box-shadow: 0 3px 0 var(--line); }
.cx-qr { flex: none; width: 148px; height: 148px; padding: 8px; border-radius: 14px; background: #fff; }
.cx-qr img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; image-rendering: pixelated; }
.cx-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-l { font-size: 11.5px; font-weight: 900; color: var(--muted); text-transform: none; margin-bottom: 4px; }
.cx-l ~ .cx-l { margin-top: 12px; }
.cx-amt, .cx-addr { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cx-amt b { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; }
.cx-amt .i, .cx-addr .i { color: var(--accent-text); flex: none; }
.cx-amt:hover .i, .cx-addr:hover .i { color: #fff; }
.cx-fiat { color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.cx-addr { padding: 9px 11px; border: 2px solid var(--line-hi); border-radius: 12px; background: var(--bg-sunken); }
.cx-addr .mono { font-size: 12px; line-height: 1.45; word-break: break-all; }
.cx-addr:hover { border-color: #7c5cff; }
.cx-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; }
.cx-status > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cx-status b { color: var(--text); font-size: 14px; font-weight: 900; }
.cx-status.seen { border-color: rgba(255, 150, 0, 0.45); background: rgba(255, 150, 0, 0.08); }
@media (max-width: 560px) { .cx-card { flex-direction: column; align-items: center; } .cx-info { align-self: stretch; } }

/* ---------- inne monety przez FixedFloat (2026-11-10): lista monet z szukajką, okno wymiany ze ścieżką czterech kroków */
.pay-logo.pay-other { background: var(--accent); }
.pay-logo.pay-other .i { font-size: 15px; }
.pay-logo.pay-ff { background: var(--cc, #3a3a44); overflow: hidden; }
.pay-logo.pay-ff img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.pay-logo.pay-ff b { font-size: 15px; font-weight: 900; }
.cx-swap-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 10px 12px; border: 2px solid rgba(124, 92, 255, 0.45);
  border-radius: 16px; background: rgba(72, 32, 220, 0.14); box-shadow: 0 3px 0 #3114a6; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cx-swap-row:active { transform: translateY(2px); box-shadow: 0 1px 0 #3114a6; }
.cx-swap-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cx-swap-row b { font-size: 14px; font-weight: 900; }
.cx-swap-row small { font-size: 12px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-search { position: relative; display: block; margin-bottom: 12px; }
.sw-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sw-search .input { padding-left: 38px; }
.sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 380px; overflow-y: auto; padding: 2px 2px 6px; }
.sw-grid.busy .sw-coin:not(.on) { opacity: 0.45; pointer-events: none; }
.sw-grid .wl-empty { grid-column: 1 / -1; }
.sw-coin { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 2px solid var(--line); border-radius: 14px; background: var(--card-hi);
  box-shadow: 0 3px 0 var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: transform 0.08s, box-shadow 0.08s; }
.sw-coin:hover { border-color: var(--line-hi); }
.sw-coin:active, .sw-coin.on { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.sw-coin.on { border-color: #7c5cff; }
.sw-coin > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sw-coin b { font-size: 14px; font-weight: 900; }
.sw-coin small { font-size: 11.5px; color: var(--muted); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-coin .pay-logo { min-width: 30px; width: 30px; height: 30px; }
/* ścieżka kroków jak w kreatorze: zrobione zielone z ptaszkiem, aktualny fioletowy, dalsze szare */
.sw-path { display: flex; align-items: flex-start; margin: 2px 0 16px; }
.sw-path.off { opacity: 0.45; }
.sw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 62px; }
.sw-step small { font-size: 11.5px; font-weight: 900; color: var(--muted); }
.sw-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--muted); font-weight: 900; font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.sw-step.done .sw-dot { background: var(--green); color: #fff; }
.sw-step.now .sw-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.sw-step.done small, .sw-step.now small { color: var(--text); }
.sw-line { flex: 1; height: 5px; margin-top: 15px; border-radius: 999px; background: var(--line); }
.sw-line.done { background: var(--green); }
.cx-tag { border-color: rgba(255, 150, 0, 0.55); }
.cx-status.bad { border-color: rgba(255, 75, 75, 0.4); background: rgba(255, 75, 75, 0.08); }
.sw-left b { font-variant-numeric: tabular-nums; }
/* minimalna wpłata (2026-11-10): na kafelku monety „Min. 27,00 zł”, poniżej minimum kafelek wyszarzony i nieklikalny */
.sw-coin em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--accent-text); }
.sw-coin.low { opacity: 0.42; cursor: not-allowed; box-shadow: none; transform: none; }
.sw-coin.low em { color: #ff8f8f; }
.sw-min-note { display: flex; align-items: flex-start; gap: 7px; margin: -2px 0 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 150, 0, 0.1);
  color: #ffb84d; font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.sw-min-note .i { flex: none; margin-top: 2px; }
.sw-min { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: #ffb84d; font-size: 12px; font-weight: 800; line-height: 1.4; }
.sw-min .i { flex: none; margin-top: 2px; }