/* SuruX surface design: Cyberpunk (key "cyberpunk"). Dark-only surface. Ported from the approved round-2 sheet onto the current shared owners.
 * Base: master 24802a791 (theme gates, Default fixes, design manifest, role tokens TR-0000687).
 *
 * Signature (docs/ui-surface-style-standard.md s.13): emissive neon edges and glows on
 * near-black, chamfered shapes, uppercase mono labels, optional scanlines. Dark only.
 * "Neon never coincides with status colours."
 *
 * How it is built
 * - Everything is gated on the design attribute AND a dark resolved appearance (data-bs-theme
 *   "dark", or the legacy Night palette, which the standard treats as dark) AND standard
 *   contrast. Light and Warm Light reach this sheet only because the theme boot renders the
 *   design's own dark base there (data-bs-theme="dark", data-surux-appearance="black",
 *   data-surux-appearance-requested="light|warm-light"); without that plumbing a light page
 *   simply renders Default.
 * - The whole sheet sits in @media screen and (forced-colors: none): print and forced colours
 *   render Default chrome. High contrast renders Default chrome through the :not() gate.
 * - Role tokens first (surfaces from the --surux-*-base tokens, radius, elevation, border width,
 *   blur), then the design's own --surux-cyberpunk-* tokens. Selector rules follow only for what
 *   no token reaches.
 * - Never redefined: status, topic, workflow, proposal tokens, --surux-primary and the
 *   --surux-primary-action-bg / --surux-primary-contrast pair, anything colour vision remaps.
 *
 * The neon rule (round 2)
 * - The emissive colour (rims, glows, grid, field edges, focus, eyebrows, table heads, the active
 *   tab, record codes, link underlines) is --surux-cyberpunk-neon: the palette ink
 *   (--surux-primary) with its OKLCH lightness and chroma kept and its hue folded out of the
 *   judgement arc, 335deg -> 195deg through red, orange, yellow and green. That arc holds every
 *   danger, warning and success colour in both colour-vision modes (standard 18-25, 70-96,
 *   149-168deg; assisted 47-56, 103-105, 165-172deg), plus margins.
 *     palette hue 195..335  (aqua, sky, blue, indigo, violet, purple, magenta)  kept as it is
 *     palette hue 335..125  (pink, red, orange, copper, yellow)   folds to 335..310 (magenta end)
 *     palette hue 125..195  (green, sage, teal)                   folds to 207..195 (aqua end)
 *   The fold keeps the palettes in order and apart, is computed from --surux-primary (no hue is
 *   hard-coded), and covers any palette added later.
 * - Fills keep the palette pair: the action button, switch-on, selected segment and badges use
 *   --surux-primary-action-bg / --surux-primary-contrast exactly as Default does ("selection keeps
 *   its colour", s.5). Status chips keep their tone fill and never glow.
 * - Informational tones (info, progress, low priority) share the free arc with the neon; they are
 *   told apart by being filled, labelled chips, never an edge or a glow.
 */

/* The neon is registered as a colour so it resolves once, at the root, to a plain colour value:
   scripts that read theme colours (the header-band texture reads --surux-band-ink) get an
   ordinary oklch() colour, not the fold expression. The design's own token; the initial value
   is never seen outside the design (nothing else reads it). */
