/* Auth preview – shared HNTv3 public design tokens, Exo 2 and button language. */
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scrollbar-width:none}html::-webkit-scrollbar{display:none}
body.auth-body{min-height:100svh;margin:0;background:var(--black);color:var(--body-text);font-family:"Exo 2",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.auth-body button,.auth-body input{font:inherit}
.auth-body a{color:inherit;text-decoration:none}
.auth-body :is(a,button,input):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.auth-body [hidden]{display:none!important}
.auth-skip{position:absolute;left:-9999px;top:10px;z-index:100;padding:10px 14px;background:var(--accent);color:var(--accent-ink)!important}
.auth-skip:focus{left:12px}
.auth-shell{position:relative;min-height:100svh;isolation:isolate;display:flex;flex-direction:column;overflow:hidden}
.auth-backdrop{position:fixed;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(13,13,13,.94),rgba(13,13,13,.48) 38%,rgba(13,13,13,.51) 60%,rgba(13,13,13,.94)),linear-gradient(180deg,rgba(13,13,13,.51),rgba(13,13,13,.24) 40%,#0d0d0d 97%),url("../hntv3-landing/assets/profile-hero-bayou.jpg") center 45%/cover no-repeat;opacity:.72;pointer-events:none}
.auth-haze{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(131,201,148,.055),transparent 47%),linear-gradient(90deg,#0d0d0d 0%,transparent 15%,transparent 85%,#0d0d0d)}
.auth-header{min-height:83px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(20px,4.3vw,74px);z-index:10}
.auth-logo{display:flex;align-items:center;gap:11px;line-height:1}
.auth-logo-mark{font-weight:800;color:var(--title);font-size:27px;letter-spacing:-2.4px}
.auth-logo-mark b{color:var(--logo-accent);font-weight:700}
.auth-logo-word{font-size:13px;letter-spacing:2px;font-weight:600;color:var(--logo-text)}
.auth-header-actions{display:flex;align-items:center;gap:14px}
.auth-head-link{font-weight:600;font-size:12px;color:var(--subtle-text)!important;transition:color .2s}
.auth-head-link:hover{color:var(--accent)!important}
.auth-language{position:relative}
.auth-language-trigger{display:flex;align-items:center;gap:9px;min-width:83px;justify-content:center;background:var(--surface-neutral);border:1px solid var(--panel-border);color:var(--title);padding:10px 12px;border-radius:9px;cursor:pointer;font-size:12px;font-weight:700}
.auth-language-trigger svg{width:15px;height:15px}
.auth-language-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--widget);border:1px solid var(--panel-border);border-radius:10px;padding:6px;width:154px;box-shadow:0 18px 42px #0009;z-index:15}
.auth-language-menu button{display:block;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;color:var(--body-text);border-radius:7px;cursor:pointer;font-size:12px}
.auth-language-menu button:hover,.auth-language-menu button[aria-pressed=true]{background:var(--filter-selected-bg);color:var(--accent)}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:16px 20px 35px}
.auth-main[data-page=register]{padding-top:4px;padding-bottom:26px}
.auth-stage{width:min(100%,460px);margin:0 auto}
.auth-intro{text-align:center;margin:0 0 24px}
.auth-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--logo-accent);font-size:10px;letter-spacing:2.1px;font-weight:700;text-transform:uppercase;margin:0 0 13px}
.auth-eyebrow::before{content:"";height:1px;width:25px;background:var(--logo-accent)}
.auth-intro h1{color:var(--title);font-weight:700;font-size:clamp(27px,3vw,34px);letter-spacing:-.85px;line-height:1.2;margin:0 0 9px}
.auth-intro p{color:var(--subtle-text);font-size:13px;line-height:1.55;margin:0 auto;max-width:420px}
.auth-panel{padding:28px;border:1px solid color-mix(in srgb,var(--panel-border) 72%,transparent);background:color-mix(in srgb,var(--surface-deep) 87%,transparent);border-radius:var(--hnt-radius-dialog);box-shadow:0 24px 75px rgba(0,0,0,.22);backdrop-filter:blur(18px)}
.auth-field{position:relative;display:block;margin-bottom:12px}
.auth-field-label{display:block;color:var(--control-fg);font-size:11px;margin-bottom:7px;font-weight:600}
.auth-input-wrap{display:flex;position:relative;align-items:center}
.auth-input-icon{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--subtle-text);stroke-width:1.65;pointer-events:none}
.auth-input{display:block;width:100%;height:46px;color:var(--title);background:var(--surface-input);border:1px solid var(--control-border);border-radius:9px;padding:0 44px 0 43px;outline:0;font-size:13px;transition:border-color .2s,background .2s}
.auth-input::placeholder{color:#9e9f9e;opacity:1}
.auth-input:hover{border-color:var(--dialog-border)}
.auth-input:focus{border-color:var(--accent);background:var(--widget)}
.auth-input[aria-invalid=true]{border-color:#cc9387}
.auth-input-alone{padding:0 14px}
.auth-input-action{position:absolute;right:8px;top:5px;width:36px;height:36px;display:grid;place-items:center;background:transparent;border:0;border-radius:7px;color:var(--subtle-text);cursor:pointer}
.auth-input-action:hover{color:var(--accent);background:var(--surface-control)}
.auth-input-action svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none}
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 20px;font-size:11.5px}
.auth-check{display:inline-flex;align-items:flex-start;gap:10px;color:var(--control-fg);cursor:pointer;line-height:1.6;font-size:11.5px}
.auth-check input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--accent);margin:0;cursor:pointer}
.auth-small-link{font-size:11.5px;font-weight:700;color:var(--accent)!important}
.auth-small-link:hover{text-decoration:underline}
.auth-btn{width:100%;min-height:46px;padding:11px 16px;background:var(--accent);border:1px solid var(--accent);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--accent-ink)!important;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.auth-btn:hover{background:var(--filter-selected-fg);transform:translateY(-1px)}
.auth-btn:active{transform:translateY(0)}
.auth-btn.secondary{background:var(--surface-neutral);border-color:var(--panel-border);color:var(--title)!important}
.auth-btn.secondary:hover{background:var(--surface-control);border-color:var(--accent)}
.auth-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.auth-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.auth-divider{display:flex;align-items:center;gap:11px;text-align:center;color:var(--subtle-text);font-size:10px;font-weight:700;letter-spacing:1px;margin:22px 0 18px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--panel-border)}
.auth-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.auth-provider{min-height:43px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--surface-neutral);border:1px solid var(--panel-border);color:var(--body-text);border-radius:9px;cursor:pointer;font-size:11.5px;font-weight:700;transition:border-color .2s,background .2s}
.auth-provider:hover{border-color:var(--accent);background:var(--surface-control)}
.auth-provider svg{width:17px;height:17px;flex:0 0 auto}
.auth-provider .google{color:#e9ba4c}.auth-provider .discord{color:#899eec}.auth-provider .twitch{color:#af7fda}.auth-provider .microsoft{color:#8dbca6}
.auth-switch{text-align:center;margin:20px 0 0;font-size:12px;color:var(--subtle-text)}
.auth-switch a{margin-left:5px;color:var(--accent);font-weight:700}
.auth-switch a:hover{text-decoration:underline}
.auth-text-center{text-align:center}
.auth-below{margin-top:17px}
.auth-note{color:var(--subtle-text);font-size:11px;line-height:1.55;padding:12px 13px;background:color-mix(in srgb,var(--surface-control) 44%,transparent);border:1px solid var(--panel-border);border-radius:9px;display:flex;gap:10px;align-items:flex-start;margin:5px 0 17px}
.auth-note svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.7;flex:none}
.auth-password-rules{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 16px;font-size:10.5px;color:var(--subtle-text)}
.auth-password-rules span{display:flex;align-items:center;gap:7px}
.auth-password-rules span::before{content:"";display:block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;border:1px solid var(--subtle-text)}
.auth-password-rules span.is-valid{color:var(--filter-selected-fg)}
.auth-password-rules span.is-valid::before{background:var(--accent);border-color:var(--accent)}
.auth-message{margin:0 0 16px;padding:12px;border:1px solid var(--dialog-border);border-radius:9px;color:var(--body-text);background:var(--filter-selected-bg);font-size:12px;line-height:1.5}
.auth-message.is-error{border-color:#a77569;background:#46312b}
.auth-message a{color:var(--accent);text-decoration:underline}
.auth-welcome-emblem{position:relative;margin:0 auto 28px;width:210px;height:210px}
.auth-emblem-ring{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 21%,transparent);border-radius:50%;inset:14px}
.auth-emblem-ring.inner{inset:49px;border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.auth-emblem-core{position:absolute;inset:63px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--panel-border);background:var(--surface-deep);box-shadow:0 0 40px #0007}
.auth-emblem-core span{font-size:29px;font-weight:800;letter-spacing:-2px;color:var(--title)}.auth-emblem-core b{color:var(--logo-accent)}
.auth-emblem-node{position:absolute;width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--control-border);border-radius:50%;background:var(--widget);color:var(--accent);font-size:11px;font-weight:800}
.auth-emblem-node.a{left:88px;top:0}.auth-emblem-node.b{right:7px;top:85px}.auth-emblem-node.c{left:88px;bottom:0}.auth-emblem-node.d{left:7px;top:85px}
.auth-main[data-page=welcome] .auth-stage{width:min(100%,470px)}
.auth-main[data-page=welcome] .auth-panel{padding:25px}
.auth-main[data-page=register] .auth-panel{padding:24px 28px}
.auth-main[data-page=register] .auth-field{margin-bottom:9px}
.auth-main[data-page=register] .auth-intro{margin-bottom:17px}
.auth-main[data-page=register] .auth-divider{margin:17px 0 14px}
.auth-main[data-page=register] .auth-switch{margin-top:14px}
.auth-main[data-page=register] .auth-password-rules{margin:5px 0 15px}
.auth-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:23px 0 17px}
.auth-otp input{min-width:0;width:100%;height:55px;text-align:center;border-radius:9px;border:1px solid var(--control-border);background:var(--surface-input);color:var(--title);font-size:22px;font-weight:700;outline:none}
.auth-otp input:focus{border-color:var(--accent);background:var(--widget)}
.auth-otp-help{margin-bottom:20px;font-size:11px;color:var(--subtle-text);line-height:1.6}
.auth-mode-switch{display:flex;justify-content:center;gap:14px;margin-top:17px;font-size:11.5px}
.auth-mode-switch button{background:none;border:0;color:var(--accent);cursor:pointer;font-weight:700;font-size:11.5px}
.auth-mode-switch button:hover{text-decoration:underline}
.auth-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 19px;align-items:center;min-height:67px;padding:15px 20px 20px;color:var(--subtle-text);font-size:10.5px;position:relative}
.auth-footer a:hover{color:var(--accent)}
.auth-foot-mark{margin-left:9px;opacity:.5;font-size:9px;letter-spacing:1.4px}
@media(min-height:850px){.auth-main[data-page=register]{padding-top:12px;padding-bottom:24px}}
@media(max-width:600px){.auth-header{min-height:72px;padding:12px 20px}.auth-logo-mark{font-size:24px}.auth-logo-word{font-size:11px;letter-spacing:1px}.auth-head-link{display:none}.auth-main{padding:15px 16px 27px;align-items:center}.auth-main[data-page=register]{align-items:flex-start}.auth-panel{padding:21px 18px!important}.auth-welcome-emblem{width:170px;height:170px;margin-bottom:22px}.auth-emblem-core{inset:52px}.auth-emblem-ring.inner{inset:39px}.auth-emblem-node.a,.auth-emblem-node.c{left:69px}.auth-emblem-node.b,.auth-emblem-node.d{top:68px}.auth-intro h1{font-size:27px}.auth-intro p{font-size:12px}.auth-footer{gap:10px 14px;padding:16px 12px 24px;font-size:10px}.auth-foot-mark{display:none}}
@media(max-width:360px){.auth-stage{width:100%}.auth-provider{font-size:10px}.auth-provider svg{width:14px}.auth-password-rules{grid-template-columns:1fr 1fr}.auth-otp{gap:5px}.auth-otp input{height:46px}.auth-options{font-size:10px}.auth-check{font-size:10px}}
@media(prefers-reduced-motion:reduce){.auth-btn,.auth-input,.auth-provider{transition:none}.auth-btn:hover{transform:none}}

