html[data-vpn-transport="ikev2"] #anyConnectAccess { display: none; }
html[data-vpn-transport="anyconnect"] #profileSettings,
html[data-vpn-transport="anyconnect"] .vpn-profile-actions,
html[data-vpn-transport="anyconnect"] #deleteSection,
html[data-vpn-transport="anyconnect"] .promo-section,
html[data-vpn-transport="anyconnect"] #windowsPanel { display: none !important; }
html[data-vpn-transport="anyconnect"] #legacyVpnPanel { display: block !important; }
#anyConnectAccess { border-top: 1px solid var(--border, #dedee4); margin-top: 24px; padding-top: 22px; }
#anyConnectAccess h3 { margin: 0 0 12px; font-size: 18px; }
#anyConnectAccess .oc-access-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#anyConnectAccess .oc-access-header h3 { margin: 0; }
#anyConnectAccess .oc-access-header > .oc-action { flex: 0 0 auto; }
#anyConnectAccess p, #anyConnectAccess li { font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--text); }
#anyConnectAccess h4 { margin: 22px 0 12px; font-size: 16px; }
#anyConnectAccess .oc-step { padding: 0; margin: 0; }
#anyConnectAccess label { display: block; margin: 12px 0 6px; font-size: 14px; }
#anyConnectAccess input, #anyConnectAccess select { box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font: inherit; background: var(--card); color: var(--text); }
#anyConnectAccess .oc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
#anyConnectAccess .oc-action { max-width: 100%; }
#anyConnectAccess .oc-actions.oc-connection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
#anyConnectAccess .oc-connection-actions > .oc-action { width: 100%; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; }
#anyConnectAccess .oc-connection-actions > .oc-action:only-child { grid-column: 1 / -1; }
#anyConnectAccess .oc-device-row { display: grid; grid-template-columns: calc((100% - 10px) / 2) minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
#anyConnectAccess .oc-device-row > select { min-width: 0; }
#anyConnectAccess .oc-device-row > select,
#anyConnectAccess .oc-ingress-field > select,
#anyConnectAccess .oc-device-row > .oc-action,
#anyConnectAccess .oc-destinations > .oc-action {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
#anyConnectAccess .oc-connection-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
#anyConnectAccess .oc-ingress-field { min-width: 0; }
#anyConnectAccess .oc-device-routing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
}
#anyConnectAccess .oc-device-routing.hidden { display: none; }
#anyConnectAccess .oc-device-routing .row-label { grid-row: 1; color: var(--text); font-size: 14px; line-height: normal; text-align: right; }
#anyConnectAccess .oc-device-routing .anyconnect-mode-value { display: contents; }
#anyConnectAccess .oc-device-routing .anyconnect-mode-controls { grid-row: 2; justify-content: flex-end; height: 44px; }
#anyConnectAccess .oc-device-routing .anyconnect-auto-button,
#anyConnectAccess .oc-device-routing .anyconnect-explicit-modes { height: 44px; min-height: 44px; max-height: 44px; }
#anyConnectAccess .oc-device-routing .anyconnect-explicit-modes .anyconnect-mode-button { height: 36px; min-height: 36px; max-height: 36px; }
#anyConnectAccess .oc-device-routing .anyconnect-mode-meta { grid-row: 3; margin-top: 8px; text-align: right; color: var(--text); font-size: 14px; line-height: 1.55; white-space: normal; }
#anyConnectAccess .oc-device-routing #anyConnectModeHelp { align-items: flex-end; white-space: normal; }
#anyConnectAccess .oc-device-routing #anyConnectModeStatus { position: static; font-size: 12px; line-height: 1.4; }
#anyConnectAccess .oc-device-row > .oc-action { white-space: nowrap; }
#anyConnectAccess .oc-device-status { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 6px 8px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--secondary); }
#anyConnectAccess .oc-device-status::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
#anyConnectAccess .oc-session-connected { color: #247a43; }
#anyConnectAccess .oc-session-connected::before { background: #35c65a; }
#anyConnectAccess .oc-session-checking { color: var(--tolf-action-text, #315780); }
#anyConnectAccess .oc-session-failed, #anyConnectAccess .oc-session-revoking { color: var(--error); }
#anyConnectAccess .oc-prepare { width: calc((100% - 10px) / 2); }
#anyConnectAccess .oc-prepare:disabled { opacity: .55; cursor: not-allowed; }
#anyConnectAccess .oc-connection-completed { display: flex; align-items: center; gap: 16px; }
#anyConnectAccess .oc-connection-done { flex: 1; padding: 14px 18px; border-radius: 12px; background: #edf8f0; color: #247a43; font-size: 16px; font-weight: 600; text-align: center; }
#anyConnectAccess .oc-retry-link { padding: 6px 0; border: 0; background: transparent; color: var(--tolf-action-text, #315780); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
#anyConnectAccess .oc-actions.oc-import-actions, #anyConnectAccess .oc-actions.oc-certificate-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#anyConnectAccess .oc-import-actions > .oc-action, #anyConnectAccess .oc-certificate-actions > .oc-action { width: 100%; min-width: 0; overflow-wrap: anywhere; }
#anyConnectAccess .oc-import-actions > .oc-action:only-child { grid-column: 1 / -1; }
#anyConnectAccess .oc-actions.oc-destinations { margin-top: 22px; }
#anyConnectAccess .oc-transfer-field { display: flex; align-items: center; min-width: 0; padding-right: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
#anyConnectAccess .oc-transfer-field > input { border: 0; min-width: 0; text-overflow: ellipsis; background: transparent; }
#anyConnectAccess .oc-transfer-field .oc-copy-glyph::after { background: var(--card); }
#anyConnectAccess .oc-password-row { display: flex; align-items: center; gap: 12px; background: var(--code-background); color: var(--text); padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; }
#anyConnectAccess .oc-secret { flex: 1; min-width: 0; font: 16px ui-monospace, monospace; overflow-wrap: anywhere; padding: 12px 0; user-select: all; }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tolf-action-text, var(--text)); }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy:hover { background: var(--tolf-secondary-hover); }
#anyConnectAccess .oc-copy-control { position: relative; display: flex; flex: 0 0 44px; }
#anyConnectAccess .oc-copy-feedback { position: absolute; z-index: 1; bottom: calc(100% + 6px); right: 0; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 13px; line-height: 1.3; box-shadow: 0 2px 8px #00000014; pointer-events: none; }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy-glyph { position: relative; display: block; width: 22px; height: 22px; }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy-glyph::before, :is(#anyConnectAccess,#ciscoClientInstall) .oc-copy-glyph::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.7px solid currentColor; border-radius: 3px; }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy-glyph::before { left: 0; top: 0; }
:is(#anyConnectAccess,#ciscoClientInstall) .oc-copy-glyph::after { left: 5px; top: 5px; background: var(--code-background); }
#anyConnectAccess .oc-message { min-height: 20px; color: var(--text); }
#anyConnectAccess .oc-error { color: var(--error); }
#anyConnectAccess .oc-note { color: var(--text); }
#anyConnectAccess p.oc-certificate-done { color: #247a43; }
@media (max-width: 600px) {
  #anyConnectAccess .oc-device-row { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.1fr); gap: 6px; }
  #anyConnectAccess .oc-device-row > .oc-action { min-width: 0; white-space: normal; padding-left: 8px; padding-right: 8px; }
  #anyConnectAccess .oc-device-status { font-size: 12px; padding: 6px; }
  #anyConnectAccess .oc-actions > .oc-action { flex: 1 1 0; min-width: 0; }
}
html[data-vpn-transport="anyconnect"] #vpnUsername { overflow-wrap: anywhere; }

#anyConnectAccess .oc-ios-install { margin: 14px 0 8px; }
#anyConnectAccess .oc-ios-install > .oc-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  text-align: center;
}

