/* Logic Pad — a quiet, classic workspace. All surfaces are local assets. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2f6;
  --panel: #fffefc;
  --elevated: #fff;
  --canvas-surface: #fbfafc;
  --text: #26242a;
  --muted: #716b79;
  --border: #e3dfe7;
  --control-border: #b8b1c0;
  --accent: #7057d9;
  --accent-strong: #5d43c4;
  --accent-soft: #eee9fa;
  --primary-fill: #29262e;
  --primary-ink: #fffefc;
  --semantic-green: #317557;
  --semantic-amber: #946310;
  --semantic-blue: #3a709e;
  --semantic-rose: #ab526c;
  --grid-dot: #dcd7e2;
  --shadow-soft: 0 2px 5px #26242a08;
  --shadow-overlay: 0 20px 64px #26242a26;
  --header-height: 64px;
  --toolbar-height: 48px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1a1f;
  --panel: #27242b;
  --elevated: #302c35;
  --canvas-surface: #201e23;
  --text: #f2eff5;
  --muted: #b1a9b8;
  --border: #413b47;
  --control-border: #81768c;
  --accent: #c0a7e7;
  --accent-strong: #d2bdf0;
  --accent-soft: #3a3048;
  --primary-fill: #c0a7e7;
  --primary-ink: #261f2f;
  --semantic-green: #91c9a7;
  --semantic-amber: #dfba77;
  --semantic-blue: #9cbfe0;
  --semantic-rose: #e1a0b2;
  --grid-dot: #3f3945;
  --shadow-soft: 0 2px 5px #00000015;
  --shadow-overlay: 0 20px 64px #00000055;
}
body { color:var(--text); background:var(--bg); font-size:14px; font-weight:400; }
button { touch-action:manipulation; }
button, input, textarea, select { accent-color:var(--accent); }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}
button:disabled { cursor:not-allowed; }
.app-header { height:var(--header-height); display:flex; align-items:center; gap:20px; padding:0 22px; background:var(--panel); border-bottom:1px solid var(--border); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.055em; color:var(--text); white-space:nowrap; }
.brand::before,.brand::after { display:none; }
.brand img { width:34px; height:34px; flex:0 0 34px; }
.header-divider { height:24px; width:1px; background:var(--border); flex-shrink:0; }
.header-caption { font-size:12px; color:var(--muted); }
.header-project { min-width:120px; max-width:480px; flex:1; display:flex; align-items:center; }
.header-project .project-input { width:100%; min-width:0; height:40px; padding:0 6px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text); font-size:20px; font-weight:600; letter-spacing:-.04em; text-overflow:ellipsis; box-shadow:none; }
.header-project .project-input:hover { border-color:var(--border); }
.header-project .project-input:focus { background:var(--elevated); border-color:var(--accent); }
.header-meta { margin-left:auto; display:flex; align-items:center; gap:14px; flex-shrink:0; }
.theme-toggle { display:flex; align-items:center; justify-content:center; gap:7px; min-width:36px; height:36px; border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:7px; padding:0 10px; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; }
.theme-toggle:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.theme-toggle svg { width:16px; height:16px; }
.release-tag { padding:4px 7px; border:1px solid var(--border); border-radius:5px; background:var(--bg); font-size:11px; font-weight:500; color:var(--muted); white-space:nowrap; }
.status { display:flex; align-items:center; gap:7px; padding:0; color:var(--muted); font-size:12px; font-weight:400; white-space:nowrap; }
.status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--semantic-green); flex-shrink:0; }
#collaborationBar { display:flex; align-items:center; gap:10px; min-width:0; }
#collaborationBar button { font:inherit; font-size:12px; }
#collaborationBar [data-action="share"], #collaborationBar .collab-share, #shareWorkspaceBtn, #shareBtn { min-height:36px; padding:0 14px; border:1px solid var(--primary-fill); border-radius:7px; background:var(--primary-fill); color:var(--primary-ink); font-size:13px; font-weight:600; cursor:pointer; }
#collaborationBar [role="status"] { font-size:12px; }
#collaborationBar .collab-avatar { font-size:11px; }
.app { --left-width:264px; --right-width:264px; grid-template-columns:var(--left-width) minmax(0,1fr) var(--right-width); height:calc(100vh - var(--header-height)); height:calc(100dvh - var(--header-height)); }
.app.left-collapsed { --left-width:56px; }
.app.right-collapsed { --right-width:56px; }
.sidebar.side-panel,.rightbar.side-panel { position:relative; padding:0; gap:0; height:100%; max-height:100%; min-width:0; background:var(--panel); overflow:visible; scrollbar-gutter:auto; box-shadow:none; }
.panel-heading { height:var(--toolbar-height); min-height:var(--toolbar-height); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px; border-bottom:1px solid var(--border); }
.panel-title { color:var(--text); font-size:13px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.panel-toggle,.rail-button { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; transition:background 140ms,color 140ms; }
.panel-toggle svg,.rail-button svg { width:19px; height:19px; }
[data-ui-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
[data-ui-icon] svg { width:16px; height:16px; }
.panel-toggle:hover,.rail-button:hover { background:var(--accent-soft); color:var(--accent); }
.panel-toggle[aria-expanded="false"] svg { transform:rotate(180deg); }
.panel-content { min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border) transparent; display:flex; flex-direction:column; padding:24px 18px; gap:26px; }
.side-panel>.panel-content { flex:1 1 0; }
.panel-content>* { flex:0 0 auto; }
.panel-content[hidden],.panel-rail[hidden] { display:none!important; }
.is-collapsed .panel-heading { padding:0; justify-content:center; }
.is-collapsed .panel-title { display:none; }
.panel-rail { min-height:0; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.rail-divider { height:1px; width:22px; background:var(--border); margin:4px 0; }
.tone-green { color:var(--semantic-green); }.tone-purple { color:var(--accent); }.tone-amber { color:var(--semantic-amber); }
.section-label,.project-files-label { margin-bottom:10px; font-size:11px!important; font-weight:600; color:var(--muted)!important; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; }
.project-input { height:42px; padding:0 12px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:7px; font-size:14px; font-weight:500; box-shadow:none; }
.project-input:focus { background:var(--elevated); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.project-actions { gap:8px; margin-top:0; }
.compact-action { min-height:38px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:12px; font-weight:500; line-height:1.4; box-shadow:none; }
.compact-action [data-ui-icon] svg { width:14px; height:14px; }
.compact-action:hover { background:var(--bg); border-color:var(--control-border); transform:none; color:var(--text); box-shadow:none; }
#newProjectBtn { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.danger-soft { color:var(--semantic-rose)!important; background:var(--panel)!important; }
.compact-grid { gap:8px; }
.help-panel { padding:0; max-height:none; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:none; }
.help-panel summary { padding:13px 12px; font-weight:500; font-size:13px; color:var(--text); }
.help-panel summary::after { color:var(--muted); }
.help-panel[open] summary { background:var(--bg); border-bottom-color:var(--border); }
.help-panel p { color:var(--muted); font-size:12px; line-height:1.65; }
.help-panel p strong { color:var(--text); font-weight:600; }
.guide-replay { background:var(--bg); color:var(--text); border-color:var(--border); font-size:12px; }
.guide-replay:hover { background:var(--accent-soft); }
.sidebar-bottom { margin-top:auto; gap:8px; }
.sidebar-bottom .secondary { min-height:40px; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:12px; font-weight:500; box-shadow:none; }
.sidebar-bottom .secondary:hover { background:var(--bg); border-color:var(--control-border); }
.sidebar-bottom #exportBtn { background:var(--primary-fill); border-color:var(--primary-fill); color:var(--primary-ink); }
.sidebar-bottom #exportBtn:hover { filter:brightness(1.12); }
.privacy-note { display:flex; align-items:flex-start; gap:8px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); }
.privacy-note svg { width:15px; height:15px; margin-top:2px; }
.privacy-note p { margin:0; font-size:12px; line-height:1.65; }
.privacy-note p span { color:var(--muted); font-size:11px; }
.workspace { background:var(--bg); min-width:0; }
.topbar { height:var(--toolbar-height); min-height:var(--toolbar-height); flex-shrink:0; position:relative; background:var(--panel); border-bottom:1px solid var(--border); padding:0 20px; gap:12px; backdrop-filter:none; box-shadow:none; }
.canvas-heading { display:flex; align-items:center; gap:9px; color:var(--muted); min-width:0; white-space:nowrap; }
.canvas-heading strong { color:var(--muted); font-size:12px; font-weight:500; }
.canvas-tip { margin-left:12px; color:var(--muted); font-size:12px; font-weight:400; }
kbd { display:inline-block; padding:1px 5px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; background:var(--elevated); color:var(--muted); font:inherit; font-size:11px; }
.zoom-controls { gap:0; padding:2px; border:1px solid var(--border); border-radius:7px; background:var(--bg); box-shadow:none; flex-shrink:0; }
.zoom-controls button { width:30px; height:30px; padding:0; color:var(--text); background:transparent; border:0; border-radius:5px; font-size:15px; font-weight:500; }
.zoom-controls button:hover { background:var(--elevated); color:var(--accent); }
.zoom-controls .zoom-value { min-width:48px; color:var(--text); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
#zoomResetBtn { border-left:1px solid var(--border); border-radius:0 5px 5px 0; color:var(--muted); font-size:12px; }
#canvasWrap { background-color:var(--canvas-surface); background-image:radial-gradient(circle at center,var(--grid-dot) .75px,transparent 1px); scrollbar-color:var(--border) var(--canvas-surface); }
#canvasWrap::-webkit-scrollbar-thumb { background:var(--border); border-color:var(--canvas-surface); }
.connection-banner { position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:12; max-width:calc(100% - 24px); white-space:normal; background:var(--elevated); color:var(--text); border-color:var(--control-border); box-shadow:var(--shadow-soft); font-size:12px; }
.connection-banner button { min-height:32px; background:var(--accent-soft); color:var(--accent); border-color:var(--border); font-size:12px; }
.empty { width:400px!important; max-width:400px; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; text-align:center; color:var(--muted)!important; }
.empty-symbol { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:24px; border:1px solid var(--border); border-radius:16px; background:var(--accent-soft); color:var(--accent); }
.empty-symbol svg { width:30px; height:30px; }
.empty-eyebrow { display:block; margin-bottom:12px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.1em; }
.empty strong { margin:0 0 12px!important; color:var(--text)!important; font-size:26px!important; font-weight:600!important; letter-spacing:-.045em; line-height:1.3; }
.empty p { margin:0 0 26px; font-size:14px; font-weight:400; line-height:1.7; }
.empty-shortcuts { color:var(--muted); font-size:11px; white-space:nowrap; }
.empty-shortcuts kbd { padding:2px 4px; font-size:11px; }
.empty-shortcuts>span { margin:0 8px; }
.rightbar .panel-heading { justify-content:flex-start; }
.rightbar.is-collapsed .panel-heading { justify-content:center; }
.rightbar .panel-content { padding:24px 16px; gap:26px; }
.rightbar .section-label { margin:0 0 10px; }
.rightbar .tool-list { gap:5px; }
.rightbar .tool { min-height:58px; padding:9px 7px 9px 44px; border:1px solid transparent; border-radius:7px; background:transparent; box-shadow:none; overflow:visible; }
.tool::before { display:none; }
.rightbar .tool:hover { background:var(--bg); border-color:var(--border); transform:none; box-shadow:none; }
.tool strong,.rightbar .tool strong { color:var(--text); font-size:13px; font-weight:600; letter-spacing:-.015em; }
.tool span:not(.tool-icon),.rightbar .tool span:not(.tool-icon) { display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.45; }
.tool .tool-icon { display:flex; align-items:center; justify-content:center; position:absolute; left:4px; top:12px; width:28px; height:28px; margin:0; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--accent); }
.tool-icon svg { width:15px; height:15px; }
.tool[data-add="trigger"] .tool-icon,.tool[data-add="spreadsheet"] .tool-icon { color:var(--semantic-green); }
.tool[data-add="condition"] .tool-icon,.tool[data-add="router"] .tool-icon { color:var(--semantic-amber); }
.tool[data-add="merge"] .tool-icon { color:var(--semantic-blue); }
.tool[data-add="problem"] .tool-icon { color:var(--semantic-rose); }
.smiley-library { background:var(--panel); border-color:var(--border); border-radius:8px; box-shadow:none; }
.smiley-library summary { color:var(--text); font-size:12px; font-weight:500; }
.smiley-library[open] summary { background:var(--bg); border-color:var(--border); }
.smiley-tool { min-height:60px; background:var(--panel); box-shadow:none; border-color:var(--border); }
.smiley-tool:hover { background:var(--bg); box-shadow:none; transform:none; border-color:var(--control-border); }
.smiley-tool .emoji { font-size:22px; }
.smiley-tool .name { color:var(--muted); font-size:11px; font-weight:500; }
.smiley-library-help,.shortcut,.rightbar .shortcut { color:var(--muted); font-size:12px; line-height:1.65; }
.smiley-library-help { background:var(--bg); border-color:var(--border); }
.card { --node-accent:var(--accent); border:1px solid var(--control-border); border-radius:10px; background:var(--panel); box-shadow:var(--shadow-soft); transition:border-color 140ms,box-shadow 140ms; }
.card[data-type="trigger"],.card[data-type="spreadsheet"] { --node-accent:var(--semantic-green); }
.card[data-type="condition"],.card[data-type="router"],.card[data-type="smiley"] { --node-accent:var(--semantic-amber); }
.card[data-type="merge"] { --node-accent:var(--semantic-blue); }
.card[data-type="problem"] { --node-accent:var(--semantic-rose); }
.card:hover { border-color:var(--node-accent); box-shadow:0 3px 12px #26242a0d; }
.card.selected,.image-item.selected,.text-item.selected { outline:2px solid var(--accent)!important; outline-offset:3px!important; box-shadow:0 0 0 6px var(--accent-soft),0 8px 24px #26242a12!important; }
.card.connect-source { outline-color:var(--accent); }
.card.connect-target { outline-color:var(--semantic-blue); }
.card .card-head { position:relative; min-height:40px; padding:8px 10px 7px 12px; background:var(--panel)!important; color:var(--text); border-bottom:1px solid var(--border)!important; border-top:2px solid var(--node-accent); border-radius:9px 9px 0 0!important; }
.type-label { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.07em; line-height:1.4; }
.delete { display:grid; place-items:center; min-width:24px; min-height:24px; padding:0; border-radius:4px; background:transparent; color:var(--muted); font-size:18px; }
.delete:hover { color:var(--semantic-rose); background:var(--bg); }
.card textarea { color:var(--text); background:var(--panel); font-size:14px; line-height:1.55; padding:12px; }
.card textarea::placeholder,.card input::placeholder { color:var(--muted); opacity:1; }
.card:not([data-type="condition"]):not([data-type="router"]):not([data-type="merge"]):not([data-type="spreadsheet"]) textarea { border-radius:0 0 9px 9px; }
.flow-port { border-color:var(--control-border); background:var(--panel); box-shadow:0 0 0 2px var(--panel); }
.flow-port:hover { border-color:var(--accent); }
.flow-port.output,.card[data-type="trigger"] .flow-port.output { background:var(--node-accent,var(--accent)); border-color:var(--node-accent,var(--accent)); }
.flow-port.input { background:var(--panel); border-color:var(--node-accent,var(--control-border)); }
.multi-ports,.condition-branches,.spreadsheet-toolbar,.spreadsheet-empty,.spreadsheet-table-wrap { background:var(--panel); color:var(--muted); border-color:var(--border); border-radius:0 0 9px 9px; }
.multi-port-row input,.branch-handle { background:var(--panel); border-color:var(--control-border); color:var(--text); font-size:12px; font-weight:400; }
.branch-handle.true { background:var(--panel); color:var(--semantic-green); border-color:var(--border); }
.branch-handle.false { background:var(--panel); color:var(--semantic-rose); border-color:var(--border); }
.branch-handle.true::before { background:var(--semantic-green); }
.branch-handle.false::before { background:var(--semantic-rose); }
.multi-port-row input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.multi-port-add,.spreadsheet-toolbar button { min-height:30px; background:var(--bg); border-color:var(--border); color:var(--text); font-size:12px; font-weight:500; }
.spreadsheet-toolbar button:hover { background:var(--accent-soft); }
.spreadsheet-table { font-size:12px; }
.spreadsheet-table th,.spreadsheet-table td { border-color:var(--border); }
.spreadsheet-table th { background:var(--bg); color:var(--text); font-weight:600; }
.spreadsheet-table td { background:var(--panel); color:var(--text); }
.spreadsheet-empty { font-size:12px; line-height:1.5; }
.table-editor { background:var(--elevated); border-color:var(--border); color:var(--text); border-radius:9px; }
.table-editor textarea { color:var(--text); background:var(--panel); font-size:12px; }
.table-editor-actions button { background:var(--panel); color:var(--text); border-color:var(--border); font-size:12px; }
.table-editor-actions .apply { background:var(--primary-fill); color:var(--primary-ink); border-color:var(--primary-fill); }
.smiley-caption { color:var(--muted); font-size:12px; font-weight:500; }
.branch-label { background:var(--panel); color:var(--text); border-color:var(--border); font-size:12px; }
.connection-control { background:var(--panel); border-color:var(--control-border); }
.connection-control button { background:var(--panel); color:var(--text); border-color:var(--border); }
.connection-control button:hover { background:var(--accent-soft); }
.insert-menu,.insert-menu button { background:var(--elevated); color:var(--text); border-color:var(--border); }
.insert-menu button { font-size:12px; }
.insert-menu button:hover { background:var(--accent-soft); }
.image-item { background:var(--panel); border-color:var(--control-border); box-shadow:var(--shadow-soft); }
.text-item:hover:not(.editing) { background:var(--accent-soft); }
.text-item.editing,.text-format-bar { background:var(--elevated); border-color:var(--control-border); color:var(--text); }
.text-format-bar button,.text-format-bar select { background:var(--panel); color:var(--text); border-color:var(--control-border); }
.text-format-bar button:hover,.text-format-bar .active { background:var(--accent-soft); color:var(--accent); }
.pan-active,.draw-active,.connect-active { background:var(--accent-soft)!important; border-color:var(--accent)!important; color:var(--accent)!important; }
.project-modal,.onboarding-modal { background:#26242a55; backdrop-filter:blur(5px); padding:20px; }
.project-dialog,.onboarding-card { background:var(--elevated); color:var(--text); border-color:var(--border); border-radius:16px; box-shadow:var(--shadow-overlay); max-height:calc(100dvh - 40px); }
.onboarding-card { overflow-y:auto; }
.project-dialog-head,.onboarding-head { border-color:var(--border); background:var(--panel); }
.project-dialog-head strong,.onboarding-head strong { color:var(--text); font-size:20px; font-weight:600; letter-spacing:-.035em; }
.icon-button { display:grid; place-items:center; min-width:36px; width:36px; height:36px; background:var(--panel); color:var(--muted); border-color:var(--border); border-radius:7px; }
.icon-button:hover { background:var(--accent-soft); color:var(--accent); }
.project-row { background:var(--panel); color:var(--text); border-color:var(--border); border-radius:8px; }
.project-row:hover { background:var(--bg); }
.project-row.active { background:var(--accent-soft); border-color:var(--accent); }
.project-row-name { color:var(--text); font-size:14px; font-weight:600; }
.project-row-meta,.sub { color:var(--muted); font-size:12px; line-height:1.5; }
.project-current-badge { background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:500; }
.onboarding-kicker { color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.1em; }
.onboarding-step strong { color:var(--text); font-size:14px; font-weight:600; }
.onboarding-step p { color:var(--muted); font-size:13px; line-height:1.6; }
.onboarding-step>span { background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; }
.onboarding-actions .primary { background:var(--primary-fill); color:var(--primary-ink); border-radius:7px; font-size:14px; }
.toast { background:var(--primary-fill); color:var(--primary-ink); border-color:var(--border); font-size:13px; box-shadow:var(--shadow-overlay); }
.public-version-badge { right:auto; left:50%; bottom:9px; transform:translateX(-50%); color:var(--muted); font-size:11px; font-weight:400; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
.mobile-desktop-notice { display:none!important; }
@media (max-width:1280px) {
  .header-meta { gap:10px; }
  .release-tag,.theme-label { display:none; }
  .theme-toggle { width:36px; padding:0; }
  .canvas-tip { display:none; }
  .app { --left-width:244px; --right-width:244px; }
  .app.left-collapsed { --left-width:56px; }.app.right-collapsed { --right-width:56px; }
}
@media (max-width:1000px) {
  .app-header { gap:12px; padding:0 16px; }
  .header-project .project-input { font-size:18px; }
  .app,.app.left-collapsed,.app.right-collapsed { grid-template-columns:56px minmax(0,1fr) 56px; }
  .side-panel { z-index:15; }
  .side-panel:not(.is-collapsed) { width:min(284px,calc(100vw - 76px)); background:var(--panel); box-shadow:var(--shadow-overlay); }
  .rightbar.side-panel:not(.is-collapsed) { justify-self:end; }
  .topbar { padding:0 12px; }
}
@media (max-width:600px) {
  :root,:root[data-theme] { --header-height:108px; }
  .app-header { height:var(--header-height); flex-wrap:wrap; align-content:center; row-gap:8px; padding:8px 12px; }
  .brand { font-size:18px; gap:8px; }
  .brand img { width:30px; height:30px; flex-basis:30px; }
  .header-divider,.header-caption { display:none; }
  .header-project { flex:0 0 100%; max-width:none; order:3; }
  .header-project .project-input { height:36px; padding:0 2px; font-size:18px; }
  .header-meta { margin-left:auto; gap:8px; }
  .header-meta>.status { display:none; }
  #collaborationBar { gap:6px; }
  #collaborationBar [role="status"] { max-width:84px; font-size:11px; }
  .app,.app.left-collapsed,.app.right-collapsed { grid-template-columns:48px minmax(0,1fr) 48px; }
  .topbar { padding:0 6px; gap:6px; justify-content:flex-end; }
  .canvas-heading { display:none; }
  .zoom-controls { margin-left:0; }
  .zoom-controls .zoom-value { min-width:40px; }
  .empty { width:300px!important; max-width:300px; }
  .empty strong { font-size:23px!important; }
  .empty-shortcuts { white-space:normal; line-height:1.8; }
  .public-version-badge { bottom:7px; font-size:10px; }
  .project-modal,.onboarding-modal { padding:12px; }
  .project-dialog,.onboarding-card { max-height:calc(100dvh - 24px); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (forced-colors:active) {
  .card .card-head { border-top-color:CanvasText; }
  .flow-port,.panel-toggle,.rail-button { border:1px solid ButtonText; }
  .card.selected { outline-color:Highlight!important; }
}

/* Mobile preparation: one canvas, thumb-accessible controls, temporary drawers. */
.mobile-toolbar,.mobile-backdrop { display:none; }
#blockSearch { width:100%; min-height:42px; margin:0 0 16px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
.block-group { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.block-group h3 { margin:4px 0 6px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; }
.block-group[hidden],.tool[hidden],#blockSearchEmpty[hidden] { display:none!important; }
#blockSearchEmpty { color:var(--muted); font-size:13px; }
.card-head,.flow-port,.resize-handle,.image-item,.text-drag-grip,.text-width-handle,#sketchLayer.drawing { touch-action:none; }
#canvasWrap { overscroll-behavior:contain; }
@media (max-width:700px) {
  :root,:root[data-theme] { --header-height:calc(100px + env(safe-area-inset-top,0px)); --mobile-dock-height:calc(66px + env(safe-area-inset-bottom,0px)); }
  body { overflow:hidden; }
  .app-header { height:var(--header-height); padding:calc(6px + env(safe-area-inset-top,0px)) 14px 6px; gap:8px; flex-wrap:wrap; align-content:center; }
  .brand { font-size:18px; gap:8px; }
  .brand img { width:28px; height:28px; flex-basis:28px; }
  .header-divider,.release-tag,.theme-label,.header-meta>.status { display:none; }
  .header-project { flex:0 0 100%; max-width:none; order:3; }
  .header-project .project-input { height:36px; font-size:17px; padding:0 2px; }
  .header-meta { margin-left:auto; gap:8px; }
  .theme-toggle,#collaborationBar .collab-share { min-height:44px; min-width:44px; }
  #collaborationBar .collab-status { display:none; }
  .app,.app.left-collapsed,.app.right-collapsed { display:grid; grid-template-columns:minmax(0,1fr); height:calc(100dvh - var(--header-height) - var(--mobile-dock-height)); }
  .workspace { grid-column:1; width:100%; min-height:0; }
  .sidebar.side-panel,.rightbar.side-panel { position:fixed; top:var(--header-height); bottom:var(--mobile-dock-height); height:auto; max-height:none; width:min(340px,calc(100vw - 24px)); z-index:50; background:var(--panel); box-shadow:var(--shadow-overlay); }
  .sidebar.side-panel { left:0; border-radius:0 14px 14px 0; }
  .rightbar.side-panel { right:0; border-radius:14px 0 0 14px; }
  .side-panel.is-collapsed { display:none; }
  .side-panel .panel-heading { min-height:56px; padding:0 14px; }
  .side-panel .panel-toggle { width:44px; height:44px; }
  .panel-content { padding:18px 16px; gap:20px; }
  .compact-action,.sidebar-bottom .secondary,.tool,.guide-replay { min-height:44px; }
  #blockSearch { min-height:44px; font-size:16px; }
  .tool-list { gap:4px; }
  .tool { padding:10px 8px; }
  .topbar { min-height:48px; height:48px; padding:0 12px; justify-content:space-between; }
  .canvas-heading { display:flex; font-size:12px; }
  .canvas-heading svg,.canvas-tip { display:none; }
  .zoom-controls { margin-left:auto; }
  .zoom-controls button { min-width:44px; min-height:44px; }
  .zoom-controls .zoom-value { min-width:40px; }
  #canvasWrap { touch-action:pan-x pan-y pinch-zoom; }
  #canvasWrap.pan-mode { touch-action:none; }
  .card .card-head { min-height:44px; }
  .card textarea,.card input,.text-content { font-size:16px; }
  .flow-port { min-width:24px; min-height:24px; }
  .mobile-toolbar { position:fixed; bottom:0; left:0; right:0; height:var(--mobile-dock-height); padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; background:var(--panel); border-top:1px solid var(--border); z-index:60; }
  .mobile-toolbar button { min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:11px; }
  .mobile-toolbar svg { width:20px; height:20px; }
  .mobile-toolbar button[aria-expanded="true"],#mobileBlocks { background:var(--accent-soft); color:var(--accent); }
  .mobile-toolbar button:disabled { opacity:.45; }
  .mobile-backdrop:not([hidden]) { display:block; position:fixed; inset:var(--header-height) 0 var(--mobile-dock-height); padding:0; border:0; background:#15121c66; z-index:40; }
  .public-version-badge { display:none; }
  .empty-shortcuts { display:none; }
  .empty p::after { content:' Swipe the canvas to explore. Drag a block heading to move it.'; }
  .project-modal,.onboarding-modal { padding:12px; }
  .project-dialog,.onboarding-card { width:100%; max-height:calc(100dvh - 24px); overflow:auto; }
  .project-dialog input,.onboarding-card input { font-size:16px; }
  .text-format-bar { max-width:calc(100vw - 16px); flex-wrap:wrap; }
  .toast { bottom:calc(var(--mobile-dock-height) + 12px); max-width:calc(100vw - 24px); }
}
@media (max-width:360px) { .canvas-heading { display:none; } }

.image-copy {position:absolute;top:8px;right:40px;min-height:32px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel,#fff);color:var(--text,#222);cursor:pointer;z-index:3;}
@media(max-width:700px){#canvasWrap{touch-action:manipulation}.image-copy{min-height:44px;}}