/* Photoshop-style workspace for the AI Photo Editor (loaded after editor.css). */
.ed-shell {
  --ws-bg: #121117; --ws-panel: #1b1922; --ws-panel-2: #24212e; --ws-line: rgba(255, 255, 255, 0.08);
  --ws-text: #ece9f5; --ws-muted: #a8a3bf; --ws-stage: #0c0b10; --ws-hover: rgba(255, 255, 255, 0.07);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ws-bg); color: var(--ws-text);
  height: min(calc(100dvh - 90px), 940px);
}
:root[data-theme="light"] .ed-shell {
  --ws-bg: #e9e8ee; --ws-panel: #f5f4f8; --ws-panel-2: #ebe9f1; --ws-line: rgba(20, 16, 40, 0.1);
  --ws-text: #17151f; --ws-muted: #5d5a6d; --ws-stage: #d4d2db; --ws-hover: rgba(20, 16, 40, 0.06);
}
/* The site theme's colours are for light pages; inside the workspace use the workspace palette. */
.ed-shell { --text: var(--ws-text); --text-dim: var(--ws-muted); --border: var(--ws-line); --panel: var(--ws-panel); --panel-2: var(--ws-panel-2); }
.ed-shell h2, .ed-shell h3, .ed-shell h4 { font-family: var(--font-body, system-ui), system-ui, sans-serif; }
.ed-shell .panel-sub { color: var(--ws-muted); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; }
.ed-shell .btn:disabled, dialog .btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; filter: grayscale(.5); }
.ed-shell .btn-ghost { border-color: color-mix(in srgb, var(--ws-text) 22%, transparent); color: var(--ws-text); }
.ed-shell .btn-ghost:hover:not(:disabled) { background: var(--ws-hover); border-color: color-mix(in srgb, var(--ws-text) 40%, transparent); }
body.ws-open { overflow: hidden; }
body.ws-open .ed-shell { position: fixed; inset: 0; z-index: 90; height: 100dvh; border: 0; border-radius: 0; }

/* ---- Menu bar ---- */
.ws-menubar { display: flex; align-items: center; gap: 6px; padding: 0 8px; min-height: 46px; background: var(--ws-panel); border-bottom: 1px solid var(--ws-line); }
.ws-logo .logo-mark { width: 30px; height: 30px; border-radius: 9px; }
.ws-logo .logo-mark svg { width: 17px; height: 17px; }
.ws-menus { display: flex; gap: 0; }
.menubar-btn { font: 500 13px var(--font-body, system-ui); color: var(--ws-text); background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.menubar-btn:hover, .menubar-btn[aria-expanded="true"] { background: var(--ws-hover); }
.ws-quick { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.ws-right { display: flex; align-items: center; gap: 6px; }
.ws-div { width: 1px; height: 20px; background: var(--ws-line); margin: 0 6px; }
.ws-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--ws-text); cursor: pointer; }
.ws-icon:hover:not(:disabled) { background: var(--ws-hover); }
.ws-icon:disabled { opacity: 0.35; cursor: default; }
.ws-icon .ico { width: 18px; height: 18px; }
.ws-icon[aria-pressed="true"] { color: var(--accent); }
.ws-zoom { font: 600 12px var(--font-body, system-ui); color: var(--ws-text); background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 7px; padding: 6px 10px; min-width: 58px; cursor: pointer; font-variant-numeric: tabular-nums; }
.ws-download { display: inline-flex; align-items: center; gap: 7px; font: 700 13px var(--font-body, system-ui); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; background: linear-gradient(120deg, #8b5cf6, #ec4899); box-shadow: 0 8px 20px -10px rgba(236, 72, 153, 0.9); }
.ws-download .ico { width: 16px; height: 16px; }
.ws-download:hover { filter: brightness(1.08); }

/* ---- Tooltips ---- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 30; white-space: pre; pointer-events: none;
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font: 500 12px var(--font-body, system-ui); color: #fff; background: #0b0a10; border: 1px solid rgba(255,255,255,.12);
  padding: 5px 9px; border-radius: 6px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
}
.ed-tool[data-tip]:hover::after, .ed-tool[data-tip]:focus-visible::after { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }

/* ---- Body: rail · stage · dock ---- */
.ed-shell .ed-body { display: grid; grid-template-columns: 58px minmax(0, 1fr) 316px; min-height: 0; }
.ed-shell .ed-tools { display: flex; flex-direction: column; gap: 3px; padding: 8px 7px; overflow-y: auto; background: var(--ws-panel); border-right: 1px solid var(--ws-line); scrollbar-width: none; }
.ed-shell .ed-tool { width: 44px; height: 42px; flex: none; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ws-muted); cursor: pointer; }
.ed-shell .ed-tool:hover { background: var(--ws-hover); color: var(--ws-text); }
.ed-shell .ed-tool[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(236,72,153,.75)); border-color: transparent; }
:root[data-theme="light"] .ed-shell .ed-tool[aria-pressed="true"] { color: #fff; }
.ed-shell .ed-tool-name { display: none; }
.ed-shell .ed-tool-icon { width: 21px; height: 21px; }
.ed-ai-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee, #ec4899); }
.ed-tool { position: relative; }

.ed-shell .ed-stage { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--ws-stage) 80%, #2a1f45) 0%, var(--ws-stage) 70%); }
.ed-shell .ed-stage-inner { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8); }

