:root {
  --ink: #242333;
  --muted: #777586;
  --line: #e7e5ee;
  --panel: #ffffff;
  --canvas: #f3f2f7;
  --purple: #5c4de8;
  --purple-dark: #4435cf;
  --purple-soft: #efedff;
  --green: #24a67e;
  --shadow: 0 16px 44px rgba(34, 30, 75, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #f7f6fa;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}
button, input, select { font: inherit; }
button { color: inherit; }

#installButton { display: none !important; }
.editor-back-button { width: 100%; min-height: 38px; margin-top: 10px; padding: 0 13px; border: 1px solid #d8d4e7; border-radius: 9px; color: #5f5a6b; background: #fff; font-size: 12px; font-weight: 750; cursor: pointer; }
.editor-back-button:hover { color: var(--purple); border-color: #bdb5fa; background: #f6f4ff; }
.reference-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.reference-actions .reference-toggle, .reference-actions .editor-back-button { width: 100%; min-height: 38px; margin: 0; justify-content: center; }
.reference-toggle { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 31px minmax(0,1fr) 35px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #cfc9ff; border-radius: 10px; color: #4c456f; background: #f7f5ff; text-align: left; cursor: pointer; transition: border-color .18s,background-color .18s,box-shadow .18s; }
.reference-toggle:hover:not(:disabled) { border-color: #a99fff; background: #f1efff; box-shadow: 0 5px 13px rgba(92,77,232,.1); }
.reference-toggle:focus-visible { outline: 3px solid rgba(92,77,232,.2); outline-offset: 2px; }
.reference-toggle:disabled { opacity: .46; cursor: default; box-shadow: none; }
.reference-toggle-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--purple); font-size: 15px; }
.reference-toggle-copy { min-width: 0; display: grid; gap: 2px; }
.reference-toggle-copy b { color: #373246; font-size: 10px; line-height: 1.2; }
.reference-toggle-copy small { overflow: hidden; color: #777185; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.reference-toggle-switch { position: relative; width: 35px; height: 20px; display: block; border-radius: 99px; background: var(--purple); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: background-color .18s; }
.reference-toggle-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(34,28,70,.28); transition: transform .18s; }
.reference-toggle[aria-pressed="false"] { border-color: #ddd9e6; color: #777180; background: #faf9fc; }
.reference-toggle[aria-pressed="false"] .reference-toggle-icon { color: #777180; background: #e5e2eb; }
.reference-toggle[aria-pressed="false"] .reference-toggle-switch { background: #cbc7d2; }
.reference-toggle[aria-pressed="false"] .reference-toggle-switch::after { transform: translateX(-15px); }

.workspace { position: relative; display: grid; grid-template-columns: 272px minmax(360px, 1fr) 300px; grid-template-rows: minmax(0,1fr); height: 100vh; overflow: hidden; }
/* Keep the quick-start overlay out of the three-column grid in every state. */
.workspace > .control-panel { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; }
.workspace > .studio { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.workspace > .inspector { grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; }
.desktop-start { position: absolute; inset: 0; z-index: 8; display: none; }
@media (min-width: 901px) {
  body.desktop-quick-start .workspace > .control-panel,
  body.desktop-quick-start .workspace > .studio,
  body.desktop-quick-start .workspace > .inspector { display: none; }
  body.desktop-quick-start .desktop-start:not([hidden]) { display: flex; align-items: center; justify-content: center; overflow: auto; padding: 34px 28px; background: #f5f5f7; }
  .desktop-start-card { width: min(1120px,calc(100vw - 64px)); min-height: min(700px,calc(100vh - 68px)); display: grid; place-items: center; border-radius: 24px; }
  .desktop-start h1 { margin: 0; color: #262431; font-size: clamp(36px,3.2vw,48px); line-height: 1.2; letter-spacing: -.035em; }
  .desktop-start-generate { min-width: 258px; height: 60px; border: 0; border-radius: 12px; color: #fff; background: var(--purple); font-size: 17px; font-weight: 850; cursor: pointer; box-shadow: 0 12px 28px rgba(92,77,232,.24); transition: transform .18s,box-shadow .18s,background-color .18s; }
  .desktop-start-generate:hover { background: var(--purple-dark); transform: translateY(-1px); box-shadow: 0 15px 34px rgba(68,53,207,.28); }
  .desktop-start-file-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; }
  .desktop-start-file-actions button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 8px; color: #777381; background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
  .desktop-start-file-actions button:hover { color: var(--purple); background: #efedff; }
  .desktop-start-file-actions button + button { position: relative; padding-left: 17px; }
  .desktop-start-file-actions button + button::before { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #bbb7c5; transform: translateY(-50%); }
  .desktop-start-ready { width: 100%; min-height: 680px; grid-template-columns: minmax(0,1.2fr) minmax(350px,.8fr); gap: 38px; align-items: center; padding: 34px; border: 1px solid #e2e0e7; border-radius: 22px; background: #fff; box-shadow: 0 22px 62px rgba(39,34,70,.1); }
  .desktop-start-ready:not([hidden]) { display: grid; }
  .desktop-start-preview { position: relative; height: 600px; display: grid; place-items: center; overflow: hidden; padding: 16px; border: 1px solid #e2e0e7; border-radius: 16px; background: #f2f2f4; cursor: pointer; transition: border-color .18s,background-color .18s,box-shadow .18s; }
  .desktop-start-preview:focus-visible { outline: 3px solid rgba(92,77,232,.22); border-color: var(--purple); }
  .desktop-start-preview.is-empty { border: 2px dashed #c9c5da; background: #f8f7fb; }
  .desktop-start-preview.dragging { border-color: var(--purple); background: #efedff; box-shadow: inset 0 0 0 4px rgba(92,77,232,.08); }
  .desktop-start-preview img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
  .desktop-start-preview canvas { max-width: 100%; max-height: 100%; display: block; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(37,32,65,.12); }
  .desktop-start-preview img[hidden], .desktop-start-preview canvas[hidden], .desktop-preview-empty[hidden], .desktop-preview-replace-hint[hidden] { display: none; }
  #desktopPreviewStatus { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 6px 9px; border-radius: 99px; color: #fff; background: rgba(43,39,58,.72); font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
  .desktop-start-preview.updating #desktopPreviewStatus::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border: 1px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; vertical-align: -1px; animation: quick-preview-spin .65s linear infinite; }
  .desktop-preview-empty { max-width: 390px; display: flex; flex-direction: column; align-items: center; padding: 34px; text-align: center; }
  .desktop-preview-empty > i { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 15px; color: var(--purple); background: #ebe8ff; font-size: 30px; font-style: normal; }
  .desktop-preview-empty > strong { color: #312e3c; font-size: 21px; }
  .desktop-preview-empty > p { margin: 10px 0 7px; color: #686474; font-size: 13px; line-height: 1.6; }
  .desktop-preview-empty > small { color: #92909c; font-size: 10px; }
  .desktop-preview-empty .desktop-start-file-actions button { background: rgba(255,255,255,.82); }
  .desktop-preview-replace-hint { position: absolute; left: 50%; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; color: #fff; background: rgba(43,39,58,.78); font-size: 10px; font-weight: 800; opacity: .72; transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(9px); transition: opacity .18s,transform .18s; }
  .desktop-start-preview:hover .desktop-preview-replace-hint, .desktop-start-preview.dragging .desktop-preview-replace-hint { opacity: 1; transform: translateX(-50%) translateY(-2px); }
  .desktop-start-ready-copy { min-width: 0; }
  .desktop-ready-badge { width: max-content; display: block; margin-bottom: 14px; padding: 6px 10px; border-radius: 99px; color: #16816b; background: #e6f7f2; font-size: 11px; font-weight: 850; }
  .desktop-start-ready-copy h1 { overflow: hidden; font-size: 25px; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-start-ready-copy > p { margin: 9px 0 17px; color: #777382; font-size: 13px; line-height: 1.65; }
  .desktop-basic-settings { display: grid; gap: 12px; margin-bottom: 18px; }
  .desktop-basic-settings[aria-disabled="true"] { opacity: .48; filter: grayscale(.18); }
  .desktop-simple-quality { display: grid; gap: 12px; padding: 15px; border: 1px solid #d8d2ff; border-radius: 14px; background: linear-gradient(145deg,#f8f6ff,#fff 62%,#f1faf7); box-shadow: 0 8px 22px rgba(55,44,132,.07); }
  .desktop-simple-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .desktop-simple-heading strong, .desktop-simple-heading small { display: block; }
  .desktop-simple-heading strong { color: #312d40; font-size: 14px; }
  .desktop-simple-heading small { margin-top: 4px; color: #888392; font-size: 9px; }
  .desktop-simple-heading > span { padding: 5px 8px; border-radius: 99px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 850; }
  .desktop-quality-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .desktop-quality-options button { min-width: 0; min-height: 60px; display: grid; place-content: center; gap: 3px; padding: 6px 4px; border: 1px solid #ded9eb; border-radius: 10px; color: #686372; background: #fff; cursor: pointer; transition: border-color .16s,transform .16s,box-shadow .16s; }
  .desktop-quality-options button:hover:not(:disabled) { border-color: #b9b0ff; transform: translateY(-1px); }
  .desktop-quality-options button b { font-size: 14px; }
  .desktop-quality-options button small { color: #96919f; font-size: 8px; }
  .desktop-quality-options button.active { color: #fff; border-color: var(--purple); background: linear-gradient(145deg,var(--purple),#7866ef); box-shadow: 0 7px 16px rgba(92,77,232,.22); }
  .desktop-quality-options button.active small { color: rgba(255,255,255,.8); }
  .desktop-quality-options button:disabled { opacity: .45; cursor: default; }
  .desktop-quality-summary { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 10px; padding: 10px 12px; border-radius: 10px; background: #f2f0fb; }
  .desktop-quality-summary span { grid-row: 1 / 3; color: #716b80; font-size: 9px; font-weight: 850; }
  .desktop-quality-summary strong { color: #312c45; font-size: 12px; text-align: right; }
  .desktop-quality-summary small { color: #7d778c; font-size: 8px; text-align: right; }
  .desktop-primary-bead { grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; padding: 10px 13px; }
  .desktop-primary-bead select { justify-self: end; width: min(220px,100%); }
  .desktop-advanced-settings { border: 1px solid #e1deea; border-radius: 11px; background: #faf9fc; }
  .desktop-advanced-settings > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; cursor: pointer; list-style: none; }
  .desktop-advanced-settings > summary::-webkit-details-marker { display: none; }
  .desktop-advanced-settings > summary span, .desktop-advanced-settings > summary b, .desktop-advanced-settings > summary small { display: block; }
  .desktop-advanced-settings > summary b { color: #4a4655; font-size: 11px; }
  .desktop-advanced-settings > summary small { margin-top: 3px; color: #918c99; font-size: 8px; font-weight: 500; }
  .desktop-advanced-settings > summary > i { padding: 4px 7px; border-radius: 99px; color: #77717f; background: #eeecf2; font-size: 8px; font-style: normal; font-weight: 800; }
  .desktop-advanced-settings > summary::after { content: "⌄"; color: var(--purple); font-size: 12px; }
  .desktop-advanced-settings[open] > summary { border-bottom: 1px solid #e6e3ed; }
  .desktop-advanced-settings[open] > summary::after { content: "⌃"; }
  .desktop-advanced-body { display: grid; gap: 10px; padding: 12px; }
  .desktop-recommended-size { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #cfc9ff; border-radius: 11px; background: linear-gradient(135deg,#f4f2ff,#fbfaff); }
  .desktop-recommended-size span, .desktop-recommended-size strong { display: block; }
  .desktop-recommended-size span { color: #777283; font-size: 9px; }
  .desktop-recommended-size span i { margin-right: 6px; padding: 3px 6px; border-radius: 99px; color: #fff; background: var(--purple); font-style: normal; font-weight: 850; }
  .desktop-recommended-size strong { margin-top: 7px; color: #373246; font-size: 12px; }
  .desktop-recommended-size button { min-width: 66px; height: 32px; border: 1px solid #bdb4ff; border-radius: 8px; color: var(--purple); background: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
  .desktop-recommended-size button.current { color: #247966; border-color: #b9ded4; background: #f1faf7; cursor: default; }
  .desktop-setting-row, .desktop-select-setting { min-width: 0; padding: 12px 13px; border: 1px solid #e3e0ed; border-radius: 11px; background: #faf9fc; }
  .desktop-setting-row.compact { padding-bottom: 10px; }
  .desktop-setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
  .desktop-setting-heading label, .desktop-select-setting > span { color: #4e4a5a; font-size: 11px; font-weight: 800; }
  .desktop-setting-heading output { color: var(--purple); font-size: 11px; font-weight: 850; }
  .desktop-setting-row > small { display: block; margin-top: 7px; color: #827e8d; font-size: 10px; }
  .desktop-expert-size { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e5e2ed; }
  .desktop-expert-size summary { display: flex; align-items: center; justify-content: space-between; color: #625d6f; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
  .desktop-expert-size summary::-webkit-details-marker { display: none; }
  .desktop-expert-size summary::after { content: "⌄"; margin-left: 7px; color: var(--purple); }
  .desktop-expert-size[open] summary::after { content: "⌃"; }
  .desktop-expert-size summary small { margin-left: auto; color: #96919f; font-size: 8px; font-weight: 600; }
  .desktop-expert-size > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: 10px; }
  .desktop-expert-size label { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; color: #777280; font-size: 9px; }
  .desktop-expert-size input { min-width: 0; width: 100%; height: 34px; padding: 0 7px; border: 1px solid #d8d4e5; border-radius: 7px; color: var(--purple); background: #fff; font-size: 12px; font-weight: 850; text-align: center; }
  .desktop-expert-size b { align-self: center; color: #aaa5b2; font-size: 11px; }
  .desktop-setting-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
  .desktop-select-setting { display: grid; gap: 8px; }
  .desktop-select-setting select { width: 100%; height: 35px; padding: 0 8px; border: 1px solid #d9d5e7; border-radius: 8px; color: #393546; background: #fff; font-size: 12px; font-weight: 750; }
  .desktop-palette-definition { display: grid; grid-template-columns: minmax(118px,.78fr) minmax(0,1.22fr); align-items: center; gap: 6px 10px; padding: 11px 13px; border: 1px solid #d7e7e1; border-radius: 11px; background: #f7fbfa; }
  .desktop-palette-definition > span { color: #3f5f56; font-size: 11px; font-weight: 850; }
  .desktop-palette-definition > span i { display: block; margin-top: 3px; color: #5b8a7d; font-size: 8px; font-style: normal; font-weight: 650; }
  .desktop-palette-definition select { width: 100%; height: 35px; padding: 0 8px; border: 1px solid #cde1da; border-radius: 8px; color: #286e5d; background: #fff; font-size: 11px; font-weight: 800; }
  .desktop-palette-definition small { grid-column: 1 / -1; color: #778e87; font-size: 9px; }
  .desktop-basic-settings .range { margin: 0; }
  .desktop-face-detail-toggle { margin: 0; }
  .desktop-cutout-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
  .desktop-cutout-action button { min-height: 34px; padding: 0 10px; border: 1px solid #d8d2ff; border-radius: 8px; color: var(--purple); background: #f5f3ff; font-size: 11px; font-weight: 800; cursor: pointer; }
  .desktop-cutout-action button:hover { border-color: #aea3ff; background: #eeebff; }
  .desktop-cutout-action button:disabled { opacity: .55; cursor: wait; }
  .desktop-cutout-action small { color: #888491; font-size: 10px; text-align: right; }
  .desktop-start-generate { width: 100%; min-width: 0; }
  .desktop-start-generate:disabled { opacity: .55; cursor: wait; transform: none; }
  .tool-group { overflow: visible; }
  body.editor-ready .workspace { grid-template-columns: minmax(520px,1fr) 320px; }
  body.editor-ready .workspace > .control-panel { display: none; }
  body.editor-ready .workspace > .studio { grid-column: 1; }
  body.editor-ready .workspace > .inspector { grid-column: 2; }
}
@keyframes quick-preview-spin { to { transform: rotate(360deg); } }
.panel { background: var(--panel); overflow-y: auto; scrollbar-width: thin; }
.control-panel { border-right: 1px solid var(--line); padding: 16px 17px 24px; }
.inspector { border-left: 1px solid var(--line); padding: 18px; }
.panel section + section { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.section-heading span { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.section-heading h2, .section-title h2 { margin: 0; font-size: 13px; }

.drop-zone { min-height: 122px; border: 1.5px dashed #c9c5da; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background: #faf9fd; transition: .2s ease; }
.drop-zone:hover, .drop-zone.dragging { background: var(--purple-soft); border-color: var(--purple); transform: translateY(-1px); }
.drop-zone input, .button-label input { display: none; }
.upload-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--purple-soft); color: var(--purple); font-size: 19px; margin-bottom: 7px; }
.drop-zone strong { font-size: 13px; }
.drop-zone small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.mobile-photo-actions, .mobile-import-preview, .mobile-reference-toggle, .mobile-workspace-nav, .mobile-export-tip, .mobile-creation-hero, .mobile-simple-settings { display: none; }
.file-chip { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f3f2f7; font-size: 11px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { border: 0; background: transparent; cursor: pointer; font-size: 18px; }
.cutout-entry { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; margin-top: 9px; padding: 9px; border: 1px solid #cfc9ff; border-radius: 10px; background: linear-gradient(135deg,#f4f1ff,#fbfaff); }
.cutout-entry button { height: 34px; padding: 0 11px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(135deg,var(--purple),#806cf2); font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 12px rgba(92,77,232,.2); }
.cutout-entry button:disabled { opacity: .55; cursor: wait; }
.cutout-entry div { min-width: 0; display: grid; gap: 2px; }
.cutout-entry strong { color: #3c384f; font-size: 9px; }
.cutout-entry small { color: #817d91; font-size: 8px; }
.cutout-entry.done { border-color: #9ad8c7; background: linear-gradient(135deg,#eefaf6,#f8fffc); }
.cutout-entry.done button { background: #3caa8d; box-shadow: 0 5px 12px rgba(60,170,141,.2); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field, .field-pair label { display: block; color: #5e5b6c; font-size: 11px; font-weight: 600; margin-bottom: 11px; }
.field-note { display: block; margin-top: 6px; color: #777280; font-size: 10px; font-weight: 550; line-height: 1.5; }
input[type="number"], select { display: block; width: 100%; height: 36px; margin-top: 6px; padding: 0 10px; border: 1px solid #dcd9e6; border-radius: 8px; background: #fff; color: var(--ink); outline: none; }
input[type="number"]:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
input:disabled, select:disabled { color: #777381; background: #f2f0f5; cursor: not-allowed; }
.range-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; color: #5e5b6c; }
.range-label output { color: var(--purple); font-weight: 800; }
.range { appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--purple) 45%, #dedbe7 45%); margin: 12px 0 16px; }
.range.compact { margin: 10px 0 13px; }
.range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: var(--purple); box-shadow: 0 1px 5px rgba(0,0,0,.25); cursor: pointer; }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 15px; }
.switch-row strong { display: block; font-size: 11px; }
.switch-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.switch input { display: none; }
.switch span { display: block; width: 34px; height: 20px; padding: 2px; border-radius: 99px; background: #d8d5df; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s; }
.switch input:checked + span { background: var(--purple); }
.switch input:checked + span::after { transform: translateX(14px); }
.generate-button { width: 100%; height: 42px; border: 0; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--purple), #7c65f4); font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(92,77,232,.22); }
.generate-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(92,77,232,.3); }
.generate-button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.subject-card { margin: 12px 0 15px; padding: 11px; border: 1px solid #dedaf6; border-radius: 10px; background: linear-gradient(145deg,#faf9ff,#f5f3ff); }
.subject-card-title { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: 11px; }
.subject-card-title span { padding: 2px 6px; color: var(--purple); background: #e9e5ff; border-radius: 99px; font-size: 8px; font-weight: 800; }
.subject-card .field { margin-bottom: 9px; }
.color-field { display: grid; grid-template-columns: 1fr 29px auto; align-items: center; gap: 6px; margin: 0 0 12px; color: #5e5b6c; font-size: 10px; font-weight: 600; }
.color-field input { width: 29px; height: 25px; padding: 2px; border: 1px solid #d8d4e1; border-radius: 6px; background: white; cursor: pointer; }
.color-field output { color: #888493; font-size: 9px; font-family: ui-monospace, monospace; }
.subject-tip { display: block; color: #858193; font-size: 8px; line-height: 1.5; }
.subject-card.cutout-active { border-color: #cce7df; background: #f5fbf9; }
.subject-card.cutout-active .subject-card-title span { color: #27886f; background: #dff5ee; }
.subject-card.cutout-active .field, .subject-card.cutout-active .color-field, .subject-card.cutout-active #subjectSize { opacity: .45; }
.recognition-card { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 0 0 11px; padding: 10px; border: 1px solid #cce5dc; border-radius: 11px; color: #3e514b; background: linear-gradient(145deg,#f2fbf8,#f8fffc); }
.recognition-card > div, .recognition-card strong, .recognition-card small { min-width: 0; display: block; }
.recognition-card strong { font-size: 10px; }
.recognition-card small { margin-top: 4px; color: #6d807a; font-size: 8px; line-height: 1.45; }
.recognition-card > span { align-self: start; padding: 3px 6px; border-radius: 99px; color: #237b67; background: #dcefe9; font-size: 7px; font-weight: 850; }
.recognition-icon { position: relative; width: 34px; height: 34px; display: block; border: 2px solid #2f806d; border-radius: 11px; background: #fff; }
.recognition-icon b:nth-child(1), .recognition-icon b:nth-child(2) { position: absolute; top: 9px; width: 5px; height: 6px; border-radius: 50%; background: #31574e; }
.recognition-icon b:nth-child(1) { left: 7px; }.recognition-icon b:nth-child(2) { right: 7px; }
.recognition-icon b:nth-child(3) { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 6px; border-bottom: 2px solid #e27655; border-radius: 50%; }
.advanced-settings { margin: 0 0 13px; border: 1px solid #dfdce7; border-radius: 10px; background: #faf9fc; overflow: hidden; }
.advanced-settings summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: #5f5b69; cursor: pointer; list-style: none; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary span { font-size: 10px; font-weight: 750; }
.advanced-settings summary small { color: #928e9a; font-size: 8px; }
.advanced-settings summary::after { content: "⌄"; color: var(--purple); font-size: 14px; transition: .18s; }
.advanced-settings[open] summary::after { transform: rotate(180deg); }
.advanced-settings .subject-card { margin: 0 8px 8px; }
.compact-settings-body { padding: 2px 9px 1px; }
.compact-settings-body .field:last-child { margin-bottom: 8px; }
.dimension-slider-card { margin-bottom: 12px; padding: 10px 10px 8px; border: 1px solid #e2dfeb; border-radius: 10px; background: #faf9fc; }
.dimension-slider-card .range { margin-bottom: 10px; }
.dimension-slider-card > small { display: block; color: #777280; font-size: 9px; line-height: 1.45; }
.dimension-editor { margin-bottom: 12px; padding: 9px; border: 1px solid #e2dfeb; border-radius: 10px; background: #faf9fc; }
.dimension-head, .dimension-row { display: grid; grid-template-columns: 28px 1fr 1.18fr; align-items: center; gap: 7px; }
.dimension-head { margin-bottom: 5px; color: #9692a0; font-size: 8px; text-align: center; }
.dimension-head span:first-child { text-align: left; }
.dimension-row + .dimension-row { margin-top: 6px; }
.dimension-row strong { color: #656170; font-size: 10px; }
.dimension-row label { position: relative; display: block; }
.dimension-row input { width: 100%; height: 32px; margin: 0; padding: 0 31px 0 8px; border: 1px solid #dcd9e6; border-radius: 7px; background: white; font-size: 11px; outline: none; }
.dimension-row input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.dimension-row b { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: #918d9c; font-size: 8px; font-weight: 650; pointer-events: none; }
.dimension-editor > small { display: block; margin-top: 8px; color: #777280; font-size: 9px; line-height: 1.45; }
.resolution-advice { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px 9px; margin: -2px 0 12px; padding: 9px; border: 1px solid #ddd8f3; border-radius: 10px; background: linear-gradient(145deg,#faf9ff,#f6f4ff); }
.face-detail-toggle { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 10px 0 12px; padding: 8px 10px; border: 1px solid #cde4dc; border-radius: 10px; color: #365b51; background: linear-gradient(135deg,#f2faf7,#fbfefd); cursor: pointer; }
.face-detail-toggle input { width: 36px; height: 20px; position: relative; appearance: none; margin: 0; border: 0; border-radius: 99px; background: #c8c5cf; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); cursor: pointer; transition: background-color .18s; }
.face-detail-toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(35,55,49,.25); transition: transform .18s; }
.face-detail-toggle input:checked { background: #2ca683; }
.face-detail-toggle input:checked::after { transform: translateX(16px); }
.face-detail-toggle input:focus-visible { outline: 3px solid rgba(44,166,131,.2); outline-offset: 2px; }
.face-detail-toggle span { min-width: 0; display: grid; gap: 3px; }
.face-detail-toggle b { color: #2f4f47; font-size: 10px; }
.face-detail-toggle small { overflow: hidden; color: #6e8981; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.face-detail-toggle > i { padding: 3px 7px; border-radius: 99px; color: #18745e; background: #def3ec; font-size: 8px; font-style: normal; font-weight: 850; }
.quality-glyph { height: 30px; display: flex; align-items: end; gap: 2px; padding: 3px 4px; border-radius: 7px; background: #ece9ff; }
.quality-glyph i { width: 4px; min-height: 5px; border-radius: 2px; background: #cec8eb; }
.quality-glyph i:nth-child(2) { height: 9px; }.quality-glyph i:nth-child(3) { height: 13px; }.quality-glyph i:nth-child(4) { height: 17px; }.quality-glyph i:nth-child(5) { height: 21px; }
.resolution-advice[data-level="1"] .quality-glyph i:nth-child(-n+1),
.resolution-advice[data-level="2"] .quality-glyph i:nth-child(-n+2),
.resolution-advice[data-level="3"] .quality-glyph i:nth-child(-n+3),
.resolution-advice[data-level="4"] .quality-glyph i:nth-child(-n+4),
.resolution-advice[data-level="5"] .quality-glyph i:nth-child(-n+5) { background: var(--purple); }
.quality-copy strong, .quality-copy small { display: block; }
.quality-copy strong { color: #4d485b; font-size: 9px; }
.quality-copy small { margin-top: 3px; color: #7e798b; font-size: 8px; line-height: 1.4; }
.color-recommendation { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid #e5e1f5; }
.color-recommendation span { color: #645f70; font-size: 8px; font-weight: 700; }
.color-recommendation button { min-height: 26px; padding: 0 8px; border: 1px solid #cbc4fa; border-radius: 7px; color: var(--purple); background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.color-recommendation button.current { color: #277b67; border-color: #baddd3; background: #f4fbf8; }
.split-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.split-buttons button, .button-label { min-height: 34px; display: grid; place-items: center; border: 1px solid #dcd9e6; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 650; cursor: pointer; }
.hint { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }

.studio { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: 42px auto minmax(0,1fr) 26px; overflow: hidden; background: var(--canvas); position: relative; }
.studio-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 4px 10px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.tool-group, .view-group { display: flex; align-items: center; gap: 4px; }
.tool-group { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tool-cluster-label { display: none; }
.tool-divider { width: 1px; height: 23px; display: block; flex: 0 0 auto; margin: 0 3px; background: #e3e0e9; }
.tool { flex: 0 0 auto; border: 0; border-radius: 7px; padding: 5px 7px; background: transparent; color: #716e7c; cursor: pointer; font-size: 10px; white-space: nowrap; }
.tool .tool-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #625d72; background: #f0eef6; font-size: 14px; font-weight: 800; line-height: 1; }
.tool:hover .tool-icon { color: var(--purple); background: #e9e6ff; }
.tool.active .tool-icon, .tool.symmetry-toggle.active .tool-icon { color: #fff; background: var(--purple); box-shadow: 0 3px 8px rgba(92,77,232,.22); }
.history-tool { color: #625d72; }
.history-tool span { font-size: 14px; }
.mobile-pan-tool { display: none; }
@media (min-width: 901px) { body.editor-ready .mobile-pan-tool { display: inline-block; } }
.tool span { margin-right: 3px; }
.tool:hover { background: #f2f0f8; }
.tool.active { background: var(--purple-soft); color: var(--purple); font-weight: 800; }
.tool.temporary-active { color: #0d826f; background: #e6f7f2; box-shadow: inset 0 0 0 1px #a8dfd1; }
.tool.symmetry-toggle.active { color: #0d826f; background: #e6f7f2; box-shadow: inset 0 0 0 1px #a8dfd1; }
.tool:disabled { opacity: .4; cursor: default; }
.active-color-indicator { min-width: 126px; max-width: 164px; height: 32px; display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: center; gap: 6px; flex: 0 1 auto; padding: 3px 6px; border: 1px solid #ddd9e8; border-radius: 8px; color: #47434f; background: #faf9fc; text-align: left; cursor: pointer; }
.active-color-indicator:disabled { opacity: .45; cursor: default; }
.active-color-indicator > i { width: 22px; height: 22px; display: block; border: 6px solid var(--active-color,#c9c5d2); border-radius: 5px; background: var(--active-color,#c9c5d2); box-shadow: inset 1px 1px 0 rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.12); }
.active-color-indicator strong, .active-color-indicator small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-color-indicator strong { color: var(--purple); font-size: 8px; }
.active-color-indicator small { margin-top: 1px; color: #817d8b; font-size: 7px; }
.tool-context-slot { min-width: 0; display: grid; gap: 4px; padding: 5px 7px; border-bottom: 1px solid #dedbe8; background: linear-gradient(180deg,#f9f8fc,#f3f1f8); }
.quick-palette-bar { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 3px 5px; border: 1px solid #d9d5e8; border-radius: 9px; background: rgba(255,255,255,.98); box-shadow: 0 3px 10px rgba(44,37,100,.05); }
.quick-palette-bar[hidden] { display: none; }
.quick-palette-heading { min-width: 0; padding-left: 5px; }
.quick-palette-heading strong, .quick-palette-heading small { display: block; }
.quick-palette-heading strong { color: #3f3a4c; font-size: 9px; }
.quick-palette-heading small { display: none; }
.quick-palette-track { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: thin; scrollbar-color: #c8c2ef transparent; }
.quick-color-chip { --quick-color:#c9c5d2; min-width: 58px; height: 33px; display: grid; grid-template-columns: 21px minmax(0,1fr); align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 5px; border: 1px solid transparent; border-radius: 7px; color: #514c5c; background: #f7f6fa; text-align: left; cursor: pointer; transition: border-color .14s,background-color .14s,transform .14s,box-shadow .14s; }
.quick-color-chip:hover, .quick-color-chip:focus-visible { outline: none; border-color: #a99fff; background: #f1efff; transform: translateY(-1px); box-shadow: 0 4px 9px rgba(61,50,137,.12); }
.quick-color-chip.active { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); box-shadow: inset 0 0 0 1px rgba(92,77,232,.08); }
.quick-color-chip > i { width: 20px; height: 20px; display: block; border: 1px solid color-mix(in srgb,var(--quick-color),#000 36%); border-radius: 4px; background: var(--quick-color); box-shadow: inset 1px 1px 0 rgba(255,255,255,.24),0 2px 4px rgba(35,29,55,.12); }
.quick-color-chip span { min-width: 0; }
.quick-color-chip b, .quick-color-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-color-chip b { font-size: 8px; }
.quick-color-chip small { margin-top: 1px; color: #8c8796; font-size: 6px; }
.quick-palette-actions { position: relative; z-index: 9; }
.palette-manager-toggle { min-width: 92px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid #d5d0ea; border-radius: 7px; color: #625d72; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.palette-manager-toggle:hover, .palette-manager-toggle.active { color: var(--purple); border-color: #afa6fa; background: var(--purple-soft); }
.palette-manager-toggle:disabled { opacity: .42; cursor: default; }
.palette-manager-toggle > span { font-size: 12px; }
.palette-manager-toggle > b { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: #fff; background: var(--purple); font-size: 7px; }
.palette-manager-popover { position: absolute; right: 0; top: calc(100% + 7px); width: min(310px,calc(100vw - 24px)); max-height: min(570px,calc(100vh - 160px)); overflow: auto; padding: 11px; border: 1px solid #d8d3ec; border-radius: 12px; background: rgba(255,255,255,.99); box-shadow: 0 18px 42px rgba(38,31,80,.22); }
.palette-manager-popover[hidden] { display: none; }
.palette-manager-popover .palette-section { margin: 0; padding: 0; border: 0; animation: none; }
.symmetry-bar { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid #b9dfd5; border-radius: 10px; color: #3c5952; background: rgba(244,252,249,.98); box-shadow: 0 4px 13px rgba(20,104,85,.07); }
.symmetry-bar > strong { display: flex; align-items: center; gap: 5px; color: #137f69; font-size: 10px; white-space: nowrap; }
.symmetry-bar > strong span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #24a67e; }
.symmetry-bar label { display: flex; align-items: center; gap: 5px; color: #73847f; font-size: 8px; font-weight: 750; white-space: nowrap; }
.symmetry-bar input[type="number"] { width: 56px; height: 28px; margin: 0; padding: 0 5px; border-color: #cce4dd; border-radius: 6px; color: #256b5d; font-size: 10px; text-align: center; }
.symmetry-angle { min-width: 182px; flex: 1 1 250px; }
.symmetry-angle input[type="range"] { width: min(190px,24vw); accent-color: #24a67e; }
.symmetry-angle output { min-width: 30px; color: #137f69; font-size: 9px; font-weight: 850; }
.symmetry-bar > button { min-width: 44px; height: 28px; padding: 0 8px; border: 1px solid #a8d8cc; border-radius: 7px; color: #137f69; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.symmetry-bar > small { color: #789089; font-size: 8px; white-space: nowrap; }
.brush-size-bar { min-height: 78px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #d5d0f2; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 5px 16px rgba(44,37,100,.08); }
.brush-size-title { min-width: 120px; display: flex; align-items: center; gap: 8px; }
.brush-size-title > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--purple); background: var(--purple-soft); font-size: 15px; }
.brush-size-title strong, .brush-live strong { display: block; color: #373345; font-size: 10px; }
.brush-size-title small, .brush-live small { display: block; margin-top: 2px; color: #8b8796; font-size: 8px; white-space: nowrap; }
.brush-presets { min-width: 0; display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 1px; scrollbar-width: thin; }
.brush-preset { min-width: 83px; height: 56px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 6px; padding: 5px 7px; border: 1px solid #dedbe7; border-radius: 9px; color: #5e5a69; background: #fff; text-align: left; cursor: pointer; }
.brush-preset:hover { border-color: #bcb5f5; background: #faf9ff; }
.brush-preset.active { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); box-shadow: inset 0 0 0 1px rgba(92,77,232,.08); }
.brush-preset > span { align-self: end; font-size: 10px; font-weight: 850; }
.brush-preset > small { align-self: start; color: #8a8694; font-size: 7px; white-space: nowrap; }
.brush-grid-icon { grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(var(--bw),7px); grid-template-rows: repeat(var(--bh),7px); gap: 2px; align-self: center; justify-self: center; padding: 4px; border-radius: 6px; background: #f0eef8; }
.brush-grid-icon b { width: 7px; height: 7px; display: block; border: 1px solid rgba(63,54,133,.34); border-radius: 2px; background: var(--purple); box-shadow: inset 1px 1px 0 rgba(255,255,255,.35); }
.custom-brush { min-width: 182px; height: 56px; display: grid; grid-template-columns: 45px auto 39px 8px 39px; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #cfc9ff; border-radius: 9px; background: #faf9ff; }
.custom-brush-preview { width: 43px; height: 43px; display: grid; place-content: center; gap: 1px; overflow: hidden; border-radius: 7px; background: #ebe8fc; }
.custom-brush-preview b { width: var(--preview-cell,4px); height: var(--preview-cell,4px); display: block; border-radius: 1px; background: var(--purple); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.custom-brush > div strong, .custom-brush > div small { display: block; white-space: nowrap; }
.custom-brush > div strong { color: var(--purple); font-size: 9px; }
.custom-brush > div small { margin-top: 2px; color: #918d9c; font-size: 7px; }
.custom-brush > label { display: grid; gap: 2px; color: #898595; font-size: 7px; text-align: center; }
.custom-brush input { width: 39px; height: 27px; padding: 2px 3px; border: 1px solid #d6d1ed; border-radius: 6px; color: #4c3cce; background: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.custom-brush input:focus { outline: 2px solid rgba(92,77,232,.18); border-color: var(--purple); }
.custom-brush > b { align-self: end; padding-bottom: 7px; color: #817d8b; font-size: 10px; }
.tool-icon svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canvas-shortcut-hint { margin-right: auto; font-size: 11px; color: #797485; white-space: nowrap; }
.inline-custom-brush { min-width: 0; height: 34px; display: flex; flex: 0 0 auto; gap: 6px; padding: 2px 7px; border-radius: 7px; }
.inline-custom-brush > strong { font-size: 11px; white-space: nowrap; }
.inline-custom-brush .custom-brush-preview { width: 26px; height: 26px; border-radius: 4px; }
.inline-custom-brush > label { display: flex; align-items: center; gap: 3px; font-size: 10px; }
.inline-custom-brush input { width: 40px; height: 27px; margin: 0; font-size: 12px; }
.inline-custom-brush > b { align-self: center; padding: 0; }
:is(.tool,.brush-preset,.view-group button,.quick-add-color):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.brush-live { min-width: 132px; padding-left: 12px; border-left: 1px solid #e2dfeb; }
.brush-live strong { color: var(--purple); }
.recolor-bar { min-height: 66px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 10px 11px; border: 1px solid #d5d0f2; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 5px 16px rgba(44,37,100,.08); }
.recolor-bar[hidden] { display: none; }
.recolor-title { display: flex; align-items: center; gap: 7px; min-width: 116px; }
.recolor-title > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--purple); background: var(--purple-soft); }
.recolor-title strong, .recolor-title small { display: block; }
.recolor-title strong { font-size: 10px; }
.recolor-title small { width: 150px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #85818f; font-size: 8px; }
.recolor-swatches { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 2px; overflow-x: auto; scrollbar-width: thin; }
.recolor-chip { min-width: 42px; height: 43px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 5px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; }
.recolor-chip:hover { background: #f5f3fa; }
.recolor-chip.active { border-color: var(--purple); background: var(--purple-soft); box-shadow: inset 0 0 0 1px rgba(92,77,232,.08); }
.recolor-chip i { width: 20px; height: 20px; display: block; border: 5px solid var(--color); border-radius: 50%; background: white; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.16); }
.recolor-chip span { color: #716d7c; font-size: 7px; font-weight: 750; }
.finish-recolor { border: 0; border-radius: 8px; padding: 8px 11px; color: white; background: var(--purple); font-size: 9px; font-weight: 750; cursor: pointer; }
.batch-bar { min-height: 106px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #d5d0f2; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 5px 16px rgba(44,37,100,.08); }
.batch-bar[hidden] { display: none; }
.batch-title { display: flex; align-items: center; gap: 7px; min-width: 124px; }
.batch-title > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--purple); background: var(--purple-soft); }
.batch-title strong, .batch-title small { display: block; }
.batch-title strong { font-size: 10px; }
.batch-title small { width: 145px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #85818f; font-size: 8px; }
.batch-pickers { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.batch-picker-row { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 5px; }
.batch-picker-row > label { color: #767282; font-size: 8px; font-weight: 750; }
.batch-swatches { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 2px; overflow-x: auto; scrollbar-width: thin; }
.batch-color { min-width: 38px; height: 35px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 3px 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; }
.batch-color:hover { background: #f5f3fa; }
.batch-color.active { border-color: var(--purple); background: var(--purple-soft); }
.batch-color i { width: 18px; height: 18px; display: block; flex: 0 0 auto; border: 4px solid var(--color); border-radius: 50%; background: white; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.batch-color span { color: #6f6b79; font-size: 7px; font-weight: 750; white-space: nowrap; }
.batch-empty { color: #9995a3; font-size: 8px; }
.batch-actions { display: flex; flex-direction: column; gap: 5px; }
.apply-batch, .finish-batch { min-width: 72px; border: 0; border-radius: 8px; padding: 8px 9px; font-size: 9px; font-weight: 750; cursor: pointer; }
.apply-batch { color: white; background: var(--purple); }
.apply-batch:disabled { opacity: .42; cursor: default; }
.finish-batch { color: var(--purple); background: var(--purple-soft); }
.simple-tool-bar { min-height: 62px; display: grid; grid-template-columns: 34px minmax(0,1fr) 31px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #d5d0f2; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 5px 16px rgba(44,37,100,.08); }
.simple-tool-bar > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--purple); background: var(--purple-soft); font-size: 15px; }
.simple-tool-bar strong, .simple-tool-bar small { display: block; }
.simple-tool-bar strong { color: #3f3b48; font-size: 10px; }
.simple-tool-bar small { margin-top: 3px; color: #85818f; font-size: 8px; }
.simple-color-preview { width: 29px; height: 29px; display: block; border: 7px solid var(--simple-color,#c9c5d2); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.view-group { color: #74717f; font-size: 10px; }
.view-group label { padding-right: 6px; }
.view-group button { min-width: 26px; height: 26px; border: 1px solid #dedbe6; background: white; border-radius: 6px; cursor: pointer; font-size: 12px; }
.view-group .model-toggle { min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; color: #676273; font-size: 9px; font-weight: 800; white-space: nowrap; transition: border-color .18s, color .18s, background .18s, box-shadow .18s; }
.view-group .model-toggle span { font-size: 11px; }
.view-group .model-toggle.active { color: #fff; border-color: var(--purple); background: var(--purple); box-shadow: 0 4px 11px rgba(92,77,232,.24); }
.layer-opacity-control { min-width: 224px; height: 24px; display: grid; grid-template-columns: auto minmax(64px,1fr) 32px; align-items: center; gap: 6px; margin: 0 5px; padding: 2px 7px; border: 1px solid #d9d5e8; border-radius: 7px; color: #5f5a6c; background: #faf9fd; white-space: nowrap; }
.layer-opacity-control[hidden] { display: none; }
.layer-opacity-control > span { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 800; }
.layer-opacity-control > span i { color: var(--purple); font-size: 11px; font-style: normal; }
.layer-opacity-control input { width: 100%; min-width: 58px; height: 14px; margin: 0; accent-color: var(--purple); cursor: ew-resize; }
.layer-opacity-control input:disabled { cursor: default; }
.layer-opacity-control output { min-width: 30px; color: var(--purple); font-size: 8px; font-weight: 850; text-align: right; }
.layer-opacity-control.unavailable { opacity: .46; }
.reference-actions .layer-opacity-control { width: 100%; min-width: 0; height: 42px; margin: 0; padding: 7px 10px; grid-template-columns: auto minmax(54px,1fr) 32px; gap: 8px; border-color: #ddd9ef; border-radius: 10px; background: #fbfaff; }
.reference-actions .layer-opacity-control > span { color: #504a65; font-size: 9px; }
.reference-actions .layer-opacity-control > span i { font-size: 13px; }
.reference-actions .layer-opacity-control output { font-size: 9px; }
.view-group button:disabled { opacity: .38; cursor: default; }
.view-group output { min-width: 40px; text-align: center; }
.gesture-help-button { display: none; color: var(--purple); font-weight: 900; }
.canvas-scroller { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; display: grid; place-items: safe center; padding: 42px; background-color: #f0eff4; background-image: radial-gradient(#d7d5df 0.7px, transparent .7px); background-size: 16px 16px; }
.gesture-hint { display: none; }
.empty-state { max-width: 540px; text-align: center; color: var(--muted); }
.empty-kicker { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 7px; margin: 0 auto 18px; padding: 7px 11px; border: 1px solid #d5d0fa; border-radius: 99px; color: var(--purple); background: rgba(239,237,255,.86); font-size: 10px; font-weight: 850; }
.empty-kicker span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-size: 12px; }
.empty-state h1 { color: var(--ink); margin: 24px 0 10px; font-size: 24px; line-height: 1.35; }
.empty-state p { margin: 0 auto 17px; max-width: 450px; font-size: 12px; line-height: 1.75; }
.empty-state button { border: 0; border-radius: 9px; padding: 10px 18px; color: white; background: var(--purple); font-size: 12px; font-weight: 700; cursor: pointer; }
.empty-actions { display: flex; justify-content: center; gap: 8px; }
.empty-state .demo-button { color: var(--purple); background: var(--purple-soft); }
.empty-workflow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 20px; color: #807c89; font-size: 10px; font-weight: 750; }
.empty-workflow span { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e0dde9; border-radius: 8px; background: rgba(255,255,255,.76); }
.empty-workflow span b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #716c81; background: #eeecf3; font-size: 8px; }
.empty-workflow span.active { color: var(--purple); border-color: #bfb7ff; background: var(--purple-soft); }
.empty-workflow span.active b { color: #fff; background: var(--purple); }
.empty-workflow > i { color: #aaa6b2; font-style: normal; }
.empty-visual { position: relative; width: 104px; height: 104px; margin: auto; transform: rotate(-5deg); }
.empty-visual span { position: absolute; width: 30px; height: 30px; left: calc(var(--x) * 34px); top: calc(var(--y) * 34px); border: 7px solid var(--c); border-radius: 50%; background: #f0eff4; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 0 4px 7px rgba(49,43,90,.15); }
.empty-visual > i { position: absolute; right: -42px; bottom: -9px; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#705ff0,#4d3ed2); font-size: 23px; font-style: normal; transform: rotate(18deg); box-shadow: 0 10px 22px rgba(65,52,180,.3); }
.empty-visual > b { position: absolute; left: 27px; top: 27px; z-index: 2; width: 66px; height: 66px; display: grid; place-items: end center; padding-bottom: 3px; border: 2px dashed #5c4de8; border-radius: 9px; color: #5c4de8; background: rgba(92,77,232,.06); font-size: 8px; transform: rotate(5deg); box-shadow: 0 0 0 4px rgba(255,255,255,.82); }
.pattern-stage { position: relative; flex: 0 0 auto; }
.pattern-stage.action-applied canvas { animation: canvas-action-applied .3s ease-out; }
@keyframes canvas-action-applied { 0% { filter: brightness(1); } 45% { filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(92,77,232,.28), 0 18px 55px rgba(35,31,64,.18); } 100% { filter: brightness(1); } }
#patternCanvas { display: block; touch-action: none; image-rendering: auto; background: white; box-shadow: 0 18px 55px rgba(35,31,64,.18); border-radius: 3px; cursor: crosshair; }
#patternCanvas[data-tool="pan"], body.space-pan-active #patternCanvas { cursor: grab; }
#patternCanvas[data-tool="pan"].panning, body.space-pan-active #patternCanvas.panning { cursor: grabbing; }
#patternCanvas.hide-native-cursor { cursor: none; }
#patternCanvas[data-tool="fill"] { cursor: cell; }
#patternCanvas[data-tool="eyedropper"] { cursor: copy; }
#patternCanvas[data-tool="recolor"] { cursor: pointer; }
.symmetry-axis { position: absolute; z-index: 4; height: 2px; transform-origin: left center; pointer-events: none; }
.symmetry-axis::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,#19a98a 0 9px,rgba(255,255,255,.95) 9px 13px); box-shadow: 0 0 0 1px rgba(10,91,73,.26),0 1px 5px rgba(10,91,73,.28); }
.symmetry-axis button { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: #19a98a; box-shadow: 0 0 0 2px #087760,0 3px 9px rgba(10,91,73,.32); transform: translate(-50%,-50%); pointer-events: auto; cursor: grab; touch-action: none; }
.symmetry-axis button:active { cursor: grabbing; transform: translate(-50%,-50%) scale(.9); }
.brush-grid-cursor { --cursor-color: #5c4de8; position: absolute; z-index: 5; box-sizing: border-box; pointer-events: none; border: 0; outline: 2px solid var(--cursor-color); border-radius: 5px; box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 7px 18px rgba(48,39,119,.3); transform-origin: center; }
.brush-grid-cursor.paint { background: rgba(92,77,232,.08); }
.brush-grid-cursor.erase { --cursor-color: #d53d6f; background: rgba(213,61,111,.08); }
.brush-grid-cells { width: 100%; height: 100%; display: grid; }
.brush-cursor-cell { position: relative; display: grid; place-items: center; }
.brush-cursor-cell::before { content: ""; width: calc(100% - 2px); height: calc(100% - 2px); border: max(1px,.06em) solid color-mix(in srgb,var(--preview-color,#5c4de8),#000 42%); border-radius: 2px; background: var(--preview-color,#5c4de8); box-shadow: 0 0 0 2px var(--cursor-color), inset 1px 1px 0 rgba(255,255,255,.24), 0 3px 8px rgba(36,31,72,.2); opacity: .9; animation: brush-hover-pulse .85s ease-in-out infinite alternate; }
.brush-grid-cursor.paint .brush-cursor-cell::before { background: var(--preview-color,#5c4de8); }
.brush-cursor-cell b { position: absolute; z-index: 2; color: #211e27; font-size: max(6px,.45em); font-weight: 900; line-height: 1; text-shadow: 0 0 2px #fff,0 0 3px #fff; }
.brush-cursor-cell b.model { max-width: 84%; overflow: hidden; padding: 2px 3px; border-radius: 3px; background: rgba(255,255,255,.9); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1em; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; box-shadow: 0 1px 4px rgba(31,27,45,.22); }
.brush-grid-cursor.erase .brush-cursor-cell::before { background: rgba(255,255,255,.62); border: 2px dashed var(--cursor-color); box-shadow: 0 0 0 1px rgba(255,255,255,.9); opacity: .94; }
.brush-grid-cursor.erase .brush-cursor-cell::after { content: "×"; position: absolute; color: var(--cursor-color); font-size: min(16px,1.1em); font-weight: 900; line-height: 1; }
.brush-grid-cursor > span { position: absolute; left: -2px; top: -27px; min-width: max-content; padding: 4px 7px; border-radius: 6px; color: #fff; background: var(--cursor-color); font-size: 8px; font-weight: 800; line-height: 1.2; box-shadow: 0 4px 10px rgba(35,30,69,.22); }
.brush-grid-cursor > span::after { content: ""; position: absolute; left: 8px; bottom: -4px; border: 4px solid transparent; border-top-color: var(--cursor-color); border-bottom: 0; }
.brush-grid-cursor.pressing { transform: scale(.93); box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 2px 7px rgba(48,39,119,.26); }
.brush-grid-cursor.pressing .brush-cursor-cell::before { transform: scale(.82); opacity: 1; animation: none; }
.brush-grid-cursor.applied { animation: brush-applied .24s ease-out; }
@keyframes brush-hover-pulse { from { transform: scale(.9); } to { transform: scale(1.04); } }
@keyframes brush-applied { 0% { filter: brightness(1); } 45% { filter: brightness(1.55); } 100% { filter: brightness(1); } }
.statusbar { box-sizing: border-box; min-height: 26px; height: 26px; max-height: 26px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 0 13px; background: #fff; border-top: 1px solid var(--line); color: #898694; font-size: 9px; }
.mobile-model-toggle { display: none; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.section-title span { color: #9996a4; font-size: 9px; }
.add-color-button { padding: 5px 8px; border: 1px solid #cfc9ff; border-radius: 7px; color: var(--purple); background: var(--purple-soft); font-size: 8px; font-weight: 800; cursor: pointer; }
.add-color-button:disabled { opacity: .42; cursor: default; }
.preview-wrap { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background-color: #f4f3f7; background-image: linear-gradient(45deg,#e8e6ed 25%,transparent 25%),linear-gradient(-45deg,#e8e6ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e6ed 75%),linear-gradient(-45deg,transparent 75%,#e8e6ed 75%); background-size: 14px 14px; background-position: 0 0,0 7px,7px -7px,-7px 0; transition: height .2s ease; }
.preview-wrap.portrait { height: 220px; }
.preview-wrap.landscape { height: 128px; }
.preview-wrap img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: none; flex: 0 0 auto; position: relative; z-index: 1; }
.preview-wrap span { color: #9996a4; font-size: 10px; }
.summary-card { display: grid; grid-template-columns: .8fr .8fr 1.6fr; padding: 13px !important; margin-top: 14px !important; border: 0 !important; border-radius: 11px; background: linear-gradient(135deg,#f4f2ff,#fbfaff); }
.summary-card div + div { border-left: 1px solid #dedaf6; padding-left: 11px; }
.summary-card small { display: block; color: #868294; font-size: 9px; }
.summary-card strong { display: block; margin-top: 5px; font-size: 15px; }
#physicalSize { white-space: nowrap; font-size: 12px; letter-spacing: -.025em; }
.inspector-tabs { position: sticky; top: -18px; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 14px 0 0; padding: 7px 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.inspector-tabs button { min-width: 0; height: 31px; padding: 0 4px; border: 1px solid #dfdce7; border-radius: 7px; color: #827e8d; background: #fff; font-size: 8px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.inspector-tabs button span { margin-right: 2px; font-size: 9px; }
.inspector-tabs button.active { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); box-shadow: inset 0 0 0 1px rgba(92,77,232,.06); }
.inspector-panel { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); animation: inspector-panel-in .16s ease-out; }
@keyframes inspector-panel-in { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.package-settings { margin-bottom: 9px; padding: 8px; border: 1px solid #e3e0ed; border-radius: 9px; background: #faf9fc; }
.package-settings label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; color: #625e6c; font-size: 8px; font-weight: 750; }
.package-settings input { min-width: 0; height: 28px; padding: 0 7px; border: 1px solid #d9d5e4; border-radius: 6px; background: #fff; color: #403c49; font-size: 9px; }
.package-settings small { display: block; margin-top: 5px; color: #928e9c; font-size: 7px; line-height: 1.4; }
.palette-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.palette-empty { padding: 26px 12px; border: 1px dashed #dcd9e5; border-radius: 9px; text-align: center; color: #9a97a5; font-size: 10px; line-height: 1.6; }
.palette-item { width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; }
.palette-item:hover { background: #f7f6fa; }
.palette-item.active { border-color: #b8b0ff; background: var(--purple-soft); }
.palette-main { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 1px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.color-bead { width: 27px; height: 27px; border: 7px solid var(--color); border-radius: 50%; background: white; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.12); }
.palette-meta strong { display: block; font-size: 10px; }
.diagram-badge { display: inline-grid; min-width: 34px; height: 17px; place-items: center; margin-right: 5px; padding: 0 5px; border-radius: 5px; color: #fff; background: var(--purple); font-size: 8px; font-style: normal; }
.palette-meta small { display: block; color: #8e8a98; font-size: 8px; margin-top: 2px; }
.palette-count { color: #5f5b6d; font-size: 10px; font-variant-numeric: tabular-nums; }
.package-map { display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: end; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(119,113,150,.14); }
.package-map label { min-width: 0; display: grid; gap: 3px; color: #8b8795; font-size: 7px; }
.package-map input { width: 100%; min-width: 0; height: 25px; padding: 0 6px; border: 1px solid #d8d4e3; border-radius: 6px; color: #4b4753; background: rgba(255,255,255,.92); font-size: 9px; font-weight: 750; }
.package-map input:focus { outline: 2px solid rgba(92,77,232,.16); border-color: var(--purple); }
.palette-edit-color { height: 25px; padding: 0 6px; border: 1px solid #cfc9ff; border-radius: 6px; color: var(--purple); background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.materials-list { display: flex; flex-direction: column; gap: 5px; max-height: 230px; overflow-y: auto; }
.materials-empty { padding: 22px 10px; border: 1px dashed #dcd9e5; border-radius: 9px; text-align: center; color: #9a97a5; font-size: 9px; }
.material-row { display: grid; grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 42px; padding: 6px 7px; border: 1px solid #e4e1eb; border-radius: 8px; background: #fff; }
.material-swatch { width: 22px; height: 22px; border: 6px solid var(--color); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.material-model { min-width: 0; }
.material-model strong, .material-model small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-model strong { color: #4b4754; font-size: 9px; }
.material-model small { margin-top: 2px; color: #918d9b; font-size: 7px; }
.material-count { color: #302d39; font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.materials-total { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding: 8px 9px; border-radius: 8px; color: #706c7a; background: #f5f3ff; font-size: 9px; }
.materials-total strong { color: var(--purple); font-size: 10px; }
.materials-export { width: 100%; min-height: 42px; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 7px; margin-top: 7px; padding: 7px 9px; border: 1px solid #d7d2f0; border-radius: 8px; color: var(--purple); background: #faf9ff; text-align: left; cursor: pointer; }
.materials-export:disabled { opacity: .44; cursor: default; }
.materials-export > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--purple); font-weight: 850; }
.materials-export strong, .materials-export small { display: block; }
.materials-export strong { font-size: 9px; }
.materials-export small { margin-top: 2px; color: #908b9e; font-size: 7px; }
.export-stack { display: grid; gap: 7px; }
.export-button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 7px; padding: 10px; border: 1px solid #dcd9e6; border-radius: 9px; background: white; text-align: left; cursor: pointer; }
.export-button:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-soft); }
.export-button:disabled { opacity: .45; cursor: default; }
.export-button > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--purple); background: var(--purple-soft); }
.export-button.finished > span { color: #a56522; background: #fff2df; }
.export-button.transparent > span { color: #187f69; background-color: #e7f8f3; background-image: linear-gradient(45deg,#d0eee6 25%,transparent 25%),linear-gradient(-45deg,#d0eee6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d0eee6 75%),linear-gradient(-45deg,transparent 75%,#d0eee6 75%); background-size: 8px 8px; background-position: 0 0,0 4px,4px -4px,-4px 0; }
.export-button strong { display: block; font-size: 10px; }
.export-button small { display: block; margin-top: 2px; color: #92909c; font-size: 8px; }
.export-button b { color: var(--purple); }
.save-project-button { width: 100%; min-height: 47px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 7px; margin-top: 11px; padding: 9px 10px; border: 1px solid #dcd9e6; border-radius: 9px; color: #5f5a6d; background: #faf9fc; text-align: left; cursor: pointer; }
.save-project-button:hover:not(:disabled) { color: var(--purple); border-color: #c7c0fa; background: #f3f1ff; }
.save-project-button:disabled { opacity: .45; cursor: default; }
.save-project-button > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #777283; }
.save-project-button strong, .save-project-button small { display: block; }
.save-project-button strong { font-size: 10px; }
.save-project-button small { margin-top: 2px; color: #92909c; font-size: 8px; }
.coming-soon { margin: 9px 0 0; color: #8d8999; font-size: 9px; line-height: 1.5; }
.coming-soon span { color: var(--purple); background: var(--purple-soft); border-radius: 99px; padding: 2px 6px; margin-right: 3px; font-weight: 700; }
.cutout-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: rgba(27,24,43,.66); backdrop-filter: blur(5px); }
.cutout-dialog { width: min(1040px,96vw); max-height: 94vh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border-radius: 17px; background: #fff; box-shadow: 0 30px 90px rgba(16,13,34,.4); }
.cutout-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 12px 17px; border-bottom: 1px solid #e7e4ee; }
.cutout-head > div { display: flex; align-items: center; gap: 10px; }
.cutout-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--purple),#806cf2); font-size: 17px; }
.cutout-head h2 { margin: 0 0 2px; font-size: 15px; }
.cutout-head p { margin: 0; color: #868291; font-size: 9px; }
.cutout-head > button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f2f0f6; color: #696574; font-size: 20px; cursor: pointer; }
.cutout-body { min-height: 0; display: grid; grid-template-rows: auto minmax(220px,1fr) auto; padding: 12px 15px 10px; background: #f4f3f7; }
.cutout-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 8px; border: 1px solid #dedbe7; border-radius: 10px; background: rgba(255,255,255,.95); }
.mask-tools, .mask-actions { display: flex; gap: 6px; }
.mask-tools button, .mask-actions button { min-height: 31px; padding: 0 9px; border: 1px solid #dedbe6; border-radius: 7px; color: #5f5b6b; background: #fff; font-size: 9px; cursor: pointer; }
.mask-tools button.active, .mask-actions button.active { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); font-weight: 800; }
.mask-tools button span { font-size: 13px; }
.mask-size { min-width: 220px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #686473; font-size: 9px; }
.mask-size input { min-width: 80px; accent-color: var(--purple); }
.mask-size output { min-width: 35px; color: var(--purple); font-weight: 800; }
.mask-actions { margin-left: auto; }
.mask-actions button:disabled { opacity: .4; cursor: default; }
.cutout-stage { min-height: 0; position: relative; display: grid; place-items: center; overflow: auto; border-radius: 11px; background-color: #e9e8ed; background-image: linear-gradient(45deg,#d9d7df 25%,transparent 25%),linear-gradient(-45deg,#d9d7df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d7df 75%),linear-gradient(-45deg,transparent 75%,#d9d7df 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
#cutoutCanvas { max-width: 100%; max-height: 54vh; display: block; touch-action: none; cursor: crosshair; box-shadow: 0 12px 36px rgba(25,22,45,.16); }
.cutout-canvas-tip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 8px; border-radius: 99px; color: #fff; background: rgba(35,32,48,.74); font-size: 8px; pointer-events: none; white-space: nowrap; }
.cutout-progress { padding: 9px 2px 0; }
.cutout-progress > div { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 5px; color: #5f5b6b; font-size: 9px; }
.cutout-progress strong.error { color: #c84a5d; }
.cutout-progress progress { width: 100%; height: 6px; display: block; overflow: hidden; border: 0; border-radius: 99px; accent-color: var(--purple); }
.cutout-progress.indeterminate progress { background: linear-gradient(90deg,#ddd9f9,#7f6cf1,#ddd9f9); background-size: 200% 100%; animation: cutout-loading 1.2s linear infinite; }
.cutout-progress small { display: block; margin-top: 5px; color: #8c8896; font-size: 8px; }
.cutout-footer { min-height: 58px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 15px; border-top: 1px solid #e7e4ee; }
.cutout-footer button { min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 10px; font-weight: 750; cursor: pointer; }
.cutout-secondary { border: 1px solid #dcd9e6; color: #676373; background: #fff; }
.cutout-primary { border: 0; color: #fff; background: var(--purple); }
.cutout-primary:disabled { opacity: .4; cursor: default; }
@keyframes cutout-loading { to { background-position: -200% 0; } }
.color-editor-modal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; background: rgba(27,24,43,.66); backdrop-filter: blur(5px); }
.color-editor-dialog { width: min(460px,95vw); overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 28px 80px rgba(18,15,38,.38); }
.color-editor-dialog > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #e6e3ed; }
.color-editor-dialog > header > div { display: flex; align-items: center; gap: 10px; }
.color-editor-preview { width: 38px; height: 38px; display: block; flex: 0 0 auto; border: 10px solid var(--editor-color,#5c4de8); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.14); }
.color-editor-dialog h2 { margin: 0; font-size: 14px; }
.color-editor-dialog header p { margin: 3px 0 0; color: #8a8695; font-size: 8px; }
.color-editor-dialog header > button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #6d6977; background: #f1eff5; font-size: 19px; cursor: pointer; }
.color-editor-body { display: grid; gap: 11px; padding: 16px; }
.color-editor-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(100px,.7fr); gap: 10px; }
.color-editor-field { min-width: 0; display: grid; gap: 5px; color: #5e5a68; font-size: 9px; font-weight: 750; }
.color-editor-field > input, .color-value > input[type="text"] { width: 100%; height: 35px; padding: 0 9px; border: 1px solid #d8d4e2; border-radius: 8px; color: #3f3b47; background: #fff; font-size: 10px; }
.color-editor-field input:focus { outline: 2px solid rgba(92,77,232,.16); border-color: var(--purple); }
.color-value { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 6px; }
.color-value input[type="color"] { width: 44px; height: 35px; padding: 3px; border: 1px solid #d8d4e2; border-radius: 8px; background: #fff; cursor: pointer; }
.color-editor-hint { padding: 8px 9px; border-radius: 7px; color: #807b8b; background: #f5f3ff; font-size: 8px; line-height: 1.5; }
.color-editor-hint.error { color: #b42b58; background: #fff0f5; }
.color-editor-dialog > footer { display: flex; justify-content: flex-end; gap: 7px; padding: 11px 15px; border-top: 1px solid #e6e3ed; background: #faf9fc; }
.color-editor-dialog footer button { min-width: 72px; min-height: 33px; padding: 0 11px; border: 1px solid #d8d4e2; border-radius: 8px; color: #625e6c; background: #fff; font-size: 9px; font-weight: 750; cursor: pointer; }
.color-editor-dialog footer .save-color { border-color: var(--purple); color: #fff; background: var(--purple); }
.color-editor-dialog footer .delete-color { margin-right: auto; border-color: #f1bfd0; color: #c32f60; background: #fff2f6; }

/* 编辑与导出统一使用扁平方形色块，尽量把视觉面积留给颜色与结构。 */
.color-bead,
.material-swatch,
.recolor-chip i,
.batch-color i { --bead-color: var(--color); }
.active-color-indicator > i { --bead-color: var(--active-color,#c9c5d2); }
.simple-color-preview { --bead-color: var(--simple-color,#c9c5d2); }
.color-editor-preview { --bead-color: var(--editor-color,#5c4de8); }
.empty-visual span { --bead-color: var(--c); }
.color-bead,
.material-swatch,
.recolor-chip i,
.batch-color i,
.active-color-indicator > i,
.simple-color-preview,
.color-editor-preview,
.empty-visual span {
  border: 1px solid color-mix(in srgb,var(--bead-color),#000 36%);
  border-radius: 4px;
  background: var(--bead-color);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(35,29,55,.13);
}
.toast { position: fixed; left: 50%; bottom: 44px; z-index: 20; transform: translate(-50%, 14px); padding: 9px 14px; border-radius: 8px; background: rgba(34,32,46,.92); color: white; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 901px) {
  body.editor-ready .brush-size-title, body.editor-ready .brush-live { display: none; }
  body.editor-ready .brush-size-bar { min-height: 44px; display: flex; gap: 10px; padding: 4px 6px; border-radius: 9px; box-shadow: none; }
  body.editor-ready .brush-size-bar[hidden] { display: none; }
  body.editor-ready .brush-preset { min-width: 58px; height: 32px; grid-template-columns: 21px 1fr; grid-template-rows: 1fr; column-gap: 4px; padding: 3px 5px; }
  body.editor-ready .brush-preset > span { align-self: center; font-size: 11px; }
  body.editor-ready .brush-preset > small { display: none; }
  body.editor-ready .brush-grid-icon { grid-row: 1 / span 2; grid-template-columns: repeat(var(--bw),6px); grid-template-rows: repeat(var(--bh),6px); gap: 1px; padding: 3px; }
  body.editor-ready .brush-grid-icon b { width: 6px; height: 6px; }
  body.editor-ready .inspector-tabs { grid-template-columns: repeat(2,1fr); }
  body.editor-ready .inspector-tabs [data-inspector-tab="palette"] { display: none; }
}

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 250px minmax(360px, 1fr); }
  .inspector { grid-column: auto; grid-row: auto; position: fixed; right: 0; top: 0; bottom: 0; width: 286px; transform: translateX(calc(100% - 10px)); transition: .2s; box-shadow: var(--shadow); z-index: 4; }
  .inspector:hover, .inspector:focus-within { transform: translateX(0); }
  .privacy-pill { display: none; }
  .brush-live { display: none; }
  .brush-size-title { display: none; }
  .brush-size-bar { grid-template-columns: minmax(0,1fr) auto; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  body.editor-ready .workspace { grid-template-columns: minmax(0,1fr) 286px; }
  body.editor-ready .inspector { position: static; right: auto; top: auto; bottom: auto; width: auto; transform: none; transition: none; box-shadow: none; z-index: auto; }
}
@media (min-width: 901px) {
  body.editor-compact .workspace { grid-template-columns: minmax(0,1fr) 260px; }
  body.editor-compact .studio { grid-template-rows: 40px auto minmax(0,1fr) 24px; }
  body.editor-compact .studio-toolbar { justify-content: flex-start; gap: 5px; padding: 4px 7px; }
  body.editor-compact .tool-group { flex: 1 1 auto; overflow: visible; }
  body.editor-compact .tool-group > .tool { width: 34px; min-width: 34px; height: 32px; overflow: hidden; padding: 0; font-size: 0; text-align: center; }
  body.editor-compact .tool-group > .tool span { margin: 0; font-size: 15px; }
  body.editor-compact .active-color-indicator { min-width: 82px; max-width: 94px; height: 32px; grid-template-columns: 22px minmax(0,1fr); gap: 5px; padding: 3px 5px; }
  body.editor-compact .active-color-indicator > i { width: 21px; height: 21px; }
  body.editor-compact .view-group { flex: 0 0 auto; gap: 2px; white-space: nowrap; }
  body.editor-compact .view-group label { width: auto; padding: 0; font-size: 11px; white-space: nowrap; }
  body.editor-compact .view-group label input { width: 16px; height: 16px; margin: 0 4px; }
  body.editor-compact .view-group output { min-width: 31px; font-size: 8px; }
  body.editor-compact .view-group button { min-width: 25px; width: 25px; height: 25px; padding: 0; }
  body.editor-compact #zoomFit { font-size: 0; }
  body.editor-compact #zoomFit::before { content: "适"; font-size: 10px; font-weight: 800; }
  body.editor-compact .tool-context-slot { gap: 4px; padding: 5px 7px; }
  body.editor-compact .quick-palette-bar { min-height: 38px; grid-template-columns: minmax(0,1fr) auto; padding: 2px 4px; }
  body.editor-compact .quick-palette-heading { display: none; }
  body.editor-compact .quick-color-chip { min-width: 52px; height: 30px; grid-template-columns: 19px minmax(0,1fr); padding: 2px 4px; }
  body.editor-compact .quick-color-chip > i { width: 18px; height: 18px; }
  body.editor-compact .palette-manager-toggle { min-width: 34px; width: 34px; height: 29px; overflow: hidden; padding: 0; font-size: 0; }
  body.editor-compact .palette-manager-toggle > span { font-size: 12px; }
  body.editor-compact .palette-manager-toggle > b { position: absolute; right: -3px; top: -4px; min-width: 14px; height: 14px; padding: 0 2px; font-size: 6px; }
  body.editor-compact .brush-size-bar { min-height: 44px; gap: 6px; padding: 3px 5px; }
  body.editor-compact .brush-preset { min-width: 54px; height: 32px; column-gap: 3px; padding: 2px 4px; }
  body.editor-compact .canvas-shortcut-hint { display: none; }
  body.editor-compact .canvas-scroller { padding: 24px; }
  body.editor-compact .statusbar { min-height: 24px; height: 24px; max-height: 24px; padding: 0 8px; font-size: 8px; }
  body.editor-compact .inspector { padding: 11px; }
  body.editor-compact .preview-wrap { height: 112px; }
  body.editor-compact .preview-wrap.portrait { height: 145px; }
  body.editor-compact .preview-wrap.landscape { height: 92px; }
  body.editor-compact .inspector-tabs { top: -11px; }
}
@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body { min-height: 100dvh; overflow: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom)); overscroll-behavior-y: contain; }

  .workspace { display: block; height: auto; }
  .workspace > .control-panel, .workspace > .studio, .workspace > .inspector { display: none; }
  body[data-mobile-view="settings"] .control-panel { display: block; }
  body[data-mobile-view="editor"] .studio { display: grid; }
  body[data-mobile-view="palette"] .inspector,
  body[data-mobile-view="export"] .inspector { display: block; }
  .control-panel, .inspector { width: auto; min-height: 100dvh; padding: 13px 14px 82px; border: 0; overflow: visible; }
  body:not(.mobile-source-ready)[data-mobile-view="settings"] .control-panel > section:nth-child(2) { display: none; }
  .panel section + section { margin-top: 13px; padding-top: 13px; }
  .mobile-creation-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 86px; gap: 10px 12px; margin: 0 0 17px; padding: 15px; overflow: hidden; border: 1px solid #c9c2ff; border-radius: 16px; background: linear-gradient(145deg,#f5f2ff 0%,#fff 55%,#ecfaf5 100%); box-shadow: 0 10px 26px rgba(57,45,145,.1); }
  .mobile-creation-hero::before { content: ""; position: absolute; right: -34px; top: -38px; width: 110px; height: 110px; border-radius: 50%; background: rgba(92,77,232,.07); }
  .mobile-creation-copy { min-width: 0; position: relative; z-index: 1; }
  .mobile-creation-copy span, .mobile-creation-copy strong, .mobile-creation-copy small { display: block; }
  .mobile-creation-copy span { width: max-content; margin-bottom: 7px; padding: 4px 7px; border-radius: 99px; color: #fff; background: var(--purple); font-size: 9px; font-weight: 850; }
  .mobile-creation-copy strong { color: #292638; font-size: 17px; line-height: 1.35; }
  .mobile-creation-copy small { margin-top: 7px; color: #716d7d; font-size: 10px; line-height: 1.55; }
  .mobile-edit-visual { position: relative; z-index: 1; width: 82px; height: 82px; align-self: center; transform: rotate(-4deg); }
  .mobile-edit-visual i { position: absolute; width: 29px; height: 29px; border: 7px solid var(--purple); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12),0 4px 8px rgba(42,34,91,.15); }
  .mobile-edit-visual i:nth-child(1) { left: 4px; top: 4px; border-color: #5c4de8; }
  .mobile-edit-visual i:nth-child(2) { left: 37px; top: 4px; border-color: #ff7f6a; }
  .mobile-edit-visual i:nth-child(3) { left: 4px; top: 37px; border-color: #45b89c; }
  .mobile-edit-visual i:nth-child(4) { left: 37px; top: 37px; border-color: #f3c74f; }
  .mobile-edit-visual b { position: absolute; right: -2px; bottom: -2px; z-index: 3; width: 35px; height: 35px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--purple); font-size: 17px; transform: rotate(14deg); box-shadow: 0 6px 14px rgba(73,59,183,.3); }
  .mobile-edit-visual em { position: absolute; left: 0; top: 0; z-index: 2; width: 70px; height: 70px; display: grid; place-items: end center; padding-bottom: 2px; border: 2px dashed #5c4de8; border-radius: 10px; color: #5c4de8; background: rgba(92,77,232,.05); font-size: 7px; font-style: normal; font-weight: 900; }
  .mobile-creation-route { grid-column: 1 / -1; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; padding-top: 10px; border-top: 1px solid rgba(92,77,232,.13); color: #625d72; text-align: center; font-size: 9px; font-weight: 800; }
  .mobile-creation-route span:last-child { color: var(--purple); }
  .mobile-creation-route b { color: #aaa5b5; }
  .drop-zone { display: none; }
  .mobile-photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .mobile-photo-actions button, .mobile-photo-actions label { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d4cfeb; border-radius: 11px; color: var(--purple); background: #f7f5ff; font-size: 12px; font-weight: 800; cursor: pointer; }
  .mobile-photo-actions label { color: #187f69; border-color: #c8e5dc; background: #f0faf7; }
  .mobile-photo-actions span { font-size: 17px; }
  .mobile-photo-actions input { display: none; }
  body.mobile-source-ready .mobile-photo-actions { display: none; }
  .mobile-import-preview:not([hidden]) { position: relative; width: 100%; height: 176px; display: block; overflow: hidden; padding: 0; border: 1px solid #d9d5e5; border-radius: 14px; background-color: #f1f0f4; background-image: linear-gradient(45deg,#e4e2e9 25%,transparent 25%),linear-gradient(-45deg,#e4e2e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e2e9 75%),linear-gradient(-45deg,transparent 75%,#e4e2e9 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; box-shadow: 0 8px 22px rgba(36,31,65,.08); }
  .mobile-import-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
  .mobile-import-preview > span { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(31,28,43,.78); backdrop-filter: blur(9px); }
  .mobile-import-preview b, .mobile-import-preview small { font-size: 10px; }
  .mobile-import-preview small { color: rgba(255,255,255,.78); }
  .file-chip { min-height: 42px; }
  body[data-mobile-view="settings"] .file-chip { display: none; }
  .cutout-entry { grid-template-columns: 1fr; }
  .cutout-entry button { height: 44px; font-size: 12px; }
  body.mobile-source-ready .mobile-simple-settings { display: grid; gap: 12px; }
  .mobile-detailed-control { display: none !important; }
  .mobile-simple-settings { padding: 13px; border: 1px solid #d8d3f4; border-radius: 15px; background: linear-gradient(145deg,#f8f6ff,#fff 58%,#f1faf7); box-shadow: 0 8px 22px rgba(51,42,104,.08); }
  .mobile-simple-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mobile-simple-heading strong, .mobile-simple-heading small { display: block; }
  .mobile-simple-heading strong { color: #2d293a; font-size: 14px; }
  .mobile-simple-heading small { margin-top: 3px; color: #817c8e; font-size: 9px; }
  .mobile-simple-heading > span { padding: 4px 8px; border-radius: 99px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 900; }
  .mobile-quality-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .mobile-quality-options button { min-width: 0; min-height: 58px; display: grid; place-content: center; gap: 3px; padding: 5px 2px; border: 1px solid #ded9eb; border-radius: 11px; color: #6f6a79; background: #fff; box-shadow: 0 2px 5px rgba(47,39,86,.04); }
  .mobile-quality-options button b { font-size: 14px; }
  .mobile-quality-options button small { color: #9a95a4; font-size: 8px; }
  .mobile-quality-options button.active { color: #fff; border-color: var(--purple); background: linear-gradient(145deg,var(--purple),#7765ef); box-shadow: 0 7px 16px rgba(92,77,232,.24); }
  .mobile-quality-options button.active small { color: rgba(255,255,255,.78); }
  .mobile-quality-options button:disabled, .mobile-bead-choice button:disabled { opacity: .45; }
  .mobile-quality-summary { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 9px; padding: 10px 11px; border-radius: 11px; background: #f2f0fb; }
  .mobile-quality-summary span { grid-row: 1 / 3; color: #716b80; font-size: 9px; font-weight: 850; }
  .mobile-quality-summary strong { color: #312c45; font-size: 12px; text-align: right; }
  .mobile-quality-summary small { color: #7d778c; font-size: 8px; text-align: right; }
  .mobile-bead-choice { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; }
  .mobile-bead-choice > span { color: #5e596c; font-size: 10px; font-weight: 850; }
  .mobile-bead-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mobile-bead-choice button { min-height: 40px; padding: 0 5px; border: 1px solid #dad5e8; border-radius: 9px; color: #6d6878; background: #fff; font-size: 10px; font-weight: 850; }
  .mobile-bead-choice button.active { color: #187f69; border-color: #9fd8ca; background: #edf9f6; box-shadow: inset 0 0 0 1px rgba(24,127,105,.06); }
  .mobile-simple-settings > p { margin: -2px 0 0; color: #898493; font-size: 8px; text-align: center; }
  input[type="number"], select { height: 44px; font-size: 16px; }
  .field-note, .subject-tip { display: none; }
  .dimension-editor > small { font-size: 10px; }
  .resolution-advice { min-height: 74px; padding: 9px; }
  .face-detail-toggle { min-height: 58px; margin: 11px 0 14px; padding: 9px 11px; }
  .face-detail-toggle b { font-size: 12px; }
  .face-detail-toggle small { font-size: 9px; }
  .quality-copy strong { font-size: 13px; }
  .quality-copy small { font-size: 10px; }
  .color-recommendation span, .color-recommendation button { font-size: 11px; }
  .color-recommendation button { min-height: 36px; }
  .recognition-card { min-height: 72px; padding: 12px; }
  .recognition-card strong { font-size: 13px; }
  .recognition-card small { font-size: 10px; }
  .advanced-settings summary { min-height: 48px; }
  .advanced-settings summary span { font-size: 13px; }
  .dimension-row input { height: 42px; font-size: 16px; }
  .generate-button { height: 50px; font-size: 14px; }
  body.mobile-source-ready[data-mobile-view="settings"] .control-panel { padding-bottom: calc(154px + env(safe-area-inset-bottom)); }
  body.mobile-source-ready[data-mobile-view="settings"] .generate-button { position: fixed; left: 14px; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 24; height: 54px; border: 2px solid rgba(255,255,255,.88); box-shadow: 0 12px 28px rgba(73,58,196,.34); }
  .split-buttons button, .button-label { min-height: 46px; }

  .studio { height: calc(100dvh - 64px - env(safe-area-inset-bottom)); min-height: 500px; grid-template-rows: auto auto minmax(0,1fr) 38px; overflow: hidden; }
  .studio-toolbar { min-height: 58px; justify-content: flex-start; gap: 12px; overflow-x: auto; padding: 6px 8px; scrollbar-width: thin; }
  .tool-group { flex: 0 0 auto; gap: 3px; }
  .tool-cluster-label, .tool-divider { display: none; }
  .tool { min-width: 54px; min-height: 44px; padding: 6px 8px; font-size: 11px; }
  #undoButton { margin-left: auto; }
  .mobile-pan-tool { display: none; }
  .quick-palette-bar { display: none !important; }
  .active-color-indicator { min-width: 126px; height: 44px; flex: 0 0 auto; }
  .view-group { flex: 0 0 auto; }
  .view-group label { min-height: 38px; display: flex; align-items: center; }
  .view-group button { min-width: 38px; height: 38px; }
  .view-group .model-toggle { min-width: 68px; height: 38px; padding: 0 10px; font-size: 11px; }
  .gesture-help-button { display: inline-grid; place-items: center; }
  .tool-context-slot { max-height: 196px; display: block; overflow-x: hidden; overflow-y: auto; padding: 5px; }
  .tool-context-slot > * + * { margin-top: 5px; }
  .symmetry-bar { width: 100%; min-width: 0; max-width: 100%; min-height: 76px; display: grid; grid-template-columns: 55px minmax(0,1fr) minmax(0,1fr) 48px; grid-template-rows: 30px 34px; gap: 4px 6px; overflow: hidden; padding: 6px 8px; }
  .symmetry-bar > strong { grid-column: 1; grid-row: 1; }
  .symmetry-angle { width: 100%; min-width: 0; max-width: 100%; grid-column: 2 / 4; grid-row: 1; overflow: hidden; }
  .symmetry-angle input[type="range"] { min-width: 0; width: 0; flex: 1 1 0; }
  .symmetry-angle output { flex: 0 0 30px; }
  .symmetry-x { grid-column: 2; grid-row: 2; }
  .symmetry-y { grid-column: 3; grid-row: 2; }
  .symmetry-bar > button { grid-column: 4; grid-row: 1 / 3; align-self: center; }
  .symmetry-bar input[type="number"] { width: 55px; height: 34px; font-size: 15px; }
  .symmetry-bar > small { display: none; }
  .brush-size-bar { width: 100%; min-width: 0; min-height: 72px; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 7px; }
  .brush-size-title { display: none; }
  .brush-live { display: none; }
  .brush-presets { flex: 0 0 auto; }
  .brush-preset { min-width: 62px; min-height: 50px; grid-template-columns: 26px 1fr; }
  .brush-preset > small { display: none; }
  .custom-brush { width: 216px; min-width: 216px; flex: 0 0 auto; grid-template-columns: 43px auto 38px 8px 38px; }
  .custom-brush input { width: 38px; height: 34px; font-size: 15px; }
  .recolor-bar { grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .recolor-title, .batch-title { display: none; }
  .recolor-chip { min-width: 52px; height: 50px; }
  .batch-bar { grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .batch-color { min-width: 46px; height: 42px; }
  .simple-tool-bar { min-height: 58px; }
  .canvas-scroller { place-items: start; padding: 18px; overscroll-behavior: contain; }
  .gesture-hint:not([hidden]) { position: fixed; left: 14px; right: 14px; bottom: calc(116px + env(safe-area-inset-bottom)); z-index: 28; display: grid; grid-template-columns: 66px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 9px 10px; border: 1px solid rgba(92,77,232,.2); border-radius: 14px; color: #4f4b5a; background: rgba(255,255,255,.96); box-shadow: 0 12px 32px rgba(36,30,70,.2); backdrop-filter: blur(16px); animation: gesture-hint-in .25s ease-out; }
  .gesture-hint strong, .gesture-hint small { display: block; }
  .gesture-hint strong { font-size: 11px; }
  .gesture-hint small { margin-top: 3px; color: #7c7788; font-size: 8px; line-height: 1.45; }
  .gesture-hint > button { min-width: 52px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; color: white; background: var(--purple); font-size: 9px; font-weight: 800; }
  .gesture-visual { position: relative; width: 62px; height: 48px; border-radius: 11px; background: #efedff; overflow: hidden; }
  .gesture-visual i { position: absolute; top: 10px; width: 15px; height: 30px; border: 2px solid #5c4de8; border-radius: 10px; background: white; box-shadow: 0 3px 6px rgba(92,77,232,.16); }
  .gesture-visual i:first-child { left: 11px; transform: rotate(-10deg); animation: finger-left 1.7s ease-in-out infinite; }
  .gesture-visual i:nth-child(2) { right: 11px; transform: rotate(10deg); animation: finger-right 1.7s ease-in-out infinite; }
  .gesture-visual b { position: absolute; inset: 7px 8px; border: 1px dashed rgba(92,77,232,.45); border-radius: 50%; animation: pinch-ring 1.7s ease-in-out infinite; }
  .gesture-visual span { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: #5c4de8; font-size: 12px; font-weight: 900; }
  @keyframes finger-left { 0%,100% { left: 11px; } 50% { left: 17px; } }
  @keyframes finger-right { 0%,100% { right: 11px; } 50% { right: 17px; } }
  @keyframes pinch-ring { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(.72); opacity: 1; } }
  @keyframes gesture-hint-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  #patternCanvas[data-tool="pan"] { cursor: grab; }
  #patternCanvas[data-tool="pan"].panning { cursor: grabbing; }
  .statusbar { display: grid; grid-template-columns: minmax(92px,1fr) 94px; gap: 6px; padding: 0 8px; }
  .statusbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-reference-toggle { min-width: 0; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; border: 1px solid #d8d4e4; border-radius: 8px; color: #777281; background: #f7f6f9; font-size: 9px; font-weight: 850; white-space: nowrap; }
  .mobile-reference-toggle.active { color: #0e846e; border-color: #9ed6ca; background: #edf9f6; }
  .mobile-reference-toggle:disabled { opacity: .4; }
  #coordinateStatus { display: none; }
  #autosaveStatus { display: none; }
  .mobile-model-toggle { min-width: 0; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid #cfc9ff; border-radius: 8px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 850; white-space: nowrap; }
  .mobile-model-toggle.active { color: white; border-color: var(--purple); background: var(--purple); box-shadow: 0 3px 9px rgba(92,77,232,.24); }
  .mobile-model-toggle:disabled { opacity: .4; }

  .studio-toolbar .tool[data-tool="fill"],
  .studio-toolbar .tool[data-tool="eyedropper"],
  .studio-toolbar .tool[data-tool="recolor"],
  .studio-toolbar .tool[data-tool="batch"],
  .studio-toolbar .view-group,
  .inline-custom-brush { display: none; }

  .inspector { position: static; transform: none; box-shadow: none; }
  body[data-mobile-view="palette"] .preview-section,
  body[data-mobile-view="export"] .preview-section { display: none; }
  .preview-wrap { height: 120px; }
  .preview-wrap.portrait { height: 150px; }
  .preview-wrap.landscape { height: 105px; }
  .summary-card { margin-top: 10px !important; }
  .inspector-tabs { top: 62px; margin-top: 10px; }
  body[data-mobile-view="palette"] .inspector-tabs { grid-template-columns: repeat(2,1fr); }
  body[data-mobile-view="palette"] .inspector-tabs [data-inspector-tab="export"],
  body[data-mobile-view="export"] .inspector-tabs { display: none; }
  .inspector-tabs button { height: 42px; font-size: 10px; }
  .palette-list, .materials-list { max-height: none; }
  .palette-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 6px 7px; border-color: #ece9f1; }
  .palette-main { min-height: 44px; grid-column: 1; }
  .package-map { grid-column: 2; display: block; margin: 0; padding: 0; border-top: 0; }
  .package-map label { display: none; }
  .package-settings input { height: 38px; font-size: 14px; }
  .palette-edit-color { min-width: 48px; min-height: 38px; }
  .export-button { min-height: 62px; padding: 11px; }
  .export-button strong { font-size: 12px; }
  .export-button small { font-size: 9px; }
  .materials-export { min-height: 54px; }
  .mobile-export-tip { display: block; margin: 10px 2px 0; padding: 9px; border-radius: 8px; color: #676273; background: #f4f2fb; font-size: 9px; line-height: 1.55; }

  .mobile-workspace-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; min-height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); padding: 5px 7px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid #ddd9e8; background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(36,30,70,.1); backdrop-filter: blur(14px); }
  .mobile-workspace-nav button { min-width: 0; min-height: 52px; display: grid; place-content: center; gap: 2px; border: 0; border-radius: 10px; color: #858190; background: transparent; font-size: 9px; font-weight: 750; }
  .mobile-workspace-nav button span { font-size: 18px; line-height: 1; }
  .mobile-workspace-nav button.active { color: var(--purple); background: var(--purple-soft); }
  .mobile-workspace-nav button:disabled { opacity: .35; }

  .cutout-modal { z-index: 50; align-items: stretch; padding: 0; }
  .cutout-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  .cutout-head { min-height: 60px; padding: 9px 11px; }
  .cutout-body { padding: 7px; }
  .cutout-toolbar { flex-wrap: wrap; gap: 7px; }
  .mask-tools button, .mask-actions button { min-height: 40px; }
  .mask-size { min-width: min(100%,240px); flex: 1; }
  .mask-actions { width: 100%; margin-left: 0; }
  #cutoutCanvas { max-height: 52vh; }
  .cutout-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cutout-footer button { min-height: 44px; }
  .color-editor-modal { z-index: 55; align-items: end; padding: 0; }
  .color-editor-dialog { width: 100%; max-height: 92dvh; border-radius: 15px 15px 0 0; }
  .color-editor-row { grid-template-columns: minmax(0,1fr); }
  .color-editor-field > input, .color-value > input[type="text"] { height: 44px; font-size: 16px; }
  .color-editor-dialog > footer { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
  .color-editor-dialog footer button { min-height: 44px; }
  .toast { z-index: 80; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); text-align: center; }
}

@media (hover: none) {
  .drop-zone:hover, .generate-button:hover:not(:disabled), .export-button:hover:not(:disabled) { transform: none; }
}

[hidden] { display: none !important; }

/* v0.38：桌面编辑器改为左侧工具轨，顶部色板只显示标准型号。 */
.quick-color-chip {
  min-width: 42px;
  width: 42px;
  height: 32px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 2px;
  border-radius: 7px;
}
.quick-color-chip > i {
  width: 36px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
}
.quick-color-chip > i b {
  max-width: 32px;
  overflow: hidden;
  color: var(--quick-text,#241f2e);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(255,255,255,.32),0 1px 2px rgba(0,0,0,.2);
  white-space: nowrap;
}
.quick-add-color {
  min-width: 42px;
  width: 42px;
  height: 32px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px dashed #a9a1e9;
  border-radius: 7px;
  color: var(--purple);
  background: #f8f7ff;
  font-size: 0;
  cursor: pointer;
}
.quick-add-color::before { content: "+"; font-size: 18px; font-weight: 650; line-height: 1; }
.quick-add-color:hover:not(:disabled) { border-style: solid; border-color: var(--purple); background: var(--purple-soft); }
.palette-manager-toggle { min-width: 78px; }
.palette-manager-toggle > b { display: none; }
.palette-manager-popover .materials-section { margin: 0; padding: 0; border: 0; animation: none; }
.palette-manager-popover .materials-list { max-height: min(390px,calc(100vh - 285px)); }
.palette-manager-popover .materials-export { position: sticky; bottom: 0; background: #fff; box-shadow: 0 -7px 14px rgba(255,255,255,.95); }

/* 标准色库选择器：不提供任意色盘、HEX 或自定义型号输入。 */
.color-library-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--purple),#7867ef); font-size: 19px; font-style: normal; }
.color-editor-dialog { width: min(650px,95vw); }
.color-editor-body { min-height: 360px; grid-template-rows: auto minmax(0,1fr) auto; }
.standard-color-search { height: 40px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; padding: 0 8px; border: 1px solid #d7d3e2; border-radius: 9px; background: #faf9fc; }
.standard-color-search > span { color: #837e8e; font-size: 18px; text-align: center; }
.standard-color-search input { min-width: 0; height: 100%; border: 0; outline: 0; color: #3e3948; background: transparent; font-size: 11px; }
.standard-color-grid { min-height: 0; max-height: min(430px,55vh); display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); align-content: start; gap: 6px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.standard-color-option { min-width: 0; height: 54px; display: grid; grid-template-rows: 32px auto; gap: 3px; padding: 3px; border: 1px solid #e1dee8; border-radius: 8px; color: #706b7a; background: #fff; cursor: pointer; }
.standard-color-option:hover, .standard-color-option:focus-visible { outline: none; border-color: #a99fff; background: #f5f3ff; box-shadow: 0 4px 10px rgba(62,51,139,.12); }
.standard-color-option.used { border-color: #bee1d8; background: #f3faf8; }
.standard-color-option > i { width: 100%; height: 32px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--standard-color),#000 35%); border-radius: 5px; color: var(--standard-text,#231f2b); background: var(--standard-color); font-style: normal; box-shadow: inset 1px 1px 0 rgba(255,255,255,.23); }
.standard-color-option b { max-width: 100%; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.standard-color-option small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.standard-color-empty { grid-column: 1 / -1; padding: 56px 12px; border: 1px dashed #d9d5e3; border-radius: 9px; color: #928d9b; text-align: center; font-size: 10px; }

@media (min-width: 901px) {
  body.editor-ready .studio {
    grid-template-columns: 64px minmax(0,1fr);
    grid-template-rows: 42px auto minmax(0,1fr) 26px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body.editor-ready .studio-toolbar { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; }
  body.editor-ready .editor-tool-rail {
    grid-column: 1;
    grid-row: 2 / 5;
    position: relative;
    z-index: 12;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 8px 6px;
    border-right: 1px solid #ddd9e6;
    background: rgba(255,255,255,.97);
    box-shadow: 5px 0 15px rgba(40,34,72,.045);
  }
  body.editor-ready .editor-tool-rail > .tool {
    width: 51px;
    min-width: 51px;
    height: 45px;
    display: grid;
    place-items: center;
    gap: 1px;
    padding: 4px 2px;
    border-radius: 9px;
    font-size: 11px;
  }
  body.editor-ready .editor-tool-rail > .tool span { display: block; margin: 0; line-height: 1; }
  body.editor-ready .editor-tool-rail > .tool .tool-icon { width: 24px; height: 24px; font-size: 14px; }
  body.editor-ready .editor-tool-rail > #undoButton { margin-top: auto; }
  body.editor-ready .tool-context-slot { grid-column: 2; grid-row: 2; }
  body.editor-ready .canvas-scroller { grid-column: 2; grid-row: 3; min-height: 0; }
  body.editor-ready .statusbar { grid-column: 2; grid-row: 4; align-self: stretch; min-height: 26px; height: 26px; max-height: 26px; }
  body.editor-ready .inspector-tabs { display: none; }
  body.editor-ready .inspector > [data-inspector-panel="palette"],
  body.editor-ready .inspector > [data-inspector-panel="materials"] { display: none !important; }
  body.editor-ready .inspector > [data-inspector-panel="export"] { display: block !important; margin-top: 14px; }
  body.editor-ready .quick-palette-bar { grid-template-columns: 64px minmax(0,1fr) auto; }
  body.editor-ready .palette-manager-popover { right: 0; top: calc(100% + 7px); }
  body.editor-compact .studio { grid-template-columns: 58px minmax(0,1fr); grid-template-rows: 40px auto minmax(0,1fr) 24px; }
  body.editor-compact .statusbar { min-height: 24px; height: 24px; max-height: 24px; }
  body.editor-compact .editor-tool-rail { padding: 6px 4px; }
  body.editor-compact .editor-tool-rail > .tool { width: 48px; min-width: 48px; height: 40px; font-size: 10px; }
  body.editor-compact .editor-tool-rail > .tool .tool-icon { width: 21px; height: 21px; font-size: 12px; }
  body.editor-compact .quick-palette-bar { grid-template-columns: minmax(0,1fr) auto; }
  body.editor-compact .quick-color-chip { min-width: 38px; width: 38px; height: 30px; grid-template-columns: 1fr; padding: 2px; }
  body.editor-compact .quick-color-chip > i { width: 32px; height: 24px; }
  body.editor-compact .quick-add-color { min-width: 38px; width: 38px; height: 30px; flex-basis: 38px; }
  body.editor-compact .palette-manager-toggle { min-width: 68px; width: auto; height: 30px; overflow: visible; padding: 0 6px; font-size: 8px; }
}

.mobile-preview-toggle { display: none; }
#cleanPreviewToggle { white-space: nowrap; padding-inline: 9px; }
#cleanPreviewToggle[aria-pressed="true"], .mobile-preview-toggle[aria-pressed="true"] { background: var(--purple); color: white; border-color: var(--purple); }
body.clean-preview #patternCanvas { cursor: grab !important; }
body.clean-preview #patternCanvas.panning { cursor: grabbing !important; }
body.clean-preview #brushGridCursor, body.clean-preview #symmetryAxis { display: none !important; }
@media (max-width: 900px) {
  .mobile-preview-toggle { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; color: var(--purple); background: #fff; }
  .studio { grid-template-rows: 58px auto minmax(0,1fr) 38px; }
  .statusbar { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 38px; height: 38px; max-height: 38px; }
  .statusbar #autosaveStatus { display: none; }
  .studio-toolbar { display: none; }
  .editor-tool-rail { min-height: 58px; display: flex; flex-direction: row; align-items: center; gap: 3px; overflow-x: auto; padding: 6px 8px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
  .editor-tool-rail .tool[data-tool="fill"],
  .editor-tool-rail .tool[data-tool="eyedropper"],
  .editor-tool-rail .tool[data-tool="recolor"],
  .editor-tool-rail .tool[data-tool="batch"] { display: none; }
  .palette-section .quick-add-color { width: auto; min-width: 92px; height: 34px; display: inline-grid; padding: 0 9px; border-style: solid; font-size: 9px; }
  .palette-section .quick-add-color::before { content: none; }
  .standard-color-grid { grid-template-columns: repeat(5,minmax(0,1fr)); max-height: 58dvh; }
  .color-editor-body { min-height: 0; }
}
:root { --project-dialog-width: 540px; }
.mobile-project-actions { display:none; }
@media(max-width:900px) { .mobile-project-actions { display:flex; justify-content:center; gap:24px; margin:10px 0; } .mobile-project-actions button { border:0; padding:8px; color:#655c85; background:none; } }
.generation-progress { position:fixed; z-index:10010; left:50%; bottom:max(32px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:14px 18px; max-width:calc(100vw - 24px); width:max-content; border:1px solid #dcd8f4; border-radius:16px; background:#fff; box-shadow:0 8px 40px #25203d30; font-size:14px; color:#302947; }
.generation-progress[hidden] { display:none; }
.generation-progress button { white-space:nowrap; border:1px solid #d9d3f0; border-radius:8px; padding:9px 12px; background:#f4f1ff; color:#5143c6; }
.generation-spinner { width:16px; height:16px; flex:none; border:2px solid #e4e0f5; border-top-color:#5c4de8; border-radius:50%; animation:project-spin 1s linear infinite; }
@keyframes project-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .generation-spinner { animation:none; } }
.recent-projects-dialog { width:min(var(--project-dialog-width),calc(100vw - 32px)); max-height:80dvh; margin:auto; padding:22px; border:1px solid #dfdbea; border-radius:16px; color:#292438; background:#fff; }
.recent-projects-dialog::backdrop { background:#19172e70; }
.recent-projects-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.recent-projects-dialog h2 { font-size:18px; margin:0; }
.recent-projects-dialog p { font-size:12px; color:#797382; line-height:1.6; }
.recent-projects-dialog button { border:1px solid #dcd6ef; background:#f7f5ff; color:#5143c6; padding:9px 12px; border-radius:8px; cursor:pointer; }
.recent-projects-dialog header button { font-size:20px; }
.recent-projects-button { width:100%; border:0; background:none; color:#655c85; padding:12px 8px; cursor:pointer; }
.recent-project-row { border-top:1px solid #eeeaf4; padding:14px 0; }
.recent-project-row > div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.recent-project-row strong { overflow-wrap:anywhere; font-size:14px; }
.recent-project-row small { display:block; margin-top:4px; font-size:11px; color:#797382; }
.recent-project-row summary { margin-top:10px; font-size:12px; color:#655c85; cursor:pointer; }
.recent-project-row details button { display:block; margin:8px 0; font-size:12px; }