/* giftcardy.shop — holograficzne karty kolekcjonerskie na głębokim fiolecie. Jeden, celowo ciemny motyw. */
:root{
  --bg:#09060F; --bg2:#0E0918; --surface:#151024; --surface2:#1D1631; --line:#2B2242;
  --ink:#F5F1FF; --muted:#A79EC2; --focus:#A9C2FF; --ok:#45E0A0; --bad:#FF6B81; --warn:#FFC85C;
  --holo:linear-gradient(100deg,#FF5FA2 0%,#FFC85C 20%,#7CFFCB 42%,#6FA8FF 64%,#C77DFF 84%,#FF5FA2 100%);
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--focus)}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.err{color:var(--bad);font-size:14px;margin:0}
.holo-text{background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoShift 6s linear infinite}
@keyframes holoShift{to{background-position:200% 0}}

header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(9,6,15,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo i{width:26px;height:18px;border-radius:4px;background:var(--holo);background-size:200% 100%;animation:holoShift 4s linear infinite;transform:rotate(-12deg);box-shadow:0 0 18px rgba(199,125,255,.45)}
.logo b{font-weight:700;color:var(--muted)}
.logo .mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 4px 14px rgba(199,125,255,.35))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:700;color:#140C22;background:var(--holo);background-size:200% 100%;text-decoration:none;transition:transform .15s,box-shadow .25s,background-position .6s}
.btn:hover{transform:translateY(-1px);background-position:100% 0;box-shadow:0 10px 34px rgba(199,125,255,.35)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--muted);box-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--surface2);border:1px solid var(--line);color:var(--ink);padding:11px 18px;border-radius:999px;font-weight:600;z-index:80;font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center}
.status{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--line)}
.status.nowe{color:var(--focus);border-color:var(--focus)}
.status.oplacone{color:var(--warn);border-color:var(--warn)}
.status.wyslane{color:var(--ok);border-color:var(--ok)}
.status.anulowane{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}