/* VEXMIRA v4.2 R10 — universal responsive geometry.
   Final override for desktop monitors, laptops, tablets, iOS/Android phones,
   safe areas, browser zoom and landscape orientation. */
:root{
  --vx1000-page-pad:clamp(12px,2.1vw,32px);
  --vx1000-content-max:1720px;
  --vx1000-header-h:72px;
  --vx1000-mobile-h:64px;
  --vx1000-touch:44px;
  --vx1000-vh:100dvh;
}
@supports not (height:100dvh){:root{--vx1000-vh:100vh}}
*{min-width:0}
html,body{width:100%;max-width:100%;overflow-x:clip!important}
body{min-width:320px}
#mainContent,.page{width:100%;max-width:100%;min-width:0}
#mainContent :where(.grid,[class$="-grid"],[class*="-grid "])>*{min-width:0}
#mainContent :where(h1,h2,h3,h4,p,a,button,span,strong,small){overflow-wrap:break-word}
#mainContent :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){max-width:100%;min-width:0}
#mainContent :where(img,video,canvas,svg){max-width:100%;height:auto}
.vx-table-wrap,[class*="table-wrap"],[class*="table-scroll"]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

/* ---------- Desktop header: one centered navigation dock ---------- */
@media (min-width:981px){
  #topbar.vx320-header,#topbar.vx320-header[data-vx390="1"],#topbar.vx320-header[data-vx380="1"]{
    position:fixed!important;inset:0 0 auto 0!important;height:var(--vx1000-header-h)!important;min-height:var(--vx1000-header-h)!important;
    display:grid!important;grid-template-columns:max-content minmax(0,820px) max-content!important;justify-content:space-between!important;align-items:center!important;
    gap:clamp(10px,1.25vw,20px)!important;padding:0 max(var(--vx1000-page-pad),env(safe-area-inset-right)) 0 max(var(--vx1000-page-pad),env(safe-area-inset-left))!important;
    margin:0!important;overflow:visible!important;background:linear-gradient(180deg,rgba(7,10,27,.985),rgba(5,8,21,.975))!important;
    border-bottom:1px solid rgba(139,92,246,.28)!important;box-shadow:0 16px 46px -38px rgba(34,211,238,.8)!important;z-index:12000!important;
  }
  #topbar .vx320-brand{width:max-content!important;max-width:210px!important;height:54px!important;display:flex!important;align-items:center!important;gap:10px!important;overflow:hidden!important}
  #topbar .vx320-brand-mark{width:46px!important;height:46px!important;min-width:46px!important;display:grid!important;place-items:center!important}
  #topbar .vx320-brand-mark img{width:44px!important;height:44px!important;max-width:44px!important}
  #topbar .vx320-brand-name{font-size:clamp(15px,1.12vw,19px)!important;line-height:1!important;letter-spacing:.15em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #vx320DesktopNav.vx900-nav-dock{
    justify-self:center!important;width:100%!important;max-width:820px!important;height:54px!important;min-height:54px!important;padding:5px!important;gap:5px!important;
    border-radius:17px!important;overflow:visible!important;background:linear-gradient(180deg,rgba(16,22,50,.91),rgba(8,12,30,.94))!important;
  }
  #vx320DesktopNav .vx900-nav-primary{height:100%!important;gap:3px!important;grid-auto-columns:minmax(0,1fr)!important}
  #vx320DesktopNav .vx900-route,#vx320DesktopNav .vx900-discover-trigger{
    height:42px!important;min-height:42px!important;border-radius:12px!important;padding:0 clamp(7px,.68vw,11px)!important;gap:6px!important;
    font-size:11.7px!important;font-weight:800!important;letter-spacing:-.012em!important;overflow:visible!important;
  }
  #vx320DesktopNav .vx900-route b,#vx320DesktopNav .vx900-discover-trigger b{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
  #vx320DesktopNav .vx900-route span,#vx320DesktopNav .vx900-discover-trigger span{width:15px;height:15px;flex:0 0 15px}
  #vx320DesktopNav .vx900-route svg,#vx320DesktopNav .vx900-discover-trigger svg{width:14px!important;height:14px!important}
  #vx320DesktopNav .vx900-discover-trigger{flex:0 0 clamp(82px,6.7vw,94px)!important;padding-inline:10px!important}
  #topbar .vx320-actions{height:54px!important;min-width:0!important;max-width:min(390px,30vw)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;overflow:visible!important}
  #topbar .vx320-hamburger{display:none!important}
  #mainContent{padding-top:var(--vx1000-header-h)!important}
}

