.auth-gate{
  display:none;
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  box-sizing:border-box;
  overflow:hidden;
  align-items:center;
  justify-items:end;
  padding:clamp(24px,5vw,76px);
  background-color:#06070d;
  background-image:
    linear-gradient(90deg,rgba(4,5,10,.08) 0 42%,rgba(4,5,10,.34) 70%,rgba(4,5,10,.58) 100%),
    linear-gradient(180deg,rgba(2,3,8,.08),rgba(2,3,8,.2)),
    url("assets/login/login-background.png");
  background-image:
    linear-gradient(90deg,rgba(4,5,10,.08) 0 42%,rgba(4,5,10,.34) 70%,rgba(4,5,10,.58) 100%),
    linear-gradient(180deg,rgba(2,3,8,.08),rgba(2,3,8,.2)),
    image-set(
      url("assets/login/login-background.webp") type("image/webp"),
      url("assets/login/login-background.png") type("image/png")
    );
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.auth-gate.active{display:grid}
.app-shell[hidden]{display:none!important}
.auth-gate::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(180deg,transparent 60%,rgba(2,3,8,.24));
  mask-image:linear-gradient(110deg,transparent 0 38%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.42));
}
.auth-card{
  --rpg-notch:10px;
  position:relative;
  width:min(100%,440px);
  max-height:calc(100svh - 48px);
  overflow:auto;
  box-sizing:border-box;
  padding:clamp(27px,3vw,38px);
  border:1px solid color-mix(in srgb,var(--rpg-highlight,var(--lime)) 24%,var(--rpg-border,var(--line)));
  border-radius:0;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 24%),
    var(--rpg-dither),
    rgba(10,13,21,.91);
  box-shadow:
    inset 0 0 0 4px rgba(5,7,12,.74),
    inset 0 0 0 5px rgba(136,160,163,.18),
    inset 0 1px 0 rgba(226,239,232,.12);
  clip-path:var(--rpg-step-shape,polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px));
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.45));
  scrollbar-color:var(--rpg-border,var(--line)) transparent;
}
.auth-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:7px;
  border:1px solid rgba(173,194,194,.12);
  clip-path:inherit;
}
.auth-card>*{position:relative;z-index:1}
.auth-gate .auth-brand-pair{
  gap:14px;
  margin:0 0 26px;
  padding:0 0 21px;
  border-bottom-color:rgba(157,180,181,.2);
}
.auth-gate .auth-brand-pair .brand{margin:0;padding:0}
.auth-gate .auth-brand-divider{background:rgba(157,180,181,.24)}
.auth-gate .auth-den-logo{filter:drop-shadow(0 3px 7px rgba(0,0,0,.38))}
.auth-card h1{
  margin:0 0 9px;
  font-size:clamp(29px,3vw,38px);
  line-height:1.04;
  text-shadow:0 3px 0 rgba(0,0,0,.48);
}
.auth-card>p{margin:0 0 24px;color:#c0c6d0;font-size:13px;line-height:1.65}
.auth-form{display:grid;gap:14px}
.auth-form label{display:grid;gap:7px;color:#c0c6d0;font:500 10px 'DM Mono';letter-spacing:.45px;text-transform:uppercase}
.auth-form label span{text-transform:none}
.auth-form input,.auth-form textarea,.auth-form select{
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  border:1px solid rgba(131,154,158,.46);
  border-radius:3px;
  outline:none;
  background:rgba(4,7,12,.82);
  color:var(--text);
  padding:11px 12px;
  font:500 14px Manrope;
}
.auth-form textarea{min-height:88px;resize:vertical}
.auth-form input:focus,.auth-form textarea:focus,.auth-form select:focus{
  border-color:var(--accent-blue);
  box-shadow:0 0 0 3px var(--accent-blue-wash),inset 0 0 0 1px rgba(139,208,255,.18);
}
.auth-form label.auth-show-password{display:flex;align-items:center;gap:9px;min-height:28px;cursor:pointer;text-transform:none}
.auth-form .auth-show-password input{width:18px;min-height:18px;margin:0;padding:0;accent-color:var(--accent-blue)}
.auth-form .auth-show-password span{color:#cbd3dc;font:600 12px Manrope;letter-spacing:0;text-transform:none}
.auth-form button,.auth-card button{
  min-height:46px;
  border:1px solid color-mix(in srgb,var(--accent-blue) 74%,white);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(56,168,255,.17),rgba(56,168,255,.07));
  color:var(--accent-blue-soft);
  cursor:pointer;
  padding:11px 14px;
  font:800 12px Manrope;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.3);
}
.auth-form button:hover,.auth-card button:hover{background:var(--accent-blue);color:#071019}
.auth-form button:focus-visible,.auth-card button:focus-visible{outline:3px solid var(--accent-blue-wash);outline-offset:3px}
.auth-form button:disabled,.auth-card button:disabled{cursor:wait;opacity:.62}
.auth-actions{display:grid;gap:9px}
.auth-form button.auth-secondary{
  border-color:rgba(157,180,181,.42);
  background:rgba(9,14,21,.72);
  color:#dce4e7;
}
.auth-form button.auth-secondary:hover{border-color:var(--accent-blue);background:rgba(56,168,255,.12);color:var(--accent-blue-soft)}
.auth-form button.auth-link-action{
  min-height:40px;
  border-color:transparent;
  background:transparent;
  color:#b9d9ec;
  box-shadow:none;
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-form button.auth-link-action:hover{background:rgba(56,168,255,.08);color:#e6f5ff}
.auth-form small,.auth-form p,.auth-card small{margin:0;color:#aeb5c2;font-size:11px;line-height:1.5}
.auth-form #auth-message:not(:empty){padding:9px 10px;border-left:2px solid var(--accent-blue);background:rgba(56,168,255,.08);color:#d8e9f4}
.auth-card.no-access button{margin-top:16px;border-color:var(--line);color:var(--muted)}
.auth-card.onboarding-card{width:min(100%,520px)}

@media(max-width:900px){
  .auth-gate{
    align-items:end;
    justify-items:center;
    padding:clamp(20px,4vw,42px);
    background-position:38% center;
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.04) 0 28%,rgba(3,4,9,.36) 72%,rgba(3,4,9,.62)),
      url("assets/login/login-background.png");
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.04) 0 28%,rgba(3,4,9,.36) 72%,rgba(3,4,9,.62)),
      image-set(
        url("assets/login/login-background.webp") type("image/webp"),
        url("assets/login/login-background.png") type("image/png")
      );
  }
  .auth-card{max-height:calc(100svh - 40px)}
}
@media(max-height:800px) and (min-width:901px){
  .auth-gate{padding:24px}
  .auth-card{max-height:calc(100svh - 48px)}
}
@media(max-width:560px){
  .auth-gate{
    padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
    background-position:34% center;
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.05) 0 20%,rgba(3,4,9,.44) 58%,rgba(3,4,9,.72)),
      url("assets/login/login-background.png");
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.05) 0 20%,rgba(3,4,9,.44) 58%,rgba(3,4,9,.72)),
      image-set(
        url("assets/login/login-background.webp") type("image/webp"),
        url("assets/login/login-background.png") type("image/png")
      );
  }
  .auth-card{--rpg-notch:8px;max-height:calc(100svh - 28px);padding:25px 22px}
  .auth-card h1{font-size:30px}
  .auth-gate .auth-brand-pair{gap:10px;margin-bottom:21px;padding-bottom:17px}
  .auth-gate .auth-brand-pair .brand-logo{width:40px}
  .auth-gate .auth-brand-pair .brand>span{font-size:20px}
  .auth-gate .auth-den-logo{width:70px;max-width:25%}
}
@media(max-height:680px){
  .auth-gate{align-items:center}
  .auth-card{max-height:calc(100svh - 24px);padding-top:23px;padding-bottom:23px}
  .auth-gate .auth-brand-pair{margin-bottom:18px;padding-bottom:15px}
  .auth-card>p{margin-bottom:18px}
}
@media(prefers-reduced-transparency:reduce){
  .auth-card{background:#0b0f17}
}

/* The active authentication gate is a branded entry surface, independent of the app theme. */
html[data-theme] .auth-gate.active{
  --text:#f6f7fb;
  --text-primary:#f6f7fb;
  --text-secondary:#c0c6d0;
  --text-muted:#aeb5c2;
  --border-primary:rgba(131,154,158,.46);
  --surface-input:rgba(4,7,12,.82);
  --line:#363746;
  --muted:#aeb5c2;
  --accent-blue:#38a8ff;
  --accent-blue-soft:#8bd0ff;
  --accent-blue-wash:rgba(56,168,255,.14);
  --rpg-border:#53626b;
  --rpg-highlight:#9ed8ff;
  --rpg-dither:radial-gradient(circle at 1px 1px,rgba(154,193,201,.055) 0 1px,transparent 1.2px) 0 0/8px 8px;
  color-scheme:dark;
  color:#f6f7fb;
  background-color:#06070d;
  background-image:
    linear-gradient(90deg,rgba(4,5,10,.08) 0 42%,rgba(4,5,10,.34) 70%,rgba(4,5,10,.58) 100%),
    linear-gradient(180deg,rgba(2,3,8,.08),rgba(2,3,8,.2)),
    image-set(
      url("assets/login/login-background.webp") type("image/webp"),
      url("assets/login/login-background.png") type("image/png")
    );
}
html[data-theme] .auth-gate.active::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(180deg,transparent 60%,rgba(2,3,8,.24));
  mask-image:linear-gradient(110deg,transparent 0 38%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.42));
}
html[data-theme] .auth-gate.active .auth-card{
  color:#f6f7fb;
  border-color:color-mix(in srgb,var(--rpg-highlight) 24%,var(--rpg-border));
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 24%),
    var(--rpg-dither),
    rgba(10,13,21,.91);
  box-shadow:
    inset 0 0 0 4px rgba(5,7,12,.74),
    inset 0 0 0 5px rgba(136,160,163,.18),
    inset 0 1px 0 rgba(226,239,232,.12);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.45));
}
html[data-theme] .auth-gate.active .auth-card::after{border-color:rgba(173,194,194,.12)}
html[data-theme] .auth-gate.active .auth-card h1{color:#f6f7fb;text-shadow:0 3px 0 rgba(0,0,0,.48)}
html[data-theme] .auth-gate.active .auth-card>p,
html[data-theme] .auth-gate.active .auth-form label{color:#c0c6d0}
html[data-theme] .auth-gate.active .auth-form small,
html[data-theme] .auth-gate.active .auth-form p,
html[data-theme] .auth-gate.active .auth-card small{color:#aeb5c2}
html[data-theme] .auth-gate.active .auth-form input,
html[data-theme] .auth-gate.active .auth-form textarea,
html[data-theme] .auth-gate.active .auth-form select{
  border-color:rgba(131,154,158,.46);
  background:rgba(4,7,12,.82);
  color:#f6f7fb;
}
html[data-theme] .auth-gate.active .auth-form :where(input,textarea)::placeholder{color:#8995a4;opacity:1}
html[data-theme] .auth-gate.active .auth-form select option{background:#0b0f17;color:#f6f7fb}
html[data-theme] .auth-gate.active .auth-form .auth-show-password span{color:#cbd3dc}
html[data-theme] .auth-gate.active .auth-form button.auth-secondary{border-color:rgba(157,180,181,.42);background:rgba(9,14,21,.72);color:#dce4e7}
html[data-theme] .auth-gate.active .auth-form button.auth-secondary:hover{border-color:var(--accent-blue);background:rgba(56,168,255,.12);color:var(--accent-blue-soft)}
html[data-theme] .auth-gate.active .auth-form button.auth-link-action{background:transparent;color:#b9d9ec}
html[data-theme] .auth-gate.active .auth-form button.auth-link-action:hover{background:rgba(56,168,255,.08);color:#e6f5ff}
html[data-theme] .auth-gate.active .auth-form #auth-message:not(:empty){background:rgba(56,168,255,.08);color:#d8e9f4}

@media(max-width:900px){
  html[data-theme] .auth-gate.active{
    background-position:38% center;
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.04) 0 28%,rgba(3,4,9,.36) 72%,rgba(3,4,9,.62)),
      image-set(
        url("assets/login/login-background.webp") type("image/webp"),
        url("assets/login/login-background.png") type("image/png")
      );
  }
}
@media(max-width:560px){
  html[data-theme] .auth-gate.active{
    background-position:34% center;
    background-image:
      linear-gradient(180deg,rgba(3,4,9,.05) 0 20%,rgba(3,4,9,.44) 58%,rgba(3,4,9,.72)),
      image-set(
        url("assets/login/login-background.webp") type("image/webp"),
        url("assets/login/login-background.png") type("image/png")
      );
  }
}
@media(prefers-reduced-transparency:reduce){
  html[data-theme] .auth-gate.active .auth-card{background:#0b0f17}
}

/* Coach-shell identity pilot: keep the existing cinematic art and theme-invariant
   dark authentication palette; simplify only the operational foreground. */
#auth-gate.active .auth-card{clip-path:none;border-radius:8px;border:1px solid rgba(131,154,158,.38);background:rgba(10,13,21,.95);box-shadow:0 16px 48px rgba(0,0,0,.3);filter:none;padding:clamp(24px,3vw,40px)}
#auth-gate.active .auth-card::after{display:none}
#auth-gate.active .auth-card h1{font:800 calc(32px * var(--text-display-scale))/1.2 var(--font-body,Manrope,Arial,sans-serif);letter-spacing:-.7px;text-shadow:none;overflow-wrap:anywhere}
#auth-gate.active .auth-card>p{font-size:calc(15px * var(--text-reading-scale));line-height:1.65}
#auth-gate.active .auth-form{gap:20px}
#auth-gate.active .auth-form label{font:600 calc(14px * var(--text-reading-scale))/1.5 var(--font-body,Manrope);text-transform:none;letter-spacing:0}
#auth-gate.active .auth-form :is(input:not([type=checkbox]),select,textarea){min-height:48px;border-radius:6px;line-height:1.5}
#auth-gate.active .auth-card :is(button,a.brand){min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;box-shadow:none;font-size:calc(14px * var(--text-chrome-scale));white-space:normal}
#auth-gate.active .auth-form button[type=submit]{background:var(--accent-blue);color:#071019;border-color:var(--accent-blue)}
#auth-gate.active .auth-form :is(small,p){font-size:calc(13px * var(--text-metadata-scale));line-height:1.6}
#auth-gate.active .auth-card :is(button,a[href]):focus-visible{outline:3px solid #8bd0ff;outline-offset:3px}
#auth-gate.active .auth-form .auth-show-password{min-height:44px}
#auth-gate.active .auth-card>button{width:100%}
@media(max-width:560px){#auth-gate.active .auth-card{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){#auth-gate.active *{animation:none!important;transition:none!important}}
#auth-gate.active .auth-form :is(input,select,textarea):focus-visible{outline:3px solid #8bd0ff;outline-offset:2px}