:root{
--bg:#0a0a0f;--surface:#111118;--elevated:#1a1a24;--border:#252536;
--text:#e8e8f0;--muted:#9090a8;--subtle:#585870;
--accent:#7c6cfc;--accent-h:#6858e0;--accent-glow:rgba(124,108,252,.15);
--success:#34d399;--error:#f87171;--warn:#fbbf24;
--cat-gen:#a78bfa;--cat-pick:#60a5fa;--cat-conv:#34d399;--cat-a11y:#fbbf24;--cat-design:#f472b6;
--radius:14px;--radius-sm:10px;
--mono:'SF Mono','Cascadia Code','Fira Code','Consolas',monospace;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--transition:.2s ease;--max-w:1120px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
input,select,textarea{font:inherit}
h1{font-size:2rem;font-weight:700;line-height:1.15;letter-spacing:-.03em}
h2{font-size:1.35rem;font-weight:600;line-height:1.3;margin-bottom:.6em}
h3{font-size:1.05rem;font-weight:600}
p{margin-bottom:.8em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.site-header{background:rgba(17,17,24,.85);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;height:56px;gap:24px}
.logo{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:1.1rem;text-decoration:none;flex-shrink:0}
.logo:hover{text-decoration:none;color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:4px;padding:6px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.site-nav{display:flex;align-items:center;gap:4px}
.nav-group{position:relative}
.nav-group__btn{display:flex;align-items:center;gap:5px;padding:8px 12px;color:var(--muted);font-size:.88rem;font-weight:500;border-radius:var(--radius-sm);transition:var(--transition)}
.nav-group__btn:hover,.nav-group.open .nav-group__btn{color:var(--text);background:var(--elevated)}
.nav-group__btn svg{transition:transform var(--transition)}
.nav-group.open .nav-group__btn svg{transform:rotate(180deg)}
.nav-dropdown{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:rgba(17,17,24,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:6px;min-width:200px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:200}
.nav-group.open .nav-dropdown{display:block}
.nav-dropdown a{display:block;padding:8px 12px;color:var(--text);font-size:.88rem;border-radius:var(--radius-sm);transition:var(--transition);text-decoration:none}
.nav-dropdown a:hover{background:rgba(124,108,252,.1);color:var(--accent)}

/* ===== BREADCRUMB ===== */
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:24px;padding-top:4px}
.breadcrumb a{color:var(--subtle);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 6px}

/* ===== TOOL PAGE ===== */
.tool-page{padding-top:32px;padding-bottom:60px;position:relative}
.tool-page::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(124,108,252,.06) 0%,transparent 70%);pointer-events:none;z-index:-1}
.tool-hero{margin-bottom:32px}
.tool-hero h1{margin-bottom:10px;background:linear-gradient(135deg,var(--text) 60%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tool-hero p{color:var(--muted);max-width:640px;font-size:.95rem;line-height:1.7}

/* ===== TOOL PANEL ===== */
.tool-panel{background:linear-gradient(180deg,rgba(26,26,36,.8),rgba(17,17,24,.6));border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:28px;margin-bottom:36px;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
.tool-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--cat-design),var(--cat-pick));opacity:.7}

/* ===== SWATCHES ===== */
.swatch{border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.swatch-lg{width:100%;height:160px;border-radius:var(--radius)}
.swatch-md{width:80px;height:80px}
.swatch-sm{width:36px;height:36px;flex-shrink:0}
.swatch-xs{width:24px;height:24px;flex-shrink:0;border-radius:6px}
.swatch-strip{display:flex;border-radius:var(--radius);overflow:hidden;height:80px}
.swatch-strip>div{flex:1;min-width:0}
.checkerboard{background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}

/* ===== PALETTE ===== */
.palette{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.palette-color{flex:1;min-width:0;min-height:100px;position:relative;display:flex;flex-direction:column;cursor:pointer;transition:flex .2s;overflow:hidden}
.palette-color:hover{flex:1.3}
.palette-color-info{font-size:.72rem;font-family:var(--mono);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity var(--transition);padding:8px}
.palette-color:hover .palette-color-info{opacity:1}
.palette-lock{position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border-radius:4px;font-size:.7rem;color:#fff;opacity:0;transition:opacity var(--transition)}
.palette-color:hover .palette-lock{opacity:1}
.palette-lock.locked{opacity:1;background:rgba(0,0,0,.6)}

/* ===== FORM ELEMENTS ===== */
.ct-input{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;outline:none;transition:all var(--transition);width:100%}
.ct-input:focus{border-color:var(--accent);background:rgba(124,108,252,.06);box-shadow:0 0 0 3px rgba(124,108,252,.1)}
.ct-input::placeholder{color:var(--subtle)}
.ct-input--lg{font-size:1.05rem;padding:12px 16px;font-family:var(--mono)}
.ct-input--sm{width:80px;padding:8px 10px;text-align:center}
.ct-input--mono{font-family:var(--mono)}
.ct-select{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239090a8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;transition:all var(--transition)}
.ct-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,252,.1)}
.ct-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;outline:none;cursor:pointer}
.ct-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer;box-shadow:0 0 8px rgba(124,108,252,.4)}
.ct-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer;box-shadow:0 0 8px rgba(124,108,252,.4)}
.ct-color{-webkit-appearance:none;appearance:none;width:52px;height:42px;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);cursor:pointer;background:none;padding:0;transition:border-color var(--transition)}
.ct-color:hover{border-color:var(--accent)}
.ct-color::-webkit-color-swatch-wrapper{padding:0}
.ct-color::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-sm) - 2px)}
.ct-color::-moz-color-swatch{border:none;border-radius:calc(var(--radius-sm) - 2px)}
.ct-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);font-family:var(--mono);font-size:.84rem;padding:12px;border-radius:var(--radius-sm);resize:vertical;min-height:80px;line-height:1.5;outline:none;transition:all var(--transition)}
.ct-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,252,.1)}
.ct-textarea::placeholder{color:var(--subtle)}
.ct-checkbox{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);cursor:pointer}
.ct-checkbox input{accent-color:var(--accent);width:16px;height:16px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;font-size:.9rem;font-weight:500;border-radius:var(--radius-sm);transition:all var(--transition);border:1px solid transparent;text-decoration:none}
.btn--primary{background:linear-gradient(135deg,#7c6cfc,#9b8aff);color:#fff;border:none;box-shadow:0 2px 12px rgba(124,108,252,.3)}
.btn--primary:hover{background:linear-gradient(135deg,#6858e0,#8b7af0);box-shadow:0 4px 20px rgba(124,108,252,.45);transform:translateY(-1px);text-decoration:none}
.btn--secondary{background:rgba(255,255,255,.04);color:var(--text);border-color:rgba(255,255,255,.1)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent);background:rgba(124,108,252,.06);text-decoration:none}
.btn--copy{background:rgba(255,255,255,.04);color:var(--muted);font-size:.78rem;padding:6px 12px;border-color:rgba(255,255,255,.08)}
.btn--copy:hover{color:var(--accent);border-color:rgba(124,108,252,.3);background:rgba(124,108,252,.06)}
.btn--sm{padding:6px 12px;font-size:.82rem}
.btn--icon{padding:8px;width:36px;height:36px}
.btn--block{width:100%;justify-content:center}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ===== STATUS ===== */
.status-msg{font-size:.85rem;min-height:1.4em;color:var(--muted);transition:color var(--transition)}
.status-msg.visible{padding-top:4px}
.status-msg--success{color:var(--success)}
.status-msg--error{color:var(--error)}
.status-msg--info{color:var(--accent)}

/* ===== OUTPUT ROWS ===== */
.output-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.output-row:last-child{border-bottom:none}
.output-label{font-size:.82rem;color:var(--muted);min-width:60px;flex-shrink:0;font-weight:500}
.output-value{flex:1;font-family:var(--mono);font-size:.9rem;word-break:break-all;min-width:0}
.output-group{margin-top:16px}

/* ===== CONVERTER LAYOUT ===== */
.converter-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.conv-input-row{display:flex;gap:8px;margin-top:8px}
.conv-input-row .ct-input{flex:1}
.conv-swatch{width:100%;height:120px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.component-inputs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.component-inputs label{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:4px}

/* ===== CONTROL ROW ===== */
.control-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.control-row label{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}

/* ===== CARDS / GRID ===== */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tool-card{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px 22px;transition:all .25s ease;text-decoration:none;color:var(--text);position:relative;overflow:hidden}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);opacity:0;transition:opacity .25s}
.tool-card:hover{border-color:rgba(124,108,252,.3);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3),0 0 0 1px rgba(124,108,252,.1);text-decoration:none}
.tool-card:hover::before{opacity:1}
.tool-card h3{font-size:.95rem;margin-bottom:2px}
.tool-card p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
.tool-card--featured{flex-direction:column;gap:0;padding:0;border-color:rgba(255,255,255,.06);background:linear-gradient(160deg,rgba(124,108,252,.06),rgba(244,114,182,.03))}

/* card icon bubble */
.card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ic,var(--accent));background:color-mix(in srgb,var(--ic,var(--accent)) 12%,transparent);transition:all .25s ease}
.tool-card:hover .card-icon{background:color-mix(in srgb,var(--ic,var(--accent)) 20%,transparent);transform:scale(1.08)}

