:root {
  --bar: #1c1a2b; --bar2: #211f33; --bg: #0d0d10; --panel: #17161f; --ink: #ebe9f3; --muted: #9894aa;
  --line: #2f2c42; --accent: #34d399; --accent-ink: #062b1d; --hover: rgba(52, 211, 153, 0.12);
  --edge: rgba(52, 211, 153, 0.75); --block: rgba(122, 167, 255, 0.55); --bad: #ff8a80; --ok: #6fe3a8;
  --page-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.45 Inter, system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
button, select, input { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-size: 11.5px; }

.topbar { height: 46px; background: var(--bar); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px; gap: 10px; }
.group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.group.right { justify-content: flex-end; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.docname { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); margin-left: 4px; }
button.icon { background: transparent; border: 0; border-radius: 6px; width: 32px; height: 30px; display: inline-grid; place-items: center; color: var(--ink); cursor: pointer; }
button.icon:hover:not(:disabled) { background: var(--bar2); }
button.icon:disabled { opacity: 0.35; cursor: default; }
select { background: var(--bar2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.tabs { display: flex; gap: 2px; }
.tab { background: transparent; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--ink); font-weight: 500; }
.tab:hover { background: var(--bar2); }
.tab.active { color: var(--accent); background: rgba(52, 211, 153, 0.08); }
.tab.off { color: var(--muted); opacity: 0.55; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 5px 14px; font-weight: 600; cursor: pointer; }
button.primary:disabled { opacity: 0.4; cursor: default; }
.savewrap { position: relative; }
.menu { position: absolute; right: 0; top: 36px; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 300px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--bar2); }

.subbar { height: 44px; background: var(--bar); border-bottom: 1px solid var(--line); display: flex; justify-content: center; align-items: center; }
.tools { display: flex; align-items: center; gap: 4px; }
.tool { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.tool:hover:not(:disabled) { background: var(--bar2); }
.tool.active { border-color: var(--accent); color: var(--accent); background: rgba(52, 211, 153, 0.08); }
.tool.soon, .tool:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
label.check { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.legend { display: inline-flex; gap: 10px; margin-left: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.body { flex: 1; display: flex; min-height: 0; }
.thumbs { width: 150px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.thumbs .thumb { cursor: pointer; text-align: center; color: var(--muted); font-size: 12px; }
.thumbs .thumb canvas { display: block; background: #fff; box-shadow: var(--page-shadow); border: 2px solid transparent; border-radius: 2px; }
.thumbs .thumb.current canvas { border-color: var(--accent); }
.panel { width: 268px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 14px 24px; }
.panel h3 { font-size: 13px; margin: 14px 0 6px; font-weight: 600; }
.panel h3:first-child { margin-top: 2px; }
.panel .field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); margin: 8px 0; }
.panel .field input, .panel .field select { background: var(--bar); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--ink); width: 100%; }
.panel .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.panel .row.two { display: grid; grid-template-columns: 1fr 1fr; }
.panel button { background: var(--bar); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.panel button:hover:not(:disabled) { border-color: var(--edge); }
.panel button:disabled { opacity: 0.4; cursor: default; }
.panel button.toggle { width: 34px; }
.panel button.align { width: 38px; display: inline-grid; place-items: center; }
.panel button.on { background: rgba(52, 211, 153, 0.15); border-color: var(--accent); color: var(--accent); }
.swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 6px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 2px solid var(--line); }
#axes label { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.markdown { white-space: pre-wrap; font: 12px/1.45 ui-monospace, monospace; background: var(--bar); border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-height: 60vh; overflow: auto; color: var(--ink); }

.scroller { flex: 1; overflow: auto; position: relative; }
.drop { position: absolute; inset: 0; display: grid; place-items: center; }
.drop.over .dropbox { border-color: var(--accent); }
.dropbox { border: 2px dashed var(--line); border-radius: 14px; padding: 48px 56px; text-align: center; display: grid; gap: 10px; justify-items: center; background: rgba(255,255,255,0.02); }
.dropbox svg { width: 36px; height: 36px; color: #b47cf7; }
.linkish { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 16px 60px; }
.page { position: relative; background: #fff; box-shadow: var(--page-shadow); flex: none; }
.page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page .overlay { position: absolute; inset: 0; }
.block { position: absolute; border: 1px solid transparent; border-radius: 2px; cursor: pointer; }
.overlay.show .block { border-color: rgba(122, 167, 255, 0.35); }
.block:hover { border-color: var(--edge) !important; background: var(--hover); }
.block.chrome { border-style: dashed !important; }
.block.cell { border-radius: 0; }
.overlay.show .block.cell { border-color: rgba(122, 167, 255, 0.5); }
.lcell { position: absolute; border: 1px solid; opacity: 0.7; pointer-events: auto; }
.lcell.empty { border-style: dotted; opacity: 0.4; }
.para-frame { position: absolute; border: 1.5px solid var(--accent); border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 3000px rgba(0,0,0,0); }
.para-frame::before { content: attr(data-label); position: absolute; top: -20px; left: -1px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px 3px 0 0; white-space: nowrap; }
.editor { position: absolute; z-index: 5; border: 2px solid var(--accent); border-radius: 3px; background: #fff; color: #111; padding: 2px 4px; resize: none; overflow: hidden; outline: none; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.lblock { position: absolute; border: 1.5px solid; border-radius: 2px; pointer-events: none; }
.lblock span { position: absolute; top: -1px; left: -1px; transform: translateY(-100%); font: 600 10px/1.4 Inter, system-ui, sans-serif; color: #fff; padding: 0 4px; border-radius: 2px 2px 0 0; white-space: nowrap; }

.status { height: 26px; background: var(--bar); border-top: 1px solid var(--line); padding: 4px 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); }

/* Live editing: the page itself shows the text; a hidden box takes keys. */
.edit-layer { position: absolute; inset: 0; pointer-events: none; }
.live-input { position: absolute; width: 2px; opacity: 0; border: 0; padding: 0; margin: 0; resize: none; overflow: hidden; pointer-events: none; font-size: 16px; }
.caret { position: absolute; width: 1.5px; background: #111; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.selrect { position: absolute; background: rgba(52, 140, 255, 0.28); }

/* Moving a block: its pixels follow the pointer; nothing is written until
   it is dropped. */
.move-ghost { position: absolute; pointer-events: none; outline: 1.5px dashed var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 6; }
.move-from { position: absolute; pointer-events: none; background: rgba(255,255,255,0.75); outline: 1px dashed rgba(0,0,0,0.3); z-index: 5; }
.para-frame.movable { cursor: move; }
/* The selected box's handles: move (the grip), width (left, right), rotate. */
.handle { position: absolute; pointer-events: auto; background: #fff; border: 1.5px solid var(--accent); z-index: 7; }
.handle.h-w, .handle.h-e { width: 9px; height: 9px; top: calc(50% - 4.5px); border-radius: 2px; cursor: ew-resize; }
.handle.h-w { left: -5.5px; } .handle.h-e { right: -5.5px; }
.handle.h-move { top: -22px; right: -1px; width: 22px; height: 18px; border-radius: 3px 3px 0 0; cursor: move; display: grid; place-items: center; background: var(--accent); }
.handle.h-move::after { content: ''; width: 10px; height: 8px; background: radial-gradient(circle, var(--accent-ink) 1.2px, transparent 1.4px) 0 0 / 5px 4px; }
.handle.h-rot { width: 12px; height: 12px; border-radius: 50%; top: -34px; left: calc(50% - 6px); cursor: grab; }
.rot-stem { position: absolute; top: -22px; left: calc(50% - 0.75px); width: 1.5px; height: 20px; background: var(--accent); pointer-events: none; }
.btn-group { position: relative; display: inline-flex; flex: none; }
.btn-group > button { flex: none; }
.panel button.style-caret { width: 16px; padding: 4px 1px; border-left-width: 0; border-radius: 0 6px 6px 0; }
.panel .btn-group > button.toggle:has(+ .style-caret:not([hidden])) { border-radius: 6px 0 0 6px; }
.panel button.axes-btn { padding: 4px 6px; }
.pop { position: absolute; top: 34px; left: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 230px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.axis-row { display: grid; grid-template-columns: 1fr 64px; gap: 4px 8px; align-items: center; margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.axis-row .axis-name { grid-column: 1 / -1; }
.axis-row input[type=range] { width: 100%; }
.axis-row input[type=number] { width: 64px; background: var(--bar); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--ink); }
.font-preview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.resize-preview { position: absolute; pointer-events: none; border: 1.5px dashed var(--accent); z-index: 6; }