.cpp-portal { --cpp-ink:#18231d; --cpp-green:#276749; --cpp-gold:#d5a63d; --cpp-soft:#f8faf8; color:var(--cpp-ink); font-family:system-ui,-apple-system,sans-serif; margin:2rem auto; max-width:980px }
.cpp-card,.cpp-header { background:#fff; border:1px solid #dce4df; border-radius:18px; box-shadow:0 14px 40px rgba(24,35,29,.08); padding:clamp(1.25rem,4vw,2.5rem) }
.cpp-header { align-items:center; display:flex; justify-content:space-between; margin-bottom:1rem }
.cpp-kicker { color:var(--cpp-green); font-size:.75rem; font-weight:800; letter-spacing:.12em; margin:0 0 .35rem }
.cpp-portal h2,.cpp-portal h3,.cpp-portal h4 { margin:.2rem 0 1rem }
.cpp-muted { color:#68736d }.cpp-error { color:#a32929 }
.cpp-portal form { display:grid; gap:.8rem; margin-top:1.5rem }
.cpp-portal input,.cpp-portal select,.cpp-portal textarea,.cpp-portal button { border:1px solid #bdc9c1; border-radius:10px; box-sizing:border-box; font:inherit; padding:.8rem 1rem; width:100% }
.cpp-portal textarea { min-height:110px; resize:vertical }
.cpp-portal button { background:var(--cpp-green); border-color:var(--cpp-green); color:#fff; cursor:pointer; font-weight:700 }
.cpp-portal button:disabled { cursor:wait; opacity:.65 }
.cpp-portal .cpp-secondary { background:transparent; color:var(--cpp-green); width:auto }
.cpp-controls select { margin-bottom:1rem }.cpp-activities { display:grid; gap:.65rem }
.cpp-activity { border-left:4px solid var(--cpp-gold); display:grid; gap:.25rem; padding:.65rem 1rem }.cpp-activity span { color:#68736d; font-size:.9rem }
.cpp-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem }
.cpp-tabs button { background:#f3f7f4; border-color:#dce4df; color:var(--cpp-ink); width:auto }
.cpp-tabs button.is-active { background:var(--cpp-green); border-color:var(--cpp-green); color:#fff }
.cpp-panel { margin-top:1rem }
.cpp-list { display:grid; gap:.75rem }
.cpp-dashboard-list { margin-top:.4rem }
.cpp-item { border-left:4px solid var(--cpp-gold); display:grid; gap:.35rem; padding:.75rem 1rem }
.cpp-item span { color:#68736d; font-size:.92rem }
.cpp-inline-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.4rem }
.cpp-portal .cpp-small { font-size:.85rem; padding:.5rem .75rem; width:auto }
.cpp-grid { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.cpp-metric { background:var(--cpp-soft); border:1px solid #dce4df; border-radius:14px; display:grid; gap:.3rem; padding:1rem }
.cpp-metric span { color:var(--cpp-green); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase }
.cpp-metric strong { font-size:1.15rem }
.cpp-metric small { color:#68736d }
.cpp-form-grid { display:grid; gap:.8rem }
.cpp-liturgy { display:grid; gap:1rem }
.cpp-liturgy section { background:var(--cpp-soft); border:1px solid #dce4df; border-radius:14px; padding:1rem }
.cpp-liturgy p { margin:.35rem 0 0; white-space:pre-wrap }
@media (max-width:600px) { .cpp-header { align-items:flex-start; gap:1rem; flex-direction:column }.cpp-portal .cpp-secondary,.cpp-tabs button,.cpp-portal .cpp-small { width:100% } }