:root{
  --bg:#0e1518; --panel:#152020; --panel-2:#1a2827;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --txt:#e8edec; --muted:#7f918d; --go:#23d18b; --warn:#ffc24b;
  --font-d:"Chakra Petch",system-ui,sans-serif;
  --font-n:"JetBrains Mono",ui-monospace,monospace;
  --font-b:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 80% at 50% -10%, #16302c 0%, transparent 55%), var(--bg);
  color:var(--txt); font-family:var(--font-b);
  display:flex; align-items:center; justify-content:center;
  padding:24px; -webkit-font-smoothing:antialiased;
}
.box{
  width:100%; max-width:380px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:16px;
  padding:30px 26px 24px; position:relative; overflow:hidden;
}
.box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--go)}
.brand{font-family:var(--font-d);font-weight:700;letter-spacing:.26em;font-size:14px;text-transform:uppercase}
.witaj{color:var(--muted);font-size:14px;line-height:1.5;margin:12px 0 22px}
.witaj b{color:var(--txt)}
.form{display:flex;flex-direction:column;gap:16px}
.pole{display:flex;flex-direction:column;gap:7px}
.pole span{font-family:var(--font-n);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pole span i{text-transform:none;letter-spacing:0;font-style:normal;color:var(--muted);opacity:.7}
.pole input{
  background:#0f1a19;border:1px solid var(--line-2);border-radius:10px;
  color:var(--txt);font-size:16px;padding:13px 14px;font-family:var(--font-b);
}
.pole input:focus{outline:2px solid var(--go);outline-offset:1px;border-color:transparent}
.blad{color:#0e1518;background:var(--warn);border-radius:8px;padding:9px 12px;font-size:13.5px;font-weight:600}
button{
  font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:.06em;
  background:var(--go);color:#06231a;border:none;border-radius:10px;padding:14px;cursor:pointer;margin-top:4px;
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
.stopka{margin-top:18px;text-align:center;font-family:var(--font-n);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}