/* HNTv3 AUTH / Member orbit – 15.10.2026
   Three concentric circles, 17 independently replaceable avatar slots.
   Decorative preview assets only; never interpreted as currently online members. */
.auth-orbit-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}
.auth-orbit{position:relative;aspect-ratio:1;width:min(100%,520px);flex:0 0 auto;isolation:isolate}
.auth-orbit::before{content:"";position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,rgba(131,201,148,.06),transparent 67%);z-index:-1;pointer-events:none}
.auth-orbit-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--control-border) 59%,transparent);box-shadow:0 0 1px rgba(255,255,255,.03) inset;pointer-events:none}
.auth-orbit-ring.ring-outer{width:93%;height:93%}
.auth-orbit-ring.ring-middle{width:71%;height:71%}
.auth-orbit-ring.ring-inner{width:49%;height:49%}
.auth-orbit-core{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;height:26%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid color-mix(in srgb,var(--logo-accent) 55%,var(--panel-border));background:var(--surface-deep);box-shadow:0 0 0 10px rgba(13,13,13,.10),0 15px 35px rgba(0,0,0,.3)}
.auth-orbit-mark{font-size:clamp(23px,2.6vw,33px);letter-spacing:-2.2px;line-height:1;font-weight:800;color:var(--title)}
.auth-orbit-mark b{color:var(--logo-accent);font-weight:800}
.auth-orbit-word{font-size:10px;color:var(--subtle-text);font-weight:700;letter-spacing:1.35px;white-space:nowrap}
.auth-orbit-avatar{position:absolute;z-index:4;left:var(--node-x);top:var(--node-y);transform:translate(-50%,-50%);width:9.8%;aspect-ratio:1;border-radius:50%;padding:2.5px;overflow:hidden;border:2px solid var(--accent);background:var(--surface-deep);box-shadow:0 4px 13px rgba(0,0,0,.35);transition:transform .22s ease,border-color .22s ease}
.auth-orbit-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--surface-neutral)}
.auth-orbit-caption{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--subtle-text);opacity:.85;white-space:nowrap}
.auth-orbit-caption i{width:3px;height:3px;display:block;border-radius:50%;background:var(--logo-accent)}
@keyframes auth-node-enter{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@media(min-width:1000px){
 .auth-main[data-page=login] .auth-stage{width:min(100%,1130px);display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,460px);gap:0 clamp(30px,5vw,75px);align-items:center}
 .auth-main[data-page=login] .auth-orbit-visual{grid-column:1;grid-row:1 / span 2;justify-self:center;width:100%}
 .auth-main[data-page=login] .auth-intro{grid-column:2;grid-row:1;align-self:end;margin-bottom:22px}
 .auth-main[data-page=login] .auth-panel{grid-column:2;grid-row:2;align-self:start}
 .auth-main[data-page=login] .auth-orbit{width:min(100%,510px)}
}
.auth-main[data-page=welcome] .auth-orbit{width:min(100%,340px)}
.auth-main[data-page=welcome] .auth-orbit-visual{margin-bottom:21px}
.auth-main[data-page=welcome] .auth-orbit-mark{font-size:25px}
.auth-main[data-page=welcome] .auth-orbit-word{font-size:8px;letter-spacing:1px}
@media(min-width:600px) and (max-width:999px){
 .auth-main[data-page=login] .auth-orbit{width:270px}
 .auth-main[data-page=login] .auth-orbit-visual{margin:0 auto 16px}
}
@media(max-width:599px){
 .auth-main[data-page=login] .auth-orbit{width:min(74vw,265px)}
 .auth-main[data-page=welcome] .auth-orbit{width:min(82vw,300px)}
 .auth-orbit-visual{margin:0 auto 14px}
 .auth-main[data-page=welcome] .auth-orbit-visual{margin-bottom:13px}
 .auth-orbit-core{gap:2px}
 .auth-orbit-mark,.auth-main[data-page=welcome] .auth-orbit-mark{font-size:23px}
 .auth-orbit-word,.auth-main[data-page=welcome] .auth-orbit-word{font-size:7px;letter-spacing:.6px}
 .auth-orbit-avatar{border-width:1.5px;padding:1.5px;width:10.7%}
 .auth-orbit-caption{font-size:8px;letter-spacing:1.2px}
}
@media(max-width:360px){
 .auth-main[data-page=login] .auth-orbit{width:min(70vw,226px)}
 .auth-main[data-page=welcome] .auth-orbit{width:min(79vw,260px)}
}
@media(prefers-reduced-motion:reduce){.auth-orbit-avatar{animation:none}}
