:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: rgba(255, 255, 255, .06);--bg-card-hover: rgba(255, 255, 255, .1);--text-primary: #f0f0f0;--text-secondary: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .4);--accent: #a78bfa;--accent-glow: rgba(167, 139, 250, .3);--gold: #f5c842;--success: #4ade80;--border: rgba(255, 255, 255, .08);--font-display: "Playfair Display", Georgia, serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius: 16px;--radius-sm: 10px;--safe-bottom: env(safe-area-inset-bottom, 0px);--nav-height: 64px}.light-mode{--bg-primary: #f8f6f3;--bg-secondary: #ffffff;--bg-card: rgba(0, 0, 0, .04);--bg-card-hover: rgba(0, 0, 0, .07);--text-primary: #1a1a2e;--text-secondary: rgba(0, 0, 0, .6);--text-muted: rgba(0, 0, 0, .35);--accent: #7c3aed;--accent-glow: rgba(124, 58, 237, .2);--border: rgba(0, 0, 0, .08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}.app{height:100%;display:flex;flex-direction:column;position:relative;max-width:480px;margin:0 auto}.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 20px calc(var(--nav-height) + var(--safe-bottom) + 20px);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.screen::-webkit-scrollbar{display:none}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.ambient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:orbFloat 20s ease-in-out infinite}.ambient-orb:nth-child(1){width:300px;height:300px;background:#7c3aed;top:-80px;left:-60px;animation-delay:0s}.ambient-orb:nth-child(2){width:250px;height:250px;background:#3b82f6;bottom:20%;right:-40px;animation-delay:-7s}.ambient-orb:nth-child(3){width:200px;height:200px;background:#ec4899;top:40%;left:10%;animation-delay:-14s}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.95)}}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:calc(var(--nav-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--text-muted);font-size:10px;font-family:var(--font-body);cursor:pointer;padding:8px 16px;border-radius:12px;transition:all .3s ease;-webkit-tap-highlight-color:transparent}.nav-item.active{color:var(--accent)}.nav-item.active .nav-icon{transform:scale(1.1)}.nav-icon{font-size:22px;line-height:1;transition:transform .3s ease}.verse-date{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:8px}.verse-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:24px}.verse-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;margin-bottom:20px;overflow:hidden;animation:fadeUp .8s ease-out}.verse-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent, var(--accent));opacity:.7}.verse-text{font-family:var(--font-display);font-size:22px;line-height:1.6;font-weight:400;font-style:italic;margin-bottom:20px;color:var(--text-primary);animation:fadeIn 1.2s ease-out .2s both}.verse-ref{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:20px;animation:fadeIn 1.2s ease-out .4s both}.verse-actions{display:flex;gap:8px;animation:fadeIn 1.2s ease-out .6s both}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.btn:hover{background:var(--bg-card-hover)}.btn:active{transform:scale(.97)}.btn.fav-active{color:#ef4444;border-color:#ef44444d;background:#ef44441a}.btn.audio-active{color:var(--accent);border-color:var(--accent-glow);background:#a78bfa1a;animation:pulse 2s ease-in-out infinite}.btn-share{background:linear-gradient(135deg,var(--accent),#6366f1);border:none;color:#fff}.btn-share:hover{opacity:.9;background:linear-gradient(135deg,var(--accent),#6366f1)}.category-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:24px;scrollbar-width:none}.category-bar::-webkit-scrollbar{display:none}.chip{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-family:var(--font-body);font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.chip:active{transform:scale(.96)}.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.reflection-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}.reflection-label{font-size:13px;font-weight:500;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:6px}.reflection-area{width:100%;min-height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#0003;color:var(--text-primary);font-family:var(--font-body);font-size:14px;line-height:1.6;padding:14px;resize:vertical;outline:none;transition:border-color .2s}.light-mode .reflection-area{background:#00000008}.reflection-area:focus{border-color:var(--accent)}.reflection-area::placeholder{color:var(--text-muted)}.reflection-date{font-size:11px;color:var(--text-muted);margin-top:8px}.fav-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px;cursor:pointer;transition:all .2s ease;animation:fadeUp .4s ease-out both}.fav-card:active{transform:scale(.98)}.fav-card .fav-text{font-family:var(--font-display);font-size:16px;line-height:1.5;font-style:italic;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.fav-card .fav-ref{font-size:13px;font-weight:600;color:var(--accent)}.fav-card .fav-remove{float:right;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px;transition:color .2s}.fav-card .fav-remove:hover{color:#ef4444}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state-text{font-size:14px;line-height:1.6}.streak-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;text-align:center;margin-bottom:20px}.streak-number{font-size:56px;font-weight:700;font-family:var(--font-display);color:var(--gold);line-height:1;margin-bottom:4px;text-shadow:0 0 30px rgba(245,200,66,.3)}.streak-label{font-size:14px;color:var(--text-secondary);margin-bottom:20px}.streak-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}.streak-day{aspect-ratio:1;border-radius:6px;background:var(--bg-card-hover);transition:all .3s ease}.streak-day.active{background:var(--gold);box-shadow:0 0 8px #f5c84266}.streak-day.today{border:2px solid var(--accent)}.streak-days-label{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:16px}.streak-days-label span{font-size:10px;color:var(--text-muted);text-align:center}.streak-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.streak-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 12px}.streak-stat-value{font-size:22px;font-weight:700;font-family:var(--font-display);color:var(--text-primary)}.streak-stat-label{font-size:11px;color:var(--text-muted);margin-top:2px}.settings-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}.settings-item:last-child{border-bottom:none}.settings-item:active{background:var(--bg-card-hover)}.settings-left{display:flex;align-items:center;gap:12px}.settings-icon{font-size:20px}.settings-label{font-size:14px;font-weight:500}.toggle{width:44px;height:24px;border-radius:12px;background:var(--text-muted);position:relative;cursor:pointer;transition:background .3s;border:none;-webkit-tap-highlight-color:transparent}.toggle.on{background:var(--accent)}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s;box-shadow:0 1px 3px #0003}.toggle.on:after{transform:translate(20px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease-out}.modal{width:100%;max-width:480px;background:var(--bg-secondary);border-radius:var(--radius) var(--radius) 0 0;padding:24px 20px calc(24px + var(--safe-bottom));animation:slideUp .3s ease-out}.modal-title{font-size:18px;font-weight:600;margin-bottom:20px;text-align:center}.share-options{display:flex;justify-content:center;gap:24px;margin-bottom:20px}.share-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:11px;font-family:var(--font-body);-webkit-tap-highlight-color:transparent}.share-btn:active{transform:scale(.95)}.share-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}.share-fb{background:#1877f2}.share-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.share-msg{background:#0084ff}.share-copy{background:var(--bg-card-hover)}.modal-close{width:100%;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:15px;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:background .2s}.modal-close:active{background:var(--bg-card-hover)}.verse-list-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px;cursor:pointer;transition:all .2s ease;animation:fadeUp .4s ease-out both}.verse-list-item:active{transform:scale(.98)}.verse-list-item .vli-text{font-family:var(--font-display);font-size:15px;line-height:1.5;font-style:italic;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.verse-list-item .vli-ref{font-size:13px;font-weight:600;color:var(--accent)}.back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--accent);font-size:14px;font-family:var(--font-body);font-weight:500;cursor:pointer;margin-bottom:20px;padding:8px 0;-webkit-tap-highlight-color:transparent}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 20px;font-size:13px;font-weight:500;color:var(--text-primary);z-index:300;animation:slideDown .3s ease-out;box-shadow:0 8px 32px #0000004d}.toast.success{border-left:3px solid var(--success)}.toast.info{border-left:3px solid var(--accent)}.particle{position:absolute;width:3px;height:3px;background:#ffffff4d;border-radius:50%;animation:particleFloat linear infinite}@keyframes particleFloat{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) rotate(720deg);opacity:0}}.notif-banner{background:linear-gradient(135deg,#a78bfa26,#6366f126);border:1px solid var(--accent-glow);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px;animation:fadeUp .6s ease-out}.notif-icon{font-size:24px}.notif-text{font-size:13px;line-height:1.5;color:var(--text-secondary)}.notif-text strong{color:var(--text-primary);display:block;margin-bottom:2px}.notif-dismiss{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;margin-left:auto;padding:4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 8px transparent}}.stagger>*:nth-child(1){animation-delay:0s}.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}.stagger>*:nth-child(6){animation-delay:.25s}.stagger>*:nth-child(7){animation-delay:.3s}.stagger>*:nth-child(8){animation-delay:.35s}.stagger>*:nth-child(9){animation-delay:.4s}.stagger>*:nth-child(10){animation-delay:.45s}.light-mode .screen::-webkit-scrollbar{width:4px}.light-mode .screen::-webkit-scrollbar-track{background:transparent}.light-mode .screen::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}