html.ui-v2 .pf-dash { --pf-rail: 248px; }
html.ui-v2 .pf-rail { padding: 20px 14px 14px; gap: 0; overflow: hidden; border: 0; background: var(--pf-frame, #0d0e12); }
html.ui-v2 .pf-brand-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 5px 22px; flex: 0 0 auto; }
html.ui-v2 .pf-brand { padding: 0; gap: 10px; font-size: 21px; letter-spacing: -.7px; flex: 1; min-width: 0; white-space: nowrap; }
html.ui-v2 .pf-brand > img { width: 34px; height: 34px; flex: 0 0 auto; }
html.ui-v2 .pf-brand > b { font-weight: 650; color: #f0f1f6; }
html.ui-v2 .pf-shell-control { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 9px; background: #171920; color: #c9cdd9; cursor: pointer; white-space: nowrap; transition: background-color 140ms, color 140ms, transform 140ms; }
html.ui-v2 .pf-shell-control > svg { width: 20px; height: 20px; }
html.ui-v2 .pf-shell-control:hover, html.ui-v2 .pf-shell-control:focus-visible { background: #242733; color: #ffffff; outline: none; }
/* The collapse icon is a drawn frame already, so the button around it carries
   no tile of its own, at rest or under the pointer: the icon brightens instead. */
html.ui-v2 .pf-collapse-control, html.ui-v2 .pf-collapse-control:hover, html.ui-v2 .pf-collapse-control:focus-visible { background: transparent; }
html.ui-v2 .pf-collapse-control { color: #9ca1b3; }
html.ui-v2 .pf-collapse-control:hover, html.ui-v2 .pf-collapse-control:focus-visible { color: #ffffff; }
html.ui-v2 .pf-shell-control:active { transform: scale(.985); color: #ffffff; }
html.ui-v2 .pf-navigation-list { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; flex: 1; }
html.ui-v2 .pf-navigation-group { margin: 0 0 20px; padding: 0; }
html.ui-v2 .pf-navigation-group:last-child { margin-bottom: 0; }
html.ui-v2 .pf-navgroup { font-size: 10px; font-weight: 550; color: #858b9d; line-height: 16px; padding: 0 12px 7px; margin: 0; letter-spacing: .02em; }
html.ui-v2 .pf-nav { min-height: 43px; height: 43px; display: flex; align-items: center; width: 100%; gap: 12px; margin: 2px 0; padding: 0 11px; color: #b0b4c3; background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; font: 500 12px/1.2 var(--font-sans, 'Geist', sans-serif); white-space: nowrap; transition: background-color 140ms, color 140ms; }
html.ui-v2 .pf-nav:hover, html.ui-v2 .pf-nav:focus-visible { background: #1b1d25; color: #f0f2fa; }
html.ui-v2 .pf-nav.on { background: #242a40; color: #e0e6ff; }
html.ui-v2 .pf-nav.on:hover, html.ui-v2 .pf-nav.on:focus-visible { background: #303853; color: #ffffff; }
html.ui-v2 .pf-nav-ico { width: 22px; height: 24px; flex: 0 0 22px; display: grid; place-items: center; opacity: .83; perspective: 180px; }
html.ui-v2 .pf-nav-ico > svg, html.ui-v2 .pf-nav-object { width: 22px; height: 24px; display: block; transition: transform 180ms cubic-bezier(.2,.7,.3,1), opacity 140ms; }
html.ui-v2 .pf-nav:hover .pf-nav-object, html.ui-v2 .pf-nav:focus-visible .pf-nav-object { transform: rotateY(-12deg); }
html.ui-v2 .pf-nav.on .pf-nav-ico, html.ui-v2 .pf-nav:hover .pf-nav-ico { opacity: 1; }
html.ui-v2 .pf-nav:active .pf-nav-object { transform: scale(.96); }
html.ui-v2 .pf-nav-label { font-size: 12px; font-weight: 500; line-height: 1.2; }
html.ui-v2 .pf-nav.on .pf-nav-label { font-weight: 600; }
html.ui-v2 .pf-nav-count { background: #353b50; color: #e0e5f5; font-size: 10px; padding: 3px 5px; }
html.ui-v2 .pf-rail-foot { margin: 0; padding: 14px 2px 0; flex: 0 0 auto; min-width: 0; }
html.ui-v2 .pf-account-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border-radius: 12px; background: #171920; }
html.ui-v2 .pf-account-row .pf-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
html.ui-v2 .pf-account-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
html.ui-v2 .pf-account-name, html.ui-v2 .pf-account-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .pf-account-name { font-size: 11px; font-weight: 550; color: #e9ebf3; }
html.ui-v2 .pf-account-role { font-size: 9px; color: #969cad; }
html.ui-v2 .pf-rail-support { padding: 12px 9px 0; gap: 13px; align-items: center; justify-content: flex-start; font-size: 10px; color: #8c92a3; }
html.ui-v2 .pf-rail-support > span { margin-left: auto; white-space: nowrap; font-size: 9px; }
html.ui-v2 .pf-rail-extra { margin: 0 7px 12px; font-size: 11px; }
html.ui-v2 .pf-rail-extra select { width: 100%; max-width: 100%; min-width: 0; border: 0; background: #1b1e27; color: #d2d6e2; border-radius: 8px; }
html.ui-v2 .pf-mobile-bar, html.ui-v2 .pf-drawer-close, html.ui-v2 .pf-nav-scrim { display: none; }
html.ui-v2 .pf-nav-scrim[hidden] { display: none; }
html.ui-v2 .pf-body { scrollbar-gutter: auto; }

@media (min-width: 821px) {
  html.ui-v2 .pf-compact { --pf-rail: 76px; }
  html.ui-v2 .pf-compact .pf-rail { padding-inline: 10px; }
  html.ui-v2 .pf-compact .pf-brand-row { flex-direction: column; padding: 0 0 14px; gap: 8px; }
  html.ui-v2 .pf-compact .pf-brand > b, html.ui-v2 .pf-compact .pf-nav-label, html.ui-v2 .pf-compact .pf-nav-count, html.ui-v2 .pf-compact .pf-navgroup, html.ui-v2 .pf-compact .pf-account-copy, html.ui-v2 .pf-compact .pf-rail-support, html.ui-v2 .pf-compact .pf-rail-extra { display: none; }
  html.ui-v2 .pf-compact .pf-brand { flex: 0; }
  html.ui-v2 .pf-compact .pf-nav { justify-content: center; padding: 0; height: 45px; }
  html.ui-v2 .pf-compact .pf-navigation-group { margin-bottom: 14px; }
  html.ui-v2 .pf-compact .pf-account-row { flex-direction: column; padding: 7px; }
  html.ui-v2 .pf-compact .pf-collapse-control > svg { transform: rotate(180deg); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  html.ui-v2 .pf-dash:not(.pf-compact) { --pf-rail: 222px; }
  html.ui-v2 .pf-brand { font-size: 18px; gap: 8px; }
  html.ui-v2 .pf-brand-row { padding-inline: 3px; gap: 3px; }
  html.ui-v2 .pf-brand > img { width: 30px; height: 30px; }
  html.ui-v2 .pf-nav { padding-inline: 9px; gap: 9px; }
}
@media (max-width: 820px) {
  html.ui-v2 .pf-navigation-group { margin-bottom: 14px; }
  html.ui-v2 .pf-nav { min-height: 40px; height: 40px; margin-block: 1px; }
  html.ui-v2 .pf-rail-extra .view-as-label { display: inline; }
  html.ui-v2 .pf-rail-extra .view-as { display: flex; align-items: center; gap: 8px; }
  html.ui-v2 .pf-rail-extra select { width: auto; flex: 1; }
  html.ui-v2 .pf-dash { --pf-rail: 260px; grid-template-columns: minmax(0,1fr); grid-template-rows: 56px minmax(0,1fr); }
  html.ui-v2 .pf-mobile-bar { display: flex; align-items: center; grid-column: 1; grid-row: 1; height: 56px; padding: 0 14px; gap: 12px; background: #0d0e12; min-width: 0; }
  html.ui-v2 .pf-mobile-bar .pf-shell-control { width: 36px; height: 36px; }
  html.ui-v2 .pf-mobile-title { flex: 1; font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-v2 .pf-mobile-bar > a { display: flex; padding: 3px; }
  html.ui-v2 .pf-body { grid-column: 1; grid-row: 2; height: calc(100dvh - 56px); padding: 24px 18px; }
  html.ui-v2 .pf-rail { position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(280px,calc(100vw - 44px)); height: 100dvh; padding: 20px 14px 14px; transform: translateX(-100%); visibility: hidden; transition: transform 180ms cubic-bezier(.2,.7,.3,1); }
  html.ui-v2 .pf-drawer-open .pf-rail { transform: translateX(0); visibility: visible; }
  html.ui-v2 .pf-drawer-close { display: grid; }
  html.ui-v2 .pf-collapse-control { display: none; }
  html.ui-v2 .pf-brand > b { display: block; }
  html.ui-v2 .pf-nav-label, html.ui-v2 .pf-navgroup { display: block; }
  html.ui-v2 .pf-nav { justify-content: flex-start; padding: 0 11px; height: 43px; }
  html.ui-v2 .pf-nav-ico { width: 22px; height: 24px; }
  html.ui-v2 .pf-rail-support { display: flex; }
  html.ui-v2 .pf-rail-foot { display: block; padding-top: 14px; }
  html.ui-v2 .pf-nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 119; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; border-radius: 0; background: #0009; cursor: default; }
  html.ui-v2 .pf-rail-extra { display: block; }
}
@media (max-width: 500px) { html.ui-v2 .pf-body { padding: 22px 16px; } }
@media (prefers-reduced-motion: reduce) { html.ui-v2 .pf-rail, html.ui-v2 .pf-nav, html.ui-v2 .pf-nav-object, html.ui-v2 .pf-shell-control { transition: none; } }

@media (min-width: 821px) and (max-height: 800px) {
  html.ui-v2 .pf-rail { padding-top: 14px; padding-bottom: 10px; }
  html.ui-v2 .pf-brand-row { padding-bottom: 10px; }
  html.ui-v2 .pf-navigation-group { margin-bottom: 10px; }
  html.ui-v2 .pf-navgroup { font-size: 9px; line-height: 14px; padding-bottom: 3px; }
  html.ui-v2 .pf-nav { height: 35px; min-height: 35px; margin-block: 1px; }
  html.ui-v2 .pf-nav-ico, html.ui-v2 .pf-nav-ico > svg { width: 20px; height: 22px; }
  html.ui-v2 .pf-rail-foot { padding-top: 10px; }
  html.ui-v2 .pf-rail-extra { margin-bottom: 8px; }
  html.ui-v2 .pf-rail-extra .view-as { gap: 8px; }
  html.ui-v2 .pf-rail-extra select { height: 30px; padding-block: 4px; }
  html.ui-v2 .pf-account-row { padding: 7px; }
  html.ui-v2 .pf-rail-support { padding-top: 8px; }
}

/* The rail fits the window rather than scrolling its last items under the
   account panel: on a shorter screen the rows tighten, and on a laptop the
   support links give their line to the pages. */
@media (min-width: 761px) and (max-height: 1100px) {
  html.ui-v2 .pf-brand-row { padding-bottom: 14px; }
  html.ui-v2 .pf-navigation-group { margin-bottom: 12px; }
  html.ui-v2 .pf-navgroup { padding-bottom: 4px; }
  html.ui-v2 .pf-nav { min-height: 38px; height: 38px; margin: 1px 0; }
}
@media (min-width: 761px) and (max-height: 940px) {
  html.ui-v2 .pf-rail { padding-top: 14px; }
  html.ui-v2 .pf-nav { min-height: 35px; height: 35px; }
  html.ui-v2 .pf-navigation-group { margin-bottom: 8px; }
  html.ui-v2 .pf-rail-support { display: none; }
  html.ui-v2 .pf-rail-foot { padding-top: 10px; }
}