/* ========================================================================== 
   XAVIER STUDIO V3.41 — VERCEL / GEIST-INSPIRED PRODUCT SYSTEM
   Unified storefront, tools, Explorer, admin and delivery surfaces.
   ========================================================================== */

:root{
  color-scheme:light;
  --x-bg:#ffffff;
  --x-bg-2:#fafafa;
  --x-bg-3:#f5f5f5;
  --x-panel:#ffffff;
  --x-panel-2:#fafafa;
  --x-panel-3:#f2f2f2;
  --x-border:#eaeaea;
  --x-border-2:#dedede;
  --x-border-3:#cccccc;
  --x-text:#171717;
  --x-text-2:#444444;
  --x-muted:#666666;
  --x-muted-2:#8f8f8f;
  --x-faint:#b7b7b7;
  --x-accent:#000000;
  --x-accent-fg:#ffffff;
  --x-blue:#0070f3;
  --x-green:#00a86b;
  --x-red:#e5484d;
  --x-amber:#d97706;
  --x-purple:#6e56cf;
  --x-r1:6px;
  --x-r2:8px;
  --x-r3:10px;
  --x-r4:12px;
  --x-r5:16px;
  --x-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.035);
  --x-shadow-pop:0 12px 38px rgba(0,0,0,.12);
  --x-max:1200px;
  --x-header:64px;
  --x-font:Geist,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --x-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* Aliases consumed by the existing project CSS/JS. */
  --bg:var(--x-bg);
  --surface:var(--x-panel);
  --surface2:var(--x-panel-2);
  --surface3:var(--x-panel-3);
  --panel:var(--x-panel);
  --panel2:var(--x-panel-2);
  --border:var(--x-border);
  --border2:var(--x-border-2);
  --border-strong:var(--x-border-3);
  --text:var(--x-text);
  --muted:var(--x-muted);
  --muted-2:var(--x-muted-2);
  --green:var(--x-green);
  --red:var(--x-red);
  --blue:var(--x-blue);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --x-bg:#000000;
  --x-bg-2:#0a0a0a;
  --x-bg-3:#111111;
  --x-panel:#0a0a0a;
  --x-panel-2:#111111;
  --x-panel-3:#161616;
  --x-border:#262626;
  --x-border-2:#333333;
  --x-border-3:#444444;
  --x-text:#ededed;
  --x-text-2:#d4d4d4;
  --x-muted:#a1a1a1;
  --x-muted-2:#737373;
  --x-faint:#555555;
  --x-accent:#ffffff;
  --x-accent-fg:#000000;
  --x-blue:#52a8ff;
  --x-green:#45d483;
  --x-red:#ff6369;
  --x-amber:#f5a524;
  --x-purple:#a78bfa;
  --x-shadow:0 1px 2px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.22);
  --x-shadow-pop:0 14px 44px rgba(0,0,0,.48);
}

*{box-sizing:border-box}
html{background:var(--x-bg)!important;scroll-behavior:smooth}
body{
  margin:0!important;
  min-height:100vh!important;
  background:var(--x-bg)!important;
  color:var(--x-text)!important;
  font-family:var(--x-font)!important;
  font-size:14px!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}
::selection{background:var(--x-text)!important;color:var(--x-bg)!important}
a{color:inherit}
button,input,select,textarea{font-family:inherit!important}
code,pre,.mono,.mono-kicker,.scriptbox,.vu-output{font-family:var(--x-mono)!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--x-border-2) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--x-border-2);border:2px solid transparent;background-clip:content-box;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:var(--x-muted-2);border:2px solid transparent;background-clip:content-box}

/* Common buttons */
.btn,
.xh34-primary,.xh34-secondary,
.google-btn,.auth-compat-btn,
.mobile-pro-icon-btn,
.chat-tool-btn,
.admin-icon-button,
.x-select-button{
  min-height:34px!important;
  border-radius:var(--x-r1)!important;
  border:1px solid var(--x-border-2)!important;
  background:var(--x-panel)!important;
  color:var(--x-text)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.btn:hover,.xh34-secondary:hover,.auth-compat-btn:hover,.chat-tool-btn:hover,.x-select-button:hover{
  background:var(--x-panel-2)!important;
  border-color:var(--x-border-3)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
}
.btn:active,.xh34-primary:active,.xh34-secondary:active{transform:translateY(1px)!important}
.btn.primary,.xh34-primary,.google-btn{
  background:var(--x-accent)!important;
  border-color:var(--x-accent)!important;
  color:var(--x-accent-fg)!important;
  box-shadow:none!important;
}
.btn.primary:hover,.xh34-primary:hover,.google-btn:hover{opacity:.88!important;background:var(--x-accent)!important;color:var(--x-accent-fg)!important}
.btn.discord{background:var(--x-panel)!important;color:var(--x-text)!important;border-color:var(--x-border-2)!important}
.btn.good{color:var(--x-green)!important;background:color-mix(in srgb,var(--x-green) 8%,var(--x-panel))!important;border-color:color-mix(in srgb,var(--x-green) 28%,var(--x-border))!important}
.btn.danger{color:var(--x-red)!important;background:color-mix(in srgb,var(--x-red) 7%,var(--x-panel))!important;border-color:color-mix(in srgb,var(--x-red) 26%,var(--x-border))!important}

/* Common fields */
input,select,textarea,
.search input,.field input,.field select,.field textarea,
.vu-config input,.vu-config select,.vu-input-action input,
.checkrow input,.editor input,.editor textarea,.editor select{
  border:1px solid var(--x-border-2)!important;
  border-radius:var(--x-r1)!important;
  background:var(--x-panel)!important;
  color:var(--x-text)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.025)!important;
  outline:none!important;
}
input:focus,select:focus,textarea:focus,
.search input:focus,.field input:focus,.field select:focus,.field textarea:focus,
.vu-config input:focus,.vu-config select:focus,.vu-input-action input:focus{
  border-color:var(--x-text)!important;
  box-shadow:0 0 0 1px var(--x-text)!important;
}
input::placeholder,textarea::placeholder{color:var(--x-muted-2)!important}

/* Common material surfaces */
.card,.panel,.checkbox,.community-card,.product-card,.provider-card,.identity-card,.hero-panel,.auth-card,
.vu-gate,.vu-account-strip,.vu-api-box,.vu-picker,.vu-config-group,.vu-output-sticky,
.product-type-card,.tablewrap,.stat,.buyers,.chat,.profile,
.upload-kind-banner,.legacy-parity-note,.license-explain,.loginbox,.modal,
.download-card,.info{
  background:var(--x-panel)!important;
  border:1px solid var(--x-border)!important;
  border-radius:var(--x-r3)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* ========================================================================== 
   PUBLIC STOREFRONT
   ========================================================================== */
.xv-public .top{
  position:sticky!important;top:0!important;z-index:420!important;
  height:var(--x-header)!important;
  border:0!important;border-bottom:1px solid var(--x-border)!important;
  background:color-mix(in srgb,var(--x-bg) 90%,transparent)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
  box-shadow:none!important;
}
.xv-public .topin{width:min(var(--x-max),calc(100% - 40px))!important;height:100%!important;margin:auto!important;padding:0!important;gap:24px!important}
.xv-public .brand{gap:9px!important;text-transform:none!important;font-size:14px!important;font-weight:650!important;letter-spacing:-.025em!important}
.xv-public .brandmark{width:30px!important;height:30px!important;border-radius:7px!important;border:1px solid var(--x-border)!important;background:var(--x-panel)!important;box-shadow:none!important}
.xv-public .brandmark img{padding:3px!important;object-fit:contain!important}
.xv-public .platform-nav{height:100%!important;display:flex!important;align-items:stretch!important;gap:1px!important}
.xv-public .navlink,.xv-public .dropbtn{
  position:relative!important;height:100%!important;padding:0 11px!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--x-muted)!important;font-size:13px!important;font-weight:450!important;letter-spacing:-.01em!important;text-transform:none!important;
}
.xv-public .navlink:hover,.xv-public .dropbtn:hover,.xv-public .navlink.on,.xv-public .nav-dropdown.route-active>.dropbtn,.xv-public .nav-dropdown.open>.dropbtn{color:var(--x-text)!important;background:transparent!important}
.xv-public .navlink::after,.xv-public .dropbtn::after{content:""!important;position:absolute!important;left:10px!important;right:10px!important;bottom:-1px!important;height:1px!important;background:var(--x-text)!important;opacity:0!important;transform:none!important}
.xv-public .navlink.on::after,.xv-public .nav-dropdown.route-active>.dropbtn::after,.xv-public .nav-dropdown.open>.dropbtn::after{opacity:1!important}
.xv-public .nav-caret{color:var(--x-muted-2)!important;font-size:11px!important}
.xv-public .topright{gap:7px!important}
.xv-public .iconbtn,.xv-public .account-top-btn,.xv-public .mobile-menu-btn{border:1px solid transparent!important;background:transparent!important;color:var(--x-muted)!important;border-radius:var(--x-r1)!important;box-shadow:none!important}
.xv-public .iconbtn:hover,.xv-public .account-top-btn:hover,.xv-public .mobile-menu-btn:hover{background:var(--x-bg-3)!important;color:var(--x-text)!important}
.xv-public .desktop-cta{height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:var(--x-r1)!important;font-size:12px!important}
.xv-public .platform-menu,.xv-public .tools-pro-menu,.xv-public .account-popover{
  margin-top:7px!important;padding:8px!important;
  border:1px solid var(--x-border-2)!important;border-radius:var(--x-r2)!important;
  background:color-mix(in srgb,var(--x-panel) 97%,transparent)!important;
  box-shadow:var(--x-shadow-pop)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
.xv-public .nav-menu-item,.xv-public .pro-tool-item,.xv-public .account-pop-links a{border-radius:var(--x-r1)!important;background:transparent!important;border:0!important}
.xv-public .nav-menu-item:hover,.xv-public .pro-tool-item:hover,.xv-public .account-pop-links a:hover{background:var(--x-bg-3)!important}

/* public page width */
.xv-public .wrap{width:min(var(--x-max),calc(100% - 40px))!important;margin:auto!important;padding-bottom:90px!important}

/* HOME — Vercel-like hierarchy, no acrylic hero frame */
.xv-public .xh34-hero{
  min-height:620px!important;padding:92px 0 72px!important;
  display:grid!important;grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr)!important;gap:72px!important;align-items:center!important;
  border:0!important;border-bottom:1px solid var(--x-border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.xv-public .xh34-hero::before{
  content:""!important;display:block!important;position:absolute!important;z-index:-1!important;
  width:min(860px,90vw)!important;height:520px!important;left:50%!important;top:40px!important;transform:translateX(-50%)!important;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--x-text) 4%,transparent),transparent 68%)!important;
  pointer-events:none!important;
}
.xv-public .xh34-kicker,.xv-public .xh34-section-label,.xv-public .xh34-section-head span,.xv-public .xh34-infra-intro>span,.xv-public .xh34-final>div>span{
  color:var(--x-muted-2)!important;font-size:11px!important;font-weight:520!important;letter-spacing:0!important;text-transform:none!important;
}
.xv-public .xh34-hero-copy h1{
  margin:18px 0 0!important;max-width:780px!important;
  color:var(--x-text)!important;font-family:var(--x-font)!important;
  font-size:clamp(54px,6.4vw,88px)!important;line-height:.94!important;letter-spacing:-.065em!important;font-weight:680!important;
}
.xv-public .xh34-hero-copy h1 span{color:var(--x-text)!important;-webkit-text-stroke:0!important}
.xv-public .xh34-lead{margin-top:24px!important;max-width:680px!important;color:var(--x-text-2)!important;font-size:16px!important;line-height:1.6!important;letter-spacing:-.015em!important}
.xv-public .xh34-supporting{margin-top:11px!important;max-width:680px!important;color:var(--x-muted)!important;font-size:14px!important;line-height:1.65!important}
.xv-public .xh34-actions{margin-top:26px!important;gap:8px!important}
.xv-public .xh34-primary,.xv-public .xh34-secondary{height:38px!important;min-height:38px!important;padding:0 14px!important;font-size:13px!important}
.xv-public .xh34-proof{margin-top:34px!important;padding-top:18px!important;border-top:1px solid var(--x-border)!important;gap:16px!important;color:var(--x-muted-2)!important;font-size:11px!important;font-weight:500!important;letter-spacing:0!important}
.xv-public .xh34-index{align-self:center!important;border:1px solid var(--x-border)!important;border-radius:var(--x-r4)!important;background:var(--x-panel)!important;overflow:hidden!important}
.xv-public .xh34-index-head{height:46px!important;padding:0 14px!important;border-bottom:1px solid var(--x-border)!important;color:var(--x-muted)!important;font-size:11px!important;font-weight:540!important;letter-spacing:0!important;text-transform:none!important}
.xv-public .xh34-index>a{min-height:78px!important;padding:0 14px!important;grid-template-columns:24px minmax(0,1fr) 18px!important;border-top:0!important;border-bottom:1px solid var(--x-border)!important;background:transparent!important}
.xv-public .xh34-index>a:hover{padding-left:14px!important;background:var(--x-bg-2)!important}
.xv-public .xh34-index>a>span{font-family:var(--x-mono)!important;color:var(--x-muted-2)!important;font-size:10px!important}
.xv-public .xh34-index b{font-size:13px!important;font-weight:580!important;color:var(--x-text)!important}
.xv-public .xh34-index small{font-size:12px!important;line-height:1.45!important;color:var(--x-muted)!important}
.xv-public .xh34-index-foot{padding:12px 14px!important;color:var(--x-muted-2)!important;font-size:10px!important;letter-spacing:0!important;text-transform:none!important}
.xv-public .xh34-index-foot i{background:var(--x-green)!important}

