/* STEP 11.2K PERFORMANCE RECOVERY
   Global glass uses colour/alpha/borders instead of backdrop blur.
   Real backdrop blur remains only on the small image-overlay glass system
   defined in components.css.
*/

/*
  VOLTTECH SITEWIDE GLASS DESIGN SYSTEM
  Step 11.2H

  Scope:
  - VoltTech clean-shell customer experience
  - Excludes STATIC editorial pages and admin-prefixed pages
  - Loaded last so it acts as the final visual material layer
  - Uses restrained 7px blur / 5px mobile blur
  - Keeps semantic accent colours for services, streaming, warnings and danger states
*/

:root {
  --vt-glass-blur: 7px;
  --vt-glass-blur-mobile: 5px;
  --vt-glass-sat: 122%;
  --vt-glass-panel-top: rgba(28, 55, 58, .30);
  --vt-glass-panel-bottom: rgba(2, 13, 15, .66);
  --vt-glass-panel-solid: rgba(3, 16, 18, .60);
  --vt-glass-border: rgba(118, 190, 186, .22);
  --vt-glass-border-strong: rgba(91, 241, 226, .44);
  --vt-glass-glow: rgba(34, 224, 210, .075);
  --vt-glass-glow-hover: rgba(34, 224, 210, .18);
  --vt-glass-highlight: rgba(255, 255, 255, .055);
}

