/* =====================================================================
   Szenen-Editor Grundgeruest (Etappe 47)
   =====================================================================
   Baut wie die Kontenverwaltung auf .modal-overlay/.modal-box/
   .token-settings-*-Mustern auf. Farbwerte ausschliesslich ueber
   bestehende CSS-Variablen, damit Dark/Warm/Light-Theme automatisch
   mitziehen (nur die Uebernahme-Werte unten sind Theme-spezifisch, analog
   zur Kontenverwaltung). */
.scene-bg-preview {
  width: 100%; max-width: 320px; aspect-ratio: 3 / 2; border-radius: var(--radius-md);
  overflow: hidden; background: var(--ink-950); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.scene-bg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scene-event-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.scene-event-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
}
.scene-event-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 12px; }
.scene-event-actions { display: flex; gap: 6px; flex: none; }
.scene-event-summary strong { font-family: var(--font-display); color: var(--parchment); letter-spacing: 0.2px; }
.scene-event-trigger, .scene-event-target, .scene-event-payload { color: var(--parchment-muted); }

.scene-event-form {
  border-top: 1px dashed var(--border-soft); padding-top: 10px;
}
.scene-event-form #scene-ev-delay-row,
.scene-event-form #scene-ev-payload-bg-row,
.scene-event-form #scene-ev-payload-bool-row {
  margin-top: 4px;
}

html[data-theme="light"] .scene-event-row {
  background: rgba(255,255,255,0.62);
  border-color: rgba(109,89,57,0.18);
}

/* Etappe 1b/1c: Karten-Arbeitsflaeche -- Platzierung/Bearbeitung von
   Szenen-Elementen (Objekt/Lichtquelle/Tuer) direkt auf dem Hintergrund.
   Seit Etappe 1c lebt die Arbeitsflaeche in der grossen Editor-Ansicht
   (.scene-editor-view unten) statt im kleinen Modal, daher kein fester
   max-width mehr -- die Groesse wird ueber den Zoomfaktor (JS,
   applySceneZoom()) und den umgebenden scrollbaren .se-canvas-wrap
   bestimmt. */
.scene-workspace-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px;
}
/* .scene-workspace-toolbar existierte nur im alten kleinen Modal (vor
   Etappe 1c) und wird im aktuellen Markup nicht mehr verwendet -- die
   is-armed-Hervorhebung fehlte dadurch bislang unbemerkt fuer alle
   Werkzeugleisten-Buttons der grossen Editor-Ansicht (.se-toolbar). Regel
   deshalb zusaetzlich auf .se-toolbar ausgeweitet statt umbenannt, damit
   ein evtl. noch vorhandener alter Aufrufer nicht kaputtgeht. */
.scene-workspace-toolbar button.is-armed,
.se-toolbar button.is-armed,
#rs-panel-tools button.is-armed {
  background: var(--accent, #c99a4b); color: var(--ink-950); border-color: var(--accent, #c99a4b);
}

.scene-workspace-hint { font-size: 11px; color: var(--parchment-muted); }

#spotlight-toggle-btn.active-toggle {
  background: var(--accent, #c99a4b); color: var(--ink-950); border-color: var(--accent, #c99a4b);
}

.scene-workspace {
  position: relative; display: inline-block;
  border-radius: var(--radius-md);
  background: var(--ink-950);
  line-height: 0; user-select: none;
}
.scene-workspace.is-placing { cursor: crosshair; }
.scene-workspace.is-drawing-blocker { cursor: crosshair; }
.scene-workspace.is-painting-fog { cursor: crosshair; }
.scene-workspace img#scene-workspace-img { display: block; max-width: none; }
/* Bugfix (Sichtblocker praktisch nicht bedienbar): dieser Layer liegt im
   DOM NACH der Sichtblocker-SVG-Ebene (.scene-workspace-blockers) und war
   damit -- obwohl selbst voellig transparent -- ein volles inset:0-Div MIT
   Standard-pointer-events (auto). Ein Div faengt Klicks ueber seine
   gesamte Box ab, auch dort, wo optisch kein Marker sitzt (leere Flaeche
   ist trotzdem "getroffen"). Ergebnis: die Sichtblocker-Linien/-Handles
   direkt darunter bekamen praktisch NIE einen echten Klick/Mousedown, egal
   wie exakt man traf (bestaetigt per echtem Browser-Test:
   document.elementFromPoint() auf einer sichtbaren Blocker-Linie lieferte
   durchgehend dieses Div zurueck, nie die <line>/<circle> selbst).
   pointer-events:none macht das Div selbst fuer Klicks "durchsichtig";
   die einzelnen .scene-marker-Elemente setzen unten explizit wieder
   pointer-events:auto, bleiben also wie gehabt normal anklickbar/
   verschiebbar -- nur die LEERE Flaeche drumherum blockiert nichts mehr. */
