/* WME Neo — auth pages (login, register, forgot/reset password, email verified). Single focused card on a quiet mesh;
   form fields/IDs/JS untouched. Scoped to html[data-skin="neo"] body.login-page. Ported from itservices /auth/neo-login.css. */
html[data-skin="neo"] .login-page::before {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(20, 99, 184, .16), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(42, 157, 244, .10), transparent 60%);
}
html[data-skin="neo"][data-theme="dark"] .login-page::before {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(79, 157, 240, .22), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(124, 192, 255, .08), transparent 60%);
}
html[data-skin="neo"] .login-page section.wme-hero { text-align: center; padding: 44px 24px 6px; }
html[data-skin="neo"] .login-page .wme-hero .wme-wrap { align-items: center; }
html[data-skin="neo"] .login-page .wme-hero h1 { font-size: 30px; font-weight: 650; letter-spacing: -.025em; }
html[data-skin="neo"] .login-page .wme-hero p { font-size: 14.5px; }
html[data-skin="neo"] .login-page .main-wrapper { background: transparent; border: 0; box-shadow: none; }
html[data-skin="neo"] .login-page .container { display: flex; justify-content: center; align-items: flex-start; min-height: 0; padding: 14px 20px 30px; }

/* Card */
html[data-skin="neo"] .login-page .login-box, html[data-skin="neo"][data-theme="dark"] .login-page .login-box {
  position: relative; max-width: 440px; width: 100%; border-radius: 18px;
  background: var(--neo-surface); border: 1px solid var(--neo-border); box-shadow: var(--neo-shadow-lg); overflow: hidden;
}
html[data-skin="neo"] .login-page .login-box-header, html[data-skin="neo"][data-theme="dark"] .login-page .login-box-header {
  background: transparent; color: var(--neo-text); border-bottom: 0; padding: 30px 32px 2px;
}
/* header icon becomes the gradient brand badge */
html[data-skin="neo"] .login-page .login-box-header i {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--neo-grad); color: #fff; font-size: 24px; opacity: 1; margin: 4px auto 16px;
  box-shadow: 0 10px 24px -10px rgba(20, 99, 184, .7);
}
html[data-skin="neo"] .login-page .login-box-header h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; color: var(--neo-text); }
html[data-skin="neo"] .login-page .login-box-header p { color: var(--neo-muted); font-size: 13.5px; opacity: 1; }
html[data-skin="neo"] .login-page .login-box form { padding: 20px 32px 28px; }

/* Fields */
html[data-skin="neo"] .login-page .login-box .form-group label { color: var(--neo-muted); font-size: 12px; font-weight: 600; text-transform: none; }
html[data-skin="neo"] .login-page .login-box .form-group label i { color: var(--neo-accent); }
html[data-skin="neo"] .login-page .login-box input[type="text"], html[data-skin="neo"] .login-page .login-box input[type="email"],
html[data-skin="neo"] .login-page .login-box input[type="password"], html[data-skin="neo"] .login-page .login-box select {
  border: 1px solid var(--neo-border-strong); border-radius: 10px; padding: 12px 14px; font-size: 14px; min-height: 44px; background: var(--neo-surface); color: var(--neo-text); box-shadow: var(--neo-shadow-sm);
}
html[data-skin="neo"] .login-page .login-box select { padding-right: 34px; }
html[data-skin="neo"] .login-page .login-box input:focus, html[data-skin="neo"] .login-page .login-box select:focus { border-color: var(--neo-accent); box-shadow: var(--neo-ring); }
html[data-skin="neo"] .login-page .login-box .form-group small { color: var(--neo-muted); font-size: 12px; }
html[data-skin="neo"] .login-page .domain-suffix, html[data-skin="neo"][data-theme="dark"] .login-page .domain-suffix {
  background: var(--neo-surface-2); color: var(--neo-muted); border-left: 1px solid var(--neo-border); border-radius: 0 9px 9px 0; font-size: 13px;
}
html[data-skin="neo"] .login-page .password-toggle, html[data-skin="neo"][data-theme="dark"] .login-page .password-toggle { color: var(--neo-muted); }
html[data-skin="neo"] .login-page .password-toggle:hover { color: var(--neo-accent); }
html[data-skin="neo"] .login-page .login-box .btn { border-radius: 10px; min-height: 44px; font-size: 14px; font-weight: 600; margin-top: 4px; }