@media screen and (forced-colors: none) {

@property --surux-cyberpunk-neon {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --surux-cyberpunk-neon-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --surux-cyberpunk-accent-neon {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --surux-cyberpunk-accent-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

/* ------------------------------------------------------------------ 1. Tokens */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) {
  color-scheme: dark;

  /* Role tokens. Surfaces derive from the appearance's base tokens, tinted by the neon. */
  --surux-app-bg: var(--surux-cyberpunk-void, transparent);
  --surux-surface: var(--surux-cyberpunk-panel, transparent);
  --surux-surface-2: var(--surux-cyberpunk-panel-2, transparent);
  --surux-border: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 24%, transparent);

  /* Radius: "<chamfer> 0" cuts the top-left and bottom-right corners (see corner-shape below). */
  --surux-radius-sm: 3px;
  --surux-radius-md: 4px;
  --surux-radius-lg: 6px;
  --surux-radius-card: 14px 0;
  --surux-radius-field: 9px 0;
  --surux-radius-input: 7px 0;
  --surux-radius-control: 7px 0;
  --surux-radius-chip: 6px 0;
  --surux-radius-pill: 7px;
  --surux-radius-menu: 14px 0;
  --surux-radius-modal: 22px 0;
  --surux-radius-hero: 18px 0;
  --surux-radius-band: 20px 0;
  --surux-band-radius: 20px 0;

  /* Elevation is emission, not depth: a neon rim and a coloured halo, then a plain drop. */
  --surux-elevation-card: 0 0 26px -12px var(--surux-cyberpunk-glow, transparent), 0 0 22px -16px var(--surux-cyberpunk-accent-glow, transparent), inset 0 1px 0 var(--surux-cyberpunk-edge-faint, transparent);
  --surux-elevation-raised: 0 -1px 0 var(--surux-cyberpunk-edge-dim, transparent), 0 -20px 44px -22px var(--surux-cyberpunk-glow, transparent);
  --surux-elevation-float: 0 0 0 1px var(--surux-cyberpunk-edge, transparent), 0 0 28px -6px var(--surux-cyberpunk-glow, transparent), 0 22px 48px rgb(0 0 0 / .72);
  --surux-elevation-modal: 0 0 0 1px var(--surux-cyberpunk-edge, transparent), 0 0 48px -8px var(--surux-cyberpunk-glow, transparent), 0 32px 90px rgb(0 0 0 / .8);
  /* The toast draws its own tone bar (inset) in front of this token. */
  --surux-elevation-toast: 0 0 0 1px var(--surux-cyberpunk-edge-dim, transparent), 0 16px 36px rgb(0 0 0 / .66);

  --surux-border-width: 1px;
  --surux-border-width-strong: 2px;

  /* Opaque: no blur anywhere. Floating layers stay solid. */
  --surux-blur-shell: 0px;
  --surux-blur-overlay: 0px;
  --surux-blur-float: 0px;

  /* The design's own tokens. */
  /* The neon fold (see the header). --surux-cyberpunk-fold is a helper whose hue channel holds
     d = how far the palette hue lies past 335deg (0..360); the neon reads d back as its hue:
       d   0..150  warm arc   -> 335 - d/6              (335..310)
       d 150..220  green arc  -> 195 + (220 - d) * 12/70 (207..195)
       d 220..360  free arc   -> d - 25                 (195..335, unchanged)
     clamp(0, (d - x) * 1e6 + 1, 1) is a step: 0 below x, 1 from x. */
  --surux-cyberpunk-fold: oklch(from var(--surux-primary) l c mod(h - 335, 360));
  --surux-cyberpunk-neon: oklch(from var(--surux-cyberpunk-fold, transparent) l c calc(
      (1 - clamp(0, (h - 150) * 1e6 + 1, 1)) * (335 - h / 6)
    + (clamp(0, (h - 150) * 1e6 + 1, 1) - clamp(0, (h - 220) * 1e6 + 1, 1)) * (195 + (220 - h) * 12 / 70)
    + clamp(0, (h - 220) * 1e6 + 1, 1) * (h - 25)));
  /* Neon as TEXT (eyebrows, table heads, the active tab, record codes, band ink): the same hue
     and chroma, lifted to at least L .72 so it reads 4.5:1 on the tinted panels even for the
     deep vivid inks (Red and Purple vivid sit at L .62). Icons and edges use the neon itself. */
  --surux-cyberpunk-neon-ink: oklch(from var(--surux-cyberpunk-neon, transparent) max(l, .72) c h);
  --surux-cyberpunk-accent-neon: var(--surux-cyberpunk-neon, transparent);
  --surux-cyberpunk-accent-ink: var(--surux-cyberpunk-neon-ink, transparent);
  --surux-cyberpunk-accent-glow: color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 42%, transparent);
  --surux-emissive-ink: var(--surux-cyberpunk-neon, transparent);
  --surux-cyberpunk-neon-hot: color-mix(in oklab, var(--surux-cyberpunk-neon, transparent) 58%, #ffffff);
  --surux-cyberpunk-edge: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 64%, transparent);
  --surux-cyberpunk-edge-dim: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 34%, transparent);
  --surux-cyberpunk-edge-faint: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 8%, transparent);
  --surux-cyberpunk-glow: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 52%, transparent);
  --surux-cyberpunk-glow-soft: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 22%, transparent);
  /* Opaque boundary for fields, switches, segmented frames and link underlines: 3:1 against the
     panels on every palette probed (legibility-report.json). */
  --surux-cyberpunk-rim: color-mix(in oklab, var(--surux-cyberpunk-neon, transparent) 88%, var(--surux-cyberpunk-void, transparent));
  --surux-cyberpunk-void: color-mix(in oklab, var(--surux-surface-base) 20%, #000000);
  --surux-cyberpunk-panel: color-mix(in oklab, color-mix(in oklab, var(--surux-surface-base) 44%, #000000) 94%, var(--surux-cyberpunk-neon, transparent) 6%);
  --surux-cyberpunk-panel-2: color-mix(in oklab, color-mix(in oklab, var(--surux-surface-2-base) 50%, #000000) 89%, var(--surux-cyberpunk-neon, transparent) 11%);
  --surux-cyberpunk-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
  /* Mono caps are fitted to Default's widths: tight tracking on compact labels (chips, tabs,
     segments, buttons, heads), wide tracking only on short eyebrows. */
  --surux-cyberpunk-tracking: .03em;
  --surux-cyberpunk-tracking-wide: .1em;
  --surux-cyberpunk-scanlines: repeating-linear-gradient(180deg, color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 7%, transparent) 0 1px, transparent 1px 3px);
  --surux-cyberpunk-grid-size: 56px;
}

/* A browser without relative colours or mod() gets the unfolded palette ink (the round-1 look). */
@supports not (color: oklch(from red l c calc(mod(h - 335, 360) * 1))) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) {
    --surux-cyberpunk-neon: var(--surux-primary);
    --surux-cyberpunk-neon-ink: var(--surux-primary);
  }
}


:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-fusion="live"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) {
  --surux-cyberpunk-fusion-fold: oklch(from var(--surux-cyberpunk-fusion-source, var(--surux-primary)) l c mod(h - 335, 360));
  --surux-cyberpunk-accent-neon: oklch(from var(--surux-cyberpunk-fusion-fold, transparent) l c calc(
      (1 - clamp(0, (h - 150) * 1e6 + 1, 1)) * (335 - h / 6)
    + (clamp(0, (h - 150) * 1e6 + 1, 1) - clamp(0, (h - 220) * 1e6 + 1, 1)) * (195 + (220 - h) * 12 / 70)
    + clamp(0, (h - 220) * 1e6 + 1, 1) * (h - 25)));
  --surux-cyberpunk-accent-ink: oklch(from var(--surux-cyberpunk-accent-neon, transparent) max(l, .72) c h);
  --surux-cyberpunk-accent-glow: color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 42%, transparent);
}

