/* Paper / Motion — constructor interface only.
   Artwork, canvas geometry, inline text metrics and export styles are untouched. */
:root:root {
  --blue: var(--paper-accent, #0071e3);
  --line: var(--paper-line, #e0e2e7);
  --muted: var(--paper-muted, #64666d);
  --constructor-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper-bg, #f6f7f9);
}
:root:root body { background: var(--paper-bg, #f6f7f9); }
:root:root.constructor-embedded body { background: transparent; }
/* Do not put this font on body, main or .workspace: SVG text inherits fonts. */
:root:root :is(body>header, .topbar, .library-welcome, .library-list-head, .labels-empty, .library-storage-note, .saved-label-actions, .open-saved-label>strong, .open-saved-label>span, .open-saved-label>small, #documentBar, aside.layers, aside.properties, .canvas-toolbar, .source, .workspace>footer, #dimension, #toast) {
  font-family: var(--constructor-ui-font);
  color: var(--paper-ink, #1d1d1f);
}
:root:root :is(.modal-heading, .modal-note, .chosen h3, .chosen-item, .template-dialog-head, .template-dialog-foot, .template-library-toolbar, #templateCategories, .library-format-controls, .library-notice, .sheet-heading, .sheet-actions, .new-label-heading, #newLabelForm>label, #newLabelForm>.hint, .new-label-size-picker, #formatDialog h2, #formatDialog .formatbar, #tabs, #catalog .catalog-item, dialog button:not(.template-card), dialog input, dialog select) {
  font-family: var(--constructor-ui-font);
}
:root:root :is(body>header, body>main, dialog, .paper-size-panel, .canvas-toolbar, .download-options, .saved-label-card, .template-card) {
  background-color: var(--paper-panel, #fff);
  border-color: var(--paper-line, #e0e2e7);
  color: var(--paper-ink, #1d1d1f);
}
:root:root body>main { border-radius: 20px; box-shadow: 0 8px 32px #15223306; }
:root:root body>header { border-bottom-color: var(--paper-line, #e0e2e7); }
:root:root :is(.brand, .labels-empty h3, .panel-title h2, .library-welcome h1, .library-list-head h2) { color: var(--paper-ink, #1d1d1f); }
:root:root :is(.brand-light, .muted, .hint, .source, .text-button, .setting-label, .control-label, .subhead, .subhead span, .left-bottom, .left-bottom b, .small-icon, .modal-heading p, .modal-note, .template-card>span, .template-dialog-head p, .template-dialog-foot, .sheet-heading p, .sheet-actions span, .library-welcome p, .library-storage-note, .open-saved-label>span, .open-saved-label>small, #documentBar>span, .prop-section h3, .properties label) {
  color: var(--paper-muted, #64666d);
}
:root:root :where(body>header, .topbar, #labelLibrary, #documentBar, .layers, .properties, .canvas-toolbar, .source, dialog) :where(button, select, input:not([type=checkbox]), textarea):not(.inline-text-editor) {
  border-color: var(--paper-line, #e0e2e7);
  border-radius: 10px;
  color: var(--paper-ink, #1d1d1f);
  background-color: var(--paper-input, #fff);
}
:root:root :where(body>header, .topbar, #labelLibrary, #documentBar, .layers, .properties, .canvas-toolbar, .source, dialog) button:not(:disabled):hover {
  border-color: var(--paper-accent, #0071e3);
  background-color: var(--paper-soft, #eef5ff);
}
:root:root :is(button, summary):focus-visible {
  outline: 2px solid var(--paper-accent, #0071e3);
  outline-offset: 3px;
}
:root:root :is(.primary, #formatDialog #applySize, .paper-segments [aria-pressed=true]) {
  background: var(--paper-accent, #0071e3);
  border-color: var(--paper-accent, #0071e3);
  color: #fff;
  box-shadow: 0 3px 8px #0071e316;
}
:root:root :is(.primary, #formatDialog #applySize, .paper-segments [aria-pressed=true]):not(:disabled):hover {
  background: #0063c7;
  border-color: #0063c7;
  color: #fff;
}
:root:root :is(.download-menu summary, #labelLibrary button, #newLabelForm>.primary) { border-radius: 12px; }
:root:root .download-options { padding: 10px; border-radius: 16px; box-shadow: 0 16px 42px #10182824; }
:root:root :is(.badge, .pill, .key, .library-list-head h2 span) { background: var(--paper-soft, #eef5ff); color: var(--paper-accent, #0071e3); }
:root:root .key { border-color: var(--paper-line, #e0e2e7); }
:root:root #labelLibrary { padding: 32px; }
:root:root .library-welcome { gap: 24px; margin-bottom: 36px; }
:root:root .library-welcome h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.035em; font-weight: 650; margin: 0 0 12px; }
:root:root .library-welcome p { font-size: 15px; line-height: 1.65; max-width: 620px; }
:root:root .library-welcome>.primary { padding: 15px 22px; font-size: 14px; font-weight: 600; }
:root:root .library-list-head h2 { font-size: 20px; letter-spacing: -.025em; }
:root:root .saved-label-card { border-radius: 20px; box-shadow: 0 6px 22px #15223305; }
:root:root .saved-label-card .open-saved-label { border: 0; border-radius: 0; background: transparent; }
:root:root .saved-label-card .open-saved-label:hover { background: var(--paper-soft, #eef5ff); }
:root:root .saved-label-preview { background: var(--paper-bg, #f6f7f9); border-radius: 12px; }
:root:root .open-saved-label strong { font-size: 18px; letter-spacing: -.02em; }
:root:root .saved-label-actions button:first-child { color: var(--paper-accent, #0071e3); }
:root:root .saved-label-actions .delete-saved-label { color: #b32b3c; }
:root[data-theme=dark] .saved-label-actions .delete-saved-label { color: #ff9ca9; }
:root:root .labels-empty { padding: 56px 24px; border: 1px dashed var(--paper-line, #e0e2e7); border-radius: 22px; background: var(--paper-panel, #fff); color: var(--paper-muted, #64666d); }
:root:root .labels-empty h3 { letter-spacing: -.025em; font-size: 25px; }
:root:root #labelDeletionNotice { background: var(--paper-soft, #eef5ff); border-radius: 14px; }
:root:root #labelDeletionNotice button { color: var(--paper-accent, #0071e3); }
:root:root #documentName { background: transparent; border-color: transparent; letter-spacing: -.02em; }
:root:root #documentName:is(:hover,:focus) { border-color: var(--paper-line, #e0e2e7); }
:root:root .paper-size-panel { border-radius: 16px; }
:root:root .compact-top .template-trigger { background: var(--paper-soft, #eef5ff); color: var(--paper-accent, #0071e3); border: 0; border-radius: 16px; }
:root:root :is(.template-trigger small, .template-trigger .template-icon) { color: var(--paper-accent, #0071e3); }
:root:root .paper-segments { background: var(--paper-bg, #f6f7f9); border-color: var(--paper-line, #e0e2e7); border-radius: 12px; }
:root:root .paper-segments button:not([aria-pressed=true]) { background: transparent; color: var(--paper-muted, #64666d); }
:root:root :is(.layers #empty, .prop-heading, .stepper, .chosen, .template-library>aside, .library-format-controls, .library-notice) { background: var(--paper-bg, #f6f7f9); border-color: var(--paper-line, #e0e2e7); color: var(--paper-ink, #1d1d1f); }
:root:root .layers #empty { border-radius: 12px; color: var(--paper-muted, #64666d); }
:root:root #layers .layer { border-radius: 12px; border-color: var(--paper-line, #e0e2e7); background: var(--paper-panel, #fff); color: var(--paper-ink, #1d1d1f); }
:root:root #layers .layer:is(:hover,.hovered,.active) { background: var(--paper-soft, #eef5ff); border-color: var(--paper-accent, #0071e3); color: var(--paper-accent, #0071e3); box-shadow: none; }
:root:root #layers .layer :is(.select-layer,.delete) { background: transparent; border: 0; color: inherit; }
:root:root :is(.layer .symbol,.layer .delete) { color: var(--paper-muted, #64666d); }
:root:root .stepper :is(input,button) { border: 0; border-radius: 0; background: transparent; }
:root:root :is(.buttons .on, .catalog-item.selected, #templateCategories [aria-pressed=true], .orientation-toggle [aria-pressed=true], #newLabelSizeOptions button[aria-pressed=true]) { background: var(--paper-soft, #eef5ff); color: var(--paper-accent, #0071e3); border-color: var(--paper-accent, #0071e3); }
:root:root .content-input-wrap .content-field-actions button { background: transparent; border: 0; color: var(--paper-muted, #64666d); }
:root:root .workspace { background-color: var(--paper-bg, #f6f7f9); }
:root:root .source select { background-color: transparent; border: 0; }
:root:root .workspace>footer { color: var(--paper-muted, #64666d); border-color: var(--paper-line, #e0e2e7); }
:root:root dialog { border-radius: 22px; box-shadow: 0 28px 100px #11182733; }
:root:root dialog::backdrop { background: #10182866; backdrop-filter: blur(7px); }
:root:root :is(.modal-heading h2,.template-dialog-head h2,.new-label-heading h2,.sheet-heading h2,#formatDialog h2) { letter-spacing: -.03em; font-weight: 650; color: var(--paper-ink, #1d1d1f); }
:root:root :is(.template-dialog-head,.template-dialog-foot,.library-format-controls,.template-library>aside,.sheet-heading,.sheet-actions) { border-color: var(--paper-line, #e0e2e7); }
:root:root :is(.template-card,.chosen-item) { border-color: var(--paper-line, #e0e2e7); border-radius: 14px; }
:root:root .template-card strong { font-family: var(--constructor-ui-font); letter-spacing: -.015em; }
:root:root .template-card>span { font-family: var(--constructor-ui-font); }
:root:root :is(.template-thumb,#sheetPreview) { background: var(--paper-bg, #f6f7f9); }
:root:root .chosen-item { background: var(--paper-panel, #fff); }
:root:root #newLabelSizeOptions { border-color: var(--paper-line, #e0e2e7); border-radius: 12px; }
:root:root #tabs button { border-radius: 0; background: transparent; }
:root:root #tabs button.active { color: var(--paper-accent, #0071e3); border-bottom-color: var(--paper-accent, #0071e3); }
:root:root #toast { background: var(--paper-ink, #1d1d1f); color: var(--paper-panel, #fff); border-radius: 14px; }
@media (max-width:760px) {
  :root:root #labelLibrary { padding: 20px 16px; }
  :root:root .library-welcome { margin-bottom: 28px; gap: 18px; }
  :root:root .library-welcome h1 { font-size: 28px; }
  :root:root .library-welcome>.primary { width: 100%; }
  :root:root .labels-empty { padding: 38px 18px; }
  :root:root dialog { border-radius: 18px; }
  :root:root :is(.modal-heading h2,.template-dialog-head h2,.new-label-heading h2) { font-size: 22px; }
  :root:root .template-dialog-head { flex-shrink: 0; }
  :root:root #templateDialog { overflow-y: auto; }
  :root:root .template-dialog-foot { flex-shrink: 0; }
  :root:root .template-card { border-radius: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  :root:root :is(#layers .layer,.compact-top .template-trigger,#toast) { transition: none; }
}

/* Refreshed editor skins define tokens on body. Bridge them here so mixed
   legacy selectors use one palette, including dialogs and selected controls. */
@media screen {
  html:root:root body.lime-editor {
    --le-bg:var(--paper-bg); --le-surface:var(--paper-panel);
    --le-soft:var(--paper-soft); --le-stage:var(--paper-bg);
    --le-ink:var(--paper-ink); --le-muted:var(--paper-muted);
    --le-line:var(--paper-line); --le-hover:var(--paper-soft);
    --le-accent:var(--paper-accent); --le-selected:var(--paper-soft);
    --le-dot:var(--paper-line); --le-shadow:var(--paper-shadow);
    --le-lime:var(--paper-button-bg,#0071e3); --le-lime-hover:var(--paper-button-hover,#0063c7); --le-primary-ink:var(--paper-button-ink,#fff);
    --blue:var(--paper-accent); --line:var(--paper-line); --muted:var(--paper-muted);
    background:var(--paper-bg); color:var(--paper-ink);
  }
  html:root:root.constructor-embedded body.lime-editor {background:transparent}
  html:root:root body.lime-editor :is(.primary,#formatDialog #applySize,.paper-segments [aria-pressed=true]) {
    background:var(--le-lime); border-color:var(--le-lime); color:var(--le-primary-ink);
  }
  html:root:root body.lime-editor :is(.primary,#formatDialog #applySize,.paper-segments [aria-pressed=true]):not(:disabled):hover {
    background:var(--le-lime-hover); border-color:var(--le-lime-hover); color:var(--le-primary-ink);
  }
  html:root:root body.lime-editor .compact-top .template-trigger {
    background:var(--paper-soft); color:var(--paper-accent);
  }
  html:root:root body.lime-editor .compact-top .template-trigger:hover {
    background:var(--paper-soft); box-shadow:inset 0 0 0 1px var(--paper-accent);
  }
  html:root:root body.lime-editor .compact-top .template-trigger :is(strong,small,.template-icon) {color:inherit}
  html:root:root body.lime-editor :is(.saved-label-card,.template-card,.library-notice) {
    background:var(--paper-panel); color:var(--paper-ink); border-color:var(--paper-line);
  }
  html:root:root body.lime-editor .template-card:hover {background:var(--paper-soft);border-color:var(--paper-accent)}
  html:root:root body.lime-editor :is(#a4Capacity,.format-presets .on) {color:var(--paper-accent)}
  html:root:root body.lime-editor .format-presets .on {background:var(--paper-soft);border-color:var(--paper-accent)}
  html:root:root body.lime-editor .code-error {color:var(--le-danger,#b32b3c)}
  html:root:root body.lime-editor input::placeholder,
  html:root:root body.lime-editor textarea::placeholder {color:var(--paper-muted);opacity:1}
  html:root:root body.lime-editor #toast {background:var(--paper-ink);color:var(--paper-panel)}
  /* Dialog titles and long saved names must wrap without pushing close/actions away. */
  html:root:root body.lime-editor :is(.open-saved-label>strong,.template-card>strong,.chosen-item) {overflow-wrap:anywhere}
  html:root:root body.lime-editor :is(.template-dialog-head,.new-label-heading,.sheet-heading)>div {min-width:0}
  html:root:root body.lime-editor :is(.template-dialog-head,.new-label-heading,.sheet-heading)>button {flex-shrink:0}
  html:root:root body.lime-editor .template-dialog-foot {flex-shrink:0}
  @media(max-width:760px) {
    html:root:root body.lime-editor .template-library>section {min-height:0}
    html:root:root body.lime-editor .template-library-toolbar select {max-width:100%}
    html:root:root body.lime-editor .library-welcome>.primary {white-space:normal}
    html:root:root body.lime-editor .download-options {max-width:calc(100vw - 32px);min-width:min(235px,calc(100vw - 32px))}
  }
}

/* UI previews inherit the dark-theme ink; printable label SVGs stay black. */
:root:root[data-theme="dark"] :is(.ci-icon, .chosen-symbol, .layer .symbol, .prop-heading .small-icon) > svg { color: var(--paper-ink, #f0f1f3); }
:root:root[data-theme="dark"] :is(.ci-icon, .chosen-symbol, .layer .symbol, .prop-heading .small-icon) [fill="#000"] { fill: currentColor; }
:root:root[data-theme="dark"] :is(.ci-icon, .chosen-symbol, .layer .symbol, .prop-heading .small-icon) [stroke="#000"] { stroke: currentColor; }