.tool{width:min(100%, var(--content-width));padding:var(--space-lg) 0;margin-inline:auto}.tool+.tool{padding-top:0}.tool-header{margin-bottom:var(--space-lg)}.tool-header h1,.tool-header h2{margin:0 0 .5rem}.tool-header p{color:#555;margin:0}.picker-row{gap:var(--space-md);flex-wrap:wrap;align-items:flex-start;display:flex}.swatch-wrap{flex:none;width:140px;height:140px;position:relative}.swatch{border-radius:var(--radius);background:#4f7cff;border:1px solid #ddd;width:100%;height:100%;transition:background .1s}.swatch-wrap input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.picker-controls{flex-direction:column;flex:260px;gap:.5rem;display:flex}.picker-controls label{font-size:.9rem;font-weight:600}.color-text-input{width:100%;font:inherit;border-radius:var(--radius);border:1px solid #ccc;padding:.7rem 1rem;display:block}.color-text-input:focus-visible,.copy-button:focus-visible,.secondary-button:focus-visible,.swatch-wrap input[type=color]:focus-visible{outline-offset:2px;outline:2px solid #4f7cff}.input-status{color:#c62828;min-height:1.2rem;font-size:.85rem}.input-status.is-ok{color:#2e7d32}.secondary-button{font:inherit;border-radius:var(--radius);cursor:pointer;background:#fff;border:1px solid #ccc;align-self:flex-start;margin-top:.25rem;padding:.6rem 1rem;font-size:.9rem;transition:background .15s,border-color .15s}.secondary-button:hover{background:#f0f0f0;border-color:#999}.code-grid{margin-top:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;display:grid}.code-card{border-radius:var(--radius);background:#fafafa;border:1px solid #ddd;padding:1rem}.code-label{color:#666;margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.code-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.code-row code{word-break:break-all;font-size:1.05rem}.copy-button{font:inherit;border-radius:var(--radius);cursor:pointer;background:#fff;border:1px solid #ccc;flex:none;padding:.45rem .8rem;font-size:.85rem;transition:background .15s,border-color .15s}.copy-button:hover{background:#f0f0f0;border-color:#999}.copy-button.is-copied{color:#2e7d32;background:#edf7ed;border-color:#a5d6a7}.named-colors-section{padding-top:0}.named-colors-grid{margin-top:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;display:grid}.named-color-swatch{border-radius:var(--radius);cursor:pointer;text-align:left;font:inherit;background:#fff;border:1px solid #ddd;flex-direction:column;padding:0;transition:border-color .15s,transform .1s;display:flex;overflow:hidden}.named-color-swatch:hover{border-color:#999;transform:translateY(-1px)}.named-color-preview{height:56px}.named-color-meta{padding:.5rem .6rem}.named-color-name{text-transform:capitalize;font-size:.85rem;font-weight:600;display:block}.named-color-hex{color:#666;font-size:.78rem;display:block}.named-color-swatch.is-copied .named-color-hex{color:#2e7d32}.no-results{color:#666;grid-column:1/-1;padding:1rem 0}@media (width<=480px){.swatch-wrap{width:100%;height:100px}}