\
/* Base structure */
.cpeh-wrap{ color:var(--ink); background:transparent; }
.cpeh-wrap{ max-width:1100px; margin:0 auto; padding:24px 16px 40px; }
.cpeh-header{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.cpeh-sub{ opacity:.9 }
.cpeh-badge{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: var(--muted); }

.cpeh-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:900px){ .cpeh-grid{ grid-template-columns:1.15fr .85fr; } }

.cpeh-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.cpeh-body{ padding:16px; }
.cpeh-row{ display:grid; grid-template-columns:1fr 150px; gap:10px; align-items:end; }
.cpeh-row + .cpeh-row{ margin-top:12px; }
.cpeh-section-title{ margin:16px 0 6px; font-weight:700; }
.cpeh-muted{ opacity:.85 }
.cpeh-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cpeh-tile{ background: rgba(0,0,0,.02); border:1px solid var(--border); border-radius:12px; padding:12px; }
.cpeh-val{ font-size:clamp(1.2rem, 2.2vw + .5rem, 2rem); font-weight:800; margin-top:6px; }
.cpeh-eq{ opacity:.85 }
.cpeh-note{ font-size:.85rem; opacity:.85 }
.cpeh-ghost{ background:transparent; }
.cpeh-hr{ height:1px; background: linear-gradient(90deg, transparent, var(--border), transparent); border:none; margin:10px 0; }
.cpeh-footer{ margin-top:20px; font-size:.9rem; opacity:.85; text-align:center; }

.cpeh-wrap input[type=text], .cpeh-wrap input[type=number]{ width:100%; padding:12px; border-radius:12px; background:var(--muted); border:1px solid var(--border); color:var(--ink); outline:none; }
.cpeh-wrap input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }

.cpeh-btns{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.cpeh-btns .button-primary{ background: var(--accent); border-color: color-mix(in oklab, var(--accent) 85%, black); }
.cpeh-btns .button{ border-radius: 999px; }

/* Light theme (QQ-like) */
.theme-qq{ --accent:#2563eb; --border:#e5e7eb; --ink:#0f172a; --muted:#f1f5f9; --radius:16px; }
.theme-qq .cpeh-card{ background:#ffffff; }
.theme-qq .cpeh-tile{ background: #f8fafc; }
.theme-qq .cpeh-sub, .theme-qq .cpeh-muted, .theme-qq .cpeh-eq, .theme-qq .cpeh-note{ color:#475569; }

/* Cowabunga Dark (screenshot-inspired) */
.theme-cowabunga-dark{ 
  --accent:#B68C53; 
  --border:#6C5534; 
  --ink:#EEE6D9; 
  --muted:#171513; 
  --radius:18px; 
}
.theme-cowabunga-dark.cpeh-wrap{
  background:#0F0F10;
  border:1px solid color-mix(in oklab, var(--border) 70%, black);
  border-radius:24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding:24px;
}
.theme-cowabunga-dark .cpeh-card{
  background:#151618;
  border-color: color-mix(in oklab, var(--border) 55%, black);
}
.theme-cowabunga-dark .cpeh-tile{
  background: #111214;
  border-color: color-mix(in oklab, var(--border) 45%, black);
}
.theme-cowabunga-dark .cpeh-badge{
  background:#1A1816; 
  border-color: color-mix(in oklab, var(--border) 55%, black); 
  color: color-mix(in oklab, var(--ink) 85%, white);
}
.theme-cowabunga-dark .cpeh-sub, 
.theme-cowabunga-dark .cpeh-muted, 
.theme-cowabunga-dark .cpeh-eq, 
.theme-cowabunga-dark .cpeh-note{ 
  color: color-mix(in oklab, var(--ink) 70%, black); 
}
.theme-cowabunga-dark .cpeh-wrap input[type=text], 
.theme-cowabunga-dark .cpeh-wrap input[type=number]{
  background:#1A1917; 
  border-color: color-mix(in oklab, var(--border) 55%, black); 
  color: var(--ink);
}
.theme-cowabunga-dark .cpeh-wrap input:focus{ 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); 
}
.theme-cowabunga-dark .cpeh-btns .button-primary{
  background: var(--accent);
  color:#0b0905;
  border: 1px solid color-mix(in oklab, var(--accent) 80%, black);
  box-shadow: 0 6px 18px rgba(182,140,83,.25);
}
.theme-cowabunga-dark .cpeh-btns .button{
  border:1px solid color-mix(in oklab, var(--border) 55%, black);
  color: var(--ink);
}