.palette-tool{padding-bottom:24px}.palette-tool .intro>p{max-width:700px;line-height:1.7}.palette-workbench{border:1px solid var(--line);background:var(--surface);border-radius:16px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);display:grid;overflow:hidden}.palette-input,.palette-result{min-width:0;padding:24px}.palette-input{border-right:1px solid var(--line)}.palette-result{background:var(--surface-soft)}.palette-workbench h2{align-items:center;gap:8px;margin-bottom:20px;font-size:18px;display:flex}.palette-workbench h2 svg{color:var(--tool-accent)}.palette-file-label{margin-bottom:8px;font-size:14px;font-weight:600;display:block}.palette-input input[type=file]{width:100%;min-height:44px;color:var(--text);font-size:14px}.palette-input input[type=file]::file-selector-button{border:1px solid var(--line);min-height:44px;color:var(--text);background:var(--surface-soft);cursor:pointer;border-radius:8px;margin-right:8px;padding:8px 12px}.palette-hint,.palette-notice{color:var(--text-muted);margin:8px 0;font-size:13px;line-height:1.7}.palette-preview{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;margin-top:20px;overflow:hidden}.palette-preview img{object-fit:contain;width:100%;height:220px;display:block}.palette-preview figcaption{overflow-wrap:anywhere;padding:12px;font-size:14px}.palette-preview figcaption span{color:var(--text-muted);margin-top:4px;font-size:12px;display:block}.palette-empty{color:var(--text-muted);flex-direction:column;justify-content:center;gap:16px;min-height:180px;padding:24px 0;line-height:1.7;display:flex}.palette-count{margin:24px 0}.palette-count label{justify-content:space-between;align-items:center;font-size:14px;display:flex}.palette-count output{color:var(--tool-accent);font-family:var(--font-mono), monospace;font-size:20px}.palette-count input{width:100%;min-height:44px;accent-color:var(--tool-accent)}.palette-count>span{color:var(--text-muted);font-size:12px}.palette-button{border:1px solid var(--line);min-height:44px;color:var(--text);background:var(--surface);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 12px;font-size:14px;display:inline-flex}.palette-button:disabled{opacity:.5;cursor:default}.palette-button:hover:not(:disabled){background:var(--surface-soft)}.palette-button.palette-primary{background:var(--tool-accent);color:var(--on-tool);border-color:var(--tool-accent)}.palette-button.palette-primary:hover{background:var(--tool-accent-hover)}.palette-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.palette-swatches{gap:8px;margin:16px 0 24px;padding:0;list-style:none;display:grid}.palette-swatches button{text-align:left;border:1px solid var(--line);background:var(--surface);width:100%;min-height:64px;color:var(--text);border-radius:8px;align-items:center;gap:12px;padding:8px;display:flex}.palette-swatches button:hover{border-color:var(--tool-accent)}.palette-chip{border:1px solid var(--line);border-radius:8px;flex:none;width:48px;height:48px}.palette-color-code{min-width:0;font-family:var(--font-mono), monospace;font-size:16px}.palette-color-code small{color:var(--text-muted);overflow-wrap:anywhere;margin-top:4px;font-size:12px;display:block}.palette-percentage{color:var(--text-muted);align-items:center;gap:8px;margin-left:auto;font-size:13px;display:flex}.palette-format{justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.palette-format select{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);border-radius:8px;padding:8px 12px}.palette-output{resize:vertical;border:1px solid var(--line);background:var(--surface);width:100%;min-height:140px;color:var(--text);font:13px/1.7 var(--font-mono), monospace;border-radius:8px;margin-top:12px;padding:12px;display:block}.palette-error{color:var(--error-text);background:var(--error-soft);border:1px solid var(--error-line);border-radius:8px;margin-top:12px;padding:12px;font-size:14px;line-height:1.6}.palette-notice{min-height:24px}.palette-tool :is(button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px}@media (max-width:760px){.palette-workbench{grid-template-columns:minmax(0,1fr)}.palette-input{border-right:0;border-bottom:1px solid var(--line)}}@media (max-width:420px){.palette-input,.palette-result{padding:16px}.palette-percentage{flex-direction:column;gap:4px}.palette-chip{width:40px;height:44px}}