/* Theme „Trash": laut, schief, Kopierer-Collage, Sticker, harte Kontraste.
   Regel: Alles darf wackeln – nur Maße, Zahlen, Eingaben und die Zeichenfläche bleiben gerade und lesbar. */

:root[data-skin="trash"] {
  --font-ui: "JanzEinfachBuchstabe", "Space Mono", ui-monospace, monospace;
  --font-display: "JanzEinfachBuchstabe", "Space Mono", ui-monospace, monospace;
  --radius: 2px;
  --radius-sm: 2px;
  --pink: #ff2bd6;
  --acid: #e8ff00;
  --toxic: #00e05a;
  --ink: #0a0a0a;
  --shadow: 4px 4px 0 var(--ink);

  --c-accent: #ff2bd6;
  --c-accent-strong: #c4009f;
  --c-accent-soft: rgb(255 43 214 / .2);
  --c-on-accent: #0a0a0a;

  --c-bg: #e9e7e1;
  --c-panel: #ffffff;
  --c-panel-2: #ffffff;
  --c-border: #0a0a0a;
  --c-border-strong: #0a0a0a;
  --c-text: #0a0a0a;
  --c-text-muted: #3a3a3a;
  --c-hover: rgb(232 255 0 / .55);
  --c-active: rgb(255 43 214 / .3);
  --c-input: #ffffff;

  --c-canvas: #f7f6f2;
  --c-grid: #e4e2dc;
  --c-grid-major: #c9c6bd;
  --c-ruler: #e8ff00;
  --c-ruler-line: #0a0a0a;
  --c-ruler-text: #0a0a0a;
  --c-floor: #ffffff;
  --c-wall: #0a0a0a;
  --c-wall-fill: #0a0a0a;
  --c-door: #0a0a0a;
  --c-door-swing-fill: rgb(255 43 214 / .08);
  --c-window: #0066ff;
  --c-window-fill: #d9e8ff;
  --c-fixture: #0a0a0a;
  --c-fixture-fill: #00e05a;
  --c-zone: #ff2bd6;
  --c-zone-fill: rgb(255 43 214 / .1);
  --c-shelf: #0a0a0a;
  --c-shelf-fill: #e8ff00;
  --c-shelf-fill-high: rgb(232 255 0 / .4);
  --c-shelf-front: #ff2bd6;
  --c-shelf-inner: #0a0a0a;
  --c-shelf-text: #0a0a0a;
  --c-shelf-body: #0a0a0a;
  --c-shelf-plinth: #3a3a3a;
  --c-shelf-back: #fffef0;
  --c-shelf-open: #f7f6f2;
  --c-slot-hover: rgb(255 43 214 / .15);
  --c-item-stroke: #0a0a0a;
  --c-label-fill: #ffffff;
  --c-label-text: #0a0a0a;
  --c-dim: #0a0a0a;
  --c-dim-text: #0a0a0a;
  --c-sel: #ff2bd6;
  --c-sel-fill: rgb(255 43 214 / .12);
  --c-handle-fill: #e8ff00;
  --c-guide: #0066ff;
  --c-highlight: #ff2bd6;
  --c-warn: #ff7a00;
  --c-error: #ff0033;
  --c-on-error: #ffffff;
  --c-ok: #00a442;
  color-scheme: light;
}

:root[data-skin="trash"][data-theme="dark"] {
  --ink: #000000;
  --shadow: 4px 4px 0 var(--pink);
  --c-accent: #ff2bd6;
  --c-accent-strong: #ff7ae6;
  --c-accent-soft: rgb(255 43 214 / .25);
  --c-on-accent: #000000;

  --c-bg: #050505;
  --c-panel: #111111;
  --c-panel-2: #161616;
  --c-border: #f5f5f0;
  --c-border-strong: #ffffff;
  --c-text: #f5f5f0;
  --c-text-muted: #c8c8c0;
  --c-hover: rgb(232 255 0 / .18);
  --c-active: rgb(255 43 214 / .3);
  --c-input: #000000;

  --c-canvas: #0a0a0a;
  --c-grid: #161616;
  --c-grid-major: #262626;
  --c-ruler: #e8ff00;
  --c-ruler-line: #000000;
  --c-ruler-text: #000000;
  --c-floor: #121212;
  --c-wall: #f5f5f0;
  --c-wall-fill: #f5f5f0;
  --c-door: #f5f5f0;
  --c-door-swing-fill: rgb(255 43 214 / .1);
  --c-window: #4d9dff;
  --c-window-fill: #0c1d33;
  --c-fixture: #f5f5f0;
  --c-fixture-fill: #00a442;
  --c-zone: #ff2bd6;
  --c-zone-fill: rgb(255 43 214 / .12);
  --c-shelf: #f5f5f0;
  --c-shelf-fill: #4a5200;
  --c-shelf-fill-high: rgb(232 255 0 / .15);
  --c-shelf-front: #ff2bd6;
  --c-shelf-inner: #f5f5f0;
  --c-shelf-text: #f5f5f0;
  --c-shelf-body: #e8ff00;
  --c-shelf-plinth: #9aa800;
  --c-shelf-back: #141400;
  --c-shelf-open: #0a0a0a;
  --c-slot-hover: rgb(255 43 214 / .2);
  --c-item-stroke: #000000;
  --c-label-fill: #000000;
  --c-label-text: #f5f5f0;
  --c-dim: #e8ff00;
  --c-dim-text: #f5f5f0;
  --c-sel: #ff2bd6;
  --c-sel-fill: rgb(255 43 214 / .15);
  --c-handle-fill: #000000;
  --c-guide: #4d9dff;
  --c-highlight: #ff2bd6;
  --c-warn: #ffb000;
  --c-error: #ff3355;
  --c-on-error: #000000;
  --c-ok: #00e05a;
  color-scheme: dark;
}

