/* Panel partnera - system wizualny.
   Zasady, ktore trzymaja ten plik w ryzach:
   - dwa kroje: Poppins (liczby i naglowki), Inter (reszta),
   - zloto = pieniadze i nic wiecej, lawenda = stan systemu (aktywne, focus),
   - skala odstepow 4/8/12/16/24/32/48/64, promien karty 16, wnetrza 10,
   - glebia z jasnosci powierzchni, nie z cieni; cien tylko pod tym, co unosi sie nad trescia,
   - ruch wylacznie na transform i opacity, 140-220 ms, ease-out. */

:root{
  --bg:#0B0A10;
  --s1:#131219;           /* karta */
  --s2:#1A1922;           /* element w karcie */
  --line:#26242F;
  --line-2:#332F3F;

  --tx:#F2F1F6;           /* tekst glowny   17.5:1 */
  --tx2:#A8A5B5;          /* tekst wspierajacy 8.2:1 */
  --tx3:#8B8799;          /* etykiety        5.7:1 */

  --accent:#8B7FF0;       /* stan systemu: aktywne, focus */
  --accent-tx:#A99CFF;
  --money:#EFB865;        /* wylacznie kwoty */
  --up:#4ADE80;
  --down:#FF8199;

  --r-card:16px;
  --r-el:10px;
  --r-sm:8px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  padding:0 24px 64px;
  overflow-x:clip;
}

.wrap{max-width:1080px; margin:0 auto}

/* liczby zawsze tabelaryczne - kolumny nie tancza przy odswiezeniu */
.num{font-family:Poppins,Inter,sans-serif; font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1; letter-spacing:-0.02em}

a{color:var(--accent-tx); text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ---------------------------------------------------------------- naglowek */

.top{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:48px 0 24px;
}
.top h1{font-family:Poppins,sans-serif; font-weight:600; font-size:28px;
  letter-spacing:-0.025em; line-height:1.15}
.top .kod{color:var(--tx3); font-size:15px}
.top .kod b{color:var(--tx2); font-weight:500}
.top .swieze{margin-left:auto; color:var(--tx3); font-size:13px}
.top .out{color:var(--tx2); font-size:14px}
.top .out:hover{color:var(--tx)}
.top .swieze:empty{display:none}
@media (max-width:720px){ .top .swieze{margin-left:0; width:100%; order:9} }

/* ---------------------------------------------------------------- zakres */

.zakres{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px}

.seg{display:flex; gap:4px; background:var(--s1); border:1px solid var(--line);
  padding:4px; border-radius:12px}
.seg button{
  font:500 14px/1 Inter,sans-serif; color:var(--tx2);
  background:none; border:0; padding:9px 14px; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; transition:color .14s var(--ease);
}
.seg button:hover{color:var(--tx)}
.seg button[aria-pressed="true"]{background:var(--accent); color:#0B0A10; font-weight:600}

.daty{display:flex; align-items:center; gap:8px; margin-left:auto; min-width:0}
.daty span{color:var(--tx3); font-size:14px}
.daty input{
  font:400 14px/1 Inter,sans-serif; color:var(--tx); background:var(--s1);
  border:1px solid var(--line); border-radius:var(--r-el);
  padding:10px 12px; color-scheme:dark; min-width:0;
  transition:border-color .14s var(--ease);
}
.daty input:hover{border-color:var(--line-2)}

/* ---------------------------------------------------------------- karty */

.card{background:var(--s1); border:1px solid var(--line); border-radius:var(--r-card)}

.hero{display:flex; gap:32px; flex-wrap:wrap; padding:32px; margin-bottom:16px}
.hero .lab{color:var(--tx3); font-size:14px}
.hero .kwota{
  font-family:Poppins,sans-serif; font-weight:600; color:var(--money);
  font-size:clamp(40px, 7vw, 56px); line-height:1.05; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; margin-top:8px;
}
.hero .kwota .u{font-size:.42em; font-weight:500; color:var(--tx2); margin-left:8px;
  letter-spacing:0}
.hero .delta{margin-top:12px}
.hero .prog{color:var(--tx3); font-size:13px; margin-top:8px; max-width:44ch}

.dzisiaj{display:flex; gap:32px; margin-left:auto; align-items:flex-start}
.dzisiaj > div{min-width:104px}
.dzisiaj .lab{color:var(--tx3); font-size:13px}
.dzisiaj .v{font-family:Poppins,sans-serif; font-weight:600; font-size:22px;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em; margin-top:6px}
.dzisiaj .p{color:var(--tx2); font-size:13px; margin-top:4px;
  font-variant-numeric:tabular-nums}
.dzisiaj .p.czeka{color:var(--tx3)}

.delta{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--tx3)}
.delta .zm{font-weight:600; font-variant-numeric:tabular-nums}
.delta.rowno .zm{color:var(--tx2)}
.delta.up .zm{color:var(--up)}
.delta.down .zm{color:var(--down)}

/* ---------------------------------------------------------------- wykres */

.chart{padding:24px 24px 16px; margin-bottom:32px}
.chart header{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px}
.chart h2{font:500 15px/1.3 Inter,sans-serif; color:var(--tx2)}
#plot{position:relative}
#plot svg{display:block; width:100%; overflow:visible}
.grid-line{stroke:#1F1D28; stroke-width:1}
.axis{fill:var(--tx3); font:400 12px Inter,sans-serif; font-variant-numeric:tabular-nums}

.tip{
  position:absolute; left:0; top:0; visibility:hidden; opacity:0;
  transform:translate(-50%,calc(-100% - 12px)); pointer-events:none;
  background:#1D1B26; border:1px solid var(--line-2); border-radius:var(--r-el);
  padding:10px 12px; white-space:nowrap; z-index:5;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.9);
  transition:opacity .12s var(--ease);
}
.tip .d{color:var(--tx3); font-size:12px}
.tip .v{font-family:Poppins,sans-serif; font-weight:600; font-size:17px; margin-top:2px;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
.tip .w{color:var(--tx3); font-size:12px; margin-top:4px}

/* ---------------------------------------------------------------- metryki */

.metryki{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px}
.metryka{padding:20px 24px}
.metryka .lab{color:var(--tx3); font-size:14px}
.metryka .v{font-family:Poppins,sans-serif; font-weight:600; font-size:28px;
  letter-spacing:-0.025em; font-variant-numeric:tabular-nums; margin:8px 0 8px}

/* ---------------------------------------------------------------- stany */

.sk{border-radius:var(--r-sm); background:var(--s2); position:relative; overflow:hidden}
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:sweep 1.4s var(--ease) infinite;
}
@keyframes sweep{to{transform:translateX(100%)}}

.pusto{padding:48px 24px; text-align:center; color:var(--tx2); font-size:14px}
.pusto b{display:block; color:var(--tx); font-weight:500; font-size:15px; margin-bottom:4px}

.blad-karta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 24px; margin-bottom:16px;
  border:1px solid rgba(255,129,153,.3); background:rgba(255,129,153,.06);
  border-radius:var(--r-card); font-size:14px;
}
.blad-karta button{
  margin-left:auto; padding:9px 16px; cursor:pointer;
  font:500 14px/1 Inter,sans-serif; color:var(--tx);
  background:var(--s2); border:1px solid var(--line-2); border-radius:var(--r-el);
}


