:root{
  --border:rgba(160,183,255,.12);
  --text:#e6edf8;
  --text-soft:#b6c1d8;
  --text-muted:#8390a8;
  --heading:#ffffff;
  --accent:#3b82f6;
  --accent-hover:#2563eb;
  --shadow:0 8px 24px rgba(0,0,0,.32);
  --panel-w:500px;
  --panel-h:520px;
}

body{min-height:100vh}

.page{position:relative;z-index:1;padding:88px 0 40px;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 64px)}
.auth-layout{
  display:flex;
  justify-content:center;
  width:100%;
}
.login-panel{
  position:relative;
  width:var(--panel-w);
  flex:0 0 var(--panel-w);
  max-width:var(--panel-w);
  height:auto;
  min-height:var(--panel-h);
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0e1626;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.panel-top{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin-bottom:20px}
.brand-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#1a2336;
  border:1px solid var(--border);
  color:var(--heading);
}
.brand-mark svg{width:24px;height:24px}
.panel-top span{
  display:block;
  margin-bottom:4px;
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:500;
}
.panel-top h2{font-size:1.35rem;font-weight:600;line-height:1.2;color:var(--heading);letter-spacing:-.01em}

.form-body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.error{
  flex:0 0 auto;
  width:100%;
  margin-bottom:16px;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid rgba(239,68,68,.3);
  background:rgba(239,68,68,.08);
  color:#fca5a5;
  font-size:.85rem;
  line-height:1.45;
  max-height:88px;
  overflow-y:auto;
}

.form-grid{flex:0 0 auto;display:grid;gap:16px}
.form-group label{
  display:block;
  margin-bottom:8px;
  color:var(--text-soft);
  font-size:.85rem;
  font-weight:500;
}
.form-group input{
  width:100%;
  min-height:44px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0a1120;
  color:var(--heading);
  font-size:.92rem;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-group input::placeholder{color:#5a6477}
.form-group input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.code-input{
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:1.25rem;
  letter-spacing:.4em;
  font-weight:600;
}
.submit-btn{
  width:100%;
  min-height:44px;
  margin-top:8px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}
.submit-btn:hover{background:var(--accent-hover)}

.panel-links{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:.85rem;
}
.text-link{color:var(--text-soft);font-weight:500}
.text-link:hover{color:var(--heading)}
.footer-text{flex:0 0 auto;margin-top:12px;color:var(--text-muted);font-size:.75rem;text-align:center}

@media(max-width:768px){
  .container,.header{padding-left:16px;padding-right:16px}
  .header .container{height:auto;padding-top:14px;padding-bottom:14px;align-items:flex-start;gap:12px}
  .nav{gap:14px}
  .page{padding-top:124px;padding-bottom:32px;min-height:auto}
  .login-panel{min-height:auto;padding:32px 28px}
  .form-body{justify-content:flex-start}
  .panel-top h2{font-size:1.28rem}
  .form-group input,.submit-btn{font-size:.9rem}
}

@media(max-width:540px){
  .container,.header{padding-left:12px;padding-right:12px}
  .page{padding-top:146px;padding-bottom:28px}
  .header .btn{width:100%}
  .panel-top{gap:12px;margin-bottom:18px}
  .brand-mark{width:40px;height:40px}
  .brand-mark svg{width:22px;height:22px}
  .panel-top span{font-size:.74rem}
  .panel-top h2{font-size:1.14rem}
  .login-panel{padding:22px 16px;border-radius:10px}
  .form-grid{gap:14px}
  .form-group label{font-size:.82rem}
  .form-group input,.submit-btn{min-height:42px;padding-left:12px;padding-right:12px;font-size:.88rem}
  .code-input{font-size:1rem;letter-spacing:.24em}
  .panel-links{gap:14px;margin-top:18px;padding-top:16px;font-size:.82rem}
  .footer-text{font-size:.72rem}
}

@media(max-width:500px){
  .login-panel{width:100%;flex:1 1 auto;max-width:100%;min-height:auto}
}