/* Palette controls inherit readable app surfaces; the sample owns its colours. */
#open-palette{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:start}
.palette-mini{display:flex;flex:0 0 auto;gap:4px}.palette-mini i{width:14px;height:20px;border-radius:4px;background:var(--action)}.palette-mini i:nth-child(2){background:var(--surface-alt);border:1px solid var(--border)}.palette-mini i:nth-child(3){background:var(--mint)}
#palette-dialog{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;color:var(--text)}
.palette-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.palette-heading h2{margin:0;font-size:1.389rem}.palette-heading button{flex:0 0 auto;min-width:52px;min-height:52px;padding:10px;display:flex;align-items:center;justify-content:center}
.palette-body{padding:20px 24px 8px}.palette-body>p:first-child{margin-top:0;color:var(--muted-text)}
.palette-themes{display:flex;gap:8px;margin:18px 0}.palette-themes button{flex:1;padding:12px;font-size:1rem}.palette-themes [aria-selected=true]{background:var(--action)!important;color:var(--on-action)!important;border-color:var(--action)}
.palette-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 18px}.palette-presets button{padding:12px 8px;display:grid;gap:9px;justify-items:center;min-width:0;font-size:.8889rem}
.palette-presets [aria-pressed=true]{outline:2px solid var(--accent-text);outline-offset:1px;background:var(--surface-alt)!important}
.palette-presets .palette-swatches{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.palette-swatches i{flex:1}
.palette-preset-name{display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap}.palette-tick{width:16px;height:16px;visibility:hidden}.palette-presets [aria-pressed=true] .palette-tick{visibility:visible}
.palette-preview{padding:16px;background:var(--page);color:var(--text);border-radius:14px;border:1px solid var(--border);margin:18px 0}.palette-preview-top{background:var(--top-bar);padding:10px 14px;border-radius:10px;color:var(--text);font-weight:600}
.palette-preview-card{margin-top:10px;padding:14px;background:var(--surface);color:var(--text);border-radius:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.palette-preview-card span{font-weight:600}.palette-preview-tag{background:var(--surface-alt);color:var(--text);padding:8px 10px;border-radius:8px}.palette-preview-action{display:inline-flex;align-items:center;justify-content:center;background:var(--action);color:var(--on-action);border-radius:22px;min-height:48px;padding:8px 20px;font-weight:600}
.palette-editor-title{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}.palette-editor-title h3{margin:0;font-size:1.111rem}.palette-editor-title span{color:var(--muted-text);font-size:.8889rem}
.palette-fields{display:grid;margin-top:10px}.palette-field{display:grid;grid-template-columns:minmax(0,1fr) 56px 130px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.palette-field>label{margin:0;color:var(--text);font-weight:600;line-height:1.5}.palette-field input[type=color]{width:56px;min-height:54px;height:54px;padding:5px;cursor:pointer;background:var(--surface);border-color:var(--control-border)}.palette-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.palette-field input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}.palette-field input[type=text]{width:100%;min-width:0;padding:10px;font-size:1rem;font-variant-numeric:tabular-nums}.palette-field input[aria-invalid=true]{border:2px solid var(--danger)}
.palette-help{color:var(--muted-text);font-size:.8889rem;margin:16px 0 12px}.palette-error{color:var(--danger);margin:8px 0;font-size:1rem}.palette-error:empty{display:none}
.palette-footer{position:sticky;bottom:0;z-index:2;background:var(--surface);padding:16px 24px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;border-top:1px solid var(--border)}.palette-footer button{padding:10px 16px;font-size:.9444rem}.palette-footer .palette-confirm{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:699px){.palette-heading,.palette-body{padding-left:18px;padding-right:18px}.palette-heading{gap:10px;padding-top:14px;padding-bottom:14px}.palette-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.palette-themes button{font-size:.9444rem}.palette-field{grid-template-columns:minmax(0,1fr) 54px 112px;gap:8px}.palette-field input[type=text]{font-size:.8889rem;padding:8px}.palette-field>label{font-size:.9444rem}.palette-preview-card{display:grid;gap:10px}.palette-preview-action{justify-self:start}.palette-footer{padding:12px 18px max(12px,env(safe-area-inset-bottom))}.palette-footer>button{width:100%}.palette-confirm{width:100%}.palette-confirm button{flex:1;min-width:100px}.palette-footer button{font-size:.8889rem}}
@media(max-width:359px){.palette-field{grid-template-columns:54px minmax(0,1fr);gap:8px}.palette-field>label{grid-column:1/-1}.palette-field input[type=text]{font-size:1rem}.palette-heading h2{font-size:1.167rem}.palette-heading,.palette-body{padding-left:14px;padding-right:14px}.palette-preview{padding:10px}}
@media(forced-colors:active){.palette-presets [aria-pressed=true],.palette-themes [aria-selected=true]{outline:2px solid Highlight}.palette-preview{border-color:CanvasText}}

html[data-theme] input,html[data-theme] select,html[data-theme] textarea{border-color:var(--control-border)}