:root {
  color-scheme: light;
  --ink: #17181c;
  --muted: #747782;
  --line: #e3e4e8;
  --panel: #ffffff;
  --workspace: #ececf1;
  --accent: #6657e8;
  --accent-dark: #5547d5;
  --accent-soft: #efedff;
  --danger: #c53d4b;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { width: 100%; height: 100%; }
body { margin: 0; background: var(--workspace); color: var(--ink); display: grid; grid-template-rows: 58px minmax(0, 1fr) auto; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, .upload-card { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
button:disabled { opacity: .38; cursor: default; }

.appbar {
  position: relative; z-index: 10; display: grid; grid-template-columns: 250px 1fr auto;
  align-items: center; gap: 16px; height: 58px; padding: 0 14px 0 16px;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 5px rgb(25 27 33 / 5%);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: white; font: 800 16px/1 Georgia, serif; }
.document-title { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
#canvas-title { width: 190px; padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; color: var(--ink); background: transparent; text-align: center; font-weight: 650; }
#canvas-title:hover, #canvas-title:focus { background: #f6f6f8; border-color: var(--line); outline: none; }
.document-title span { color: var(--muted); font-size: 10px; }
.appbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
#delivery-mode { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 11px; }
.icon-button { width: 34px; height: 34px; border-radius: 8px; font-size: 21px; color: #4d5059; }
.icon-button:hover:not(:disabled) { background: #f2f2f5; }
.appbar-divider { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.primary { padding: 9px 15px; border-radius: 8px; background: var(--accent); color: white; font-weight: 700; box-shadow: 0 1px 2px rgb(28 19 105 / 20%); }
.primary:hover:not(:disabled) { background: var(--accent-dark); }
.connection { display: flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.connection > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #d59b31; }
.connection.ready > span:first-child { background: #31a36d; }
.connection.error > span:first-child { background: var(--danger); }

.editor-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: 68px 238px minmax(380px, 1fr) 264px; }
.tool-rail { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 6px; overflow-y: auto; background: #202126; color: #c7c9d1; scrollbar-width: none; }
.tool-rail::-webkit-scrollbar { display: none; }
.rail-button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 9px; color: inherit; font-size: 9px; }
.rail-button span { display: grid; place-items: center; height: 22px; font-size: 19px; font-weight: 500; }
.rail-button:hover, .rail-button.active { background: #34353d; color: white; }
.rail-button.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 42px; border-radius: 0 3px 3px 0; background: #8b7eff; }

.insert-panel, .properties-panel { min-height: 0; overflow-y: auto; background: var(--panel); }
.insert-panel { position: relative; z-index: 2; padding: 20px 16px; border-right: 1px solid var(--line); box-shadow: 3px 0 10px rgb(24 25 30 / 3%); }
.properties-panel { padding: 20px 17px; border-left: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.panel-heading.compact { margin-bottom: 12px; }
.panel-heading.with-action { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading.with-action button { width: 29px; height: 29px; border-radius: 7px; color: var(--muted); font-size: 18px; }
.panel-heading.with-action button:hover { background: #f0f0f4; color: var(--ink); }
.panel-view { display: none; }
.panel-view.active { display: block; animation: panel-in 120ms ease-out; }
@keyframes panel-in { from { opacity: .45; transform: translateX(-4px); } }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.template-card { display: grid; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fafafd; text-align: left; }
.template-card:hover { border-color: #aaa2f1; background: #f8f7ff; }
.template-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.template-preview { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #d7d8dc; border-radius: 4px; background: white; }
.template-preview::before, .template-preview::after { content: ""; position: absolute; background: #27282d; }
.template-preview.note::before { left: 12%; top: 22%; width: 54%; height: 5%; box-shadow: 0 10px #777, 0 20px #777, 0 30px #777; }
.template-preview.note::after { right: 10%; top: 13%; width: 18%; height: 18%; border-radius: 50%; }
.template-preview.quote::before { left: 14%; top: 28%; width: 72%; height: 10%; box-shadow: 0 14px #27282d; }
.template-preview.quote::after { left: 14%; bottom: 15%; width: 24%; height: 3%; }
.template-preview.photo::before { left: 11%; top: 10%; width: 55%; height: 61%; background: linear-gradient(135deg,#ddd 50%,#777 50%); transform: rotate(-4deg); box-shadow: 0 0 0 5px white, 0 2px 5px #777; }
.template-preview.photo::after { right: 8%; bottom: 19%; width: 44%; height: 5%; box-shadow: 0 9px #777; }
.template-preview.list::before { left: 25%; top: 18%; width: 60%; height: 4%; box-shadow: 0 13px #555, 0 26px #555, 0 39px #555; }
.template-preview.list::after { left: 10%; top: 16%; width: 7%; height: 7%; border: 1px solid #333; background: white; box-shadow: 0 13px 0 -1px white, 0 13px 0 0 #333, 0 26px 0 -1px white, 0 26px 0 0 #333, 0 39px 0 -1px white, 0 39px 0 0 #333; }
.text-presets { display: grid; gap: 9px; margin-top: 18px; }
.text-preset { min-height: 58px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fafafd; text-align: left; }
.text-preset:hover { border-color: #aaa2f1; background: #f8f7ff; }
.text-preset.heading { font: 700 22px Georgia,serif; }
.text-preset.subheading { font: 650 16px Arial,sans-serif; }
.text-preset.body { font: 13px Arial,sans-serif; }
.font-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 1px 9px; }
.font-heading h3 { margin: 0; color: #656873; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.font-heading span { color: var(--muted); font-size: 9px; }
.font-grid { display: grid; gap: 6px; }
.font-group-label { margin: 10px 2px 1px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.font-grid button { overflow: hidden; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; font-size: 19px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.font-grid button:hover, .font-grid button.active { border-color: #aaa2f1; background: #f1efff; }
.upload-card.large { margin-top: 18px; min-height: 82px; }
.paste-card { display: flex; align-items: center; gap: 11px; margin-top: 9px; padding: 11px; border: 1px dashed #cbc8e3; border-radius: 9px; background: #faf9ff; }
.paste-card kbd { display: grid; place-items: center; min-width: 40px; height: 30px; padding: 0 7px; border: 1px solid #d8d5ec; border-bottom-width: 2px; border-radius: 6px; background: white; color: var(--accent); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.paste-card div { min-width: 0; display: grid; gap: 2px; }
.paste-card strong { font-size: 11px; }
.paste-card small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.panel-note { margin: 12px 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.panel-field { display: grid; gap: 8px; margin-top: 18px; color: #656873; font-size: 10px; font-weight: 650; }
.panel-field input { accent-color: var(--accent); }
.panel-field select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #fafafd; }
.draw-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fafafd; }
.draw-toggle span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.draw-toggle.active { border-color: var(--accent); background: var(--accent-soft); }
.secondary-wide { width: 100%; margin-top: 16px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 10px; }
.background-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.background-grid button { display: grid; justify-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fafafd; font-size: 10px; }
.background-grid button span { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #d0d1d5; border-radius: 4px; }
.layers-list { display: grid; gap: 6px; margin-top: 16px; }
.layer-item { display: grid; grid-template-columns: 27px minmax(0,1fr) 27px; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; }
.layer-item.active { border-color: #aaa2f1; background: #f1efff; }
.layer-item > button { height: 27px; border-radius: 5px; color: var(--muted); }
.layer-item > button:hover { background: #e8e7ee; color: var(--ink); }
.layer-item .layer-select { overflow: hidden; text-align: left; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.history-section { margin-top: 0; }
.insert-section { margin-top: 23px; }
.insert-section h3 { margin: 0 0 9px; color: #656873; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.section-title-row h3 { margin: 0; }
.section-title-row button { width: 25px; height: 25px; border-radius: 6px; color: var(--muted); font-size: 16px; }
.section-title-row button:hover { background: #f0f0f4; color: var(--ink); }
.history-list { display: grid; gap: 9px; }
.history-empty { margin: 0; padding: 16px 10px; border: 1px dashed #d9dae0; border-radius: 9px; color: var(--muted); background: #fafafd; text-align: center; font-size: 10px; }
.history-item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; }
.history-item:hover { border-color: #aaa2f1; background: #f8f7ff; box-shadow: 0 2px 7px rgb(47 40 117 / 7%); }
.history-item.loading { opacity: .58; pointer-events: none; }
.history-thumb { display: block; width: 78px; height: 59px; border: 1px solid #d7d8dc; border-radius: 4px; background: #fff; image-rendering: pixelated; }
.history-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.history-copy strong { overflow: hidden; color: #30323a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.history-copy time { color: var(--muted); font-size: 9px; }
.history-badge { align-self: flex-start; padding: 2px 5px; border-radius: 999px; background: #eeecff; color: #5b4fd0; font-size: 8px; font-weight: 750; letter-spacing: .03em; }
.history-badge.flattened { background: #eff0f3; color: #6e717b; }
.insert-card, .upload-card { width: 100%; min-height: 65px; border: 1px solid var(--line); border-radius: 10px; background: #fafafd; }
.insert-card:hover, .upload-card:hover { border-color: #aaa2f1; background: #f8f7ff; }
.text-card { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; }
.text-card > span { font: 700 28px/1 Georgia, serif; }
.text-card small, .upload-card small { color: var(--muted); font-size: 11px; }
.upload-card { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; padding: 11px; cursor: pointer; }
.upload-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.upload-card strong { font-size: 12px; }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.photo-actions button { padding: 9px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #555862; font-size: 10px; }
.photo-actions button:hover:not(:disabled) { border-color: #aaa2f1; background: #f8f7ff; }
.doodle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.doodle-grid button { display: grid; place-items: center; gap: 4px; min-height: 65px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #5d606a; font-size: 9px; }
.doodle-grid button:hover { border-color: #aaa2f1; background: #f8f7ff; }
.doodle-grid span { color: #25262c; font: 30px/1 "Caveat", cursive; }
.shape-grid, .compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }
.shape-grid button, .compact-grid button, .clear-button { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.shape-grid button { display: grid; place-items: center; gap: 8px; min-height: 67px; color: #5d606a; font-size: 10px; }
.shape-grid button:hover, .compact-grid button:hover, .clear-button:hover { border-color: #aaa2f1; background: #f8f7ff; }
.shape-box { display: block; width: 25px; height: 19px; border: 2px solid #353740; }
.shape-circle { display: block; width: 23px; height: 23px; border: 2px solid #353740; border-radius: 50%; }
.shape-line { display: block; width: 30px; height: 2px; background: #353740; transform: rotate(-22deg); }
.compact-grid button { padding: 8px 5px; font-size: 10px; }
.compact-grid .danger-quiet { color: var(--danger); }
.clear-button { width: 100%; margin-top: 9px; padding: 8px; color: var(--muted); font-size: 10px; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 43px minmax(0, 1fr); background: var(--workspace); }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; border-bottom: 1px solid #d9dae0; background: rgb(255 255 255 / 86%); backdrop-filter: blur(10px); }
.workspace-label { color: var(--muted); font-size: 11px; font-weight: 650; }
.context-toolbar { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.context-toolbar.hidden { display: none; }
.context-toolbar select, .context-toolbar input, .context-toolbar button { height: 29px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #555862; font-size: 11px; }
.context-toolbar select:hover, .context-toolbar input:hover, .context-toolbar button:hover { border-color: var(--line); background: white; }
.context-toolbar select { width: 116px; }
#toolbar-color { width: 64px; }
.context-toolbar input { width: 43px; padding: 4px; }
.context-toolbar button { min-width: 29px; }
#crop-image { padding: 0 7px; }
.context-toolbar button.active { background: var(--accent-soft); color: var(--accent); }
.toolbar-separator { flex: 0 0 auto; width: 1px; height: 21px; margin: 0 3px; background: var(--line); }
.zoom-control { display: flex; align-items: center; height: 29px; border: 1px solid #d9dae0; border-radius: 8px; background: white; overflow: hidden; box-shadow: 0 1px 2px rgb(24 25 30 / 4%); }
.zoom-control button { min-width: 29px; height: 100%; padding: 0 8px; border-right: 1px solid var(--line); color: #5e616c; font-size: 12px; }
.zoom-control button:last-child { border-right: 0; }
.zoom-control button:hover { background: #f5f5f7; }
#zoom-fit { min-width: 52px; }
.stage-scroll { min-width: 0; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 46px; background-image: radial-gradient(#cfd0d6 .8px, transparent .8px); background-size: 16px 16px; }
.stage-wrap { display: grid; justify-items: center; }
.canvas-shell { --canvas-scale: 1; width: calc(400px * var(--canvas-scale) + 2px); height: calc(300px * var(--canvas-scale) + 2px); touch-action: none; background: #fff; border: 1px solid #c5c6cb; box-shadow: 0 12px 38px rgb(29 30 38 / 18%); line-height: 0; overflow: hidden; transition: width 120ms ease, height 120ms ease; }
#editor { width: 400px; height: 300px; }
#editor .konvajs-content { width: 400px !important; height: 300px !important; transform: scale(var(--canvas-scale)); transform-origin: top left; }
#editor canvas { max-width: none; }
.hint { margin: 14px 0 0; color: #777a84; font-size: 10px; }

.selection-empty { margin: 15px 0; padding: 16px 12px; border: 1px dashed #d9dae0; border-radius: 9px; color: var(--muted); background: #fafafd; text-align: center; font-size: 11px; }
.selection-empty.hidden { display: none; }
.selection-empty:not(.hidden) + .property-fields { display: none; }
.property-fields { display: grid; gap: 12px; margin-top: 15px; }
.property-fields label { display: grid; gap: 6px; color: #656873; font-size: 10px; font-weight: 650; }
.property-fields input, .property-fields select, .property-fields textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #fafafd; color: var(--ink); padding: 8px; outline: none; }
.property-fields input:focus, .property-fields select:focus, .property-fields textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.property-fields textarea { resize: vertical; }
.property-fields input[type="range"] { padding: 0; accent-color: var(--accent); }
.position-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 15px; }
.position-grid button, .arrange-row button { padding: 7px 3px; border: 1px solid var(--line); border-radius: 7px; background: #fafafd; color: #656873; font-size: 9px; }
.position-grid button:hover, .arrange-row button:hover { border-color: #aaa2f1; background: #f8f7ff; }
.arrange-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.property-divider { height: 1px; margin: 21px 0; background: var(--line); }
#preview { display: block; width: 100%; height: auto; border: 1px solid #d5d6da; background: white; image-rendering: pixelated; }
.output-meta { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 9px; }
.output-meta strong { color: #595c65; }
.output-fields { margin-top: 14px; }

.transfer-drawer { position: relative; z-index: 8; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgb(24 25 30 / 5%); }
.transfer-drawer summary { height: 43px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 0 17px; cursor: pointer; list-style: none; }
.transfer-drawer summary::-webkit-details-marker { display: none; }
.drawer-chevron { color: var(--muted); font-size: 16px; transition: transform 120ms ease; }
.transfer-drawer:not([open]) .drawer-chevron { transform: rotate(180deg); }
.transfer-drawer summary div { display: flex; align-items: baseline; gap: 8px; }
.transfer-drawer summary strong { font-size: 12px; }
.transfer-drawer summary small { color: var(--muted); font-size: 10px; }
.drawer-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 14px 12px; }
#logs { height: 145px; margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: 8px; background: #17181d; color: #cbd2ce; padding: 12px; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.drawer-actions { display: flex; flex-direction: column; gap: 7px; width: 112px; }
.drawer-actions button { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 10px; }
.status { align-self: center; padding: 4px 8px; border-radius: 999px; background: #efeff2; color: #686b75; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.status.running, .status.waiting, .status.delivering, .status.cancelling { background: #fff0c2; color: #765a00; }
.status.complete { background: #dcf3e8; color: #21774e; }
.status.failed, .status.cancelled { background: #f9e0e2; color: var(--danger); }
.context-menu { position: fixed; z-index: 30; display: grid; min-width: 185px; padding: 5px; border: 1px solid #d8d9de; border-radius: 9px; background: white; box-shadow: 0 10px 28px rgb(24 25 30 / 20%); }
.context-menu.hidden { display: none; }
.context-menu button { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px; border-radius: 6px; text-align: left; font-size: 11px; }
.context-menu button:hover { background: #f1f0f8; }
.context-menu span { height: 1px; margin: 4px; background: var(--line); }
.context-menu kbd { color: var(--muted); font: 9px ui-monospace,monospace; }
.canvas-text-editor { position: fixed; z-index: 40; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--accent); outline: 2px solid var(--accent-soft); background: rgb(255 255 255 / 94%); line-height: 1.15; resize: none; transform-origin: left top; }

@media (max-width: 1050px) {
  .editor-layout { grid-template-columns: 62px 210px minmax(350px, 1fr); }
  .properties-panel { display: none; }
  .appbar { grid-template-columns: 210px 1fr auto; }
}

@media (max-width: 760px) {
  body { display: grid; grid-template-rows: 54px minmax(0, 1fr); height: 100dvh; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
  .appbar { position: relative; height: 54px; padding: 0 10px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .brand strong, .brand-mark, .connection, .appbar-divider, #download { display: none; }
  .brand { width: 34px; }
  .document-title { display: flex; min-width: 0; }
  #canvas-title { width: min(42vw, 170px); font-size: 14px; }
  .appbar-actions { gap: 2px; }
  #delivery-mode { width: 62px; padding: 0 4px; border-color: transparent; background: #f4f3fb; font-size: 10px; }
  .icon-button { display: block; width: 32px; height: 32px; font-size: 20px; }
  .primary { padding: 8px 11px; border-radius: 999px; font-size: 11px; }
  .editor-layout { min-height: 0; height: calc(100dvh - 54px - 111px); grid-template-columns: 1fr; }
  .editor-layout, .workspace { width: 100%; max-width: 100vw; min-width: 0; overflow: hidden; }
  .workspace { grid-column: 1; grid-row: 1; }
  .tool-rail {
    position: fixed; z-index: 18; left: 0; right: 0; bottom: 43px; height: 68px;
    flex-direction: row; align-items: stretch; gap: 2px; padding: 5px max(6px, env(safe-area-inset-left));
    overflow-x: auto; overflow-y: hidden; background: rgb(31 32 37 / 96%); backdrop-filter: blur(16px);
  }
  .rail-button { min-width: 62px; padding: 5px 7px; font-size: 9px; }
  .rail-button span { height: 25px; font-size: 21px; }
  .rail-button.active::before { left: auto; top: 0; width: 30px; height: 3px; border-radius: 0 0 3px 3px; }
  .rail-button[data-panel="images-panel"] { order: 1; }
  .rail-button[data-panel="text-panel"] { order: 2; }
  .rail-button[data-panel="elements-panel"] { order: 3; }
  .rail-button[data-panel="layers-panel"] { order: 4; }
  .rail-button[data-panel="history-panel"] { order: 5; }
  .rail-button[data-panel="templates-panel"] { order: 6; }
  .rail-button[data-panel="draw-panel"] { order: 7; }
  .rail-button[data-panel="background-panel"] { order: 8; }
  .insert-panel {
    display: block; position: fixed; z-index: 17; top: auto; right: 0; bottom: 111px; left: 0;
    width: 100%; max-height: min(48dvh, 430px); padding: 18px 18px 24px; border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% + 18px)); transition: transform 180ms ease;
    box-shadow: 0 -12px 35px rgb(24 25 30 / 20%);
  }
  .insert-panel.mobile-open { transform: translateY(0); }
  .workspace-toolbar { width: 100%; max-width: 100vw; min-width: 0; height: 42px; padding: 0 8px; overflow: hidden; }
  .workspace-label { padding-left: 4px; }
  .context-toolbar { flex: 1 1 0; width: 0; max-width: 100%; min-width: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .context-toolbar > * { flex: 0 0 auto; }
  .context-toolbar :disabled { display: none; }
  #flip-x, #flip-y { display: none; }
  .context-toolbar select { width: 100px; }
  .zoom-control { display: none; }
  .stage-scroll { place-items: center; padding: 14px 8px 24px; overscroll-behavior: contain; }
  .hint { margin-top: 9px; max-width: 92vw; text-align: center; }
  .transfer-drawer { position: fixed; z-index: 25; right: 0; bottom: 0; left: 0; }
  .transfer-drawer summary { height: 43px; padding: 0 12px; }
  .transfer-drawer summary div { min-width: 0; display: grid; gap: 1px; }
  .transfer-drawer summary small { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drawer-content { grid-template-columns: 1fr; padding: 0 10px 10px; }
  #logs { height: min(36dvh, 240px); font-size: 9px; }
  .drawer-actions { width: auto; flex-direction: row; }
  .drawer-actions button { flex: 1; min-height: 40px; }
}