*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:#ff0000;
  --red-dark:#cc0000;
  --green:#32CD32;
  --green-dark:#28a828;
  --bg:#000;
  --bg2:#0a0a0a;
  --bg3:#111;
  --bg4:#0d0d0d;
  --border:#333;
  --border2:#222;
  --text:#fff;
  --text-muted:#aaa;
  --text-dim:#555;
  --input-bg:#111;
}

body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
}

/* ── CARD ── */
.login-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  width:100%;
  max-width:440px;
  overflow:hidden;
}

/* ── LOGO AREA ── */
.login-brand{
  background:var(--bg);
  border-bottom:1px solid var(--border2);
  padding:24px 32px 16px;
  text-align:center;
}
.login-brand-name{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.login-brand-name span{color:var(--red)}
.login-brand-sub{
  font-size:.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:4px;
}

/* ── INNER BODY ── */
.login-body{padding:28px 36px 32px}

/* ── VIEWS ── */
.view{display:none}
.view.active{display:block}

/* ── TITLES ── */
.view-title{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:4px}
.view-sub{font-size:.8rem;color:var(--text-dim);margin-bottom:22px;line-height:1.5}

/* ── FORM ELEMENTS ── */
.form-group{margin-bottom:16px}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-label{
  display:block;font-size:.78rem;color:var(--text-muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;
}
.form-input{
  width:100%;background:var(--input-bg);border:1px solid #444;
  color:var(--text);padding:12px 14px;border-radius:4px;
  font-family:inherit;font-size:.9rem;transition:border-color .15s;
}
.form-input:focus{outline:none;border-color:#666}
.form-input.error{border-color:var(--red)}

/* Password show/hide */
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:44px}
.pw-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  font-size:1rem;padding:4px;line-height:1;transition:color .15s;
}
.pw-toggle:hover{color:var(--text-muted)}

/* Strength bar */
.pw-strength{margin-top:6px;display:none}
.pw-strength.show{display:block}
.pw-strength-bar{height:3px;border-radius:2px;background:var(--border2);overflow:hidden;margin-bottom:4px}
.pw-strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s;width:0%}
.pw-strength-label{font-size:.72rem;color:var(--text-dim)}

/* Errors */
.field-error{font-size:.72rem;color:var(--red);margin-top:4px;display:none}
.field-error.show{display:block}

/* ── BUTTONS ── */
.btn{
  width:100%;padding:13px;border:none;border-radius:4px;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;transition:all .15s;display:flex;align-items:center;
  justify-content:center;gap:8px;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--red-dark)}
.btn-success{background:var(--green);color:#000}
.btn-success:hover:not(:disabled){background:var(--green-dark)}
.btn-apply{
  width:100%;padding:13px;border:1px solid var(--green);border-radius:4px;
  cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--green);text-decoration:none;margin-top:12px;
}
.btn-apply:hover{background:var(--green);color:#000}

/* ── SPINNER ── */
.spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;
}
.btn-success .spinner,.btn-apply .spinner{border-color:rgba(0,0,0,.2);border-top-color:#000}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── ALERTS ── */
.alert{
  border-radius:4px;padding:12px 14px;font-size:.83rem;
  line-height:1.5;margin-bottom:18px;display:none;
}
.alert.show{display:block}
.alert-error{background:#1a0000;border:1px solid #440000;color:var(--red)}
.alert-success{background:#052e16;border:1px solid #14532d;color:#4ade80}
.alert-warn{background:#1c1107;border:1px solid #78350f;color:#f59e0b}
.alert strong{display:block;margin-bottom:2px;font-size:.85rem}

/* ── LINKS ── */
.view-links{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:center}
.text-link{
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  font-family:inherit;font-size:.8rem;text-decoration:underline;
  text-underline-offset:3px;transition:color .15s;padding:0;
}
.text-link:hover{color:var(--red)}
.text-link-green{color:var(--green)}
.hidden{display:none}

/* ── PASSWORD RULES ── */
.pw-rules{
  background:var(--bg4);border:1px solid var(--border2);border-radius:4px;
  padding:12px 14px;margin-bottom:16px;font-size:.78rem;
  color:var(--text-dim);list-style:none;
}
.pw-rules li{padding:2px 0;display:flex;align-items:center;gap:8px}
.pw-rules li::before{content:'○';color:var(--text-dim);font-size:.7rem;flex-shrink:0}
.pw-rules li.pass::before{content:'●';color:var(--green)}
.pw-rules li.pass{color:var(--text-muted)}

/* ── APPLY BOX (server tab) ── */
.apply-box{
  background:var(--bg4);border:1px solid var(--border2);border-radius:4px;
  padding:16px;margin-top:20px;text-align:center;
}
.apply-box-label{font-size:.75rem;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.apply-box-sub{font-size:.78rem;color:var(--text-dim);margin-bottom:12px;line-height:1.5}

/* ── TEMP BADGE ── */
.temp-badge{
  display:inline-block;background:#1c1107;border:1px solid #78350f;
  color:#f59e0b;border-radius:12px;font-size:.7rem;font-weight:600;
  padding:2px 10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}

/* ── FOOTER ── */
.login-footer{
  border-top:1px solid var(--border2);padding:14px 36px;
  text-align:center;font-size:.72rem;color:var(--text-dim);
}
.login-footer a{color:var(--text-dim);text-decoration:none}
.login-footer a:hover{color:var(--red)}