.login-title {  /*@login-title*/
  color: var(--ink-strong); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.1rem; margin: 0;
}


.btn-back-sq {  /*@login-actions*/
  height: 32px; box-sizing: border-box;
}


.btn-back-sq {
  flex: 0 0 auto; width: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border-light); color: var(--text-strong); border: none; border-radius:var(--radius-md);
  cursor: pointer; text-decoration: none; transition: background var(--t-base), color var(--t-base);
}
.btn-back-sq:hover, .btn-back-sq:active { background: #c08820; color: var(--text-inverse); }
.btn-setup-code {
  box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--border-light); color: var(--text-strong); border: none; border-radius:var(--radius-md);
  font-size: var(--fs-base); cursor: pointer; text-decoration: none; transition: background var(--t-base), color var(--t-base);
}
.btn-setup-code:hover, .btn-setup-code:active { background: #c08820; color: var(--text-inverse); }







.lgn-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; font-family:var(--font-ui);
  background:radial-gradient(ellipse 75% 68% at 50% 50%, rgba(124,58,237,0.48), transparent 72%), #0b0b0d; }
.lgn-card { display:flex; width:min(800px, 100%); background:var(--card-bg); border-radius:20px;
  box-shadow:0 24px 120px rgba(124,58,237,0.62), 0 0 230px rgba(99,102,241,0.45); overflow:hidden; }
.lgn-panel { position:relative; width:44%; flex-shrink:0; overflow:hidden; display:flex;
  flex-direction:column; justify-content:space-between; padding:30px; min-height:468px; background:#161418; }
.lgn-wm { position:relative; z-index: var(--z-decor); font-family:var(--font-content); font-weight:700;
  font-size:1.75rem; color:var(--text-inverse); line-height:1; }
.lgn-tagline { position:relative; z-index: var(--z-decor); color:rgba(255,255,255,0.85); font-size: var(--fs-sm);
  line-height:1.5; font-weight:500; }
.lgn-step-cue { position:relative; z-index: var(--z-decor); display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,0.7); font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
.lgn-step-cue b { color:var(--text-inverse); }
.lgn-glow { position:absolute; border-radius:50%; filter:blur(34px); pointer-events:none; }
.lgn-drop { position:absolute; border-radius:0 50% 50% 50%; pointer-events:none; }

.lgn-form { flex:1; min-width:0; padding:34px 38px; display:flex; flex-direction:column; justify-content:center; }
.lgn-step { display:none; flex-direction:column; }
.lgn-step.is-active { display:flex; animation:lgn-in .25s ease; }
@keyframes lgn-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.lgn-h { margin:0 0 4px; font-size:var(--fs-title); font-weight:700; color:var(--ink); }
.lgn-step[data-step="roles"] .lgn-h { font-family:var(--font-content); font-weight:700; font-size:1.55rem; letter-spacing:0.01em; }
.lgn-step[data-step="signin"] .lgn-h { margin-bottom:0; }
.lgn-flash-slot { min-height:4rem; margin-top:0.8rem; }
.lgn-flash-slot .lgn-msg { margin-bottom:13px; }
.lgn-sub { color:var(--text-muted); font-size: var(--fs-sm); line-height:1.45; margin:0 0 18px; }

.lgn-rolebtn { display:flex; align-items:center; gap:12px; width:100%; height:50px; border:1.5px solid var(--soft-border); /*@lgn-rolebtn-is-a-button-kept-grey*/
  border-radius:11px; background:var(--card-bg); padding:0 16px; font-size:var(--fs-base); font-weight:600; color:var(--ink);
  cursor:pointer; margin-bottom:11px; font-family:inherit; transition:border-color var(--t-fast), background var(--t-fast); }
.lgn-rolebtn:hover { border-color:var(--sidebar-bg); background:#faf9f6; }
.lgn-rolebtn:hover .arr { color:var(--ink); }
.lgn-rolebtn .dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.lgn-rolebtn .arr { margin-left:auto; color:var(--text-faint); }

.lgn-badge { align-self:flex-start; font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; padding:0.16rem 0.5rem; border-radius:var(--radius-chip); margin-bottom:9px; }
.lgn-badge--student { background:#dbe4ff; color:#1e3a8a; }
.lgn-badge--teacher { background:var(--badge-role-teacher-bg); color:var(--badge-role-teacher-ink); } /*@lgn-badge-role-tokens*/
.lgn-badge--parent  { background:var(--badge-role-parent-bg); color:var(--badge-role-parent-ink); }

.lgn-field { position:relative; margin-bottom:13px; }
.lgn-field > svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  color:var(--text-faint); pointer-events:none; }
.lgn-field input { width:100%; height:44px; border:1.5px solid var(--input-border); border-radius:var(--radius-cell);
  padding:0 13px 0 38px; font-size:var(--fs-md); font-family:inherit; background:var(--card-bg); color:var(--ink); }
.lgn-field input::placeholder { color:var(--text-faint); }
.lgn-field input:focus { outline:none; border-color:#384CC0; box-shadow:0 0 0 3px rgba(56,76,192,0.15); }

.lgn-remember { display:flex; align-items:center; gap:8px; font-size: var(--fs-sm); color:var(--text-secondary); margin:1px 0 15px; cursor:pointer; user-select:none; }
.lgn-remember input { width:16px; height:16px; accent-color:#384CC0; cursor:pointer; margin:0; }

.lgn-submit { width:100%; height:46px; background:#384CC0; color:var(--text-inverse); border:none; border-radius:var(--radius-pill);
  font-size:var(--fs-md); font-weight:700; font-family:inherit; cursor:pointer; transition:background .13s; }
.lgn-submit:hover { background:#2f3fa8; }

.lgn-links { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:15px; }
.lgn-link { background:none; border:none; color:#384CC0; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  font-family:inherit; text-decoration:none; padding:0; }
.lgn-link:hover { text-decoration:underline; }
.lgn-link.muted { color:var(--text-faint); }

.lgn-reqs { display:flex; flex-wrap:wrap; gap:14px; margin:1px 0 13px; font-size:var(--fs-2xs); }
.lgn-req { display:flex; align-items:center; gap:5px; color:var(--text-faint); transition:color var(--t-base); }
.lgn-req.ok { color:var(--success); }
.lgn-req svg { width:13px; height:13px; }

.lgn-msg { display:flex; align-items:flex-start; gap:0.5rem; padding:0.55rem 0.7rem; border:1px solid transparent;
  border-radius:var(--radius-box); font-size:var(--fs-xs); line-height:1.4; margin-bottom:13px; text-align:left; }
.lgn-msg-error { background:var(--danger-bg-soft); border-color:var(--danger-border-soft); color:var(--danger-strong); }
.lgn-msg-success { background:var(--success-bg-soft); border-color:var(--success-border); color:var(--success-deep); }
.lgn-maint { background:#fffbeb; border:1px solid #fcd34d; border-radius:var(--radius-box);
  padding:0.7rem 0.85rem; margin-bottom:16px; text-align:left; }
.lgn-maint-tag { display:inline-block; font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--warning-ink); background:#fde68a; border-radius:var(--radius-chip);
  padding:0.1rem 0.45rem; margin-bottom:0.45rem; }
.lgn-maint p { margin:0; color:#78350f; font-size: var(--fs-sm); line-height:1.45; }
.lgn-maint-sub { margin-top:0.3rem !important; color:#a16207 !important; font-size: var(--fs-xs) !important; }

@media (max-width:640px) {
  .lgn-card { flex-direction:column; }
  .lgn-panel { width:100%; min-height:96px; flex-direction:row; align-items:center; gap:12px; padding:16px 20px; }
  .lgn-tagline, .lgn-step-cue { display:none; }
}