/* DESIGN · Panel v2 · 3.11.2026
   Panel = kolejna zakładka strony v4.4b. Ładujesz w tej kolejności:
     1) assets/css/te.css       (ze strony v4.4b, bez zmian)
     2) assets/css/te-base.css  (ze strony v4.4b, bez zmian)
     3) assets/css/te-panel-v2.css (ten plik; zastępuje styl.css panelu)
   Nagłówek, pasek górny i stopka: gotowy HTML w DESIGN_Panel_v2_naglowek_stopka.html
   (klasy strony + identyfikatory panelu: #numer, #pasek-wyloguj, data-akcja).
   Ten plik nadaje wygląd ISTNIEJĄCYM klasom panelu. Logika, JS i data-akcja bez zmian.
   Bez czerwieni. Kolory i miary wzięte ze strony. */

:root{
  --tlo:#0A0C0A; --czern:#000;
  --plyta:rgba(255,255,255,.035); --plyta-2:rgba(255,255,255,.06);
  --linia:rgba(255,255,255,.10); --linia-2:rgba(255,255,255,.16);
  --tekst:#F5F5F3; --body:#B2BCAD; --cichy:#8E9B90; --opis:rgba(255,255,255,.65);
  --zloto:#C9A464; --zloto-hover:#D6B577; --zloto-jasne:#F6E3B8;
  --turkus:#2A9D8F;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-przycisk:6px; --r-karta:14px;
}

/* ── Tło strony: czerń + płyta #0A0C0A, poświaty i siatka jak w sekcjach strony ── */
.panel-tlo{ position:relative; overflow-x:clip; background:var(--tlo); min-height:calc(100vh - 110px); }
.panel-tlo::before{ content:''; position:absolute; pointer-events:none; left:-160px; top:0; width:560px; height:560px;
  border-radius:9999px; background:rgba(42,157,143,.05); filter:blur(120px); }
.panel-tlo::after{ content:''; position:absolute; pointer-events:none; right:-10%; top:6%; width:620px; height:520px;
  border-radius:9999px; background:rgba(201,164,100,.07); filter:blur(140px); }
.panel-siatka{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(242,241,236,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(242,241,236,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 90%); mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 90%); }
.panel-tresc{ position:relative; z-index:1; padding-top:28px; padding-bottom:72px; }
@media (min-width:768px){ .panel-tresc{ padding-top:44px; padding-bottom:96px; } }
.waskie{ max-width:34rem; }
.ekran{ position:relative; }

/* ── Etykieta // TEKST // (eyebrow strony) ── */
.znacznik{ display:inline-flex; align-items:center; gap:.75rem; font:700 11px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(201,164,100,.9); margin:22px 0 0; }
.znacznik::before,.znacznik::after{ content:'//'; letter-spacing:0; }
.znacznik::before{ color:var(--zloto); } .znacznik::after{ color:rgba(201,164,100,.4); }