/* ---------------------------------------------------------------- logowanie */

.auth{max-width:400px; margin:0 auto; padding:96px 0 48px}
.auth .card{padding:32px}
.auth h1{font-family:Poppins,sans-serif; font-weight:600; font-size:24px;
  letter-spacing:-0.02em; margin-bottom:8px}
.auth .lead{color:var(--tx2); font-size:14px; margin-bottom:24px}
.auth label{display:block; font-size:14px; color:var(--tx2); margin:16px 0 8px}
.auth input{
  width:100%; font:400 16px/1.2 Inter,sans-serif; color:var(--tx);
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-el);
  padding:14px 16px; color-scheme:dark; transition:border-color .14s var(--ease);
}
.auth input::placeholder{color:var(--tx3)}
.auth input:hover{border-color:var(--line-2)}
.auth input.kod{font-family:Poppins,sans-serif; font-size:24px; letter-spacing:.24em;
  text-align:center; font-variant-numeric:tabular-nums}
.auth .go{
  width:100%; margin-top:24px; min-height:52px; padding:16px; cursor:pointer;
  font:600 16px/1 Inter,sans-serif; color:#0B0A10;
  background:var(--accent); border:0; border-radius:var(--r-el);
  transition:transform .12s var(--ease), filter .14s var(--ease);
}
.auth .go:hover{filter:brightness(1.07)}
.auth .go:active{transform:scale(.99)}
.auth .go[disabled]{opacity:.6; cursor:progress}
.auth .kroki{color:var(--tx2); font-size:14px; line-height:1.8; margin-bottom:16px}
.auth .kroki b{color:var(--tx); font-weight:600}
.auth .marka{color:var(--tx3); font-size:14px; margin-bottom:16px}

.blad{
  margin-top:16px; padding:12px 16px; border-radius:var(--r-el); font-size:14px;
  color:#FFC2CE; background:rgba(255,129,153,.08); border:1px solid rgba(255,129,153,.28);
}
.qr{background:#fff; border-radius:12px; padding:12px; margin:0 auto 12px; width:208px}
.qr svg{display:block; width:100%; height:auto}
.sekret{color:var(--tx3); font-size:13px; text-align:center; word-break:break-all;
  font-variant-numeric:tabular-nums}
.kody{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:16px 0}
.kody li{list-style:none; text-align:center; padding:12px 8px; font-size:15px;
  font-variant-numeric:tabular-nums; background:var(--s2);
  border:1px solid var(--line); border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- szerokosci */

@media (max-width:900px){
  .metryki{grid-template-columns:repeat(2,1fr)}
  .hero{padding:24px; gap:24px}
  .dzisiaj{margin-left:0; width:100%; gap:24px}
}

@media (max-width:720px){
  body{padding:0 16px 48px}
  .top{padding:32px 0 16px}
  .top h1{font-size:24px}
  .zakres{gap:8px}
  .seg{width:100%; overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .seg::-webkit-scrollbar{display:none}
  .daty{margin-left:0; width:100%}
  .daty input{flex:1}
  .chart{padding:20px 16px}
  .metryka{padding:16px}
  .metryka .delta{font-size:12px; white-space:nowrap}
  .auth{padding:48px 0 32px}
  .auth .card{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* tekst tylko dla czytnikow ekranu */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}