/* Multi_Web0.40 — content-sized adaptive Dynamic Capsule
   Closed and expanded geometry are derived from their actual contents.
   Viewport dimensions are constraints, not target sizes. */
.css-topbar{
  position:fixed!important;z-index:10000!important;top:20px!important;left:50%!important;
  right:auto!important;transform:translateX(-50%)!important;width:auto!important;
  max-width:calc(100vw - 28px)!important;margin:0!important;pointer-events:none!important;
}
.css-topbar .dynamic-capsule{
  --closed-w:fit-content;--expanded-w:fit-content;--expanded-h:48px;
  box-sizing:border-box!important;position:relative!important;pointer-events:auto!important;
  width:var(--closed-w)!important;height:48px!important;max-width:calc(100vw - 28px)!important;
  margin:0 auto!important;padding:0 12px!important;
  display:grid!important;grid-template-columns:1fr auto 1fr!important;grid-template-rows:46px auto!important;
  align-items:start!important;overflow:hidden!important;background:#1d1d1f!important;color:#f5f5f7!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:24px!important;
  box-shadow:0 10px 32px rgba(0,0,0,.10)!important;
  transition:width 1.12s cubic-bezier(.22,.72,.18,1),height 1.12s cubic-bezier(.22,.72,.18,1),border-radius 1.12s cubic-bezier(.22,.72,.18,1),box-shadow 1.12s cubic-bezier(.22,.72,.18,1)!important;
  will-change:width,height,border-radius;
}
.css-topbar .dynamic-capsule.is-expanded{
  width:var(--expanded-w)!important;height:var(--expanded-h)!important;
  border-radius:38px!important;box-shadow:0 18px 52px rgba(0,0,0,.14)!important;
}
.css-topbar .brand{
  grid-column:1!important;grid-row:1!important;justify-self:start!important;position:static!important;transform:none!important;
  width:42px!important;height:46px!important;margin:0!important;padding:0!important;display:flex!important;
  align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;
  box-shadow:none!important;border-radius:999px!important;
}
.css-topbar .brand img{width:28px!important;height:28px!important;object-fit:contain!important}
.css-topbar .capsule-primary{
  grid-column:2!important;grid-row:1!important;justify-self:center!important;position:static!important;transform:none!important;
  width:max-content!important;height:46px!important;margin:0!important;padding:0 12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
.css-topbar .capsule-primary>a{
  width:auto!important;height:46px!important;margin:0!important;padding:0 12px!important;display:flex!important;
  align-items:center!important;justify-content:center!important;color:#f5f5f7!important;background:transparent!important;
  border-radius:999px!important;font-size:14px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;
  transition:background-color .28s ease,color .28s ease!important;
}
.css-topbar .capsule-primary>a:hover,.css-topbar .capsule-primary>a.is-active{background:rgba(255,255,255,.10)!important}
.css-topbar .top-actions{
  grid-column:3!important;grid-row:1!important;justify-self:end!important;position:static!important;transform:none!important;
  width:max-content!important;height:46px!important;margin:0!important;padding:0!important;display:flex!important;
  align-items:center!important;justify-content:flex-end!important;gap:8px!important;
}
.css-topbar .icon-entry{
  width:29px!important;height:46px!important;margin:0!important;padding:0!important;display:flex!important;
  align-items:center!important;justify-content:center!important;color:#f5f5f7!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.css-topbar .icon-entry svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
.css-topbar .capsule-expanded{
  grid-column:1/-1!important;grid-row:2!important;position:static!important;box-sizing:border-box!important;
  width:max-content!important;max-width:100%!important;height:auto!important;margin:0!important;padding:26px 32px 34px!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-7px)!important;
  transition:opacity .38s ease .10s,transform .76s cubic-bezier(.22,.72,.18,1) .06s,visibility 0s linear 1.12s!important;
}
.css-topbar .dynamic-capsule.is-expanded .capsule-expanded{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;
  transition:opacity .44s ease .22s,transform .82s cubic-bezier(.22,.72,.18,1) .12s,visibility 0s!important;
}
.css-topbar .mega-panel{
  display:none!important;grid-template-columns:max-content max-content max-content!important;column-gap:56px!important;
  width:max-content!important;max-width:100%!important;text-align:left!important;
}
.css-topbar .mega-panel.active{display:grid!important}
.css-topbar .mega-panel>div{text-align:left!important;min-width:0!important}
.css-topbar .mega-panel p{margin:0 0 18px!important;color:#8e8e93!important;font-size:14px!important}
.css-topbar .mega-panel a{display:block!important;width:max-content!important;max-width:100%!important;margin:0 0 16px!important;color:#f5f5f7!important;background:transparent!important}
.css-topbar .mega-panel .mega-lead{font-size:28px!important;font-weight:600!important;line-height:1.16!important}
.css-topbar .mega-panel a:hover{color:#79adf0!important}
@media(max-width:800px){
  .css-topbar{top:10px!important;max-width:calc(100vw - 20px)!important}
  .css-topbar .dynamic-capsule{max-width:calc(100vw - 20px)!important;padding-inline:8px!important;grid-template-columns:1fr auto 1fr!important}
  .css-topbar .dynamic-capsule.is-expanded{border-radius:30px!important}
  .css-topbar .brand{width:38px!important}.css-topbar .brand img{width:27px!important;height:27px!important}
  .css-topbar .capsule-primary{gap:2px!important;padding-inline:3px!important}
  .css-topbar .capsule-primary>a{font-size:clamp(10px,2.6vw,13px)!important;padding-inline:clamp(3px,1.5vw,8px)!important}
  .css-topbar .top-actions{gap:2px!important}.css-topbar .icon-entry{width:27px!important}.css-topbar .icon-entry svg{width:18px!important;height:18px!important}
  .css-topbar .capsule-expanded{width:100%!important;padding:24px 20px 30px!important;overflow:auto!important}
  .css-topbar .mega-panel{grid-template-columns:1fr!important;width:100%!important;row-gap:18px!important}
}
@media(max-width:560px){
  .css-topbar .capsule-primary{gap:0!important}
  .css-topbar .capsule-primary>a{font-size:clamp(9px,2.45vw,12px)!important;padding-inline:3px!important}
  .css-topbar .brand{width:32px!important}.css-topbar .brand img{width:24px!important;height:24px!important}
  .css-topbar .top-actions{gap:0!important}.css-topbar .icon-entry{width:24px!important}.css-topbar .icon-entry svg{width:17px!important;height:17px!important}
}
@media(prefers-reduced-motion:reduce){.css-topbar .dynamic-capsule,.css-topbar .capsule-expanded{transition-duration:.01ms!important}}

/* Multi_Web0.41 — collision-safe adaptive header + comfortable content breathing room */
@media(min-width:801px){
  .css-topbar .dynamic-capsule{
    display:block!important;
    padding:0!important;
  }
  /* The three top-row regions no longer compete for grid tracks while the capsule morphs. */
  .css-topbar .brand{
    position:absolute!important;left:14px!important;top:0!important;z-index:4!important;
    width:42px!important;height:46px!important;
  }
  .css-topbar .capsule-primary{
    position:absolute!important;left:50%!important;top:0!important;z-index:4!important;
    transform:translateX(-50%)!important;
    height:46px!important;padding:0!important;gap:10px!important;
  }
  .css-topbar .capsule-primary>a{padding-inline:14px!important}
  .css-topbar .top-actions{
    position:absolute!important;right:14px!important;top:0!important;z-index:4!important;
    height:46px!important;gap:8px!important;
  }
  .css-topbar .capsule-expanded{
    position:absolute!important;left:0!important;top:46px!important;
    width:100%!important;max-width:none!important;
    padding:34px 48px 46px!important;
  }
  .css-topbar .mega-panel{
    grid-template-columns:max-content max-content max-content!important;
    column-gap:72px!important;
    width:max-content!important;
    max-width:100%!important;
  }
  .css-topbar .mega-panel p{margin-bottom:20px!important}
  .css-topbar .mega-panel a{margin-bottom:18px!important}
}