/* Large monitors: keep the dock visually centered instead of stretching into empty space. */
@media (min-width:1800px){
  :root{--vx1000-page-pad:clamp(28px,3vw,58px)}
  #topbar.vx320-header{grid-template-columns:minmax(220px,1fr) minmax(760px,860px) minmax(300px,1fr)!important}
  #vx320DesktopNav.vx900-nav-dock{max-width:860px!important}
  #topbar .vx320-actions{justify-self:end!important;max-width:420px!important}
}
@media (min-width:2560px){
  :root{--vx1000-content-max:1920px;--vx1000-page-pad:64px}
  #topbar.vx320-header{grid-template-columns:minmax(260px,1fr) 880px minmax(340px,1fr)!important}
  #vx320DesktopNav.vx900-nav-dock{max-width:880px!important}
}

/* Common 1366/1440 laptop/monitor class. */
@media (min-width:1280px) and (max-width:1599px){
  #topbar.vx320-header{gap:12px!important;padding-inline:clamp(16px,1.6vw,24px)!important}
  #topbar .vx320-brand{max-width:180px!important}
  #topbar .vx320-actions{max-width:310px!important;gap:5px!important}
  #vx320DesktopNav.vx900-nav-dock{max-width:760px!important}
  #vx320DesktopNav .vx900-route{font-size:11.45px!important;padding-inline:7px!important}
}

/* Compact desktop / landscape tablet: brand copy collapses before the menu does. */
@media (min-width:981px) and (max-width:1279px){
  #topbar.vx320-header{grid-template-columns:52px minmax(0,1fr) max-content!important;gap:9px!important;padding-inline:11px!important}
  #topbar .vx320-brand{width:50px!important;max-width:50px!important;justify-content:center!important}
  #topbar .vx320-brand-name{display:none!important}
  #topbar .vx320-brand-mark{width:44px!important;height:44px!important;min-width:44px!important}
  #topbar .vx320-actions{max-width:255px!important;gap:4px!important}
  #topbar .vx320-lang{flex:0 0 auto!important}
  #topbar .vx320-lang button{min-width:34px!important;padding-inline:7px!important}
  #topbar .vx320-theme .theme-picker-label{display:none!important}
  #vx320DesktopNav.vx900-nav-dock{max-width:none!important}
  #vx320DesktopNav .vx900-route{font-size:11.1px!important;padding-inline:6px!important}
  #vx320DesktopNav .vx900-discover-trigger{flex-basis:82px!important;font-size:11.1px!important}
  #authArea :is(.vx410-account-hud,.vx420-account-hud){max-width:190px!important}
  #authArea :is(.vx410-account-stats,.vx420-account-stats){display:none!important}
}
@media (min-width:981px) and (max-width:1099px){
  #topbar .vx320-lang button:not(.active){display:none!important}
  #topbar .vx320-actions{max-width:215px!important}
  #authArea :is(.vx410-account-facts,.vx420-account-facts){display:none!important}
  #authArea :is(.vx410-account-hud,.vx420-account-hud){max-width:148px!important}
}

