@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* 👑 FLAT NEON GOLD ADMIN THEME */
  --bg: #F8FAFC;       /* Pitch Black Background */
  --bg-card: #0A0A0A;  /* Solid Dark Cards */
  --text: #F4F4F5;
  --muted: #A1A1AA;
  --muted2: #D4D4D8;
  --primary: #6366F1;  /* Gold */
  --pl: #818CF8;       /* Light Gold */
  --sec: #4F46E5;      /* Dark Goldenrod */
  --acc: #4F46E5;      /* Bright Gold */
  --ok: #10B981;
  --err: #EF4444;
  --grad: linear-gradient(135deg, #6366F1, #818CF8);
  --grad2: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
  --cb: #E2E8F0;       /* Subtle Grey Borders */
  --cb-gold: #6366F1;  /* Gold Accent Borders */
}

html{scroll-behavior:smooth}
body{font-family:'Space Grotesk', 'Outfit', sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* Flat Grid Backgrounds */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 20px;position:relative;background:var(--bg)}
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:30px 30px}

.auth-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1160px;width:100%;position:relative;z-index:1}

/* Flat Dark Card */
.auth-card{background:var(--bg-card);border:1px solid var(--cb);border-radius:4px;padding:44px;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.8);animation:cardIn .4s ease-out both}
@keyframes cardIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:32px;text-decoration:none}
.brand-logo{width:46px;height:46px;background:var(--grad);border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#FFFFFF;box-shadow:0 0 10px rgba(99,102,241,0.3);letter-spacing:1px}
.brand-name{font-size:22px;font-weight:700;color:var(--primary);letter-spacing:1px;text-transform:uppercase}

.auth-title{font-size:26px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.auth-sub{color:var(--muted2);font-size:14px;margin-bottom:26px}

.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--muted2);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;z-index:1;color:var(--primary)}

.input-wrap input{width:100%;background:#000;border:1px solid var(--cb);border-radius:4px;padding:12px 44px 12px 48px;color:var(--text);font-size:14px;font-family:'Space Grotesk',sans-serif;outline:none;transition:all .25s}
.input-wrap input:focus{border-color:var(--primary);background:rgba(99,102,241,.02);box-shadow:0 0 0 2px rgba(99,102,241,.15)}
.input-wrap input::placeholder{color:var(--muted)}

.pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:4px;transition:color .2s;z-index:2}
.pw-toggle:hover{color:var(--primary)}

.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:8px;flex-wrap:wrap}

.check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted2);cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.check-label input[type=checkbox]{accent-color:var(--primary);width:15px;height:15px}

.forgot{font-size:12px;color:var(--pl);text-decoration:none;font-weight:700;transition:color .2s;white-space:nowrap;text-transform:uppercase;letter-spacing:1px}
.forgot:hover{color:var(--acc)}

.btn-primary{width:100%;padding:14px;background:var(--grad);border:none;border-radius:4px;color:#FFFFFF;font-weight:700;font-size:14px;cursor:pointer;transition:all .25s;font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent);opacity:0;transition:opacity .3s}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(99,102,241,0.3)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none!important}

.switch-auth{text-align:center;margin-top:20px;font-size:13px;color:var(--muted2)}
.switch-auth a{color:var(--pl);text-decoration:none;font-weight:700;transition:color .2s;text-transform:uppercase;letter-spacing:0.5px}
.switch-auth a:hover{color:var(--acc)}

.err-msg{background:rgba(239,68,68,.05);border-left:4px solid var(--err);border-top:1px solid rgba(239,68,68,.2);border-right:1px solid rgba(239,68,68,.2);border-bottom:1px solid rgba(239,68,68,.2);color:#FCA5A5;padding:12px 16px;border-radius:2px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;animation:shake .4s ease;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.success-msg{background:rgba(16,185,129,.05);border-left:4px solid var(--ok);border-top:1px solid rgba(16,185,129,.2);border-right:1px solid rgba(16,185,129,.2);border-bottom:1px solid rgba(16,185,129,.2);color:#6EE7B7;padding:12px 16px;border-radius:2px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.pw-strength{margin-top:8px}
.pw-strength-bar{height:4px;border-radius:2px;background:var(--cb);overflow:hidden}
.pw-strength-fill{height:100%;border-radius:2px;transition:all .4s;width:0%}
.pw-strength-text{font-size:11px;margin-top:4px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}

/* PROMO */
.auth-promo{display:flex;flex-direction:column;gap:28px;animation:promoIn .6s ease both}
@keyframes promoIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
.promo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);padding:8px 18px;border-radius:4px;font-size:11px;color:var(--primary);font-weight:700;width:fit-content;text-transform:uppercase;letter-spacing:1px}
.auth-promo h1{font-size:42px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;text-transform:uppercase}
.highlight{color:var(--primary)}
.auth-promo p{color:var(--muted2);font-size:14px;line-height:1.6}
.promo-stats{display:flex;gap:12px}
.stat-item{background:var(--bg-card);border:1px solid var(--cb);border-radius:4px;padding:18px 14px;flex:1;position:relative;overflow:hidden;transition:all .3s}
.stat-item:hover{border-color:var(--primary);transform:translateY(-3px)}
.stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.stat-num{font-size:20px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.feature-list{display:flex;flex-direction:column;gap:12px}
.feature-item{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted2)}
.feature-icon{width:34px;height:34px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}

@media(max-width:1020px){.auth-wrapper{grid-template-columns:1fr;max-width:520px}.auth-promo{display:none}}
@media(max-width:560px){.auth-card{padding:30px 22px;border-radius:22px}.auth-title{font-size:24px}.form-2col{grid-template-columns:1fr}.auth-bg{padding:16px 14px}}