/* === TEMA & GAYA === */
:root {
  --bg: #0f172a; --bg2: #111827; --card: #0b1220ee;
  --text: #e5e7eb; --muted: #94a3b8; --brand: #22c55e;
  --brand-600: #16a34a; --ring: #34d39955; --error: #ef4444;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f1f5f9; --bg2: #e2e8f0; --card: #ffffffcc;
    --text: #0f172a; --muted: #475569; --brand: #16a34a;
    --brand-600: #15803d; --ring: #22c55e44;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: radial-gradient(1000px 600px at 10% 10%, #1e293b, transparent),
              radial-gradient(800px 500px at 90% 20%, #0ea5e9, transparent),
              linear-gradient(160deg, var(--bg2), var(--bg));
  display:grid; place-items:center; padding:24px;
}

.wrap { width:100%; max-width:420px; display:grid; gap:16px; animation:fadeIn 600ms ease both; }
header { text-align:center; }
.title { font-size:clamp(24px,4vw,36px); font-weight:800; margin:0 0 4px; text-shadow:0 1px 0 #0005; }
.subtitle { margin:0; color:var(--muted); font-size:14px; }

.card {
  background:var(--card);
  backdrop-filter:blur(8px);
  border:1px solid #ffffff18;
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px #0006, inset 0 1px 0 #fff1;
}

form { display:grid; gap:14px; }
label { font-size:13px; color:var(--muted); }
.field { position:relative; display:grid; gap:6px; }

input[type="text"], input[type="password"] {
  width:100%; padding:12px 40px 12px 12px;
  border-radius:12px; border:1px solid #ffffff22;
  background:#0b1220; color:var(--text);
  outline:none; transition:box-shadow .2s,border-color .2s,background .2s;
}

@media (prefers-color-scheme: light) { 
  input[type="text"], input[type="password"] { background:#fff; } 
}

input:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }

.toggle-eye {
  position:absolute; right:10px; top:34px; width:24px; height:24px;
  border-radius:6px; display:grid; place-items:center; cursor:pointer;
}

.btn {
  height:44px; border:0; border-radius:12px; font-weight:700;
  background:linear-gradient(180deg, var(--brand), var(--brand-600));
  color:white; cursor:pointer;
  box-shadow:0 8px 20px #16a34a44;
  transition:transform .06s ease;
}

.btn:active { transform:translateY(1px); }

.footer { text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }
.hint { font-size:12px; color:var(--muted); }

@keyframes fadeIn { from {opacity:0;translate:0 6px;} to {opacity:1;translate:0 0;} }