.tool-hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:1rem;}
.hero-text{flex:1;min-width:260px;}
.hero-text h1{font-size:40px;font-weight:700;line-height:1.2;margin-bottom:0;}
.hero-subtitle{font-size:18px;color:var(--text-muted);max-width:640px;margin-bottom:1rem;margin-top:0;}
@media (max-width:767px){.hero-text h1{font-size:clamp(1.75rem,5vw,2.5rem);}.hero-subtitle{font-size:clamp(1rem,3vw,1.125rem);}}
:root{--cca-bg:#0d0e12;--cca-surface:#14161c;--cca-border:#252830;--cca-text:#e6e8ec;--cca-muted:#6b7280;--cca-accent:#06b6d4;--cca-accent-hover:#22d3ee;--cca-pass:#10b981;--cca-fail:#ef4444;--cca-warn:#f59e0b;--cca-radius:10px;--cca-radius-sm:6px;--cca-focus:0 0 0 3px rgba(6,182,212,0.4);--cca-shadow:0 2px 16px rgba(0,0,0,0.2);}
.bmc-color .container{--text-muted:var(--cca-muted);}
.cca-tool{display:flex;flex-direction:column;margin-bottom:2rem;}
.cca-card{background:var(--cca-surface);border:1px solid var(--cca-border);border-radius:var(--cca-radius);box-shadow:var(--cca-shadow);padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;}
.cca-card-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.cca-col-inputs{display:flex;flex-direction:column;gap:1.25rem;min-width:0;}
.cca-col-results{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.cca-pickers{display:flex;flex-direction:column;gap:1rem;}
.cca-picker-row{display:flex;flex-direction:column;gap:0.5rem;}
.cca-picker-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--cca-muted);}
.cca-picker-inner{display:flex;align-items:center;gap:0.75rem;}
.cca-color-input{width:56px;height:56px;min-width:56px;padding:4px;border:2px solid var(--cca-border);border-radius:var(--cca-radius-sm);background:var(--cca-bg);cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s;}
.cca-color-input:hover{border-color:var(--cca-accent);}
.cca-color-input:focus{outline:none;box-shadow:var(--cca-focus);}
.cca-hex-input{flex:1;min-width:0;padding:0.75rem 1rem;font-size:0.9375rem;font-weight:600;font-family:ui-monospace,monospace;letter-spacing:0.04em;background:var(--cca-bg);border:1px solid var(--cca-border);border-radius:var(--cca-radius-sm);color:var(--cca-text);}
.cca-hex-input::placeholder{color:var(--cca-muted);}
.cca-hex-input:focus{outline:none;border-color:var(--cca-accent);}
.cca-preview{min-height:80px;padding:1.25rem 1.5rem;border-radius:var(--cca-radius);border:1px solid var(--cca-border);display:flex;align-items:center;justify-content:center;transition:background-color 0.2s,color 0.2s;}
.cca-preview-sample{font-size:1.125rem;font-weight:600;}
.cca-samples{display:grid;grid-template-columns:1fr;gap:1rem;}
.cca-sample{padding:1rem 1.25rem;border-radius:var(--cca-radius-sm);border:1px solid var(--cca-border);transition:background-color 0.2s,color 0.2s;}
.cca-sample-label{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--cca-muted);margin-bottom:0.5rem;}
.cca-sample p{margin:0;font-size:0.9375rem;line-height:1.5;}
.cca-sample#cca-sample-large p{font-size:1.125rem;font-weight:600;}
.cca-results{background:var(--cca-surface);border:1px solid var(--cca-border);border-radius:var(--cca-radius);padding:1.25rem;box-shadow:var(--cca-shadow);}
.cca-ratio-wrap{text-align:center;margin-bottom:1rem;}
.cca-ratio-label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--cca-muted);margin-bottom:0.25rem;}
.cca-ratio-value{font-size:2.25rem;font-weight:800;letter-spacing:-0.02em;color:var(--cca-text);line-height:1.1;}
.cca-wcag{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1rem;}
.cca-wcag-item{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.5rem;padding:0.75rem;background:var(--cca-bg);border:1px solid var(--cca-border);border-radius:var(--cca-radius-sm);}
.cca-wcag-name{font-size:0.8125rem;font-weight:700;color:var(--cca-text);width:100%;}
.cca-wcag-badge{padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:700;border-radius:999px;}
.cca-wcag-badge[data-pass="true"]{background:var(--cca-pass);color:#fff;}
.cca-wcag-badge[data-pass="false"]{background:var(--cca-fail);color:#fff;}
.cca-wcag-hint{font-size:0.6875rem;color:var(--cca-muted);}
.cca-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
.cca-metric{display:flex;flex-direction:column;gap:0.25rem;}
.cca-metric-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--cca-muted);}
.cca-metric-value{font-size:0.9375rem;font-weight:600;color:var(--cca-text);}
.cca-metric-value.cca-ok{color:var(--cca-pass);}
.cca-metric-value.cca-warning{color:var(--cca-warn);}
.cca-metric-value.cca-bad{color:var(--cca-fail);}
.cca-suggestions{padding:1rem;background:rgba(245,158,11,0.08);border:1px solid var(--cca-warn);border-radius:var(--cca-radius);}
.cca-suggestions[hidden]{display:none;}
.cca-suggestions-title{display:block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--cca-warn);margin-bottom:0.75rem;}
.cca-suggestions-list{display:flex;flex-direction:column;gap:0.5rem;}
.cca-suggestion-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;background:var(--cca-bg);border:1px solid var(--cca-border);border-radius:var(--cca-radius-sm);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.cca-suggestion-item:hover{border-color:var(--cca-accent);background:rgba(6,182,212,0.08);}
.cca-suggestion-swatch{width:40px;height:40px;min-width:40px;border-radius:var(--cca-radius-sm);border:1px solid var(--cca-border);}
.cca-suggestion-desc{font-size:0.875rem;font-weight:600;color:var(--cca-text);}
.cca-suggestion-ratio{font-size:0.75rem;color:var(--cca-muted);}
.cca-batch{padding:1.25rem 0 0;border-top:1px solid var(--cca-border);}
.cca-batch-title{display:block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--cca-muted);margin-bottom:0.75rem;}
.cca-batch-add{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.cca-batch-add .cca-color-input{width:48px;height:48px;min-width:48px;}
.cca-batch-add .cca-btn-add{margin-left:auto;}
.cca-batch-list{list-style:none;margin:0.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}
.cca-batch-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;background:var(--cca-bg);border:1px solid var(--cca-border);border-radius:var(--cca-radius-sm);}
.cca-batch-item-swatches{display:flex;gap:0.5rem;}
.cca-batch-item-swatch{width:28px;height:28px;min-width:28px;border-radius:4px;border:1px solid var(--cca-border);}
.cca-batch-item-ratio{font-size:0.8125rem;font-weight:700;color:var(--cca-text);margin-left:auto;}
.cca-batch-item-remove{padding:0.25rem 0.5rem;font-size:0.875rem;background:transparent;border:1px solid var(--cca-border);border-radius:4px;color:var(--cca-muted);cursor:pointer;transition:color 0.2s,border-color 0.2s;}
.cca-batch-item-remove:hover{color:var(--cca-fail);border-color:var(--cca-fail);}
.cca-batch-actions{display:flex;gap:0.5rem;margin-top:0.75rem;}
.cca-actions{display:flex;flex-wrap:wrap;gap:0.5rem;padding-top:1rem;border-top:1px solid var(--cca-border);}
.cca-btn{padding:0.625rem 1.125rem;font-size:0.875rem;font-weight:600;border-radius:var(--cca-radius-sm);border:1px solid var(--cca-border);background:var(--cca-bg);color:var(--cca-text);cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.1s;}
.cca-btn:hover{border-color:var(--cca-accent);background:rgba(6,182,212,0.1);}
.cca-btn:active{transform:scale(0.98);}
.cca-btn:focus{outline:none;box-shadow:var(--cca-focus);}
.cca-btn-primary{border-color:var(--cca-accent);background:var(--cca-accent);color:#0d0e12;}
.cca-btn-primary:hover{background:var(--cca-accent-hover);border-color:var(--cca-accent-hover);color:#0d0e12;}
.cca-btn-outline{}
.cca-btn-ghost{border-color:transparent;background:transparent;}
.cca-btn-ghost:hover{background:rgba(6,182,212,0.1);}
.cca-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);padding:0.75rem 1.25rem;border-radius:var(--cca-radius-sm);background:var(--cca-surface);border:1px solid var(--cca-border);color:var(--cca-text);font-size:0.875rem;font-weight:600;box-shadow:var(--cca-shadow);transition:transform 0.25s ease;z-index:1000;}
.cca-toast[data-show="true"]{transform:translateX(-50%) translateY(0);}
@media (min-width:480px){.cca-picker-inner{max-width:280px;}.cca-samples{grid-template-columns:1fr 1fr;}}
@media (min-width:768px){.cca-card{padding:1.5rem;}.cca-card-grid{grid-template-columns:1fr 1fr;gap:2rem;}.cca-col-results{min-height:0;}}
@media (min-width:640px){.cca-ratio-value{font-size:2.75rem;}.cca-wcag{gap:1rem;}.cca-metrics{gap:1rem;}}
@media (prefers-color-scheme:light){:root{--cca-bg:#f4f5f7;--cca-surface:#fff;--cca-border:#e2e4e9;--cca-text:#1a1d24;--cca-muted:#5c6174;--cca-accent:#0891b2;--cca-accent-hover:#0e7490;--cca-pass:#059669;--cca-fail:#dc2626;--cca-warn:#d97706;--cca-focus:0 0 0 3px rgba(8,145,178,0.3);--cca-shadow:0 2px 12px rgba(0,0,0,0.06);}}