/* VR QA Academy — Final 2026 UI stabilization layer
   Visual refresh without changing lab content, card icons, or business logic.
   Focus: automation-friendly UI, deterministic overlays, consistent header.
*/
:root{
  --vrqa-bg:#040713;
  --vrqa-bg2:#071127;
  --vrqa-panel:rgba(10,18,42,.92);
  --vrqa-panel2:rgba(14,25,57,.96);
  --vrqa-border:rgba(88,156,245,.28);
  --vrqa-border-strong:rgba(32,217,255,.52);
  --vrqa-text:#f5f8ff;
  --vrqa-muted:#9db0d2;
  --vrqa-cyan:#20d9ff;
  --vrqa-blue:#4f8cff;
  --vrqa-purple:#8b5cf6;
  --vrqa-orange:#ff9b3d;
}

html,body{min-height:100%;background:var(--vrqa-bg)!important;color:var(--vrqa-text)!important}
body{
  background:
    radial-gradient(900px 580px at 4% -10%,rgba(32,217,255,.12),transparent 62%),
    radial-gradient(900px 620px at 100% -5%,rgba(139,92,246,.17),transparent 62%),
    linear-gradient(145deg,#02040c 0%,#071127 54%,#040713 100%)!important;
}

/* ---------- one stable page shell ---------- */
body[data-modern="1"] .app-header,
body[data-modern="1"] header.app-header,
body[data-modern="1"] .site-header{
  position:sticky!important;top:0!important;z-index:100000!important;
  min-height:68px!important;
  background:linear-gradient(180deg,rgba(4,8,22,.985),rgba(4,8,20,.94))!important;
  border-bottom:1px solid rgba(69,145,255,.30)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.46)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
body[data-modern="1"] .header-inner{
  max-width:1480px!important;
  min-height:68px!important;
  padding:10px 28px!important;
}
body[data-modern="1"] .header-left{gap:18px!important}
body[data-modern="1"] .header-left img{height:46px!important;width:auto!important;display:block!important}
body[data-modern="1"] .nav-links{align-items:center!important;gap:10px!important}
body[data-modern="1"] .nav-links>a,
body[data-modern="1"] .nav-dropbtn,
body[data-modern="1"] .header-left,
body[data-modern="1"] .header-right{color:#f3f7ff!important}
body[data-modern="1"] .nav-links>a,
body[data-modern="1"] .nav-dropbtn{
  padding:10px 12px!important;border-radius:10px!important;font-weight:700!important;
  text-decoration:none!important;background:transparent!important;border:1px solid transparent!important;
}
body[data-modern="1"] .nav-links>a:hover,
body[data-modern="1"] .nav-dropbtn:hover{
  background:rgba(32,217,255,.07)!important;border-color:rgba(32,217,255,.13)!important;color:#fff!important;
}

body[data-modern="1"] .header-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,520px) auto!important;
  align-items:center!important;
  gap:18px!important;
}
body[data-modern="1"] .header-left{min-width:0!important}
body[data-modern="1"] .nav-links{min-width:0!important;flex-wrap:nowrap!important}
body[data-modern="1"] .search-section{min-width:0!important}
body[data-modern="1"] .search-section input{width:100%!important;max-width:520px!important}

