/* 豆店通 theme — pink candy UI layered over the restored app. */
:root {
  --ddt-ink: #56163a;
  --ddt-ink-2: #7b2b51;
  --ddt-muted: #a06682;
  --ddt-pink: #ff2f87;
  --ddt-pink-deep: #d91a69;
  --ddt-pink-soft: #ff8dc1;
  --ddt-pink-pale: #ffe4f1;
  --ddt-line: #ffd0e4;
  --ddt-card: #fffafd;
  --ddt-shadow: 0 16px 40px rgba(219, 34, 116, .13);
  --admin-ink: #56163a;
  --admin-muted: #a06682;
  --admin-line: #ffd0e4;
  --admin-mint: #ff2f87;
  --admin-mint-dark: #c21760;
  --admin-paper: #fff5fa;
  --admin-warm: #ff9b52;
  font-family: "Nunito", "Arial Rounded MT Bold", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ddt-ink);
  background: #fff2f9;
}

html, body { min-height: 100%; }

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 255, 255, .95) 0 5%, transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(255, 156, 202, .38), transparent 25%),
    radial-gradient(circle at 6% 92%, rgba(255, 194, 221, .42), transparent 28%),
    radial-gradient(rgba(255, 255, 255, .7) 1.3px, transparent 1.4px),
    linear-gradient(158deg, #fff8fc 0%, #ffeaf4 46%, #ffdcec 100%) !important;
  background-size: auto, auto, auto, 26px 26px, auto !important;
  background-attachment: fixed !important;
  color: var(--ddt-ink) !important;
}

#root, .app-shell { background: transparent !important; }
.app-shell { color: var(--ddt-ink); }

