@font-face {
    font-family: "CEER-L";
    src: url("../Fonts/CEER_Beta_3-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "CEER-R";
    src: url("../Fonts/Ceer-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "CEER-B";
    src: url("Fonts/Ceer-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}



/* ============ THEME TOKENS ============ */
:root {
  /* Accent: set to your preferred brand */
  --accent: #0ea5ff; /* Switch to #26d0ce for CEER teal */
  --accent-strong: color-mix(in oklab, var(--accent), white 8%);

  /* Dark (default) */
  --bg: #0a0a0a;
  --elev-1: rgba(12,12,12,0.65);
  --glass-border: color-mix(in oklab, var(--accent), transparent 70%);
  --text: #f7f9fb;
  --muted: #9fb3c8;
  --muted-2: #c5d2de;
  --outline: color-mix(in oklab, var(--accent), white 70%);
  --shadow: 0 0 80px color-mix(in oklab, var(--accent), transparent 60%);

  /* Form */
  --field-line: rgba(255,255,255,.28);
  --field-line-focus: var(--accent);
  --btn-text: #051018;

  /* Background glow hues */
  --energy-1: color-mix(in oklab, var(--accent), transparent 75%);
  --energy-2: color-mix(in oklab, var(--accent), transparent 82%);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb;
    --elev-1: rgba(255,255,255,0.82);
    --glass-border: color-mix(in oklab, var(--accent), black 85%);
    --text: #0a0f14;
    --muted: #3a546d;
    --muted-2: #22455f;
    --outline: color-mix(in oklab, var(--accent), black 40%);
    --shadow: 0 20px 60px rgba(5, 16, 24, .18);
    --field-line: rgba(5, 16, 24, .18);
    --btn-text: #001018;
  }
}

/* Force explicit theme when [data-theme] is set */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fb;
  --elev-1: rgba(255,255,255,0.82);
  --glass-border: color-mix(in oklab, var(--accent), black 85%);
  --text: #0a0f14;
  --muted: #3a546d;
  --muted-2: #22455f;
  --outline: color-mix(in oklab, var(--accent), black 40%);
  --shadow: 0 20px 60px rgba(5, 16, 24, .18);
  --field-line: rgba(5, 16, 24, .18);
  --btn-text: #001018;
}

/* ============ RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* BODY */
body {
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'CEER-R', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============ BACKGROUND IMAGE ============ */
.bg-image {
  position: fixed;
  inset: 0;
  background: url("/Content/IMGS/BG.png") center / cover no-repeat;
  filter: blur(26px) brightness(0.55) saturate(1.1);
  transform: scale(1.2);
  z-index: -6;
}
html[data-theme="light"] .bg-image {
  filter: blur(18px) brightness(0.98) saturate(1.04);
}

/* ============ FOG + ENERGY OVERLAY ============ */
.bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--energy-1), transparent 45%),
    radial-gradient(circle at 80% 70%, var(--energy-2), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
  mix-blend-mode: overlay;
  animation: hueShift 25s linear infinite;
  z-index: -5;
}
html[data-theme="light"] .bg {
  background:
    radial-gradient(circle at 20% 30%, var(--energy-1), transparent 40%),
    radial-gradient(circle at 80% 70%, var(--energy-2), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.1));
  mix-blend-mode: normal;
}

/* ENERGY LINES */
.bg span {
  position: absolute;
  top: -100%;
  width: 4px;
  height: 200%;
  background: linear-gradient(transparent, var(--accent-strong), var(--accent-strong), transparent);
  opacity: .35;
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent), transparent 20%)) blur(.2px);
  animation: scan 6s linear infinite, linePulse 2.5s ease-in-out infinite;
}
.bg span:nth-child(1) { left: 15%; animation-delay: 0s; }
.bg span:nth-child(2) { left: 40%; animation-delay: 2s; }
.bg span:nth-child(3) { left: 65%; animation-delay: 4s; }
.bg span:nth-child(4) { left: 85%; animation-delay: 1s; }

@keyframes scan { from { transform: translateY(-100%);} to { transform: translateY(100%);} }
@keyframes hueShift { from { filter: hue-rotate(0deg);} to { filter: hue-rotate(20deg);} }
@keyframes linePulse { 0%,100% { opacity: .25; } 50% { opacity: .55; }}

/* ============ LOGIN WRAPPER ============ */
.login-wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
  z-index: 1;
}

/* ============ GLASS CARD ============ */
.login-glass {
  width: 820px;
  display: flex;
  overflow: hidden;
  border-radius: 18px;
  background: var(--elev-1);
  backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 0 30px color-mix(in oklab, var(--accent), transparent 80%);
}

/* ============ LEFT VISUAL ============ */
.login-visual {
  width: 45%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, color-mix(in oklab, var(--bg), black 10%), var(--bg));
  overflow: hidden;
}
.car-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent), white 6%), transparent 70%);
  filter: blur(100px);
  animation: pulse 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25);} }
.login-visual img {
  width: 100%;
  height: 100%;
 
  opacity: .35;
  z-index: 2;
  filter: drop-shadow(0 0 60px color-mix(in oklab, var(--accent), transparent 40%));
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
.fog { position: absolute; inset: 0; background: radial-gradient(circle at bottom, rgba(0,0,0,.6), transparent 65%); z-index: 3; }
html[data-theme="light"] .fog { background: radial-gradient(circle at bottom, rgba(255,255,255,.4), transparent 70%); }

/* ============ FORM ============ */
.login-form { width: 55%; padding: 55px 50px; }

.header-row {
  display: flex; align-items: start; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}

.logo {
    font-family: 'CEER-R', sans-serif;
    font-size: 3rem;
    letter-spacing: 6px;
}
.tagline {
  margin: 10px 0 28px;
  font-size: .9rem;
  letter-spacing: 2px;
  color: var(--muted-2);
}

.field { position: relative; margin-bottom: 28px; }
.field input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field-line);
  color: var(--text);
  outline: none;
}
.field input::placeholder { color: transparent; }
.field label {
  position: absolute; left: 0; top: 14px;
  color: color-mix(in oklab, var(--text), transparent 45%);
  transition: .2s ease;
  pointer-events: none;
}
.field input:focus + label,
.field input:valid + label {
  top: -10px; font-size: .75rem; color: var(--field-line-focus);
}
.field-hint { margin-top: 6px; font-size: .75rem; color: var(--muted); }

:focus-visible {
  outline: 2px solid var(--outline);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Button */
.btn {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), black 12%));
  border: none;
  color: var(--btn-text);
  font-weight: 800;
  letter-spacing: 2.4px;
  cursor: pointer;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { box-shadow: 0 0 50px color-mix(in oklab, var(--accent), transparent 10%); transform: translateY(-2px); }
.btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.btn__spinner {
  --size: 16px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: var(--btn-text);
  display: none;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading .btn__spinner { display: inline-block; }

.btn__label { display: inline-block; }

/* Footer */
.footer-name {
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  transition: all .2s ease;
}
.footer-name:hover { text-shadow: 0 0 16px color-mix(in oklab, var(--accent), transparent 40%); transform: translateY(-1px); }

.copyright {
  display: block;
  margin-top: 28px;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
}

/* Theme toggle */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: color-mix(in oklab, var(--bg), white 6%);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle .icon { font-size: 16px; line-height: 1; opacity: .7; }

/* Responsive */
@media (max-width: 900px) {
  .login-glass { flex-direction: column; width: 92%; }
  .login-visual { width: 100%; height: 240px; }
  .login-form { width: 100%; padding: 28px 22px 32px; }
  .logo { font-size: 2.25rem; letter-spacing: 4px; }
}