/* content sections */
.xv-public .xh34-intro,.xv-public .xh34-capabilities,.xv-public .xh34-process,.xv-public .xh34-catalog-block,.xv-public .xh34-infra,.xv-public .xh34-final{padding:76px 0!important;border-bottom:1px solid var(--x-border)!important;background:transparent!important}
.xv-public .xh34-intro{grid-template-columns:150px minmax(260px,.8fr) minmax(360px,1.2fr)!important;gap:50px!important}
.xv-public .xh34-intro-title h2,.xv-public .xh34-section-head h2,.xv-public .xh34-infra-intro h2,.xv-public .xh34-final h2{font-family:var(--x-font)!important;color:var(--x-text)!important;font-size:clamp(32px,3.8vw,50px)!important;line-height:1.05!important;letter-spacing:-.045em!important;font-weight:650!important}
.xv-public .xh34-intro-copy p,.xv-public .xh34-section-head>p,.xv-public .xh34-section-head>div>p,.xv-public .xh34-infra-intro p,.xv-public .xh34-final p{color:var(--x-muted)!important;font-size:14px!important;line-height:1.7!important}
.xv-public .xh34-section-head{margin-bottom:28px!important;gap:48px!important}
.xv-public .xh34-section-head>a{color:var(--x-muted)!important;font-size:13px!important}
.xv-public .xh34-section-head>a:hover{color:var(--x-text)!important}
.xv-public .xh34-cap-list{border-top:1px solid var(--x-border)!important}
.xv-public .xh34-cap-list>a{min-height:112px!important;padding:20px 10px!important;border-bottom:1px solid var(--x-border)!important;grid-template-columns:44px minmax(0,1fr) 18px!important;border-radius:0!important}
.xv-public .xh34-cap-list>a:hover{padding-left:10px!important;background:var(--x-bg-2)!important}
.xv-public .xh34-cap-list b{font-size:15px!important;font-weight:580!important}
.xv-public .xh34-cap-list p{font-size:13px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-public .xh34-process-grid{border:1px solid var(--x-border)!important;border-radius:var(--x-r4)!important;overflow:hidden!important;background:var(--x-panel)!important}
.xv-public .xh34-process-grid article{padding:24px!important;min-height:230px!important;background:transparent!important;border-right:1px solid var(--x-border)!important}
.xv-public .xh34-process-grid article>span{font-family:var(--x-mono)!important;font-size:10px!important;color:var(--x-muted-2)!important}
.xv-public .xh34-process-grid article>i{margin-top:38px!important;font-size:21px!important;color:var(--x-text)!important}
.xv-public .xh34-process-grid h3{font-size:15px!important;font-weight:590!important}
.xv-public .xh34-process-grid p{font-size:13px!important;line-height:1.6!important}
.xv-public .xh34-infra{gap:62px!important}
.xv-public .xh34-infra-list{border-top:1px solid var(--x-border)!important}
.xv-public .xh34-infra-list>div{padding:20px 0!important;border-bottom:1px solid var(--x-border)!important}
.xv-public .xh34-infra-list i{background:var(--x-bg-2)!important;border-color:var(--x-border)!important;border-radius:var(--x-r2)!important;color:var(--x-text)!important}
.xv-public .xh34-infra-list b{font-size:13px!important;font-weight:580!important}
.xv-public .xh34-infra-list p{font-size:13px!important;line-height:1.6!important}

/* PRODUCT CARDS */
.xv-public .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.xv-public .card{overflow:hidden!important;cursor:pointer!important;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease!important}
.xv-public .card:hover{transform:translateY(-2px)!important;border-color:var(--x-border-3)!important;box-shadow:var(--x-shadow)!important;background:var(--x-panel)!important}
.xv-public .thumb{aspect-ratio:16/10!important;height:auto!important;border-bottom:1px solid var(--x-border)!important;background:var(--x-bg-2)!important}
.xv-public .thumb img{filter:none!important;object-fit:cover!important}
.xv-public .tag{top:10px!important;left:10px!important;padding:4px 7px!important;border:1px solid color-mix(in srgb,var(--x-border) 75%,transparent)!important;border-radius:999px!important;background:color-mix(in srgb,var(--x-panel) 88%,transparent)!important;color:var(--x-text-2)!important;font-size:10px!important;font-weight:560!important;letter-spacing:0!important;backdrop-filter:blur(8px)!important}
.xv-public .card .body{padding:14px!important}
.xv-public .cat{font-size:11px!important;color:var(--x-muted-2)!important;letter-spacing:0!important;text-transform:none!important}
.xv-public .name{margin-top:4px!important;font-size:14px!important;font-weight:600!important;letter-spacing:-.02em!important}
.xv-public .desc{margin-top:6px!important;min-height:42px!important;font-size:12px!important;line-height:1.55!important;color:var(--x-muted)!important}
.xv-public .card .foot{padding:11px 14px!important;border-top:1px solid var(--x-border)!important;background:var(--x-bg-2)!important}
.xv-public .price{font-size:12px!important;font-weight:600!important}.xv-public .ver{font-family:var(--x-mono)!important;font-size:10px!important;color:var(--x-muted-2)!important}

/* SHOP */
.xv-public .xs-shop-hero{padding:70px 0 32px!important;border-bottom:1px solid var(--x-border)!important}
.xv-public .xs-shop-kicker{font-size:11px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--x-muted-2)!important}
.xv-public .xs-shop-title-row{margin-top:12px!important;align-items:end!important}
.xv-public .xs-shop-title-row h1{font-family:var(--x-font)!important;font-size:clamp(42px,5vw,64px)!important;font-weight:650!important;letter-spacing:-.055em!important;line-height:1!important}
.xv-public .xs-shop-title-row p{font-size:14px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-public .xs-shop-count b{font-size:28px!important;font-weight:620!important}.xv-public .xs-shop-count span{font-size:10px!important;letter-spacing:0!important;text-transform:none!important}
.xv-public .xs-shop-controls{min-height:62px!important;position:sticky!important;top:var(--x-header)!important;z-index:50!important;background:color-mix(in srgb,var(--x-bg) 94%,transparent)!important;backdrop-filter:blur(10px)!important;border-bottom:1px solid var(--x-border)!important}
.xv-public .xs-shop-search{max-width:360px!important}.xv-public .xs-shop-search input,.xv-public .xs-shop-select{height:34px!important;border-radius:var(--x-r1)!important;font-size:12px!important}
.xv-public .xs-shop-result-count{font-size:11px!important;letter-spacing:0!important;text-transform:none!important}
.xv-public .xs-shop-results{padding:24px 0 80px!important}

/* GENERAL SUBPAGES */
.xv-public .pagehero,.xv-public .tool-directory-head{padding:64px 0 28px!important;border-bottom:1px solid var(--x-border)!important}
.xv-public .pagehero h1,.xv-public .tool-directory-head h1{font-family:var(--x-font)!important;font-size:clamp(38px,5vw,58px)!important;line-height:1!important;letter-spacing:-.05em!important;font-weight:650!important}
.xv-public .pagehero p,.xv-public .tool-directory-head p{font-size:14px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-public .mono-kicker{color:var(--x-muted-2)!important;font-size:11px!important;text-transform:none!important;letter-spacing:0!important}
.xv-public .tool-directory{border:1px solid var(--x-border)!important;border-radius:var(--x-r4)!important;margin-top:24px!important;overflow:hidden!important;background:var(--x-panel)!important}
.xv-public .tool-directory-row{min-height:76px!important;padding:0 14px!important;border-bottom:1px solid var(--x-border)!important;background:transparent!important}
.xv-public .tool-directory-row:last-child{border-bottom:0!important}.xv-public .tool-directory-row:hover{background:var(--x-bg-2)!important}
.xv-public .tool-directory-no{font-family:var(--x-mono)!important;color:var(--x-muted-2)!important;font-size:10px!important}
.xv-public .tool-directory-copy b{font-size:13px!important;font-weight:590!important}.xv-public .tool-directory-copy small{font-size:12px!important;color:var(--x-muted)!important}
.xv-public .tool-directory-meta{border:1px solid var(--x-border)!important;border-radius:999px!important;background:var(--x-bg-2)!important;color:var(--x-muted)!important;font-size:10px!important}.xv-public .tool-directory-meta.live{color:var(--x-green)!important;border-color:color-mix(in srgb,var(--x-green) 30%,var(--x-border))!important;background:color-mix(in srgb,var(--x-green) 6%,var(--x-panel))!important}

/* VIDEO UPLOADER — settings/dashboard composition */
.xv-public .vu-shell{padding:50px 0 80px!important}
.xv-public .vu-title{padding-bottom:24px!important;margin-bottom:14px!important;border-bottom:1px solid var(--x-border)!important}
.xv-public .vu-title h1{font-family:var(--x-font)!important;font-size:36px!important;font-weight:650!important;letter-spacing:-.045em!important}
.xv-public .vu-title p{max-width:700px!important;font-size:13px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-public .vu-breadcrumb{font-size:11px!important;color:var(--x-muted-2)!important}
.xv-public .vu-gate{padding:12px 14px!important;border-radius:var(--x-r2)!important;margin:14px 0!important}.xv-public .vu-gate b{font-size:12px!important}.xv-public .vu-gate small{font-size:11px!important;color:var(--x-muted)!important}
.xv-public .vu-account-strip{display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important;gap:16px!important;padding:14px!important;border-radius:var(--x-r3)!important}
.xv-public .vu-avatar{border:1px solid var(--x-border)!important;background:var(--x-bg-2)!important;border-radius:var(--x-r2)!important}
.xv-public .vu-access{border-left:1px solid var(--x-border)!important;padding-left:16px!important}
.xv-public .vu-pro-section{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:28px!important;padding:28px 0!important;border-bottom:1px solid var(--x-border)!important;background:transparent!important}
.xv-public .vu-pro-section .vu-section-intro{align-items:flex-start!important}.xv-public .vu-step{font-family:var(--x-mono)!important;color:var(--x-muted-2)!important}
.xv-public .vu-section-intro h2,.xv-public .vu-section-head h2,.xv-public .vu-output-head h2{font-size:16px!important;font-weight:610!important;letter-spacing:-.02em!important}
.xv-public .vu-section-intro p{font-size:12px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-public .vu-api-box{padding:16px!important}.xv-public .vu-api-box label{font-size:11px!important;color:var(--x-muted)!important}
.xv-public .vu-main{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:18px!important;padding:28px 0!important}
.xv-public .vu-media-column{min-width:0!important}.xv-public .vu-picker{padding:14px!important;margin-top:10px!important}
.xv-public .vu-preview{border-radius:var(--x-r2)!important;border:1px solid var(--x-border)!important;background:#050505!important}
.xv-public .vu-config{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:12px!important}
.xv-public .vu-config-group{padding:14px!important}.xv-public .vu-config-title{font-size:12px!important;font-weight:600!important}
.xv-public .vu-config-group label{padding:10px 0!important;border-top:1px solid var(--x-border)!important}.xv-public .vu-config-group label>span{font-size:12px!important}.xv-public .vu-config-group label small{font-size:10px!important;color:var(--x-muted)!important}
.xv-public .vu-output-sticky{position:sticky!important;top:84px!important;padding:14px!important}.xv-public .vu-progress{height:4px!important;background:var(--x-bg-3)!important}.xv-public .vu-progress span{background:var(--x-text)!important}
.xv-public .vu-stats{grid-template-columns:repeat(2,1fr)!important;gap:0!important;border:1px solid var(--x-border)!important;border-radius:var(--x-r2)!important;overflow:hidden!important}.xv-public .vu-stats>div{padding:11px!important;border-right:1px solid var(--x-border)!important;border-bottom:1px solid var(--x-border)!important}.xv-public .vu-stats span{font-size:10px!important;color:var(--x-muted)!important}.xv-public .vu-stats b{font-size:18px!important;font-weight:620!important}
.xv-public .vu-output{min-height:240px!important;border-radius:var(--x-r2)!important;background:var(--x-bg-2)!important;font-size:11px!important;line-height:1.6!important}
.xv-public .vu-setup-list{display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:1px solid var(--x-border)!important;border-radius:var(--x-r3)!important;overflow:hidden!important}.xv-public .vu-setup-list>div{padding:14px!important;border-right:1px solid var(--x-border)!important}.xv-public .vu-setup-list b{font-size:12px!important}.xv-public .vu-setup-list p{font-size:11px!important;line-height:1.55!important;color:var(--x-muted)!important}

/* community / check / updates */
.xv-public .community-card{padding:18px!important}.xv-public .community-card h3{font-size:15px!important;font-weight:600!important}.xv-public .community-card p{font-size:13px!important;color:var(--x-muted)!important}
.xv-public .release{border-bottom:1px solid var(--x-border)!important;background:transparent!important}.xv-public .release:hover{background:var(--x-bg-2)!important}
.xv-public .checkbox{max-width:680px!important;padding:18px!important;margin-top:20px!important}.xv-public .checkbox h2{font-size:16px!important;font-weight:600!important}

/* MODALS */
.xv-public .modalbg{background:rgba(0,0,0,.62)!important;backdrop-filter:blur(3px)!important}
.xv-public .modal{border-radius:var(--x-r4)!important;background:var(--x-panel)!important;box-shadow:var(--x-shadow-pop)!important}

/* MOBILE PUBLIC — retain V3.40 bottom navigation, restyle it */
@media(max-width:920px){
  .xv-public body>.top,.xv-public header.top{display:none!important}
  .xv-public .wrap{width:min(100% - 24px,var(--x-max))!important;padding-bottom:100px!important}
  .xv-public .mobile-native-nav{
    left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:58px!important;padding:4px!important;
    border:1px solid var(--x-border-2)!important;border-radius:var(--x-r4)!important;background:color-mix(in srgb,var(--x-panel) 94%,transparent)!important;box-shadow:var(--x-shadow-pop)!important;backdrop-filter:blur(18px)!important;
  }
  .xv-public .mobile-native-link{height:48px!important;border-radius:var(--x-r2)!important;color:var(--x-muted)!important;font-size:9px!important;font-weight:540!important;letter-spacing:0!important;text-transform:none!important}
  .xv-public .mobile-native-link i{font-size:18px!important}.xv-public .mobile-native-link.on{background:var(--x-bg-3)!important;color:var(--x-text)!important}
  .xv-public .mobile-nav-drawer{border:1px solid var(--x-border-2)!important;border-radius:var(--x-r4)!important;background:color-mix(in srgb,var(--x-panel) 97%,transparent)!important;box-shadow:var(--x-shadow-pop)!important}
  .xv-public .mobile-pro-row,.xv-public .mobile-quick-card{border-radius:var(--x-r2)!important;background:transparent!important;border:0!important}.xv-public .mobile-pro-row:hover,.xv-public .mobile-quick-card:hover{background:var(--x-bg-3)!important}
  .xv-public .xh34-hero{grid-template-columns:1fr!important;gap:38px!important;min-height:auto!important;padding:54px 0 44px!important}
  .xv-public .xh34-hero-copy h1{font-size:clamp(48px,13vw,68px)!important}.xv-public .xh34-index{max-width:none!important}
  .xv-public .xh34-intro{grid-template-columns:1fr!important;gap:22px!important}.xv-public .xh34-intro-copy{grid-template-columns:1fr!important}
  .xv-public .xh34-section-head{grid-template-columns:1fr!important;gap:18px!important}.xv-public .xh34-process-grid{grid-template-columns:1fr!important}.xv-public .xh34-process-grid article{border-right:0!important;border-bottom:1px solid var(--x-border)!important;min-height:auto!important}.xv-public .xh34-infra,.xv-public .xh34-final{grid-template-columns:1fr!important;gap:30px!important}
  .xv-public .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .xv-public .vu-pro-section{grid-template-columns:1fr!important;gap:14px!important}.xv-public .vu-main{grid-template-columns:1fr!important}.xv-public .vu-output-sticky{position:static!important}.xv-public .vu-config{grid-template-columns:1fr!important}.xv-public .vu-account-strip{grid-template-columns:1fr!important}.xv-public .vu-access{border-left:0!important;border-top:1px solid var(--x-border)!important;padding:12px 0 0!important}.xv-public .vu-setup-list{grid-template-columns:1fr 1fr!important}
}
@media(max-width:560px){
  .xv-public .grid{grid-template-columns:1fr!important}.xv-public .xh34-hero-copy h1{font-size:46px!important}.xv-public .xh34-lead{font-size:15px!important}.xv-public .xh34-intro,.xv-public .xh34-capabilities,.xv-public .xh34-process,.xv-public .xh34-catalog-block,.xv-public .xh34-infra,.xv-public .xh34-final{padding:52px 0!important}.xv-public .vu-setup-list{grid-template-columns:1fr!important}.xv-public .vu-stats{grid-template-columns:1fr 1fr!important}
}

/* ========================================================================== 
   XAVIER EXPLORER
   ========================================================================== */
.xv-explorer .top{
  height:var(--x-header)!important;border-bottom:1px solid var(--x-border)!important;background:color-mix(in srgb,var(--x-bg) 92%,transparent)!important;box-shadow:none!important;backdrop-filter:blur(12px)!important
}
.xv-explorer .topin{width:min(var(--x-max),calc(100% - 40px))!important;margin:auto!important}
.xv-explorer .brand{font-family:var(--x-font)!important;font-size:14px!important;font-weight:650!important;text-transform:none!important}.xv-explorer .brandmark{border-radius:7px!important;background:var(--x-panel)!important;border-color:var(--x-border)!important}
.xv-explorer .topnav a,.xv-explorer .iconbtn{border-radius:var(--x-r1)!important}.xv-explorer .topnav a:hover,.xv-explorer .iconbtn:hover{background:var(--x-bg-3)!important}
.xv-explorer .shell{width:min(var(--x-max),calc(100% - 40px))!important;margin:0 auto!important;padding:42px 0 80px!important}
.xv-explorer .loading-screen{background:var(--x-bg)!important}
.xv-explorer .auth-wrap{min-height:calc(100vh - var(--x-header))!important;display:grid!important;place-items:center!important;padding:48px 16px!important}
.xv-explorer .auth-card{width:min(380px,100%)!important;padding:28px!important;border-radius:var(--x-r4)!important;box-shadow:var(--x-shadow)!important}
.xv-explorer .auth-logo{margin-bottom:18px!important}.xv-explorer .auth-card h1{font-size:24px!important;font-weight:650!important;letter-spacing:-.04em!important}.xv-explorer .auth-card p{font-size:13px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-explorer .google-btn,.xv-explorer .auth-compat-btn{height:40px!important;font-size:13px!important}.xv-explorer .auth-foot{font-size:11px!important;line-height:1.55!important;color:var(--x-muted-2)!important}
.xv-explorer .pagehead{padding-bottom:22px!important;border-bottom:1px solid var(--x-border)!important;margin-bottom:18px!important}.xv-explorer .pagehead h1{font-size:32px!important;font-weight:650!important;letter-spacing:-.045em!important}.xv-explorer .pagehead p{font-size:13px!important;color:var(--x-muted)!important}
.xv-explorer .dashboard{gap:14px!important}.xv-explorer .maincol,.xv-explorer .sidecol{gap:14px!important}.xv-explorer .panel{overflow:hidden!important}.xv-explorer .panelhead{min-height:46px!important;padding:0 14px!important;border-bottom:1px solid var(--x-border)!important;background:var(--x-bg-2)!important;font-size:13px!important;font-weight:600!important}.xv-explorer .panelbody{padding:14px!important}
.xv-explorer .identity-card{padding:0!important;overflow:hidden!important}.xv-explorer .profile-banner{height:116px!important;background:linear-gradient(135deg,var(--x-bg-2),var(--x-bg-3))!important;border-bottom:1px solid var(--x-border)!important}.xv-explorer .profile-content{padding:0 18px 18px!important}.xv-explorer .profile-avatar{border:4px solid var(--x-panel)!important;background:var(--x-bg-2)!important;box-shadow:none!important}.xv-explorer .profile-title h2{font-size:20px!important;font-weight:650!important}.xv-explorer .handle,.xv-explorer .bio,.xv-explorer .meta-row{font-size:12px!important;color:var(--x-muted)!important}
.xv-explorer .provider-card,.xv-explorer .product-card{padding:13px!important;border-radius:var(--x-r2)!important}.xv-explorer .provider-card:hover,.xv-explorer .product-card:hover{border-color:var(--x-border-3)!important;background:var(--x-bg-2)!important}.xv-explorer .provider-title-row b,.xv-explorer .product-copy b{font-size:13px!important;font-weight:600!important}.xv-explorer .provider-copy p,.xv-explorer .product-copy small{font-size:11px!important;color:var(--x-muted)!important}.xv-explorer .badge{border-radius:999px!important;background:var(--x-bg-2)!important;border-color:var(--x-border)!important;color:var(--x-muted)!important;font-size:10px!important}
.xv-explorer .formgrid{gap:12px!important}.xv-explorer .field label{font-size:12px!important;font-weight:500!important;color:var(--x-text-2)!important}.xv-explorer .field input,.xv-explorer .field textarea{min-height:36px!important;font-size:13px!important}.xv-explorer .editor{padding:14px!important}
.xv-explorer .mobile-native-nav{border-color:var(--x-border-2)!important;border-radius:var(--x-r4)!important;background:color-mix(in srgb,var(--x-panel) 94%,transparent)!important;box-shadow:var(--x-shadow-pop)!important}.xv-explorer .mobile-native-link{color:var(--x-muted)!important;font-size:9px!important;font-weight:540!important;letter-spacing:0!important;text-transform:none!important}.xv-explorer .mobile-native-link.on{background:var(--x-bg-3)!important;color:var(--x-text)!important}.xv-explorer .explorer-mobile-actions{border-color:var(--x-border-2)!important;background:var(--x-panel)!important;border-radius:var(--x-r3)!important;box-shadow:var(--x-shadow-pop)!important}

/* ========================================================================== 
   ADMIN — Vercel dashboard density + Xavier uppercase primary nav
   ========================================================================== */
.xv-admin{
  --xc-header-h:60px!important;--xc-rail:58px!important;--xc-rail-open:218px!important;
  --xc-bg:var(--x-bg)!important;--xc-bg-elev:var(--x-panel)!important;--xc-surface:var(--x-panel)!important;--xc-surface-2:var(--x-bg-2)!important;--xc-surface-3:var(--x-bg-3)!important;
  --xc-border:var(--x-border)!important;--xc-border-soft:var(--x-border)!important;--xc-border-strong:var(--x-border-2)!important;
  --xc-text:var(--x-text)!important;--xc-text-2:var(--x-text-2)!important;--xc-muted:var(--x-muted)!important;--xc-dim:var(--x-muted-2)!important;--xc-green:var(--x-green)!important;
}
.xv-admin .admin-global-header{
  height:60px!important;padding:0 16px!important;border-bottom:1px solid var(--x-border)!important;background:color-mix(in srgb,var(--x-panel) 94%,transparent)!important;backdrop-filter:blur(12px)!important;box-shadow:none!important
}
.xv-admin .admin-global-brand{gap:9px!important}.xv-admin .admin-global-brand .mark{width:30px!important;height:30px!important;flex-basis:30px!important;border-radius:7px!important;background:var(--x-panel)!important;border:1px solid var(--x-border)!important;box-shadow:none!important}.xv-admin .admin-global-brand-copy b{font-size:13px!important;font-weight:650!important;letter-spacing:-.02em!important}.xv-admin .admin-global-brand-copy small{font-size:9px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--x-muted-2)!important}
.xv-admin .adminhead strong{font-size:12px!important;font-weight:530!important}.xv-admin .adminhead #topTitle{font-size:11px!important;font-weight:520!important;letter-spacing:0!important;color:var(--x-muted)!important}.xv-admin .admin-env-pill,.xv-admin .admin-api-status{height:28px!important;min-height:28px!important;padding:0 9px!important;border-radius:999px!important;background:var(--x-bg-2)!important;border-color:var(--x-border)!important;font-size:10px!important;font-weight:500!important}.xv-admin .admin-icon-button{width:30px!important;height:30px!important;border-radius:var(--x-r1)!important;background:var(--x-panel)!important}
.xv-admin .rail{top:60px!important;height:calc(100vh - 60px)!important;padding:8px 7px!important;border-right:1px solid var(--x-border)!important;background:var(--x-bg-2)!important;box-shadow:none!important}
.xv-admin .rail:hover,.xv-admin .rail:focus-within,.xv-admin .rail.force-open{box-shadow:10px 0 28px rgba(0,0,0,.08)!important}
.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .nav button,.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .rail-utility{width:40px!important;height:38px!important;min-width:40px!important;min-height:38px!important;border-radius:var(--x-r1)!important;color:var(--x-muted)!important}
.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .nav button:hover,.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .rail-utility:hover{background:var(--x-panel)!important;color:var(--x-text)!important}
.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .nav button.on{background:var(--x-panel)!important;color:var(--x-text)!important;box-shadow:0 0 0 1px var(--x-border)!important}.xv-admin .rail:not(:hover):not(:focus-within):not(.force-open) .nav button.on::before{display:none!important}
.xv-admin .rail:hover .nav button,.xv-admin .rail:focus-within .nav button,.xv-admin .rail.force-open .nav button,.xv-admin .rail:hover .rail-utility,.xv-admin .rail:focus-within .rail-utility,.xv-admin .rail.force-open .rail-utility{height:36px!important;min-height:36px!important;padding:0 9px!important;border-radius:var(--x-r1)!important;font-size:11px!important;font-weight:520!important;letter-spacing:.025em!important;color:var(--x-muted)!important}.xv-admin .rail:hover .nav button:hover,.xv-admin .rail.force-open .nav button:hover,.xv-admin .rail:hover .rail-utility:hover{background:var(--x-panel)!important;color:var(--x-text)!important}.xv-admin .rail:hover .nav button.on,.xv-admin .rail.force-open .nav button.on{background:var(--x-panel)!important;color:var(--x-text)!important;box-shadow:0 0 0 1px var(--x-border)!important}.xv-admin .rail:hover .nav button.on::before,.xv-admin .rail.force-open .nav button.on::before{display:none!important}.xv-admin .rail:hover .nav button.on i,.xv-admin .rail.force-open .nav button.on i{color:var(--x-text)!important}
.xv-admin .main{background:var(--x-bg)!important}.xv-admin .content{max-width:1480px!important;padding:28px!important;margin:0 auto!important}
.xv-admin .headline{min-height:auto!important;margin-bottom:18px!important;padding-bottom:16px!important;border-bottom:1px solid var(--x-border)!important}.xv-admin .headline h2{font-size:24px!important;font-weight:650!important;letter-spacing:-.04em!important}.xv-admin .headline p{font-size:12px!important;line-height:1.6!important;color:var(--x-muted)!important}
.xv-admin .admin-section-nav{position:sticky!important;top:60px!important;z-index:120!important;margin:-28px -28px 24px!important;padding:0 28px!important;border-bottom:1px solid var(--x-border)!important;background:color-mix(in srgb,var(--x-bg) 95%,transparent)!important;backdrop-filter:blur(10px)!important}.xv-admin .admin-section-nav-inner{height:48px!important;display:flex!important;align-items:end!important;gap:20px!important}.xv-admin .admin-section-nav-label{display:none!important}.xv-admin .admin-section-nav-tabs{gap:20px!important;height:48px!important;align-items:stretch!important}.xv-admin .admin-section-tab{position:relative!important;height:48px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--x-muted)!important;font-size:11px!important;font-weight:540!important;letter-spacing:.045em!important}.xv-admin .admin-section-tab:hover{color:var(--x-text)!important}.xv-admin .admin-section-tab.on{color:var(--x-text)!important;background:transparent!important}.xv-admin .admin-section-tab.on::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:1px!important;background:var(--x-text)!important}
.xv-admin .stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.xv-admin .stat{min-height:108px!important;padding:14px!important;border-radius:var(--x-r3)!important}.xv-admin .stat span{font-size:11px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--x-muted)!important}.xv-admin .stat b{margin-top:12px!important;font-size:26px!important;font-weight:620!important;letter-spacing:-.045em!important}
.xv-admin .overview-grid,.xv-admin .split{gap:12px!important}.xv-admin .panel,.xv-admin .tablewrap,.xv-admin .buyers,.xv-admin .chat,.xv-admin .profile{border-radius:var(--x-r3)!important}.xv-admin .panelhead{min-height:46px!important;padding:0 14px!important;background:var(--x-bg-2)!important;border-bottom:1px solid var(--x-border)!important;font-size:12px!important;font-weight:570!important}.xv-admin .panelbody{padding:14px!important}
.xv-admin .btn{height:34px!important;min-height:34px!important;padding:0 11px!important;font-size:12px!important;font-weight:540!important;border-radius:var(--x-r1)!important}.xv-admin .btn.sm{height:30px!important;min-height:30px!important;font-size:11px!important}.xv-admin .btn.primary{background:var(--x-accent)!important;border-color:var(--x-accent)!important;color:var(--x-accent-fg)!important}
.xv-admin .search input,.xv-admin .field input,.xv-admin .field select,.xv-admin .select,.xv-admin .x-select-button{height:34px!important;font-size:12px!important;border-radius:var(--x-r1)!important}.xv-admin .field textarea{font-size:12px!important}.xv-admin .field label{font-size:11px!important;font-weight:520!important;letter-spacing:0!important;text-transform:none!important;color:var(--x-text-2)!important}
.xv-admin .x-select-menu{border-radius:var(--x-r2)!important;background:var(--x-panel)!important;border-color:var(--x-border-2)!important;box-shadow:var(--x-shadow-pop)!important}.xv-admin .x-select-option{font-size:12px!important;border-radius:var(--x-r1)!important}.xv-admin .x-select-option:hover{background:var(--x-bg-2)!important}.xv-admin .x-select-option.selected{background:var(--x-bg-3)!important;color:var(--x-text)!important}.xv-admin .x-select-option.selected::after{color:var(--x-text)!important}
.xv-admin .tablewrap{border:1px solid var(--x-border)!important;background:var(--x-panel)!important}.xv-admin table{min-width:760px!important}.xv-admin th{height:40px!important;padding:0 12px!important;background:var(--x-bg-2)!important;border-bottom:1px solid var(--x-border)!important;color:var(--x-muted)!important;font-size:10px!important;font-weight:550!important;letter-spacing:0!important;text-transform:none!important}.xv-admin td{padding:11px 12px!important;border-bottom:1px solid var(--x-border)!important;color:var(--x-text-2)!important;font-size:12px!important}.xv-admin tr:hover td{background:var(--x-bg-2)!important}.xv-admin .badge{min-height:21px!important;padding:0 7px!important;border-radius:999px!important;background:var(--x-bg-2)!important;border:1px solid var(--x-border)!important;color:var(--x-muted)!important;font-size:10px!important;font-weight:520!important;letter-spacing:0!important}.xv-admin .badge.green{color:var(--x-green)!important;background:color-mix(in srgb,var(--x-green) 6%,var(--x-panel))!important}.xv-admin .badge.red{color:var(--x-red)!important;background:color-mix(in srgb,var(--x-red) 6%,var(--x-panel))!important}
.xv-admin .log{padding:11px 0!important;border-bottom:1px solid var(--x-border)!important}.xv-admin .logicon{border-radius:var(--x-r1)!important;background:var(--x-bg-2)!important}.xv-admin .logmain b{font-size:12px!important}.xv-admin .logmain div{font-size:11px!important;color:var(--x-muted)!important}
.xv-admin .buyergrid{gap:12px!important}.xv-admin .buyer{min-height:58px!important;border-bottom:1px solid var(--x-border)!important}.xv-admin .buyer:hover{background:var(--x-bg-2)!important}.xv-admin .buyer.on{background:var(--x-bg-3)!important;box-shadow:inset 2px 0 var(--x-text)!important}.xv-admin .avatar{border-radius:var(--x-r2)!important;background:var(--x-bg-2)!important}.xv-admin .chathead{background:var(--x-bg-2)!important;border-bottom:1px solid var(--x-border)!important}.xv-admin .bubble{border-radius:var(--x-r3) var(--x-r3) 4px var(--x-r3)!important;background:var(--x-bg-2)!important;border-color:var(--x-border)!important;font-size:12px!important}.xv-admin .composer{background:var(--x-bg-2)!important}.xv-admin .profile{background:var(--x-panel)!important}
.xv-admin .modalbg{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(3px)!important}.xv-admin .modal{border-radius:var(--x-r4)!important;background:var(--x-panel)!important;box-shadow:var(--x-shadow-pop)!important}.xv-admin .modalhead,.xv-admin .modalfoot{background:var(--x-bg-2)!important;border-color:var(--x-border)!important}.xv-admin .login{background:var(--x-bg)!important}.xv-admin .loginbox{width:min(390px,calc(100% - 28px))!important;padding:22px!important;border-radius:var(--x-r4)!important;background:var(--x-panel)!important;box-shadow:var(--x-shadow)!important}.xv-admin .loginbox h2{font-size:22px!important;font-weight:650!important}.xv-admin .loginbox p{font-size:12px!important;color:var(--x-muted)!important}
.xv-admin .scriptbox{background:var(--x-bg-2)!important;border-color:var(--x-border)!important;border-radius:var(--x-r2)!important;color:var(--x-text-2)!important}.xv-admin .product-type-card{border-radius:var(--x-r3)!important;padding:14px!important}.xv-admin .product-type-card:hover{background:var(--x-bg-2)!important}.xv-admin .product-type-icon,.xv-admin .upload-kind-icon{background:var(--x-bg-2)!important;border-radius:var(--x-r2)!important}.xv-admin .guide-num,.xv-admin .resource-step>span{background:var(--x-bg-2)!important;border-radius:var(--x-r1)!important}.xv-admin .brand-preview,.xv-admin .bgpreview{border-radius:var(--x-r3)!important;background:var(--x-bg-2)!important}
@media(max-width:1100px){.xv-admin .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.xv-admin .content{padding:14px!important}.xv-admin .admin-section-nav{margin:-14px -14px 18px!important;padding:0 14px!important}.xv-admin .stats{grid-template-columns:1fr 1fr!important}.xv-admin .headline h2{font-size:21px!important}}

/* ========================================================================== 
   DOWNLOAD / DELIVERY
   ========================================================================== */
.xv-download .top{height:var(--x-header)!important;border-bottom:1px solid var(--x-border)!important;background:color-mix(in srgb,var(--x-bg) 92%,transparent)!important;backdrop-filter:blur(12px)!important;box-shadow:none!important}
.xv-download .topin,.xv-download .page{width:min(1080px,calc(100% - 40px))!important}.xv-download .brand{font-family:var(--x-font)!important;font-size:14px!important;text-transform:none!important;font-weight:650!important}.xv-download .brandmark{border-radius:7px!important;background:var(--x-panel)!important;border-color:var(--x-border)!important}.xv-download .status{font-size:11px!important;color:var(--x-muted)!important}
.xv-download .page{padding:54px 0 76px!important}.xv-download .pagehead{max-width:720px!important;margin-bottom:24px!important}.xv-download .crumb{font-size:11px!important;color:var(--x-muted-2)!important}.xv-download .pagehead h1{font-size:40px!important;font-weight:650!important;letter-spacing:-.05em!important}.xv-download .pagehead p{font-size:14px!important;line-height:1.6!important;color:var(--x-muted)!important}.xv-download .grid{gap:14px!important}.xv-download .panel{border-radius:var(--x-r4)!important;background:var(--x-panel)!important;border-color:var(--x-border)!important;box-shadow:none!important}.xv-download .preview{background:var(--x-bg-2)!important;border-bottom:1px solid var(--x-border)!important}.xv-download .assetbody{padding:18px!important}.xv-download .meta{font-size:11px!important;letter-spacing:0!important;text-transform:none!important;color:var(--x-muted-2)!important}.xv-download .assetname{font-size:20px!important;font-weight:650!important}.xv-download .assetdesc{font-size:13px!important;line-height:1.6!important}.xv-download .info{padding:11px!important;border-radius:var(--x-r2)!important;background:var(--x-bg-2)!important}.xv-download .info span{font-size:10px!important;letter-spacing:0!important;text-transform:none!important}.xv-download .sidehead{background:var(--x-bg-2)!important;border-bottom:1px solid var(--x-border)!important;font-size:12px!important}.xv-download .step{border-bottom:1px solid var(--x-border)!important}.xv-download .stepnum{background:var(--x-bg-2)!important;border-color:var(--x-border)!important;border-radius:var(--x-r1)!important}.xv-download .notice{background:var(--x-bg-2)!important;border-color:var(--x-border)!important;border-radius:var(--x-r2)!important;font-size:12px!important}.xv-download .footer{border-top:1px solid var(--x-border)!important;font-size:11px!important}.xv-download .toast{background:var(--x-panel)!important;border-color:var(--x-border-2)!important;box-shadow:var(--x-shadow-pop)!important;border-radius:var(--x-r2)!important}
@media(max-width:560px){.xv-download .topin,.xv-download .page{width:calc(100% - 24px)!important}.xv-download .pagehead h1{font-size:34px!important}}

/* ==========================================================================
   V3.42 — HEADER / DROPDOWN COLLISION FIX
   ========================================================================== */

html,
html[data-theme="light"],
html[data-theme="dark"]{
  color-scheme:dark!important;
  --x-bg:#000000!important;
  --x-bg-2:#0a0a0a!important;
  --x-bg-3:#111111!important;
  --x-panel:#0a0a0a!important;
  --x-panel-2:#111111!important;
  --x-panel-3:#161616!important;
  --x-border:#262626!important;
  --x-border-2:#333333!important;
  --x-border-3:#444444!important;
  --x-text:#ededed!important;
  --x-text-2:#d4d4d4!important;
  --x-muted:#a1a1a1!important;
  --x-muted-2:#737373!important;
  --x-faint:#555555!important;
  --x-accent:#ffffff!important;
  --x-accent-fg:#000000!important;
  --x-blue:#52a8ff!important;
  --x-green:#45d483!important;
  --x-red:#ff6369!important;
  --x-amber:#f5a524!important;
  --x-purple:#a78bfa!important;
}

#themeBtn,
#mobileThemeBtn,
#adminThemeBtn,
.desktop-theme,
.mobile-theme-button,
[title="Light / Dark mode"],
[title="Theme"]{
  display:none!important;
}

.xv-public .nav-dropdown{
  position:relative!important;
  height:100%!important;
  display:flex!important;
  align-items:stretch!important;
}

.xv-public .nav-dropdown>.dropbtn{
  height:100%!important;
  min-height:100%!important;
}

/* Critical: old project had top:43px!important. */
.xv-public .nav-dropdown>.platform-menu,
.xv-public .nav-dropdown>.tools-pro-menu{
  top:calc(100% + 8px)!important;
  margin-top:0!important;
  transform:none!important;
  z-index:800!important;
  background:#0a0a0a!important;
  border:1px solid var(--x-border-2)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.58)!important;
}

/* Platform opens directly under Platform instead of crossing the nav. */
.xv-public #platformDrop>.platform-menu{
  left:0!important;
  right:auto!important;
  width:370px!important;
}

