.v2x.cpd{--cpd-indigo:#6366F1;--cpd-glow:0 24px 60px -24px rgba(79,70,229,.4)}
.v2x.cpd .cpd-hero{position:relative;display:grid;grid-template-columns:1.3fr .9fr;gap:28px;align-items:center;background:linear-gradient(135deg,#f6f9ff,#eef2ff);border:1px solid #e4ecff;border-radius:28px;padding:34px;overflow:hidden;margin-bottom:24px}
.v2x.cpd .cpd-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #dbe6ff;color:var(--brand-blue-dark);font-weight:600;font-size:.82rem;padding:6px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.v2x.cpd .cpd-hero h1{font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;margin:12px 0 8px}
.v2x.cpd .cpd-hero .lead{color:var(--v2-muted);font-size:1.05rem;max-width:520px;margin:0 0 16px}
.v2x.cpd .cpd-herostats{display:flex;flex-wrap:wrap;gap:22px;margin:16px 0}
.v2x.cpd .cpd-herostats .n{font-size:1.4rem;font-weight:800;color:var(--v2-ink)}
.v2x.cpd .cpd-herostats .l{font-size:.76rem;color:var(--v2-muted)}
.v2x.cpd .cpd-search{display:flex;gap:10px;max-width:480px}
.v2x.cpd .cpd-search input{flex:1;border:1px solid var(--v2-line);border-radius:14px;padding:12px 16px;background:#fff;box-shadow:var(--shadow-sm)}
.v2x.cpd .cpd-search input:focus{outline:none;box-shadow:var(--shadow-md)}
.v2x.cpd .cpd-pop{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;font-size:.82rem}
.v2x.cpd .cpd-pop a{color:var(--brand-blue);background:rgba(255,255,255,.8);border:1px solid #dbe6ff;padding:5px 11px;border-radius:999px;text-decoration:none}
.v2x.cpd .cpd-pop a:hover{background:var(--brand-blue);color:#fff}
.v2x.cpd .cpd-crystal{position:relative;height:230px;display:flex;align-items:center;justify-content:center}
.v2x.cpd .cpd-crystal .core{width:130px;height:130px;border-radius:30px;background:linear-gradient(135deg,var(--brand-blue),var(--cpd-indigo));box-shadow:var(--cpd-glow);display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;transform:rotate(-8deg)}
.v2x.cpd .cpd-crystal .chip{position:absolute;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:16px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand-blue);box-shadow:var(--shadow-md)}
.v2x.cpd .cpd-crystal .c1{top:14px;left:30px}.v2x.cpd .cpd-crystal .c2{top:30px;right:24px}.v2x.cpd .cpd-crystal .c3{bottom:18px;left:54px}.v2x.cpd .cpd-crystal .c4{bottom:30px;right:40px}
@media (max-width:880px){.v2x.cpd .cpd-hero{grid-template-columns:1fr}.v2x.cpd .cpd-crystal{display:none}}
/* type explorer */
.v2x.cpd .cpd-types{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
@media (max-width:1100px){.v2x.cpd .cpd-types{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.v2x.cpd .cpd-types{grid-template-columns:repeat(2,1fr)}}
.v2x.cpd .cpd-type{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px;border:1px solid var(--v2-line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .18s;text-align:center}
.v2x.cpd .cpd-type:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe0fb}
.v2x.cpd .cpd-type.on{border-color:var(--brand-blue);background:var(--v2-accent-soft)}
.v2x.cpd .cpd-type .ic{width:42px;height:42px;border-radius:12px;background:var(--v2-accent-soft);color:var(--brand-blue);display:flex;align-items:center;justify-content:center}
.v2x.cpd .cpd-type .nm{font-size:.8rem;font-weight:700;color:var(--v2-ink)}
.v2x.cpd .cpd-type .ct{font-size:.72rem;color:var(--v2-muted)}
/* trending row */
.v2x.cpd .cpd-trend{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.v2x.cpd .cpd-tcard{flex:0 0 200px;border:1px solid var(--v2-line);border-radius:18px;background:#fff;padding:16px;box-shadow:var(--shadow-sm);text-decoration:none;transition:all .2s}
.v2x.cpd .cpd-tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.v2x.cpd .cpd-logo{width:48px;height:48px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand-blue)}
/* directory */
.v2x.cpd .cpd-grid{display:grid;grid-template-columns:240px 1fr 280px;gap:22px;align-items:start}
.v2x.cpd .cpd-side{position:sticky;top:84px}
@media (max-width:1100px){.v2x.cpd .cpd-grid{grid-template-columns:1fr}.v2x.cpd .cpd-side{position:static}}
.v2x.cpd .cpd-panel{background:#fff;border:1px solid var(--v2-line);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}
.v2x.cpd .cpd-fgrp{padding:12px 0;border-top:1px solid var(--v2-line)}
.v2x.cpd .cpd-fgrp:first-child{border-top:0;padding-top:0}
.v2x.cpd .cpd-fgrp .t{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--v2-muted);margin-bottom:8px}
.v2x.cpd .cpd-chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.88rem;cursor:pointer;color:var(--v2-ink)}
.v2x.cpd .cpd-chk input{accent-color:var(--brand-blue)}
.v2x.cpd .cpd-pcard{display:flex;gap:16px;border:1px solid var(--v2-line);border-radius:20px;background:#fff;padding:18px;box-shadow:var(--shadow-sm);margin-bottom:14px;transition:all .2s}
.v2x.cpd .cpd-pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:#cfe0fb}
.v2x.cpd .cpd-pcard .lg{width:64px;height:64px;border-radius:16px;flex:0 0 auto;object-fit:contain;background:#fff;border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;color:var(--brand-blue)}
.v2x.cpd .cpd-pcard .nm{font-weight:800;font-size:1.1rem;color:var(--v2-ink)}
.v2x.cpd .cpd-vbadge{color:var(--brand-blue)}
.v2x.cpd .cpd-typebadge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--brand-blue-dark);background:var(--v2-accent-soft);padding:2px 8px;border-radius:999px}
.v2x.cpd .cpd-pstats{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--v2-muted);margin:8px 0}
.v2x.cpd .cpd-pstats b{color:var(--v2-ink)}
.v2x.cpd .cpd-ins{display:flex;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--v2-line)}
.v2x.cpd .cpd-ins:first-of-type{border-top:0}
.v2x.cpd .cpd-ins .ic{width:34px;height:34px;border-radius:10px;background:var(--v2-accent-soft);color:var(--brand-blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.v2x.cpd .cpd-rank{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--v2-line);text-decoration:none;color:inherit}
.v2x.cpd .cpd-rank:first-of-type{border-top:0}
.v2x.cpd .cpd-rank .rk{font-weight:800;color:var(--brand-blue);width:22px}
.v2x.cpd .cpd-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.v2x.cpd .cpd-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.v2x.cpd .cpd-feat-grid{grid-template-columns:1fr}}
.v2x.cpd .cpd-cmp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.v2x.cpd .cpd-cmp{grid-template-columns:repeat(2,1fr)}}
.v2x.cpd .cpd-cmpcard{border:1px solid var(--v2-line);border-radius:16px;background:#fff;padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.v2x.cpd .cpd-cmpcard .vs{font-weight:800;color:var(--brand-blue);margin:0 8px}
.v2x.cpd .cpd-seo{background:#fff;border:1px solid var(--v2-line);border-radius:20px;padding:28px;line-height:1.8;color:#39414d}
.v2x.cpd .cpd-seo h2{font-size:1.5rem;font-weight:800;margin:0 0 12px}
.v2x.cpd .cpd-seo p{margin:0 0 14px}
.v2x.cpd .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.v2x.cpd .sec-head h2{font-size:1.5rem;font-weight:800;margin:0}
/* ── DARK MODE — follows body.theme-dark ── */
body.theme-dark .v2x.cpd .cpd-hero{background:linear-gradient(135deg,#191b26,#16182a);border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-badge{background:#171922;border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-search input{background:#171922}
body.theme-dark .v2x.cpd .cpd-pop a{background:rgba(23,25,34,.84);border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-crystal .chip{background:rgba(23,25,34,.84);border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-type{background:#171922}
body.theme-dark .v2x.cpd .cpd-type:hover{border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-tcard{background:#171922}
body.theme-dark .v2x.cpd .cpd-logo{background:#171922}
body.theme-dark .v2x.cpd .cpd-panel{background:#171922}
body.theme-dark .v2x.cpd .cpd-pcard{background:#171922}
body.theme-dark .v2x.cpd .cpd-pcard:hover{border-color:#2A2D3A}
body.theme-dark .v2x.cpd .cpd-pcard .lg{background:#171922}
body.theme-dark .v2x.cpd .cpd-cmpcard{background:#171922}
body.theme-dark .v2x.cpd .cpd-seo{background:#171922;color:#9CA2B3}
/* Re-assert brand-blue hover (base .cpd-pop a dark override out-specifies it). */
body.theme-dark .v2x.cpd .cpd-pop a:hover{background:var(--brand-blue);color:#fff}
/* Bootstrap filter input (no scoped dark rule; sits on dark panel). */
body.theme-dark .v2x.cpd .cpd-fgrp .form-control{background:#171922;border-color:#2A2D3A;color:var(--v2-ink)}
body.theme-dark .v2x.cpd .cpd-fgrp .form-control::placeholder{color:var(--v2-muted)}