.palette-page .palette-intro { max-width: 980px; }
.palette-page .palette-intro h1 { font-size: clamp(36px, 6vw, 64px); }
.palette-page .palette-intro .lead { font-size: 18px; }
.palette-page .palette-intro .page-meta { margin-top: 16px; }
.palette-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: var(--space-6); }
.palette-panel { min-width: 0; padding: clamp(18px, 3vw, 36px); border: 2px solid var(--line); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow-small); }
.palette-panel h2 { margin-bottom: 12px; font-size: clamp(25px, 4vw, 32px); line-height: 1.3; }
.palette-panel h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.4; }
.palette-panel p { margin-bottom: 16px; }
.palette-panel label { font-weight: 800; }
.palette-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.palette-panel fieldset[disabled] .palette-actions { opacity: .65; }
.palette-panel textarea, .palette-panel select { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 8px; padding: 12px; border: 2px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); font: inherit; font-size: 16px; line-height: 1.65; }
.palette-panel textarea { resize: vertical; overflow-wrap: anywhere; }
.palette-panel textarea[aria-invalid='true'] { border-color: #9f2636; }
.palette-panel :is(textarea, select):focus-visible { outline: 4px solid var(--purple-deep); outline-offset: 4px; }
.palette-panel .button { font-family: inherit; word-break: normal; overflow-wrap: anywhere; }
.palette-panel .button[disabled] { cursor: wait; }
.palette-hint, .palette-panel .palette-hint { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.palette-error { color: #9f2636; font-weight: 800; }
.palette-error:empty { margin: 0; }
.palette-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.palette-status { margin: 20px 0 0; color: var(--ink-soft); font-size: 15px; }
.palette-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 20px 0 28px; list-style: none; }
.palette-swatches li { display: grid; gap: 8px; padding: 10px; border: 1px solid #b9adc6; border-radius: 12px; background: var(--paper); }
.palette-swatches li > span:last-child { font: 700 14px/1.6 'Nunito', 'Noto Sans TC', sans-serif; overflow-wrap: anywhere; }
.palette-swatch-color { display: block; height: 64px; border: 1px solid rgba(39, 22, 55, .35); border-radius: 7px; }
.palette-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.palette-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.palette-results { display: grid; align-content: start; gap: 12px; padding: 20px; border: 2px solid var(--line); border-radius: 16px; background: var(--lavender); }
.palette-results p { margin: 0; }
.palette-ratio { display: block; font: 700 40px/1.2 'Fredoka', 'Noto Sans TC', sans-serif; }
.palette-results dl { display: grid; gap: 12px; margin: 0; }
.palette-results dt { font-weight: 800; }
.palette-results dd { margin: 2px 0 0; font-size: 15px; }
.palette-preview { margin-top: 22px; padding: 24px; border: 2px solid var(--line); border-radius: 16px; background: #f4eddd; color: #283044; }
.palette-preview p { color: inherit; }
.palette-preview .palette-preview-large { font-size: 24px; font-weight: 400; }
.palette-preview .palette-preview-normal { margin-bottom: 0; font-size: 16px; font-weight: 400; }
.palette-copy-fallback { margin-top: 20px; }
.palette-panel [hidden] { display: none; }
.palette-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.palette-guide-grid > section { padding: 24px; border: 2px solid var(--line); border-radius: var(--radius-medium); background: var(--surface); }
.palette-guide-grid h2 { margin-bottom: 14px; font-size: 25px; line-height: 1.3; }
.palette-guide-grid p, .palette-guide-grid li { font-size: 16px; overflow-wrap: anywhere; }
.palette-guide-grid p:last-child { margin-bottom: 0; }
.palette-guide-grid ol, .palette-guide-grid ul { margin: 0; padding-left: 24px; }
.palette-guide-grid li + li { margin-top: 12px; }
.palette-guide-grid a { color: var(--purple-deep); font-weight: 700; text-underline-offset: 4px; }
.palette-formula { padding: 14px; background: var(--lavender); border-radius: 10px; }
.palette-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.photo-workbench { scroll-margin-top: 24px; }
.photo-workbench input { display: block; max-width: 100%; min-height: 48px; margin-top: 8px; padding: 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.photo-workbench input[type='number'] { width: 100%; min-width: 0; }
.photo-workbench input[type='file'] { width: 100%; min-width: 0; }
.photo-workbench input:focus-visible, #photo-canvas:focus-visible { outline: 4px solid var(--purple-deep); outline-offset: 4px; }
.photo-workbench input::file-selector-button { margin: 0 8px 4px 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--lavender); color: var(--ink); font: inherit; }
.photo-workbench fieldset + fieldset { margin-top: 24px; }
.photo-preview { margin: 24px 0; }
.photo-canvas-wrap { position: relative; display: grid; justify-items: center; }
.photo-canvas-inner { position: relative; display: inline-grid; max-width: 100%; }
#photo-canvas { display: block; width: auto; max-width: 100%; max-height: 600px; height: auto; border-radius: 10px; cursor: crosshair; }
.photo-marker { position: absolute; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #283044; transform: translate(-50%, -50%); pointer-events: none; }
.photo-preview figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.photo-sample-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.photo-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.photo-picked .palette-swatch-color { width: 64px; height: 48px; }
.photo-picked strong { font-size: 20px; overflow-wrap: anywhere; }
.photo-workbench fieldset:disabled { opacity: .65; }
.photo-workbench a { color: var(--purple-deep); font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 820px) {
  .palette-compare-grid, .palette-guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .palette-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palette-selectors { grid-template-columns: minmax(0, 1fr); }
  .palette-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .palette-preview, .palette-results, .palette-guide-grid > section { padding: 18px; }
}