:root[data-skin="trap"] {
  color-scheme: light;
  --desk: #efe6fb; --desk2: #e2d3f6;
  --plat: #fbf8ff; --plat-lt: #ffffff; --plat-dk: #9b83c0; --plat-mid: #eadff8; --edge: #8a4fd0;
  --ink: #1a1024; --muted: #5d4f72; --field: #ffffff; --sel: #8a2fd6; --sel-ink: #ffffff;
  --ok: #157a4a; --warn: #9a6400; --bad: #c4124f; --link: #7a22c4;
  --ui: "Pixelify Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  --neon: #8a2fd6; --pink: #e0196a; --gold: #9a6400; --glow: 0 0 0 1px rgba(26, 16, 36, .12), 0 4px 16px rgba(138, 47, 214, .16);
  --bar: #120b1b; --bar-ink: #f3ecff; --bar-on: #ffcc33; --title: #f1e8fc; --title-ink: #6a1fb0; --title-line: #dccbf3;
  --btn: #f3ecfd; --btn-hi: #e8dafb; --btn-down: #dccbf3; --line: #c7b2e6; --default: #8a2fd6; --default-hi: #7a22c4; --default-edge: #6a1fb0;
  --toast: #ffffff; --haze1: rgba(184, 77, 255, .18); --haze2: rgba(255, 46, 126, .12); --grid: #1a102408;
}

