:root {
  color-scheme: light;
  --page: #f5f6fa;
  --surface: #fff;
  --surface-soft: #f8f9fc;
  --ink: #202637;
  --muted: #687187;
  --border: #e4e7ef;
  --accent: #6746d7;
  --accent-soft: #f0ecff;
  --accent-dark: #4f32ba;
  --shadow: 0 12px 36px rgba(30, 37, 65, .055);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.6 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .source-switch:focus-within, .onboarding-upload:focus-within { outline: 3px solid #a994ff; outline-offset: 2px; }
input { accent-color: var(--accent); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 124px; padding: 22px clamp(24px, 4vw, 72px); background: linear-gradient(116deg, #27264d 0%, #3f3976 55%, #6450a7 100%); color: #fff; }
.brand small { display: block; color: #c7c1ef; font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.brand h1 { margin: 8px 0 5px; font-size: clamp(25px, 2.4vw, 36px); line-height: 1.25; letter-spacing: -.035em; }
.brand p { margin: 0; color: #e1def4; font-size: 13px; }
.topbar nav { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: none; flex-wrap: wrap; max-width: 520px; }
.browser-save-note { width: 100%; color: #dcd8f7; font-size: 11px; text-align: right; }
.topbar button { border: 0; border-radius: 11px; padding: 11px 18px; background: #fff; color: var(--accent-dark); font-weight: 700; box-shadow: 0 5px 14px #15143a22; }
.topbar button:hover:not(:disabled) { background: #f3efff; }
.topbar .lab-link { padding: 10px 14px; border: 1px solid #ffffff66; border-radius: 11px; color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.topbar .lab-link:hover { background: #ffffff22; }

.layout { display: grid; grid-template-columns: minmax(248px, 292px) minmax(520px, 1fr) minmax(248px, 292px); align-items: start; gap: 16px; max-width: 1800px; margin: auto; padding: 18px clamp(14px, 2vw, 34px) 30px; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.setup, .tools { padding: 19px; }
.setup, .tools { position: sticky; top: 14px; max-height: calc(100vh - 178px); overflow-y: auto; scrollbar-gutter: stable; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.setup h2, .workspace h2, .tools h2 { margin: 6px 0; font-size: 20px; line-height: 1.35; }
.muted, .fineprint { color: var(--muted); line-height: 1.55; }
.muted { font-size: 12px; }
.fineprint { font-size: 11px; }

.canvas-toolbar button, .view-controls button, .export-pair button { border: 1px solid #dfe2ec; border-radius: 9px; background: #fff; color: #465069; font-weight: 650; }
.canvas-toolbar button:hover:not(:disabled):not(.active):not(.active-guide), .view-controls button:hover:not(:disabled), .export-pair button:hover:not(:disabled) { background: #f5f1ff; border-color: #c6b9f7; }
.source-switch { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; margin:14px 0 18px; padding:8px 9px 8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); }
.source-switch.drag, .onboarding-upload.drag { border-color:var(--accent); background:var(--accent-soft); }
.source-switch > span { overflow:hidden; min-width:0; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.source-switch label { flex:none; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); font-size:11px; font-weight:700; cursor:pointer; }
.source-switch label:hover { border-color:var(--accent); }
.palette-settings { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 14px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.palette-settings div { min-width:0; }
.palette-settings span,.palette-settings strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palette-settings span { color:var(--muted); font-size:11px; }
.palette-settings strong { margin-top:4px; font-size:11px; font-weight:700; }
.palette-settings button { flex:none; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); font-size:11px; font-weight:700; cursor:pointer; }
.field { margin: 15px 0; }
.field > label { display: block; color: #40485c; font-size: 12px; font-weight: 650; }
.field > label output { float: right; color: var(--accent); font-weight: 750; }
.field input, .field select, #paletteSearch { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #d9deea; border-radius: 9px; outline: none; background: #fff; color: var(--ink); }
.field input, .field select { margin-top: 7px; }
.field input:focus, .field select:focus, #paletteSearch:focus { border-color: var(--accent); }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.section-heading { display: flex; align-items: center; gap: 9px; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; }
.section-heading span { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.range-with-number, .confirmed-number { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.range-with-number input[type=range] { flex: 1; min-width: 0; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.range-with-number input[type=number] { flex: 0 0 64px; width: 64px; margin: 0; text-align: center; font-weight: 750; color: var(--accent-dark); }
.adjustment-intro { margin: -4px 0 10px; }
.image-adjustments { display: grid; gap: 11px; padding: 13px; border: 1px solid #e6dffc; border-radius: 11px; background: #faf9ff; }
.image-adjustments label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; color: #40485c; font-size: 11px; font-weight: 650; }
.image-adjustments output { color: var(--accent); font-weight: 750; }
.image-adjustments input { grid-column: 1 / -1; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.reset-adjustments { width: 100%; margin: 8px 0 14px; padding: 7px 10px; border: 1px solid #dcd5fa; border-radius: 8px; background: #fff; color: #583fbb; font-size: 10px; font-weight: 700; }
.reset-adjustments:hover { background: #f5f1ff; }
.confirmed-number input[type=number] { flex: 1; min-width: 0; margin: 0; }
.confirmed-number button { flex: none; min-height: 39px; padding: 8px 11px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 750; }
.confirmed-number button:disabled { opacity: 1; border-color: #e3dfef; background: #f2f0f8; color: #8e88a1; }
.check { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #e6dffc; border-radius: 10px; background: #faf9ff; cursor: pointer; }
.check input { flex: none; margin: 3px 0; }
.check strong, .check small { display: block; }
.check strong { font-size: 12px; }
.check small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.generation-feedback { display: grid; gap: 4px; margin: 14px 0 10px; padding: 11px 12px; border: 1px solid #dfe4ee; border-radius: 10px; background: #f8f9fc; }
.generation-feedback strong { font-size: 12px; }
.generation-feedback span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.generation-feedback[data-state="pending"] { border-color: #efc96e; background: #fff9e8; }
.generation-feedback[data-state="pending"] strong { color: #946100; }
#widthField.pending .range-with-number input[type="number"] { border-color: #d69618; box-shadow: 0 0 0 3px rgba(239, 201, 110, .28); }
#widthField.pending #widthApplyNote { color: #946100; font-weight: 700; }
#widthInput[aria-invalid="true"] { border-color: #c44b3f; box-shadow: 0 0 0 3px rgba(196, 75, 63, .14); }
.generation-feedback[data-state="applied"] { border-color: #bfe1ca; background: #f1faf4; }
.generation-feedback[data-state="applied"] strong { color: #297143; }
.primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 750; }
.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.setup > .primary { margin-top: 17px; }
.generate-dock { position: sticky; z-index: 4; bottom: -19px; margin: 15px -19px -19px; padding: 10px 19px 15px; border-top: 1px solid #e2def2; background: linear-gradient(180deg,#ffffffeb 0,#fff 18%); box-shadow: 0 -12px 24px #30285f0d; }
.generate-dock .generation-feedback { margin: 0 0 8px; padding: 8px 10px; }
.generate-dock .fineprint { margin: 7px 0 0; line-height: 1.4; }
.lab-callout { margin-top: 18px; padding: 12px; border: 1px solid #e6dffc; border-radius: 10px; background: #faf9ff; }
.lab-callout strong { font-size: 12px; }
.lab-callout p { margin: 5px 0 7px; color: var(--muted); font-size: 11px; }
.lab-callout a { color: var(--accent-dark); font-size: 11px; font-weight: 750; text-decoration: none; }
.lab-callout a:hover { text-decoration: underline; }

.workspace { display: flex; flex-direction: column; height: calc(100vh - 178px); min-height: 620px; padding: 18px; }
.workspace-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.workspace-top .muted { margin: 3px 0 0; }
.view-controls { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.view-controls button { width: 32px; height: 32px; padding: 0; }
.view-controls .detailed-editor-button { width: auto; margin-right: 5px; padding: 0 12px; border-color: #cbbdf8; color: var(--accent-dark); background: #f2edff; }
.view-controls .detailed-editor-button:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); }
.view-controls output { min-width: 45px; color: var(--muted); text-align: center; font-size: 11px; }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 60px; margin: 18px 0 15px; padding: 10px 14px; border: 1px solid #e3e6f5; border-radius: 12px; background: #eceefa; }
.canvas-toolbar > div { display: flex; gap: 5px; flex-wrap: wrap; }
.canvas-toolbar button { padding: 7px 11px; font-size: 12px; }
.canvas-toolbar .active { border-color: #c7b8ff; background: var(--accent-soft); color: var(--accent-dark); }
.canvas-toolbar .display-tools { gap: 6px; }
.canvas-toolbar .display-tools button { border-radius: 999px; padding-inline: 12px; white-space: nowrap; }
.canvas-toolbar .display-tools .active-guide { border-color: #e66562; background: #fff0f0; color: #c72d38; }
.guide-color-panel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: -7px 0 13px; padding: 9px 12px; border: 1px solid #f1c9cc; border-radius: 10px; background: #fff7f7; color: #7d3b46; font-size: 11px; font-weight: 700; }
.guide-color-panel .guide-preset { width: 26px; height: 26px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #cfd3dc; }
.guide-color-panel .guide-preset.selected { box-shadow: 0 0 0 2px #6746d7; }
.guide-color-panel label { display: inline-flex; align-items: center; gap: 5px; }
.guide-color-panel input[type=color] { width: 30px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.grid-switch { display: flex; align-items: center; gap: 5px; color: #4e5670; font-size: 11px; }
.canvas-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 430px; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.canvas-stage canvas { display: block; flex: none; margin-inline: auto; background: #fff; box-shadow: 0 4px 18px #252c3b20; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 330px; color: #4e5670; text-align: center; }
.empty-state strong { font-size: 17px; }
.empty-state p { color: var(--muted); font-size: 12px; }
.empty-art { display: grid; grid-template-columns: repeat(3, 27px); gap: 5px; margin-bottom: 20px; transform: rotate(-7deg); }
.empty-art span { height: 27px; border-radius: 5px; background: #d8d1f5; box-shadow: inset 0 0 0 2px #fff8; }
.empty-art span:nth-child(2), .empty-art span:nth-child(4), .empty-art span:nth-child(9) { background: #8671d7; }
.empty-art span:nth-child(5) { background: #7d92bd; }
.statusbar { display: flex; justify-content: space-between; gap: 10px; min-height: 20px; margin-top: 13px; color: var(--muted); font-size: 11px; }

.tools h2 { margin-bottom: 17px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stats div { padding: 11px 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); text-align: center; }
.stats b, .stats span { display: block; }
.stats b { color: var(--accent-dark); font-size: 16px; }
.stats span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.active-color { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 10px; border: 1px solid #e6dffc; border-radius: 10px; background: var(--accent-soft); }
.active-color .swatch { width: 30px; height: 30px; border: 1px solid #0001; border-radius: 7px; background: #fff; }
.active-color small, .active-color strong { display: block; }
.active-color small { color: #625986; font-size: 10px; }
.active-color strong { font-size: 12px; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 17px 0 9px; font-size: 12px; }
.list-head span { color: var(--muted); font-size: 11px; }
.color-help { margin: -3px 0 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 188px; overflow: auto; }
.swatches button { position: relative; width: 100%; aspect-ratio: 1; border: 2px solid #fff; border-radius: 9px; box-shadow: 0 0 0 1px #dfe2ec; }
.swatches button span { position: absolute; right: -4px; bottom: -5px; padding: 1px 3px; border-radius: 4px; background: #fff; color: #465069; font-size: 9px; }
.color-action { margin-top: 12px; padding: 11px; border: 1px solid #cfc3fa; border-radius: 10px; background: #f6f3ff; }
.color-action > div { display: flex; align-items: center; gap: 8px; }
.color-action > div + div { margin-top: 10px; }
.color-action small { color: var(--muted); font-size: 10px; }
.color-action strong { font-size: 12px; }
.color-action span { margin-left: auto; color: #685e87; font-size: 10px; }
.color-action button { flex: 1; padding: 7px 8px; border: 1px solid #d5cafa; border-radius: 7px; background: #fff; color: #5037b7; font-size: 10px; font-weight: 700; white-space: nowrap; }
.color-action button:first-child { border-color: var(--accent); background: var(--accent); color: #fff; }
.palette-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-height: 205px; overflow: auto; margin-top: 9px; }
.palette-list button { display: flex; align-items: center; min-width: 0; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: #465069; text-align: left; font-size: 10px; }
.palette-list button:hover, .palette-list button.selected { border-color: #c6b9f7; background: #f5f1ff; }
.palette-list.replace-targets button { border-color: #d6cdf9; cursor: cell; }
.palette-list.replace-targets button:hover { border-color: #6943e7; background: #eee9ff; }
.palette-list i { flex: none; width: 16px; height: 16px; border: 1px solid #0002; border-radius: 4px; }
.palette-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(85vh, 820px); padding: 0; border: 1px solid #deddf0; border-radius: 18px; color: #20283d; background: #fff; box-shadow: 0 24px 80px #1c1b3d4d; }
.export-dialog::backdrop { background: #171a35a6; }
.export-dialog-inner { display: flex; flex-direction: column; max-height: min(85vh, 820px); }
.export-header, .export-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.export-header { border-bottom: 1px solid var(--border); }
.export-header h2 { margin: 0 0 5px; font-size: 21px; }
.export-header p { margin: 0; color: var(--muted); font-size: 12px; }
.export-header button { flex: none; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #526079; font-size: 22px; }
.export-body { overflow-y: auto; padding: 20px 22px 8px; }
.export-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.export-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 77px; padding: 13px; border: 1px solid #e1e3ee; border-radius: 11px; background: #fff; color: #24304a; text-align: left; cursor: pointer; }
.export-card:hover:not(:disabled), .export-card:focus-visible, .export-card.selected { border-color: var(--accent); background: #f6f3ff; outline: none; box-shadow: 0 0 0 2px #6b45de1c; }
.export-card.exporting { border-color: var(--accent); background: #f6f3ff; }
.export-card strong, .export-card small { display: block; }
.export-card strong { font-size: 13px; }
.export-card small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.export-card em { flex: none; padding: 4px 7px; border-radius: 6px; background: #f0ecff; color: var(--accent); font-size: 10px; font-style: normal; font-weight: 750; }
.export-dialog-options { margin-top: 20px; padding: 16px; border: 1px solid #e9e5f7; border-radius: 11px; background: #faf9ff; }
.export-dialog-options > strong { font-size: 13px; }
.export-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 13px 0 9px; }
.export-options label { display: flex; align-items: center; gap: 7px; color: #3d465b; font-size: 12px; }
.export-options label[hidden] { display: none; }
.export-options input { width: auto; margin: 0; accent-color: var(--accent); }
.export-dialog-options p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.export-message { min-height: 18px; margin: 12px 0 0; color: #5142b5; font-size: 12px; }
.export-footer { border-top: 1px solid var(--border); }
.export-footer span { color: var(--muted); font-size: 11px; }
.export-footer > div { display: flex; gap: 8px; }
.export-footer button { padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #364258; }
.export-footer .primary-export { border-color: var(--accent); color: #fff; background: var(--accent); font-weight: 750; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; padding-inline: 20px; }
  .setup, .tools { position: static; max-height: none; overflow: visible; }
  .tools { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .tools > .eyebrow, .tools > h2, .tools > .stats, .tools > .active-color { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .topbar { padding: 24px; }
  .layout { grid-template-columns: 1fr; padding: 18px; }
  .workspace { height: auto; min-height: 600px; }
  .canvas-stage { min-height: 540px; }
  .tools { display: block; }
  .setup { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .setup > .eyebrow, .setup > h2, .setup > .muted, .setup > .source-switch, .setup > .palette-settings, .setup > .field, .setup > .section-heading, .setup > .check, .setup > .generation-feedback, .setup > .primary, .setup > .fineprint, .setup > .lab-callout { grid-column: 1 / -1; }
  .generate-dock { position: static; grid-column: 1 / -1; margin: 15px 0 0; padding: 12px 0 0; box-shadow: none; }
}
@media (max-width: 600px) {
  .export-format-grid, .export-options { grid-template-columns: 1fr; }
  .export-header, .export-footer { padding: 14px 16px; }
  .export-body { padding: 16px 16px 4px; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 16px; }
  .topbar nav { width: 100%; flex-wrap: wrap; }
  .topbar nav button { flex: 1; }
  .topbar .lab-link { width: 100%; text-align: center; }
  .layout { padding: 12px; }
  .setup { display: block; }
  .workspace { padding: 14px; }
  .canvas-stage { min-height: 330px; padding: 14px; }
  .swatches { grid-template-columns: repeat(8, 1fr); }
  .palette-list { grid-template-columns: repeat(4, 1fr); }
}

.brush-size-control { display:flex; align-items:center; gap:10px; padding:10px 14px; flex-wrap:wrap; background:#f7f5ff; border-bottom:1px solid #e6e2f1; font-size:12px; color:#51476e; }
.brush-size-control input { width:140px; accent-color:#6943e7; }
.brush-size-control button { width:30px; height:28px; border:1px solid #ded8ef; border-radius:8px; background:white; color:#6943e7; cursor:pointer; }
.brush-size-control output { min-width:48px; text-align:center; font-weight:700; }
.palette-import-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.palette-import-row .field-help{margin:0;flex:1}.palette-import-row button{flex:none;padding:8px 10px;font-size:12px;color:#5237ca;background:#f5f1ff;border-color:#d7ccff}

/* Figma 03: export and save states */
.export-dialog { width: min(860px, calc(100vw - 24px)); max-height: min(740px, calc(100dvh - 24px)); border: 1px solid #e5e5e5; border-radius: 18px; color: #0a0a0a; box-shadow: 0 24px 80px #17171740; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.export-dialog::backdrop { background: #17171780; }
.export-dialog-inner { position: relative; min-height: 658px; max-height: min(740px, calc(100dvh - 24px)); padding: 26px; }
.export-dialog:has(.export-dialog-options:not([hidden])) .export-dialog-inner { min-height: 738px; }
.export-header { display: block; position: relative; padding: 0; border: 0; }
.export-header h2 { margin: 0; font-size: 25px; line-height: 35px; font-weight: 700; }
.export-header p { margin: 18px 0 0; color: #737373; font-size: 12px; line-height: 17px; }
.export-header #closeExport { position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; border: 0; background: transparent; color: #737373; font-size: 20px; opacity: 0; }
.export-header #closeExport:focus-visible, .export-header #closeExport:hover { opacity: 1; }
.export-body { flex: 1; overflow-y: auto; padding: 18px 0 0; }
.export-purpose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.export-purpose { display: flex; flex-direction: column; gap: 8px; height: 90px; padding: 14px; border: 1px solid #e5e5e5; border-radius: 8px; background: #f5f5f5; }
.export-purpose strong { font-size: 15px; line-height: 21px; }
.export-purpose small { color: #737373; font-size: 11px; line-height: 15px; }
.export-format-heading { margin: 18px 0 17px; font-size: 14px; line-height: 20px; }
.export-format-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.export-card { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; align-items: center; justify-content: start; gap: 12px; min-height: 33px; padding: 0 12px; border: 1px solid #e5e5e5; border-radius: 6px; background: #f5f5f5; color: #0a0a0a; box-shadow: none; }
.export-card strong { font-size: 11px; line-height: 15px; }
.export-card small { margin: 0; color: #737373; font-size: 10px; line-height: 14px; }
.export-card:hover:not(:disabled), .export-card:focus-visible, .export-card.selected, .export-card.exporting { border: 2px solid #a1a1a1; padding-inline: 11px; background: #f5f5f5; box-shadow: none; }
.export-dialog-options { display: flex; align-items: flex-start; gap: 18px; min-height: 64px; margin-top: 18px; padding: 14px; border: 0; border-radius: 8px; background: #f5f5f5; }
.export-dialog-options > strong { flex: 0 0 115px; font-size: 12px; line-height: 17px; }
.export-options { display: flex; flex: 1; flex-wrap: wrap; gap: 18px; margin: 0; }
.export-options label { min-width: 145px; gap: 4px; color: #0a0a0a; font-size: 11px; line-height: 17px; cursor: pointer; }
.export-options input { accent-color: #171717; }
.export-option-help { margin: 16px 0 0; color: #737373; font-size: 11px; line-height: 15px; }
.export-footer { justify-content: flex-end; gap: 12px; min-height: 54px; padding: 0; border: 0; }
.export-footer span { flex: 1; padding-left: 106px; color: #737373; font-size: 11px; }
.export-footer > div { flex: none; gap: 12px; }
.export-footer button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: #f5f5f5; color: #171717; font-size: 12px; font-weight: 700; }
.export-footer .primary-export { border: 0; background: #171717; color: #fafafa; }
.export-footer .primary-export:hover:not(:disabled) { background: #333; }
.export-message:not([hidden]) { position: absolute; z-index: 5; top: 50%; left: 50%; display: block; width: min(620px, calc(100% - 50px)); min-height: 170px; margin: 0; padding: 20px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; color: #171717; box-shadow: 0 16px 45px #1717172b; transform: translate(-50%, -50%); }
.export-message strong, .export-message span, .export-message small { display: block; }
.export-message strong { margin-bottom: 10px; font-size: 17px; }
.export-message span { font-size: 12px; }
.export-message small { margin-top: 10px; color: #737373; font-size: 11px; }
@media (max-width: 600px) {
  .export-dialog-inner { min-height: 0 !important; padding: 18px; }
  .export-header h2 { font-size: 22px; }
  .export-purpose-grid { gap: 6px; }
  .export-purpose { height: 75px; padding: 9px; }
  .export-purpose strong { font-size: 13px; }
  .export-purpose small { font-size: 10px; }
  .export-card { grid-template-columns: 115px 1fr; }
  .export-dialog-options { flex-direction: column; gap: 8px; }
  .export-dialog-options > strong { flex: none; }
  .export-footer { flex-wrap: wrap; }
  .export-footer span { flex-basis: 100%; padding-left: 0; }
}

/* Figma 01: workshop */
body { --page:#fff; --surface:#fff; --surface-soft:#f5f5f5; --ink:#0a0a0a; --muted:#737373; --border:#e5e5e5; --accent:#171717; --accent-soft:#f5f5f5; --accent-dark:#171717; --shadow:none; background:#fff; font-family:'PingFang SC','Microsoft YaHei',sans-serif; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .source-switch:focus-within, .onboarding-upload:focus-within { outline-color:#a1a1a1; }
.topbar { min-height:72px; padding:12px 20px; background:#171717; }
.brand { display:flex; align-items:center; gap:clamp(30px,15vw,300px); }
.brand h1 { margin:0; font-size:20px; line-height:1.2; letter-spacing:0; white-space:nowrap; }
.brand p { color:#fafafa; font-size:12px; white-space:nowrap; }
.topbar nav { max-width:none; gap:8px; }
.browser-save-note { width:auto; margin-right:24px; color:#ddd; text-align:left; font-size:10px; }
.topbar button, .topbar .lab-link { min-height:36px; padding:8px 12px; border:0; border-radius:8px; background:#f5f5f5; color:#171717; box-shadow:none; font-size:11px; font-weight:700; }
.topbar .lab-link:hover, .topbar button:hover:not(:disabled) { background:#e8e8e8; }
.onboarding { display:flex; min-height:calc(100dvh - 72px); justify-content:center; padding:clamp(72px,11vh,130px) 20px 45px; }
.onboarding-inner { width:min(820px,100%); }
.onboarding h2 { margin:0 0 14px; font-size:28px; line-height:1.3; }
.onboarding p { margin:0 0 18px; color:#737373; font-size:12px; }
.input-mode-choices { display:flex; gap:10px; margin:0 0 12px; }
.input-mode-choices label { display:flex; flex:1; align-items:center; gap:9px; padding:10px 12px; border:1px solid #e5e5e5; border-radius:10px; cursor:pointer; }
.input-mode-choices label:has(input:checked) { border-color:#171717; background:#f5f5f5; }
.input-mode-choices strong,.input-mode-choices small { display:block; }
.input-mode-choices strong { font-size:12px; }.input-mode-choices small { color:#737373; font-size:10px; }
.pixel-block-onboarding { display:block; margin:0 0 12px; font-size:12px; }.pixel-block-onboarding input { width:58px; padding:5px; border:1px solid #ddd; border-radius:6px; text-align:center; }.pixel-block-onboarding small { display:block; color:#737373; }
.onboarding .onboarding-status { margin:0 0 12px; padding:10px 12px; border:1px solid #e5e5e5; border-radius:8px; background:#f5f5f5; color:#333; font-size:12px; }
.onboarding .onboarding-status.error { border-color:#ecc1ba; background:#fff1ef; color:#a33325; }
.onboarding-upload { display:flex; height:320px; align-items:center; justify-content:center; flex-direction:column; gap:15px; border:1px dashed #e5e5e5; border-radius:16px; cursor:pointer; text-align:center; }
.onboarding-upload:hover { background:#fafafa; border-color:#a1a1a1; }
.onboarding-upload-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:12px; background:#f5f5f5; color:#171717; font-size:38px; line-height:1; }
.onboarding-upload strong { font-size:22px; }
.onboarding-upload small, .onboarding-note { color:#737373; font-size:12px; }
.onboarding-upload-button { padding:11px 14px; border-radius:8px; background:#171717; color:#fff; font-size:12px; font-weight:700; }
.onboarding-actions { display:flex; justify-content:center; gap:12px; margin-top:18px; }
.onboarding-actions button { padding:11px 14px; border:0; border-radius:8px; background:#f5f5f5; color:#171717; font-size:12px; font-weight:700; }
.onboarding-actions button:hover { background:#e8e8e8; }
.onboarding-note { display:block; margin-top:46px; }
body:not(.has-project) .layout, body:not(.has-project) .topbar nav { display:none; }
body:not(.has-project) .brand p { font-size:11px; }
body.has-project .onboarding { display:none; }
.layout { max-width:none; min-height:calc(100dvh - 72px); grid-template-columns:minmax(245px,280px) minmax(480px,1fr) minmax(245px,280px); gap:12px; padding:12px; }
.panel { border-radius:14px; }
.setup,.tools { top:12px; max-height:calc(100dvh - 96px); padding:16px; }
.eyebrow { color:#737373; font-size:10px; letter-spacing:0; }
.setup h2,.workspace h2,.tools h2 { font-size:17px; }
.canvas-toolbar button,.view-controls button { border-color:#e5e5e5; border-radius:8px; background:#f5f5f5; color:#171717; }
.canvas-toolbar button:hover:not(:disabled):not(.active):not(.active-guide),.view-controls button:hover:not(:disabled) { background:#ececec; border-color:#bdbdbd; }
.field input,.field select,#paletteSearch { border-color:#e5e5e5; border-radius:8px; }
.field > label,.image-adjustments label { color:#171717; }
.field > label output,.image-adjustments output { color:#171717; }
.section-heading span { background:#f5f5f5; color:#171717; }
.image-adjustments,.check,.generation-feedback { border-color:#e5e5e5; background:#f5f5f5; }
.primary,.confirmed-number button { border-color:#171717; background:#171717; }
.primary:hover:not(:disabled),.confirmed-number button:hover:not(:disabled) { background:#333; border-color:#333; }
.workspace { height:calc(100dvh - 96px); min-height:650px; padding:14px; }
.workspace-top { align-items:center; }
.view-controls .detailed-editor-button { border-color:#171717; color:#fff; background:#171717; }
.view-controls .detailed-editor-button:hover:not(:disabled) { border-color:#333; background:#333; }
.canvas-toolbar { justify-content:flex-start; column-gap:14px; row-gap:8px; min-height:44px; margin:12px 0; padding:5px; border:0; background:#fff; }
.canvas-toolbar > div { align-items:center; }
.canvas-toolbar > div + div { padding-left:14px; border-left:1px solid #e5e5e5; }
.canvas-toolbar .grid-switch { min-height:28px; margin-left:4px; white-space:nowrap; }
@media(max-width:700px){.canvas-toolbar > div + div{padding-left:0;border-left:0}}
.canvas-toolbar button { padding:6px 8px; font-size:11px; }
.canvas-toolbar .active { border-color:#171717; background:#171717; color:#fff; }
.canvas-toolbar .display-tools button { border-radius:8px; }
.canvas-toolbar .display-label { align-self:center; color:#707070; font-size:11px; white-space:nowrap; }
.canvas-toolbar .bead-shape-switch { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid #e5e5e5; border-radius:9px; background:#f5f5f5; }
.canvas-toolbar .bead-shape-switch button { border:0; background:transparent; }
.canvas-toolbar .bead-shape-switch button.active { border:0; background:#171717; color:#fff; }
.brush-size-control { border:0; background:#fff; color:#737373; }
.brush-size-control input { accent-color:#171717; }
.brush-size-control button { border-color:#e5e5e5; background:#f5f5f5; color:#171717; }
.canvas-stage { border:0; border-radius:9px; background:#f5f5f5; }
.canvas-stage canvas { box-shadow:0 0 0 1px #e5e5e5; }
.tools .stats div,.active-color,.color-action { border-color:#e5e5e5; background:#f5f5f5; }
.stats b { color:#171717; }
.palette-list button:hover,.palette-list button.selected { border-color:#a1a1a1; background:#f5f5f5; }
.tools .stats { display:grid; grid-template-columns:1fr; gap:0; padding:10px; border-radius:8px; background:#f5f5f5; }
.tools .stats div { display:flex; align-items:center; gap:12px; padding:2px; border:0; border-radius:0; text-align:left; }
.tools .stats span { order:-1; margin:0; color:#737373; font-size:10px; }
.tools .stats b { font-size:13px; }
.swatches { display:grid; grid-template-columns:1fr; gap:3px; max-height:250px; }
.swatches button { display:flex; align-items:center; gap:9px; width:100%; height:33px; aspect-ratio:auto; padding:4px 9px; border:0; border-radius:6px; background:#fff; color:#171717; box-shadow:none; text-align:left; }
.swatches button:hover { background:#f5f5f5; }
.swatches button i { flex:none; width:20px; height:20px; border:0; border-radius:50%; }
.swatches button strong { overflow:hidden; flex:1; font-size:10px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.swatches button span { position:static; flex:none; padding:0; background:transparent; color:#737373; font-size:9px; }
.swatches button.highlighted { background:#f1f1f1; box-shadow:inset 0 0 0 1px #bcbcbc; }
.swatches button.highlighted strong { font-weight:700; }
.swatches button:focus-visible { outline:2px solid #777; outline-offset:2px; }
.active-color > div { flex:1; min-width:0; }
.active-color strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.active-color button { flex:none; padding:7px 9px; border:1px solid #d5d5d5; border-radius:7px; background:#fff; color:#171717; font-size:11px; cursor:pointer; }
.active-color button:hover,.active-color button[aria-expanded="true"] { background:#eaeaea; }
.active-color button:focus-visible { outline:2px solid #777; outline-offset:2px; }
.palette-picker-panel { margin:-8px 0 14px; padding:11px; border:1px solid #e5e5e5; border-radius:9px; background:#fafafa; }
.palette-picker-panel[hidden] { display:none; }
.palette-picker-panel .list-head { margin:0 0 9px; }
@media (min-width:801px) and (max-width:1080px) { .tools > .palette-picker-panel { grid-column:1 / -1; } }
@media(max-width:1080px){.layout{grid-template-columns:280px minmax(0,1fr)}.setup,.tools{max-height:none}.tools{grid-column:1/-1}}
@media(max-width:800px){.layout{grid-template-columns:1fr}.workspace{height:auto}.setup{display:block}.topbar{flex-wrap:wrap}.topbar nav{width:100%;justify-content:flex-start}.browser-save-note{display:none}}
@media(max-width:600px){.onboarding{padding-top:60px}.onboarding h2{font-size:23px}.input-mode-choices{flex-direction:column}.onboarding-upload{height:270px}.onboarding-upload strong{font-size:18px}.onboarding-upload small{padding:0 12px}.brand{gap:8px}.brand p{display:none}.topbar nav{gap:6px}.topbar nav button,.topbar .lab-link{flex:auto}}

/* Full palette selection dialog. Only a compact entry occupies the workshop sidebar. */
.palette-dialog { width:min(1280px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid #45433f; border-radius:16px; background:#292826; color:#f5f2e9; box-shadow:0 28px 95px #0009; }
.palette-dialog::backdrop { background:#101014b5; backdrop-filter:blur(6px); }
.palette-dialog-inner { display:flex; flex-direction:column; height:min(860px,calc(100dvh - 34px)); min-height:0; }
.palette-dialog button { font:inherit; cursor:pointer; }
.palette-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 26px 14px; }
.palette-dialog-header h2 { margin:0; color:#fff; font-size:24px; }
.palette-dialog-header p { margin:5px 0 0; color:#bcb9b1; font-size:13px; }
.palette-dialog-header button { width:36px; height:36px; border:0; background:transparent; color:#bcb9b1; font-size:30px; line-height:1; }
.palette-dialog-controls { display:flex; align-items:center; gap:12px; padding:0 26px 16px; }
.palette-brand-tabs,.palette-view-toggle { display:flex; flex:none; overflow:hidden; border-radius:11px; background:#393835; }
.palette-brand-tabs button,.palette-view-toggle button { min-height:43px; padding:0 13px; border:0; background:transparent; color:#d8d5ce; font-size:12px; font-weight:700; }
.palette-brand-tabs button.active,.palette-view-toggle button[aria-pressed="true"] { background:#eeeae0; color:#242321; }
.palette-more-brand { display:flex; align-items:center; gap:6px; min-width:120px; color:#ddd8ce; font-size:11px; }
.palette-more-brand select { width:130px; min-height:42px; padding:0 7px; border:1px solid #54524d; border-radius:8px; background:#393835; color:#fff; font-size:11px; }
#paletteDialogSearch { flex:1; min-width:130px; height:43px; padding:0 13px; border:1px solid #54524d; border-radius:9px; outline:none; background:#393835; color:#fff; font-size:13px; }
#paletteDialogSearch::placeholder { color:#aaa69f; }
.palette-dialog-body { display:grid; grid-template-columns:158px minmax(0,1fr); flex:1; min-height:0; padding:0 26px 10px; gap:16px; }
.palette-groups,.palette-color-area { overflow:auto; min-height:0; scrollbar-color:#77736c transparent; }
.palette-groups { display:flex; flex-direction:column; gap:5px; }
.palette-groups button { min-height:42px; padding:8px 12px; border:0; border-radius:9px; background:#46443f; color:#e8e5df; text-align:left; font-size:12px; }
.palette-groups button.active { background:#eae7dd; color:#242321; }
.palette-color-area { padding:4px 4px 18px; }
.palette-color-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(65px,1fr)); align-content:start; gap:8px; }
.palette-color-tile { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; height:66px; padding:6px; border:3px solid transparent; border-radius:11px; box-shadow:inset 0 0 0 1px #0002; }
.palette-color-tile.selected { border-color:#ef8d66; box-shadow:0 0 0 1px #ef8d66; }
.palette-color-tile:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.palette-tile-code { overflow:hidden; max-width:100%; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.palette-tile-detail { display:none; overflow:hidden; max-width:100%; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.palette-tile-check { position:absolute; top:-1px; right:-1px; display:grid; place-items:center; width:18px; height:18px; border-radius:0 7px 0 7px; background:#ef8d66; color:#fff; font-size:12px; font-weight:900; }
.palette-color-tile:not(.selected) .palette-tile-check { display:none; }
.palette-color-grid.list-view { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.palette-color-grid.list-view .palette-color-tile { align-items:flex-start; justify-content:center; flex-direction:column; height:50px; padding-left:12px; }
.palette-color-grid.list-view .palette-tile-detail { display:block; }
.palette-empty { color:#d1cec7; font-size:13px; }
.palette-dialog-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 26px; border-top:1px solid #4e4b46; background:#242321; }
.palette-dialog-footer > div { display:flex; align-items:center; gap:7px; }
.palette-dialog-footer button { min-height:37px; padding:7px 11px; border:0; border-radius:8px; background:#3b3936; color:#f4f0e8; font-size:12px; }
.palette-dialog-footer button:hover:not(:disabled) { background:#55514c; }
.palette-dialog-footer button:disabled { opacity:.4; cursor:not-allowed; }
.palette-dialog-footer #applyPalette { background:#eeeae0; color:#242321; font-weight:750; }
.palette-footer-divider { height:25px; margin:0 4px; border-left:1px solid #66625b; }
.palette-dialog-footer p { flex:1; min-width:160px; margin:0; color:#bcb9b1; font-size:11px; line-height:1.4; }
@media(max-width:900px){.palette-dialog-controls{flex-wrap:wrap}.palette-brand-tabs{overflow:auto;max-width:100%}.palette-dialog-body{grid-template-columns:122px minmax(0,1fr)}.palette-color-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}.palette-color-tile{height:58px}}
@media(max-width:600px){.palette-dialog{width:100vw;max-height:100dvh;border-radius:0}.palette-dialog-inner{height:100dvh}.palette-dialog-header,.palette-dialog-controls,.palette-dialog-footer{padding-inline:14px}.palette-dialog-body{grid-template-columns:1fr;padding-inline:14px;gap:8px}.palette-groups{flex-direction:row;overflow-x:auto;overflow-y:hidden;min-height:42px}.palette-groups button{flex:none}.palette-dialog-footer p{order:3;flex-basis:100%}.palette-more-brand{flex:1}#paletteDialogSearch{flex-basis:100%}}
/* Figma 2026: neutral workbench theme shared with the editor and lab. */
:root { --page:#fff; --surface:#fff; --surface-soft:#f5f5f5; --ink:#171717; --muted:#737373; --border:#e5e5e5; --accent:#171717; --accent-soft:#f5f5f5; --accent-dark:#0a0a0a; --shadow:none; }
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.topbar { min-height:72px; padding:10px 20px; gap:12px; background:#171717; }
.brand { display:flex; align-items:center; gap:18px; min-width:0; }
.brand small { order:2; color:#d4d4d4; letter-spacing:0; font-size:12px; white-space:nowrap; }
.brand h1 { order:1; margin:0; font-size:20px; white-space:nowrap; letter-spacing:0; }
.brand-logo { display:block; width:42px; height:42px; flex:none; padding:3px; border-radius:10px; background:#fff; object-fit:contain; }
.brand h1::before { content:none; }
.brand p { display:none; }
.topbar nav { max-width:none; flex-wrap:nowrap; }
.browser-save-note { width:auto; margin-right:4px; color:#d4d4d4; white-space:nowrap; }
.topbar button,.topbar .lab-link { min-height:36px; padding:8px 12px; border:1px solid #e5e5e5; border-radius:8px; background:#f5f5f5; color:#171717; box-shadow:none; font-size:11px; white-space:nowrap; }
.topbar .lab-link:hover,.topbar button:hover:not(:disabled) { background:#e5e5e5; color:#171717; }
.layout { grid-template-columns:274px minmax(0,1fr) 282px; max-width:none; gap:16px; padding:16px; }
.panel { border-radius:14px; }
.setup,.tools { top:16px; max-height:calc(100vh - 104px); padding:16px; }
.workspace { min-height:calc(100vh - 104px); }
.eyebrow { color:#737373; letter-spacing:.04em; }
.upload-zone { border-color:#d4d4d4; background:#fafafa; color:#171717; }
.upload-icon { background:#f5f5f5; color:#171717; }
.sample-button,.canvas-toolbar button,.view-controls button,.export-pair button { border-color:#e5e5e5; color:#404040; }
.sample-button:hover,.canvas-toolbar button:hover:not(:disabled):not(.active):not(.active-guide),.view-controls button:hover:not(:disabled) { background:#f5f5f5; border-color:#a3a3a3; }
.export-dialog { border-color:#e5e5e5; border-radius:14px; box-shadow:0 24px 70px #0003; }
.export-dialog::backdrop { background:#17171799; }
.export-card:hover:not(:disabled),.export-card.exporting,.export-card.selected { border-color:#171717; background:#f5f5f5; box-shadow:0 0 0 1px #171717; }
.export-dialog-options { border-color:#e5e5e5; background:#fafafa; }
.export-card em { color:#171717; background:#f5f5f5; }
@media(max-width:1200px){.layout{grid-template-columns:250px minmax(0,1fr) 250px}.topbar{flex-wrap:wrap}.brand small{display:none}}
@media(max-width:1000px){.layout{grid-template-columns:260px minmax(0,1fr)}.tools{grid-column:1/-1;position:static;max-height:none}}
@media(max-width:700px){.layout{display:block;padding:12px}.layout>.panel{margin-bottom:12px}.setup,.tools{position:static;max-height:none}.topbar nav{flex-wrap:wrap}.browser-save-note{display:none}}

/* Palette picker: dense swatch wall with a fixed task bar, matching the supplied reference. */
.palette-dialog { width:min(1400px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border:1px solid #30302e; border-radius:18px; background:#171717; color:#eeeae2; }
.palette-dialog-inner { height:calc(100dvh - 26px); max-height:1100px; }
.palette-dialog-header { padding:26px 34px 18px; }
.palette-dialog-header h2 { font-size:22px; line-height:1.2; }
.palette-dialog-header p { margin-top:5px; color:#a5a39e; font-size:14px; }
.palette-dialog-header button { color:#bcbab5; font-size:32px; }
.palette-dialog-controls { gap:12px; margin:0 34px; padding:0 0 18px; border-bottom:1px solid #4d4b47; }
.palette-brand-tabs,.palette-view-toggle { border-radius:11px; background:#30302e; }
.palette-brand-tabs button,.palette-view-toggle button { min-height:56px; padding:0 16px; color:#d3d0c9; font-size:14px; }
.palette-brand-tabs button.active,.palette-view-toggle button[aria-pressed="true"] { background:#ebe9e1; color:#292826; }
.palette-more-brand { min-width:0; font-size:0; }
.palette-more-brand select { width:135px; min-height:56px; padding:0 10px; border-color:#4d4b47; border-radius:10px; background:#30302e; color:#d3d0c9; font-size:12px; }
#paletteDialogSearch { height:56px; min-width:160px; padding-left:42px; border-color:#51504c; border-radius:10px; background:#30302e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a5a39e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") no-repeat 14px center; color:#fff; font-size:14px; }
.palette-dialog-body { grid-template-columns:172px minmax(0,1fr); gap:30px; padding:18px 34px; }
.palette-groups { gap:6px; }
.palette-groups button { min-height:44px; padding:9px 16px; border-radius:10px; background:#30302e; color:#d4d1cb; font-size:14px; }
.palette-groups button.active { background:#ebe9e1; color:#292826; }
.palette-color-area { padding:2px 8px 12px 2px; scrollbar-color:#6e6c69 #2b2a29; scrollbar-width:thin; }
.palette-color-grid { grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:10px; }
.palette-color-tile { height:68px; border:3px solid transparent; border-radius:10px; box-shadow:inset 0 0 0 1px #0002; }
.palette-color-tile.selected { border-color:#ee8964; box-shadow:0 0 0 1px #ee8964; }
.palette-tile-code { font-size:13px; letter-spacing:.01em; }
.palette-tile-check { top:-1px; right:-1px; width:19px; height:19px; border-radius:0 7px 0 7px; background:#df805f; }
.palette-color-grid.list-view { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
.palette-dialog-footer { flex-wrap:nowrap; justify-content:space-between; min-height:88px; margin:0 34px; padding:14px 0; border-top:1px solid #4d4b47; background:#171717; }
.palette-dialog-footer button { min-height:52px; padding:10px 17px; border-radius:10px; background:#30302e; color:#e7e4dd; font-size:14px; }
.palette-dialog-footer #applyPalette { background:#292827; color:#fff; }
.palette-dialog-footer p { max-width:280px; color:#a5a39e; }
@media(max-width:1100px){.palette-dialog-controls{flex-wrap:wrap}.palette-dialog-body{grid-template-columns:145px minmax(0,1fr);gap:16px}.palette-dialog-footer p{display:none}}
@media(max-width:700px){.palette-dialog{width:100vw;max-height:100dvh;border-radius:0}.palette-dialog-inner{height:100dvh;max-height:none}.palette-dialog-header{padding:18px 16px 12px}.palette-dialog-controls{margin:0 16px;padding-bottom:12px}.palette-brand-tabs{max-width:100%;overflow:auto}.palette-brand-tabs button,.palette-view-toggle button{min-height:42px;padding:0 11px}.palette-more-brand select{min-height:42px}.palette-dialog-body{display:flex;flex-direction:column;gap:10px;padding:12px 16px}.palette-groups{flex-direction:row;flex:none;overflow:auto;min-height:42px}.palette-groups button{flex:none;min-height:38px}.palette-color-area{flex:1}.palette-color-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}.palette-color-tile{height:60px}.palette-dialog-footer{flex-wrap:wrap;min-height:0;margin:0 16px;padding:10px 0}.palette-dialog-footer button{min-height:40px;padding:7px 10px;font-size:12px}}
.size-settings { margin:12px 0; padding:12px; border:1px solid #e5e5e5; border-radius:10px; background:#fafafa; }
.size-settings-title { display:flex; justify-content:space-between; margin-bottom:10px; color:#171717; font-size:13px; }
.size-settings-title span { color:#737373; font-size:11px; font-weight:400; }
.size-input-row { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:end; gap:6px; }
.size-input-row .field { min-width:0; margin:0; }
.size-input-row label { display:flex; align-items:center; gap:5px; margin-bottom:5px; color:#171717; font-size:11px; font-weight:750; }
.size-input-row label span { color:#737373; font-weight:400; }
.size-input-row input[type="number"] { width:100%; height:40px; margin:0; padding:6px 10px; border:1px solid #d4d4d4; border-radius:8px; background:#fff; color:#171717; font-size:17px; font-weight:700; text-align:center; }
.size-times { align-self:end; padding-bottom:10px; color:#737373; text-align:center; font-size:15px; }
.aspect-lock { display:flex; align-items:center; gap:7px; width:100%; min-height:34px; margin-top:9px; padding:5px 9px; border:1px solid #d4d4d4; border-radius:8px; background:#fff; color:#525252; font-size:11px; text-align:left; cursor:pointer; }
.aspect-lock[aria-pressed="true"] { border-color:#a3a3a3; background:#f0f0f0; color:#171717; }
.aspect-lock-icon { width:17px; font-size:15px; line-height:1; }
.aspect-lock-label { flex:1; font-weight:700; }
.aspect-lock-state { padding:3px 6px; border-radius:5px; background:#e5e5e5; font-size:10px; }
.aspect-lock[aria-pressed="true"] .aspect-lock-state { background:#171717; color:#fff; }
.aspect-lock:focus-visible { outline:2px solid #171717; outline-offset:2px; }
.backup-menu { position:relative; flex:none; }
.topbar .backup-menu-panel { position:absolute; z-index:30; top:calc(100% + 7px); right:0; display:grid; gap:4px; min-width:148px; padding:6px; border:1px solid #dedede; border-radius:10px; background:#fff; box-shadow:0 10px 28px #0003; }
.topbar .backup-menu-panel[hidden] { display:none; }
.topbar .backup-menu-panel button { width:100%; border:0; background:transparent; text-align:left; }
.topbar .backup-menu-panel button:hover:not(:disabled) { background:#f5f5f5; }
.topbar .backup-menu-panel button:disabled { color:#aaa; cursor:not-allowed; }
.upload-action { flex:none; }
.upload-action.drag #uploadImage { border-color:#171717; background:#e5e5e5; }
.header-settings-group,.header-file-actions { display:flex; align-items:center; flex:none; }
.header-settings-group { height:40px; align-items:stretch; overflow:visible; padding:0; border:1px solid #d4d4d4; border-radius:10px; background:#f5f5f5; }
.topbar .header-settings-group > .lab-link,.topbar .header-settings-group > #openPalette,.topbar .header-settings-group .backup-menu > button { display:flex; align-items:center; height:100%; min-height:0; padding:5px 11px; border:0; border-radius:0; background:transparent; }
.topbar .header-settings-group > .backup-menu { display:flex; align-items:stretch; }
.topbar .header-settings-group > .lab-link,.topbar .header-settings-group > .backup-menu { border-right:1px solid #d4d4d4; border-radius:0; }
.topbar .header-settings-group > .lab-link { border-radius:9px 0 0 9px; }
.topbar .header-settings-group > .backup-menu:first-child > button { border-radius:9px 0 0 9px; }
.topbar .header-settings-group > #openPalette { border-radius:0 9px 9px 0; }
.topbar .header-settings-group > .lab-link:hover,.topbar .header-settings-group > #openPalette:hover,.topbar .header-settings-group .backup-menu > button:hover { background:#e5e5e5; }
.topbar .header-settings-group #backupMenuToggle[aria-expanded="true"],.topbar .header-settings-group #backupMenuToggle[aria-expanded="true"]:hover { background:#171717; color:#fff; }
.backup-chevron { display:inline-block; margin-left:3px; transition:transform .15s ease; }
#backupMenuToggle[aria-expanded="true"] .backup-chevron { transform:rotate(180deg); }
.header-file-actions { gap:8px; margin-left:10px; padding-left:14px; border-left:1px solid #595959; }
@media(max-width:700px){.topbar nav{gap:10px}.header-settings-group{max-width:100%;overflow-x:auto}.header-file-actions{margin-left:0;padding-left:0;border-left:0}}
.size-settings .field-help { margin:5px 0 0; font-size:10px; line-height:1.45; }
#widthField.pending #widthInput { border-color:#d69618; box-shadow:0 0 0 3px rgba(239,201,110,.28); }

/* Workshop zoom keeps the drawing centered at fit and scrollable at larger sizes. */
.view-controls .zoom-range-label { display: flex; align-items: center; width: 88px; margin: 0 3px; }
.view-controls .zoom-range-label input { width: 100%; accent-color: #171717; cursor: pointer; }
.view-controls .zoom-range-label input:disabled { cursor: default; }
.view-controls output { min-width: 39px; font-variant-numeric: tabular-nums; }
.canvas-stage { align-items: safe center; justify-content: safe center; }
.canvas-surface { display: flex; align-items: center; justify-content: center; flex: none; min-width: 100%; min-height: 100%; }
.canvas-surface canvas { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .view-controls .zoom-range-label { width: 64px; } }

/* Workshop recognition presets mirror the two laboratory quick presets. */
.recognition-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0 0 8px; }
.recognition-presets[hidden],.recognition-preset-help[hidden] { display:none; }
.recognition-presets button { min-width:0; min-height:34px; padding:6px 4px; border:1px solid #e5e5e5; border-radius:7px; background:#f5f5f5; color:#333; font-size:10px; font-weight:700; white-space:nowrap; }
.recognition-presets button:hover { background:#e9e9e9; }
.recognition-presets button.active { border-color:#171717; background:#171717; color:#fff; }
.recognition-preset-help { margin:0 0 12px; }