/* Tools opens directly below Tools. */
.xv-public #toolsDrop>.tools-pro-menu{
  left:0!important;
  right:auto!important;
  width:380px!important;
  max-height:min(430px,calc(100vh - 90px))!important;
  overflow:auto!important;
}

.xv-public .pro-tool-search{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  background:#0a0a0a!important;
}

/* Active separator now sits directly under the nav text instead of
   floating on the very bottom edge of the header. */
.xv-public .navlink::after,
.xv-public .dropbtn::after{
  bottom:13px!important;
  left:10px!important;
  right:10px!important;
}

.xv-public .tools-pro-menu .tools-menu-section{
  padding:10px 0!important;
}

.xv-public .tools-pro-menu .tools-menu-section + .tools-menu-section{
  border-top:1px solid var(--x-border)!important;
}

.xv-public .tools-pro-menu .pro-tool-item{
  min-height:48px!important;
  padding:7px 8px!important;
  border-radius:7px!important;
}

.xv-public .tools-pro-menu .pro-tool-item:hover{
  background:#111!important;
}

/* ==========================================================================
   V3.42 — VIDEO UPLOADER LAYOUT FIX
   Section title first, separator immediately below it, content below.
   No narrow 220px column squeezing paragraphs vertically.
   ========================================================================== */

.xv-public .vu-pro-section{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:28px 0!important;
  border:0!important;
  border-bottom:1px solid var(--x-border)!important;
  border-radius:0!important;
  background:transparent!important;
}

.xv-public .vu-pro-section>.vu-section-intro{
  width:100%!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start!important;
  padding:0 0 14px!important;
  margin:0 0 16px!important;
  border-bottom:1px solid var(--x-border)!important;
}

.xv-public .vu-pro-section>.vu-section-intro .vu-step{
  margin:0!important;
}

.xv-public .vu-pro-section>.vu-section-intro h2{
  margin:4px 0 0!important;
  font-size:17px!important;
  line-height:1.25!important;
  font-weight:620!important;
  letter-spacing:-.025em!important;
}

.xv-public .vu-pro-section>.vu-section-intro p{
  margin:7px 0 0!important;
  max-width:720px!important;
  font-size:12px!important;
  line-height:1.6!important;
  color:var(--x-muted)!important;
}

/* Auth/API content now uses the complete section width. */
.xv-public .vu-auth>.vu-api-box{
  width:100%!important;
  margin:0!important;
}

/* Source + realtime remain 2 columns, but the right panel is not squeezed. */
.xv-public .vu-main{
  grid-template-columns:minmax(0,1fr) minmax(390px,.48fr)!important;
  gap:16px!important;
}

.xv-public .vu-media-column,
.xv-public .vu-output-column{
  min-width:0!important;
}

.xv-public .vu-output-sticky{
  width:100%!important;
  padding:16px!important;
  border-radius:10px!important;
}

/* Separator directly follows the section title block. */
.xv-public .vu-section-head,
.xv-public .vu-output-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:0 0 12px!important;
  margin:0 0 12px!important;
  border-bottom:1px solid var(--x-border)!important;
}

.xv-public .vu-section-head h2,
.xv-public .vu-output-head h2{
  margin:5px 0 0!important;
  line-height:1.25!important;
}

/* Realtime stats: four independent cards, not one glued 2x2 block. */
.xv-public .vu-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

.xv-public .vu-stats>div{
  min-height:76px!important;
  padding:12px!important;
  border:1px solid var(--x-border)!important;
  border-radius:8px!important;
  background:#111!important;
}

.xv-public .vu-stats>div:nth-child(n){
  border-right:1px solid var(--x-border)!important;
  border-bottom:1px solid var(--x-border)!important;
}

/* Required setup: one readable row per requirement.
   This replaces the four extremely narrow vertical cards from V3.41. */
.xv-public .vu-setup-list{
  width:100%!important;
  display:block!important;
  overflow:hidden!important;
  border:1px solid var(--x-border)!important;
  border-radius:10px!important;
  background:var(--x-panel)!important;
}

.xv-public .vu-setup-list>div{
  min-height:76px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:34px minmax(150px,190px) minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  padding:14px!important;
  border:0!important;
  border-right:0!important;
  border-bottom:1px solid var(--x-border)!important;
  border-radius:0!important;
  background:transparent!important;
}

.xv-public .vu-setup-list>div:last-child{
  border-bottom:0!important;
}

.xv-public .vu-setup-list>div:hover{
  background:#0f0f0f!important;
}

.xv-public .vu-setup-list span{
  font-family:var(--x-mono)!important;
  font-size:10px!important;
  color:var(--x-muted-2)!important;
}

.xv-public .vu-setup-list b{
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.35!important;
}