/* ---------- PAGE ACCENT ROUTING ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) {
  --vt-surface-accent: var(--teal);
  --vt-surface-accent-soft: rgba(53, 234, 215, .16);
  --vt-surface-accent-glow: rgba(53, 234, 215, .14);
}

body:not([data-page^="static"]):not([data-page^="admin"]) .service-page {
  --vt-surface-accent: var(--service-accent);
  --vt-surface-accent-soft: color-mix(in srgb, var(--service-accent) 14%, transparent);
  --vt-surface-accent-glow: color-mix(in srgb, var(--service-accent) 17%, transparent);
}

body[data-page="streaming-support"],
body[data-page="creator-hub-south-africa"],
body[data-page="stream-scan"] {
  --vt-surface-accent: #c28cff;
  --vt-surface-accent-soft: rgba(194, 140, 255, .14);
  --vt-surface-accent-glow: rgba(166, 86, 255, .17);
}

/* ---------- GLOBAL MATERIAL ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .card,
  .feature-panel,
  .notice,
  .dialog,
  .preview-strip,
  .account-auth-card,
  .account-welcome,
  .account-panel,
  .account-action,
  .account-stat,
  .account-address-card,
  .account-security-card,
  .account-tabs,
  .privacy-preview,
  .privacy-pending,
  .privacy-note,
  .privacy-card,
  .privacy-danger,
  .legal-nav,
  .legal-link-card,
  .legal-card,
  .legal-notice,
  .legal-contact,
  .document-sheet,
  .document-actions-panel,
  .document-note,
  .document-json,
  .transaction-panel,
  .state-panel,
  .transaction-sidebar,
  .transaction-help,
  .delivery-estimate,
  .checkout-item,
  .confirmation-panel,
  .order-line,
  .records-preview,
  .records-toolbar,
  .record-card,
  .records-note,
  .records-section,
  .activity-card,
  .records-dialog,
  .records-inspection-card,
  .creator-feed-status,
  .creator-panel,
  .creator-player,
  .creator-player-meta,
  .creator-profile,
  .creator-live-choice,
  .creator-directory-card,
  .creator-community article,
  .service-network,
  .service-symptom,
  .service-detail,
  .service-card,
  .service-step,
  .service-price,
  .service-trust,
  .service-trust-item,
  .service-area,
  .service-final,
  .creator-tool-nav,
  .stream-scan-callout,
  .streaming-package,
  .store-principles,
  .store-category,
  .store-status-panel,
  .catalogue-card,
  .catalogue-media,
  .advice-card,
  .component-data,
  .component-links a,
  .catalogue-cart,
  .commerce-status,
  .builder-app .hero,
  .builder-app .mode-card,
  .builder-app .panel,
  .builder-app .guided-question,
  .builder-app .choice-card,
  .builder-app .build-dashboard,
  .builder-app .build-metric,
  .builder-app .store-part,
  .builder-app .product,
  .builder-app .summary,
  .builder-app .report-item,
  .builder-app .diagnostic-action,
  .builder-app .mobile-buildbar,
  .builder-app .steps-panel,
  .builder-app .builder-toast,
  .scan-status-card,
  .scan-workspace,
  .scan-scope,
  .scan-panel,
  .scan-option,
  .scan-diag,
  .scan-price,
  .scan-note,
  .scan-assurance,
  .component-card,
  .service-card,
  .setup-card,
  .upgrade-card,
  .builder-panel,
  .scan-panel,
  .stream-support-panel,
  .creator-strip,
  .trust-row,
  .error-link
) {
  border-color: var(--vt-glass-border);
  background:
    linear-gradient(155deg, var(--vt-glass-panel-top), var(--vt-glass-panel-bottom)),
    var(--vt-glass-panel-solid);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .012),
    0 12px 34px rgba(0, 0, 0, .075),
    inset 0 1px 0 var(--vt-glass-highlight);
}

/* Give accent-aware feature surfaces a restrained colour cast. */
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .service-detail,
  .service-price,
  .service-final,
  .stream-scan-callout,
  .streaming-package.featured,
  .account-action,
  .document-note,
  .records-note,
  .scan-price,
  .scan-assurance
) {
  border-color: color-mix(in srgb, var(--vt-surface-accent) 38%, transparent);
  background:
    linear-gradient(145deg, var(--vt-surface-accent-soft), rgba(2, 13, 15, .48)),
    rgba(3, 16, 18, .44);
  box-shadow:
    0 0 18px var(--vt-surface-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* ---------- SITE CHROME ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) .site-header {
  background: rgba(2, 9, 10, .96);
  border-bottom-color: rgba(90, 196, 189, .20);

  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

body:not([data-page^="static"]):not([data-page^="admin"]) .site-footer {
  background:
    linear-gradient(180deg, rgba(6, 25, 27, .58), rgba(1, 8, 10, .94)),
    var(--black);
  border-top: 1px solid rgba(90, 196, 189, .16);
}

body:not([data-page^="static"]):not([data-page^="admin"]) .document-toolbar {
  background: rgba(3, 16, 18, .76);

}

/* ---------- BUTTONS ---------- */

/* Existing image-overlay buttons keep their dedicated 11.2G treatment. */
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .button:not(.vt-image-glass),
  .btn,
  .flow-btn,
  .summary-action,
  .select-btn,
  .part-action,
  .primary-action,
  .diagnostic-action,
  .vt-account-btn
) {
  border: 1px solid color-mix(in srgb, var(--vt-surface-accent) 72%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vt-surface-accent) 16%, transparent),
      rgba(3, 18, 20, .30)
    ),
    rgba(3, 16, 18, .34);
  color: #edfffd;

  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--vt-surface-accent) 6%, transparent),
    0 0 15px color-mix(in srgb, var(--vt-surface-accent) 11%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .065);
  text-shadow: 0 0 9px rgba(255, 255, 255, .055);
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .button:not(.vt-image-glass),
  .btn,
  .flow-btn,
  .summary-action,
  .select-btn,
  .part-action,
  .primary-action,
  .diagnostic-action,
  .vt-account-btn
):hover,
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .button:not(.vt-image-glass),
  .btn,
  .flow-btn,
  .summary-action,
  .select-btn,
  .part-action,
  .primary-action,
  .diagnostic-action,
  .vt-account-btn
):focus-visible {
  border-color: color-mix(in srgb, var(--vt-surface-accent) 92%, white);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vt-surface-accent) 21%, transparent),
      rgba(3, 20, 22, .34)
    ),
    rgba(3, 16, 18, .38);
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--vt-surface-accent) 10%, transparent),
    0 0 21px color-mix(in srgb, var(--vt-surface-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  transform: translateY(-1px);
}

/* Secondary variants remain glass, just quieter. */
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .button-secondary:not(.vt-image-glass),
  .hero-secondary,
  .secondary,
  .alt,
  .clear
) {
  border-color: rgba(166, 208, 204, .25);
  background:
    linear-gradient(180deg, rgba(194, 232, 229, .055), rgba(3, 16, 18, .30)),
    rgba(3, 16, 18, .28);
  color: var(--text);
}