@media (prefers-color-scheme: dark) { :root[data-skin="trap"]:not([data-theme="light"]) {
  color-scheme: dark; --desk: #0b0711; --desk2: #160c22;
  --plat: #140e1e; --plat-lt: #2b2040; --plat-dk: #05030a; --plat-mid: #211830; --edge: #6d3a9c;
  --ink: #f3ecff; --muted: #b8aacd; --field: #0e0a16; --sel: #b84dff; --ok: #5ef0a6; --warn: #ffcc33; --bad: #ff5c8a; --link: #e3a8ff;
  --neon: #b84dff; --pink: #ff2e7e; --gold: #ffcc33; --glow: 0 0 0 1px #000, 0 0 14px rgba(184, 77, 255, .22);
  --bar: #07050b; --title: #0a0710; --title-ink: #ffcc33; --title-line: #2c1d40;
  --btn: #1c1329; --btn-hi: #2a1c3d; --btn-down: #0e0a16; --line: #3a2856; --default-edge: #d9a3ff; --default-hi: #9d3ff0;
  --toast: #1c1329; --haze1: rgba(184, 77, 255, .16); --haze2: rgba(255, 46, 126, .1); --grid: #ffffff08; } }
:root[data-skin="trap"][data-theme="dark"] {
  color-scheme: dark; --desk: #0b0711; --desk2: #160c22;
  --plat: #140e1e; --plat-lt: #2b2040; --plat-dk: #05030a; --plat-mid: #211830; --edge: #6d3a9c;
  --ink: #f3ecff; --muted: #b8aacd; --field: #0e0a16; --sel: #b84dff; --ok: #5ef0a6; --warn: #ffcc33; --bad: #ff5c8a; --link: #e3a8ff;
  --neon: #b84dff; --pink: #ff2e7e; --gold: #ffcc33; --glow: 0 0 0 1px #000, 0 0 14px rgba(184, 77, 255, .22);
  --bar: #07050b; --title: #0a0710; --title-ink: #ffcc33; --title-line: #2c1d40;
  --btn: #1c1329; --btn-hi: #2a1c3d; --btn-down: #0e0a16; --line: #3a2856; --default-edge: #d9a3ff; --default-hi: #9d3ff0;
  --toast: #1c1329; --haze1: rgba(184, 77, 255, .16); --haze2: rgba(255, 46, 126, .1); --grid: #ffffff08;
}


:root[data-skin="trap"] body { background: radial-gradient(ellipse 55% 35% at 12% 0%, var(--haze1), transparent 70%),
  radial-gradient(ellipse 50% 30% at 100% 100%, var(--haze2), transparent 70%), radial-gradient(var(--grid) 1px, transparent 1px) 0 0 / 4px 4px, var(--desk);
  background-attachment: fixed; }


:root[data-skin="trap"] .menubar { background: var(--bar); color: var(--bar-ink, #f3ecff); border-bottom: 1px solid #b84dff; box-shadow: 0 1px 10px rgba(184, 77, 255, .35); font: 600 13px var(--ui); }
:root[data-skin="trap"] .menubar button.m, :root[data-skin="trap"] .menubar .theme-toggle, :root[data-skin="trap"] .menubar .beat { color: #f3ecff; border-radius: 3px; margin: 2px 0; }
:root[data-skin="trap"] .menubar button.m[aria-current="true"] { background: none; color: #ffcc33; box-shadow: inset 0 -2px 0 #ffcc33; }
:root[data-skin="trap"] .menubar button.m:hover { background: #241736; color: #fff; }
:root[data-skin="trap"] .menubar .apple { color: #b84dff; }


:root[data-skin="trap"] .win { background: var(--plat); border: 1px solid var(--edge); border-radius: 4px; box-shadow: var(--glow); overflow: hidden; }
:root[data-skin="trap"] .win > .title { height: var(--title-h); margin: 0; padding: 0 8px; background: var(--title); border-bottom: 1px solid var(--title-line); }
:root[data-skin="trap"] .win > .title h2 { margin: 0; padding: 0; background: none; color: var(--title-ink); font: 600 13px var(--ui); line-height: var(--title-h); letter-spacing: .06em; text-transform: uppercase; max-width: 80%; }
:root[data-skin="trap"] .win > .title .box { width: 11px; height: 11px; border-radius: 2px; background: var(--btn); border: 1px solid var(--edge); box-shadow: none; order: 2; margin-left: auto; }
:root[data-skin="trap"] .win > .title .count { position: static; order: 1; margin-left: auto; }
:root[data-skin="trap"] .win > .body { margin: 0; padding: 10px 12px; background: var(--plat); border-top: 0; }
:root[data-skin="trap"] .win.inset > .body { background: var(--field); border: 0; box-shadow: inset 0 1px 0 var(--title-line); }


:root[data-skin="trap"] .btn { border: 1px solid var(--edge); border-radius: 4px; background: var(--btn); color: var(--ink); font: 600 12px var(--ui); box-shadow: none; }
:root[data-skin="trap"] .btn:hover { background: var(--btn-hi); border-color: var(--neon); }
:root[data-skin="trap"] .btn:active { background: var(--btn-down); color: var(--ink); }
:root[data-skin="trap"] .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
:root[data-skin="trap"] .btn.default { margin: 0; border-color: var(--default-edge); background: #8a2fd6; color: #fff; box-shadow: 0 0 10px rgba(184, 77, 255, .4); }
:root[data-skin="trap"] .btn.default:hover { background: var(--default-hi); }
:root[data-skin="trap"] .btn.ok { color: var(--ok); border-color: var(--ok); } :root[data-skin="trap"] .btn.no { color: var(--bad); border-color: var(--bad); }
:root[data-skin="trap"] .btn.default.ok { color: #fff; }


:root[data-skin="trap"] .field, :root[data-skin="trap"] textarea.field { background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; font: 13px var(--body); }
:root[data-skin="trap"] .field:focus, :root[data-skin="trap"] textarea.field:focus { outline: 2px solid var(--neon); outline-offset: 0; }
:root[data-skin="trap"] .tag { border-radius: 3px; padding: 0 6px; font: 600 10px var(--ui); letter-spacing: .04em; }
:root[data-skin="trap"] .lbl { color: var(--neon); letter-spacing: .06em; }
:root[data-skin="trap"] .badge { background: var(--pink); border-radius: 3px; font-family: var(--ui); } :root[data-skin="trap"] .badge.zero { background: #4a3a63; }
:root[data-skin="trap"] .dash .kpi, :root[data-skin="trap"] .dash .chart { border-radius: 4px; border-color: var(--title-line); }
:root[data-skin="trap"] .toast { background: var(--toast); color: var(--ink); border-color: var(--neon); border-radius: 4px; box-shadow: var(--glow); }


:root[data-skin="trap"] .dock { background: var(--bar); border-top: 1px solid #b84dff; }
:root[data-skin="trap"] .dock button { color: #f3ecff; font-family: var(--ui); } :root[data-skin="trap"] .dock button[aria-current="true"] { background: none; color: #ffcc33; box-shadow: inset 0 2px 0 #ffcc33; }


:root[data-skin="trap"] #w-crew .stage { border-color: #000; background: radial-gradient(ellipse 70% 40% at 30% 10%, rgba(184, 77, 255, .22), transparent 70%),
  radial-gradient(ellipse 50% 30% at 80% 90%, rgba(255, 46, 126, .14), transparent 70%), linear-gradient(#0d0716, #06040a); }

:root[data-skin="trap"] #w-crew .stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease-out;
  background: radial-gradient(ellipse 60% 45% at 35% 35%, rgba(184, 77, 255, .16), transparent 70%); }
:root[data-skin="trap"].kick #w-crew .stage::after { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { :root[data-skin="trap"] #w-crew .stage::after { display: none; } }

:root[data-skin="trap"] .office .wallsign { font: 600 13px/1 var(--ui); letter-spacing: .12em; color: #ffd6ea; background: #0a0610; border: 1px solid #ff2e7e; border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 46, 126, .55), inset 0 0 6px rgba(255, 46, 126, .35); text-shadow: 0 0 4px #ff2e7e, 0 0 10px #ff2e7e; }
:root[data-skin="trap"] .office .wallsign .prompt { color: #ffcc33; text-shadow: 0 0 6px #ffcc33; }
:root[data-skin="trap"] .office .wallsign .cursor { background: #ffd6ea; box-shadow: 0 0 6px #ff2e7e; }
:root[data-skin="trap"].kick .office .wallsign { box-shadow: 0 0 18px rgba(255, 46, 126, .85), inset 0 0 8px rgba(255, 46, 126, .5); }
:root[data-skin="trap"] .office .doortag { font: 600 12px/1 var(--ui); color: #f3ecff; border-color: #b84dff; background: rgba(10, 6, 16, .88); box-shadow: 0 0 10px rgba(184, 77, 255, .4); }
:root[data-skin="trap"] .office .doortag:hover, :root[data-skin="trap"] .office .doortag:focus-visible { background: #241736; }
:root[data-skin="trap"] .wallscreen .ws-head b, :root[data-skin="trap"] .wallscreen .ws-fig.in b { color: #ffcc33; }
:root[data-skin="trap"] .wallscreen .ws-exp { border-color: #ffcc33; color: #ffcc33; }

:root[data-skin="trap"] .office .actor .nm { font-family: var(--ui); font-weight: 600; }
:root[data-skin="trap"] .office .actor .bub { font: 13px/1.3 var(--body); font-style: normal; color: #f3ecff; background: rgba(12, 8, 19, .92); border: 1px solid #6d2a52; border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 46, 126, .25); }
:root[data-skin="trap"] .office .actor.speech .bub, :root[data-skin="trap"] .office .actor.you.talking .bub, :root[data-skin="trap"] .office .actor.asking .bub {
  font-weight: 600; color: #fff; background: none; border: 0; box-shadow: none; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
:root[data-skin="trap"] .office .actor.asking .bub { color: #ffcc33; }


:root[data-skin="trap"] .board, :root[data-skin="trap"] .room-pop { background: rgba(8, 5, 13, .82); border-color: #6d3a9c; box-shadow: 0 0 0 1px #000, 0 0 16px rgba(184, 77, 255, .25); }
:root[data-skin="trap"] .bd-head { border-bottom-color: #2c1d40; }
:root[data-skin="trap"] .bd-tab { background: #1c1329; color: #b8aacd; border-color: #3a2856; text-shadow: none; }
:root[data-skin="trap"] .bd-tab[aria-pressed="true"] { background: #2a1c3d; color: #ffcc33; border-color: #b84dff; }
:root[data-skin="trap"] .bd-btn, :root[data-skin="trap"] .bl .acts button, :root[data-skin="trap"] .bd-sel .btn { background: #1c1329; color: #f3ecff; border-color: #3a2856; text-shadow: none; }
:root[data-skin="trap"] .bd-btn.default, :root[data-skin="trap"] .bl .acts button.default, :root[data-skin="trap"] .bd-sel .btn.default { background: #8a2fd6; border-color: #d9a3ff; color: #fff; }
:root[data-skin="trap"] .bl.ask, :root[data-skin="trap"] .bl.gate { color: #ffcc33; }
:root[data-skin="trap"] .bl.live { color: #ff9cc4; }
:root[data-skin="trap"] .bl.err { color: #ff5c8a; }
:root[data-skin="trap"] .bd-input textarea { background: #0e0a16; color: #f3ecff; border-color: #3a2856; }
:root[data-skin="trap"] .room-pop .rp-head b { color: #ffcc33; }