/* ---------- Universal phone/tablet header ---------- */
@media (max-width:980px){
  :root{--vx1000-mobile-h:64px}
  html,body{width:100%!important;max-width:100%!important;overflow-x:clip!important}
  #topbar.vx320-header,#topbar.vx320-header[data-vx390="1"],#topbar.vx320-header[data-vx380="1"]{
    position:fixed!important;left:0!important;right:0!important;top:0!important;width:100%!important;max-width:100%!important;
    height:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top))!important;min-height:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top))!important;
    display:grid!important;grid-template-columns:minmax(44px,1fr) max-content!important;align-items:end!important;column-gap:6px!important;
    padding-top:env(safe-area-inset-top)!important;padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important;padding-bottom:6px!important;
    margin:0!important;transform:none!important;box-sizing:border-box!important;overflow:visible!important;
    background:linear-gradient(180deg,rgba(7,10,27,.995),rgba(5,8,21,.99))!important;border-bottom:1px solid rgba(139,92,246,.28)!important;z-index:12000!important;
  }
  #vx320DesktopNav{display:none!important}
  #topbar .vx320-brand{grid-column:1!important;align-self:center!important;justify-self:start!important;width:max-content!important;max-width:100%!important;height:48px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;gap:8px!important;overflow:hidden!important}
  #topbar .vx320-brand-mark{width:42px!important;height:42px!important;min-width:42px!important;display:grid!important;place-items:center!important}
  #topbar .vx320-brand-mark img{width:40px!important;height:40px!important;max-width:40px!important}
  #topbar .vx320-brand-name{font-size:14px!important;letter-spacing:.14em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #topbar .vx320-actions{grid-column:2!important;align-self:center!important;justify-self:end!important;width:max-content!important;max-width:calc(100vw - 58px)!important;min-width:0!important;height:48px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;position:static!important;transform:none!important;overflow:visible!important}
  #topbar .vx320-lang,#topbar .vx320-theme{display:none!important}
  #topbar #notifBtn.vx320-icon-btn{order:2!important;position:relative!important;inset:auto!important;width:39px!important;height:39px!important;min-width:39px!important;max-width:39px!important;margin:0!important;transform:none!important;border-radius:12px!important;flex:0 0 39px!important}
  #topbar .vx320-hamburger{order:3!important;position:relative!important;inset:auto!important;display:flex!important;width:41px!important;height:41px!important;min-width:41px!important;max-width:41px!important;margin:0!important;padding:10px!important;transform:none!important;border-radius:13px!important;flex:0 0 41px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important}
  #topbar .vx320-hamburger span{position:static!important;width:18px!important;height:2px!important;min-height:2px!important;margin:0!important;transform:none!important;border-radius:4px!important}
  #topbar #authArea{order:1!important;margin:0!important}
  #topbar #authArea:not(:has(.vx410-account-hud)):not(:has(.vx420-account-hud)){display:none!important}
  #topbar #authArea:has(.vx410-account-hud),#topbar #authArea:has(.vx420-account-hud){display:block!important;position:static!important;width:43px!important;min-width:43px!important;max-width:43px!important;height:43px!important;min-height:43px!important;margin:0!important;padding:0!important;overflow:visible!important;flex:0 0 43px!important;transform:none!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud){position:relative!important;inset:auto!important;width:43px!important;min-width:43px!important;max-width:43px!important;height:43px!important;min-height:43px!important;max-height:43px!important;margin:0!important;padding:2px!important;border-radius:13px!important;overflow:hidden!important;display:grid!important;place-items:center!important;grid-template-columns:1fr!important;transform:none!important}
  #topbar #authArea :is(.vx410-account-copy,.vx410-account-facts,.vx410-account-stats,.vx420-account-copy,.vx420-account-facts,.vx420-account-stats){display:none!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud) img{width:37px!important;height:37px!important;min-width:37px!important;max-width:37px!important;object-fit:cover!important;border-radius:11px!important;margin:0!important}
  #mainContent{padding-top:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top))!important;max-width:100vw!important;overflow-x:clip!important}
  #vx320MobileMenu{position:fixed!important;left:0!important;right:0!important;top:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top))!important;bottom:0!important;width:100%!important;height:auto!important;max-width:100vw!important;margin:0!important;padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;z-index:11990!important}
  #vx320MobileMenu .vx320-mobile-menu-inner{width:100%!important;max-width:660px!important;margin:0 auto!important;padding:12px 0 20px!important;box-sizing:border-box!important}
  #vx320MobileMenu .vx320-mobile-brand{display:flex!important;align-items:center!important;gap:10px!important;padding:7px 5px 12px!important}
  #vx320MobileMenu .vx320-mobile-brand img{width:40px!important;height:40px!important}
  #vx320MobileMenu .vx320-mobile-nav{display:grid!important;width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #vx320MobileMenu .vx900-route{width:100%!important;min-width:0!important;min-height:50px!important;padding:10px 12px!important;justify-content:flex-start!important;gap:9px!important;border:1px solid rgba(139,92,246,.14)!important;border-radius:13px!important;background:rgba(13,18,39,.76)!important;overflow:hidden!important}
  #vx320MobileMenu .vx900-route b{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important}
  #vx320MobileMenu .vx900-route.active{border-color:rgba(139,92,246,.42)!important;background:linear-gradient(135deg,rgba(139,92,246,.17),rgba(34,211,238,.05))!important}
  #vx320MobileMenu .vx320-mobile-foot{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:12px!important;padding:12px 0 0!important}
  #vx320MobileMenu .vx320-mobile-foot .vx320-lang{display:flex!important;width:max-content!important}
  #vx320MobileMenu .vx320-mobile-auth{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important}
  #vx320MobileMenu .vx320-mobile-auth .btn{width:100%!important;min-width:0!important;min-height:var(--vx1000-touch)!important}
  .vx900-discover{left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;top:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top) + 7px)!important;width:auto!important;max-width:none!important;max-height:calc(var(--vx1000-vh) - var(--vx1000-mobile-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px)!important;border-radius:18px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  .vx420-operation-shell{top:calc(var(--vx1000-mobile-h) + env(safe-area-inset-top))!important;height:calc(var(--vx1000-vh) - var(--vx1000-mobile-h) - env(safe-area-inset-top))!important;left:0!important;right:0!important;width:100%!important;max-width:100vw!important;overflow:auto!important;padding-bottom:env(safe-area-inset-bottom)!important}
  .vx420-workspace{width:100%!important;max-width:100%!important;padding-inline:max(12px,env(safe-area-inset-left))!important}
  .vx420-workspace-body,.vx420-panel,.vx420-form-grid,.vx420-admin-main{min-width:0!important;max-width:100%!important}
  .vx420-form-grid{grid-template-columns:1fr!important}
  .vx420-admin-layout{grid-template-columns:1fr!important;max-width:100%!important;overflow:visible!important}
  .vx420-admin-side{position:static!important;width:100%!important;max-width:100%!important;display:flex!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;gap:7px!important;padding:8px!important;scroll-snap-type:x proximity!important;overscroll-behavior-inline:contain!important}
  .vx420-admin-side button{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start!important;min-height:44px!important}
  .vx-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .modal,.modal-card,.vx-modal-card{max-width:calc(100vw - 20px)!important;max-height:calc(var(--vx1000-vh) - 24px)!important;margin:auto!important}
  .sheet,.drawer,.notif-drawer{max-width:100vw!important}
  .chat-fab,.support-fab,[class*="chat-fab"]{right:max(12px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
}

/* iPhone/Android narrow portrait widths. */
@media (max-width:520px){
  #topbar .vx320-brand-name{display:none!important}
  #vx320MobileMenu .vx320-mobile-nav{grid-template-columns:1fr!important}
  #vx320MobileMenu .vx320-mobile-auth{grid-template-columns:1fr!important}
  #vx320MobileMenu .vx900-route{min-height:48px!important}
}
@media (max-width:374px){
  :root{--vx1000-mobile-h:60px}
  #topbar.vx320-header{padding-left:max(7px,env(safe-area-inset-left))!important;padding-right:max(7px,env(safe-area-inset-right))!important;column-gap:4px!important;padding-bottom:5px!important}
  #topbar .vx320-brand-mark{width:38px!important;height:38px!important;min-width:38px!important}
  #topbar .vx320-brand-mark img{width:37px!important;height:37px!important;max-width:37px!important}
  #topbar .vx320-actions{gap:3px!important;height:44px!important;max-width:calc(100vw - 51px)!important}
  #topbar #notifBtn.vx320-icon-btn{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;flex-basis:36px!important}
  #topbar .vx320-hamburger{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;flex-basis:38px!important}
  #topbar #authArea:has(.vx410-account-hud),#topbar #authArea:has(.vx420-account-hud){width:39px!important;min-width:39px!important;max-width:39px!important;height:39px!important;min-height:39px!important;flex-basis:39px!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud){width:39px!important;min-width:39px!important;max-width:39px!important;height:39px!important;min-height:39px!important;max-height:39px!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud) img{width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important}
}

/* Landscape phones: conserve vertical space and keep controls reachable. */
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  :root{--vx1000-mobile-h:56px}
  #topbar.vx320-header{padding-bottom:4px!important}
  #topbar .vx320-brand-mark{width:36px!important;height:36px!important;min-width:36px!important}
  #topbar .vx320-brand-mark img{width:35px!important;height:35px!important;max-width:35px!important}
  #topbar .vx320-brand-name{font-size:13px!important}
  #topbar .vx320-actions{height:42px!important}
  #topbar #notifBtn.vx320-icon-btn{width:35px!important;height:35px!important;min-width:35px!important;max-width:35px!important;flex-basis:35px!important}
  #topbar .vx320-hamburger{width:37px!important;height:37px!important;min-width:37px!important;max-width:37px!important;flex-basis:37px!important}
  #topbar #authArea:has(.vx410-account-hud),#topbar #authArea:has(.vx420-account-hud){width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;flex-basis:38px!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud){width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important}
  #topbar #authArea :is(.vx410-account-hud,.vx420-account-hud) img{width:33px!important;height:33px!important;min-width:33px!important;max-width:33px!important}
  #vx320MobileMenu .vx320-mobile-menu-inner{max-width:760px!important}
  #vx320MobileMenu .vx320-mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #vx320MobileMenu .vx900-route{min-height:44px!important;padding-block:7px!important}
}

/* ---------- Page/system responsive safeguards ---------- */
@media (max-width:980px){
  :where(.vx320-wrap,.vx65-wrap,.vx65-page,.v2-page,.vx420-workspace,.vx420-admin-shell){padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  #page-support .vx65-support-page{padding-inline:10px!important}
  #page-support .vx65-support-grid,#page-support .vx65-ticket-center{grid-template-columns:1fr!important;gap:10px!important}
  #page-support .vx65-ticket-create{position:static!important;top:auto!important}
  #page-support .vx65-ticket-list-card #ticketList{max-height:270px!important}
  #page-support .vx65-ticket-detail-card{min-height:0!important}
  #page-support .vx65-ticket-thread{min-height:120px!important;max-height:42dvh!important;padding:12px!important}
  #page-support .vx65-ticket-msg{max-width:94%!important}
  #page-support .vx65-ticket-compose{padding:12px!important}
  .vx900-live-support-head{padding:12px!important;gap:10px!important;align-items:flex-start!important;flex-direction:column!important}
  .vx900-live-actions{display:grid!important;grid-template-columns:1fr auto!important;width:100%!important}
  .vx900-live-actions select{grid-column:1!important;width:100%!important;min-width:0!important}
  .vx900-live-actions #vx900Claim{grid-column:1/-1!important;width:100%!important}
  .vx900-live-thread{height:min(48dvh,420px)!important;padding:12px!important}
  .vx900-live-msg{max-width:92%!important}
  .vx900-live-compose{padding:12px!important;grid-template-columns:1fr!important}
  :where(.btn,button,[role="button"]){touch-action:manipulation}
}

/* Touch accessibility without bloating desktop. */
@media (pointer:coarse){
  :where(button,.btn,a[role="button"],input,select){min-height:44px}
  :where(button,.btn,a[role="button"]){-webkit-tap-highlight-color:transparent}
}

/* Browser zoom / Windows scaling resilience. */
@media (min-resolution:1.25dppx) and (min-width:981px) and (max-width:1300px){
  #topbar.vx320-header{gap:8px!important;padding-inline:10px!important}
  #vx320DesktopNav .vx900-route{font-size:10.9px!important;padding-inline:5px!important}
  #topbar .vx320-actions{gap:3px!important}
}

@media (prefers-reduced-motion:reduce){
  #topbar *,#vx320MobileMenu *,.vx900-discover *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}