/* Semantic danger/warning glass. */
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .button-danger,
  .privacy-danger .button,
  [data-state="urgent"] .button
) {
  --vt-surface-accent: #ff7474;
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .notice-warning,
  .document-note-warning,
  .privacy-pending
) {
  --vt-surface-accent: #ffb454;
  border-color: rgba(255, 180, 84, .34);
  background:
    linear-gradient(145deg, rgba(255, 180, 84, .075), rgba(3, 16, 18, .48)),
    rgba(3, 16, 18, .42);
}

/* ---------- FORMS ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  border-color: rgba(127, 193, 189, .26);
  background:
    linear-gradient(180deg, rgba(15, 44, 46, .28), rgba(2, 12, 14, .50)),
    rgba(2, 10, 12, .46);
  color: var(--text);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 0 1px rgba(53, 234, 215, .018);
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
):focus {
  border-color: color-mix(in srgb, var(--vt-surface-accent) 62%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--vt-surface-accent) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--vt-surface-accent) 11%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* ---------- NAV / TAB / LINK PANELS ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .account-tab,
  .service-network a,
  .creator-tool-nav a,
  .records-tabs a,
  .privacy-nav a,
  .stream-tool-nav a
) {
  background: rgba(3, 16, 18, .18);
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .account-tab,
  .service-network a,
  .creator-tool-nav a,
  .records-tabs a,
  .privacy-nav a,
  .stream-tool-nav a
):hover,
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  .account-tab.active,
  .service-network a.active,
  .creator-tool-nav a.active
) {
  background:
    linear-gradient(180deg, var(--vt-surface-accent-soft), rgba(3, 16, 18, .30)),
    rgba(3, 16, 18, .24);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--vt-surface-accent) 46%, transparent);
}

/* ---------- INTERACTIVE SURFACE LIFT ---------- */

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  a.card,
  .component-card,
  .service-card,
  .setup-card,
  .upgrade-card,
  .store-category,
  .catalogue-card,
  .mode-card,
  .choice-card,
  .product,
  .creator-directory-card,
  .creator-live-choice,
  .account-stat,
  .account-link-grid a,
  .error-link,
  .legal-link-card
) {
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  a.card,
  .component-card,
  .service-card,
  .setup-card,
  .upgrade-card,
  .store-category,
  .catalogue-card,
  .mode-card,
  .choice-card,
  .product,
  .creator-directory-card,
  .creator-live-choice,
  .account-stat,
  .account-link-grid a,
  .error-link,
  .legal-link-card
):hover,
body:not([data-page^="static"]):not([data-page^="admin"]) :is(
  a.card,
  .component-card,
  .service-card,
  .setup-card,
  .upgrade-card,
  .store-category,
  .catalogue-card,
  .mode-card,
  .choice-card,
  .product,
  .creator-directory-card,
  .creator-live-choice,
  .account-stat,
  .account-link-grid a,
  .error-link,
  .legal-link-card
):focus-visible {
  border-color: color-mix(in srgb, var(--vt-surface-accent) 42%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--vt-surface-accent) 8%, transparent), rgba(2, 13, 15, .52)),
    rgba(3, 16, 18, .48);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--vt-surface-accent) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

/* ---------- EXISTING IMAGE GLASS COHERENCE ---------- */

/* Keep the 11.2G image-overlay system aligned with the same blur language. */
body:not([data-page^="static"]):not([data-page^="admin"]) .vt-image-glass {

}

/* ---------- MOBILE ---------- */