/* Reduced transparency: the scanline texture (a translucent layer) goes; blur is already none. */
@media (prefers-reduced-transparency: reduce) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) {
    --surux-cyberpunk-scanlines: none;
  }
}

/* ------------------------------------------------------------------ 2. Page and shell */
/* The void: a faint neon grid and a low horizon glow behind everything. Background only,
   so imagery and video painted by content sit on top of it untouched. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) body {
  background:
    radial-gradient(ellipse 90% 60% at 50% 120%, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 15%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 0%, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 9%, transparent), transparent 70%),
    linear-gradient(var(--surux-cyberpunk-edge-faint, transparent) 1px, transparent 1px) 0 0 / var(--surux-cyberpunk-grid-size, 56px) var(--surux-cyberpunk-grid-size, 56px),
    linear-gradient(90deg, var(--surux-cyberpunk-edge-faint, transparent) 1px, transparent 1px) 0 0 / var(--surux-cyberpunk-grid-size, 56px) var(--surux-cyberpunk-grid-size, 56px),
    var(--surux-app-bg);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-topbar {
  background:
    var(--surux-cyberpunk-scanlines, none),
    linear-gradient(90deg, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 10%, transparent), transparent 40%),
    color-mix(in oklab, var(--surux-app-bg) 90%, var(--surux-cyberpunk-neon, transparent) 4%);
  border-bottom: var(--surux-border-width) solid var(--surux-cyberpunk-edge-dim, transparent);
  box-shadow: 0 1px 0 var(--surux-cyberpunk-edge-faint, transparent), 0 10px 30px -22px var(--surux-cyberpunk-glow, transparent);
}

/* The badge keeps the palette pair (a fill), cut as a tag. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-topbar-badge {
  border-color: var(--surux-app-bg);
  border-radius: 4px 0;
  corner-shape: bevel;
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
  font-family: var(--surux-cyberpunk-mono, ui-monospace, monospace);
  box-shadow: 0 0 10px var(--surux-cyberpunk-glow, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-sidebar, .surux-sidebar-foot) {
  background: var(--surux-cyberpunk-scanlines, none), var(--surux-surface) !important;
  border-right-color: var(--surux-cyberpunk-edge, transparent);
}

/* Command bar: a docked console. Square where it meets the viewport, chamfered above. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-command-bar {
  border-top-color: var(--surux-cyberpunk-edge, transparent);
  border-radius: 18px 18px 0 0;
  corner-shape: bevel;
  background:
    var(--surux-cyberpunk-scanlines, none),
    linear-gradient(180deg, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 8%, transparent), transparent 70%),
    color-mix(in oklab, var(--surux-app-bg) 94%, var(--surux-cyberpunk-neon, transparent) 3%);
  backdrop-filter: none;
}

/* ------------------------------------------------------------------ 3. Chamfers */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(
  .surux-card, .surux-header-band, .surux-modal-content, .surux-modal .modal-content, .surux-dropdown, .dropdown-menu,
  .surux-field-surface, .surux-picker-surface, .surux-segmented-control, .surux-toast,
  .surux-editor-summary-status, .surux-select-list, .surux-picker-actions-menu,
  .surux-command-overflow-panel, .surux-date-display, .surux-chip-chooser > button, .surux-control-switch,
  .surux-workflow-lane, .surux-ticket-card, .surux-page-hero, .surux-tab-button, .surux-page-control,
  .surux-page-size-control, .surux-field-hint-popover, .surux-button-description-bubble,
  .surux-edit-section-icon, .surux-breadcrumb-back, .surux-breadcrumb-knob, .surux-modal-header-icon
) {
  corner-shape: bevel;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-status-chip {
  corner-shape: bevel;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-edit-section-icon, .surux-modal-header-icon) {
  border-radius: 8px 0;
  border-color: var(--surux-cyberpunk-edge-dim, transparent);
  background: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 10%, transparent);
  color: var(--surux-cyberpunk-neon, transparent);
  box-shadow: inset 0 0 12px -6px var(--surux-cyberpunk-glow, transparent);
}