/* Links, messages, help */
html[data-skin="neo"] .login-page .login-footer { padding: 0 32px 22px; border-bottom: 1px solid var(--neo-border); }
html[data-skin="neo"] .login-page .login-footer p { color: var(--neo-muted); font-size: 12.5px; }
html[data-skin="neo"] .login-page .login-footer a { color: var(--neo-accent); }
html[data-skin="neo"] .login-page .login-footer a:hover { color: var(--neo-accent-2); }
html[data-skin="neo"] .login-page .error-message, html[data-skin="neo"][data-theme="dark"] .login-page .error-message {
  background: var(--neo-danger-bg); color: var(--neo-danger); border: 1px solid transparent; border-left-width: 1px; border-radius: 10px; font-size: 13px; margin: 0 32px 16px;
}
html[data-skin="neo"] .login-page .login-box .notification { position: static; border-radius: 10px; margin: 0 32px 16px; padding: 12px 14px; font-size: 13px; box-shadow: none; border: 1px solid transparent; border-left-width: 1px; }
html[data-skin="neo"] .login-page .login-box .notification::after { content: none; }
html[data-skin="neo"] .login-page .login-box .notification.success, html[data-skin="neo"][data-theme="dark"] .login-page .login-box .notification.success { background: var(--neo-success-bg); color: var(--neo-success); border-left-color: transparent; }
html[data-skin="neo"] .login-page .login-box .notification.error, html[data-skin="neo"][data-theme="dark"] .login-page .login-box .notification.error { background: var(--neo-danger-bg); color: var(--neo-danger); border-left-color: transparent; }
html[data-skin="neo"] .login-page .help-text { background: var(--neo-surface-2); border-top: 1px solid var(--neo-border); padding: 18px 32px 22px; }
html[data-skin="neo"] .login-page .help-text p { color: var(--neo-muted); font-size: 12px; }
html[data-skin="neo"] .login-page .help-text p:first-child { color: var(--neo-text); }
html[data-skin="neo"] .login-page .help-text i, html[data-skin="neo"] .login-page .help-text a { color: var(--neo-accent); }
html[data-skin="neo"] .login-page .wme-foot { border-top: 0; }

/* Register: AD notice (inline-coloured icon → !important) */
html[data-skin="neo"] .login-page .ad-notice, html[data-skin="neo"][data-theme="dark"] .login-page .ad-notice {
  background: var(--neo-info-bg); border: 1px solid transparent; border-radius: var(--neo-r-sm); color: #0369a1; font-size: 13px;
}
html[data-skin="neo"][data-theme="dark"] .login-page .ad-notice, html[data-skin="neo"][data-theme="dark"] .login-page .ad-notice strong { color: var(--neo-info); }
html[data-skin="neo"] .login-page .ad-notice strong { color: inherit; }
html[data-skin="neo"] .login-page .ad-notice i[style], html[data-skin="neo"][data-theme="dark"] .login-page .ad-notice .fa-info-circle { color: var(--neo-info) !important; }

/* Email-verified page: fully inline-styled result banners (green/red gradients) → tinted Neo panels */
html[data-skin="neo"] .login-page [style*="#28a745"][style*="linear-gradient"] { background: var(--neo-success-bg) !important; color: var(--neo-success) !important; border-radius: 14px; }
html[data-skin="neo"] .login-page [style*="#dc3545"][style*="linear-gradient"] { background: var(--neo-danger-bg) !important; color: var(--neo-danger) !important; border-radius: 14px; }
html[data-skin="neo"] .login-page [style*="linear-gradient"] [style*="color"] { color: inherit !important; opacity: .9; }
html[data-skin="neo"] .login-page [style*="#d4edda"] { background: var(--neo-success-bg) !important; border-color: transparent !important; border-radius: var(--neo-r-sm); }
html[data-skin="neo"] .login-page [style*="#155724"] { color: var(--neo-success) !important; }
html[data-skin="neo"] .login-page [style*="#f8d7da"] { background: var(--neo-danger-bg) !important; border-color: transparent !important; border-radius: var(--neo-r-sm); }
html[data-skin="neo"] .login-page [style*="#721c24"] { color: var(--neo-danger) !important; }

@media (max-width: 520px) {
  html[data-skin="neo"] .login-page .wme-hero h1 { font-size: 24px; }
  html[data-skin="neo"] .login-page .login-box form { padding: 18px 20px 24px; }
  html[data-skin="neo"] .login-page .login-box-header { padding: 26px 20px 2px; }
  html[data-skin="neo"] .login-page .error-message, html[data-skin="neo"] .login-page .login-box .notification { margin: 0 20px 16px; }
}