:root {
  --bg:#0a0f0a; --surface:#111811; --surface2:#162016;
  --border:#1f2e1f; --border2:#2a3e2a;
  --green:#4dff7c; --green2:#2bcc55; --green-dim:#1a6630;
  --text:#d4f0d4; --text-dim:#7aab7a; --text-faint:#3a5a3a;
  --amber:#ffc94d; --red:#ff6b6b; --purple:#c084fc; --cyan:#4dd9ff;
  --mono:'JetBrains Mono',monospace; --display:'Orbitron',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:15px;line-height:1.6;min-height:100vh;display:flex;align-items:center;justify-content:center;}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.07) 3px,rgba(0,0,0,0.07) 4px);pointer-events:none;z-index:1000;}

.login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:1.5rem;}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);padding:2.5rem 2rem;animation:fadeUp 0.5s ease both;display:none;}
.card.active{display:block;}
.eyebrow{font-size:10px;letter-spacing:0.3em;color:var(--green2);text-transform:uppercase;margin-bottom:0.75rem;}
h1{font-family:var(--display);font-size:clamp(1.3rem,4vw,1.8rem);font-weight:900;letter-spacing:0.06em;line-height:1.1;color:var(--green);text-shadow:0 0 24px rgba(77,255,124,0.25);margin-bottom:0.5rem;}
h1 .dim{color:var(--text-dim);font-weight:700;}
.sub{font-size:12px;color:var(--text-dim);letter-spacing:0.04em;margin-bottom:1.75rem;}

/* ERROR / SUCCESS */
.msg-box{display:none;padding:0.75rem 1rem;margin-bottom:1.25rem;font-size:12px;letter-spacing:0.03em;}
.msg-box.show{display:block;}
.msg-box.error{background:rgba(255,201,77,0.10);border:1px solid rgba(255,201,77,0.35);color:var(--amber);}
.msg-box.success{background:rgba(77,255,124,0.06);border:1px solid rgba(77,255,124,0.2);color:var(--green);}

/* DIVIDER */
.divider{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;}
.divider-line{flex:1;height:1px;background:var(--border);}
.divider-text{font-size:9px;letter-spacing:0.2em;color:var(--text-faint);}

/* GOOGLE BTN */
.btn-google{display:flex;align-items:center;justify-content:center;gap:0.75rem;width:100%;padding:0.85rem 1.25rem;background:transparent;border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.12em;text-decoration:none;transition:all 0.2s;margin-bottom:1.25rem;}
.btn-google:hover{border-color:var(--green2);color:var(--green);background:rgba(77,255,124,0.04);}
.btn-google svg{flex-shrink:0;width:18px;height:18px;}

/* INPUT */
.input-group{margin-bottom:1rem;}
.input-label{font-size:9px;letter-spacing:0.2em;color:var(--text-faint);text-transform:uppercase;margin-bottom:0.4rem;display:block;}
.input-field{width:100%;background:#0a0f0a;border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:12px;padding:0.65rem 0.85rem;outline:none;transition:border-color 0.15s;}
.input-field:focus{border-color:var(--green2);}
.input-field::placeholder{color:var(--text-faint);}

/* SUBMIT BTN */
.btn-submit{width:100%;padding:0.75rem;background:transparent;border:1px solid var(--green-dim);color:var(--green);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.2em;transition:all 0.2s;margin-top:0.5rem;}
.btn-submit:hover{background:rgba(77,255,124,0.07);border-color:var(--green2);}
.btn-submit:disabled{opacity:0.5;}

/* FOOTER */
.login-footer{margin-top:1.5rem;font-size:10px;color:var(--text-faint);letter-spacing:0.08em;text-align:center;line-height:2;}
.login-footer a{color:var(--text-faint);text-decoration:none;transition:color 0.15s;}
.login-footer a:hover{color:var(--text-dim);}
.admin-link{color:var(--text-faint) !important;font-size:9px;letter-spacing:0.15em;}
.admin-link:hover{color:var(--amber) !important;}
.back-link{color:var(--text-faint) !important;font-size:9px;}
.back-link:hover{color:var(--green) !important;}

/* WELCOME OVERLAY */
#welcome-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#welcome-overlay.show { opacity: 1; pointer-events: all; }
.welcome-text { font-family: var(--display); font-size: 1.5rem; color: var(--green); letter-spacing: 0.1em; text-align: center; }

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}