/* Let controls fit their text; use separate rows on phones. */
#anyConnectAccess .oc-access-header { flex-wrap:wrap; }
#anyConnectAccess .oc-access-header > .oc-action { min-width:0; white-space:normal; }
#anyConnectAccess .oc-device-status { min-width:0; overflow-wrap:anywhere; }
@media (max-width:699px) {
 #anyConnectAccess .oc-access-header { align-items:stretch; gap:12px; }
 #anyConnectAccess .oc-access-header > .oc-action { width:100%; }
 #anyConnectAccess .oc-device-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 #anyConnectAccess .oc-device-row > select { grid-column:1 / -1; }
 #anyConnectAccess .oc-device-row > .oc-action { height:auto; max-height:none; white-space:normal; }
 #anyConnectAccess .oc-connection-settings { grid-template-columns:minmax(0,1fr); }
 #anyConnectAccess .oc-device-routing .row-label,
 #anyConnectAccess .oc-device-routing .anyconnect-mode-meta { text-align:left; }
 #anyConnectAccess .oc-device-routing .anyconnect-mode-controls { justify-content:flex-start; }
 #anyConnectAccess .oc-device-routing #anyConnectModeHelp { align-items:flex-start; }
 #anyConnectAccess .oc-actions.oc-import-actions,
 #anyConnectAccess .oc-actions.oc-certificate-actions { grid-template-columns:minmax(0,1fr); }
 #anyConnectAccess .oc-destinations > .oc-action { height:auto; max-height:none; min-height:44px; padding:10px 12px; white-space:normal; }
 #anyConnectAccess .oc-action { box-sizing:border-box; white-space:normal; }
}


