/* ===== Login Page Styles ===== */
.login-page{
  --login-brand-teal:#117e77; --login-brand-deep:#0b3b3a; --login-brand-gold:#e3b34b; --login-brand-orange:#d96a2b; --login-brand-cream:#f5e7c6;
  --login-bg: radial-gradient(900px 600px at -10% -10%, rgba(245,231,198,0.75) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 0%, rgba(17,126,119,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff, #f8fafc);
  --login-panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  --login-glass: rgba(255,255,255,0.65); --login-glass-strong: rgba(255,255,255,0.86);
  --login-text:#0f172a; --login-muted:#64748b; --login-accent:var(--login-brand-teal);
  --login-border:1px solid rgba(2,6,23,0.08); --login-shadow:0 10px 30px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6); --login-radius:18px;
  --login-ok:#16a34a; --login-danger:#ef4444;
  background-image:var(--login-bg) !important;
  min-height:100vh;
  color:var(--login-text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
}

html[data-theme="dark"] .login-page{ 
  --login-bg:radial-gradient(1200px 800px at 20% -10%, rgba(17,126,119,0.35) 0%, transparent 60%),radial-gradient(1000px 800px at 120% 10%, rgba(227,179,75,0.15) 0%, transparent 60%),linear-gradient(180deg, #0b1217, #0b1217); 
  --login-panel:linear-gradient(180deg, #18222b, #0f1720); 
  --login-glass:rgba(255,255,255,0.08); --login-glass-strong:rgba(255,255,255,0.14); 
  --login-text:#e5e7eb; --login-muted:#9ca3af; 
  --login-border:1px solid rgba(255,255,255,0.15); 
  --login-shadow:0 10px 30px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06); 
  background:#0b1217 !important; color:#e5e7eb !important;
}

.login-container{max-width:1200px;margin:0 auto;padding:24px;}

.login-breadcrumbs{margin:16px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.login-breadcrumbs a{color:var(--login-muted); text-decoration:none; padding:6px 10px; background:var(--login-glass); border:var(--login-border); border-radius:999px}
.login-breadcrumbs .login-current{color:var(--login-text); background:transparent; padding:0; box-shadow:none; border:none}

.login-grid{display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:16px}
@media (max-width: 980px){ .login-grid{grid-template-columns: 1fr;} }

.login-card{background:var(--login-glass);border:var(--login-border);border-radius:var(--login-radius);box-shadow:var(--login-shadow)}

.login-form{padding:14px}
.login-form h2{margin:0 0 8px 0; font-size:18px; color:var(--login-text)}
.login-row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.login-row-1{display:grid; grid-template-columns: 1fr; gap:10px}
@media (max-width:700px){ .login-row{grid-template-columns:1fr;} }

.login-field{display:grid; gap:6px}
.login-label{font-size:12px; color:var(--login-muted)}
.login-page input, .login-page select, .login-page textarea{padding:12px 14px; border-radius:12px; border:var(--login-border); background:var(--login-glass); color:var(--login-text); box-shadow:var(--login-shadow)}
.login-page input::placeholder,.login-page textarea::placeholder{color:#94a3b8}
html[data-theme="dark"] .login-page input::placeholder,
html[data-theme="dark"] .login-page textarea::placeholder{color:#6b7280}
.login-hint{font-size:12px; color:var(--login-muted)}
.login-error{font-size:12px; color:var(--login-danger);}
.login-success{font-size:12px; color:var(--login-ok);}

.login-page .login-hidden{display:none !important}
.login-page [hidden]{display:none !important}
.login-page button{color:var(--login-text); font:inherit}
.login-page .login-primary{border-radius:14px;border:var(--login-border);background:linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95));padding:14px 18px;font-weight:800;cursor:pointer;color:#fff !important}
.login-page .login-secondary{border-radius:14px;border:var(--login-border);background:var(--login-glass);padding:12px 16px;cursor:pointer;color:var(--login-text)}
.login-page .login-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.login-page .login-icon-btn{position:absolute; right:6px; top:6px; padding:8px 10px; background:transparent; border:0; cursor:pointer; color:var(--login-text)}

.login-page .login-field > div{position:relative}

.login-honeypot{position:absolute;left:-9999px;opacity:0}

.login-side{padding:14px; position:sticky; top:84px}
.login-side h3{margin:0 0 8px 0; font-size:16px; color:var(--login-text)}
.login-box{padding:12px; border:var(--login-border); border-radius:12px; background:var(--login-glass)}
.login-tip .login-hint{display:block;line-height:1.45}

.login-captcha{
  display:flex; 
  align-items:center; 
  justify-content:center;
  min-width:200px; 
  min-height:44px; 
  padding:12px 16px; 
  border:var(--login-border); 
  border-radius:12px; 
  background:var(--login-glass); 
  font:600 22px ui-monospace,monospace; 
  letter-spacing:0.6ch; 
  line-height:1;
  user-select:none;
  text-align:center;
  color:var(--login-text);
}

.login-captcha-row{
  display:flex; 
  gap:8px; 
  align-items:center;
}

@media (max-width:700px){
  .login-captcha{ 
    min-width: 150px; 
    font-size: 18px;
  }
}

.login-otp-container{
  display:grid; 
  gap:10px; 
  align-items:center; 
  justify-items:center; 
  text-align:center; 
  padding:24px;
}

.login-success-state{
  display:grid; 
  gap:10px; 
  align-items:center; 
  justify-items:center; 
  text-align:center; 
  padding:24px;
}

.login-reset-container{
  display:grid; 
  gap:10px; 
  align-items:center; 
  justify-items:center; 
  text-align:center; 
  padding:24px;
}

.login-token-container{
  display:grid; 
  gap:10px; 
  align-items:center; 
  justify-items:center; 
  text-align:center; 
  padding:24px;
}

.login-icon{font-size:42px; margin:0;}

.login-page select, .login-page input, .login-page textarea { color: var(--login-text); }
.login-page select option { color: var(--login-text); background: var(--login-panel); }
html[data-theme="dark"] .login-page select { background: var(--login-glass-strong); }

/* Принудительное переопределение всех цветов в темной теме */
html[data-theme="dark"] .login-page * {
  color: #ffffff !important;
}

html[data-theme="dark"] .login-page .login-primary {
  color: #ffffff !important;
}

html[data-theme="dark"] .login-page input,
html[data-theme="dark"] .login-page select,
html[data-theme="dark"] .login-page textarea {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.2) !important;
}