.pccp{--pccp-border:#dfe5ee;--pccp-muted:#5c6b7a;--pccp-ink:#172536;max-width:1180px;margin:24px auto;font-family:inherit;color:var(--pccp-ink)}
.pccp *{box-sizing:border-box}.pccp-shell{border:1px solid var(--pccp-border);border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(23,37,54,.06);overflow:hidden}.pccp-hero{display:flex;gap:16px;align-items:flex-start;padding:26px;border-bottom:1px solid var(--pccp-border);background:linear-gradient(135deg,#f7fbff,#fff)}.pccp-hero-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#173f7a;color:#fff;font-size:20px;font-weight:800;flex:0 0 auto}.pccp-hero-copy{flex:1}.pccp-kicker,.pccp-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#55708d}.pccp h2{margin:5px 0 8px;font-size:27px}.pccp h3{margin:3px 0 0;font-size:18px}.pccp p{margin:0;color:var(--pccp-muted);line-height:1.6}.pccp-help{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;padding:0!important;margin:0;display:grid;place-items:center;line-height:23px!important;text-align:center;border:1px solid #b8c6d5;border-radius:50%!important;background:#fff;color:#31536f;font-weight:800;cursor:help;position:relative;flex:0 0 25px!important;box-sizing:border-box!important}.pccp-help:hover:after,.pccp-help:focus:after{content:attr(data-tooltip);position:absolute;z-index:30;right:0;top:31px;width:290px;padding:10px 12px;border-radius:9px;background:#172536;color:#fff;font-size:12px;line-height:1.45;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.16)}.pccp-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px}.pccp-card{border:1px solid var(--pccp-border);border-radius:14px;padding:18px;background:#fff}.pccp-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.pccp-color-entry{display:grid;grid-template-columns:84px 1fr;gap:15px;align-items:center}.pccp-native-color{width:84px;height:64px;border:1px solid #cbd6e2;border-radius:10px;padding:4px;background:#fff;cursor:pointer}.pccp-hex-wrap label{display:block;font-size:12px;font-weight:800;color:#55708d;margin-bottom:6px;letter-spacing:.06em}.pccp-hex{width:100%;height:44px;border:1px solid #cbd6e2;border-radius:9px;padding:10px 12px;font:600 15px/1 inherit;color:var(--pccp-ink);text-transform:uppercase}.pccp-hex.invalid{border-color:#c65a4e;background:#fff7f5}.pccp-field-note{font-size:11px;color:#728092;margin-top:6px}.pccp-swatch{height:100px;border-radius:12px;margin-top:16px;display:flex;align-items:flex-end;padding:12px;background:#2563eb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.pccp-swatch-label{padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.88);color:#172536;font:700 12px/1 monospace}.pccp-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pccp-value-box{border:1px solid var(--pccp-border);border-radius:10px;background:#fbfcfe;padding:11px}.pccp-value-box>span{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;color:#6c7a89;margin-bottom:5px}.pccp-value-box strong{display:block;min-height:34px;font:700 13px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.pccp-copy-value,.pccp-copy-css{border:0;border-radius:7px;padding:7px 9px;background:#eaf0f6;color:#17324f;font-size:11px;font-weight:800;cursor:pointer;margin-top:8px}.pccp-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 22px 22px}.pccp-contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pccp-contrast-box{border:1px solid var(--pccp-border);border-radius:10px;padding:10px;text-align:center}.pccp-contrast-preview{height:64px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;margin-bottom:9px}.pccp-on-white{background:#fff;color:#2563eb;border:1px solid #e4e8ed}.pccp-on-black{background:#000;color:#2563eb}.pccp-contrast-box strong{font-size:20px}.pccp-badges{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:6px}.pccp-badge{font-size:10px;font-weight:800;border-radius:99px;padding:4px 7px;background:#edf2f8;color:#36506a}.pccp-badge.pass{background:#eaf7f0;color:#1b6a45}.pccp-badge.fail{background:#fff0ee;color:#9c3529}.pccp-harmony-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.pccp-harmony{border:1px solid var(--pccp-border);background:#fff;border-radius:9px;padding:7px;cursor:pointer;text-align:left}.pccp-harmony span{display:block;height:46px;border-radius:7px;background:#2563eb;margin-bottom:7px}.pccp-harmony b{display:block;font-size:10px;line-height:1.2}.pccp-harmony small{display:block;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#667586;margin-top:3px}.pccp-tone-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.pccp-tone{border:1px solid var(--pccp-border);background:#fff;border-radius:8px;padding:5px;cursor:pointer}.pccp-tone span{display:block;height:45px;border-radius:6px}.pccp-tone small{display:block;margin-top:4px;font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.pccp-code-box{position:relative;border:1px solid var(--pccp-border);border-radius:10px;background:#f7f9fb;padding:12px}.pccp-css-output{display:block;white-space:pre-wrap;word-break:break-word;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:90px;padding-right:5px}.pccp-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 22px 22px}.pccp-actions button{border:0;border-radius:9px;padding:11px 14px;font-weight:750;cursor:pointer}.pccp-primary{background:#173f7a;color:#fff}.pccp-secondary{background:#edf2f8;color:#18324f}.pccp-status{color:#5c6b7a;font-size:13px}.pccp-notice{margin:0 22px 22px;border:1px solid #d9e3ef;background:#f5f9fd;border-radius:11px;padding:12px 14px;color:#526577;font-size:13px;line-height:1.55}.pccp-report{border-top:1px solid var(--pccp-border);padding:22px;background:#fbfcfe}.pccp-report-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.pccp-report-chip{font-size:11px;font-weight:800;padding:6px 9px;border-radius:99px;background:#eaf0f6;color:#36506a}.pccp-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pccp-report-item{border:1px solid var(--pccp-border);border-radius:10px;background:#fff;padding:13px}.pccp-report-item span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6c7a89;font-weight:800;margin-bottom:5px}.pccp-report-item strong{font:700 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.pccp-empty{padding:14px;border:1px dashed #cbd6e2;border-radius:10px;color:#5c6b7a;background:#fff}.pccp-error{color:#8b3026;background:#fff4f2;border-color:#e2b4ae}
@media(max-width:950px){.pccp-picker-grid,.pccp-tools-grid{grid-template-columns:1fr}.pccp-harmony-grid{grid-template-columns:repeat(5,1fr)}.pccp-report-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pccp-hero{padding:18px}.pccp-picker-grid,.pccp-tools-grid,.pccp-actions{padding-left:16px;padding-right:16px}.pccp-notice{margin-left:16px;margin-right:16px}.pccp-value-grid,.pccp-contrast-grid{grid-template-columns:1fr}.pccp-harmony-grid{grid-template-columns:repeat(2,1fr)}.pccp-tone-grid{grid-template-columns:repeat(3,1fr)}.pccp-report-grid{grid-template-columns:1fr}.pccp h2{font-size:22px}.pccp-actions button{flex:1 1 44%}.pccp-help:hover:after,.pccp-help:focus:after{right:auto;left:0;width:260px}}