/* VEXMIRA v4.0.0 — production navigation, page heroes, account HUD and interaction polish. */
:root{--vx400-line:color-mix(in srgb,var(--vio,#8b5cf6) 30%,rgba(255,255,255,.08));--vx400-glow:rgba(124,83,255,.22)}

/* Header: preserve readable navigation instead of shrinking labels to 8–10px. */
#topbar.vx320-header{min-height:76px!important;height:76px!important;padding:0 clamp(18px,2.1vw,34px)!important;gap:18px!important;border-bottom:1px solid rgba(129,101,255,.28)!important;background:linear-gradient(180deg,rgba(10,13,35,.96),rgba(8,10,29,.92))!important;box-shadow:0 12px 38px rgba(0,0,0,.18),0 1px 0 rgba(141,108,255,.16)!important;backdrop-filter:blur(18px)!important}
#topbar .vx320-brand{min-width:166px!important;gap:12px!important}
#topbar .vx320-brand-mark{width:48px!important;height:48px!important;filter:drop-shadow(0 0 17px rgba(128,79,255,.38))}
#topbar .vx320-brand-name{font-size:17px!important;letter-spacing:.17em!important;font-weight:950!important}
#vx320DesktopNav{min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:5px!important;border:1px solid rgba(131,109,216,.18)!important;border-radius:17px!important;background:linear-gradient(180deg,rgba(13,16,40,.7),rgba(7,9,27,.58))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;overflow:visible!important}
#vx320DesktopNav>button,#vx320DesktopNav>.vx390-nav-item{height:44px!important;min-height:44px!important;padding:0 10px!important;gap:7px!important;border-radius:12px!important;font-size:11.5px!important;line-height:1!important;letter-spacing:.01em!important;white-space:nowrap!important;color:#b8c2df!important;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important}
#vx320DesktopNav>button b,#vx320DesktopNav>.vx390-nav-item b{font-size:11.5px!important;font-weight:760!important;letter-spacing:.005em!important}
#vx320DesktopNav>button [data-ic],#vx320DesktopNav>.vx390-nav-item [data-ic]{width:17px!important;height:17px!important;opacity:.88!important}
#vx320DesktopNav>button:hover,#vx320DesktopNav>.vx390-nav-item:hover{color:#fff!important;background:rgba(114,80,238,.13)!important;transform:translateY(-1px)!important}
#vx320DesktopNav>button.active,#vx320DesktopNav>.vx390-nav-item.active{color:#fff!important;background:linear-gradient(145deg,rgba(113,74,239,.29),rgba(44,104,190,.15))!important;border:1px solid rgba(139,101,255,.27)!important;box-shadow:0 8px 20px rgba(77,47,172,.14),inset 0 1px 0 rgba(255,255,255,.04)!important}
#topbar .vx320-actions{gap:7px!important;min-width:max-content!important}
#topbar .vx320-lang{height:42px!important;border-radius:13px!important}
#topbar .vx320-icon-btn,#topbar .vx320-theme-btn{height:42px!important;min-height:42px!important;border-radius:13px!important}

/* Account HUD */
#authArea{min-width:0!important}
.vx400-account-hud{display:grid!important;grid-template-columns:42px minmax(86px,1fr) auto!important;align-items:center!important;gap:10px!important;min-width:218px!important;max-width:254px!important;height:52px!important;padding:5px 9px 5px 6px!important;border:1px solid rgba(135,107,230,.25)!important;border-radius:16px!important;background:linear-gradient(150deg,rgba(22,24,58,.9),rgba(9,12,34,.94))!important;color:#eef2ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 9px 25px rgba(0,0,0,.16)!important;cursor:pointer!important}
.vx400-account-hud:hover{border-color:rgba(145,102,255,.46)!important;background:linear-gradient(150deg,rgba(30,28,75,.95),rgba(12,15,42,.96))!important}
.vx400-account-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;overflow:hidden;border:1px solid rgba(147,115,255,.35);background:linear-gradient(145deg,#4c33a9,#1d2357);font-size:12px;font-weight:900;box-shadow:0 0 18px rgba(118,75,255,.16)}
.vx400-account-avatar img{width:100%;height:100%;object-fit:cover}
.vx400-account-main{display:block;min-width:0;text-align:left}
.vx400-account-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;line-height:1.2;font-weight:850;color:#fff}
.vx400-account-main small{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:9.5px;color:#95a4c9;white-space:nowrap}
.vx400-account-main small i{width:5px;height:5px;border-radius:50%;background:#43e6a5;box-shadow:0 0 8px #43e6a5}
.vx400-account-stats{display:grid;gap:3px;text-align:right}
.vx400-account-stats strong{font-size:10px;line-height:1.1;color:#c9b9ff;white-space:nowrap}
.vx400-account-stats span{font-size:9px;color:#58ddff;white-space:nowrap;font-weight:800}

/* Professional page hero. */
.vx400-page-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.72fr);gap:24px;align-items:stretch;margin:0 0 18px;padding:clamp(25px,3.1vw,42px);border:1px solid rgba(135,102,234,.28);border-radius:25px;background:radial-gradient(540px 270px at 7% 16%,rgba(99,70,236,.18),transparent 68%),linear-gradient(135deg,rgba(16,20,52,.96),rgba(7,11,31,.97));box-shadow:0 28px 70px -45px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
.vx400-page-hero::before{content:"";position:absolute;z-index:-1;inset:auto -110px -160px auto;width:360px;height:360px;border-radius:50%;background:rgba(64,197,255,.08);filter:blur(12px)}
.vx400-page-hero-main{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;align-items:start}
.vx400-page-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;border:1px solid rgba(126,103,255,.3);background:linear-gradient(145deg,rgba(107,76,239,.2),rgba(37,106,180,.1));color:#a998ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(64,38,139,.15)}
.vx400-page-icon svg{width:25px;height:25px}
.vx400-page-kicker{display:inline-flex!important;align-items:center!important;width:max-content!important;max-width:100%!important;gap:8px!important;padding:6px 10px!important;border:1px solid rgba(118,101,224,.24)!important;border-radius:999px!important;background:rgba(73,55,160,.12)!important;font-size:9px!important;line-height:1!important;font-weight:850!important;letter-spacing:.16em!important;color:#a9b7df!important;text-transform:uppercase!important}
.vx400-page-kicker i{width:6px;height:6px;border-radius:50%;background:#53e8ac;box-shadow:0 0 9px rgba(83,232,172,.8)}
.vx400-page-hero h1{max-width:820px;margin:12px 0 11px!important;font-size:clamp(27px,3.1vw,47px)!important;line-height:1.02!important;letter-spacing:-.036em!important;color:#f8f9ff!important;font-weight:920!important}
.vx400-page-hero h1 em{font-style:normal;background:linear-gradient(90deg,#a978ff,#51dafa);-webkit-background-clip:text;background-clip:text;color:transparent}
.vx400-page-hero-main p{max-width:780px;margin:0;color:#9faecc;font-size:13.5px;line-height:1.72}
.vx400-hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.vx400-hero-chips span{display:inline-flex;align-items:center;gap:6px;min-height:29px;padding:0 10px;border-radius:9px;border:1px solid rgba(127,116,191,.18);background:rgba(255,255,255,.025);font-size:9.5px;font-weight:720;color:#9eadd0}
.vx400-hero-chips span:first-child{color:#7deac0}.vx400-hero-chips span i{width:5px;height:5px;border-radius:50%;background:#58e1ae}
.vx400-page-hero-side{display:flex;flex-direction:column;justify-content:center;padding:20px;border:1px solid rgba(117,101,202,.19);border-radius:18px;background:linear-gradient(155deg,rgba(15,21,51,.72),rgba(8,13,34,.66));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.vx400-live-label{display:inline-flex;align-items:center;gap:6px;width:max-content;font-size:8.5px;font-weight:900;letter-spacing:.16em;color:#58e0ad}.vx400-live-label i{width:6px;height:6px;border-radius:50%;background:#58e0ad;box-shadow:0 0 9px rgba(88,224,173,.7)}
.vx400-page-hero-side>strong{margin-top:10px;font-size:17px;color:#f5f7ff}.vx400-page-hero-side>p{margin:6px 0 15px;color:#8e9abc;font-size:11px;line-height:1.55}
.vx400-hero-actions{display:flex;flex-wrap:wrap;gap:8px}.vx400-hero-actions .btn{min-height:39px!important;padding:0 13px!important;font-size:10.5px!important}
#page-servers .v2-metrics{margin-top:0!important}

/* Older generated page intro strips: keep compact, never stretch the label bubble across the card. */
.vx390-page-intro,.page:not(#page-home) .vx65-rank-hero,.page:not(#page-home)>.wrap.section>.sec-head{border-radius:22px!important}
.vx390-page-intro .eyebrow,.vx65-overline,.sec-head .eyebrow{display:inline-flex!important;width:max-content!important;max-width:100%!important;padding:5px 9px!important;border-radius:999px!important;letter-spacing:.13em!important;line-height:1!important}

/* Homepage: ad and Discord destinations. */
.vx400-home-connect{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px;margin-top:0;margin-bottom:clamp(22px,4vw,52px)}
.vx400-connect-card{position:relative;overflow:hidden;min-height:218px;border:1px solid rgba(132,103,228,.24);border-radius:24px;background:linear-gradient(145deg,rgba(14,18,46,.95),rgba(8,11,30,.96));box-shadow:0 24px 58px -45px #000;color:inherit;text-decoration:none}
.vx400-business-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 30px;background:radial-gradient(380px 220px at 7% 12%,rgba(131,80,255,.19),transparent 72%),linear-gradient(145deg,rgba(16,19,51,.97),rgba(8,11,30,.97))}
.vx400-business-card::after{content:"ADS";position:absolute;right:-8px;bottom:-22px;font-size:116px;line-height:1;font-weight:950;letter-spacing:-.08em;color:rgba(140,106,255,.035);pointer-events:none}
.vx400-connect-copy{position:relative;z-index:1}.vx400-card-kicker{font-size:9px;font-weight:900;letter-spacing:.17em;color:#9e87ff}.vx400-connect-copy h2{max-width:720px;margin:9px 0 8px;font-size:clamp(20px,2.2vw,31px);line-height:1.08;letter-spacing:-.025em;color:#f6f8ff}.vx400-connect-copy p{max-width:710px;margin:0;color:#95a3c3;font-size:12.5px;line-height:1.65}
.vx400-card-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.vx400-card-points span{padding:6px 9px;border:1px solid rgba(128,110,209,.18);border-radius:8px;background:rgba(255,255,255,.02);font-size:9px;color:#9dabc9}
.vx400-connect-action{position:relative;z-index:2;display:grid;justify-items:center;gap:7px;min-width:130px}.vx400-connect-action .btn{min-width:126px!important}.vx400-connect-action small{font-size:9px;color:#7785a6}
.vx400-discord-card{display:grid;grid-template-columns:54px 1fr;gap:17px;align-items:center;padding:27px 25px;background:radial-gradient(250px 180px at 100% 0,rgba(88,101,242,.25),transparent 70%),linear-gradient(145deg,rgba(15,19,52,.97),rgba(9,11,31,.97));transition:transform .2s ease,border-color .2s ease}
.vx400-discord-card:hover{transform:translateY(-2px);border-color:rgba(109,120,255,.44)}.vx400-discord-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:rgba(88,101,242,.15);border:1px solid rgba(113,125,255,.28);color:#8f9cff}.vx400-discord-symbol svg{width:28px;height:28px}.vx400-discord-card h2{font-size:21px}.vx400-discord-card strong{display:inline-flex;gap:7px;margin-top:15px;font-size:11px;color:#9fa9ff;letter-spacing:.02em}.vx400-discord-card strong i{font-style:normal}

/* Ranking: denser, richer cards and less dead space. */
#page-rankings .vx400-rank-hero{padding:28px 30px!important;background:radial-gradient(450px 230px at 8% 10%,rgba(112,76,245,.15),transparent 70%),linear-gradient(145deg,rgba(14,19,48,.96),rgba(8,11,30,.96))!important;border:1px solid rgba(126,102,219,.24)!important}
.vx400-rank-hints{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.vx400-rank-hints span{padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid rgba(128,109,201,.16);font-size:9px;color:#96a5c7}
#page-rankings .vx65-user-rank{padding:20px!important;border-radius:23px!important;background:linear-gradient(145deg,rgba(13,17,42,.9),rgba(7,10,27,.9))!important}
#page-rankings .vx60-podium{gap:11px!important;margin-top:14px!important}
#page-rankings .vx60-podium-card{min-height:214px!important;padding:20px 16px!important;border-radius:18px!important;background:linear-gradient(150deg,rgba(20,24,56,.92),rgba(10,13,34,.94))!important;border:1px solid rgba(119,103,189,.18)!important;box-shadow:0 18px 40px -32px #000!important}
#page-rankings .vx60-rank-list{display:grid!important;gap:7px!important}
#page-rankings .vx60-rank-row{min-height:76px!important;padding:10px 13px!important;border-radius:15px!important;border:1px solid rgba(117,104,176,.15)!important;background:linear-gradient(145deg,rgba(16,20,48,.76),rgba(9,12,31,.82))!important;box-shadow:none!important}
#page-rankings .vx60-rank-row:hover{border-color:rgba(132,101,238,.32)!important;background:linear-gradient(145deg,rgba(24,25,62,.86),rgba(11,15,39,.88))!important}
#page-rankings .vx60-rank-number{font-size:13px!important;font-weight:900!important;color:#8e9cbc!important}
#page-rankings .vx60-rank-avatar{width:46px!important;height:46px!important;border-radius:14px!important}
#page-rankings .vx60-rank-user b{font-size:12px!important}.vx60-rank-user small{font-size:9px!important;color:#8594b8!important}

/* Auth login e-mail challenge. */
.vx400-login-verify .vx320-auth-head h3{max-width:470px}.vx400-login-security{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;margin:13px 0 16px;padding:12px 13px;border:1px solid rgba(112,105,199,.2);border-radius:14px;background:rgba(255,255,255,.022)}
.vx400-login-security>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(92,74,211,.12);color:#a58dff}.vx400-login-security>span svg{width:18px;height:18px}.vx400-login-security b{display:block;font-size:10.5px;color:#e7ebfb}.vx400-login-security small{display:block;margin-top:3px;font-size:9px;line-height:1.4;color:#8390af}.vx400-login-security strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#66ddff}
.vx400-auth-message{margin:0 0 12px;padding:9px 11px;border-radius:10px;border:1px solid rgba(242,93,123,.25);background:rgba(242,93,123,.07);color:#f5a7b8;font-size:10.5px;line-height:1.5}.vx400-auth-message[data-state="ok"]{border-color:rgba(74,221,163,.23);background:rgba(74,221,163,.07);color:#82e8bd}

/* Custom select/listbox for consistent dark UI. */
.vx400-select{position:relative;display:block;min-width:0}.vx400-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;inset:auto!important}
.vx400-select-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:43px;padding:0 13px;border:1px solid rgba(117,106,177,.24);border-radius:12px;background:linear-gradient(180deg,rgba(12,16,39,.95),rgba(8,11,29,.96));color:#d9e0f3;text-align:left;font:inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.vx400-select-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.vx400-select-btn i{font-style:normal;color:#7887aa;font-size:11px;transition:transform .16s ease}.vx400-select.open .vx400-select-btn{border-color:rgba(132,94,245,.46);box-shadow:0 0 0 3px rgba(121,81,232,.08)}.vx400-select.open .vx400-select-btn i{transform:rotate(180deg)}
.vx400-select-menu{position:absolute;z-index:15000;left:0;right:0;top:calc(100% + 7px);display:none;max-height:265px;overflow:auto;padding:6px;border:1px solid rgba(128,104,207,.28);border-radius:14px;background:#0b0f25;box-shadow:0 22px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03)}.vx400-select.open .vx400-select-menu{display:grid;gap:3px}
.vx400-select-option{width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:#aeb9d4;text-align:left;font-size:10.5px;cursor:pointer}.vx400-select-option:hover,.vx400-select-option[aria-selected="true"]{background:rgba(111,79,235,.13);color:#fff}.vx400-select-option[aria-selected="true"]::after{content:"✓";float:right;color:#8e78ff;font-weight:900}

/* Control Deck density and empty states. */
#page-admin .vx-admin-shell{gap:14px!important}.vx-admin-nav{border-radius:18px!important;background:linear-gradient(180deg,rgba(12,16,39,.92),rgba(8,11,29,.94))!important}.vx-admin-main>section,.vx-admin-card{border-radius:18px!important}.vx400-admin-empty{display:grid;place-items:center;min-height:190px;padding:28px;border:1px dashed rgba(125,108,190,.25);border-radius:15px;background:rgba(255,255,255,.015);text-align:center}.vx400-admin-empty b{font-size:13px;color:#dce3f5}.vx400-admin-empty p{max-width:430px;margin:7px auto 0;font-size:10.5px;line-height:1.55;color:#7f8dab}

/* Footer brand has enough visual weight. */
footer .vx320-footer-mark{width:68px!important;height:68px!important;min-width:68px!important;border-radius:20px!important;filter:drop-shadow(0 0 20px rgba(115,73,245,.27))}footer .vx320-footer-mark img{width:68px!important;height:68px!important}footer .brand-name{font-size:17px!important;letter-spacing:.16em!important}.vx400-footer-note{color:#7483a7!important;font-size:10px!important;letter-spacing:.025em!important}

/* Large off-screen sections do not need paint/layout until near viewport. */
@supports (content-visibility:auto){#page-home>.vx320-section,#page-home>.vx400-home-connect,#page-rankings .vx65-user-rank{content-visibility:auto;contain-intrinsic-size:1px 520px}}

@media(max-width:1360px){#topbar.vx320-header{padding-inline:15px!important;gap:11px!important}#topbar .vx320-brand{min-width:145px!important}#vx320DesktopNav>button,#vx320DesktopNav>.vx390-nav-item{padding-inline:8px!important;font-size:10.7px!important}#vx320DesktopNav>button b,#vx320DesktopNav>.vx390-nav-item b{font-size:10.7px!important}.vx400-account-hud{min-width:196px!important}.vx400-account-stats strong{font-size:9px}}
@media(max-width:1180px) and (min-width:931px){#topbar .vx320-brand-name{display:none!important}#topbar .vx320-brand{min-width:50px!important;width:50px!important}#topbar .vx320-lang{display:none!important}#topbar .theme-picker-label,#topbar .theme-picker-chevron{display:none!important}#topbar .vx320-theme-btn{width:42px!important;padding:0!important;justify-content:center!important}#vx320DesktopNav{gap:2px!important}#vx320DesktopNav>button,#vx320DesktopNav>.vx390-nav-item{padding-inline:7px!important}#vx320DesktopNav>button b,#vx320DesktopNav>.vx390-nav-item b{font-size:10px!important}.vx400-account-hud{min-width:148px!important;grid-template-columns:38px 1fr!important}.vx400-account-stats{display:none}.vx400-account-avatar{width:38px;height:38px}}
@media(max-width:930px){#topbar.vx320-header{height:68px!important;min-height:68px!important;padding-inline:12px!important}#topbar .vx320-brand{min-width:auto!important}.vx400-account-hud{min-width:46px!important;width:46px!important;height:46px!important;display:grid!important;grid-template-columns:1fr!important;padding:3px!important;border-radius:14px!important}.vx400-account-avatar{width:38px;height:38px;margin:auto}.vx400-account-main,.vx400-account-stats{display:none!important}.vx400-page-hero{grid-template-columns:1fr;padding:20px;border-radius:21px}.vx400-page-hero-side{padding:16px}.vx400-home-connect{grid-template-columns:1fr}.vx400-business-card{grid-template-columns:1fr}.vx400-connect-action{justify-items:start}.vx400-discord-card{min-height:180px}}
@media(max-width:640px){.vx400-page-hero-main{grid-template-columns:1fr}.vx400-page-icon{width:48px;height:48px;border-radius:14px}.vx400-page-hero h1{font-size:31px!important}.vx400-page-hero-main p{font-size:12.5px}.vx400-hero-chips{gap:5px}.vx400-hero-chips span{font-size:8.8px}.vx400-business-card,.vx400-discord-card{padding:20px;border-radius:20px}.vx400-discord-card{grid-template-columns:46px 1fr}.vx400-discord-symbol{width:46px;height:46px}.vx400-connect-copy h2{font-size:21px}.vx400-login-security{grid-template-columns:34px 1fr}.vx400-login-security strong{grid-column:2}.vx400-select-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:48vh;border-radius:18px}}
@media(prefers-reduced-motion:reduce){#vx320DesktopNav>button,.vx400-connect-card,.vx400-select-btn i,.vx400-account-hud{transition:none!important}}