/* A single routing segment group. Selection is independent of session health. */
#anyConnectModeSelector,
#anyConnectAccess .oc-device-routing #anyConnectModeSelector {
  display:flex;
  flex-wrap:nowrap;
  justify-self:end;
  margin-inline-start:auto;
  gap:3px;
  padding:3px;
  height:44px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--segment-background);
  box-sizing:border-box;
  width:max-content;
  max-width:100%;
}
#anyConnectModeSelector .anyconnect-explicit-modes { display:contents; }
#anyConnectModeSelector .anyconnect-mode-button,
#anyConnectAccess .oc-device-routing #anyConnectModeSelector .anyconnect-mode-button {
  height:36px;min-height:36px;max-height:36px;
  min-width:0;padding:0 10px;margin:0;white-space:nowrap;
  border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--secondary);
}
#anyConnectModeSelector .anyconnect-mode-button.active {
  background:var(--card)!important;color:var(--text)!important;
  border-color:var(--border)!important;
}
#anyConnectModeSelector .anyconnect-mode-button.active::before { content:none; }
#anyConnectModeSelector #anyConnectModeAuto { margin-right:7px; }
#anyConnectModeSelector #anyConnectModeAuto::before {
  content:"";position:absolute;right:-6px;top:6px;bottom:6px;
  width:1px;background:var(--border);pointer-events:none;
}
#anyConnectModeSelector .anyconnect-mode-button:disabled { opacity:1;cursor:wait; }
#anyConnectModeSelector .anyconnect-mode-button:focus-visible { outline:2px solid var(--text);outline-offset:1px; }

