/* ============================================================
   Skracacz — styl spójny z portfolio SlayterLabs (cyberpunk).
   ============================================================ */
:root {
  --bg-0:#05070f; --bg-2:#111626; --line:#1d2438;
  --text:#e8edf7; --muted:#8b95ad; --dim:#586079;
  --cyan:#22e0ff; --cyan-soft:#6df0ff; --violet:#a855f7;
  --glass:rgba(17,22,38,.55); --brd:rgba(120,150,220,.16);
  --grad:linear-gradient(120deg,var(--cyan),var(--violet));
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --body:"Outfit","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--body); color:var(--text); background:var(--bg-0);
  min-height:100vh; line-height:1.6;
  background-image:radial-gradient(circle at 50% -10%, rgba(34,224,255,.14), transparent 55%),
                   radial-gradient(circle at 80% 0%, rgba(168,85,247,.10), transparent 50%);
}
a { color:var(--cyan); text-decoration:none; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* --- układ wyśrodkowany (strona główna, logowanie) --- */
.center { display:grid; place-items:center; padding:2rem 1.25rem; }
.card {
  width:100%; max-width:520px;
  background:var(--glass); border:1px solid var(--brd); border-radius:18px;
  padding:2.4rem 2rem; backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9); text-align:center;
}
.brand {
  font-family:var(--mono); font-weight:700; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:.55rem; color:var(--text);
  font-size:.95rem; margin-bottom:1.4rem;
}
.brand .v { color:var(--violet); }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }

h1 { font-family:var(--body); font-weight:600; font-size:clamp(1.8rem,1.3rem+2.4vw,2.6rem); margin-bottom:.5rem; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); margin-bottom:1.6rem; }

/* --- formularz --- */
form { display:flex; flex-direction:column; gap:.8rem; }
.field {
  font-family:var(--mono); font-size:.95rem; color:var(--text);
  padding:.9rem 1rem; border-radius:10px;
  border:1px solid var(--line); background:rgba(8,11,20,.6);
}
.field:focus { border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(34,224,255,.12); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.92rem; cursor:pointer;
  padding:.85rem 1.4rem; border-radius:10px;
  border:1px solid var(--brd); background:var(--glass); color:var(--text);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform:translateY(-2px); border-color:var(--cyan); }
.btn-primary { background:var(--grad); color:var(--bg-0); font-weight:600; border-color:transparent; }
.btn-primary:hover { box-shadow:0 0 24px rgba(34,224,255,.45); }

.err {
  font-family:var(--mono); font-size:.85rem; color:#ff8d8d;
  background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.3);
  padding:.6rem .8rem; border-radius:8px;
}

/* --- wynik (krótki URL) --- */
.out { display:flex; gap:.6rem; margin-top:.5rem; }
.short-url {
  flex:1; font-family:var(--mono); font-size:.95rem; color:var(--cyan-soft);
  padding:.85rem 1rem; border-radius:10px; border:1px solid var(--cyan);
  background:rgba(34,224,255,.06); width:100%;
}
.again { display:inline-block; margin-top:1.2rem; font-family:var(--mono); font-size:.85rem; }
.foot { margin-top:1.8rem; color:var(--dim); font-size:.82rem; font-family:var(--mono); }
code { font-family:var(--mono); color:var(--cyan-soft); }

/* ============================================================
   PANEL ADMINA
   ============================================================ */
.admin { padding:0; }
.bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem; border-bottom:1px solid var(--line);
  background:rgba(5,7,15,.7); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.bar .brand { margin:0; }
.logout { font-family:var(--mono); font-size:.85rem; color:var(--muted); }
.logout:hover { color:var(--cyan); }