@media (max-width: 40rem) {
  body:not([data-page^="static"]):not([data-page^="admin"]) :is(
    .card,
    .feature-panel,
    .notice,
    .dialog,
    .account-auth-card,
    .account-welcome,
    .account-panel,
    .privacy-card,
    .legal-card,
    .document-sheet,
    .transaction-panel,
    .record-card,
    .creator-panel,
    .service-symptom,
    .service-detail,
    .service-card,
    .service-step,
    .service-price,
    .service-trust,
    .service-trust-item,
    .service-area,
    .streaming-package,
    .store-category,
    .store-status-panel,
    .catalogue-card,
    .builder-app .mode-card,
    .builder-app .panel,
    .builder-app .choice-card,
    .scan-status-card,
    .scan-workspace,
    .scan-panel,
    .scan-option,
    .component-card,
    .setup-card,
    .upgrade-card,
    .vt-image-glass
  ) {

  }

  body:not([data-page^="static"]):not([data-page^="admin"]) :is(
    .button:not(.vt-image-glass),
    .btn,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {

  }
}

/* ---------- PRINT ---------- */

@media print {
  body :is(
    .card,
    .feature-panel,
    .notice,
    .dialog,
    .account-auth-card,
    .account-welcome,
    .account-panel,
    .privacy-card,
    .legal-card,
    .document-sheet,
    .transaction-panel,
    .record-card,
    .creator-panel,
    .service-card,
    .service-step,
    .service-price,
    .store-category,
    .catalogue-card,
    .builder-app .panel,
    .scan-panel,
    .vt-image-glass
  ) {

    box-shadow: none !important;
    background: transparent !important;
  }

  body :is(.button, .btn) {

    box-shadow: none !important;
  }
}

/* STEP 11.2M SCHEMATIC CIRCUIT BACKGROUND START */
/* Pure CSS schematic field: no images, animation, filters, blur or fixed layers. */
body:not([data-page^="static"]):not([data-page^="admin"]){
  background:
    repeating-linear-gradient(135deg,rgba(74,238,220,.020) 0 1px,transparent 1px 24px),
    linear-gradient(180deg,#041113 0%,#020b0d 45%,#031012 100%)
}

body:not([data-page^="static"]):not([data-page^="admin"]) main{
  background-image:
    radial-gradient(circle at 10% 10%,rgba(116,255,240,.50) 0 2px,transparent 2.7px),
    radial-gradient(circle at 34% 10%,rgba(116,255,240,.34) 0 2px,transparent 2.7px),
    radial-gradient(circle at 34% 22%,rgba(116,255,240,.28) 0 2px,transparent 2.7px),
    radial-gradient(circle at 81% 31%,rgba(116,255,240,.38) 0 2px,transparent 2.7px),
    radial-gradient(circle at 63% 55%,rgba(190,227,223,.28) 0 2px,transparent 2.7px),
    radial-gradient(circle at 18% 72%,rgba(116,255,240,.34) 0 2px,transparent 2.7px),
    radial-gradient(circle at 76% 84%,rgba(116,255,240,.30) 0 2px,transparent 2.7px),
    radial-gradient(circle at 92% 92%,rgba(190,227,223,.24) 0 2px,transparent 2.7px),
    linear-gradient(90deg,rgba(74,238,220,.22),rgba(74,238,220,.06)),
    linear-gradient(180deg,rgba(74,238,220,.18),rgba(74,238,220,.05)),
    linear-gradient(90deg,rgba(74,238,220,.16),rgba(74,238,220,.035)),
    linear-gradient(90deg,rgba(146,207,201,.14),rgba(74,238,220,.035)),
    linear-gradient(180deg,rgba(146,207,201,.14),rgba(74,238,220,.035)),
    linear-gradient(90deg,rgba(74,238,220,.18),rgba(74,238,220,.04)),
    linear-gradient(180deg,rgba(74,238,220,.15),rgba(74,238,220,.035)),
    linear-gradient(90deg,rgba(146,207,201,.13),rgba(74,238,220,.025)),
    repeating-linear-gradient(90deg,rgba(116,255,240,.14) 0 10px,transparent 10px 24px);
  background-repeat:no-repeat;
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    24% 1px,1px 12%,18% 1px,19% 1px,1px 14%,28% 1px,1px 11%,16% 1px,
    22% 1px;
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    10% 10%,34% 10%,34% 22%,62% 31%,81% 31%,18% 72%,46% 72%,76% 84%,
    8% 92%
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(.section,.home-section,.tool-section,.contact-section,.creator-strip){
  background-color:transparent
}

body:not([data-page^="static"]):not([data-page^="admin"]) :is(.tool-section,.creator-strip){
  background-image:linear-gradient(180deg,rgba(2,10,12,.34),rgba(2,10,12,.48))
}

body:not([data-page^="static"]):not([data-page^="admin"]) .section{position:relative}
body:not([data-page^="static"]):not([data-page^="admin"]) .section::after{
  content:"";position:absolute;right:var(--gutter);top:0;width:4.5rem;height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,255,240,.22));pointer-events:none
}

@media(max-width:40rem){
  body:not([data-page^="static"]):not([data-page^="admin"]){
    background:
      repeating-linear-gradient(135deg,rgba(74,238,220,.017) 0 1px,transparent 1px 20px),
      linear-gradient(180deg,#041113 0%,#020b0d 45%,#031012 100%)
  }
  body:not([data-page^="static"]):not([data-page^="admin"]) main{
    background-size:
      100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
      27% 1px,1px 10%,20% 1px,22% 1px,1px 12%,30% 1px,1px 9%,18% 1px,
      26% 1px
  }
}
@media print{body,body main{background:#fff!important}}
/* STEP 11.2M SCHEMATIC CIRCUIT BACKGROUND END */

/* STEP 11.2P UNIFIED TOOL NAV START */
/*
  One control language across Signal Scan, Stream Scan, Stream Support and
  Creator Hub. These are navigation controls, so they render as proper
  coloured faux-glass buttons rather than plain text links.
*/
.vt-tool-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 0 clamp(1.35rem, 3vw, 2.25rem);
}

.vt-tool-switcher a {
  --tool-rgb: 74, 238, 220;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta arrow"
    "name arrow";
  align-items: center;
  gap: .12rem .6rem;
  min-height: 4.7rem;
  padding: .72rem .8rem;
  overflow: hidden;
  border: 1px solid rgba(var(--tool-rgb), .46);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--tool-rgb), .105), rgba(3, 16, 18, .62)),
    rgba(3, 16, 18, .64);
  color: var(--text);
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(var(--tool-rgb), .035),
    0 0 13px rgba(var(--tool-rgb), .085),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.vt-tool-switcher a[data-tool="signal"] { --tool-rgb: 74, 238, 220; }
.vt-tool-switcher a[data-tool="stream-scan"] { --tool-rgb: 194, 140, 255; }
.vt-tool-switcher a[data-tool="stream-support"] { --tool-rgb: 120, 146, 255; }
.vt-tool-switcher a[data-tool="creator"] { --tool-rgb: 255, 102, 196; }

.vt-tool-switcher a::after {
  content:"";
  position:absolute;
  left:.75rem;
  right:48%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(var(--tool-rgb), .86), transparent);
  box-shadow:0 0 8px rgba(var(--tool-rgb), .28);
}

