*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --login-accent: var(--lux-accent, #d4943a);
  --login-accent-strong: var(--lux-accent-2, #a06625);
  --login-accent-glow: rgba(var(--lux-accent-rgb, 212, 148, 58), 0.28);
  --login-success: #10b981;
  --login-danger: #ef4444;
}
html, body { min-height: 100%; }
body {
  margin: 0;
  padding: 32px;
  min-height: 100vh;
  background: var(--lux-shell-background);
  color: var(--lux-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Noto Sans Georgian', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}
.login-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1140px, 100%);
  min-height: 640px;
  border-radius: 28px;
  overflow: hidden;
}
.login-main,
.login-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-main {
  flex: 1.04;
  padding: 56px 50px;
}
.login-aside {
  flex: 0.96;
  padding: 56px;
  border-left: 1px solid var(--lux-border);
}
.kiu-logo-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent-strong));
  color: #fff;
  font-weight: 800;
  font-size: 26px;
  border-radius: 16px;
  margin-bottom: 26px;
  font-family: 'Playfair Display', serif;
  box-shadow: var(--lux-elev-2, 0 18px 40px rgba(0, 0, 0, 0.14));
}
.login-title {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--lux-text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.login-subtitle {
  font-size: 15px;
  color: var(--lux-text-muted);
  margin-bottom: 34px;
  line-height: 1.6;
  max-width: 420px;
}
.login-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 28px;
  border-radius: 16px;
  position: relative;
  z-index: 1;
}
.login-tab {
  flex: 1;
  text-align: center;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--lux-text-muted);
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.login-tab.lux-secondary-btn {
  min-height: 0;
  padding: 12px 14px;
  justify-content: center;
  box-shadow: none;
  background: transparent;
  border: 0;
}
.login-tab.active {
  color: var(--lux-text);
}
.input-group { margin-bottom: 20px; position: relative; z-index: 1; }
.input-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--lux-text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.12em;
}
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper i {
  position: absolute;
  left: 15px;
  color: var(--lux-text-soft, var(--lux-text-muted));
  font-size: 14px;
  z-index: 1;
}
.login-page .input-wrapper input.lux-control { min-height: 54px; padding-left: 44px; }
.input-wrapper .toggle-pwd {
  position: absolute;
  right: 14px;
  color: var(--lux-text-muted);
  font-size: 14px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  transition: color 0.2s ease;
}
.input-wrapper .toggle-pwd:hover { color: var(--login-accent); }
.login-btn {
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.login-page .login-btn.lux-primary-btn,
.login-page .login-btn.lux-secondary-btn { min-height: 54px; padding: 15px 18px; }
.login-btn:hover { transform: translateY(-2px) scale(1.01); }
.login-btn:active { transform: translateY(0) scale(0.99); }
.login-btn.microsoft-btn { margin-top: 0; }
.login-btn.is-loading { pointer-events: none; opacity: 0.75; }
.login-btn:disabled, .login-btn.is-disabled { opacity: 0.6; cursor: not-allowed; }
.login-error, .login-success {
  font-size: 13px;
  text-align: center;
  margin-bottom: 16px;
  min-height: 20px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border-radius: 12px;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
}
.login-error:not(:empty) { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.18); color: #ef4444; }
.login-success:not(:empty) { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.18); color: var(--login-success); }
.login-error:empty, .login-success:empty { padding: 0; border: none; background: none; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 18px;
  color: var(--lux-text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lux-border);
}
.login-helper {
  margin-top: 10px;
  font-size: 12px;
  color: var(--lux-text-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  border-radius: 18px;
}
.login-support-card { position: relative; z-index: 1; border-radius: 18px; }
.tab-content { display: none; }
.tab-content[hidden] { display: none; }
.tab-content.active { display: block; }
.login-form-card {
  margin-top: 4px;
  padding: 22px;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}
.login-note {
  margin-top: 24px;
  padding: 18px;
  border-radius: 18px;
  font-size: 12px;
  color: var(--lux-text-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.login-note strong { display: block; margin-bottom: 4px; color: var(--lux-text); }
.login-note-hidden-top { display: none; margin-top: 0; }
.login-hero { position: relative; z-index: 1; max-width: 420px; }
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lux-text-muted);
}
.login-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--lux-border-strong, var(--lux-border));
}
.login-hero h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lux-text);
}
.login-hero p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lux-text-muted);
}
.login-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.login-stat-card {
  padding: 20px 18px 18px;
  border-radius: 18px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.login-stat-card:hover { transform: translateY(-3px); }
.login-stat-card strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}
.login-stat-icon { font-size: 20px; }
.login-stat-icon-gold { color: rgba(var(--lux-accent-rgb), 0.8); }
.login-stat-icon-green { color: rgba(16, 185, 129, 0.8); }
.login-stat-icon-blue { color: rgba(99, 147, 255, 0.8); }
.login-stat-icon-purple { color: rgba(168, 85, 247, 0.8); }
.login-stat-card span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lux-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .login-btn:hover { transform: none; }
  .login-stat-card:hover { transform: none; }
}
@media (max-width: 980px) {
  body { padding: 20px; }
  .login-wrapper { flex-direction: column; min-height: auto; }
  .login-main, .login-aside { padding: 40px 28px; }
  .login-aside { border-left: 0; border-top: 1px solid var(--lux-border); }
  .login-title { font-size: 34px; }
  .login-hero h2 { font-size: 34px; }
}
@media (max-width: 640px) {
  body { padding: 14px; }
  .login-wrapper { border-radius: 24px; }
  .login-main, .login-aside { padding: 28px 20px; }
  .login-tabs { flex-direction: column; }
  .login-stats { grid-template-columns: 1fr; }
}