.ed-dock { display: flex; flex-direction: column; min-height: 0; background: var(--ws-panel); border-left: 1px solid var(--ws-line); }
.dock-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--ws-line); overflow-x: auto; scrollbar-width: none; }
.dock-tabs::-webkit-scrollbar { display: none; }
.dock-tabs button { font: 600 12.5px var(--font-body, system-ui); color: var(--ws-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 8px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.dock-tabs button[aria-selected="true"] { color: var(--ws-text); border-bottom-color: var(--accent); }
.ed-shell .ed-panel { flex: 1; border-left: 0; overflow-y: auto; color: var(--ws-text); }
.ed-shell .panel-note { color: var(--ws-muted); }
.ed-shell .seg-btn, .ed-shell .field select, .ed-shell .field input[type="number"], .ed-shell .text-input, .ed-shell .sticker { background: var(--ws-panel-2); color: var(--ws-text); border-color: var(--ws-line); }
.ed-shell .seg-btn[aria-pressed="true"], .ed-dialog .seg-btn[aria-pressed="true"] { background: #7c3aed; color: #fff; border-color: #8b5cf6; }
.ed-shell .apply-bar { background: linear-gradient(to top, var(--ws-panel) 75%, transparent); }
.ed-shell .panel-section { border-top-color: var(--ws-line); }

/* History list */
.hist-list { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 2px; }
.hist-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: 500 13px var(--font-body, system-ui); color: var(--ws-text); background: none; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.hist-item:hover { background: var(--ws-hover); }
.hist-item.current { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.hist-item.future { opacity: 0.45; }
.hist-n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--ws-panel-2); color: var(--ws-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Status bar */
.ws-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; padding: 0 12px; font: 500 11.5px var(--font-body, system-ui); color: var(--ws-muted); background: var(--ws-panel); border-top: 1px solid var(--ws-line); }
.ws-status-right { display: flex; gap: 16px; align-items: center; }
.ws-status .ed-meta, .ws-status #ed-meta { margin: 0; color: var(--ws-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ws-private { display: inline-flex; align-items: center; gap: 5px; color: #34d399; }
.ws-private .ico { width: 13px; height: 13px; }

/* ---- Menus (menu bar dropdowns + right-click) ---- */
.menu-pop {
  position: fixed; z-index: 200; min-width: 250px; max-width: 320px; padding: 6px;
  background: #1f1c28; color: #ece9f5; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.3);
  animation: menuIn .14s cubic-bezier(.22,1,.36,1);
  font-family: var(--font-body, system-ui);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a8a3bf; padding: 6px 10px 4px; }
.menu-list { display: grid; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; text-align: left; font: 500 13px var(--font-body, system-ui); color: inherit; background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: linear-gradient(120deg, rgba(139,92,246,.85), rgba(236,72,153,.7)); color: #fff; outline: none; }
.menu-item:disabled { opacity: .38; cursor: default; }
.menu-label { display: inline-flex; align-items: center; gap: 8px; }
.menu-ai { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: linear-gradient(120deg, #22d3ee, #8b5cf6); color: #fff; }
.menu-kbd { font: 500 11.5px var(--font-body, system-ui); color: #a8a3bf; background: none; border: 0; padding: 0; }
.menu-item:hover .menu-kbd, .menu-item:focus-visible .menu-kbd { color: #fff; }
.menu-sep { height: 1px; background: rgba(255,255,255,.08); margin: 5px 6px; }

/* Keyboard shortcuts dialog */
.keys-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-bottom: 8px; }
.key-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.key-row kbd { min-width: 46px; text-align: center; font: 600 11.5px var(--font-body, system-ui); padding: 4px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }
#ed-keys-dlg { width: min(94vw, 620px); }

/* ---- Medium screens: keep the workspace inside the window ---- */
.ed-shell { grid-template-columns: minmax(0, 1fr); }
.ws-menubar { min-width: 0; }
.ws-menus { min-width: 0; }
@media (max-width: 1240px) {
  .menubar-btn { padding: 7px 7px; }
  .ws-quick .ws-div { margin: 0 2px; }
}
@media (max-width: 1080px) {
  .ed-shell .ed-body { grid-template-columns: 54px minmax(0, 1fr) 286px; }
  .ws-download .ws-dl-label { display: none; }
  .ws-download { padding: 9px 10px; }
  #ed-zoom-out, #ed-zoom-in { display: none; }
}

/* ---- Small screens: stacked, no full-screen ---- */
@media (max-width: 899px) {
  .ed-shell { height: auto; }
  .ws-menus { overflow-x: auto; scrollbar-width: none; max-width: 52vw; }
  .ws-quick .ws-div, #ed-compare { display: none; }
  .ws-menubar { flex-wrap: wrap; padding: 4px 6px; }
  .ws-quick { margin: 0; }
  .ed-shell .ed-body { display: flex; flex-direction: column; }
  .ed-shell .ed-stage { order: 1; height: 52vh; min-height: 300px; }
  .ed-shell .ed-tools { order: 2; flex-direction: row; overflow-x: auto; border-right: 0; border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); }
  .ed-dock { order: 3; border-left: 0; }
  .ws-status-right .ws-private { display: none; }
  [data-tip]:hover::after { display: none; }
}

/* Refine Edge panel highlight when jumped to from a menu */
[data-refine] { scroll-margin-top: 10px; border-radius: 10px; transition: box-shadow 0.4s; }
[data-refine].flash { box-shadow: 0 0 0 2px var(--accent); }

/* ---- Curves & Levels ---- */
.curve-wrap { position: relative; margin: 8px 0 4px; }
.curve-graph { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--ws-line); cursor: crosshair; touch-action: none; }
.ed-shell .field select { width: 100%; }

/* ---- Hand tool ---- */
.ed-stage.pan-ready, .ed-stage.pan-ready #ed-overlay { cursor: grab !important; }
.ed-stage.panning, .ed-stage.panning #ed-overlay { cursor: grabbing !important; }

/* ---- Info readout ---- */
.ws-info { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; white-space: pre; }
.info-swatch { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.3); display: inline-block; }

/* ---- Quick tour ---- */
.ed-tour {
  position: absolute; z-index: 6; right: 18px; bottom: 18px; width: min(380px, calc(100% - 36px));
  background: var(--ws-panel); color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  animation: menuIn 0.25s cubic-bezier(.22, 1, .36, 1);
}
.ed-tour h3 { margin: 0 0 10px; font-size: 1.1rem; }
.ed-tour ol { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 7px; font-size: 13px; line-height: 1.5; color: var(--ws-muted); }
.ed-tour strong { color: var(--ws-text); }
.ed-tour kbd { font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ws-line); }

/* ---- Layers panel ---- */
.ed-layers { display: flex; flex-direction: column; gap: 10px; }
.layer-props { display: grid; gap: 4px; padding-top: 2px; }
.layer-props select { width: 100%; }
.layer-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 3px; background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 10px; max-height: 46vh; overflow-y: auto; }
.layer-row { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.layer-row:hover { background: var(--ws-hover); }
.layer-row.active { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.layer-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.layer-eye { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--ws-text); border-radius: 6px; cursor: pointer; }
.layer-eye:hover { background: var(--ws-hover); }
.layer-eye.off { color: var(--ws-muted); opacity: 0.6; }
.layer-eye .ico { width: 16px; height: 16px; }
.layer-thumb { width: 46px; height: 34px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--ws-line); }
.layer-thumb canvas { max-width: 100%; max-height: 100%; display: block; }
.layer-text { display: grid; min-width: 0; }
.layer-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-meta { font-size: 11px; color: var(--ws-muted); }
.layer-meta:empty { display: none; }
.layer-rename { width: 100%; font: 600 13px var(--font-body, system-ui); background: var(--ws-panel-2); color: var(--ws-text); border: 1px solid var(--accent); border-radius: 5px; padding: 3px 6px; }
.layer-tools { display: flex; flex-wrap: wrap; gap: 2px; justify-content: space-between; padding: 4px; border: 1px solid var(--ws-line); border-radius: 10px; }
.layer-tools .ws-icon .ico { width: 17px; height: 17px; }
.fill-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fill-row .field { margin: 0; flex: 1; }

/* Move & Transform numeric fields */
.num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; }
.num-field { margin: 0; }
.num-field input { width: 100%; background: var(--ws-panel-2); color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; }

/* Ghost buttons inside the dark workspace: the Editorial site theme styles
   .btn-ghost with paper ink, which is unreadable on the dark panels. */
.ed-shell .btn-ghost { color: var(--ws-text); border-color: rgba(255, 255, 255, 0.22); background: transparent; }
.ed-shell .btn-ghost:hover:not(:disabled) { color: var(--ws-text); background: var(--ws-hover); border-color: var(--accent, #a78bfa); }
:root[data-theme="light"] .ed-shell .btn-ghost { border-color: rgba(20, 16, 40, 0.25); }

/* Dialogs sit outside .ed-shell, so give them the workspace palette too. */
.ed-dialog {
  --text: #ece9f5; --text-dim: #a8a3bf; --border: rgba(255, 255, 255, 0.12); --panel: #1b1922; --panel-2: #24212e;
  --ws-text: #ece9f5; --ws-muted: #a8a3bf; --ws-line: rgba(255, 255, 255, 0.08); --ws-panel: #1b1922; --ws-panel-2: #24212e; --ws-hover: rgba(255, 255, 255, 0.07);
  background: #1b1922; color: #ece9f5; border-color: rgba(255, 255, 255, 0.12);
}
.ed-dialog h2, .ed-dialog label, .ed-dialog .field-label, .ed-dialog .check span { color: #ece9f5; }
.ed-dialog .panel-note { color: #a8a3bf; }
.ed-dialog .btn-ghost { color: #ece9f5; border-color: rgba(255, 255, 255, 0.22); background: transparent; }
.ed-dialog .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: var(--accent, #a78bfa); }
/* Primary buttons: cream on the dark workspace (dark ink on cream reads as a hole). */
/* Primary actions: one clear accent colour in the workspace and its dialogs (beats the site's ink buttons). */
.app .ed-shell .btn-primary, .app .ed-shell .btn-primary:hover, .ed-dialog .btn-primary, .ed-dialog .btn-primary:hover, dialog .btn.btn-primary {
  background: linear-gradient(120deg, #7c3aed, #a855f7); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -10px rgba(124, 58, 237, .9);
}
.app .ed-shell .btn-primary:hover:not(:disabled), .ed-dialog .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

/* Brush tool */
.brush-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.brush-preset { font: 500 12px var(--font-body, system-ui); color: var(--ws-text); background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.brush-preset:hover { background: var(--ws-hover); }
.brush-preset[aria-pressed="true"] { border-color: var(--accent, #a78bfa); background: color-mix(in srgb, var(--accent, #a78bfa) 22%, transparent); }
.brush-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.brush-colours .field { margin-bottom: 0; }
.brush-swap { padding: 6px 10px; font-size: 12px; }
.ed-shell .ed-panel select { width: 100%; }

/* Gradient presets */
.grad-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grad-swatch { height: 26px; border-radius: 6px; border: 1px solid var(--ws-line); cursor: pointer; padding: 0;
  background-color: #fff; background-image: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.grad-swatch[aria-pressed="true"] { outline: 2px solid var(--accent, #a78bfa); outline-offset: 1px; }

/* History panel: History Brush source column */
.hist-row { display: flex; align-items: center; gap: 4px; }
.hist-row .hist-item { flex: 1; min-width: 0; }
.hist-src { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ws-muted); cursor: pointer; opacity: 0.35; padding: 0; }
.hist-src svg { width: 15px; height: 15px; }
.hist-src:hover { opacity: 0.8; background: var(--ws-hover); }
.hist-src[aria-pressed="true"] { opacity: 1; color: var(--ws-text); border-color: var(--ws-line); background: var(--ws-panel-2); }
.panel-note.warn { color: #f5b971; }

/* Eyedropper */
.eye-info { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; margin: 4px 0 12px; }
.eye-swatch { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--ws-line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.eye-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 12px; align-items: center; }
.eye-info dt { color: var(--ws-muted); font-weight: 600; }
.eye-info dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.eye-info code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ws-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eye-copy { font: 500 11px var(--font-body, system-ui); color: var(--ws-muted); background: none; border: 1px solid var(--ws-line); border-radius: 5px; padding: 1px 6px; cursor: pointer; }
.eye-copy:hover { color: var(--ws-text); background: var(--ws-hover); }
.eye-recent { display: flex; flex-wrap: wrap; gap: 5px; }
.eye-chip { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--ws-line); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.eye-chip:hover { transform: scale(1.1); }

/* Shape tool colours */
.shape-colours { display: flex; gap: 18px; margin: 4px 0 8px; }
.shape-col { display: flex; align-items: center; gap: 6px; }
.shape-col .field { margin: 0; }

/* Layer styles */
.fx-btn { font: italic 600 13px Georgia, serif; }
.layer-row { grid-template-columns: 30px 46px minmax(0, 1fr) auto; }
.layer-fx { font: italic 600 11px Georgia, serif; color: var(--ws-text); background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 5px; padding: 1px 5px; cursor: pointer; }
.fx-dlg { width: min(94vw, 720px); }
.fx-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; margin-top: 6px; }
.fx-list { list-style: none; margin: 0 0 12px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; display: grid; gap: 2px; }
.fx-list li { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 7px; }
.fx-list li.active { background: rgba(167,139,250,.22); }
.fx-name { flex: 1; text-align: left; background: none; border: 0; color: #ece9f5; font: 500 13px var(--font-body, system-ui); padding: 6px 2px; cursor: pointer; }
.fx-body { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.fx-body .field select { width: 100%; }
.fx-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.fx-dlg .brush-preset { color: #ece9f5; background: #24212e; border-color: rgba(255,255,255,.1); }
@media (max-width: 600px) { .fx-grid { grid-template-columns: 1fr; } }

/* Layer masks & adjustment layers */
.layer-row { display: flex; align-items: center; gap: 6px; }
.layer-row .layer-text { flex: 1; min-width: 0; }
.layer-thumb { cursor: pointer; flex: none; }
.layer-thumb.targeted { outline: 2px solid #f4efe6; outline-offset: 1px; }
.mask-thumb { width: 34px; height: 34px; display: grid; place-items: center; background: #000; border-radius: 4px; overflow: hidden; }
.mask-thumb canvas { max-width: 100%; max-height: 100%; }
.mask-thumb.off { position: relative; opacity: .55; }
.mask-thumb.off::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 46%, #ef4444 46%, #ef4444 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #ef4444 46%, #ef4444 54%, transparent 54%); }
.adj-thumb { width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; color: var(--ws-text); background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 6px; }
.adj-btn { font-size: 16px; }
.adj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.adj-pick { font: 500 12.5px var(--font-body, system-ui); text-align: left; color: var(--ws-text); background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.adj-pick:hover { border-color: var(--accent, #a78bfa); background: var(--ws-hover); }

/* Smart objects & smart filters */
.layer-thumb { position: relative; }
.smart-badge { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 3px; background: #f4efe6; box-shadow: 0 0 0 1px #000;
  background-image: linear-gradient(#1c1917, #1c1917), linear-gradient(#1c1917, #1c1917); background-size: 6px 1.5px, 1.5px 6px; background-position: center; background-repeat: no-repeat; }
.sf-head { list-style: none; font: 600 10.5px var(--font-body, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ws-muted); padding: 2px 8px 0 46px; }
.sf-row { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 40px; }
.sf-row.off .sf-name { opacity: .5; text-decoration: line-through; }
.sf-name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--ws-text); font: 500 12px var(--font-body, system-ui); padding: 5px 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-name:hover { text-decoration: underline; }
.sf-del { background: none; border: 0; color: var(--ws-muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.sf-del:hover { color: #f87171; }
.sf-row .layer-eye { transform: scale(.85); }

/* Filter Gallery */
.fg-dlg { width: min(98vw, 1320px); max-width: none; height: min(94vh, 860px); padding: 14px 16px; display: none; }
.fg-dlg[open] { display: flex; flex-direction: column; }
.fg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fg-head h2 { margin: 0 auto 0 0; }
.fg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px 260px; gap: 14px; }
.fg-preview { position: relative; border-radius: 10px; overflow: hidden; display: grid; place-items: center; min-height: 0; background-color: #2a2833; }
.fg-canvas { max-width: 100%; max-height: 100%; object-fit: contain; cursor: grab; }
.fg-status { position: absolute; left: 10px; bottom: 8px; font: 500 12px var(--font-body, system-ui); color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 6px; }
.fg-status:empty { display: none; }
.fg-catalog { overflow-y: auto; padding-right: 4px; }
.fg-cat summary { cursor: pointer; font: 600 12px var(--font-body, system-ui); color: #ece9f5; padding: 6px 2px; text-transform: uppercase; letter-spacing: .05em; }
.fg-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.fg-thumb { display: grid; gap: 3px; background: #24212e; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 4px; cursor: pointer; color: #ece9f5; font: 500 10.5px var(--font-body, system-ui); text-align: center; }
.fg-thumb.active { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa; }
.fg-thumb-img { display: grid; place-items: center; height: 58px; background: #111; border-radius: 5px; overflow: hidden; }
.fg-thumb-img canvas { max-width: 100%; max-height: 100%; }
.fg-side { overflow-y: auto; }
.fg-stack { list-style: none; margin: 0 0 8px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; display: grid; gap: 2px; }
.fg-stack li { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 7px; }
.fg-stack li.active { background: rgba(167,139,250,.22); }
@media (max-width: 900px) { .fg-body { grid-template-columns: 1fr; grid-template-rows: 45vh auto auto; overflow-y: auto; } .fg-dlg { height: 96vh; } }
.fg-side { overflow-x: hidden; padding-right: 4px; }

/* Sky Replacement & Camera Raw */
.sky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sky-pick { display: grid; gap: 3px; padding: 3px; background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 8px; cursor: pointer; color: var(--ws-text); font: 500 10.5px var(--font-body, system-ui); }
.sky-pick canvas { width: 100%; height: auto; border-radius: 5px; display: block; }
.sky-pick.active { border-color: var(--accent, #a78bfa); box-shadow: 0 0 0 1px var(--accent, #a78bfa); }
.sky-plus { display: grid; place-items: center; aspect-ratio: 96 / 54; font-size: 22px; background: #111; border-radius: 5px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-band input[type=range] { accent-color: var(--band); }
.cr-red { --band: #ef4444; } .cr-orange { --band: #f97316; } .cr-yellow { --band: #eab308; } .cr-green { --band: #22c55e; }
.cr-aqua { --band: #06b6d4; } .cr-blue { --band: #3b82f6; } .cr-purple { --band: #8b5cf6; } .cr-magenta { --band: #d946ef; }

/* Color Range */
.cr-dlg { width: min(94vw, 820px); }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
.cr-view { display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
.cr-preview { max-width: 100%; max-height: 60vh; cursor: crosshair; display: block; }
@media (max-width: 640px) { .cr-grid { grid-template-columns: 1fr; } }

/* Generative Expand: photo-position grid */
.anchor-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.anchor { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); cursor: pointer; }
.anchor.on { background: var(--accent, #a78bfa); border-color: var(--accent, #a78bfa); }

/* Session recovery on the start screen */
.ed-recover { margin: 14px auto 0; max-width: 460px; padding: 12px 14px; border-radius: 12px; border: 1px dashed currentColor; text-align: left; font-size: 13.5px; }
.ed-recover p { margin: 0 0 8px; }

/* Actions & Batch */
.act-dlg { width: min(94vw, 560px); }
.act-rec { display: flex; gap: 8px; margin: 10px 0 14px; }
.act-rec input { flex: 1; min-width: 0; }
.act-list { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.act-item { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; }
.act-head { display: flex; align-items: center; gap: 8px; }
.act-tag { font: 600 10px var(--font-body, system-ui); text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.1); }
.act-tag.ai { background: rgba(167,139,250,.3); }
.act-steps { margin: 6px 0 8px; padding-left: 20px; font-size: 12.5px; color: #a8a3bf; }
.rec-pill { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: #1b1922; color: #ece9f5; box-shadow: 0 8px 30px rgba(0,0,0,.45); font: 500 13px var(--font-body, system-ui); }
.rec-pill .btn { padding: 5px 12px; font-size: 12px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: recBlink 1.2s infinite; }
@keyframes recBlink { 50% { opacity: .3; } }
.batch-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 8px 0 4px; }
.batch-bar span { display: block; height: 100%; width: 0; background: #a78bfa; transition: width .2s; }

.text-badge { position: absolute; left: 2px; bottom: 1px; font: 700 11px Georgia, serif; color: #1c1917; background: #f4efe6; border-radius: 3px; padding: 0 3px; line-height: 13px; box-shadow: 0 0 0 1px #000; }

.merge-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.merge-thumbs canvas { border-radius: 6px; border: 1px solid rgba(255,255,255,.15); max-height: 70px; width: auto; }

/* Clipping masks & locks */
.lock-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lock-btn { min-width: 30px; height: 28px; border-radius: 7px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); cursor: pointer; font-size: 14px; }
.lock-btn[aria-pressed="true"] { border-color: var(--accent, #a78bfa); background: color-mix(in srgb, var(--accent, #a78bfa) 30%, transparent); }
.layer-row.clipped { margin-left: 18px; position: relative; }
.layer-row.clipped::before { content: "↳"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); color: var(--ws-muted); }

/* Rulers, guides & grid */
.ws-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-rulers { position: absolute; pointer-events: none; z-index: 5; }
.ws-ruler { position: absolute; pointer-events: auto; cursor: crosshair; }
.ws-ruler.top { left: 0; top: 0; }
.ws-ruler.left { left: 0; top: 0; }
.ws-ruler-corner { position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: #24212e; pointer-events: auto; }

/* Layer groups */
.group-row .grp-toggle { background: none; border: 0; color: var(--ws-text); cursor: pointer; font-size: 12px; width: 18px; padding: 0; }
.grp-thumb { width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; background: var(--ws-panel-2); border: 1px solid var(--ws-line); border-radius: 6px; }
.grp-btn { font-size: 16px; }

/* Info tab */
.ed-info .panel-sub { margin: 12px 0 6px; }
.nav-canvas { width: 100%; height: auto; border-radius: 8px; display: block; cursor: grab; background: #111; }
.hist-canvas { width: 100%; height: 110px; display: block; background: #0f0e14; border-radius: 8px; margin-top: 6px; }
.hist-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 11.5px; color: var(--ws-muted); margin-top: 6px; }
.hist-stats .warn { color: #f5b971; }
.info-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font: 12px ui-monospace, Menlo, monospace; color: var(--ws-text); }
.info-k { color: var(--ws-muted); font-family: var(--font-body, system-ui); }
.chan-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chan-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); cursor: pointer; font: 500 12px var(--font-body, system-ui); }
.chan-btn[aria-pressed="true"] { border-color: var(--accent, #a78bfa); background: color-mix(in srgb, var(--accent, #a78bfa) 25%, transparent); }
.saved-sel { display: grid; gap: 8px; margin-top: 8px; }
.saved-item { display: grid; grid-template-columns: 52px 1fr; gap: 4px 8px; align-items: center; }
.saved-item .btn-row { grid-column: 1 / -1; }
.saved-thumb canvas { width: 48px; border-radius: 4px; display: block; }
.btn.sm { padding: 5px 9px; min-width: 0; }

/* Brush engine */
.brush-engine, .brush-dyn { margin: 8px 0; }
.brush-engine > summary, .brush-dyn > summary { cursor: pointer; font: 600 12px var(--font-body, system-ui); color: var(--ws-text); padding: 6px 0; }

/* Patterns and Fill dialog */
.pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.pat-sw { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
.pat-sw canvas { width: 100%; height: 100%; display: block; }
.pat-sw[aria-selected="true"] { border-color: var(--accent, #a78bfa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #a78bfa) 35%, transparent); }
.fill-dlg { width: min(420px, calc(100vw - 32px)); }
.fill-dlg select { width: 100%; }

/* Timeline */
.tl-dlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tl-main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; margin: 8px 0; }
.tl-stage { display: grid; gap: 8px; justify-items: center; }
.tl-view { max-width: 100%; max-height: 46vh; background: repeating-conic-gradient(#2a2a33 0 25%, #1d1d24 0 50%) 0 0 / 16px 16px; border-radius: 8px; }
.tl-layers { display: grid; gap: 4px; align-content: start; max-height: 46vh; overflow: auto; }
.tl-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; }
.tl-frame { flex: 0 0 auto; display: grid; gap: 4px; padding: 6px; border-radius: 10px; border: 2px solid var(--ws-line, #333); cursor: pointer; background: var(--ws-panel-2, #1b1a22); }
.tl-frame.sel { border-color: var(--accent, #a78bfa); }
.tl-frame canvas { display: block; border-radius: 4px; background: #111; }
.tl-frame select { font-size: 11px; padding: 2px 4px; }
.tl-num { font-size: 11px; color: var(--ws-muted, #aaa); }
.tl-tools { flex-wrap: wrap; align-items: center; margin-top: 6px; }
.tl-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ws-muted, #aaa); }
@media (max-width: 720px) { .tl-main { grid-template-columns: 1fr; } }

/* Color tab */
.cp-top { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin-bottom: 10px; }
.cp-chips { position: relative; width: 58px; height: 52px; grid-row: span 2; }
.cp-chip { position: absolute; width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--ws-line, #444); cursor: pointer; padding: 0; }
.cp-fg { left: 0; top: 0; z-index: 1; }
.cp-bg { left: 20px; top: 16px; }
.cp-chip[aria-pressed="true"] { border-color: var(--accent, #a78bfa); box-shadow: 0 0 0 2px var(--ws-panel, #111); }
.cp-chip-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-hexrow { display: flex; gap: 8px; align-items: center; }
.cp-hex { width: 96px; font: 13px ui-monospace, Menlo, monospace; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); text-transform: uppercase; }
.cp-sv { width: 100%; height: 150px; border-radius: 8px; display: block; cursor: crosshair; touch-action: none; }
.cp-hue-wrap { position: relative; margin: 8px 0 10px; }
.cp-hue { width: 100%; height: 14px; border-radius: 7px; display: block; cursor: pointer; touch-action: none; }
.cp-hue-mark { position: absolute; top: -2px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.cp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cp-num { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ws-muted); }
.cp-num input { width: 100%; min-width: 0; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); }
.cp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.cp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 5px; margin: 6px 0; }
.cp-sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; }
.cp-swatches .cp-sw { width: 100%; height: auto; aspect-ratio: 1; }
.cp-add { background: var(--ws-panel-2); color: var(--ws-text); font-weight: 700; }
.ed-color select { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); }

/* Gradient Editor */
.ge-dlg { width: min(520px, calc(100vw - 32px)); }
.ge-wrap { position: relative; margin: 12px 8px 4px; }
.ge-bar { height: 40px; border-radius: 8px; cursor: copy; border: 1px solid var(--ws-line, #444);
  background: repeating-conic-gradient(#bbb 0 25%, #fff 0 50%) 0 0 / 14px 14px; overflow: hidden; }
.ge-fill { width: 100%; height: 100%; }
.ge-marks { position: relative; height: 26px; }
.ge-stop { position: absolute; top: 2px; width: 16px; height: 20px; margin-left: -8px; padding: 0; cursor: ew-resize; border: 2px solid #fff; border-radius: 4px 4px 8px 8px; background: var(--c); box-shadow: 0 0 0 1px #000; touch-action: none; }
.ge-stop.sel { border-color: var(--accent, #a78bfa); box-shadow: 0 0 0 2px var(--accent, #a78bfa); }
.ge-stop.removing { opacity: .35; }
.ge-fields { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ge-fields input[type=number] { width: 70px; }
.ge-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-presets .grad-swatch { width: 54px; }

/* Layer Comps */
.comp-dlg { width: min(560px, calc(100vw - 32px)); }
.comp-list { display: grid; gap: 6px; margin: 8px 0 12px; max-height: 40vh; overflow: auto; }
.comp-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ws-line, #333); }
.comp-row.cur { border-color: var(--accent, #a78bfa); }
.comp-name { text-align: left; background: none; border: 0; color: var(--ws-text, #eee); font: 600 13.5px var(--font-body, system-ui); cursor: pointer; padding: 0; }
.comp-tags { grid-column: 1; font-size: 11.5px; color: var(--ws-muted, #aaa); }
.comp-row .btn-row { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* Ruler */
.ruler-info .panel-note { grid-column: 1 / -1; font-family: var(--font-body, system-ui); }
.ruler-info { margin-bottom: 10px; }

/* Image Trace */
.trace-dlg { width: min(980px, calc(100vw - 32px)); }
.trace-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 16px; margin: 8px 0; }
.trace-view { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; display: block;
  background: repeating-conic-gradient(#2a2a33 0 25%, #1d1d24 0 50%) 0 0 / 16px 16px; }
@media (max-width: 720px) { .trace-grid { grid-template-columns: 1fr; } }

/* Proof colours badge */
.proof-badge { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 95; padding: 5px 12px; border-radius: 999px; font: 600 12px var(--font-body, system-ui); background: rgba(20, 18, 28, .85); color: #fde68a; border: 1px solid rgba(253, 230, 138, .4); pointer-events: none; }

/* Keyboard Shortcuts dialog */
.sc-dlg { width: min(620px, calc(100vw - 32px)); }
.sc-dlg .text-input { width: 100%; margin: 6px 0 10px; }
.sc-list { display: grid; gap: 2px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.sc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 8px; }
.sc-row:nth-child(odd) { background: color-mix(in srgb, var(--ws-panel-2, #222) 60%, transparent); }
.sc-row.custom .sc-key { color: var(--accent, #a78bfa); border-color: var(--accent, #a78bfa); }
.sc-label { font-size: 13px; }
.sc-key { font: 12px ui-monospace, Menlo, monospace; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--ws-line, #444); min-width: 64px; text-align: center; }
.sc-row .btn-row { margin: 0; flex-wrap: nowrap; }
.sc-row .btn { min-height: 0; height: auto; padding: 4px 12px; font-size: 12px; border-radius: 8px; }

/* Print */
.print-dlg { width: min(760px, calc(100vw - 32px)); }
.print-grid { display: grid; grid-template-columns: auto minmax(240px, 1fr); gap: 18px; margin: 8px 0; align-items: start; }
.print-preview { display: block; border-radius: 8px; max-width: 100%; }
.print-dlg .panel-note.warn { color: #f5b971; }
.print-dlg input[type=number] { width: 90px; }
.print-frame { position: fixed; width: 0; height: 0; border: 0; left: -10px; top: -10px; }
@media (max-width: 640px) { .print-grid { grid-template-columns: 1fr; } }

/* Notes tool */
.notes-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.notes-list li button { width: 100%; text-align: left; display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--ws-line, #333); background: none; color: var(--ws-text, #eee); cursor: pointer; font: 13px var(--font-body, system-ui); }
.notes-list li.sel button { border-color: var(--accent, #a78bfa); }
.notes-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.notes-text { width: 100%; resize: vertical; min-height: 90px; }
.notes-swatch { width: 24px; height: 24px; border-radius: 6px; border: 2px solid rgba(255,255,255,.3); cursor: pointer; padding: 0; }

/* Generative Fill */
.gf-dlg { width: min(860px, calc(100vw - 32px)); }
.gf-prompt { width: 100%; font-size: 15px; resize: vertical; margin: 6px 0; }
.gf-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 16px; margin-top: 8px; }
.gf-preview { width: 100%; max-height: 46vh; object-fit: contain; display: block; border-radius: 8px; background: repeating-conic-gradient(#2a2a33 0 25%, #1d1d24 0 50%) 0 0 / 16px 16px; }
.gf-bar { width: 100%; height: 8px; margin-top: 8px; accent-color: var(--accent, #a78bfa); }
.gf-variants { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gf-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; }
.gf-thumb[aria-pressed="true"] { border-color: var(--accent, #a78bfa); }
.gf-thumb canvas { display: block; }
.gf-first { color: #fde68a; }
@media (max-width: 720px) { .gf-grid { grid-template-columns: 1fr; } }

/* Face Swap */
.fs-dlg { width: min(900px, calc(100vw - 32px)); }
.fs-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; margin: 8px 0; align-items: start; }
.fs-view { display: block; max-width: 100%; border-radius: 8px; background: #111; margin: 6px 0; cursor: pointer; min-height: 60px; }
.fs-consent { margin: 10px 0 4px; align-items: flex-start; }
@media (max-width: 720px) { .fs-grid { grid-template-columns: 1fr; } }
.fs-view { max-height: 44vh; width: auto; }
.fs-dlg select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ws-line); background: var(--ws-panel-2); color: var(--ws-text); max-width: 100%; }

/* Menu groups & the multi-column AI Tools menu */
.menu-head { font: 700 10.5px var(--font-body, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted, #9aa); padding: 8px 10px 4px; }
.menu-group { break-inside: avoid; }
.menu-pop.menu-cols { max-width: min(860px, calc(100vw - 12px)); }
.menu-pop.menu-cols .menu-list { display: block; columns: 3 230px; column-gap: 8px; }
.menu-pop { max-height: calc(100vh - 70px); overflow-y: auto; }

/* AI Tools gallery */
.aihub-dlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.aihub-head { display: flex; justify-content: space-between; align-items: center; }
.aihub-search { width: 100%; margin: 8px 0 4px; font-size: 14px; }
.aihub-body { display: grid; gap: 6px; }
.aihub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.aihub-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--ws-line, #333); background: var(--ws-panel-2, #1b1a22); color: var(--ws-text, #eee); cursor: pointer; transition: border-color .15s, transform .15s; }
.aihub-card:hover:not(:disabled), .aihub-card:focus-visible { border-color: var(--accent, #a78bfa); transform: translateY(-1px); outline: none; }
.aihub-card:disabled { opacity: .45; cursor: default; }
.aihub-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(236,72,153,.3)); }
.aihub-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aihub-text { display: grid; gap: 3px; }
.aihub-name { font: 600 13.5px var(--font-body, system-ui); display: flex; gap: 6px; align-items: center; }
.aihub-desc { font-size: 12px; color: var(--ws-muted, #aaa); line-height: 1.35; }
.aihub-new { font: 700 9.5px var(--font-body, system-ui); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: linear-gradient(120deg, #8b5cf6, #ec4899); color: #fff; }
.menubar-btn { white-space: nowrap; }

/* Tool rail categories and flyouts */
.ed-shell .rail-btn { position: relative; }
.rail-more { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-left: 5px solid transparent; border-bottom: 5px solid currentColor; opacity: .65; cursor: context-menu; }
.rail-more::before { content: ""; position: absolute; right: -4px; bottom: -6px; width: 14px; height: 14px; }   /* bigger hit area */
.rail-fly { position: fixed; z-index: 120; min-width: 250px; max-height: calc(100vh - 12px); overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--ws-panel, #16151c); color: var(--ws-text, #eee); border: 1px solid var(--ws-line, #333); box-shadow: 0 18px 50px rgba(0,0,0,.45); animation: rail-in .12s ease-out; }
@keyframes rail-in { from { opacity: 0; transform: translateX(-4px); } }
.rail-fly-title { font: 700 10.5px var(--font-body, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted, #9aa); padding: 6px 10px 6px; }
.rail-fly-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: 500 13px var(--font-body, system-ui); cursor: pointer; }
.rail-fly-item:hover:not(:disabled), .rail-fly-item:focus-visible { background: linear-gradient(120deg, rgba(139,92,246,.85), rgba(236,72,153,.7)); color: #fff; outline: none; }
.rail-fly-item.current { box-shadow: inset 3px 0 0 var(--accent, #a78bfa); }
.rail-fly-item:disabled { opacity: .4; cursor: default; }
.rail-fly-ico { width: 18px; height: 18px; }
.rail-fly-label { display: flex; gap: 6px; align-items: center; }
.rail-fly-kbd { font: 600 11px ui-monospace, Menlo, monospace; color: var(--ws-muted, #9aa); min-width: 18px; text-align: right; }
.rail-fly-item:hover .rail-fly-kbd, .rail-fly-item:focus-visible .rail-fly-kbd { color: #fff; }
.rail-fly-foot { font-size: 11px; color: var(--ws-muted, #9aa); padding: 8px 10px 4px; border-top: 1px solid var(--ws-line, #333); margin-top: 4px; }
.ed-dialog input[type="range"] { accent-color: #a78bfa; }

/* In-app prompt / confirm (lib/ask.js) */
.ask-dlg { width: min(92vw, 440px); }
.ask-dlg .ask-title { margin: 0 0 8px; }
.ask-dlg .ask-msg { margin: 0 0 12px; line-height: 1.5; }
.ask-dlg .ask-input { width: 100%; box-sizing: border-box; margin: 0 0 16px; font: inherit; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.ask-dlg .ask-input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .25); }
.ed-dialog .btn-danger, .ed-shell .btn-danger { background: #dc2626; color: #fff; border-color: transparent; }
.ed-dialog .btn-danger:hover { filter: brightness(1.1); }