.palette-panel{background:#fff;border:1px solid var(--line);border-radius:9px;padding:17px 18px 15px;margin:0 0 19px;min-width:0}.palette-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:13px}.palette-panel-heading>div:first-child{display:flex;align-items:baseline;gap:14px}.palette-panel-heading h2{font-size:16px;letter-spacing:-.35px;margin:0;font-weight:650}.palette-panel-heading p{font-size:12px;color:var(--muted);margin:0}.palette-panel-actions{display:flex;align-items:center;gap:15px;margin-left:auto}.palette-text-button{min-height:34px;padding:5px 0;background:none;font-size:12px;color:var(--blue);font-weight:550}.palette-reset-button{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d7dce8;background:white;border-radius:5px;padding:7px 10px;min-height:34px;font-size:11px;color:#565e72}.palette-reset-button svg{width:15px;height:15px;flex-shrink:0}.palette-options{display:grid;gap:13px;min-width:0}.palette-group{min-width:0}.palette-group>h3{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;line-height:1.5;color:#565e72;margin:0 0 5px}.palette-group>h3>span{font-size:10px;font-weight:500;color:var(--muted)}.palette-group-options{display:grid;grid-template-columns:repeat(var(--palette-count),minmax(74px,1fr));gap:7px;overflow-x:auto;padding:3px 3px 5px;margin:0 -3px;scrollbar-width:thin;scroll-snap-type:x proximity}.palette-choice{padding:7px 6px;border:1px solid #dfe3ed;background:#fff;border-radius:6px;min-height:62px;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;scroll-snap-align:start;transition:border-color .15s,background .15s;color:#4c5365}.palette-choice:hover{border-color:#9baee9;background:#fbfcff}.palette-choice[aria-pressed=true]{border-color:var(--blue);background:#f1f4ff;box-shadow:0 0 0 1px var(--blue);color:var(--blue)}.palette-choice>span:last-child{font-size:11px;white-space:nowrap;font-weight:550;line-height:1.25;text-align:center}.palette-mini{height:22px;min-height:22px;display:flex;overflow:hidden;border-radius:3px;width:100%;border:1px solid #1827430d}.palette-mini>span{display:block;flex:1;min-width:0}.palette-meta{display:flex;align-items:center;gap:7px 10px;flex-wrap:wrap;color:#5b6376;font-size:11px;line-height:1.6;margin-top:11px}.palette-meta strong{color:var(--ink);font-weight:600}.palette-hex{font-size:10px;background:#f6f7fa;border:1px solid #e5e8ef;border-radius:3px;padding:2px 5px;color:#566077;font-variant-numeric:tabular-nums;white-space:nowrap}.palette-helper{font-size:11px;color:var(--muted);line-height:1.7;margin:9px 0 0;padding-top:9px;border-top:1px solid #eceef4}.palette-scroll-note{font-size:10px;color:var(--muted);margin:7px 0 0;display:none}.palette-context{display:inline-flex;width:max-content;max-width:100%;font-size:11px;line-height:1.5;color:var(--blue);background:var(--pale);border-radius:4px;padding:4px 8px;margin:0 0 12px}.comparison-palette-settings{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:7px;background:white;padding:13px 16px;margin:0 0 20px}.palette-sync-control{display:flex;align-items:center;gap:9px;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:550;min-height:28px}.palette-sync-control input{width:17px;height:17px;accent-color:var(--blue);margin:0}.comparison-palette-settings>p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.compare-palette-control{display:flex;align-items:center;gap:11px;margin:0 0 8px}.compare-palette-control label{font-size:11px;color:var(--muted);white-space:nowrap}.compare-palette-control select{width:100%;min-width:0;height:37px;border:1px solid #cfd5e3;border-radius:5px;background:white;font-size:12px;color:var(--ink);padding:0 10px}.compare-palette-swatches{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);line-height:1.5;min-height:22px;margin:0 0 14px}.compare-palette-swatches .palette-mini{width:112px;height:16px;min-height:16px;flex-shrink:0}.compare-palette-swatches>span:last-child{font-size:11px}.inspector .palette-context{grid-column:1}.inspector:has(.palette-context) .clues-block{grid-row:1/6}
@media(max-width:1200px){.palette-panel-heading>div:first-child{display:block}.palette-panel-heading p{margin-top:4px;font-size:11px}.palette-panel{padding:16px}.palette-panel-actions{gap:13px}.palette-scroll-note{display:block}.palette-group-options{grid-template-columns:repeat(var(--palette-count),minmax(78px,1fr))}.comparison-palette-settings>p{font-size:11px}.comparison-palette-settings{gap:17px}}
@media(max-width:760px){.palette-group-options{grid-template-columns:repeat(var(--palette-count),82px)}.palette-panel-actions{gap:13px}.palette-hex{font-size:10px}.comparison-palette-settings{align-items:flex-start;gap:15px}.palette-sync-control{font-size:12px}}
@media(max-width:560px){.palette-panel{padding:15px 13px;margin-bottom:15px;border-radius:7px}.palette-panel-heading{gap:8px;margin-bottom:10px;align-items:center}.palette-panel-heading h2{font-size:15px}.palette-panel-heading p{display:none}.palette-panel-actions{gap:12px}.palette-text-button{font-size:11px;min-height:35px}.palette-reset-button{padding:6px;min-width:33px;min-height:33px}.palette-reset-button>span{display:none}.palette-reset-button svg{width:16px;height:16px}.palette-choice{min-height:64px;padding:8px 7px}.palette-choice>span:last-child{font-size:11px}.palette-mini{height:23px;min-height:23px}.palette-meta{font-size:11px;line-height:1.7;margin-top:10px;gap:6px}.palette-meta .palette-hex{font-size:10px}.palette-helper{font-size:11px;margin-top:10px;line-height:1.7}.palette-scroll-note{font-size:10px;margin-top:7px}.palette-context{font-size:11px;padding:5px 8px}.comparison-palette-settings{display:block;padding:13px}.comparison-palette-settings>p{font-size:11px;margin-top:7px}.palette-sync-control{font-size:12px;min-height:30px}.compare-palette-control label{font-size:11px}.compare-palette-control select{height:39px;font-size:12px}.compare-palette-swatches{font-size:11px;margin-bottom:14px}.compare-palette-swatches .palette-mini{width:100px}.inspector:has(.palette-context) .clues-block{grid-row:auto}}
@media(prefers-reduced-motion:reduce){.palette-choice{transition:none}}