/* Neutral surfaces verified against tehzilla.pro; accents indicate actions only. */
:root, :root[data-theme="dark"] {
  --bg-main: #121212; --bg-sidebar: #1b1b1b; --bg-panel: #242424;
  --bg-surface: #242424; --bg-elevated: #303030; --bg-canvas: #121212;
  --border-main: #404040; --border-soft: #303030;
  --text-main: #f3f3f3; --text-secondary: #bdbdbd; --text-muted: #aaa; --text-disabled: #777;
  --borderless-root: #121212; --borderless-secondary: #1b1b1b;
  --borderless-card: #242424; --borderless-active: #303030; --borderless-group: #242424;
  --borderless-group-accent: #505050; --canvas-grid: #ffffff08;
  --accent: #1678f2; --accent-hover: #62a5f7; --accent-active: #1264cd;
  --accent-soft: #1678f21a; --accent-border: #1678f270;
  --toolbar-glow: transparent;
}
:root[data-theme="light"] {
  --bg-main: #fff; --bg-sidebar: #f4f4f4; --bg-panel: #fff;
  --bg-surface: #ededed; --bg-elevated: #e3e3e3; --bg-canvas: #ededed;
  --border-main: #ccc; --border-soft: #e3e3e3;
  --text-main: #202020; --text-secondary: #565656; --text-muted: #686868; --text-disabled: #888;
  --borderless-root: #fff; --borderless-secondary: #f4f4f4;
  --borderless-card: #ededed; --borderless-active: #e3e3e3; --borderless-group: #ededed;
  --borderless-group-accent: #ccc; --canvas-grid: #00000006;
  --accent: #1678f2; --accent-hover: #1264cd; --accent-active: #1055ad;
}
body { background: var(--bg-main); }
.reworkUi .appToolbar, .reworkUi .sidebar, .reworkInspector,
.reworkUi .sidebarContextHeader, .reworkUi .inspectorHeader,
.reworkUi .appRail { background: var(--bg-sidebar); box-shadow: none; }
.reworkUi :is(.toolbarBrandMark, .modeTile, .modeTile.active, .layerRow, .layerRow.activeLayer, .legendPreviewRow.isActive, .btn.secondary, .btn[aria-pressed="true"], .phoneViewerLayerButton.active) {
  background: var(--bg-elevated); box-shadow: none;
}
.reworkUi :is(.railButton.active, .railButton[aria-pressed="true"], .modeTile.active) { color: var(--text-main); }
.reworkUi :is(.emptyBox, .card, .phoneViewerEmpty) { background: var(--bg-panel); box-shadow: none; }
.reworkUi .workspace { background-color: var(--bg-canvas); }
.reworkUi :is(.toolbarBrandMark, .sidebarEyebrow, .brandKicker, .cardTitle, .sectionLabel) { color: var(--text-secondary); }
.reworkUi .cardTitle::before { background: var(--text-muted); box-shadow: none; }
.reworkUi .btn.primary { background: var(--accent); }
.reworkUi :is(.btn, .input, .select, .railButton, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; transform: none; }
.reworkUi [hidden] { display: none !important; }
#palette { display: flex; flex-direction: column; gap: 6px; }
.paletteGroup { background: var(--bg-surface); border-radius: 8px; min-width: 0; }
.paletteGroup summary { cursor: pointer; padding: 11px 10px; font-size: 13px; font-weight: 650; color: var(--text-main); }
.paletteGroupItems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 8px 8px; }
.paletteGroup .colorBtn { min-width: 0; min-height: 44px; text-align: left; padding: 8px; border-left: 6px solid var(--marker-color); color: var(--text-main); background: var(--bg-panel); }
.paletteGroup .colorBtn span { white-space: normal; overflow-wrap: anywhere; }
.paletteGroup .colorBtn.active { background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--marker-color); }
#newMarkTypeBtn { width: 100%; margin-top: 8px; }
#markTypeDialog { width: min(440px, calc(100vw - 24px)); padding: 0; color: var(--text-main); background: var(--bg-panel); }
#markTypeDialog .dialogBody { padding: 16px; }
#markTypeDialog .dialogHeader { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
#markTypeDialog h2 { font-size: 18px; margin: 0; }
.typeColorPresets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.typeColorSwatch { width: 36px; height: 36px; border: 2px solid var(--border-main); border-radius: 8px; cursor: pointer; }
.typeColorSwatch:focus-visible { outline: 2px solid var(--text-main); outline-offset: 3px; }
#markTypeColor { width: 100%; height: 40px; border: 0; background: var(--bg-surface); }
.generalProject .modeSwitch, .generalProject .componentExamples { display: none; }
@media (min-width: 1180px) {
  .reworkUi .app { --left-panel: 300px; --right-panel: 340px; grid-template-columns: 80px var(--left-panel) minmax(0, 1fr) var(--right-panel); }
  .reworkUi.sidebarCollapsed .app { --left-panel: 0px; }
  .reworkUi.inspectorCollapsed .app { --right-panel: 0px; grid-template-columns: 80px var(--left-panel) minmax(0, 1fr) var(--right-panel); }
  .reworkUi.sidebarCollapsed .sidebar { visibility: hidden; overflow: hidden; padding: 0; }
}
@media (min-width: 1180px) and (max-width: 1400px) {
  .reworkUi .app { --left-panel: 280px; --right-panel: 310px; }
}
@media (prefers-reduced-motion: reduce) {
  .reworkUi *, .reworkUi *::before, .reworkUi *::after { transition: none !important; animation: none !important; }
}
/* Signals reuse neutral project surfaces, native details and native selection. */
.signalActive { display:flex; align-items:center; gap:8px; font-size:13px; padding:10px; background:var(--bg-surface); border-radius:8px; }
.signalActive span { flex:1; min-width:0; overflow-wrap:anywhere; }
.signalSuggestions, .signalActions { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:8px 0; }
.signalSuggestions > .subtle { flex-basis:100%; }
.signalSuggestions .btn, .signalActions .btn, #createSignalBtn { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
.signalSuggestions .btn[aria-pressed="true"] { border-color:var(--accent); }
.signalNavigation { padding:10px 0; border-top:1px solid var(--border-soft); overflow-wrap:anywhere; font-size:13px; }
.signalIndex { display:flex; flex-direction:column; gap:6px; }
.signalGroup { min-width:0; border:1px solid var(--border-soft); border-radius:8px; overflow:hidden; }
.signalGroup > summary { padding:11px 9px; cursor:pointer; font-size:13px; background:var(--bg-surface); overflow-wrap:anywhere; }
.signalGroup > summary small { display:block; color:var(--text-muted); margin:5px 0 0 14px; }
.signalGroup > .signalActions, .signalGroup > p { margin:8px; }
.signalPhoto { margin:5px; min-width:0; }
.signalPhoto > summary { padding:8px 4px; font-size:12px; cursor:pointer; overflow-wrap:anywhere; color:var(--text-secondary); }
.signalMemberButton { display:flex; align-items:center; gap:7px; width:100%; min-height:40px; padding:8px; border:0; border-radius:5px; background:transparent; color:var(--text-main); text-align:left; font:inherit; font-size:12px; overflow-wrap:anywhere; cursor:pointer; }
.signalMemberButton:hover, .signalMemberButton[aria-current="true"] { background:var(--bg-elevated); }
.signalMemberButton:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.signalMemberButton .layerDot { flex-shrink:0; }
#annotationSignalField .btn { margin-top:7px; }
.reworkUi .appRail .railButton span { font-size:11px; white-space:normal; }
.signalActive span, #inspectedSignalLabel { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#phoneSignalIndex { margin-top:10px; }
.phoneViewerDrawer .signalMemberButton { min-height:44px; }
.signalGroup[data-inspected="true"] { border-color:var(--accent); }

