/* V0.95 — only agreed visual revisions: pearl / quiet lavender, integrated Back,
   original brand artwork and breathing space. All application logic unchanged. */
:root{--plum:#482E59;--ink:#493A56;--lav:#9B88AC;--lilac:#EDE9F2;--sage:#9CA99B;--cream:#F7F6F9;--line:#E7E0E9;--text2:#756A80;--bg:#F7F6F9;--paper:#FDFCFD}
html,body{background:#F7F6F9!important;color:#493A56!important}
.app-shell,.app-shell.inner-mode{background:#F7F6F9!important;isolation:isolate;overflow-x:clip;box-shadow:0 0 36px rgba(80,57,90,.10)!important}
/* One continuous botanical scenery behind the logo, lettering, and greeting. */
.app-shell::before{content:"";pointer-events:none;position:absolute;z-index:0;inset:0 0 auto;height:387px;background-image:linear-gradient(180deg,rgba(242,242,251,.37),rgba(243,242,251,.38) 28%,rgba(242,241,250,.49) 63%,rgba(244,241,250,.22) 100%),url('./assets/hero-lavender.jpg');background-position:center 48%;background-size:cover;background-repeat:no-repeat;filter:saturate(.61) hue-rotate(4deg);}
.app-shell.inner-mode::before{height:191px;background-position:center 36%;filter:saturate(.66)}
#brand-header.brand-header,#brand-header.brand-header.has-back,#brand-header.brand-header:not(.has-back){position:relative!important;display:block!important;box-sizing:border-box!important;width:100%!important;height:185px!important;min-height:185px!important;max-height:none!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important;z-index:4!important}
#brand-header.brand-header.has-back{height:160px!important;min-height:160px!important}
/* Original logo artwork with no opaque tile */
#brand-header .brand-logo,#brand-header.has-back .brand-logo,#brand-header:not(.has-back) .brand-logo{position:absolute!important;top:10px!important;left:14px!important;width:96px!important;max-width:96px!important;height:91px!important;min-width:0!important;object-fit:contain!important;object-position:center center!important;display:block!important;margin:0!important;padding:0!important;transform:none!important;mix-blend-mode:multiply!important;opacity:.94!important;filter:saturate(.76) brightness(1.04)!important;mask-image:radial-gradient(ellipse closest-side,#000 63%,rgba(0,0,0,.85) 78%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 63%,rgba(0,0,0,.85) 78%,transparent 100%)}
#brand-header.has-back .brand-logo{width:83px!important;height:83px!important;top:6px!important;left:12px!important}
/* Title occupies its own lane: never squeeze between logo and action buttons. */
#brand-header .brand-identity,#brand-header.has-back .brand-identity,#brand-header:not(.has-back) .brand-identity{position:absolute!important;top:96px!important;left:0!important;right:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;margin:0!important;padding:0 20px!important;width:100%!important;max-width:100%!important;height:auto!important;transform:none!important;background:transparent!important;overflow:visible!important;min-width:0!important;text-align:center!important}
#brand-header.has-back .brand-identity{top:77px!important;padding:0 26px!important}
#brand-header .brand-name,#brand-header.has-back .brand-name,#brand-header:not(.has-back) .brand-name{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:340px!important;height:59px!important;min-height:59px!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative!important;transform:none!important;line-height:1!important}
#brand-header.has-back .brand-name{height:49px!important;min-height:49px!important;max-width:295px!important}
#brand-header .brand-name img.approved-script,#brand-header.has-back .brand-name img.approved-script,#brand-header:not(.has-back) .brand-name img.approved-script{display:block!important;height:100%!important;width:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;position:static!important;transform:none!important;filter:saturate(.92)!important;clip-path:inset(0 6.5% 0 0)}
#brand-header .brand-subtitle,#brand-header.has-back .brand-subtitle,#brand-header:not(.has-back) .brand-subtitle{display:block!important;font:400 clamp(13px,3.8vw,17px)/1.15 Georgia,'Times New Roman',serif!important;color:#594467!important;letter-spacing:.01em!important;white-space:nowrap!important;text-align:center!important;margin:-3px 0 0!important;padding:0!important;position:static!important;transform:none!important}
#brand-header.has-back .brand-subtitle{font-size:clamp(12px,3.2vw,14px)!important;margin:-3px 0 0!important}
#brand-header .brand-actions,#brand-header.has-back .brand-actions,#brand-header:not(.has-back) .brand-actions{position:absolute!important;right:12px!important;top:23px!important;display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;transform:none!important;z-index:5!important}
#brand-header.has-back .brand-actions{top:20px!important}
#brand-header .header-quick-btn,#brand-header.has-back .header-quick-btn,#brand-header:not(.has-back) .header-quick-btn{position:static!important;display:grid!important;place-items:center!important;flex:0 0 39px!important;width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;max-width:39px!important;max-height:39px!important;border:1px solid #E6DDEB!important;border-radius:50%!important;color:#593B69!important;background:rgba(252,250,254,.89)!important;box-shadow:0 2px 9px rgba(65,48,77,.05)!important;transform:none!important;margin:0!important;padding:0!important}
/* Integrated curved 'Back' edge rather than harsh technical strip. */
#back-strip.back-strip,#back-strip.back-strip:not([hidden]){position:relative!important;top:auto!important;left:auto!important;z-index:4!important;height:45px!important;min-height:45px!important;padding:0!important;margin:-8px 0 0!important;overflow:visible!important;border:0!important;border-radius:27px 27px 0 0!important;box-shadow:none!important;backdrop-filter:none!important;background:linear-gradient(180deg,rgba(249,247,251,.89),#F7F6F9 96%)!important}
#back-strip.back-strip[hidden]{display:none!important}
#back-strip.back-strip button{display:flex!important;align-items:center!important;gap:8px!important;color:#593C69!important;font:500 15px/1.2 system-ui,-apple-system,'Segoe UI',sans-serif!important;height:45px!important;min-height:45px!important;padding:0 20px!important;border:0!important;background:transparent!important}
#back-strip.back-strip svg{width:19px!important;height:19px!important}
/* Home hero is contiguous with logo and lettering; intentionally airy greeting. */
#screen{position:relative;z-index:1}
#screen .hero{position:relative!important;height:202px!important;min-height:202px!important;max-height:none!important;padding:0 13px 22px!important;margin:0 -13px 15px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
#screen .hero::before,#screen .hero::after{display:none!important}
#screen .hero-content{height:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:0!important;min-height:0!important;width:100%!important;position:relative!important;text-align:center!important}
#screen .hero .greeting{font:400 clamp(31px,8.1vw,41px)/1.12 Georgia,'Times New Roman',serif!important;color:#492E5A!important;text-align:center!important;margin:0 0 20px!important;padding:0!important;text-shadow:0 1px 8px rgba(255,255,255,.45)!important}
#screen .hero .date-strip{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;white-space:normal!important;max-width:min(100%,365px)!important;width:fit-content!important;margin:0 auto 0!important;padding:9px 12px!important;gap:3px!important;font:400 clamp(10px,2.8vw,12px)/1.45 system-ui,'Segoe UI',sans-serif!important;background:rgba(249,247,251,.91)!important;color:#4C3B58!important;border:1px solid rgba(255,255,255,.91)!important;border-radius:30px!important;box-shadow:0 3px 17px rgba(67,51,81,.06)!important}
#screen .hero .date-strip span+span:before{padding-right:4px!important;color:#927F9F!important}
/* Interior content retains original cards, artwork, and text; only quiet palette. */
#screen .inner-screen{padding-top:12px!important}
#screen .inner-hero,#screen .page-top{background-color:#FAF9FB!important;border-color:#E8E1EA!important;box-shadow:none!important}
#screen .inner-hero h1,#screen .page-top h1{color:#4D315C!important}
#screen .inner-hero p,#screen .page-top p{color:#62576B!important}
#screen .tabs button.active,#screen .primary,#screen .circle-action{background:#9983AD!important;color:#FFFFFF!important;box-shadow:0 4px 13px rgba(100,72,120,.11)!important}
#screen .tabs{background:#F0EDF3!important;border-color:#E7E0ED!important}
#screen .panel,#screen .action-card{background:#FEFDFE!important;border-color:#E7E0E9!important}
#screen .day-prompt{background:linear-gradient(145deg,#F8F7F9,#EFEAF2 80%,#EFF1EC)!important;border-color:#E6DFE8!important}
#screen .day-prompt::after{opacity:.42!important}
#screen .pill{background:#F0EAF2!important;color:#765D85!important}
#screen .day-tile.active{background:#9983AD!important;color:white!important}
.bottom-nav{background:rgba(253,252,254,.98)!important;border-color:#E8E2EC!important}
/* Small device hardening */
@media(max-width:355px){
 #brand-header .brand-logo,#brand-header:not(.has-back) .brand-logo{left:8px!important;width:78px!important;height:78px!important}
 #brand-header.has-back .brand-logo{left:8px!important;width:70px!important;height:70px!important}
 #brand-header .brand-actions,#brand-header.has-back .brand-actions{right:7px!important;gap:5px!important}
 #brand-header .header-quick-btn,#brand-header.has-back .header-quick-btn{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;flex-basis:36px!important}
 #brand-header .brand-identity{top:91px!important;padding:0 14px!important}
 #brand-header.has-back .brand-identity{top:75px!important}
 #brand-header .brand-name{height:54px!important;min-height:54px!important}
 #brand-header.has-back .brand-name{height:43px!important;min-height:43px!important}
 #screen .hero .greeting{font-size:29px!important}
 #screen .hero .date-strip{font-size:10px!important}
}