.dashboard-container{max-width:1100px}.page-title{color:#fff;margin:0 0 6px;font-size:1.8rem;font-weight:800}.page-subtitle{color:#88a;margin:0 0 24px;font-size:.9rem;line-height:1.6}.breadcrumb{color:#88a;margin-bottom:16px;font-size:.78rem}.breadcrumb a{color:#88a;text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:#22d3ee}.breadcrumb .sep{opacity:.5;margin:0 6px}.cc-sub-title{color:#fff;margin:0 0 12px;font-size:.95rem;font-weight:700}.cc-sub-note{color:#88a;margin-left:8px;font-size:.74rem;font-weight:400}.cc-layout{grid-template-columns:1fr 1fr;gap:20px;margin-top:4px;display:grid}@media (width<=900px){.cc-layout{grid-template-columns:minmax(0,1fr);overflow:hidden}}.cc-picker-row{align-items:center;gap:10px;margin-bottom:16px;display:flex}.cc-native-picker{cursor:pointer;background:0 0;border:2px solid #ffffff1a;border-radius:10px;flex-shrink:0;width:48px;height:48px;padding:2px}.cc-native-picker::-webkit-color-swatch-wrapper{padding:0}.cc-native-picker::-webkit-color-swatch{border:none;border-radius:6px}.cc-native-picker::-moz-color-swatch{border:none;border-radius:6px}.cc-native-picker--sm{width:40px;height:40px}.cc-text-input{flex:1;font-family:JetBrains Mono,Courier New,monospace;font-size:.95rem;font-weight:600}.cc-text-input.input-error{box-shadow:0 0 0 2px #ef444426;border-color:#ef4444b3!important}.cc-alpha-row{margin-bottom:14px}.cc-swatch-wrap{background-color:#222;background-image:linear-gradient(45deg,#444 25%,#0000 25%),linear-gradient(-45deg,#444 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#444 75%),linear-gradient(-45deg,#0000 75%,#444 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border:2px solid #ffffff14;border-radius:14px;width:100%;height:160px;margin-bottom:10px;position:relative;overflow:hidden}.cc-swatch{width:100%;height:100%;transition:background-color .15s}.cc-color-name{text-align:center;color:#88a;letter-spacing:.03em;margin-bottom:12px;font-size:.82rem;font-weight:600}.cc-recent-section{margin-top:4px}.cc-recent-strip{flex-wrap:wrap;gap:6px;min-height:28px;margin-top:6px;display:flex}.cc-recent-dot{cursor:pointer;border:2px solid #ffffff1a;border-radius:6px;flex-shrink:0;width:28px;height:28px;transition:transform .15s,border-color .15s}.cc-recent-dot:hover{border-color:#22d3ee80;transform:scale(1.15)}.cc-recent-empty{color:#666;align-self:center;font-size:.78rem;font-style:italic}.cc-fmt-badge{color:#22d3ee;vertical-align:middle;letter-spacing:.04em;background:#22d3ee1f;border:1px solid #22d3ee40;border-radius:4px;margin-left:4px;padding:1px 5px;font-size:.64rem;font-weight:700;display:inline-block}.cc-format-row{margin-bottom:14px}.cc-format-row:last-child{margin-bottom:0}.cc-field-wrap{align-items:center;gap:6px;display:flex}.cc-format-input{flex:1;font-family:JetBrains Mono,Courier New,monospace;font-size:.88rem;font-weight:600}.cc-copy-btn{color:#88a;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:color .2s,background .2s,border-color .2s;display:flex}.cc-copy-btn:hover{color:#22d3ee;background:#22d3ee14;border-color:#22d3ee4d}.cc-stat-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;display:grid}@media (width<=600px){.cc-stat-grid{grid-template-columns:repeat(2,1fr)}}.cc-stat-cell{text-align:center;background:#ffffff08;border:1px solid #ffffff0f;border-radius:10px;flex-direction:column;align-items:center;padding:12px 8px;display:flex}.cc-stat-value{color:#22d3ee;margin-bottom:3px;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700;line-height:1.2}.cc-stat-label{color:#88a;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.cc-action-bar{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.cc-contrast-layout{grid-template-columns:1fr 1fr;gap:20px;margin-top:4px;display:grid}@media (width<=900px){.cc-contrast-layout{grid-template-columns:minmax(0,1fr);overflow:hidden}}.cc-contrast-pair{align-items:flex-start;gap:12px;display:flex}.cc-contrast-input-group{flex:1}.cc-mini-swatch{border:1px solid #ffffff14;border-radius:8px;width:100%;height:32px;margin-top:8px}.cc-swap-btn{color:#88a;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;margin-top:28px;font-size:1.1rem;transition:color .2s,background .2s,border-color .2s;display:flex}.cc-swap-btn:hover{color:#22d3ee;background:#22d3ee14;border-color:#22d3ee4d}.cc-ratio-display{text-align:center;padding:20px 0 10px}.cc-ratio-value{color:#22d3ee;font-family:JetBrains Mono,monospace;font-size:2.4rem;font-weight:800;line-height:1;display:block}.cc-ratio-label{color:#88a;text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-size:.75rem;display:block}.cc-luminance-row{justify-content:center;gap:16px;margin-bottom:12px;display:flex}.cc-lum-item{color:#88a;font-family:JetBrains Mono,monospace;font-size:.8rem}.cc-lum-item strong{color:#ccc}.cc-preview-text-row{margin-bottom:10px}.cc-preview-text-input{font-size:.85rem}.cc-preview-box{border:1px solid #ffffff0f;border-radius:12px;margin-bottom:16px;padding:20px}.cc-preview-normal{margin:0 0 8px;font-size:16px;line-height:1.4}.cc-preview-large{margin:0;font-size:24px;font-weight:700;line-height:1.3}.cc-wcag-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.cc-wcag-cell{background:#ffffff08;border:1px solid #ffffff0f;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.cc-wcag-level{color:#ccc;font-size:.78rem;font-weight:600}.cc-wcag-badge{letter-spacing:.02em;border-radius:20px;padding:3px 10px;font-size:.72rem;font-weight:700}.cc-wcag-badge.pass{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.cc-wcag-badge.fail{color:#f87171;background:#ef44441f;border:1px solid #ef444440}.cc-fixit-section{background:#ffffff05;border:1px solid #ffffff0f;border-radius:14px;margin-top:20px;padding:20px}.cc-fixit-cards{flex-wrap:wrap;gap:12px;display:flex}.cc-fixit-card{background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;flex:1;align-items:center;gap:10px;min-width:160px;padding:10px 14px;display:flex}.cc-fixit-swatch{border:1px solid #ffffff1f;border-radius:8px;flex-shrink:0;width:36px;height:36px}.cc-fixit-info{flex:1;min-width:0}.cc-fixit-label{color:#88a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-size:.72rem}.cc-fixit-hex{color:#fff;font-family:JetBrains Mono,monospace;font-size:.88rem;font-weight:700;display:block}.cc-fixit-ratio{color:#34d399;margin-top:1px;font-family:JetBrains Mono,monospace;font-size:.75rem}.cc-fixit-btns{flex-direction:column;gap:4px;display:flex}.cc-fixit-apply,.cc-fixit-copy{color:#ccc;cursor:pointer;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:4px 8px;font-size:.7rem;transition:background .2s,color .2s}.cc-fixit-apply:hover,.cc-fixit-copy:hover{color:#22d3ee;background:#22d3ee1a;border-color:#22d3ee4d}.cc-fixit-none{color:#34d399;font-size:.85rem}.cc-cb-section{background:#ffffff05;border:1px solid #ffffff0f;border-radius:14px;margin-top:20px;padding:20px}.cc-cb-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}@media (width<=700px){.cc-cb-grid{grid-template-columns:repeat(2,1fr)}}.cc-cb-box{flex-direction:column;align-items:center;gap:4px;display:flex}.cc-cb-type-label{color:#ccc;font-size:.8rem;font-weight:700}.cc-cb-type-desc{color:#88a;text-align:center;margin-bottom:6px;font-size:.7rem}.cc-cb-preview{border:1px solid #ffffff14;border-radius:10px;justify-content:center;align-items:center;width:100%;min-height:60px;font-size:1.6rem;font-weight:800;display:flex}.cc-harmony-swatches{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.cc-harmony-card{flex-direction:column;flex:1;align-items:center;min-width:80px;max-width:140px;display:flex}.cc-harmony-card--base .cc-harmony-swatch{border-color:#22d3ee80;box-shadow:0 0 0 2px #22d3ee33}.cc-harmony-swatch{aspect-ratio:1;cursor:default;border:2px solid #ffffff1a;border-radius:10px;width:100%;min-height:60px;margin-bottom:6px;transition:transform .15s}.cc-harmony-info{text-align:center;width:100%}.cc-harmony-hex{color:#ccc;margin-bottom:2px;font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:700;display:block}.cc-harmony-tag{color:#88a;margin-bottom:4px;font-size:.68rem;display:block}.cc-harmony-copy{color:#88a;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;padding:3px 8px;font-size:.7rem;transition:color .2s,background .2s}.cc-harmony-copy:hover{color:#22d3ee;background:#22d3ee14;border-color:#22d3ee4d}.cc-shades-ladder{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.cc-shade-card{flex-direction:column;flex:1;align-items:center;min-width:56px;max-width:90px;display:flex}.cc-shade-card--base .cc-shade-swatch{border-color:#22d3ee99;box-shadow:0 0 0 2px #22d3ee33}.cc-shade-swatch{aspect-ratio:1;border:2px solid #ffffff0f;border-radius:8px;width:100%;min-height:40px;margin-bottom:4px;transition:transform .15s}.cc-shade-name{color:#88a;margin-bottom:2px;font-family:JetBrains Mono,monospace;font-size:.68rem;display:block}.cc-shade-hex{color:#666;margin-bottom:3px;font-family:JetBrains Mono,monospace;font-size:.65rem;display:block}.cc-shade-copy{color:#666;cursor:pointer;background:#ffffff08;border:1px solid #ffffff0f;border-radius:5px;padding:2px 6px;font-size:.65rem;transition:color .2s,background .2s}.cc-shade-copy:hover{color:#22d3ee;background:#22d3ee0f;border-color:#22d3ee40}.cc-export-btns{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.cc-export-output{resize:vertical;font-family:JetBrains Mono,Courier New,monospace;font-size:.8rem}.section-title{color:#fff;margin:0 0 20px;font-size:1.25rem;font-weight:800}.how-section{margin-top:48px}.how-steps{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=700px){.how-steps{grid-template-columns:minmax(0,1fr);overflow:hidden}}.how-step{background:#ffffff05;border:1px solid #ffffff0f;border-radius:14px;padding:20px}.how-step__num{color:#22d3ee;background:#22d3ee1f;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:10px;font-size:.85rem;font-weight:800;display:inline-flex}.how-step__title{color:#fff;margin:0 0 6px;font-size:.95rem;font-weight:700}.how-step__desc{color:#88a;margin:0;font-size:.82rem;line-height:1.6}.faq-section{margin-top:40px}.faq-list{flex-direction:column;display:flex}.faq-item-enhanced{border-bottom:1px solid #ffffff0f}.faq-item__question{cursor:pointer;color:#fff;user-select:none;justify-content:space-between;align-items:center;padding:14px 4px;font-size:.9rem;font-weight:600;list-style:none;transition:color .2s;display:flex}.faq-item__question::-webkit-details-marker{display:none}.faq-item__question:after{content:"+";color:#88a;flex-shrink:0;margin-left:16px;font-family:JetBrains Mono,monospace;font-size:1.1rem;transition:color .2s}.faq-item-enhanced[open] .faq-item__question:after{content:"−";color:#22d3ee}.faq-item__question:hover{color:#22d3ee}.faq-item__answer{color:#88a;padding:0 4px 14px;font-size:.85rem;line-height:1.75}[data-theme=light] .page-title{color:#0f172a}[data-theme=light] .page-subtitle{color:#475569}[data-theme=light] .breadcrumb,[data-theme=light] .breadcrumb a{color:#64748b}[data-theme=light] .breadcrumb a:hover{color:#0891b2}[data-theme=light] .cc-sub-title{color:#0f172a}[data-theme=light] .cc-sub-note{color:#64748b}[data-theme=light] .cc-native-picker{border-color:#00000026}[data-theme=light] .cc-swatch-wrap{background-color:#eee;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);border-color:#0000001f}[data-theme=light] .cc-color-name{color:#64748b}[data-theme=light] .cc-recent-dot{border-color:#00000026}[data-theme=light] .cc-recent-dot:hover{border-color:#0891b299}[data-theme=light] .cc-recent-empty{color:#94a3b8}[data-theme=light] .cc-fmt-badge{color:#0891b2;background:#0891b21a;border-color:#0891b240}[data-theme=light] .cc-copy-btn{color:#64748b;background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-copy-btn:hover{color:#0891b2;background:#0891b214;border-color:#0891b24d}[data-theme=light] .cc-text-input.input-error{border-color:#dc2626cc!important}[data-theme=light] .cc-stat-cell{background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-stat-value{color:#0891b2}[data-theme=light] .cc-stat-label{color:#64748b}[data-theme=light] .cc-mini-swatch{border-color:#0000001f}[data-theme=light] .cc-swap-btn{color:#64748b;background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-swap-btn:hover{color:#0891b2;background:#0891b214;border-color:#0891b24d}[data-theme=light] .cc-ratio-value{color:#0891b2}[data-theme=light] .cc-ratio-label,[data-theme=light] .cc-luminance-row .cc-lum-item{color:#64748b}[data-theme=light] .cc-luminance-row .cc-lum-item strong{color:#334155}[data-theme=light] .cc-preview-box{border-color:#0000001a}[data-theme=light] .cc-wcag-cell{background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-wcag-level{color:#334155}[data-theme=light] .cc-wcag-badge.pass{color:#166534;background:#f0fdf4;border-color:#16a34a4d}[data-theme=light] .cc-wcag-badge.fail{color:#991b1b;background:#fff1f2;border-color:#dc262640}[data-theme=light] .cc-fixit-section{background:#eff9fb;border-color:#0891b233}[data-theme=light] .cc-fixit-card{background:#fff;border-color:#0000001a}[data-theme=light] .cc-fixit-swatch{border-color:#00000026}[data-theme=light] .cc-fixit-label{color:#64748b}[data-theme=light] .cc-fixit-hex{color:#0f172a}[data-theme=light] .cc-fixit-ratio{color:#065f46}[data-theme=light] .cc-fixit-apply,[data-theme=light] .cc-fixit-copy{color:#475569;background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-fixit-apply:hover,[data-theme=light] .cc-fixit-copy:hover{color:#0891b2;background:#0891b214;border-color:#0891b24d}[data-theme=light] .cc-fixit-none{color:#065f46}[data-theme=light] .cc-cb-section{background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-cb-type-label{color:#334155}[data-theme=light] .cc-cb-type-desc{color:#64748b}[data-theme=light] .cc-cb-preview{border-color:#0000001a}[data-theme=light] .cc-harmony-card--base .cc-harmony-swatch{border-color:#0891b299;box-shadow:0 0 0 2px #0891b226}[data-theme=light] .cc-harmony-swatch{border-color:#0000001f}[data-theme=light] .cc-harmony-hex{color:#334155}[data-theme=light] .cc-harmony-tag{color:#64748b}[data-theme=light] .cc-harmony-copy{color:#64748b;background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-harmony-copy:hover{color:#0891b2;background:#0891b214;border-color:#0891b24d}[data-theme=light] .cc-shade-card--base .cc-shade-swatch{border-color:#0891b299;box-shadow:0 0 0 2px #0891b226}[data-theme=light] .cc-shade-swatch{border-color:#0000001f}[data-theme=light] .cc-shade-name{color:#64748b}[data-theme=light] .cc-shade-hex{color:#94a3b8}[data-theme=light] .cc-shade-copy{color:#64748b;background:#f0f4f9;border-color:#0000001a}[data-theme=light] .cc-shade-copy:hover{color:#0891b2;background:#0891b214;border-color:#0891b24d}[data-theme=light] .section-title{color:#0f172a}[data-theme=light] .how-step{background:#fff;border-color:#0000001a;box-shadow:0 1px 4px #0000000f}[data-theme=light] .how-step__num{color:#0891b2;background:#0891b21a}[data-theme=light] .how-step__title{color:#0f172a}[data-theme=light] .how-step__desc{color:#475569}[data-theme=light] .faq-list{gap:8px}[data-theme=light] .faq-item-enhanced{background:#fff;border:1px solid #0000001a;border-radius:10px;transition:box-shadow .2s,border-color .2s;overflow:hidden;box-shadow:0 1px 4px #0000000f}[data-theme=light] .faq-item-enhanced:hover{border-color:#0891b259;box-shadow:0 2px 10px #0891b214}[data-theme=light] .faq-item-enhanced[open]{border-color:#0891b266 #0891b266 #0891b266 #0891b2;border-left-style:solid;border-left-width:3px;box-shadow:0 2px 12px #0891b21a}[data-theme=light] .faq-item__question{color:#0f172a;padding:14px 16px}[data-theme=light] .faq-item__question:after{color:#64748b}[data-theme=light] .faq-item-enhanced[open] .faq-item__question:after,[data-theme=light] .faq-item__question:hover{color:#0891b2}[data-theme=light] .faq-item__answer{color:#475569;border-top:1px solid #0000000f;padding:12px 16px 16px}