.color-page [hidden] { display:none !important; }
.color-page { --color-blue:#9ac7ff; --color-gold:#efd38d; --color-purple:#d4b5ff; }
.color-main { padding:62px 0 110px; }
.color-intro { max-width:1040px; margin-bottom:32px; }
.color-intro h1 { margin:0 0 16px; font-size:clamp(2.8rem,7vw,6.25rem); line-height:.94; letter-spacing:-.06em; }
.color-intro h1 span { color:var(--accent); }
.color-intro > p { max-width:840px; margin:0; color:var(--muted); font-size:1.08rem; }
.truth-card,.contrast-card,.palette-card,.image-card,.info-grid article { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.88); box-shadow:var(--shadow); }
.truth-card { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 28px; margin-bottom:18px; border-color:rgba(198,223,136,.28); background:linear-gradient(145deg,rgba(198,223,136,.07),rgba(16,23,19,.9)); }
.truth-mark { min-width:54px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:14px; color:var(--accent); font-weight:850; }
.truth-card h2 { margin:0 0 7px; font-size:1.08rem; }
.truth-card p { margin:0; color:var(--muted); font-size:.9rem; }
.message { margin:0 0 18px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--muted); }
.message.error { color:var(--danger); border-color:rgba(255,155,143,.35); background:rgba(255,155,143,.06); }
.message.success { color:var(--success); border-color:rgba(169,220,145,.35); background:rgba(169,220,145,.05); }
.contrast-card,.palette-card,.image-card { padding:clamp(18px,4vw,36px); margin-top:18px; }
.section-header,.control-title,.workspace-toolbar,.palette-controls,.scale-row,.export-row,.image-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.section-header { align-items:flex-start; margin-bottom:20px; }
.section-header h2 { margin:0; font-size:clamp(1.65rem,3vw,2.45rem); }
.section-header p:not(.result-kicker) { max-width:720px; margin:7px 0 0; color:var(--muted); }
.result-kicker { margin:0 0 5px; color:var(--accent); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.header-actions,.image-actions,.export-row { display:flex; flex-wrap:wrap; gap:8px; }
.primary-button,.ghost-button,.icon-button,.image-drop { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:12px; border:0; cursor:pointer; font-weight:750; }
.primary-button { background:var(--accent); color:#10160f; }
.ghost-button,.icon-button,.image-drop { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--text); }
.ghost-button:hover,.icon-button:hover,.image-drop:hover { border-color:var(--line-strong); background:rgba(255,255,255,.05); }
.primary-button:disabled,.ghost-button:disabled { opacity:.45; cursor:not-allowed; }
.icon-button { min-height:36px; padding:0 11px; font-size:.72rem; }
.pair-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.color-control { min-width:0; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.13); }
.control-title p { margin:0 0 3px; color:var(--accent); font-size:.68rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.control-title h3 { margin:0; font-size:1.05rem; }
.color-input-row { display:grid; grid-template-columns:58px minmax(0,1fr); gap:9px; margin-top:15px; }
.color-input-row.compact { grid-template-columns:52px minmax(170px,320px) auto; margin:0; }
.color-input-row input[type="color"] { width:100%; height:48px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#0b110e; cursor:pointer; }
.color-input-row input[type="text"] { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:#080d0a; color:var(--text); font:700 14px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.color-input-row input:focus,.palette-controls select:focus,.scale-row select:focus,.image-options select:focus { outline:1px solid var(--accent); border-color:var(--accent); }
.format-list { display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 12px; margin:15px 0 0; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.format-list dt { color:var(--soft); text-transform:uppercase; }
.format-list dd { margin:0; color:var(--muted); overflow-wrap:anywhere; }
.contrast-result-grid { display:grid; grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr); gap:14px; margin-top:14px; }
.ratio-panel,.contrast-preview { min-height:320px; padding:22px; border:1px solid var(--line); border-radius:18px; }
.ratio-panel { background:rgba(0,0,0,.13); }
.ratio-panel h3 { display:flex; align-items:baseline; gap:6px; margin:3px 0 8px; }
.ratio-panel h3 strong { font-size:clamp(2.8rem,6vw,5rem); letter-spacing:-.07em; }
.ratio-panel h3 span { color:var(--muted); }
.effective-note { min-height:38px; margin:0; color:var(--soft); font-size:.78rem; }
.pass-grid { display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)); gap:7px; margin-top:15px; }
.pass-item { padding:10px 8px; border:1px solid var(--line); border-radius:12px; text-align:center; background:rgba(255,255,255,.02); }
.pass-item strong { display:block; font-size:.72rem; }
.pass-item span { color:var(--soft); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }
.pass-item.pass { border-color:rgba(169,220,145,.34); color:var(--success); background:rgba(169,220,145,.04); }
.pass-item.fail { color:var(--danger); }
.suggestions { display:grid; gap:7px; margin-top:14px; }
.suggestion-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); color:var(--text); cursor:pointer; text-align:left; }
.suggestion-button:hover { border-color:var(--line-strong); }
.suggestion-swatch { width:26px; height:26px; flex:0 0 auto; border-radius:8px; border:1px solid rgba(255,255,255,.2); }
.contrast-preview { display:flex; flex-direction:column; justify-content:center; background:#101711; color:#e9f3e8; transition:background .15s,color .15s; }
.preview-kicker { margin:0 0 8px; opacity:.72; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; }
.contrast-preview h3 { margin:0 0 12px; font-size:clamp(1.8rem,4vw,3.4rem); letter-spacing:-.04em; }
.contrast-preview > p:not(.preview-kicker):not(.large-preview) { max-width:640px; margin:0; font-size:16px; line-height:1.65; }
.large-preview { margin:18px 0 0; font-size:24px; font-weight:700; }
.preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
.preview-actions button { min-height:42px; padding:0 15px; border:2px solid currentColor; border-radius:10px; background:transparent; color:inherit; font-weight:800; }
.preview-actions a { color:inherit; font-weight:800; }
.standard-note { margin:13px 2px 0; color:var(--soft); font-size:.76rem; }
.palette-controls { flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.12); }
.palette-controls label,.scale-row label,.image-options label { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.78rem; }
.palette-controls select,.scale-row select,.image-options select { min-height:40px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:#0b110e; color:var(--text); }
.palette-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:16px; }
.palette-swatch { min-width:0; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:rgba(0,0,0,.12); }
.swatch-color { min-height:104px; display:flex; align-items:flex-end; padding:10px; }
.swatch-color strong { padding:4px 7px; border-radius:7px; background:rgba(0,0,0,.34); color:white; font:750 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.swatch-meta { padding:11px; }
.swatch-meta input { width:100%; min-height:34px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:#0b110e; color:var(--text); font-size:.78rem; font-weight:700; }
.swatch-meta p { margin:7px 0 0; color:var(--soft); font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.swatch-actions { display:flex; gap:6px; margin-top:9px; }
.swatch-actions button { flex:1; min-height:32px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); color:var(--muted); cursor:pointer; font-size:.7rem; }
.scale-row { flex-wrap:wrap; justify-content:flex-start; margin-top:14px; }
.scale-row > span { margin-left:auto; color:var(--soft); font-size:.75rem; }
.matrix-section { margin-top:20px; }
.matrix-heading h3 { margin:0; }
.matrix-heading p { margin:5px 0 0; color:var(--muted); font-size:.82rem; }
.matrix-wrap { margin-top:12px; overflow:auto; border:1px solid var(--line); border-radius:15px; background:#080d0a; }
.contrast-table { border-collapse:collapse; min-width:680px; width:100%; font:11.5px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; }
.contrast-table th,.contrast-table td { min-width:70px; height:56px; padding:7px; border-right:1px solid rgba(220,231,224,.08); border-bottom:1px solid rgba(220,231,224,.08); text-align:center; }
.contrast-table th { position:sticky; top:0; z-index:2; background:#121b16; color:var(--muted); }
.contrast-table th:first-child { left:0; z-index:3; }
.contrast-table tbody th { position:sticky; left:0; z-index:1; }
.matrix-aa { background:rgba(169,220,145,.085); color:var(--success); }
.matrix-large { background:rgba(239,211,141,.065); color:var(--warning); }
.matrix-fail { color:#7e8981; }
.export-row { justify-content:flex-start; margin-top:16px; }
.image-layout { display:grid; grid-template-columns:minmax(270px,.65fr) minmax(0,1.35fr); gap:14px; }
.image-input-panel,.canvas-panel { padding:16px; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.13); }
.image-drop { position:relative; width:100%; min-height:112px; border-style:dashed; text-align:center; }
.image-drop.dragging { border-color:var(--accent); background:rgba(198,223,136,.07); }
.image-drop input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.image-options { display:grid; gap:9px; margin-top:14px; }
.image-options label { justify-content:space-between; }
.image-actions { justify-content:flex-start; margin-top:14px; }
.canvas-panel { display:grid; place-items:center; min-height:320px; overflow:hidden; }
#image-canvas { display:block; max-width:100%; max-height:620px; border-radius:12px; background:repeating-conic-gradient(#202720 0 25%,#131813 0 50%) 50%/20px 20px; cursor:crosshair; }
.extracted-palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.extracted-item { min-height:120px; display:flex; flex-direction:column; justify-content:flex-end; padding:11px; border:1px solid var(--line); border-radius:14px; }
.extracted-item strong,.extracted-item span { width:max-content; max-width:100%; padding:4px 7px; border-radius:7px; background:rgba(0,0,0,.38); color:white; font:700 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; }
.extracted-item span { margin-top:5px; font-weight:500; opacity:.85; }
.render-note { margin:10px 0 0; color:var(--soft); font-size:.75rem; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.info-grid article { padding:24px; }
.info-grid h2 { margin:0 0 8px; font-size:1rem; }
.info-grid p { margin:0; color:var(--muted); font-size:.84rem; }
@media (max-width:980px) { .contrast-result-grid,.image-layout { grid-template-columns:1fr; } .pass-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .pair-grid,.info-grid { grid-template-columns:1fr; } .section-header { flex-direction:column; } .header-actions { width:100%; } .header-actions > * { flex:1; } .palette-controls { align-items:stretch; flex-direction:column; } .color-input-row.compact { grid-template-columns:52px minmax(0,1fr); } .color-input-row.compact .primary-button { grid-column:1/-1; } }
@media (max-width:620px) { .color-main { padding-top:38px; } .contrast-card,.palette-card,.image-card { padding:15px; } .truth-card { grid-template-columns:1fr; } .pass-grid { grid-template-columns:repeat(2,1fr); } .ratio-panel h3 { flex-direction:column; align-items:flex-start; } .palette-list,.extracted-palette { grid-template-columns:repeat(2,minmax(0,1fr)); } .scale-row { align-items:stretch; flex-direction:column; } .scale-row > span { margin-left:0; } .export-row > * { flex:1; } }