/* VPN header and account navigation, 2026-09-26. */
html[data-tolf-ui="vpn"] .brand { position:static; padding:0!important; margin:0 0 12px!important; }
html[data-tolf-ui="vpn"] .compact-header {
  position:static!important; inset:auto!important; display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important; gap:12px 20px!important;
  width:100%!important; padding:0!important; border:0!important;
  background:transparent!important; box-shadow:none!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation {
  grid-area:1/1/2/3; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
}
html[data-tolf-ui="vpn"] .compact-header .home-navigation {
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  color:var(--text); font-size:14px; text-decoration:none; white-space:nowrap;
}
html[data-tolf-ui="vpn"] .compact-header .help-navigation {
  color:var(--tolf-action-text,var(--text)); border:0; background:transparent;
  min-height:44px; height:auto; padding:0 4px; font-weight:500; border-radius:6px;
}
html[data-tolf-ui="vpn"] .compact-header .brand-copy {
  grid-area:2/1/3/3; display:grid!important; grid-template-columns:1fr auto 1fr;
  align-items:center; column-gap:10px; margin:0; padding:0; min-width:0;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row {
  grid-column:2; display:block!important; width:auto;
}
html[data-tolf-ui="vpn"] .compact-header .protocol-selector {
  grid-column:3; justify-self:start;
}
html[data-tolf-ui="vpn"] .compact-header h1 { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }
html[data-tolf-ui="vpn"] .compact-header .protocol-selector { display:block; }
html[data-tolf-ui="vpn"] .compact-header .protocol-label { margin:0; font-size:13px; font-weight:400; color:var(--secondary); }
html[data-tolf-ui="vpn"] .page > .header-switchers {
  display:block; position:sticky; top:max(8px,env(safe-area-inset-top,0px));
  z-index:60; width:100%; min-width:0; margin:0 0 20px; padding:0;
  border:0; border-radius:11px; overflow:visible;
  background:var(--background); box-shadow:0 0 0 8px var(--background);
}
html[data-tolf-ui="vpn"] .compact-header .language-switcher {
  grid-area:auto; justify-self:center; display:grid; grid-template-columns:repeat(3,34px);
  width:auto; padding:3px; height:42px; border:1px solid var(--border);
  border-radius:10px; background:var(--segment-background); gap:0;
}
html[data-tolf-ui="vpn"] .compact-header .language-button {
  width:34px; min-width:0; min-height:34px; height:34px; max-height:34px;
  padding:0; font-size:13px; font-weight:500; border-radius:7px;
}
html[data-tolf-ui="vpn"] .page > .header-switchers .platform-switcher {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%; height:44px; min-height:44px; max-height:44px; padding:4px;
  gap:4px; border:1px solid var(--border); border-radius:11px; background:var(--segment-background);
}
html[data-tolf-ui="vpn"] .page > .header-switchers .platform-button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; min-width:0; height:34px; min-height:34px; max-height:34px;
  padding:0 4px; font-size:14px; font-weight:500; line-height:1.2;
  border:1px solid transparent; border-radius:7px; color:var(--secondary); background:transparent;
}
html[data-tolf-ui="vpn"] .page > .header-switchers .platform-button.active {
  color:var(--text); background:var(--card); border-color:var(--border); box-shadow:none;
}
html[data-tolf-ui="vpn"] .page > .header-switchers .platform-icon { width:16px; height:16px; flex:0 0 16px; fill:currentColor; }
html[data-tolf-ui="vpn"] .compact-header :is(a,button):focus-visible,
html[data-tolf-ui="vpn"] .vpn-account-menu summary:focus-visible { outline:2px solid var(--tolf-action-text,var(--text)); outline-offset:3px; }
#vpnCard > .card { overflow:visible; }
html[data-tolf-ui="vpn"] #vpnCard .card-topline {
  display:grid!important; grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:center!important; gap:12px; width:100%;
}
html[data-tolf-ui="vpn"] #vpnCard .card-topline > h2 {
  grid-column:1; grid-row:1; width:auto; min-width:0; margin:0;
}
html[data-tolf-ui="vpn"] #vpnCard .card-topline > .vpn-account-menu {
  grid-column:2; grid-row:1; align-self:center; margin:0;
}
#vpnCard .card-content { padding:22px; }
.vpn-account-menu { position:relative; flex:0 0 auto; margin-left:auto; }
.vpn-account-menu > summary {
  display:flex; align-items:center; justify-content:center; gap:8px; list-style:none;
  min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-weight:500; color:var(--tolf-action-text,var(--text)); cursor:pointer;
}
.vpn-account-menu > summary::-webkit-details-marker { display:none; }
.vpn-account-menu > summary::after { content:"⌄"; font-size:16px; line-height:1; }
#vpnCard .vpn-account-menu > .vpn-account-actions {
  position:absolute; top:calc(100% + 6px); right:0; z-index:70;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  width:230px; max-width:calc(100vw - 48px); margin:0; padding:6px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