.network-pair { padding:16px 0; }
.network-pair + .network-pair { border-top:1px solid var(--border); }
.network-pair-title { font-size:14px;font-weight:600;margin-bottom:12px; }
.network-pair-values { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.network-pair-value { display:flex;flex-direction:column;gap:6px;min-width:0; }
.network-pair-label,.network-pair-time { color:var(--secondary);font-size:12px;line-height:1.5; }
.network-pair-value strong { font-size:15px;font-weight:500;font-variant-numeric:tabular-nums; }
.network-pair-time { margin-top:12px; }
@media(max-width:520px) {
  .network-pair-values { grid-template-columns:1fr;gap:9px; }
  .network-pair-value { flex-direction:row;justify-content:space-between;gap:10px; }
}



.cisco-client-install { margin:16px 0; }
.cisco-client-install h3 { font-size:16px;font-weight:500; }
.cisco-client-install > .button-link { display:flex;justify-content:center;margin:12px 0; }
.cisco-install-confirm { display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:400; }
.cisco-install-confirm input { width:20px;height:20px; }

#anyConnectAccess .oc-select-wrapper { min-width:0; }
#anyConnectAccess .oc-select-wrapper > select[hidden] { display:none; }
#anyConnectAccess .oc-compact-select { margin:0; }
#anyConnectAccess .oc-compact-select .vpn-dropdown-button { width:100%; }
#anyConnectModeHelp[hidden] { display:none !important; }
#anyConnectModeSelector .anyconnect-mode-button { position:relative; }
#anyConnectModeSelector .anyconnect-mode-button::after {
  content:attr(data-tooltip); display:none; position:absolute;
  right:0; bottom:calc(100% + 10px); z-index:30;
  width:max-content; max-width:250px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--text); box-shadow:0 4px 18px #0002;
  font-family:inherit;font-size:14px;font-weight:400;line-height:1.45; white-space:pre-line; text-align:left; pointer-events:none;
}
#anyConnectModeSelector .anyconnect-mode-button.tooltip-open::after,
#anyConnectModeSelector .anyconnect-mode-button:focus-visible::after { display:block; }
#anyConnectModeSelector .anyconnect-mode-button:hover::after,
#anyConnectModeSelector .anyconnect-mode-button.tooltip-hover::after { display:block; }

/* Compact device actions and route on narrow screens. */
@media (max-width:699px) {
 #anyConnectAccess .oc-device-row { grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; }
 #anyConnectAccess .oc-device-row > .oc-select-wrapper { grid-column:1; grid-row:1; }
 #anyConnectAccess .oc-device-row > .oc-action { grid-column:2; grid-row:1; height:44px;min-height:44px;max-height:44px;white-space:nowrap;padding:0 10px;font-size:14px; }
 #anyConnectAccess .oc-device-row > .oc-device-status { grid-column:1 / -1;grid-row:2;min-height:22px;padding:0;font-weight:400; }
 #anyConnectAccess .oc-device-row .vpn-dropdown-value { overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block; }
 #anyConnectAccess .oc-device-row .vpn-dropdown-arrow { flex-shrink:0; }
 #anyConnectAccess .oc-device-routing { grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:4px; }
 #anyConnectAccess .oc-device-routing .row-label { grid-column:1;grid-row:1;text-align:left;white-space:nowrap; }
 #anyConnectAccess .oc-device-routing .anyconnect-mode-value { display:contents; }
 #anyConnectAccess .oc-device-routing #anyConnectModeSelector { grid-column:2;grid-row:1;justify-self:end;margin-inline-start:0;gap:1px; }
 #anyConnectAccess .oc-device-routing #anyConnectModeSelector .anyconnect-mode-button { padding:0 6px;font-size:12px; }
 #anyConnectAccess .oc-device-routing .anyconnect-mode-meta { grid-column:1 / -1;grid-row:2;margin-top:0;text-align:right; }
}

#ocWindowsExcludedNetworks { box-sizing: border-box; width: 100%; min-height: 90px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font: inherit; background: var(--card); color: var(--text); }

/* Equal create/cancel actions, including narrow Android screens. */
#anyConnectAccess .oc-actions.oc-create-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; }
#anyConnectAccess .oc-create-actions > .oc-action { width:100%; min-width:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; }
#anyConnectAccess .oc-create-actions > .oc-action:only-child { grid-column:1 / -1; }

/* Installation is confirmed in My VPN, before opening manual setup. */
body.manual-setup-open #ciscoClientInstall[data-confirmed="true"] { display:none; }

.cisco-install-link{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;margin:12px 0}
.cisco-install-link input{box-sizing:border-box;width:100%;min-width:0;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:14px}
.cisco-install-link .cisco-copy-link{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0}
.cisco-copy-status{grid-column:1/-1;font-size:13px;color:var(--secondary)}
.cisco-copy-status:empty{display:none}

#anyConnectAccess:empty{display:none!important}

#ciscoClientInstall .cisco-install-link .oc-copy-glyph::after{background:var(--card)}