:root{
  --bg:#f6f2fb; --surface:#ffffff; --text:#2d2735; --muted:#7c7487;
  --primary:#7b5cff; --primary-2:#a78bfa; --soft:#eee8ff; --accent:#f4b8c8;
  --border:#e8e2ef; --shadow:0 16px 40px rgba(74,50,120,.12);
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,#fbf9fe 0%,var(--bg) 100%);color:var(--text)}
body.dark{--bg:#17131d;--surface:#211a29;--text:#f8f5fb;--muted:#b9afc4;--soft:#2f2540;--border:#3a3044;--shadow:0 16px 40px rgba(0,0,0,.25);background:#15111b}
button,textarea{font:inherit}.app-shell{max-width:880px;margin:0 auto;min-height:100vh;padding:20px 18px 100px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.topbar h1{font-family:'Playfair Display',serif;font-size:28px;margin:2px 0 0}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--primary);margin:0 0 5px}.icon-btn,.heart-btn,.close-btn{border:0;background:var(--surface);color:var(--text);width:42px;height:42px;border-radius:14px;box-shadow:var(--shadow);cursor:pointer}.hero-card{background:linear-gradient(135deg,#6f52e5,#9e7df3);color:white;padding:24px;border-radius:28px;display:flex;gap:22px;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.hero-card h2{font-family:'Playfair Display',serif;font-size:31px;margin:10px 0 8px}.hero-card p{max-width:520px;margin:0;opacity:.9;line-height:1.55}.pill{display:inline-flex;align-items:center;background:rgba(255,255,255,.18);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}.progress-box{display:flex;align-items:center;gap:12px;min-width:180px}.progress-ring{--p:0; width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.2) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#7d60e5}.progress-ring span{position:relative;font-weight:800;font-size:14px}.progress-box strong,.progress-box small{display:block}.progress-box small{opacity:.8;margin-top:3px}.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:22px;margin-top:18px;box-shadow:var(--shadow)}.soft-card{background:linear-gradient(180deg,var(--surface),var(--soft))}.card-head,.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.card h3,.section-title h2{margin:2px 0 0}.scripture{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;margin:22px 0 10px}.reflection{color:var(--muted);line-height:1.65;font-size:16px}.primary-btn,.secondary-btn{border:0;border-radius:14px;padding:13px 17px;font-weight:800;cursor:pointer}.primary-btn{background:var(--primary);color:white}.secondary-btn{background:var(--soft);color:var(--primary)}.today-card .primary-btn{width:100%;margin-top:6px}.heart-btn{font-size:24px;box-shadow:none;background:var(--soft);color:var(--primary)}.routine h3{margin-top:0}.routine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.routine-grid div{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px}.routine-grid span,.routine-grid strong,.routine-grid small{display:block}.routine-grid span{font-size:11px;color:var(--primary);font-weight:800}.routine-grid strong{margin:8px 0 4px;font-size:13px}.routine-grid small{color:var(--muted)}.view{display:none}.view.active{display:block}.section-title{margin:8px 0 16px}.section-title .pill{background:var(--soft);color:var(--primary)}.plan-list,.journal-list{display:grid;gap:12px}.plan-item,.journal-item{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 20px rgba(40,30,60,.06)}.day-badge{width:44px;height:44px;border-radius:14px;background:var(--soft);color:var(--primary);display:grid;place-items:center;font-weight:800;flex:0 0 auto}.plan-content{flex:1;min-width:0}.plan-content strong{display:block}.plan-content small{color:var(--muted);display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plan-actions{display:flex;gap:6px}.mini-btn{border:0;background:transparent;color:var(--primary);font-size:20px;cursor:pointer;padding:6px}.completed .day-badge{background:var(--primary);color:white}.journal-item{align-items:flex-start}.journal-text{color:var(--muted);line-height:1.55;margin-top:6px;white-space:pre-wrap}.empty{background:var(--surface);border:1px dashed var(--border);border-radius:18px;padding:24px;text-align:center;color:var(--muted)}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:min(560px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.94);border:1px solid #ebe5f1;border-radius:22px;padding:8px;box-shadow:0 18px 45px rgba(46,31,74,.18);backdrop-filter:blur(16px);z-index:20}body.dark .bottom-nav{background:rgba(33,26,41,.95);border-color:var(--border)}.nav-btn{border:0;background:transparent;color:var(--muted);padding:8px 5px;border-radius:14px;cursor:pointer}.nav-btn span,.nav-btn small{display:block}.nav-btn span{font-size:20px}.nav-btn small{margin-top:3px;font-size:11px}.nav-btn.active{background:var(--soft);color:var(--primary)}.modal{border:0;padding:0;background:transparent}.modal::backdrop{background:rgba(20,14,28,.55);backdrop-filter:blur(3px)}.modal-card{width:min(620px,calc(100vw - 26px));max-height:88vh;overflow:auto;background:var(--surface);color:var(--text);border-radius:26px;padding:24px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.25)}.close-btn{position:absolute;right:18px;top:18px;box-shadow:none;background:var(--soft);font-size:25px}.modal-card h2{font-family:'Playfair Display',serif;font-size:34px;margin:8px 0 18px}.modal-section{border-top:1px solid var(--border);padding-top:16px;margin-top:16px}.modal-section h4{margin:0 0 8px}.modal-section p{color:var(--muted);line-height:1.65;margin:0}.quote-box{background:var(--soft);border:0;border-radius:16px;padding:16px}.modal-card label{display:block;font-weight:700;margin:18px 0 8px}.modal-card textarea{width:100%;resize:vertical;border:1px solid var(--border);border-radius:15px;background:var(--bg);color:var(--text);padding:14px;outline:none}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
@media(max-width:680px){.app-shell{padding:16px 14px 96px}.hero-card{display:block;padding:22px}.hero-card h2{font-size:27px}.progress-box{margin-top:22px}.routine-grid{grid-template-columns:repeat(2,1fr)}.scripture{font-size:27px}.section-title{align-items:flex-end}.modal-actions{flex-direction:column-reverse}.modal-actions button{width:100%}}