.scene-workspace-markers { position: absolute; inset: 0; pointer-events: none; }

/* Raster-Vorschau (siehe applySceneGridOverlay() in client.js) -- liegt
   direkt ueber dem Kartenbild, aber UNTER allen anderen Ebenen (Licht/
   Sichtblocker/Marker/Debug), damit es nirgendwo etwas verdeckt. */
.scene-workspace-grid { position: absolute; inset: 0; pointer-events: none; }
.scene-grid-line { stroke: rgba(255,255,255,0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Nebel-Vorschau (siehe applySceneFogOverlay() in client.js) -- liegt ganz
   oben, auch ueber den Element-Markern, weil Nebel auf der Live-Karte auch
   Tokens abdeckt (nur GM-Deckkraft 0.45, nicht die undurchsichtige
   Spieler-Variante -- der Szeneneditor ist ohnehin GM-only). */
.scene-workspace-fog { position: absolute; inset: 0; pointer-events: none; }
.scene-fog-cell { fill: rgba(0,0,0,0.45); }

/* Sicht/Licht-Debug-Vorschau (GM-only): dunkler Schleier mit per SVG-Maske
   ausgeschnittenem Sichtpolygon + leicht gefaerbte Polygonflaeche obendrauf.
   Liegt bewusst UNTER Lichtreichweiten-Vorschau/Sichtblockern/Markern, damit
   diese weiterhin normal sichtbar und anklickbar bleiben -- reine
   GM-Planungshilfe, keine Optimierung auf huebsche Optik noetig. */
.scene-workspace-visibility-debug { position: absolute; inset: 0; pointer-events: none; }
.scene-visibility-shroud { fill: rgba(4,6,14,0.68); }
.scene-visibility-lit { fill: rgba(255,214,120,0.16); stroke: rgba(255,214,120,0.45); stroke-width: 0.3; vector-effect: non-scaling-stroke; }

/* Teil A "echte Token-Sicht": eigene Ebene, unabhaengig von der
   Licht-Debug-Ebene ein-/ausschaltbar. Ausserhalb der Token-Sichtweite
   komplett dunkel (staerker als der Licht-Schleier, da hier NICHTS bekannt
   ist -- nicht nur "unbeleuchtet"); innerhalb der Sichtweite, aber nicht
   zusaetzlich beleuchtet, ein gedaempfter Grauton ("gesehen, aber im
   Dunkeln"); innerhalb UND beleuchtet komplett klar (siehe
   applyTokenSightDebug() in client.js -- der "beleuchtet"-Anteil kommt
   ueber denselben clip-path wie die Licht-Sichtpolygone). */
.scene-workspace-token-sight-debug { position: absolute; inset: 0; pointer-events: none; }
.scene-token-sight-shroud { fill: rgba(2,3,8,0.9); }
.scene-token-sight-dim { fill: rgba(4,6,14,0.5); }
.scene-token-sight-lit { fill: rgba(255,214,120,0.08); }

/* Token-Marker: bewusst als eigener, klar erkennbarer Kreis-Typ (analog
   zur Lichtquelle, aber in einer anderen Farbe), damit Objekt/Licht/Tuer/
   Token auf den ersten Blick unterscheidbar bleiben. */
.scene-marker-token {
  border-radius: 50%;
  background: radial-gradient(circle, #7fd1ff 0%, rgba(127,209,255,0.15) 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(127,209,255,0.85);
}
/* Wird gerade per "Sicht testen" ausgewertet -- zusaetzlicher heller Ring,
   damit auf einen Blick klar ist, fuer welches Token die Token-Sicht-Debug-
   Ebene gerade berechnet wird (kann gleichzeitig mit is-selected aktiv
   sein, wenn das getestete Token auch ausgewaehlt ist). */
.scene-marker.is-sight-testing {
  box-shadow: 0 0 0 2px rgba(127,209,255,0.9), 0 0 10px rgba(127,209,255,0.85);
}

/* GM-Editor-Hilfen: Marker sollen auf der eigentlichen Kartenoptik NICHT
   wie fest hingestellte, dauerhaft umrandete Kacheln wirken (siehe
   Plan-Datei, Abschnitt 4 "Wichtig"). Deshalb standardmaessig kein Rahmen/
   keine Hintergrundflaeche -- nur bei Auswahl (is-selected, reine
   Editor-Hilfe) oder wenn (noch) kein Bild hinterlegt ist, gibt es eine
   sichtbare, aber dezente Markierung. */
.scene-marker {
  position: absolute; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-sizing: border-box; border-radius: 4px;
  /* Holt sich die Klickbarkeit gezielt zurueck, die der Eltern-Layer
     (.scene-workspace-markers) jetzt bewusst nicht mehr pauschal fuer die
     gesamte Kartenflaeche beansprucht -- siehe Kommentar dort. */
  pointer-events: auto;
}
.scene-marker img {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.scene-marker-air-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(17,24,39,0.9);
  border: 1px solid rgba(127,209,255,0.95);
  color: #d9f3ff;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.scene-marker.is-inactive { opacity: 0.4; }

/* Auswahlrahmen: bewusst deutlich sichtbar, aber ausdruecklich nur eine
   Editor-Hilfe fuer den GM -- keine Eigenschaft der Objektgrafik selbst
   und nicht Teil einer spaeteren Spieleransicht. */
.scene-marker.is-selected {
  outline: 2px dashed #ffe28a; outline-offset: 3px; border-radius: 4px;
}
.scene-marker.is-selected::after {
  content: ""; position: absolute; inset: -3px; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,226,138,0.35); pointer-events: none;
}

.scene-marker-object {
  border-radius: 4px;
}
.scene-marker-object.no-image {
  border: 1px dashed rgba(127,179,213,0.65); background: rgba(127,179,213,0.10);
}
.scene-marker-light {
  border-radius: 50%;
  background: radial-gradient(circle, var(--scene-marker-color, #ffcc66) 0%, rgba(255,204,102,0.12) 70%, transparent 100%);
  box-shadow: 0 0 10px var(--scene-marker-color, #ffcc66);
}
.scene-marker-door {
  border-radius: 3px;
}
.scene-marker-door.no-image {
  width: 30px; height: 12px;
  background: #b98a4a; box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

/* Direkt-auf-der-Karte-Griffe (Groesse/Rotation) -- reine GM-Editor-Hilfe,
   existieren nur am aktuell ausgewaehlten Marker (siehe sceneElementMarkersHtml),
   nie Teil der eigentlichen Objektoptik oder einer spaeteren Spieleransicht. */
.scene-marker-handle {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #ffe28a; border: 1px solid #6d5939; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer; pointer-events: auto;
}
.scene-marker-handle-resize { right: -7px; bottom: -7px; cursor: nwse-resize; }
.scene-marker-handle-rotate { left: 50%; top: -22px; transform: translateX(-50%); cursor: grab; }
.scene-marker-handle-rotate-line {
  position: absolute; left: 50%; top: -14px; width: 1px; height: 14px;
  background: rgba(255,226,138,0.65); pointer-events: none;
}

/* Lichtreichweite (GM-Planungsvorschau): jetzt als echte, an Sichtblockern
   abgeschnittene Polygone statt irrefuehrender Vollkreise. Liegt hinter der
   Marker-Ebene (siehe HTML-Reihenfolge in renderSceneEditorView) und bleibt
   rein nicht-interaktiv. */
.scene-workspace-light-radii { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.scene-light-radius-poly { vector-effect: non-scaling-stroke; }
.scene-light-radius-dim {
  fill: rgba(255,204,102,0.04); stroke: rgba(255,204,102,0.35); stroke-width: 0.22; stroke-dasharray: 0.8 0.55;
}
.scene-light-radius-bright {
  fill: rgba(255,204,102,0.08); stroke: rgba(255,204,102,0.6); stroke-width: 0.28; stroke-dasharray: 0.9 0.55;
}
.scene-solid-blocker-mask {
  fill: rgba(4, 6, 14, 0.82);
  stroke: rgba(255, 106, 90, 0.18);
  stroke-width: 0.2;
  vector-effect: non-scaling-stroke;
}

/* Etappe 2: Sichtblocker (Waende/Kanten) -- freie Linien-Geometrie, klar
   sichtbar als GM-Hilfslinie (ausdruecklich kein Bestandteil einer
   spaeteren Spieleransicht, siehe Plan-Datei Abschnitt "2. Sichtblocker").
   Layer liegt unter den Element-Markern, damit Objekte weiterhin normal
   anklickbar bleiben, aber ueber der Lichtreichweiten-Vorschau. */
.scene-workspace-blockers {
  position: absolute; inset: 0;
  /* Der SVG-Layer selbst muss Pointer-Events an seine Linien/Handles
     weiterreichen koennen. Mit pointer-events:none war die komplette
     Sichtblocker-Ebene fuer die Maus "tot", selbst wenn die Kinder
     pointer-events:stroke/fill gesetzt hatten. */
  pointer-events: auto;
  overflow: visible;
}
/* Ausbau-Schritt "Sichtblocker-Werkzeuge": gemeinsame Basisklasse fuer alle
   vier Geometrie-Typen (frueher "scene-blocker-line", fest an <line>
   gebunden).

   ALLE Typen -- auch die geschlossenen (Rechteck/Kreis-Ellipse) -- bleiben
   bewusst reine Umriss-Linien OHNE Fuellung. Ein Sichtblocker ist eine
   Planungs-Hilfsgeometrie und darf das Kartenbild darunter niemals
   einfaerben oder verdecken: eine (auch nur leicht) gefuellte Flaeche legt
   sich sonst als farbiger Schleier ueber Baeume/Gebaeude/Wege und macht
   gerade grosse Blocker unbrauchbar, weil man die Karte darunter nicht mehr
   beurteilen kann.

   Folge davon: geschlossene Formen sind (wie Linien seit jeher) ueber ihren
   RAND anklickbar, nicht ueber die Innenflaeche (pointer-events: stroke).
   Das ist zusaetzlich das gewuenschte Verhalten, weil eine grosse
   Rechteck-Innenflaeche sonst saemtliche Klicks auf der Karte darunter
   abfangen wuerde (Elemente platzieren/auswaehlen). Zum bequemen Auswaehlen
   gibt es die Sichtblocker-Liste in der Sidebar. */
.scene-blocker-shape {
  stroke: #ff6a5a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  fill: none; pointer-events: stroke; cursor: pointer;
}
.scene-blocker-shape.is-selected { stroke: #ffe28a; stroke-width: 3.4; }
.scene-blocker-shape.is-inactive { stroke-opacity: 0.35; stroke-dasharray: 5 4; }
.scene-blocker-handle {
  fill: #ffe28a; stroke: #6d5939; stroke-width: 0.6;
  pointer-events: fill; cursor: pointer;
}
.scene-blocker-draft-line {
  stroke: #ffe28a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 4 3; fill: none; pointer-events: none;
}
.scene-blocker-draft-dot {
  fill: #ffe28a; stroke: #6d5939; stroke-width: 0.5; pointer-events: none;
}
/* Fangpunkt-Markierung ("Einrasten"): auffaellig andersfarbig als die
   normalen Entwurfspunkte, damit sofort klar ist "hier rastet der naechste
   Punkt ein" statt "hier ist schon ein Punkt". Bewusst ein Ring ohne
   Fuellung, damit der darunterliegende Punkt sichtbar bleibt. */
.scene-blocker-snap-marker {
  fill: none; stroke: #63e6ff; stroke-width: 1.6; pointer-events: none;
  vector-effect: non-scaling-stroke;
}
html[data-theme="light"] .scene-blocker-shape { stroke: #c8402f; }
html[data-theme="light"] .scene-blocker-shape.is-selected { stroke: #a8790a; }

/* Werkzeugleiste: die vier Sichtblocker-Typ-Buttons werden optisch als
   zusammengehoerige Gruppe abgesetzt (dezente Trennlinien), damit sie sich
   von den Platzieren-Buttons links davon unterscheiden. */
.se-toolbar-blocker-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft);
}

/* Sichtblocker-Liste in der Sidebar, nach dem Muster von .scene-event-row/
   .scene-event-list (siehe oben). */
.scene-blocker-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.scene-blocker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
}
.scene-blocker-row.is-selected { border-color: #ffe28a; background: rgba(255,226,138,0.08); }
.scene-blocker-row.is-inactive { opacity: 0.6; }
.scene-blocker-row-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 12px; }
.scene-blocker-row-summary strong { font-family: var(--font-display); color: var(--parchment); letter-spacing: 0.2px; }
.scene-blocker-row-type, .scene-blocker-row-state { color: var(--parchment-muted); }
html[data-theme="light"] .scene-blocker-row {
  background: rgba(255,255,255,0.62); border-color: rgba(109,89,57,0.18);
}

.scene-element-editor-box {
  margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
}
.scene-element-editor-box h5 {
  margin: 0 0 8px; font-family: var(--font-display); color: var(--parchment); letter-spacing: 0.3px;
}
.scene-el-checkbox-label { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.scene-el-checkbox-label input { width: auto; margin: 0; }
.scene-el-size-row { display: flex; align-items: center; gap: 6px; }
.scene-el-size-row input { width: 100%; }
.scene-el-size-row span { color: var(--parchment-muted); font-size: 12px; }
.scene-el-rotation-row { display: flex; align-items: center; gap: 8px; }
.scene-el-rotation-row input[type=range] { flex: 1; }
.scene-el-rotation-row input[type=number] { width: 64px; flex: none; }

.scene-image-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px;
}
.scene-image-pick {
  width: 48px; height: 48px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--ink-950);
  overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.scene-image-pick img { width: 100%; height: 100%; object-fit: contain; }
.scene-image-pick.is-selected { border-color: #ffe28a; box-shadow: 0 0 0 1px #ffe28a; }
.scene-image-pick-none {
  font-size: 9px; color: var(--parchment-muted); text-align: center; line-height: 1.2; padding: 2px;
}

html[data-theme="light"] .scene-workspace {
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .scene-element-editor-box {
  background: rgba(255,255,255,0.62);
  border-color: rgba(109,89,57,0.18);
}
html[data-theme="light"] .scene-image-pick {
  background: rgba(255,255,255,0.62);
}

/* Etappe 1c: grosse Szenen-Editor-Ansicht -- ersetzt die Bearbeitung im
   kleinen Modal (Etappe 47/1b). Volle Ansicht statt zentrierter Box, damit
   die Karte deutlich mehr Platz bekommt und fuer groessere Maps in einem
   eigenen scrollbaren Bereich (.se-canvas-wrap) nutzbar bleibt. */
.scene-editor-view {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  background: var(--ink-950);
}
.se-topbar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  background: rgba(16,22,42,0.7);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
.se-topbar-name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 420px; }
.se-topbar-name input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--ink-950); color: var(--parchment);
  font-family: var(--font-display); font-size: 16px;
}
.se-topbar-spacer { flex: 1; }

.se-body { flex: 1; min-height: 0; display: flex; }
.se-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 16px; }
.se-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex: none;
}
.se-toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
.se-zoom-controls { font-size: 12px; color: var(--parchment-muted); }
.se-zoom-controls button { padding: 4px 10px; }
#se-zoom-label { display: inline-block; min-width: 42px; text-align: center; }

.se-canvas-wrap {
  flex: 1; min-height: 0; overflow: auto;
  border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.18);
  padding: 24px;
}

.se-sidebar {
  width: 340px; flex: none; overflow-y: auto;
  border-left: 1px solid var(--border-soft);
  padding: 12px 14px; background: rgba(255,255,255,0.02);
}
.se-section {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  margin-bottom: 10px; padding: 8px 10px; background: rgba(255,255,255,0.02);
}
.se-section summary {
  cursor: pointer; font-family: var(--font-display); color: var(--parchment);
  letter-spacing: 0.3px; padding: 2px 0;
}
.se-section[open] summary { margin-bottom: 8px; }

@media (max-width: 900px) {
  .se-body { flex-direction: column; }
  .se-sidebar { width: auto; border-left: none; border-top: 1px solid var(--border-soft); }
}

html[data-theme="light"] .scene-editor-view { background: var(--parchment-bg, #f4ecd8); }
html[data-theme="light"] .se-topbar { background: rgba(255,255,255,0.72); }
html[data-theme="light"] .se-sidebar { background: rgba(255,255,255,0.5); border-left-color: rgba(109,89,57,0.18); }
html[data-theme="light"] .se-section { background: rgba(255,255,255,0.62); border-color: rgba(109,89,57,0.18); }
html[data-theme="light"] .se-canvas-wrap { border-color: rgba(109,89,57,0.18); }