.appearance-picker { --appearance-control-focus: var(--border-focus, var(--signal)); }

html[data-appearance="hackerman"] {
  color-scheme: dark;
  --bg-deep: #0b1510;
  --bg-surface: #122019;
  --bg-elevated: #192b21;
  --bg-overlay: #22382b;
  --cyan: #54ff8a;
  --cyan-dim: #8be9a7;
  --cyan-glow: rgba(84, 255, 138, .22);
  --cyan-subtle: rgba(84, 255, 138, .10);
  --amber: #ffcc66;
  --amber-dim: #ffda91;
  --amber-glow: rgba(255, 204, 102, .18);
  --green: #61e0c1;
  --green-glow: rgba(97, 224, 193, .18);
  --red: #ff7890;
  --red-glow: rgba(255, 120, 144, .18);
  --team-blue: #58b9ff;
  --yellow: #ffe079;
  --text-primary: #e1f8e7;
  --text-secondary: #a3cbaa;
  --text-muted: #87b392;
  --border: #5d966e;
  --border-focus: #54ff8a;
  --panel-border: #274533;
  --paper: #0b1510;
  --field: #192b21;
  --ink: #e1f8e7;
  --muted: #a3cbaa;
  --line: #5d966e;
  --signal: #54ff8a;
  --operations-bg: #0b1510;
  --operations-panel: #122019;
  --operations-line: #5d966e;
  --operations-text: #e1f8e7;
  --operations-muted: #a3cbaa;
  --operations-signal: #54ff8a;
  --operations-danger: #ff7890;
  --topology-active: var(--green);
  --topology-muted: var(--text-muted);
  --topology-creating: var(--amber);
  --topology-failed: var(--red);
  --topology-open: var(--cyan);
  --topology-link: var(--border);
  --topology-wan-fill: var(--bg-elevated);
  --topology-wan-stroke: var(--border);
  --topology-wan-text: var(--text-muted);
  --topology-event-fill: var(--cyan-subtle);
  --topology-event-glow: var(--cyan-glow);
  --topology-team-fill: var(--amber-glow);
  --topology-team-stroke: var(--amber);
  --attack-tree-success: var(--green);
  --attack-tree-failed: var(--red);
  --attack-tree-muted: var(--text-muted);
  --caldera-exploited: var(--red);
  --caldera-defended: var(--green);
  --caldera-pending: var(--text-muted);
  --caldera-approval: var(--amber);
}

html[data-appearance="pretty-pink"] {
  color-scheme: light;
  --network-intensity: 2.1;
  --bg-deep: #faf3f6;
  --bg-surface: #fffafd;
  --bg-elevated: #f4e4ec;
  --bg-overlay: #ecd5e1;
  --cyan: #a81759;
  --cyan-dim: #812447;
  --cyan-glow: rgba(168, 23, 89, .16);
  --cyan-subtle: rgba(168, 23, 89, .08);
  --amber: #8b4b00;
  --amber-dim: #925000;
  --amber-glow: rgba(139, 75, 0, .12);
  --green: #176d4f;
  --green-glow: rgba(23, 109, 79, .13);
  --red: #ab2440;
  --red-glow: rgba(171, 36, 64, .13);
  --team-blue: #075d9c;
  --yellow: #835000;
  --text-primary: #32152a;
  --text-secondary: #68445a;
  --text-muted: #77566a;
  --border: #a85b80;
  --border-focus: #671037;
  --panel-border: #ead7e1;
  --paper: #faf3f6;
  --field: #f4e4ec;
  --ink: #32152a;
  --muted: #68445a;
  --line: #a85b80;
  --signal: #a81759;
  --operations-bg: #faf3f6;
  --operations-panel: #fffafd;
  --operations-line: #a85b80;
  --operations-text: #32152a;
  --operations-muted: #68445a;
  --operations-signal: #a81759;
  --operations-danger: #ab2440;
  --topology-active: var(--green);
  --topology-muted: var(--text-muted);
  --topology-creating: var(--amber);
  --topology-failed: var(--red);
  --topology-open: var(--cyan);
  --topology-link: var(--border);
  --topology-wan-fill: var(--bg-elevated);
  --topology-wan-stroke: var(--border);
  --topology-wan-text: var(--text-muted);
  --topology-event-fill: var(--cyan-subtle);
  --topology-event-glow: var(--cyan-glow);
  --topology-team-fill: var(--amber-glow);
  --topology-team-stroke: var(--amber);
  --attack-tree-success: var(--green);
  --attack-tree-failed: var(--red);
  --attack-tree-muted: var(--text-muted);
  --caldera-exploited: var(--red);
  --caldera-defended: var(--green);
  --caldera-pending: var(--text-muted);
  --caldera-approval: var(--amber);
}

