.color-top-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:1.5rem; }
.color-preview-panel { display:flex; flex-direction:column; gap:0.75rem; }
.palette-section { margin-top:0.75rem; }
.palette-section h4 { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); margin-bottom:0.5rem; }
.palette-grid { display:flex; gap:0; border-radius:var(--radius); overflow:hidden; border:2px solid var(--border); }
.palette-color { flex:1; height:60px; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:0 4px 6px; position:relative; transition:flex 0.2s; }
.palette-color:hover { flex:1.5; }
.palette-color span { font-size:0.6rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5); opacity:0.9; }
.export-btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:0.5rem; }
.export-btn { padding:6px 12px; font-size:0.72rem; font-weight:600; border:2px solid var(--border); border-radius:100px; background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; font-family:var(--font); }
.export-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.cb-sim-wrap { display:flex; gap:6px; flex-wrap:wrap; margin-top:0.5rem; }
.cb-sim-btn { padding:5px 10px; font-size:0.7rem; font-weight:600; border:2px solid var(--border); border-radius:100px; background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; font-family:var(--font); }
.cb-sim-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.cb-sim-btn.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
@media (max-width:800px) { .color-top-grid { grid-template-columns:1fr; } }


.input-icon-wrap { display:flex; gap:0.375rem; }
.input-icon-wrap input { flex:1; }
.input-copy-btn { width:44px;height:44px;padding:0;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-secondary);cursor:pointer;font-size:1rem;transition:all 0.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.input-copy-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-light); }
.input-group-inline { display:flex;gap:0.375rem; }
.input-group-inline input { flex:1;min-width:0;text-align:center;padding:0.625rem 0.25rem; }
.input-labels { display:flex;gap:0.375rem;margin-top:0.25rem; }
.input-labels span { flex:1;text-align:center;font-size:0.7rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.06em; }
.color-preview-wrap { margin-bottom:1rem;border-radius:var(--radius);overflow:hidden;border:2px solid var(--border);background:var(--bg-card); }
.color-swatch { height:120px;display:flex;align-items:flex-end;justify-content:center;padding:1rem;transition:background 0.15s;position:relative; }
.color-swatch-hex { font-family:'Courier New',monospace;font-size:1.3rem;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.4),0 0 2px rgba(0,0,0,0.2);letter-spacing:0.03em;background:rgba(0,0,0,0.25);padding:0.25rem 0.75rem;border-radius:6px;backdrop-filter:blur(4px); }
.color-swatch-stripes { display:flex;height:28px; }
.color-stripe { flex:1;transition:background 0.15s;position:relative; }
.color-stripe:not(:last-child) { border-right:1px solid var(--border); }
.color-stripe:hover::after { content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:0.65rem;padding:2px 6px;border-radius:4px;white-space:nowrap;z-index:10;pointer-events:none; }
.named-color-box { display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius-sm);margin-bottom:1rem;font-size:0.9rem; }
.named-label { color:var(--text-secondary);font-weight:500;flex-shrink:0; }
.named-value { font-weight:700;color:var(--text); }
.contrast-box { padding:1rem;border:2px solid var(--border);border-radius:var(--radius-sm);margin-bottom:1rem;background:var(--bg-card); }
.contrast-box h4 { font-size:0.85rem;margin-bottom:0.75rem;color:var(--text);font-weight:700; }
.contrast-item { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.375rem;font-size:0.85rem; }
.contrast-label { color:var(--text-secondary);min-width:5rem; }
.contrast-value { font-weight:700;font-family:'Courier New',monospace;color:var(--text);min-width:4.5rem; }
.contrast-badge { font-size:0.65rem;font-weight:700;padding:1px 6px;border-radius:4px;text-transform:uppercase; }
.contrast-badge.aa-pass { background:#43A047;color:#fff; } .contrast-badge.aa-fail { background:#E53935;color:#fff; }
.contrast-badge.aaa-pass { background:#1B5E20;color:#fff; } .contrast-badge.aaa-fail { background:#B71C1C;color:#fff; }
.contrast-desc { margin-top:0.5rem;font-size:0.8rem;color:var(--text-secondary);font-weight:500; }
.gradient-box { padding:1rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card); }
.gradient-box h4 { font-size:0.85rem;margin-bottom:0.5rem;color:var(--text);font-weight:700; }
.gradient-bar { height:32px;border-radius:6px;transition:background 0.2s;margin-bottom:0.375rem; }
.gradient-info { font-size:0.75rem;color:var(--text-tertiary);text-align:center; }
@media (max-width:800px) { .color-swatch{height:80px;} .color-swatch-hex{font-size:1rem;} }
@media (max-width:480px) { .input-group-inline input{font-size:0.85rem;padding:0.5rem 0.2rem;} .input-copy-btn{width:40px;font-size:0.85rem;} }