/* ── Typografia jak h1 i lead strony ── */
.ekran h1{ font:800 2.5rem/.98 var(--sans); letter-spacing:-.05em; color:#fff; margin:14px 0 0; text-wrap:balance; }
@media (min-width:640px){ .ekran h1{ font-size:3.5rem; } }
@media (min-width:1024px){ .ekran h1{ font-size:4rem; } }
.podtytul{ font:600 1.3rem/1.3 var(--sans); letter-spacing:-.02em; margin:14px 0 0;
  background:linear-gradient(90deg,#E3C88F,#C9A464 45%,#A8854B); -webkit-background-clip:text; background-clip:text; color:transparent; }
.opis{ font:400 16.5px/1.6 var(--sans); color:var(--opis); margin:14px 0 0; max-width:36rem; text-wrap:pretty; }
.drobne{ font:500 10.5px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* ── Karta (glass strony) ── */
.karta{ position:relative; margin-top:28px; padding:22px 18px; border-radius:var(--r-karta);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--linia); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -20px rgba(0,0,0,.8); }
@media (min-width:640px){ .karta{ padding:28px; } }
.karta-zlota{ background:linear-gradient(180deg,#0F120F,#070807) padding-box,
  linear-gradient(140deg,rgba(201,164,100,.9) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.04) 65%,rgba(201,164,100,.75) 100%) border-box;
  border:1px solid transparent; }
.hud{ display:flex; align-items:center; gap:.85rem; font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(201,164,100,.78); white-space:nowrap; margin-bottom:18px; }
.hud .ln{ flex:1; min-width:12px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.05)); }

/* ── Formularz ── */
.ekran label{ display:block; font:600 14px/1.3 var(--sans); color:var(--tekst); margin:0 0 8px; }
.ekran input[type=email],.ekran input[type=text],.ekran input[inputmode]{ width:100%; min-height:56px; padding:0 16px;
  border-radius:var(--r-przycisk); border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.45);
  font:500 17px/1 var(--sans); color:#fff; outline:none; }
.ekran input::placeholder{ color:rgba(255,255,255,.38); }
.ekran input:focus{ border-color:var(--zloto); box-shadow:0 0 0 3px rgba(201,164,100,.22); }
#pole-kod{ font:700 26px/1 var(--mono); letter-spacing:.42em; text-align:center; }
.ekran .zapamietaj{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; font:400 15px/1.35 var(--sans); color:var(--body); }
.zapamietaj .ptaszek{ width:22px; height:22px; flex:none; border-radius:5px; background:var(--turkus) center/14px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5' fill='none' stroke='%230A0C0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ── Przyciski: dokładnie .btn strony ── */
.przycisk,.przycisk-drugi{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  min-height:56px; padding:.8rem 1.5rem; border-radius:var(--r-przycisk); font:600 16px/1.2 var(--sans); letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; transition:all .3s; margin-top:16px; }
.przycisk{ background:var(--zloto); color:var(--tlo); border:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 20px rgba(201,164,100,.25); }
.przycisk:hover{ background:var(--zloto-hover); box-shadow:0 0 30px rgba(201,164,100,.45); transform:translateY(-1px); }
.przycisk-drugi{ background:rgba(255,255,255,.03); color:#fff; border:1px solid rgba(255,255,255,.15); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.przycisk-drugi:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.przycisk svg,.przycisk-drugi svg{ width:18px; height:18px; }
@media (min-width:640px){ .przycisk,.przycisk-drugi{ width:auto; } }

/* ── Linki pomocnicze: jeden zwarty blok, cele 44 px ── */
.linki{ display:flex; flex-wrap:wrap; gap:0 22px; margin-top:14px; }
.link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font:500 15px/1.3 var(--sans); color:var(--tekst);
  text-decoration:underline; text-decoration-color:rgba(201,164,100,.55); text-underline-offset:4px; background:none; border:0; padding:0; cursor:pointer; }
.link:hover{ color:var(--zloto-jasne); text-decoration-color:var(--zloto); }
.link-cichy{ color:var(--body); }

/* ── Kroki logowania (1 adres · 2 kod · 3 Komplet) ── */
.kroki{ display:flex; gap:8px; margin:0 0 20px; padding:0; list-style:none; }
.kroki span{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font:700 10.5px/1 var(--mono);
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); border:1px solid var(--linia); }
.kroki span.tak{ color:var(--tlo); background:var(--zloto); border-color:var(--zloto); }
.kroki span.zrobione{ color:var(--turkus); border-color:rgba(42,157,143,.45); }

/* ── Twój Komplet: wiersze ogólne (ZIP, Karty, pomoc) ── */
.ogolne{ display:grid; gap:10px; margin-top:28px; }
@media (min-width:1024px){ .ogolne{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ── Część Kompletu (details) ── */
.czesci{ display:grid; gap:12px; margin-top:36px; }
.czesc{ border-radius:var(--r-karta); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--linia); overflow:hidden; }
.czesc[open]{ background:linear-gradient(180deg,#0F120F,#070807) padding-box,
  linear-gradient(140deg,rgba(201,164,100,.9) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.04) 65%,rgba(201,164,100,.75) 100%) border-box;
  border:1px solid transparent; }
.czesc > summary{ list-style:none; display:flex; align-items:center; gap:14px; min-height:76px; padding:16px 18px; cursor:pointer; }
.czesc > summary::-webkit-details-marker{ display:none; }
.czesc-nr{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:999px; font:700 13px/1 var(--mono);
  color:var(--zloto); background:rgba(201,164,100,.1); box-shadow:inset 0 0 0 1px rgba(201,164,100,.4); }
.czesc-tekst{ display:grid; gap:6px; min-width:0; flex:1; }
.czesc-nazwa{ font:800 21px/1.1 var(--sans); letter-spacing:-.03em; color:#fff; }
.czesc-zakres{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cichy); }
.strzalka{ width:20px; height:20px; flex:none; color:var(--cichy); transition:transform .25s; }
.czesc[open] .strzalka{ transform:rotate(90deg); color:var(--zloto); }
@media (min-width:768px){ .czesc > summary{ padding:18px 26px; min-height:84px; } .czesc-nazwa{ font-size:24px; } }

/* ── Moduł w części ── */
.moduly{ display:grid; gap:0; }
.modul{ border-top:1px solid rgba(255,255,255,.07); padding:20px 18px 22px; }
@media (min-width:768px){ .modul{ padding:24px 26px 28px; } }
.modul h3{ display:flex; align-items:baseline; gap:10px; margin:0; font:700 19px/1.25 var(--sans); letter-spacing:-.02em; color:#fff; }
.modul h3 .nr{ font:700 12px/1 var(--mono); letter-spacing:.12em; color:var(--zloto); padding:5px 8px; border-radius:999px;
  background:rgba(201,164,100,.1); box-shadow:inset 0 0 0 1px rgba(201,164,100,.35); flex:none; transform:translateY(-2px); }
.grupy{ display:grid; gap:18px; margin-top:16px; }
@media (min-width:1024px){ .grupy{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
.grupa > .typ{ display:flex; align-items:center; gap:.7rem; margin:0 0 10px; font:500 10px/1 var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:rgba(201,164,100,.78); }
.grupa > .typ::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.04)); }
.lista-plikow{ display:grid; gap:8px; }

/* ── Wiersz pliku ── */
.plik,.plik-krotki{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px 10px 10px;
  border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); text-align:left;
  color:inherit; text-decoration:none; cursor:pointer; transition:border-color .2s,background .2s; }
.plik:hover,.plik-krotki:hover{ border-color:rgba(201,164,100,.45); background:rgba(201,164,100,.05); }
.plik .ikona{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:999px;
  color:var(--zloto); background:rgba(201,164,100,.1); box-shadow:inset 0 0 0 1px rgba(201,164,100,.3); }
.plik .ikona svg{ width:18px; height:18px; }
.opis-pliku{ display:grid; gap:3px; min-width:0; flex:1; }
.nazwa-pliku{ font:600 15.5px/1.25 var(--sans); color:var(--tekst); }
.podpis{ font:400 13px/1.35 var(--sans); color:var(--cichy); }
.akcja{ display:inline-flex; align-items:center; gap:6px; flex:none; font:600 14px/1 var(--sans); color:var(--zloto); }
.akcja svg{ width:16px; height:16px; }
.pobrane{ display:none; width:22px; height:22px; flex:none; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22); }
.jest-pobrane .pobrane{ display:block; box-shadow:none; background:var(--turkus) center/14px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5' fill='none' stroke='%230A0C0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.jest-pobrane .akcja{ color:var(--body); }
.podpis-grupy{ margin:10px 2px 0; font:500 10px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ── Komunikaty: bez czerwieni. Informacja = turkus, problem = złoto ── */
.komunikat{ display:flex; gap:12px; align-items:flex-start; margin-top:10px; padding:14px 16px; border-radius:10px;
  font:500 15px/1.45 var(--sans); color:var(--tekst); background:rgba(42,157,143,.08); border:1px solid rgba(42,157,143,.35); }
.komunikat[data-rodzaj=problem]{ background:rgba(201,164,100,.08); border-color:rgba(201,164,100,.45); }
.komunikat .ikona-k{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:999px;
  color:var(--turkus); background:rgba(42,157,143,.15); }
.komunikat[data-rodzaj=problem] .ikona-k{ color:var(--zloto); background:rgba(201,164,100,.14); }
.komunikat .ikona-k svg{ width:16px; height:16px; }
.plik.niedostepny{ border-color:rgba(201,164,100,.35); background:rgba(201,164,100,.04); cursor:default; }
.plik.niedostepny .akcja{ color:var(--cichy); }

/* ── Okno wylogowania ── */
.wybor{ display:grid; gap:0; margin-top:8px; }
.wyloguj{ display:none; }   /* dubel pod listą; „Wyloguj” zostaje w nagłówku */

/* ── Nagłówek panelu: numer zamówienia jak etykieta strony ── */
.numer-zam{ display:none; align-items:center; gap:8px; font:700 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
@media (min-width:640px){ .numer-zam{ display:inline-flex; } }
.numer-zam b{ color:var(--zloto-jasne); font-weight:700; }

/* ── Ostrość klawiatury jak na stronie ── */
.ekran :focus-visible,.naglowek-panelu :focus-visible{ outline:2px solid var(--zloto); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* ── Układ: telefon jedna kolumna; komputer tekst | karta (jak sekcje strony) ── */
.uklad-2{ display:grid; gap:4px; }
@media (min-width:1024px){ .uklad-2{ grid-template-columns:minmax(0,1fr) minmax(0,30rem); gap:64px; align-items:center; min-height:52vh; }
  .uklad-2 .karta{ margin-top:0; } }
.tylko-komputer{ display:none; } @media (min-width:1024px){ .tylko-komputer{ display:block; margin-top:28px; } }
.hud.odstep{ margin-top:44px; }
@media (max-width:420px){ .naglowek-panelu .container-x{ gap:10px; } #pasek-wyloguj{ padding-left:12px!important; padding-right:12px!important; gap:.45rem; } }
@media (max-width:420px){ .plik,.plik-krotki{ gap:10px; padding-right:10px; } .plik .ikona{ width:36px; height:36px; } .akcja{ font-size:13.5px; } }