/* Cross-device readability and layout fixes, kept after user-selected themes. */
html,body{max-width:100%;overflow-x:clip}
.app,.main,.page,.page-heading,.panel,.feature-panel{min-width:0}
img.local-emoji{display:inline-block;width:1.05em;height:1.05em;object-fit:contain;vertical-align:-.16em;flex:none;user-select:none}
.nav .glyph img.local-emoji{width:1.15em;height:1.15em}
.sticker-emoji img.local-emoji,.meal-emoji img.local-emoji,.mood-button img.local-emoji{width:1em;height:1em}
.sticker-chip img.local-emoji{filter:drop-shadow(0 2px 1px #23452a26)}
.hero-stickers,.hero-art{pointer-events:none}
/* Every cover must retain strong foreground contrast even with personalized themes. */
html[data-cover] .hero,:root .hero{
  color:#214b35!important;
  background:linear-gradient(115deg,#def4b8 0%,#c3edce 56%,#e5f8d4 100%)!important;
  border:1px solid #b5dda4!important;
}
html[data-cover="rainbow"] .hero{background:linear-gradient(115deg,#def4bd 0%,#d5e2fb 48%,#f6d5eb 100%)!important}
html[data-cover="moon"] .hero{background:linear-gradient(120deg,#d7ebee,#e3e1f9 55%,#f8e9dc)!important}
html[data-cover="butterfly"] .hero{background:linear-gradient(120deg,#d4f5e6,#d8edf5 60%,#f6e4ef)!important}
html[data-cover="strawberry"] .hero{background:linear-gradient(115deg,#e0f3c7,#f9d9df 68%,#f7e5c7)!important}
html[data-cover="citrus"] .hero{background:linear-gradient(115deg,#def4bc,#f8edc0 68%,#d7f1db)!important}
html[data-cover="sunflower"] .hero{background:linear-gradient(115deg,#ddf2b4,#f8edbe 67%,#f9dfc8)!important}
html[data-cover="daisy"] .hero{background:linear-gradient(115deg,#edf5d2,#f7e5db 65%,#d8f1e6)!important}
html[data-cover="mushroom"] .hero{background:linear-gradient(115deg,#e5efcd,#f2decf 66%,#e9e4d9)!important}
html[data-cover="avocado"] .hero{background:linear-gradient(115deg,#d8f3a7,#c4e8b7 70%,#ecf5d4)!important}
html[data-cover] .hero h2,html[data-cover] .hero h2 em,:root .hero h2,:root .hero h2 em{color:#20523b!important;text-shadow:none!important}
html[data-cover] .hero p,html[data-cover] .hero .tiny,:root .hero p,:root .hero .tiny{color:#37674b!important;opacity:1!important}
html[data-cover] .hero .btn{background:#21583c!important;color:#fff!important;border:1px solid #21583c!important}
.hero-content{position:relative;z-index:4}
.hero .tiny{font-weight:900}
.stat,.panel,.moment-card,.quick,.upgrade-shortcut{overflow-wrap:anywhere}
.moment-card .mood-picker{max-width:100%}
.mood-button{min-width:0}
.nav button{white-space:normal}
.explore-picker summary strong{white-space:normal;text-align:right}
@media(max-width:1100px){.top-actions .btn{white-space:nowrap}}
@media(max-width:770px){
  .top-small{display:none!important}
  .topbar{height:58px;justify-content:flex-end}
  .top-actions{width:auto;justify-content:flex-end}
  .top-actions>.btn{min-height:38px;padding:8px 11px!important;font-size:11px!important}
  .page{padding-top:18px}
  .page-heading{display:block}
  .page-heading h1{font-size:clamp(28px,8vw,37px)!important;line-height:1.16}
  .page-heading .actions{display:flex;flex-wrap:wrap;gap:8px}
  .page-heading .actions>.btn{flex:1 1 auto;min-width:0}
  .hero{min-height:245px!important;padding:24px!important}
  .hero-content{max-width:100%!important;padding-right:56px}
  .hero h2{font-size:clamp(29px,8vw,40px)!important;max-width:none!important;line-height:1.12}
  .hero p{max-width:none!important;font-size:13px!important;line-height:1.6}
  .hero-stickers{top:auto!important;right:4px!important;bottom:13px!important;transform:scale(.64);transform-origin:bottom right;opacity:.95!important}
  .hero .btn{max-width:100%!important;white-space:normal;text-align:center}
  .stat strong{font-size:clamp(25px,7vw,33px)}
  .nav{gap:4px!important}
  .nav button{overflow:hidden;min-width:0!important}
  .nav .nav-text{font-size:10px!important;line-height:1.2!important;text-overflow:ellipsis}
  .nav .glyph{line-height:1;display:inline-flex;align-items:center;justify-content:center}
  .app{padding-bottom:90px!important}
  .notice{bottom:98px!important}
  .mood-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .mood-button{padding:8px 1px}
  .nutri-banner>.vg-plate{flex:none;max-width:85px}
  .nutri-banner p{max-width:100%}
  .modal{width:min(100%,500px);padding:21px;max-height:calc(100dvh - 30px)}
  .modal .nutri-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .feature-panel,.panel{min-width:0}
  .feature-panel .add-row{flex-wrap:wrap}
  .feature-panel .add-row .field{flex:1 1 180px}
  .feature-panel .add-row .btn{flex:0 0 auto}
}
@media(max-width:430px){
  .main{padding-inline:12px!important}
  .hero{padding:20px!important;min-height:260px!important}
  .hero-content{padding-right:30px}
  .hero-stickers{opacity:.73!important;right:-7px!important}
  .hero h2{font-size:30px!important}
  .hero p{font-size:12px!important}
  .page-heading .actions>.btn{font-size:11px;padding:9px 10px}
  .nutri-banner{display:block}
  .nutri-banner>.vg-plate{display:none}
  .nutri-fields{grid-template-columns:1fr 1fr}
  .nutri-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood-button small{font-size:8px!important}
  .more-sheet{max-height:calc(100dvh - 112px);padding:16px}
}
@media(prefers-reduced-motion:reduce){.hero-stickers .sticker-chip,.sticker-placed,.celebration span{animation:none!important}html{scroll-behavior:auto}}