#vpnCard .vpn-account-menu:not([open]) > .vpn-account-actions { display:none; }
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-menu .vpn-account-actions > :is(a,button) {
  flex:0 0 auto; display:flex; align-items:center; justify-content:flex-start;
  width:100%; min-height:44px; height:auto; max-height:none; margin:0; padding:10px 12px;
  border:0; border-radius:7px; background:transparent; color:var(--text);
  font:inherit; font-size:14px; font-weight:400; line-height:1.4; text-decoration:none; white-space:normal;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-menu .vpn-account-actions > :is(a,button):hover { background:var(--segment-background); }
#vpnCard .server-section { margin-top:20px; }
#vpnCard .server-heading { font-weight:400; margin-bottom:10px; }
#vpnCard .server-selector { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#vpnCard #serverRecommendations { display:none!important; }
#vpnCard .server-option label {
  position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center;
  gap:6px 10px; height:auto; min-height:88px; padding:8px 6px;
}
#vpnCard .server-flag { font-size:24px; }
#vpnCard .server-city { font-size:15px; }
#vpnCard .server-latency { font-size:12px; font-weight:400; }
#vpnCard .server-recommendation { flex:0 0 100%; font-size:11px; line-height:1.3; font-weight:400; text-align:center; color:inherit; }
#vpnCard .server-address { display:flex; flex-wrap:wrap; gap:4px 8px; margin:14px 0; padding:0; font-size:13px; }
#vpnCard .server-address-value { text-align:left; }
#vpnCard .vpn-overview-card { border:0; border-top:1px solid var(--border); border-radius:0; box-shadow:none; }
@media(max-width:699px) {
  html[data-tolf-ui="vpn"] .page { padding-top:calc(max(var(--tolf-viewport-top,0px),env(safe-area-inset-top,0px)) + 12px); }
  html[data-tolf-ui="vpn"] .compact-header { grid-template-rows:auto auto!important; gap:8px!important; }
  html[data-tolf-ui="vpn"] .compact-header .brand-copy { grid-area:2/1/3/3; justify-content:center; }
  html[data-tolf-ui="vpn"] .compact-header h1 { font-size:25px; }
  #vpnCard .card-content { padding:18px; }
}

@media(max-width:360px) {
  html[data-tolf-ui="vpn"] #homeNavigation .tolf-wordmark { font-size:16px; letter-spacing:.1em; gap:4px; }
  html[data-tolf-ui="vpn"] #homeNavigation .tolf-wordmark::before { width:18px; height:18px; flex-basis:18px; }
  html[data-tolf-ui="vpn"] .compact-header .language-switcher { grid-template-columns:repeat(3,29px); }
  html[data-tolf-ui="vpn"] .compact-header .language-button { width:29px; }
  html[data-tolf-ui="vpn"] .compact-header .help-navigation { font-size:12px; padding:0; }
}

/* Account dropdown repair 20260926 */
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-menu > .vpn-account-actions {
  box-sizing: border-box !important;
  width: 170px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 80px) !important;
  left: auto !important;
  right: 0 !important;
  padding: 6px !important;
  gap: 0 !important;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > :is(
  #accountNavigation, #vpnAdminLink, #signOutButton
) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > .hidden {
  display: none !important;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > :is(a,button):hover {
  background: var(--segment-background) !important;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > :is(a,button):focus-visible {
  outline: 2px solid var(--tolf-action-text);
  outline-offset: -2px;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > #signOutButton {
  margin-top: 4px !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 6px 6px !important;
}
html[data-tolf-ui="vpn"] #vpnCard .vpn-account-actions > #signOutButton svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
html[data-tolf-ui="vpn"] #vpnCard .server-option label {
  min-height: 66px;
  padding: 4px 6px;
  gap: 3px 7px;
}
html[data-tolf-ui="vpn"] #vpnCard .server-option .server-recommendation {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
}

