/* =======================
   Auth – Base (spójne ze stroną główną)
======================= */
:root{
  --bg:#0b0f14;
  --surface:#0e141e;
  --surface-2:#121b27;
  --text:#e6eef5;
  --muted:#a6b6c8;
  --border:rgba(255,255,255,.12);
  --accent:#d0b37f;               /* złoty – CTA jak na home */
  --accent-2:#c19a53;
  --radius:16px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body.auth{
  margin:0;
  background:var(--bg);
  color:var(--text);
  display:grid;
  place-items:center;
  padding:24px;
  font:15px/1.6 system-ui, Segoe UI, Roboto, sans-serif;
}

a{color:#dce7f3; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:4px}

/* opcjonalna czcionka jak logo (jeśli wrzucisz pliki do /assets/fonts/) */
@font-face{
  font-family:'Lineage2';
  src:url('/assets/fonts/lineage2.woff2') format('woff2'),
      url('/assets/fonts/lineage2.woff') format('woff');
  font-display:swap;
}
.font-logo{
  font-family:'Lineage2', system-ui, Segoe UI, Roboto, sans-serif;
  font-weight:800;
  letter-spacing:.5px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =======================
   Card (glass, bez obrysu, delikatny blur)
======================= */
.card{
  width:min(520px, 92%);
  position:relative;
  border:none;                         /* brak obrysu */
  border-radius:var(--radius);
  padding:28px;
  background:rgba(17,26,37,.72);       /* półprzezroczyste tło karty */
  backdrop-filter:saturate(120%) blur(10px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* miękkie „zlanie się” krawędzi karty z tłem */
.card::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:radial-gradient(120% 120% at 50% 110%,
              rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
  mix-blend-mode:soft-light;
}

h1{margin:6px 0 6px; font-size:1.6rem}
.sub{margin:0 0 16px; color:var(--muted)}

/* =======================
   Form fields
======================= */
.field{display:block; margin:12px 0}
.field > span{display:block; margin:0 0 6px; color:var(--muted); font-size:.95rem}

.input{
  display:flex; align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0c1420;                 /* spójne z topbar/search */
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input:hover{cursor:text; background:#0d1624}
.input:focus-within{
  border-color:rgba(255,255,255,.22);  /* neutralnie, bez niebieskiego */
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.input input{
  all:unset;
  padding:12px 14px;
  width:100%;
  color:var(--text);
}
.input input::placeholder{color:rgba(230,237,243,.55)}

.remember{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 14px; color:var(--muted); font-size:.95rem;
  cursor:pointer;
}
.remember input{width:16px; height:16px}

/* komunikaty (np. błędy/ok) – opcjonalnie */
.notice{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(239,92,92,.12);
  border:1px solid rgba(239,92,92,.35);
}
.notice.ok{
  background:rgba(57,217,138,.12);
  border-color:rgba(57,217,138,.35);
}

/* =======================
   Buttons (jak na stronie głównej)
======================= */
/* baza */
.btn{
  width:100%;                          /* domyślnie pełna szerokość w auth */
  position:relative;
  display:inline-block;
  padding:14px 16px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text);
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.35);
  transition:filter .15s, transform .02s, box-shadow .2s ease;
  overflow:hidden;                      /* dla „shine” */
  cursor:pointer;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn:active{transform:translateY(1px)}

/* „shine sweep” */
.btn::before{
  content:"";
  position:absolute; inset:-1px;
  background:linear-gradient(120deg,
              transparent 0 35%,
              rgba(255,255,255,.20) 48%,
              transparent 60% 100%);
  transform:translateX(-130%);
  transition:transform .6s ease;
  pointer-events:none;
}
.btn:hover::before{transform:translateX(130%)}

/* wariant złoty – primary CTA */
.btn.solid{
  border:none;
  color:#1b1206;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:
    0 12px 28px rgba(208,179,127,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.solid:hover{
  box-shadow:
    0 0 0 2px rgba(241,210,143,.25),
    0 16px 38px rgba(208,179,127,.36),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* wariant niebieski – jak „Download” na home */
.btn.glow{
  border:none;
  color:#0b0f14;
  background:linear-gradient(180deg,#7fb4ff,#2f6bff);
  box-shadow:0 10px 28px rgba(63,131,248,.28);
}
.btn.glow:hover{
  box-shadow:
    0 0 14px 4px rgba(90,150,255,.45),
    0 16px 36px rgba(63,131,248,.36);
}

/* opcjonalny wariant obrysowy */
.btn.outline{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}

/* układ dwóch akcji obok siebie */
.actions{display:flex; gap:12px; flex-wrap:wrap}
.actions .btn{width:auto; min-width:160px}

/* =======================
   Responsywność
======================= */
@media (max-width:480px){
  .card{padding:22px}
  h1{font-size:1.4rem}
}

/* preferencje ograniczania animacji */
@media (prefers-reduced-motion:reduce){
  .btn, .btn::before { transition:none !important; }
}