:root{
  color-scheme:dark;
  --ink:#070504;
  --ink-2:#0b0908;
  --panel:rgba(18,14,12,.62);
  --panel-strong:rgba(12,10,9,.88);
  --hairline:rgba(226,190,105,.16);
  --hairline-strong:rgba(226,190,105,.32);
  --gold-1:#efd486;
  --gold-2:#c99a3f;
  --gold-3:#71501b;
  --paper:#f5f0e5;
  --muted:#aaa095;
  --muted-2:#746c63;
  --danger:#f09a9a;
  --success:#d9c47f;
  --shadow:0 38px 100px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body,#login-root{margin:0;min-height:100%;background:var(--ink)}
body{min-height:100svh;color:var(--paper);font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
::selection{background:var(--gold-2);color:#150f07}

.boot-shell{min-height:100svh;display:grid;place-items:center;align-content:center;gap:14px;color:var(--muted);background:var(--ink)}
.boot-mark{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--hairline-strong);color:var(--gold-1);font-weight:900;letter-spacing:.12em}
.noscript-card{position:fixed;inset:auto 20px 20px;z-index:50;padding:14px 16px;border:1px solid var(--hairline);background:#120e0c;color:var(--paper);text-align:center}

.login-page{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:var(--ink)}
.ember-canvas,.glow-field,.vignette,.grain{position:fixed;inset:0;pointer-events:none}
.ember-canvas{width:100%;height:100%;z-index:0;opacity:.4}
.glow-field{z-index:0;background:radial-gradient(560px 420px at var(--gx,38%) var(--gy,30%),rgba(239,212,134,.15),transparent 60%),radial-gradient(900px 700px at 8% 100%,rgba(113,80,27,.14),transparent 65%),radial-gradient(700px 600px at 100% 28%,rgba(146,50,37,.09),transparent 60%)}
.vignette{z-index:1;background:radial-gradient(120% 92% at 50% 28%,transparent 38%,rgba(0,0,0,.58) 100%)}
.grain{z-index:1;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.login-shell{position:relative;z-index:3;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(420px,.84fr)}
.hero-pane{position:relative;display:flex;align-items:center;min-width:0;overflow:hidden;padding:5vh clamp(34px,6vw,92px);border-right:1px solid var(--hairline)}
.hero-inner{position:relative;z-index:3;max-width:660px}
.eyebrow{margin:0 0 18px;color:var(--gold-1);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.eyebrow::before{content:'—  ';color:var(--gold-3)}
.hero-title{margin:0;line-height:.84;letter-spacing:.005em;text-shadow:0 3px 42px rgba(0,0,0,.55)}
.hero-title .los{display:block;font-family:'Anton','Arial Narrow',sans-serif;font-size:clamp(62px,8.4vw,128px);font-weight:400;text-transform:uppercase}
.hero-title .cartel{display:block;margin-top:.08em;font-family:'Playfair Display',Georgia,serif;font-size:clamp(54px,7vw,108px);font-style:italic;font-weight:700;letter-spacing:-.045em;background:linear-gradient(100deg,var(--gold-3),var(--gold-1) 44%,#fae8b5 53%,var(--gold-1) 61%,var(--gold-3));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s linear 2s infinite}
.hero-copy{max-width:540px;margin:28px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.hero-rule{display:flex;align-items:center;gap:14px;margin-top:34px;color:var(--muted-2);font-size:10px;font-weight:800;letter-spacing:.25em;text-transform:uppercase}
.hero-rule::before{content:'';width:54px;height:1px;background:linear-gradient(90deg,var(--gold-2),transparent)}

.city-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.city-haze{position:absolute;right:-10%;bottom:8%;width:58%;height:54%;background:radial-gradient(circle at 50% 70%,rgba(187,68,45,.11),transparent 62%);filter:blur(8px)}
.skyline{position:absolute;left:-2%;right:-2%;bottom:0;height:26%;background:#090706;opacity:.96;clip-path:polygon(0 62%,4% 62%,4% 42%,8% 42%,8% 70%,12% 70%,12% 30%,18% 30%,18% 58%,22% 58%,22% 46%,29% 46%,29% 72%,35% 72%,35% 24%,41% 24%,41% 64%,47% 64%,47% 38%,52% 38%,52% 72%,59% 72%,59% 34%,64% 34%,64% 61%,71% 61%,71% 48%,78% 48%,78% 70%,84% 70%,84% 28%,91% 28%,91% 60%,96% 60%,96% 43%,100% 43%,100% 100%,0 100%)}
.skyline::after{content:'';position:absolute;left:10%;right:8%;bottom:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(180,57,42,.7),rgba(201,154,63,.46),transparent);box-shadow:0 0 30px rgba(180,57,42,.35);transform:rotate(-2deg)}

.access-pane{display:flex;align-items:center;justify-content:center;min-width:0;padding:4vh clamp(22px,4vw,60px);background:rgba(0,0,0,.16)}
.access-stage{width:100%;max-width:440px}
.auth-card{position:relative;padding:clamp(24px,3.2vh,38px) 30px;background:var(--panel);border:1px solid var(--hairline);box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%)}
.auth-card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-1),transparent);opacity:.55}
.auth-eyebrow{margin:0 0 10px;color:var(--gold-1);font-size:10px;font-weight:800;letter-spacing:.27em;text-transform:uppercase}
.auth-heading h2,.gate-view h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:clamp(29px,3vw,38px);font-style:italic;font-weight:700;letter-spacing:-.02em}
.auth-intro{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}

.mode-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:24px 0 20px;padding:4px;border:1px solid var(--hairline);background:rgba(0,0,0,.15)}
.mode-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:rgba(239,212,134,.08);border:1px solid var(--hairline);transform:translateX(0);transition:transform .34s cubic-bezier(.16,1,.3,1)}
.mode-switch.register .mode-pill{transform:translateX(100%)}
.mode-switch button{position:relative;z-index:1;border:0;background:transparent;padding:10px 8px;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:color .2s ease}
.mode-switch button.active{color:var(--paper)}
.mode-switch button:focus-visible,.password-toggle:focus-visible,.submit-btn:focus-visible,.text-btn:focus-visible{outline:2px solid var(--gold-1);outline-offset:2px}

.auth-form{display:grid;gap:13px;margin-top:18px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:block}
.field-label{display:block;margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.03em}
.input-shell{position:relative;display:flex;align-items:center;border:1px solid var(--hairline);background:rgba(0,0,0,.24);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.input-shell:focus-within{border-color:var(--gold-2);background:rgba(239,212,134,.045);box-shadow:0 0 0 3px rgba(239,212,134,.08)}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:var(--muted-2);pointer-events:none;transition:color .2s ease}
.input-shell:focus-within .input-icon{color:var(--gold-1)}
.icon{display:block;width:17px;height:17px}
input{width:100%;height:49px;border:0;outline:0;background:transparent;color:var(--paper);padding:0 44px 0 13px;font-size:14px}
input.has-icon{padding-left:42px}
input::placeholder{color:#655d55}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted-2);cursor:pointer}
.password-toggle:hover{color:var(--gold-1)}
.field-hint{display:block;margin-top:6px;color:var(--muted-2);font-size:10.5px}

.submit-btn{position:relative;overflow:hidden;width:100%;margin-top:3px;padding:14px 17px;border:0;background:linear-gradient(100deg,var(--gold-3),var(--gold-1) 43%,#f8e4ac 52%,var(--gold-1) 61%,var(--gold-2));background-size:260% 100%;background-position:0 0;color:#1a1206;box-shadow:0 14px 30px rgba(201,154,63,.16);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:800;cursor:pointer;transition:background-position .55s ease,transform .15s ease,box-shadow .25s ease}
.submit-btn:not(:disabled):hover{background-position:100% 0;box-shadow:0 17px 38px rgba(201,154,63,.28)}
.submit-btn:not(:disabled):active{transform:scale(.987)}
.submit-btn:disabled{opacity:.65;cursor:wait}
.submit-arrow{display:grid;place-items:center;transition:transform .25s ease}
.submit-btn:hover .submit-arrow{transform:translateX(4px)}

.status-space{min-height:17px}
.status-message{min-height:17px;text-align:center;font-size:11.5px;line-height:1.45;color:var(--muted)}
.status-message.bad{color:var(--danger)}
.status-message.good{color:var(--success)}
.status-message.working{color:var(--muted)}
.text-btn{justify-self:center;border:0;background:transparent;padding:5px;color:var(--gold-1);font-size:12px;cursor:pointer}
.text-btn:hover{text-decoration:underline}

.gate-view{text-align:center}
.gate-icon{width:48px;height:48px;margin:0 auto 18px;display:grid;place-items:center;border:1px solid var(--hairline-strong);color:var(--gold-1);background:rgba(239,212,134,.04)}
.gate-view .auth-form{text-align:left;margin-top:22px}
.gate-view .text-btn{display:block;margin:0 auto;text-align:center}

.auth-bottom{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--hairline);color:var(--muted-2);font-size:10.5px;line-height:1.5}
.tiny-shield{flex:0 0 auto;color:var(--gold-3);margin-top:1px}
.mobile-brand{display:none}

@keyframes sheen{0%{background-position:200% 0}100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.ember-canvas{display:none}}

@media (max-width:900px){
  body{overflow-y:auto}
  .login-page{overflow:visible}
  .login-shell{display:flex;flex-direction:column;min-height:100svh}
  .access-pane{order:-1;min-height:auto;padding:34px 20px 26px;border-bottom:1px solid var(--hairline)}
  .access-stage{max-width:520px}
  .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#d7d0c6;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .mobile-seal{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hairline-strong);color:var(--gold-1);font-size:10px;letter-spacing:.08em}
  .hero-pane{order:1;min-height:280px;padding:32px 22px 52px;border-right:0;align-items:flex-start}
  .hero-title .los{font-size:clamp(48px,12vw,74px)}
  .hero-title .cartel{font-size:clamp(42px,11vw,66px)}
  .hero-copy{margin-top:18px;font-size:14px;line-height:1.6;max-width:480px}
  .hero-rule{margin-top:20px}
  .skyline{height:38%}
}

@media (max-width:560px){
  .access-pane{padding:22px 14px 20px}
  .auth-card{padding:24px 18px}
  .field-grid{grid-template-columns:1fr}
  input{font-size:16px}
  .mode-switch{margin-top:20px}
  .hero-pane{min-height:245px;padding:26px 18px 44px}
  .hero-copy{display:none}
  .hero-rule{font-size:9px}
}