/* ---------- header menus: closed until explicitly opened ---------- */
body[data-modern="1"] .nav-dropdown{position:relative!important}
body[data-modern="1"] .nav-dropdown-content,
body[data-modern="1"] .user-dropdown{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body[data-modern="1"] .nav-dropdown.open .nav-dropdown-content,
body[data-modern="1"] .user-dropdown.show{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body[data-modern="1"] .nav-dropdown-content,
body[data-modern="1"] .user-dropdown{
  position:absolute!important;
  background:linear-gradient(145deg,#0d1938 0%,#050b1e 100%)!important;
  color:#f5f8ff!important;
  border:1px solid rgba(74,154,255,.42)!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 26px rgba(32,217,255,.11)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
body[data-modern="1"] .nav-dropdown-content{left:0!important;top:calc(100% + 8px)!important;right:auto!important;min-width:250px!important;padding:8px!important;z-index:110000!important}
body[data-modern="1"] .user-dropdown{right:0!important;top:calc(100% + 10px)!important;min-width:240px!important;padding:10px!important;z-index:110000!important}
body[data-modern="1"] .nav-dropdown-content a,
body[data-modern="1"] .user-dropdown a,
body[data-modern="1"] .user-dropdown button{color:#edf6ff!important;text-decoration:none!important}
body[data-modern="1"] .nav-dropdown-content a:hover,
body[data-modern="1"] .user-dropdown a:hover,
body[data-modern="1"] .user-dropdown button:hover{background:linear-gradient(90deg,rgba(32,217,255,.14),rgba(139,92,246,.16))!important;color:#fff!important}

body[data-modern="1"] .btn-home{color:#fff!important;background:linear-gradient(135deg,#1178d6,#633fe8)!important;border:1px solid rgba(101,190,255,.3)!important;box-shadow:0 10px 26px rgba(54,92,230,.24)!important}
body[data-modern="1"] .avatar-btn{border-color:rgba(32,217,255,.72)!important;box-shadow:0 0 18px rgba(32,217,255,.11)!important}

/* ---------- main page content ---------- */
body[data-modern="1"] .container,
body[data-modern="1"] .dashboard{max-width:1480px!important;margin-left:auto!important;margin-right:auto!important}

/* Preserve the original card icon nodes/content exactly; only the container gets the modern shell. */
body[data-modern="1"] .lab-icon{transform:none!important;filter:none!important}

/* Cards are intentionally non-transforming so automation overlays are never trapped. */
body[data-modern="1"] :is(.card,.lab-card,.panel,.section-card,.form-card,.order-card,.product-card,.profile-card,.table-container,.container-card){
  position:relative!important;
  transform:none!important;
  overflow:visible!important;
  background:linear-gradient(145deg,rgba(14,25,57,.92),rgba(4,10,28,.90))!important;
  border:1px solid var(--vrqa-border)!important;
  color:var(--vrqa-text)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(13px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(125%)!important;
  transition:box-shadow .22s ease,border-color .22s ease,background .22s ease!important;
}
body[data-modern="1"] :is(.card,.lab-card,.panel,.section-card,.form-card,.order-card,.product-card,.profile-card):hover{
  transform:none!important;
  border-color:rgba(32,217,255,.36)!important;
  box-shadow:0 28px 82px rgba(0,0,0,.46),0 0 26px rgba(32,217,255,.07),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* ---------- typography and controls ---------- */
body[data-modern="1"] :is(h1,h2,h3,h4,h5,h6,p,label,span,li,td,th){text-shadow:none!important}
body[data-modern="1"] label,
body[data-modern="1"] .field-label{color:#d9e7fb!important}
body[data-modern="1"] :is(input,textarea,select){
  color:#f6f9ff!important;
  background:#0a1328!important;
  border-color:rgba(107,155,229,.34)!important;
}
body[data-modern="1"] :is(input,textarea)::placeholder{color:#7f93b7!important;opacity:1!important}
body[data-modern="1"] option,
body[data-modern="1"] optgroup{background:#0a1328!important;color:#f6f9ff!important}
body[data-modern="1"] :is(input,textarea,select):focus{
  border-color:rgba(32,217,255,.75)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(32,217,255,.11),0 0 24px rgba(32,217,255,.08)!important;
}
body[data-modern="1"] .result-box{color:#eaf5ff!important;background:#071227!important;border-color:rgba(77,154,255,.24)!important}

/* ---------- deterministic custom dropdown layer ---------- */
body[data-modern="1"] :is(.searchable-list,#searchableSelectList,#suggestions,.multi-panel){
  display:none!important;
  position:absolute!important;
  left:0!important;right:auto!important;top:100%!important;
  margin-top:8px!important;
  z-index:300000!important;
  min-width:100%!important;
  max-width:min(560px,calc(100vw - 24px))!important;
  max-height:320px!important;
  overflow:auto!important;
  background:linear-gradient(145deg,#0d1938 0%,#050b1e 100%)!important;
  color:#f6f9ff!important;
  border:1px solid rgba(32,217,255,.50)!important;
  border-radius:14px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.82),0 0 34px rgba(32,217,255,.12)!important;
  backdrop-filter:blur(16px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
}
body[data-modern="1"] :is(.searchable-list.show,#searchableSelectList.show,#suggestions.show,.multi-panel.show){display:block!important}
body[data-modern="1"] .vrqa-dropdown-open{z-index:50000!important}
body[data-modern="1"] :is(.searchable-list>div,#searchableSelectList>div,#suggestions>div,.multi-panel-body>div){
  color:#f6f9ff!important;background:transparent!important;border-bottom:1px solid rgba(107,145,207,.16)!important;padding:11px 13px!important;
}
body[data-modern="1"] :is(.searchable-list>div,#searchableSelectList>div,#suggestions>div,.multi-panel-body>div):hover{
  color:#fff!important;background:linear-gradient(90deg,rgba(32,217,255,.15),rgba(139,92,246,.18))!important;
}
body[data-modern="1"] .multi-panel{right:0!important;left:0!important;min-width:100%!important}
body[data-modern="1"] .multi-placeholder{color:#7f93b7!important}
body[data-modern="1"] :is(.card:has(.searchable-list),.card:has(#searchableSelectList),.card:has(#suggestions),.card:has(.multi-panel)){overflow:visible!important}

/* Never let old animation transforms recreate stacking contexts. */
body[data-modern="1"] .arena-reveal,
body[data-modern="1"] .arena-reveal.arena-visible{transform:none!important}

/* ---------- modals ---------- */
body[data-modern="1"] .modal-backdrop{position:fixed!important;inset:0!important;z-index:1000000!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(1,4,14,.76)!important;backdrop-filter:blur(12px)!important}
body[data-modern="1"] .modal-backdrop.show{display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
body[data-modern="1"] .modal-backdrop .modal,
body[data-modern="1"] #reviewModal .modal{position:relative!important;z-index:1000001!important;transform:none!important;width:min(560px,calc(100vw - 28px))!important;max-height:86vh!important;overflow:auto!important;margin:auto!important;color:#f5f8ff!important;background:linear-gradient(145deg,#111e41,#050b1e)!important;border:1px solid rgba(70,174,255,.42)!important;border-radius:20px!important;box-shadow:0 40px 120px rgba(0,0,0,.82),0 0 50px rgba(32,217,255,.11)!important}

/* ---------- lab footer ---------- */
body[data-modern="1"] .lab-nav-footer{position:relative!important;z-index:10!important}

/* ---------- shopping/auth ---------- */
body[data-modern="1"] :is(.login-container,.cart-container,.checkout-container,.profile-container,.inventory-container,.auth-card,.shop-card,.product-card,.order-card,.success-card){color:#eef7ff!important;background:linear-gradient(145deg,rgba(11,22,47,.95),rgba(5,12,28,.97))!important;border-color:var(--vrqa-border)!important}

/* ---------- mobile ---------- */
@media(max-width:900px){
  body[data-modern="1"] .header-inner{padding:9px 14px!important}
  body[data-modern="1"] .header-inner{grid-template-columns:minmax(0,1fr) auto!important}
  body[data-modern="1"] .search-section{display:none!important}
  body[data-modern="1"] .nav-links{gap:4px!important}
  body[data-modern="1"] .nav-links>a,
  body[data-modern="1"] .nav-dropbtn{padding:9px 8px!important}
}
@media(max-width:700px){
  body[data-modern="1"] .nav-links{display:none!important}
  body[data-modern="1"] .header-left img{height:42px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}