/* ===== CONTRAST RESULTS ===== */
.contrast-display{text-align:center;padding:24px;margin:16px 0}
.contrast-ratio{font-size:2.5rem;font-weight:700;font-family:var(--mono)}
.contrast-label{font-size:.85rem;color:var(--muted);margin-top:4px}
.contrast-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600}
.badge--pass{background:rgba(52,211,153,.12);color:var(--success);border:1px solid rgba(52,211,153,.25)}
.badge--fail{background:rgba(248,113,113,.1);color:var(--error);border:1px solid rgba(248,113,113,.2)}
.contrast-preview{padding:24px;border-radius:var(--radius);margin:16px 0;text-align:center;font-size:1.1rem;font-weight:500}
.contrast-colors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

/* ===== GRADIENT PREVIEW ===== */
.gradient-preview{width:100%;height:180px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 20px rgba(0,0,0,.25)}
.gradient-stops{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.gradient-stop{display:flex;align-items:center;gap:10px}
.gradient-stop .ct-color{width:44px;height:36px}
.gradient-css{margin-top:16px}

/* ===== COLOR WHEEL ===== */
.wheel-wrap{width:280px;height:280px;border-radius:50%;position:relative;margin:0 auto 20px;cursor:crosshair}
.wheel-marker{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5),0 0 12px rgba(124,108,252,.3);position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.harmony-dots .wheel-marker{width:12px;height:12px;border-width:2px;opacity:.85}

/* ===== IMAGE CANVAS ===== */
.canvas-wrap{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;cursor:crosshair;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.canvas-wrap canvas{display:block;max-width:100%;height:auto}
.loupe{width:100px;height:100px;border:2px solid var(--accent);border-radius:var(--radius-sm);image-rendering:pixelated;position:absolute;top:10px;right:10px;pointer-events:none;display:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.picked-colors{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ===== DROP ZONE ===== */
.drop-zone{border:2px dashed rgba(255,255,255,.1);border-radius:var(--radius);padding:48px 24px;text-align:center;color:var(--muted);transition:all var(--transition);cursor:pointer;background:rgba(255,255,255,.02)}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:rgba(124,108,252,.06)}
.drop-zone p{margin:0 0 12px}

/* ===== SECTIONS ===== */
.content-section{margin-bottom:36px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);padding:24px 28px}
.content-section h2{margin-bottom:12px;font-size:1.15rem}
.content-section p{color:var(--muted);font-size:.92rem;line-height:1.7}
.content-section ul,.content-section ol{padding-left:20px;color:var(--muted);font-size:.92rem;margin-bottom:12px}
.content-section li{margin-bottom:6px;line-height:1.6}
.content-section dl{color:var(--muted);font-size:.92rem}
.content-section dt{color:var(--text);font-weight:600;margin-top:12px}
.content-section dd{margin-left:0;margin-bottom:8px}
.content-section code{background:rgba(124,108,252,.1);color:var(--accent);padding:2px 6px;border-radius:4px;font-size:.85em}

.related-tools{margin-bottom:36px}
.related-tools h2{font-size:1.15rem}
.related-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.related-link{display:inline-block;padding:8px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;font-size:.85rem;color:var(--text);transition:all var(--transition);text-decoration:none}
.related-link:hover{border-color:rgba(124,108,252,.4);color:var(--accent);background:rgba(124,108,252,.06);text-decoration:none;transform:translateY(-1px)}

/* ===== FAQ ===== */
.faq-section{margin-bottom:36px}
.faq-item{border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color var(--transition)}
.faq-item:hover{border-color:rgba(255,255,255,.1)}
.faq-item summary{padding:14px 18px;cursor:pointer;font-weight:500;font-size:.92rem;list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.2rem;color:var(--subtle);font-weight:300;flex-shrink:0;margin-left:12px;transition:color var(--transition)}
.faq-item:hover summary::after{color:var(--accent)}
.faq-item[open] summary::after{content:'\2212';color:var(--accent)}
.faq-item[open] summary{border-bottom:1px solid rgba(255,255,255,.05)}
.faq-item p,.faq-item div{padding:14px 18px;font-size:.9rem;color:var(--muted);line-height:1.7}

/* ===== HOMEPAGE ===== */
.home-hero{padding-top:72px;padding-bottom:56px;text-align:center;position:relative;overflow:hidden}
.home-hero::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse at center,rgba(124,108,252,.12) 0%,rgba(244,114,182,.06) 40%,transparent 70%);pointer-events:none;animation:heroPulse 8s ease-in-out infinite alternate}
@keyframes heroPulse{0%{opacity:.7;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.1)}}
.home-hero h1{font-size:3rem;margin-bottom:16px;letter-spacing:-.04em;position:relative}
.home-hero h1 span{background:linear-gradient(135deg,#7c6cfc,#60a5fa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-hero p{color:var(--muted);max-width:520px;margin:0 auto;font-size:1.05rem;line-height:1.7;position:relative}
.home-hero .hero-cta{display:flex;gap:12px;justify-content:center;margin-top:28px;position:relative}

.home-section{padding:32px 0}
.home-section>div>.section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.home-section h2{margin-bottom:20px}
.home-section h2 span{color:var(--muted);font-weight:400;font-size:.9rem;margin-left:6px}

/* featured cards with visual color */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px}
.tool-card--featured{flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border-color:rgba(255,255,255,.08);gap:0}
.tool-card--featured::before{display:none}
.tool-card--featured .card-icon{display:none}
.tool-card--featured .card-visual{height:64px;flex-shrink:0;position:relative}
.tool-card--featured .card-body{padding:18px 22px}
.tool-card--featured .card-body h3{font-size:1rem;margin-bottom:4px}
.tool-card--featured .card-body p{font-size:.84rem;color:var(--muted);margin:0;line-height:1.5}
.tool-card--featured:hover .card-visual{filter:brightness(1.15)}

.category-section{margin-bottom:32px}
.category-section h3{margin-bottom:14px;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.category-section h3::before{content:'';display:inline-block;width:3px;height:16px;border-radius:2px;background:var(--accent)}
.cat-gen h3::before{background:var(--cat-gen)}
.cat-pick h3::before{background:var(--cat-pick)}
.cat-conv h3::before{background:var(--cat-conv)}
.cat-a11y h3::before{background:var(--cat-a11y)}
.cat-design h3::before{background:var(--cat-design)}

/* ===== FOOTER ===== */
.site-footer{background:var(--surface);border-top:1px solid rgba(255,255,255,.06);padding-top:48px;padding-bottom:28px;margin-top:48px}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:28px 20px}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-col strong{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.footer-col a{font-size:.85rem;color:var(--subtle);text-decoration:none;transition:color var(--transition)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{padding-top:28px;margin-top:28px;border-top:1px solid rgba(255,255,255,.05);text-align:center}
.footer-bottom p{font-size:.8rem;color:var(--subtle);margin:0}

/* ===== LEGAL ===== */
.legal-page{padding-top:32px;padding-bottom:60px}
.legal-page h1{margin-bottom:20px}
.legal-page h2{margin-top:28px;margin-bottom:8px;font-size:1.15rem}
.legal-page p,.legal-page li{font-size:.92rem;color:var(--muted);line-height:1.7}
.legal-page ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.legal-page li{margin-bottom:6px}
.legal-page a{color:var(--accent)}

/* ===== BUG REPORT FORM ===== */
.bug-form{margin-top:28px;display:flex;flex-direction:column;gap:20px;max-width:600px}
.bug-field{display:flex;flex-direction:column;gap:6px}
.bug-field label{font-size:.88rem;color:var(--text);font-weight:500}
.bug-note{font-size:.82rem;color:var(--muted);margin-top:4px}

/* ===== CSS OUTPUT ===== */
.css-output{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--mono);font-size:.84rem;overflow-x:auto;margin-bottom:12px;color:var(--muted)}

/* ===== PALETTE GENERATOR ===== */
.pg-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pg-controls label{font-size:.88rem;color:var(--muted);font-weight:500}
.pg-export{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.pg-export label{font-size:.88rem;color:var(--muted);font-weight:500}

/* ===== PALETTE COLORS (JS-generated) ===== */
.palette-swatch{width:100%;min-height:80px;flex:1}
.palette-info{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(0,0,0,.25);flex-wrap:wrap}
.palette-hex{font-family:var(--mono);font-size:.82rem;color:var(--text)}

/* ===== SCALE STEPS (Shades/Tints/Mixer) ===== */
.scale-wrap{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-top:12px}
.scale-step{flex:1;min-width:0;cursor:pointer;transition:flex .2s;display:flex;flex-direction:column}
.scale-step:hover{flex:1.4}
.scale-swatch{flex:1;min-height:64px}
.scale-hex{font-family:var(--mono);font-size:.7rem;padding:6px 4px;text-align:center;background:rgba(0,0,0,.3);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scale-step:hover .scale-hex{color:var(--text)}

/* ===== COLOR PICKER LAYOUT ===== */
.cp-layout{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.cp-picker-side{display:flex;flex-direction:column;gap:16px}
.cp-native-wrap{display:flex;align-items:center;gap:10px}
.cp-fields{display:flex;flex-direction:column;gap:12px}
.cp-field{display:flex;flex-direction:column;gap:4px}
.cp-field label{font-size:.82rem;color:var(--muted);font-weight:500}
.cp-rgb-fields,.cp-hsl-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cp-output-side{display:flex;flex-direction:column;gap:16px}
.cp-outputs{display:flex;flex-direction:column}

/* ===== CONTRAST CHECKER ===== */
.cc-inputs{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cc-field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.cc-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.cc-input-row{display:flex;gap:8px;align-items:center}
.cc-input-row .ct-input{flex:1}
#cc-swap{flex-shrink:0;align-self:flex-end;margin-bottom:4px}
#cc-check{margin-bottom:24px}
.cc-result{margin-top:8px}
.cc-ratio{font-size:1.05rem;margin-bottom:16px;padding:16px;background:rgba(0,0,0,.2);border-radius:var(--radius-sm);text-align:center}
.cc-ratio strong{font-size:2rem;font-family:var(--mono);display:block;margin-top:4px}
.cc-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.cc-badge-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,0,0,.15);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.05)}
.cc-label{font-size:.85rem;color:var(--muted);font-weight:500}
.contrast-badge{font-size:.82rem;font-weight:600;padding:4px 12px;border-radius:14px}
.contrast-badge--pass{background:rgba(52,211,153,.12);color:var(--success);border:1px solid rgba(52,211,153,.25)}
.contrast-badge--fail{background:rgba(248,113,113,.1);color:var(--error);border:1px solid rgba(248,113,113,.2)}
.cc-previews{display:flex;flex-direction:column;gap:8px}
.cc-preview{border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08)}

/* ===== IMAGE TOOLS ===== */
.ip-canvas-area{position:relative;margin-top:16px}
.ip-result{display:flex;align-items:flex-start;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.ip-values{flex:1}
.ip-collected-section{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.ip-collected-section h3{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.95rem}
.swatch-row{display:flex;flex-wrap:wrap;gap:6px}

/* ===== GRADIENT GENERATOR ===== */
.gg-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.gg-field{display:flex;flex-direction:column;gap:6px}
.gg-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.gg-stops-section{margin-top:20px}
.gg-stops-section h3{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.95rem}
.stops-list{display:flex;flex-direction:column;gap:10px}
.stop-row{display:flex;align-items:center;gap:10px}
.stop-row .ct-input--sm{width:64px}
.stop-row span{font-size:.85rem;color:var(--muted)}
.stop-remove{color:var(--muted);font-size:.9rem}
.stop-remove:hover{color:var(--error)}
.gg-output{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.gg-output .btn--primary{margin-top:10px}

/* ===== COMBINATION GENERATOR ===== */
.cg-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cg-field{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px}
.cg-field label{font-size:.85rem;color:var(--muted);font-weight:500}

/* ===== ACCESSIBLE PALETTE ===== */
.ap-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.ap-field{display:flex;flex-direction:column;gap:6px}
.ap-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.ap-controls .btn--primary{align-self:flex-start}

/* ===== SHADES & TINTS ===== */
.st-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.st-field{flex:1;min-width:120px;display:flex;flex-direction:column;gap:6px}
.st-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.st-tabs{display:flex;gap:4px;margin-bottom:4px}
.st-tabs .btn--sm{padding:8px 16px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm)}
.st-tabs .btn--sm.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== COLOR WHEEL ===== */
.cw-layout{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin-bottom:20px}
.cw-wheel-side{display:flex;flex-direction:column;align-items:center}
.cw-controls-side{display:flex;flex-direction:column;gap:16px}
.cw-field{display:flex;flex-direction:column;gap:6px}
.cw-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.color-wheel{width:240px;height:240px;border-radius:50%;background:conic-gradient(from 0deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));cursor:crosshair;position:relative;box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* ===== COLOR MIXER ===== */
.cm-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.cm-input-row{display:flex;gap:8px;align-items:center}
.cm-input-row .ct-input{flex:1}
.cm-slider{margin-bottom:20px}
.cm-slider label{font-size:.88rem;color:var(--muted);font-weight:500;display:block;margin-bottom:8px}
.cm-result-area{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:24px}
.cm-values{display:flex;flex-direction:column}

/* ===== HARMONY GENERATOR ===== */
.ch-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.ch-field{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.ch-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.ch-input-row{display:flex;gap:8px;align-items:center}
.ch-input-row .ct-input{flex:1}
.harmony-sections{display:flex;flex-direction:column;gap:24px}
.harmony-section{background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);padding:16px}
.harmony-section h3{margin-bottom:12px;font-size:.92rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.harmony-section .palette{margin:0}

/* ===== ACCESSIBLE PAIR GENERATOR ===== */
.acp-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.acp-field{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px}
.acp-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.pairs-list{display:flex;flex-direction:column;gap:10px}
.pair-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-sm);flex-wrap:wrap}
.pair-preview{padding:10px 16px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;min-width:120px;text-align:center}
.pair-hex{font-family:var(--mono);font-size:.85rem;color:var(--text)}

/* ===== UI STATE GENERATOR ===== */
.us-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.us-field{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.us-field label{font-size:.85rem;color:var(--muted);font-weight:500}
.states-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.state-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-sm)}
.state-swatch{width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.state-name{font-size:.9rem;font-weight:500;min-width:80px}
.state-hex{font-family:var(--mono);font-size:.85rem;color:var(--muted);flex:1}
.us-css-section{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.us-css-section h3{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.95rem}
.us-css-output{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--mono);font-size:.84rem;overflow-x:auto;color:var(--muted);margin:0;white-space:pre}

/* ===== COLOR NAME FINDER ===== */
.cn-match-area{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.named-swatch{width:48px;height:48px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);cursor:pointer;position:relative;transition:transform var(--transition)}
.named-swatch:hover{transform:scale(1.15);z-index:1}
.named-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity var(--transition);pointer-events:none}
.named-swatch:hover .named-label{opacity:1}
#cn-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}

/* ===== RANDOM COLOR GENERATOR ===== */
.rc-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.rc-values{display:flex;flex-direction:column}
.rc-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.rc-history{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.rc-history h3{margin-bottom:12px;font-size:.95rem}

/* ===== HEX PICKER ===== */
.hp-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}

/* ===== UTILITY ===== */
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.text-mono{font-family:var(--mono)}.text-sm{font-size:.85rem}.text-muted{color:var(--muted)}
.hidden{display:none!important}
.w-full{width:100%}

/* ===== COLOR NAME FINDER ===== */
.cn-finder{display:flex;flex-direction:column;gap:20px}
.cn-input-row{display:flex;gap:10px;align-items:center}
.cn-input-row .ct-input{flex:1}
.cn-result{display:flex;flex-direction:column;gap:16px}
.cn-pair{display:flex;gap:24px;align-items:flex-start}
.cn-pair>div{display:flex;flex-direction:column;gap:6px}
.cn-label{font-size:.82rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cn-match-info{margin-top:4px}
.cn-browse{display:flex;flex-direction:column;gap:12px}
.cn-browse h3{font-size:1rem;font-weight:600}
.divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:20px 0}

/* ===== PALETTE FROM IMAGE ===== */
.pi-preview{max-width:100%;border-radius:var(--radius);margin-top:16px;border:1px solid rgba(255,255,255,.08)}
.pi-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;margin-bottom:16px}
.pi-controls label{font-size:.88rem;color:var(--muted);font-weight:500}

/* ===== CONVERTER DETAILS ===== */
.conv-input-area{display:flex;flex-direction:column;gap:8px}
.conv-input-area label{font-size:.88rem;color:var(--accent);font-weight:600}
.conv-outputs{display:flex;flex-direction:column}
.conv-swatch--lg{height:160px}
.conv-swatch-alpha{position:relative;border-radius:var(--radius);overflow:hidden}
.conv-swatch-alpha .conv-swatch{border:none}
.component-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.component-row label{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:4px}

/* ===== HEX PICKER DETAILS ===== */
.hp-input-side{display:flex;flex-direction:column;gap:8px}
.hp-input-side label{font-size:.88rem;color:var(--accent);font-weight:600}
.hp-output-side{display:flex;flex-direction:column;gap:16px}
.hp-outputs{display:flex;flex-direction:column}

/* ===== PALETTE LOCK STATE ===== */
.palette-color.locked{opacity:.85}
.palette-color.locked .palette-swatch{box-shadow:inset 0 0 0 3px rgba(255,255,255,.2)}
.muted{color:var(--muted);font-size:.88rem}

/* ===== GLOBAL MOBILE FIX ===== */
html{overflow-x:hidden}
@media(max-width:768px){.container{padding:0 32px}}
@media(max-width:480px){.container{padding:0 28px}}
@media(max-width:360px){.container{padding:0 22px}}

/* ===== RESPONSIVE: TABLET (768px) ===== */
@media(max-width:768px){
/* --- Navigation --- */
.nav-toggle{display:flex}
.site-nav{display:none;position:absolute;top:56px;left:0;right:0;background:rgba(17,17,24,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:12px;flex-direction:column;gap:0;box-shadow:0 16px 48px rgba(0,0,0,.4);max-height:70vh;overflow-y:auto}
.site-nav.open{display:flex}
.nav-group__btn{width:100%;justify-content:space-between;padding:12px 16px;min-height:44px}
.nav-dropdown{position:static;border:none;box-shadow:none;margin:0;padding:0 0 0 16px;background:none;backdrop-filter:none}
.nav-group.open .nav-dropdown{display:flex;flex-direction:column}
.nav-dropdown a{padding:10px 16px;min-height:44px;display:flex;align-items:center}

/* --- Typography --- */
h1{font-size:1.6rem}
h2{font-size:1.15rem}

/* --- Layout --- */
.tool-page{padding-top:20px;padding-bottom:40px}
.tool-page::before{width:300px;height:250px}
.tool-hero{margin-bottom:20px}
.tool-hero p{font-size:.88rem}
.tool-panel{padding:20px;margin-bottom:24px}
.breadcrumb{margin-bottom:16px;font-size:.78rem}
.content-section{padding:20px}

/* --- Homepage --- */
.home-hero{padding-top:40px;padding-bottom:30px}
.home-hero h1{font-size:2rem}
.home-hero p{font-size:.95rem}
.home-section{padding:20px 0}
.featured-grid{grid-template-columns:1fr}

/* --- Grids collapse --- */
.converter-wrap{grid-template-columns:1fr}
.tool-grid{grid-template-columns:1fr}
.contrast-colors{grid-template-columns:1fr}
.rc-layout{grid-template-columns:1fr}
.cp-layout{grid-template-columns:1fr}
.cw-layout{grid-template-columns:1fr}
.cm-inputs{grid-template-columns:1fr}
.cm-result-area{grid-template-columns:1fr}
.cc-badges{grid-template-columns:1fr}
.hp-layout{grid-template-columns:1fr}

/* --- Palette --- */
.palette{flex-direction:column}
.palette-color{min-height:56px;flex-direction:row;align-items:stretch}
.palette-swatch{min-height:56px;width:100%}
.palette-color-info{opacity:1;font-size:.78rem}
.palette-lock{opacity:1}

/* --- Swatches --- */
.swatch-lg{height:120px}
.conv-swatch--lg{height:100px}
.swatch-strip{height:50px}

/* --- Controls --- */
.cc-inputs{flex-direction:column;align-items:stretch}
.cc-field{min-width:0}
.cc-input-row{flex-direction:row}
#cc-swap{align-self:center}
#cc-check{width:100%}
.gg-controls{flex-direction:column;align-items:stretch;gap:12px}
.st-controls{flex-direction:column;align-items:stretch;gap:12px}
.st-field{min-width:0}
.ch-controls{flex-direction:column;align-items:stretch;gap:12px}
.ch-field{min-width:0}
.cg-controls{flex-direction:column;align-items:stretch;gap:12px}
.cg-field{min-width:0}
.acp-controls{flex-direction:column;align-items:stretch;gap:12px}
.acp-field{min-width:0}
.us-controls{flex-direction:column;align-items:stretch;gap:12px}
.us-field{min-width:0}
.pg-controls{gap:10px}
.pg-export{gap:10px}

/* --- Scale --- */
.scale-wrap{flex-wrap:wrap}
.scale-step{min-width:56px}

/* --- Color Wheel --- */
.wheel-wrap{width:220px;height:220px}
.color-wheel{width:200px;height:200px}
.cw-wheel-side{align-items:center}

/* --- Contrast checker --- */
.cc-ratio strong{font-size:1.6rem}

/* --- Gradient --- */
.gradient-preview{height:140px}

/* --- Image tools --- */
.drop-zone{padding:32px 16px}

/* --- Pair generator --- */
.pair-row{flex-direction:column;gap:8px;align-items:stretch}
.pair-preview{min-width:0}

/* --- State generator --- */
.state-row{flex-direction:column;gap:8px;align-items:flex-start}
.state-hex{word-break:break-all}

/* --- CN Pair --- */
.cn-pair{flex-direction:column;gap:16px}
.cn-match-area{flex-direction:column;align-items:flex-start}

/* --- Content sections --- */
.faq-section{margin-bottom:24px}
.related-tools{margin-bottom:24px}

/* --- Footer --- */
.footer-inner{grid-template-columns:repeat(2,1fr)}
.site-footer{padding-top:32px;padding-bottom:20px;margin-top:32px}

/* --- Touch targets --- */
.ct-range::-webkit-slider-thumb{width:28px;height:28px}
.ct-range::-moz-range-thumb{width:28px;height:28px}
.ct-color{width:48px;height:44px}
.btn{min-height:44px;padding:10px 18px}
.btn--sm{min-height:38px;padding:8px 14px}
.related-link{min-height:38px;display:inline-flex;align-items:center}

/* --- Stop rows (gradient) --- */
.stop-row{flex-wrap:wrap}
}

/* ===== RESPONSIVE: MOBILE (480px) ===== */
@media(max-width:480px){
/* --- Typography --- */
h1{font-size:1.35rem}
h2{font-size:1.05rem}
body{font-size:14px}

/* --- Layout --- */
.tool-page{padding-top:16px;padding-bottom:28px}
.tool-panel{padding:16px;margin-bottom:18px}
.tool-hero{margin-bottom:14px}
.tool-hero p{font-size:.84rem}
.breadcrumb{margin-bottom:10px}
.header-inner{height:50px;gap:12px}

/* --- Homepage --- */
.home-hero{padding-top:28px;padding-bottom:20px}
.home-hero h1{font-size:1.6rem}
.home-hero p{font-size:.88rem}
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%;text-align:center;justify-content:center}
.home-section{padding:14px 0}
.category-section{margin-bottom:20px}

/* --- Converters --- */
.component-inputs{flex-direction:column}
.component-inputs .ct-input--sm{width:100%}
.component-row{flex-direction:column}
.component-row .ct-input--sm{width:100%}
.cp-rgb-fields,.cp-hsl-fields{grid-template-columns:1fr}

/* --- Palette --- */
.palette-color{min-height:48px}
.palette-info{padding:8px;gap:6px}
.pg-controls{flex-direction:column;align-items:stretch;gap:8px}
.pg-export{flex-direction:column;align-items:stretch;gap:8px}

/* --- Swatches --- */
.swatch-lg{height:90px}
.conv-swatch--lg{height:80px}
.swatch-md{width:60px;height:60px}
.swatch-strip{height:40px}

/* --- Scale --- */
.scale-step{min-width:48px}
.scale-swatch{min-height:48px}
.scale-hex{font-size:.65rem;padding:4px 2px}

/* --- Controls --- */
.cc-input-row{flex-direction:column}
.cm-input-row{flex-direction:column}
.ch-input-row{flex-direction:column}
.cn-input-row{flex-direction:column}
.cn-input-row .ct-input{width:100%}
.stop-row{gap:6px}
.stop-row .ct-input--sm{width:56px}

/* --- Gradient --- */
.gradient-preview{height:100px}

/* --- Color Wheel --- */
.wheel-wrap{width:180px;height:180px}
.color-wheel{width:160px;height:160px}

/* --- Image tools --- */
.drop-zone{padding:24px 12px;font-size:.85rem}
.ip-result{flex-direction:column}

/* --- Contrast checker --- */
.cc-ratio{padding:12px}
.cc-ratio strong{font-size:1.4rem}
.cc-badge-row{padding:8px 10px}

/* --- Pair/state rows --- */
.pair-row{padding:10px 12px}
.state-row{padding:10px 12px}
.state-swatch{width:36px;height:36px}

/* --- Content sections --- */
.content-section{padding:14px}
.faq-item summary{padding:12px 14px;font-size:.86rem}
.faq-item p,.faq-item div{padding:12px 14px;font-size:.84rem}
.related-tools{margin-bottom:18px}
.faq-section{margin-bottom:18px}

/* --- Footer --- */
.footer-inner{grid-template-columns:1fr}
.site-footer{padding-top:24px;padding-bottom:16px;margin-top:24px}
.footer-bottom{padding-top:16px;margin-top:16px}

/* --- CSS output --- */
.css-output,.us-css-output{font-size:.75rem;padding:10px 12px;word-break:break-all}

/* --- Harmony sections --- */
.harmony-section{padding:12px}
.harmony-section .palette{border-radius:var(--radius-sm)}

/* --- Accessible palette --- */
.ap-controls .btn--primary{align-self:stretch;text-align:center}

/* --- Tabs --- */
.st-tabs{flex-wrap:wrap}
.st-tabs .btn--sm{flex:1;min-width:0;text-align:center;justify-content:center}
}

/* ===== RESPONSIVE: SMALL PHONE (360px) ===== */
@media(max-width:360px){
.tool-panel{padding:14px}
h1{font-size:1.2rem}
.home-hero h1{font-size:1.35rem}
.tool-hero p{font-size:.8rem}
.swatch-lg{height:72px}
.conv-swatch--lg{height:64px}
.palette-color{min-height:44px}
.scale-step{min-width:40px}
.gradient-preview{height:80px}
.cc-ratio strong{font-size:1.2rem}
.tool-panel::before{height:1px}
.named-swatch{width:36px;height:36px}
}