/* ------------------------------------------------------------------ 4. Surfaces */
/* Cards: an emissive rim with a hot tick beside the cut corner (a HUD bracket). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-card:has(> .surux-card-header), .surux-edit-section:has(.surux-edit-section-heading)) {
  border-color: var(--surux-cyberpunk-edge-dim, transparent);
  background-image:
    linear-gradient(135deg, transparent calc(50% + .5px), var(--surux-cyberpunk-accent-neon, transparent) calc(50% + .5px) calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(90deg, var(--surux-cyberpunk-neon, transparent), var(--surux-cyberpunk-accent-neon, transparent) 88px, transparent 88px),
    linear-gradient(180deg, var(--surux-cyberpunk-accent-neon, transparent) 0 44px, transparent 44px);
  background-size: 14px 14px, 100% 2px, 2px 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

/* The header band: scanlined console head with a neon baseline. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-header-band {
  border-color: var(--surux-cyberpunk-edge, transparent);
  background:
    var(--surux-cyberpunk-scanlines, none),
    linear-gradient(100deg, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 16%, transparent), transparent 46%),
    var(--surux-surface);
  box-shadow:
    inset 0 -2px 0 var(--surux-cyberpunk-edge-dim, transparent),
    0 0 34px -14px var(--surux-cyberpunk-glow, transparent);
}

/* Work board lanes are cards too. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-workflow-lane {
  border-color: var(--surux-cyberpunk-edge-dim, transparent);
  border-radius: var(--surux-radius-card);
  background: var(--surux-surface);
  box-shadow: var(--surux-elevation-card);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-workflow-lane-header {
  background: var(--surux-cyberpunk-scanlines, none), color-mix(in oklab, var(--surux-surface) 80%, var(--surux-cyberpunk-neon, transparent) 8%);
  border-bottom-color: var(--surux-cyberpunk-edge-dim, transparent);
}

/* Optional motion: one slow scan sweeps down the header band (7 s, never a flash). It runs only
   while header Motion is Live and the device does not ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"])[data-surux-header-motion="live"] .surux-header-band::after {
    content: "";
    position: absolute;
    inset: 0;
      border-radius: inherit;
    corner-shape: bevel;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0 42%, color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 9%, transparent) 50%, transparent 58% 100%) 0 0 / 100% 300% no-repeat;
    animation: surux-cyberpunk-scan 7s linear infinite;
  }
}

/* Page hero: the same console panel, lit by a neon border gradient. Hero tokens are the
   component's own, so they are restated here rather than through a shared token. The radius
   comes from --surux-radius-hero. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-page-hero:has(.surux-page-hero-halo) {
  --surux-hero-deep: color-mix(in oklab, var(--surux-surface) 78%, var(--surux-cyberpunk-neon, transparent) 22%);
  --surux-hero-panel: var(--surux-app-bg);
  --surux-hero-mark-background: var(--surux-primary-action-bg);
  --surux-hero-mark-ink: var(--surux-primary-contrast);
  border-radius: var(--surux-radius-hero);
  background:
    var(--surux-cyberpunk-scanlines, none) padding-box,
    linear-gradient(140deg, var(--surux-hero-deep), var(--surux-hero-panel) 72%) padding-box,
    linear-gradient(135deg, var(--surux-cyberpunk-neon-hot, transparent), var(--surux-cyberpunk-neon, transparent) 35%, var(--surux-cyberpunk-accent-neon, transparent) 70%, var(--surux-cyberpunk-accent-neon, transparent)) border-box;
  box-shadow: 0 0 34px -12px var(--surux-cyberpunk-glow, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-page-hero-halo :is(.surux-page-hero-summary-facts, .surux-page-hero-action-shelf, .surux-page-hero-mark) {
  border-radius: 8px 0;
  corner-shape: bevel;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-art {
  opacity: .55;
}

/* Page titles glow; the text itself stays the appearance's text colour (4.5:1). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-page-title-row h1, .surux-page-hero-heading h1, .surux-modal-title) {
  letter-spacing: .01em;
  text-shadow: 0 0 18px var(--surux-cyberpunk-glow, transparent), 0 0 2px var(--surux-cyberpunk-glow-soft, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-breadcrumb-back {
  border-radius: 9px 0;
  border-color: var(--surux-cyberpunk-edge, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 14%, transparent), transparent 80%), var(--surux-app-bg);
  box-shadow: 0 0 16px -8px var(--surux-cyberpunk-glow, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-breadcrumb-knob {
  border-radius: 6px 0;
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
  box-shadow: 0 0 10px var(--surux-cyberpunk-glow-soft, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-header-band .surux-breadcrumb-back,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-header-band .surux-breadcrumb-knob {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--surux-band-fg, var(--surux-cyberpunk-neon-ink, transparent));
}

/* ------------------------------------------------------------------ 5. Labels: uppercase mono */
/* Compact labels: tight tracking, so a label is no wider than Default's sans label. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(
  .surux-eyebrow, .surux-edit-section-heading p, .surux-table thead th, .surux-field-label, .surux-picker-floating-label,
  .surux-choice-label, .surux-tab-button > span,
  .surux-breadcrumb, .surux-breadcrumb-name, .surux-band-record-facts dt, .surux-page-hero-details-label,
  .surux-workflow-lane-count-label, .surux-segmented-control > button, .surux-page-total,
  .surux-toast-title, .surux-record-code, .surux-page-hero-summary-facts dt, .surux-band-segment
) {
  font-family: var(--surux-cyberpunk-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: var(--surux-cyberpunk-tracking, .03em);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-status-chip {
  font-family: var(--surux-cyberpunk-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: var(--surux-cyberpunk-tracking, .03em);
}

/* Eyebrows are short and set the HUD tone: wide tracking, neon ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-eyebrow, .surux-edit-section-heading p) {
  color: var(--surux-cyberpunk-neon-ink, transparent);
  letter-spacing: var(--surux-cyberpunk-tracking-wide, .1em);
  text-shadow: 0 0 10px var(--surux-cyberpunk-glow-soft, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-field-label, .surux-picker-floating-label, .surux-choice-label) {
  font-size: .68rem;
  font-weight: 600;
}

/* The list count is a sentence, not a label: mono digits, sentence case. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-list-count {
  font-family: var(--surux-cyberpunk-mono, ui-monospace, monospace);
  font-size: .8rem;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-workflow-lane-count-label {
  font-size: .66rem;
}

/* ------------------------------------------------------------------ 6. Lists */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-table {
  --bs-table-hover-bg: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 8%, transparent);
  --bs-table-active-bg: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 13%, transparent);
  --bs-table-border-color: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 12%, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-table thead th {
  background: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 7%, transparent);
  color: var(--surux-cyberpunk-neon-ink, transparent);
  font-size: .7rem;
  font-weight: 600;
  border-bottom: var(--surux-border-width) solid var(--surux-cyberpunk-edge, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-table tbody tr[aria-selected="true"] > :first-child {
  box-shadow: inset 3px 0 0 var(--surux-cyberpunk-neon, transparent), inset 0 0 0 9999px var(--bs-table-active-bg);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-record-code {
  color: var(--surux-cyberpunk-neon-ink, transparent);
  font-size: .8rem;
  text-shadow: 0 0 10px var(--surux-cyberpunk-glow-soft, transparent);
}

/* Record links: always underlined, in every palette. Default shows the underline only on hover;
   Cyberpunk's dense uppercase-and-mono chrome needs the link to read as a link at rest. The
   underline is the opaque rim (3:1 on the panels), and turns hot and thicker on hover or focus. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-record-link, .surux-record-link:visited) {
  text-decoration-line: underline;
  text-decoration-color: var(--surux-cyberpunk-rim, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-record-link:is(:hover, :active, :focus-visible) {
  text-decoration-color: var(--surux-cyberpunk-neon-hot, transparent);
  text-decoration-thickness: 2px;
}

/* Status chips: hex-cut tags. Their tone colours are untouched and they never glow, so the neon
   cannot be mistaken for a status. Sized so the mono caps are no wider than Default's chip. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-status-chip {
  min-height: 24px;
  padding: .3rem .5rem;
  font-size: .64rem;
  font-weight: 700;
}

/* Tabs: a lit rail under the active tab. Label and padding fitted to Default's tab widths. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-tab-button {
  border-radius: 10px 0 0 0;
  padding-inline: .8rem;
  font-size: .7rem;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-tab-button i {
  color: var(--surux-cyberpunk-neon, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-tab-button:is(.active, [aria-selected="true"]) {
  border-color: var(--surux-cyberpunk-edge-dim, transparent);
  border-bottom-color: var(--surux-cyberpunk-accent-neon, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 18%, transparent));
  color: var(--surux-cyberpunk-neon-ink, transparent);
  box-shadow: inset 0 -2px 0 var(--surux-cyberpunk-accent-neon, transparent), 0 10px 18px -12px var(--surux-cyberpunk-glow, transparent);
  text-shadow: 0 0 10px var(--surux-cyberpunk-glow-soft, transparent);
}

/* Segmented control: the selected segment is a lit block (the palette fill, as selection). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-segmented-control {
  border-color: var(--surux-cyberpunk-rim, transparent);
  background: var(--surux-app-bg);
  box-shadow: none;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-segmented-control > button {
  padding-inline: 10px;
  font-size: 11px;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-segmented-control::before {
  border-radius: 5px 0;
  corner-shape: bevel;
  box-shadow: 0 0 12px var(--surux-cyberpunk-glow, transparent);
}

/* Emissive ink that Default paints with the raw palette ink (--surux-primary or
   --surux-primary-rgb) and that no role token reaches: the neon replaces it, so a folded palette
   shows no stray palette-red or palette-green edge. Fills (action, switch on, selected segment,
   badges, selected choice tile) keep the palette pair as selection. See NOTES.md, proposed
   shared token --surux-emissive-ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-header-band, .surux-choice-swatch) {
  --surux-band-ink: var(--surux-cyberpunk-accent-ink, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-breadcrumb i, .surux-sort-link.active i) {
  color: var(--surux-cyberpunk-neon, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-select-option > [aria-hidden] {
  color: var(--surux-cyberpunk-neon-ink, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-select-option.is-active, .surux-select-option:not([aria-disabled="true"]):hover) {
  background: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 14%, var(--surux-surface));
  outline-color: var(--surux-cyberpunk-neon, transparent);
}

/* Pager selects: the neon frame of a field, chamfered; focus lights the rim. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector) {
  border-color: var(--surux-cyberpunk-edge, transparent);
  border-radius: 6px 0;
  corner-shape: bevel;
  background-color: color-mix(in oklab, var(--surux-app-bg) 88%, var(--surux-cyberpunk-neon, transparent) 12%);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector):is(:focus, [aria-expanded="true"]) {
  border-color: var(--surux-cyberpunk-neon, transparent);
  box-shadow: 0 0 0 1px var(--surux-cyberpunk-neon, transparent), 0 0 14px -4px var(--surux-cyberpunk-glow, transparent);
}

/* ------------------------------------------------------------------ 7. Fields */
/* Low specificity on purpose: validation (warning edge) and disabled rules keep winning. The rest
   halo is small, so the rim still stands 3:1 against what lies just outside it. */
:where(:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"])) :is(.surux-field-shell, .surux-picker-shell) {
  --surux-picker-accent: var(--surux-cyberpunk-neon, transparent);
  --surux-picker-edge: var(--surux-cyberpunk-rim, transparent);
  --surux-picker-rest: color-mix(in oklab, var(--surux-app-bg) 55%, var(--surux-surface-2));
  --surux-picker-well: var(--surux-app-bg);
  --surux-picker-shadow: transparent;
  --surux-picker-highlight: transparent;
  --surux-picker-inset: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 16%, transparent);
  --surux-picker-glow: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 26%, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) {
  box-shadow:
    0 0 0 1px var(--surux-cyberpunk-neon, transparent),
    0 0 0 3px var(--surux-cyberpunk-accent-neon, transparent),
    0 0 20px -6px var(--surux-cyberpunk-accent-neon, transparent);
}

/* The toolbar search frame draws its own border from --surux-input-border; give it the field edge. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-control-field.surux-search-input-box {
  border-color: var(--surux-picker-edge);
}

/* Switch: a chamfered track that lights when on (the on fill is the palette pair). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .form-switch .form-check-input {
  border-radius: 4px;
  corner-shape: bevel;
  border-color: color-mix(in oklab, var(--surux-cyberpunk-neon, transparent) 55%, var(--surux-muted));
  background-color: var(--surux-app-bg);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .form-switch .form-check-input:checked {
  border-color: var(--surux-cyberpunk-neon-hot, transparent);
  background-color: var(--surux-primary-action-bg);
  box-shadow: 0 0 12px var(--surux-cyberpunk-glow, transparent);
}

/* ------------------------------------------------------------------ 8. Floating layers and dialogs */
/* Opaque (no blur token, solid --surux-surface); radius from --surux-radius-menu / -input. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-dropdown, .dropdown-menu) {
  --bs-dropdown-bg: var(--surux-surface);
  --bs-dropdown-border-color: var(--surux-cyberpunk-edge, transparent);
  --bs-dropdown-border-radius: var(--surux-radius-menu);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 16%, transparent);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 24%, transparent);
  --bs-dropdown-link-active-color: var(--surux-text);
  box-shadow: var(--surux-elevation-float);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-modal .modal-content, .surux-modal-content) {
  border-color: var(--surux-cyberpunk-edge, transparent);
  background: var(--surux-cyberpunk-scanlines, none), var(--surux-surface);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-modal-header {
  border-bottom-color: color-mix(in srgb, var(--surux-modal-header-accent) 45%, transparent);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-modal-backdrop.show {
  opacity: .78;
  background: var(--surux-app-bg);
}

/* Toast: the tone bar is the toast's own inset shadow; the design adds the chamfer and a faint
   tone wash on an opaque panel. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-toast {
  border-radius: 12px 0;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--surux-toast-tone) 10%, transparent), transparent 52%),
    color-mix(in oklab, var(--surux-surface) 96%, var(--surux-toast-tone) 4%);
}

/* ------------------------------------------------------------------ 9. Focus stays visible */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(a, button, summary, [role="tab"], [role="radio"], .btn):focus-visible {
  outline: 2px solid var(--surux-cyberpunk-neon-hot, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surux-cyberpunk-accent-neon, transparent) 55%, transparent);
}

