.cpj-app {
  --cpj-wine: #7b243e;
  --cpj-wine-dark: #59162b;
  --cpj-gold: #b78a3d;
  --cpj-ink: #292521;
  --cpj-muted: #6f6962;
  --cpj-line: #e7dfd5;
  --cpj-paper: #fffdf9;
  --cpj-cream: #f8f3eb;
  --cpj-success: #2f6b4f;
  --cpj-danger: #a23535;
  --cpj-shadow: 0 18px 50px rgba(54, 39, 30, .10);
  position: relative;
  width: min(1120px, calc(100% - 24px));
  margin: 32px auto;
  color: var(--cpj-ink);
  background: var(--cpj-paper);
  border: 1px solid var(--cpj-line);
  border-radius: 24px;
  box-shadow: var(--cpj-shadow);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  isolation: isolate;
}

.cpj-app *, .cpj-app *::before, .cpj-app *::after { box-sizing: border-box; }
.cpj-app h2, .cpj-app h3, .cpj-app p, .cpj-app blockquote { margin-top: 0; }
.cpj-app button, .cpj-app input, .cpj-app textarea, .cpj-app select { font: inherit; }
.cpj-app button { cursor: pointer; }
.cpj-app button:focus-visible, .cpj-app input:focus-visible, .cpj-app textarea:focus-visible, .cpj-app select:focus-visible { outline: 3px solid rgba(183, 138, 61, .45); outline-offset: 2px; }
.cpj-app [hidden] { display: none !important; }
.cpj-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cpj-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 38px;
  color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.13), transparent 30%), linear-gradient(135deg, var(--cpj-wine-dark), var(--cpj-wine));
}
.cpj-hero h2 { margin-bottom: 7px; color: #fff; font: 700 clamp(1.65rem, 3vw, 2.35rem)/1.15 Georgia, serif; }
.cpj-hero p:last-child { margin-bottom: 0; max-width: 700px; color: rgba(255,255,255,.88); }
.cpj-eyebrow { margin-bottom: 6px; color: var(--cpj-gold); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.cpj-hero .cpj-eyebrow { color: #efd09a; }
.cpj-privacy { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.1); }
.cpj-privacy > span:first-child { font-size: 1.25rem; }
.cpj-privacy strong, .cpj-privacy small { display: block; }
.cpj-privacy strong { color: #fff; font-size: .86rem; }
.cpj-privacy small { color: rgba(255,255,255,.75); font-size: .72rem; }

.cpj-toolbar { display: flex; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--cpj-line); background: #fff; }
.cpj-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0 14px; border: 1px solid var(--cpj-line); border-radius: 12px; background: var(--cpj-cream); }
.cpj-search:focus-within { border-color: var(--cpj-gold); box-shadow: 0 0 0 3px rgba(183,138,61,.15); }
.cpj-search input { width: 100%; height: 44px; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--cpj-ink); }

.cpj-tabs { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 0; overflow-x: auto; border-bottom: 1px solid var(--cpj-line); background: #fff; scrollbar-width: thin; }
.cpj-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 9px 8px; border: 0; border-bottom: 3px solid transparent; color: var(--cpj-muted); background: transparent; font-size: .78rem; font-weight: 700; white-space: nowrap; transition: color .16s, background .16s, border-color .16s; }
.cpj-tab span { font-size: 1.2rem; line-height: 1; }
.cpj-tab:hover { color: var(--cpj-wine); background: #fbf7f3; }
.cpj-tab.is-active { color: var(--cpj-wine); border-bottom-color: var(--cpj-gold); background: #fffaf2; }

.cpj-main { min-height: 520px; padding: 32px; background: linear-gradient(180deg, #fffdf9, #fbf7f1); }
.cpj-panel { animation: cpj-in .18s ease-out; }
@keyframes cpj-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cpj-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; margin-bottom: 22px; border: 1px solid #eadac4; border-radius: 18px; background: linear-gradient(120deg, #fff8ec, #fffdf9); }
.cpj-welcome h3 { margin-bottom: 6px; font: 700 1.55rem/1.2 Georgia, serif; }
.cpj-welcome p:last-child { margin-bottom: 0; color: var(--cpj-muted); }
.cpj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.cpj-stats article { padding: 18px; border: 1px solid var(--cpj-line); border-radius: 16px; background: #fff; }
.cpj-stats strong { display: block; margin-bottom: 2px; color: var(--cpj-wine); font: 700 1.75rem/1 Georgia, serif; }
.cpj-stats span { color: var(--cpj-muted); font-size: .8rem; }
.cpj-grid { display: grid; gap: 18px; margin-bottom: 22px; }
.cpj-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpj-card { padding: 22px; border: 1px solid var(--cpj-line); border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(58, 42, 30, .045); }
.cpj-card h3 { margin-bottom: 8px; font: 700 1.13rem/1.3 Georgia, serif; }
.cpj-card p { color: var(--cpj-muted); }
.cpj-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cpj-card-heading h3 { margin: 0; }
.cpj-scripture { color: #fff; background: linear-gradient(145deg, #6b2037, #8f3550); border: 0; }
.cpj-scripture .cpj-eyebrow { color: #f0d19a; }
.cpj-scripture blockquote { margin-bottom: 12px; color: #fff; font: italic 1.2rem/1.55 Georgia, serif; }
.cpj-scripture cite { color: rgba(255,255,255,.78); font-size: .85rem; }

.cpj-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.cpj-section-heading h3 { margin-bottom: 5px; font: 700 clamp(1.45rem, 3vw, 1.85rem)/1.2 Georgia, serif; }
.cpj-section-heading p:last-child { margin-bottom: 0; color: var(--cpj-muted); }
.cpj-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cpj-chip { padding: 7px 13px; border: 1px solid var(--cpj-line); border-radius: 999px; color: var(--cpj-muted); background: #fff; font-size: .82rem; font-weight: 700; }
.cpj-chip:hover, .cpj-chip.is-active { color: #fff; border-color: var(--cpj-wine); background: var(--cpj-wine); }

.cpj-entry-list { display: grid; gap: 12px; }
.cpj-entry { position: relative; padding: 19px 20px; border: 1px solid var(--cpj-line); border-radius: 15px; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cpj-entry:hover { transform: translateY(-1px); border-color: #dac7b0; box-shadow: 0 10px 26px rgba(58,42,30,.07); }
.cpj-entry-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cpj-entry h4 { margin: 0 0 6px; color: var(--cpj-ink); font: 700 1.04rem/1.35 Georgia, serif; }
.cpj-entry p { margin: 0; color: #514b45; overflow-wrap: anywhere; white-space: pre-wrap; }
.cpj-entry-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--cpj-muted); font-size: .74rem; }
.cpj-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; color: var(--cpj-wine); background: #f7eaf0; font-weight: 700; }
.cpj-badge--success { color: var(--cpj-success); background: #e7f3ec; }
.cpj-entry-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cpj-icon-btn { display: inline-grid; place-items: center; min-width: 38px; min-height: 38px; padding: 6px 9px; border: 1px solid transparent; border-radius: 9px; color: var(--cpj-muted); background: transparent; font-weight: 700; }
.cpj-icon-btn:hover { color: var(--cpj-wine); border-color: var(--cpj-line); background: var(--cpj-cream); }
.cpj-compact-list { display: grid; gap: 9px; }
.cpj-compact { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cpj-line); }
.cpj-compact:last-child { border-bottom: 0; }
.cpj-compact-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--cpj-gold); }
.cpj-compact span { color: var(--cpj-ink); font-size: .9rem; }
.cpj-empty { padding: 40px 24px; border: 1px dashed #d9cbbc; border-radius: 16px; text-align: center; background: rgba(255,255,255,.55); }
.cpj-empty strong { display: block; margin-bottom: 5px; font: 700 1.08rem Georgia, serif; }
.cpj-empty p { max-width: 500px; margin: 0 auto 15px; color: var(--cpj-muted); }
.cpj-prompts button { min-height: 100px; padding: 16px; border: 1px solid #e8d8c4; border-radius: 15px; color: var(--cpj-wine-dark); background: #fff9ef; font-weight: 700; text-align: left; }
.cpj-prompts button:hover { border-color: var(--cpj-gold); transform: translateY(-1px); }
.cpj-prompt-card { margin-bottom: 18px; border-left: 4px solid var(--cpj-gold); }

.cpj-progress { height: 9px; margin: 13px 0 8px; overflow: hidden; border-radius: 99px; background: #eee7df; }
.cpj-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cpj-gold), var(--cpj-wine)); }
.cpj-novena-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.cpj-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: 11px; font-size: .88rem; font-weight: 800; line-height: 1.2; text-decoration: none !important; transition: transform .14s, background .14s, border-color .14s; }
.cpj-btn:hover { transform: translateY(-1px); }
.cpj-btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.cpj-btn--primary { color: #fff; background: var(--cpj-wine); box-shadow: 0 6px 15px rgba(123,36,62,.18); }
.cpj-btn--primary:hover { color: #fff; background: var(--cpj-wine-dark); }
.cpj-btn--secondary { color: var(--cpj-wine); border-color: var(--cpj-wine); background: #fff; }
.cpj-btn--quiet { color: var(--cpj-ink); border-color: var(--cpj-line); background: #fff; }
.cpj-btn--danger { color: #fff; background: var(--cpj-danger); }
.cpj-link { padding: 4px; border: 0; color: var(--cpj-wine); background: none; font-size: .82rem; font-weight: 800; }
.cpj-button-row, .cpj-radio-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cpj-radio-row { margin: 14px 0; }

.cpj-notice { padding: 14px 16px; margin-bottom: 18px; border: 1px solid #e5d4b8; border-radius: 12px; color: #5a4931; background: #fff8e9; font-size: .88rem; }
.cpj-notice--error { color: #792d2d; border-color: #e7baba; background: #fff0f0; }
.cpj-file { display: flex; align-items: center; justify-content: center; min-height: 82px; padding: 14px; margin-top: 14px; border: 1px dashed #cbbba8; border-radius: 12px; color: var(--cpj-wine); background: var(--cpj-cream); font-weight: 800; cursor: pointer; text-align: center; }
.cpj-file input { position: absolute; opacity: 0; pointer-events: none; }
.cpj-danger-zone { border-color: #ead0d0; }

.cpj-dialog { width: min(650px, calc(100vw - 28px)); max-height: min(780px, calc(100vh - 30px)); padding: 0; border: 0; border-radius: 20px; color: var(--cpj-ink); background: #fffdf9; box-shadow: 0 30px 90px rgba(25,18,15,.3); overflow: auto; }
.cpj-dialog::backdrop { background: rgba(28,20,18,.62); backdrop-filter: blur(3px); }
.cpj-dialog form, .cpj-dialog--small { padding: 26px; }
.cpj-dialog--small { width: min(460px, calc(100vw - 28px)); }
.cpj-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.cpj-dialog-heading h3 { margin: 0; font: 700 1.55rem/1.2 Georgia, serif; }
.cpj-dialog label { display: block; margin-bottom: 17px; color: var(--cpj-ink); font-size: .88rem; font-weight: 800; }
.cpj-dialog label > span { color: var(--cpj-muted); font-size: .75rem; font-weight: 500; }
.cpj-dialog input[type="text"], .cpj-dialog textarea, .cpj-dialog select { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #d9cfc4; border-radius: 10px; color: var(--cpj-ink); background: #fff; box-shadow: none; resize: vertical; }
.cpj-dialog input[type="text"] { min-height: 44px; }
.cpj-dialog input[aria-invalid="true"], .cpj-dialog textarea[aria-invalid="true"] { border-color: var(--cpj-danger); box-shadow: 0 0 0 3px rgba(162,53,53,.12); }
.cpj-form-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: -8px; color: var(--cpj-muted); font-size: .73rem; }
.cpj-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.cpj-toast { position: fixed; z-index: 2147483000; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 13px 17px; border-radius: 12px; color: #fff; background: #2f4539; box-shadow: 0 12px 35px rgba(0,0,0,.22); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s, transform .2s; }
.cpj-toast.is-visible { opacity: 1; transform: none; }
.cpj-toast.is-error { background: var(--cpj-danger); }

@media (max-width: 800px) {
  .cpj-app { width: min(100% - 16px, 1120px); margin: 18px auto; border-radius: 18px; }
  .cpj-hero { align-items: flex-start; padding: 26px 24px; }
  .cpj-privacy { min-width: 0; }
  .cpj-main { padding: 24px 20px; }
  .cpj-stats { grid-template-columns: repeat(2, 1fr); }
  .cpj-grid--3 { grid-template-columns: 1fr; }
  .cpj-tabs { grid-template-columns: repeat(7, 94px); }
}

@media (max-width: 560px) {
  .cpj-app { width: 100%; margin: 10px 0; border-left: 0; border-right: 0; border-radius: 0; }
  .cpj-hero { display: block; padding: 23px 18px; }
  .cpj-privacy { width: fit-content; margin-top: 17px; }
  .cpj-toolbar { padding: 12px; }
  .cpj-toolbar > .cpj-btn { width: 46px; padding: 0; overflow: hidden; color: transparent; }
  .cpj-toolbar > .cpj-btn::after { content: "⇩"; color: var(--cpj-ink); font-size: 1.15rem; }
  .cpj-tabs { position: sticky; z-index: 10; top: 0; grid-template-columns: repeat(7, 76px); }
  .admin-bar .cpj-tabs { top: 46px; }
  .cpj-tab { min-height: 63px; font-size: .68rem; }
  .cpj-main { min-height: 430px; padding: 20px 14px 28px; }
  .cpj-welcome, .cpj-section-heading { align-items: stretch; flex-direction: column; }
  .cpj-welcome { padding: 20px; }
  .cpj-section-heading > .cpj-btn, .cpj-welcome > .cpj-btn { width: 100%; }
  .cpj-stats { gap: 8px; }
  .cpj-stats article { padding: 14px 12px; }
  .cpj-stats strong { font-size: 1.45rem; }
  .cpj-grid--2 { grid-template-columns: 1fr; }
  .cpj-card, .cpj-entry { padding: 16px; }
  .cpj-entry-top { gap: 6px; }
  .cpj-entry-actions { margin-right: -6px; }
  .cpj-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
  .cpj-dialog form, .cpj-dialog--small { padding: 20px 16px; }
  .cpj-dialog-actions { position: sticky; bottom: -20px; padding: 12px 0 20px; background: linear-gradient(transparent, #fffdf9 20%); }
  .cpj-dialog-actions .cpj-btn { flex: 1; }
  .cpj-form-meta { font-size: .67rem; }
  .cpj-toast { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .cpj-app *, .cpj-app *::before, .cpj-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  body * { visibility: hidden !important; }
  #cpj-app, #cpj-app * { visibility: visible !important; }
  #cpj-app { position: absolute; inset: 0; width: 100%; margin: 0; border: 0; box-shadow: none; }
  .cpj-hero { color: #000; background: none; border-bottom: 2px solid #000; }
  .cpj-hero h2, .cpj-hero p:last-child { color: #000; }
  .cpj-toolbar, .cpj-tabs, .cpj-btn, .cpj-entry-actions, .cpj-privacy, .cpj-toast { display: none !important; }
  .cpj-main { padding: 18px; background: #fff; }
  .cpj-panel { display: block !important; margin-bottom: 24px; }
  .cpj-panel[hidden] { display: block !important; }
  #cpj-panel-home, #cpj-panel-backup, #cpj-search-results, .cpj-empty, .cpj-prompts, .cpj-notice { display: none !important; }
  .cpj-entry { break-inside: avoid; box-shadow: none; }
}