* { box-sizing: border-box; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
html { min-height: 100%; background: rgb(248 250 252); }
body { min-height: 100%; letter-spacing: 0; -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at top left, rgb(219 234 254 / .55), transparent 34rem), linear-gradient(135deg, rgb(248 250 252), rgb(245 245 244)); }
.dark body::before { background: radial-gradient(circle at top left, rgb(30 41 59 / .65), transparent 34rem), linear-gradient(135deg, rgb(2 6 23), rgb(15 23 42)); }
[x-cloak] { display: none !important; }
.soft-card { border: 1px solid rgb(226 232 240); background: rgb(255 255 255 / .92); border-radius: 28px; padding: 1.25rem; box-shadow: 0 18px 50px rgb(15 23 42 / 0.07); backdrop-filter: blur(16px); }
.dark .soft-card { border-color: rgb(30 41 59); background: rgb(15 23 42 / .86); box-shadow: none; }
.nav-link { display: flex; align-items: center; gap: .75rem; min-height: 44px; border-radius: 18px; padding: .72rem .85rem; color: rgb(71 85 105); font-weight: 700; transition: .18s ease; }
.nav-link:hover, .nav-link.active { background: rgb(241 245 249); color: rgb(15 23 42); box-shadow: inset 0 0 0 1px rgb(226 232 240); }
.dark .nav-link { color: rgb(148 163 184); }
.dark .nav-link:hover, .dark .nav-link.active { background: rgb(30 41 59); color: white; box-shadow: inset 0 0 0 1px rgb(51 65 85); }
.nav-link svg, .icon-button svg, .quick svg, .primary-button svg, .ghost-button svg { width: 18px; height: 18px; flex: none; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 18px; border: 1px solid rgb(226 232 240); background: white; color: rgb(51 65 85); transition: .18s ease; }
.icon-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgb(15 23 42 / .08); }
.dark .icon-button { border-color: rgb(30 41 59); background: rgb(15 23 42); color: rgb(226 232 240); }
.primary-button, .ghost-button { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; border-radius: 18px; padding: .75rem 1rem; font-weight: 800; transition: .18s ease; }
.primary-button { background: rgb(15 23 42); color: white; }
.primary-button:hover { transform: translateY(-1px); background: rgb(30 41 59); }
.dark .primary-button { background: white; color: rgb(15 23 42); }
.ghost-button { background: rgb(248 250 252); color: rgb(71 85 105); }
.dark .ghost-button { background: rgb(2 6 23); color: rgb(203 213 225); }
.primary-button.is-loading, .ghost-button.is-loading { opacity: .72; pointer-events: none; }
.primary-button.is-loading::after, .ghost-button.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: grid; gap: .45rem; font-size: .83rem; font-weight: 700; color: rgb(71 85 105); }
.dark .field { color: rgb(203 213 225); }
.field input, .field textarea, .field select, .control { width: 100%; min-height: 46px; border: 1px solid rgb(226 232 240); border-radius: 18px; background: rgb(248 250 252); padding: .78rem .9rem; color: rgb(15 23 42); outline: none; font-weight: 600; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .control:focus { border-color: rgb(100 116 139); background: white; box-shadow: 0 0 0 4px rgb(148 163 184 / .18); }
.dark .field input, .dark .field textarea, .dark .field select, .dark .control { border-color: rgb(30 41 59); background: rgb(2 6 23); color: white; }
.check { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; border-radius: 999px; background: rgb(248 250 252); padding: .55rem .8rem; font-size: .85rem; font-weight: 700; color: rgb(71 85 105); }
.dark .check { background: rgb(2 6 23); color: rgb(203 213 225); }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 18px; color: white; font-weight: 800; }
.metric { border-radius: 24px; background: rgb(248 250 252); padding: 1rem; }
.dark .metric { background: rgb(2 6 23); }
.metric span { display: block; overflow-wrap: anywhere; font-size: 1.35rem; font-weight: 800; }
.metric small { color: rgb(100 116 139); font-weight: 700; }
.mini-row { display: grid; grid-template-columns: 20px 1fr; gap: .25rem .65rem; border-radius: 22px; background: rgb(248 250 252); padding: .9rem; }
.mini-row strong { grid-column: 2; }
.dark .mini-row { background: rgb(2 6 23); }
.quick { display: flex; align-items: center; gap: .75rem; min-height: 72px; border: 1px solid rgb(226 232 240); border-radius: 24px; background: rgb(248 250 252); padding: 1rem; font-weight: 800; transition: .18s ease; }
.quick:hover { transform: translateY(-1px); background: white; box-shadow: 0 10px 28px rgb(15 23 42 / .08); }
.dark .quick { border-color: rgb(30 41 59); background: rgb(2 6 23); }
.section-title { font-size: 1.15rem; font-weight: 800; }
.icon-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 20px; background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .icon-badge { background: rgb(2 6 23); color: white; }
.empty-state { display: grid; place-items: center; gap: 1rem; min-height: 260px; border: 1px dashed rgb(203 213 225); border-radius: 28px; color: rgb(100 116 139); }
.empty-state svg { width: 34px; height: 34px; }
.dark .empty-state { border-color: rgb(51 65 85); color: rgb(148 163 184); }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; background: rgb(226 232 240 / .8); padding: .28rem .62rem; color: rgb(71 85 105); font-size: .72rem; font-weight: 800; }
.dark .status-pill { background: rgb(51 65 85 / .8); color: rgb(203 213 225); }
.is-archived { opacity: .82; }
.prayer-card { position: relative; overflow: hidden; }
.dark .prayer-card { background: rgb(15 23 42 / .88) !important; }
.prayer-open { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; border-radius: 20px; background: rgb(255 255 255 / .7); padding: .85rem 1rem; color: rgb(51 65 85); font-size: .9rem; font-weight: 800; transition: .18s ease; }
.prayer-open:hover { background: white; transform: translateY(-1px); }
.prayer-open svg { width: 18px; height: 18px; transition: transform .18s ease; }
.dark .prayer-open { background: rgb(2 6 23 / .55); color: rgb(226 232 240); }
.prayer-section { border: 1px solid rgb(226 232 240 / .88); border-radius: 24px; padding: 1rem; }
.prayer-section p { color: rgb(51 65 85); font-size: .92rem; line-height: 1.7; }
.dark .prayer-section { border-color: rgb(51 65 85 / .85); }
.dark .prayer-section p { color: rgb(203 213 225); }
.prayer-section.request { background: rgb(255 255 255 / .72); }
.prayer-section.answer { background: rgb(236 253 245 / .75); }
.dark .prayer-section.request { background: rgb(15 23 42 / .62); }
.dark .prayer-section.answer { background: rgb(6 78 59 / .22); }
.prayer-label { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; color: rgb(71 85 105); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.prayer-label svg { width: 15px; height: 15px; }
.dark .prayer-label { color: rgb(148 163 184); }
.prayer-section small { display: block; margin-top: .75rem; color: rgb(5 150 105); font-weight: 800; }
.prayed-list { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-radius: 22px; background: rgb(241 245 249 / .85); padding: .85rem 1rem; color: rgb(71 85 105); font-size: .86rem; }
.prayed-list span { display: inline-flex; align-items: center; gap: .45rem; font-weight: 900; }
.prayed-list svg { width: 16px; height: 16px; }
.prayed-list strong { color: rgb(15 23 42); text-align: right; }
.dark .prayed-list { background: rgb(2 6 23 / .55); color: rgb(148 163 184); }
.dark .prayed-list strong { color: white; }
.ghost-button.prayed { background: rgb(220 252 231); color: rgb(22 101 52); }
.dark .ghost-button.prayed { background: rgb(20 83 45 / .45); color: rgb(187 247 208); }
.mobile-nav { position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; border: 1px solid rgb(226 232 240 / .9); border-radius: 26px; background: rgb(255 255 255 / .9); padding: .45rem; box-shadow: 0 16px 40px rgb(15 23 42 / .16); backdrop-filter: blur(18px); }
.dark .mobile-nav { border-color: rgb(51 65 85 / .9); background: rgb(15 23 42 / .9); }
.mobile-nav a { display: grid; justify-items: center; align-content: center; gap: .2rem; min-width: 0; min-height: 54px; border-radius: 20px; color: rgb(100 116 139); font-size: .68rem; font-weight: 800; }
.mobile-nav a.active { background: rgb(15 23 42); color: white; }
.dark .mobile-nav a.active { background: white; color: rgb(15 23 42); }
.mobile-nav svg { width: 19px; height: 19px; }
.mobile-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    body { overscroll-behavior-y: contain; }
    .soft-card { border-radius: 24px; padding: 1rem; box-shadow: 0 10px 30px rgb(15 23 42 / .06); }
    .primary-button, .ghost-button { width: 100%; justify-content: center; }
    .metric { padding: .9rem; }
    .metric span { font-size: 1.15rem; }
    .quick { min-height: 62px; border-radius: 22px; }
    .prayed-list { align-items: flex-start; flex-direction: column; }
    .prayed-list strong { text-align: left; }
    h1, h2, h3, p, a, button, label, span, strong { overflow-wrap: anywhere; }
}