:root{
  --ink:#0E0F0D; --ink-2:#15160E; --canvas:#EFF1ED; --panel:#FFFFFF; --panel-2:#FAFBF8;
  --accent:#F5E642; --accent-deep:#E4D11A; --accent-soft:#FBF6C6;
  --line:#E4E7E1; --line-2:#EEF0EB;
  --text:#16180F; --muted:#71766B; --faint:#9aa094;
  --good:#2F9E5B; --good-bg:#E6F4EC; --info:#3B73D8; --warn:#D9892A; --danger:#CF4329; --danger-bg:#FBE9E4;
  --display:'Bebas Neue',sans-serif; --sans:'Sora',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(16,18,13,.04),0 10px 30px -16px rgba(16,18,13,.18);
}
*{box-sizing:border-box;}
body{ margin:0; min-height:100vh; font-family:var(--sans); color:#fff;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(245,230,66,.10) 0%, transparent 55%),
    radial-gradient(100% 80% at 50% 110%, rgba(245,230,66,.06) 0%, transparent 50%),
    linear-gradient(180deg, #0E0F0D, #0A0B09);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 24px; overflow:hidden; -webkit-font-smoothing:antialiased; text-align:center;
}
.field{ margin-bottom:18px; width: 100%; }
.field:last-child{ margin-bottom:0; }
.field-label{ font-size:.78rem; font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.field-help{ font-size:.74rem; color:var(--faint); font-weight:400; }
button{font-family:inherit;cursor:pointer; text-align: center;} input{font-family:inherit;}
.btn{ border:1.5px solid var(--line); background:var(--panel); color:var(--text); border-radius:11px; padding:0 16px;
  font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:8px; transition:all .18s; min-height:46px; }
.btn:hover{ border-color:var(--ink); } .btn svg{ width:15px; height:15px; }
.btn.dark{ background:var(--ink); border-color:var(--ink); color:#fff; } .btn.dark:hover{ background:#000; } .btn.dark svg{ color:var(--accent); }
.loginContent{ margin-bottom: 30px; width: 300px; }
.loginContent input[type="text"], .loginContent input[type="password"], .loginContent button{ width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.loginContent .btn{ display:flex; justify-content:center; align-items:center; gap:8px; text-align:center; }

/* ===== CHECKBOX ===== */
.loginContent label:has(input[type="checkbox"]){
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:.84rem; font-weight:600; color:rgba(255,255,255,.72);
  user-select:none; transition:color .18s var(--ease);
}
.loginContent label:has(input[type="checkbox"]:hover){ color:rgba(255,255,255,.92); }
.loginContent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; flex-shrink:0;
  border:1.5px solid rgba(245,230,66,.38); border-radius:5px;
  background:rgba(255,255,255,.06); cursor:pointer; position:relative;
  transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.loginContent input[type="checkbox"]:hover{
  border-color:var(--accent-deep); background:rgba(251,246,198,.14);
}
.loginContent input[type="checkbox"]:checked{
  background:var(--accent); border-color:var(--accent-deep);
  box-shadow:0 0 0 3px rgba(245,230,66,.2);
}
.loginContent input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.loginContent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.loginContent input[type="checkbox"]:disabled{ opacity:.45; cursor:not-allowed; }
.grid-bg{ position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(120% 90% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000, transparent 75%); }

.login_error {
  background-color: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(207, 67, 41, 0.2);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.2s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
  

.wordmark{ font-family:var(--display); font-size:2rem; letter-spacing:.05em; line-height:1; margin-bottom:6px; position:relative; }
.wordmark b{ color:var(--accent); font-weight:400; }
.eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:10px; position:relative; }

/* ===== RADAR ===== */
.radar{ position:relative; width:300px; height:300px; margin-bottom:8px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,230,66,.06) 0%, rgba(245,230,66,.02) 45%, transparent 72%); }
@media(max-width:520px){ .radar{ width:250px; height:250px; } }
.ring{ position:absolute; border-radius:50%; border:1px solid rgba(245,230,66,.24); inset:0; }
.ring.r2{ inset:17%; } .ring.r3{ inset:34%; } .ring.r4{ inset:51%; }
.cross{ position:absolute; background:rgba(245,230,66,.12); }
.cross.h{ left:0; right:0; top:50%; height:1px; } .cross.v{ top:0; bottom:0; left:50%; width:1px; }
.sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(245,230,66,.05) 25deg, rgba(245,230,66,.32) 52deg, rgba(245,230,66,.55) 60deg, transparent 62deg);
  animation:spin 2.6s linear infinite; }
.sweep-line{ position:absolute; inset:0; border-radius:50%; animation:spin 2.6s linear infinite; }
.sweep-line::after{ content:""; position:absolute; left:50%; top:0; bottom:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--accent), transparent); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.me{ position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--accent); box-shadow:0 0 18px var(--accent); z-index:3; }
.me::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--accent); opacity:.6; animation:mepulse 2s ease-out infinite; }
@keyframes mepulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

.pin{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--accent);
  transform:translate(-50%,-50%) scale(0); box-shadow:0 0 12px rgba(245,230,66,.9); z-index:2;
  animation:ping 2.6s ease-out infinite; }
@keyframes ping{ 0%,72%{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  78%{ transform:translate(-50%,-50%) scale(1.25); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:.55; } }

/* ===== STATUS ===== */
.status{ font-size:1.06rem; font-weight:600; margin-top:34px; min-height:1.5em; transition:opacity .35s; }
.status .blink{ color:var(--accent); }
.tip{ font-size:.84rem; color:rgba(255,255,255,.5); margin-top:12px; min-height:1.4em; max-width:380px; transition:opacity .4s; }
.tip b{ color:rgba(255,255,255,.8); font-weight:700; }

/* indeterminate bar */
.bar{ width:min(280px,72vw); height:4px; border-radius:999px; background:rgba(255,255,255,.08); margin-top:26px; overflow:hidden; position:relative; }
.bar::before{ content:""; position:absolute; top:0; bottom:0; width:40%; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:slide 1.5s var(--ease) infinite; }
@keyframes slide{ 0%{ left:-40%; } 100%{ left:100%; } }

@media(prefers-reduced-motion:reduce){
  .sweep,.sweep-line,.me::after,.pin,.bar::before{ animation:none; }
  .pin{ transform:translate(-50%,-50%) scale(1); opacity:.7; }
  .sweep{ background:conic-gradient(from 0deg, transparent 0deg, rgba(245,230,66,.25) 60deg, transparent 62deg); }
}
@media(max-width:600px){
  .btn{ flex:1; justify-content:center; }
}