.palette-page { padding-block: 40px 80px; }
.palette-page .breadcrumb { margin-bottom: 18px; color: #69766f; }
.palette-shell :is(button, input, select, textarea) { font-family: inherit; }
.palette-shell a { color: var(--tools-accent); text-decoration-color: currentColor; }
.palette-shell { overflow: hidden; border: 1px solid #d6e1dc; border-top: 4px solid var(--tools-accent); border-radius: 18px; background: #fff; }
.palette-intro { padding: 34px 38px 27px; }
.palette-eyebrow { margin: 0; color: var(--tools-accent); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.palette-intro h1 { margin: 10px 0 14px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.035em; color: #2e433c; }
.palette-intro > p:not(.palette-eyebrow) { max-width: 720px; margin: 0; color: #53675f; line-height: 1.7; }
.palette-intro .palette-privacy { margin-top: 8px !important; color: #507b72 !important; font-size: .82rem; }
.palette-workspace { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); border-top: 1px solid #d6e1dc; }
.palette-editor-panel, .palette-preview-panel { min-width: 0; padding: 26px 28px; }
.palette-editor-panel { border-right: 1px solid #d6e1dc; }
.palette-preview-panel { background: #fafcfb; }
.palette-shell h2 { margin: 0 0 18px; color: #2e433c; font-size: 1.15rem; }
.palette-field-label { display: block; margin-bottom: 6px; color: #496458; font-size: .8rem; font-weight: 600; }
.palette-shell select, .palette-shell input[type="text"] { min-width: 0; min-height: 39px; border: 1px solid #b8cec2; border-radius: 6px; padding: 8px 10px; background: #fff; color: #2d493d; }
.palette-shell select { max-width: 100%; font-size: .85rem; }
.palette-shell input[type="text"] { width: 100%; font-size: .85rem; }
.palette-shell input[aria-invalid="true"] { border-color: #ab434b; }
.palette-help { margin: 10px 0 17px; color: #64776f; font-size: .8rem; line-height: 1.6; }
.palette-swatch-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.palette-swatch-list li { display: grid; gap: 4px; width: 73px; color: #466254; font-size: .68rem; }
.palette-swatch-list .palette-library-swatch { display: block; height: 26px; border: 1px solid #d4ded8; border-radius: 4px; }
.palette-suggestion-swatches { max-height: 240px; overflow: auto; }
.palette-source { margin: 0 0 15px; color: #6a7d74; font-size: .73rem; line-height: 1.6; overflow-wrap: anywhere; }
.palette-reference-library { margin: 18px 0 25px; padding: 14px; border: 1px solid #d6e1dc; border-radius: 7px; background: #fafcfb; }
.palette-reference-library summary { color: #466254; font-size: .8rem; font-weight: 600; cursor: pointer; }
.palette-reference-card { padding-block: 15px; border-top: 1px solid #d6e1dc; }
.palette-reference-card h3 { margin: 0; color: #466254; font-size: .85rem; }
.palette-reference-card .palette-help { margin-bottom: 9px; }
.palette-reference-card .palette-source { margin-bottom: 10px; }
.palette-column-labels { display: grid; grid-template-columns: minmax(0, 1fr) 164px; padding-right: 66px; margin: 22px 0 7px; color: #64776f; font-size: .75rem; }
.palette-color-row { display: grid; grid-template-columns: minmax(0, 1fr) 38px 98px 60px; align-items: center; gap: 8px; margin-bottom: 9px; }
.palette-color-row input[type="color"] { width: 38px; height: 38px; padding: 2px; border: 1px solid #b8cec2; border-radius: 5px; background: #fff; }
.palette-hex-input { font-family: Consolas, "Courier New", monospace; }
.palette-shell button { min-height: 40px; border: 1px solid var(--tools-accent); border-radius: 6px; padding: 8px 15px; background: var(--tools-accent); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.palette-shell button.palette-secondary { background: #fff; color: var(--tools-accent); }
.palette-color-row button.palette-remove { border: 0; padding: 5px 2px; background: transparent; color: #65796f; font-size: .73rem; font-weight: 400; }
.palette-shell button:disabled { opacity: .45; cursor: not-allowed; }
.palette-shell button:hover:not(:disabled) { filter: brightness(.92); }
.palette-shell :is(button, input, select, textarea):focus-visible { outline: 2px solid #254d41; outline-offset: 2px; }
.palette-preview-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.palette-preview-heading h2 { margin-bottom: 15px; }
.palette-summary { color: #64776f; font-size: .75rem; }
.palette-preview-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.palette-view-buttons { display: flex; gap: 6px; }
.palette-view-buttons button { min-height: 36px; padding: 7px 11px; background: #fff; color: #4c6b5d; border-color: #b8cec2; font-size: .77rem; }
.palette-view-buttons button[aria-pressed="true"] { color: #fff; background: var(--tools-accent); border-color: var(--tools-accent); }
.palette-check { display: flex; align-items: center; gap: 6px; color: #516b5e; font-size: .77rem; }
.palette-check input { accent-color: var(--tools-accent); }
.palette-preview { width: 100%; min-height: 280px; margin-top: 21px; }
.palette-preview svg { display: block; width: 100%; max-width: 100%; font-family: inherit; }
.palette-grid-line { stroke: #e1e9e4; stroke-width: 1; }
.palette-network-edge { stroke: #c9d7cf; stroke-width: 1.4; }
.palette-axis-text { fill: #687b70; font-size: 12px; }
.palette-preview-label { fill: #334c40; font-size: 12px; }
.palette-node-number { font-size: 15px; font-weight: 600; }
.palette-preview-empty { padding-top: 45px; color: #64776f; font-size: .86rem; line-height: 1.6; }
.palette-legend { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 15px 0; padding: 0; list-style: none; }
.palette-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: #466254; font-size: .78rem; overflow-wrap: anywhere; }
.palette-legend-swatch { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 2px; }
.palette-export { padding: 25px 38px 30px; border-top: 1px solid #d6e1dc; }
.palette-export-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.palette-export-header h2 { margin: 0; }
.palette-export-header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.palette-export-header .palette-field-label { margin: 0; }
.palette-output { display: block; width: 100%; min-height: 154px; max-height: 320px; padding: 15px; border: 1px solid #c8d8cf; border-radius: 8px; background: #f8fbf9; color: #314b3e; font: .8rem/1.6 Consolas, "Courier New", monospace; resize: vertical; white-space: pre; overflow: auto; }
.palette-export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; }
.palette-status { flex: 1 1 260px; min-height: 1.4em; margin: 0; color: #45685c; font-size: .8rem; line-height: 1.6; }
.palette-status[data-error="true"] { color: #9c3e45; }
.palette-note { padding: 16px 38px; border-top: 1px solid #d6e1dc; background: #fafcfb; }
.palette-note p { margin: 0 0 7px; color: #667b6f; font-size: .77rem; line-height: 1.65; }
.palette-note p:last-child { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mapping-import-panel, .mapping-apply-panel { padding: 26px 38px; border-top: 1px solid #d6e1dc; }
.mapping-textarea { display: block; width: 100%; min-height: 100px; padding: 12px; border: 1px solid #b8cec2; border-radius: 7px; background: #f8fbf9; color: #314b3e; font: .82rem/1.6 Consolas, monospace; resize: vertical; white-space: pre; overflow: auto; }
.mapping-import-panel input[type="file"], .mapping-apply-panel input[type="file"] { display: block; max-width: 100%; margin-bottom: 17px; font-size: .85rem; }
#mapping-name { margin-bottom: 18px; }
.mapping-fingerprint { overflow-wrap: anywhere; color: #527266; font: .73rem/1.6 Consolas, monospace; }
.mapping-warnings { color: #866523; font-size: .8rem; line-height: 1.6; }
.mapping-column-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 15px 0; }
.mapping-replace { line-height: 1.6; }
.mapping-table-scroll { max-width: 100%; margin-top: 15px; overflow: auto; }
.mapping-table-scroll table { min-width: 100%; border-collapse: collapse; font-size: .8rem; white-space: nowrap; }
.mapping-table-scroll :is(th, td) { border: 1px solid #d6e1dc; padding: 9px 12px; text-align: left; }
.mapping-table-scroll th { background: #e8f0eb; }
.palette-stage-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0 38px 23px; font-size: .8rem; }
.palette-stage-nav a { display: flex; align-items: center; min-height: 36px; text-underline-offset: 4px; }
.palette-selection-panel { padding: 26px 38px; border-top: 1px solid #d6e1dc; }
.palette-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; }
.palette-shell button.palette-choice-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 15px; text-align: left; border: 1px solid #d6e1dc; background: #fff; color: #2e433c; }
.palette-shell button.palette-choice-card[aria-pressed="true"] { border-color: var(--tools-accent); box-shadow: inset 0 0 0 1px var(--tools-accent); background: #f2f8f5; }
.palette-choice-name { min-height: 2.8em; font-size: .82rem; line-height: 1.4; }
.palette-choice-strip { display: flex; height: 30px; overflow: hidden; border-radius: 5px; border: 1px solid #d6e1dc; }
.palette-choice-strip > span { flex: 1 1 0; min-width: 0; }
.palette-choice-count { color: #64776f; font-size: .72rem; font-weight: 400; }
.palette-choice-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.palette-swatch-details { margin-block: 18px; }
.palette-shell :is(.palette-swatch-details, .mapping-import-details, .palette-advanced) > summary { color: #466254; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.6; }
.mapping-import-details { padding: 12px 14px; margin-bottom: 20px; background: #fafcfb; border: 1px solid #d6e1dc; border-radius: 7px; }
.mapping-import-details .mapping-import-panel { padding: 18px 0 0; border: 0; }
.mapping-import-panel h3 { margin: 0; font-size: .9rem; color: #466254; }
.palette-advanced { border-top: 1px solid #d6e1dc; }
.palette-advanced > summary { padding: 22px 38px; }
.palette-advanced .mapping-apply-panel { border: 0; padding-top: 0; }
.palette-selection-panel, #palette-workspace, #palette-export-heading { scroll-margin-top: 100px; }
@media (max-width: 1000px) {
  .palette-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palette-workspace { grid-template-columns: 1fr; }
  .palette-editor-panel { border-right: 0; border-bottom: 1px solid #d6e1dc; }
  .palette-preview-panel { padding-inline: 35px; }
}
@media (max-width: 620px) {
  .palette-stage-nav { gap: 4px 18px; padding: 0 20px 18px; }
  .palette-selection-panel { padding: 22px 18px; }
  .palette-choice-grid { gap: 10px; }
  .palette-shell button.palette-choice-card { padding: 12px; }
  .palette-advanced > summary { padding: 22px 18px; }
  .palette-shell :is(.palette-swatch-details, .mapping-import-details) > summary { min-height: 44px; display: list-item; }
  .palette-page { padding-block: 22px 45px; }
  .palette-intro { padding: 25px 20px; }
  .palette-editor-panel, .palette-preview-panel, .palette-export, .palette-note { padding: 22px 18px; }
  .mapping-import-panel, .mapping-apply-panel { padding: 22px 18px; }
  .mapping-column-fields { grid-template-columns: 1fr; }
  .palette-column-labels { display: none; }
  .palette-shell button, .palette-shell select, .palette-shell input { min-height: 44px; }
  .palette-reference-library summary { min-height: 44px; }
  .palette-color-row { grid-template-columns: 44px minmax(0, 1fr) 64px; gap: 7px; margin-block: 19px; }
  .palette-color-row input[type="text"]:first-child { grid-column: 1 / -1; font-size: 16px; }
  .palette-color-row input[type="color"] { grid-column: 1; grid-row: 2; width: 44px; height: 44px; }
  .palette-color-row .palette-hex-input { grid-column: 2; grid-row: 2; width: 100%; font-size: 16px; }
  .palette-color-row .palette-remove { grid-column: 3; grid-row: 2; width: 64px; }
  .palette-preview-controls { align-items: flex-start; }
  .palette-output { font-size: 14px; }
}
@media (pointer: coarse) { .palette-shell button, .palette-shell select, .palette-shell input { min-height: 44px; } }