:root{
  --bg: #080808;
  --surface: #111111;
  --border: rgba(255,255,255,0.07);
  --muted: #444;
  --muted-dim: #333;
  --red: #e63946;
  --red-bg: rgba(230,57,70,0.08);
  --red-border: rgba(230,57,70,0.25);
  --radius: 4px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body{
  background: var(--bg);
  color:#fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wrap{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px;
  box-sizing: border-box;
}

.brand{ text-align:center; margin-bottom: 32px; }
.brand__logo{
  width:56px; height:56px; border-radius: var(--radius);
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.brand__name{ font-size:20px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.brand__sub{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-dim); margin-top:6px; }

.card{
  width:320px;
  max-width:100%;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:24px;
}

.field-label{
  font-size: 10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.err{
  background: var(--red-bg);
  border:1px solid var(--red-border);
  color: var(--red);
  padding:10px 12px;
  border-radius: var(--radius);
  margin:0 0 14px;
  font-size:13px;
}

.pw-wrap{ position:relative; margin-bottom:14px; }

input{
  width:100%;
  padding:12px 44px 12px 14px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:#0d0d0d;
  color:#fff;
  font-size:14px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}

input:focus{ border-color: rgba(255,255,255,0.2); }
input::placeholder{ color: var(--muted-dim); letter-spacing: .1em; }

.pw-toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted-dim); cursor:pointer; font-size:15px; padding:4px;
}
.pw-toggle:hover{ color:#888; }

.btn-submit{
  width:100%;
  padding:13px;
  border-radius: var(--radius);
  border:0;
  background:#fff;
  color:#000;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
}
.btn-submit:hover{ opacity:.9; }

.footer-note{ margin-top:28px; font-size:11px; letter-spacing:.1em; color: var(--muted-dim); }