::selection { background: #ffb3d4; color: #56163a; }
* { scrollbar-color: #ffa8cc #fff4fa; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #fff4fa; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffa6cc, #ff5ca2); border-radius: 999px; border: 2px solid #fff4fa; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid rgba(255, 47, 135, .28) !important;
  outline-offset: 2px;
}

/* Header */
.app-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 242, 249, .94)) !important;
  border-bottom: 1px solid var(--ddt-line) !important;
  box-shadow: 0 10px 30px rgba(224, 38, 120, .09) !important;
  backdrop-filter: blur(18px);
}
.brand-group { gap: 12px; }
.brand-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ddt-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}
.brand-name::before {
  content: "";
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  background: url("/assets/brand/doudiantong-mark.png?v=brand-original-20261027") center / cover no-repeat, linear-gradient(145deg, #ff8dc1, #ff2f87);
  box-shadow: 0 7px 16px rgba(255, 47, 135, .26), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.header-divider { background: #ffc2dc !important; }
.document-name { color: #742849 !important; font-weight: 800 !important; }
.save-state { color: #b34b79 !important; }
.save-state.is-dirty { color: var(--ddt-pink-deep) !important; }
.save-state.is-dirty::before { background: var(--ddt-pink) !important; box-shadow: 0 0 0 4px rgba(255, 47, 135, .12); }
.header-tip { color: #995273 !important; }
.header-tip strong { color: var(--ddt-pink-deep) !important; }

.account-status-button {
  background: #fff6fb !important;
  border: 1px solid #ffc9e0 !important;
  color: #682346 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(255, 61, 137, .08) !important;
}
.account-status-button:hover { border-color: #ff9bc6 !important; box-shadow: 0 9px 22px rgba(255, 47, 135, .14) !important; }
.account-status-button.is-login-cta {
  background: linear-gradient(155deg, #ff7ab8, #ff2f87) !important;
  border-color: #ff2f87 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .3), inset 0 2px 0 rgba(255, 255, 255, .34) !important;
}
.account-status-button.is-login-cta:hover { filter: brightness(1.04) saturate(1.04); }
.account-status-button.is-login-cta small { color: rgba(255, 255, 255, .9) !important; }
.account-status-button.is-active { background: #fff0f8 !important; border-color: #ffb4d3 !important; color: #b0155f !important; }
.my-works-entry {
  background: linear-gradient(145deg, #fff8fc, #ffeaf4) !important;
  border: 1px solid #ffc9e0 !important;
  color: #b0155f !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(255, 61, 137, .08) !important;
}
.my-works-entry:hover { border-color: #ff9bc6 !important; color: var(--ddt-pink-deep) !important; }

/* Buttons */
.button {
  border-radius: 999px !important;
  font-weight: 800 !important;
  color: var(--ddt-ink-2) !important;
  min-height: 40px;
}
.button.secondary, .button.custom-create-button, .button.guest-entry {
  background: #fff !important;
  border: 1px solid #ffc9e0 !important;
  color: #7b2b51 !important;
  box-shadow: 0 6px 16px rgba(255, 61, 137, .08) !important;
}
.button.secondary:hover, .button.custom-create-button:hover, .button.guest-entry:hover {
  background: #fff2f9 !important;
  border-color: #ff95c1 !important;
  color: var(--ddt-pink-deep) !important;
  box-shadow: 0 9px 22px rgba(255, 47, 135, .14) !important;
}
.button.primary {
  background: linear-gradient(160deg, #ff78b7 0%, #ff2f87 58%, #e7166e 100%) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .28), inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
.button.primary:hover { background: linear-gradient(160deg, #ff8cc3, #ff3d91 58%, #ec1975) !important; transform: translateY(-2px); }
.button.cloud-save-button {
  background: linear-gradient(180deg, #fff, #ffe8f3) !important;
  border: 1px solid #ffb3d3 !important;
  color: #c01762 !important;
  box-shadow: 0 8px 20px rgba(255, 47, 135, .13), inset 0 1px 0 #fff !important;
}
.button.cloud-save-button:hover { background: #ffe1ef !important; border-color: #ff8fbf !important; color: var(--ddt-pink-deep) !important; }
.button.mosaic-entry {
  background: linear-gradient(180deg, #fff, #ffe5f1) !important;
  border: 1px solid #ffb3d3 !important;
  color: #c01762 !important;
  box-shadow: 0 7px 18px rgba(255, 47, 135, .12) !important;
}
.button.mosaic-entry:hover { background: #ffd9ea !important; border-color: #ff8fbf !important; color: var(--ddt-pink-deep) !important; }
.button.soft {
  background: linear-gradient(180deg, #fff, #ffeaf4) !important;
  border: 1px solid #ffc9e0 !important;
  color: #b0155f !important;
  box-shadow: 0 6px 16px rgba(255, 61, 137, .08) !important;
}
.button.soft:hover { background: #ffe1ef !important; border-color: #ff95c1 !important; }
.button:disabled, button:disabled { opacity: .55 !important; }

/* Announcement */
.site-announcement {
  background: linear-gradient(135deg, #fff0f7 0%, #ffe0ee 100%) !important;
  border: 1px solid #ffb8d5 !important;
  border-left: 5px solid var(--ddt-pink) !important;
  color: #6b2345 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(255, 61, 137, .12) !important;
}
.site-announcement-icon {
  background: linear-gradient(145deg, #ff93c7, #ff2f87) !important;
  border-radius: 13px !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(255, 47, 135, .25), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.site-announcement strong { color: #7a1d4d !important; }
.site-announcement p { color: #8f4267 !important; }
.site-announcement > button { color: #c21b62 !important; background: rgba(255, 255, 255, .62) !important; border-radius: 50% !important; }
.site-announcement > button:hover { background: #fff !important; color: var(--ddt-pink-deep) !important; }

/* Left tool rail */
.tool-rail {
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%) !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--ddt-shadow) !important;
}
.tool-button {
  color: #9a4a70 !important;
  border-radius: 15px !important;
  transition: .18s ease;
}
.tool-button:hover { background: #fff0f7 !important; color: var(--ddt-pink-deep) !important; }
.tool-button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 47, 135, .28), inset 0 2px 0 rgba(255, 255, 255, .38) !important;
}
.tool-button.is-active svg { color: #fff !important; }

/* Workspace */
.view-tabs {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(221, 31, 115, .1) !important;
}
.view-tabs button { color: #9b5576 !important; border-radius: 999px !important; font-weight: 800 !important; }
.view-tabs button:hover { color: var(--ddt-pink-deep) !important; background: #fff0f7 !important; }
.view-tabs button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(255, 47, 135, .26), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
.view-tabs button.is-focus-tab { color: var(--ddt-pink-deep) !important; }
.canvas-stage {
  background-color: #fff8fc !important;
  background-image: radial-gradient(#ffc6de 1.2px, transparent 1.3px) !important;
  background-size: 20px 20px !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 14px 34px rgba(224, 38, 120, .1) !important;
}
.pattern-canvas {
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(146, 20, 77, .14), 0 0 0 4px #fff, 0 0 0 5px #ffd0e4 !important;
}
.floating-zoom {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 999px !important;
  color: #8c3d62 !important;
  box-shadow: 0 10px 26px rgba(221, 31, 115, .14) !important;
}
.floating-zoom button { color: #8c3d62 !important; border-radius: 50% !important; }
.floating-zoom button:hover { background: #fff0f7 !important; color: var(--ddt-pink-deep) !important; }
.zoom-value { color: #a04a72 !important; }

.disabled-colors-hint {
  background: linear-gradient(145deg, #fff0f7, #ffe3ef) !important;
  border: 1px solid #ffc2dc !important;
  border-radius: 18px !important;
  color: #8d3d63 !important;
  box-shadow: 0 10px 26px rgba(255, 61, 137, .1) !important;
}
.disabled-colors-hint strong { color: #7a1f4b !important; }
.disabled-colors-hint-open {
  background: #fff !important;
  border: 1px solid #ffb3d4 !important;
  color: #c01762 !important;
  border-radius: 999px !important;
}
.disabled-colors-hint-open:hover { background: #ffeef7 !important; }
.disabled-colors-hint-close { color: #c26a92 !important; border-radius: 50% !important; }
.disabled-colors-hint-close:hover { background: #fff !important; color: var(--ddt-pink-deep) !important; }

.canvas-controls {
  background: linear-gradient(180deg, #fff, #fff8fc) !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(221, 31, 115, .1) !important;
}
.canvas-controls button { color: #8f4367 !important; border-radius: 12px !important; }
.canvas-controls button:hover { background: #fff0f7 !important; color: var(--ddt-pink-deep) !important; }
.canvas-controls button.is-active { background: #ffe3f0 !important; color: var(--ddt-pink-deep) !important; box-shadow: inset 0 0 0 1px #ffb3d4 !important; }
.control-divider { background: #ffd6e7 !important; }
.clear-canvas-button { color: #c23a62 !important; }
.grid-color-settings summary { color: #8f4367 !important; }
.grid-color-popover { background: #fffafd !important; border: 1px solid var(--ddt-line) !important; border-radius: 16px !important; box-shadow: var(--ddt-shadow) !important; }

/* Inspector */
.inspector {
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%) !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--ddt-shadow) !important;
}
.inspector-section { border-bottom: 1px dashed #ffd6e7 !important; }
.inspector-section:last-child { border-bottom: 0 !important; }
.section-heading h2 { color: #5a1238 !important; font-weight: 900 !important; letter-spacing: .01em; }
.section-heading span { color: #b06a8a !important; }
.field-label, .field-label label { color: #7b2b51 !important; font-weight: 800 !important; }
.dimension-hint, .inspector small { color: #a06682 !important; }
.dimension-input-field span { color: #a06682 !important; }
.dimension-input-field input, .color-limit-number {
  background: #fff7fb !important;
  border: 1.5px solid #ffd0e5 !important;
  color: #5a1238 !important;
  border-radius: 11px !important;
}
.dimension-input-field input:focus, .color-limit-number:focus {
  background: #fff !important;
  border-color: #ff4d9c !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 156, .13) !important;
}
.bead-size-select, select {
  background-color: #fff7fb !important;
  border: 1.5px solid #ffd0e5 !important;
  color: #5a1238 !important;
  border-radius: 11px !important;
}
.bead-size-select:focus, select:focus { border-color: #ff4d9c !important; box-shadow: 0 0 0 4px rgba(255, 77, 156, .13) !important; }
option { background: #fff; color: #5a1238; }
input[type="range"], .range-control { accent-color: var(--ddt-pink) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ddt-pink) !important; }
input[type="text"]:not(.dimension-input-field input), input[type="number"], input[type="password"], input[type="email"], textarea {
  background: #fff7fb !important;
  border: 1.5px solid #ffd0e5 !important;
  color: #5a1238 !important;
  border-radius: 11px !important;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #ff4d9c !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 156, .13) !important;
}
.auto-color-option {
  background: #fff7fb !important;
  border: 1px solid #ffd6e7 !important;
  border-radius: 14px !important;
}
.auto-color-option.is-enabled {
  background: #ffeaf4 !important;
  border-color: #ffa6cb !important;
  box-shadow: inset 0 0 0 1px rgba(255, 47, 135, .06);
}
.auto-color-option strong { color: #641b3f !important; }
.auto-color-option small { color: #a06682 !important; }
.auto-color-option > input { accent-color: var(--ddt-pink) !important; }
.board-preset-trigger {
  background: #fff0f7 !important;
  border: 1px solid #ffb9d6 !important;
  color: #b0155f !important;
  border-radius: 999px !important;
}
.board-preset-trigger:hover { background: #ffe1ef !important; border-color: #ff8fbf !important; }
.board-preset-popover, .palette-sort-popover, .color-limit-popover {
  background: #fffafd !important;
  border: 1px solid var(--ddt-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--ddt-shadow) !important;
}
.edge-strength-control small { color: #a06682 !important; }
.edge-strength-value input { background: #fff7fb !important; border-color: #ffd0e5 !important; color: #5a1238 !important; }
.outline-entry-actions button, .similar-merge-trigger {
  background: #fff0f7 !important;
  border-color: #ffc2dc !important;
  color: #b0155f !important;
}
.outline-entry-actions button:hover, .similar-merge-trigger:hover { background: #ffe1ef !important; }

/* Palette */
.current-color-card {
  background: linear-gradient(145deg, #fff0f7, #ffe4f0) !important;
  border: 1px solid #ffc2dc !important;
  border-radius: 16px !important;
  color: #682346 !important;
}
.current-color-card.is-empty { background: #fffafd !important; border-color: #ffd6e7 !important; }
.current-color-swatch { border-radius: 11px !important; border-color: rgba(140, 30, 80, .18) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8) !important; }
.current-color-actions button { color: #b0155f !important; border-radius: 999px !important; }
.palette-row { color: #7b2b51 !important; border-radius: 10px !important; }
.palette-row:hover, .palette-row.is-active { background: #ffeaf4 !important; }
.palette-row.is-active { box-shadow: inset 0 0 0 1px #ffb9d6; }
.palette-row strong, .palette-row b { color: #551337 !important; }
.palette-total { border-top: 1px dashed #ffd6e7 !important; color: #8b4368 !important; }
.palette-total strong { color: #b0155f !important; }
.section-heading > .palette-heading-actions { color: #a06682 !important; }

/* Export panel */
.export-mini {
  background: #fff !important;
  border: 1px solid #ffd0e5 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(219, 34, 116, .08);
}
.export-actions .export-button.primary {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border-color: #ff2f87 !important;
  color: #fff !important;
}
.export-actions .export-legend-button, .export-actions .export-assembly-button {
  background: #fff0f7 !important;
  border: 1px solid #ffc2dc !important;
  color: #b0155f !important;
}
.export-actions .export-legend-button:hover, .export-actions .export-assembly-button:hover { background: #ffe1ef !important; }
.export-section.is-guest-locked .export-button:disabled { background: #ffeaf4 !important; color: #b06a8a !important; }

/* Dialog surfaces */
[class*="backdrop"] {
  background: rgba(82, 14, 48, .3) !important;
  backdrop-filter: blur(8px) !important;
}
.account-dialog, .upload-editor-dialog, .similar-merge-dialog, .more-tools-dialog, .clear-canvas-dialog, .color-picker-backdrop > section, .export-confirm-backdrop > section {
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%) !important;
  border: 1.5px solid #ffd0e5 !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(102, 13, 57, .25) !important;
  color: var(--ddt-ink) !important;
}
.account-dialog-backdrop, .upload-editor-backdrop { background: rgba(82, 14, 48, .34) !important; }
.account-dialog-heading h2, .upload-editor-heading h2, .similar-merge-heading h2, .color-picker-heading h2, .export-confirm-title {
  color: #5a1238 !important;
}
.account-dialog-heading p, .upload-editor-heading > div p, .similar-merge-heading p, .color-picker-heading p, .admin-eyebrow {
  color: var(--ddt-pink) !important;
}
.account-dialog-close, .upload-editor-dialog .upload-editor-heading + button, .color-picker-heading > button {
  background: #fff0f7 !important;
  border-color: #ffc2dc !important;
  color: #b0155f !important;
  border-radius: 50% !important;
}
.account-dialog-close:hover, .color-picker-heading > button:hover { background: #ffe1ef !important; }

/* Upload flow */
.upload-editor-heading p { color: var(--ddt-pink) !important; }
.upload-clarity-tip { color: #9b4d70 !important; }
.upload-mode-tabs button {
  background: #fff7fb !important;
  border: 1px solid #ffd6e7 !important;
  color: #8c3d62 !important;
  border-radius: 14px !important;
}
.upload-mode-tabs button:hover { border-color: #ffa6cb !important; }
.upload-mode-tabs button.is-active {
  background: linear-gradient(145deg, #ffe5f1, #ffd0e5) !important;
  border-color: #ff8fbf !important;
  color: #b0155f !important;
  box-shadow: 0 0 0 2px rgba(255, 47, 135, .1) !important;
}
.upload-size-recommendations button {
  background: #fff7fb !important;
  border: 1px solid #ffd6e7 !important;
  color: #7b2b51 !important;
  border-radius: 12px !important;
}
.upload-size-recommendations button:hover { border-color: #ffa6cb !important; }
.upload-size-recommendations button.is-active {
  background: #ffe4f1 !important;
  border-color: #ff5ca2 !important;
  color: #b0155f !important;
}
.upload-size-recommendations button em { background: var(--ddt-pink) !important; color: #fff !important; }
.upload-settings-panel { background: transparent !important; }
.upload-editor-dialog .field-label, .upload-settings-panel .field-label { color: #7b2b51 !important; }
.upload-editor-dialog .dimension-input-field input { background: #fff7fb !important; border-color: #ffd0e5 !important; }
.upload-default-button { color: #b0155f !important; background: #fff0f7 !important; border-color: #ffc2dc !important; }
.upload-handmade-section .handmade-upload-entry {
  background: #fff7fb !important;
  border: 1px dashed #ffc2dc !important;
  color: #7b2b51 !important;
}
.upload-handmade-section .handmade-upload-entry.is-enabled { background: #ffeaf4 !important; border-color: #ff8fbf !important; }
.upload-background-options .background-removal-option {
  background: #fff7fb !important;
  border: 1px solid #ffd6e7 !important;
  border-radius: 14px !important;
}
.upload-background-options .background-removal-option.is-disabled { opacity: .62; }
.upload-background-options .background-removal-option strong { color: #641b3f !important; }
.upload-format-note { color: #a06682 !important; }
.upload-editor-footer { background: linear-gradient(180deg, #fff, #fff6fb) !important; border-top: 1px solid #ffd0e5 !important; }
.upload-editor-footer .upload-confirm-button {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .28), inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
.upload-confirm-button:hover { filter: brightness(1.04); }
.upload-preview-stage {
  background-color: #fff8fc !important;
  background-image: radial-gradient(#ffc6de 1.2px, transparent 1.3px) !important;
  background-size: 20px 20px !important;
  border-radius: 18px !important;
}
.free-crop-box { border-color: #ff2f87 !important; box-shadow: 0 0 0 9999px rgba(84, 15, 50, .36) !important; }
.crop-handle { background: #ff2f87 !important; border-color: #fff !important; }
.crop-mode-label { background: rgba(255, 255, 255, .9) !important; color: #b0155f !important; }
.upload-crop-toolbar button { background: #fff0f7 !important; border-color: #ffc2dc !important; color: #b0155f !important; }
.upload-crop-toolbar button[aria-pressed="true"] { background: #ffe1ef !important; color: var(--ddt-pink-deep) !important; }
.upload-reference-entry { background: #fff0f7 !important; border-color: #ffc2dc !important; color: #b0155f !important; }
.subject-auto-panel { background: #fff7fb !important; border-color: #ffd6e7 !important; border-radius: 16px !important; }
.subject-thumbnail { border-color: #ffc2dc !important; border-radius: 14px !important; }
.subject-status { color: #8f4367 !important; }
.subject-local-note { color: #a06682 !important; }
.board-assembly-list button {
  background: #fff7fb !important;
  border-color: #ffd6e7 !important;
  color: #7b2b51 !important;
}
.board-assembly-list button.is-selected { background: #ffe4f1 !important; border-color: #ff5ca2 !important; color: #b0155f !important; }
.detail-priority-option {
  border-color: #ffb9d6 !important;
  background: #fff7fb !important;
}
.detail-priority-option.is-enabled { background: #ffe5f1 !important; border-color: #ff5ca2 !important; }
.detail-priority-badge { background: var(--ddt-pink) !important; }

/* Account dialog */
.account-submit {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .28), inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
.account-submit:hover { filter: brightness(1.04); }
.account-text-button { color: #b0155f !important; }
.account-mode-switch { background: #fff0f7 !important; border: 1px solid #ffd6e7 !important; border-radius: 999px !important; }
.account-mode-switch button { color: #9b4d70 !important; border-radius: 999px !important; }
.account-mode-switch button.is-active { background: linear-gradient(160deg, #ff7ab8, #ff2f87) !important; color: #fff !important; }
.account-referral-note { background: #fff0f7 !important; border-color: #ffd6e7 !important; color: #8f4367 !important; border-radius: 14px !important; }
.account-message { background: #ffeaf4 !important; color: #a0155c !important; }
.account-unavailable { background: #fff4e9 !important; color: #9b5a25 !important; }
.password-toggle { color: #b0155f !important; }
.account-dialog .account-form input { background: #fff7fb !important; border-color: #ffd0e5 !important; }
.account-dialog .account-form input:focus { border-color: #ff4d9c !important; box-shadow: 0 0 0 4px rgba(255, 77, 156, .13) !important; }

/* Color picker / merge dialogs */
.color-picker-backdrop > section { border-radius: 26px !important; }
.color-picker-heading p, .similar-merge-heading p { color: var(--ddt-pink) !important; }
.color-picker-heading h2, .similar-merge-heading h2 { color: #5a1238 !important; }
.similar-merge-tabs { background: #fff0f7 !important; border: 1px solid #ffd6e7 !important; border-radius: 999px !important; }
.similar-merge-tabs button { color: #9b4d70 !important; border-radius: 999px !important; }
.similar-merge-tabs button.is-active { background: #fff !important; color: #b0155f !important; box-shadow: 0 3px 8px rgba(219, 34, 116, .12) !important; }
.similar-merge-threshold input { accent-color: var(--ddt-pink) !important; }
.color-picker-backdrop button.primary, .similar-merge-dialog button.primary { background: linear-gradient(160deg, #ff78b7, #ff2f87) !important; border-color: #ff2f87 !important; color: #fff !important; }

/* Generic danger/confirm dialogs */
.clear-canvas-dialog { background: linear-gradient(180deg, #fff, #fff7fb) !important; }
.clear-canvas-icon { background: #ffe8f0 !important; color: var(--ddt-pink) !important; border-radius: 16px !important; }
.export-confirm-backdrop .export-confirm-title, .export-confirm-backdrop h2 { color: #5a1238 !important; }
.export-confirm-backdrop .export-confirm-actions .button.primary { background: linear-gradient(160deg, #ff78b7, #ff2f87) !important; border-color: #ff2f87 !important; color: #fff !important; }
.toast {
  background: linear-gradient(160deg, #6b1a43, #4d1230) !important;
  border: 1px solid #ff7fb5 !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(84, 15, 50, .3) !important;
}

/* Guest / access gate */
.guest-trial-banner {
  background: linear-gradient(90deg, #fff0f7, #ffe3ef) !important;
  border: 1px solid #ffc2dc !important;
  border-radius: 18px !important;
  color: #7b2b51 !important;
}
.guest-trial-banner li svg { color: var(--ddt-pink) !important; }
.guest-header-promo {
  background: linear-gradient(135deg, #fff0f7, #ffe1ef) !important;
  border: 1px solid #ffc2dc !important;
  border-radius: 16px !important;
}
.guest-header-promo strong { color: #b0155f !important; }
.access-gate {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .9), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(255, 155, 202, .5), transparent 32%),
    linear-gradient(155deg, #fff8fc, #ffdcec) !important;
}
.access-gate-card { background: #fff !important; border: 1px solid #ffd0e5 !important; border-radius: 28px !important; box-shadow: var(--ddt-shadow) !important; }
.access-gate-icon { background: #ffe4f1 !important; color: var(--ddt-pink) !important; border-radius: 24px !important; box-shadow: 0 12px 26px rgba(255, 47, 135, .18) !important; }
.access-eyebrow { color: var(--ddt-pink) !important; }
.access-gate h1 { color: #5a1238 !important; }
.access-gate h1 + p, .access-gate ul + p { color: #8f5b74 !important; }
.access-gate-action {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(255, 47, 135, .28), inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
.access-gate-guest { background: #fff0f7 !important; border-color: #ffc2dc !important; color: #b0155f !important; border-radius: 999px !important; }
.access-gate ul { border-top-color: #ffd6e7 !important; }

/* Admin */
.admin-shell, .admin-login { background: linear-gradient(155deg, #fff8fc, #ffeaf4) !important; color: var(--ddt-ink) !important; }
.admin-shell .admin-panel, .admin-login-card, .admin-analytics-card, .admin-code-panel {
  background: #fffafd !important;
  border-color: #ffd6e7 !important;
  border-radius: 20px !important;
}
.admin-eyebrow { color: var(--ddt-pink) !important; }
.admin-shell h1, .admin-shell h2, .admin-login h1 { color: #5a1238 !important; }
.admin-shell .admin-analytics-link, .admin-shell .admin-code-secret button { background: #fff0f7 !important; border-color: #ffc2dc !important; color: #b0155f !important; }
.admin-shell .button.primary { background: linear-gradient(160deg, #ff78b7, #ff2f87) !important; border-color: #ff2f87 !important; color: #fff !important; }

@media (max-width: 820px) {
  .brand-name::before { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .brand-name { font-size: 17px; }
  .account-dialog, .upload-editor-dialog, .similar-merge-dialog, .more-tools-dialog, .clear-canvas-dialog, .color-picker-backdrop > section, .export-confirm-backdrop > section {
    border-radius: 22px !important;
  }
  .button { min-height: 38px; }
  .canvas-controls, .view-tabs { border-radius: 16px !important; }
  .inspector { border-radius: 20px !important; }
  .pattern-canvas { border-radius: 12px !important; }
}

/* Remaining teal accents */
.edge-strength-control {
  background: linear-gradient(135deg, #fff7fb, #fff0f7) !important;
  border: 1px solid #ffd6e7 !important;
  border-radius: 14px !important;
}
.edge-strength-heading strong,
.edge-strength-value,
.edge-strength-value span,
.edge-strength-value em {
  color: #8f4367 !important;
}
.edge-strength-range, .edge-strength-range:focus { accent-color: var(--ddt-pink) !important; }
.outline-unify-trigger {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .26), inset 0 2px 0 rgba(255, 255, 255, .3) !important;
}
.outline-unify-trigger:hover { filter: brightness(1.04); }
.focus-color-button {
  background: #fff0f7 !important;
  border: 1px solid #ffc2dc !important;
  color: #b0155f !important;
  border-radius: 999px !important;
}
.focus-color-button:hover { background: #ffe1ef !important; border-color: #ff9bc6 !important; }
.mirror-export-option strong { color: #641b3f !important; }
.floating-zoom small, .zoom-value small { color: #a06682 !important; }
.page-scroll-rail-track { background: rgba(255, 47, 135, .18) !important; }
.page-scroll-rail-thumb { background: linear-gradient(180deg, #ff9bc6, #ff2f87) !important; box-shadow: 0 0 0 2px #fff3f9 !important; }
.export-progress-note {
  color: #b0155f !important;
  background: #fff0f7 !important;
  border-color: #ffc2dc !important;
}

.outline-entry-actions .outline-unify-trigger,
button.outline-unify-trigger {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .26), inset 0 2px 0 rgba(255, 255, 255, .3) !important;
}

/* Dialog and mobile leftovers */
.upload-editor-dialog .upload-replace-actions .upload-replace-button {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .26), inset 0 2px 0 rgba(255, 255, 255, .3) !important;
}
.upload-editor-dialog .upload-replace-actions .upload-replace-button:hover { filter: brightness(1.04); }
.upload-editor-dialog .upload-clarity-tip {
  background: #fff0f7 !important;
  border: 1px solid #ffd6e7 !important;
  color: #8f4367 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
}
.account-dialog .account-dialog-heading > span {
  background: linear-gradient(145deg, #ffe4f1, #ffd0e5) !important;
  color: var(--ddt-pink) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(255, 47, 135, .14), inset 0 1px 0 #fff !important;
}
.account-dialog .account-dialog-heading > span svg { color: var(--ddt-pink) !important; }
.workbench .tool-rail .tool-button.tool-rail-toggle {
  background: linear-gradient(180deg, #fff, #ffeaf4) !important;
  border: 1px solid #ffc2dc !important;
  color: #b0155f !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 18px rgba(255, 61, 137, .1) !important;
}
.workbench .tool-rail .tool-button.tool-rail-toggle:hover { background: #ffe1ef !important; border-color: #ff9bc6 !important; }

/* Brand mark in account/access surfaces */
.account-dialog .account-dialog-heading > span,
.access-gate .access-gate-icon {
  background: url("/assets/brand/doudiantong-mark.png?v=brand-original-20261027") center / cover no-repeat !important;
  color: transparent !important;
  overflow: hidden;
}
.account-dialog .account-dialog-heading > span svg,
.access-gate .access-gate-icon svg { display: none !important; }

/* Requested cleanup: announcement, document name, tip and three header actions. */
.site-announcement,
.header-tip,
.brand-group .header-divider,
.brand-group .document-name,
.header-actions > button:nth-of-type(1),
.header-actions > button.custom-create-button,
.header-actions > button:nth-of-type(4) {
  display: none !important;
}

/* White type and icons on saturated theme-pink surfaces */
.export-confirm-dialog .export-confirm-icon {
  background: linear-gradient(145deg, #ff8dc1, #ff2f87) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 47, 135, .22), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.export-confirm-dialog .export-confirm-icon svg { color: #fff !important; }
.export-confirm-dialog .export-mirror-option {
  background: linear-gradient(135deg, #ff5ca2, #ff2f87) !important;
  border-color: #ff2f87 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255, 47, 135, .22) !important;
}
.export-confirm-dialog .export-mirror-option span,
.export-confirm-dialog .export-mirror-option strong,
.export-confirm-dialog .export-mirror-option small,
.export-confirm-dialog .export-mirror-option:hover span,
.export-confirm-dialog .export-mirror-option:hover strong {
  color: #fff !important;
}
.export-confirm-dialog .export-mirror-option small { color: rgba(255, 255, 255, .86) !important; }
.export-confirm-dialog .export-mirror-option input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .16) !important;
  accent-color: #fff !important;
  display: grid !important;
  place-content: center !important;
}
.export-confirm-dialog .export-mirror-option input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #ff2f87;
  border-bottom: 2px solid #ff2f87;
  transform: rotate(-45deg) translate(-1px, -1px);
  opacity: 0;
}
.export-confirm-dialog .export-mirror-option input[type="checkbox"]:checked {
  background: #fff !important;
  border-color: #fff !important;
}
.export-confirm-dialog .export-mirror-option input[type="checkbox"]:checked::before { opacity: 1; }

.grid-color-popover button {
  background: linear-gradient(160deg, #ff78b7, #ff2f87) !important;
  border: 1px solid #ff2f87 !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.grid-color-popover button:hover { filter: brightness(1.04); }

/* Header cleanup: hide save state and put the workbench toolbar on the title bar. */
.brand-group .save-state { display: none !important; }

@media (min-width: 1180px) {
  .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    min-height: 72px !important;
    padding: 8px 18px !important;
    gap: 10px 16px !important;
  }
  .app-header > .brand-group { grid-column: 1 !important; grid-row: 1 !important; }
  .app-header > .header-account { grid-column: 3 !important; grid-row: 1 !important; }
  .app-header > .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0 0 14px !important;
    border-left: 1px solid #ffd0e4;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app-header > .header-actions::-webkit-scrollbar { display: none; }
  .app-header > .header-actions .button { flex: 0 0 auto; }
}

/* Export confirmation card polish */
.export-confirm-dialog { border-color: #ffd0e4 !important; }
.export-confirm-dialog .export-confirm-grid > div {
  background: #fffafd !important;
  border-color: #ffd0e4 !important;
}
.export-confirm-dialog header p { color: var(--ddt-pink) !important; }

/* Requested cleanup: remove the extra "更多" tool entry. */
.tool-rail > .rail-spacer + .tool-button { display: none !important; }

/* Selected brush sizes on theme-pink backgrounds */
.stroke-size-group button.is-active,
.stroke-size-group button.is-selected {
  color: #fff !important;
}

/* Requested cleanup: remove the remaining two header actions. */
.header-actions > button:nth-of-type(8),
.header-actions > button.mosaic-entry {
  display: none !important;
}

/* Requested cleanup: remove the tool-rail handmade entry. */
.tool-rail .tool-button.handmade-tool { display: none !important; }

/* Collapsible palette list */
.palette-list.is-collapsed > .palette-row:nth-child(n+4) { display: none !important; }
.palette-collapse-toggle {
  width: 100%;
  min-height: 32px;
  margin: 7px 0 3px;
  padding: 0 12px;
  border: 1px solid #ffc9e0;
  border-radius: 999px;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.palette-collapse-toggle:hover { background: #ffe1ef; border-color: #ff9bc6; }

/* Ironing style cards: readable black text, white text on the selected pink card. */
.ironing-style-options button:not(.is-active) strong,
.ironing-style-options button:not(.is-active) small {
  color: #000 !important;
}
.ironing-style-options button.is-active strong {
  color: #fff !important;
}
.ironing-style-options button.is-active small {
  color: rgba(255, 255, 255, .88) !important;
}

/* Focus-mode visibility toggles on theme-pink backgrounds */
.focus-toolbar .focus-visibility-toggle.is-active,
.focus-toolbar .focus-code-toggle.is-active {
  color: #fff !important;
}

/* Compact login CTA */
.header-account .account-status-area { min-width: 0 !important; }
.header-account .account-status-button.is-login-cta {
  min-width: 104px !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 7px !important;
  border-radius: 999px !important;
}
.header-account .account-status-button.is-login-cta > svg {
  width: 20px !important;
  height: 20px !important;
}
.header-account .account-status-button.is-login-cta small { display: none !important; }
.header-account .account-status-button.is-login-cta .account-status-copy strong { font-size: 12px !important; }

/* Tool rail moved into the inspector as a three-column grid */
.tool-grid-panel {
  padding: 12px 14px 14px;
  border-bottom: 1px solid #ffd6e7;
  background: linear-gradient(180deg, #fff9fd, #fff4fa);
}
.tool-grid-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  color: #5a1238;
  font-size: 13px;
  font-weight: 900;
}
.tool-grid-heading::before {
  content: "";
  width: 5px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8dc1, #ff2f87);
}
.tool-grid-panel .tool-rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: static !important;
}
.tool-grid-panel .tool-button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 7px 3px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid #ffd6e7 !important;
  border-radius: 14px !important;
  background: #fffafd !important;
  color: #9a4a70 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  box-shadow: 0 4px 10px rgba(255, 61, 137, .06) !important;
}
.tool-grid-panel .tool-button:hover {
  background: #fff0f7 !important;
  color: #b0155f !important;
  border-color: #ffb3d4 !important;
}
.tool-grid-panel .tool-button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87) !important;
  border-color: #ff2f87 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(255, 47, 135, .24), inset 0 2px 0 rgba(255, 255, 255, .32) !important;
}
.tool-grid-panel .tool-button.is-active .tool-icon { color: #fff !important; }
.tool-grid-panel .tool-button .tool-icon { width: 20px !important; height: 20px !important; }
.tool-grid-panel .tool-button > span {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}
.tool-grid-panel .rail-spacer,
.tool-grid-panel .tool-rail-toggle { display: none !important; }

@media (min-width: 821px) {
  .workbench { grid-template-columns: minmax(0, 1fr) 310px !important; }
}
.app-shell.is-focus-mode .workbench { grid-template-columns: minmax(0, 1fr) !important; }

@media (min-width: 821px) {
  .workbench > .workspace { grid-column: 1 !important; }
  .workbench > .inspector { grid-column: 2 !important; }
}

/* Save-result dialog: three equal actions in one row */
.image-save-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
.image-save-actions > * { min-width: 0 !important; }
.image-save-actions .image-save-file {
  grid-column: auto !important;
  color: #fff !important;
  border-color: #ff2f87 !important;
}
.image-save-actions .image-save-file:hover { filter: brightness(1.04); }
.image-save-actions > button,
.image-save-actions .image-save-file { white-space: normal; text-align: center; }

/* Save-result dialog: only two normal-width actions remain */
.image-save-actions {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}
.image-save-actions .image-save-file { display: none !important; }
.image-save-actions > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
}

/* Compact help dots for long inspector descriptions */
.xd-help-text { display: none !important; }
.help-dot {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ffb9d6;
  border-radius: 50%;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  z-index: 2;
}
.help-dot:hover, .help-dot:focus-visible { background: #ffe1ef; border-color: #ff8fbf; }
.has-help-dot { position: relative; }
.rare-color-option.has-help-dot, .mirror-export-option.has-help-dot { padding-right: 34px !important; }
.has-help-dot > .help-dot { position: absolute; top: 8px; right: 8px; }
.edge-strength-heading.has-help-inline, .section-heading.has-help-inline { gap: 6px; }
.has-help-inline > .help-dot { position: static; margin-left: 3px; flex: 0 0 auto; }

/* Upload dialog: compact hints and removed entries */
.upload-editor-dialog .upload-handmade-section,
.upload-editor-dialog .upload-clarity-tip { display: none !important; }
.upload-editor-dialog .auto-color-option.has-help-dot,
.upload-editor-dialog .background-removal-option.has-help-dot,
.upload-editor-dialog .subject-removal-option.has-help-dot,
.upload-editor-dialog .upload-reference-entry.has-help-dot {
  padding-right: 34px !important;
}
.upload-editor-dialog .upload-mode-tabs button.has-help-dot { padding-right: 30px !important; }

/* Upload dialog compaction and single-choice mode tabs */
.upload-editor-dialog .upload-format-note { display: none !important; }
.upload-editor-dialog .detail-priority-badge { display: none !important; }

.upload-editor-dialog .upload-mode-tabs button {
  position: relative;
  padding-left: 30px !important;
}
.upload-editor-dialog .upload-mode-tabs button::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid #ffb3d4;
  border-radius: 50%;
  background: #fff;
}
.upload-editor-dialog .upload-mode-tabs button.is-active::before {
  border-color: #ff2f87;
  background: radial-gradient(circle, #ff2f87 0 4px, #fff 5px);
  box-shadow: 0 0 0 3px rgba(255, 47, 135, .12);
}

.upload-editor-dialog .upload-size-recommendations {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.upload-editor-dialog .upload-size-recommendations button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative;
  min-height: 58px !important;
  padding: 7px 8px !important;
  gap: 2px !important;
}
.upload-editor-dialog .upload-size-recommendations button strong { display: none !important; }
.upload-editor-dialog .upload-size-recommendations button > span { font-size: 10px !important; line-height: 1.25; }
.upload-editor-dialog .upload-size-recommendations button em {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 1px 4px !important;
  font-size: 7px !important;
  line-height: 1.2;
}

.upload-editor-dialog .auto-color-option {
  padding: 7px 9px !important;
  border-radius: 11px !important;
}
.upload-editor-dialog .auto-color-option strong { font-size: 11px !important; }
.upload-editor-dialog .auto-color-option > input { width: 15px !important; height: 15px !important; }
.upload-editor-dialog .edge-strength-control {
  margin-top: 6px !important;
  padding: 7px 9px !important;
  gap: 4px !important;
  border-radius: 11px !important;
}
.upload-editor-dialog .upload-default-button {
  min-height: 32px !important;
  margin-top: 6px !important;
}

/* Compact single-choice upload mode buttons */
.upload-editor-dialog .upload-mode-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 6px !important;
}
.upload-editor-dialog .upload-mode-tabs button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 34px !important;
  padding: 5px 30px 5px 27px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  text-align: center !important;
}
.upload-editor-dialog .upload-mode-tabs button::before {
  top: 50% !important;
  left: 9px !important;
  transform: translateY(-50%) !important;
}
.upload-editor-dialog .upload-mode-tabs button > .help-dot {
  top: 50% !important;
  right: 7px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
}

.upload-editor-dialog .subject-auto-panel.has-help-dot {
  position: relative;
  padding-right: 34px !important;
}

/* Three compact color options in one row */
.upload-editor-dialog .upload-color-options-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 7px 22px 7px 8px !important;
  border-radius: 11px !important;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option > input {
  width: 15px !important;
  height: 15px !important;
  margin-top: 1px !important;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option > span { min-width: 0; }
.upload-editor-dialog .upload-color-options-row .auto-color-option strong {
  font-size: 10px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word;
}
.upload-editor-dialog .upload-color-options-row .help-dot {
  top: 6px !important;
  right: 6px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  font-size: 10px !important;
}

/* Halve the three compact color-option cards */
.upload-editor-dialog .upload-color-options-row .auto-color-option {
  min-height: 32px !important;
  padding: 5px 22px 5px 7px !important;
  grid-template-columns: 15px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option > input {
  width: 14px !important;
  height: 14px !important;
  margin-top: 0 !important;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option strong {
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
.upload-editor-dialog .upload-color-options-row .auto-color-option .help-dot {
  top: 50% !important;
  right: 6px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  font-size: 9px !important;
  transform: translateY(-50%) !important;
}

/* Halve the one-row board-size buttons */
.upload-editor-dialog .upload-size-recommendations button {
  min-height: 30px !important;
  padding: 4px 6px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
.upload-editor-dialog .upload-size-recommendations button > span {
  font-size: 9px !important;
  line-height: 1.2 !important;
}
.upload-editor-dialog .upload-size-recommendations button em {
  top: 50% !important;
  right: 4px !important;
  transform: translateY(-50%) !important;
  padding: 1px 3px !important;
  font-size: 6.5px !important;
}

/* Four compact tools per row */
.tool-grid-panel .tool-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.tool-grid-panel .tool-button {
  min-height: 38px !important;
  padding: 3px 2px !important;
  gap: 2px !important;
  border-radius: 10px !important;
  font-size: 8.5px !important;
  line-height: 1.15 !important;
}
.tool-grid-panel .tool-button .tool-icon {
  width: 15px !important;
  height: 15px !important;
}
.tool-grid-panel .tool-button > span {
  font-size: 8.5px !important;
  line-height: 1.15 !important;
}

/* Keep four-column tool labels on one line and slightly larger */
.tool-grid-panel .tool-button > span {
  width: 100% !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  letter-spacing: -.1px;
}

/* Style presets in the upload settings */
.style-picker-section {
  padding: 12px 14px;
  border-bottom: 1px dashed #ffd6e7;
  background: linear-gradient(180deg, #fff9fd, #fff5fa);
}
.style-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.style-picker-heading strong {
  color: #5a1238;
  font-size: 13px;
  font-weight: 900;
}
.style-picker-heading small {
  color: #a06682;
  font-size: 9px;
  line-height: 1.3;
}
.style-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.style-options button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 3px;
  border: 1px solid #ffd6e7;
  border-radius: 999px;
  background: #fffafd;
  color: #9a4a70;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.style-options button:hover {
  background: #fff0f7;
  border-color: #ffb3d4;
  color: #b0155f;
}
.style-options button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87);
  border-color: #ff2f87;
  color: #fff;
  box-shadow: 0 7px 16px rgba(255, 47, 135, .23), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.style-hint {
  margin: 7px 0 0;
  color: #a06682;
  font-size: 9px;
  line-height: 1.4;
}

/* Free trial registration and account */
.membership-recharge, .redeem-form, .referral-code-card, .recharge-contact-backdrop, .account-mode-switch, .account-referral-note { display: none !important; }
.free-auth-panel { margin-top: 18px; }
.free-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #fff0f7;
  border: 1px solid #ffd6e7;
  border-radius: 999px;
}
.free-auth-tabs button {
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9b4d70;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.free-auth-tabs button:hover { color: #b0155f; }
.free-auth-tabs button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87);
  color: #fff;
  box-shadow: 0 7px 16px rgba(255, 47, 135, .2), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.free-auth-form { margin-top: 16px; display: grid; gap: 13px; }
.free-auth-form label { display: grid; gap: 6px; color: #7b2b51; font-size: 12px; font-weight: 800; }
.free-auth-form input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  color: #4d1230;
  background: #fff7fb;
  border: 1px solid #ffd0e5;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
}
.free-auth-form input:focus {
  outline: none;
  background: #fff;
  border-color: #ff4d9c;
  box-shadow: 0 0 0 4px rgba(255, 77, 156, .13);
}
.free-auth-subtabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #fff7fb;
  border: 1px solid #ffd6e7;
  border-radius: 12px;
}
.free-auth-subtabs button {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a15b7c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.free-auth-subtabs button.is-active {
  background: #fff;
  color: #b0155f;
  box-shadow: 0 3px 10px rgba(219, 34, 116, .12);
}
.free-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.free-code-button {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #ffb3d3;
  border-radius: 12px;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.free-code-button:hover:not(:disabled) { background: #ffe1ef; border-color: #ff8fbf; }
.free-code-button:disabled { opacity: .55; cursor: wait; }
.free-auth-notice {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff0f7;
  color: #8f4367;
  font-size: 11px;
  line-height: 1.5;
}
.free-code-demo {
  margin: 0;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed #ff8fbf;
  border-radius: 10px;
  background: #ffe5f1;
  color: #8a1c51;
  font-size: 12px;
}
.free-code-demo strong { color: #d11268; font-size: 18px; letter-spacing: .12em; }
.free-auth-note { margin: 0; color: #a06682; text-align: center; font-size: 11px; line-height: 1.55; }
.free-account-panel .account-summary.is-active {
  background: linear-gradient(145deg, #ffeaf4, #ffd6e7);
  border-color: #ffb3d3;
  color: #5a1238;
}
.free-account-panel .account-summary.is-active > span { background: #fff; color: #ff2f87; }
.free-account-panel .account-summary strong { color: #5a1238; }
.free-account-panel .account-summary small { color: #a15b7c; }
.free-trial-card {
  padding: 16px;
  border: 1px solid #ffd0e5;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff8fc, #ffeaf4);
}
.free-trial-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: linear-gradient(160deg, #ff7ab8, #ff2f87);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.free-trial-card h3 { margin: 9px 0 6px; color: #5a1238; font-size: 16px; }
.free-trial-card p { margin: 0; color: #8f4367; font-size: 12px; line-height: 1.65; }
.free-trial-card ul { margin: 12px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.free-trial-card li { display: flex; align-items: center; gap: 6px; color: #7b2b51; font-size: 12px; }
.free-trial-card li svg { width: 15px; height: 15px; color: #ff2f87; }
.free-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.free-account-actions .account-submit, .free-account-actions .account-logout {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.free-account-actions .account-logout {
  border: 1px solid #ffc2dc;
  border-radius: 999px;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.free-account-actions .account-logout:hover { background: #ffe1ef; border-color: #ff9bc6; }

/* Security question and password recovery */
.free-auth-form select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: #4d1230;
  background: #fff7fb;
  border: 1px solid #ffd0e5;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.free-auth-form select:focus {
  background: #fff;
  border-color: #ff4d9c;
  box-shadow: 0 0 0 4px rgba(255, 77, 156, .13);
}
.free-auth-forgot-row { display: flex; justify-content: flex-end; margin-top: -3px; }
.free-auth-inline-link {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #b0155f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.free-auth-inline-link:hover { color: #e01770; text-decoration: underline; }
.free-auth-back {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b0155f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.free-auth-back:hover { color: #e01770; }
.free-auth-recover-heading { display: grid; gap: 3px; padding: 2px 0; }
.free-auth-recover-heading strong { color: #5a1238; font-size: 15px; }
.free-auth-recover-heading span { color: #a06682; font-size: 11px; line-height: 1.5; }
.free-security-question {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  background: #fff0f7;
  border: 1px solid #ffd6e7;
  border-radius: 12px;
}
.free-security-question small { color: #a15b7c; font-size: 10px; font-weight: 800; }
.free-security-question strong { color: #7b2b51; font-size: 12px; line-height: 1.5; }
@media (max-width: 820px) {
  .free-auth-form input, .free-auth-form select { font-size: 16px; }
}

/* Style effect preview */
.style-preview-card {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #ffd6e7;
  border-radius: 14px;
  background: #fffafd;
}
.style-preview-thumb {
  position: relative;
  width: 100%;
  height: 132px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #ffe1ef;
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(255, 224, 239, .55) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(-45deg, rgba(255, 224, 239, .55) 25%, transparent 25%) 0 7px / 14px 14px,
    #fff;
  cursor: zoom-in;
}
.style-preview-thumb:hover { border-color: #ff9bc6; }
.style-preview-thumb:focus-visible { outline: 3px solid rgba(255, 77, 156, .24); outline-offset: 2px; }
.style-preview-thumb canvas {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: contain;
  image-rendering: pixelated;
}
.style-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(255, 247, 251, .9);
  color: #a15b7c;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
}
.style-preview-card.is-ready .style-preview-loading { display: none; }
.style-preview-thumb .style-preview-expand {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 47, 135, .93);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(255, 47, 135, .24);
}
.style-preview-meta {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #a06682;
  font-size: 9px;
  line-height: 1.4;
}
.style-preview-meta span { min-width: 0; }
.style-preview-meta strong { color: #b0155f; }
.style-preview-meta small { flex: 0 0 auto; color: #a06682; }

/* Enlarged style comparison */
.style-preview-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(82, 14, 48, .44);
  backdrop-filter: blur(8px);
}
.style-preview-modal {
  width: min(920px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
  border: 1.5px solid #ffd0e5;
  border-radius: 26px;
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%);
  box-shadow: 0 30px 80px rgba(102, 13, 57, .32);
  color: #4d1230;
}
.style-preview-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-preview-modal-head p { margin: 0 0 3px; color: var(--ddt-pink); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.style-preview-modal-head h2 { margin: 0; color: #5a1238; font-size: 22px; letter-spacing: -.03em; }
.style-preview-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ffc2dc;
  border-radius: 50%;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.style-preview-modal-close:hover { background: #ffe1ef; }
.style-preview-view-tabs {
  margin-top: 14px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid #ffd6e7;
  border-radius: 999px;
  background: #fff0f7;
}
.style-preview-view-tabs button {
  min-width: 96px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9b4d70;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.style-preview-view-tabs button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 47, 135, .2);
}
.style-preview-stage {
  position: relative;
  min-height: 300px;
  margin-top: 12px;
  padding: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ffd6e7;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .9), transparent 35%),
    #fff7fb;
}
.style-preview-stage canvas,
.style-preview-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 600px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(102, 13, 57, .08);
}
.style-preview-stage canvas { image-rendering: pixelated; }
.style-preview-stage [hidden],
.style-preview-stage-loading[hidden] { display: none !important; }
.style-preview-stage-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: #a15b7c;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.style-preview-modal-foot {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: #a06682;
  font-size: 10px;
  line-height: 1.55;
}
.style-preview-modal-foot strong { color: #b0155f; }
.style-preview-modal-foot small { max-width: 520px; }

@media (max-width: 820px) {
  .style-preview-thumb { height: 112px; }
  .style-preview-thumb canvas { height: 112px; }
  .style-preview-meta { align-items: flex-start; font-size: 10px; }
  .style-preview-modal-backdrop { padding: 10px; }
  .style-preview-modal { max-height: calc(100vh - 20px); padding: 14px; border-radius: 20px; }
  .style-preview-modal-head h2 { font-size: 18px; }
  .style-preview-view-tabs { display: flex; }
  .style-preview-view-tabs button { flex: 1; min-width: 0; }
  .style-preview-stage { min-height: 220px; padding: 10px; }
  .style-preview-stage canvas,
  .style-preview-stage img { height: auto; max-height: min(50vh, 440px); }
  .style-preview-stage-loading { min-height: 200px; }
  .style-preview-modal-foot { display: grid; gap: 4px; }
}

/* One-click experience account */
.free-demo-login {
  margin-top: 14px;
  padding-top: 12px;
  display: grid;
  gap: 7px;
  border-top: 1px dashed #ffd6e7;
  text-align: center;
}
.free-demo-login > span {
  color: #a06682;
  font-size: 10px;
  font-weight: 800;
}
.free-demo-button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #ffb3d3;
  border-radius: 999px;
  background: #fff0f7;
  color: #b0155f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.free-demo-button:hover:not(:disabled) { background: #ffe1ef; border-color: #ff8fbf; }
.free-demo-button:disabled { opacity: .55; cursor: wait; }
.free-demo-button svg { width: 18px; height: 18px; }
.free-demo-login small { color: #a06682; font-size: 9px; line-height: 1.5; }
.guest-header-promo { display: none !important; }

/* Portrait resolution guidance */
.style-resolution-note {
  margin: 7px 0 0;
  padding: 8px 10px;
  border: 1px solid #ffd7ad;
  border-radius: 10px;
  background: #fff4e9;
  color: #8a5724;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}
.style-resolution-note[hidden] { display: none !important; }
.style-resolution-note { display: grid; gap: 7px; justify-items: start; }
.style-resolution-action {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #ffb3d3;
  border-radius: 999px;
  background: #fff;
  color: #b0155f;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.style-resolution-action:hover { background: #fff0f7; border-color: #ff8fbf; }

/* Board resolution slider */
.board-resolution-control {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #ffd6e7;
  border-radius: 14px;
  background: #fff8fc;
}
.board-resolution-heading {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-resolution-heading label { color: #7b2b51; font-size: 11px; font-weight: 800; }
.board-resolution-heading span { color: #b0155f; font-size: 11px; font-weight: 900; white-space: nowrap; }
.board-resolution-range { width: 100%; margin: 0; accent-color: var(--ddt-pink); }
.board-resolution-control small { display: block; margin-top: 5px; color: #a06682; font-size: 9px; line-height: 1.45; }
.board-resolution-control.is-busy { opacity: .65; }

/* Board settings accordion */
.inspector-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #ffd6e7;
}
.inspector-group-toggle {
  width: 100%;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.inspector-group-toggle > span:first-child { min-width: 0; display: grid; gap: 1px; }
.inspector-group-toggle strong { color: #5a1238; font-size: 12px; font-weight: 900; }
.inspector-group-toggle small { color: #a06682; font-size: 9px; line-height: 1.35; }
.inspector-group-toggle:hover strong { color: #b0155f; }
.inspector-group-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-right: 3px;
  border-right: 2px solid #b0155f;
  border-bottom: 2px solid #b0155f;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.inspector-group.is-open .inspector-group-chevron { transform: rotate(-135deg); }
.inspector-group-body { padding-top: 8px; }
.inspector-group-body[hidden] { display: none !important; }
.inspector-group-apply {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ffd6e7;
}

/* The primary download lives in the top bar; keep the two extra exports balanced. */
@media (min-width: 1180px) {
  .export-actions .export-assembly-button { grid-column: auto !important; }
}

/* Extra export formats inside the confirmation dialog */
.export-more-formats {
  margin-top: 2px;
  padding-top: 10px;
  display: grid;
  gap: 7px;
  border-top: 1px dashed #ffd6e7;
}
.export-more-formats > span { color: #a06682; font-size: 10px; font-weight: 800; }
.export-more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-more-actions .button { min-height: 38px; padding-inline: 8px; font-size: 11px; }
@media (max-width: 520px) {
  .export-more-actions { grid-template-columns: 1fr; }
}
.inspector-group-apply small {
  display: block;
  margin-bottom: 6px;
  color: #a06682;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

/* Tabbed board settings */
.inspector-tabs {
  margin-top: 10px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid #ffd6e7;
  border-radius: 12px;
  background: #fff0f7;
}
.inspector-tabs button {
  min-width: 0;
  height: 32px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9b4d70;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.inspector-tabs button.is-active {
  background: linear-gradient(160deg, #ff7ab8, #ff2f87);
  color: #fff;
  box-shadow: 0 5px 12px rgba(255, 47, 135, .22);
}
.inspector-tab-panel { padding-top: 10px; }
.inspector-tab-panel[hidden] { display: none !important; }
.inspector-tab-save { margin-top: 12px; }

/* Current brush color */
.stroke-options { flex-wrap: wrap; }
.stroke-current-color {
  min-height: 31px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ffc2dc;
  border-radius: 999px;
  background: #fff0f7;
  color: #8f4367;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.stroke-current-color i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid rgba(102, 13, 57, .16);
  border-radius: 5px;
  background: #fff;
}
.stroke-current-color strong { color: #b0155f; font-size: 12px; font-weight: 900; }

.stroke-current-color {
  appearance: none;
  flex: 0 0 auto;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.stroke-current-color:hover { background: #ffe1ef; border-color: #ff8fbf; }
.stroke-current-color:focus-visible { outline: 3px solid rgba(255, 77, 156, .24); outline-offset: 2px; }