.colortool__input-area{padding:16px;border-bottom:1px solid var(--color-border)}.colortool__input-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;flex-wrap:wrap}.colortool__label{font-size:13px;font-weight:500;color:var(--color-text-soft)}.colortool__input-row{display:flex;gap:10px;align-items:stretch}.colortool__picker{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;overflow:hidden}.colortool__picker::-webkit-color-swatch-wrapper{padding:4px}.colortool__picker::-webkit-color-swatch{border:none;border-radius:4px}.colortool__picker::-moz-color-swatch{border:none;border-radius:4px}.colortool__input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:13px;line-height:1.6;transition:border-color .15s ease,box-shadow .15s ease}.colortool__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2b6cff1f}.colortool__hint{margin:6px 0 0;font-size:12px;color:var(--color-text-muted)}.colortool__error{margin:12px 16px;padding:10px 14px;border-radius:var(--radius-sm);background:#dc262614;border:1px solid rgba(220,38,38,.2);color:var(--color-error);font-size:13px}.colortool__preview-row{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--color-border);flex-wrap:wrap}.colortool__preview{flex:1;min-width:200px;min-height:120px;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px;border:1px solid var(--color-border)}.colortool__preview-hex{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:22px;font-weight:700;letter-spacing:.04em}.colortool__preview-rgb{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;opacity:.85}.colortool__gradients{display:flex;flex-direction:column;gap:8px;min-width:200px;flex:1}.colortool__gradient{flex:1;min-height:56px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.colortool__formats{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--color-border)}.colortool__format{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--color-border);flex-wrap:wrap}.colortool__format:last-child{border-bottom:none}.colortool__format-head{display:flex;flex-direction:column;gap:2px;min-width:120px;flex-shrink:0}.colortool__format-label{font-size:13px;font-weight:600;color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)}.colortool__format-desc{font-size:11.5px;color:var(--color-text-muted)}.colortool__format-value{flex:1;min-width:0;padding:6px 10px;background:var(--color-bg-code);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;border-radius:var(--radius-sm);word-break:break-all}.colortool__copy-btn{padding:4px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s ease;flex-shrink:0}.colortool__copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.colortool__palettes{padding:16px}.colortool__palettes-title{margin:0 0 4px;font-size:16px;font-weight:600}.colortool__palettes-desc{margin:0 0 16px;font-size:12.5px;color:var(--color-text-muted);line-height:1.6}.colortool__palette{margin-bottom:16px}.colortool__palette:last-child{margin-bottom:0}.colortool__palette-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}.colortool__palette-name{font-size:13px;font-weight:600;color:var(--color-text)}.colortool__palette-hint{font-size:11.5px;color:var(--color-text-muted)}.colortool__palette-colors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.colortool__palette-color{position:relative;min-height:80px;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;padding:8px;transition:transform .15s ease,box-shadow .15s ease}.colortool__palette-color:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.colortool__palette-color:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.colortool__palette-hex{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:11.5px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.1)}.colortool__palette-copy{padding:2px 8px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-size:10.5px;font-family:inherit;cursor:pointer;opacity:.85;transition:opacity .15s ease}.colortool__palette-copy:hover{opacity:1}.colortool__notice{margin:12px 16px;padding:8px 14px;border-radius:var(--radius-sm);background:#1aaa5514;color:var(--color-success);font-size:13px;text-align:center}@media(max-width:768px){.colortool__input-head{flex-direction:column;align-items:stretch}.colortool__preview-row{flex-direction:column}.colortool__gradients{flex-direction:row;min-width:0}.colortool__format{flex-direction:column;align-items:stretch}.colortool__format-head{flex-direction:row;gap:8px;min-width:0}.colortool__palette-colors{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}