.vt-tool-switcher a > span {
  grid-area: meta;
  color: rgb(var(--tool-rgb));
  font: 700 .48rem/1.2 var(--font-mono);
  letter-spacing: .10em;
}

.vt-tool-switcher a > strong {
  grid-area: name;
  color: #f1f8f7;
  font: 650 .78rem/1.18 var(--font-ui);
}

.vt-tool-switcher a > b {
  grid-area: arrow;
  color: rgb(var(--tool-rgb));
  font: 500 .9rem/1 var(--font-ui);
  text-shadow: 0 0 9px rgba(var(--tool-rgb), .28);
}

.vt-tool-switcher a:hover,
.vt-tool-switcher a:focus-visible,
.vt-tool-switcher a.active,
.vt-tool-switcher a[aria-current="page"] {
  border-color: rgba(var(--tool-rgb), .92);
  background:
    linear-gradient(145deg, rgba(var(--tool-rgb), .18), rgba(3, 16, 18, .68)),
    rgba(3, 16, 18, .68);
  box-shadow:
    0 0 0 1px rgba(var(--tool-rgb), .08),
    0 0 20px rgba(var(--tool-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .085);
  transform: translateY(-1px);
  outline: none;
}

.vt-tool-switcher a.active::before,
.vt-tool-switcher a[aria-current="page"]::before {
  content:"ACTIVE";
  position:absolute;
  top:.4rem;
  right:.45rem;
  color:rgba(var(--tool-rgb), .78);
  font:700 .38rem/1 var(--font-mono);
  letter-spacing:.09em;
}

/* Scan back links are controls, not leftover text links. */
.signal-scan-page .scan-back.button {
  width: fit-content;
  min-height: 2.7rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding: .55rem .75rem;
  font: 650 .62rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
}

/* Streaming Support related destinations also read as clickable controls. */
.streaming-support-page .service-related {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
}

.streaming-support-page .service-related a,
.streaming-support-page .service-helper a {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: .48rem .68rem;
  border: 1px solid rgba(194, 140, 255, .34);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(194, 140, 255, .08), rgba(3, 16, 18, .42)),
    rgba(3, 16, 18, .50);
  color: var(--text);
  text-decoration: none;
  box-shadow:
    0 0 11px rgba(194, 140, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

.streaming-support-page .service-related a:hover,
.streaming-support-page .service-related a:focus-visible,
.streaming-support-page .service-helper a:hover,
.streaming-support-page .service-helper a:focus-visible {
  border-color: rgba(194, 140, 255, .74);
  box-shadow:
    0 0 17px rgba(194, 140, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

/* Creator player outbound link should also look actionable. */
.creator-player-meta #playerLink {
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  padding:.42rem .62rem;
  border:1px solid rgba(255,102,196,.34);
  border-radius:var(--radius);
  background:rgba(3,16,18,.52);
  color:#ffd8ef;
  text-decoration:none;
  box-shadow:0 0 11px rgba(255,102,196,.07);
}

/* The mobile Menu control is always visibly glassy before interaction. */
@media (max-width: 56rem) {
  body:not([data-page^="static"]):not([data-page^="admin"]) .menu-toggle:not([hidden]) {
    border: 1px solid rgba(53, 234, 215, .68);
    background:
      linear-gradient(180deg, rgba(53, 234, 215, .14), rgba(3, 18, 20, .34)),
      rgba(3, 16, 18, .52);
    color: #effffd;
    box-shadow:
      0 0 0 1px rgba(53, 234, 215, .06),
      0 0 16px rgba(53, 234, 215, .20),
      inset 0 1px 0 rgba(255, 255, 255, .08);
    text-shadow: 0 0 8px rgba(53, 234, 215, .16);
  }

  body:not([data-page^="static"]):not([data-page^="admin"]) .menu-toggle:not([hidden]):hover,
  body:not([data-page^="static"]):not([data-page^="admin"]) .menu-toggle:not([hidden]):focus-visible,
  body:not([data-page^="static"]):not([data-page^="admin"]) .menu-toggle:not([hidden])[aria-expanded="true"] {
    border-color: rgba(113, 255, 241, .96);
    box-shadow:
      0 0 0 1px rgba(53, 234, 215, .12),
      0 0 23px rgba(53, 234, 215, .32),
      inset 0 1px 0 rgba(255, 255, 255, .11);
  }
}

@media (max-width: 46rem) {
  .vt-tool-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .vt-tool-switcher a {
    min-height: 4.35rem;
    padding: .65rem .7rem;
  }
}

@media (max-width: 24rem) {
  .vt-tool-switcher {
    grid-template-columns: 1fr;
  }
}
/* STEP 11.2P UNIFIED TOOL NAV END */