/* ============================================================
   Motyw „Certificate" (portal): paleta i tło certyfikatu wypłaty zamiast
   fioletu marki, w jasnym i ciemnym motywie. Tylko wygląd.
   Ładowany jako OSTATNI arkusz: ta sama specyficzność + później = wygrywa,
   więc site.css / portal.css zostają bajt w bajt. Zdjęcie motywu = usunięcie linku.
   Blok „wygenerowany" to te same selektory co w źródłach, z fioletem
   przemapowanym na błękit certyfikatu (generator: scripts/theme_cert/gen_theme_cert.py).
   ============================================================ */

/* ---------- wygenerowany: fiolet -> błękit certyfikatu ---------- */
/* z portal.css: 17 reguł */
:root{--acc:#1b6ef3;--acc2:#1b4bd8;--acc-bg:#eaf4ff;--acc-line:#d3e6ff;--grad:linear-gradient(135deg,#1b6ef3,#1b4bd8);--purple:#1b4bd8;--purple-bg:#e8f6ff;--purple-line:#d6ecfb;--shadow-lg:0 24px 60px -24px rgba(27,110,243,.16),0 2px 6px rgba(15,23,42,.05)}
::selection{background:rgba(43,139,255,.18)}
.brand-pill{box-shadow:0 8px 18px -8px rgba(43,139,255,.5)}
.btn-p{box-shadow:0 8px 18px -8px rgba(43,139,255,.5)}
.inp:focus{box-shadow:0 0 0 3px rgba(43,139,255,.12)}
.tel-cc:focus-visible{box-shadow:0 0 0 3px rgba(43,139,255,.12)}
.gradient-banner{background:linear-gradient(100deg,#1440b8 0%,#1b4bd8 35%,#67d2ff 100%);box-shadow:0 14px 34px -14px rgba(27,75,216,.5)}
.gb-btn{color:#1b4bd8}
.acct-list::before{background:linear-gradient(90deg,#2563eb,#1b6ef3,#67d2ff)}
.auth-brand{background:radial-gradient(70% 60% at 20% 0%,rgba(43,139,255,.12),transparent 65%),
  radial-gradient(50% 50% at 90% 100%,rgba(103,210,255,.1),transparent 70%),var(--panel)}
.auth-tabs::before{box-shadow:0 4px 14px -6px rgba(43,139,255,.55)}
.chal-list::before{background:linear-gradient(90deg,#2563eb,#1b6ef3,#67d2ff)}
.reveal-card{box-shadow:0 18px 44px -18px rgba(43,139,255,.55)}
.celebrate-ic{box-shadow:0 22px 50px -16px rgba(43,139,255,.7)}
.ptr-spin{border-top-color:var(--acc,#1b6ef3)}
html[data-theme=dark]{--acc:#67d2ff;--acc2:#8fdcff;--acc-bg:rgba(43,139,255,.16);--acc-line:rgba(103,210,255,.38);--purple:#8fdcff;--purple-bg:rgba(27,75,216,.16);--purple-line:rgba(143,220,255,.35)}
html[data-theme=dark] ::selection{background:rgba(103,210,255,.35)}
/* z portal-glass.css: 8 reguł */
:root{--lg-drop:0 1px 2px rgba(15,23,42,.04),0 16px 36px -20px rgba(27,110,243,.24);--lg-light:radial-gradient(60vw 60vw at 4% -12%,rgba(43,139,255,.16),transparent 62%),
    radial-gradient(52vw 52vw at 104% 24%,rgba(27,75,216,.13),transparent 60%),
    radial-gradient(44vw 44vw at 68% 112%,rgba(242,134,15,.08),transparent 62%)}
html[data-theme=dark]{--lg-light:radial-gradient(60vw 60vw at 4% -12%,rgba(43,139,255,.36),transparent 62%),
    radial-gradient(52vw 52vw at 104% 24%,rgba(27,75,216,.28),transparent 60%),
    radial-gradient(44vw 44vw at 68% 112%,rgba(242,134,15,.13),transparent 62%)}
html[data-theme=dark] body .gradient-banner{background:linear-gradient(100deg,rgba(20,64,184,.7) 0%,rgba(27,75,216,.62) 35%,rgba(103,210,255,.56) 100%)}
:root{--pb-nav-on:linear-gradient(90deg,rgba(43,139,255,.16),rgba(43,139,255,0) 88%);--pb-neon-glow:rgba(27,75,216,.45)}
html[data-theme=dark]{--pb-nav-on:linear-gradient(90deg,rgba(27,75,216,.34),rgba(27,75,216,0) 88%);--pb-neon-glow:rgba(143,220,255,.8)}
:root:root body .ui-glider::before,
:root:root body .side-nav:not(.has-glider)>.sb-link.on::before{background:linear-gradient(180deg,#1b6ef3,#67d2ff)}
:root:root body .prog-bar>i{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
  0 0 14px -2px color-mix(in srgb,var(--pb-c,#1b4bd8) calc(var(--pb-glow)*100%),transparent)}
:root:root body .prog-bar .mid{--pb-c:#1b4bd8}
/* z notifications.css: 2 reguł */
.np .np-btn-p{box-shadow:0 12px 26px -14px rgba(43,139,255,.8)}
.np-undo button{color:#a9e4ff}
/* z apple.css: 1 reguł */
.btn-p{box-shadow:0 8px 18px -10px rgba(43,139,255,.65)}

/* ---------- ręczna część: tokeny, tło i DNA certyfikatu ----------
   Paleta wzięta 1:1 z cert.css (certyfikat wypłaty): granat #050914→#0b142c,
   błękit #2b8bff, jasny #67d2ff, głęboki #1b4bd8, mięta #57e6b6, złoto #e8c47c.
   Idzie PO bloku wygenerowanym, więc tu ustawione tokeny mają ostatnie słowo. */
:root{
  --ct-frame:linear-gradient(150deg,#67d2ff 0%,#2b8bff 38%,#1b4bd8 68%,#67d2ff 100%);
  --ct-plate:linear-gradient(168deg,#ffffff 0%,#f7faff 60%,#f1f6ff 100%);
  --ct-plate-glow:radial-gradient(62% 44% at 50% 0%,rgba(43,139,255,.10),rgba(43,139,255,0) 64%);
  --ct-frame-glow:0 0 32px rgba(43,139,255,.16);
  --ct-veil:linear-gradient(transparent,transparent);
  --ct-eyebrow:#1b4bd8;
  --ct-dot:rgba(27,75,216,.10);
  --ct-plate-motif:linear-gradient(transparent,transparent);
  --bg:#f5f8fd;
  --acc:#1b6ef3; --acc2:#1b4bd8;
  /* przyciski od #1b6ef3, nie od #2b8bff: biały tekst 4,6:1 zamiast 3,4:1;
     jaskrawy #2b8bff zostaje na poświaty i ramki */
  --grad:linear-gradient(135deg,#1b6ef3,#1b4bd8);
  --lg-light:
    radial-gradient(70% 50% at 50% -6%,rgba(43,139,255,.16),transparent 70%),
    radial-gradient(40vw 40vw at 100% 100%,rgba(103,210,255,.12),transparent 65%),
    radial-gradient(36vw 36vw at 0% 72%,rgba(87,230,182,.07),transparent 65%);
  --lg-drop:0 1px 2px rgba(15,23,42,.04),0 16px 36px -20px rgba(27,110,243,.24);
  --pb-nav-on:linear-gradient(90deg,rgba(43,139,255,.14),rgba(43,139,255,0) 88%);
  --pb-neon-glow:rgba(43,139,255,.5);
}
html[data-theme=dark]{
  --ct-plate:linear-gradient(168deg,#0b142c 0%,#070d1e 52%,#050914 100%);
  --ct-plate-glow:radial-gradient(62% 44% at 50% 0%,rgba(43,139,255,.24),rgba(43,139,255,0) 64%);
  --ct-frame-glow:0 0 36px rgba(43,139,255,.2);
  /* zasłona w kolorze płyty nad rombami: zostaje ok. 1/5 ich widoczności */
  --ct-veil:linear-gradient(rgba(8,14,32,.8),rgba(8,14,32,.8));
  --ct-eyebrow:#67d2ff;
  --ct-dot:rgba(140,180,255,.10);
  /* romby certyfikatu tylko na płycie i tylko w ciemnym (rysowane pod granat) */
  --ct-plate-motif:url('/static/img/cert-motif.svg') center bottom/102% auto no-repeat;
  --bg:#050914; --bg2:#070d1e; --bg3:#101b38;
  --panel:#0b142c; --panel2:#0e1934;
  --line:rgba(120,170,255,.13); --line2:rgba(120,170,255,.22);
  --txt:#f2f6ff; --muted:#93a3c9; --dim:#7787ad;
  --acc:#67d2ff; --acc2:#2b8bff;
  --grad:linear-gradient(135deg,#1b6ef3,#1b4bd8);
  --green:#57e6b6; --green2:#57e6b6;
  --hover:rgba(120,170,255,.05);
  --lg-fill:rgba(120,170,255,.05);
  --lg-fill-in:rgba(120,170,255,.035);
  --lg-rim:rgba(120,170,255,.2);
  --lg-spec:inset 0 1px 0 rgba(180,215,255,.16),inset 1px 0 0 rgba(180,215,255,.05),inset 0 -1px 0 rgba(180,215,255,.03);
  --lg-sheen:linear-gradient(150deg,rgba(150,200,255,.08) 0%,rgba(150,200,255,0) 40%);
  --lg-bar:rgba(5,9,20,.55);
  --lg-bar-solid:rgba(5,9,20,.96);
  /* stonowane: poświata u góry i w rogu ok. 20% słabsza niż na certyfikacie */
  --lg-light:
    radial-gradient(62% 44% at 50% 0%,rgba(43,139,255,.19),transparent 64%),
    radial-gradient(70% 55% at 50% 0%,#0c1834 0%,transparent 72%),
    radial-gradient(40vw 40vw at 100% 100%,rgba(43,139,255,.08),transparent 65%),
    linear-gradient(168deg,#0b142c 0%,#070d1e 52%,#050914 100%);
  --pb-nav-on:linear-gradient(90deg,rgba(43,139,255,.3),rgba(43,139,255,0) 88%);
  --pb-neon-glow:rgba(103,210,255,.8);
}

/* Tło aplikacji: spokojne. Granat certyfikatu + błękitna poświata u góry
   (::before) i drobna siatka punktów wygaszana maską od góry (::after).
   Romby i grawerunek certyfikatu NIE idą na całe tło — rozciągnięte na ekran
   i przycięte jego krawędzią wyglądały tanio; zostają na „płycie" (niżej).
   Obie warstwy nieruchome: rysują się raz, scroll ich nie przemalowuje. */
/* Romby certyfikatu jako ledwo widoczny wzorek w dwóch rogach ekranu — każdy
   w całości (nie przycięty krawędzią), krycie o połowę niższe niż na certyfikacie.
   Na jasnym tle te same pliki wychodzą jeszcze bladziej (ok. 3–6% krycia). */
html::before{background:
  url('/static/img/motif-tr.svg') right 2vw top 96px/min(26vw,300px) auto no-repeat,
  url('/static/img/motif-bl.svg') left 1.5vw bottom 3vh/min(20vw,230px) auto no-repeat,
  var(--lg-light)}
html::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,var(--ct-dot) 1px,transparent 1.5px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(85% 60% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 80%);
  mask-image:radial-gradient(85% 60% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 80%)}
/* „Ogranicz przezroczystość" niczego tu nie wyłącza — patrz portal-glass / site-glass. */

/* ---------- portal ---------- */
/* Logowanie = tablica certyfikatu: świecąca ramka gradientem i płyta z poświatą */
:root:root body .auth-card{
  border:1px solid transparent;
  background:var(--ct-plate-glow) padding-box,var(--ct-veil) padding-box,var(--ct-plate-motif) padding-box,
    var(--ct-plate) padding-box,var(--ct-frame) border-box;
  box-shadow:var(--lg-spec),var(--ct-frame-glow),var(--lg-drop);
}
/* Pasek nad listą kont: ramka certyfikatu zamiast fioletowej tęczy */
:root:root body .chal-list::before{background:var(--ct-frame)}