.tool-wrapper{margin-bottom:1.5rem}.converter-card{max-width:540px;margin:0 auto;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:14px;padding:1.5rem;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000d}.converter-subtitle{margin:0 0 .25rem;font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--color-text-primary, #1e293b)}.converter-desc{margin:0 0 1.25rem;font-size:.8125rem;color:var(--color-text-secondary, #64748b)}.section-block{margin-bottom:1rem}.section-divider{height:1px;background:var(--color-border, #e2e8f0);margin:1.25rem 0}.section-title{font-size:1rem;font-weight:700;margin:0 0 .75rem;color:var(--color-text-primary, #1e293b)}.single-preview{width:100%;height:120px;border-radius:12px;border:2px solid var(--color-border, #e2e8f0);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.75rem;transition:background-color .2s ease;margin-bottom:.75rem}.single-info{background:#ffffffd9;backdrop-filter:blur(4px);border-radius:8px;padding:.375rem 1rem}.single-hex{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:1rem;font-weight:700}.single-outputs{margin-bottom:1rem}.output-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--color-border, #e2e8f0)}.output-row:last-child{border-bottom:none}.output-label{font-size:.6875rem;font-weight:600;color:var(--color-text-secondary, #64748b);text-transform:uppercase;letter-spacing:.05em;width:36px;flex-shrink:0}.output-value{flex:1;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:.875rem;font-weight:600;color:var(--color-text-primary, #1e293b)}.action-btn{display:block;width:100%;padding:.625rem;font-size:.875rem;font-weight:600;border:none;border-radius:10px;background:#6366f1;color:#fff;cursor:pointer;transition:background .15s,transform .1s;margin-bottom:.5rem}.action-btn:hover{background:#4f46e5;transform:translateY(-1px)}.action-btn-secondary{background:#f1f5f9;color:#1e293b;border:1px solid var(--color-border, #e2e8f0)}.action-btn-secondary:hover{background:#e2e8f0}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1rem}.palette-swatch{text-align:center}.palette-color-box{width:100%;aspect-ratio:1;border-radius:10px;border:2px solid var(--color-border, #e2e8f0);transition:background-color .2s ease;margin-bottom:.25rem}.palette-color-label{display:block;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:.65rem;font-weight:600;margin-bottom:.25rem;word-break:break-all}.palette-lock-btn,.palette-copy-btn{background:transparent;border:none;cursor:pointer;font-size:.75rem;padding:2px 4px;border-radius:4px;transition:background .15s}.palette-lock-btn:hover,.palette-copy-btn:hover{background:var(--color-bg-alt, #f1f5f9)}.palette-actions{display:flex;gap:.5rem}.palette-actions .action-btn{margin-bottom:0}.save-msg{text-align:center;font-size:.8125rem;font-weight:600;color:#22c55e;padding:.5rem}.copy-btn{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;cursor:pointer;font-size:.75rem;transition:background .15s;color:var(--color-text-secondary, #64748b)}.copy-btn:hover{background:var(--color-border, #e2e8f0)}.copy-btn.copied{color:#22c55e;background:#22c55e1a}.seo-content{max-width:720px;margin:0 auto;padding:2rem 0}.seo-content h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text-primary)}.seo-content p{margin-bottom:1rem;line-height:1.7;color:var(--color-text-secondary);font-size:1.05rem}.seo-content code{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:.9em;background:var(--color-bg-alt, #f1f5f9);padding:.125rem .375rem;border-radius:4px}.related-tools{max-width:720px;margin:0 auto;padding:2rem 0}.related-tools h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text-primary)}.related-tools ul{list-style:none;padding:0;margin:0}.related-tools li{padding:.375rem 0;line-height:1.6;color:var(--color-text-secondary);font-size:1.05rem}.related-tools a{color:#6366f1;text-decoration:none;font-weight:600}.related-tools a:hover{text-decoration:underline}@media(max-width:480px){.converter-card{padding:1rem}.palette-grid{grid-template-columns:repeat(5,1fr);gap:.375rem}.palette-color-label{font-size:.55rem}}