:root{--plum:#412850;--ink:#382548;--lav:#9a79bd;--lilac:#e9def2;--sage:#7e997e;--cream:#fffaf8;--line:#eee4ed;--text2:#786b85;--bg:#f9f2f8;--paper:#fffdfb;--shadow:0 10px 35px rgba(74,42,80,.08);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(125deg,#f3e7f5,#fff6f0 48%,#e8dce9)}body{padding-bottom:env(safe-area-inset-bottom)}button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #bd9fd2;outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}h1,h2,h3,p{margin:0}h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:400}h1{font-size:clamp(30px,7vw,43px)}h2{font-size:24px}h3{font-size:19px}.app-shell{width:min(100%,520px);min-height:100dvh;margin:auto;background:var(--cream);position:relative;box-shadow:0 0 70px rgba(73,45,82,.18);padding-bottom:calc(88px + env(safe-area-inset-bottom))}.brand-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px 2px;background:linear-gradient(110deg,#fff4f6,#f7edfa 65%,#fff6e8)}.brand-logo{height:68px;max-width:148px;object-fit:contain;object-position:left center}.brand-actions{display:flex;gap:9px}.icon-btn{min-width:40px;height:40px;border:1px solid #e8dce9;border-radius:100px;color:var(--plum);background:#ffffffb3;font-size:23px}.screen{padding:0 14px 20px}.hero{margin:0 -14px 12px;padding:0 18px 18px;min-height:200px;background:radial-gradient(ellipse at 65% 63%,#fff1c7ba 0%,transparent 29%),linear-gradient(180deg,#f7eaf7 0%,#fcece9 34%,#e9dced 59%,#c9c9de 77%,#f8eff6 100%);position:relative;overflow:hidden}.hero:before{content:'✿  ❀     ✾';position:absolute;bottom:5px;left:-7px;font-size:70px;letter-spacing:-15px;color:#8c6dba57;transform:rotate(-14deg)}.hero:after{content:'✿  ✾';position:absolute;bottom:-11px;right:-16px;font-size:80px;color:#a47ac542;transform:rotate(21deg)}.hero-content{position:relative;z-index:1;text-align:center}.app-title{font-family:Georgia,serif;color:#4e2a65;font-style:italic;font-weight:400;letter-spacing:-1.5px;font-size:clamp(37px,9vw,52px);line-height:1.12;margin:-4px 0 0}.app-subtitle{font-family:Georgia,serif;font-size:18px;color:#593969;margin:1px auto 15px}.greeting{text-align:center;font-family:Georgia,serif;font-size:clamp(26px,7vw,34px);line-height:1.1;color:#402755;margin-bottom:8px}.date-strip{margin:0 auto;display:flex;justify-content:center;align-items:center;gap:7px;width:fit-content;max-width:100%;font-size:12px;background:#ffffffc9;border:1px solid #ffffffc9;box-shadow:0 2px 12px #fff8;border-radius:50px;padding:9px 11px;white-space:nowrap}.date-strip span+span:before{content:'·';padding-right:7px;color:#91789c}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;background:#f2eaf2;border:1px solid #ebe0ef;border-radius:26px;margin-bottom:12px}.tabs button{background:transparent;border:0;border-radius:23px;color:#4d4266;min-height:47px;font-size:15px}.tabs button.active{background:linear-gradient(110deg,#b99acb,#8d69b8);color:white;box-shadow:0 4px 14px #6d4d9530}.stack{display:grid;gap:10px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:0 3px 12px #5b386308}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.panel-head h2{font-size:22px}.muted{color:var(--text2)}.small{font-size:12px}.linkish{background:none;border:0;color:#5b4380;padding:5px;font-size:13px}.action-card{display:flex;gap:13px;align-items:center;min-height:75px;padding:11px;border:1px solid #eee4ed;border-radius:16px;background:#fffdfd;text-align:left;width:100%;color:var(--ink)}.action-card+.action-card{margin-top:9px}.action-card h3{font-size:18px;line-height:1.14}.action-card p{font-size:12.5px;color:#857696;margin-top:4px}.action-art{display:flex;align-items:center;justify-content:center;width:64px;height:58px;border-radius:13px;flex-shrink:0;font-size:31px;background:linear-gradient(130deg,#e7d7e9,#fff4ea)}.action-art.gold{background:linear-gradient(130deg,#ffeac2,#f4dce5)}.action-art.green{background:linear-gradient(130deg,#dce9df,#fdf6e5)}.action-text{flex:1;min-width:0}.action-next{font-size:25px;color:#795e9c;padding-right:7px}.circle-action{border:0;border-radius:50%;height:44px;width:44px;color:#fff;background:linear-gradient(145deg,#c6a7d4,#926db4);font-size:22px;flex:0 0 auto}.supports{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.support-item{display:flex;align-items:center;gap:5px;flex-direction:column;border:0;background:transparent;color:#725d85;padding:3px 0 0;min-width:0}.support-item .sup-ico{width:39px;height:39px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f4eaf6;border:1px solid #e5d5ed;font-size:20px}.support-item:nth-child(3n+1) .sup-ico{background:#edf1ff}.support-item:nth-child(3n+2) .sup-ico{background:#fff0f2}.support-item:nth-child(3n+3) .sup-ico{background:#e9f3e9}.support-item span:last-child{font-size:9px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.plan-summary{background:#faf4f9;border-radius:13px;padding:14px;display:flex;align-items:center;gap:11px}.plan-summary .count{flex:1;font-size:13px;color:#746484}.primary{border:0;border-radius:14px;background:#8c6eaf;color:white;font-weight:650;padding:13px 18px;min-height:44px}.secondary{border:1px solid #d9c8e6;border-radius:14px;background:#f8f3fb;color:#593e74;padding:12px 15px;min-height:44px}.soft-action{padding:10px 12px;background:#f8f1fb;border-radius:14px;border:1px solid #ebdfee;color:#5b4370}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);z-index:10;background:#fffcfffa;border-top:1px solid #ebe1e9;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px calc(9px + env(safe-area-inset-bottom))}.nav-btn{border:0;background:none;color:#877995;display:flex;align-items:center;flex-direction:column;gap:2px;min-height:55px;font-size:11px}.nav-btn.active{color:#60357d;font-weight:650}.nav-icon{font-size:25px;line-height:28px}.page-top{padding:18px 7px 12px}.page-top p{color:#756480;margin-top:6px;font-size:14px;line-height:1.4}.page-top h1{font-size:33px}.pill{border-radius:100px;background:#f3e6f3;color:#76588d;font-size:12px;padding:6px 10px;display:inline-block}.date-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0}.date-nav button{border:1px solid #e9dded;border-radius:12px;background:#fff;padding:8px 13px;color:var(--plum);font-size:20px;min-height:42px}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:8px 0 16px}.day-tile{background:#fff;border:1px solid #efe4ef;border-radius:13px;padding:9px 0;display:flex;align-items:center;flex-direction:column;gap:7px;color:#76677b;min-height:66px}.day-tile.active{background:#a083bf;color:white}.day-tile span{font-size:11px}.day-tile strong{font-size:17px}.flex{display:flex;align-items:center;gap:8px}.space-between{justify-content:space-between}.task-row{display:flex;gap:12px;align-items:flex-start;padding:13px 1px;border-bottom:1px solid #f0e9ef}.task-row:last-child{border-bottom:0}.task-check{border:2px solid #bda9cc;border-radius:8px;background:#fff;width:25px;height:25px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:white;margin-top:2px}.task-check.done{background:#9875b5;border-color:#9875b5}.task-main{flex:1;min-width:0}.task-main h3{font:600 15px/1.4 system-ui;color:#443050;overflow-wrap:anywhere}.task-main h3.done{text-decoration:line-through;color:#99899e}.task-main p{font-size:12px;color:#897b91;margin-top:3px}.task-edit{border:0;background:transparent;color:#7f6590;font-size:18px;padding:3px 9px}.empty{text-align:center;color:#796a87;padding:20px 9px;line-height:1.5}.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-weight:600;font-size:13px;color:#644b75}.field input,.field textarea,.field select{width:100%;border:1px solid #dfd1e2;border-radius:12px;background:white;padding:12px;color:#4d3b57;font-size:16px;min-height:44px}.field textarea{resize:vertical;min-height:90px}.row{display:flex;gap:9px;flex-wrap:wrap}.row>*{flex:1}.chip{display:inline-flex;align-items:center;padding:4px 8px;border-radius:100px;background:#f3edf5;color:#705f7b;font-size:11px;margin:0 3px 4px 0}.day-prompt{min-height:178px;position:relative;overflow:hidden;background:radial-gradient(circle at 95% 0,#f7d9b0 0,transparent 25%),linear-gradient(145deg,#f7f0e9,#f1e7f4 65%,#e9e5e8);border-radius:21px;padding:21px 19px;border:1px solid #ebd9e4}.day-prompt:after{content:'❧  ✿  ❦';position:absolute;right:-15px;bottom:-24px;font-size:69px;color:#93ac8c44;transform:rotate(-24deg)}.day-prompt .prompt-title{font:italic 26px Georgia,serif;color:#633e6c;margin:10px 0}.day-prompt p{font-size:16px;line-height:1.5;max-width:85%;position:relative;z-index:1}.breath-box{background:linear-gradient(145deg,#fff8fc,#f1edf7);padding:16px;border:1px solid #ebe0ed;border-radius:21px;text-align:center}.breath-stage{position:relative;width:172px;height:172px;margin:23px auto 12px;display:flex;align-items:center;justify-content:center}.breath-stage .square{position:absolute;inset:16px;border:3px solid #ab88c2;border-radius:12px;background:#fff8f999}.breath-dot{position:absolute;top:9px;left:9px;width:18px;height:18px;border-radius:50%;background:#7852a3;box-shadow:0 0 0 6px #ab8cc23f;transform:translate(0,0);will-change:transform}.breath-counter{position:relative;z-index:1}.breath-counter strong{display:block;font:28px Georgia,serif;color:#6a4d82}.breath-counter span{font-size:13px;color:#7a6c86}.notice{padding:12px;border-radius:13px;background:#f5f0f6;color:#73617e;font-size:13px;line-height:1.55}.week-section{margin:10px 0}.week-section>h3{margin:8px 0;font-size:19px}.cycle-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cycle-day{padding:8px 0;border-radius:11px;background:#fff;border:1px solid #ecdfec;text-align:center;color:#785c8b;min-height:48px}.cycle-day.today{background:#9d7aba;color:#fff}.cycle-day em{font:12px system-ui;display:block}.journal-entry{padding:12px;background:#fff;border:1px solid #eadfea;border-radius:14px;margin-bottom:8px}.journal-entry time{font-size:11px;color:#887790}.journal-entry p{white-space:pre-wrap;margin-top:5px;font-size:14px;line-height:1.5}.toast{position:fixed;z-index:50;bottom:calc(86px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(25px);max-width:90vw;width:max-content;background:#50375d;color:white;padding:11px 17px;border-radius:100px;opacity:0;pointer-events:none;transition:.2s;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal-overlay{position:fixed;inset:0;background:#36234084;z-index:30;display:flex;align-items:end;justify-content:center;padding:15px 12px calc(16px + env(safe-area-inset-bottom))}.modal{width:min(100%,500px);max-height:90dvh;overflow:auto;background:#fffafc;border-radius:23px;padding:19px;box-shadow:0 12px 40px #29152e40}.modal h2{margin-bottom:15px}.modal-head{display:flex;justify-content:space-between;align-items:center}.danger{border:1px solid #e9b7c2;background:#fff4f7;color:#933f59;border-radius:12px;padding:11px 13px;min-height:44px}.subsection{margin-top:16px}.subsection h3{margin-bottom:10px}.check-label{font-size:12px;color:#6a5d79;line-height:1.5}.calendar-dot{display:block;width:4px;height:4px;border-radius:50%;background:#a281bb}
@media (max-width:365px){.screen{padding-left:10px;padding-right:10px}.hero{margin-left:-10px;margin-right:-10px}.date-strip{font-size:10px;gap:4px;padding:8px}.date-strip span+span:before{padding-right:4px}.support-item .sup-ico{width:34px;height:34px}.support-item span:last-child{font-size:8px}.action-art{width:53px}.action-card h3{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Approved botanical mood translated into a lightweight app header */
.hero{background-image:linear-gradient(180deg,rgba(254,245,250,.94) 0%,rgba(255,250,248,.86) 26%,rgba(251,241,247,.79) 46%,rgba(245,224,238,.5) 76%,rgba(246,235,248,.65) 100%),url('./assets/hero-lavender.jpg');background-size:cover;background-position:center 52%}
.hero:before,.hero:after{display:none}

/* v0.2 — separate checkboxes for body care */
.body-task{min-height:88px}.body-check{display:flex;align-items:center;justify-content:center;border:1px solid #d8c5e4;border-radius:50%;width:42px;height:42px;color:#8d72a5;font-size:24px;flex:0 0 auto;background:#f8f2fa}.body-check.done{background:linear-gradient(145deg,#c4a5d3,#9777b8);color:white;border-color:#a588c3}

/* v0.3 visual system: keep approved light botanical style, improve real mobile ergonomics */
:root{--ink:#302344;--plum:#412852;--text2:#746989;--cream:#fffaf8;--paper:#fffdfc;--line:#efe4ed;--lav:#8e6ab3;--bg:#f9f3f8}
html,body{background:linear-gradient(110deg,#f6eaf5,#f8f0f3 45%,#eee7ef)}
.app-shell{background:#fffaf8;box-shadow:0 0 64px rgba(73,45,82,.12);}
/* Hero and logo share ONE surface, as in the approved concept. */
.brand-header{position:absolute;z-index:3;top:0;left:0;right:0;background:transparent;height:87px;padding:10px 18px;align-items:flex-start;pointer-events:none}
.brand-header button{pointer-events:auto}
.brand-logo{pointer-events:auto;width:104px;max-width:104px;height:80px;object-fit:contain;object-position:center;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse at 50% 48%,black 63%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 48%,black 63%,transparent 78%)}
.brand-actions{padding-top:15px}
.brand-actions .icon-btn{background:#fffefaab;backdrop-filter:blur(4px);border-color:#eee1e8;height:42px;width:42px;color:#67447f;box-shadow:0 4px 12px #55335812}
.hero{margin:0 -14px 13px;min-height:322px;padding:96px 12px 18px;overflow:hidden;background-image:linear-gradient(180deg,rgba(255,246,251,.7) 0%,rgba(252,241,247,.64) 32%,rgba(252,242,243,.18) 64%,rgba(252,246,248,.15) 100%),url('./assets/hero-lavender.jpg');background-position:center 51%;background-size:cover}
.hero-content{display:flex;flex-direction:column;align-items:center}
.app-title{font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;font-size:clamp(38px,9.1vw,54px);font-style:italic;letter-spacing:-2px;color:#4c2b66;line-height:1.08;margin:-5px 0 0;text-shadow:0 1px 2px #fff8}
.app-subtitle{font-family:'Palatino Linotype',Georgia,serif;font-size:clamp(16px,4.5vw,20px);color:#503461;margin:4px 0 28px;text-shadow:0 1px 2px #fff8}
.greeting{font-family:'Palatino Linotype',Georgia,serif;font-size:clamp(28px,7.7vw,38px);letter-spacing:-.8px;color:#352048;text-align:center;line-height:1.1;margin:0 0 13px;width:100%;text-shadow:0 1px 3px #fff9}
.date-strip{border:1px solid #ffffffcb;background:#fffdf9cf;backdrop-filter:blur(7px);color:#473058;font-size:clamp(10px,2.7vw,12px);padding:9px 11px;gap:5px;box-shadow:0 5px 16px rgba(102,71,121,.1)}
.date-strip span+span:before{padding-right:5px}
.screen{padding-bottom:26px}
.tabs{border-radius:24px;background:#f3ebf4;padding:5px;margin-bottom:12px;box-shadow:inset 0 1px 4px #a27fa30d}
.tabs button{min-height:46px;font-size:15px;color:#644d79}
.tabs button.active{background:linear-gradient(120deg,#b99bd0,#916fb7);box-shadow:0 3px 8px #583c7933}
.stack{gap:9px}
.action-card{border-radius:17px;background:linear-gradient(120deg,#fffdfa,#fff9fc);border:1px solid #eddfeb;min-height:83px;gap:13px;padding:9px 12px;box-shadow:0 3px 13px #78567f09}
.action-card h3{font-family:'Palatino Linotype',Georgia,serif;font-size:clamp(17px,4.4vw,20px);letter-spacing:-.15px;color:#3c2851;line-height:1.18}
.action-card p{font-size:12.5px;line-height:1.4;color:#80708c}
.action-art{width:74px;height:65px;border-radius:12px;color:#8865a8;border:1px solid #f2e7ee;box-shadow:inset 0 0 9px #fff8}
.action-art.art-lotus{background:radial-gradient(circle at 50% 72%,#eed9ff,#ffe5d6 57%,#f3dced);color:#9767b4}
.action-art.art-sun,.action-art.gold{background:radial-gradient(circle at 54% 40%,#fff6c3,#efcee5 70%);color:#aa7a30}
.action-art.art-candle{background:linear-gradient(135deg,#eee0f3,#ffeccc);color:#ab8560}
.action-art.art-water{background:linear-gradient(130deg,#eee3f6,#f7f2e6);color:#6f94c5}
.action-next{display:flex;align-items:center;padding:0 3px 0 0}
.panel{border-radius:19px;padding:15px;box-shadow:0 5px 20px #704a8010;background:#fffdfd}
.panel-head h2,.panel h2{font-family:'Palatino Linotype',Georgia,serif;color:#3f2855;font-size:clamp(20px,5vw,23px)}
.supports{column-gap:2px}
.support-item .sup-ico{width:42px;height:42px;border:1px solid #dcd1e8;color:#8a6caa;background:#eee8f8}
.support-item:nth-child(3n+1) .sup-ico{color:#608fc9;background:#edf1ff}
.support-item:nth-child(3n+2) .sup-ico{color:#ce7195;background:#fff0f2}
.support-item:nth-child(3n+3) .sup-ico{color:#6a966f;background:#e9f3e9}
.support-item span:last-child{font-size:clamp(8px,2.1vw,10px);overflow:visible;white-space:normal;text-overflow:clip;text-align:center;line-height:1.2;min-height:22px;letter-spacing:-.1px}
.plan-summary{padding:11px;background:linear-gradient(110deg,#fdf9fa,#fbf4fb)}
.bottom-nav{background:#fffdfcf2;backdrop-filter:blur(10px);border-top:1px solid #eae0ed;box-shadow:0 -5px 23px #694c6d13}
.nav-btn{color:#78678e;min-height:56px;gap:5px}
.nav-btn.active{color:#694298}
.nav-icon{height:28px;display:flex;align-items:center;justify-content:center}
.nav-icon svg{height:25px;width:25px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.65}
.nav-btn.active .nav-icon svg{fill:#7955a5;stroke:#7955a5}
.nav-btn.active:first-child .nav-icon svg path:last-child{fill:#fff;stroke:#fff}
/* Interior: elegant botanical strip instead of bare utilitarian planner */
.inner-screen{padding-top:95px}
.inner-hero{position:relative;overflow:hidden;border-radius:21px;margin:0 0 15px;padding:20px 19px 24px;background-image:linear-gradient(105deg,#fffaf7f0 0%,#f9ebf1d9 55%,#f5edf39b 100%),url('./assets/hero-lavender.jpg');background-size:cover;background-position:center 50%;border:1px solid #eadce8;box-shadow:0 6px 19px #78567f0e}
.inner-hero:after{content:'';position:absolute;right:0;bottom:0;width:150px;height:90px;background:linear-gradient(135deg,transparent,#a37bae28);pointer-events:none}
.inner-hero h1{font-family:'Palatino Linotype',Georgia,serif;font-size:clamp(34px,8vw,43px);line-height:1.15;font-weight:400;color:#452d5f;margin:13px 0 5px}
.inner-hero p{font-size:14px;line-height:1.45;color:#70597f;max-width:340px}
.planner-screen .date-nav{margin:5px 0 13px;justify-content:space-between}
.date-nav strong{font-family:Georgia,serif;color:#4c365b;font-size:17px;font-weight:400;text-align:center}
.date-nav button{width:44px;height:44px;font-size:24px;color:#775c92;background:#fcf8ff;border-radius:50%;padding:0}
.week{gap:4px;margin-bottom:16px}
.day-tile{min-height:65px;padding:10px 0;gap:5px;border-radius:14px;box-shadow:0 3px 8px #77617c0a;font-family:system-ui}
.day-tile.active{background:linear-gradient(160deg,#b49acb,#9170b5);box-shadow:0 5px 12px #72528435;border-color:#a587bd}
.day-tile strong{font-size:18px}
.primary{background:linear-gradient(135deg,#a582bf,#8766af);box-shadow:0 4px 10px #7c578526}
.tasks-panel{padding:17px 16px}
.tasks-panel .task-row{padding:16px 2px}
.task-main h3{font-weight:500;color:#3c2851;font-size:15px}
.task-edit{width:40px;height:40px;border-radius:50%;border:1px solid #f0e7ef;background:#fbf6fc}
.task-check{width:28px;height:28px;border-radius:9px}
.return-home{width:100%;margin:16px 0 8px}
/* Daily count controls: independent repeats without forced targets */
.counter-panel{padding:16px 14px}
.counter-list{display:grid;gap:9px}
.body-counter{display:flex;align-items:center;gap:10px;background:linear-gradient(110deg,#fffefd,#fcf7fb);padding:12px 9px;border:1px solid #f0e5ed;border-radius:17px;min-height:106px}
.body-counter .action-art{width:56px;height:56px;flex:0 0 56px}
.counter-info{min-width:0;flex:1}
.counter-info h3{font:normal 21px 'Palatino Linotype',Georgia,serif;color:#4a315f}
.counter-info p{font-size:11.8px;color:#82758d;line-height:1.4;margin:4px 0}
.counter-info strong{font-weight:600;font-size:12px;color:#765995}
.counter-controls{display:flex;gap:5px;align-items:center}
.count-button{height:43px;width:43px;border:1px solid #d9c7e3;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;background:#faf4fb;color:#6a4b83}
.count-button.plus{background:#9674b8;color:#fff;border-color:#9674b8;box-shadow:0 3px 8px #6a4b8322}
.count-button:disabled{opacity:.25}
@media(max-width:365px){.hero{padding-top:90px;min-height:300px}.app-title{font-size:37px}.app-subtitle{font-size:15px;margin-bottom:24px}.date-strip{font-size:9.5px;padding:9px 7px}.action-art{width:62px;height:59px}.counter-info p{font-size:10px}.count-button{width:38px;height:38px}.body-counter .action-art{width:48px;flex-basis:48px}.support-item .sup-ico{width:35px;height:35px}}

/* v0.4 — clear and touch-friendly back navigation on nested screens */
.header-back[hidden]{display:none!important}
.brand-header.has-back{align-items:flex-start;justify-content:space-between}
.header-back{pointer-events:auto;display:flex;align-items:center;justify-content:center;position:absolute;z-index:6;left:17px;top:24px;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid #e7d7e6;background:rgba(255,252,254,.90);color:#704e8b;box-shadow:0 3px 14px rgba(86,54,104,.09);-webkit-tap-highlight-color:transparent}
.header-back:focus-visible{outline:3px solid #9776b7;outline-offset:3px}
.header-back:active{background:#eee0f2;transform:scale(.97)}
.brand-header.has-back .brand-logo{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:91px;max-width:91px;height:75px;object-fit:contain}
.brand-header.has-back .brand-actions{margin-left:auto}
@media (max-width:360px){.brand-header.has-back .brand-logo{width:82px;max-width:82px}.header-back{left:12px;top:23px}}


/* v0.5 — permanent Back control for every non-home section.
   The header participates in layout and sticks to the top while scrolling. */
.brand-header.has-back{
  position:sticky;
  top:0;
  left:auto;
  right:auto;
  z-index:25;
  height:82px;
  width:100%;
  padding:8px 18px;
  background:rgba(255,250,248,.94);
  border-bottom:1px solid rgba(225,211,230,.75);
  box-shadow:0 3px 12px rgba(76,43,84,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:auto;
}
.brand-header.has-back .header-back{top:17px;left:16px;min-width:46px;min-height:46px}
.brand-header.has-back .brand-logo{top:2px;height:75px;width:92px;max-width:92px}
.brand-header.has-back .brand-actions{padding-top:11px}
/* The sticky header has its own 82px in document flow; no duplicate gap. */
.brand-header.has-back + #screen .inner-screen{padding-top:12px}
@media(max-width:360px){
  .brand-header.has-back .header-back{top:17px;left:12px}
  .brand-header.has-back .brand-logo{max-width:82px;width:82px}
}


/* v0.6 — separate, clearly labelled Back row UNDER the brand header.
   On scrolling, the Back row sticks to viewport top; the brand header scrolls
   away to maximize available space. Original approved logo2.png is preserved. */
.brand-header.has-back {
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  height:68px;
  width:100%;
  padding:4px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:0;
  box-shadow:none;
  background:#fffaf8;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:auto;
  z-index:3;
}
.brand-header.has-back .brand-logo {
  position:static;
  top:auto;
  left:auto;
  transform:none;
  display:block;
  height:59px;
  width:86px;
  max-width:86px;
  object-fit:contain;
  object-position:left center;
  margin:0;
}
.brand-header.has-back .brand-actions {
  padding-top:0;
  margin-left:auto;
}
.back-strip[hidden] {display:none!important}
.back-strip {
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  height:54px;
  background:rgba(255,249,252,.97);
  border-top:1px solid #f2e9f0;
  border-bottom:1px solid #e7d9eb;
  box-shadow:0 3px 12px rgba(84,50,102,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.back-strip button {
  display:flex;
  gap:10px;
  justify-content:flex-start;
  align-items:center;
  width:100%;
  height:100%;
  padding:0 22px;
  border:0;
  background:transparent;
  text-align:left;
  color:#62407d;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  font-weight:650;
  letter-spacing:.1px;
}
.back-strip svg {flex:0 0 auto}
.back-strip button:active {background:#f3eaf7}
.back-strip button:focus-visible {outline:3px solid #ad8fc9;outline-offset:-4px}
.brand-header.has-back + .back-strip + #screen .inner-screen {padding-top:12px}
@media(max-width:360px){
 .brand-header.has-back .brand-logo{height:57px;width:80px;max-width:80px}
 .back-strip button{padding:0 17px}
}

/* v0.8: compact branded interior header and personal support/ritual screens */
.brand-header .brand-name{display:none}
.brand-header.has-back{height:78px;padding:6px 15px;gap:8px;background:linear-gradient(100deg,#fffaf9,#fdf6fb)}
.brand-header.has-back .brand-logo{height:62px;width:87px;max-width:87px;object-fit:contain;flex:0 0 87px}
.brand-header.has-back .brand-name{display:block;position:static;flex:1;min-width:0;text-align:center;color:#5e3972;font-family:'Palatino Linotype',Georgia,serif;font-size:clamp(19px,5.5vw,25px);font-style:italic;letter-spacing:-.4px;line-height:1.1;white-space:nowrap}
.brand-header.has-back .brand-actions{margin-left:0;flex:0 0 42px}
.brand-header.has-back .icon-btn{width:41px;height:41px}
@media(max-width:360px){.brand-header.has-back{padding:5px 10px}.brand-header.has-back .brand-logo{width:71px;max-width:71px;flex-basis:71px}.brand-header.has-back .brand-name{font-size:19px}.brand-header.has-back .brand-actions{flex-basis:36px}}
.add-own{margin-top:16px;width:100%;text-align:center}
.custom-body-list{margin-top:18px;border-top:1px solid #eadfec;padding-top:10px}
.custom-caption{font-family:'Palatino Linotype',Georgia,serif;font-size:21px;color:#51355f;margin:7px 0 12px}
.custom-counter{margin-bottom:9px}
.custom-counter .counter-controls{gap:5px}
.custom-counter .custom-edit{border:1px solid #e9dded;background:#fff8fc;color:#714c89;border-radius:100px;min-width:34px;height:36px;font-size:18px}
.ritual-tabs{display:flex;gap:8px;background:#f7eef8;border:1px solid #eaddeb;border-radius:100px;padding:5px;margin:4px 0 14px}
.ritual-tabs button{flex:1;min-height:42px;border:0;border-radius:100px;background:none;color:#674778;font-size:15px}
.ritual-tabs button.active{background:#9d7bb8;color:white;box-shadow:0 2px 8px #8660a32a}
.ritual-section{margin-bottom:14px}
.ritual-intro{font-size:14px;line-height:1.55;color:#756680;margin:6px 0 12px}
.ritual-item,.ritual-mantra{padding:14px;border:1px solid #ecdfeb;border-radius:16px;margin:10px 0;background:linear-gradient(135deg,#fffdfc,#fdf8fc)}
.ritual-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ritual-item h3{font:23px 'Palatino Linotype',Georgia,serif;color:#533669;margin:10px 0 7px}
.ritual-full-text{white-space:pre-wrap;line-height:1.65;font-size:15px;color:#5d4b67;overflow-wrap:anywhere}
.ritual-item .ritual-done{margin-top:12px;width:100%}
.ritual-done.is-done{border-color:#9f82b6;background:#f0e6f4}
.ritual-empty{color:#7e6b86;font-size:14px;line-height:1.6;padding:15px 0}
.ritual-mantra-text{color:#503161;font:20px/1.45 'Palatino Linotype',Georgia,serif;white-space:pre-wrap;margin:8px 0}
.ritual-mantra .mantra-pick{margin-top:12px;width:100%;font-size:13px}
.ritual-disclaimer{line-height:1.6;margin-top:16px}

.ritual-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.ritual-shortcuts button{padding:12px 7px;font-size:13px}

/* v0.9 — pearl botanical interior header; home layout unchanged. */
.app-shell.inner-mode{
  --cream:#F7F6F9;
  --paper:#FDFCFE;
  --line:#E4DDE9;
  --text2:#746982;
  background:#F7F6F9;
}
.app-shell.inner-mode .panel{background:#FDFCFE;border-color:#E4DDE9}
.app-shell.inner-mode .bottom-nav{background:rgba(253,252,254,.97);border-top-color:#E4DDE9}
.brand-identity{display:none}
.brand-actions{display:flex;align-items:center;gap:7px}
.header-quick-btn{border:1px solid #E4DDE9;background:rgba(253,252,254,.94);border-radius:50%;display:grid;place-items:center;color:#624278;width:40px;height:40px;min-width:40px;padding:0;box-shadow:0 2px 8px rgba(70,40,80,.045)}
.header-quick-btn:active{background:#EEEAF3}
.brand-header:not(.has-back) .bell-action{display:grid}
.brand-header.has-back{
  position:relative !important;
  top:auto!important;
  display:grid!important;
  grid-template-columns:70px minmax(0,1fr) 86px;
  align-items:center;
  gap:5px;
  height:99px;
  padding:9px 11px;
  background:linear-gradient(114deg,#FAF9FB 0%,#F7F6F9 54%,#F2EFF7 100%);
  border-bottom:1px solid rgba(228,221,233,.55);
  box-shadow:none;
}
.brand-header.has-back .brand-logo{
  position:static!important;transform:none!important;
  top:auto!important;left:auto!important;
  width:70px!important;max-width:70px!important;
  height:72px!important;flex:initial!important;
  object-fit:contain!important;object-position:center!important;
  display:block;
}
.brand-header.has-back .brand-identity{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;min-width:0;max-width:100%;gap:3px;align-self:stretch;
}
.brand-header.has-back .brand-name{
  display:block!important;
  position:static!important;
  flex:initial!important;min-width:0;
  width:100%;white-space:nowrap;
  text-align:center;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;font-style:italic;
  letter-spacing:-.6px;
  font-size:clamp(17px,5.35vw,24px);
  line-height:1.14;color:#4E2A65;
}
.brand-header.has-back .brand-subtitle{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(10px,3.1vw,12px);
  line-height:1.15;color:#675274;
  white-space:nowrap;text-align:center;
  letter-spacing:-.1px;
}
.brand-header.has-back .brand-lavender{
  width:24px;height:49px;position:absolute;right:-11px;bottom:-13px;
  object-fit:contain;opacity:.62;pointer-events:none;transform:rotate(20deg);
}
.brand-header.has-back .brand-actions{
  padding:0;margin:0!important;display:flex;align-items:center;
  justify-content:flex-end;flex:initial!important;gap:6px;
}
.brand-header.has-back .header-quick-btn{width:39px;height:39px;min-width:39px}
.brand-header.has-back .avatar-action{background:linear-gradient(135deg,#FDFCFE,#F0EAF5)}
.back-strip{
  position:sticky!important;top:0!important;z-index:40;
  height:49px;
  background:rgba(247,246,249,.98)!important;
  border-top:0;
  border-bottom:1px solid #E4DDE9!important;
  box-shadow:0 2px 8px rgba(67,44,77,.045)!important;
  backdrop-filter:blur(10px);
}
.back-strip button{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:15px;padding:0 17px;min-height:49px;color:#58346D}
.back-strip svg{width:21px;height:21px}
.brand-header.has-back + .back-strip + #screen .inner-screen{padding-top:12px}
@media (max-width:360px){
 .brand-header.has-back{grid-template-columns:56px minmax(0,1fr) 72px;height:87px;gap:3px;padding:7px 8px}
 .brand-header.has-back .brand-logo{width:56px!important;max-width:56px!important;height:62px!important}
 .brand-header.has-back .brand-name{font-size:clamp(16px,5.3vw,19px);letter-spacing:-.8px}
 .brand-header.has-back .brand-subtitle{font-size:10px}
 .brand-header.has-back .header-quick-btn{width:34px;height:34px;min-width:34px}
 .brand-header.has-back .brand-actions{gap:4px}
 .brand-header.has-back .brand-lavender{width:19px;height:43px;right:-7px;bottom:-10px}
}
@media (min-width:500px){
 .brand-header.has-back .brand-name{font-size:25px}
}

/* FINAL v0.9 — approved, quiet pearl-botanical illustration style.
   Built on production v0.9: no data model, task, ritual or counter changes. */
:root{
 --plum:#482957;--ink:#483351;--lav:#9b83b1;--lilac:#eee6f0;
 --sage:#95a28d;--cream:#f8f6f8;--line:#e9dfeb;
 --text2:#786983;--bg:#f8f6f8;--paper:#fefcfd;
 --shadow:0 5px 22px rgba(67,47,78,.055);
}
html,body{background:#f8f6f8}
.app-shell,.app-shell.inner-mode{background:#f8f6f8;--cream:#f8f6f8;--paper:#fefcfd;--line:#e9dfeb}
.screen{padding-left:13px;padding-right:13px}
.brand-header:not(.has-back){height:80px;padding:5px 12px;align-items:flex-start;background:transparent}
.brand-header:not(.has-back) .brand-logo{height:76px;width:100px;max-width:100px}
.brand-header{background-image:url('./assets/header-botanical.jpg')}
.brand-header.has-back{
 height:83px!important;grid-template-columns:70px minmax(0,1fr) 82px!important;
 gap:5px!important;padding:5px 10px!important;background:#f9f7f9 url('./assets/header-botanical.jpg') center top/cover no-repeat!important;
 border:0!important;
}
.brand-header.has-back .brand-logo{height:65px!important;width:68px!important;max-width:68px!important;object-fit:contain!important}
.brand-header.has-back .brand-identity{gap:0;align-items:center;justify-content:center}
.brand-header.has-back .brand-name{height:43px;width:100%;max-width:208px;display:flex!important;align-items:end;justify-content:center}
.brand-header.has-back .approved-script{display:block;width:100%;max-height:43px;object-fit:contain}
.brand-header.has-back .brand-subtitle{font:400 12px/1.2 Georgia,'Times New Roman',serif;white-space:nowrap;color:#624d70;margin-top:-1px}
.brand-header.has-back .brand-actions{gap:5px}
.brand-header.has-back .header-quick-btn{width:37px;min-width:37px;height:37px;background:rgba(254,252,254,.88);border:1px solid #e9dfeb}
.brand-header.has-back .brand-lavender{display:none!important}
.back-strip{height:45px!important;background:rgba(249,246,250,.98)!important;box-shadow:none!important}
.back-strip button{font-size:15px;min-height:45px;padding-left:14px}
.brand-header.has-back+.back-strip+#screen .inner-screen{padding-top:10px}
.brand-logo{mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse at center,#000 63%,transparent 79%);mask-image:radial-gradient(ellipse at center,#000 63%,transparent 79%)}
/* Decorative script from the user-approved artwork, not Georgian cursive stand-in. */
.app-title{display:flex;align-items:center;justify-content:center;width:100%;height:65px;line-height:1;margin:0!important}
.app-title .approved-script{width:min(100%,335px);height:64px;object-fit:contain}
.app-subtitle{font-family:Georgia,'Times New Roman',serif;color:#58416a;font-size:clamp(15px,4vw,18px);margin:0 0 19px}
.hero{min-height:316px;padding:89px 11px 14px;background:#f7f3f8 url('./assets/coast-body.jpg') center bottom/cover no-repeat!important}
.hero:before,.hero:after{display:none!important}
.greeting{margin-top:15px;margin-bottom:10px;color:#42284e;font:400 clamp(28px,7vw,35px)/1.1 Georgia,serif;text-align:center}
.date-strip{font-size:clamp(9px,2.65vw,12px);gap:3px;white-space:normal;text-align:center;line-height:1.3;background:#fefcfeec;box-shadow:0 3px 12px #57426212;border-color:#fff}
.date-strip span+span:before{padding-right:3px}
/* Calm dusted-lavender controls, no saturated violet or yellow. */
.tabs,.ritual-tabs{background:#f2eaf3;border-color:#e5d8e8;box-shadow:none}
.tabs button.active,.ritual-tabs button.active{background:#9880aa;color:#fff;box-shadow:0 3px 10px #48354b1d}
.primary{background:#9c81af;box-shadow:0 4px 12px #5e486b18}
.secondary{background:#f7f1f8;border-color:#dcd0e2;color:#654a77}
.pill{color:#735786;background:#eee4f1}
.panel,.app-shell.inner-mode .panel{background:#fdfbfd;border:1px solid #e6dce7;box-shadow:0 5px 16px #563c5810}
.panel h2,.panel-head h2{color:#482e58}
.action-card{background:#fefcfd;border:1px solid #e8dce8;box-shadow:0 4px 13px #5442590a}
.action-card h3{font:400 clamp(18px,4.7vw,22px)/1.15 Georgia,'Times New Roman',serif;color:#482d58}
.action-card p{color:#796b85;font-size:12.8px}
.action-art,.body-counter .action-art{padding:0;overflow:hidden;background:#f5edf5!important;color:#876f9e;border:1px solid #eee5eb;border-radius:13px;box-shadow:none}
.action-art img{display:block;width:100%;height:100%;object-fit:cover}
.circle-action,.count-button.plus{background:#9d82ae;border-color:#9d82ae;box-shadow:none}
.support-item .sup-ico{background:#f2eaf5;border-color:#e3d5e8}
.plan-summary{background:#f8f3f8}
/* Shared illustrated page hero, built from the approved coastal artwork. */
.inner-screen{padding-top:10px}
.inner-hero{
 min-height:191px;padding:22px 17px 22px!important;margin:0 0 14px!important;
 border-radius:22px!important;background:#f8f5f8 url('./assets/coast-body.jpg') center bottom/cover no-repeat!important;
 border:1px solid #e9dce9!important;box-shadow:none!important;
}
.inner-hero:after{display:none!important}
.inner-hero.hero-planner{background-image:url('./assets/coast-planner.jpg')!important}
.inner-hero.hero-ritual{background-image:url('./assets/coast-ritual.jpg')!important}
.inner-hero h1{font:400 clamp(31px,7.1vw,39px)/1.15 Georgia,'Times New Roman',serif;color:#472b57;margin:12px 0 7px}
.inner-hero p{font-size:13.5px;line-height:1.47;color:#685575;max-width:290px;text-shadow:0 1px 1px #fffa}
/* Originally bare generic headings now have the same delicate illustrated treatment. */
.page-top{margin:0 0 14px!important;min-height:170px;border:1px solid #e9dce9;border-radius:22px;padding:20px 17px!important;background:#f7f5f8 url('./assets/coast-practices.jpg') center bottom/cover no-repeat}
.page-top.page-cycle{background-image:url('./assets/coast-practices.jpg')}
.page-top.page-journal{background-image:url('./assets/coast-journal.jpg')}
.page-top.page-profile{background-image:url('./assets/coast-ritual.jpg')}
.page-top h1{font:400 clamp(29px,7.4vw,38px)/1.1 Georgia,'Times New Roman',serif;color:#482d58;margin:8px 0}
.page-top p{color:#695576;font-size:13.5px;line-height:1.45;max-width:300px}
/* Gentle watercolor tile artwork, exact crops from approved sample. */
.body-counter{background:#fefcfd;border-color:#e9dfe9;min-height:112px;gap:12px;padding:10px}
.body-counter .action-art{width:72px!important;height:79px!important;flex:0 0 72px!important}
.counter-info h3{font:400 21px/1.12 Georgia,'Times New Roman',serif;color:#4b305a}
.counter-info p{font-size:11.6px;line-height:1.43}
.count-button{height:39px;width:39px;min-width:39px;border-color:#dcd0e2;color:#836b98;background:#fbf7fc}
.counter-controls{gap:6px}
.action-card .action-art{height:77px;width:90px;flex:0 0 90px}
/* Space text and buttons to keep app usable on narrow Android devices. */
.planner-screen .date-nav{margin:6px 0 14px}
.day-tile.active{background:#a78eb6;border-color:#a78eb6;box-shadow:0 3px 9px #684e7624}
.bottom-nav{background:#fdfbfded;border-top-color:#e7deea}
.nav-btn.active{color:#553167}
.nav-btn.active .nav-icon svg{fill:none;stroke:#553167}
.nav-btn.active:first-child .nav-icon svg path:first-child{fill:#987bae;stroke:#64447a}
/* Avoid the inaccurate filled purple blobs on non-home tabs. */
.nav-btn.active:not(:first-child) .nav-icon svg{fill:none!important;stroke:#653f80!important}
.nav-btn.active:not(:first-child){background:#f1eaf3;border-radius:18px}
.ritual-section .ritual-item{background:#fdfbfd;border-color:#e9deea}
.ritual-full-text{font-size:14.5px}
.ritual-mantra{background:#fdfbfd}
@media(max-width:365px){
 .brand-header.has-back{grid-template-columns:56px minmax(0,1fr) 74px!important;height:78px!important;padding:5px 8px!important}
 .brand-header.has-back .brand-logo{width:56px!important;max-width:56px!important;height:58px!important}
 .brand-header.has-back .brand-name{height:34px}
 .brand-header.has-back .approved-script{max-height:34px}
 .brand-header.has-back .brand-subtitle{font-size:10px}
 .brand-header.has-back .header-quick-btn{height:32px;width:32px;min-width:32px}
 .hero{min-height:292px;padding-top:86px}
 .app-title{height:57px}.app-title .approved-script{height:56px}
 .inner-hero h1{font-size:29px}
 .body-counter .action-art{width:54px!important;height:62px!important;flex-basis:54px!important}
 .count-button{width:33px;height:33px;min-width:33px;font-size:21px}
 .body-counter{gap:6px;padding:7px}
 .counter-info h3{font-size:18px}.counter-info p{font-size:10px}
 .action-card .action-art{width:65px;flex-basis:65px;height:63px}
}



/* v0.9.1 HOTFIX — only brand/layout and scenic header readability.
   User-approved illustration thumbnails, controls, behavior, and data untouched. */
:root{--cream:#faf8fa;--bg:#faf8fa;--paper:#fefcfe;--line:#e6dee9}
html,body,.app-shell,.app-shell.inner-mode{background:#faf8fa!important}
/* Main screen: single continuous cover with floating logo/action icons. */
.brand-header:not(.has-back){
 position:absolute!important;left:0;top:0;right:0;width:100%;height:76px!important;
 padding:6px 13px!important;display:flex;align-items:center!important;
 background:transparent!important;background-image:none!important;
 border:0;box-shadow:none;z-index:5
}
.brand-header:not(.has-back) .brand-logo{height:65px!important;width:94px!important;max-width:94px!important;object-fit:contain}
.brand-header:not(.has-back) .brand-actions{align-self:flex-start;margin-top:10px;gap:8px}
.brand-header:not(.has-back) .header-quick-btn{width:40px;height:40px;min-width:40px;background:#fdfbfeeb}
.hero{
 margin-top:0!important;
 min-height:300px!important;
 padding:82px 14px 18px!important;
 background-image:linear-gradient(180deg,rgba(251,249,252,.54) 0%,rgba(251,249,252,.70) 39%,rgba(251,249,252,.29) 73%,rgba(251,249,252,.04) 100%),url('./assets/coast-body.jpg')!important;
 background-position:center center!important;background-size:cover!important;
 background-repeat:no-repeat!important
}
.hero-content{max-width:100%;position:relative}
.app-title{height:64px!important;margin:0!important;max-width:100%}
.app-title .approved-script{width:min(100%,336px);max-height:64px;object-fit:contain}
.app-subtitle{margin:0 0 12px!important;font-size:clamp(14px,4vw,17px)!important;color:#50365e}
.greeting{margin:5px 0 10px!important;font-size:clamp(29px,7vw,35px)!important;color:#3e254b;text-shadow:0 1px 10px #fff9}
.date-strip{padding:9px 10px;background:rgba(255,253,255,.94)!important;border:1px solid #fff!important;font-size:clamp(10px,2.5vw,12px);gap:4px}
/* Inner header: exact two-level hierarchy with no competing scenery behind words */
.brand-header.has-back{
 position:relative!important;display:grid!important;grid-template-columns:64px minmax(0,1fr) 82px!important;
 align-items:center;gap:5px!important;height:78px!important;
 padding:6px 10px!important;background:#faf8fb url('./assets/header-botanical.jpg') center/cover no-repeat!important;
 z-index:3!important;box-shadow:none!important;border:0!important;
}
.brand-header.has-back .brand-logo{position:static!important;transform:none!important;height:64px!important;width:64px!important;max-width:64px!important;object-fit:contain!important}
.brand-header.has-back .brand-identity{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:0}
.brand-header.has-back .brand-name{display:flex!important;align-items:center!important;justify-content:center!important;width:100%;max-width:200px;height:39px!important;min-width:0}
.brand-header.has-back .approved-script{display:block;width:100%;height:38px;max-height:38px!important;object-fit:contain}
.brand-header.has-back .brand-subtitle{font:400 11px/1.2 Georgia,'Times New Roman',serif;white-space:nowrap;color:#604a6d;margin-top:-2px}
.brand-header.has-back .brand-actions{display:flex;align-items:center;gap:4px!important;margin:0!important;padding:0!important;justify-content:flex-end}
.brand-header.has-back .header-quick-btn{width:36px!important;min-width:36px!important;height:36px!important;background:#fffcffee;border-color:#e7ddea}
.back-strip{height:44px!important;background:#faf8fbed!important;border-top:1px solid #ebe5ed!important;border-bottom:1px solid #e9e1eb!important;z-index:40!important}
.back-strip button{min-height:44px!important;font-size:15px!important;padding-left:15px!important}
.inner-screen{padding-top:10px!important}
/* Page illustrations are decorative background images ONLY, never screenshots of UI text. */
.inner-hero,.page-top{
 position:relative!important;overflow:hidden!important;isolation:isolate;
 margin:0 0 15px!important;border:1px solid #e8e0eb!important;
 border-radius:22px!important;
 min-height:211px!important;height:auto!important;
 padding:21px 19px 26px!important;
 background-color:#faf8fa!important;
 background-image:linear-gradient(180deg,rgba(253,251,253,.96) 0%,rgba(253,251,253,.92) 45%,rgba(253,251,253,.20) 92%),url('./assets/coast-body.jpg')!important;
 background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
 box-shadow:none!important;
}
.inner-hero.hero-planner{background-image:linear-gradient(180deg,rgba(253,251,253,.96) 0%,rgba(253,251,253,.92) 45%,rgba(253,251,253,.20) 92%),url('./assets/coast-planner.jpg')!important}
.inner-hero.hero-ritual{background-image:linear-gradient(180deg,rgba(253,251,253,.96) 0%,rgba(253,251,253,.92) 45%,rgba(253,251,253,.20) 92%),url('./assets/coast-ritual.jpg')!important}
.page-top.page-practices,.page-top.page-cycle{background-image:linear-gradient(180deg,rgba(253,251,253,.96) 0%,rgba(253,251,253,.92) 45%,rgba(253,251,253,.20) 92%),url('./assets/coast-practices.jpg')!important}
.page-top.page-journal,.page-top.page-profile{background-image:linear-gradient(180deg,rgba(253,251,253,.96) 0%,rgba(253,251,253,.92) 45%,rgba(253,251,253,.20) 92%),url('./assets/coast-journal.jpg')!important}
.inner-hero::after{display:none!important}
.inner-hero > *,.page-top > *{position:relative;z-index:1}
.inner-hero h1,.page-top h1{font:400 clamp(29px,7vw,37px)/1.14 Georgia,'Times New Roman',serif!important;color:#462954!important;overflow-wrap:break-word;max-width:100%;margin:10px 0 7px!important}
.inner-hero p,.page-top p{font:400 clamp(12.5px,3.15vw,14px)/1.45 system-ui,-apple-system,'Segoe UI',sans-serif!important;max-width:min(100%,360px)!important;color:#574366!important;text-shadow:0 1px 5px #fff!important;margin:0!important}
.page-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.page-top .pill{max-width:100%;font-size:clamp(10px,2.5vw,12px);white-space:normal}
.page-top.page-cycle h1{font-size:clamp(27px,6.4vw,35px)!important}
/* Prevent future decorative overlays from stealing taps or overlapping content. */
.inner-hero,.page-top{contain:layout paint}
@media(max-width:365px){
 .brand-header.has-back{grid-template-columns:54px minmax(0,1fr) 74px!important;gap:3px!important;padding:5px 7px!important;height:72px!important}
 .brand-header.has-back .brand-logo{height:55px!important;width:54px!important;max-width:54px!important}
 .brand-header.has-back .brand-name{height:34px!important}.brand-header.has-back .approved-script{height:33px!important;max-height:33px!important}
 .brand-header.has-back .brand-subtitle{font-size:10px!important}
 .brand-header.has-back .header-quick-btn{height:33px!important;width:33px!important;min-width:33px!important}
 .hero{padding-top:77px!important;min-height:294px!important}
 .app-title{height:58px!important}.app-title .approved-script{height:58px}
 .inner-hero,.page-top{padding:17px 14px 25px!important;min-height:203px!important}
 .inner-hero h1,.page-top h1{font-size:28px!important}
 .page-top.page-cycle h1{font-size:27px!important}
}