@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap";:root{--coral:#e9705c;--coral-dark:#d15943;--blue-accent:#6181cf;--navy:#12142b;--navy-deep:#0a0b16;--cream:#fdfaf5;--bg:#fdfaf5;--panel:#f2ede6;--body-text:#333}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}.app-shell>*{width:100%;min-width:0}body{background:var(--bg);color:var(--body-text);font-family:Inter,system-ui,sans-serif}h1,h2,h3{color:var(--navy-deep);margin:0;font-family:Space Grotesk,Inter,system-ui,sans-serif}a{color:inherit}.app-header{z-index:20;background:var(--navy);grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:18px 32px;display:grid;position:relative}.app-header .header-logo{width:auto;height:26px}.app-footer{background:var(--navy-deep);text-align:center;padding:22px 32px}.app-footer .copyright{color:var(--cream);opacity:.55;font-size:14px}.app-header nav.nav-pill{background:#fdfaf514;border-radius:999px;justify-self:center;gap:4px;padding:6px;display:flex}.app-header .header-actions{justify-self:end;align-items:center;gap:10px;display:flex}.nav-link{color:var(--cream);opacity:.85;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;align-items:center;padding:8px 16px;font-size:14.5px;font-weight:500;line-height:1;text-decoration:none;transition:opacity .15s,background .15s;display:flex}.nav-link:hover,.nav-link.is-active{opacity:1;background:#fdfaf51f}.header-icon-btn{display:none}@media (width<=1060px){.app-header{grid-template-columns:auto 1fr auto;padding:14px 18px}.app-header nav.nav-pill,.app-header .header-actions .cta-button,.app-header .header-actions .nav-dropdown-wrap{display:none}.header-icon-btn{width:40px;height:40px;color:var(--navy-deep);cursor:pointer;background:#ece7e0;border:none;border-radius:999px;justify-content:center;align-items:center;font-size:18px;display:flex}.app-header nav.mobile-nav-open{background:var(--navy-deep);border-radius:14px;flex-direction:column;gap:2px;width:min(260px,100vw - 36px);padding:8px;display:flex;position:absolute;top:calc(100% + 8px);right:18px;box-shadow:0 12px 32px #00000073}.app-header nav.mobile-nav-open .nav-link{justify-content:flex-start;padding:12px 14px}}.nav-dropdown-wrap{position:relative}.nav-dropdown{background:var(--navy-deep);z-index:30;border:1px solid #fdfaf51a;border-radius:14px;flex-direction:column;gap:2px;width:240px;padding:8px;display:flex;position:absolute;top:calc(100% + 12px);right:0;box-shadow:0 12px 32px #00000073}.nav-dropdown-item{color:var(--cream);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;transition:background .15s;display:block}.nav-dropdown-item:hover{background:#fdfaf514}.nav-dropdown-meta{padding:8px 14px 10px}.token-usage-bar{flex-direction:column;gap:7px;display:flex}.token-usage-bar-track{background:#fdfaf526;border-radius:999px;width:100%;height:6px;overflow:hidden}.token-usage-bar-fill{background:var(--coral);border-radius:999px;height:100%;transition:width .4s}.token-usage-bar-fill.warn{background:#e0a030}.token-usage-bar-fill.full{background:var(--coral-dark)}.token-usage-bar-label{color:#fdfaf599;font-size:12.5px;line-height:1.4}.token-usage-bar--light .token-usage-bar-track{background:#0a0b1614}.token-usage-bar--light .token-usage-bar-label{color:#777}.nav-dropdown-divider{background:#fdfaf51a;height:1px;margin:4px 6px}.cta-button{white-space:nowrap;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:10px 20px;font-size:14.5px;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.cta-button:hover{transform:translateY(-1px);box-shadow:0 8px 24px #00000040}.cta-button.coral{background:var(--coral);color:#fff}.cta-button.coral:hover{background:var(--coral-dark)}.cta-button.cream{color:var(--navy-deep);background:#ece7e0}.page-container{width:100%;max-width:640px;margin:0 auto;padding:48px 24px 80px}.browse-page{width:100%;max-width:1280px;margin:0 auto;padding:40px 24px 80px}.browse-page h1{margin-bottom:6px;font-size:clamp(26px,3.6vw,34px)}.browse-page .page-sub{color:#777;margin:0 0 28px;font-size:14.5px}.section-label{letter-spacing:.06em;text-transform:uppercase;color:#999;justify-content:space-between;align-items:baseline;margin:32px 0 14px;font-size:11px;font-weight:700;display:flex}.section-label:first-child{margin-top:0}.section-label a{color:var(--coral-dark);font-weight:700;text-decoration:none}.empty-note{color:#888;font-size:14.5px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;margin-bottom:8px;display:grid}.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:8px;display:grid}.topic-card{color:inherit;flex-direction:column;gap:10px;text-decoration:none;display:flex}.topic-card .feature-image{aspect-ratio:1;background:var(--panel);border-radius:18px;width:100%;transition:transform .15s;overflow:hidden;box-shadow:0 10px 30px #0a0b1626}.lazy-image{position:relative;overflow:hidden}.lazy-image-thumb,.lazy-image-full{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.lazy-image-thumb{filter:blur(20px);transform:scale(1.15)}.lazy-image-full{opacity:0;transition:opacity .4s}.lazy-image-full.is-loaded{opacity:1}.topic-card:hover .feature-image{transform:translateY(-3px)}.topic-card-category{letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);opacity:.55;font-size:11px;font-weight:700}.topic-card h3{font-size:17px;line-height:1.3}.topic-card-excerpt{color:#777;margin:0;font-size:13px;line-height:1.5}.card-row{color:inherit;background:#fff;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;text-decoration:none;transition:transform .15s;display:flex;box-shadow:0 6px 20px #0a0b160f}.card-row:hover{transform:translateY(-2px)}.card-row-main{align-items:center;gap:12px;min-width:0;display:flex}.card-row-thumb{background:var(--panel);border-radius:10px;flex-shrink:0;width:44px;height:44px;overflow:hidden}.card-row .card-row-title{color:var(--navy-deep);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.card-row .card-row-meta{color:#999;flex-shrink:0;font-size:12.5px}.card-row-end{flex-shrink:0;align-items:center;gap:12px;display:flex}.card-row-delete{color:#bbb;cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;width:26px;height:26px;transition:color .15s,background .15s;display:inline-flex}.card-row-delete:hover{color:var(--coral-dark);background:#e9705c1a}.tag-filter-chip{cursor:pointer;color:var(--navy-deep);background:#fff;border:1px solid #ddd;border-radius:999px;padding:5px 14px;font-family:inherit;font-size:13px}.tag-filter-chip.active{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}.panel{background:var(--panel);border-radius:16px;margin-bottom:14px;padding:20px 22px}.panel-row{justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.panel-row+.panel-row{border-top:1px solid #0a0b160f}.chat-page{flex-direction:column;min-height:calc(100vh - 90px);display:flex}.chat-content{width:100%;max-width:760px;margin:0 auto}.chat-messages{flex-direction:column;flex:1;gap:12px;width:100%;max-width:760px;margin:0 auto;padding:32px 24px;display:flex;overflow-y:auto}.chat-bubble{white-space:pre-line;border-radius:16px;max-width:78%;padding:12px 16px;font-size:15px;line-height:1.65;position:relative}.chat-bubble.user{background:var(--coral);color:#fff;align-self:flex-end}.chat-bubble.catechist{color:var(--body-text);background:#fff;align-self:flex-start;box-shadow:0 6px 20px #0a0b1614}.chat-bubble.crisis{background:var(--navy);max-width:100%;color:var(--cream);border:2px solid var(--coral);align-self:stretch}.chat-retry-btn{width:28px;height:28px;color:var(--coral-dark);cursor:pointer;background:#fff;border:1px solid #0a0b1614;border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;bottom:-14px;right:-14px;box-shadow:0 4px 12px #0a0b162e}.chat-retry-btn:hover{background:var(--panel)}.chat-input-bar{background:#fff;border-top:1px solid #0a0b1614;width:100%}.chat-input-inner{gap:10px;max-width:900px;margin:0 auto;padding:16px 24px;display:flex}.page-banner{height:38vh;min-height:260px;max-height:400px;position:relative}.page-banner .banner-bg{position:absolute;inset:0}.page-banner-scrim{background:linear-gradient(#0a0b1659 0%,#0a0b16cc 100%);position:absolute;inset:0}.page-banner-text{text-align:center;position:absolute;bottom:28px;left:24px;right:24px}.page-banner-kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--cream);opacity:.75;margin-bottom:8px;font-size:12px;font-weight:700;display:block}.page-banner-text h1{color:var(--cream);text-shadow:0 2px 10px #00000080;font-size:clamp(28px,4.5vw,42px)}@media (width<=480px){.page-banner{min-height:220px}}.login-hero{background-color:var(--navy);flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100vh;padding:32px 28px;display:flex;position:relative;overflow:hidden}.login-hero-scrim{z-index:0;pointer-events:none;background:linear-gradient(#0a0b1659,#e9705ce6 55%,#e9705cf7 100%);position:absolute;inset:0}.login-form{z-index:1;flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex;position:relative}.login-input{color:var(--cream);background:#fdfaf514;border:1px solid #fdfaf540;border-radius:10px;outline:none;padding:12px 14px;font-size:15px}.audio-player{background:#fff;border-radius:20px;align-items:center;gap:16px;margin:0 0 32px;padding:16px 24px;display:flex;box-shadow:0 8px 24px #0a0b1614}.audio-player-play,.audio-player-skip{cursor:pointer;color:var(--navy-deep);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.audio-player-play{background:var(--navy-deep);width:44px;height:44px;color:var(--cream);border-radius:50%;font-size:18px}.audio-player-skip{opacity:.55;font-size:16px;transition:opacity .15s}.audio-player-skip:hover{opacity:.9}.audio-player-time{font-variant-numeric:tabular-nums;color:var(--navy-deep);opacity:.55;flex-shrink:0;font-size:13px}.audio-player-waveform{cursor:pointer;flex:1;align-items:center;gap:2px;height:32px;display:flex}.audio-player-bar{background:#0a0b1626;border-radius:2px;flex:1;min-width:2px;transition:background .1s}.audio-player-bar.is-played{background:var(--coral)}@media (width<=560px){.audio-player{gap:10px;padding:14px 16px}.audio-player-skip,.audio-player-bar:nth-child(2n){display:none}.audio-player-time{font-size:12px}}.perspective-author-bio{background:var(--panel);border-radius:16px;align-items:center;gap:18px;margin-top:40px;padding:18px 20px;display:flex}.perspective-author-bio .lazy-image{background:var(--panel);border-radius:50%;flex-shrink:0;width:56px;height:56px}.perspective-author-bio p{color:#55554f;margin:0 0 6px;font-size:14px}.perspective-author-bio p:last-child{margin-bottom:0}.perspective-author-invite a{color:var(--coral-dark);font-weight:600}@media (width<=480px){.perspective-author-bio{text-align:center;flex-direction:column;align-items:center}}.dialogue-transcript{flex-direction:column;gap:28px;margin:8px 0 32px;display:flex}.dialogue-turn{align-items:flex-start;gap:16px;display:flex}.dialogue-turn--right{flex-direction:row-reverse}.dialogue-avatar-col{flex-direction:column;flex-shrink:0;align-items:center;gap:6px;width:72px;display:flex}.dialogue-avatar{background:var(--panel);border-radius:50%;width:56px;height:56px}.dialogue-speaker-name{text-transform:uppercase;letter-spacing:.04em;color:var(--navy-deep);opacity:.7;text-align:center;font-size:12px;font-weight:700}.dialogue-turn-text{background:var(--panel);border-radius:16px;flex:1;padding:16px 20px}.dialogue-turn-text p{color:#333;margin:0 0 12px;font-size:15.5px;line-height:1.7}.dialogue-turn-text p:last-child{margin-bottom:0}.dialogue-stage-direction{opacity:.6;font-style:italic}@media (width<=480px){.dialogue-turn,.dialogue-turn--right{text-align:left;flex-direction:column;align-items:center}.dialogue-avatar-col{flex-direction:row;gap:8px;width:auto}.dialogue-turn-text{width:100%}}