html[data-tolf-ui="vpn"] #vpnCard .server-flag {
  font-size: 21px;
}
html[data-tolf-ui="vpn"] #vpnCard .server-city {
  font-size: 14px;
}
html[data-tolf-ui="vpn"] #vpnCard .server-latency {
  font-size: 11px;
}

/* Title geometry: brand-title-row itself is centered; IKEv2 is absolutely attached and has zero layout width. */
html[data-tolf-ui="vpn"] .compact-header .brand-copy {
  grid-area: 2 / 1 / 3 / 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 34px !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row {
  position: relative !important;
  display: block !important;
  width: max-content !important;
  margin: 0 !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
  margin: 0 !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > .protocol-selector {
  position: absolute !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row .protocol-label {
  margin: 0 !important;
  line-height: 1.2 !important;
}
@media (min-width: 768px) and (orientation: landscape) {
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    grid-area: 2 / 1 / 3 / 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row {
    position: relative !important;
    display: block !important;
    width: max-content !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}

/* Build 15: make title row span the same full content width as the platform switcher. */
html[data-tolf-ui="vpn"] .compact-header .brand-copy {
  display: block !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
  display: inline-block !important;
  margin: 0 auto !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > .protocol-selector {
  left: calc(50% + 88px) !important;
}
@media (min-width: 768px) and (orientation: landscape) {
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    display: block !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
    display: inline-block !important;
  }
}

/* Build 16: on wide iPad the legacy compact-header grid has an unused second column.
   Make both rows span the full header width before centering the title. */
@media (min-width: 768px) and (orientation: landscape) {
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header {
    grid-template-columns: 1fr !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .header-navigation {
    grid-area: 1 / 1 / 2 / 2 !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    grid-area: 2 / 1 / 3 / 2 !important;
    width: 100% !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row {
    width: 100% !important;
    text-align: center !important;
  }
}
/* Build 18: keep title in normal vertical flow; center title and language selector on the page content axis. */
html[data-tolf-ui="vpn"] .page {
  position: static !important;
}
html[data-tolf-ui="vpn"] .compact-header {
  position: static !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-copy {
  grid-area: 2 / 1 / 3 / 3 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
  display: inline-block !important;
  margin: 0 !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > .protocol-selector {
  position: absolute !important;
  left: calc(50% + 88px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation {
  position: relative !important;
  grid-template-columns: 1fr 1fr !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .language-switcher {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .home-navigation {
  grid-column: 1 !important;
  justify-self: start !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .help-navigation {
  grid-column: 2 !important;
  justify-self: end !important;
}
@media (min-width: 768px) and (orientation: landscape) {
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header {
    grid-template-columns: 1fr !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    grid-area: 2 / 1 / 3 / 2 !important;
    display: block !important;
    width: 100% !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

/* Build 19: language selector moves to the right beside Help; title stays in restored flow. */
html[data-tolf-ui="vpn"] .compact-header .header-navigation {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .home-navigation:not(.help-navigation) {
  grid-column: 1 !important;
  justify-self: start !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .language-switcher {
  position: static !important;
  grid-column: 3 !important;
  justify-self: end !important;
  transform: none !important;
}
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .help-navigation {
  grid-column: 4 !important;
  justify-self: end !important;
}

/* Build 20: typography parity with Smart DNS. */
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
}
html[data-tolf-ui="vpn"] #vpnCard .card-topline > h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  letter-spacing: -0.3px !important;
}

/* Build 21: exact Smart DNS typography, including the same system font stack. */
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1,
html[data-tolf-ui="vpn"] #vpnCard .card-topline > h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1,
html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
}
html[data-tolf-ui="vpn"] #vpnCard .card-topline > h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  letter-spacing: -0.3px !important;
}

/* Keep the VPN title in the top row on wide screens. */
@media (min-width:700px) {
  html[data-tolf-ui="vpn"] .page { padding-top:8px; }
  html[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1,
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row > h1 {
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",sans-serif!important;
    font-size:24px!important;
    font-weight:650!important;
    line-height:1.2!important;
    letter-spacing:-.015em!important;
  }
  html[data-tolf-ui="vpn"] .compact-header {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    row-gap:0!important;
  }
  html[data-tolf-ui="vpn"] .compact-header .header-navigation {
    grid-area:1/1/2/2!important;
  }
  html[data-tolf-ui="vpn"] .compact-header .brand-copy,
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    grid-area:1/1/2/2!important;
    justify-self:center!important;
    align-self:center!important;
    width:max-content!important;
    min-height:0!important;
    pointer-events:none;
  }
  html[data-tolf-ui="vpn"] .compact-header .brand-title-row,
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-title-row {
    width:max-content!important;
  }
  html[data-tolf-ui="vpn"] .compact-header .brand-title-row > .protocol-selector {
    left:calc(100% + 10px)!important;
  }
}

/* On wide screens, align the account control with the language selector. */
@media (min-width:700px) {
  html[data-tolf-ui="vpn"] #vpnCard .card-topline > .vpn-account-menu {
    box-sizing:border-box;
    width:146px;
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-account-menu > summary {
    box-sizing:border-box;
    width:100%;
    justify-content:space-between;
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-account-menu > .vpn-account-actions {
    width:100%!important;
    max-width:none!important;
    left:0!important;
    right:auto!important;
  }
}

/* A fixed icon keeps the language controls aligned in every translation. */
html[data-tolf-ui="vpn"] .compact-header .help-navigation,
html[data-tolf-ui="vpn"] .compact-header .header-navigation > .help-navigation {
  box-sizing:border-box;
  display:inline-flex;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--segment-background);
}
html[data-tolf-ui="vpn"] .compact-header .help-navigation svg {
  display:block;
  width:27px;
  height:27px;
  flex:none;
}

/* Narrow VPN header: centered VPN title with equal space above and below. */
@media (max-width: 699px) {
  html[data-tolf-ui="vpn"] .compact-header { gap: 12px !important; }
  html[data-tolf-ui="vpn"] .compact-header .vpn-title-prefix { display: none; }
  html[data-tolf-ui="vpn"] .compact-header .brand-title-row > .protocol-selector {
    left: calc(50% + 38px) !important;
  }
}

/* The card title already identifies VPN on narrow screens. */
@media (max-width: 699px) {
  html[data-tolf-ui="vpn"] .compact-header {
    grid-template-rows: auto !important;
    row-gap: 0 !important;
    gap: 0 !important;
  }
  html[data-tolf-ui="vpn"] .compact-header .brand-copy,
  html.tolf-ipad[data-tolf-ui="vpn"] .compact-header .brand-copy {
    display: none !important;
  }
}


/* AnyConnect step 1: wide-screen connection type selector. */
.vpn-transport-selector { display:none; }

@media (min-width:700px) {
  html[data-tolf-ui="vpn"] #vpnCard .card-topline {
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  }
  html[data-tolf-ui="vpn"] #vpnCard .card-topline > h2 {
    grid-column:1!important;
    justify-self:start;
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-transport-selector {
    grid-column:2;
    grid-row:1;
    justify-self:center;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    width:214px;
    height:42px;
    padding:4px;
    gap:4px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--segment-background);
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-transport-button {
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:32px;
    min-height:32px;
    max-height:32px;
    padding:0 10px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:var(--secondary);
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    line-height:1.2;
    cursor:pointer;
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-transport-button.active {
    color:var(--text);
    background:var(--card);
    border-color:var(--border);
  }
  html[data-tolf-ui="vpn"] #vpnCard .vpn-transport-button:focus-visible {
    outline:2px solid var(--tolf-action-text,var(--text));
    outline-offset:1px;
  }
  html[data-tolf-ui="vpn"] #vpnCard .card-topline > .vpn-account-menu {
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end;
  }
}