html[data-appearance="pretty-pink"] body.admin-app { color-scheme: light; }
html[data-appearance="pretty-pink"] :is(.card, .metric-card, .module-card, dialog) {
  border-radius: 16px;
}
html[data-appearance="pretty-pink"] :is(.planner-rail, .planner-inspector, .planner-canvas-wrap, .modules-rail, .modules-catalogue, .module-inspector) {
  border-radius: 16px;
}
html[data-appearance="hackerman"] body[data-view] {
  font-family: 'JetBrains Mono', monospace;
}
html[data-appearance="hackerman"] body[data-view] :is(h1, h2, h3) {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.035em;
}
html[data-appearance="hackerman"] :is(.brand, .admin-brand, .planner-brand, .operations-brand, .wordmark) {
  text-shadow: 0 0 12px var(--cyan-glow);
}
html[data-appearance="hackerman"] :is(.card, .metric-card, .module-card, dialog) {
  border-radius: 0;
}
html[data-appearance="hackerman"] .btn-primary,
html[data-appearance="pretty-pink"] .btn-primary { background: var(--cyan); color: var(--bg-deep); }
html[data-appearance="hackerman"] .btn-danger,
html[data-appearance="pretty-pink"] .btn-danger { background: var(--red); color: var(--bg-deep); }
html[data-appearance="hackerman"] .badge-easy,
html[data-appearance="pretty-pink"] .badge-easy { background: var(--green-glow); }
html[data-appearance="hackerman"] .badge-medium,
html[data-appearance="pretty-pink"] .badge-medium { background: var(--amber-glow); }
html[data-appearance="hackerman"] .badge-hard,
html[data-appearance="pretty-pink"] .badge-hard { background: var(--red-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .btn-primary:hover {
  box-shadow: 0 0 25px var(--cyan-glow), 0 0 50px var(--cyan-subtle);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .flash {
  background: var(--red-glow);
  border-color: var(--red);
}

/* The standalone learner shell uses its own historic token names. */
html[data-appearance="hackerman"] .masthead,
html[data-appearance="pretty-pink"] .masthead { border-color: var(--line); }
html[data-appearance="hackerman"] .masthead nav a,
html[data-appearance="pretty-pink"] .masthead nav a { color: var(--muted); }
html[data-appearance="hackerman"] .masthead nav a[aria-current="page"],
html[data-appearance="pretty-pink"] .masthead nav a[aria-current="page"] { color: var(--ink); }
html[data-appearance="hackerman"] .learner-account .appearance-picker,
html[data-appearance="pretty-pink"] .learner-account .appearance-picker { color: var(--muted); }
html[data-appearance="hackerman"] dialog,
html[data-appearance="pretty-pink"] dialog { background: var(--bg-surface); color: var(--text-primary); }

/* The operations list has a separate, deliberately compact token set. */
html[data-appearance="hackerman"] .operations-dialog input,
html[data-appearance="hackerman"] .operations-dialog textarea,
html[data-appearance="pretty-pink"] .operations-dialog input,
html[data-appearance="pretty-pink"] .operations-dialog textarea {
  background: var(--bg-deep);
  color: var(--operations-text);
}
html[data-appearance="pretty-pink"] .operations-danger { color: #fffafd !important; }

/* Shared controls and admin surfaces must stay legible in light and dark palettes. */
html[data-appearance="hackerman"] body.admin-app select,
html[data-appearance="pretty-pink"] body.admin-app select,
html[data-appearance="hackerman"] body.admin-app input,
html[data-appearance="pretty-pink"] body.admin-app input,
html[data-appearance="hackerman"] body.admin-app textarea,
html[data-appearance="pretty-pink"] body.admin-app textarea {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
}
html[data-appearance="hackerman"] body.admin-app input:focus,
html[data-appearance="pretty-pink"] body.admin-app input:focus,
html[data-appearance="hackerman"] body.admin-app textarea:focus,
html[data-appearance="pretty-pink"] body.admin-app textarea:focus,
html[data-appearance="hackerman"] body.admin-app select:focus,
html[data-appearance="pretty-pink"] body.admin-app select:focus { background: var(--bg-surface); }
html[data-appearance="hackerman"] body.admin-app select:hover,
html[data-appearance="pretty-pink"] body.admin-app select:hover { border-color: var(--cyan-dim); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) body.admin-app :is(input:not([type="checkbox"]):not([type="radio"]), textarea):hover {
  border-color: var(--cyan-dim);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .admin-sidebar .admin-nav a:is(:hover, :focus-visible) {
  border-color: var(--cyan-subtle);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .admin-sidebar .admin-nav a.active {
  border-color: var(--cyan-glow);
}
html[data-appearance="hackerman"] .gamenet-rail,
html[data-appearance="pretty-pink"] .gamenet-rail { background: var(--bg-surface); }
html[data-appearance="hackerman"] .drawer-backdrop,
html[data-appearance="pretty-pink"] .drawer-backdrop { background: color-mix(in srgb, var(--bg-deep) 78%, transparent); }
html[data-appearance="hackerman"] .image-status--ready,
html[data-appearance="pretty-pink"] .image-status--ready,
html[data-appearance="hackerman"] .image-status--active,
html[data-appearance="pretty-pink"] .image-status--active,
html[data-appearance="hackerman"] .validation-gates .passed strong,
html[data-appearance="pretty-pink"] .validation-gates .passed strong { color: var(--green); }
html[data-appearance="hackerman"] .image-status--failed,
html[data-appearance="pretty-pink"] .image-status--failed,
html[data-appearance="hackerman"] .image-status--interrupted,
html[data-appearance="pretty-pink"] .image-status--interrupted,
html[data-appearance="hackerman"] .image-error,
html[data-appearance="pretty-pink"] .image-error { color: var(--red); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.status.open, .status.ready, .status.active, .gamenet-node.gateway, .gamenet-node.firewall) {
  border-color: var(--green);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.status.failed, .status.critical, .btn-remove:hover) {
  border-color: var(--red);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .gamenet-node.zone.blue { border-left-color: var(--team-blue); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .gamenet-node.zone.red { border-left-color: var(--red); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.status-badge.open, .op-state-finished, .vm-defended) { background: var(--green-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.status-badge.stopped, .vm-vulnerable) { background: var(--red-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.op-state-running, .tactic-badge) { background: var(--cyan-subtle); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .op-state-cleanup { background: var(--amber-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .tactic-badge { border-color: var(--cyan-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .alert-list .alert { background: var(--amber-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .alert-list .alert.critical { background: var(--red-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .all-clear { background: var(--green-glow); border-color: var(--green); }

/* Planner and generated SVG canvases keep role colours, but use active surfaces. */
html[data-appearance="hackerman"] .planner-canvas-wrap,
html[data-appearance="pretty-pink"] .planner-canvas-wrap,
html[data-appearance="hackerman"] .cyberlab-topology,
html[data-appearance="pretty-pink"] .cyberlab-topology {
  background-color: var(--bg-deep);
  background-image: linear-gradient(var(--cyan-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan-subtle) 1px, transparent 1px);
}
html[data-appearance="hackerman"] .zone-container .zone-container-body,
html[data-appearance="pretty-pink"] .zone-container .zone-container-body,
html[data-appearance="hackerman"] .topo-node .node-body,
html[data-appearance="pretty-pink"] .topo-node .node-body { fill: var(--bg-elevated); stroke: var(--border); }
html[data-appearance="hackerman"] .topo-node.selected .node-body,
html[data-appearance="pretty-pink"] .topo-node.selected .node-body { stroke: var(--cyan); }
html[data-appearance="hackerman"] .topo-node.invalid .node-body,
html[data-appearance="pretty-pink"] .topo-node.invalid .node-body { stroke: var(--red); }
html[data-appearance="hackerman"] .zone-container .zone-container-header,
html[data-appearance="pretty-pink"] .zone-container .zone-container-header { fill: var(--bg-overlay); stroke: var(--border); }
html[data-appearance="hackerman"] .zone-container .zone-container-divider,
html[data-appearance="pretty-pink"] .zone-container .zone-container-divider,
html[data-appearance="hackerman"] .topo-link,
html[data-appearance="pretty-pink"] .topo-link { stroke: var(--border); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .cyberlab-topology .topo-link:is(.link-system-machine, .link-machine-subnet, .link-router-subnet) {
  stroke: var(--border);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .topo-site {
  fill: var(--cyan-subtle);
  stroke: var(--cyan-dim);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .topo-zone {
  fill: var(--cyan-subtle);
  stroke: var(--cyan-dim);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .topo-zone.red {
  fill: var(--red-glow);
  stroke: var(--red);
}
html[data-appearance="hackerman"] .zone-container.team-blue .zone-container-body,
html[data-appearance="pretty-pink"] .zone-container.team-blue .zone-container-body {
  fill: color-mix(in srgb, var(--team-blue) 13%, var(--bg-elevated));
  stroke: var(--team-blue);
}
html[data-appearance="hackerman"] .zone-container.team-blue .zone-container-header,
html[data-appearance="pretty-pink"] .zone-container.team-blue .zone-container-header {
  fill: color-mix(in srgb, var(--team-blue) 19%, var(--bg-overlay));
  stroke: var(--team-blue);
}
html[data-appearance="hackerman"] .zone-container.team-blue,
html[data-appearance="pretty-pink"] .zone-container.team-blue { --zone-control-accent: var(--team-blue); }
html[data-appearance="hackerman"] .zone-container.team-red .zone-container-body,
html[data-appearance="pretty-pink"] .zone-container.team-red .zone-container-body {
  fill: color-mix(in srgb, var(--red) 13%, var(--bg-elevated));
  stroke: var(--red);
}
html[data-appearance="hackerman"] .zone-container.team-red .zone-container-header,
html[data-appearance="pretty-pink"] .zone-container.team-red .zone-container-header {
  fill: color-mix(in srgb, var(--red) 19%, var(--bg-overlay));
  stroke: var(--red);
}
html[data-appearance="hackerman"] .zone-container.team-red,
html[data-appearance="pretty-pink"] .zone-container.team-red { --zone-control-accent: var(--red); --zone-control-fill: var(--red-glow); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .zone-container.system-managed :is(.zone-container-body, .zone-container-header) {
  fill: color-mix(in srgb, var(--amber) 15%, var(--bg-elevated));
  stroke: var(--amber);
}
html[data-appearance="hackerman"] .zone-address-rail,
html[data-appearance="pretty-pink"] .zone-address-rail { fill: var(--bg-surface); }
html[data-appearance="hackerman"] .zone-container[style*="--node-theme-color"] .zone-container-body,
html[data-appearance="pretty-pink"] .zone-container[style*="--node-theme-color"] .zone-container-body {
  fill: color-mix(in srgb, var(--node-theme-color) 14%, var(--bg-elevated));
  stroke: var(--node-theme-color);
}
html[data-appearance="hackerman"] .zone-container[style*="--node-theme-color"] .zone-container-header,
html[data-appearance="pretty-pink"] .zone-container[style*="--node-theme-color"] .zone-container-header {
  fill: color-mix(in srgb, var(--node-theme-color) 20%, var(--bg-overlay));
  stroke: var(--node-theme-color);
}
html[data-appearance="hackerman"] .zone-container.selected :is(.zone-container-body, .zone-container-header),
html[data-appearance="pretty-pink"] .zone-container.selected :is(.zone-container-body, .zone-container-header) {
  stroke: var(--cyan);
  stroke-width: 2.5;
}
html[data-appearance="hackerman"] .zone-container.invalid :is(.zone-container-body, .zone-container-header),
html[data-appearance="pretty-pink"] .zone-container.invalid :is(.zone-container-body, .zone-container-header) {
  stroke: var(--red);
  stroke-width: 2.5;
}
html[data-appearance="hackerman"] .topo-link.selected-adjacent,
html[data-appearance="pretty-pink"] .topo-link.selected-adjacent { stroke: var(--cyan-dim); }
html[data-appearance="hackerman"] .module-card,
html[data-appearance="pretty-pink"] .module-card { --card-text-primary: var(--text-primary); --card-text-secondary: var(--text-secondary); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .outline-child.green-node .outline-node {
  border-left-color: var(--green);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .deployment-fact.configured { border-color: var(--green); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .deployment-fact.missing {
  border-color: var(--amber);
}
html[data-appearance="pretty-pink"] .modules-app {
  --relation: #733a88;
  --card-text-primary: var(--text-primary);
  --card-text-secondary: var(--text-secondary);
}

/* Operation graph controls and dynamically inserted panels. */
html[data-appearance="hackerman"] .operation-app,
html[data-appearance="pretty-pink"] .operation-app { background: var(--bg-deep); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .operation-validity.is-invalid {
  color: var(--amber);
}
html[data-appearance="hackerman"] .operation-canvas-wrap,
html[data-appearance="pretty-pink"] .operation-canvas-wrap { background-color: var(--bg-deep); background-image: radial-gradient(var(--border) 1px, transparent 1px); }
html[data-appearance="hackerman"] .operation-node .node-card,
html[data-appearance="pretty-pink"] .operation-node .node-card { fill: var(--bg-surface); stroke: var(--border); }
html[data-appearance="hackerman"] .operation-node.selected .node-card,
html[data-appearance="pretty-pink"] .operation-node.selected .node-card { stroke: var(--cyan); }
html[data-appearance="hackerman"] .operation-node.invalid .node-card,
html[data-appearance="pretty-pink"] .operation-node.invalid .node-card { stroke: var(--red); }
html[data-appearance="hackerman"] .operation-node .node-accent,
html[data-appearance="pretty-pink"] .operation-node .node-accent { fill: var(--cyan-subtle); }
html[data-appearance="hackerman"] .operation-port circle,
html[data-appearance="pretty-pink"] .operation-port circle { fill: var(--text-secondary); stroke: var(--bg-deep); }
html[data-appearance="hackerman"] .operation-port.compatible circle,
html[data-appearance="pretty-pink"] .operation-port.compatible circle { stroke: var(--text-primary); }
html[data-appearance="hackerman"] .operation-port.output.success circle,
html[data-appearance="pretty-pink"] .operation-port.output.success circle { fill: var(--green); }
html[data-appearance="hackerman"] .operation-port.output.failure circle,
html[data-appearance="pretty-pink"] .operation-port.output.failure circle { stroke: var(--amber); fill: var(--amber); }
html[data-appearance="hackerman"] .operation-edge[data-condition=failure],
html[data-appearance="pretty-pink"] .operation-edge[data-condition=failure] { stroke: var(--amber); fill: none; }
html[data-appearance="hackerman"] .operation-edge,
html[data-appearance="pretty-pink"] .operation-edge { stroke: var(--text-secondary); }
html[data-appearance="hackerman"] .operation-edge.selected,
html[data-appearance="pretty-pink"] .operation-edge.selected { stroke: var(--cyan); }
html[data-appearance="hackerman"] .operation-canvas-tools,
html[data-appearance="pretty-pink"] .operation-canvas-tools,
html[data-appearance="hackerman"] .operation-zoom-tools,
html[data-appearance="pretty-pink"] .operation-zoom-tools,
html[data-appearance="hackerman"] .operation-minimap,
html[data-appearance="pretty-pink"] .operation-minimap,
html[data-appearance="hackerman"] .operation-overlay,
html[data-appearance="pretty-pink"] .operation-overlay,
html[data-appearance="hackerman"] .operation-node-picker,
html[data-appearance="pretty-pink"] .operation-node-picker,
html[data-appearance="hackerman"] .operation-validation-panel,
html[data-appearance="pretty-pink"] .operation-validation-panel,
html[data-appearance="hackerman"] .operation-context-menu,
html[data-appearance="pretty-pink"] .operation-context-menu { background: var(--bg-overlay); border-color: var(--border); }
html[data-appearance="hackerman"] .operation-node-picker input,
html[data-appearance="pretty-pink"] .operation-node-picker input,
html[data-appearance="hackerman"] .operation-node-picker select,
html[data-appearance="pretty-pink"] .operation-node-picker select,
html[data-appearance="hackerman"] .operation-inspector-panel input,
html[data-appearance="pretty-pink"] .operation-inspector-panel input,
html[data-appearance="hackerman"] .operation-inspector-panel select,
html[data-appearance="pretty-pink"] .operation-inspector-panel select,
html[data-appearance="hackerman"] .operation-inspector-panel textarea,
html[data-appearance="pretty-pink"] .operation-inspector-panel textarea,
html[data-appearance="hackerman"] .operation-inspector-panel button,
html[data-appearance="pretty-pink"] .operation-inspector-panel button,
html[data-appearance="hackerman"] .picker-node,
html[data-appearance="pretty-pink"] .picker-node,
html[data-appearance="hackerman"] .ability-command,
html[data-appearance="pretty-pink"] .ability-command,
html[data-appearance="hackerman"] .ability-dialog-shell button,
html[data-appearance="pretty-pink"] .ability-dialog-shell button { background: var(--bg-deep) !important; color: var(--text-primary); }
html[data-appearance="hackerman"] #ability-details-dialog,
html[data-appearance="pretty-pink"] #ability-details-dialog { background: var(--bg-surface); }
html[data-appearance="hackerman"] .ability-command pre,
html[data-appearance="pretty-pink"] .ability-command pre { color: var(--text-primary); }
html[data-appearance="hackerman"] .ability-dossier-heading button,
html[data-appearance="pretty-pink"] .ability-dossier-heading button,
html[data-appearance="hackerman"] .ability-command button,
html[data-appearance="pretty-pink"] .ability-command button {
  background: var(--bg-deep) !important;
  color: var(--cyan) !important;
}
html[data-appearance="hackerman"] .ability-inspector-tabs button[aria-selected=true],
html[data-appearance="pretty-pink"] .ability-inspector-tabs button[aria-selected=true] { color: var(--cyan); }
html[data-appearance="hackerman"] .picker-node-type,
html[data-appearance="pretty-pink"] .picker-node-type { background: var(--cyan-subtle); }
html[data-appearance="hackerman"] .preview-order span,
html[data-appearance="pretty-pink"] .preview-order span { background: var(--bg-elevated); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .minimap-node {
  fill: var(--text-muted);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .minimap-node.selected {
  fill: var(--cyan);
}

/* Legacy module detail accents keep their semantic roles on light surfaces. */
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .tag {
  background: var(--cyan-subtle);
  border-color: color-mix(in srgb, var(--cyan) 20%, transparent);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .step-type-run {
  background: var(--cyan-subtle);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .step-type-copy {
  background: var(--amber-glow);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .disabled-banner {
  background: var(--red-glow);
  border-color: var(--red);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .detail-row {
  border-color: var(--border);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .hint-header {
  background: var(--bg-elevated);
}
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) .hint-header:hover {
  background: var(--cyan-subtle);
}

html[data-appearance="hackerman"] .timeline-op,
html[data-appearance="pretty-pink"] .timeline-op,
html[data-appearance="hackerman"] .cyberlab-tabs button[aria-selected="true"],
html[data-appearance="pretty-pink"] .cyberlab-tabs button[aria-selected="true"] { background: var(--cyan-subtle); }

html[data-appearance="hackerman"] .topology-toolbar,
html[data-appearance="pretty-pink"] .topology-toolbar,
html[data-appearance="hackerman"] .topo-legend,
html[data-appearance="pretty-pink"] .topo-legend { background: var(--bg-surface); border-color: var(--border); }
html[data-appearance="hackerman"] .topology-select,
html[data-appearance="pretty-pink"] .topology-select,
html[data-appearance="hackerman"] .topology-badge,
html[data-appearance="pretty-pink"] .topology-badge,
html[data-appearance="hackerman"] .topo-tooltip,
html[data-appearance="pretty-pink"] .topo-tooltip,
html[data-appearance="hackerman"] .topo-context-menu,
html[data-appearance="pretty-pink"] .topo-context-menu { border-color: var(--border); }
html[data-appearance="hackerman"] .topology-badge,
html[data-appearance="pretty-pink"] .topology-badge,
html[data-appearance="hackerman"] .topo-context-item:hover,
html[data-appearance="pretty-pink"] .topo-context-item:hover { background: var(--cyan-subtle); }
html[data-appearance="hackerman"] .topo-context-item.danger:hover,
html[data-appearance="pretty-pink"] .topo-context-item.danger:hover { background: var(--red-glow); }
html[data-appearance="hackerman"] .topo-tier-label,
html[data-appearance="pretty-pink"] .topo-tier-label { fill: var(--text-muted); }
:is(html[data-appearance="hackerman"], html[data-appearance="pretty-pink"]) :is(.topo-context-header, .topo-context-item.danger) {
  border-color: var(--border);
}

html[data-appearance="hackerman"] .at-status-succeeded .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-succeeded .at-node-rect { fill: var(--green-glow); stroke: var(--green); }
html[data-appearance="hackerman"] .at-status-failed .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-failed .at-node-rect { fill: var(--red-glow); stroke: var(--red); }
html[data-appearance="hackerman"] .at-status-running .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-running .at-node-rect { fill: var(--cyan-subtle); stroke: var(--cyan); }
html[data-appearance="hackerman"] .at-status-pending .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-pending .at-node-rect,
html[data-appearance="hackerman"] .at-status-default .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-default .at-node-rect { fill: var(--bg-elevated); stroke: var(--border); }
html[data-appearance="hackerman"] .at-status-skipped .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-skipped .at-node-rect,
html[data-appearance="hackerman"] .at-status-infrastructure .at-node-rect,
html[data-appearance="pretty-pink"] .at-status-infrastructure .at-node-rect { fill: var(--bg-elevated); stroke: var(--text-muted); }

.appearance-picker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.appearance-picker select {
  width: auto;
  min-height: 36px;
  max-width: 140px;
  padding: .3rem .5rem;
  border: 1px solid var(--border, var(--line));
  border-radius: 4px;
  background: var(--bg-elevated, var(--field));
  color: var(--text-primary, var(--ink));
  font: inherit;
  cursor: pointer;
}
.appearance-picker select:focus-visible {
  outline: 2px solid var(--border-focus, var(--signal));
  outline-offset: 2px;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus, var(--signal));
  outline-offset: 2px;
}
body.admin-app .admin-account .appearance-picker select:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
body.admin-app .admin-account .appearance-picker { display: inline-flex; width: auto; gap: .5rem; margin: 0; }
body.admin-app .admin-account .appearance-picker select {
  width: auto;
  min-width: 116px;
  min-height: 36px;
  padding: .3rem 1.8rem .3rem .5rem;
  font-size: .75rem;
}
.planner-account .appearance-picker select { max-width: 126px; }
.learner-account {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 1rem;
}
.planner-account .appearance-picker { text-transform: none; }
@media (max-width: 760px) {
  .learner-account form { display: none; }
  .appearance-picker { gap: .3rem; }
}
@media (max-width: 600px) {
  .appearance-picker { font-size: .68rem; }
  .appearance-picker select { max-width: 108px; }
  .planner-context-row { grid-template-columns: 1fr; }
  .planner-account { justify-content: space-between; border-top: 1px solid var(--border); border-left: 0; }
  .planner-account > span { display: none; }
  .planner-account .appearance-picker select { max-width: 108px; }
  .admin-account .appearance-picker { font-size: 0; }
  body.admin-app .admin-account .appearance-picker select {
    min-width: 124px;
    max-width: 124px;
  }
}


/* Ambient geometry stays behind content and never receives pointer input. */
#ambient-network { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
body { isolation: isolate; }
body > nav, .container, .admin-root, .landing-grid { position: relative; z-index: 1; }
.admin-root .admin-layout { background: transparent; }
html[data-appearance="classic"] .card:hover {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 15px var(--cyan-subtle);
}