@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variables — match eugamehost.com 2026 ── */
:root {
  --bg-base:        #070B12;
  --bg-surface:     #0B1220;
  --bg-card:        #101827;
  --bg-input:       #0B1220;
  --border:         rgba(167, 184, 204, 0.16);
  --border-strong:  #243247;
  --border-accent:  rgba(69, 199, 255, 0.42);
  --text-primary:   #FFFFFF;
  --text-secondary: #A7B8CC;
  --text-muted:     #5c6a7d;
  --accent:         #45C7FF;
  --accent-glow:    rgba(69, 199, 255, 0.18);
  --accent-bright:  #8DE4FF;
  --accent-dim:     rgba(69, 199, 255, 0.08);
  --cta:            #B6FF2E;
  --cta-hover:      #CBFF5E;
  --cta-text:       #0d2400;
  --cta-glow:       rgba(182, 255, 46, 0.16);
  --danger:         #FF5C5C;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --shadow-lg:      0 0 0 1px rgba(69,199,255,0.14), 0 24px 80px rgba(0,0,0,0.38);
  --font-ui:        'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.18s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html { font-size: 15px; }

BODY {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Noise texture — same as panel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* Particle canvas */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── Layout ── */
#loginSection {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  bottom: auto; left: auto; right: auto; top: auto;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ── Card ── */
#loginSection .frame {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(69,199,255,0.04);
  position: relative;
  overflow: hidden;
}

/* Top accent line */
#loginSection .frame::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,199,255,0.45), transparent);
}

/* Ambient inner glow */
#loginSection .frame::after {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 160px;
  background: radial-gradient(ellipse, rgba(69,199,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Logo ── */
#loginSection .logo {
  display: block;
  width: 100%;
  max-height: 52px;
  object-fit: contain;
  margin-bottom: 28px;
}

/* ── Form structure ── */
form { margin: 0; }
fieldset { border: none; margin: 0; padding: 0; }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0 !important;
}

li { margin-bottom: 4px; }

/* ── Labels ── */
label:not(.k-checkbox-label) {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  margin-top: 16px;
}

li:first-child label:not(.k-checkbox-label) { margin-top: 0; }
.language { margin-top: 14px; }

/* ── Inputs — fix double-border ── */
#loginSection .k-textbox,
.k-widget.k-textbox,
span.k-textbox {
  width: 100% !important;
  display: block !important;
  height: 42px !important;
  background-color: var(--bg-input) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-size: 0.875rem;
}

#loginSection .k-textbox:hover,
.k-widget.k-textbox:hover,
span.k-textbox:hover {
  border-color: var(--border-strong) !important;
  background-color: var(--bg-input) !important;
  outline: 0;
}

#loginSection .k-textbox:focus-within,
.k-widget.k-textbox:focus-within,
span.k-textbox:focus-within,
.k-textbox:focus,
.k-textbox.k-state-focus,
.k-textbox.k-state-focused,
.k-textarea:focus,
.k-textarea.k-state-focus,
.k-textarea.k-state-focused {
  border-color: var(--border-accent) !important;
  background-color: var(--bg-input) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Inner input — NO border of its own */
.k-widget.k-textbox input,
span.k-textbox input,
.k-textbox > input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.875rem !important;
  padding: 0 14px !important;
  caret-color: var(--accent);
}

/* Bare input fallback */
input[type="text"]:not(.k-checkbox),
input[type="password"],
input[type="number"] {
  width: 100%;
  height: 42px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: 0 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: none;
  -webkit-appearance: none;
}

input[type="text"]:not(.k-checkbox):focus,
input[type="password"]:focus,
input[type="number"]:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Autofill */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #0B1220 inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* ── Checkbox ── */
#loginSection .k-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

.k-checkbox-label {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: middle;
  margin-left: 6px;
}

.remember-me { margin-top: 2%; margin-bottom: 4%; }

/* ── Dropdown ── */
#loginSection .k-dropdown,
.k-widget.k-dropdownlist {
  width: 100% !important;
}

.k-dropdown .k-dropdown-wrap,
.k-dropdownlist .k-dropdown-wrap {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}

.k-dropdown .k-dropdown-wrap .k-input,
.k-dropdownlist .k-input {
  height: 42px;
  font-size: 0.875rem;
  line-height: 42px;
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  padding: 0 14px !important;
}

.k-dropdown .k-select,
.k-dropdownlist .k-select {
  background: transparent !important;
  border-left: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Validation ── */
#loginSection .field-validation-error {
  display: block;
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 4px;
}

#loginSection .validation-summary-errors ul { margin: 0; padding: 0; }
#loginSection .validation-summary-errors li {
  display: inline;
  list-style: none;
  margin: 0;
  font-size: 0.75rem;
  color: var(--danger);
}

