:root{
  --bg: #050B14;
  --panel: #0D1B29;
  --panel-line: rgba(130,220,255,0.10);
  --ember: #3AD6FF;
  --ember-light: #8FEBFF;
  --ember-line: rgba(58,214,255,0.45);
  --text: #EAF6FF;
  --text-muted: #7FA3BE;
  --text-dim: #4A6C82;
  --danger: #ff6b57;
  --danger-bg: rgba(255,90,50,0.1);
  --danger-line: rgba(255,107,87,0.35);
}

*{ box-sizing: border-box; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 22% 46%, rgba(58,214,255,0.06), transparent 42%),
    radial-gradient(ellipse 70% 55% at 85% 28%, rgba(46,111,224,0.08), transparent 60%),
    linear-gradient(125deg, #04080F, #08121D 55%, #05090F);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}

.command{ padding: 24px; width: 100%; display:flex; justify-content:center; }

.card{
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

.card-header{ display:flex; align-items:flex-start; justify-content:space-between; }
.card-title{ font-family:'Oswald', sans-serif; font-size: 20px; letter-spacing: 0.02em; }
.card-sub{ font-family:'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 4px; }
.lock-badge{
  width: 34px; height: 34px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--ember-line); color: var(--ember-light);
}

.card-divider{ border: none; border-top: 1px solid var(--panel-line); margin: 18px 0; }

.form-error{
  display:flex; align-items:center; gap: 8px;
  background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px;
}

.field{
  display:flex; align-items:center; gap: 10px;
  border: 1px solid var(--panel-line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(255,255,255,0.02);
}
.field i{ color: var(--text-dim); }
.field input{
  border:none; outline:none; background:transparent; color: var(--text);
  font-family:'Inter', sans-serif; font-size: 14px; width:100%;
}
.field input::placeholder{ color: var(--text-dim); }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin: 4px 0 20px; }
.checkbox{ display:flex; align-items:center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.checkbox label{ cursor:pointer; }
.forgot{
  background:none; border:none; color: var(--ember-light); font-size: 13px; cursor:pointer; padding:0;
}

.btn-login{
  width:100%; padding: 13px; border-radius: 8px; border:none;
  background: linear-gradient(120deg, var(--ember), #2E6FE0);
  color: #04121C; font-weight: 600; letter-spacing: 0.04em; font-size: 14px;
  cursor:pointer;
}
.btn-login:disabled{ opacity: 0.6; cursor: default; }

.security-note{
  display:flex; align-items:center; gap: 8px; justify-content:center;
  margin-top: 18px; font-size: 12px; color: var(--text-dim);
}