.panel { max-width:1100px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.stats { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.stat {
  flex:1; min-width:140px; background:var(--glass); border:1px solid var(--brd);
  border-radius:12px; padding:1.1rem 1.3rem;
}
.stat b { display:block; font-size:1.9rem; font-family:var(--body); color:var(--cyan-soft); }
.stat span { font-family:var(--mono); font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.search { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.search .field, .search input { flex:1; }

.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th {
  text-align:left; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); padding:.7rem .6rem; border-bottom:1px solid var(--line);
}
.tbl td { padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr.is-blocked { opacity:.5; }
.tbl td.url { max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.ok { color:#7ee787; font-family:var(--mono); font-size:.8rem; }
.no { color:#ff8d8d; font-family:var(--mono); font-size:.8rem; }
.empty { text-align:center; color:var(--dim); padding:2rem; }

.acts form { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.mini {
  font-family:var(--mono); font-size:.75rem; cursor:pointer;
  padding:.35rem .7rem; border-radius:7px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
}
.mini:hover { border-color:var(--cyan); color:var(--cyan); }
.mini.danger:hover { border-color:#ff6b6b; color:#ff6b6b; }

@media (max-width:640px) {
  .tbl td.url { max-width:140px; }
  .stat b { font-size:1.5rem; }
}

/* ============================================================
   KONTA / PANEL UŻYTKOWNIKA — dodatki
   ============================================================ */
.home, .admin { display:flex; flex-direction:column; min-height:100vh; }
.grow { flex:1; }

/* Górna nawigacja */
.topnav { display:flex; align-items:center; flex-wrap:wrap; row-gap:.5rem; font-family:var(--mono); font-size:.9rem; }
.topnav > * + * { margin-left:1.75rem; }
.topnav a { color:var(--muted); }
.topnav a:hover { color:var(--cyan); }
.topnav .who { color:var(--cyan-soft); }
.topnav .nav-cta {
  padding:.45rem 1rem; border:1px solid var(--brd); border-radius:999px; color:var(--text);
}
.topnav .nav-cta:hover { border-color:var(--cyan); color:var(--cyan); }

.alt { margin-top:1.4rem; font-size:.9rem; color:var(--muted); }
.alt a { font-family:var(--mono); }

/* Tytuł panelu */
.ptitle { font-family:var(--body); font-weight:600; font-size:1.8rem; margin-bottom:1.4rem; }

/* Banery (sukces / błąd) */
.banner {
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.88rem;
  padding:.8rem 1rem; border-radius:10px; margin-bottom:1.4rem;
}
.banner.ok  { color:#9af5c0; background:rgba(34,224,255,.07); border:1px solid rgba(34,224,255,.3); }
.banner.bad { color:#ff9d9d; background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.3); }
.banner .short-url { flex:1; min-width:200px; }

/* Sekcja formularza (box) */
.box {
  background:var(--glass); border:1px solid var(--brd); border-radius:14px;
  padding:1.5rem; margin-bottom:1.8rem;
}
.box h2 { font-family:var(--body); font-weight:600; font-size:1.15rem; margin-bottom:1rem; }
.box form { gap:.9rem; }
.grid2 { display:grid; grid-template-columns:1fr 220px; gap:.8rem; }
.row-btns { display:flex; gap:.7rem; }
.sel-label { font-family:var(--mono); font-size:.82rem; color:var(--muted); display:flex; flex-direction:column; gap:.4rem; }

/* Pole własnej frazy z prefiksem adresu */
.alias-wrap { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(8,11,20,.6); }
.alias-wrap .alias-prefix {
  display:flex; align-items:center; padding:0 .7rem; font-family:var(--mono);
  font-size:.78rem; color:var(--dim); background:rgba(255,255,255,.03); white-space:nowrap;
  border-right:1px solid var(--line);
}
.alias-wrap .field { border:0; border-radius:0; background:transparent; flex:1; min-width:0; }
.alias-wrap .field:focus { box-shadow:none; }

/* Nagłówek listy: sortowanie + szukanie */
.list-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.sortbar { font-family:var(--mono); font-size:.82rem; color:var(--dim); display:flex; flex-wrap:wrap; align-items:center; row-gap:.4rem; }
.sortbar > * + * { margin-left:1.1rem; }
.sortbar a { color:var(--muted); }
.sortbar a:hover { color:var(--cyan); }
.sortbar a.active { color:var(--cyan); border-bottom:1px solid var(--cyan); }

.tbl td.date { font-family:var(--mono); font-size:.8rem; color:var(--muted); white-space:nowrap; }
.dim { color:var(--dim); }
.acts { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.acts a.mini { display:inline-block; text-align:center; }

@media (max-width:680px) {
  .grid2 { grid-template-columns:1fr; }
  .list-head { flex-direction:column; align-items:stretch; }
}

/* --- Strony komunikatów (np. link wygasły/wyłączony, 404) --- */
.card.info h1 { margin-bottom:1.1rem; }
.card.info p  { margin-bottom:2.6rem; color:var(--muted); }
.card.info .btn { margin-top:.4rem; }

/* ============================================================
   PODGLĄD LINKU (kod z "!") + WYRÓŻNIENIE ZGŁOSZEŃ W PANELU
   ============================================================ */
.preview .dest { text-align:left; margin:1.6rem 0; }
.dest-label {
  display:block; font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:.55rem;
}
.dest-url {
  font-family:var(--mono); font-size:.9rem; color:var(--cyan-soft);
  background:rgba(34,224,255,.06); border:1px solid var(--cyan); border-radius:10px;
  padding:.95rem 1.1rem; word-break:break-all; line-height:1.55;
}
.preview-actions {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem;
}
.preview-actions .btn { min-width:140px; }
.preview-actions form { margin:0; }
.preview .again { margin-top:2rem; }
.btn.report { border-color:rgba(255,107,107,.5); color:#ff9d9d; }
.btn.report:hover { border-color:#ff6b6b; color:#ff6b6b; box-shadow:0 0 22px rgba(255,80,80,.25); }

/* Badge z liczbą zgłoszeń przy kodzie */
.flag {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 .35rem; border-radius:999px; vertical-align:middle;
  background:rgba(255,80,80,.16); border:1px solid #ff6b6b; color:#ff8d8d;
  font-family:var(--mono); font-weight:700; font-size:.74rem; line-height:1;
}

/* Wiersz ze zgłoszeniem — wyraźnie się wyróżnia */
.tbl tr.is-reported td { background:rgba(255,80,80,.07); }
.tbl tr.is-reported td:first-child { box-shadow:inset 3px 0 0 #ff6b6b; }
.tbl tr.is-reported.is-blocked { opacity:1; }   /* zgłoszenie ważniejsze niż wyszarzenie */

/* Przekroczony próg — alarm */
.tbl tr.is-hot td { background:rgba(255,80,80,.14); }
.tbl tr.is-hot td:first-child { box-shadow:inset 3px 0 0 #ff3b3b; }
.tbl tr.is-hot .flag {
  background:#ff5252; border-color:#ff5252; color:#1a0606;
  box-shadow:0 0 14px rgba(255,82,82,.6);
}

/* Przycisk czyszczenia zgłoszeń w panelu */
.mini.warn { color:#ffce6b; border-color:rgba(255,206,107,.4); }
.mini.warn:hover { border-color:#ffce6b; color:#ffce6b; }

/* ============================================================
   STRONA GŁÓWNA (LANDING) — menu, sekcje, FAQ
   Nazwy nie kolidują z resztą serwisu: karty = .lcard, stopka = .lfoot.
   ============================================================ */
html { scroll-behavior:smooth; }

/* --- górne menu --- */
.nav {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem 1.5rem; border-bottom:1px solid var(--line);
  background:rgba(5,7,15,.72); backdrop-filter:blur(12px);
}
.nav .brand { margin:0; }
.nav-links { display:flex; align-items:center; gap:1.6rem; font-family:var(--mono); font-size:.85rem; }
.nav-links a { color:var(--muted); transition:color .2s var(--ease); }
.nav-links a:hover { color:var(--cyan); }
.nav-cta { display:flex; align-items:center; gap:.7rem; }
.nav-cta .who { font-family:var(--mono); font-size:.85rem; color:var(--cyan-soft); }
.btn-ghost { background:transparent; }

/* --- layout sekcji --- */
.wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.section { padding:5rem 0; scroll-margin-top:84px; }
.eyebrow {
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.eyebrow .num { color:var(--violet); }
.section h2 {
  font-family:var(--body); font-weight:600; font-size:clamp(1.7rem,1.2rem+2vw,2.4rem);
  line-height:1.15; margin-bottom:.8rem; letter-spacing:-.01em;
}
.section .sub { color:var(--muted); max-width:60ch; margin-bottom:2.4rem; font-size:1.02rem; }

/* --- HERO --- */
.hero { padding:4.5rem 0 4rem; text-align:center; scroll-margin-top:84px; }
.hero .eyebrow { justify-content:center; }
.hero h1 {
  font-family:var(--body); font-weight:700; font-size:clamp(2.2rem,1.5rem+3.6vw,3.6rem);
  line-height:1.08; letter-spacing:-.02em; margin-bottom:1rem;
}
.hero .lead { font-size:1.12rem; max-width:56ch; margin:0 auto 2.2rem; }
.hero-form {
  display:flex; flex-direction:row; gap:.6rem; max-width:560px; margin:0 auto;
  background:var(--glass); border:1px solid var(--brd); border-radius:14px; padding:.5rem;
  backdrop-filter:blur(14px); box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.hero-form input[type=url] {
  flex:1; font-family:var(--mono); font-size:.95rem; color:var(--text);
  padding:.85rem 1rem; border-radius:9px; border:1px solid transparent; background:rgba(8,11,20,.55); min-width:0;
}
.hero-form input[type=url]:focus { outline:none; border-color:var(--cyan); }
.hero-err { max-width:560px; margin:0 auto 1rem; }
.hero-result { max-width:560px; margin:0 auto; }
.hero-note { font-family:var(--mono); font-size:.84rem; color:var(--dim); margin-top:1rem; }
.pills { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:2.2rem; }
.pill {
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; background:rgba(8,11,20,.4);
}
.pill b { color:var(--cyan-soft); font-weight:500; }

/* --- karty landingu --- */
.lcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem; }
.lcard {
  background:var(--glass); border:1px solid var(--brd); border-radius:14px; padding:1.5rem 1.4rem;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.lcard:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 30px 60px -40px rgba(34,224,255,.4); }
.lcard .ico {
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:1rem;
  background:rgba(34,224,255,.08); border:1px solid var(--brd); color:var(--cyan);
}
.lcard .ico svg { width:22px; height:22px; }
.lcard h3 { font-family:var(--body); font-weight:600; font-size:1.08rem; margin-bottom:.45rem; }
.lcard p { color:var(--muted); font-size:.92rem; }

/* --- "po co" --- */
.why { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem 2rem; }
.why .item { border-left:2px solid var(--line); padding-left:1.1rem; }
.why .item .k { font-family:var(--mono); color:var(--violet); font-size:.85rem; margin-bottom:.35rem; }
.why .item h3 { font-size:1.05rem; font-weight:600; margin-bottom:.3rem; }
.why .item p { color:var(--muted); font-size:.92rem; }

/* --- bezpieczeństwo --- */
.sec-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:start; }
.sec-list { display:flex; flex-direction:column; gap:1.1rem; }
.sec-row { display:flex; gap:.9rem; }
.sec-row .chk {
  flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(34,224,255,.1); border:1px solid var(--brd); color:var(--cyan); margin-top:.1rem;
}
.sec-row .chk svg { width:15px; height:15px; }
.sec-row b { display:block; font-weight:600; font-size:.98rem; margin-bottom:.15rem; }
.sec-row span { color:var(--muted); font-size:.9rem; }
.sec-demo { background:var(--glass); border:1px solid var(--brd); border-radius:14px; padding:1.4rem; font-family:var(--mono); }
.sec-demo .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-bottom:.7rem; }
.sec-demo .url-row {
  display:flex; align-items:center; gap:.5rem; background:rgba(8,11,20,.6); border:1px solid var(--line);
  border-radius:9px; padding:.7rem .85rem; font-size:.85rem; color:var(--cyan-soft); margin-bottom:1rem; flex-wrap:wrap;
}
.sec-demo .url-row .bang { color:var(--violet); font-weight:700; }
.sec-demo .arrow { text-align:center; color:var(--dim); margin:.3rem 0; }
.sec-demo .dest {
  background:rgba(34,224,255,.06); border:1px solid var(--cyan); border-radius:9px; padding:.7rem .85rem;
  font-size:.8rem; color:var(--cyan-soft); word-break:break-all; margin-bottom:1rem;
}
.sec-demo .demo-btns { display:flex; gap:.6rem; }
.sec-demo .demo-btns .b { flex:1; text-align:center; border-radius:8px; padding:.55rem; font-size:.78rem; border:1px solid var(--brd); }
.sec-demo .demo-btns .go { background:var(--grad); color:var(--bg-0); font-weight:600; border-color:transparent; }
.sec-demo .demo-btns .rep { color:#ff9d9d; border-color:rgba(255,107,107,.5); }

/* --- FAQ --- */
.faq { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem; }
.faq details { background:var(--glass); border:1px solid var(--brd); border-radius:12px; padding:.2rem .4rem; }
.faq details[open] { border-color:rgba(34,224,255,.35); }
.faq summary {
  cursor:pointer; list-style:none; padding:1rem 1.1rem; font-weight:600; font-size:.98rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { color:var(--cyan); font-family:var(--mono); transition:transform .2s var(--ease); }
.faq details[open] summary .plus { transform:rotate(45deg); }
.faq details p { color:var(--muted); font-size:.92rem; padding:0 1.1rem 1.1rem; }

/* --- CTA --- */
.cta {
  text-align:center; border:1px solid var(--brd); border-radius:20px; padding:3.4rem 1.5rem; margin:1rem 0;
  background:radial-gradient(circle at 50% 0%, rgba(34,224,255,.12), transparent 60%), var(--glass);
}
.cta h2 { font-size:clamp(1.6rem,1.2rem+1.8vw,2.2rem); margin-bottom:.7rem; }
.cta p { color:var(--muted); margin:0 auto 1.8rem; max-width:48ch; }
.cta-btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* --- stopka landingu (.lfoot, by nie nadpisać istniejącego .foot) --- */
.lfoot { border-top:1px solid var(--line); padding:2.5rem 0; margin-top:2rem; }
.lfoot-grid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:center; }
.lfoot .brand { margin:0; }
.lfoot-nav { display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--mono); font-size:.84rem; }
.lfoot-nav a { color:var(--muted); }
.lfoot-nav a:hover { color:var(--cyan); }
.lfoot .copy { font-family:var(--mono); font-size:.78rem; color:var(--dim); }

@media (max-width:860px) {
  .sec-grid { grid-template-columns:1fr; }
  .faq { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .nav-links { display:none; }
  .nav-cta .btn-ghost, .nav-cta .who { display:none; }
  .section { padding:3.5rem 0; }
  .hero-form { flex-direction:column; }
}

/* ============================================================
   PANEL UŻYTKOWNIKA — układ z menu bocznym + statystyki
   Nowe klasy (.app/.side/.main/...) nie kolidują z resztą.
   ============================================================ */
.app { display:grid; grid-template-columns:262px 1fr; min-height:100vh; }

/* --- menu boczne --- */
.side {
  border-right:1px solid var(--line); background:rgba(5,7,15,.6); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:1.3rem 1rem;
}
.side-brand {
  font-family:var(--mono); font-weight:700; letter-spacing:.05em; display:flex; align-items:center; gap:.55rem;
  color:var(--text); font-size:.98rem; padding:.3rem .6rem 1.3rem;
}
.side-brand .v { color:var(--violet); }
.side-brand .dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.side-label { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding:.6rem .7rem .4rem; }
.side-nav { display:flex; flex-direction:column; gap:.25rem; }
.side-link {
  display:flex; align-items:center; gap:.7rem; padding:.65rem .7rem; border-radius:10px;
  color:var(--muted); font-size:.92rem; border:1px solid transparent; transition:all .18s var(--ease);
}
.side-link svg { width:18px; height:18px; flex:none; }
.side-link:hover { color:var(--text); background:rgba(120,150,220,.06); }
.side-link.active { color:var(--text); background:rgba(34,224,255,.08); border-color:var(--brd); }
.side-link.active svg { color:var(--cyan); }
.side-foot { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); }
.side-user { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; }
.avatar {
  width:34px; height:34px; border-radius:9px; background:var(--grad); color:var(--bg-0);
  display:grid; place-items:center; font-weight:700; font-family:var(--mono); font-size:.9rem; flex:none;
}
.side-user .u-name { font-size:.88rem; font-weight:600; line-height:1.2; }
.side-user .u-sub { font-family:var(--mono); font-size:.7rem; color:var(--dim); }
.side-foot a { display:block; font-family:var(--mono); font-size:.82rem; color:var(--muted); padding:.45rem .7rem; border-radius:8px; }
.side-foot a:hover { color:var(--cyan); background:rgba(120,150,220,.06); }

/* --- obszar główny --- */
.main { min-width:0; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.2rem 1.8rem; border-bottom:1px solid var(--line); background:rgba(5,7,15,.4);
  position:sticky; top:0; z-index:5; backdrop-filter:blur(8px);
}
.tb-title { font-family:var(--body); font-weight:600; font-size:1.3rem; }
.tb-sub { font-family:var(--mono); font-size:.76rem; color:var(--dim); margin-top:.1rem; }
.content { padding:1.8rem; }

/* --- zakładki --- */
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:tab-fade .25s var(--ease); }
@keyframes tab-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* --- nagłówki sekcji w panelu --- */
.box h3 { font-family:var(--body); font-weight:600; font-size:1.05rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.box h3 .link { font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.box h3 .link:hover { color:var(--cyan); }

/* --- formularze panelu --- */
.form-grid { display:flex; flex-direction:column; gap:.9rem; }
.fld-lbl { font-family:var(--mono); font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; display:block; }
.muted { color:var(--muted); font-size:.9rem; }
.stat.alert b { color:#ff9d9d; }

/* przycisk usuwania konta */
.btn-danger { border-color:rgba(255,80,80,.4); color:#ff9d9d; }
.btn-danger:hover { border-color:#ff6b6b; color:#ff6b6b; box-shadow:0 0 22px rgba(255,80,80,.25); }
.danger-zone { border-color:rgba(255,80,80,.3); }
.danger-zone h3 { color:#ff9d9d; }

/* status w tabeli panelu */
.tbl tr.off { opacity:.5; }

/* --- statystyki: dwie kolumny --- */
.grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }

/* wykres słupkowy */
.chart { display:flex; align-items:flex-end; gap:.6rem; height:170px; padding-top:1rem; }
.chart .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; height:100%; justify-content:flex-end; }
.chart .bar .fill { width:100%; max-width:46px; border-radius:6px 6px 0 0; background:var(--grad); opacity:.85; }
.chart .bar .day { font-family:var(--mono); font-size:.68rem; color:var(--dim); text-transform:capitalize; }

/* ranking linków */
.top-row { display:flex; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.top-row:last-child { border-bottom:0; }
.top-row .code { font-family:var(--mono); font-size:.85rem; color:var(--cyan-soft); width:120px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-row .track { flex:1; height:8px; border-radius:999px; background:rgba(120,150,220,.1); overflow:hidden; }
.top-row .track i { display:block; height:100%; border-radius:999px; background:var(--grad); }
.top-row .val { font-family:var(--mono); font-size:.82rem; color:var(--muted); width:60px; text-align:right; flex:none; }

/* wykres kołowy krajów */
.pie-wrap { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.pie { width:130px; height:130px; flex:none; }
.pie path, .pie circle { cursor:pointer; transition:opacity .15s var(--ease); }
.pie:hover path, .pie:hover circle { opacity:.55; }
.pie path:hover, .pie circle:hover { opacity:1; }
.pie-legend { list-style:none; display:flex; flex-direction:column; gap:.5rem; min-width:160px; flex:1; }
.pie-legend li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; }
.pie-legend .dotc { width:11px; height:11px; border-radius:3px; flex:none; }
.pie-legend b { font-weight:600; }
.pie-legend .lv { margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--muted); }

@media (max-width:900px) {
  .grid-2col { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:column; border-right:0; border-bottom:1px solid var(--line); }
  .side-nav { flex-direction:row; flex-wrap:wrap; gap:.4rem; }
  .side-link { font-size:.82rem; padding:.5rem .7rem; }
  .side-label { display:none; }
  .side-foot { margin-top:1rem; }
}

/* ============================================================
   STRONY-LINKI ("link in bio")
   ============================================================ */
.lp-body { min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:0 1rem 3.5rem; }
.lp { width:100%; max-width:560px; }

.lp-banner {
  width:100%; overflow:hidden;
  border:1px solid var(--brd); border-top:0; border-radius:0 0 20px 20px;
}
.lp-banner img { width:100%; height:auto; display:block; }
.lp-banner-empty { aspect-ratio:3 / 1; background:var(--bg-2);
  background:
    radial-gradient(circle at 28% 18%, rgba(34,224,255,.20), transparent 60%),
    radial-gradient(circle at 82% 0%, rgba(168,85,247,.18), transparent 55%),
    var(--bg-2);
}

.lp-title {
  text-align:center; font-family:var(--body); font-weight:700; line-height:1.15;
  font-size:clamp(1.5rem, 1.1rem + 2.4vw, 2.05rem); margin:1.5rem 0 .5rem; letter-spacing:-.01em;
}
.lp-bio { text-align:center; color:var(--muted); margin:.15rem auto; max-width:46ch; line-height:1.5; }

.lp-tiles { display:flex; flex-direction:column; gap:.75rem; margin:1.7rem 0 .5rem; }
.lp-tile {
  display:flex; align-items:center; gap:1rem; padding:.85rem 1.05rem; border-radius:15px;
  background:var(--glass); border:1px solid var(--brd); color:var(--text); text-decoration:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lp-tile:hover {
  transform:translateY(-2px); border-color:var(--accent, var(--cyan));
  box-shadow:0 16px 44px -24px var(--accent, var(--cyan));
}
.lp-tile .ic {
  width:44px; height:44px; flex:none; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; background:rgba(5,7,15,.6); border:1px solid var(--line);
}
.lp-tile .ic img { width:26px; height:26px; object-fit:contain; display:block; }
.lp-tile .ic-fallback { font-family:var(--mono); font-weight:700; font-size:1.15rem; color:var(--accent, var(--cyan)); }
.lp-tile .nm { flex:1; font-weight:600; font-size:1rem; word-break:break-word; }
.lp-tile .arr { font-family:var(--mono); color:var(--dim); transition:color .18s var(--ease); }
.lp-tile:hover .arr { color:var(--accent, var(--cyan)); }

.lp-empty { text-align:center; color:var(--dim); margin:2.2rem 0; }
.lp-foot { display:block; text-align:center; margin-top:1.8rem; font-family:var(--mono); font-size:.76rem; color:var(--dim); text-decoration:none; }
.lp-foot:hover { color:var(--cyan); }

/* akcenty kafelków */
.lp-accent-cyan   { --accent:#22e0ff; }
.lp-accent-violet { --accent:#a855f7; }
.lp-accent-green  { --accent:#7ee787; }
.lp-accent-amber  { --accent:#ffce6b; }