/* Vault hero: late-loaded admin New Look preview styles. */

body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome,
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome{
 position:relative;isolation:isolate;overflow:hidden;min-height:365px;padding:38px 42px;
 align-items:center;background:#f5eaf9!important;
 border:1px solid rgba(255,255,255,.82);border-radius:32px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 48px rgba(63,29,76,.14);
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::before,
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::before,
body.light.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::before,
body.light.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::before{
 content:"";display:block!important;position:absolute;z-index:0;inset:0!important;
 background:#211426 url('/htl-vault-workspace-hero-v51.png?v=51') center center/cover no-repeat!important;
 opacity:1!important;filter:brightness(.94) saturate(.9)!important;mask-image:none!important;-webkit-mask-image:none!important;
 pointer-events:none;
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::after{
 content:"";position:absolute;z-index:1;inset:0;
 background:linear-gradient(90deg,rgba(251,245,253,.97) 0%,rgba(248,239,251,.94) 31%,rgba(244,228,249,.76) 47%,rgba(61,30,69,.18) 67%,rgba(28,15,35,.04) 100%);
 pointer-events:none;
}
body.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::after{
 background:linear-gradient(90deg,rgba(248,253,255,.98),rgba(239,248,255,.95) 32%,rgba(221,239,253,.72) 52%,rgba(182,217,249,.22) 80%,rgba(170,209,246,.12));
}
body.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::after{
 background:linear-gradient(90deg,rgba(252,249,244,.98),rgba(248,242,232,.95) 32%,rgba(237,224,203,.72) 52%,rgba(215,186,144,.23) 80%,rgba(204,173,128,.12));
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div,
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div{
 position:relative;z-index:2;max-width:49%;align-self:center;
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome :is(h1,.htl-vault-eyebrow),
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome :is(h1,.htl-vault-eyebrow){
 color:#2c2035!important;-webkit-text-fill-color:#2c2035!important;text-shadow:none!important;
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div>h1+p,
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div>h1+p{
 color:#493752!important;-webkit-text-fill-color:#493752!important;
 max-width:35ch;text-shadow:none!important;
}
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome .htl-vault-eyebrow::before{
 background:#9c63a4!important;
}
/* The old boxed .htl-vault-scope panel is gone — this file now tints the
   compact account pill (.htl-vault-account-picker summary), its menu, and
   the plain-text date to match the Vault's pink/mauve hero skin instead. */
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker summary{
 position:relative;z-index:3;background:rgba(255,250,255,.82)!important;
 border-color:rgba(255,255,255,.89)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.93),0 10px 28px rgba(33,16,46,.13);
 color:#30233a!important;-webkit-text-fill-color:#30233a!important;
}
body.theme-redesign.theme-masculine #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker summary{background:rgba(248,253,255,.85)!important;}
body.theme-redesign.theme-black #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker summary{background:rgba(252,249,244,.85)!important;}
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-scope-kicker{
 color:#5c4c66!important;-webkit-text-fill-color:#5c4c66!important;
}
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-account-name{
 color:#30233a!important;-webkit-text-fill-color:#30233a!important;
}
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-chevron{color:#5c4c66!important;}
body.theme-redesign #main-app #tab-vault .htl-vault-account-menu{
 background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.08)),rgba(255,250,255,.94)!important;
 border-color:rgba(255,255,255,.89)!important;
}
body.theme-redesign #main-app #tab-vault .htl-vault-account-menu button{color:#30233a!important;}
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-account-info .htl-info-ico{
 background:rgba(255,255,255,.55)!important;color:#5c4c66!important;
}
body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-date{
 color:#41334b!important;-webkit-text-fill-color:#41334b!important;
}
@media(max-width:760px){
 body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome,
 body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome{
  min-height:380px;padding:28px 25px;align-items:flex-start;
 }
 body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div,
 body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>div{max-width:100%;align-self:auto;}
 body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::before,
 body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::before,
 body.light.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::before,
 body.light.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::before{
  background-position:72% center!important;
 }
 body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome::after{
  background:linear-gradient(180deg,rgba(253,248,255,.97),rgba(249,241,253,.91) 49%,rgba(240,219,249,.5) 78%,rgba(232,205,245,.33));
 }
 body.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::after{
  background:linear-gradient(180deg,rgba(248,253,255,.97),rgba(235,246,255,.91) 49%,rgba(209,232,252,.5) 78%,rgba(190,220,248,.33));
 }
 body.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::after{
  background:linear-gradient(180deg,rgba(252,249,244,.97),rgba(247,240,228,.91) 49%,rgba(233,217,193,.53) 78%,rgba(220,197,161,.35));
 }
 body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-scope{
  width:100%;margin-top:20px;box-sizing:border-box;
 }
 body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker,
 body.theme-redesign #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker summary{
  width:100%;box-sizing:border-box;
 }
}


/* Match the chart photo and hero controls to Appearance. */

body.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome{
 --vault-hero-ink:#173b53;--vault-hero-muted:#315573;
 --vault-hero-icon:#488ebd;--vault-hero-input:#eef8ff;--vault-hero-date:#e5f3fe;
 --vault-hero-edge:#bddcf1;
 background:#edf7ff!important;border-color:rgba(215,239,254,.85);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 48px rgba(32,85,128,.14);
}
body.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome{
 --vault-hero-ink:#44331e;--vault-hero-muted:#655035;
 --vault-hero-icon:#a4804d;--vault-hero-input:#f9f2e6;--vault-hero-date:#f1e5d0;
 --vault-hero-edge:#e0cfb1;
 background:#f8f2e7!important;border-color:rgba(236,221,194,.85);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 22px 48px rgba(88,68,39,.15);
}
body.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::before,
body.light.theme-redesign.theme-masculine #main-app .content #tab-vault .htl-vault-welcome::before{
 filter:grayscale(1) sepia(1) saturate(2.9) hue-rotate(164deg) brightness(1.22)!important;
}
body.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::before,
body.light.theme-redesign.theme-black #main-app .content #tab-vault .htl-vault-welcome::before{
 filter:grayscale(1) sepia(.9) saturate(1.05) brightness(1.17)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app .content #tab-vault .htl-vault-welcome :is(h1,.htl-vault-eyebrow){
 color:var(--vault-hero-ink)!important;-webkit-text-fill-color:var(--vault-hero-ink)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app .content #tab-vault .htl-vault-welcome>div>h1+p{
 color:var(--vault-hero-muted)!important;-webkit-text-fill-color:var(--vault-hero-muted)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app .content #tab-vault .htl-vault-welcome .htl-vault-eyebrow::before{background:var(--vault-hero-icon)!important;}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-welcome .htl-vault-account-picker summary{
 color:var(--vault-hero-ink)!important;-webkit-text-fill-color:var(--vault-hero-ink)!important;
 border-color:var(--vault-hero-edge)!important;background:var(--vault-hero-input)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-welcome .htl-vault-scope-kicker,
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-welcome .htl-vault-chevron{
 color:var(--vault-hero-muted)!important;-webkit-text-fill-color:var(--vault-hero-muted)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-account-menu{
 background:var(--vault-hero-input)!important;border-color:var(--vault-hero-edge)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-account-menu button{color:var(--vault-hero-ink)!important;}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-welcome .htl-vault-account-info .htl-info-ico{
 background:var(--vault-hero-input)!important;color:var(--vault-hero-muted)!important;
}
body.theme-redesign:is(.theme-masculine,.theme-black) #main-app #tab-vault .htl-vault-welcome .htl-vault-date{
 color:var(--vault-hero-muted)!important;-webkit-text-fill-color:var(--vault-hero-muted)!important;
}

/* A real rounded glass date badge above the chart, in each preview palette.
   The older light-theme rule in styles.css has a stronger selector and gave
   this date a square opaque background, so override it at matching scope. */
body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>.htl-vault-date,
body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>.htl-vault-date{
 position:absolute!important;top:25px!important;right:30px!important;left:auto!important;bottom:auto!important;
 z-index:3;margin:0!important;padding:10px 16px!important;
 border:1px solid var(--vault-hero-edge,rgba(255,255,255,.88))!important;
 border-radius:999px!important;
 background:var(--vault-hero-date,rgba(255,250,255,.84))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 9px 25px rgba(34,17,46,.15)!important;
 backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);
 color:var(--vault-hero-muted,#493752)!important;-webkit-text-fill-color:var(--vault-hero-muted,#493752)!important;
 font:700 12px/1.25 Manrope,sans-serif!important;letter-spacing:.015em;white-space:nowrap;
}
@media(max-width:760px){
 body.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>.htl-vault-date,
 body.light.theme-redesign #main-app .content #tab-vault .htl-vault-welcome>.htl-vault-date{
  position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
  display:inline-flex;align-self:flex-start;margin:0 0 16px!important;
 }
}