.xv-public .vu-setup-list p{
  grid-column:auto!important;
  margin:0!important;
  max-width:760px!important;
  color:var(--x-muted)!important;
  font-size:12px!important;
  line-height:1.6!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Module output header keeps its separator immediately under Framedata. */
.xv-public .vu-output-head{
  margin-top:18px!important;
}

@media(max-width:1040px){
  .xv-public .vu-main{
    grid-template-columns:1fr!important;
  }
  .xv-public .vu-output-sticky{
    position:static!important;
  }
}

@media(max-width:720px){
  .xv-public .vu-pro-section{
    padding:22px 0!important;
  }

  .xv-public .vu-pro-section>.vu-section-intro{
    grid-template-columns:30px minmax(0,1fr)!important;
  }

  .xv-public .vu-setup-list>div{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
  }

  .xv-public .vu-setup-list p{
    grid-column:2!important;
    margin-top:2px!important;
  }

  .xv-public .vu-stats{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:420px){
  .xv-public .vu-stats{
    grid-template-columns:1fr!important;
  }
}

/* ==========================================================================
   V3.43 — SOUND UPLOADER
   ========================================================================== */
.su-shell{padding:48px 0 90px!important}
.su-title{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;padding-bottom:24px!important;margin-bottom:14px!important;border-bottom:1px solid var(--x-border)!important}
.su-title h1{margin:4px 0 7px!important;font-size:36px!important;font-weight:650!important;letter-spacing:-.045em!important}
.su-title p{margin:0!important;max-width:720px!important;color:var(--x-muted)!important;font-size:13px!important;line-height:1.65!important}
.su-section{padding:28px 0!important;border-bottom:1px solid var(--x-border)!important}
.su-section-head{padding:0 0 13px!important;margin-bottom:14px!important;border-bottom:1px solid var(--x-border)!important}
.su-section-head>div{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:12px!important}
.su-section-head>div>span{font-family:var(--x-mono)!important;color:var(--x-muted-2)!important;font-size:10px!important;padding-top:4px!important}
.su-section-head small{display:block!important;color:var(--x-muted-2)!important;font-size:10px!important;letter-spacing:.08em!important}
.su-section-head h2{margin:3px 0 0!important;font-size:17px!important;font-weight:620!important;letter-spacing:-.025em!important}
.su-card{padding:15px!important;border:1px solid var(--x-border)!important;border-radius:10px!important;background:#0a0a0a!important}
.su-card>label{display:block!important;margin:0 0 7px!important;color:var(--x-muted)!important;font-size:10px!important;font-weight:600!important;letter-spacing:.07em!important}
.su-card input[type=text],.su-card input[type=password],.su-card input[type=url],.su-card input[inputmode=numeric],.su-card select,.su-card textarea{width:100%!important;min-height:36px!important;border:1px solid var(--x-border-2)!important;border-radius:7px!important;background:#080808!important;color:var(--x-text)!important;padding:0 10px!important}
.su-card textarea{min-height:92px!important;padding:10px!important;resize:vertical!important}
.su-card input:focus,.su-card textarea:focus,.su-card select:focus{border-color:#777!important;box-shadow:none!important}
.su-help{margin:8px 0 0!important;color:var(--x-muted)!important;font-size:11px!important;line-height:1.55!important}
.su-source-grid,.su-config-grid,.su-result-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)!important;gap:14px!important}
.su-source-tabs{display:flex!important;gap:14px!important;margin:-2px 0 14px!important;border-bottom:1px solid var(--x-border)!important}
.su-source-tabs button{position:relative!important;height:36px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--x-muted)!important;font-size:10px!important;font-weight:620!important;letter-spacing:.06em!important;cursor:pointer!important}
.su-source-tabs button.on{color:var(--x-text)!important}
.su-source-tabs button.on:after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:1px!important;background:#fff!important}
.su-drop{width:100%!important;min-height:132px!important;border:1px dashed var(--x-border-2)!important;border-radius:9px!important;background:#080808!important;color:var(--x-text)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;cursor:pointer!important}
.su-drop:hover{border-color:#555!important;background:#0d0d0d!important}
.su-drop i{font-size:24px!important}.su-drop b{font-size:13px!important}.su-drop small{font-size:11px!important;color:var(--x-muted)!important}
.su-file-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-top:12px!important;padding-top:12px!important;border-top:1px solid var(--x-border)!important}
.su-file-meta b{font-size:12px!important;font-weight:600!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.su-file-meta span{font-size:10px!important;color:var(--x-muted)!important;white-space:nowrap!important}
#suPreview{width:100%!important;height:42px!important;margin-top:12px!important}
.su-playback-card h3{margin:3px 0 5px!important;font-size:17px!important;font-weight:620!important}.su-playback-card>small{color:var(--x-muted-2)!important;font-size:10px!important;letter-spacing:.08em!important}.su-playback-card>p{color:var(--x-muted)!important;font-size:11px!important;line-height:1.55!important;margin:0 0 18px!important}
.su-playback-card label{display:flex!important;justify-content:space-between!important}.su-playback-card input[type=range]{width:100%!important;accent-color:#fff!important}
.su-playback-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:12px 0!important}.su-playback-stats>div{padding:10px!important;border:1px solid var(--x-border)!important;border-radius:8px!important;background:#080808!important}.su-playback-stats span{display:block!important;color:var(--x-muted)!important;font-size:10px!important}.su-playback-stats b{display:block!important;margin-top:3px!important;font-size:16px!important}
.su-config-grid .su-card{display:grid!important;gap:9px!important}.su-check{display:flex!important;gap:9px!important;align-items:flex-start!important;margin-top:5px!important;letter-spacing:0!important}.su-check input{width:15px!important;height:15px!important;min-height:15px!important;flex:0 0 15px!important;margin-top:2px!important}.su-check span{color:var(--x-muted)!important;font-size:11px!important;line-height:1.5!important}
.su-upload-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}.su-upload-row>div{display:grid!important;gap:3px!important}.su-upload-row b{font-size:13px!important}.su-upload-row span{color:var(--x-muted)!important;font-size:11px!important}
.su-progress{height:3px!important;margin-top:13px!important;border-radius:999px!important;background:#191919!important;overflow:hidden!important}.su-progress span{display:block!important;width:0;height:100%!important;background:#fff!important;transition:width .25s ease!important}
.su-result-label{display:block!important;color:var(--x-muted-2)!important;font-size:10px!important;letter-spacing:.08em!important}.su-asset-id{display:block!important;margin:10px 0!important;font-family:var(--x-mono)!important;font-size:28px!important;font-weight:600!important;letter-spacing:-.04em!important}
.su-result-grid .scriptbox{min-height:150px!important;margin:8px 0 10px!important}
.su-safety{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin-top:24px!important;border:1px solid var(--x-border)!important;border-radius:10px!important;overflow:hidden!important}.su-safety>div{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:10px!important;padding:14px!important;border-right:1px solid var(--x-border)!important}.su-safety>div:last-child{border-right:0!important}.su-safety i{font-size:17px!important;color:var(--x-text)!important}.su-safety b{display:block!important;font-size:12px!important;font-weight:600!important}.su-safety small{display:block!important;margin-top:3px!important;color:var(--x-muted)!important;font-size:10px!important;line-height:1.45!important}
.tool-coming.live{color:var(--x-green)!important;border-color:color-mix(in srgb,var(--x-green) 30%,var(--x-border))!important}
@media(max-width:860px){.su-source-grid,.su-config-grid,.su-result-grid{grid-template-columns:1fr!important}.su-safety{grid-template-columns:1fr!important}.su-safety>div{border-right:0!important;border-bottom:1px solid var(--x-border)!important}.su-safety>div:last-child{border-bottom:0!important}}
@media(max-width:560px){.su-shell{padding:34px 0 90px!important}.su-title{display:grid!important}.su-title h1{font-size:30px!important}.su-file-meta{align-items:flex-start!important;flex-direction:column!important}.su-file-meta span{white-space:normal!important}.su-upload-row{align-items:flex-start!important;flex-direction:column!important}.su-upload-row .btn{width:100%!important}.su-playback-stats{grid-template-columns:1fr!important}}


/* V3.44 — reciprocal Studio restore speed */
.su-restore-box{
  margin:12px 0!important;
  padding:14px!important;
  border:1px solid var(--x-border-2)!important;
  border-radius:9px!important;
  background:#080808!important;
}
.su-restore-box>span{
  display:block!important;
  color:var(--x-muted-2)!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}
.su-restore-box>b{
  display:block!important;
  margin:6px 0 3px!important;
  color:#fff!important;
  font-family:var(--x-mono)!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
}
.su-restore-box>small{
  color:var(--x-muted)!important;
  font-size:10px!important;
}
.su-restore-result{
  display:block!important;
  margin:10px 0 5px!important;
  color:#fff!important;
  font-family:var(--x-mono)!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
}
.su-result-note{
  display:block!important;
  color:var(--x-muted)!important;
  font-size:10px!important;
  line-height:1.5!important;
}
.su-result-label-gap{
  margin-top:18px!important;
}


/* Sound playback number formatting */
.su-restore-box>b,
.su-restore-result{
  font-variant-numeric:tabular-nums!important;
}


/* V3.46 — web speed / Studio inverse calibration */
.su-speed-presets{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
  margin:10px 0 12px!important;
}
.su-speed-presets button{
  min-height:30px!important;
  padding:0 8px!important;
  border:1px solid var(--x-border)!important;
  border-radius:7px!important;
  background:#080808!important;
  color:var(--x-muted)!important;
  font-size:10px!important;
  font-weight:600!important;
  cursor:pointer!important;
}
.su-speed-presets button:hover{
  color:var(--x-text)!important;
  border-color:var(--x-border-2)!important;
}
.su-speed-presets button.on{
  background:#fff!important;
  border-color:#fff!important;
  color:#000!important;
}
@media(max-width:560px){
  .su-speed-presets{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* V3.49 — actual process -> upload pipeline */
.su-progress{
  position:relative!important;
}
.su-progress span{
  transition:width .28s cubic-bezier(.2,.8,.2,1)!important;
}
#suRunText{
  max-width:760px!important;
}


/* V3.50 — visible processing status */
.su-upload-row #suRunTitle{
  font-size:14px!important;
  font-weight:650!important;
}
.su-upload-row #suRunText{
  display:block!important;
  margin-top:4px!important;
  max-width:780px!important;
  color:var(--x-muted)!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.su-progress{
  height:5px!important;
  margin-top:14px!important;
  background:#161616!important;
}
.su-progress span{
  min-width:0!important;
  background:#fff!important;
  transition:width .2s linear!important;
}


/* V3.51 — universal sound source */
.su-universal-input{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
}
.su-source-platforms{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:10px 0!important;
}
.su-source-platforms span{
  padding:4px 7px!important;
  border:1px solid var(--x-border)!important;
  border-radius:999px!important;
  color:var(--x-muted-2)!important;
  font-size:9px!important;
  line-height:1!important;
}
.su-source-platforms span.live{
  color:var(--x-green)!important;
  border-color:color-mix(in srgb,var(--x-green) 30%,var(--x-border))!important;
}
.su-source-status{
  min-height:36px!important;
  padding:9px 10px!important;
  border:1px solid var(--x-border)!important;
  border-radius:7px!important;
  background:#080808!important;
  color:var(--x-muted)!important;
  font-size:10px!important;
  line-height:1.5!important;
}
.su-source-status[data-state="ready"]{
  color:var(--x-green)!important;
}
.su-source-status[data-state="blocked"]{
  color:var(--x-amber)!important;
}
@media(max-width:520px){
  .su-universal-input{
    grid-template-columns:1fr!important;
  }
}


/* V3.52 — authorized universal source fallback */
.su-authorized-fallback{
  margin-top:10px!important;
  padding:12px!important;
  border:1px solid var(--x-border)!important;
  border-radius:9px!important;
  background:#0a0a0a!important;
}
.su-authorized-fallback[hidden]{
  display:none!important;
}
.su-fallback-head{
  display:grid!important;
  gap:3px!important;
  margin-bottom:12px!important;
}
.su-fallback-head b{
  font-size:12px!important;
  font-weight:600!important;
}
.su-fallback-head small{
  color:var(--x-muted)!important;
  font-size:10px!important;
  line-height:1.5!important;
}
.su-authorized-fallback>label{
  display:block!important;
  margin:0 0 6px!important;
  color:var(--x-muted)!important;
  font-size:10px!important;
  letter-spacing:.06em!important;
}
.su-fallback-or{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:11px 0!important;
  color:var(--x-muted-2)!important;
  font-size:9px!important;
}
.su-fallback-or:before,
.su-fallback-or:after{
  content:""!important;
  flex:1!important;
  height:1px!important;
  background:var(--x-border)!important;
}
.su-drop.compact{
  min-height:82px!important;
}


/* V3.53 — auto 6:50 cap + fade information */
.su-auto-audio-policy{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  margin-top:12px!important;
}
.su-auto-audio-policy>div{
  min-width:0!important;
  padding:10px!important;
  border:1px solid var(--x-border)!important;
  border-radius:8px!important;
  background:#080808!important;
}
.su-auto-audio-policy span{
  display:block!important;
  color:var(--x-muted-2)!important;
  font-size:9px!important;
  letter-spacing:.07em!important;
}
.su-auto-audio-policy b{
  display:block!important;
  margin-top:3px!important;
  color:var(--x-text)!important;
  font-size:13px!important;
  font-weight:620!important;
}
.su-auto-audio-policy small{
  display:block!important;
  margin-top:3px!important;
  color:var(--x-muted)!important;
  font-size:9px!important;
  line-height:1.45!important;
}
.su-source-status[data-state="checking"]{
  color:var(--x-blue)!important;
}
@media(max-width:620px){
  .su-auto-audio-policy{
    grid-template-columns:1fr!important;
  }
}


/* V3.54 — Sound Uploader resolver/toast UX */
.su-source-platforms span.detect{
  color:var(--x-muted)!important;
  border-style:dashed!important;
}
.su-source-status[data-state="info"]{
  color:var(--x-text)!important;
}


/* V3.55 — backend import success + preview flow */
.su-import-success{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  margin-top:9px!important;
  padding:10px!important;
  border:1px solid color-mix(in srgb,var(--x-green) 35%,var(--x-border))!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--x-green) 7%,#080808)!important;
}
.su-import-success[hidden]{
  display:none!important;
}
.su-import-success-icon{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:7px!important;
  color:var(--x-green)!important;
  background:color-mix(in srgb,var(--x-green) 10%,#080808)!important;
}
.su-import-success b{
  display:block!important;
  color:var(--x-text)!important;
  font-size:11px!important;
  font-weight:620!important;
}
.su-import-success span{
  display:block!important;
  margin-top:2px!important;
  color:var(--x-muted)!important;
  font-size:10px!important;
}


/* V3.56 — persistent source alias */
.su-save-alias{
  width:100%!important;
  margin-top:8px!important;
}
.su-source-status[data-state="ready"]{
  border-color:color-mix(in srgb,var(--x-green) 35%,var(--x-border))!important;
  background:color-mix(in srgb,var(--x-green) 5%,#080808)!important;
}


/* V3.57 — YouTube backend audio import */
.su-source-platforms span.ready{
  color:var(--x-text)!important;
  border-color:var(--x-border-strong)!important;
}


/* V3.58 — YouTube direct backend import */
.su-source-platforms span.ready{
  border-style:solid!important;
}


/* V3.59 — realtime YouTube import progress */
.su-youtube-progress{
  margin-top:9px!important;
  padding:12px!important;
  border:1px solid var(--x-border)!important;
  border-radius:9px!important;
  background:#080808!important;
}
.su-youtube-progress[hidden]{
  display:none!important;
}
.su-youtube-progress-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.su-youtube-progress-head>div{
  min-width:0!important;
}
.su-youtube-progress-head b{
  display:block!important;
  color:var(--x-text)!important;
  font-size:11px!important;
  font-weight:620!important;
}
.su-youtube-progress-head span{
  display:block!important;
  margin-top:4px!important;
  color:var(--x-muted)!important;
  font-size:9px!important;
  line-height:1.45!important;
  word-break:break-word!important;
}
.su-youtube-progress-head strong{
  flex:0 0 auto!important;
  color:var(--x-text)!important;
  font-size:12px!important;
  font-variant-numeric:tabular-nums!important;
}
.su-youtube-progress-track{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  height:4px!important;
  margin-top:10px!important;
  border-radius:999px!important;
  background:#1b1b1b!important;
}
.su-youtube-progress-track span{
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:0;
  border-radius:inherit!important;
  background:#ededed!important;
  transition:width .25s ease!important;
}
.su-youtube-progress-foot{
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:8px!important;
  color:var(--x-muted-2)!important;
  font-size:8px!important;
  letter-spacing:.05em!important;
}


/* V3.60 — inline YouTube permission + direct start */
.su-youtube-rights{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin-top:9px!important;
  padding:10px 11px!important;
  border:1px solid var(--x-border)!important;
  border-radius:8px!important;
  background:#080808!important;
  cursor:pointer!important;
}
.su-youtube-rights[hidden]{
  display:none!important;
}
.su-youtube-rights input{
  flex:0 0 auto!important;
  margin-top:2px!important;
}
.su-youtube-rights span{
  min-width:0!important;
}
.su-youtube-rights b{
  display:block!important;
  color:var(--x-text)!important;
  font-size:10px!important;
  font-weight:620!important;
}
.su-youtube-rights small{
  display:block!important;
  margin-top:2px!important;
  color:var(--x-muted)!important;
  font-size:9px!important;
  line-height:1.45!important;
}


/* V3.61 — yt-dlp runtime/auth diagnostics */
.su-youtube-progress-foot span:first-child{
  max-width:60%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


/* V3.64 — Explorer mobile toast visibility + direct logout */
@media(max-width:720px){
  .xv-explorer .toast{
    position:fixed!important;
    top:calc(10px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    z-index:2500!important;
    padding:12px 13px!important;
    border:1px solid var(--x-border-2)!important;
    border-radius:var(--x-r2)!important;
    background:color-mix(in srgb,var(--x-panel) 97%,transparent)!important;
    color:var(--x-text)!important;
    box-shadow:var(--x-shadow-pop)!important;
    font-size:11px!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    pointer-events:none!important;
    -webkit-backdrop-filter:blur(18px)!important;
    backdrop-filter:blur(18px)!important;
  }
  .xv-explorer .toast.show{display:block!important}
  .xv-explorer .mobile-signout-link{color:var(--x-text)!important}
}

/* ========================================================================== 
   XAVIER STUDIO V3.66 — MONO GLASS UI REVAMP
   One visual system for Storefront, Tools, Explorer, Download and Admin.
   ========================================================================== */

html[data-theme="dark"]{
  --x-bg:#020202;
  --x-bg-2:#070707;
  --x-bg-3:#0d0d0d;
  --x-panel:#090909;
  --x-panel-2:#0e0e0e;
  --x-panel-3:#141414;
  --x-border:rgba(255,255,255,.075);
  --x-border-2:rgba(255,255,255,.12);
  --x-border-3:rgba(255,255,255,.20);
  --x-text:#f5f5f5;
  --x-text-2:#d7d7d7;
  --x-muted:#8f8f8f;
  --x-muted-2:#5f5f5f;
  --x-faint:#3e3e3e;
  --x-accent:#ffffff;
  --x-accent-fg:#050505;
  --x-blue:#f5f5f5;
  --x-green:#ededed;
  --x-red:#ff737a;
  --x-amber:#d4d4d4;
  --x-purple:#dcdcdc;
  --x-shadow:0 14px 44px rgba(0,0,0,.28);
  --x-shadow-pop:0 28px 88px rgba(0,0,0,.58);
}

html[data-theme="dark"] body.xv-public,
html[data-theme="dark"] body.xv-explorer,
html[data-theme="dark"] body.xv-download,
html[data-theme="dark"] body.xv-admin{
  background:
    radial-gradient(900px 420px at 18% -10%,rgba(255,255,255,.075),transparent 62%),
    radial-gradient(720px 360px at 84% 4%,rgba(255,255,255,.035),transparent 66%),
    linear-gradient(145deg,#020202 0%,#070707 48%,#020202 100%)!important;
  background-attachment:fixed!important;
}

/* ---- Public / Storefront glass header ---------------------------------- */
.xv-public>.top,
.xv-explorer>.top,
.xv-download>.top{
  height:68px!important;
  border:0!important;
  background:rgba(4,4,4,.68)!important;
  -webkit-backdrop-filter:blur(28px) saturate(135%)!important;
  backdrop-filter:blur(28px) saturate(135%)!important;
  box-shadow:0 12px 42px rgba(0,0,0,.22)!important;
}
.xv-public>.top::after,
.xv-explorer>.top::after,
.xv-download>.top::after{display:none!important}
.xv-public .topin,
.xv-explorer .topin,
.xv-download .topin{
  width:min(1320px,calc(100% - 36px))!important;
  height:68px!important;
}
.xv-public .brand,
.xv-explorer .brand,
.xv-download .brand{gap:10px!important;color:#f2f2f2!important}
.xv-public .brandmark,
.xv-explorer .brandmark,
.xv-download .brandmark{
  width:36px!important;height:36px!important;border-radius:11px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 26px rgba(0,0,0,.24)!important;
}

/* Primary desktop navigation is icon-only. No underline competing with header. */
.xv-public .platform-nav,
.xv-explorer .topnav{
  height:68px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-left:18px!important;
  overflow:visible!important;
}
.xv-public .navlink,
.xv-public .dropbtn,
.xv-explorer .topnav>a{
  position:relative!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#777!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.xv-public .navlink>span,
.xv-public .dropbtn>span,
.xv-public .nav-caret,
.xv-explorer .topnav>a>span{display:none!important}
.xv-public .navlink>i:first-child,
.xv-public .dropbtn>i:first-child,
.xv-explorer .topnav>a>i{
  display:block!important;
  margin:0!important;
  font-size:18px!important;
  color:inherit!important;
}
.xv-public .navlink::after,
.xv-public .dropbtn::after{display:none!important}
.xv-public .navlink:hover,
.xv-public .dropbtn:hover,
.xv-public .nav-dropdown.open>.dropbtn,
.xv-public .navlink.on,
.xv-public .nav-dropdown.route-active>.dropbtn,
.xv-explorer .topnav>a:hover{
  border-color:rgba(255,255,255,.105)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;
  color:#f4f4f4!important;
  transform:translateY(-1px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 24px rgba(0,0,0,.18)!important;
}
.xv-public .navlink.on,
.xv-public .nav-dropdown.route-active>.dropbtn{
  border-color:rgba(255,255,255,.16)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035))!important;
  color:#fff!important;
}
.xv-public .navlink[data-tip]::before,
.xv-public .dropbtn[data-tip]::before,
.xv-explorer .topnav>a[data-tip]::before{
  content:attr(data-tip)!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:50%!important;
  translate:-50% -4px!important;
  z-index:2500!important;
  padding:6px 8px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:7px!important;
  background:rgba(10,10,10,.94)!important;
  color:#ededed!important;
  box-shadow:0 14px 34px rgba(0,0,0,.42)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
  font:650 9px/1.1 var(--x-font)!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .15s ease,translate .15s ease,visibility .15s!important;
}
.xv-public .navlink[data-tip]:hover::before,
.xv-public .dropbtn[data-tip]:hover::before,
.xv-explorer .topnav>a[data-tip]:hover::before{
  opacity:1!important;visibility:visible!important;translate:-50% 0!important;
}

/* Header dropdowns: monochrome frosted panels. */
.xv-public .platform-menu,
.xv-public .tools-pro-menu,
.xv-public .account-popover{
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(7,7,7,.90)!important;
  -webkit-backdrop-filter:blur(30px) saturate(125%)!important;
  backdrop-filter:blur(30px) saturate(125%)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.56)!important;
}
.xv-public .nav-menu-item,
.xv-public .tool-item,
.xv-public .account-pop-links>a,
.xv-public .account-pop-links>button{
  border-color:transparent!important;
  background:transparent!important;
}
.xv-public .nav-menu-item:hover,
.xv-public .tool-item:hover,
.xv-public .account-pop-links>a:hover,
.xv-public .account-pop-links>button:hover{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.075)!important;
}
.xv-public .nav-menu-item>i:first-child,
.xv-public .tool-item-icon i{color:#ededed!important}
.xv-public .tool-license-pill,
.xv-public .tool-coming.live{
  color:#e8e8e8!important;border-color:rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important;
}

/* Top actions also belong to the same glass language. */
.xv-public .topright .btn,
.xv-public .account-top-btn,
.xv-explorer .topright .btn{
  min-height:38px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018))!important;
  color:#d9d9d9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.xv-public .topright .btn:hover,
.xv-public .account-top-btn:hover,
.xv-explorer .topright .btn:hover{
  border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.09)!important;color:#fff!important;
}
.xv-public .topright .btn.primary{background:#f1f1f1!important;color:#080808!important;border-color:#f1f1f1!important}
.xv-public .topright .btn.discord{background:rgba(255,255,255,.055)!important;color:#e6e6e6!important}

/* ---- Shared monochrome surfaces ---------------------------------------- */
.xv-public .card,
.xv-public .explore-card,
.xv-public .capability-card,
.xv-public .quick-card,
.xv-public .toolcard,
.xv-public .tool-directory-row,
.xv-public .vu-gate,
.xv-public .vu-account-strip,
.xv-public .vu-auth,
.xv-public .vu-main,
.xv-public .vu-setup,
.xv-public .vu-config-group,
.xv-public .vu-output-sticky,
.xv-public .su-section,
.xv-public .su-card,
.xv-explorer .panel,
.xv-explorer .hero-panel,
.xv-explorer .step,
.xv-explorer .userpill,
.xv-download .panel{
  border-color:rgba(255,255,255,.085)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.037),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 52px rgba(0,0,0,.16)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
.xv-public .card:hover,
.xv-public .explore-card:hover,
.xv-public .capability-card:hover,
.xv-public .quick-card:hover,
.xv-public .toolcard:hover,
.xv-public .tool-directory-row:hover,
.xv-explorer .panel:hover{
  border-color:rgba(255,255,255,.145)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
}
.xv-public input,
.xv-public textarea,
.xv-public select,
.xv-explorer input,
.xv-explorer textarea,
.xv-explorer select,
.xv-admin input,
.xv-admin textarea,
.xv-admin select{
  border-color:rgba(255,255,255,.085)!important;
  background:#080808!important;
  color:#ededed!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.xv-public input:focus,
.xv-public textarea:focus,
.xv-public select:focus,
.xv-explorer input:focus,
.xv-explorer textarea:focus,
.xv-explorer select:focus,
.xv-admin input:focus,
.xv-admin textarea:focus,
.xv-admin select:focus{
  outline:none!important;border-color:rgba(255,255,255,.23)!important;box-shadow:0 0 0 3px rgba(255,255,255,.045)!important;
}

/* ---- Tools: less old card UI, more focused workspace ------------------- */
.xv-public .tool-directory{
  border-top:1px solid rgba(255,255,255,.075)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}
.xv-public .tool-directory-row{
  min-height:78px!important;margin:0!important;border-radius:0!important;border-width:0 0 1px!important;
  border-color:rgba(255,255,255,.065)!important;background:transparent!important;box-shadow:none!important;
}
.xv-public .tool-directory-row:last-child{border-bottom:0!important}
.xv-public .tool-directory-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012))!important;transform:none!important}
.xv-public .tool-directory-no{color:#555!important}
.xv-public .tool-directory-meta.live{color:#efefef!important}
.xv-public .vu-shell,
.xv-public .su-shell{max-width:1240px!important}
.xv-public .vu-title h1,
.xv-public .su-title h1,
.xv-public .tool-directory-head h1{color:#f5f5f5!important;letter-spacing:-.045em!important}
.xv-public .vu-progress{background:#171717!important;border:1px solid rgba(255,255,255,.055)!important}
.xv-public .vu-progress>span{background:linear-gradient(90deg,#757575,#f4f4f4)!important}
.xv-public .vu-status-dot{background:#ededed!important;box-shadow:0 0 0 4px rgba(255,255,255,.05)!important}
.xv-public .su-source-tab.on,
.xv-public .vu-segmented button.on{background:#ededed!important;color:#070707!important;border-color:#ededed!important}
.xv-public .su-drop:hover,
.xv-public .vu-picker:hover{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.025)!important}

/* ---- Explorer: current account UI -------------------------------------- */
.xv-explorer .shell{width:min(1320px,calc(100% - 36px))!important;padding-top:32px!important}
.xv-explorer .pagehead{margin-bottom:22px!important;border:0!important;padding-bottom:0!important}
.xv-explorer .pagehead h1{font-size:36px!important;letter-spacing:-.055em!important}
.xv-explorer .dashboard{grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)!important;gap:14px!important}
.xv-explorer .maincol,.xv-explorer .sidecol{gap:14px!important}
.xv-explorer .panel,.xv-explorer .hero-panel,.xv-explorer .step{border-radius:14px!important}
.xv-explorer .panelhead{
  min-height:52px!important;border-color:rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.012)!important;
}
.xv-explorer .panelhead b{font:750 10px/1 Montserrat,var(--x-font)!important;letter-spacing:.02em!important}
.xv-explorer .profile-banner{
  height:156px!important;
  background:
    radial-gradient(420px 180px at 20% 10%,rgba(255,255,255,.13),transparent 60%),
    linear-gradient(135deg,#171717,#050505 58%,#101010)!important;
}
.xv-explorer .profile-avatar{border-color:#0a0a0a!important;background:#111!important;box-shadow:0 16px 44px rgba(0,0,0,.42)!important}
.xv-explorer .connect-row{padding:12px 0!important;border-color:rgba(255,255,255,.065)!important}
.xv-explorer .connect-logo{
  width:40px!important;height:40px!important;border-radius:11px!important;
  border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.025)!important;
}
.xv-explorer .provider-avatar,
.xv-explorer .provider-login,
.xv-explorer .provider-logout{
  border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.035)!important;color:#e9e9e9!important;
}
.xv-explorer .provider-login:hover,
.xv-explorer .provider-logout:hover{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.16)!important}
.xv-explorer .status.ok,
.xv-explorer .badge.ok{
  color:#ededed!important;border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.045)!important;
}
.xv-explorer .product-card{
  border-color:rgba(255,255,255,.075)!important;background:rgba(255,255,255,.018)!important;border-radius:11px!important;
}
.xv-explorer .product-thumb{background:#070707!important}
.xv-explorer .btn.primary{background:#ededed!important;color:#060606!important;border-color:#ededed!important}

/* ---- Admin: icon-only rail + hover labels ------------------------------ */
.xv-admin{
  --xc-green:#ededed!important;
  --sx-green:#ededed!important;
  --green:#ededed!important;
}
.xv-admin .admin-global-header{
  left:68px!important;width:calc(100% - 68px)!important;height:60px!important;
  border:0!important;
  background:rgba(4,4,4,.72)!important;
  -webkit-backdrop-filter:blur(28px) saturate(125%)!important;
  backdrop-filter:blur(28px) saturate(125%)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.22)!important;
}
.xv-admin .admin-header-divider{border-color:rgba(255,255,255,.08)!important}
.xv-admin .admin-env-pill,
.xv-admin .admin-api-status{
  border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.025)!important;color:#aaa!important;
}
.xv-admin .statusdot{background:#efefef!important;box-shadow:0 0 10px rgba(255,255,255,.5)!important}
.xv-admin .rail,
.xv-admin .rail:hover,
.xv-admin .rail:focus-within,
.xv-admin .rail.force-open,
.xv-admin .rail.open,
.xv-admin .rail.collapsed{
  width:68px!important;min-width:68px!important;max-width:68px!important;
  padding:8px 7px!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
  background:rgba(4,4,4,.76)!important;
  -webkit-backdrop-filter:blur(28px) saturate(125%)!important;
  backdrop-filter:blur(28px) saturate(125%)!important;
  box-shadow:10px 0 40px rgba(0,0,0,.18)!important;
  overflow:visible!important;
  align-items:center!important;
}
.xv-admin .main,
.xv-admin .rail.open~.main,
.xv-admin .rail.collapsed~.main{
  margin-left:68px!important;width:calc(100% - 68px)!important;
}
.xv-admin .rail .nav,
.xv-admin .rail:hover .nav,
.xv-admin .rail:focus-within .nav,
.xv-admin .rail.force-open .nav{
  width:100%!important;overflow:visible!important;padding:0!important;margin:0!important;display:block!important;
}
.xv-admin .rail .admin-primary-nav,
.xv-admin .rail:hover .admin-primary-nav,
.xv-admin .rail:focus-within .admin-primary-nav,
.xv-admin .rail.force-open .admin-primary-nav{width:100%!important;padding:0!important;margin:0!important}
.xv-admin .rail .nav button,
.xv-admin .rail:hover .nav button,
.xv-admin .rail:focus-within .nav button,
.xv-admin .rail.force-open .nav button,
.xv-admin .rail .rail-utility,
.xv-admin .rail:hover .rail-utility,
.xv-admin .rail.force-open .rail-utility{
  position:relative!important;
  width:52px!important;min-width:52px!important;max-width:52px!important;
  height:44px!important;min-height:44px!important;
  margin:3px 0!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:visible!important;
  border:1px solid transparent!important;border-radius:12px!important;
  background:transparent!important;color:#666!important;box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.xv-admin .rail .nav button:hover,
.xv-admin .rail .rail-utility:hover{
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;
  color:#f2f2f2!important;transform:translateY(-1px)!important;
}
.xv-admin .rail .nav button.on{
  border-color:rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.20)!important;
}
.xv-admin .rail .nav button.on::before{display:none!important}
.xv-admin .rail .nav button i,
.xv-admin .rail .rail-utility i{
  min-width:0!important;width:auto!important;margin:0!important;font-size:18px!important;color:inherit!important;filter:none!important;
}
.xv-admin .rail .admin-primary-nav .label,
.xv-admin .rail .railbottom .label,
.xv-admin .rail:hover .admin-primary-nav .label,
.xv-admin .rail:focus-within .admin-primary-nav .label,
.xv-admin .rail.force-open .admin-primary-nav .label,
.xv-admin .rail:hover .railbottom .label,
.xv-admin .rail.force-open .railbottom .label{
  display:block!important;
  position:absolute!important;
  left:62px!important;top:50%!important;
  width:max-content!important;max-width:180px!important;height:auto!important;
  padding:7px 9px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:8px!important;
  background:rgba(10,10,10,.96)!important;color:#ededed!important;
  box-shadow:0 16px 40px rgba(0,0,0,.48)!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  font:700 9px/1 var(--x-font)!important;letter-spacing:.04em!important;
  text-transform:none!important;white-space:nowrap!important;
  opacity:0!important;visibility:hidden!important;transform:translate(0,-50%) translateX(-4px)!important;
  pointer-events:none!important;z-index:4000!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s!important;
}
.xv-admin .rail .admin-primary-nav button:hover .label,
.xv-admin .rail .railbottom .rail-utility:hover .label{
  opacity:1!important;visibility:visible!important;transform:translate(0,-50%) translateX(0)!important;
}
.xv-admin .rail .nav-group-title{display:none!important}
.xv-admin .railbottom{width:52px!important;margin-top:auto!important;padding:8px 0 0!important;border-top:1px solid rgba(255,255,255,.065)!important;overflow:visible!important}
.xv-admin .railbottom button[onclick="toggleRail()"]{display:none!important}
.xv-admin .content{padding:22px 24px 30px!important}
.xv-admin .panel,
.xv-admin .stat,
.xv-admin .tablewrap,
.xv-admin .buyers,
.xv-admin .chat,
.xv-admin .profile,
.xv-admin .modal,
.xv-admin .loginbox,
.xv-admin .product-type-card,
.xv-admin .license-explain{
  border-color:rgba(255,255,255,.075)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 18px 52px rgba(0,0,0,.15)!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
}
.xv-admin .panelhead,
.xv-admin th{background:rgba(255,255,255,.018)!important;border-color:rgba(255,255,255,.065)!important}
.xv-admin td{border-color:rgba(255,255,255,.05)!important}
.xv-admin tr:hover td{background:rgba(255,255,255,.025)!important}
.xv-admin .btn.primary,
.xv-admin .nav button.on{--accent:#fff!important}
.xv-admin .btn.primary{background:#ededed!important;color:#070707!important;border-color:#ededed!important}
.xv-admin .badge.green,
.xv-admin .badge.purple{
  color:#e8e8e8!important;border-color:rgba(255,255,255,.11)!important;background:rgba(255,255,255,.035)!important;
}
.xv-admin .admin-section-nav{border-color:rgba(255,255,255,.07)!important}
.xv-admin .admin-section-tab.on{color:#fff!important;border-color:#fff!important}

/* Mobile remains explicit/readable; desktop-only icon tooltips don't affect it. */
@media(max-width:920px){
  .xv-public>.top,.xv-explorer>.top,.xv-download>.top{height:62px!important}
  .xv-public .topin,.xv-explorer .topin,.xv-download .topin{height:62px!important;width:calc(100% - 24px)!important}
  .xv-explorer .dashboard{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .xv-admin .admin-global-header{left:0!important;width:100%!important}
  .xv-admin .main{margin-left:0!important;width:100%!important}
  .xv-admin .content{padding:14px 10px 24px!important}
}

/* ========================================================================== 
   XAVIER STUDIO V3.67 — CLEAN MONO / ICON-ONLY CORRECTION
   Fixes legacy hover layout shift, removes boxed navigation states, restores
   the compact logo + wordmark treatment, and makes the white-on-black gradient
   visible without turning the interface grey.
   ========================================================================== */

html[data-theme="dark"] body.xv-public,
html[data-theme="dark"] body.xv-explorer,
html[data-theme="dark"] body.xv-download,
html[data-theme="dark"] body.xv-admin{
  background:
    radial-gradient(900px 520px at 16% -8%,rgba(255,255,255,.135),transparent 60%),
    radial-gradient(760px 480px at 88% 7%,rgba(255,255,255,.070),transparent 66%),
    linear-gradient(118deg,#050505 0%,#0e0e0e 38%,#060606 70%,#0b0b0b 100%)!important;
  background-attachment:fixed!important;
}

/* A soft white sheen lives behind the UI, never on top of controls. */
.xv-public::before,
.xv-explorer::before,
.xv-download::before,
.xv-admin::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    linear-gradient(104deg,transparent 0 42%,rgba(255,255,255,.022) 50%,transparent 58%),
    radial-gradient(640px 210px at 54% 0,rgba(255,255,255,.045),transparent 72%)!important;
}

/* ---- Header: one continuous glass surface, never a tab underline ---------- */
.xv-public>.top,
.xv-explorer>.top,
.xv-download>.top{
  border:0!important;
  background:linear-gradient(180deg,rgba(16,16,16,.80),rgba(5,5,5,.72))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.065),0 18px 50px rgba(0,0,0,.24)!important;
  -webkit-backdrop-filter:blur(30px) saturate(118%)!important;
  backdrop-filter:blur(30px) saturate(118%)!important;
}

/* Always show a proper mark + wordmark. If the configured shop image is a
   horizontal logo, the square mark clips its left emblem instead of shrinking
   the entire horizontal wordmark into the icon box. */
.xv-public .brand,
.xv-explorer .brand,
.xv-download .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:max-content!important;
}
.xv-public .brand>#brand,
.xv-explorer .brand>#brandName,
.xv-download .brand>#brandName{
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  color:#f3f3f3!important;
  font-family:Montserrat,var(--x-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.xv-public .brandmark,
.xv-explorer .brandmark,
.xv-download .brandmark{
  width:34px!important;height:34px!important;min-width:34px!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.11)!important;
  overflow:hidden!important;
}
.xv-public .brandmark img,
.xv-explorer .brandmark img,
.xv-download .brandmark img,
.xv-admin #adminBrandMark img{
  display:block!important;
  height:100%!important;
  width:auto!important;
  min-width:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:left center!important;
  padding:0!important;
  margin:0!important;
}

/* ---- Public desktop navigation: PURE ICONS, no boxes/pills ---------------- */
.xv-public .platform-nav{
  height:68px!important;
  gap:16px!important;
  margin-left:24px!important;
  align-items:center!important;
}
.xv-public .navlink,
.xv-public .dropbtn{
  position:relative!important;
  width:24px!important;
  min-width:24px!important;
  height:38px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6f6f6f!important;
  transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  transition:color .15s ease,opacity .15s ease,filter .15s ease!important;
}
.xv-public .navlink:hover,
.xv-public .dropbtn:hover,
.xv-public .nav-dropdown.open>.dropbtn,
.xv-public .navlink.on,
.xv-public .nav-dropdown.route-active>.dropbtn{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  color:#f2f2f2!important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.16))!important;
}
.xv-public .navlink.on,
.xv-public .nav-dropdown.route-active>.dropbtn{color:#fff!important}
.xv-public .navlink::after,
.xv-public .dropbtn::after{display:none!important}
.xv-public .navlink>i:first-child,
.xv-public .dropbtn>i:first-child{font-size:19px!important}

/* Tiny tooltip only; it is not part of the tab visual. */
.xv-public .navlink[data-tip]::before,
.xv-public .dropbtn[data-tip]::before{
  top:calc(100% + 7px)!important;
  padding:5px 7px!important;
  border-radius:6px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(10,10,10,.91)!important;
  color:#cfcfcf!important;
  box-shadow:0 10px 26px rgba(0,0,0,.34)!important;
  font-size:8px!important;
  font-weight:700!important;
}

/* Explorer header stays text-based and compact; it is an account workspace,
   not the icon-only storefront navigation. */
.xv-explorer .topnav{
  gap:18px!important;
  margin-left:24px!important;
}
.xv-explorer .topnav>a{
  width:auto!important;min-width:0!important;height:36px!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#777!important;
  font:700 9px/1 Montserrat,var(--x-font)!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;
}
.xv-explorer .topnav>a:hover{border:0!important;background:transparent!important;box-shadow:none!important;color:#eee!important;transform:none!important}

/* Shared surfaces: visibly charcoal / white-gradient instead of flat black. */
.xv-public .card,
.xv-public .explore-card,
.xv-public .capability-card,
.xv-public .quick-card,
.xv-public .toolcard,
.xv-public .tool-directory-row,
.xv-public .vu-gate,
.xv-public .vu-account-strip,
.xv-public .vu-auth,
.xv-public .vu-main,
.xv-public .vu-setup,
.xv-public .vu-config-group,
.xv-public .vu-output-sticky,
.xv-public .su-section,
.xv-public .su-card,
.xv-explorer .panel,
.xv-explorer .hero-panel,
.xv-explorer .step,
.xv-explorer .userpill,
.xv-download .panel,
.xv-admin .panel,
.xv-admin .stat,
.xv-admin .tablewrap,
.xv-admin .buyers,
.xv-admin .chat,
.xv-admin .profile,
.xv-admin .modal,
.xv-admin .loginbox,
.xv-admin .product-type-card,
.xv-admin .license-explain{
  background:
    linear-gradient(128deg,rgba(255,255,255,.058),rgba(255,255,255,.018) 44%,rgba(255,255,255,.010) 72%),
    rgba(8,8,8,.86)!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 52px rgba(0,0,0,.16)!important;
}

/* ---- ADMIN: lock the old hover-expansion system completely ---------------- */
.xv-admin .rail,
.xv-admin .rail:hover,
.xv-admin .rail:focus-within,
.xv-admin .rail.force-open,
.xv-admin .rail.open,
.xv-admin .rail.collapsed{
  width:68px!important;min-width:68px!important;max-width:68px!important;
  background:linear-gradient(180deg,rgba(14,14,14,.88),rgba(5,5,5,.82))!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
  box-shadow:1px 0 0 rgba(255,255,255,.015),12px 0 42px rgba(0,0,0,.20)!important;
  overflow:visible!important;
}

/* THIS is the legacy bug visible in the screenshot: old .rail:hover~.main
   widened the virtual sidebar. These selectors intentionally beat it. */
.xv-admin .rail:hover~.main,
.xv-admin .rail:focus-within~.main,
.xv-admin .rail.force-open~.main,
.xv-admin .rail.open~.main,
.xv-admin .rail.collapsed~.main,
.xv-admin .main{
  margin-left:68px!important;
  width:calc(100% - 68px)!important;
  max-width:calc(100% - 68px)!important;
  padding-top:60px!important;
}
.xv-admin .rail:hover~.main .admin-global-header,
.xv-admin .rail:focus-within~.main .admin-global-header,
.xv-admin .rail.force-open~.main .admin-global-header,
.xv-admin .admin-global-header{
  left:68px!important;
  width:calc(100% - 68px)!important;
}
.xv-admin .content,
.xv-admin .main>.content{
  width:100%!important;
  max-width:1500px!important;
  margin:0!important;
  padding:24px!important;
}

/* Admin tabs are icons — literally no rectangle around them. */
.xv-admin .rail .nav button,
.xv-admin .rail:hover .nav button,
.xv-admin .rail:focus-within .nav button,
.xv-admin .rail.force-open .nav button,
.xv-admin .rail .rail-utility,
.xv-admin .rail:hover .rail-utility,
.xv-admin .rail:focus-within .rail-utility,
.xv-admin .rail.force-open .rail-utility{
  position:relative!important;
  width:42px!important;min-width:42px!important;max-width:42px!important;
  height:42px!important;min-height:42px!important;
  margin:2px auto!important;padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#686868!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transform:none!important;overflow:visible!important;
  transition:color .14s ease,filter .14s ease,opacity .14s ease!important;
}
.xv-admin .rail .nav button:hover,
.xv-admin .rail .rail-utility:hover,
.xv-admin .rail .nav button.on{
  border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;
  color:#f0f0f0!important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.15))!important;
}
.xv-admin .rail .nav button.on{color:#fff!important}
.xv-admin .rail .nav button::before,
.xv-admin .rail .nav button.on::before,
.xv-admin .rail .rail-utility::before{display:none!important}
.xv-admin .rail .nav button i,
.xv-admin .rail .rail-utility i{font-size:19px!important;color:inherit!important}

/* Internal labels are never laid out. One generated tooltip appears only on
   the exact icon being hovered, so labels cannot remain stuck on screen. */
.xv-admin .rail .label,
.xv-admin .rail:hover .label,
.xv-admin .rail:focus-within .label,
.xv-admin .rail.force-open .label{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.xv-admin .rail .nav button::after,
.xv-admin .rail .rail-utility::after{
  content:attr(aria-label)!important;
  position:absolute!important;
  left:52px!important;top:50%!important;
  transform:translate(4px,-50%)!important;
  width:max-content!important;max-width:180px!important;
  padding:6px 8px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:6px!important;
  background:rgba(10,10,10,.93)!important;
  color:#d6d6d6!important;
  box-shadow:0 12px 30px rgba(0,0,0,.38)!important;
  -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
  font:700 8px/1.1 var(--x-font)!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  z-index:5000!important;
  transition:opacity .12s ease,transform .12s ease,visibility .12s!important;
}
.xv-admin .rail .nav button:hover::after,
.xv-admin .rail .rail-utility:hover::after{
  display:block!important;
  opacity:1!important;visibility:visible!important;
  transform:translate(0,-50%)!important;
}

/* Admin brand: emblem + visible Xavier Studio text, not a mini full logo. */
.xv-admin .admin-global-brand{display:flex!important;align-items:center!important;gap:9px!important;min-width:max-content!important}
.xv-admin #adminBrandMark{width:34px!important;height:34px!important;min-width:34px!important;overflow:hidden!important;border-radius:9px!important}
.xv-admin .admin-global-brand-copy{display:flex!important;flex-direction:column!important;opacity:1!important;visibility:visible!important}
.xv-admin .admin-global-brand-copy b{color:#f2f2f2!important;font-size:11px!important;font-weight:850!important;text-transform:uppercase!important}
.xv-admin .admin-global-brand-copy small{color:#666!important;font-size:7px!important;letter-spacing:.08em!important}

.xv-admin .admin-global-header{
  background:linear-gradient(180deg,rgba(16,16,16,.82),rgba(5,5,5,.74))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.20)!important;
}
.xv-admin .admin-section-nav{margin-top:0!important}

@media(max-width:920px){
  .xv-public .platform-nav{display:none!important}
  .xv-public .brand>#brand,
  .xv-explorer .brand>#brandName,
  .xv-download .brand>#brandName{font-size:11px!important}
}
@media(max-width:700px){
  .xv-admin .main,
  .xv-admin .rail:hover~.main,
  .xv-admin .rail:focus-within~.main,
  .xv-admin .rail.force-open~.main{
    margin-left:0!important;width:100%!important;max-width:100%!important;padding-top:60px!important;
  }
  .xv-admin .admin-global-header,
  .xv-admin .rail:hover~.main .admin-global-header,
  .xv-admin .rail:focus-within~.main .admin-global-header{
    left:0!important;width:100%!important;
  }
}

/* ========================================================================== 
   XAVIER STUDIO V3.68 — EXPLORER-ALIGNED HEADER + STABLE ADMIN
   User direction:
   - Public/Home header follows Explorer's clean language.
   - Icon + text navigation, no black tab blocks and no nav tooltips.
   - Home header is NOT sticky/fixed.
   - Admin global header owns the full top edge; icon rail begins below it.
   - Admin rail has one lightweight tooltip source only.
   ========================================================================== */

:root{
  --xv368-header:64px;
  --xv368-admin-rail:58px;
}

/* Stronger but still restrained mono gradient. */
html[data-theme="dark"] body.xv-public,
html[data-theme="dark"] body.xv-explorer,
html[data-theme="dark"] body.xv-download,
html[data-theme="dark"] body.xv-admin{
  background:
    radial-gradient(820px 430px at 18% -4%,rgba(255,255,255,.115),transparent 64%),
    radial-gradient(720px 430px at 88% 8%,rgba(255,255,255,.055),transparent 68%),
    linear-gradient(122deg,#070707 0%,#111111 42%,#090909 73%,#0d0d0d 100%)!important;
}

/* ---------------- PUBLIC / HOME HEADER ---------------------------------- */
body.xv-public>.top{
  position:relative!important; /* requested: Home header scrolls away */
  top:auto!important;
  left:auto!important;
  right:auto!important;
  height:var(--xv368-header)!important;
  z-index:80!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  background:
    linear-gradient(180deg,rgba(20,20,20,.84),rgba(8,8,8,.78))!important;
  box-shadow:0 10px 34px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(24px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(118%)!important;
}
body.xv-public>.top .topin{
  height:var(--xv368-header)!important;
  width:min(1400px,calc(100% - 48px))!important;
  gap:24px!important;
}
body.xv-public .brand{
  height:var(--xv368-header)!important;
  gap:10px!important;
  flex:0 0 auto!important;
}
body.xv-public .brandmark{
  width:34px!important;height:34px!important;min-width:34px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}
body.xv-public .brandmark img{
  width:100%!important;height:100%!important;min-width:0!important;max-width:100%!important;
  object-fit:contain!important;object-position:center!important;padding:4px!important;
}
body.xv-public .brand>#brand{
  display:inline-block!important;
  color:#f1f1f1!important;
  font:800 12px/1 Montserrat,Inter,sans-serif!important;
  letter-spacing:-.025em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Home nav = icon + label. No icon-only squares, no pseudo tooltip. */
body.xv-public .platform-nav{
  display:flex!important;
  align-items:center!important;
  height:var(--xv368-header)!important;
  gap:22px!important;
  margin-left:10px!important;
  background:transparent!important;
}
body.xv-public .platform-nav>.navlink,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn{
  position:relative!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  height:var(--xv368-header)!important;
  padding:0!important;margin:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#858585!important;
  filter:none!important;transform:none!important;
  overflow:visible!important;
  font:700 10px/1 Montserrat,Inter,sans-serif!important;
  letter-spacing:.01em!important;text-transform:none!important;
  transition:color .14s ease!important;
}
body.xv-public .platform-nav>.navlink>span,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn>span{
  display:inline-block!important;
  width:auto!important;height:auto!important;max-width:none!important;
  opacity:1!important;visibility:visible!important;overflow:visible!important;
  color:inherit!important;
}
body.xv-public .platform-nav>.navlink>i:first-child,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn>i:first-child{
  display:inline-block!important;
  width:auto!important;min-width:0!important;
  margin:0!important;
  font-size:15px!important;
  color:inherit!important;
}
body.xv-public .platform-nav .nav-caret{
  display:inline-block!important;
  margin-left:0!important;
  font-size:9px!important;
  color:#555!important;
}
body.xv-public .platform-nav>.navlink:hover,
body.xv-public .platform-nav>.navlink.on,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn:hover,
body.xv-public .platform-nav>.nav-dropdown.open>.dropbtn,
body.xv-public .platform-nav>.nav-dropdown.route-active>.dropbtn{
  color:#f0f0f0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  filter:none!important;transform:none!important;
}
body.xv-public .platform-nav>.navlink::before,
body.xv-public .platform-nav>.navlink::after,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn::before,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn::after{
  content:none!important;display:none!important;
}
body.xv-public .platform-nav>.nav-dropdown{
  display:inline-flex!important;align-items:center!important;
  width:auto!important;height:var(--xv368-header)!important;
  padding:0!important;margin:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}

/* Dropdowns stay glass, but trigger itself never becomes a black block. */
body.xv-public .platform-menu,
body.xv-public .tools-pro-menu{
  margin-top:-4px!important;
  background:linear-gradient(145deg,rgba(20,20,20,.96),rgba(8,8,8,.94))!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(26px) saturate(115%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(115%)!important;
}

/* Keep the Explorer header that the user explicitly approved. */
body.xv-explorer>.top{
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(8,8,8,.78))!important;
}

/* ---------------- ADMIN: HEADER ABOVE RAIL, NEVER INSIDE IT ------------- */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header,
body.xv-admin .rail:hover~.main .admin-global-header,
body.xv-admin .rail:focus-within~.main .admin-global-header,
body.xv-admin .rail.force-open~.main .admin-global-header{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  width:100%!important;max-width:none!important;
  height:var(--xv368-header)!important;min-height:var(--xv368-header)!important;
  margin:0!important;padding:0 22px!important;
  display:flex!important;align-items:center!important;gap:16px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(180deg,rgba(20,20,20,.94),rgba(8,8,8,.91))!important;
  box-shadow:0 10px 36px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(24px) saturate(116%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(116%)!important;
  z-index:1000!important;
}
body.xv-admin .admin-global-brand{
  height:var(--xv368-header)!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  min-width:max-content!important;
}
body.xv-admin #adminBrandMark{
  width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  overflow:hidden!important;box-shadow:none!important;
}
body.xv-admin #adminBrandMark img{
  width:100%!important;height:100%!important;min-width:0!important;max-width:100%!important;
  object-fit:contain!important;object-position:center!important;padding:4px!important;
}
body.xv-admin .admin-global-brand-copy b{font-size:11px!important;color:#f0f0f0!important}
body.xv-admin .admin-global-brand-copy small{font-size:6.5px!important;color:#626262!important}
body.xv-admin .admin-header-divider{height:25px!important;background:rgba(255,255,255,.085)!important}
body.xv-admin .adminhead strong{font-size:10px!important;color:#d0d0d0!important}
body.xv-admin .adminhead #topTitle{font-size:9px!important;color:#777!important}

/* Rail starts BELOW header, fixed compact and never expands. */
body.xv-admin .rail,
body.xv-admin .rail:hover,
body.xv-admin .rail:focus-within,
body.xv-admin .rail.force-open,
body.xv-admin .rail.open,
body.xv-admin .rail.collapsed{
  position:fixed!important;
  top:var(--xv368-header)!important;bottom:0!important;left:0!important;right:auto!important;
  inset:var(--xv368-header) auto 0 0!important;
  width:var(--xv368-admin-rail)!important;min-width:var(--xv368-admin-rail)!important;max-width:var(--xv368-admin-rail)!important;
  height:calc(100vh - var(--xv368-header))!important;
  padding:10px 6px!important;margin:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  overflow:visible!important;
  border:0!important;border-right:1px solid rgba(255,255,255,.065)!important;
  background:linear-gradient(180deg,rgba(12,12,12,.91),rgba(7,7,7,.88))!important;
  box-shadow:none!important;
  transform:none!important;transition:none!important;
  z-index:800!important;
}
body.xv-admin .rail .nav,
body.xv-admin .rail:hover .nav,
body.xv-admin .rail:focus-within .nav,
body.xv-admin .rail.force-open .nav{
  width:100%!important;flex:1!important;min-height:0!important;
  margin:0!important;padding:0!important;
  display:block!important;overflow-y:auto!important;overflow-x:visible!important;
  scrollbar-width:none!important;
}
body.xv-admin .rail .nav::-webkit-scrollbar{display:none!important}
body.xv-admin .rail .admin-primary-nav{width:100%!important;margin:0!important;padding:0!important}
body.xv-admin .rail .nav-group-title{display:none!important}

/* One icon, no tab/pill/black rectangle. */
body.xv-admin .rail .nav button,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .rail-utility,
body.xv-admin .rail:focus-within .rail-utility,
body.xv-admin .rail.force-open .rail-utility{
  position:relative!important;
  width:38px!important;min-width:38px!important;max-width:38px!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  margin:2px auto!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#676767!important;
  overflow:visible!important;
  transform:none!important;filter:none!important;
  transition:color .13s ease!important;
}
body.xv-admin .rail .nav button i,
body.xv-admin .rail .rail-utility i{
  width:auto!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0!important;
  font-size:16px!important;line-height:1!important;color:inherit!important;
  filter:none!important;transform:none!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover,
body.xv-admin .rail .nav button.on{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:#eeeeee!important;transform:none!important;filter:none!important;
}
body.xv-admin .rail .nav button.on{color:#fff!important}
body.xv-admin .rail .nav button::before,
body.xv-admin .rail .rail-utility::before{content:none!important;display:none!important}

/* No HTML labels survive; exactly ONE CSS tooltip. */
body.xv-admin .rail .label,
body.xv-admin .rail:hover .label,
body.xv-admin .rail:focus-within .label,
body.xv-admin .rail.force-open .label{
  display:none!important;visibility:hidden!important;opacity:0!important;
  width:0!important;height:0!important;margin:0!important;padding:0!important;
}
body.xv-admin .rail .nav button::after,
body.xv-admin .rail .rail-utility::after{
  content:attr(aria-label)!important;
  position:absolute!important;
  left:45px!important;top:50%!important;
  transform:translate(3px,-50%)!important;
  width:max-content!important;max-width:170px!important;
  padding:5px 7px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:6px!important;
  background:rgba(13,13,13,.95)!important;
  color:#d3d3d3!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  font:650 8px/1.15 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  z-index:5000!important;
  transition:opacity .10s ease .16s,transform .10s ease .16s,visibility 0s linear .16s!important;
}
body.xv-admin .rail .nav button:hover::after,
body.xv-admin .rail .rail-utility:hover::after{
  opacity:1!important;visibility:visible!important;transform:translate(0,-50%)!important;
}
body.xv-admin .railbottom{
  width:100%!important;margin-top:auto!important;padding:9px 0 0!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
  overflow:visible!important;
}

/* Main workspace never reacts to rail hover. */
body.xv-admin .main,
body.xv-admin .rail:hover~.main,
body.xv-admin .rail:focus-within~.main,
body.xv-admin .rail.force-open~.main,
body.xv-admin .rail.open~.main,
body.xv-admin .rail.collapsed~.main{
  margin-left:var(--xv368-admin-rail)!important;
  width:calc(100% - var(--xv368-admin-rail))!important;
  max-width:calc(100% - var(--xv368-admin-rail))!important;
  min-height:100vh!important;
  padding-top:var(--xv368-header)!important;
  transition:none!important;
}
body.xv-admin .main>.content,
body.xv-admin .content{
  width:100%!important;max-width:1500px!important;
  margin:0!important;padding:20px 24px 28px!important;
}

/* Less flat-black workspace surfaces. */
body.xv-admin .panel,
body.xv-admin .stat,
body.xv-admin .tablewrap,
body.xv-admin .buyers,
body.xv-admin .chat,
body.xv-admin .profile,
body.xv-admin .product-type-card,
body.xv-explorer .panel,
body.xv-public .card,
body.xv-public .toolcard,
body.xv-public .tool-directory-row{
  background:
    linear-gradient(128deg,rgba(255,255,255,.047),rgba(255,255,255,.014) 46%,rgba(255,255,255,.008) 78%),
    rgba(10,10,10,.78)!important;
  border-color:rgba(255,255,255,.085)!important;
}

@media(max-width:920px){
  body.xv-public .platform-nav{display:none!important}
  body.xv-public>.top .topin{width:calc(100% - 24px)!important}
}
@media(max-width:700px){
  body.xv-admin .rail{display:none!important}
  body.xv-admin .main,
  body.xv-admin .rail:hover~.main,
  body.xv-admin .rail:focus-within~.main,
  body.xv-admin .rail.force-open~.main{
    margin-left:0!important;width:100%!important;max-width:100%!important;
  }
  body.xv-admin .admin-global-header{left:0!important;width:100%!important;padding:0 12px!important}
  body.xv-admin .main>.content,body.xv-admin .content{padding:14px 10px 22px!important}
}

/* ========================================================================== 
   XAVIER STUDIO V3.69 — HEADER SEAM + ADMIN HOVER/SELECTION FIX
   - One global admin tooltip; never clipped by rail scrolling.
   - Rounded, compact active/hover selection instead of square blocks.
   - Public header blends directly into page; no black seam / tab rectangles.
   ========================================================================== */

:root{
  --xv369-radius:11px;
}

/* PUBLIC HEADER: one clean layer, no dark columns, no seam into content. */
body.xv-public>.top{
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  background:
    linear-gradient(180deg,rgba(18,18,18,.72) 0%,rgba(11,11,11,.55) 72%,rgba(10,10,10,.34) 100%)!important;
}
body.xv-public>.top::before,
body.xv-public>.top::after,
body.xv-public>.top .topin::before,
body.xv-public>.top .topin::after{
  content:none!important;
  display:none!important;
}
body.xv-public .platform-nav,
body.xv-public .platform-nav>.nav-dropdown,
body.xv-public .platform-nav>.dropdown,
body.xv-public .platform-nav>.navlink,
body.xv-public .platform-nav>.nav-dropdown>.dropbtn{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
body.xv-public .platform-nav>.nav-dropdown::before,
body.xv-public .platform-nav>.nav-dropdown::after,
body.xv-public .platform-nav>.dropdown::before,
body.xv-public .platform-nav>.dropdown::after{
  content:none!important;
  display:none!important;
}
/* Keep dropdown panels themselves visible only when actually opened. */
body.xv-public .platform-menu,
body.xv-public .tools-pro-menu{
  border-radius:14px!important;
}
/* First content section visually continues from the header instead of forming a black bar. */
body.xv-public #app{
  background:transparent!important;
  border-top:0!important;
  box-shadow:none!important;
}
body.xv-public #app::before,
body.xv-public #app::after{
  content:none!important;
}
body.xv-public .xh34-hero,
body.xv-public .xs-shop-hero,
body.xv-public .tool-directory-head,
body.xv-public .community-hero,
body.xv-public .pagehero{
  border-top:0!important;
  box-shadow:none!important;
}

/* ADMIN RAIL: compact rounded states, never a square black tab. */
body.xv-admin .rail .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button,
body.xv-admin .rail:hover .rail-utility,
body.xv-admin .rail:focus-within .rail-utility,
body.xv-admin .rail.force-open .rail-utility{
  border-radius:var(--xv369-radius)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:color .14s ease,background .14s ease,border-color .14s ease,transform .14s ease!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover{
  color:#f2f2f2!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.065)!important;
  transform:translateY(-1px)!important;
}
body.xv-admin .rail .nav button.on{
  color:#fff!important;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.028))!important;
  border-color:rgba(255,255,255,.115)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.16)!important;
}
body.xv-admin .rail .nav button.on i{color:#fff!important}

/* Disable every legacy pseudo tooltip. V3.69 uses one body-level tooltip. */
body.xv-admin .rail .nav button::after,
body.xv-admin .rail .rail-utility::after,
body.xv-admin .rail .nav button:hover::after,
body.xv-admin .rail .rail-utility:hover::after{
  content:none!important;
  display:none!important;
}

#xvAdminRailTooltip{
  position:fixed;
  z-index:10000;
  left:0;top:0;
  min-height:27px;
  padding:0 9px;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(18,18,18,.94);
  color:#e8e8e8;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  font:650 8.5px/1 Inter,system-ui,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateX(-3px) scale(.985);
  transition:opacity .10s ease,transform .10s ease,visibility 0s linear .10s;
}
#xvAdminRailTooltip.show{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .10s ease,transform .10s ease,visibility 0s;
}

/* Admin header/content seam: no thick black collision beneath the header. */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header{
  border-bottom:1px solid rgba(255,255,255,.045)!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(11,11,11,.84))!important;
}
body.xv-admin .main,
body.xv-admin .content{
  border-top:0!important;
  box-shadow:none!important;
}

/* ========================================================================== 
   XAVIER STUDIO V3.70 — STABLE HEADER + ZERO-BOUNCE ADMIN NAV
   - Public header stays pinned at the top on every SPA route.
   - Removes per-tab backdrop blur layers that rendered as black rectangles.
   - Admin rail hover is static: no stroke flash, no bounce, no layout motion.
   ========================================================================== */

:root{
  --xv370-header:64px;
  --xv370-rail-radius:10px;
}

/* PUBLIC HEADER — one continuous glass surface, always visible while scrolling. */
body.xv-public > header.top,
body.xv-explorer > header.top{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  z-index:5000!important;
  width:100%!important;
  height:var(--xv370-header)!important;
  min-height:var(--xv370-header)!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  background:
    radial-gradient(520px 110px at 20% 0%,rgba(255,255,255,.055),transparent 72%),
    linear-gradient(180deg,rgba(18,18,18,.90),rgba(11,11,11,.86))!important;
  backdrop-filter:blur(22px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(112%)!important;
}

/* Prevent any old route/header rule from creating a second layer below it. */
body.xv-public > header.top::before,
body.xv-public > header.top::after,
body.xv-public > header.top .topin::before,
body.xv-public > header.top .topin::after,
body.xv-explorer > header.top::before,
body.xv-explorer > header.top::after{
  content:none!important;
  display:none!important;
}
body.xv-public > header.top .topin{
  height:var(--xv370-header)!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* This is the actual black-column fix: old nav tabs still had backdrop-filter.
   Transparent blurred children create visible rectangular bands on gradients. */
body.xv-public .platform-nav,
body.xv-public .platform-nav > *,
body.xv-public .platform-nav > .navlink,
body.xv-public .platform-nav > .nav-dropdown,
body.xv-public .platform-nav > .nav-dropdown > .dropbtn,
body.xv-public .platform-nav > .dropdown,
body.xv-public .platform-nav > .dropdown > .dropbtn{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.xv-public .platform-nav > .navlink::before,
body.xv-public .platform-nav > .navlink::after,
body.xv-public .platform-nav > .nav-dropdown::before,
body.xv-public .platform-nav > .nav-dropdown::after,
body.xv-public .platform-nav > .nav-dropdown > .dropbtn::before,
body.xv-public .platform-nav > .nav-dropdown > .dropbtn::after,
body.xv-public .platform-nav > .dropdown::before,
body.xv-public .platform-nav > .dropdown::after,
body.xv-public .platform-nav > .dropdown > .dropbtn::before,
body.xv-public .platform-nav > .dropdown > .dropbtn::after{
  content:none!important;
  display:none!important;
}
body.xv-public .platform-nav > .navlink,
body.xv-public .platform-nav > .nav-dropdown > .dropbtn{
  border-radius:8px!important;
  transition:color .12s linear!important;
}
body.xv-public .platform-nav > .navlink:hover,
body.xv-public .platform-nav > .navlink.on,
body.xv-public .platform-nav > .nav-dropdown > .dropbtn:hover,
body.xv-public .platform-nav > .nav-dropdown.open > .dropbtn,
body.xv-public .platform-nav > .nav-dropdown.route-active > .dropbtn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#f3f3f3!important;
  transform:none!important;
}

/* No artificial dark spacer / collision between header and SPA content. */
body.xv-public #app,
body.xv-public #app > :first-child,
body.xv-public main,
body.xv-public .page,
body.xv-public .page-shell{
  border-top:0!important;
  box-shadow:none!important;
}

/* ADMIN NAV — compact rounded fill only. No border flash, no motion, no bounce. */
body.xv-admin .rail .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button,
body.xv-admin .rail:hover .rail-utility,
body.xv-admin .rail:focus-within .rail-utility,
body.xv-admin .rail.force-open .rail-utility{
  border:0!important;
  outline:0!important;
  border-radius:var(--xv370-rail-radius)!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:none!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover,
body.xv-admin .rail:hover .nav button:hover,
body.xv-admin .rail:focus-within .nav button:hover,
body.xv-admin .rail.force-open .nav button:hover{
  background:rgba(255,255,255,.035)!important;
  color:#eeeeee!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body.xv-admin .rail .nav button.on,
body.xv-admin .rail:hover .nav button.on,
body.xv-admin .rail:focus-within .nav button.on,
body.xv-admin .rail.force-open .nav button.on{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;
  color:#ffffff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body.xv-admin .rail .nav button i,
body.xv-admin .rail .rail-utility i,
body.xv-admin .rail .nav button:hover i,
body.xv-admin .rail .nav button.on i{
  transform:none!important;
  transition:none!important;
  animation:none!important;
}

/* Tooltip stays lightweight and stationary. */
#xvAdminRailTooltip,
#xvAdminRailTooltip.show{
  transform:none!important;
  transition:opacity .08s linear,visibility 0s!important;
  box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
}

/* Admin header is always an independent top bar; nothing animates into it. */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header{
  transition:none!important;
  transform:none!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  box-shadow:none!important;
}

/* ========================================================================== 
   XAVIER STUDIO V3.71 — TRUE FIXED PUBLIC HEADER
   The public header is viewport-fixed, not sticky. Content is offset below it.
   ========================================================================== */
:root{--xv371-header:64px}

@media (min-width:921px){
  body.xv-public > header.top,
  body.xv-explorer > header.top,
  body.xv-download > header.top{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100vw!important;
    max-width:none!important;
    height:var(--xv371-header)!important;
    min-height:var(--xv371-header)!important;
    margin:0!important;
    z-index:2147483000!important;
    transform:none!important;
    translate:none!important;
    contain:none!important;
    isolation:isolate!important;
  }

  body.xv-public,
  body.xv-explorer,
  body.xv-download{
    padding-top:var(--xv371-header)!important;
  }

  body.xv-public > header.top .topin,
  body.xv-explorer > header.top .topin,
  body.xv-download > header.top .topin{
    height:100%!important;
    min-height:0!important;
  }
}

/* Mobile keeps the native bottom navigation and no desktop-header offset. */
@media (max-width:920px){
  body.xv-public,
  body.xv-explorer,
  body.xv-download{
    padding-top:0!important;
  }
}

/* ========================================================================== 
   XAVIER STUDIO V3.72 — STATIC GRADIENT TABS + POLISHED DROPDOWNS
   - Nothing shifts, bounces, scales or changes size on hover.
   - Hover = gradient selection + lightweight tooltip only.
   - Active admin destination keeps its gradient even when pointer leaves.
   - Admin brand mark is centered exactly over the icon rail column.
   - Public dropdowns use one smooth fade/reveal animation.
   ========================================================================== */
:root{
  --xv372-tab-radius:10px;
  --xv372-tab-hover:linear-gradient(145deg,rgba(255,255,255,.070),rgba(255,255,255,.022));
  --xv372-tab-active:linear-gradient(145deg,rgba(255,255,255,.125),rgba(255,255,255,.038));
  --xv372-tab-line:rgba(255,255,255,.075);
  --xv372-tab-line-active:rgba(255,255,255,.125);
}

/* PUBLIC NAV: compact glass-gradient selections, never full-height black columns. */
@media (min-width:921px){
  body.xv-public .platform-nav{
    gap:5px!important;
  }
  body.xv-public .platform-nav>.navlink,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn{
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    border-radius:var(--xv372-tab-radius)!important;
    background:transparent!important;
    border:1px solid transparent!important;
    box-shadow:none!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
    transition:background .12s linear,border-color .12s linear,color .12s linear!important;
  }
  body.xv-public .platform-nav>.navlink:hover,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn:hover{
    background:var(--xv372-tab-hover)!important;
    border-color:var(--xv372-tab-line)!important;
    color:#f0f0f0!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
    transform:none!important;
  }
  body.xv-public .platform-nav>.navlink.on,
  body.xv-public .platform-nav>.nav-dropdown.route-active>.dropbtn,
  body.xv-public .platform-nav>.nav-dropdown.open>.dropbtn{
    background:var(--xv372-tab-active)!important;
    border-color:var(--xv372-tab-line-active)!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    transform:none!important;
  }
  body.xv-public .platform-nav>.navlink i,
  body.xv-public .platform-nav>.navlink span,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn i,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn span{
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
  }
  body.xv-public .platform-nav .nav-caret{
    transition:color .12s linear!important;
    transform:none!important;
  }
  body.xv-public .nav-dropdown.open>.dropbtn .nav-caret{
    transform:none!important;
  }

  /* Dropdowns remain rendered so opacity/visibility can animate cleanly. */
  body.xv-public .nav-dropdown>.platform-menu,
  body.xv-public .nav-dropdown>.tools-pro-menu{
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    clip-path:inset(0 0 8px 0 round 14px)!important;
    transition:opacity .17s cubic-bezier(.2,.8,.2,1),clip-path .19s cubic-bezier(.2,.8,.2,1),visibility 0s linear .19s!important;
    will-change:opacity,clip-path!important;
  }
  body.xv-public .nav-dropdown>.platform-menu{
    transform:translateX(-50%)!important;
  }
  body.xv-public .nav-dropdown>.tools-pro-menu{
    transform:none!important;
  }
  body.xv-public .nav-dropdown.open>.platform-menu,
  body.xv-public .nav-dropdown.open>.tools-pro-menu{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    clip-path:inset(0 0 0 0 round 14px)!important;
    transition:opacity .17s cubic-bezier(.2,.8,.2,1),clip-path .19s cubic-bezier(.2,.8,.2,1),visibility 0s!important;
  }

  /* Dropdown rows also use the same restrained mono-gradient language. */
  body.xv-public .nav-menu-item,
  body.xv-public .pro-tool-item{
    border:1px solid transparent!important;
    background:transparent!important;
    transform:none!important;
    transition:background .11s linear,border-color .11s linear,color .11s linear!important;
  }
  body.xv-public .nav-menu-item:hover,
  body.xv-public .pro-tool-item:hover{
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
    border-color:rgba(255,255,255,.07)!important;
    transform:none!important;
  }
}

/* ADMIN HEADER: brand icon center exactly matches the 58px rail center. */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header{
  padding-left:12px!important;
}
body.xv-admin .admin-global-brand{
  gap:10px!important;
}
body.xv-admin #adminBrandMark{
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 34px!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
}
body.xv-admin #adminBrandMark img,
body.xv-admin #adminBrandMark i{
  transform:none!important;
  translate:none!important;
  scale:none!important;
}

/* ADMIN RAIL: default stays still; hover gets gradient + tooltip; active persists. */
body.xv-admin .rail .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button,
body.xv-admin .rail:hover .rail-utility,
body.xv-admin .rail:focus-within .rail-utility,
body.xv-admin .rail.force-open .rail-utility{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:2px auto!important;
  padding:0!important;
  border-radius:11px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#666a6d!important;
  box-shadow:none!important;
  outline:0!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:background .10s linear,border-color .10s linear,color .10s linear!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover,
body.xv-admin .rail:hover .nav button:hover,
body.xv-admin .rail:focus-within .nav button:hover,
body.xv-admin .rail.force-open .nav button:hover{
  background:var(--xv372-tab-hover)!important;
  border-color:var(--xv372-tab-line)!important;
  color:#f1f1f1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transform:none!important;
}
body.xv-admin .rail .nav button.on,
body.xv-admin .rail:hover .nav button.on,
body.xv-admin .rail:focus-within .nav button.on,
body.xv-admin .rail.force-open .nav button.on,
body.xv-admin .rail .nav button.on:not(:hover){
  background:var(--xv372-tab-active)!important;
  border-color:var(--xv372-tab-line-active)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  transform:none!important;
}
body.xv-admin .rail .nav button i,
body.xv-admin .rail .rail-utility i,
body.xv-admin .rail .nav button:hover i,
body.xv-admin .rail .nav button.on i,
body.xv-admin .rail .rail-utility:hover i{
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:color .10s linear!important;
}

/* Global tooltip: text only, no bounce/slide. */
#xvAdminRailTooltip,
#xvAdminRailTooltip.show{
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,rgba(28,28,28,.97),rgba(14,14,14,.97))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.32)!important;
  transition:opacity .07s linear,visibility 0s!important;
}

/* Secondary admin tabs: gradient selection language, absolutely no movement. */
body.xv-admin .admin-section-tab{
  padding:0 11px!important;
  height:32px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
  transition:background .10s linear,border-color .10s linear,color .10s linear!important;
}
body.xv-admin .admin-section-tab::before,
body.xv-admin .admin-section-tab::after{
  content:none!important;
  display:none!important;
}
body.xv-admin .admin-section-tab:hover{
  background:var(--xv372-tab-hover)!important;
  border-color:var(--xv372-tab-line)!important;
  color:#efefef!important;
  transform:none!important;
}
body.xv-admin .admin-section-tab.on,
body.xv-admin .admin-section-tab.on:not(:hover){
  background:var(--xv372-tab-active)!important;
  border-color:var(--xv372-tab-line-active)!important;
  color:#fff!important;
  transform:none!important;
}

/* Never let generic card/button hover motion leak into navigation controls. */
body.xv-admin .rail button:hover,
body.xv-admin .rail a:hover,
body.xv-admin .admin-section-tab:hover,
body.xv-public .platform-nav a:hover,
body.xv-public .platform-nav button:hover,
body.xv-public .nav-menu-item:hover,
body.xv-public .pro-tool-item:hover{
  transform:none!important;
  translate:none!important;
  scale:none!important;
}


/* ========================================================================== 
   XAVIER STUDIO V3.73 — SOLID SELECTED GRADIENT + DROP REVEAL + RELEASE FEED
   - Active admin rail is a persistent fill, never a stroke-only state.
   - First admin tab gets breathing room below the header.
   - Public dropdown panels physically reveal downward while trigger tabs stay still.
   - Platform/Tools panels get a soft white charcoal gradient.
   ========================================================================== */
:root{
  --xv373-fill-hover:linear-gradient(140deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 55%,rgba(255,255,255,.014) 100%);
  --xv373-fill-active:linear-gradient(140deg,rgba(255,255,255,.165) 0%,rgba(255,255,255,.070) 48%,rgba(255,255,255,.024) 100%);
}

/* Admin rail: no stroke-only state, no movement, selected fill survives mouse-out. */
body.xv-admin .rail .nav{
  padding-top:8px!important;
}
body.xv-admin .rail .admin-primary-nav{
  padding-top:2px!important;
}
body.xv-admin .rail .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button{
  border:0!important;
  outline:0!important;
  border-radius:11px!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:background .11s linear,color .11s linear,opacity .11s linear!important;
}
body.xv-admin .rail .nav button::before,
body.xv-admin .rail .nav button::after,
body.xv-admin .rail .rail-utility::before,
body.xv-admin .rail .rail-utility::after{
  content:none!important;
  display:none!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover{
  background:var(--xv373-fill-hover)!important;
  color:#f4f4f4!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.xv-admin .rail .nav button.on,
body.xv-admin .rail .nav button.on:not(:hover),
body.xv-admin .rail:hover .nav button.on,
body.xv-admin .rail:focus-within .nav button.on,
body.xv-admin .rail.force-open .nav button.on{
  background:var(--xv373-fill-active)!important;
  border:0!important;
  outline:0!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 24px rgba(0,0,0,.18)!important;
}
body.xv-admin .rail .nav button.on i{color:#fff!important}

/* Brand icon center = 58px rail center (29px), while copy stays to its right. */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header{padding-left:12px!important}
body.xv-admin #adminBrandMark{margin:0!important}

/* Secondary admin tabs use the same persistent gradient language. */
body.xv-admin .admin-section-tab{border:0!important}
body.xv-admin .admin-section-tab:hover{background:var(--xv373-fill-hover)!important;border:0!important}
body.xv-admin .admin-section-tab.on,
body.xv-admin .admin-section-tab.on:not(:hover){background:var(--xv373-fill-active)!important;border:0!important;box-shadow:inset 0 1px rgba(255,255,255,.045)!important}

/* Public header tabs: fill only, no stroke. Trigger itself never moves. */
@media (min-width:921px){
  body.xv-public .platform-nav>.navlink,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn{
    border:0!important;
    transform:none!important;
    transition:background .12s linear,color .12s linear!important;
  }
  body.xv-public .platform-nav>.navlink:hover,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn:hover{
    background:var(--xv373-fill-hover)!important;
    border:0!important;
  }
  body.xv-public .platform-nav>.navlink.on,
  body.xv-public .platform-nav>.nav-dropdown.route-active>.dropbtn,
  body.xv-public .platform-nav>.nav-dropdown.open>.dropbtn{
    background:var(--xv373-fill-active)!important;
    border:0!important;
    box-shadow:inset 0 1px rgba(255,255,255,.045)!important;
  }

  /* Downward reveal. Only the panel moves; header tabs never move. */
  body.xv-public .nav-dropdown>.platform-menu,
  body.xv-public .nav-dropdown>.tools-pro-menu{
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    clip-path:none!important;
    background:
      radial-gradient(520px 230px at 12% -6%,rgba(255,255,255,.145),transparent 58%),
      radial-gradient(360px 210px at 92% 8%,rgba(255,255,255,.055),transparent 64%),
      linear-gradient(145deg,rgba(29,29,29,.985) 0%,rgba(14,14,14,.985) 48%,rgba(20,20,20,.975) 100%)!important;
    border:1px solid rgba(255,255,255,.095)!important;
    box-shadow:0 28px 78px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035)!important;
    backdrop-filter:blur(28px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(28px) saturate(112%)!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,.78,.22,1),visibility 0s linear .22s!important;
    will-change:opacity,transform!important;
  }
  body.xv-public #platformDrop>.platform-menu{transform:translateX(-50%) translateY(-11px)!important}
  body.xv-public #toolsDrop>.tools-pro-menu{transform:translateY(-11px)!important}
  body.xv-public #platformDrop.open>.platform-menu{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translateX(-50%) translateY(0)!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,.78,.22,1),visibility 0s!important;
  }
  body.xv-public #toolsDrop.open>.tools-pro-menu{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translateY(0)!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,.78,.22,1),visibility 0s!important;
  }
  body.xv-public .platform-menu .nav-menu-head,
  body.xv-public .tools-pro-menu .tools-menu-section,
  body.xv-public .tools-pro-menu .pro-tool-search{
    background:transparent!important;
  }
  body.xv-public .nav-menu-item:hover,
  body.xv-public .pro-tool-item:hover{
    background:var(--xv373-fill-hover)!important;
    border-color:transparent!important;
    transform:none!important;
  }
}

/* Paid-only public release history. */
body.xv-public .updates-hero{margin-bottom:18px!important}
body.xv-public .paid-release-feed{display:grid;gap:12px;max-width:980px}
body.xv-public .paid-release-card{
  border:1px solid rgba(255,255,255,.075);border-radius:16px;overflow:hidden;
  background:radial-gradient(540px 220px at 8% -8%,rgba(255,255,255,.085),transparent 58%),linear-gradient(145deg,rgba(21,21,21,.94),rgba(10,10,10,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
body.xv-public .paid-release-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.065)}
body.xv-public .paid-release-head h3{margin:6px 0 3px;font:800 16px/1.2 Montserrat,Inter,sans-serif}
body.xv-public .paid-release-head small{color:var(--muted);font-size:9px}
body.xv-public .paid-release-type{font:800 7.5px/1 Montserrat,Inter,sans-serif;letter-spacing:.11em;color:#8d8d8d}
body.xv-public .paid-release-version{padding:6px 9px;border-radius:9px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));font:800 9px/1 Montserrat,Inter,sans-serif}
body.xv-public .paid-release-history{padding:8px 20px 14px}
body.xv-public .paid-release-entry{position:relative;display:grid;grid-template-columns:12px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055)}
body.xv-public .paid-release-entry:last-child{border-bottom:0}
body.xv-public .release-rail-dot{width:6px;height:6px;border-radius:50%;margin-top:5px;background:#d6d6d6;box-shadow:0 0 0 4px rgba(255,255,255,.035)}
body.xv-public .release-entry-meta{color:#686868;font-size:8px;margin-bottom:4px}
body.xv-public .paid-release-entry b{font-size:10.5px}
body.xv-public .paid-release-entry p{margin:5px 0 0;color:#969696;font-size:9.5px;line-height:1.55}
body.xv-public .release-empty-history{display:flex;align-items:center;gap:9px;padding:14px 0;color:#777;font-size:9.5px}

/* Admin release history panel. */
body.xv-admin .admin-update-history-panel{margin-top:10px}
body.xv-admin .admin-update-history-row{display:grid;grid-template-columns:10px 1fr;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
body.xv-admin .admin-update-history-row:last-child{border-bottom:0}
body.xv-admin .admin-update-dot{width:5px;height:5px;border-radius:50%;margin-top:6px;background:#ddd}
body.xv-admin .admin-update-history-row small{display:block;color:var(--muted2);font-size:8px;margin-bottom:3px}
body.xv-admin .admin-update-history-row b{display:block;font-size:10px}
body.xv-admin .admin-update-history-row p{margin:4px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
body.xv-admin .admin-update-empty{display:flex;align-items:center;gap:8px;color:var(--muted2);font-size:9px;padding:5px 0}


/* ========================================================================== 
   XAVIER STUDIO V3.74 — STATIC ADMIN SELECTED + LEFT-SHEEN PANELS + TOOL FIX
   ========================================================================== */
:root{
  --xv374-hover:linear-gradient(90deg,rgba(255,255,255,.080) 0%,rgba(255,255,255,.032) 56%,rgba(255,255,255,.014) 100%);
  --xv374-active:linear-gradient(90deg,rgba(255,255,255,.180) 0%,rgba(255,255,255,.075) 58%,rgba(255,255,255,.026) 100%);
  --xv374-panel:linear-gradient(90deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 18%,rgba(255,255,255,0) 42%),linear-gradient(145deg,#151515 0%,#0b0b0b 58%,#101010 100%);
}

/* ADMIN — rail never expands, never shifts, never bounces. */
body.xv-admin .rail,
body.xv-admin .rail:hover,
body.xv-admin .rail:focus-within,
body.xv-admin .rail.force-open{
  width:var(--xv368-admin-rail)!important;
  min-width:var(--xv368-admin-rail)!important;
  max-width:var(--xv368-admin-rail)!important;
  transform:none!important;
  transition:none!important;
}
body.xv-admin .main,
body.xv-admin .rail:hover~.main,
body.xv-admin .rail:focus-within~.main,
body.xv-admin .rail.force-open~.main{
  margin-left:var(--xv368-admin-rail)!important;
  width:calc(100% - var(--xv368-admin-rail))!important;
  max-width:calc(100% - var(--xv368-admin-rail))!important;
  transform:none!important;
  transition:none!important;
}
body.xv-admin .rail .nav{
  padding:14px 6px 10px!important;
  gap:5px!important;
}
body.xv-admin .rail .admin-primary-nav{
  padding:0!important;
  margin:0!important;
}
body.xv-admin .rail .admin-primary-nav>button:first-child{margin-top:3px!important}
body.xv-admin .rail .nav button,
body.xv-admin .rail .rail-utility,
body.xv-admin .rail:hover .nav button,
body.xv-admin .rail:focus-within .nav button,
body.xv-admin .rail.force-open .nav button,
body.xv-admin .rail:hover .rail-utility,
body.xv-admin .rail:focus-within .rail-utility,
body.xv-admin .rail.force-open .rail-utility{
  width:46px!important;
  height:42px!important;
  min-width:46px!important;
  min-height:42px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:12px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:background .12s linear,color .12s linear,opacity .12s linear!important;
}
body.xv-admin .rail .nav button:hover,
body.xv-admin .rail .rail-utility:hover{
  background:var(--xv374-hover)!important;
  background-image:var(--xv374-hover)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body.xv-admin .rail .nav button.on,
body.xv-admin .rail .nav button.on:not(:hover),
body.xv-admin .rail:hover .nav button.on,
body.xv-admin .rail:focus-within .nav button.on,
body.xv-admin .rail.force-open .nav button.on,
body.xv-admin .rail .nav button.on:hover{
  background:#171717!important;
  background-image:var(--xv374-active)!important;
  color:#fff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body.xv-admin .rail .nav button i,
body.xv-admin .rail .rail-utility i,
body.xv-admin .rail .nav button:hover i,
body.xv-admin .rail .nav button.on i{
  transform:none!important;
  translate:none!important;
  scale:none!important;
  animation:none!important;
  transition:color .12s linear,opacity .12s linear!important;
}
/* Keep the brand mark centered on the exact rail axis. */
body.xv-admin .admin-global-header,
body.xv-admin .top.admin-global-header{padding-left:12px!important}
body.xv-admin #adminBrandMark{width:34px!important;height:34px!important;min-width:34px!important;margin-left:0!important;margin-right:0!important}

/* Disable old page motion so navigation never appears to bounce. */
body.xv-admin .content,
body.xv-admin .content.admin-nav-transition,
body.xv-admin .page,
body.xv-admin .page.on{
  transform:none!important;
  translate:none!important;
  animation:none!important;
  transition:none!important;
}
::view-transition-old(admin-page),::view-transition-new(admin-page){animation:none!important}

/* Secondary admin tabs use the exact same persistent selected language. */
body.xv-admin .admin-section-tab{
  border:0!important;
  outline:0!important;
  border-radius:10px!important;
  transform:none!important;
  animation:none!important;
  transition:background .12s linear,color .12s linear!important;
}
body.xv-admin .admin-section-tab:hover{background:var(--xv374-hover)!important;box-shadow:none!important}
body.xv-admin .admin-section-tab.on,
body.xv-admin .admin-section-tab.on:not(:hover),
body.xv-admin .admin-section-tab.on:hover{
  background:#171717!important;
  background-image:var(--xv374-active)!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
}

/* PUBLIC HEADER — trigger tabs static; subtle persistent gradient only. */
@media (min-width:921px){
  body.xv-public .top,
  body.xv-public .topin,
  body.xv-public .platform-nav,
  body.xv-public .nav-dropdown{overflow:visible!important}
  body.xv-public .platform-nav>.navlink,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn{
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
    border:0!important;
    outline:0!important;
    border-radius:10px!important;
    transition:background .12s linear,color .12s linear!important;
  }
  body.xv-public .platform-nav>.navlink:hover,
  body.xv-public .platform-nav>.nav-dropdown>.dropbtn:hover{
    background:var(--xv374-hover)!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.xv-public .platform-nav>.navlink.on,
  body.xv-public .platform-nav>.nav-dropdown.route-active>.dropbtn,
  body.xv-public .platform-nav>.nav-dropdown.open>.dropbtn{
    background:var(--xv374-active)!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Platform + Tools: no horizontal translate = no clipped panel. */
  body.xv-public #platformDrop>.platform-menu,
  body.xv-public #toolsDrop>.tools-pro-menu{
    left:0!important;
    right:auto!important;
    width:min(430px,calc(100vw - 28px))!important;
    max-width:calc(100vw - 28px)!important;
    margin-top:4px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-12px)!important;
    clip-path:none!important;
    background:var(--xv374-panel)!important;
    border:1px solid rgba(255,255,255,.075)!important;
    border-radius:15px!important;
    box-shadow:0 26px 70px rgba(0,0,0,.46)!important;
    backdrop-filter:blur(26px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(26px) saturate(112%)!important;
    overflow:auto!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,.78,.22,1),visibility 0s linear .22s!important;
  }
  body.xv-public #platformDrop.open>.platform-menu,
  body.xv-public #toolsDrop.open>.tools-pro-menu{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,.78,.22,1),visibility 0s!important;
  }
  body.xv-public #toolsDrop>.tools-pro-menu{max-height:min(520px,calc(100vh - 92px))!important}
  body.xv-public .platform-menu .nav-menu-head,
  body.xv-public .tools-pro-menu .pro-tool-search,
  body.xv-public .tools-pro-menu .tools-menu-section{
    background:transparent!important;
  }
  body.xv-public .nav-menu-item,
  body.xv-public .pro-tool-item{
    transform:none!important;
    translate:none!important;
    scale:none!important;
    animation:none!important;
    transition:background .11s linear,color .11s linear!important;
  }
  body.xv-public .nav-menu-item:hover,
  body.xv-public .pro-tool-item:hover{background:var(--xv374-hover)!important;border-color:transparent!important;transform:none!important}
}

/* Profile trigger + popover get the same LEFT-side white sheen, never top-left glow. */
body.xv-public .account-top-btn{
  background:linear-gradient(90deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 42%,rgba(255,255,255,.010))!important;
  border-color:rgba(255,255,255,.08)!important;
  transform:none!important;
  transition:background .12s linear,color .12s linear!important;
}
body.xv-public .account-top-btn:hover,
body.xv-public .account-menu-wrap.open .account-top-btn{background:var(--xv374-active)!important;transform:none!important}
body.xv-public .account-popover{
  background:var(--xv374-panel)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.46)!important;
}
body.xv-public .account-pop-links>a,
body.xv-public .account-pop-links>button{transform:none!important;transition:background .11s linear,color .11s linear!important}
body.xv-public .account-pop-links>a:hover,
body.xv-public .account-pop-links>button:hover{background:var(--xv374-hover)!important;transform:none!important}

/* Release card text spacing: labels never collide with large product title. */
body.xv-public .paid-release-head{padding:22px 22px 20px!important}
body.xv-public .paid-release-type{display:block!important;margin:0 0 14px!important;line-height:1.2!important}
body.xv-public .paid-release-head h3{margin:0 0 8px!important;line-height:1.12!important}
body.xv-public .paid-release-head small{display:block!important;line-height:1.45!important}
body.xv-public .paid-release-history{padding:10px 22px 16px!important}

/* Tools: allow panels to use full space and never clip internal content. */
body.xv-public .vu-pro-section,
body.xv-public .vu-main,
body.xv-public .vu-media-column,
body.xv-public .vu-output-column,
body.xv-public .vu-output-sticky,
body.xv-public .vu-config-group,
body.xv-public .su-section,
body.xv-public .su-card{
  min-width:0!important;
  overflow:visible!important;
}
body.xv-public .vu-main{width:100%!important;max-width:100%!important}
body.xv-public .vu-output-column{overflow:visible!important}
body.xv-public .vu-output-sticky{background:linear-gradient(90deg,rgba(255,255,255,.040),rgba(255,255,255,.010) 38%,transparent),#0d0d0d!important}
body.xv-public .vu-output,
html[data-theme="dark"] body.xv-public .vu-output{
  background:#0b0b0b!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.025),transparent 32%)!important;
  color:#ededed!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.018)!important;
}
body.xv-public .vu-stats>div,
body.xv-public .vu-config-group,
body.xv-public .vu-picker,
body.xv-public .vu-api-box,
body.xv-public .vu-gate,
body.xv-public .vu-account-strip{
  background:linear-gradient(90deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 34%,transparent),#0d0d0d!important;
  border-color:rgba(255,255,255,.075)!important;
}

/* Keep all generic interactive cards still on hover. */
body.xv-public .btn:hover,
body.xv-public .card:hover,
body.xv-public .toolcard:hover,
body.xv-public .tool-directory-row:hover,
body.xv-explorer .panel:hover,
body.xv-admin button:hover{
  transform:none!important;
  translate:none!important;
  scale:none!important;
}


/* V3.75 fallback marker: critical styles are embedded after this stylesheet in admin/index. */

/* XAVIER STUDIO V3.88 — VIDEO UPLOADER AUTH / KEY MEMORY / ERROR FEEDBACK */
.vu-remember-key{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:12px 0 6px!important;
  padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012))!important;
  cursor:pointer!important;
}
.vu-remember-key input{width:15px!important;height:15px!important;margin:2px 0 0!important;flex:0 0 15px!important;accent-color:#fff!important}
.vu-remember-key span{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.vu-remember-key b{font-size:12px!important;color:#e8e8e8!important;font-weight:650!important}
.vu-remember-key small{font-size:10px!important;line-height:1.45!important;color:#888!important;font-weight:500!important}
.vu-key-state{font-size:10px!important;color:#777!important;margin:0 0 10px!important;padding-left:2px!important}
.vu-error-box{
  margin:12px 0 14px!important;
  padding:12px 14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-left:2px solid rgba(255,255,255,.52)!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;
}
.vu-error-box[hidden]{display:none!important}
.vu-error-box>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.vu-error-box b{font-size:12px!important;color:#f1f1f1!important}
.vu-error-box span{font-size:9px!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#999!important}
.vu-error-box p{margin:7px 0 3px!important;font-size:11px!important;line-height:1.5!important;color:#b8b8b8!important}
.vu-error-box small{font-size:9px!important;color:#696969!important;word-break:break-all!important}
.vu-toast-host{position:fixed!important;right:18px!important;top:78px!important;z-index:10050!important;display:flex!important;flex-direction:column!important;gap:8px!important;pointer-events:none!important;width:min(360px,calc(100vw - 28px))!important}
.vu-toast{display:grid!important;grid-template-columns:20px 1fr 24px!important;align-items:start!important;gap:10px!important;padding:12px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;background:rgba(14,14,14,.97)!important;box-shadow:0 16px 44px rgba(0,0,0,.38)!important;opacity:0!important;transform:translateY(-6px)!important;transition:opacity .16s ease,transform .16s ease!important;pointer-events:auto!important}
.vu-toast.show{opacity:1!important;transform:none!important}
.vu-toast>i{font-size:17px!important;color:#bbb!important;margin-top:1px!important}
.vu-toast>div{display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important}
.vu-toast b{font-size:12px!important;color:#f0f0f0!important}
.vu-toast span{font-size:10px!important;line-height:1.45!important;color:#969696!important}
.vu-toast button{border:0!important;background:transparent!important;color:#777!important;padding:2px!important;cursor:pointer!important}
.vu-toast.error{border-left:2px solid rgba(255,255,255,.65)!important}
.vu-toast.success{border-left:2px solid rgba(255,255,255,.38)!important}
@media(max-width:720px){.vu-toast-host{top:68px!important;right:14px!important;left:14px!important;width:auto!important}}