/* ── Button container ── */
div[style*="text-align:center"] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ── Login button — matches .primary-btn / .main-btn ── */
.k-button,
.k-button.k-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  width: 100%;
  color: var(--cta-text) !important;
  background: var(--cta) !important;
  border: 1px solid var(--cta) !important;
  background-image: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 16px !important;
  line-height: 1;
  height: 42px;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: none !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

.k-button:hover,
.k-button.k-primary:hover,
.k-button.k-primary.k-state-hover {
  color: var(--cta-text) !important;
  background: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
  background-image: none !important;
  box-shadow: 0 0 0 4px var(--cta-glow), 0 0 20px var(--cta-glow) !important;
  transform: none;
}

.k-button:active { opacity: 0.9; }

.k-i-unlock:before,
.k-i-lock:before { color: var(--cta-text) !important; }
.k-i-cancel:before { color: var(--text-secondary); }

/* ── Forgot password ── */
#loginSection .recover {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted) !important;
  text-decoration: none;
  transition: color var(--transition);
}

#loginSection .recover:hover { color: var(--text-secondary) !important; }

/* ── Global links ── */
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-bright); }
a:link, a:visited { color: var(--accent); }

/* ── Divider (OAuth) ── */
.divider {
  border-top: 1px solid var(--border);
  display: block;
  line-height: 1px;
  margin: 24px 0;
  position: relative;
  text-align: center;
}

.divider .divider-title {
  background: var(--bg-card);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-ui);
}

/* ── OAuth / social buttons ── */
.btn-Discord { background-color: #5865F2; border-color: #5865F2; color: #fff !important; width: 85%; }
.btn-Discord:hover { background-color: #4752c4; border-color: #4752c4; }
.btn-Google { background-color: #4285f4; border-color: #4285f4; margin-top: 5%; color: #fff !important; width: 85%; }
.btn-Github { background-color: #e4e6f0; border-color: #000; color: #000 !important; margin-top: 5%; width: 85%; }
.btn-Github:hover { background-color: #fff; }
.btn-Facebook,
.btn-Facebook:hover { background-color: #3b5998; border-color: #3b5998; margin-top: 5%; color: #fff !important; width: 85%; }
.btn-Facebook:hover { background-color: #2d88ff; border-color: #2d88ff; }
.btn-Whmcs { background-color: #4dac02; border-color: #4dac02; }

/* ── Social icons ── */
.fa-discord:before  { content: "\f392"; font-size: 20px; }
.fa-github:before   { content: "\f09b"; font-size: 20px; }
.fa-google:before   { content: "\f1a0"; font-size: 20px; }
.fa-facebook:before { content: "\f09a"; font-size: 20px; }
.fa-whmcs:before    { content: "\f40d"; font-size: 20px; color: #fff !important; }

/* ── Misc ── */
.f-pass {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.text-light { color: rgba(228,230,240,0.8); text-align: center; font-family: var(--font-ui); font-size: 0.875rem; }
.logincontainer-footer { background-color: transparent; margin-top: 20px; border-top: 0; }
.builtInCaptcha br:nth-of-type(2),
.builtInCaptcha br:first-of-type { display: none; }

/* ── Stacked button spacing (password recovery) ── */
.k-button + .k-button { margin-top: 10px; }
#cancelRecovery { margin-top: 10px; display: block; }
/* ══════════════════════════════════════════
   LOGIN ISOLATION
   CustomCss.css (the panel-wide layout skin) loads on the
   login page too and styles fieldset/ul/li/dropdowns/checkboxes
   globally. This file loads last on login — neutralize all of
   that so the login card renders exactly as designed.
══════════════════════════════════════════ */

#loginSection fieldset,
#loginSection ul,
#loginSection li {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#loginSection li { margin-bottom: 4px !important; }

#loginSection label:not(.k-checkbox-label) {
  position: static !important;
  transform: none !important;
  background: transparent !important;
}

/* Language dropdown — full width, single aligned control */
#loginSection .k-dropdown,
#loginSection .k-dropdownlist,
#loginSection .k-widget.k-dropdown,
#loginSection .k-widget.k-dropdownlist {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#loginSection .k-dropdown .k-dropdown-wrap,
#loginSection .k-dropdownlist .k-dropdown-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 42px !important;
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

#loginSection .k-dropdown .k-input { flex: 1; }
#loginSection .k-dropdown .k-select {
  position: static !important;
  display: grid;
  place-items: center;
  width: 36px;
  height: 100% !important;
  line-height: 42px !important;
}

/* Checkbox — square, our accent, never a circle */
#loginSection .k-checkbox,
#loginSection input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  accent-color: var(--accent) !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

/* No decorative pseudo-elements leaking into the card */
#loginSection fieldset::before,
#loginSection fieldset::after,
#loginSection ul::before,
#loginSection ul::after { display: none !important; }