
:root{--red:#ff3138;--yellow:#ffd84d;--green:#4dff9e;--cream:#fff7df;--ink:#070a0f}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{overflow-x:hidden;background:radial-gradient(circle at 50% 20%,#122033 0,#070b12 42%,#020305 100%);color:var(--cream);font-family:Inter,Arial,sans-serif}
#matrix{position:fixed;inset:0;width:100%;height:100%;opacity:.12;pointer-events:none}
.login-stage{min-height:100vh;display:grid;place-items:center;padding:32px;position:relative}
.terminal-shell{width:min(800px,100%);border:12px solid #2b3138;border-radius:30px;background:#10151b;box-shadow:0 45px 140px #000,0 0 80px #1f6fff22,inset 0 0 0 2px #59616b;animation:float 6s ease-in-out infinite}
.terminal-bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:800 12px/1 monospace;letter-spacing:.15em;color:#d7dde4}
.terminal-bar div{display:flex;gap:10px}.terminal-bar i{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 12px currentColor}.terminal-bar i:nth-child(2){background:var(--yellow)}.terminal-bar i:nth-child(3){background:var(--green)}
.terminal-screen{position:relative;overflow:hidden;min-height:600px;border-radius:17px;border:3px solid #000;padding:48px 36px;text-align:center;background:radial-gradient(circle at 50% 30%,#12321f 0,#07160d 42%,#010503 100%);box-shadow:inset 0 0 90px #000}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0004 4px);mix-blend-mode:multiply}
.glow-orb{position:absolute;width:280px;height:280px;border-radius:50%;background:#31ff8814;filter:blur(40px);left:50%;top:20%;transform:translateX(-50%);animation:pulse 3s ease-in-out infinite}
.brand-logo{position:relative;width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 24px #ff313866);animation:logoPop .8s cubic-bezier(.2,.8,.2,1)}
.path,.status-line{position:relative;color:var(--green);font:700 12px monospace}
h1{position:relative;margin:18px 0 8px;font-size:clamp(54px,8vw,96px);line-height:.9;letter-spacing:-.05em;text-shadow:0 3px 0 #000,0 0 30px #fff2}
.tagline{position:relative;color:var(--yellow);font-weight:1000;letter-spacing:.14em}
.status-line{margin:22px 0}.status-line b{animation:blink .7s steps(1) infinite}
.connect-key{position:relative;border:0;border-radius:10px;padding:18px 36px;background:linear-gradient(180deg,#ff4a50,#c31118);color:white;font-weight:1000;cursor:pointer;box-shadow:0 9px 0 #6c070b,0 18px 45px #0009,0 0 0 1px #ff777c inset;transition:.2s}
.connect-key:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.12);box-shadow:0 12px 0 #6c070b,0 24px 60px #000,0 0 30px #ff313844}
.connect-key:active{transform:translateY(5px);box-shadow:0 4px 0 #6c070b}
.connect-key span{display:block;font-size:19px}.connect-key small{display:block;font-size:10px;letter-spacing:.16em}
.safety,.back{position:relative;color:#abd7b9;font-size:12px}.back{display:inline-block;margin-top:12px}
.orientation-modal{width:min(980px,calc(100% - 30px));max-height:92vh;padding:0;border:0;border-radius:24px;background:transparent;color:white}.orientation-modal::backdrop{background:#000c;backdrop-filter:blur(12px)}
.orientation-card{position:relative;padding:30px;border:1px solid #3a4657;border-radius:22px;background:linear-gradient(145deg,#17202c,#080b10);box-shadow:0 30px 100px #000}.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:white;font-size:30px}.orientation-logo{width:70px}.eyebrow{color:var(--yellow);font-size:11px;letter-spacing:.16em;font-weight:900}.orientation-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.orientation-form label{display:grid;gap:7px;font-weight:800;font-size:12px}.wide{grid-column:1/-1}input,textarea,select{width:100%;padding:13px;border:1px solid #45566c;border-radius:8px;background:#0a0e14;color:white}.submit-badge{padding:15px;border:0;border-radius:8px;background:linear-gradient(180deg,#ff4148,#b71319);color:white;font-weight:1000}.nft-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:18px 0}.nft-option{padding:8px;border:2px solid transparent;border-radius:12px;background:#0b1119;color:white}.nft-option.selected{border-color:var(--yellow)}.nft-option img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.form-status{color:var(--yellow)}
@keyframes float{50%{transform:translateY(-8px)}}@keyframes pulse{50%{opacity:.5;transform:translateX(-50%) scale(1.15)}}@keyframes blink{50%{opacity:0}}@keyframes logoPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
@media(max-width:640px){.login-stage{padding:14px}.terminal-shell{border-width:7px;border-radius:20px}.terminal-screen{min-height:540px;padding:38px 18px}.terminal-bar{font-size:9px}.orientation-form{grid-template-columns:1fr}.wide{grid-column:auto}}


/* ===== V16: MAXI MART EMPLOYEE FRONT DOOR ===== */
[hidden]{display:none!important}
.employee-store-gate{
  position:fixed;inset:0;z-index:40;overflow:hidden;background:#020202;display:grid;place-items:center;transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1),filter .85s ease;
}
.employee-store-gate.is-opening{opacity:0;transform:scale(1.08);filter:blur(8px);pointer-events:none}
.employee-store-gate>img{width:100%;height:100%;object-fit:cover;object-position:center;animation:storeGateBreath 9s ease-in-out infinite alternate}
.employee-store-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.08) 48%,rgba(0,0,0,.78)),radial-gradient(circle at center,transparent 26%,rgba(0,0,0,.52) 100%)}
.employee-store-copy{position:absolute;left:50%;bottom:clamp(28px,7vh,78px);width:min(650px,calc(100% - 28px));transform:translateX(-50%);text-align:center;filter:drop-shadow(0 12px 30px #000)}
.employee-store-copy p{margin:0 0 8px;color:#ffdf55;font:900 11px/1.2 monospace;letter-spacing:.22em}
.employee-store-copy h1{margin:0 0 18px;font-size:clamp(42px,7vw,88px);line-height:.9;color:#fff7df;text-shadow:0 4px 0 #000,0 0 30px rgba(255,49,56,.5)}
.employee-store-copy button{width:min(520px,100%);padding:18px 28px;border:2px solid #ffd84d;border-radius:8px;background:linear-gradient(180deg,rgba(16,18,21,.92),rgba(2,3,4,.94));color:#ffd84d;font:1000 clamp(17px,2vw,24px)/1 Inter,Arial,sans-serif;letter-spacing:.12em;cursor:pointer;box-shadow:0 10px 0 #5a4300,0 22px 60px #000,0 0 28px rgba(255,216,77,.2);transition:.2s}
.employee-store-copy button:hover,.employee-store-copy button:focus-visible{transform:translateY(-4px);color:#fff;background:linear-gradient(180deg,#f13b42,#ad1117);border-color:#fff;box-shadow:0 14px 0 #68070b,0 28px 70px #000,0 0 38px rgba(255,49,56,.4)}
.employee-store-copy small{display:block;margin-top:14px;color:rgba(255,255,255,.72);font:700 10px monospace;letter-spacing:.12em}
.login-stage.is-live{animation:terminalArrival .8s cubic-bezier(.2,.8,.2,1)}
@keyframes storeGateBreath{to{transform:scale(1.035)}}
@keyframes terminalArrival{from{opacity:0;transform:scale(.92) translateY(20px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:700px){.employee-store-gate>img{object-position:center}.employee-store-copy{bottom:max(24px,env(safe-area-inset-bottom))}.employee-store-copy h1{font-size:46px}.employee-store-copy button{padding:15px 18px}}