/* Kopierer-Raster im Hintergrund */
[data-skin="trash"] body {
  background-color: var(--c-bg);
  background-image: radial-gradient(rgb(0 0 0 / .13) 1px, transparent 1.2px), radial-gradient(rgb(0 0 0 / .07) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}
[data-skin="trash"][data-theme="dark"] body { background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.2px), radial-gradient(rgb(255 43 214 / .08) 1px, transparent 1.2px); }

[data-skin="trash"] .topbar { background: var(--acid); border-bottom: 3px solid var(--ink); color: #0a0a0a; }
[data-skin="trash"][data-theme="dark"] .topbar { background: #111; border-bottom-color: var(--pink); color: var(--c-text); }
[data-skin="trash"] .brand { font-size: 20px; transform: rotate(-2.5deg); background: var(--ink); color: var(--acid); padding: 2px 10px; border: 0; margin-right: 8px; box-shadow: 3px 3px 0 var(--pink); }
[data-skin="trash"] .brand svg { color: var(--pink); }
[data-skin="trash"] .sidebar, [data-skin="trash"] .inspector { border-width: 3px; border-color: var(--ink); background: var(--c-panel); }
[data-skin="trash"][data-theme="dark"] .sidebar, [data-skin="trash"][data-theme="dark"] .inspector { border-color: var(--pink); }
[data-skin="trash"] .viewbar, [data-skin="trash"] .statusbar { border-width: 3px; border-color: var(--ink); }

/* Sticker-Überschriften, leicht schief, mit Klebeband */
[data-skin="trash"] .panel-title,
[data-skin="trash"] .insp-section > h3 {
  display: inline-flex; position: relative; padding: 2px 8px; margin-left: -2px;
  background: var(--ink); color: var(--acid); transform: rotate(-1.6deg); letter-spacing: .08em;
}
[data-skin="trash"] .panel:nth-child(even) .panel-title,
[data-skin="trash"] .insp-section:nth-child(even) > h3 { transform: rotate(1.3deg); background: var(--pink); color: #000; }
[data-skin="trash"] .panel-title::after, [data-skin="trash"] .insp-section > h3::after {
  content: ""; position: absolute; width: 26px; height: 9px; right: -12px; top: -5px;
  background: rgb(255 255 255 / .6); border: 1px dashed rgb(0 0 0 / .3); transform: rotate(18deg);
}
[data-skin="trash"] .insp-head h2 { font-size: 20px; transform: rotate(-.8deg); }
[data-skin="trash"] .insp-head .code { background: var(--acid); color: #000; border: 2px solid var(--ink); transform: rotate(2deg); font-weight: 700; }

[data-skin="trash"] .btn { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 2px; }
[data-skin="trash"][data-theme="dark"] .btn { border-color: var(--c-border); box-shadow: 3px 3px 0 var(--pink); }
[data-skin="trash"] .btn:hover { background: var(--acid); color: #000; transform: rotate(-1deg); }
[data-skin="trash"] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
[data-skin="trash"] .btn.primary { background: var(--pink); color: #000; }
[data-skin="trash"] .btn.ghost { border-color: transparent; box-shadow: none; }
[data-skin="trash"] .insp-actions .btn:nth-child(odd) { transform: rotate(-1deg); }
[data-skin="trash"] .insp-actions .btn:nth-child(even) { transform: rotate(1.2deg); }
[data-skin="trash"] .tool:hover { background: var(--acid); color: #000; }
[data-skin="trash"] .tool[aria-pressed="true"] { background: var(--pink); color: #000; border: 2px solid var(--ink); transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); }
[data-skin="trash"] .tool[aria-pressed="true"] svg { color: #000; }
[data-skin="trash"] .seg { border: 2px solid var(--ink); }
[data-skin="trash"] .seg button[aria-pressed="true"] { background: var(--ink); color: var(--acid); }
[data-skin="trash"][data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--pink); color: #000; }
[data-skin="trash"] .search input { border: 2px solid var(--ink); border-radius: 2px; transform: rotate(-.5deg); }
[data-skin="trash"] .tab[aria-selected="true"] { background: var(--acid); color: #000; }
[data-skin="trash"] .tab[aria-selected="true"]::after { height: 4px; background: var(--pink); }
[data-skin="trash"] dialog.dlg { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--pink); transform: rotate(-.4deg); border-radius: 2px; }
[data-skin="trash"] .dlg-head h2 { background: var(--acid); color: #000; padding: 2px 10px; transform: rotate(-1.5deg); display: inline-block; }
[data-skin="trash"] .menu, [data-skin="trash"] .search-results, [data-skin="trash"] .export-card { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); border-radius: 2px; }
[data-skin="trash"] .canvas-hint { background: var(--acid); color: #000; border: 2px solid var(--ink); transform: translateX(-50%) rotate(-1deg); }
[data-skin="trash"] .toast { background: #000; color: var(--acid); border: 2px solid var(--pink); transform: rotate(-1deg); }
[data-skin="trash"] .badge { border: 1.5px solid var(--ink); transform: rotate(-3deg); }

/* Lesbarkeit hat Vorrang: Eingaben, Maße und Zeichenfläche bleiben gerade */
[data-skin="trash"] input, [data-skin="trash"] select, [data-skin="trash"] textarea,
[data-skin="trash"] .canvas, [data-skin="trash"] .kv, [data-skin="trash"] .levels-table, [data-skin="trash"] .statusbar { transform: none !important; }