/* Tabs sit in a scrolling strip that clips anything outside them: the ring goes inside, as
   Default's does. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-tabs .surux-tab-button:focus-visible {
  outline-offset: -4px;
  border-radius: 10px 0 0 0;
}


:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"])[data-surux-header-motion="still"] .surux-header-band::after {
  animation-name: none;
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-header-band::after {
    animation-name: none;
    content: none;
  }
}

} /* @media screen and (forced-colors: none) */

/* ------------------------------------------------------------------ 10. Neon button finish
 * The design's own finish (Button style "Match design" resolves to it). Keyed on the finish as
 * well, so a user who explicitly keeps Glass or Raised on Cyberpunk keeps that finish.
 * The element list sits in :where() so the tone rules below (one class) outrank the base
 * finish; "body" lifts the base to (0,5,1), level with the strongest buttons.css !important
 * rule (html .btn.surux-button.surux-command-button.…-icon-only-subtle), which it follows. */
@media screen and (forced-colors: none) {

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) body :where(
  .btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)),
  .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn,
  .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close
) {
  --surux-button-radius-pill: 7px;
  --surux-button-radius-control: 7px 0;
  --surux-button-radius-chip: 6px 0;
  --surux-button-accent: var(--surux-cyberpunk-neon, transparent);
  --surux-button-bg: color-mix(in oklab, var(--surux-app-bg) 88%, var(--surux-button-accent) 12%);
  --surux-button-fg: var(--surux-text);
  --surux-button-border: color-mix(in srgb, var(--surux-button-accent) 70%, transparent);
  --surux-button-glow: color-mix(in srgb, var(--surux-button-accent) 45%, transparent);
  --surux-button-composed-bg:
    var(--surux-cyberpunk-scanlines, none),
    linear-gradient(180deg, color-mix(in srgb, var(--surux-button-accent) 16%, transparent), transparent 70%),
    var(--surux-button-bg);
  --surux-button-icon-bg: transparent;
  --surux-button-icon-fg: var(--surux-button-accent);
  --surux-button-icon-border: transparent;
  --surux-button-radius: 9px 0;
  border-radius: var(--surux-button-radius);
  border-color: var(--surux-button-border) !important;
  background: var(--surux-button-composed-bg) !important;
  color: var(--surux-button-fg) !important;
  corner-shape: bevel;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 16px -6px var(--surux-button-glow), inset 0 0 12px -8px var(--surux-button-glow) !important;
  font-family: var(--surux-cyberpunk-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: var(--surux-cyberpunk-tracking, .03em);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) body :where(
  .btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)),
  .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn,
  .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close
)::before {
  inset: 0;
  border-radius: inherit;
  corner-shape: bevel;
  background: linear-gradient(90deg, var(--surux-button-accent) 0 14px, transparent 14px) 0 0 / 100% 2px no-repeat;
  opacity: .9;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) body :where(
  .btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)):not(.dropdown-toggle),
  .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn,
  .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close
)::after {
  border-radius: inherit;
  corner-shape: bevel;
  background: var(--surux-button-glow);
  filter: blur(10px);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-command-button-icon {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--surux-button-icon-fg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: drop-shadow(0 0 4px var(--surux-button-glow));
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-secondary {
  --surux-button-accent: var(--surux-muted);
  --surux-button-border: color-mix(in srgb, var(--surux-muted) 55%, transparent);
  --surux-button-glow: transparent;
  --surux-button-icon-fg: var(--surux-text);
}

/* Action: the palette pair fill (the user's colour), with a hot neon rim.
   Unfilled surfaces are excluded: their ink is the neon glyph, not the on-fill contrast. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-action:not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-subtle-surface, .surux-command-button-icon-only-tinted)) {
  --surux-button-bg: var(--surux-primary-action-bg);
  --surux-button-fg: var(--surux-primary-contrast);
  --surux-button-border: var(--surux-cyberpunk-neon-hot, transparent);
  --surux-button-glow: color-mix(in srgb, var(--surux-cyberpunk-neon, transparent) 60%, transparent);
  --surux-button-icon-fg: var(--surux-primary-contrast);
  --surux-button-composed-bg: linear-gradient(180deg, rgb(255 255 255 / .18), transparent 55%), var(--surux-button-bg);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-action::before {
  background: none;
}

/* Tone buttons take their status colour: the status owns its hue, the neon never stands in. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-button-tone-destructive, .surux-line-delete-btn) {
  --surux-button-accent: var(--surux-danger-fill);
  --surux-button-fg: var(--surux-danger);
  --surux-button-icon-fg: var(--surux-danger);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-warning {
  --surux-button-accent: var(--surux-warning-fill);
  --surux-button-fg: var(--surux-warning);
  --surux-button-icon-fg: var(--surux-warning);
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-submitted { --surux-button-accent: var(--surux-workflow-submitted-border); --surux-button-fg: var(--surux-workflow-submitted-color); --surux-button-icon-fg: var(--surux-workflow-submitted-color); }
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-approved { --surux-button-accent: var(--surux-workflow-approved-border); --surux-button-fg: var(--surux-workflow-approved-color); --surux-button-icon-fg: var(--surux-workflow-approved-color); }
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-paid { --surux-button-accent: var(--surux-workflow-paid-border); --surux-button-fg: var(--surux-workflow-paid-color); --surux-button-icon-fg: var(--surux-workflow-paid-color); }
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-button-tone-rejected { --surux-button-accent: var(--surux-workflow-rejected-border); --surux-button-fg: var(--surux-workflow-rejected-color); --surux-button-icon-fg: var(--surux-workflow-rejected-color); }

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-button-pressed, .surux-command-button[aria-pressed="true"], .surux-command-overflow[open] .surux-command-overflow-trigger) {
  --surux-button-bg: color-mix(in oklab, var(--surux-app-bg) 70%, var(--surux-button-accent) 30%);
  --surux-button-border: var(--surux-cyberpunk-neon-hot, transparent);
  --surux-button-fg: var(--surux-text);
}

/* Subtle, icon-only-subtle and icon-only-tinted: unlit at rest, a neon glyph with no plate.
   The base finish paints color from --surux-button-fg. Every tone, including Action, takes the
   neon here so a filled-button contrast ink cannot sit on the void. .surux-button lifts this
   above the shared accent colour in surux.buttons.css. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-command-button-icon-only-subtle, .surux-command-button-subtle-surface, .surux-command-button-icon-only-tinted, .surux-command-overflow-trigger-icon-only-subtle):is(.surux-button, .surux-command-button, .surux-command-overflow-trigger) {
  --surux-button-border: var(--surux-cyberpunk-edge-faint, transparent);
  --surux-button-composed-bg: transparent;
  --surux-button-fg: var(--surux-cyberpunk-neon, var(--surux-button-subtle-accent));
  --surux-button-icon-fg: var(--surux-cyberpunk-neon, var(--surux-button-subtle-accent));
  color: var(--surux-button-fg) !important;
  box-shadow: none !important;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-command-button-icon-only-subtle, .surux-command-button-subtle-surface, .surux-command-button-icon-only-tinted, .surux-command-overflow-trigger-icon-only-subtle)::before {
  background: none;
}

/* Hover lifts the glow only; no movement (and none at all under reduced motion). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"][data-surux-button-style="neon"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) :is(.surux-button, .surux-command-button, .surux-icon-btn, .surux-command-overflow-trigger):is(:hover, :focus-visible) {
  transform: none;
  box-shadow: 0 0 22px -4px var(--surux-button-glow), inset 0 0 16px -8px var(--surux-button-glow) !important;
}

/* TR-0000982. The priority edge inherits the chamfer so it follows the cut corner, inside the neon rim. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-workflow-card-surface::before {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  inset-inline-start: 0;
  corner-shape: inherit;
}

} /* Neon finish */

@media screen and (forced-colors: none) {
:is(html, [data-surux-preference-preview])[data-surux-surface-style="cyberpunk"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) {
  --surux-metric-tile-corner: bevel;
  --surux-metric-tile-edge: var(--surux-cyberpunk-edge-dim, var(--surux-border));
  --surux-metric-tile-bg: color-mix(in oklab, var(--surux-surface) 94%, var(--surux-cyberpunk-neon, transparent) 6%);
}
}