/* Aristo Control Panel v10.51.6 — canonical token-driven component layer.
 *
 * This layer intentionally sits above the historical stylesheets. It is the
 * first migration step away from stacked UI-generation overrides: shared UI
 * primitives consume semantic tokens only. Page-specific layout may remain in
 * the legacy layer until migrated, but it no longer gets to decide theme color.
 */
@layer components {
  html[data-ui-theme] { background: var(--surface-base); color-scheme: light; }
  html[data-ui-theme="dark"] { color-scheme: dark; }
  html[data-ui-theme="light"] { color-scheme: light; }

  body[data-ui-shell="app"] {
    color-scheme: inherit;
    background: var(--workspace-bg);
    color: var(--text-body);
    font-family: var(--font-ui);
  }
  body[data-ui-shell="app"]::selection { background: var(--accent-ring); color: var(--text-strong); }
  body[data-ui-shell="app"] .portal-workspace { background: var(--workspace-bg); color: var(--text-body); }
  body[data-ui-shell="app"] .portal-workspace::before {
    background-image:
      linear-gradient(var(--workspace-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--workspace-grid) 1px, transparent 1px);
    opacity: var(--workspace-grid-opacity);
  }

  /* Brand rail is deliberately fixed-dark in both appearances. */
  body[data-ui-shell="app"].portal-body .portal-sidebar {
    background: var(--fx-rail-bg);
    border-right: 1px solid var(--fx-rail-border);
    box-shadow: var(--fx-rail-shadow);
    color: var(--fx-rail-text);
  }
  body[data-ui-shell="app"] .portal-brand,
  body[data-ui-shell="app"] .portal-brand:hover { color: var(--fx-rail-text-strong); }
  body[data-ui-shell="app"] .portal-brand > span:last-child strong { color: var(--fx-rail-text-strong); }
  body[data-ui-shell="app"] .portal-brand > span:last-child small { color: var(--fx-rail-brand-accent); }
  body[data-ui-shell="app"] .portal-nav-group > span { color: var(--fx-rail-text-muted); }
  body[data-ui-shell="app"] .portal-nav a,
  body[data-ui-shell="app"] .portal-nav-featured a { color: var(--fx-rail-text); }
  body[data-ui-shell="app"] .portal-nav a .nav-icon,
  body[data-ui-shell="app"] .portal-nav-featured a .nav-icon { background: var(--fx-rail-icon-bg); color: var(--fx-rail-text); }
  body[data-ui-shell="app"] .portal-nav a:hover,
  body[data-ui-shell="app"] .portal-nav-featured a:hover { background: var(--fx-rail-hover-bg); color: var(--fx-rail-hover-text); }
  body[data-ui-shell="app"] .portal-nav a.active,
  body[data-ui-shell="app"] .portal-nav-featured a.active {
    background: var(--fx-rail-active-bg); border-color: var(--fx-rail-active-border);
    box-shadow: var(--fx-rail-active-shadow); color: var(--fx-rail-text-strong);
  }

  /* Chrome */
  body[data-ui-shell="app"] .portal-topbar {
    background: color-mix(in srgb, var(--surface-sunken) 94%, transparent);
    border-bottom: 1px solid var(--border);
    color: var(--text-body);
    backdrop-filter: blur(26px) saturate(1.15);
  }
  html[data-ui-theme="light"] body[data-ui-shell="app"] .portal-topbar {
    background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  }

  /* Typography */
  body[data-ui-shell="app"] :where(h1,h2,h3,h4,h5,h6,strong,b) { color: var(--text-strong); }
  body[data-ui-shell="app"] :where(p,small,.muted,.row-note,.ui-help,.field-note,.help,.description,.meta,.subtle) { color: var(--text-muted); }
  body[data-ui-shell="app"] :where(.eyebrow) { color: var(--accent-text); }
  body[data-ui-shell="app"] :where(a:not(.button):not(.portal-nav a)) { color: var(--accent-text); }

  /* Canonical surfaces. Cascade layers make these win without !important. */
  body[data-ui-shell="app"] .ui-scope :where(
    .surface,.card,.ui-card,.ui-section,.panel,.metric-card,.ui-stat,
    .table-wrap,.table-surface,.table-scroll,.inventory-panel,.filter-bar,
    .option-panel,.subform,.service-panel,.customer-card,.product-card,
    .port-card,.scope-route-map,.policy-direction-card,.automation-attention-card,
    .service-type-choice,.billing-model-choice,.traffic-share-row,.sflow-enabled-port,
    .sflow-uplink-card,.catalog-offering-card,.admin-catalog-card,.catalog-source-card,
    .addressing-card,.datacenter-card,.interface-order-panel,.admin-service-notes,
    .interface-option-card,.order-detail-section,.ticket-message,.ticket-composer,
    .rack-visual-card,.dc-rack-inventory,.dc-integrated-rack,.security-status-list,
    .mfa-action-card,.invoice-import-card,.readiness-step,.billing-control-card,
    .billing-service-commercial,.billing-service-row,.supplier-disclosure,
    .contract-commercial-summary,.attachment-card,.ddos-ai-evidence-card,
    .ddos-profile-card,.peering-request-group,.maintenance-check,.update-dropzone,
    .customer-order-wizard,.monitor-wall-tile,.ddos-empty-state,.dc-reference-list article,
    .dc-stat-grid article,.dc-stat-grid a,.automation-step,.hero42-panel,.hero43-panel,.hero44-panel
  ) {
    background: var(--surface-card);
    border-color: var(--border);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope :where(.surface,.card,.ui-card,.ui-section,.panel,.metric-card,.ui-stat):hover {
    border-color: var(--border-strong);
  }
  body[data-ui-shell="app"] .ui-scope :where(.section-heading,.panel-heading,.ui-section-header,.card-header,.table-heading) {
    border-color: var(--border-subtle);
    background: var(--surface-header);
  }

  /* Tables */
  body[data-ui-shell="app"] .ui-scope :where(table,.data-table,.hero42-data-table,.hero43-table) { color: var(--text-body); }
  body[data-ui-shell="app"] .ui-scope :where(th) { background: var(--surface-inset); color: var(--text-subtle); border-color: var(--border); }
  body[data-ui-shell="app"] .ui-scope :where(td) { background: transparent; color: var(--text-body); border-color: var(--border-subtle); }
  body[data-ui-shell="app"] .ui-scope :where(tbody tr:hover td) { background: var(--surface-hover); }
  body[data-ui-shell="app"] .ui-scope :where(.sticky-actions,.ui-action-bar,.invite-submit-bar) {
    background: var(--surface-3); border-color: var(--border); color: var(--text-body); box-shadow: var(--shadow-lg);
  }

  /* Controls */
  body[data-ui-shell="app"] .ui-scope :where(input,select,textarea) {
    background: var(--field-bg); color: var(--text-body); border-color: var(--field-border);
  }
  body[data-ui-shell="app"] .ui-scope :where(input,select,textarea):hover { background: var(--field-bg-hover); border-color: var(--border-strong); }
  body[data-ui-shell="app"] .ui-scope :where(input,select,textarea):focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: 0;
  }
  body[data-ui-shell="app"] .ui-scope :where(input,textarea)::placeholder { color: var(--field-placeholder); }
  body[data-ui-shell="app"] .ui-scope :where(input:disabled,select:disabled,textarea:disabled) { background: var(--field-disabled-bg); color: var(--text-faint); }

  body[data-ui-shell="app"] .ui-scope :where(.button,button,.icon-button) {
    background: var(--button-bg); color: var(--button-text); border-color: var(--button-border); box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope :where(.button,button,.icon-button):hover {
    background: var(--button-bg-hover); color: var(--text-strong); border-color: var(--button-border-hover);
  }
  body[data-ui-shell="app"] .ui-scope :where(.button,button,.icon-button):disabled,
  body[data-ui-shell="app"] .ui-scope :where(.button.disabled,button.disabled,.icon-button.disabled) {
    background: var(--button-disabled-bg); color: var(--button-disabled-text); border-color: var(--border); box-shadow: none; opacity: 1; cursor: not-allowed;
  }
  body[data-ui-shell="app"] .ui-scope :where(.primary,.primary-action,.button.primary,button.primary) {
    background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :where(.primary,.primary-action,.button.primary,button.primary):hover {
    background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :where(.danger,button.danger,.button.danger) { background: var(--danger); border-color: var(--danger); color: var(--text-on-accent); }

  /* Menus, dialogs and inspection surfaces */
  body[data-ui-shell="app"] :where(.theme-picker,.dropdown-menu,.action-menu,.popover,.tooltip,.modal,.dialog,.device-port-tooltip) {
    background: var(--surface-3); color: var(--text-body); border-color: var(--border-strong); box-shadow: var(--shadow-lg);
  }

  /* Charts and maps */
  body[data-ui-shell="app"] .ui-scope :where(.bandwidth-chart,.hero-chart,.telemetry-chart,.sflow-sankey-shell,.chart-canvas) {
    background: var(--chart-canvas); border-color: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope :where(.grid-line,.chart-grid-line) { stroke: var(--chart-grid); }
  body[data-ui-shell="app"] .ui-scope :where(.chart-axis,.chart-label) { color: var(--chart-label); fill: var(--chart-label); }
  body[data-ui-shell="app"] .leaflet-control,
  body[data-ui-shell="app"] .leaflet-popup-content-wrapper,
  body[data-ui-shell="app"] .leaflet-popup-tip { background: var(--map-chrome-bg); color: var(--text-body); }

  /* One flag geometry everywhere. 4K typography never scales flags. */
  body[data-ui-shell="app"] :where(
    .country-flag-vector,.hero42-dc-flag,.hero42-device-flag,.hero44-customer-flag,
    .hero44-flat-flag,.rack-card-country,.service-location-country-flag,
    .customer-list-country-flag,.customer-account-country,.datacenter-flag,
    .datacenter-table-flag,.country-select-flat-flag,.map-inline-flag,.country-flag-svg,
    .country-flag-img,.country-flag-flat
  ) {
    width: 24px; height: 18px; min-width: 24px; min-height: 18px; max-width: 24px; max-height: 18px;
    flex: 0 0 24px; object-fit: contain; object-position: center; vertical-align: middle; line-height: 0;
  }


  /* v10.50.2 — customer ordering convergence. The legacy wizard mixed a
     paper-white section background with Night-mode cards, making headings and
     locations unreadable. All selectable order surfaces now consume the same
     semantic tokens in both appearances. */
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard {
    background: var(--surface-1); border-color: var(--border); color: var(--text-body);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard .wizard-section {
    background: var(--surface-1); border-color: var(--border-subtle);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard .wizard-step {
    background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-strong);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.service-type-choice,.catalog-offering-card,.datacenter-card,.interface-option-card) {
    background: var(--choice-bg); color: var(--text-body); border-color: var(--border); box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.service-type-choice,.catalog-offering-card,.datacenter-card,.interface-option-card):hover {
    background: var(--choice-bg-hover); border-color: var(--border-loud);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.service-type-choice,.catalog-offering-card,.datacenter-card,.interface-option-card):has(input:checked) {
    background: var(--choice-bg-selected); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring), var(--shadow-sm);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.catalog-card-commercial>div,.catalog-bandwidth-line,.datacenter-code,.datacenter-country,.service-choice-icon) {
    background: var(--surface-inset); border-color: var(--border-subtle); color: var(--text-body);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.wizard-section-head h3,.catalog-card-title,.datacenter-card>strong,.service-choice-copy strong) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.wizard-section-head p,.catalog-offering-card p,.service-choice-copy small,.datacenter-provider,.datacenter-card address) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard .datacenter-card address {
    font-size: max(var(--text-sm), 12px); line-height: 1.5;
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard :where(.catalog-card-select,.datacenter-select) {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .customer-order-wizard .wizard-submit-bar {
    background: var(--surface-2); border-color: var(--border);
  }

  /* Canonical data-series palette for every SVG donut. Older UI generations
     inherited currentColor, which made customer revenue and some upstream
     charts render as a single dark ring. */
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-0 { stroke: var(--data-1); color: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-1 { stroke: var(--data-2); color: var(--data-2); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-2 { stroke: var(--data-3); color: var(--data-3); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-3 { stroke: var(--data-4); color: var(--data-4); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-4 { stroke: var(--data-5); color: var(--data-5); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-5 { stroke: var(--data-6); color: var(--data-6); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-6 { stroke: var(--data-7); color: var(--data-7); }
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-wrap .seg,.hero43-donut-segment,.traffic-donut-segment).pie-7 { stroke: var(--data-8); color: var(--data-8); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-0) { background: var(--data-1); color: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-1) { background: var(--data-2); color: var(--data-2); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-2) { background: var(--data-3); color: var(--data-3); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-3) { background: var(--data-4); color: var(--data-4); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-4) { background: var(--data-5); color: var(--data-5); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-5) { background: var(--data-6); color: var(--data-6); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-6) { background: var(--data-7); color: var(--data-7); }
  body[data-ui-shell="app"] .ui-scope .hero44-donut-legend :where(i.pie-7) { background: var(--data-8); color: var(--data-8); }

  /* Responsive density is token-driven instead of per-page microtext patches. */
  @media (min-width: 1800px) {
    :root { --text-xs: 12px; --text-sm: 13px; --text-md: 13.5px; --text-base: 14.5px; --control-h: 42px; --row-h: 50px; }
  }
  @media (min-width: 2500px) {
    :root { --text-2xs: 11px; --text-xs: 12.5px; --text-sm: 13.5px; --text-md: 14px; --text-base: 15px; --text-lg: 21px; --control-h: 44px; --row-h: 53px; --card-pad: 21px; }
    body[data-ui-shell="app"] .ui-scope { font-size: var(--text-base); }
    body[data-ui-shell="app"] .portal-nav a, body[data-ui-shell="app"] .portal-nav-featured a { font-size: 14px; min-height: 46px; }
  }
  @media (min-width: 3400px) {
    :root { --text-2xs: 11.5px; --text-xs: 13px; --text-sm: 14px; --text-md: 14.5px; --text-base: 15.5px; --text-lg: 22px; --control-h: 46px; --row-h: 56px; --card-pad: 23px; }
    body[data-ui-shell="app"] .portal-nav a, body[data-ui-shell="app"] .portal-nav-featured a { font-size: 14.5px; min-height: 48px; }
  }
}

@layer components {
  .dc-structure-builder { display: grid; gap: var(--space-3); }
  .dc-structure-toolbar, .dc-structure-room-head, .dc-structure-rack {
    display: flex; align-items: end; justify-content: space-between; gap: var(--space-3);
  }
  .dc-structure-toolbar > div { display: grid; gap: var(--space-1); }
  .dc-structure-toolbar small { color: var(--text-muted); }
  .dc-structure-rooms { display: grid; gap: var(--space-3); }
  .dc-structure-room {
    display: grid; gap: var(--space-3); padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
  }
  .dc-structure-room-head > label { flex: 1; }
  .dc-structure-racks { display: grid; gap: var(--space-2); }
  .dc-structure-rack {
    display: grid; grid-template-columns: minmax(180px,1fr) 120px 36px; align-items: end;
    padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-1);
  }
  .dc-structure-rack label { min-width: 0; }
  .dc-structure-empty {
    display: grid; place-items: center; gap: var(--space-1); min-height: 110px; padding: var(--space-4);
    border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); text-align: center;
  }
  .dc-structure-advanced { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
  .dc-structure-advanced summary { color: var(--text-muted); cursor: pointer; font-weight: var(--weight-medium); }
  .dc-structure-advanced label { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .dc52-card-coordinates {
    display: block; margin-top: var(--space-1); color: var(--text-subtle);
    font-size: var(--text-xs); letter-spacing: .02em;
  }
  @media (max-width: 760px) {
    .dc-structure-toolbar, .dc-structure-room-head { align-items: stretch; flex-direction: column; }
    .dc-structure-rack { grid-template-columns: 1fr 100px 36px; }
  }
}

/* v10.50.2 — full-shell convergence pass.
 *
 * The legacy layer still carries layout for several generations of pages, but
 * it may no longer own theme variables or re-introduce paper-white / Heroic-
 * dark islands.  These aliases and structural selectors are deliberately
 * generic so every Admin and Customer Portal route inherits the same visual
 * contract without a page-by-page Day/Night override list.
 */
@layer components {
  html[data-ui-theme] {
    /* Historical semantic names that remain in legacy layout CSS.  Reassert
       them in the canonical layer so later legacy :root blocks cannot pin them
       to a Day-only literal. */
    --surface-subtle: var(--surface-inset);
    --surface-soft: var(--surface-2);
    --surface-muted: var(--surface-inset);
    --panel-soft: var(--surface-2);
    --line: var(--border);
    --primary-hover: var(--accent-hover);
    --focus-ring: var(--accent-ring);
    --shadow-raised: var(--shadow-lg);
    --blue-700: var(--accent-active);
  }

  /* Any true panel header is part of its parent surface.  This neutralises old
     paper-white legacy gradients such as BGP Session, profitability, e-mail and order
     document headers while preserving page headings and hero artwork. */
  body[data-ui-shell="app"] .ui-scope :where(
    .surface > .panel-heading:first-child,
    .card > .panel-heading:first-child,
    .panel > .panel-heading:first-child,
    .ui-card > .panel-heading:first-child,
    .child-panel > .panel-heading:first-child,
    .bgp-session-panel > .panel-heading,
    .routing-policy-panel > .panel-heading,
    .profitability-panel > .panel-heading,
    .email-delivery-panel > .panel-heading,
    .upstream-section > .panel-heading,
    .upstream-billing-panel > .panel-heading,
    .revenue-share-panel > .panel-heading,
    .sflow-flow-panel > .panel-heading,
    .sflow-enabled-panel > .panel-heading,
    .sflow-asn-panel > .panel-heading,
    .sflow-uplinks-panel > .panel-heading,
    .sflow-asn-detail-panel > .panel-heading
  ) {
    background: var(--surface-2);
    color: var(--text-body);
    border-color: var(--border-subtle);
    box-shadow: none;
  }

  /* Versioned redesign families are owned by explicit root selectors below.
     Never use substring selectors such as [class*="-card"] here: those also
     match child elements like dc52-card-media/city and repaint photographic
     or on-image UI as generic cards. */

  /* Customer service lifecycle and BGP detail were two of the remaining
     visible paper-white islands in Night mode. */
  body[data-ui-shell="app"][data-portal-mode="customer"] .ui-scope :where(
    .cancellation-choice-grid > form,
    .cancellation-request-summary,
    .bgp-identity-grid > article,
    .routing-policy-card,
    .routing-policy-value,
    .bgp-change-request,
    .route-scope-choice > span,
    .customer-service-detail-grid > .surface,
    .service-support-panel,
    .service-cancellation-panel
  ) {
    background: var(--surface-1);
    color: var(--text-body);
    border-color: var(--border);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .ui-scope .service-tabs {
    background: var(--surface-sunken);
    border-color: var(--border);
  }
  html[data-ui-theme="light"] body[data-ui-shell="app"][data-portal-mode="customer"] .ui-scope .service-tabs {
    background: var(--surface-1);
  }

  /* Service-order and document workflow headers used several old white
     gradients even after their cards were tokenised. */
  body[data-ui-shell="app"] .ui-scope :where(
    .order-draft-summary-head,
    .sof-document-header,
    .dc-card-header,
    .customer-pdf-panel-heading,
    .update-card-heading
  ) {
    background: var(--surface-2);
    color: var(--text-body);
    border-color: var(--border);
  }

  /* Portfolio/provider cards are a shared component now, rather than a Night-
     only Heroic island on otherwise light pages. */
  body[data-ui-shell="app"] .ui-scope :where(
    .hero44-upstream-card,
    .hero44-customer-card,
    .hero44-supplier-card,
    .hero44-invoice-card,
    .hero44-exchange-card,
    .hero44-incident-card,
    .hero44-settings-group,
    .hero44-settings-card,
    .hero43-monitor-card,
    .hero43-upstream-card,
    .upstream-provider-card,
    .customer-order-card
  ) {
    background: var(--surface-1);
    color: var(--text-body);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
  }

  /* Text inside selectable/location cards must never inherit the disabled tier. */
  body[data-ui-shell="app"] .ui-scope :where(
    .datacenter-card address,
    .datacenter-provider,
    .dc-card-coordinates,
    .service-location-address,
    .customer-map-location span,
    .customer-map-location small,
    .order-summary-location address
  ) { color: var(--text-muted); }

  /* Topbar and shell actions live outside .ui-scope but must share the same
     button contract. */
  body[data-ui-shell="app"] :where(
    .topbar-icon-action,.topbar-command-button,.automation-bell,.logout-button,
    .theme-picker button
  ) {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--button-border);
  }
  body[data-ui-shell="app"] :where(
    .topbar-icon-action,.topbar-command-button,.automation-bell,.logout-button,
    .theme-picker button
  ):hover {
    background: var(--button-bg-hover);
    color: var(--text-strong);
    border-color: var(--button-border-hover);
  }

  /* Disabled actions remain recognisable as controls in both themes instead of
     disappearing into the card background. */
  body[data-ui-shell="app"] .ui-scope :where(.button,button,.icon-button):disabled,
  body[data-ui-shell="app"] .ui-scope :where(.button.disabled,button.disabled,.icon-button.disabled) {
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
  }

  /* Semantic chart tracks.  A theme can change series colours without the
     neutral ring collapsing into the same shade as the data. */
  body[data-ui-shell="app"] .ui-scope :where(.hero44-donut-track,.hero43-donut-track,.donut-track) {
    stroke: var(--surface-inset);
    color: var(--surface-inset);
  }
}

@layer components {
  /* Residual named surfaces discovered by the 147-template / four-stylesheet
     audit.  They predate the semantic component vocabulary, so bring them into
     the contract here instead of maintaining separate Day and Night patches. */
  body[data-ui-shell="app"] .ui-scope :where(
    .demarcation-preview,.wizard-intro,.proposal-card,.inbound-loa-summary,
    .billing-metric,.catalog-selected-summary,.user-summary-card,.directory-toolbar,
    .profile-hero,.service-category-card,.backbone-link-card,.sflow-sankey-heading,
    .sflow-sankey-scroll,.monitor-gauge-card,.monitoring-top-six,.peering-auth-card,
    .peering-proposals-surface,.peering-exchanges-surface,.peering-list-surface,
    .peering-template-editor,.ddos-panel-heading,.ddos-traffic-chart,.ddos-mitigation-card,
    .contract-overview,.contract-drop-upload > label,.ddos-verdict-card,
    .peering-request-group,.peering-request-ix,.peering-local-as-toggle,
    .peering-request-agreement-row,.commercial-outcome-toggle,.peering-recent-requests,
    .peering-request-agreement-surface,.maintenance-choice-panel,
    .maintenance-sender-effective,.maintenance-empty-state,.recovery-code-grid code,
    .health-command-panel,.peering-request-summary-card,.peering-request-message-head,
    .peering-request-card-head,.dashboard-quick-action,.data-table-toolbar,
    .customer-account-hero,.rack-summary-grid > article,.rack-gallery-header,
    .rack-gallery-grid,.rack-management,.rack-resource-columns > section,
    .rack-mount-disclosure,.rack-visual-mount-form,.service-inventory-header,
    .dc-rack-inventory,.dc-rack-inventory-head,.backbone-link-map-missing,
    .readiness-panel-head,.readiness-step,.telemetry-summary-card
  ) {
    background: var(--surface-1);
    color: var(--text-body);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
  }

  body[data-ui-shell="app"] .ui-scope :where(
    .telemetry-graph-canvas,.sflow-sankey-scroll,.ddos-traffic-chart,.bandwidth-chart
  ) {
    background: var(--chart-canvas);
    color: var(--text-body);
    border-color: var(--border);
  }

  body[data-ui-shell="app"] .ui-scope :where(
    .ticket-section-heading,.peering-proposals-surface > .panel-heading,
    .peering-exchanges-surface > .panel-heading,.peering-list-surface > .panel-heading,
    .peering-recent-requests > .panel-heading,.peering-request-agreement-surface > .panel-heading,
    .customer-profile-section > .panel-heading
  ) {
    background: var(--surface-2);
    color: var(--text-body);
    border-color: var(--border-subtle);
  }

  /* Neutral selectable controls that historically fell back to white. */
  body[data-ui-shell="app"] .ui-scope :where(
    .billing-model-choice,.peering-local-grid article,.maintenance-check,
    .commercial-outcome-toggle,.peering-request-ix,.route-scope-choice > span
  ) {
    background: var(--choice-bg);
    color: var(--text-body);
    border-color: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope :where(
    .billing-model-choice,.peering-local-grid article,.maintenance-check,
    .commercial-outcome-toggle,.peering-request-ix,.route-scope-choice > span
  ):hover {
    background: var(--choice-bg-hover);
    border-color: var(--border-strong);
  }

  /* Explicitly preserve paper/physical surfaces which are intentionally not
     theme-flipped. */
  body[data-ui-shell="app"] .ui-scope :where(.signature-box canvas,.mfa-qr-wrap img,.peering-request-document) {
    color-scheme: light;
  }
}

/* v10.50.2 — semantic container ownership audit.
 *
 * A full-template scan found a final set of historical card/panel families
 * whose legacy rules still carry literal Day/Heroic backgrounds.  They are
 * UI containers (not hardware, maps or paper), so the canonical component
 * layer owns their surface contract regardless of the page that renders them.
 */
@layer components {
  body[data-ui-shell="app"] .ui-scope :where(
    .account-card,
    .invite-role-card,
    .addressing-card,
    .admin-catalog-card,
    .attachment-card,
    .bgp-session-panel,
    .billing-action-card,
    .billing-config-card,
    .billing-preview-card,
    .billing-settings-section,
    .cancellation-request-summary,
    .catalog-offering-card,
    .catalog-source-card,
    .child-panel,
    .contract-card,
    .contract-commercial-summary,
    .contract-date-admin-panel,
    .customer-footprint-location-card,
    .customer-user-summary,
    .datacenter-card,
    .ddos-ai-evidence-card,
    .ddos-mitigation-card,
    .ddos-profile-card,
    .ddos-verdict-card,
    .health-command-panel,
    .hero-kpi-card,
    .hero-panel,
    .hero42-country-panel,
    .hero42-empty-panel,
    .hero42-interface-panel,
    .hero42-panel,
    .hero42-service-traffic-panel,
    .hero42-service-type-card,
    .hero43-ipam-filter-card,
    .hero43-monitor-card,
    .hero43-panel,
    .hero43-provider-card,
    .hero43-topology-panel,
    .hero44-customer-card,
    .hero44-customer-service-card,
    .hero44-exchange-card,
    .hero44-incident-card,
    .hero44-invoice-card,
    .hero44-panel,
    .hero44-schedule-card,
    .hero44-supplier-card,
    .hero44-toggle-card,
    .hero44-upstream-card,
    .hero50-port-focus-card,
    .login-panel,
    .maintenance-choice-panel,
    .metric-card,
    .mfa-action-card,
    .monitor-wall-tile,
    .option-card,
    .option-panel,
    .peering-auth-card,
    .peering-control-card,
    .peering-request-summary-card,
    .peering-settings-summary,
    .policy-direction-card,
    .policy-mode-card,
    .port-card,
    .proposal-card,
    .proposal-panel,
    .recommendation-card,
    .registration-review-card,
    .service-activity-panel,
    .service-cancellation-panel,
    .service-identity-panel,
    .service-support-panel,
    .sflow-sankey-panel,
    .sflow-sankey-summary,
    .sof-service-card,
    .ssh-enrollment-card,
    .telemetry-summary-card,
    .ui-card,
    .ui-section,
    .update-rollback-card,
    .update-upload-card,
    .user-summary-card,
    .wizard-section
  ) {
    background: var(--surface-1);
    color: var(--text-body);
    border-color: var(--border);
  }

  body[data-ui-shell="app"] .ui-scope :where(
    .account-card,
    .addressing-card,
    .bgp-session-panel,
    .billing-settings-section,
    .child-panel,
    .contract-card,
    .datacenter-card,
    .dc52-card,
    .dc52-review-card,
    .dc52-wizard-card,
    .hero-panel,
    .hero42-panel,
    .hero43-panel,
    .hero44-panel,
    .service-activity-panel,
    .service-cancellation-panel,
    .service-identity-panel,
    .service-support-panel,
    .sflow-sankey-panel,
    .ui-card,
    .ui-section,
    .update-rollback-card,
    .update-upload-card,
    .wizard-section
  ) > :where(.panel-heading,.section-heading,.card-header,header:first-child) {
    background: var(--surface-2);
    color: var(--text-body);
    border-color: var(--border-subtle);
  }

  /* Secondary copy may be quiet, but must remain readable in both themes. */
  body[data-ui-shell="app"] .ui-scope :where(
    address,
    .location-copy,
    .location-address,
    .location-provider,
    .service-location-meta,
    .datacenter-card address,
    .dc52-card-address,
    .dc52-card-provider,
    .customer-footprint-location-card small
  ) {
    color: var(--text-muted);
  }
}


/* v10.51.6 — map chrome and photographic context convergence.
 *
 * Map tiles/topology lines and facility photographs are visual content. Their
 * labels, pills, overlays, controls and on-image copy are UI chrome and must
 * follow the active theme. Keep fixed flag geometry, but never inherit the
 * generic heading/card palette into these contexts.
 */
@layer components {
  /* Photographic facility cards and hero: only the root is a card. Child
     media/veil/city elements remain in the on-image visual context. */
  body[data-ui-shell="app"] .ui-scope .dc52-card {
    background: var(--surface-1);
    color: var(--text-body);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .dc52-card-media {
    background: var(--surface-sunken);
    border-color: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope :where(.dc52-card-city,.dc-hero-city,.dc-hero h1,.dc-hero-meta,.dc-hero-meta strong,.dc-hero-meta b) {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope .dc-hero-city { opacity: .86; }
  body[data-ui-shell="app"] .ui-scope .dc-hero-meta { opacity: .94; }
  body[data-ui-shell="app"] .ui-scope .dc52-card-city { text-shadow: var(--map-marker-shadow); }

  /* Dashboard topology marker and Datacenter portfolio marker. */
  body[data-ui-shell="app"] :where(.hero-dc-marker,.hero42-dc-map-marker) {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--map-marker-border);
    border-radius: 10px;
    background: var(--map-marker-bg);
    color: var(--map-marker-text);
    box-shadow: var(--map-marker-shadow);
    white-space: nowrap;
  }
  body[data-ui-shell="app"] :where(.hero-dc-marker,.hero42-dc-map-marker) strong {
    color: var(--map-marker-text);
    font-family: var(--font-mono);
    font-size: max(var(--text-xs), 11px);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: .01em;
  }
  body[data-ui-shell="app"] :where(.hero-dc-marker,.hero42-dc-map-marker) :where(img,.map-inline-flag) {
    width: 24px;
    height: 18px;
    min-width: 24px;
    min-height: 18px;
    max-width: 24px;
    max-height: 18px;
    flex: 0 0 24px;
    object-fit: contain;
    border-radius: 2px;
  }
  body[data-ui-shell="app"] .hero42-dc-map-marker i {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--map-marker-bg);
    border-right: 1px solid var(--map-marker-border);
    border-bottom: 1px solid var(--map-marker-border);
  }

  body[data-ui-shell="app"] .hero-map-overlay {
    gap: 0;
    padding: 5px;
    border: 1px solid var(--map-overlay-border);
    border-radius: 11px;
    background: var(--map-overlay-bg);
    color: var(--map-overlay-text);
    box-shadow: var(--map-overlay-shadow);
    backdrop-filter: blur(12px) saturate(1.08);
  }
  body[data-ui-shell="app"] .hero-map-overlay > span {
    min-width: 66px;
    padding: 6px 10px;
    border-right: 1px solid var(--map-overlay-border);
    text-align: center;
  }
  body[data-ui-shell="app"] .hero-map-overlay > span:last-child { border-right: 0; }
  body[data-ui-shell="app"] .hero-map-overlay strong {
    display: block;
    color: var(--map-overlay-text);
    font-size: max(var(--text-sm), 12px);
    line-height: 1.1;
  }
  body[data-ui-shell="app"] .hero-map-overlay small {
    display: block;
    margin-top: 3px;
    color: var(--map-overlay-muted);
    font-size: max(var(--text-xs), 10px);
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  body[data-ui-shell="app"] :where(.hero-map-popup,.hero42-dc-popup) strong {
    color: var(--text-strong);
    font-size: var(--text-sm);
  }
  body[data-ui-shell="app"] :where(.hero-map-popup,.hero42-dc-popup) :where(span,small) {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
  }
  body[data-ui-shell="app"] :where(.hero-map-popup,.hero42-dc-popup) a {
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
  }

  /* Leaflet's control buttons are UI, unlike the map image itself. */
  body[data-ui-shell="app"] :where(.leaflet-control-zoom a,.leaflet-control-attribution) {
    background: var(--map-chrome-bg);
    color: var(--text-body);
    border-color: var(--border);
  }
}

/* v10.51.6 — destructive facility workflow. */
@layer components {
  body[data-ui-shell="app"] .ui-scope .dc-delete-zone {
    margin-top: var(--section-gap);
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
    background: color-mix(in srgb, var(--surface-1) 94%, var(--danger-soft));
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr);
    gap: var(--space-5);
    padding: var(--card-pad-lg);
    align-items: start;
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-grid > div > p {
    max-width: 820px;
    margin: var(--space-2) 0 var(--space-4);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: var(--space-2);
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies span {
    display: grid;
    gap: 2px;
    min-height: 62px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies span b {
    font-size: var(--text-lg);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies .is-blocking {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
    background: color-mix(in srgb, var(--surface-2) 88%, var(--danger-soft));
  }
  body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies .is-clear b { color: var(--success-text); }
  body[data-ui-shell="app"] .ui-scope .dc-delete-grid form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }
  @media (max-width: 900px) {
    body[data-ui-shell="app"] .ui-scope .dc-delete-grid { grid-template-columns: 1fr; }
    body[data-ui-shell="app"] .ui-scope .dc-delete-dependencies { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
}

/* ==========================================================================
 * v10.51.6 — Reverse-mapped shared primitives
 *
 * These classes are added beside the historical hero42/43/44 names in live
 * templates. The historical class is temporarily retained for structural
 * compatibility only; the canonical class owns appearance and shared rhythm.
 * This lets us migrate CSS family-by-family without another page-specific
 * override layer.
 * ========================================================================== */
@layer components {
  body[data-ui-shell="app"] .ui-scope .ui-page {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    display: grid;
    gap: var(--section-gap);
    color: var(--text-body);
  }

  body[data-ui-shell="app"] .ui-scope .ui-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: 2px var(--space-1);
  }
  body[data-ui-shell="app"] .ui-scope .ui-page-head .heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  body[data-ui-shell="app"] .ui-scope .ui-title-block { min-width: 0; }
  body[data-ui-shell="app"] .ui-scope .ui-title-block h1 {
    margin: var(--space-1) 0 var(--space-1);
    color: var(--text-strong);
    font-size: var(--text-2xl);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  body[data-ui-shell="app"] .ui-scope .ui-title-block p {
    max-width: 880px;
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  body[data-ui-shell="app"] .ui-scope .ui-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .ui-panel::before {
    border-color: var(--border-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .ui-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--card-pad) var(--card-pad-lg) calc(var(--card-pad) - 3px);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-2);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .ui-panel-head h2,
  body[data-ui-shell="app"] .ui-scope .ui-panel-head h3 {
    margin: 3px 0 2px;
    color: var(--text-strong);
    font-size: var(--text-lg);
    line-height: 1.15;
    letter-spacing: -.022em;
  }
  body[data-ui-shell="app"] .ui-scope .ui-panel-head small {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid > article {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 88px;
    padding: var(--card-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid > article::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--data-2));
    opacity: .82;
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid > article :where(span,small) { color: var(--text-muted); }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-grid > article strong { color: var(--text-strong); }

  body[data-ui-shell="app"] .ui-scope .ui-kpi-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-icon.good {
    border-color: color-mix(in srgb, var(--success) 28%, var(--border));
    background: var(--success-soft);
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-icon.warning {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .ui-kpi-icon.danger {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: var(--danger-soft);
    color: var(--danger-text);
  }

  body[data-ui-shell="app"] .ui-scope .ui-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-body);
    background: transparent;
  }
  body[data-ui-shell="app"] .ui-scope .ui-data-table thead th {
    background: var(--surface-inset);
    color: var(--text-subtle);
    border-color: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope .ui-data-table tbody td {
    background: transparent;
    color: var(--text-body);
    border-color: var(--border-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .ui-data-table tbody tr:hover td { background: var(--surface-hover); }

  body[data-ui-shell="app"] .ui-scope .ui-empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    min-height: 150px;
    padding: var(--space-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    color: var(--text-muted);
    text-align: center;
  }
  body[data-ui-shell="app"] .ui-scope .ui-empty-state strong { color: var(--text-strong); }

  body[data-ui-shell="app"] .ui-scope .ui-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .ui-search-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: min(100%, 280px);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .ui-search-field input { width: 100%; }

  body[data-ui-shell="app"] .ui-scope .ui-panel-metric {
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }

  @media (max-width: 1100px) {
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid,
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-five,
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-six {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 720px) {
    body[data-ui-shell="app"] .ui-scope .ui-page-head { align-items: flex-start; flex-direction: column; }
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid,
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-five,
    body[data-ui-shell="app"] .ui-scope .ui-kpi-grid.hero44-kpi-grid-six {
      grid-template-columns: 1fr;
    }
  }
}

@layer components {
  /* Reverse-mapped module roots. Layout remains with the historical selector
     during migration; the shared surface contract lives here. */
  body[data-ui-shell="app"] .ui-scope .ui-module-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .ui-module-card:hover { border-color: var(--border-strong); }
  body[data-ui-shell="app"] .ui-scope .ui-module-card :where(h2,h3,h4,strong) { color: var(--text-strong); }
  body[data-ui-shell="app"] .ui-scope .ui-module-card :where(p,small,.muted) { color: var(--text-muted); }
}

@layer components {
  /* Generic semantic feedback components are canonical too; legacy variants
     retain geometry only during migration. */
  body[data-ui-shell="app"] .ui-scope :where(.badge,.status-pill) {
    border: 1px solid var(--border);
    background: var(--neutral-soft);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope :where(.badge,.status-pill):is(.good,.success,.active,.online,.enabled,.completed,.paid,.verified) {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: var(--success-soft);
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope :where(.badge,.status-pill):is(.warning,.pending,.review,.degraded) {
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope :where(.badge,.status-pill):is(.danger,.critical,.failed,.overdue,.disabled) {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: var(--danger-soft);
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope :where(.badge,.status-pill).neutral {
    border-color: var(--border);
    background: var(--neutral-soft);
    color: var(--text-muted);
  }

  body[data-ui-shell="app"] .ui-scope .notice {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .notice.warning {
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.danger {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: var(--danger-soft);
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.good {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
    background: var(--success-soft);
    color: var(--success-text);
  }
}



/* v10.51.6 — canonical interaction contrast contract.
   This highest-priority named layer prevents generic surface rules from
   replacing semantic button backgrounds while leaving page layout ownership
   in the module layers. */
@layer utilities {
  body[data-ui-shell="app"] .ui-scope :is(
    a.button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button
  ) {
    border-color: var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-ui);
    font-weight: var(--weight-semi);
    line-height: 1.15;
    text-shadow: none;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button
  ):hover {
    border-color: var(--button-border-hover);
    background: var(--button-bg-hover);
    color: var(--button-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button
  ):focus-visible {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent-ring);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button
  ) :is(span,small,strong,b,.ui-icon,svg) {
    color: inherit;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button.primary,
    button.primary,
    a.primary-action,
    button.primary-action
  ),
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action {
    border-color: var(--button-primary-bg);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: var(--accent-glow);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button.primary,
    button.primary,
    a.primary-action,
    button.primary-action
  ):hover,
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action:hover {
    border-color: var(--button-primary-bg-hover);
    background: var(--button-primary-bg-hover);
    color: var(--button-primary-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button.primary,
    button.primary,
    a.primary-action,
    button.primary-action
  ):active,
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action:active {
    border-color: var(--button-primary-bg-active);
    background: var(--button-primary-bg-active);
    color: var(--button-primary-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    a.button.primary,
    button.primary,
    a.primary-action,
    button.primary-action
  ) :is(span,small,strong,b,.ui-icon,svg),
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action :is(span,small,strong,b,.ui-icon,svg) {
    color: inherit;
  }

  body[data-ui-shell="app"] .ui-scope :is(a.button.danger,button.danger):not(.ghost) {
    border-color: var(--button-danger-bg);
    background: var(--button-danger-bg);
    color: var(--button-danger-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(a.button.danger,button.danger):not(.ghost):hover {
    border-color: var(--button-danger-bg-hover);
    background: var(--button-danger-bg-hover);
    color: var(--button-danger-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(a.button.danger.ghost,button.danger.ghost) {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger-text);
    box-shadow: none;
  }

  body[data-ui-shell="app"] .ui-scope :is(a.button.danger.ghost,button.danger.ghost):hover {
    border-color: var(--danger-text);
    background: var(--danger-soft);
    color: var(--danger-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(a.button.ghost,button.ghost):not(.danger) {
    background: transparent;
    color: var(--button-text);
    box-shadow: none;
  }

  body[data-ui-shell="app"] .ui-scope :is(button.success-button,a.button.success-button) {
    border-color: var(--button-success-bg);
    background: var(--button-success-bg);
    color: var(--button-success-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(button.danger-button,a.button.danger-button) {
    border-color: var(--button-danger-bg);
    background: var(--button-danger-bg);
    color: var(--button-danger-text);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    button:disabled,
    .button.disabled,
    .button[aria-disabled="true"],
    .icon-button.disabled,
    .icon-button[aria-disabled="true"]
  ) {
    border-color: var(--border);
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    button:disabled,
    .button.disabled,
    .button[aria-disabled="true"],
    .icon-button.disabled,
    .icon-button[aria-disabled="true"]
  ) :is(span,small,strong,b,.ui-icon,svg) {
    color: inherit;
  }

  body[data-ui-shell="app"] .ui-scope :is(button.link-button,.link-button) {
    min-height: 0;
    border-color: transparent;
    background: transparent;
    color: var(--accent-text);
    box-shadow: none;
  }

  body[data-ui-shell="app"] .ui-scope :is(button.link-button,.link-button):hover {
    border-color: transparent;
    background: var(--accent-softer);
    color: var(--accent-text);
  }

  body[data-ui-shell="app"] :is(
    .topbar-icon-action,
    .topbar-command-button,
    .automation-bell,
    .logout-button,
    .theme-picker button
  ) {
    border-color: var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: var(--font-ui);
  }

  body[data-ui-shell="app"] :is(
    .topbar-icon-action,
    .topbar-command-button,
    .automation-bell,
    .logout-button,
    .theme-picker button
  ):hover {
    border-color: var(--button-border-hover);
    background: var(--button-bg-hover);
    color: var(--button-text);
  }

  body[data-ui-shell="app"] :is(
    .topbar-icon-action,
    .topbar-command-button,
    .automation-bell,
    .logout-button,
    .theme-picker button
  ) :is(span,small,strong,b,.ui-icon,svg) {
    color: inherit;
  }
}


/* v10.51.6 — material depth, typography, map and facility selector contract.
   These rules are deliberately in the highest-priority layer: they restore
   visual depth and physical hardware identity without reintroducing literal
   theme colors into page modules. */
@layer utilities {
  body[data-ui-shell="app"] .ui-scope {
    font-family: var(--font-ui);
    line-height: var(--line-ui);
    text-rendering: optimizeLegibility;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button,
    input,
    select,
    textarea
  ) {
    line-height: var(--line-control);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .button,
    button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
    .icon-button
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  body[data-ui-shell="app"] .ui-scope .ui-icon {
    flex: 0 0 auto;
    align-self: center;
    vertical-align: -0.125em;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .hero-kpi-copy,
    .hero-provider-rate,
    .hero-upstream-row > b,
    .metric-card,
    .ui-stat,
    .catalog-card-commercial,
    .datacenter-code,
    .badge,
    .status-badge,
    .table-density-summary,
    .data-table,
    table,
    code,
    kbd
  ) {
    font-variant-numeric: tabular-nums lining-nums;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .metric-card,
    .ui-stat,
    .panel,
    .ui-card,
    .ui-section,
    .customer-card,
    .product-card,
    .catalog-offering-card,
    .admin-catalog-card,
    .datacenter-card,
    .provider-card,
    .upstream-card,
    .update-card,
    .customer-order-wizard
  ) {
    background: var(--surface-card);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .metric-card,
    .ui-stat,
    .catalog-offering-card,
    .datacenter-card,
    .provider-card,
    .upstream-card
  ):hover {
    background: var(--surface-card-raised);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .catalog-bandwidth-line,
    .catalog-card-commercial > div,
    .provider-card :is(.provider-current,.provider-metric),
    .filter-bar,
    .table-controls,
    .table-toolbar
  ) {
    background: var(--surface-card-inset);
  }

  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .leaflet-tile-pane {
    filter: var(--map-filter);
  }

  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:not(.primary-action) {
    border-color: var(--button-border);
    background: var(--surface-card-raised);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
  }

  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:not(.primary-action):hover {
    border-color: var(--button-border-hover);
    background: var(--button-bg-hover);
    color: var(--button-text);
  }

  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:not(.primary-action):focus-visible {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent-ring);
  }

  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:not(.primary-action) .dashboard-quick-icon {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:not(.primary-action) small {
    color: var(--text-muted);
  }

  body[data-ui-shell="app"] .device-stencil {
    --device-metal-a: var(--fx-hw-metal-a);
    --device-metal-mid: var(--fx-hw-metal-mid);
    --device-metal-b: var(--fx-hw-metal-b);
    --device-edge: var(--fx-hw-chassis-edge);
  }

  body[data-ui-shell="app"] .device-chassis-face {
    border-color: var(--fx-hw-chassis-edge);
    background: var(--fx-hw-face-bg);
    box-shadow: var(--fx-hw-face-shadow);
    isolation: isolate;
  }

  body[data-ui-shell="app"] .ui-scope .datacenter-card-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 104px;
    aspect-ratio: 16 / 6;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card-inset);
  }

  body[data-ui-shell="app"] .ui-scope .datacenter-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-ui-shell="app"] .ui-scope .datacenter-card-media:not(.is-placeholder)::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: var(--image-scrim);
  }

  body[data-ui-shell="app"] .ui-scope .datacenter-card-media-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  body[data-ui-shell="app"] .ui-scope .datacenter-card-media-icon .ui-icon {
    width: 20px;
    height: 20px;
  }
}


/* v10.51.6 — late canonical convergence for photographic facility heroes and
 * inventory tables. These rules close the remaining cascade gaps where a later
 * generic typography/table rule could override an earlier context-specific one.
 */
@layer components {
  /* On-image copy owns its own fixed media palette. This must outrank generic
     h1/p/strong rules or Day mode paints dark text over the hero photograph. */
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero {
    background: var(--fx-media-bg);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero .dc-hero-veil {
    background: var(--fx-media-veil);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero :is(h1,h2,h3,strong,b) {
    color: var(--fx-media-text);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero :is(p,small,span) {
    color: var(--fx-media-muted);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero .dc-hero-city {
    color: var(--fx-media-eyebrow);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero code.dc-hero-code {
    border: 0;
    background: var(--fx-media-chip-bg);
    color: var(--fx-media-text);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero .status-dot,
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero .status-dot.online {
    color: var(--fx-media-success);
  }
  html[data-ui-theme] body[data-ui-shell="app"] .ui-scope .dc-hero h1 {
    text-shadow: var(--fx-media-text-shadow);
  }

  /* Datacenter overview gets explicit depth instead of falling back to the
     generic flat legacy surfaces. */
  body[data-ui-shell="app"] .ui-scope .dc-kpis article,
  body[data-ui-shell="app"] .ui-scope .dc-overview-grid > .surface,
  body[data-ui-shell="app"] .ui-scope .dc-two-col > .surface {
    background: var(--surface-card);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .dc-facts > div,
  body[data-ui-shell="app"] .ui-scope .dc-health > div,
  body[data-ui-shell="app"] .ui-scope .dc-room-usage article,
  body[data-ui-shell="app"] .ui-scope .dc-list-row {
    background: var(--surface-card-inset);
    border-color: var(--border-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .dc-overview-grid > .surface > .panel-heading:first-child,
  body[data-ui-shell="app"] .ui-scope .dc-two-col > .surface > .panel-heading:first-child {
    background: var(--surface-header);
    border-bottom: 1px solid var(--border-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .dc-map {
    background: var(--surface-card-inset);
  }

  /* Canonical table hierarchy. The previous convergence layer used
     --surface-sunken for the toolbar and entire table wrapper. In Day mode that
     produced the broad blue-grey slabs visible in Services and Service Catalog,
     while the sticky action column remained white. */
  body[data-ui-shell="app"] .ui-scope .data-table-toolbar {
    background: var(--table-toolbar-bg);
    border-color: var(--border);
    box-shadow: none;
  }
  body[data-ui-shell="app"] .ui-scope :is(.table-wrap,.table-surface,.table-scroll) {
    background: var(--table-shell-bg);
    border-color: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope table {
    background: transparent;
  }
  body[data-ui-shell="app"] .ui-scope table thead th {
    background: var(--table-head-bg);
    color: var(--text-subtle);
    border-color: var(--table-rule);
  }
  body[data-ui-shell="app"] .ui-scope table tbody td {
    background: var(--table-row-bg);
    color: var(--text-body);
    border-color: var(--table-rule);
  }
  body[data-ui-shell="app"] .ui-scope table tbody tr:hover td {
    background: var(--table-row-hover-bg);
  }
  body[data-ui-shell="app"] .ui-scope .is-enhanced-table.has-sticky-actions :is(th,td):last-child {
    background: var(--table-sticky-bg);
    border-left: 1px solid var(--table-rule);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .ui-scope .is-enhanced-table.has-sticky-actions tbody tr:hover td:last-child {
    background: var(--table-row-hover-bg);
  }
  body[data-ui-shell="app"] .ui-scope .data-table-search input,
  body[data-ui-shell="app"] .ui-scope .data-table-density,
  body[data-ui-shell="app"] .ui-scope .data-table-columns summary {
    background: var(--field-bg);
    color: var(--text-body);
    border-color: var(--field-border);
  }
}

/* BEGIN GENERATED TOKEN OWNERSHIP MIGRATION */
@layer components {
  .app-header nav a.active {
    background: var(--surface-1);
    color: var(--navy);
  }
  .page-heading p {
    color: var(--muted);
  }
  .eyebrow {
    color: var(--primary);
  }
  .surface, .card, .empty {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .row-note {
    color: var(--muted);
  }
  .muted {
    color: var(--muted);
  }
  .warning-text {
    color: var(--warning);
  }
  .button, button, .icon-button {
    border: 1px solid var(--border-strong);
    background: var(--button-bg);
    color: var(--button-text);
  }
  .button:hover, button:hover, .icon-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-1);
  }
  .primary {
    color: var(--text-on-accent);
    background: var(--primary);
    border-color: var(--primary);
  }
  .primary:hover {
    color: var(--text-on-accent);
    background: var(--primary-dark);
    border-color: var(--primary-dark);
  }
  .danger {
    color: var(--button-danger-text);
    background: var(--danger);
    border-color: var(--danger);
  }
  .danger.ghost {
    color: var(--danger-text);
    background: var(--surface-1);
    border-color: var(--danger);
  }
  .danger.ghost:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
  }
  .notice.error {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger-text);
  }
  .notice.warning {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  .notice.subtle {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
  }
  .badge.good {
    background: var(--success-soft);
    color: var(--success);
  }
  .badge.warning {
    background: var(--warning-soft);
    color: var(--warning);
  }
  .badge.neutral {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .status-dot.online {
    color: var(--success);
  }
  .status-dot.online::before {
    background: var(--success);
  }
  .error-small {
    color: var(--danger);
  }
  .form-grid label > span {
    color: var(--text-faint);
  }
  .form-grid input[type="text"], .form-grid input:not([type]), .form-grid input[type="number"], .form-grid input[type="email"], .form-grid input[type="date"], .form-grid select, .form-grid textarea {
    border: 1px solid var(--border-strong);
    color: var(--text-body);
    background: var(--field-bg);
    outline: none;
  }
  .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    border-color: var(--primary);
  }
  .form-grid small {
    color: var(--muted);
  }
  .form-section-title > span {
    color: var(--primary);
    background: var(--primary-soft);
  }
  .form-section-title p {
    color: var(--muted);
  }
  .option-grid {
    border: 0;
  }
  .option-grid legend, .option-panel legend, .segmented-control legend, .port-selection legend {
    color: var(--text-faint);
  }
  .option-card input, .toggle-row input, .segmented-control input, .port-choice input {
    accent-color: var(--primary);
  }
  .option-panel {
    border: 1px solid var(--border);
  }
  .sticky-actions {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
  }
  .sticky-actions > div:first-child span {
    color: var(--muted);
  }
  .port-selection {
    border: 0;
  }
  .metric {
    background: var(--surface-card);
    border: 1px solid var(--border);
  }
  .empty-inline {
    color: var(--muted);
  }
  .empty-state {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
  }
  .empty-state p {
    color: var(--muted);
  }
  .empty-icon {
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .service-type.bgp {
    background: var(--surface-2);
    color: var(--accent-text);
  }
  .service-type.dia {
    background: var(--surface-1);
    color: var(--success-text);
  }
  .service-type.l2vpn {
    background: var(--surface-2);
    color: var(--data-6);
  }
  .service-type.ix {
    background: var(--surface-1);
    color: var(--warning-text);
  }
  .service-identity-panel > div {
    background: var(--surface-alt);
  }
  .service-identity-panel span {
    color: var(--muted);
  }
  .service-identity-panel small {
    color: var(--muted);
  }
  .resource-list article {
    border: 1px solid var(--border);
    background: var(--surface-alt);
  }
  .resource-list article span {
    color: var(--muted);
  }
  .service-chip {
    border: 1px solid var(--border);
    background: var(--surface-alt);
  }
  .service-chip span {
    color: var(--muted);
  }
  .metric-card span {
    color: var(--muted);
  }
  .metric-card small {
    color: var(--muted);
  }
  .danger-zone {
    background: var(--danger-soft);
  }
  .danger-zone strong {
    color: var(--danger-text);
  }
  .danger-zone p {
    color: var(--danger-text);
  }
  .l2vpn-endpoint-grid article {
    border: 1px solid var(--border);
    background: var(--surface-alt);
  }
  .l2vpn-endpoint-grid span {
    color: var(--primary);
  }
  .l2vpn-endpoint-grid small {
    color: var(--muted);
  }
  .portal-body {
    background: var(--surface-1);
  }
  .portal-sidebar {
    color: var(--text-strong);
  }
  .portal-brand {
    color: var(--text-strong);
  }
  .portal-brand:hover {
    color: var(--text-strong);
  }
  .portal-brand > span:last-child small {
    color: var(--text-strong);
  }
  .portal-nav-group > span {
    color: var(--text-muted);
  }
  .portal-nav a {
    color: var(--text-strong);
  }
  .portal-nav a b {
    color: var(--text-strong);
  }
  .portal-nav a:hover {
    color: var(--text-strong);
  }
  .portal-nav a.active {
    color: var(--text-on-accent);
  }
  .portal-sidebar-foot .status-dot {
    color: var(--text-strong);
  }
  .portal-sidebar-foot small {
    color: var(--text-muted);
  }
  .portal-topbar {
    color: var(--text-strong);
    background: linear-gradient(90deg,var(--surface-2),var(--surface-base));
  }
  .portal-topbar > div:first-child small,.portal-admin small {
    color: var(--text-muted);
  }
  .portal-admin .avatar {
    background: var(--accent);
  }
  .network-map {
    background: var(--surface-1);
  }
  .wizard-step {
    color: var(--accent-text);
    background: var(--surface-1);
  }
  .wizard-section-head p {
    color: var(--muted);
  }
  .embedded-grid {
    background: transparent;
  }
  .wizard-submit-bar {
    background: var(--surface-1);
  }
  .wizard-submit-bar span {
    color: var(--muted);
  }
  .service-map {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .service-map-locations > a {
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
  }
  .service-map-locations > a:hover {
    border-color: var(--accent);
    background: var(--surface-1);
  }
  .service-map-locations span,.service-map-locations small {
    color: var(--muted);
  }
  .resource-subheading {
    color: var(--muted);
  }
  .billing-metric {
    border-color: var(--accent);
  }
  .route-map-sequence {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .config-preview pre {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  .policy-mode-card {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .policy-mode-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-1);
  }
  .policy-mode-card small {
    color: var(--muted);
  }
  .subsection-heading p {
    color: var(--muted);
  }
  .scope-card {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .scope-route-map {
    background: var(--surface-1);
    border: 1px solid var(--border);
  }
  .scope-route-map span {
    color: var(--muted);
  }
  .segmented-choice span {
    background: var(--surface-1);
  }
  .segmented-choice input:checked+span {
    background: var(--surface-1);
    border-color: var(--accent);
    color: var(--accent-text);
  }
  .service-type.colocation {
    background: var(--surface-2);
    color: var(--accent-text);
  }
  .history-list span {
    color: var(--muted);
  }
  .history-dot.created {
    background: var(--success);
  }
  .history-dot.deleted {
    background: var(--danger);
  }
  .dc-code.compact {
    box-shadow: none;
  }
  .dc-stat-grid.compact {
    border: 1px solid var(--border);
  }
  .config-block {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  .compact-note {
    color: var(--muted);
  }
  .compact-list-row small {
    color: var(--muted);
  }
  .automation-bell {
    color: var(--text-strong);
  }
  .automation-bell:hover {
    color: var(--text-strong);
  }
  .automation-count {
    background: var(--danger);
    color: var(--text-on-accent);
  }
  .service-choice-icon {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .service-type-choice.dia .service-choice-icon {
    background: var(--surface-1);
    color: var(--success-text);
  }
  .service-type-choice.l2vpn .service-choice-icon {
    background: var(--surface-2);
    color: var(--data-6);
  }
  .service-type-choice.ix .service-choice-icon {
    background: var(--surface-1);
    color: var(--warning-text);
  }
  .service-type-choice.colocation .service-choice-icon {
    background: var(--surface-2);
    color: var(--accent-text);
  }
  .service-choice-copy small {
    color: var(--muted);
  }
  .service-choice-check {
    color: var(--accent-text);
  }
  .upstream-overview-share>.panel-heading {
    background: var(--surface-1);
  }
  .upstream-overview-share>.panel-heading small {
    color: var(--muted);
  }
  .revenue-share-panel>.panel-heading {
    background: var(--surface-1);
  }
  .revenue-share-panel>.panel-heading small {
    color: var(--muted);
  }
  .sflow-home-note>span:last-child {
    color: var(--muted);
  }
  .sflow-flow-panel>.panel-heading,.sflow-enabled-panel>.panel-heading {
    background: var(--surface-1);
  }
  .sflow-flow-panel>.panel-heading small,.sflow-enabled-panel>.panel-heading small {
    color: var(--muted);
  }
  .no-shadow {
    box-shadow: none;
    border: 0;
  }
  .compact-empty {
    border: 0;
    box-shadow: none;
  }
  .compact-empty p {
    color: var(--muted);
  }
  .login-body {
    color: var(--text-strong);
  }
  .notice.success {
    background: var(--surface-1);
    color: var(--success-text);
  }
  .notice.error {
    background: var(--surface-1);
    color: var(--danger-text);
  }
  .form-section-title {
    color: var(--text-faint);
  }
  .user-summary-card span,.user-summary-card small {
    color: var(--muted);
  }
  .user-role-pill {
    background: var(--surface-1);
    border: 1px solid var(--border);
  }
  .sof h3 {
    color: var(--text-faint);
  }
  .sof dt {
    color: var(--muted);
  }
  .consent-row {
    color: var(--text-faint);
  }
  .signed-summary>div {
    border: 1px solid var(--border);
  }
  .signed-summary small {
    color: var(--muted);
  }
  .profile-info-grid>div {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .profile-info-grid span {
    color: var(--muted);
  }
  .profile-info-grid small {
    color: var(--muted);
  }
  .customer-profile-panel .profile-info-grid>div {
    background: var(--surface-1);
  }
  .catalog-offering-card,.admin-catalog-card {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .catalog-offering-card:hover,.admin-catalog-card:hover {
    border-color: var(--accent);
  }
  .catalog-offering-card:has(input:checked),.admin-catalog-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-1);
  }
  .catalog-code {
    color: var(--muted);
  }
  .catalog-offering-card p,.admin-catalog-card p {
    color: var(--muted);
  }
  .catalog-card-commercial div span {
    color: var(--muted);
  }
  .catalog-card-select {
    color: var(--accent-text);
  }
  .form-section-title span {
    color: var(--muted);
  }
  .addressing-card-head {
    background: var(--surface-1);
  }
  .addressing-card dt {
    color: var(--muted);
  }
  .address-chip-list code {
    background: var(--surface-1);
  }
  .catalog-bandwidth-line {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .catalog-bandwidth-line span {
    color: var(--muted);
  }
  .catalog-bandwidth-line strong {
    color: var(--text-strong);
  }
  .datacenter-code {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .datacenter-provider {
    color: var(--muted);
  }
  .datacenter-card address {
    color: var(--text-faint);
  }
  .datacenter-select {
    color: var(--accent-text);
  }
  .datacenter-card:has(input:checked) .datacenter-select {
    color: var(--accent-text);
  }
  .subsection-heading h3,.subsection-heading h4 {
    color: var(--text);
  }
  .subsection-heading p {
    color: var(--muted);
  }
  .bgp-identity-grid span {
    color: var(--muted);
  }
  .bgp-identity-grid small {
    color: var(--muted);
  }
  .routing-policy-panel>.panel-heading {
    background: var(--surface-1);
  }
  .routing-policy-card header span {
    color: var(--muted);
  }
  .routing-policy-value {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .routing-policy-value code {
    color: var(--text-strong);
  }
  .routing-policy-value small {
    color: var(--muted);
  }
  .change-request-banner {
    background: var(--surface-1);
  }
  .change-request-banner>div span {
    color: var(--warning-text);
  }
  .ticket-message {
    background: var(--surface-1);
  }
  .ticket-message.aristo-message {
    background: var(--surface-1);
  }
  .ticket-message.internal-message {
    background: var(--surface-1);
  }
  .ticket-message-meta {
    color: var(--text-subtle);
  }
  .ticket-message-meta strong {
    color: var(--text-strong);
  }
  .ticket-message-body {
    color: var(--text-strong);
  }
  .ticket-facts dt {
    color: var(--text-subtle);
  }
  .ticket-facts dd small {
    color: var(--text-subtle);
  }
  .ticket-message-count {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ticket-messages {
    background: var(--surface-1);
  }
  .ticket-message {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .ticket-message.aristo-message {
    background: var(--surface-1);
  }
  .ticket-message.internal-message {
    background: var(--surface-1);
  }
  .ticket-message-meta {
    color: var(--text-subtle);
  }
  .ticket-message-meta strong {
    color: var(--text-strong);
  }
  .ticket-message-meta b {
    color: var(--warning-text);
  }
  .ticket-message-body {
    color: var(--text-strong);
  }
  .ticket-composer {
    background: var(--surface-1);
  }
  .ticket-composer-heading small {
    color: var(--muted);
  }
  .ticket-composer-body>span {
    color: var(--text-faint);
  }
  .ticket-composer textarea {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
    outline: none;
  }
  .ticket-composer textarea:focus {
    border-color: var(--primary);
  }
  .internal-note-toggle small {
    color: var(--muted);
  }
  .ticket-facts dt {
    color: var(--text-subtle);
  }
  .ticket-facts dd {
    color: var(--text-strong);
  }
  .ticket-facts dd small {
    color: var(--text-subtle);
  }
  .ticket-control-form {
    background: var(--surface-1);
  }
  .ticket-control-form label>span {
    color: var(--text-faint);
  }
  .ticket-control-form select {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
    outline: none;
  }
  .ticket-control-form select:focus {
    border-color: var(--primary);
  }
  .ticket-delete-zone small {
    color: var(--muted);
  }
  .topbar-global-search input {
    background: var(--surface-1);
    color: var(--text);
  }
  .topbar-global-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: 0;
  }
  .topbar-global-search button {
    border: 0;
    background: transparent;
    color: var(--muted);
  }
  .topbar-global-search button:hover {
    background: var(--surface-1);
    color: var(--text);
  }
  .empty-inline {
    color: var(--muted);
  }
  .service-tabs {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .service-tabs a {
    color: var(--text-subtle);
  }
  .service-tabs a:hover {
    background: var(--surface-1);
    color: var(--text);
  }
  .service-tabs a.active,.service-tabs a[aria-selected="true"] {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .portal-nav a:focus-visible {
    outline-color: var(--accent);
  }
  .notice.error {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--danger-text);
  }
  .global-search-panel label>span {
    color: var(--muted);
  }
  .search-result-row {
    color: inherit;
  }
  .search-result-row:hover {
    background: var(--surface-1);
  }
  .search-result-row small {
    color: var(--muted);
  }
  .search-result-row>b {
    color: var(--primary);
  }
  .pagination-list>span {
    color: var(--muted);
  }
  .pagination-list b {
    color: var(--text-subtle);
  }
  .portal-brand>span:last-child small {
    color: var(--text-body);
  }
  .portal-nav-group>span,.portal-nav-label {
    color: var(--text-muted);
  }
  .portal-nav a {
    color: var(--text-strong);
  }
  .portal-nav a b {
    color: var(--text-body);
  }
  .portal-topbar {
    background: linear-gradient(90deg,var(--surface-base),var(--surface-2));
  }
  .portal-topbar>div:first-child small,.portal-admin small {
    color: var(--text-muted);
  }
  .surface,.card,.empty,.table-wrap,.table-surface {
    border-color: var(--border);
    box-shadow: var(--shadow);
  }
  .form-grid label>span,.filter-bar label>span,.customer-service-filter label>span {
    color: var(--text-faint);
  }
  .form-grid input[type="text"],.form-grid input:not([type]),.form-grid input[type="number"],.form-grid input[type="email"],.form-grid input[type="date"],.form-grid input[type="password"],.form-grid select,.form-grid textarea,
.filter-bar input,.filter-bar select,.customer-service-filter input,.customer-service-filter select,.global-search-form input,.contract-date-form input,.cancellation-review-form input {
    border-color: var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
  }
  .row-note {
    color: var(--text-subtle);
  }
  .service-tabs a.active,.service-tabs a[aria-selected="true"] {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .panel-heading small {
    color: var(--muted);
  }
  .service-chip {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .page-heading p {
    color: var(--text-subtle);
  }
  .button,button,.icon-button {
    border-color: var(--border-subtle);
    color: var(--text-faint);
  }
  .button:hover,button:hover,.icon-button:hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .button.primary,button.primary,.primary {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .button.primary:hover,button.primary:hover,.primary:hover {
    border-color: var(--accent);
  }
  .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,input:focus,select:focus,textarea:focus {
    border-color: var(--accent);
    outline: 0;
  }
  .eyebrow {
    color: var(--accent-text);
  }
  .profile-hero p {
    color: var(--muted);
  }
  .account-section-heading {
    background: var(--surface-1);
  }
  .account-section-heading p {
    color: var(--muted);
  }
  .service-tabs {
    background: var(--surface-1);
  }
  .service-tabs a {
    color: var(--text-subtle);
  }
  .service-tabs a:hover {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .support-ticket-list>a {
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text);
  }
  .support-ticket-list>a:hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .support-ticket-list small {
    color: var(--muted);
  }
  .service-activity-timeline time {
    color: var(--text-subtle);
  }
  .service-activity-timeline time span {
    color: var(--muted);
  }
  .endpoint-preview {
    background: var(--surface-1);
    color: var(--muted);
  }
  .endpoint-preview span {
    color: var(--text-faint);
  }
  .sflow-sankey-heading small {
    color: var(--muted);
  }
  .sflow-sankey-heading-meta span {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .sflow-sankey-heading-meta strong {
    color: var(--accent-text);
  }
  .sflow-sankey-summary {
    background: var(--surface-1);
  }
  .sflow-sankey-summary span {
    color: var(--text-subtle);
  }
  .sflow-sankey-summary strong {
    color: var(--accent-text);
  }
  .sflow-sankey-tooltip {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  .sflow-sankey-tooltip span {
    color: var(--text-strong);
  }
  .sflow-sankey-tooltip small {
    color: var(--text-body);
  }
  .sflow-sankey-tooltip .sflow-sankey-tooltip-role {
    color: var(--accent-text);
  }
  .sflow-sankey-legend {
    background: var(--surface-1);
  }
  .monitoring-legend b.warning {
    background: var(--warning);
  }
  .monitoring-legend b.critical {
    background: var(--danger);
  }
  .monitor-gauge-card.warning {
    border-color: var(--warning);
  }
  .monitor-gauge-card.critical {
    border-color: var(--danger);
  }
  .monitoring-top-six .panel-heading h2::before {
    color: var(--accent-text);
  }
  .button.danger {
    color: var(--danger-text);
    border-color: var(--danger);
    background: var(--surface-1);
  }
  .button.danger:hover {
    background: var(--surface-1);
  }
  .detail-list dt {
    color: var(--muted);
  }
  .peering-control-card input:not([type="checkbox"]),.peering-control-card select,
.peering-ix-settings input:not([type="checkbox"]),.peering-ix-settings select,
.peering-agreement-form input:not([type="checkbox"]),.peering-agreement-form select,
.peering-email-form input:not([type="checkbox"]),.peering-email-form select,.peering-email-form textarea {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
  }
  .peering-control-card input:focus,.peering-control-card select:focus,.peering-ix-settings input:focus,.peering-ix-settings select:focus,
.peering-agreement-form input:focus,.peering-agreement-form select:focus,.peering-email-form input:focus,.peering-email-form textarea:focus {
    border-color: var(--accent);
    outline: 0;
  }
  .peering-control-card label>span,.peering-setting-field>span,.peering-agreement-form label>span,.peering-email-form label>span {
    color: var(--text-faint);
  }
  .peering-control-card label small,.peering-setting-field small,.peering-agreement-form label small,.peering-email-form label small {
    color: var(--muted);
  }
  .peering-proposals-surface>.panel-heading small,.peering-exchanges-surface>.panel-heading small,.peering-list-surface>.panel-heading small {
    color: var(--muted);
  }
  .status-pill.danger {
    color: var(--danger-text);
  }
  .status-pill.warning {
    color: var(--warning-text);
  }
  .ddos-metric-card.active::after {
    background: var(--danger-soft);
  }
  .status-pill.success {
    background: var(--success-soft);
    color: var(--success);
  }
  .ddos-incident-metric.danger::after {
    background: var(--danger-soft);
  }
  .service-location-item small,.service-location-more {
    color: var(--muted);
  }
  .customer-services-map {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .status-pill.draft {
    background: var(--surface-1);
    color: var(--text-faint);
  }
  .status-pill.issued {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .status-pill.overdue {
    background: var(--surface-1);
    color: var(--danger-text);
  }
  .status-pill.void {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .customer-billing-summary>div {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .customer-billing-summary span {
    color: var(--muted);
  }
  .customer-billing-summary small {
    color: var(--muted);
  }
  .status-pill.neutral {
    background: var(--surface-1);
    color: var(--text-faint);
  }
  .notice.warning {
    background: var(--surface-1);
    border-color: var(--warning);
    color: var(--warning-text);
  }
  .billing-activation-form>label:not(.checkbox-line)>span {
    color: var(--muted);
  }
  .telemetry-graph-shell {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .telemetry-grid-y {
    stroke: var(--border-subtle);
  }
  .telemetry-grid-y.zero {
    stroke: var(--border-strong);
  }
  .telemetry-axis-y,.telemetry-axis-x {
    fill: var(--text-subtle);
  }
  .telemetry-area.in {
    fill: var(--text-muted);
  }
  .telemetry-area.out {
    fill: var(--accent-text);
  }
  .telemetry-line {
    fill: none;
  }
  .telemetry-line.in {
    stroke: var(--border-strong);
  }
  .telemetry-line.out {
    stroke: var(--accent);
  }
  .telemetry-p95.in {
    stroke: var(--danger);
  }
  .telemetry-p95.out {
    stroke: var(--danger);
  }
  .traffic-key.out {
    background: var(--accent);
  }
  .telemetry-graph-footer {
    color: var(--text-subtle);
    background: var(--surface-1);
  }
  .telemetry-graph-footer strong {
    color: var(--text-faint);
  }
  .telemetry-graph-footer .muted {
    color: var(--text-muted);
  }
  .status-pill.active {
    background: var(--surface-1);
    color: var(--success-text);
  }
  .status-pill.expiring {
    background: var(--warning);
    color: var(--danger-text);
  }
  .status-pill.expired {
    background: var(--surface-2);
    color: var(--danger-text);
  }
  .status-pill.upcoming {
    background: var(--surface-2);
    color: var(--accent-text);
  }
  .stacked-form label small {
    color: var(--text-subtle);
  }
  .supplier-status-panel>.panel-heading {
    background: var(--surface-1);
  }
  .supplier-status-panel>.panel-heading small {
    color: var(--muted);
  }
  .portal-admin {
    color: inherit;
  }
  .page-heading p,
.ui-page-header p {
    color: var(--muted);
  }
  .section-heading p,
.panel-heading p,
.ui-section-header p {
    color: var(--muted);
  }
  .portal-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.portal-workspace select,
.portal-workspace textarea {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
    outline: none;
  }
  .portal-workspace input:focus,
.portal-workspace select:focus,
.portal-workspace textarea:focus {
    border-color: var(--primary);
  }
  .portal-workspace input:disabled,
.portal-workspace select:disabled,
.portal-workspace textarea:disabled {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .portal-workspace input[type="checkbox"],
.portal-workspace input[type="radio"] {
    accent-color: var(--primary);
  }
  .ui-field > span,
.portal-workspace .field-label,
.portal-workspace .billing-form-grid label > span,
.portal-workspace .manual-line-grid label > span {
    color: var(--text-faint);
  }
  .ui-field > small,
.ui-help {
    color: var(--muted);
  }
  .ui-action-bar {
    background: var(--surface-1);
  }
  .ui-stat > span {
    color: var(--muted);
  }
  .ui-stat > small {
    color: var(--muted);
  }
  .portal-workspace form label:not(.toggle-row):not(.checkbox-line):not(.option-card):not(.port-choice):not(.segmented-control) > span:first-child {
    color: var(--text-faint);
  }
  .portal-workspace form label:not(.toggle-row):not(.checkbox-line):not(.option-card):not(.port-choice) > small {
    color: var(--muted);
  }
  .ui-scope :is(.surface, .card, .ui-card, .table-wrap, .table-surface, .table-scroll) {
    border-color: var(--border);
    box-shadow: var(--ui-shadow);
  }
  .ui-scope :is(.table-wrap, .table-surface, .table-scroll) {
    background: var(--surface);
  }
  .ui-scope input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.ui-scope select,
.ui-scope textarea {
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
    outline: none;
  }
  .ui-scope input:focus,
.ui-scope select:focus,
.ui-scope textarea:focus {
    border-color: var(--primary);
    outline: none;
  }
  .ui-scope input:disabled,
.ui-scope select:disabled,
.ui-scope textarea:disabled {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ui-scope input[type="checkbox"],
.ui-scope input[type="radio"] {
    accent-color: var(--primary);
  }
  .ui-scope form label:not(.toggle-row):not(.checkbox-line):not(.option-card):not(.port-choice):not(.segmented-control) > span:first-child,
.ui-scope .ui-field > span,
.ui-scope .field-label {
    color: var(--text-faint);
  }
  .ui-scope form label:not(.toggle-row):not(.checkbox-line):not(.option-card):not(.port-choice) > small,
.ui-scope .ui-help {
    color: var(--muted);
  }
  .ui-scope button:disabled {
    box-shadow: none;
  }
  .portal-nav a .nav-icon {
    color: var(--text-body);
  }
  .portal-nav a:hover .nav-icon {
    color: var(--text-strong);
  }
  .portal-nav a.active .nav-icon {
    color: var(--text-strong);
  }
  .health-command-panel.attention {
    border-left-color: var(--warning);
  }
  .health-command-panel.attention .health-command-icon {
    background: var(--warning-soft);
    color: var(--warning);
  }
  .datacenter-country {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .datacenter-flag {
    background: var(--surface-1);
  }
  .datacenter-card:hover .datacenter-select {
    background: var(--primary-soft);
  }
  .datacenter-card:has(input:checked) .datacenter-country {
    border-color: var(--accent);
    background: var(--surface-1);
    color: var(--primary);
  }
  .ui-scope :is(.button, .icon-button),
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
    color: var(--text-faint);
  }
  .ui-scope :is(.button, .icon-button):hover,
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .ui-scope :is(.button.primary, .button[class~="primary"]),
.ui-scope button.primary {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .ui-scope :is(.button.primary, .button[class~="primary"]):hover,
.ui-scope button.primary:hover {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .ui-scope .button.secondary,
.ui-scope button.secondary {
    border-color: var(--border-subtle);
    color: var(--accent-text);
  }
  .ui-scope .button.secondary:hover,
.ui-scope button.secondary:hover {
    border-color: var(--accent);
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .ui-scope :is(.button.danger, button.danger):not(.ghost) {
    border-color: var(--danger);
    color: var(--text-on-accent);
  }
  .ui-scope :is(.button.danger, button.danger):not(.ghost):hover {
    border-color: var(--danger);
    background: var(--surface-hover);
    color: var(--text-strong);
  }
  .ui-scope :is(.button.danger.ghost, button.danger.ghost) {
    border-color: var(--danger);
    background: var(--surface-1);
    color: var(--danger-text);
    box-shadow: none;
  }
  .ui-scope :is(.button.danger.ghost, button.danger.ghost):hover {
    border-color: var(--danger);
    background: var(--surface-1);
    color: var(--danger-text);
  }
  .ui-scope :is(.button, .icon-button).disabled,
.ui-scope :is(.button, .icon-button)[aria-disabled="true"],
.ui-scope button:disabled {
    box-shadow: none;
  }
  .ui-scope .form-check > .form-check-label {
    color: var(--text);
  }
  .ui-scope .form-check > .form-check-label > small {
    color: var(--muted);
  }
  .ui-scope fieldset.checks {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .ui-scope fieldset.checks > legend {
    color: var(--text-muted);
  }
  .datacenter-flag,
.country-flag-vector {
    background: var(--surface-1);
  }
  .inventory-action-menu[open] > summary {
    border-color: var(--accent);
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .inventory-action-menu > nav {
    background: var(--surface-1);
  }
  .inventory-action-menu > nav > :is(a,form,.inventory-menu-disabled) {
    border: 0;
    background: transparent;
    color: var(--text-faint);
  }
  .inventory-action-menu > nav > :is(a,form):hover {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .inventory-action-menu > nav .ui-icon {
    color: var(--accent-text);
  }
  .inventory-action-menu > nav > form button {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  .inventory-action-menu > nav small {
    color: var(--text-muted);
  }
  .inventory-action-menu > nav .inventory-menu-danger,
.action-menu-floating .inventory-menu-danger {
    color: var(--danger-text);
  }
  .inventory-action-menu > nav .inventory-menu-danger .ui-icon,
.action-menu-floating .inventory-menu-danger .ui-icon {
    color: var(--danger-text);
  }
  .action-menu-floating {
    background: var(--surface-1);
    color: var(--text-faint);
  }
  .action-menu-floating > :is(a,form,.inventory-menu-disabled,.service-menu-disabled) {
    border: 0;
    background: transparent;
    color: inherit;
  }
  .action-menu-floating > :is(a,form):hover {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .action-menu-floating .ui-icon {
    color: var(--accent-text);
  }
  .action-menu-floating > form button {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  .action-menu-floating small {
    color: var(--text-muted);
  }
  .peering-request-summary-icon.good {
    background: var(--success-soft);
    color: var(--success);
  }
  .peering-request-summary-icon.warning {
    background: var(--warning-soft);
    color: var(--warning);
  }
  .topbar-icon-action,
.topbar-command-button {
    color: var(--text-strong);
    box-shadow: none;
  }
  .topbar-icon-action:hover,
.topbar-icon-action.is-active,
.topbar-command-button:hover {
    color: var(--text-strong);
  }
  .topbar-command-button kbd,
.command-palette kbd {
    color: var(--text-body);
  }
  .portal-nav-group > span {
    outline: none;
  }
  .portal-nav-group > span:focus-visible {
    color: var(--text-strong);
  }
  .portal-nav a .nav-icon {
    color: var(--text-body);
  }
  .portal-nav a:hover .nav-icon {
    color: var(--text-strong);
  }
  .portal-nav a.active .nav-icon {
    color: var(--text-strong);
  }
  .command-palette > header > .ui-icon {
    color: var(--text-subtle);
  }
  .command-palette-option {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .command-palette-option:hover,
.command-palette-option.is-selected {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .dashboard-quick-action {
    color: var(--text-strong);
  }
  .dashboard-quick-action:hover {
    border-color: var(--accent);
  }
  .dashboard-quick-action small {
    color: var(--text-muted);
  }
  .dashboard-quick-action > .ui-icon {
    color: var(--text-muted);
  }
  .dashboard-quick-icon {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .dashboard-quick-action.primary-action {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .dashboard-quick-action.primary-action small,
.dashboard-quick-action.primary-action > .ui-icon {
    color: var(--text-on-accent);
  }
  .dashboard-quick-action.primary-action .dashboard-quick-icon {
    color: var(--text-on-accent);
  }
  .dashboard-kpi-icon {
    color: var(--accent-text);
  }
  .dashboard-link-pulse {
    color: var(--text-faint);
  }
  .dashboard-link-pulse:hover {
    background: var(--surface-1);
  }
  .dashboard-link-pulse small {
    color: var(--text-muted);
  }
  .dashboard-link-pulse meter {
    border: 0;
    background: var(--surface-2);
  }
  .dashboard-link-pulse meter::-webkit-meter-bar {
    border: 0;
    background: var(--surface-2);
  }
  .dashboard-link-pulse.normal meter::-webkit-meter-optimum-value {
    background: var(--success);
  }
  .dashboard-link-pulse.warning meter::-webkit-meter-optimum-value {
    background: var(--warning);
  }
  .dashboard-link-pulse.critical meter::-webkit-meter-optimum-value {
    background: var(--danger);
  }
  .dashboard-link-pulse.normal meter::-moz-meter-bar {
    background: var(--success);
  }
  .dashboard-link-pulse.warning meter::-moz-meter-bar {
    background: var(--warning);
  }
  .dashboard-link-pulse.critical meter::-moz-meter-bar {
    background: var(--danger);
  }
  .datacenter-table-flag {
    background: var(--surface-1);
  }
  .data-table-search .ui-icon {
    color: var(--text-subtle);
  }
  .is-enhanced-table.has-sticky-actions :is(th,td):last-child {
    background: var(--surface-1);
  }
  .is-enhanced-table.has-sticky-actions th:last-child {
    background: var(--surface-1);
  }
  .is-enhanced-table tbody tr:hover td:last-child {
    background: var(--surface-1);
  }
  .status-indicator {
    background: currentColor;
  }
  .button-spinner {
    border: 2px solid currentColor;
    border-right-color: transparent;
  }
  .ui-loading-panel {
    background: var(--surface-2);
  }
  html,
body.portal-body {
    background: var(--surface-1);
  }
  .portal-topbar-context > strong {
    color: var(--text-strong);
  }
  .portal-topbar-context > small {
    color: var(--text-muted);
  }
  .rack-card-identity > div > span {
    color: var(--text-muted);
  }
  .rack-card-header small {
    color: var(--text-subtle);
  }
  .rack-card-metrics strong {
    color: var(--text-strong);
  }
  .rack-management > summary,
.rack-mount-disclosure > summary {
    color: var(--text-body);
  }
  .rack-resource-columns > section {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .rack-resource-head {
    color: var(--text-body);
  }
  .rack-mount-disclosure {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .rack-visual-mount-form {
    background: var(--surface-2);
  }
  .device-chassis-face {
    border: 1px solid var(--device-edge);
  }
  .device-linecard-label {
    color: var(--text-faint);
  }
  .device-port-legend {
    color: var(--text-muted);
  }
  .device-linecard {
    border-color: var(--border-strong);
  }
  .device-px4-brand {
    color: var(--text-faint);
  }
  .device-linecard.is-blank .device-linecard-label strong {
    color: var(--text-subtle);
  }
  .device-linecard-blank {
    color: var(--text-strong);
  }
  .bgp-customer-ip-list code {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  .visually-hidden {
    border: 0;
  }
  .service-action-menu[open] > summary {
    border-color: var(--accent);
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .service-action-menu > nav {
    background: var(--surface-1);
  }
  .service-action-menu > nav > :is(a,.service-menu-disabled) {
    color: var(--text-faint);
  }
  .service-action-menu > nav > a:hover {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .service-action-menu > nav .ui-icon {
    color: var(--accent-text);
  }
  .service-action-menu > nav small {
    color: var(--text-muted);
  }
  .device-port-tooltip {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  .device-port-tooltip > strong {
    color: var(--text-strong);
  }
  .device-port-tooltip > small {
    color: var(--text-muted);
  }
  .device-port-tooltip dt {
    color: var(--text-muted);
  }
  .device-port-tooltip dd {
    color: var(--text-body);
  }
  .device-port-tooltip em {
    color: var(--accent-text);
  }
  .portal-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  .portal-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background: transparent;
  }
  .dc-rack-inventory {
    border: 1px solid var(--border);
  }
  .dc-rack-inventory-head small {
    color: var(--muted);
  }
  .dc-integrated-room > summary small,
.dc-integrated-rack > summary small {
    color: var(--muted);
  }
  .dc-integrated-room[open] > summary,
.dc-integrated-rack[open] > summary {
    background: var(--surface-1);
  }
  .dc-integrated-room-body {
    background: var(--surface-1);
  }
  .dc-integrated-rack {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .update-state-dot.online {
    background: var(--success);
  }
  .update-state-dot.offline {
    background: var(--warning);
  }
  .ui-scope .security-status-list {
    background: var(--surface-1);
  }
  .ui-scope .security-status-row small {
    color: var(--muted);
  }
  .ui-scope .security-status-row strong {
    color: var(--text);
  }
  .ui-scope .security-status-row > div > span {
    color: var(--muted);
  }
  .ui-scope .mfa-account-grid {
    background: var(--surface-1);
  }
  .ui-scope .mfa-action-card {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .ui-scope .mfa-action-card--danger {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope .mfa-action-card--policy {
    background: var(--surface-1);
    border-color: var(--border-subtle);
  }
  .ui-scope .mfa-action-card-head p,
.ui-scope .mfa-setup-confirm p,
.ui-scope .mfa-enrollment-form p,
.ui-scope .mfa-policy-copy p {
    color: var(--muted);
  }
  .ui-scope .mfa-manual-secret span {
    color: var(--muted);
  }
  .ui-scope .mfa-setup-confirm {
    background: var(--surface-1);
  }
  .ui-scope .mfa-enrollment-form {
    background: var(--surface-1);
  }
  body[data-portal-mode="customer"] .customer-services-map {
    border: 0;
  }
  body[data-portal-mode="customer"] .customer-profile-section-grid > label > span,
body[data-portal-mode="customer"] .customer-address-assistant > label > span {
    color: var(--text-faint);
  }
  body[data-portal-mode="customer"] .address-search-status {
    color: var(--muted);
  }
  body[data-portal-mode="customer"] .address-suggestion-list {
    background: var(--surface-1);
  }
  body[data-portal-mode="customer"] .address-suggestion {
    border: 0;
    background: var(--surface-1);
    color: var(--text);
  }
  body[data-portal-mode="customer"] .address-suggestion:hover,
body[data-portal-mode="customer"] .address-suggestion:focus-visible {
    background: var(--surface-1);
    outline: none;
  }
  body[data-portal-mode="customer"] .address-suggestion small {
    color: var(--muted);
  }
  body[data-portal-mode="customer"] .customer-address-assistant > small {
    color: var(--muted);
  }
  body[data-portal-mode="customer"] .address-search-status,
.ui-scope .address-search-status {
    color: var(--muted);
  }
  body[data-portal-mode="customer"] .address-suggestion-list,
.ui-scope .address-suggestion-list {
    background: var(--surface-1);
  }
  body[data-portal-mode="customer"] .address-suggestion,
.ui-scope .address-suggestion {
    border: 0;
    background: var(--surface-1);
    color: var(--text);
  }
  body[data-portal-mode="customer"] .address-suggestion:hover,
body[data-portal-mode="customer"] .address-suggestion:focus-visible,
.ui-scope .address-suggestion:hover,
.ui-scope .address-suggestion:focus-visible {
    background: var(--surface-1);
    outline: none;
  }
  body[data-portal-mode="customer"] .address-suggestion small,
.ui-scope .address-suggestion small {
    color: var(--muted);
  }
  body[data-portal-mode="customer"] :is(.customer-services-map,.service-map) {
    border: 0;
  }
  body[data-portal-mode="customer"] .customer-service-footprint-list,
body[data-portal-mode="customer"] .service-map-locations {
    background: var(--surface-1);
  }
  .support-create-system-form .support-attachment-field input[type="file"],
.ticket-composer .support-attachment-field input[type="file"] {
    background: var(--surface-1);
  }
  .support-sla-panel {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }
  .support-sla-row strong {
    color: var(--text-strong);
  }
  .support-sla-row small {
    color: var(--muted);
  }
  .support-attachment-chip {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .support-attachment-chip:hover {
    border-color: var(--accent);
    background: var(--surface-1);
  }
  .support-attachment-chip.internal {
    border-color: var(--warning);
    background: var(--surface-1);
    color: var(--warning-text);
  }
  .support-attachment-chip small {
    color: var(--muted);
  }
  .country-flag-img {
    background: transparent;
  }
  .country-flag-flat,
.map-inline-flag {
    background: var(--surface-1);
  }
  .country-select-flat-flag:empty {
    border: 1px dashed var(--border);
  }
  .ui-scope .readiness-panel-head p {
    color: var(--muted);
  }
  .ui-scope .readiness-progress-block {
    background: var(--surface-1);
  }
  .ui-scope .readiness-progress-copy strong {
    color: var(--text);
  }
  .ui-scope .readiness-progress-copy span {
    color: var(--muted);
  }
  .ui-scope .readiness-progress-copy > b {
    color: var(--primary);
  }
  .ui-scope .readiness-progress-track {
    background: var(--surface-2);
  }
  .ui-scope .readiness-step.complete {
    border-color: var(--border-subtle);
  }
  .ui-scope .readiness-step.pending {
    border-color: var(--border-subtle);
  }
  .ui-scope .readiness-step-marker {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ui-scope .readiness-step.complete .readiness-step-marker {
    background: var(--surface-1);
    color: var(--success-text);
  }
  .ui-scope .readiness-step-copy strong {
    color: var(--text);
  }
  .ui-scope .readiness-step-copy small {
    color: var(--muted);
  }
  .ui-scope .readiness-step-state {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ui-scope .readiness-step.complete .readiness-step-state {
    background: var(--surface-1);
    color: var(--success-text);
  }
  body.portal-body {
    color: var(--text);
    background: var(--bg);
  }
  body.portal-body .portal-brand > span:last-child small {
    color: var(--accent-text);
  }
  body.portal-body .portal-nav-group > span {
    color: var(--text-muted);
  }
  body.portal-body .portal-nav a,
body.portal-body .portal-nav-featured a {
    border: 1px solid transparent;
    color: var(--text-strong);
  }
  body.portal-body .portal-nav a .nav-icon,
body.portal-body .portal-nav-featured a .nav-icon {
    color: var(--text-muted);
  }
  body.portal-body .portal-nav a:hover,
body.portal-body .portal-nav-featured a:hover {
    color: var(--text-strong);
  }
  body.portal-body .portal-nav a:hover .nav-icon,
body.portal-body .portal-nav-featured a:hover .nav-icon {
    color: var(--text-strong);
  }
  body.portal-body .portal-nav a.active,
body.portal-body .portal-nav-featured a.active {
    color: var(--text-strong);
  }
  body.portal-body .portal-nav a.active .nav-icon,
body.portal-body .portal-nav-featured a.active .nav-icon {
    color: var(--text-strong);
  }
  body.portal-body .portal-sidebar-status > span {
    color: var(--text-body);
  }
  body.portal-body .portal-sidebar-status .status-dot {
    color: var(--success-text);
  }
  body.portal-body .portal-sidebar-status .status-dot::before {
    box-shadow: none;
  }
  body.portal-body .portal-sidebar-foot > small {
    color: var(--text-muted);
  }
  body.portal-body .portal-topbar {
    color: var(--text);
    background: var(--surface-1);
  }
  body.portal-body .portal-topbar-context > strong {
    color: var(--text-strong);
  }
  body.portal-body .portal-topbar-context > small {
    color: var(--text-muted);
  }
  body.portal-body .topbar-icon-action,
body.portal-body .topbar-command-button,
body.portal-body .automation-bell {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  body.portal-body .topbar-icon-action:hover,
body.portal-body .topbar-icon-action.is-active,
body.portal-body .topbar-command-button:hover,
body.portal-body .automation-bell:hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--accent-text);
  }
  body.portal-body .topbar-command-button kbd {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-muted);
  }
  body.portal-body .topbar-global-search input {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    box-shadow: none;
  }
  body.portal-body .topbar-global-search input:focus {
    background: var(--surface-1);
  }
  body.portal-body .portal-admin {
    color: var(--text-strong);
  }
  body.portal-body .portal-admin strong {
    color: var(--text-strong);
  }
  body.portal-body .portal-admin small {
    color: var(--text-muted);
  }
  body.portal-body .portal-admin .avatar {
    color: var(--text-faint);
  }
  body.portal-body .logout-button {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-subtle);
    box-shadow: none;
  }
  body.portal-body .automation-bell .automation-count {
    border-color: var(--border-subtle);
  }
  .ui-scope .experience-breadcrumbs {
    color: var(--text-muted);
  }
  .ui-scope .experience-breadcrumbs a {
    color: var(--text-subtle);
  }
  .ui-scope .experience-breadcrumb-current {
    color: var(--text-faint);
  }
  .ui-scope .page-heading h2,
.ui-scope .ui-page-header h1,
.ui-scope .ui-page-header h2 {
    color: var(--text-strong);
  }
  .ui-scope .page-heading p,
.ui-scope .ui-page-header p {
    color: var(--text-subtle);
  }
  .ui-scope .eyebrow {
    color: var(--accent-text);
  }
  .ui-scope :is(.surface, .card, .ui-card, .ui-section, .table-wrap, .table-surface, .table-scroll) {
    border-color: var(--border);
    box-shadow: var(--ui-shadow);
  }
  .ui-scope :is(.surface, .card, .ui-card, .ui-section) {
    background: var(--surface-1);
  }
  .ui-scope .button,
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
.ui-scope .icon-button {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-faint);
  }
  .ui-scope .button:hover,
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
.ui-scope .icon-button:hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope .button.primary,
.ui-scope button.primary,
.ui-scope .primary {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .ui-scope .button.primary:hover,
.ui-scope button.primary:hover,
.ui-scope .primary:hover {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .ui-scope input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.ui-scope select,
.ui-scope textarea {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-strong);
  }
  .ui-scope input:focus,
.ui-scope select:focus,
.ui-scope textarea:focus {
    border-color: var(--accent);
  }
  .ui-scope :is(.section-heading, .panel-heading, .ui-section-header) h3 {
    color: var(--text-strong);
  }
  .ui-scope :is(.section-heading, .panel-heading, .ui-section-header) p {
    color: var(--text-muted);
  }
  .ui-scope .badge.good {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--success-text);
  }
  .ui-scope .badge.neutral {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ui-scope .badge.warning {
    border-color: var(--warning);
  }
  .ui-scope .status-dot::before {
    box-shadow: none;
  }
  .ui-scope .status-dot.online::before {
    background: var(--success);
  }
  .ui-scope .data-table-toolbar {
    border-color: var(--border);
    background: var(--surface-1);
  }
  .ui-scope .data-table-search input {
    background: var(--surface-1);
  }
  .ui-scope .table-wrap,
.ui-scope .table-surface,
.ui-scope .table-scroll {
    background: var(--surface-1);
  }
  .ui-scope table th {
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .ui-scope table td {
    color: var(--text-faint);
  }
  .ui-scope table tbody tr:hover {
    background: var(--surface-1);
  }
  .ui-scope .ui-stat,
.ui-scope .dashboard-kpis article,
.ui-scope .compact-metrics > div {
    border-color: var(--border-subtle);
  }
  .ui-scope .ui-stat > span {
    color: var(--text-muted);
  }
  .ui-scope .ui-stat > strong {
    color: var(--text-strong);
  }
  .ui-scope .device-country-heading h3 {
    color: var(--text-strong);
  }
  .ui-scope .device-country-count {
    color: var(--text-muted);
  }
  .ui-scope .device-card {
    border-color: var(--border-subtle);
  }
  .ui-scope .device-card:hover {
    border-color: var(--border-subtle);
  }
  .ui-scope .device-card-head h3 a {
    color: var(--accent-text);
  }
  .ui-scope .device-card .row-note {
    color: var(--text-muted);
  }
  .ui-scope .device-facts > div {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope .device-facts dt {
    color: var(--text-muted);
  }
  .ui-scope .device-fact-icon {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .ui-scope .device-facts dd {
    color: var(--text-faint);
  }
  body.portal-body .portal-topbar {
    background: var(--surface-1);
    border-bottom-color: var(--border-strong);
  }
  .ui-scope .page-heading h2,
.ui-scope .ui-page-header h1,
.ui-scope .ui-page-header h2 {
    color: var(--text-strong);
  }
  .ui-scope .page-heading p,
.ui-scope .ui-page-header p {
    color: var(--text-subtle);
  }
  .ui-scope .eyebrow {
    color: var(--accent-text);
  }
  .ui-scope :is(.surface,.card,.ui-card,.ui-section) {
    border-color: var(--border-strong);
  }
  .ui-scope :is(.surface,.card,.ui-card,.ui-section):hover {
    border-color: var(--border-subtle);
  }
  .ui-scope .button,
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
.ui-scope .icon-button {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope .button:hover,
.ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
.ui-scope .icon-button:hover {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.ui-scope select,
.ui-scope textarea {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope input:focus,
.ui-scope select:focus,
.ui-scope textarea:focus {
    background: var(--surface-1);
    border-color: var(--accent);
  }
  .ui-scope .ui-stat,
.ui-scope .dashboard-kpis article,
.ui-scope .compact-metrics > div,
.ui-scope .metric-card {
    border-color: var(--border-subtle);
  }
  .ui-scope .table-wrap,
.ui-scope .table-surface,
.ui-scope .table-scroll {
    border-color: var(--border-subtle);
  }
  .ui-scope table th {
    background: var(--surface-1);
    color: var(--text-subtle);
    border-bottom-color: var(--border-subtle);
  }
  .ui-scope table td {
    border-bottom-color: var(--border-subtle);
  }
  .ui-scope table tbody tr:hover {
    background: var(--surface-1);
  }
  .country-flag-true,
.country-flag-flat,
.map-inline-flag {
    filter: none;
  }
  .ui-scope .device-card {
    border-color: var(--border-subtle);
  }
  .ui-scope .device-card:hover {
    border-color: var(--border-subtle);
  }
  .ui-scope .device-visual-wrap {
    border-color: var(--border-subtle);
  }
  .ui-scope .device-facts > div {
    border-color: var(--border-subtle);
    background: var(--surface-1);
  }
  .ui-scope .telemetry-graph-shell,
.telemetry-graph-shell.telemetry-graph-modern {
    background: var(--surface-1);
  }
  .telemetry-summary-strip {
    background: var(--surface-2);
  }
  .telemetry-summary-card {
    background: var(--surface-1);
  }
  .telemetry-summary-card > span {
    color: var(--text-muted);
  }
  .telemetry-summary-card > strong {
    color: var(--text-strong);
  }
  .telemetry-summary-card > small {
    color: var(--text-muted);
  }
  .telemetry-grid-y {
    stroke: var(--border-subtle);
  }
  .telemetry-grid-y.zero {
    stroke: var(--border-subtle);
  }
  .telemetry-axis-tick {
    stroke: var(--border-subtle);
  }
  .telemetry-axis-y,
.telemetry-axis-x {
    fill: var(--text-subtle);
  }
  .telemetry-area.in.modern {
    fill: url(#telemetry-in-gradient);
  }
  .telemetry-area.out.modern {
    fill: url(#telemetry-out-gradient);
  }
  .telemetry-line.modern {
    fill: none;
  }
  .telemetry-line.in.modern {
    stroke: var(--accent);
  }
  .telemetry-line.out.modern {
    stroke: var(--border-strong);
  }
  .telemetry-p95.in.modern {
    stroke: var(--accent);
  }
  .telemetry-p95.out.modern {
    stroke: var(--border-strong);
  }
  .telemetry-hover-line {
    stroke: var(--border-strong);
  }
  .telemetry-hover-dot {
    stroke: var(--border-subtle);
  }
  .telemetry-hover-dot.in {
    fill: var(--accent-text);
  }
  .telemetry-hover-dot.out {
    fill: var(--data-2);
  }
  .telemetry-hover-tooltip {
    background: var(--surface-1);
    color: var(--text-faint);
  }
  .telemetry-hover-tooltip > strong {
    color: var(--text-subtle);
  }
  .telemetry-hover-tooltip em {
    color: var(--text-muted);
  }
  .telemetry-hover-tooltip b {
    color: var(--text-strong);
  }
  .traffic-key.in {
    background: var(--accent);
  }
  .telemetry-legend-row {
    color: var(--text-subtle);
    background: var(--surface-1);
  }
  .telemetry-legend-p95 {
    color: var(--text-muted);
  }
  .telemetry-graph-footer {
    color: var(--text-muted);
    background: var(--surface-1);
  }
  .telemetry-graph-footer strong {
    color: var(--text-subtle);
  }
  body.portal-body .portal-brand > span:last-child small {
    color: var(--accent-text);
  }
  body.portal-body .portal-nav-group > span {
    color: var(--text-muted);
  }
  body.portal-body .portal-nav a,
body.portal-body .portal-nav-featured a {
    color: var(--text-strong);
  }
  body.portal-body .portal-nav a .nav-icon,
body.portal-body .portal-nav-featured a .nav-icon {
    color: var(--text-muted);
  }
  body.portal-body .portal-topbar {
    background: var(--surface-1);
    border-bottom-color: var(--border-strong);
  }
  .ui-scope :is(.surface,.card,.ui-card,.ui-section) {
    border-color: var(--border-strong);
  }
  .ui-scope :is(.surface,.card,.ui-card,.ui-section):hover {
    border-color: var(--border-subtle);
  }
  .ui-scope .range-buttons {
    background: var(--surface-1);
  }
  .ui-scope .range-buttons .button.primary,
.ui-scope .range-buttons a.button.primary {
    color: var(--text-on-accent);
  }
  .telemetry-graph-shell.telemetry-graph-modern {
    border-color: var(--border-subtle);
  }
  .telemetry-summary-strip {
    background: var(--surface-1);
    border-bottom-color: var(--border-subtle);
  }
  .telemetry-grid-y {
    stroke: var(--border-subtle);
  }
  .telemetry-axis-y,
.telemetry-axis-x {
    fill: var(--text-subtle);
  }
  .telemetry-line.in.modern {
    stroke: var(--accent);
  }
  .telemetry-line.out.modern {
    stroke: var(--border-strong);
  }
  .telemetry-hover-tooltip {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .muted,
body[data-ui-shell="app"] .row-note,
body[data-ui-shell="app"] .ui-help {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .eyebrow {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"].portal-body .portal-brand > span:last-child strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-brand > span:last-child small {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"].portal-body .portal-nav-group > span {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"].portal-body .portal-nav a,
body[data-ui-shell="app"].portal-body .portal-nav-featured a {
    color: var(--text-body);
    border-color: transparent;
    background: transparent;
  }
  body[data-ui-shell="app"].portal-body .portal-nav a .nav-icon,
body[data-ui-shell="app"].portal-body .portal-nav-featured a .nav-icon {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"].portal-body .portal-nav a:hover,
body[data-ui-shell="app"].portal-body .portal-nav-featured a:hover {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-nav a.active .nav-icon,
body[data-ui-shell="app"].portal-body .portal-nav-featured a.active .nav-icon {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-sidebar-status > span {
    color: var(--text-body);
  }
  body[data-ui-shell="app"].portal-body .portal-sidebar-status .status-dot {
    color: var(--success-text);
  }
  body[data-ui-shell="app"].portal-body .portal-sidebar-foot > small {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"].portal-body .portal-topbar,
body[data-ui-shell="app"].portal-body .portal-topbar {
    color: var(--text-strong);
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"].portal-body .portal-topbar-context > strong,
body[data-ui-shell="app"].portal-body .portal-topbar-context > strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-topbar-context > small,
body[data-ui-shell="app"].portal-body .portal-topbar-context > small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"].portal-body .topbar-icon-action,
body[data-ui-shell="app"].portal-body .topbar-command-button,
body[data-ui-shell="app"].portal-body .automation-bell,
body[data-ui-shell="app"].portal-body .topbar-icon-action,
body[data-ui-shell="app"].portal-body .topbar-command-button,
body[data-ui-shell="app"].portal-body .automation-bell {
    background: var(--surface-1);
    color: var(--text-body);
  }
  body[data-ui-shell="app"].portal-body .topbar-icon-action:hover,
body[data-ui-shell="app"].portal-body .topbar-command-button:hover,
body[data-ui-shell="app"].portal-body .automation-bell:hover,
body[data-ui-shell="app"].portal-body .topbar-icon-action:hover,
body[data-ui-shell="app"].portal-body .topbar-command-button:hover,
body[data-ui-shell="app"].portal-body .automation-bell:hover {
    background: var(--surface-3);
    color: var(--accent-text);
  }
  body[data-ui-shell="app"].portal-body .topbar-command-button kbd,
body[data-ui-shell="app"].portal-body .topbar-command-button kbd {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"].portal-body .topbar-global-search input,
body[data-ui-shell="app"].portal-body .topbar-global-search input {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .topbar-global-search input::placeholder {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"].portal-body .topbar-global-search input:focus,
body[data-ui-shell="app"].portal-body .topbar-global-search input:focus {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"].portal-body .portal-admin,
body[data-ui-shell="app"].portal-body .portal-admin {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-admin strong,
body[data-ui-shell="app"].portal-body .portal-admin strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-admin small,
body[data-ui-shell="app"].portal-body .portal-admin small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"].portal-body .portal-admin .avatar,
body[data-ui-shell="app"].portal-body .portal-admin .avatar {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .logout-button,
body[data-ui-shell="app"].portal-body .logout-button {
    background: var(--surface-1);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.page-heading,.ui-page-header) h1,
body[data-ui-shell="app"] .ui-scope :is(.page-heading,.ui-page-header) h2,
body[data-ui-shell="app"] .ui-scope .dashboard-heading h1,
body[data-ui-shell="app"] .ui-scope .dashboard-heading h2 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.page-heading,.ui-page-header) p {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(h3,h4,strong) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.surface,.card,.ui-card,.ui-section,.table-wrap,.table-surface,.table-scroll,.panel) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.section-heading,.panel-heading,.ui-section-header) h2,
body[data-ui-shell="app"] .ui-scope :is(.section-heading,.panel-heading,.ui-section-header) h3 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.section-heading,.panel-heading,.ui-section-header) p {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .ui-action-bar,
body[data-ui-shell="app"] .ui-scope .sticky-actions {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .button,
body[data-ui-shell="app"] .ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
body[data-ui-shell="app"] .ui-scope .icon-button {
    background: linear-gradient(180deg,var(--surface-2),var(--surface-base));
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .button:hover,
body[data-ui-shell="app"] .ui-scope button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
body[data-ui-shell="app"] .ui-scope .icon-button:hover {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :is(.button.primary,button.primary,.primary) {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :is(.button.primary,button.primary,.primary):hover {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :is(.button.danger,button.danger,.danger) {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope .danger.ghost {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .portal-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
body[data-ui-shell="app"] .portal-workspace select,
body[data-ui-shell="app"] .portal-workspace textarea,
body[data-ui-shell="app"] .ui-scope input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
body[data-ui-shell="app"] .ui-scope select,
body[data-ui-shell="app"] .ui-scope textarea {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .portal-workspace input::placeholder,
body[data-ui-shell="app"] .ui-scope input::placeholder,
body[data-ui-shell="app"] .portal-workspace textarea::placeholder {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .portal-workspace input:focus,
body[data-ui-shell="app"] .portal-workspace select:focus,
body[data-ui-shell="app"] .portal-workspace textarea:focus,
body[data-ui-shell="app"] .ui-scope input:focus,
body[data-ui-shell="app"] .ui-scope select:focus,
body[data-ui-shell="app"] .ui-scope textarea:focus {
    border-color: var(--accent);
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .portal-workspace input:disabled,
body[data-ui-shell="app"] .portal-workspace select:disabled,
body[data-ui-shell="app"] .portal-workspace textarea:disabled {
    background: var(--surface-sunken);
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .ui-scope :is(.ui-field>span,.field-label,.form-grid label>span,.billing-form-grid label>span,.manual-line-grid label>span) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .portal-workspace form label:not(.toggle-row):not(.checkbox-line):not(.option-card):not(.port-choice):not(.segmented-control) > span:first-child {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.option-card,.option-panel,.form-section-title,.filter-bar,.interface-facts) {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .ui-scope .form-section-title > span {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.badge.good,.status-pill.active,.status-pill.good) {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.badge.warning,.status-pill.warning) {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.badge.danger-badge,.status-pill.danger,.status-pill.failed) {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.badge.neutral,.status-pill.neutral) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .status-dot.online {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .status-dot.online::before {
    background: var(--success);
  }
  body[data-ui-shell="app"] .ui-scope .notice.subtle {
    background: var(--surface-1);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .notice.success {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.error,
body[data-ui-shell="app"] .ui-scope .notice.danger {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope .data-table-toolbar {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .data-table-search input {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope :is(.table-wrap,.table-surface,.table-scroll) {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope table th {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope table td {
    background: transparent;
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope table a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .data-table-column-menu,
body[data-ui-shell="app"] .ui-scope .action-menu-floating,
body[data-ui-shell="app"] .ui-scope .inventory-action-menu > nav,
body[data-ui-shell="app"] .ui-scope .service-action-menu > nav {
    background: var(--surface-sunken);
    color: var(--text-strong);
    box-shadow: var(--ui-elevated-shadow);
  }
  body[data-ui-shell="app"] .ui-scope :is(.data-table-column-menu,.action-menu-floating,.inventory-action-menu>nav,.service-action-menu>nav) :is(a,label,button):hover {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.metric-card,.ui-stat,.dashboard-kpis article,.compact-metrics>div,.billing-metric,.supplier-status-metric,.automation-attention-card) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.metric-card,.ui-stat,.dashboard-kpis article) :is(span,small) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.metric-card,.ui-stat,.dashboard-kpis article) strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-quick-action {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-quick-action:hover {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-quick-icon,
body[data-ui-shell="app"] .ui-scope .dashboard-kpi-icon,
body[data-ui-shell="app"] .ui-scope .billing-control-icon,
body[data-ui-shell="app"] .ui-scope .panel-heading-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.resource-list article,.customer-activity-event,.ui-activity-row,.attention-list>a,.customer-footprint-location-card,.billing-service-row,.peering-request-group,.sflow-enabled-port) {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.resource-list article,.attention-list>a,.ui-activity-row,.customer-footprint-location-card):hover {
    background: var(--surface-2);
  }
  body[data-ui-shell="app"] .ui-scope .service-inventory-header,
body[data-ui-shell="app"] .ui-scope .service-identity-panel > div,
body[data-ui-shell="app"] .ui-scope .service-chip,
body[data-ui-shell="app"] .ui-scope .device-facts > div,
body[data-ui-shell="app"] .ui-scope .compact-definition div,
body[data-ui-shell="app"] .ui-scope .inventory-panel,
body[data-ui-shell="app"] .ui-scope .port-card,
body[data-ui-shell="app"] .ui-scope .billing-control-card,
body[data-ui-shell="app"] .ui-scope .manual-invoice-line,
body[data-ui-shell="app"] .ui-scope .billing-activation-box,
body[data-ui-shell="app"] .ui-scope .peering-settings-summary,
body[data-ui-shell="app"] .ui-scope .sflow-scope-note {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .service-type.bgp {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .service-type.dia {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .service-type.l2vpn {
    color: var(--data-6);
  }
  body[data-ui-shell="app"] .ui-scope .service-type.ix {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .device-country-heading h3 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .device-country-count {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .device-card {
    background: linear-gradient(150deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope .device-card-head h3 a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .device-fact-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .device-facts dt {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .device-facts dd {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.rack-summary-grid>article,.rack-gallery-shell,.rack-visual-card,.rack-card-header,.rack-management,.rack-resource-columns>section,.rack-mount-disclosure,.dc-rack-inventory,.dc-rack-inventory-head,.dc-integrated-room-body,.dc-integrated-rack,.ipam-pool) {
    background: linear-gradient(150deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.dc-integrated-room,.dc-integrated-rack)[open] > summary {
    background: var(--surface-2);
  }
  body[data-ui-shell="app"] .ui-scope .utilization-row {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .ipam-prefix {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-link-pulse {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-link-pulse:hover {
    background: var(--surface-2);
  }
  body[data-ui-shell="app"] .ui-scope .leaflet-tile-pane {
    filter: var(--map-filter);
  }
  body[data-ui-shell="app"] .ui-scope .leaflet-control,
body[data-ui-shell="app"] .ui-scope .leaflet-popup-content-wrapper,
body[data-ui-shell="app"] .ui-scope .leaflet-popup-tip {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .gauge-track {
    stroke: var(--border);
  }
  body[data-ui-shell="app"] .ui-scope .gauge-hub {
    fill: var(--surface-base);
  }
  body[data-ui-shell="app"] .ui-scope .gauge-scale-label,
body[data-ui-shell="app"] .ui-scope .gauge-threshold-label {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-graph-shell.telemetry-graph-modern {
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .telemetry-summary-strip {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .telemetry-summary-card {
    background: linear-gradient(180deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .telemetry-summary-card > span,
body[data-ui-shell="app"] .telemetry-summary-card > small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-summary-card > strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .telemetry-axis-y,
body[data-ui-shell="app"] .telemetry-axis-x {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-line.in.modern {
    stroke: var(--accent);
    filter: url(#telemetry-line-glow);
  }
  body[data-ui-shell="app"] .telemetry-line.out.modern {
    stroke: var(--border-subtle);
    filter: url(#telemetry-line-glow);
  }
  body[data-ui-shell="app"] .telemetry-p95.in.modern {
    stroke: var(--accent);
  }
  body[data-ui-shell="app"] .telemetry-p95.out.modern {
    stroke: var(--border-subtle);
  }
  body[data-ui-shell="app"] .telemetry-hover-line {
    stroke: var(--border-strong);
  }
  body[data-ui-shell="app"] .telemetry-hover-dot {
    stroke: var(--border-subtle);
  }
  body[data-ui-shell="app"] .telemetry-hover-dot.in {
    fill: var(--accent-text);
  }
  body[data-ui-shell="app"] .telemetry-hover-dot.out {
    fill: var(--data-2);
  }
  body[data-ui-shell="app"] .telemetry-hover-tooltip {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .telemetry-hover-tooltip > strong {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-hover-tooltip em {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-hover-tooltip b {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .traffic-key.in {
    background: var(--accent);
  }
  body[data-ui-shell="app"] .telemetry-legend-row {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-graph-footer {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-graph-footer strong {
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .range-buttons {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .range-buttons .button.primary,
body[data-ui-shell="app"] .ui-scope .range-buttons a.button.primary {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope .bandwidth-chart {
    background: linear-gradient(180deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope .chart-y,
body[data-ui-shell="app"] .ui-scope .chart-legend {
    color: var(--text-muted);
  }
  body.login-body[data-ui-shell="app"] {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero-dashboard {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero-dashboard :is(h1,h2,h3,strong,b) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero-dashboard .eyebrow {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-dashboard-title p {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action {
    background: var(--surface-1);
    box-shadow: none;
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action:hover {
    background: var(--surface-2);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action .dashboard-quick-icon {
    border: 0;
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action .dashboard-quick-icon {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action small {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero-kpi-card {
    border: 1px solid var(--hero-line);
    background: var(--hero-panel);
  }
  body[data-ui-shell="app"] .hero-kpi-card::before {
    background: linear-gradient(180deg,transparent,var(--hero-blue),transparent);
  }
  body[data-ui-shell="app"] .hero-kpi-card .dashboard-kpi-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-kpi-copy>span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-kpi-copy>small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-kpi-ring::after {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero-kpi-ring span {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-live-pill {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .hero-live-pill i {
    background: var(--hero-green);
  }
  body[data-ui-shell="app"] .hero-panel {
    border: 1px solid var(--hero-line);
    background: var(--hero-panel);
  }
  body[data-ui-shell="app"] .hero-panel-head>a,body[data-ui-shell="app"] .hero-panel-head>small {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-panel-head>a:hover {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-period-pill {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-traffic-now i {
    background: var(--hero-blue);
  }
  body[data-ui-shell="app"] .hero-traffic-now .out i {
    background: var(--hero-cyan);
  }
  body[data-ui-shell="app"] .hero-traffic-now small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-area.in {
    fill: url(#hero-in-fill);
  }
  body[data-ui-shell="app"] .hero-chart-area.out {
    fill: url(#hero-out-fill);
  }
  body[data-ui-shell="app"] .hero-chart-line.in {
    stroke: var(--hero-blue);
  }
  body[data-ui-shell="app"] .hero-chart-line.out {
    stroke: var(--hero-cyan);
  }
  body[data-ui-shell="app"] .hero-chart-hover line {
    stroke: var(--accent);
  }
  body[data-ui-shell="app"] .hero-chart-hover circle {
    stroke: var(--border-subtle);
  }
  body[data-ui-shell="app"] .hero-chart-hover circle.in {
    fill: var(--hero-blue);
  }
  body[data-ui-shell="app"] .hero-chart-hover circle.out {
    fill: var(--hero-cyan);
  }
  body[data-ui-shell="app"] .hero-chart-tooltip {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .hero-chart-tooltip>strong {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-tooltip>span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-tooltip>span i {
    background: var(--hero-blue);
  }
  body[data-ui-shell="app"] .hero-chart-tooltip>span.out i {
    background: var(--hero-cyan);
  }
  body[data-ui-shell="app"] .hero-chart-empty {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-foot span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-foot>a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-donut::after {
    background: radial-gradient(circle at 45% 35%,var(--surface-2),var(--surface-base) 72%);
  }
  body[data-ui-shell="app"] .hero-donut span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-mix-legend>div {
    background: var(--surface-inset);
  }
  body[data-ui-shell="app"] .hero-mix-dot {
    background: var(--hero-blue);
  }
  body[data-ui-shell="app"] .hero-mix-dot.peering {
    background: var(--hero-cyan);
  }
  body[data-ui-shell="app"] .hero-mix-dot.pni {
    background: var(--hero-violet);
  }
  body[data-ui-shell="app"] .hero-mix-legend small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-mix-legend b {
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .hero-panel-link {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-upstream-row {
    color: inherit;
  }
  body[data-ui-shell="app"] .hero-provider-mark {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-provider-mark.peering {
    color: var(--data-2);
  }
  body[data-ui-shell="app"] .hero-provider-mark.pni {
    color: var(--data-6);
  }
  body[data-ui-shell="app"] .hero-provider-copy small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-provider-rate small {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .hero-upstream-row>b {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-visual-empty {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-health-state {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .hero-health-state i {
    background: var(--hero-green);
  }
  body[data-ui-shell="app"] .hero-health-state.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .hero-health-state.warning i {
    background: var(--hero-amber);
  }
  body[data-ui-shell="app"] .hero-health-orbit {
    background: conic-gradient(var(--success) calc(var(--health)*1%),var(--surface-sunken) 0);
    box-shadow: 0 0 35px var(--success-soft);
  }
  body[data-ui-shell="app"] .hero-health-orbit::before {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero-health-orbit span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-health-list>a {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-health-list>a>span .ui-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-map-stage {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero-map-stage .network-map {
    border: 0;
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero-map-panel .leaflet-tile-pane {
    filter: var(--map-filter);
  }
  body[data-ui-shell="app"] .hero-map-panel .leaflet-map-pane {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero-map-panel .leaflet-control-zoom a {
    background: var(--surface-sunken);
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-map-panel .leaflet-control-attribution {
    background: var(--surface-sunken);
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .hero-map-panel .leaflet-control-attribution a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-map-overlay {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .hero-map-overlay small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-map-panel .dashboard-link-pulse {
    border: 0;
    background: transparent;
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-map-panel .dashboard-link-pulse small {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .hero-dashboard-attention {
    border: 1px solid var(--hero-line);
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .hero-attention-head>span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-attention-grid>a {
    color: inherit;
  }
  body[data-ui-shell="app"] .hero-attention-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-attention-grid small {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .hero-attention-grid>a>b {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero42-title-block h1 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero42-title-block p {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero42-panel-head h2 {
    color: var(--text-strong);
  }
  .hero42-panel-head h2 small {
    color: var(--text-muted);
  }
  .hero42-panel-head small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero42-inline-status {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero42-kpi-row>article {
    border: 1px solid var(--h42-line);
  }
  .hero42-kpi-icon.good {
    color: var(--success-text);
  }
  .hero42-kpi-icon.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .hero42-kpi-row small,body[data-ui-shell="app"] .hero42-kpi-row span {
    color: var(--text-muted);
  }
  .hero42-kpi-row strong {
    color: var(--text-strong);
  }
  .hero42-info-list dt .ui-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero42-device-traffic .telemetry-graph-shell {
    border: 0;
    box-shadow: none;
  }
  .hero42-service-type-card.dia:after {
    background: var(--success);
  }
  .hero42-service-type-card.ix:after {
    background: var(--warning);
  }
  .hero42-service-type-icon {
    color: var(--accent-text);
  }
  .hero42-service-type-card small {
    color: var(--text-muted);
  }
  .hero42-service-type-card>b {
    color: var(--text-strong);
  }
  .hero42-filter-bar :is(input,select) {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  .hero42-search-field .ui-icon {
    color: var(--text-subtle);
  }
  .hero42-data-table thead th {
    background: var(--surface-1);
    color: var(--text-muted);
  }
  .hero42-data-table tbody td {
    color: var(--text-body);
  }
  .hero42-table-primary {
    color: inherit;
  }
  .hero42-table-primary strong {
    color: var(--text-strong);
  }
  .hero42-table-primary small {
    color: var(--text-subtle);
  }
  .hero42-service-dot {
    background: var(--accent);
  }
  .hero42-service-dot.dia {
    background: var(--success);
  }
  .hero42-service-dot.ix {
    background: var(--warning);
  }
  .hero42-service-detail .service-tabs {
    background: var(--surface-sunken);
  }
  .hero42-service-detail .service-tabs a {
    color: var(--text-muted);
  }
  .hero42-service-detail .service-tabs a.active {
    color: var(--accent-text);
  }
  .hero42-service-traffic-panel .telemetry-graph-shell {
    border: 0;
    box-shadow: none;
  }
  .hero42-service-traffic-panel .telemetry-summary-strip {
    background: var(--surface-sunken);
  }
  .hero42-service-detail :is(.service-map-panel,.service-identity-panel,.service-readiness-panel,.child-panel,.contract-date-admin-panel,.service-cancellation-panel,.service-support-panel,.service-activity-panel) {
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  .hero42-pipeline-rail>span b {
    color: var(--accent-text);
  }
  .hero42-pipeline-rail>span small {
    color: var(--text-subtle);
  }
  .hero42-order-icon {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero42-order-detail>.page-heading {
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  .hero43-title-block h1 {
    color: var(--text-strong);
  }
  .hero43-title-block p {
    color: var(--text-muted);
  }
  .hero43-page .eyebrow {
    color: var(--accent-text);
  }
  .hero43-panel-head h2 {
    color: var(--text-strong);
  }
  .hero43-panel-head small {
    color: var(--text-muted);
  }
  .hero43-kpi-grid>article {
    border: 1px solid var(--h43-line);
  }
  .hero43-kpi-icon.good {
    color: var(--success-text);
  }
  .hero43-kpi-icon.warning {
    color: var(--warning-text);
  }
  .hero43-kpi-grid small,.hero43-kpi-grid span {
    color: var(--text-muted);
  }
  .hero43-kpi-grid strong {
    color: var(--text-strong);
  }
  .hero43-table th {
    background: var(--surface-1);
    color: var(--text-muted);
  }
  .hero43-table td {
    color: var(--text-body);
  }
  .hero43-table td strong,.hero43-table td a {
    color: var(--text-strong);
  }
  .hero43-table td small {
    color: var(--text-muted);
  }
  .hero43-proposal-path .ui-icon {
    color: var(--accent-text);
  }
  .hero43-chevron {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] :is(.country-flag-vector,.hero42-dc-flag,.hero42-device-flag,.rack-card-country,.service-location-country-flag,.customer-list-country-flag,.country-select-flat-flag) {
    background: transparent;
  }
  body[data-ui-shell="app"] :is(.country-flag-vector,.hero42-dc-flag,.hero42-device-flag,.rack-card-country,.service-location-country-flag,.customer-list-country-flag,.country-select-flat-flag)>.country-flag-svg,
body[data-ui-shell="app"] :is(.country-flag-vector,.hero42-dc-flag,.hero42-device-flag,.rack-card-country,.service-location-country-flag,.customer-list-country-flag,.country-select-flat-flag) img.country-flag-svg {
    border: 0;
    box-shadow: none;
    filter: none;
  }
  body[data-ui-shell="app"] .map-inline-flag {
    filter: none;
  }
  body[data-ui-shell="app"] .hero44-title-block h1 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero44-title-block p {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero44-panel-head h2 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero44-panel-head small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero44-kpi-grid>article {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .hero44-kpi-icon.cyan {
    color: var(--data-2);
  }
  body[data-ui-shell="app"] .hero44-kpi-icon.violet {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero44-kpi-icon.good {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .hero44-kpi-icon.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .hero44-kpi-icon.danger {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .hero44-kpi-grid small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero44-kpi-grid strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .hero44-kpi-grid span:not(.hero44-kpi-icon) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero44-filterbar label>span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero44-filterbar :is(input,select) {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .hero44-filterbar>span {
    color: var(--text-muted);
  }
  .hero44-provider-orb {
    color: var(--accent-text);
  }
  .hero44-technical-disclosure>summary strong {
    color: var(--text-strong);
  }
  .hero44-technical-disclosure>summary small {
    color: var(--text-muted);
  }
  .hero44-technical-disclosure>summary>span:last-child {
    color: var(--accent-text);
  }
  .hero44-empty-visual>span .ui-icon,.hero44-empty-visual>.ui-icon {
    color: var(--accent-text);
  }
  .hero44-empty-visual strong {
    color: var(--text-body);
  }
  .hero44-empty-visual small {
    color: var(--text-muted);
  }
  .hero44-tech-list small {
    color: var(--text-subtle);
  }
  .hero44-tech-list strong {
    color: var(--text-strong);
  }
  .hero44-tech-list b {
    color: var(--text-subtle);
  }
  .hero44-outreach-node.danger {
    background: var(--danger);
  }
  .hero44-order-icon {
    color: var(--accent-text);
  }
  .hero44-email-visual.ready .hero44-mail-orbit {
    color: var(--success-text);
  }
  body[data-ui-shell="app"][data-portal-mode="customer"] .portal-brand>span:last-child small {
    color: var(--accent-text);
  }
  body[data-portal-mode="customer"] .hero44-customer-workflow :is(.hero42-panel,.surface) {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
  }
  body[data-portal-mode="customer"] .hero44-customer-workflow .hero42-order-progress,body[data-portal-mode="customer"] .hero44-customer-workflow .hero42-pipeline-rail {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
  }
  body[data-portal-mode="customer"] .hero44-page :is(.ui-section,.surface,.account-card,.account-aside) {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
  }
  body[data-portal-mode="customer"] .hero44-page .page-heading h2 {
    color: var(--text-strong);
  }
  body[data-portal-mode="customer"] .hero44-page .page-heading p {
    color: var(--text-muted);
  }
  body[data-portal-mode="customer"] .hero44-page :is(.ui-section-header,.panel-heading,.account-section-heading) h3 {
    color: var(--text-strong);
  }
  body[data-portal-mode="customer"] .hero44-page :is(.profile-info-grid>div,.user-summary-card,.support-toolbar) {
    background: var(--surface-inset);
  }
  body[data-portal-mode="customer"] .hero44-page :is(.data-table,.user-table,.customer-invoice-table) thead th {
    color: var(--text-subtle);
    background: var(--surface-sunken);
  }
  body[data-portal-mode="customer"] .hero44-page :is(input,select,textarea) {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] :is(.country-flag-vector,.customer-list-country-flag img,.customer-account-country img,.customer-profile-country-display img,.datacenter-flag img,.hero42-dc-flag,.hero42-device-flag) {
    filter: none;
  }
  body[data-ui-shell="app"].portal-body .portal-brand>span:last-child small {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"].portal-body .portal-nav-group>span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"].portal-body .portal-nav a.active,
body[data-ui-shell="app"].portal-body .portal-nav-featured a.active {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .portal-topbar,
body[data-ui-shell="app"].portal-body .portal-topbar {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(h1,h2,h3,h4,h5,h6,strong,b) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(p,small,.muted,.row-note,.ui-help,.field-note,.help,.description,.meta,.subtle) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .eyebrow {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .page-heading h2,
body[data-ui-shell="app"] .ui-scope .ui-page-header h1,
body[data-ui-shell="app"] .ui-scope .ui-page-header h2 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope a:not(.button):not(.portal-nav a) {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope code,
body[data-ui-shell="app"] .ui-scope pre {
    color: var(--text-body);
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .ui-scope :is(
  .surface,.card,.ui-card,.ui-section,.panel,.metric-card,.ui-stat,
  .table-wrap,.table-surface,.table-scroll,.inventory-panel,.filter-bar,
  .option-panel,.subform,.service-panel,.customer-card,.product-card,
  .port-card,.prefix-input,.proposal-chip,.scope-route-map,.policy-direction-card,
  .automation-attention-card,.service-type-choice,.billing-model-choice,.traffic-share-row,
  .sflow-enabled-port,.sflow-uplink-card,.catalog-offering-card,.admin-catalog-card,
  .catalog-source-card,.addressing-card,.datacenter-card,.interface-order-panel,
  .admin-service-notes,.interface-option-card,.order-detail-section,.ticket-message,
  .ticket-composer,.attention-summary-row span,.rack-visual-card,.rack-resource-columns>section,
  .rack-mount-disclosure,.dc-rack-inventory,.dc-integrated-rack,.security-status-list,
  .mfa-action-card,.mfa-setup-confirm,.invoice-import-card,.invoice-import-transactions,
  .readiness-step,.customer-service-footprint-list,.service-map-locations,
  .billing-control-card,.billing-service-commercial,.billing-service-enabled,
  .billing-activation-box,.billing-service-row,.manual-invoice-line,
  .supplier-disclosure,.contract-lifecycle-grid>div,.contract-commercial-summary,
  .contract-edit-disclosure,.contract-drop-upload,.attachment-card,.analysis-meta>span,
  .detected-review-form,.supplier-status-grid,.ddos-ai-evidence-card,.ddos-profile-kpi,
  .ddos-profile-card,.peering-request-group,.peering-request-groups-more,
  .peering-request-agreement-row,.maintenance-check,.maintenance-recipient-row,
  .email-readiness-item,.update-version-grid,.update-dropzone,.update-failed-toggle,
  .customer-profile-panel .profile-info-grid>div,.catalog-commercial-cards>div,
  .sof-contact-grid article,.sof-service-card,.customer-order-wizard,.endpoint-preview,
  .monitor-direction,.monitor-member-list>div,.monitor-wall-tile,.peering-local-grid article,
  .ddos-status-grid article,.ddos-empty-state,.supplier-heading-stats>div,
  .dc-reference-list article,.dc-stat-grid article,.dc-stat-grid a,.automation-step
) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope :is(.section-heading,.panel-heading,.ui-section-header) :is(p,small) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.sticky-actions,.ui-action-bar,.invite-submit-bar,.billing-control-layout,.billing-form-grid,.billing-disclosure-body,.rack-gallery-grid,.rack-management-body,.rack-visual-mount-form) {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .portal-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
body[data-ui-shell="app"] .portal-workspace select,
body[data-ui-shell="app"] .portal-workspace textarea,
body[data-ui-shell="app"] .ui-scope :is(.standalone-field input,.standalone-field select,.standalone-field textarea,.bgp-change-fields input,.peering-agreement-form input,.peering-agreement-form select,.peering-email-form input,.peering-email-form select,.peering-email-form textarea,.ticket-composer textarea,.ticket-control-form select,.map-filter-row input,.map-filter-row select,.endpoint-row select,.proposal-fields select,.proposal-fields input,.inline-add-form select) {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .portal-workspace :is(input,textarea)::placeholder {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .portal-workspace :is(input,select,textarea):focus {
    border-color: var(--accent);
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .portal-workspace :is(input,select,textarea):disabled {
    background: var(--surface-sunken);
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .ui-scope :is(.ui-field>span,.field-label,.filter-bar label>span,.billing-form-grid label>span,.manual-line-grid label>span,.standalone-field>span) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.option-card,.toggle-row,.segmented-control label,.checkbox-chip,.segmented-choice span,.route-scope-choice>span,.invite-role-card>span,.port-choice) {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .button,
body[data-ui-shell="app"] .portal-workspace button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
body[data-ui-shell="app"] .ui-scope .icon-button {
    background: linear-gradient(145deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .button:hover,
body[data-ui-shell="app"] .portal-workspace button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
body[data-ui-shell="app"] .ui-scope .icon-button:hover {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :is(.primary,.button.primary,button.primary) {
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] .ui-scope :is(.danger,.button.danger,button.danger) {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope :is(.table-wrap,.table-surface,.table-scroll) {
    background: linear-gradient(160deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope table {
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope table th {
    background: var(--surface-1);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope table td {
    background: transparent;
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope :is(.data-table-column-menu,.action-menu-floating,.inventory-action-menu>nav,.service-action-menu>nav,.data-table-columns,.global-search-result,.command-palette) {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .is-enhanced-table.has-sticky-actions :is(th,td):last-child {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .ui-scope .data-table-search input {
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .ui-scope .notice.good {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .notice.error {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope .badge.good {
    color: var(--success-text);
  }
  body[data-ui-shell="app"] .ui-scope .badge.warning {
    color: var(--warning-text);
  }
  body[data-ui-shell="app"] .ui-scope .badge.danger {
    color: var(--danger-text);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-panel,
body[data-ui-shell="app"] .ui-scope .customer-sflow-sankey {
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-heading {
    background: linear-gradient(180deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-heading h3 {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-heading small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-heading-meta span {
    background: var(--surface-1);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-heading-meta strong {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-summary {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-summary span {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-summary strong {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-side-label {
    fill: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-data-through {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-arrow-label {
    fill: var(--text-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-ribbon {
    stroke: var(--border-subtle);
    filter: none;
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-ribbon:hover,
body[data-ui-shell="app"] .ui-scope .sflow-sankey-ribbon:focus {
    filter: brightness(1.08);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-shell {
    fill: var(--surface-base);
    stroke: var(--accent);
    filter: none;
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-card {
    fill: var(--surface-base);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-eyebrow {
    fill: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-asn {
    fill: var(--surface-base);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-name {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-direction {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-center-rate {
    fill: var(--surface-base);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-node-card {
    fill: var(--surface-base);
    filter: none;
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-network-node:hover .sflow-sankey-node-card,
body[data-ui-shell="app"] .ui-scope .sflow-sankey-network-node:focus .sflow-sankey-node-card {
    stroke: var(--accent);
    filter: brightness(1.08);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-node-title {
    fill: var(--surface-base);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-node-name {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-node-upstream {
    fill: var(--text-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-tooltip {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-legend {
    background: var(--surface-sunken);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-legend-item {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .sflow-sankey-legend-note {
    color: var(--text-subtle);
  }
  body[data-ui-shell="app"] .ui-scope .device-port-tooltip,
body[data-ui-shell="app"] .ui-scope .floating-port-tooltip {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .device-port-tooltip :is(strong,dd) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .device-port-tooltip :is(small,dt) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .telemetry-graph-shell.telemetry-graph-modern,
body[data-ui-shell="app"] .ui-scope .telemetry-graph-shell {
    background: linear-gradient(155deg,var(--surface-2),var(--surface-base));
  }
  body[data-ui-shell="app"] .ui-scope :is(.telemetry-summary-card,.telemetry-legend-row,.telemetry-graph-footer) {
    background: var(--surface-sunken);
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope .telemetry-graph-tooltip {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .ui-scope .leaflet-tile-pane {
    filter: var(--map-filter);
  }
  body[data-ui-shell="app"] .ui-scope :is(.leaflet-control,.leaflet-control a,.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-control-attribution) {
    background: var(--surface-1);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .ui-scope .leaflet-control-attribution a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] :is(.country-flag-svg,.country-flag-img,.country-flag-flat,.country-flag-vector img,.hero42-dc-flag img,.hero42-device-flag img,.hero44-customer-flag img,.hero44-flat-flag img,.rack-card-country img,.service-location-country-flag img,.customer-list-country-flag img,.customer-account-country img,.customer-profile-country-display img,.datacenter-flag img,.datacenter-table-flag img,.country-select-flat-flag img,.map-inline-flag img) {
    filter: none;
  }
  body[data-ui-shell="app"] .ui-scope :is(
  .metric,.country-group>summary,.input-prefix,.peering-refresh-meta,
  .billing-settings-nav a,.billing-template-help code,.billing-disclosure-state i,
  .attachment-head,.peering-request-document,.peering-request-document .peering-request-body,
  .proposal-fields,.endpoint-row,.demarcation-preview,.prefix-preview,.address-preview,
  .customer-service-filter,.profitability-customer-metrics article,.account-form-grid,
  .invite-fields-grid,.peering-agreement-options-grid select,.peering-agreement-options-grid input,
  .readiness-step,.readiness-panel-v2,.service-readiness-panel,.service-map-location,
  .customer-footprint-location-card,.billing-service-disclosure,.detected-review-form,
  .maintenance-check,.maintenance-recipient-row,.sflow-scope-note,.peering-settings-summary
) {
    background: linear-gradient(150deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .floating-port-tooltip {
    background: var(--surface-sunken);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .floating-port-tooltip::after {
    border-right-color: var(--border-strong);
    border-bottom-color: var(--border-strong);
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .floating-port-tooltip :is(strong,dd) {
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .floating-port-tooltip :is(small,dt) {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .floating-port-tooltip em {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .ui-scope .device-port-tooltip::after {
    border-right-color: var(--border-strong);
    border-bottom-color: var(--border-strong);
    background: var(--surface-1);
  }
  body[data-ui-shell="app"] .ui-scope .dashboard-kpis article,
body[data-ui-shell="app"] .ui-scope .map-detail-panel,
body[data-ui-shell="app"] .ui-scope .backbone-line span,
body[data-ui-shell="app"][data-portal-mode="customer"] .address-suggestion-list,
body[data-ui-shell="app"][data-portal-mode="customer"] .address-suggestion {
    background: linear-gradient(150deg,var(--surface-2),var(--surface-base));
    color: var(--text-strong);
  }
  body[data-ui-shell="app"].portal-body .topbar-global-search input,
body[data-ui-shell="app"] .ui-scope .sflow-filter-form select,
body[data-ui-shell="app"] .ui-scope .form-grid :is(input,select,textarea),
body.login-body[data-ui-shell="app"] .login-form input {
    background: var(--surface-1);
    color: var(--text-strong);
  }
  .theme-toggle[data-theme-preference="auto"]::after {
    background: var(--surface-1);
    color: var(--accent-text);
  }
  .theme-picker-option.is-selected {
    border-color: var(--accent-ring);
    background: var(--accent-soft);
  }
  .theme-light .sflow-sankey-center-eyebrow {
    fill: var(--accent-text);
  }
  .theme-light .sflow-sankey-center-direction {
    fill: var(--text-muted);
  }
  .theme-light .sflow-sankey-center-rate {
    fill: var(--accent-text);
  }
  .theme-light .sflow-sankey-node-name {
    fill: var(--text-muted);
  }
  .theme-light .sflow-sankey-node-upstream {
    fill: var(--text-muted);
  }
  .theme-light .sflow-sankey-legend-item {
    color: var(--text-subtle);
  }
  .theme-light .sflow-sankey-legend-note {
    color: var(--text-muted);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar {
    background: var(--fx-rail-bg);
    box-shadow: var(--fx-rail-shadow);
    color: var(--fx-rail-text);
  }
  html[data-ui-theme] body.portal-body .portal-brand,
html[data-ui-theme] body.portal-body .portal-brand:hover {
    color: var(--fx-rail-text-strong);
  }
  html[data-ui-theme] body.portal-body .portal-brand > span:last-child strong {
    color: var(--fx-rail-text-strong);
  }
  html[data-ui-theme] body.portal-body .portal-brand > span:last-child small {
    color: var(--fx-rail-brand-accent);
  }
  html[data-ui-theme] body.portal-body .portal-nav-group > span {
    color: var(--fx-rail-text-muted);
  }
  html[data-ui-theme] body.portal-body .portal-nav a,
html[data-ui-theme] body.portal-body .portal-nav-featured a {
    color: var(--fx-rail-text);
  }
  html[data-ui-theme] body.portal-body .portal-nav a .nav-icon,
html[data-ui-theme] body.portal-body .portal-nav-featured a .nav-icon {
    background: var(--fx-rail-icon-bg);
    color: var(--fx-rail-text);
  }
  html[data-ui-theme] body.portal-body .portal-nav a:hover,
html[data-ui-theme] body.portal-body .portal-nav-featured a:hover {
    background: var(--fx-rail-hover-bg);
    color: var(--fx-rail-hover-text);
  }
  html[data-ui-theme] body.portal-body .portal-nav a:hover .nav-icon,
html[data-ui-theme] body.portal-body .portal-nav-featured a:hover .nav-icon {
    background: var(--fx-rail-hover-bg);
    color: var(--fx-rail-hover-text);
  }
  html[data-ui-theme] body.portal-body .portal-nav a.active,
html[data-ui-theme] body.portal-body .portal-nav-featured a.active {
    color: var(--fx-rail-text-strong);
    border-color: var(--fx-rail-active-border);
    background: var(--fx-rail-active-bg);
    box-shadow: var(--fx-rail-active-shadow);
  }
  html[data-ui-theme] body.portal-body .portal-nav a.active .nav-icon,
html[data-ui-theme] body.portal-body .portal-nav-featured a.active .nav-icon {
    color: var(--fx-rail-text-strong);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar-foot,
html[data-ui-theme] body.portal-body .portal-sidebar-status {
    color: var(--fx-rail-text-muted);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar-foot small {
    color: var(--fx-rail-text-muted);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar-status > span {
    color: var(--fx-rail-text-muted);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar-status strong {
    color: var(--fx-rail-text);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar .status-dot.online {
    color: var(--success-text);
  }
  html[data-ui-theme] .ui-scope :is(.primary,.primary-action,.button.primary,button.primary) :is(small,span,strong,b,.ui-icon) {
    color: var(--text-on-accent);
  }
  body[data-ui-shell="app"] :is(.country-flag-svg,.country-flag-img,.country-flag-flat,
  .country-flag-vector img,.hero42-dc-flag img,.hero42-device-flag img,.hero44-customer-flag img,.hero44-flat-flag img,
  .rack-card-country img,.service-location-country-flag img,.customer-list-country-flag img,.customer-account-country img,
  .customer-profile-country-display img,.datacenter-flag img,.datacenter-table-flag img,.country-select-flat-flag img,.map-inline-flag img) {
    border: 0;
    box-shadow: none;
    filter: none;
  }
  .dc-kpis article {
    border: 1px solid var(--border);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
  }
  .dc-kpis small {
    color: var(--text-muted);
  }
  .dc-kpis span {
    color: var(--text-subtle);
  }
  .dc-tab {
    border: 1px solid transparent;
    color: var(--text-muted);
  }
  .dc-tab:hover {
    background: var(--surface-hover);
    color: var(--text-body);
  }
  .dc-tab.is-active {
    border-color: var(--border);
    background: var(--surface-1);
    color: var(--text-strong);
    box-shadow: inset 0 2px 0 var(--accent);
  }
  .dc-tab-count {
    background: var(--surface-inset);
    color: var(--text-subtle);
  }
  .dc-tab.is-active .dc-tab-count {
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .dc-facts > div {
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .dc-facts small {
    color: var(--text-muted);
  }
  .dc-map .leaflet-tile-pane {
    filter: var(--map-filter);
  }
  .dc-room-usage article, .dc-list-row {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: inherit;
  }
  a.dc-list-row:hover, .dc-room-usage article:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
  }
  .dc-list-row small, .dc-room-usage small {
    color: var(--text-muted);
  }
  .dc-health > div {
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .dc-room-chip {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
  }
  .dc-room-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text-body);
  }
  .dc-room-chip.is-active {
    border-color: var(--accent-ring);
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .dc-room-chip span {
    background: var(--surface-inset);
  }
  .dc-gallery figure {
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .dc-gallery figcaption small {
    color: var(--text-muted);
  }
  .dc-media-item {
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
}
/* END GENERATED TOKEN OWNERSHIP MIGRATION */


/* v10.51.6 — shared hero panel header appearance ownership. */
@layer components {
  body[data-ui-shell="app"] .ui-scope .hero42-panel-head {
    background: var(--surface-header);
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* BEGIN GENERATED TOKEN OWNERSHIP MIGRATION V10.51.6 */
@layer components {
  .form-section-title {
    border-bottom: 1px solid var(--border);
  }
  .portal-sidebar {
    border-right: 1px solid var(--border);
  }
  .portal-brand {
    border-bottom: 1px solid var(--border);
  }
  .portal-sidebar-foot {
    border-top: 1px solid var(--border);
  }
  .portal-topbar {
    border-bottom: 1px solid var(--border);
  }
  .dashboard-table-panel > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .wizard-section {
    border-bottom: 1px solid var(--border);
  }
  .wizard-step {
    border-right: 1px solid var(--border);
  }
  .wizard-submit-bar {
    border-top: 1px solid var(--border-strong);
  }
  .inbound-heading {
    border-top: 1px solid var(--border);
  }
  .compact-details[open]>summary {
    border-bottom: 1px solid var(--border);
  }
  .history-list article {
    border-bottom: 1px solid var(--border);
  }
  .history-list article:last-child {
    border-bottom: 0;
  }
  .compact-list-row {
    border-top: 1px solid var(--border);
  }
  .compact-list-row:first-child {
    border-top: 0;
  }
  .compact-notice {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .service-create-wizard .wizard-section:last-of-type {
    border-bottom: 0;
  }
  .upstream-overview-share>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .revenue-share-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .sflow-flow-panel>.panel-heading,.sflow-enabled-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .form-section-title {
    border-top: 1px solid var(--border);
  }
  .signed-summary img {
    border-top: 1px solid var(--border);
  }
  .danger-zone {
    border-top: 1px solid var(--border);
  }
  .settings-section .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  @media (max-width:1350px) {
    .customer-profile-panel .profile-info-grid>div:nth-child(4n) {
      border-right: 0;
    }
  }
  @media (max-width:1350px) {
    .customer-profile-panel .profile-info-grid>div:nth-child(4n) {
      border-right: 1px solid var(--border);
    }
  }
  .catalog-card-commercial {
    border-top: 1px solid var(--border);
  }
  .addressing-card-head {
    border-bottom: 1px solid var(--border);
  }
  .addressing-card dl>div {
    border-bottom: 1px solid var(--border);
  }
  .addressing-card dl>div:last-child {
    border-bottom: 0;
  }
  .subsection-heading {
    border-bottom: 1px solid var(--border);
  }
  .bgp-session-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  @media (max-width:700px) {
    .bgp-identity-grid article {
      border-right: 1px solid var(--border);
    }
  }
  @media (max-width:700px) {
    .bgp-identity-grid article:last-child {
      border-right: 0;
    }
  }
  .routing-policy-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .routing-policy-card+ .routing-policy-card {
    border-left: 1px solid var(--border);
  }
  .change-request-banner {
    border-top: 1px solid var(--border);
  }
  @media (max-width:1100px) {
    .bgp-identity-grid article:nth-child(2) {
      border-right: 0;
    }
  }
  @media (max-width:1100px) {
    .bgp-identity-grid article:nth-child(-n/**/+2) {
      border-bottom: 1px solid var(--border);
    }
  }
  @media (max-width:700px) {
    .bgp-identity-grid article {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }
  }
  @media (max-width:700px) {
    .bgp-identity-grid article:last-child {
      border-bottom: 0;
    }
  }
  @media (max-width:700px) {
    .routing-policy-card+.routing-policy-card {
      border-left: 0;
      border-top: 1px solid var(--border);
    }
  }
  .profitability-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .profitability-metrics .metric-card {
    border-top: 0;
    border-left: 0;
  }
  .ticket-message.customer-message {
    border-left: 4px solid var(--data-1);
  }
  .ticket-message.aristo-message {
    border-left: 4px solid var(--accent);
  }
  .ticket-message.internal-message {
    border-left: 4px solid var(--warning);
  }
  .ticket-reply {
    border-top: 1px solid var(--line,var(--border));
  }
  .ticket-facts div {
    border-bottom: 1px solid var(--line,var(--border));
  }
  .ticket-message.customer-message {
    border-left: 4px solid var(--data-1);
  }
  .ticket-message.aristo-message {
    border-left: 4px solid var(--accent);
  }
  .ticket-message.internal-message {
    border-left: 4px solid var(--warning);
  }
  .ticket-composer {
    border-top: 1px solid var(--border);
  }
  .ticket-admin-sidebar>.ticket-section-heading,.customer-ticket-sidebar>.ticket-section-heading {
    border-bottom: 1px solid var(--border);
  }
  .ticket-facts div {
    border-bottom: 1px solid var(--border);
  }
  .ticket-facts div:last-child {
    border-bottom: 0;
  }
  .ticket-control-form {
    border-top: 1px solid var(--border);
  }
  .ticket-delete-zone {
    border-top: 1px solid var(--danger);
  }
  .search-result-row {
    border-top: 1px solid var(--border);
  }
  .search-result-row:first-child {
    border-top: 0;
  }
  .portal-topbar {
    border-bottom: 1px solid var(--border);
  }
  .portal-sidebar {
    border-right: 1px solid var(--border);
  }
  .account-section-heading {
    border-bottom: 1px solid var(--border);
  }
  .service-activity-timeline {
    border-left: 2px solid var(--border);
  }
  .sflow-sankey-heading {
    border-bottom: 1px solid var(--border);
  }
  .sflow-sankey-summary {
    border-bottom: 1px solid var(--border);
  }
  .sflow-sankey-summary>div:nth-child(2) {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  .sflow-sankey-legend {
    border-top: 1px solid var(--border);
  }
  .detail-list>div {
    border-top: 1px solid var(--border);
  }
  .peering-proposals-surface>.panel-heading,.peering-exchanges-surface>.panel-heading,.peering-list-surface>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .billing-ledger-panel>.section-heading {
    border-bottom: 1px solid var(--border);
  }
  .telemetry-graph-footer {
    border-top: 1px solid var(--border);
  }
  .supplier-status-panel>.panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .maintenance-scope-card > .panel-heading,
.maintenance-window-card > .panel-heading,
.maintenance-message-card > .panel-heading,
.maintenance-audience-card > .panel-heading,
.maintenance-content-audit > .panel-heading,
.maintenance-recipient-audit > .panel-heading {
    border-bottom: 1px solid var(--line);
  }
  .security-status-row {
    border-bottom: 1px solid var(--border,var(--border));
  }
  .security-status-row:last-child {
    border-bottom: 0;
  }
  .ui-section > .ui-section-header,
.ui-section > .section-heading {
    border-bottom: 1px solid var(--border);
  }
  .ui-action-bar {
    border-top: 1px solid var(--border);
  }
  .billing-control-panel > .section-heading {
    border-bottom: 1px solid var(--border);
  }
  .email-delivery-panel > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .portal-nav-group > span::after {
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }
  .command-palette {
    border: 1px solid var(--border);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
  }
  .command-palette > header {
    border-bottom: 1px solid var(--border);
  }
  .command-palette > header input {
    border: 0;
    box-shadow: none;
  }
  .command-palette > header kbd {
    border-color: var(--border-subtle);
    background: var(--surface-1);
    color: var(--text-subtle);
  }
  .command-palette-caption {
    color: var(--text-muted);
  }
  .command-palette-caption strong {
    color: var(--text-faint);
  }
  .dashboard-network-pulse > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .data-table-toolbar {
    border-bottom: 0;
  }
  .data-table-reset {
    border-top: 1px solid var(--border-subtle);
  }
  .ui-toast {
    border-left: 4px solid var(--success);
  }
  .customer-activity-panel > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .rack-card-header {
    border-bottom: 1px solid var(--border-subtle);
  }
  .rack-visual-slot {
    border-bottom: 1px solid var(--border);
  }
  .rack-visual-slot i {
    border-right: 1px solid var(--border);
  }
  .rack-plinth {
    border-top: 1px solid var(--border);
  }
  .rack-management {
    border-top: 1px solid var(--border-subtle);
  }
  .rack-resource-head {
    border-bottom: 1px solid var(--border-subtle);
  }
  .rack-visual-mount-form {
    border-top: 1px solid var(--border-subtle);
  }
  .device-hardware-panel > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  .device-linecard-label {
    border-right: 1px solid var(--border);
  }
  .device-px4-brand {
    border-right: 1px solid var(--border);
  }
  .rack-mini-identity {
    border-right: 1px solid var(--border);
  }
  .device-port-tooltip::after {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .device-port-tooltip em {
    border-top: 1px solid var(--border);
  }
  .dc-rack-inventory-head {
    border-bottom: 1px solid var(--border);
  }
  .dc-integrated-room,
.dc-integrated-rack {
    border-bottom: 1px solid var(--border);
  }
  .dc-integrated-room:last-child,
.dc-integrated-rack:last-child {
    border-bottom: 0;
  }
  .dc-integrated-room[open] > summary,
.dc-integrated-rack[open] > summary {
    border-bottom: 1px solid var(--border);
  }
  .ui-scope .compact-section > .panel-heading:first-child {
    border-bottom: 1px solid var(--border);
  }
  .ui-scope .security-status-row {
    border-bottom: 1px solid var(--border);
  }
  .ui-scope .security-status-row:last-child {
    border-bottom: 0;
  }
  .ui-scope .mfa-account-grid {
    border-top: 1px solid var(--border);
  }
  .ui-scope .compact-section > form.form-grid:last-child {
    border-top: 1px solid var(--border);
  }
  body[data-portal-mode="customer"] .customer-service-footprint-panel > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  body[data-portal-mode="customer"] .customer-profile-section > .panel-heading {
    border-bottom: 1px solid var(--border);
  }
  body[data-portal-mode="customer"] .address-suggestion {
    border-bottom: 1px solid var(--border);
  }
  body[data-portal-mode="customer"] .address-suggestion:last-child {
    border-bottom: 0;
  }
  body[data-portal-mode="customer"] .address-suggestion,
.ui-scope .address-suggestion {
    border-bottom: 1px solid var(--border);
  }
  body[data-portal-mode="customer"] .address-suggestion:last-child,
.ui-scope .address-suggestion:last-child {
    border-bottom: 0;
  }
  body[data-portal-mode="customer"] .customer-service-footprint-list,
body[data-portal-mode="customer"] .service-map-locations {
    border-left: 1px solid var(--border);
  }
  @media (max-width:900px) {
    body[data-portal-mode="customer"] .customer-service-footprint-list,
  body[data-portal-mode="customer"] .service-map-locations {
      border-left: 0;
      border-top: 1px solid var(--border);
    }
  }
  .support-message-attachments {
    border-top: 1px solid var(--border);
  }
  .ticket-admin-sidebar > .ui-section-header,
.customer-ticket-sidebar > .ui-section-header {
    border-bottom: 1px solid var(--border);
  }
  .ui-scope .readiness-panel-head {
    border-bottom: 1px solid var(--border);
  }
  body.portal-body .portal-sidebar {
    border-right: 1px solid var(--border);
  }
  body.portal-body .portal-nav-featured {
    border-bottom: 1px solid var(--border);
  }
  body.portal-body .portal-topbar {
    border-bottom: 1px solid var(--border);
  }
  .ui-scope .device-country-heading {
    border-bottom: 1px solid var(--border);
  }
  .telemetry-summary-strip {
    border-bottom: 1px solid var(--border-subtle);
  }
  .telemetry-hover-tooltip > strong {
    border-bottom: 1px solid var(--border);
  }
  .telemetry-legend-row {
    border-top: 1px solid var(--border);
  }
  .telemetry-graph-footer {
    border-top: 1px solid var(--border);
  }
  @media (max-width: 620px) {
    .telemetry-summary-card {
      border-bottom: 1px solid var(--border);
    }
  }
  body[data-ui-shell="app"].portal-body .portal-sidebar {
    border-right: 1px solid var(--border);
  }
  body[data-ui-shell="app"].portal-body .portal-topbar,
body[data-ui-shell="app"].portal-body .portal-topbar {
    border-bottom: 1px solid var(--border);
  }
  body[data-ui-shell="app"] :is(.command-palette,.modal,.dialog,.popover,.dropdown-menu) {
    border-color: var(--border);
    background: var(--surface-sunken);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
  }
  body[data-ui-shell="app"] .hero-panel-head {
    border-bottom: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-chart-grid {
    stroke: var(--border-subtle);
  }
  body[data-ui-shell="app"] .hero-chart-axis {
    fill: var(--text-muted);
  }
  body[data-ui-shell="app"] .hero-chart-line {
    fill: none;
  }
  body[data-ui-shell="app"] .hero-chart-tooltip>strong {
    border-bottom: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-chart-foot {
    border-top: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-chart-foot>div {
    border-right: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-upstream-row {
    border-bottom: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-upstream-row:last-child {
    border-bottom: 0;
  }
  body[data-ui-shell="app"] .hero-dc-marker {
    border: 1px solid var(--border);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
    color: var(--text-on-accent);
  }
  .hero-map-popup small,.hero-map-popup span {
    color: var(--text-muted);
  }
  .hero-map-popup a {
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .hero-map-panel .dashboard-link-pulse {
    border-right: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .hero-map-panel .dashboard-link-pulse:last-child {
    border-right: 0;
  }
  body[data-ui-shell="app"] .hero-attention-head {
    border-bottom: 1px solid var(--warning);
  }
  body[data-ui-shell="app"] .hero-attention-grid>a {
    border-right: 1px solid var(--warning);
  }
  body[data-ui-shell="app"] .hero-attention-grid>a:last-child {
    border-right: 0;
  }
  @media (max-width:900px) {
    .hero-attention-grid>a:nth-child(2) {
      border-right: 0;
    }
  }
  @media (max-width:900px) {
    .hero-attention-grid>a:nth-child(-n/**/+2) {
      border-bottom: 1px solid var(--warning);
    }
  }
  @media (max-width:620px) {
    .hero-chart-foot>a {
      border-top: 1px solid var(--border);
    }
  }
  @media (max-width:620px) {
    .hero-map-panel .dashboard-link-pulse {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }
  }
  @media (max-width:620px) {
    .hero-attention-grid>a {
      border-right: 0;
      border-bottom: 1px solid var(--warning);
    }
  }
  @media (max-width:620px) {
    .hero-attention-grid>a:last-child {
      border-bottom: 0;
    }
  }
  body[data-ui-shell="app"] .hero43-panel-head {
    border-bottom: 1px solid var(--border);
  }
  .hero43-table td {
    border-bottom: 1px solid var(--border);
  }
  .hero43-table tr:last-child td {
    border-bottom: 0;
  }
  body[data-ui-shell="app"] .hero44-panel-head {
    border-bottom: 1px solid var(--border);
  }
  .hero44-technical-disclosure[open]>summary {
    border-bottom: 1px solid var(--border);
  }
  .hero44-tech-list>span {
    border-bottom: 1px solid var(--border);
  }
  .theme-picker-head {
    border-bottom: 1px solid var(--border);
  }
  html[data-ui-theme] body.portal-body .portal-sidebar {
    border-right: 1px solid var(--fx-rail-border);
  }
}
/* END GENERATED TOKEN OWNERSHIP MIGRATION V10.51.6 */

/* v10.51.6 — semantic audit convergence. */
@layer components {
  body[data-ui-shell="app"] .ui-scope .signature-section {
    border-top: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .ui-scope .signature-actions small {
    color: var(--text-muted);
  }
  body[data-ui-shell="app"] .ui-scope :is(.mfa-qr-panel,.mfa-setup-confirm,.mfa-enrollment-form) {
    border: 1px solid var(--border);
    background: var(--surface-card);
  }
}

@layer utilities {
  body[data-ui-shell="app"] .ui-scope {
    font-synthesis: none;
    font-kerning: normal;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .hero42-order-progress,
    .hero42-order-progress b,
    .hero42-order-wizard .wizard-step,
    .service-choice-copy,
    .catalog-code,
    .catalog-bandwidth-line,
    .catalog-card-commercial,
    .datacenter-code,
    .datacenter-country,
    .datacenter-provider-mark,
    .interface-option-card
  ) {
    font-variant-numeric: lining-nums tabular-nums;
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .hero42-order-progress span,
    .hero42-order-wizard .wizard-step,
    .service-choice-copy strong,
    .service-choice-copy small,
    .catalog-card-head,
    .catalog-bandwidth-line,
    .catalog-card-commercial > div,
    .datacenter-card-head,
    .datacenter-provider-row,
    .datacenter-select
  ) {
    line-height: var(--line-control);
  }

  body[data-ui-shell="app"] .ui-scope :is(
    .hero42-order-progress b,
    .hero42-order-wizard .wizard-step,
    .catalog-code,
    .datacenter-code
  ) {
    font-weight: var(--weight-bold);
  }
}


/* v10.52.8 — dashboard primary quick action optical contract. */
@layer utilities {
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action {
    border-color: var(--button-primary-bg);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: var(--accent-glow);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action:hover {
    border-color: var(--button-primary-bg-hover);
    background: var(--button-primary-bg-hover);
    color: var(--button-primary-text);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action :is(strong,small) {
    color: var(--button-primary-text);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action .dashboard-quick-icon {
    border: 1px solid color-mix(in srgb, var(--button-primary-text) 18%, transparent);
    background: var(--button-primary-bg-active);
    color: var(--button-primary-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--button-primary-text) 12%, transparent);
  }
  body[data-ui-shell="app"] .hero-dashboard .dashboard-quick-action.primary-action .dashboard-quick-icon :is(.ui-icon,svg,path) {
    color: inherit;
    stroke: currentColor;
  }
}

/* v10.52.8 — canonical dual-direction telemetry series. */
@layer utilities {
  body[data-ui-shell="app"] .ui-scope .telemetry-line.in.modern { stroke: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope .telemetry-line.out.modern { stroke: var(--data-2); }
  body[data-ui-shell="app"] .ui-scope .telemetry-p95.in.modern { stroke: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope .telemetry-p95.out.modern { stroke: var(--data-2); }
  body[data-ui-shell="app"] .ui-scope .traffic-key.in { background: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope .traffic-key.out { background: var(--data-2); }
  body[data-ui-shell="app"] .ui-scope .telemetry-hover-dot.in { fill: var(--data-1); }
  body[data-ui-shell="app"] .ui-scope .telemetry-hover-dot.out { fill: var(--data-2); }
}

/* v10.53.0 — support conversation direction and notification readiness. */
@layer components {
  body[data-ui-shell="app"] .support-direction-form {
    overflow: hidden;
  }
  body[data-ui-shell="app"] .support-direction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  body[data-ui-shell="app"] .support-direction-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-inset);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  body[data-ui-shell="app"] .support-direction-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    transform: translateY(-1px);
  }
  body[data-ui-shell="app"] .support-direction-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-card));
    box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-card);
  }
  body[data-ui-shell="app"] .support-direction-card input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }
  body[data-ui-shell="app"] .support-direction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 46px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-inset);
    color: var(--text-strong);
  }
  body[data-ui-shell="app"] .support-direction-icon.customer { color: var(--data-1); }
  body[data-ui-shell="app"] .support-direction-icon.aristo { color: var(--accent-text); }
  body[data-ui-shell="app"] .support-direction-icon :is(.ui-icon, svg) {
    inline-size: 22px;
    block-size: 22px;
  }
  body[data-ui-shell="app"] .support-direction-copy,
  body[data-ui-shell="app"] .support-direction-copy :is(strong, small, b) {
    display: block;
    min-width: 0;
  }
  body[data-ui-shell="app"] .support-direction-copy strong {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: var(--weight-bold);
  }
  body[data-ui-shell="app"] .support-direction-copy small {
    margin-top: 3px;
    color: var(--accent-text);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .03em;
  }
  body[data-ui-shell="app"] .support-direction-copy b {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: var(--weight-regular);
    line-height: 1.5;
  }
  body[data-ui-shell="app"] .support-direction-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: transparent;
  }
  body[data-ui-shell="app"] .support-direction-card:has(input:checked) > i {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--button-primary-text);
  }
  body[data-ui-shell="app"] .support-request-heading {
    border-top: 1px solid var(--border);
  }
  body[data-ui-shell="app"] .ui-field > span em {
    margin-left: 5px;
    color: var(--muted);
    font-size: .88em;
    font-style: normal;
    font-weight: var(--weight-regular);
  }
  body[data-ui-shell="app"] .support-notification-readiness {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body[data-ui-shell="app"] .support-notification-readiness strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }
  body[data-ui-shell="app"] .support-notification-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-body);
  }
  body[data-ui-shell="app"] .support-notification-strip.warning {
    border-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, var(--surface-card));
  }
  body[data-ui-shell="app"] .support-notification-strip small {
    color: var(--muted);
  }
  body[data-ui-shell="app"] .support-notification-strip a {
    margin-left: auto;
    color: var(--accent-text);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }
  body[data-ui-shell="app"] .ticket-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  body[data-ui-shell="app"] .ticket-title-line h2 {
    margin: 0;
  }
  .ticket-direction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-inset);
    color: var(--text-body);
    font-size: 10px;
    font-weight: var(--weight-bold);
    line-height: 1;
    white-space: nowrap;
  }
  .ticket-direction-badge.customer {
    border-color: color-mix(in srgb, var(--data-1) 55%, var(--border));
    background: color-mix(in srgb, var(--data-1) 10%, var(--surface-card));
    color: var(--data-1);
  }
  .ticket-direction-badge.aristo {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-card));
    color: var(--accent-text);
  }
  body[data-ui-shell="app"] .support-ticket-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body[data-ui-shell="app"] .ticket-filter-row {
    grid-template-columns: repeat(5, minmax(145px, 1fr)) auto;
  }
  .ticket-origin-notice {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  @media (max-width: 1260px) {
    body[data-ui-shell="app"] .support-ticket-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body[data-ui-shell="app"] .ticket-filter-row {
      grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
  }
  @media (max-width: 820px) {
    body[data-ui-shell="app"] .support-direction-grid,
    body[data-ui-shell="app"] .support-ticket-stats,
    body[data-ui-shell="app"] .ticket-filter-row {
      grid-template-columns: 1fr;
    }
    body[data-ui-shell="app"] .support-notification-readiness,
    body[data-ui-shell="app"] .support-notification-strip,
    .ticket-origin-notice {
      align-items: flex-start;
      flex-direction: column;
    }
    body[data-ui-shell="app"] .support-notification-strip a {
      margin-left: 0;
    }
  }
}

/* v10.53.0 — support mailbox queues */
body[data-ui-shell="app"] .ui-scope .support-mailbox-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); padding:var(--space-4); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card { display:grid; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card-gradient); box-shadow:var(--shadow-sm); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card.is-disabled { opacity:.72; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card > header { display:flex; align-items:center; gap:var(--space-3); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card > header > div { display:grid; gap:2px; min-width:0; flex:1; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card > header small { color:var(--text-muted); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-md); background:var(--surface-card-inset); border:1px solid var(--border-subtle); color:var(--accent); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); margin:0; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-facts > div { display:grid; gap:3px; padding:var(--space-3); border-radius:var(--radius-md); background:var(--surface-card-inset); border:1px solid var(--border-subtle); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-facts dt { color:var(--text-muted); font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.04em; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-facts dd { margin:0; color:var(--text-strong); font-weight:600; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-error { display:grid; gap:4px; padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--danger); background:var(--danger-soft); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-error span { color:var(--text-muted); word-break:break-word; }
body[data-ui-shell="app"] .ui-scope .support-mailbox-card > footer { display:flex; flex-wrap:wrap; gap:var(--space-2); }
body[data-ui-shell="app"] .ui-scope .support-mailbox-form { display:grid; gap:var(--space-4); }
@media(max-width:1050px){ body[data-ui-shell="app"] .ui-scope .support-mailbox-grid{grid-template-columns:1fr;} }

/* v10.53.16 — grouped monitored sFlow interfaces */
.sflow-interface-category-groups{display:grid;gap:16px;margin-top:16px}.sflow-interface-category-group{display:grid;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1)}.sflow-interface-category-group>header>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sflow-interface-category-group>header strong{font-size:12px;color:var(--text-subtle)}