.app-resource-module[hidden] { display: none !important; }
.app-resource-module { margin-top: 16px; }
body.app-resource-page-open .page-title,
body.app-resource-page-open .hero-panel,
body.app-resource-page-open .resources,
body.app-resource-page-open .blessing-banner { display: none; }
.app-resource-shell { background: #fffaf1; border: 1px solid #e7c98e; border-radius: 12px; box-shadow: 0 18px 45px rgba(5, 42, 77, .12); overflow: hidden; }
.app-resource-topbar { align-items: center; background: linear-gradient(105deg, #352820, #073c68); color: #fff; display: grid; gap: 18px; grid-template-columns: auto 1fr auto; padding: 18px 22px; }
.app-resource-topbar span { color: #f3c65b; display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.app-resource-topbar h2 { color: #fff; font-size: 25px; margin: 2px 0 0; }
.app-resource-topbar button { background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; color: #073c68; cursor: pointer; font-weight: 800; padding: 10px 14px; }
.consecration-progress-card { background: #fff; border-bottom: 1px solid #eadcc3; padding: 18px 22px; }
.novena-progress-card { background: #fff; border-bottom: 1px solid #eadcc3; padding: 18px 22px; }
.consecration-progress-card > div:first-child { display: flex; justify-content: space-between; margin-bottom: 10px; }
.novena-progress-card > div:first-child { display: flex; justify-content: space-between; margin-bottom: 10px; }
.consecration-progress-card > div:last-child { background: #f1e7d5; border-radius: 99px; height: 9px; overflow: hidden; }
.novena-progress-card > div:last-child { background: #f1e7d5; border-radius: 99px; height: 9px; overflow: hidden; }
.consecration-progress-card > div:last-child span { background: linear-gradient(90deg, #bf8300, #edc65f); display: block; height: 100%; transition: width .25s; width: 0; }
.novena-progress-card > div:last-child span { background: linear-gradient(90deg, #9d122b, #d6a21c); display: block; height: 100%; transition: width .25s; width: 0; }
.consecration-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); padding: 20px; }
.novena-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); padding: 20px; }
.consecration-day-card, .consecration-days-panel, .heart-panel { background: #fff; border: 1px solid #eadcc3; border-radius: 10px; padding: 22px; }
.novena-day-card, .novena-days-panel { background: #fff; border: 1px solid #eadcc3; border-radius: 10px; padding: 22px; }
.consecration-day-card > span { color: #aa7200; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.novena-day-card > span { color: #a0162d; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.consecration-day-card h3, .heart-panel h3 { color: #072f57; font-size: 28px; margin: 5px 0 8px; }
.novena-day-card h3 { color: #072f57; font-size: 30px; margin: 5px 0 8px; }
.consecration-day-card > em { background: #fff1ce; border-radius: 99px; color: #875900; display: inline-block; font-style: normal; font-weight: 800; padding: 6px 11px; }
.consecration-day-card section { border-top: 1px solid #eee4d4; margin-top: 18px; padding-top: 15px; }
.novena-day-card section { border-top: 1px solid #eee4d4; margin-top: 18px; padding-top: 15px; }
.consecration-day-card h4, .heart-panel h4 { color: #9a6700; font-size: 13px; letter-spacing: .05em; margin: 0 0 6px; text-transform: uppercase; }
.novena-day-card h4 { color: #9a6700; font-size: 13px; letter-spacing: .05em; margin: 0 0 6px; text-transform: uppercase; }
.consecration-day-card p { color: #27394a; font-size: 16px; line-height: 1.65; margin: 0; }
.novena-day-card p { color: #27394a; font-size: 16px; line-height: 1.7; margin: 0; }
.consecration-day-card label, .heart-panel label { display: grid; gap: 7px; margin-top: 18px; }
.consecration-day-card label span, .heart-panel label span { color: #34465a; font-size: 13px; font-weight: 800; }
.consecration-day-card textarea, .heart-panel input { border: 1px solid #cbd6e0; border-radius: 7px; font: inherit; padding: 11px; resize: vertical; }
.consecration-day-card > button, .heart-panel form button, .heart-share { background: #c68a00; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 900; margin-top: 14px; padding: 12px 16px; }
.novena-intention { display: grid; gap: 7px; margin-top: 20px; }
.novena-intention span { color: #34465a; font-size: 13px; font-weight: 800; }
.novena-intention textarea { border: 1px solid #cbd6e0; border-radius: 7px; font: inherit; padding: 11px; resize: vertical; }
.novena-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.novena-actions button { background: #c68a00; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 900; padding: 12px 16px; }
.novena-actions button:last-child { background: #073c68; }
.novena-actions button.is-complete { background: #258563; }
.novena-message { color: #258563; font-weight: 800; min-height: 22px; padding-top: 12px; }
.consecration-day-card > button.is-complete { background: #258563; }
.consecration-days-panel h3 { color: #072f57; margin: 0 0 13px; }
.consecration-days-panel > div { display: grid; gap: 7px; max-height: 625px; overflow: auto; padding-right: 3px; }
.consecration-days-panel button { align-items: center; background: #fbf8f2; border: 1px solid #eadcc3; border-radius: 7px; color: #27394a; cursor: pointer; display: grid; gap: 8px; grid-template-columns: 30px 1fr; padding: 9px; text-align: left; }
.consecration-days-panel button > span { align-items: center; background: #f2dfba; border-radius: 50%; display: flex; font-weight: 900; height: 28px; justify-content: center; }
.consecration-days-panel button strong { font-size: 13px; }
.consecration-days-panel button em { color: #806d57; font-size: 11px; font-style: normal; grid-column: 2; }
.consecration-days-panel button.is-active { background: #eef6fc; border-color: #0b568e; }
.consecration-days-panel button.is-complete > span { background: #258563; color: #fff; }
.novena-days-panel h3 { color: #072f57; margin: 0 0 5px; }
.novena-days-panel > p { color: #687887; font-size: 13px; line-height: 1.45; margin: 0 0 13px; }
.novena-days-panel > div { display: grid; gap: 8px; }
.novena-days-panel button { align-items: center; background: #fbf8f2; border: 1px solid #eadcc3; border-radius: 8px; color: #27394a; cursor: pointer; display: grid; gap: 8px; grid-template-columns: 34px 1fr; padding: 10px; text-align: left; }
.novena-days-panel button > span { align-items: center; background: #f2dfba; border-radius: 50%; display: flex; font-weight: 900; height: 32px; justify-content: center; }
.novena-days-panel button strong { font-size: 13px; }
.novena-days-panel button em { color: #806d57; font-size: 11px; font-style: normal; grid-column: 2; }
.novena-days-panel button.is-active { background: #fff0f2; border-color: #a0162d; }
.novena-days-panel button.is-complete > span { background: #258563; color: #fff; }
.novena-days-panel button:disabled { cursor: not-allowed; opacity: .52; }
.heart-layout { display: grid; gap: 20px; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); padding: 22px; }
.heart-visual { align-items: center; background: radial-gradient(circle at 50% 38%, rgba(255,244,183,.95), rgba(151,21,38,.92) 42%, #5e0d1b 75%); border-radius: 13px; color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 520px; overflow: hidden; padding: 30px; position: relative; text-align: center; }
.heart-rays { background: repeating-conic-gradient(from 0deg, rgba(255,230,138,.22) 0 4deg, transparent 4deg 12deg); inset: -30%; position: absolute; }
.heart-symbol { color: #e12842; filter: drop-shadow(0 0 15px #ffe291); font-size: 120px; line-height: 1; position: relative; text-shadow: 0 3px 0 #820c20; }
.heart-visual strong, .heart-visual p, .heart-visual div { position: relative; }
.heart-visual strong { font-family: Georgia, serif; font-size: 25px; margin-top: 10px; max-width: 100%; overflow-wrap: anywhere; }
.heart-visual p { margin: 8px 0 20px; }
.heart-visual div { background: rgba(255,255,255,.93); border-radius: 9px; color: #7d1020; font-family: Georgia, serif; font-size: 25px; font-weight: 800; max-width: 90%; min-width: 180px; padding: 14px 20px; }
.heart-panel > p { color: #5a6876; line-height: 1.55; }
.heart-panel form { border-bottom: 1px solid #eadcc3; padding-bottom: 20px; }
.heart-message { color: #258563; font-weight: 800; min-height: 22px; padding: 12px 0; }
.heart-panel section > div { display: grid; gap: 7px; max-height: 240px; overflow: auto; }
.heart-panel section > div > div { align-items: center; background: #fff7e6; border-radius: 7px; display: grid; gap: 9px; grid-template-columns: auto 1fr auto; padding: 9px 11px; }
.heart-panel section > div span { color: #b3112c; }
.heart-panel section > div button { background: transparent; border: 0; color: #9c3c48; cursor: pointer; font-size: 20px; }
.heart-empty { color: #7c8791; font-style: italic; }
.heart-share { background: #073c68; width: 100%; }
.chat-donor-badge { background: #25795f; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; color: #fff !important; padding: 8px 12px; text-align: center; }
.chat-loading { color: #536577; font-weight: 800; padding: 70px 20px; text-align: center; }
.chat-locked { margin: 40px auto; max-width: 560px; padding: 30px; text-align: center; }
.chat-locked strong { color: #072f57; display: block; font-family: Georgia, serif; font-size: 27px; }
.chat-locked p { color: #5a6876; line-height: 1.55; }
.chat-locked button, .chat-locked a { border-radius: 7px; display: inline-block; font-weight: 900; margin: 6px; padding: 12px 16px; }
.chat-locked button { background: #073c68; border: 0; color: #fff; cursor: pointer; }
.chat-locked a { background: #c68a00; color: #fff; }
.chat-room { margin: 0 auto; max-width: 820px; padding: 22px; }
.chat-intro { background: #eef6fc; border: 1px solid #c8ddeb; border-radius: 9px; display: grid; gap: 4px; margin-bottom: 12px; padding: 13px 16px; }
.chat-intro strong { color: #073c68; }
.chat-intro span { color: #526779; font-size: 13px; }
.chat-messages { background: #f4f6f8; border: 1px solid #d5dee6; border-radius: 10px; display: flex; flex-direction: column; gap: 9px; height: 430px; overflow-y: auto; padding: 16px; }
.chat-messages > div { align-self: flex-start; background: #fff; border-radius: 4px 12px 12px; box-shadow: 0 2px 8px rgba(8,39,67,.08); max-width: 78%; padding: 10px 12px; }
.chat-messages > div.is-user { align-self: flex-end; background: #dceefa; border-radius: 12px 4px 12px 12px; }
.chat-messages p { color: #17344d; line-height: 1.45; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-messages time { color: #71808d; display: block; font-size: 10px; margin-top: 5px; text-align: right; }
.chat-form { display: grid; gap: 9px; grid-template-columns: 1fr auto; margin-top: 11px; }
.chat-form textarea { border: 1px solid #bfcdd8; border-radius: 8px; font: inherit; padding: 11px; resize: none; }
.chat-form button { background: #073c68; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-weight: 900; padding: 0 22px; }
.chat-form button:disabled { cursor: wait; opacity: .55; }
.chat-message-status { color: #536577; font-size: 12px; min-height: 18px; padding-top: 6px; text-align: right; }
@media (max-width: 820px) {
    .consecration-layout, .novena-layout, .heart-layout { grid-template-columns: 1fr; }
    .heart-visual { min-height: 420px; }
}
@media (max-width: 560px) {
    .app-resource-topbar { align-items: stretch; grid-template-columns: 1fr; padding: 14px; }
    .app-resource-topbar h2 { font-size: 22px; }
    .consecration-layout, .novena-layout, .heart-layout { padding: 12px; }
    .consecration-progress-card > div:first-child, .novena-progress-card > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
    .consecration-day-card, .consecration-days-panel, .novena-day-card, .novena-days-panel, .heart-panel { padding: 16px; }
    .consecration-day-card h3, .novena-day-card h3, .heart-panel h3 { font-size: 24px; }
    .heart-visual { min-height: 360px; padding: 18px; }
    .chat-room { padding: 12px; }
    .chat-messages { height: 390px; padding: 10px; }
    .chat-form { grid-template-columns: 1fr; }
    .chat-form button { min-height: 44px; }
}

/* User-selected devotional artwork; preserve the complete original image. */
.heart-layout .heart-photo { display:block; min-height:0; padding:0; align-self:start; background:#fff5df; container-type:inline-size; }
.heart-photo > img { display:block; width:100%; height:auto; }
.heart-layout .heart-photo [data-heart-preview] { position:absolute; left:50%; top:64%; transform:translate(-50%,-50%); width:43%; min-width:0; max-width:43%; padding:0; margin:0; background:transparent; color:#774416; border-radius:0; font-family:Georgia,serif; font-size:clamp(14px,5.4cqi,29px); line-height:1.15; overflow-wrap:anywhere; text-wrap:balance; }
.heart-layout .heart-photo[data-heart-art="vermelho"] [data-heart-preview] { top:64.5%; color:#fff8dc; text-shadow:0 2px 4px #6d130d; }
.heart-photo [data-heart-preview][data-long-name="true"] { font-size:clamp(11px,3.7cqi,20px); }
.heart-art-picker { margin:22px 0 6px; padding:0; border:0; min-width:0; }
.heart-art-picker legend { font-weight:800; color:#173f60; margin-bottom:12px; font-size:14px; }
.heart-art-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.heart-art-options button { display:flex; align-items:center; gap:10px; padding:8px; text-align:left; background:#fff; border:2px solid #dce5eb; border-radius:10px; color:#173f60; cursor:pointer; font:inherit; font-size:13px; font-weight:700; }
.heart-art-options button[aria-pressed="true"] { border-color:#b77e12; background:#fff8e9; box-shadow:0 0 0 1px #b77e12; }
.heart-art-options button:focus-visible { outline:3px solid #075186; outline-offset:3px; }
.heart-art-options img { width:55px; height:78px; object-fit:cover; border-radius:5px; }
@media(max-width:480px) { .heart-art-options button { flex-direction:column; text-align:center; } .heart-art-options img { width:64px; height:91px; } }
.heart-layout .heart-photo[data-heart-art='estrelas'] [data-heart-preview] { top:64%; color:#fff8dc; text-shadow:0 2px 4px #6d130d; }
.heart-art-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.heart-art-options button { flex-direction:column; text-align:center; }