.cc-page-header{max-width:960px;margin:0 auto;padding:24px 16px 8px;text-align:center}.cc-wrapper{max-width:960px;margin:0 auto;padding:0 16px 48px}.cc-layout{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}@media(max-width:767px){.cc-layout{display:flex;flex-direction:column;gap:16px;overflow-x:hidden}.cc-input-col,.cc-result-col{min-width:0;max-width:100%}}.cc-section{background:var(--swp-surface, #fff);border:1px solid var(--swp-border, #e5e7eb);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}.cc-section:last-child{margin-bottom:0}.cc-section-title{font-size:14px;font-weight:800;color:var(--swp-ink);margin:0}.cc-presets{display:flex;flex-wrap:wrap;gap:6px}.cc-preset-btn{padding:6px 10px;min-height:36px;border:1px solid var(--swp-border, #e5e7eb);border-radius:20px;background:var(--swp-surface, #fff);font-size:12px;cursor:pointer;transition:background .15s,border-color .15s;color:var(--swp-ink)}.cc-preset-btn:hover{background:var(--swp-bg, #f9fafb)}.cc-preset-btn--active{background:var(--color-primary, #0d9488);color:var(--color-primary-content, #fff);border-color:var(--color-primary, #0d9488);font-weight:700}.cc-color-inputs{display:flex;flex-direction:column;gap:4px}.cc-color-input-group{display:flex;flex-direction:column;gap:6px}.cc-color-label{font-size:12px;font-weight:700;color:var(--swp-ink-muted)}.cc-color-row{display:flex;align-items:center;gap:8px}.cc-color-picker{width:48px;height:48px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;cursor:pointer;padding:2px;flex-shrink:0}.cc-color-hex-input{font-family:Courier New,Courier,monospace;font-size:15px;width:110px;padding:8px 10px;border:2px solid var(--swp-border, #e5e7eb);border-radius:8px;text-transform:uppercase;color:var(--swp-ink);background:var(--swp-bg, #f9fafb);transition:border-color .15s}.cc-color-hex-input:focus{outline:none;border-color:var(--color-primary, #0d9488)}.cc-color-hex-input--invalid{border-color:#ef4444}.cc-copy-color-btn{min-width:36px;min-height:36px;padding:4px 8px;border:1px solid var(--swp-border, #e5e7eb);border-radius:6px;background:var(--swp-surface, #fff);font-size:14px;cursor:pointer;transition:background .15s}.cc-copy-color-btn:hover{background:var(--swp-bg, #f9fafb)}.cc-swap-btn{display:block;margin:6px 0;min-height:44px;min-width:44px;padding:8px 16px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-surface, #fff);font-size:13px;font-weight:700;cursor:pointer;color:var(--swp-ink);align-self:center;transition:background .15s}.cc-swap-btn:hover{background:var(--swp-bg, #f9fafb)}.cc-score-card{text-align:center;padding:24px 16px;border-radius:16px;margin-bottom:12px;border:1px solid var(--swp-border, #e5e7eb);transition:background .2s,color .2s}.cc-score-ratio{font-size:clamp(36px,8vw,54px);font-weight:800;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}.cc-score-rating{font-size:16px;font-weight:700;margin-top:8px}.cc-score-rating--pass{color:#059669}.cc-score-rating--partial{color:#d97706}.cc-score-rating--fail{color:#dc2626}.cc-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.cc-badge{padding:12px 8px;border-radius:8px;text-align:center;display:flex;flex-direction:column;gap:2px}.cc-badge--pass{background:#d1fae5;color:#065f46}.cc-badge--fail{background:#fee2e2;color:#7f1d1d}.cc-badge-level{font-size:16px;font-weight:800;display:block}.cc-badge-sub{font-size:11px;opacity:.75;display:block}.cc-badge-status{font-size:13px;font-weight:700;display:block;margin-top:4px}.cc-preview{border-radius:12px;padding:20px;margin-bottom:12px;border:1px solid var(--swp-border, #e5e7eb);transition:background .2s,color .2s}.cc-preview-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}.cc-preview-normal{font-size:14px;line-height:1.6;margin:0 0 16px}.cc-preview-large{font-size:24px;font-weight:700;line-height:1.3;margin:0}.cc-suggestions{display:flex;flex-direction:column;gap:8px}.cc-suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-bg, #f9fafb)}.cc-suggestion-swatches{display:flex;gap:4px;flex-shrink:0}.cc-suggestion-swatch{display:block;width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.15)}.cc-suggestion-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.cc-suggestion-label{font-size:12px;font-weight:700;color:var(--swp-ink)}.cc-suggestion-ratio{font-size:11px;color:var(--swp-ink-muted)}.cc-suggestion-apply-btn{padding:6px 12px;border:none;border-radius:6px;background:var(--color-primary, #0d9488);color:var(--color-primary-content, #fff);font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;transition:opacity .15s}.cc-suggestion-apply-btn:hover{opacity:.85}.cc-how-to{max-width:960px;margin:48px auto 0;padding:0 16px}.cc-section-heading{font-size:20px;font-weight:800;color:var(--swp-ink);margin:0 0 16px}.cc-steps{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.7;color:var(--swp-ink)}.cc-related-section{max-width:960px;margin:32px auto 0;padding:0 16px}.cc-related-tools{display:flex;flex-direction:column;gap:8px}.cc-related-link{color:var(--color-primary, #0d9488);text-decoration:none;font-size:15px}.cc-related-link:hover{text-decoration:underline}