.signalStep { min-width:36px; min-height:36px; }
.signalStep .uiIcon { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* v56: Modern Minimal surface hierarchy with restrained Darkmatter graphite.
   Tokens are adapted to TEHZILLA; marker colours remain content, not UI chrome. */
:root, :root[data-theme="dark"] {
  --bg-main:#171717; --bg-sidebar:#1b1b1b; --bg-panel:#242424; --bg-surface:#1c1c1c; --bg-elevated:#303030; --bg-canvas:#141414;
  --border-main:#505050; --border-soft:#393939; --text-main:#f0f0f0; --text-secondary:#c4c4c4; --text-muted:#aaa;
  --borderless-root:var(--bg-main); --borderless-secondary:var(--bg-sidebar); --borderless-card:var(--bg-panel); --borderless-active:var(--bg-elevated);
  --borderless-group:var(--bg-surface); --borderless-group-accent:var(--border-main);
  --accent:#1264cd; --accent-hover:#79b2ff; --accent-active:#1055ad; --accent-soft:#1264cd12; --accent-border:#659cf3;
  --inverse-bg:#ebebeb; --inverse-text:#202020; --success:#74d29a; --warning:#efbc6a; --danger:#f28b82;
  --overlay:#0009; --shadow-dialog:0 18px 65px #0005;
}
:root[data-theme="light"] {
  --bg-main:#f5f5f5; --bg-sidebar:#f6f6f6; --bg-panel:#fff; --bg-surface:#fff; --bg-elevated:#eaeaea; --bg-canvas:#e9e9e9;
  --border-main:#b8b8b8; --border-soft:#dedede; --text-main:#242424; --text-secondary:#505050; --text-muted:#626262;
  --accent:#1264cd; --accent-hover:#1055ad; --accent-border:#1264cd;
  --inverse-bg:#252525; --inverse-text:#fff; --success:#187a44; --warning:#8f5c09; --danger:#b72d26;
  --overlay:#17171766;
}
.reworkUi :is(.appToolbar,.sidebar,.reworkInspector,.appRail,.sidebarContextHeader,.inspectorHeader) { background:var(--bg-sidebar); box-shadow:none; }
.reworkUi .appToolbar { border-bottom:1px solid var(--border-soft); }
.reworkUi .appRail { border-right:1px solid var(--border-soft); }
.reworkUi .sidebar { border-right:1px solid var(--border-soft); }
.reworkUi .reworkInspector { border-left:1px solid var(--border-soft); }
.reworkUi :is(.sidebar > .card,.reworkInspector .card) { background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:10px; }
.reworkUi :is(.input,.select,.filePicker,.themePicker) { color:var(--text-main); background-color:var(--bg-surface); border:1px solid var(--border-main); border-radius:7px; box-shadow:none; }
.reworkUi :is(.input,.select,.filePicker)::placeholder { color:var(--text-muted); opacity:1; }
.reworkUi :is(.input,.select,.btn,.railButton,summary):focus-visible { outline:2px solid var(--accent-border); outline-offset:2px; box-shadow:none; transform:none; }
.reworkUi :is(.input,.select):disabled { color:var(--text-muted); background-color:var(--bg-elevated); opacity:.75; }
.reworkUi .btn { border:1px solid var(--border-main); background:var(--bg-panel); color:var(--text-main); box-shadow:none; }
.reworkUi .btn:hover:not(:disabled) { background:var(--bg-elevated); border-color:var(--text-muted); color:var(--text-main); }
.reworkUi .btn.ghost { border-color:transparent; background:transparent; color:var(--text-secondary); }
.reworkUi .btn.secondary { border-color:var(--border-main); background:var(--bg-panel); color:var(--text-main); }
.reworkUi .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none; }
.reworkUi .btn.primary:hover:not(:disabled) { background:var(--accent-active); color:#fff; }
.reworkUi .btn:disabled { background:var(--bg-elevated); color:var(--text-muted); border-color:var(--border-soft); opacity:.7; }
.reworkUi .btn.danger { color:var(--danger); border-color:var(--danger); background:var(--bg-panel); }
.reworkUi #saveProjectBtn span { display:inline; font-size:13px; white-space:nowrap; }
.reworkUi #saveProjectBtn span::after { content:none; }
.reworkUi #saveProjectBtn .uiIcon { display:block; }
.reworkUi :is(.railButton.active,.railButton[aria-pressed="true"],.modeTile.active,.colorBtn.active,.layerRow.activeLayer,.phoneViewerImageItem.active,.phoneViewerLayerButton.active) { color:var(--text-main); background:var(--bg-elevated); box-shadow:none; }
.reworkUi .railButton.active { box-shadow:inset 3px 0 var(--accent); }
.reworkUi :is(.phoneViewerReadOnlyNotice,.canvasSaveHint,.phoneViewerImageItem,.phoneViewerNoteCard,.cloudStatus,.cloudStat,.cloudSuggestion) { color:var(--text-secondary); background:var(--bg-panel); border:1px solid var(--border-soft); box-shadow:none; }
.reworkUi .canvasSaveHint { font-size:12px; }
.reworkUi :is(.modeTile,.colorBtn,.layerRow) { border:1px solid var(--border-soft); }
.reworkUi .modeTile.active { border-color:var(--border-main); }
.reworkUi .paletteGroup .colorBtn { border-left:6px solid var(--marker-color); }
.reworkUi :is(.cardTitle::before,.toolbarStateDot) { box-shadow:none; }
.reworkUi .cardTitle::before { background:var(--text-muted); }
.reworkUi :is(.signalActive,.signalGroup > summary,.paletteGroup,.legendPreviewRow) { background:var(--bg-elevated); }
.reworkUi .reworkQuickActions { flex-wrap:wrap; }
.reworkUi [data-action-target="saveProjectBtn"] { flex-basis:100%; border:1px solid var(--border-main); background:var(--bg-panel); }
/* Dialog boundaries: every footer stays inside its own padding box. */
.reworkUi dialog { border:1px solid var(--border-main); background:var(--bg-panel); box-shadow:var(--shadow-dialog); }
.reworkUi dialog .dialogHeader { background:transparent; gap:12px; }
.reworkUi dialog .dialogHeader h2 { font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
.reworkUi dialog .dialogHeader .btn { flex-shrink:0; }
.reworkUi dialog .dialogActions { background:var(--bg-panel); border-top:1px solid var(--border-soft); gap:10px; }
.reworkUi #markTypeDialog { width:min(440px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; }
#markTypeDialog .propertyDialogForm { display:flex; flex-direction:column; max-height:calc(100dvh - 26px); min-height:0; }
.reworkUi #markTypeDialog .dialogHeader { flex-shrink:0; margin:0; padding:18px 20px; border-bottom:1px solid var(--border-soft); }
.reworkUi #markTypeDialog .dialogBody { padding:20px; min-height:0; overflow-y:auto; }
.reworkUi #markTypeDialog .dialogActions { margin:0; padding:16px 20px; flex-shrink:0; }
.reworkUi #markTypeDialog .dialogActions .btn { min-height:40px; }
.markAppearance { margin:14px 0; padding:12px; border:1px solid var(--border-soft); border-radius:8px; background:var(--bg-surface); }
.markColorRow { display:flex; align-items:center; gap:8px; }
.markColorRow input[type="color"], #markTypeDialog #markTypeColor { width:38px; flex:0 0 38px; height:36px; padding:2px; border:1px solid var(--border-main); border-radius:7px; background:var(--bg-panel); cursor:pointer; }
.markColorRow .input { width:0; flex:1 1 0; min-width:0; font:13px ui-monospace,monospace; }
.markColorRow .btn { flex-shrink:0; padding-inline:7px; }
.markColorSwatches { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:10px; }
.markColorSwatch { background:var(--swatch); border:1px solid #0003; border-radius:6px; min-height:28px; cursor:pointer; position:relative; }
.markColorSwatch[aria-pressed="true"],.typeColorSwatch[aria-pressed="true"] { outline:2px solid var(--text-main); outline-offset:2px; }
.markColorSwatch[aria-pressed="true"]::after { content:""; position:absolute; width:9px; height:9px; top:50%; left:50%; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; background:#242424; }
.markColorSwatch:focus-visible,.typeColorSwatch:focus-visible { outline:3px solid var(--accent-border); outline-offset:3px; }
.markAppearance .subtle { margin:10px 0 0; font-size:12px; line-height:1.4; }
@media (min-width:601px) and (max-width:1000px) {
  .reworkUi .toolbarBrand { padding-right:4px; min-width:0; }
  .reworkUi .toolbarBrandMark,.reworkUi .toolbarBrandCopy small { display:none; }
  .reworkUi .toolbarBrandCopy b { font-size:12px; }
  .reworkUi #saveProjectBtn { padding-inline:9px; }
}
@media (max-width:480px) {
  .reworkUi #markTypeDialog .dialogHeader { padding:14px; }
  .reworkUi #markTypeDialog .dialogBody { padding:14px; }
  .reworkUi #markTypeDialog .dialogActions { padding:12px 14px; }
}
.commonMarks { padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--border-soft); }
.commonMarksRow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.reworkUi .commonMarksRow .colorBtn { display:block; min-width:0; min-height:38px; padding:8px; border:1px solid var(--border-main); border-left:6px solid var(--marker-color); background:var(--bg-panel); color:var(--text-main); font-size:12px; text-align:left; }
.reworkUi .commonMarksRow .colorBtn[aria-pressed="true"] { background:var(--bg-elevated); }

/* Theme foreground and background change together; only focus borders animate. */
.reworkUi :is(.input,.select,.filePicker,.btn,.themePicker,.colorBtn,.railButton,.modeTile,.layerRow) { transition-property:border-color,box-shadow; }

/* One colour cue per option, shared with the component creation defaults. */
.reworkUi .presetBtn.componentPreset { border:1px solid var(--border-soft); border-left:6px solid var(--marker-color); color:var(--text-main); background:var(--bg-panel); text-align:left; padding:8px; white-space:normal; overflow-wrap:anywhere; }
.reworkUi .presetBtn.componentPreset:is(:hover,.active) { background:var(--bg-elevated); }
.reworkUi .colorBtn.active::after, .reworkUi .colorBtn[aria-pressed="true"]::after { border-color:currentColor; }

.reworkUi .presetGrid.componentPresetGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.reworkUi .presetBtn.componentPreset { min-height:40px; font-size:12px; }