:root {
  --paper: #fbf4ec;
  --paper-2: #fffaf4;
  --ivory: #f5e9dd;
  --ink: #392d30;
  --navy: #132a46;
  --pink: #d34d78;
  --rose: #b9647a;
  --sage: #87967d;
  --terra: #a45d35;
  --gold: #bf9a6d;
  --line: #e8d6c7;
  --muted: #83746e;
  --shadow: 0 8px 24px rgba(116, 79, 55, 0.085);
  --serif: "Cardo", "Simonetta", Georgia, serif;
  --sans: "Plus Jakarta Sans", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #e8dace;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #be7298;
  outline-offset: 2px;
}
svg {
  display: block;
}
.i {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.i.small {
  width: 16px;
  height: 16px;
}
.i.large {
  width: 27px;
  height: 27px;
}
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 340px 470px at 5% 16%, #fbebe0 0, transparent 80%),
    radial-gradient(ellipse 380px 500px at 96% 85%, #f6ddd6 0, transparent 80%);
}
.site-note {
  position: fixed;
  top: 32px;
  left: calc(50% - 520px);
  max-width: 270px;
  color: #74594d;
  pointer-events: none;
}
.site-note h2 {
  font: 400 46px var(--serif);
  margin: 0 0 8px;
  color: #8a584a;
}
.site-note p {
  font: 400 13px/1.8 var(--sans);
}
.site-note .line {
  height: 1px;
  width: 90px;
  background: var(--gold);
  margin: 18px 0;
}
.phone {
  position: relative;
  max-width: 444px;
  min-height: 100dvh;
  margin: auto;
  background: linear-gradient(160deg, #fff9f3 0, #fcf2ea 45%, #f9ece3 100%);
  box-shadow:
    0 0 0 1px #e7cfc0,
    0 20px 80px #684a3e33;
  overflow: hidden;
}
.phone:before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 10%, #fceee1b0, transparent 26%),
    radial-gradient(circle at -5% 65%, #fffefaaa, transparent 22%);
  z-index: 0;
}
.shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding: 0 18px calc(103px + env(safe-area-inset-bottom, 0px));
}
.topbar {
  height: 102px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 70px;
  gap: 4px;
  align-items: center;
  position: relative;
  z-index: 5;
}
.top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #775440;
}
.icon-button:hover {
  background: #f6e6db;
  border-radius: 50%;
}
.logo-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.brand-img {
  width: 252px;
  max-width: 100%;
  height: 86px;
  object-fit: contain;
}
.logo-sub {
  display: none;
}
.profile-pip {
  display: grid;
  place-items: center;
  background: #f8e8e3;
  border: 1px solid #dcb5ae;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font: italic 17px var(--serif);
  color: #aa526d;
}
.demo-ribbon {
  padding: 7px 11px;
  border: 1px solid #efd7c8;
  border-radius: 9px;
  background: #fffaf6a8;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 9px;
  line-height: 1.5;
  color: #977269;
  margin: 0 0 8px;
}
.demo-ribbon .i {
  width: 13px;
  height: 13px;
  color: #b26c77;
}
.hi {
  padding: 11px 3px 5px;
}
.hi h1 {
  margin: 0;
  font: 400 31px/1.22 var(--serif);
  color: #502d34;
  letter-spacing: -0.7px;
}
.hi em {
  font-weight: 400;
  color: #6e3546;
}
.hi .eyebrow {
  margin-top: 8px;
}
.eyebrow {
  font: 700 9px/1.5 var(--sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ac866f;
}
.tiny {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 18px 3px 10px;
}
.section-header h2 {
  font: 700 11px var(--sans);
  letter-spacing: 1px;
  margin: 0;
  color: #594647;
}
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #bc5175;
  border: 0;
  background: none;
  padding: 3px 0;
  font: 700 10px var(--sans);
  white-space: nowrap;
}
.text-btn .i {
  width: 13px;
  height: 13px;
}
.card {
  border: 1px solid #e7d6c6;
  background: #fffaf6dc;
  box-shadow: var(--shadow);
  border-radius: 17px;
  padding: 15px;
}
.cycle-card {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: center;
  gap: 0;
  min-height: 212px;
  background: linear-gradient(115deg, #fff9f3df, #f7e6d7bd);
  position: relative;
  overflow: hidden;
  padding: 13px 10px;
}
.botanical {
  position: absolute;
  right: -15px;
  top: -9px;
  width: 99px;
  height: 110px;
  opacity: 0.33;
  color: #b99469;
  pointer-events: none;
}
.botanical.bottom {
  top: auto;
  bottom: -10px;
  left: -16px;
  right: auto;
  transform: rotate(185deg);
}
.donut {
  width: 100%;
  max-width: 157px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--sage) 0 20%,
    #f9f0e6 20% 22%,
    #ce7380 22% 34%,
    #f9f0e6 34% 36%,
    #b16b45 36% 63%,
    #f9f0e6 63% 66%,
    var(--navy) 66% 95%,
    #f9f0e6 95% 100%
  );
  display: grid;
  place-items: center;
  margin: auto;
  box-shadow: 0 0 0 1px #dfbf9e;
}
.donut-inner {
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fffaf4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px #eed9c9;
  gap: 1px;
}
.donut-inner .small-title {
  font: 400 19px var(--serif);
}
.donut-inner strong {
  font: 700 27px var(--serif);
  line-height: 1;
}
.donut-inner strong span {
  font: 400 14px var(--serif);
}
.donut-inner .flower {
  font-size: 25px;
  color: #cf7b8f;
  margin-top: 2px;
}
.cycle-detail {
  padding: 5px 5px 0 14px;
  position: relative;
  z-index: 1;
}
.cycle-detail h2 {
  font: 700 27px/1.12 var(--serif);
  margin: 6px 0 3px;
  color: #5e303a;
}
.cycle-detail .subtitle {
  font: 400 17px var(--serif);
  color: #95603c;
}
.cycle-detail p {
  font: 500 11px/1.65 var(--sans);
  color: #60555a;
  margin: 13px 0 2px;
}
.cycle-next {
  position: absolute;
  top: 8px;
  right: 7px;
  border: 1px solid #ebdacb;
  border-radius: 50%;
  width: 29px;
  height: 29px;
  background: #fffaf5aa;
  display: grid;
  place-items: center;
  color: #946c50;
}
.cycle-next .i {
  width: 15px;
  height: 15px;
}
.summary {
  padding: 12px;
}
.summary .section-header {
  margin: 2px 3px 10px;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.stat {
  background: #f9eee7;
  border-radius: 15px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 8px;
  min-height: 90px;
}
.stat:nth-child(2) {
  background: #faecea;
}
.stat .bubble {
  width: 48px;
  height: 48px;
}
.stat-name {
  font-size: 10px;
  color: #5b4d49;
  margin-bottom: 6px;
}
.stat-value {
  font: 400 18px var(--serif);
  line-height: 1.1;
}
.meters {
  display: flex;
  gap: 3px;
  margin-top: 9px;
}
.meters span {
  width: 15px;
  height: 7px;
  border-radius: 4px;
  background: #e6d5cf;
}
.meters span.on {
  background: #cf758a;
}
.bubble {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1dfca;
  color: #a8744a;
  flex: none;
}
.bubble.sage {
  background: #e5e9da;
  color: #70856d;
}
.bubble.rose {
  background: #f5dbdc;
  color: #c1697b;
}
.bubble.terra {
  background: #f5e1d0;
  color: #a87349;
}
.bubble.navy {
  background: #e6e8f0;
  color: #63728d;
}
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  border: 1px solid white;
  padding: 12px 9px;
  min-height: 91px;
  text-align: left;
  box-shadow: 0 3px 12px #a57c6b22;
  background: #f0f0e6;
  color: #45383a;
  position: relative;
  overflow: hidden;
}
.tile:after {
  content: "✺";
  position: absolute;
  right: -7px;
  top: -10px;
  color: #cfb68e44;
  font-size: 54px;
  pointer-events: none;
}
.tile:nth-child(2),
.tile:nth-child(4) {
  background: #fae8e6;
}
.tile:nth-child(3) {
  background: #f9f1e4;
}
.tile:nth-child(4) {
  background: #f9e9da;
}
.tile:nth-child(6) {
  background: #fae4ea;
}
.tile .bubble {
  width: 45px;
  height: 45px;
}
.tile strong {
  display: block;
  font: 700 17px var(--serif);
}
.tile small {
  display: block;
  font: 500 9px/1.5 var(--sans);
  color: #736666;
  margin-top: 3px;
}
.tile-arrow {
  position: absolute;
  right: 8px;
  bottom: 9px;
  color: #86635e;
  background: #fff9f2a0;
  border: 1px solid #e8d8ca;
  border-radius: 50%;
  padding: 3px;
}
.tile-arrow .i {
  width: 11px;
  height: 11px;
}
.guidance .section-header {
  margin: 0 0 8px;
}
.guidance {
  margin-top: 13px;
  padding: 14px;
}
.guide-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #eadccf;
  padding: 9px 2px;
  color: #56494a;
}
.guide-row .n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c26481;
  color: #fff;
  display: grid;
  place-items: center;
  font: 400 13px var(--serif);
  flex: none;
}
.guide-row .i {
  color: #9e7152;
  width: 18px;
  height: 18px;
}
.guide-row p {
  font: 500 11px/1.45 var(--sans);
  margin: 0;
  flex: 1;
}
.guide-row .arrow {
  color: #c56b85;
}
.powers-card {
  margin-top: 13px;
  padding: 13px 9px 9px;
}
.powers-card .section-header {
  margin: 0 3px 10px;
}
.powers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.power {
  background: var(--navy);
  border-radius: 10px;
  padding: 13px 3px;
  color: #fff;
  text-align: center;
  min-height: 115px;
}
.power.active {
  outline: 2px solid #cda569;
  outline-offset: 2px;
}
.power .p-ico {
  display: block;
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: 7px;
}
.power b {
  font: 700 12px var(--serif);
  display: block;
  white-space: nowrap;
}
.power small {
  font: 500 8px/1.4 var(--sans);
  display: block;
  margin-top: 5px;
  color: #fff9;
}
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(444px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 9px 5px calc(12px + env(safe-area-inset-bottom, 0px));
  min-height: 75px;
  border-top: 1px solid #e9d8cc;
  background: #fff8f1f4;
  backdrop-filter: blur(12px);
  z-index: 30;
  border-radius: 15px 15px 0 0;
}
.nav-item {
  border: 0;
  background: transparent;
  color: #7f6e69;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 600 10px var(--sans);
  padding: 0 1px;
}
.nav-item.active {
  color: #bd5275;
}
.nav-item .i {
  width: 23px;
  height: 23px;
}
.nav-item.main-action .nav-circle {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #c25d7a;
  color: white;
  border: 3px solid #fff6f2;
  box-shadow: 0 2px 7px #b9718570;
  margin-top: -29px;
}
.nav-circle .i {
  width: 27px;
  height: 27px;
}
.page-heading {
  text-align: center;
  padding: 18px 5px 3px;
}
.page-heading .kicker {
  font: 700 10px var(--sans);
  color: #ac7d69;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.page-heading h1 {
  font: 400 29px/1.2 var(--serif);
  color: #56383b;
  margin: 7px 0;
}
.page-heading p {
  font: 500 11px/1.7 var(--sans);
  color: #7d6d65;
  max-width: 330px;
  margin: 6px auto 13px;
}
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: #926c61;
  font-size: 11px;
  padding: 9px 2px;
}
.question {
  font: 700 19px var(--serif);
  color: #5f3d3e;
  margin: 14px 0 10px;
}
.micro {
  font: 700 10px var(--sans);
  letter-spacing: 0.3px;
  color: #755e57;
  margin: 12px 0 8px;
}
.choice-list {
  display: grid;
  gap: 7px;
}
.choice {
  padding: 13px 13px;
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: left;
  border: 1px solid #ead9cd;
  background: #fffaf6;
  border-radius: 12px;
  color: #564a47;
  font: 600 11px var(--sans);
  width: 100%;
}
.choice.active {
  background: #f5dce2;
  border-color: #ce7c94;
  color: #89445a;
  box-shadow: 0 0 0 1px #cf9eae44;
}
.choice .choice-ico {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #f3ece1;
  color: #b67561;
  font-size: 16px;
  flex: none;
}
.choice.active .choice-ico {
  background: #fff4f6;
  color: #bc627e;
}
.choice .tick {
  margin-left: auto;
  color: #ba5778;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  border: 1px solid #e6d3c9;
  background: #fff9f4;
  color: #76635d;
  border-radius: 18px;
  padding: 9px 12px;
  font: 600 10px var(--sans);
}
.chip.active {
  background: #f0d7df;
  border-color: #be748a;
  color: #9a425b;
}
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-radius: 24px;
  color: white;
  background: linear-gradient(110deg, #b45979, #d0778d);
  font: 700 12px var(--sans);
  padding: 15px 12px;
  box-shadow: 0 3px 8px #b5667a25;
  margin: 15px 0 4px;
}
.secondary {
  border: 1px solid #c999a6;
  background: #fffaf6;
  color: #aa5872;
  border-radius: 22px;
  padding: 11px 16px;
  font: 700 11px var(--sans);
}
.text-input {
  width: 100%;
  border: 1px solid #e8d8ca;
  border-radius: 12px;
  background: #fffaf7;
  padding: 12px 13px;
  color: #59423c;
  font: 500 12px var(--sans);
  min-height: 45px;
}
.textarea {
  min-height: 136px;
  line-height: 1.8;
  resize: vertical;
}
.note {
  font: 500 10px/1.7 var(--sans);
  color: #89736b;
}
.info {
  font: 500 11px/1.7 var(--sans);
  background: #f7e9df;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid #efddcb;
}
.info strong {
  color: #7c4b4d;
}
.gradient-card {
  background: linear-gradient(135deg, #f5e7db, #fff8f1 70%);
  border: 1px solid #ead1c4;
  border-radius: 17px;
  padding: 17px;
  margin: 13px 0;
  box-shadow: var(--shadow);
}
.gradient-card h2 {
  font: 700 23px var(--serif);
  color: #674048;
  margin: 5px 0;
}
.gradient-card p {
  font: 500 11px/1.75 var(--sans);
  color: #715e5a;
  margin: 5px 0 0;
}
.answer-card {
  border: 1px solid #e9d7cd;
  border-radius: 14px;
  background: #fffbf7;
  padding: 16px;
  margin: 12px 0;
  box-shadow: var(--shadow);
}
.answer-card h2 {
  font: 700 22px var(--serif);
  color: #5c4240;
  margin: 0 0 7px;
}
.answer-card p {
  font: 500 11px/1.8 var(--sans);
  margin: 7px 0;
}
.answer-card .label {
  font: 700 10px var(--sans);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #b15b7b;
  margin: 1px 0 12px;
}
.mini-list {
  display: grid;
  gap: 0;
  margin: 10px 0;
}
.mini-list .mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-top: 1px solid #eedfd4;
  font: 500 11px/1.5 var(--sans);
  color: #685750;
}
.mini-row .i {
  color: #8c9a82;
}
.mini-row b {
  font: 700 11px var(--sans);
  color: #54413c;
}
.mini-row .right {
  margin-left: auto;
  color: #b36a7d;
}
.phase-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.phase-dot {
  border-radius: 30px;
  height: 9px;
  width: 9px;
  display: inline-block;
  margin-right: 4px;
}
.phase-legend div {
  font: 500 9px var(--sans);
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #695c56;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
}
.calendar-head h2 {
  font: 700 23px var(--serif);
  margin: 0;
}
.calendar-head button {
  border: 0;
  background: transparent;
  color: #ad6d7c;
  padding: 10px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  justify-items: center;
  align-items: center;
  padding: 10px 3px;
}
.week {
  font: 700 10px var(--sans);
  color: #a18c81;
  padding-bottom: 6px;
}
.date {
  position: relative;
  border: 0;
  background: none;
  border-radius: 50%;
  width: 39px;
  height: 39px;
  font: 600 11px var(--sans);
  color: #544e48;
  display: grid;
  place-items: center;
}
.date.deep {
  background: #e9dce0;
}
.date.follicular {
  background: #e0e8db;
}
.date.ovulation {
  background: #f6d6d8;
}
.date.luteal {
  background: #f3e0d2;
}
.date.today {
  outline: 2px solid #c06781;
  outline-offset: 2px;
}
.date.selected {
  box-shadow: inset 0 0 0 2px #b36f81;
}
.date.other {
  opacity: 0.3;
}
.date:after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ad7880;
  opacity: 0;
}
.date.logged:after {
  opacity: 1;
}
.food-art {
  height: 147px;
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 52%,
    #c78861 0,
    #8d5c43 23%,
    #f5ebdd 24%,
    #efe0d0 27%,
    #c9a77e 28%,
    #f8ece1 35%,
    #f3d8be 100%
  );
  position: relative;
}
.food-art .plate {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  filter: drop-shadow(0 7px 6px #6b46283d);
}
.food-art:before,
.food-art:after {
  content: "✿";
  position: absolute;
  font-size: 53px;
  color: #ecd9ad87;
}
.food-art:before {
  top: 0;
  left: 14px;
}
.food-art:after {
  bottom: 0;
  right: 18px;
}
.small-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f3e9df;
  border-radius: 30px;
  padding: 4px;
  margin: 12px 0;
}
.small-tabs button {
  border: 0;
  background: transparent;
  border-radius: 24px;
  padding: 9px 4px;
  color: #8d706a;
  font: 700 10px var(--sans);
}
.small-tabs button.active {
  background: #bc607d;
  color: white;
}
.track-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eadbce;
  padding: 13px 3px;
}
.track-row span {
  font-size: 11px;
}
.track-row button {
  border: 1px solid #ddc5b4;
  background: #fff9f1;
  padding: 8px 13px;
  border-radius: 12px;
  color: #a05d6e;
  font-size: 10px;
}
.track-row button.done {
  background: #e5ebdf;
  border-color: #c4d2bd;
  color: #52754f;
}
.mood-hero {
  text-align: center;
}
.mood-hero .face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f4d9d9;
  display: grid;
  place-items: center;
  margin: auto;
  font-size: 33px;
  color: #a95b73;
}
.mood-hero h2 {
  font: 700 23px var(--serif);
  margin: 13px 0 5px;
}
.chatbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 235px;
  margin: 16px 0;
}
.message {
  max-width: 91%;
  padding: 13px 14px;
  border: 1px solid #eaddd2;
  border-radius: 15px;
  background: #fffaf7;
  font: 500 11px/1.8 var(--sans);
  color: #5d4e49;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message.user {
  background: #f1d7df;
  border-color: #efc6d1;
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.message.bot {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.chat-input input {
  flex: 1;
  min-width: 0;
}
.send-btn {
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: #c4607d;
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.quickprompts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.quickprompts button {
  font: 600 9px var(--sans);
  color: #a06475;
  background: #fff9f2;
  border: 1px solid #ead6cd;
  border-radius: 20px;
  padding: 9px 10px;
}
.journal-entry {
  border: 1px solid #ebdacb;
  background: #fffaf6;
  border-radius: 12px;
  padding: 13px;
  margin: 9px 0;
}
.journal-entry p {
  font: 500 11px/1.7 var(--sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0;
}
.journal-entry small {
  color: #a67d70;
}
.settings .mini-row {
  cursor: pointer;
}
.settings input {
  margin-top: 5px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row label {
  font: 700 10px var(--sans);
}
.danger {
  color: #ae526b;
  border: 1px solid #d99aaa;
  background: #fffafa;
  border-radius: 20px;
  padding: 12px 15px;
  font-size: 11px;
}
.toast {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(380px, 88%);
  background: #3b3031;
  color: #fff;
  padding: 12px 16px;
  border-radius: 15px;
  z-index: 100;
  text-align: center;
  box-shadow: 0 10px 30px #40303433;
  font: 500 11px/1.5 var(--sans);
  display: none;
}
.toast.visible {
  display: block;
}
.desktop-caption {
  position: fixed;
  top: 43px;
  left: calc(50% + 265px);
  width: 270px;
  color: #805f53;
}
.desktop-caption h3 {
  font: 400 28px var(--serif);
  margin: 0 0 10px;
}
.desktop-caption p {
  font: 500 11px/1.8 var(--sans);
}
.desktop-caption .pill {
  font-size: 10px;
  display: inline-block;
  padding: 8px 12px;
  background: #fff5ec;
  border: 1px solid #eed8ca;
  border-radius: 30px;
}
.app-splash {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fffaf4 0%, #fbf0e7 55%, #f7e7de 100%);
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}
.app-splash:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.78), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(218, 177, 151, 0.18), transparent 38%);
}
.app-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 26px 24px;
  max-width: 82%;
}
.splash-logo {
  width: min(340px, 100%);
  height: auto;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 26px rgba(169, 117, 86, 0.08));
}
.splash-tag {
  font: 600 11px/1.7 var(--sans);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #9b7463;
  margin: 0 0 18px;
}
.splash-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.splash-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c77558;
  opacity: 0.35;
  animation: splashPulse 1.1s infinite ease-in-out;
}
.splash-loader span:nth-child(2) {
  animation-delay: 0.15s;
}
.splash-loader span:nth-child(3) {
  animation-delay: 0.3s;
}
.splash-note {
  margin-top: 16px;
  font: 500 10px/1.6 var(--sans);
  color: #9c7c71;
}
@keyframes splashPulse {
  0%,
  80%,
  100% {
    transform: scale(0.72);
    opacity: 0.25;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-width: 1050px) {
  .site-note,
  .desktop-caption {
    display: none;
  }
}
@media (min-width: 600px) {
  body {
    padding: 20px 0 0;
  }
  .phone {
    border: 7px solid #a6795e;
    outline: 2px solid #e5bf99;
    border-radius: 40px 40px 0 0;
    min-height: calc(100dvh - 20px);
  }
  .bottomnav {
    bottom: 0;
  }
}
@media (max-width: 599px) {
  body {
    background: var(--paper);
  }
  .phone {
    max-width: none;
    box-shadow: none;
    min-height: 100dvh;
  }
  .shell {
    padding-left: 15px;
    padding-right: 15px;
  }
  .topbar {
    height: 96px;
  }
}
@media (max-width: 350px) {
  .cycle-card {
    grid-template-columns: 40% 60%;
  }
  .donut {
    max-width: 130px;
  }
  .tile strong {
    font-size: 15px;
  }
  .tile .bubble {
    width: 38px;
    height: 38px;
  }
  .power b {
    font-size: 10px;
  }
  .brand-img {
    width: 215px;
  }
}

/* Food Companion · Protein + independent Supplements screen (v5) */
.food-tracker {
  margin: 15px 0;
  border: 1px solid #e7d6c6;
  border-radius: 17px;
  background: linear-gradient(140deg, #fffaf6, #f2f3e8);
  padding: 16px;
  box-shadow: var(--shadow);
}
.tracker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.tracker-head h2 {
  margin: 3px 0 0;
  font: 700 24px/1.2 var(--serif);
  color: #513e42;
}
.tracker-head .micro {
  margin: 0;
  color: #97705a;
  letter-spacing: 1px;
}
.tracker-sub {
  font: 500 10px/1.65 var(--sans);
  color: #806e66;
  margin: 7px 0;
}
.protein-overview {
  display: flex;
  align-items: center;
  gap: 17px;
  background: #fffaf5c9;
  border: 1px solid #e8e0d0;
  border-radius: 14px;
  padding: 13px;
}
.protein-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: conic-gradient(
    #87967d 0deg var(--progress-angle),
    #e7e4d8 var(--progress-angle) 360deg
  );
  box-shadow: 0 0 0 1px #ddd5bb;
}
.protein-ring-inner {
  width: 103px;
  height: 103px;
  background: #fffaf6;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px #f0e3d9;
}
.protein-ring-inner strong {
  font: 700 29px/1 var(--serif);
  color: #60725b;
}
.protein-ring-inner small {
  font: 600 10px var(--sans);
  color: #7a756a;
  margin-top: 3px;
}
.protein-ring-inner span {
  font: 700 9px var(--sans);
  color: #a78163;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 7px;
}
.protein-side {
  min-width: 0;
  flex: 1;
}
.protein-side strong {
  font: 700 22px var(--serif);
  color: #5c4944;
}
.protein-side p {
  font: 500 10px/1.6 var(--sans);
  color: #806d65;
  margin: 7px 0;
}
.protein-goal-form {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}
.protein-goal-form label {
  font-size: 10px;
  color: #836c5c;
}
.protein-goal-form input {
  width: 63px;
  min-height: 34px;
  padding: 5px 7px;
  text-align: center;
}
.protein-goal-form button,
.mini-add {
  border: 1px solid #d4b7a5;
  background: #fff9f3;
  color: #9f6170;
  border-radius: 11px;
  font: 700 10px var(--sans);
  padding: 9px 10px;
}
.quick-add {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.quick-add button {
  border: 1px solid #c8d1bd;
  background: #e6edde;
  color: #5a7154;
  border-radius: 25px;
  font: 700 11px var(--sans);
  padding: 10px 14px;
}
.tracker-form {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
  align-items: center;
  margin: 10px 0 0;
}
.tracker-form input {
  min-width: 0;
}
.tracker-form .add-button {
  grid-column: 1/-1;
  margin: 0;
}
.add-button {
  background: #a87c65;
  color: #fff;
  border: 0;
  border-radius: 22px;
  padding: 12px;
  font: 700 11px var(--sans);
}
.log-list {
  margin-top: 11px;
  display: grid;
  gap: 6px;
}
.log-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #fffaf7;
  border: 1px solid #e9dccf;
  border-radius: 11px;
  padding: 9px 10px;
  font: 600 10px/1.5 var(--sans);
  color: #654f49;
}
.log-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.log-row b {
  color: #728465;
  font-size: 11px;
}
.log-row button {
  background: transparent;
  border: 0;
  color: #b66b7b;
  font: 700 13px var(--sans);
  padding: 5px;
}
.supplement-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 9px;
  border-bottom: 1px solid #eddfd3;
}
.supplement-item:last-child {
  border-bottom: 0;
}
.supplement-name {
  flex: 1;
  min-width: 0;
}
.supplement-name strong {
  font: 700 12px/1.5 var(--sans);
  color: #563e3d;
  display: block;
  overflow-wrap: anywhere;
}
.supplement-name small {
  font: 500 9px/1.5 var(--sans);
  color: #897368;
  display: block;
}
.supplement-item.taken .supplement-name strong {
  text-decoration: line-through;
  opacity: 0.6;
}
.taken-btn {
  flex: none;
  border: 1px solid #d8d3c5;
  background: #fffaf6;
  color: #9d7380;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font: 700 16px var(--sans);
}
.taken-btn.is-taken {
  background: #7e9a79;
  color: white;
  border-color: #7e9a79;
}
.supplement-item .remove {
  border: 0;
  background: transparent;
  color: #ad7f73;
  font-size: 17px;
  padding: 6px;
}
.supplement-add {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.supplement-add .supplement-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.supplement-add select {
  appearance: auto;
}
.supplement-add .add-button {
  margin-top: 1px;
}
.tracker-badge {
  border: 1px solid #d9bdae;
  border-radius: 22px;
  background: #fff6ef;
  padding: 5px 9px;
  color: #9b6471;
  font: 700 9px var(--sans);
}
@media (max-width: 380px) {
  .protein-overview {
    gap: 9px;
    padding: 9px;
  }
  .protein-ring {
    width: 111px;
    height: 111px;
  }
  .protein-ring-inner {
    width: 86px;
    height: 86px;
  }
  .protein-ring-inner strong {
    font-size: 24px;
  }
  .protein-side strong {
    font-size: 19px;
  }
  .food-tracker {
    padding: 12px;
  }
}

/* Bloomsy Premium Typography v4 — consistent scale and mobile legibility.
   Visual design, colours, layout and app functionality remain unchanged. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 13px;
  line-height: 1.55;
}
.hi h1 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.45px;
}
.eyebrow {
  font-size: 9.5px;
  letter-spacing: 1.4px;
}
.section-header h2 {
  font-size: 10.5px;
  letter-spacing: 0.85px;
}
.cycle-detail h2 {
  font-size: 24px;
  line-height: 1.16;
}
.cycle-detail .subtitle {
  font-size: 15px;
}
.cycle-detail p {
  font-size: 11.5px;
  line-height: 1.6;
}
.stat-value {
  font-size: 17px;
}
.tile strong {
  font-size: 15.5px;
  line-height: 1.2;
}
.tile small {
  font-size: 10px;
  line-height: 1.5;
}
.guide-row p {
  font-size: 11.5px;
  line-height: 1.55;
}
.page-heading {
  padding-top: 12px;
}
.page-heading .kicker {
  font-size: 10px;
  letter-spacing: 1.3px;
}
.page-heading h1 {
  font-size: 24px;
  line-height: 1.2;
  margin: 6px 0 4px;
}
.page-heading p {
  font-size: 12px;
  line-height: 1.55;
  margin: 5px auto 13px;
}
.question {
  font-size: 18px;
}
.micro {
  font-size: 10px;
  letter-spacing: 0.5px;
}
.chip {
  font-size: 10.5px;
  line-height: 1.25;
  padding: 9px 11px;
}
.choice {
  font-size: 12px;
  line-height: 1.45;
}
.gradient-card h2 {
  font-size: 20px;
  line-height: 1.25;
}
.gradient-card p {
  font-size: 12px;
  line-height: 1.65;
}
.answer-card h2 {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.answer-card p {
  font-size: 12px;
  line-height: 1.65;
  margin: 6px 0;
}
.answer-card .label {
  font-size: 10px;
  letter-spacing: 0.85px;
}
.mini-list .mini-row {
  font-size: 11.5px;
  line-height: 1.5;
}
.note,
.tracker-sub {
  font-size: 11px;
  line-height: 1.55;
}
.info,
.message,
.journal-entry p {
  font-size: 12px;
  line-height: 1.65;
}
.primary,
.secondary {
  font-size: 12px;
  letter-spacing: 0.05px;
}
.text-input {
  font-size: 16px;
  line-height: 1.4;
}
.small-tabs button,
.nav-item {
  font-size: 10px;
}
/* Added Food companion trackers share the same heading / body scale */
.food-tracker {
  padding: 14px;
  margin: 12px 0;
}
.tracker-head {
  margin-bottom: 10px;
}
.tracker-head h2 {
  font-size: 19px;
  line-height: 1.25;
  margin-top: 3px;
}
.tracker-head .micro {
  font-size: 9.5px;
  letter-spacing: 0.65px;
}
.tracker-badge {
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}
.protein-overview {
  gap: 12px;
  padding: 11px;
}
.protein-ring {
  width: 118px;
  height: 118px;
}
.protein-ring-inner {
  width: 92px;
  height: 92px;
}
.protein-ring-inner strong {
  font-size: 25px;
}
.protein-ring-inner small {
  font-size: 10px;
}
.protein-ring-inner span {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.protein-side strong {
  font-size: 18px;
  line-height: 1.25;
}
.protein-side p {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0;
}
.protein-goal-form label {
  font-size: 10px;
}
.protein-goal-form button,
.mini-add {
  font-size: 11px;
}
.quick-add button {
  font-size: 11px;
}
.add-button {
  font-size: 12px;
}
.log-row {
  font-size: 11.5px;
  line-height: 1.45;
}
.supplement-name strong {
  font-size: 12px;
  line-height: 1.45;
}
.supplement-name small {
  font-size: 10.5px;
  line-height: 1.5;
}
@media (max-width: 380px) {
  .hi h1 {
    font-size: 26px;
  }
  .page-heading h1 {
    font-size: 23px;
  }
  .protein-overview {
    gap: 9px;
    padding: 9px;
  }
  .protein-ring {
    width: 104px;
    height: 104px;
  }
  .protein-ring-inner {
    width: 81px;
    height: 81px;
  }
  .protein-ring-inner strong {
    font-size: 22px;
  }
  .protein-side strong {
    font-size: 17px;
  }
  .food-tracker {
    padding: 12px;
  }
}

/* Supplements: standalone subpage, same Bloomsy design system */
.supp-hero {
  background: linear-gradient(130deg, #fff8ef, #f0eee0);
  margin: 5px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.supp-hero h2 {
  font: 700 20px/1.22 var(--serif);
  margin: 4px 0;
  color: #634344;
}
.supp-hero p {
  font: 500 11px/1.6 var(--sans);
  margin: 5px 0;
  color: #806d65;
}
.supp-counter {
  border: 2px solid #d6bba3;
  background: #fffaf5;
  border-radius: 50%;
  width: 82px;
  height: 82px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #7e8e73;
}
.supp-counter strong {
  font: 700 24px/1 var(--serif);
}
.supp-counter small {
  font: 600 9px var(--sans);
  margin-top: 4px;
  color: #927d70;
}
.supp-row-group {
  background: #fffaf7;
  border: 1px solid #ece0d7;
  border-radius: 12px;
  padding: 4px 8px;
  margin-top: 10px;
}
.supp-day {
  color: #986d5e;
  font: 700 10px var(--sans);
  letter-spacing: 0.7px;
  margin-top: 13px;
}
.supp-history {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.supp-history .mini-row {
  justify-content: space-between;
  font-size: 11px;
}
.supp-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: #fffaf5;
  border: 1px solid #e8d5c7;
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  color: #815963;
  text-align: left;
  font: 600 11px var(--sans);
  margin-top: 10px;
}
.supp-shortcut svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 380px) {
  .supp-hero h2 {
    font-size: 18px;
  }
  .supp-counter {
    width: 70px;
    height: 70px;
  }
  .supp-counter strong {
    font-size: 21px;
  }
}

/* Bloomsy wellness prototype refinements */
.phia-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: Cardo, Georgia, serif;
  font-size: 27px;
  color: #65454c;
  letter-spacing: -1px;
  white-space: nowrap;
}
.phia-logo-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #d9b9a5;
  background: #f7e9df;
  color: #b86d7b;
  font-size: 20px;
}
.phia-logo-ital {
  font-style: italic;
  color: #b9687b;
}
.logo-sub {
  font-size: 8px !important;
  letter-spacing: 2px !important;
}
.daily-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
}
.daily-col {
  display: grid;
  grid-template-rows: repeat(3, minmax(94px, 1fr));
  gap: 9px;
  min-width: 0;
}
.daily-grid .tile {
  width: 100%;
  min-height: 92px;
  padding: 10px 7px;
  align-items: center;
  gap: 6px;
}
.daily-grid .tile strong {
  font-size: 14px;
  line-height: 1.22;
}
.daily-grid .tile small {
  font-size: 9.5px;
  line-height: 1.35;
}
.daily-grid .tile .bubble {
  width: 34px;
  height: 34px;
  flex: none;
}
.daily-grid .tile .i {
  width: 17px;
  height: 17px;
}
.daily-grid .tile-arrow {
  display: none;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}
.feature-row .tile {
  min-height: 81px;
  padding: 11px 9px;
  gap: 6px;
}
.feature-row .tile strong {
  font-size: 14px;
}
.feature-row .tile small {
  font-size: 9.5px;
}
@media (max-width: 359px) {
  .daily-grid .tile {
    flex-direction: column;
    align-items: flex-start;
  }
  .daily-col {
    grid-template-rows: repeat(3, minmax(100px, 1fr));
  }
  .feature-row .tile {
    flex-direction: column;
    align-items: flex-start;
  }
}
.powers .power b {
  font-size: 9.5px;
  line-height: 1.3;
}
.power small {
  font-size: 8px;
}
.phia-feature {
  border: 1px solid #e8d6c7;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff9f5, #f4ebea);
  padding: 16px;
  margin: 12px 0;
  box-shadow: var(--shadow);
}
.phia-feature h2 {
  font:
    700 19px/1.3 Cardo,
    Georgia,
    serif;
  margin: 4px 0 8px;
  color: #60434a;
}
.phia-feature p {
  font-size: 11.5px;
  line-height: 1.65;
  color: #796b65;
}
.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.input-grid label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #806c65;
}
.input-grid input,
.input-grid select {
  width: 100%;
  margin: 5px 0 0;
  min-height: 40px;
}
.well-form {
  display: grid;
  gap: 13px;
}
.well-form label {
  font-size: 11px;
  font-weight: 600;
  color: #79635e;
}
.well-form input,
.well-form select,
.well-form textarea {
  width: 100%;
  margin-top: 5px;
}
.well-form .text-input {
  min-height: 42px;
}
.quick-ai {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.quick-ai button {
  background: #f6e9eb;
  color: #844c60;
  border: 1px solid #e9cdd5;
  border-radius: 12px;
  text-align: left;
  padding: 11px 12px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}
.quick-ai button:before {
  content: "✧ ";
  color: #bb6c82;
}
.info-safety {
  font-size: 10.5px;
  line-height: 1.6;
  color: #8a6f68;
  background: #fff6ed;
  border: 1px solid #eadbd0;
  padding: 10px 12px;
  border-radius: 11px;
  margin: 12px 0;
}
.sleep-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 9px 0 14px;
}
.sleep-stat {
  background: #eef0eb;
  border-radius: 13px;
  padding: 12px;
  text-align: center;
}
.sleep-stat strong {
  display: block;
  font: 700 23px Cardo;
  color: #52665b;
}
.sleep-stat span {
  font-size: 10px;
  color: #7b766f;
}
.pw-food-tiny-photo,
.pw-feature-icon {
  display: grid;
  place-items: center;
  background: #fbf6f2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #efe3da;
}
.pw-food-tiny-photo img,
.pw-feature-icon img,
.pw-balanced-food-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fbf6f2;
}
.pw-balanced-food-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.supp-counter {
  width: 94px;
  height: 94px;
  padding: 6px;
  text-align: center;
}
.supp-counter small {
  font-size: 8px;
  line-height: 1.15;
  max-width: 62px;
  text-align: center;
  display: block;
  letter-spacing: 0.3px;
}
.supplement-add .supplement-fields {
  grid-template-columns: 1fr 1fr;
}
.supplement-add .supplement-fields.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.pw-dose-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pw-time-field label,
.pw-dose-fields label {
  display: block;
}
.pw-settings-link.data-tile,
.pw-data-actions button,
.pw-data-actions label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 18px;
  border: 1px solid #d8e0ea;
  background: #eef5fb;
  color: #1c3658;
  font: 700 12px var(--sans);
  padding: 12px 14px;
  text-decoration: none;
  cursor: pointer;
}
.pw-data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pw-data-actions .danger-soft {
  background: #c97f7f;
  color: #fff;
  border-color: #c97f7f;
}
.pw-data-actions .secondary-soft {
  background: #fffaf6;
  color: #7c6a62;
  border-color: #e1d6ca;
}
.pw-data-actions input {
  display: none;
}
.pw-data-caption {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: #6d7786;
}
.store-art {
  height: 160px;
  background: #efe2d6;
}
.pw-product-art {
  padding: 10px;
}
.pw-store-product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.store-card {
  gap: 10px;
}
.store-card strong {
  font-size: 13px;
  line-height: 1.35;
  color: #643e47;
}
.store-card small {
  font-size: 11px;
  line-height: 1.5;
}
.pw-store-reference {
  display: grid;
  gap: 4px;
  background: #f6efe9;
  border: 1px solid #eadccf;
  border-radius: 14px;
  padding: 10px 12px;
  font: 700 11px/1.45 var(--sans);
  color: #7b635d;
}
.pw-store-reference span {
  display: block;
}
.pw-store-price-prompt {
  display: block;
  background: #f6efe9;
  border: 1px solid #eadccf;
  border-radius: 14px;
  padding: 10px 12px;
  font: 700 11px/1.45 var(--sans);
  color: #7b635d;
}
.store-buy.amway {
  background: #dfeade;
  color: #355947;
}
.store-buy.food {
  background: #7c9a87;
}
.store-buy.nonfood {
  background: #9d756c;
}
.sleep-hero-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbf2eb, #f0efe6);
  margin: 8px 0 14px;
  border: 1px solid #eadfd5;
}
.sleep-hero-art .sleep-moon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fffaf6;
  color: #8e7482;
  font-size: 34px;
  box-shadow:
    inset 0 0 0 1px #eedfd4,
    0 10px 20px #d7c4bd55;
}
.sleep-hero-art .sleep-copy strong {
  display: block;
  font: 700 16px/1.3 var(--serif);
  color: #5b4346;
}
.sleep-hero-art .sleep-copy span {
  display: block;
  font: 500 11px/1.55 var(--sans);
  color: #7b6a64;
  margin-top: 4px;
}
.pw-work-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}
.pw-work-step {
  background: #fff9f5;
  border: 1px solid #eadfd5;
  border-radius: 14px;
  padding: 11px 10px;
}
.pw-work-step b {
  display: block;
  font: 700 10px var(--sans);
  color: #a06d63;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.pw-work-step span {
  display: block;
  font: 600 11px/1.5 var(--sans);
  color: #5f4f4a;
}
@media (max-width: 380px) {
  .pw-work-flow,
  .pw-data-actions {
    grid-template-columns: 1fr;
  }
  .store-art {
    height: 145px;
  }
}

.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.store-card {
  border: 1px solid #e4d5c6;
  background: #fffaf5;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.store-art {
  display: grid;
  place-items: center;
  height: 70px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4e9e0, #e6e9dc);
  font-size: 31px;
}
.store-card strong {
  font-size: 12px;
  line-height: 1.35;
}
.store-card small {
  font-size: 10px;
  color: #887b70;
}
.store-card button,
.store-card a {
  margin-top: auto;
  text-align: center;
  display: block;
  text-decoration: none;
  border-radius: 11px;
  background: #9d756c;
  color: white;
  padding: 9px 7px;
  font-size: 10.5px;
  font-weight: 700;
  border: 0;
}
.store-card a.shopee {
  background: #6c8475;
}
.store-card button:focus-visible,
.store-card a:focus-visible {
  outline: 2px solid #b7687c;
  outline-offset: 3px;
}
.advisor {
  border-radius: 17px;
  background: #ebede5;
  padding: 18px;
  margin: 17px 0;
  text-align: center;
  border: 1px solid #d7decd;
}
.advisor h2 {
  font: 700 18px Cardo;
  color: #536f5f;
  margin: 4px 0;
}
.advisor p {
  font-size: 11px;
  color: #6b7c6e;
  line-height: 1.6;
}
.advisor button {
  background: #667d6a;
  color: white;
  border: 0;
  border-radius: 20px;
  padding: 11px 17px;
  font-size: 11px;
  font-weight: 700;
}
.bottomnav .nav-item {
  min-width: 0;
}
@media (max-width: 400px) {
  .phia-logo {
    font-size: 23px;
  }
  .phia-logo-mark {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }
}

/* Bloomsy Home Tile Icon Alignment v5 — icons only, leave all page layouts and functions intact */
.daily-grid .tile,
.feature-row .tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 116px;
  padding: 12px 10px;
}
.daily-grid .tile .bubble,
.feature-row .tile .bubble {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
}
.daily-grid .tile .bubble .i,
.feature-row .tile .bubble .i {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}
.daily-grid .tile > span:nth-child(2),
.feature-row .tile > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.daily-grid .tile strong,
.feature-row .tile strong {
  overflow-wrap: break-word;
}
.daily-grid .tile small,
.feature-row .tile small {
  overflow-wrap: break-word;
}
/* Keep the same two-column alignment on narrow phones. */
@media (max-width: 359px) {
  .daily-grid .tile,
  .feature-row .tile {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
  }
  .daily-grid .tile .bubble,
  .feature-row .tile .bubble {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .daily-grid .tile .bubble .i,
  .feature-row .tile .bubble .i {
    width: 21px;
    height: 21px;
  }
}

/* Bloomsy preview login shell — demo-only, no credential capture or actual authentication */
.auth-gate {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100dvh;
  width: min(444px, 100%);
  z-index: 65;
  background: linear-gradient(170deg, #fffaf5 1%, #faf0e8 62%, #f3e0d6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: calc(25px + env(safe-area-inset-top, 0px)) 24px
    calc(30px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.auth-gate[hidden] {
  display: none !important;
}
.auth-glow {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, #fffef8aa, transparent 43%),
    radial-gradient(circle at 0% 87%, #eec8ba55, transparent 38%),
    radial-gradient(circle at 100% 90%, #e6d8c255, transparent 39%);
}
.auth-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 355px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.auth-logo {
  display: block;
  width: min(280px, 88%);
  height: auto;
  margin: 0 auto 3px;
  object-fit: contain;
}
.auth-kicker {
  font: 700 9px/1.7 var(--sans);
  letter-spacing: 2px;
  color: #a96b58;
  text-transform: uppercase;
  margin: 5px 0 12px;
}
.auth-heading {
  font: 400 30px/1.23 var(--serif);
  color: #5a3840;
  margin: 8px 0 7px;
}
.auth-lead {
  font: 500 11.5px/1.7 var(--sans);
  color: #8e786f;
  margin: 0 0 20px;
  max-width: 295px;
}
.auth-panel {
  width: 100%;
  background: #fffaf6e8;
  border: 1px solid #e7d3c5;
  border-radius: 20px;
  padding: 20px 18px 17px;
  box-shadow: 0 15px 40px #a9796b24;
  text-align: left;
}
.auth-tabline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: #a17163;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.auth-tabline:before,
.auth-tabline:after {
  content: "";
  height: 1px;
  background: #e3cec0;
  width: 26px;
}
.auth-panel label {
  display: block;
  font: 700 10.5px/1.6 var(--sans);
  color: #64514d;
  margin: 9px 0;
}
.auth-panel .auth-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  border: 1px solid #e4d5c8;
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 46px;
  font: 500 14px var(--sans);
  color: #4a3b3d;
  outline: none;
}
.auth-panel .auth-input:focus {
  border-color: #c68887;
  box-shadow: 0 0 0 3px #f8e8ea;
}
.auth-panel .auth-primary {
  width: 100%;
  background: linear-gradient(125deg, #ba6579, #cd7d87);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 13px 15px;
  font: 700 11px var(--sans);
  margin: 13px 0 2px;
  min-height: 45px;
}
.auth-panel .auth-primary:disabled {
  background: #d3bdba;
  cursor: not-allowed;
}
.auth-link {
  border: 0;
  background: transparent;
  font: 700 10px var(--sans);
  color: #b7677e;
  padding: 7px 0;
  text-align: center;
  cursor: pointer;
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  font: 500 10px var(--sans);
  color: #a48f85;
  margin: 14px 0;
}
.auth-or:before,
.auth-or:after {
  content: "";
  height: 1px;
  background: #e9d9cf;
  flex: 1;
}
.auth-preview {
  background: #f4eee7;
  border: 1px solid #e2d6c7;
  color: #714e43;
  width: 100%;
  border-radius: 22px;
  padding: 12px;
  font: 700 11px var(--sans);
  min-height: 44px;
}
.auth-note {
  font: 500 10px/1.7 var(--sans);
  color: #866e64;
  text-align: center;
  margin: 13px 2px 0;
}
.auth-demo-badge {
  display: inline-block;
  background: #f8e8dc;
  border: 1px solid #e9d3c5;
  border-radius: 30px;
  color: #9f755d;
  font: 700 9px var(--sans);
  padding: 8px 12px;
  margin-top: 17px;
}
.auth-botanical {
  position: absolute;
  pointer-events: none;
  right: 1%;
  bottom: 10%;
  font-size: 90px;
  opacity: 0.12;
  color: #b98f69;
}
.auth-subhead {
  margin: 3px 0 6px;
  text-align: center;
  font: 400 26px/1.3 var(--serif);
  color: #643d49;
}
.auth-subcopy {
  font: 500 11px/1.7 var(--sans);
  color: #85746b;
  text-align: center;
  margin-bottom: 14px;
}
.auth-locked {
  margin: 13px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf0e8;
  color: #76584f;
  font: 500 10px/1.65 var(--sans);
}
.auth-gate button:focus-visible {
  outline: 3px solid #b7697a;
  outline-offset: 3px;
}
@media (max-width: 350px) {
  .auth-gate {
    padding-left: 15px;
    padding-right: 15px;
  }
  .auth-logo {
    width: 230px;
  }
  .auth-heading {
    font-size: 27px;
  }
  .auth-panel {
    padding: 16px 14px;
  }
}

/* ===== Bloomsy UI Polish V2 — design-only =====
   Readability, typography and spacing improvements. No app logic changes.
   Cardo serif / Plus Jakarta Sans body. Original palette and structure retained.
*/
:root {
  --phia-space-1: 8px;
  --phia-space-2: 12px;
  --phia-space-3: 16px;
  --phia-radius-card: 18px;
  --phia-readable: #66564f;
}
body {
  font-size: 14px;
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font-family: var(--sans);
}
button {
  touch-action: manipulation;
}
/* Presentation and hero */
.site-note p {
  font-size: 13px;
}
.desktop-caption p {
  font-size: 13px;
}
.hi {
  padding: 12px 3px 7px;
}
.hi h1 {
  font-size: 29px;
  line-height: 1.25;
}
.eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.3px;
  line-height: 1.5;
}
.demo-ribbon {
  font-size: 10.5px;
  line-height: 1.55;
  padding: 10px 11px;
  margin-bottom: 9px;
}
.demo-ribbon .i {
  width: 15px;
  height: 15px;
}
.section-header {
  margin: 20px 3px 11px;
}
.section-header h2 {
  font-size: 12px;
  letter-spacing: 0.55px;
  line-height: 1.4;
}
.text-btn {
  font-size: 11.5px;
  font-weight: 700;
  gap: 3px;
}
.text-btn .i {
  width: 14px;
  height: 14px;
}
.card {
  border-radius: var(--phia-radius-card);
}
.cycle-card {
  min-height: 218px;
}
.cycle-detail h2 {
  font-size: 25px;
  line-height: 1.16;
}
.cycle-detail .subtitle {
  font-size: 16px;
}
.cycle-detail p {
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 11px;
}
.donut-inner .small-title {
  font-size: 20px;
}
.summary {
  padding: 14px;
}
.stat {
  min-height: 96px;
  gap: 9px;
}
.stat-name {
  font-size: 11.5px;
  line-height: 1.4;
  margin-bottom: 5px;
}
.stat-value {
  font-size: 18px;
}
/* Consistent two-column tiles and circular SVG icons */
.daily-grid,
.feature-row {
  gap: 10px;
}
.daily-grid {
  margin-top: 14px;
}
.feature-row {
  margin-top: 10px;
}
.daily-grid .tile,
.feature-row .tile {
  min-height: 123px;
  padding: 13px 9px;
  gap: 8px;
  border-radius: 16px;
}
.daily-grid .tile .bubble,
.feature-row .tile .bubble {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}
.daily-grid .tile .bubble .i,
.feature-row .tile .bubble .i {
  width: 24px;
  height: 24px;
}
.daily-grid .tile strong,
.feature-row .tile strong {
  font-size: 15px;
  line-height: 1.25;
}
.daily-grid .tile small,
.feature-row .tile small {
  font-size: 11px;
  line-height: 1.4;
  color: #6f6260;
  margin-top: 5px;
}
/* Guidance / cycle phases */
.guidance,
.powers-card {
  margin-top: 15px;
}
.guidance {
  padding: 15px;
}
.guidance .section-header {
  margin: 0 0 10px;
}
.guide-row {
  padding: 12px 2px;
  gap: 10px;
}
.guide-row .n {
  width: 27px;
  height: 27px;
}
.guide-row p {
  font-size: 12.5px;
  line-height: 1.55;
}
.powers-card {
  padding: 14px 10px 11px;
}
.powers-card .section-header {
  margin: 0 3px 11px;
}
.powers {
  gap: 6px;
}
.power {
  min-height: 131px;
  padding: 11px 3px 9px;
}
.power .p-ico {
  font-size: 25px;
  margin-bottom: 9px;
}
.powers .power b {
  font-size: 10.5px;
  line-height: 1.35;
}
.power small {
  font-size: 9.5px;
  line-height: 1.42;
  letter-spacing: 0;
}
/* Forms and subpages: readable without changing behaviour */
.page-heading {
  padding-top: 17px;
}
.page-heading .kicker {
  font-size: 11px;
  letter-spacing: 1px;
}
.page-heading h1 {
  font-size: 27px;
  line-height: 1.24;
}
.page-heading p {
  font-size: 13.5px;
  line-height: 1.6;
}
.backlink {
  font-size: 12.5px;
}
.question {
  font-size: 20px;
  line-height: 1.35;
}
.micro {
  font-size: 11.5px;
  letter-spacing: 0.4px;
}
.tiny {
  font-size: 11.5px;
  line-height: 1.55;
}
.chip {
  font-size: 12px;
  padding: 10px 12px;
  line-height: 1.3;
}
.choice {
  font-size: 13px;
  line-height: 1.5;
  min-height: 48px;
}
.primary {
  font-size: 13.5px;
  min-height: 47px;
}
.secondary {
  font-size: 12.5px;
  min-height: 43px;
}
.text-input {
  font-size: 16px;
  line-height: 1.45;
  min-height: 46px;
}
.note,
.tracker-sub {
  font-size: 12px;
  line-height: 1.65;
}
.info,
.message,
.journal-entry p {
  font-size: 13px;
  line-height: 1.7;
}
.gradient-card p,
.answer-card p {
  font-size: 13px;
  line-height: 1.65;
}
.gradient-card h2 {
  font-size: 21px;
}
.answer-card h2 {
  font-size: 20px;
}
.answer-card .label {
  font-size: 11px;
  letter-spacing: 0.6px;
}
.mini-list .mini-row {
  font-size: 12.5px;
  line-height: 1.55;
}
.mini-row b {
  font-size: 12px;
}
.small-tabs button {
  font-size: 11.5px;
  min-height: 38px;
}
.track-row span,
.track-row button {
  font-size: 12px;
}
.phase-legend div {
  font-size: 10.5px;
  white-space: normal;
}
.week {
  font-size: 11px;
}
.date {
  font-size: 12px;
}
.quickprompts button {
  font-size: 11.5px;
  padding: 10px 12px;
}
.log-row {
  font-size: 12px;
}
.add-button,
.quick-add button {
  font-size: 12.5px;
  min-height: 41px;
}
.tracker-badge {
  font-size: 10.5px;
  white-space: normal;
}
.tracker-head .micro {
  font-size: 10.5px;
}
.protein-side p {
  font-size: 12px;
}
.protein-goal-form label {
  font-size: 11.5px;
}
.protein-goal-form button,
.mini-add {
  font-size: 11.5px;
}
.supplement-name strong {
  font-size: 13px;
}
.supplement-name small {
  font-size: 11.5px;
}
.supp-shortcut {
  font-size: 12.5px;
}
.supp-history .mini-row {
  font-size: 12px;
}
.phia-feature p {
  font-size: 13px;
  line-height: 1.65;
}
.input-grid label,
.well-form label {
  font-size: 12.5px;
  line-height: 1.5;
}
.quick-ai button {
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 44px;
}
.info-safety {
  font-size: 12px;
  line-height: 1.6;
}
.sleep-stat span {
  font-size: 11.5px;
}
.store-card strong {
  font-size: 13px;
}
.store-card small {
  font-size: 11.5px;
}
.store-card button,
.store-card a {
  font-size: 12px;
  min-height: 41px;
  display: grid;
  place-items: center;
}
.advisor p {
  font-size: 12.5px;
}
.advisor button {
  font-size: 12.5px;
  min-height: 43px;
}
.toast {
  font-size: 12px;
}
.field-row label {
  font-size: 12px;
}
.danger {
  font-size: 12px;
}
/* Nav remains five tabs with larger labels and comfortable targets */
.bottomnav {
  min-height: 79px;
  padding-top: 10px;
}
.nav-item {
  font-size: 11px;
  line-height: 1.2;
  min-height: 45px;
}
.nav-item .i {
  width: 23px;
  height: 23px;
}
/* Welcome/Login preview — same brand, more legible */
/* Avoid top-of-screen logo clipping when the welcome panel is taller than a phone. */
.auth-gate {
  z-index: 95;
  justify-content: flex-start;
  overscroll-behavior: contain;
}
.auth-inner {
  flex: 0 0 auto;
  margin: auto 0;
}
.auth-inner {
  max-width: 360px;
}
.auth-kicker {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  margin: 7px 0 12px;
}
.auth-heading {
  font-size: 31px;
  line-height: 1.22;
}
.auth-lead {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 325px;
}
.auth-panel {
  border-radius: 21px;
  padding: 20px 18px 18px;
}
.auth-tabline {
  font-size: 10.5px;
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.auth-panel label {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 10px 0;
}
.auth-panel .auth-input {
  font-size: 16px;
  min-height: 48px;
  padding: 12px 13px;
}
.auth-panel .auth-primary {
  font-size: 12.5px;
  min-height: 47px;
}
.auth-link {
  font-size: 11.5px;
  min-height: 33px;
}
.auth-or {
  font-size: 11px;
  margin: 14px 0;
}
.auth-preview {
  font-size: 12.5px;
  min-height: 47px;
}
.auth-note {
  font-size: 11.5px;
  line-height: 1.6;
}
.auth-demo-badge {
  font-size: 10.5px;
  margin-top: 16px;
}
.auth-subcopy,
.auth-locked {
  font-size: 12px;
  line-height: 1.6;
}
.auth-subhead {
  font-size: 27px;
}
.splash-note {
  font-size: 12px;
}
/* Compact phones — keep two columns, avoid clipped titles */
@media (max-width: 380px) {
  .shell {
    padding-left: 13px;
    padding-right: 13px;
  }
  .hi h1 {
    font-size: 27px;
  }
  .cycle-detail h2 {
    font-size: 23px;
  }
  .cycle-detail p {
    font-size: 12px;
  }
  .daily-grid,
  .feature-row {
    gap: 8px;
  }
  .daily-grid .tile,
  .feature-row .tile {
    gap: 7px;
    padding: 11px 7px;
    min-height: 125px;
    flex-direction: row;
    align-items: center;
  }
  .daily-grid .tile .bubble,
  .feature-row .tile .bubble {
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    flex-basis: 43px;
  }
  .daily-grid .tile .bubble .i,
  .feature-row .tile .bubble .i {
    width: 22px;
    height: 22px;
  }
  .daily-grid .tile strong,
  .feature-row .tile strong {
    font-size: 14.5px;
  }
  .daily-grid .tile small,
  .feature-row .tile small {
    font-size: 10.5px;
  }
  .powers {
    gap: 5px;
  }
  .powers .power b {
    font-size: 10px;
  }
  .power small {
    font-size: 9px;
  }
  .stat {
    padding: 10px 7px;
  }
  .auth-gate {
    padding-left: 16px;
    padding-right: 16px;
  }
  .auth-heading {
    font-size: 28px;
  }
  .auth-panel {
    padding: 18px 16px;
  }
}
@media (max-width: 335px) {
  .daily-grid .tile,
  .feature-row .tile {
    gap: 5px;
    padding: 10px 6px;
  }
  .daily-grid .tile .bubble,
  .feature-row .tile .bubble {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-basis: 40px;
  }
  .daily-grid .tile strong,
  .feature-row .tile strong {
    font-size: 13.5px;
  }
  .daily-grid .tile small,
  .feature-row .tile small {
    font-size: 10px;
  }
  .power .p-ico {
    font-size: 22px;
  }
  .powers .power b {
    font-size: 9.5px;
  }
  .power small {
    font-size: 8.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-splash,
  .splash-loader span {
    transition: none;
    animation: none;
  }
}

/* Phase 1 production foundation: unobtrusive account / save feedback */
.cloud-status {
  margin: 3px 0 10px;
  padding: 9px 11px;
  border: 1px solid #d6e1d6;
  border-radius: 10px;
  background: #f0f6ee;
  color: #58705c;
  font: 600 11px/1.5 var(--sans);
}
.cloud-status[hidden] {
  display: none !important;
}
.cloud-status.warn {
  background: #fff1e9;
  border-color: #e9bdb0;
  color: #984f50;
}
.cloud-status button {
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  font-weight: 800;
  margin-left: 8px;
  padding: 3px;
}
.auth-form {
  display: grid;
  gap: 9px;
}
.auth-form label {
  display: block;
  text-align: left;
}
.auth-form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  min-height: 46px;
}
.auth-feedback {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef3e8;
  color: #546b54;
  font: 600 12px/1.6 var(--sans);
  text-align: left;
}
.auth-feedback.warn {
  background: #fff0e9;
  color: #a24e50;
}
.auth-feedback[hidden] {
  display: none !important;
}
.auth-primary:disabled {
  cursor: wait;
  opacity: 0.65;
}
.auth-panel input:not(:disabled) {
  background: #fffbf8;
  color: #503d38;
}

[hidden] {
  display: none !important;
}
/* Phase 2 · functional quick-add and unified energy/mood; approved V2 design unchanged */
.p2-section {
  margin: 15px 0 10px;
}
.p2-caption {
  color: #816d67;
  font: 500 11px/1.55 var(--sans);
  margin: 5px 0 10px;
}
.p2-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 7px 0 12px;
}
.p2-filter {
  border: 1px solid #dfcbbc;
  border-radius: 30px;
  padding: 9px 12px;
  background: #fffaf6;
  color: #835f60;
  font: 700 11px var(--sans);
}
.p2-filter.selected {
  background: #9e6671;
  color: white;
  border-color: #9e6671;
}
.p2-search {
  display: block;
  width: 100%;
  border: 1px solid #dfcbbc;
  border-radius: 11px;
  background: #fffdf9;
  color: #554345;
  font: 500 16px/1.4 var(--sans);
  padding: 12px;
  margin-bottom: 10px;
}
.p2-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.p2-food-button,
.p2-supp-button {
  background: #fffaf7;
  border: 1px solid #e5d5cb;
  border-radius: 13px;
  padding: 12px 10px;
  text-align: left;
  color: #5a4141;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 70px;
}
.p2-food-button strong,
.p2-supp-button strong {
  font-size: 12px;
  line-height: 1.35;
}
.p2-food-button small,
.p2-supp-button small {
  font-size: 10.5px;
  line-height: 1.45;
  color: #806c62;
}
.p2-food-button:active,
.p2-supp-button:active {
  background: #f4e8e1;
}
.p2-food-button:focus-visible,
.p2-supp-button:focus-visible {
  outline: 3px solid #be7298;
  outline-offset: 1px;
}
.p2-supp-button {
  min-height: 49px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.p2-addmark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  min-width: 25px;
  border-radius: 50%;
  background: #f4e6df;
  color: #b36e62;
  font: 700 18px var(--sans);
}
.p2-hint {
  color: #8b766f;
  font-size: 10.5px;
  line-height: 1.6;
  margin: 9px 2px 3px;
}
.p2-checkin-box {
  background: linear-gradient(120deg, #faf0e8, #f6edee);
  border: 1px solid #e8d8cb;
  border-radius: 14px;
  padding: 15px;
  margin: 14px 0;
}
.p2-checkin-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.p2-checkin-cell {
  border-radius: 10px;
  background: #fffaf7;
  padding: 13px;
  min-height: 65px;
}
.p2-checkin-cell small {
  color: #987a71;
  display: block;
  font-size: 10px;
  font-weight: 700;
}
.p2-checkin-cell strong {
  font: 700 18px var(--serif);
  display: block;
  margin-top: 2px;
}
.p2-tagline {
  font-size: 11.5px;
  line-height: 1.65;
  color: #7d6969;
  margin: 6px 0 11px;
}
.p2-insight-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.p2-insight-row {
  border-radius: 12px;
  padding: 12px;
  background: #fff9f4;
  color: #63494b;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid #ecdccf;
}
.p2-chat-context {
  margin-bottom: 12px;
}
.p2-chat-context p {
  overflow-wrap: anywhere;
}
@media (max-width: 350px) {
  .p2-catalog {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .p2-food-button,
  .p2-supp-button {
    padding: 10px 8px;
  }
}

/* Phase 3: Store catalogue / responsive filters / supplement editor */
.store-controls {
  padding: 15px;
  margin: 12px 0 14px;
  background: #fffaf6;
  border: 1px solid #ead8c9;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.store-controls .p2-search {
  margin: 0 0 12px;
}
.store-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.store-filter {
  padding: 9px 12px;
  border: 1px solid #dfc4b8;
  border-radius: 30px;
  background: #fffaf6;
  color: #765859;
  font: 700 11.5px var(--sans);
}
.store-filter.selected {
  color: #fff;
  border-color: #a86277;
  background: #a86277;
}
.store-results {
  font: 500 11.5px/1.5 var(--sans);
  margin-top: 10px;
  color: #886e68;
}
.store-results[hidden],
.store-group[hidden],
.store-card[hidden] {
  display: none !important;
}
.store-group {
  margin: 17px 0 23px;
}
.store-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 12px;
}
.store-heading h2 {
  font: 700 19px var(--serif);
  margin: 0;
  color: #613e46;
}
.store-heading small {
  font: 700 10.5px var(--sans);
  color: #967976;
}
.store-card {
  gap: 8px;
  padding: 13px;
  min-width: 0;
}
.store-art {
  height: 63px;
  font-size: 30px;
}
.store-category {
  font: 700 9px var(--sans);
  letter-spacing: 0.45px;
  color: #a36d75;
  text-transform: uppercase;
}
.store-card strong {
  font-size: 12.8px;
  overflow-wrap: anywhere;
}
.store-card small {
  font-size: 11px;
  line-height: 1.45;
  flex: 1;
}
.store-card .store-buy {
  display: grid;
  place-items: center;
  text-align: center;
  border: 0;
  text-decoration: none;
  border-radius: 11px;
  background: #6e8979;
  color: #fff;
  padding: 10px 7px;
  min-height: 44px;
  font: 700 11px/1.2 var(--sans);
}
[data-store-item="organic-psyllium-husk"] .pw-store-product-photo,
[data-store-item="muesli-very-berries"] .pw-store-product-photo {
  mix-blend-mode: multiply;
}
.store-card .store-buy.amway {
  background: #a36569;
}
.store-card .store-buy:hover {
  filter: brightness(0.96);
}
.store-card .store-buy:focus-visible {
  outline: 3px solid #b7687c;
  outline-offset: 2px;
}
.store-smallnote {
  font: 600 9.5px/1.45 var(--sans);
  color: #8e746c;
}
.store-status {
  padding: 11px 13px;
  font: 500 11.5px/1.6 var(--sans);
  background: #f1ebe5;
  border: 1px solid #e6d6cc;
  border-radius: 12px;
  color: #685d58;
  margin: 11px 0 14px;
}
.store-advisor-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.store-advisor-actions button {
  min-height: 43px;
}
.store-safe {
  font-size: 11.5px;
  line-height: 1.7;
  margin: 13px 1px 20px;
  color: #7c6e66;
}
.supplement-edit-box {
  margin: 10px 0;
  padding: 12px;
  background: #f9eee7;
  border: 1px solid #ead6c6;
  border-radius: 13px;
}
.supplement-edit-box .text-input {
  margin: 5px 0 9px;
}
.supplement-name .supp-edit {
  padding: 0;
  border: none;
  background: none;
  color: #9b5470;
  font: 700 11px var(--sans);
  text-decoration: underline;
  margin-top: 5px;
}
.supplement-edit-box .secondary {
  margin-right: 8px;
}
.store-empty {
  padding: 15px;
  border-radius: 13px;
  background: #fffaf6;
  color: #846f6d;
  font-size: 12px;
  border: 1px solid #ead9cd;
}
@media (max-width: 350px) {
  .store-grid {
    gap: 8px;
  }
  .store-card {
    padding: 10px;
  }
  .store-card .store-buy {
    font-size: 10.5px;
  }
}

/* Phase 4: compact tracking views, original premium theme preserved */
.topbar {
  grid-template-columns: 40px minmax(0, 1fr) 86px;
  column-gap: 3px;
}
.top-actions {
  gap: 4px;
  justify-content: flex-end;
}
.top-actions .icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid #ebd8ca;
  border-radius: 50%;
  background: #fff8f1b8;
  color: #986f66;
}
.top-actions .i {
  width: 19px;
  height: 19px;
}
.logo-box {
  overflow: hidden;
}
.brand-img {
  max-width: 100%;
  width: 236px;
}
.pw-protein-centre {
  text-align: center;
  padding: 8px 0 11px;
}
.pw-protein-centre .protein-ring {
  width: 156px;
  height: 156px;
  margin: 2px auto 10px;
  --progress-angle: 0deg;
}
.pw-protein-centre .protein-ring-inner {
  width: 127px;
  height: 127px;
}
.pw-protein-centre .protein-ring-inner strong {
  font-size: 36px;
}
.pw-protein-centre .protein-ring-inner small {
  font-size: 11px;
}
.pw-ring-caption {
  font: 600 11px/1.5 var(--sans);
  color: #8b7770;
}
.pw-meal-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 12px 0;
}
.pw-meal-tabs button {
  border: 1px solid #e1cdc3;
  background: #fff9f4;
  color: #786660;
  border-radius: 22px;
  font: 700 10px/1.4 var(--sans);
  padding: 10px 2px;
}
.pw-meal-tabs button.active {
  background: #a05d70;
  color: white;
  border-color: #a05d70;
}
.pw-details,
.pw-settings-details {
  border: 1px solid #e7d5c8;
  border-radius: 14px;
  background: #fffaf7;
  margin: 9px 0;
  overflow: hidden;
}
.pw-details summary,
.pw-settings-details summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 12px;
  font: 700 12px/1.35 var(--sans);
  color: #6b4549;
  list-style: none;
}
.pw-details summary::-webkit-details-marker,
.pw-settings-details summary::-webkit-details-marker {
  display: none;
}
.pw-details summary::after,
.pw-settings-details summary::after {
  content: "⌄";
  font-size: 18px;
  color: #ae667b;
  margin-left: auto;
}
.pw-details[open] summary::after,
.pw-settings-details[open] summary::after {
  content: "⌃";
}
.pw-details-inner {
  padding: 0 11px 12px;
}
.pw-detail-hint,
.pw-settings-details summary span {
  font: 500 10px var(--sans);
  color: #97786c;
}
.pw-settings-details summary span {
  margin-left: auto;
}
.pw-compact-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 360px;
  overflow-y: auto;
}
.pw-compact-catalog .p2-food-button {
  min-width: 0;
  min-height: 85px;
}
.pw-compact-catalog .p2-food-button strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
.pw-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px 12px;
}
.pw-detail-grid label {
  font: 700 10px/1.4 var(--sans);
  color: #786362;
}
.pw-detail-grid input {
  margin-top: 4px;
  width: 100%;
  font-size: 15px !important;
}
.pw-save-small,
.pw-inline-fields button {
  border: 1px solid #d7b5ab;
  background: #f8e6e0;
  color: #8e5366;
  padding: 11px;
  border-radius: 11px;
  font: 700 11px var(--sans);
  white-space: nowrap;
}
.pw-settings-details .pw-footnote,
.pw-details .pw-footnote {
  padding: 0 12px 9px;
}
.pw-footnote {
  font: 500 10px/1.55 var(--sans);
  color: #89776c;
  margin: 8px 1px;
}
.pw-mini-history {
  padding: 8px 12px;
  display: grid;
  gap: 5px;
}
.pw-mini-history span {
  font: 500 11px var(--sans);
  color: #876b60;
}
.pw-today-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 13px 0 7px;
}
.pw-today-heading b {
  font: 700 12px var(--sans);
  color: #5d4a47;
}
.pw-today-heading span {
  font: 600 10px var(--sans);
  color: #967f77;
}
.log-row small {
  display: block;
  font: 500 10px/1.55 var(--sans);
  color: #927c73;
}
.log-row > span {
  flex: 1;
}
.pw-simple-water {
  border: 1px solid #ded9d1;
  background: #fafaf5d9;
  border-radius: 17px;
  margin: 13px 0;
  padding: 14px 15px;
  box-shadow: var(--shadow);
}
.pw-water-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pw-water-head > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pw-water-head b {
  font: 700 15px var(--serif);
  color: #587985;
}
.pw-water-head small {
  font: 600 11px var(--sans);
  color: #7a8381;
}
.pw-water-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e8f2f1;
  color: #67949e;
}
.pw-inline {
  border: 0;
  background: transparent;
  color: #7a918d;
  padding: 7px;
}
.pw-meter {
  height: 7px;
  border-radius: 7px;
  background: #dce9e8;
  margin: 12px 0;
  overflow: hidden;
}
.pw-meter span {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: #7faba6;
}
.pw-mini-quick {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.pw-mini-quick > button,
.pw-inline-details summary {
  font: 700 11px var(--sans);
  color: #688888;
  background: #f2faf9;
  border: 1px solid #cde0df;
  border-radius: 22px;
  padding: 9px 12px;
}
.pw-inline-details summary {
  list-style: none;
  cursor: pointer;
}
.pw-inline-details summary::-webkit-details-marker {
  display: none;
}
.pw-inline-fields {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 0;
}
.pw-inline-fields input {
  flex: 1;
  min-width: 0;
  font-size: 16px !important;
}
.pw-settings-details .pw-inline-fields {
  padding: 8px 12px;
}
.pw-label {
  display: block;
  font: 700 11px/1.45 var(--sans);
  margin: 11px 0;
}
.pw-label input {
  display: block;
  width: 100%;
  margin-top: 5px;
}
.pw-history {
  margin-top: 14px;
}
.pw-history-row {
  border-top: 1px solid #eadcd0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-wrap: anywhere;
}
.pw-history-row b {
  font: 700 10px var(--sans);
  color: #96736d;
}
.pw-history-row span {
  font: 500 11px/1.55 var(--sans);
  color: #584e4d;
}
.pw-help {
  margin: 14px 0;
  scroll-margin-top: 22px;
}
.pw-help h2 {
  font: 700 21px var(--serif);
  margin: 7px 0;
}
.pw-help p {
  font: 500 11px/1.6 var(--sans);
  color: #806f67;
}
.pw-settings-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edddd0;
  background: transparent;
  color: #5c4c4b;
  padding: 13px 8px;
  font: 600 12px var(--sans);
}
.pw-settings-link .right {
  margin-left: auto;
  color: #a56479;
  font: 700 10px var(--sans);
}
.pw-reminder-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eadace;
  padding: 13px 0;
  text-align: left;
  color: #685553;
}
.pw-reminder-row > span {
  flex: 1;
  display: grid;
  gap: 4px;
}
.pw-reminder-row strong {
  font-size: 12px;
}
.pw-reminder-row small {
  font-size: 10px;
  color: #87766e;
}
.pw-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid #eadace;
  font-size: 12px;
  font-weight: 600;
}
.pw-toggle-row input {
  width: 21px;
  height: 21px;
  accent-color: #b96780;
}
.pw-reminder-settings {
  margin-top: 13px;
}
.pw-back {
  border: 0;
  background: transparent;
  color: #9c6076;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 3px 2px;
  font: 700 11px var(--sans);
}
@media (max-width: 350px) {
  .topbar {
    grid-template-columns: 34px minmax(0, 1fr) 78px;
  }
  .top-actions {
    gap: 2px;
  }
  .top-actions .icon-button {
    width: 34px;
    height: 34px;
  }
  .brand-img {
    width: 215px;
  }
  .pw-details summary {
    font-size: 11px;
  }
  .pw-detail-hint {
    font-size: 9px;
  }
  .pw-protein-centre .protein-ring {
    width: 142px;
    height: 142px;
  }
  .pw-protein-centre .protein-ring-inner {
    width: 115px;
    height: 115px;
  }
}

/* Phase 5: category-based protein catalog and consistent dated logbook */
.pw-protein-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 5px 0 11px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.pw-protein-filter .p2-filter {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}
.pw-food-group {
  margin: 11px 0 18px;
}
.pw-food-group h3 {
  font: 700 11px/1.5 var(--sans);
  letter-spacing: 0.75px;
  color: #8a7470;
  text-align: center;
  margin: 15px 0 10px;
}
.pw-food-group[hidden] {
  display: none !important;
}
.pw-food-group .p2-catalog {
  max-height: none;
  overflow: visible;
}
.pw-food-group .p2-food-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  text-align: center;
  min-height: 93px;
  padding: 10px 7px;
}
.pw-food-group .p2-food-button strong {
  font-size: 12px;
  line-height: 1.38;
  color: #604e49;
}
.pw-food-group .p2-food-button small {
  font-size: 10px;
  line-height: 1.5;
  color: #897769;
}
.pw-food-group .p2-food-button small b {
  color: #997068;
  font-size: 13px;
}
#proteinCatalog {
  max-height: 510px;
  overflow-y: auto;
  border-radius: 12px;
}
.pw-dose-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 9px 0;
}
.pw-dose-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font: 600 11px/1.4 var(--sans);
  color: #735e5c;
}
.pw-dose-fields input,
.pw-dose-fields select {
  width: 100%;
  min-width: 0;
  font-size: 14px !important;
}
.supplement-add .supplement-fields {
  display: block;
}
.supplement-add .supplement-fields > select {
  width: 100%;
  margin: 7px 0 10px;
}
.supplement-edit-box .pw-dose-fields {
  margin: 12px 0;
}
.pw-log-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.pw-log-links button {
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  background: #fff8f2;
  border: 1px solid #e7d7ca;
  border-radius: 12px;
  min-width: 0;
  min-height: 49px;
  font: 600 11px/1.45 var(--sans);
  color: #6c5151;
  padding: 10px 7px;
}
.pw-log-links button .i:last-child {
  margin-left: auto;
  width: 14px;
}
.pw-log-day {
  margin: 11px 0 15px;
  border-top: 1px solid #e8d8ce;
  padding-top: 10px;
}
.pw-log-day h3 {
  font: 700 12px var(--sans);
  color: #a56b75;
  margin: 0 0 8px;
}
.pw-log-button {
  border: 0;
  border-bottom: 1px solid #ebded4;
  background: transparent;
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 11px 3px;
  gap: 8px;
  color: #68565a;
  min-height: 45px;
}
.pw-log-button b {
  font: 700 11px/1.4 var(--sans);
  color: #7b5c58;
  min-width: 84px;
  overflow-wrap: anywhere;
}
.pw-log-button span {
  flex: 1;
  font: 500 11px/1.5 var(--sans);
  overflow-wrap: anywhere;
}
.pw-logbook-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #dbc8bc;
  border-radius: 14px;
  background: #fdf7f1;
  color: #9c5c71;
  font: 700 13px var(--sans);
  text-align: left;
}
.pw-logbook-shortcut span {
  margin-left: auto;
  color: #92786f;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}
@media (max-width: 360px) {
  .pw-dose-fields {
    grid-template-columns: 1fr;
  }
  .pw-log-links button {
    font-size: 10px;
  }
}

/* Phase 6: compact check-in history and movement enhancements */
.pw-checkin-date,
.pw-label {
  display: block;
  color: #785e58;
  font-size: 12px;
  font-weight: 700;
  margin: 12px 0;
}
.pw-checkin-date input,
.pw-label input,
.pw-label select {
  width: 100%;
  margin-top: 7px;
  min-height: 43px;
}
.pw-phase-history-row {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #f0e5dc;
}
.pw-phase-history-row .pw-log-button {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.pw-small-remove {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff6f3;
  border: 1px solid #ecd0c7;
  color: #a45a68;
  font-size: 20px;
  flex: none;
}
.pw-movement-calculator {
  background: linear-gradient(135deg, #fffaf4, #f1eee5);
}
.pw-zone-result {
  margin: 13px 0;
  padding: 15px 12px;
  background: #edf0e9;
  border: 1px solid #d7dfcf;
  border-radius: 16px;
  text-align: center;
  color: #456451;
}
.pw-zone-result small {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 800;
}
.pw-zone-result strong {
  display: block;
  font: 700 30px/1.3 var(--serif);
  color: #47664c;
  margin: 6px 0;
}
.pw-zone-result strong span {
  font: 700 13px var(--sans);
}
.pw-zone-result p {
  font-size: 12px;
  line-height: 1.55;
  margin: 6px 0;
}
.pw-movement-calculator .secondary {
  margin-top: 8px;
}
.food-tracker select.text-input {
  background: #fffaf7;
  color: var(--ink);
}
.pw-log-button {
  max-width: 100%;
}
.pw-log-button span {
  overflow-wrap: anywhere;
}

/* Phase 7 — quieter food cards, work planner and clean product photo slots */
.pw-compact-catalog .p2-food-button {
  height: auto;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  padding: 13px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pw-compact-catalog .p2-food-button strong {
  font-size: 13px;
  line-height: 1.38;
  display: block;
  white-space: normal;
  overflow: visible;
  max-width: 100%;
}
.pw-compact-catalog .p2-food-button .pw-food-serving {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
  color: #705a52;
}
.pw-compact-catalog .p2-food-button .pw-food-serving b {
  font-size: 13px;
  color: #9e5f43;
}
.pw-compact-catalog .pw-food-explain {
  display: block;
  font: 500 11px/1.55 var(--sans);
  color: #82746c;
  overflow-wrap: anywhere;
}
.pw-work-intro {
  background: linear-gradient(145deg, #fff6f0, #f8e9e0);
  border: 1px solid #ead7cc;
  border-radius: 24px;
  padding: 22px 19px;
  margin: 12px 0 16px;
}
.pw-work-eye {
  font: 800 10px/1.5 var(--sans);
  letter-spacing: 1.6px;
  color: #956478;
}
.pw-work-intro h2,
.pw-work-head h2 {
  font: 400 28px/1.25 var(--serif);
  margin: 9px 0;
  color: #4b3b37;
}
.pw-work-intro p {
  font: 500 13px/1.75 var(--sans);
  color: #665a55;
  margin: 10px 0;
}
.pw-work-add {
  padding: 18px;
  margin-bottom: 18px;
}
.pw-work-add .pw-label {
  margin-top: 10px;
}
.pw-work-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.pw-work-fields .text-input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  padding: 11px 9px;
}
.pw-work-head {
  margin: 13px 0 16px;
}
.pw-work-head p {
  font: 500 12px/1.65 var(--sans);
  color: #82716b;
}
.pw-work-group {
  background: #fffaf5;
  border: 1px solid #ebdbd0;
  box-shadow: 0 4px 14px #946f5b10;
  border-radius: 23px;
  padding: 16px 14px;
  margin: 12px 0;
}
.pw-work-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pw-work-group-heading small {
  font: 400 22px var(--serif);
  color: #b2a7a0;
}
.pw-work-group-chip {
  border-radius: 99px;
  font: 800 11px var(--sans);
  letter-spacing: 0.8px;
  padding: 8px 12px;
  color: #8e5966;
  background: #f5e3e6;
}
.pw-work-chip-1 {
  background: #f1e9e4;
  color: #856559;
}
.pw-work-chip-2 {
  background: #e7f0e5;
  color: #647961;
}
.pw-work-chip-3 {
  background: #f3e9dd;
  color: #836957;
}
.pw-work-group > p {
  font: 500 12px/1.5 var(--sans);
  color: #81736d;
  margin: 10px 0 11px;
}
.pw-work-task {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: start;
  border-top: 1px solid #efe4dd;
  padding: 14px 0 8px;
}
.pw-work-check {
  background: #e8eee5;
  color: #66816c;
  border: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 21px;
}
.pw-work-task-body strong {
  display: block;
  font: 700 13px/1.45 var(--sans);
  overflow-wrap: anywhere;
}
.pw-work-task-body small {
  display: block;
  font: 600 10px/1.6 var(--sans);
  color: #987b71;
  margin-top: 5px;
}
.pw-work-task-body p {
  font: 500 11px/1.58 var(--sans);
  color: #7d706a;
  margin: 7px 0 0;
}
.pw-work-complete {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #eee2db;
  padding: 10px 0;
  font-size: 12px;
  color: #817a70;
}
.pw-work-complete span {
  flex: 1;
  text-decoration: line-through;
}
.pw-work-complete button {
  border: 0;
  background: #eef1e9;
  border-radius: 50%;
  width: 28px;
  height: 28px;
}
.pw-product-art {
  background: #fff !important;
  border: 1px solid #eae4de !important;
  border-radius: 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 115px;
}
.pw-store-product-photo {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  display: block;
  margin: auto;
}
.pw-store-illustration {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: #fff6ee;
  border: 1px solid #f0ded1;
  border-radius: 20px;
  font-size: 30px;
  box-shadow: 0 3px 9px #b59a8320;
}
@media (max-width: 350px) {
  .pw-work-fields {
    grid-template-columns: 1fr;
  }
  .pw-work-group {
    padding: 14px 11px;
  }
  .pw-compact-catalog .p2-food-button {
    padding: 11px 9px;
  }
  .pw-compact-catalog .p2-food-button strong {
    font-size: 12px;
  }
}

/* Phase 8: comfortably sized tap targets; visual icon size unchanged */
.topbar {
  grid-template-columns: 44px minmax(0, 1fr) 92px !important;
  column-gap: 2px;
}
.topbar .icon-button,
.top-actions .icon-button {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}
.top-actions {
  gap: 2px !important;
}
.cycle-next {
  width: 44px !important;
  height: 44px !important;
  top: 4px;
  right: 4px;
}
.pw-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  font: 500 12px/1.6 var(--sans);
  padding: 9px 0;
  text-align: left;
}
.pw-consent input {
  width: 19px !important;
  height: 19px !important;
  flex: none;
  accent-color: #b96780;
  margin-top: 2px;
}
.pw-consent a {
  color: #994b6b;
}
@media (max-width: 350px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) 92px !important;
  }
  .topbar .brand-img {
    width: 195px;
  }
}

/* Phase 9: compact wellness PDF report selector */
.pw-report-card {
  margin: 14px 0;
  border: 1px solid #e5d0c8;
  background: linear-gradient(145deg, #fffaf6, #f7eae5);
}
.pw-report-card h2 {
  font: 700 23px/1.25 var(--serif);
  margin: 8px 0;
  color: #73445b;
}
.pw-report-card p {
  font: 500 12px/1.6 var(--sans);
  color: #765f61;
  margin: 7px 0 12px;
}
.pw-report-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
}
.pw-report-controls label {
  flex: 1;
  min-width: 130px;
  color: #725d5b;
  font: 700 11px var(--sans);
}
.pw-report-controls select {
  margin-top: 5px;
  min-height: 44px;
  width: 100%;
}
.pw-report-controls .primary {
  font-size: 12px;
  padding: 13px 16px;
  min-height: 44px;
  max-width: 100%;
}
.pw-product-art {
  background: #fff !important;
  min-height: 128px;
  height: auto !important;
  padding: 7px;
}
.pw-store-product-photo {
  width: 100%;
  height: 114px;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 350px) {
  .pw-report-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .pw-report-controls label {
    width: 100%;
  }
}
.store-card .pw-store-product-photo[hidden] {
  display: none !important;
}
.store-card .pw-photo-unavailable:after {
  content: "Photo unavailable";
  font: 600 10px var(--sans);
  color: #967f79;
}
.store-card .pw-product-art {
  background: #fff !important;
}
/* Phase 11: mobile date inputs must not overflow their parent on iOS. */
.pw-checkin-date,
.pw-date-field {
  min-width: 0;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
.pw-checkin-date input[type="date"],
.pw-date-field input[type="date"],
.pw-label input[type="date"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.35;
  -webkit-appearance: auto;
  appearance: auto;
}
.card,
.phia-feature,
.food-tracker,
.pw-simple-water {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pw-date-panel {
  padding: 13px 15px;
  margin: 12px 0 14px;
  border: 1px solid #e8d5ca;
  background: #fff9f4;
  border-radius: 15px;
}
.pw-date-panel label {
  font: 700 12px/1.5 var(--sans);
  color: #755a59;
}
.pw-date-panel .pw-date-note {
  margin: 7px 0 0;
  font: 500 11px/1.5 var(--sans);
  color: #947b73;
}
.pw-symptom-date {
  margin-bottom: 14px;
}

/* Phase 12 — iOS field-sizing, aligned forms, compact browse, accessible dialogs */
#view,
#view > *,
.food-tracker,
.card,
.answer-card,
.phia-feature,
.pw-date-panel,
.pw-work-add {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pw-checkin-date,
.pw-date-field,
.pw-label,
.pw-work-fields > label,
.pw-detail-grid > label,
.input-grid > label,
.well-form > label {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: block;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
#view input:not([type="checkbox"]):not([type="radio"]),
#view select,
#view textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
#view input[type="date"],
#view input[type="time"] {
  display: block;
  box-sizing: border-box;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 9px 10px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: #fffaf7;
}
#view input[type="date"]::-webkit-date-and-time-value,
#view input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
#view input[type="date"]::-webkit-datetime-edit,
#view input[type="time"]::-webkit-datetime-edit {
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
#view input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  max-width: 20px;
  flex: none;
}
.pw-detail-grid,
.pw-work-fields,
.input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 12px;
  row-gap: 9px;
  max-width: 100%;
  min-width: 0;
}
.pw-detail-grid {
  padding: 8px 0 11px;
}
.pw-detail-grid > label,
.pw-work-fields > label {
  margin: 0;
  align-self: start;
  font-size: 11px;
  line-height: 1.4;
}
.pw-detail-grid .text-input,
.pw-work-fields .text-input {
  width: 100%;
  margin-top: 8px;
  min-height: 46px !important;
  height: 46px;
  line-height: 1.3;
  font-size: 15px !important;
  padding: 9px 10px !important;
  border-radius: 12px;
}
.pw-work-fields {
  margin: 12px 0 16px;
}
.pw-work-add .pw-label {
  margin: 0;
}
.pw-work-add > .pw-label {
  margin: 12px 0 16px;
}
.pw-work-fields > * {
  min-width: 0;
}
.pw-work-add .pw-footnote {
  margin-top: 10px;
}
.pw-date-panel .text-input,
.pw-checkin-date .text-input {
  height: 46px !important;
}
@media (max-width: 359px) {
  .pw-work-fields,
  .pw-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pw-work-fields .text-input,
  .pw-detail-grid .text-input {
    font-size: 14px !important;
    padding-inline: 7px !important;
  }
}
.pw-carry-info {
  margin: 12px 0;
  background: #f1eee5;
  border: 1px solid #dcd7ca;
  padding: 12px 13px;
  border-radius: 13px;
  font: 600 12px/1.6 var(--sans);
  color: #65756a;
}
.pw-task-overdue {
  color: #b04e69;
  font-weight: 800;
}
.pw-task-carry {
  color: #61796a;
  font-weight: 800;
}
.store-advisor-top {
  margin: 12px 0 16px;
}
.store-advisor-top button {
  min-height: 46px;
}
.store-group {
  border: 1px solid #e6d5c9;
  background: #fffaf6;
  border-radius: 17px;
  padding: 0;
  margin: 11px 0;
  overflow: hidden;
}
.store-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 15px 14px;
  min-height: 54px;
  font: 700 15px/1.4 var(--serif);
  color: #684c53;
}
.store-group > summary::-webkit-details-marker {
  display: none;
}
.store-group > summary:after {
  content: "⌄";
  font: 700 22px var(--sans);
  color: #a76d7b;
}
.store-group[open] > summary:after {
  content: "⌃";
}
.store-group .store-grid {
  padding: 2px 12px 13px;
}
[data-store-item="organic-psyllium-husk"] .pw-store-product-photo,
[data-store-item="muesli-very-berries"] .pw-store-product-photo {
  mix-blend-mode: multiply;
}
.store-card .store-buy.amway {
  background: #172d49 !important;
}
.store-card .store-buy.food {
  background: #6e8979 !important;
}
.store-card .store-buy.nonfood {
  background: #914f63 !important;
}
.store-group .store-heading {
  display: none;
}
.store-controls .store-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.store-controls .store-filters .store-filter {
  flex: none;
  white-space: nowrap;
}
.pw-food-select-wrap {
  position: relative;
  min-width: 0;
  min-height: 100px;
}
.pw-food-select-wrap > .p2-food-button {
  width: 100%;
  height: 100%;
  padding-right: 24px;
}
.pw-food-more {
  position: absolute;
  right: 5px;
  top: 5px;
  border: none;
  background: #fff9f4;
  border-radius: 50%;
  min-width: 30px;
  min-height: 30px;
  padding: 3px;
  font: 800 18px var(--sans);
  color: #9b6776;
  box-shadow: 0 0 0 1px #ead7cf;
  z-index: 1;
}
.pw-protein-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #1e233d95;
  display: grid;
  place-items: center;
  padding: 18px;
  backdrop-filter: blur(4px);
}
.pw-protein-modal {
  width: min(460px, 100%);
  max-height: min(80dvh, 650px);
  overflow-y: auto;
  background: #fffcf8;
  border: 1px solid #ead7d0;
  border-radius: 24px;
  box-shadow: 0 24px 75px #2b243455;
  padding: 22px 21px;
  color: #624b50;
}
.pw-protein-modal-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.pw-protein-modal h2 {
  font: 700 24px/1.3 var(--serif);
  margin: 0;
}
.pw-protein-modal .pw-modal-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #f6ece6;
  border: 0;
  font-size: 25px;
  color: #795c63;
}
.pw-protein-modal p {
  font: 500 12px/1.55 var(--sans);
  color: #846e6b;
}
.pw-protein-serving {
  display: flex;
  gap: 9px;
  align-items: start;
  background: #f3f7f5;
  border: 1px solid #d9e3e1;
  border-radius: 13px;
  padding: 12px;
  margin: 12px 0;
}
.pw-protein-serving b {
  font: 700 13px var(--sans);
}
.pw-protein-serving small {
  display: block;
  color: #647c75;
  margin-top: 4px;
}
.pw-protein-modal label {
  display: block;
  font: 700 12px var(--sans);
  margin-top: 11px;
}
.pw-protein-modal input {
  width: 100%;
  min-height: 48px;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid #dfcfc9;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
.pw-protein-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 19px;
}
.pw-protein-modal-actions button {
  min-height: 46px;
  padding: 11px 21px;
  border: 0;
  border-radius: 25px;
  font: 800 13px var(--sans);
}
.pw-protein-modal-actions .cancel {
  background: #f1f5f5;
  color: #526571;
}
.pw-protein-modal-actions .add {
  background: #aa617c;
  color: white;
}

/* Phase 13 — Amway catalog photos & owner-supplied reference pricing */
.store-card .pw-store-reference {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 1px 0 3px;
  padding: 7px 8px;
  border: 1px solid #ebdfd5;
  border-radius: 10px;
  background: #fff;
  font: 600 10.2px/1.45 var(--sans);
  color: #6f4d51;
}
.store-card .pw-store-reference span:nth-child(2) {
  color: #172d49;
  font-weight: 800;
}
.store-card .pw-store-reference .pw-abo-ref {
  color: #80726f;
  font-size: 9.8px;
}
.store-card .pw-store-product-photo {
  height: 124px;
  max-height: 124px;
  object-fit: contain;
  width: 100%;
}
.store-card .store-art.pw-product-art {
  height: 132px;
  min-height: 132px;
  background: #fff;
}
@media (max-width: 350px) {
  .store-card .pw-store-reference {
    font-size: 9.4px;
    padding: 6px;
  }
  .store-card .pw-store-product-photo {
    height: 105px;
    max-height: 105px;
  }
  .store-card .store-art.pw-product-art {
    height: 116px;
    min-height: 116px;
  }
}

/* Phase 15 — protein UX & validated affiliate catalogue */
.pw-quick-preview {
  border: 1px solid #e7d5c8;
  border-radius: 14px;
  background: #fffaf7;
  margin: 9px 0;
  padding: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pw-featured-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #6b4549;
  font: 750 13px/1.4 var(--sans);
}
.pw-featured-title span {
  font: 500 10px var(--sans);
  color: #96786b;
}
.pw-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.pw-featured-food {
  min-width: 0;
}
.pw-featured-main {
  display: flex;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 83px;
  text-align: left;
  padding: 9px 8px;
  background: #fff;
  border: 1px solid #e6d6ca;
  border-radius: 13px;
  color: #604b4b;
  min-width: 0;
}
.pw-feature-icon {
  font-size: 25px;
  flex: 0 0 29px;
  line-height: 1;
}
.pw-feature-info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.pw-feature-info b {
  font: 750 11px/1.35 var(--sans);
  overflow-wrap: anywhere;
}
.pw-feature-info strong {
  font: 750 11px/1.3 var(--sans);
  color: #a25e48;
}
.pw-feature-info small {
  font: 500 10px/1.3 var(--sans);
  color: #846e68;
  overflow-wrap: anywhere;
}
.pw-feature-plus {
  background: #f7e6ec;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  color: #aa627b;
  font: 700 20px var(--sans);
}
.pw-featured-main:focus-visible {
  outline: 3px solid #c97d99;
  outline-offset: 2px;
}
.pw-food-directory summary {
  font-size: 12px;
}
.pw-compact-catalog .pw-food-select-wrap > .p2-food-button {
  min-height: 83px;
  padding: 11px 31px 11px 9px;
  gap: 6px;
}
.pw-compact-catalog .pw-food-select-wrap > .p2-food-button strong {
  font-size: 11.5px;
}
.pw-compact-catalog .pw-food-select-wrap .pw-food-serving {
  font-size: 10px;
}
.pw-compact-catalog .pw-food-select-wrap .pw-food-serving b {
  font-size: 11.5px;
}
.pw-compact-catalog .pw-food-select-wrap .pw-food-explain {
  display: none !important;
}
.pw-food-more {
  width: 32px;
  height: 32px;
  top: 6px;
  right: 5px;
  min-height: 32px;
  min-width: 32px;
}
.pw-protein-modal-overlay {
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: center;
  justify-items: center;
  padding: 14px;
  min-height: 0;
  inset: 0;
}
.pw-protein-modal {
  box-sizing: border-box;
  width: min(460px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 17px;
  border-radius: 22px;
}
.pw-protein-modal-title {
  align-items: flex-start;
}
.pw-protein-modal-title h2 {
  font-size: 23px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pw-protein-modal-desc {
  margin: 10px 0 9px;
}
.pw-protein-modal .pw-protein-serving {
  display: block;
  padding: 12px 13px;
  min-height: 0;
  margin: 9px 0 13px;
  background: #fff9f6;
  border-color: #eadbd5;
}
.pw-protein-modal .pw-protein-serving small {
  margin-top: 5px;
}
.pw-protein-modal label {
  margin: 7px 0 0;
}
.pw-protein-modal input[type="number"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 49px;
  min-height: 49px;
  font-size: 16px;
  margin: 7px 0 0;
  outline-offset: 1px;
}
.pw-protein-modal-context {
  font-size: 11px !important;
  margin: 11px 0;
  color: #8e7770;
}
.pw-protein-modal-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
  margin-top: 14px;
  justify-content: stretch;
}
.pw-protein-modal-actions button {
  min-width: 0;
  width: 100%;
  padding: 12px 5px;
  font-size: 12.5px;
}
.pw-store-price-prompt {
  display: block;
  font: 700 10px/1.45 var(--sans);
  color: #795f58;
  background: #f7efeb;
  border-radius: 8px;
  padding: 6px 8px;
}
@media (max-width: 359px) {
  .pw-featured-grid {
    gap: 6px;
  }
  .pw-featured-main {
    padding: 7px 6px;
    min-height: 81px;
    gap: 5px;
  }
  .pw-feature-icon {
    flex-basis: 24px;
    font-size: 22px;
  }
  .pw-feature-info b {
    font-size: 10.5px;
  }
  .pw-feature-info small {
    font-size: 9.5px;
  }
  .pw-feature-plus {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }
}
@media (max-height: 620px) {
  .pw-protein-modal-overlay {
    align-items: start;
  }
  .pw-protein-modal {
    margin: 0 auto;
    max-height: calc(100dvh - 20px);
  }
}

/* PHASE 20 · compact protein photo cards, safe editing and calm merchandising */
.pw-feature-icon {
  width: 53px;
  height: 56px;
  flex: 0 0 53px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f6eee7;
  font-size: 24px;
}
.pw-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pw-featured-main {
  padding: 7px;
  min-height: 83px;
  gap: 6px;
}
.pw-feature-info b {
  font-size: 10.6px;
}
.pw-feature-info strong {
  font-size: 10.4px;
}
.pw-feature-info small {
  font-size: 9.6px;
}
.pw-food-tiny-photo {
  display: inline-flex;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  overflow: hidden;
  background: #faf1e9;
  margin-right: 4px;
  flex: none;
}
.pw-food-tiny-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-compact-catalog .p2-food-button strong {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pw-modal-food-thumb {
  display: inline-flex;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  overflow: hidden;
  font: 400 27px var(--sans);
}
.pw-modal-food-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-protein-undo {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f8ebee;
  border: 1px solid #e9cbd3;
  border-radius: 12px;
  padding: 9px 10px;
  margin: 9px 0;
  color: #6c3b50;
  font-size: 10.5px;
  line-height: 1.5;
}
.pw-protein-undo span {
  flex: 1;
  min-width: 0;
}
.pw-protein-undo button {
  border: 0;
  background: #fffaf8;
  color: #914b66;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}
.pw-protein-undo button:last-child {
  padding: 7px;
  background: transparent;
  font-size: 17px;
}
.pw-protein-log-row {
  gap: 6px;
  min-width: 0;
}
.pw-protein-log-row > span {
  min-width: 0;
  flex: 1;
}
.pw-protein-log-row strong {
  overflow-wrap: anywhere;
}
.pw-protein-log-row .pw-log-edit {
  background: #faebef;
  color: #89475d;
  border-radius: 7px;
  border: 1px solid #edd4dc;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.pw-protein-log-row .pw-log-remove {
  background: transparent;
  color: #954c5e;
  min-height: 32px;
  min-width: 28px;
  padding: 5px;
  font-size: 19px;
  flex: none;
}
.pw-protein-modal .text-input {
  display: block;
  width: 100%;
  margin: 6px 0 11px;
  min-height: 46px;
}
.pw-protein-modal label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 9px;
}
.pw-edit-delete {
  display: block;
  border: 0;
  background: transparent;
  color: #a63248;
  text-decoration: underline;
  padding: 7px 3px;
  margin: 6px auto 12px;
  font-size: 11px;
}
.pw-supp-more {
  margin-top: 10px;
}
.pw-supp-more summary {
  font-size: 12px;
}
.pw-pro-help {
  border: 1px solid #e5cbd1;
  border-radius: 16px;
  background: #fff6f4;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.pw-pro-help div {
  min-width: 0;
  flex: 1;
}
.pw-pro-help-kicker {
  font: 800 9px var(--sans);
  letter-spacing: 1px;
  color: #a65d70;
}
.pw-pro-help h3 {
  font: 700 19px var(--serif);
  color: #61384a;
  margin: 5px 0;
}
.pw-pro-help p {
  font: 500 10.5px/1.55 var(--sans);
  color: #806c70;
  margin: 0;
}
.pw-pro-help button {
  background: #a65e7d;
  color: #fff;
  border: 0;
  border-radius: 25px;
  padding: 12px 9px;
  font: 700 10.5px/1.35 var(--sans);
  min-height: 45px;
  flex: 0 0 38%;
}
.pw-insight-consent {
  margin: 13px 0;
  padding: 14px;
}
.pw-insight-consent p {
  font-size: 11.5px;
  line-height: 1.6;
  color: #766860;
}
.pw-consent-toggle {
  border: 1px solid #cbb6ad;
  background: #fffaf6;
  color: #6a4a4b;
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 750;
}
.store-card {
  background: #fffaf5;
  border-color: #e8d8cb;
  padding: 9px;
  gap: 6px;
}
.store-card .store-art.pw-product-art {
  background: #f5ece2 !important;
  border-color: #efe0d4 !important;
  height: 151px;
  min-height: 151px;
  padding: 8px;
}
.store-card .pw-store-product-photo {
  max-width: 100%;
  max-height: 131px;
  height: 131px;
  object-fit: contain;
  object-position: center;
}
.store-card .store-category {
  font-size: 9px;
}
.store-card strong {
  font-size: 11px;
  line-height: 1.4;
}
.store-card .pw-store-reference {
  padding: 6px;
  font-size: 10px;
  background: #fff8f1;
}
.store-card small {
  font-size: 10px;
}
.store-card .store-buy {
  min-height: 43px;
  border-radius: 22px;
  font-size: 10.5px;
}
@media (max-width: 359px) {
  .pw-feature-icon {
    width: 43px;
    flex-basis: 43px;
    height: 49px;
  }
  .pw-pro-help {
    flex-wrap: wrap;
  }
  .pw-pro-help button {
    flex: 1 1 100%;
  }
  .store-card .store-art.pw-product-art {
    height: 125px;
    min-height: 125px;
  }
  .store-card .pw-store-product-photo {
    height: 108px;
    max-height: 108px;
  }
}

.pw-store-featured {
  margin: 13px 0 17px;
  padding: 12px;
  border: 1px solid #ead9cc;
  border-radius: 16px;
  background: #fffbf6;
}
.pw-store-featured h3 {
  font: 700 20px var(--serif);
  margin: 3px 1px 11px;
  color: #543e43;
}
.pw-store-featured .store-grid {
  gap: 9px;
}
.pw-store-featured[hidden] {
  display: none !important;
}
.pw-store-featured .pw-footnote {
  padding: 0 3px;
  margin: 12px 0 0;
}
.pw-store-intro {
  border: 1px solid #efddd1;
  background: #fffaf6;
  border-radius: 12px;
  padding: 11px 13px;
  font: 500 11.5px/1.6 var(--sans);
  color: #786963;
  margin: 8px 0 12px;
}

/* Bloomsy Phase 21 — approved logo + minimal premium interface; no tracker logic removed */
:root {
  --paper: #fdf8f2;
  --paper-2: #fffaf5;
  --rose: #c78092;
  --sage: #7a8f7a;
  --ink: #4b3242;
  --muted: #816d70;
  --line: #ebd6c9;
  --shadow: 0 8px 26px rgba(92, 63, 74, 0.075);
}
body {
  background: #efe7de;
}
.phone {
  background: linear-gradient(160deg, #fefaf6, #fcf4ed 48%, #fdf8f3);
}
.brand-img {
  width: 204px !important;
  height: 82px !important;
  object-fit: contain;
}
.topbar {
  height: 99px;
}
.auth-logo {
  width: 260px;
  max-width: 95%;
  max-height: 176px;
  object-fit: contain;
}
.splash-logo {
  max-height: 170px;
  object-fit: contain;
}
.demo-ribbon[hidden] {
  display: none !important;
}
.store-card {
  border-radius: 18px !important;
  padding: 10px !important;
  gap: 6px !important;
  background: rgba(255, 252, 249, 0.92) !important;
  box-shadow: 0 4px 16px rgba(91, 65, 59, 0.04);
}
.store-card .store-art.pw-product-art {
  height: 167px;
  min-height: 167px;
  background: linear-gradient(143deg, #f3e7db, #fbf3e9 64%, #ecdbd0) !important;
  border: 1px solid #efdfd2 !important;
  border-radius: 13px !important;
  padding: 9px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.store-card .pw-store-product-photo {
  height: 147px !important;
  max-height: 147px !important;
  max-width: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
.store-card strong {
  font: 700 12px/1.35 var(--serif) !important;
  color: #572e43 !important;
}
.store-card .store-category {
  letter-spacing: 0.05em !important;
  color: #7a8c7b !important;
}
.store-card small {
  font-size: 9px !important;
  color: #7f7370;
}
.store-card .store-buy {
  min-height: 42px !important;
  border-radius: 22px !important;
  background: #f6e5e2 !important;
  border: 1px solid #eed5d2 !important;
  color: #6a2c48 !important;
  font-weight: 750 !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-store-item="organic-psyllium-husk"] .pw-store-product-photo,
[data-store-item="muesli-very-berries"] .pw-store-product-photo {
  mix-blend-mode: multiply;
}
.store-card .store-buy.amway {
  background: #e5ece3 !important;
  border-color: #d7e3d4 !important;
  color: #365945 !important;
}
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.store-group,
.pw-store-featured {
  background: rgba(255, 252, 247, 0.86) !important;
  border-color: #eddace !important;
  border-radius: 19px !important;
}
.pw-store-featured h3 {
  font: 700 22px/1.15 var(--serif) !important;
  color: #562c46;
}
.pw-product-art .pw-store-illustration {
  font-size: 33px !important;
}
.store-empty {
  color: #796c6b;
}
/* Keep compact 2-column food cards and real uploaded packaging images */
.pw-food-tiny-photo {
  height: 43px !important;
  width: 43px !important;
  min-width: 43px !important;
  border-radius: 9px !important;
  background: #f4eadf !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.pw-food-tiny-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-compact-catalog .pw-food-select-wrap > .p2-food-button {
  min-height: 91px;
  padding-right: 32px !important;
  overflow: hidden;
}
.pw-compact-catalog .p2-food-button strong {
  font-size: 11px !important;
}
.pw-feature-icon {
  width: 51px !important;
  height: 55px !important;
  flex-basis: 51px !important;
}
/* Reminder settings — no fake push integration */
.bloomsy-reminder-intro {
  padding: 11px 14px;
  border: 1px solid #e8d4ca;
  background: #fdf4f0;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.6;
  color: #80636d;
  margin: 10px 0 14px;
}
.bloomsy-reminder-card {
  border: 1px solid #ead5c9;
  background: #fffaf7;
  border-radius: 16px;
  padding: 14px 13px;
  margin: 10px 0;
  box-shadow: 0 3px 12px #92715d10;
}
.bloomsy-reminder-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.bloomsy-reminder-ico {
  height: 43px;
  width: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3e4e5;
  color: #a65f77;
  font-size: 24px;
  flex: none;
}
.bloomsy-reminder-ico.sage {
  background: #e9eee5;
  color: #647c64;
}
.bloomsy-reminder-name {
  flex: 1;
  min-width: 0;
}
.bloomsy-reminder-name strong {
  font: 700 18px var(--serif);
  color: #592d44;
  display: block;
}
.bloomsy-reminder-name small {
  display: block;
  color: #83716d;
  font: 500 10px/1.4 var(--sans);
}
.bloomsy-reminder-switch {
  width: 20px;
  height: 20px;
  accent-color: #ab627e;
  flex: none;
}
.bloomsy-reminder-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 11px 0 2px;
}
.bloomsy-reminder-fields label {
  font: 700 10px var(--sans);
  color: #7d6467;
}
.bloomsy-reminder-fields input,
.bloomsy-reminder-fields select {
  margin-top: 5px;
  width: 100%;
  min-height: 43px;
  font-size: 13px !important;
  border: 1px solid #e5d5c9;
  background: white;
  border-radius: 10px;
  padding: 9px;
  color: #593c45;
  min-width: 0;
}
.bloomsy-work-task {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  border-top: 1px solid #edddd4;
  padding: 9px 0;
}
.bloomsy-work-task input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #ae667d;
}
.bloomsy-work-task .task-label {
  font-weight: 650;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.bloomsy-work-task input[type="datetime-local"] {
  font-size: 13px;
  width: 100%;
  margin-top: 6px;
  min-height: 43px;
  border-radius: 9px;
  border: 1px solid #e5d5c9;
  padding: 7px;
  box-sizing: border-box;
}
.bloomsy-calendar-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.bloomsy-calendar-actions button {
  flex: 1;
  min-width: 120px;
  border: 1px solid #dfc3c7;
  background: #fff8f5;
  border-radius: 12px;
  color: #853e5a;
  font-weight: 650;
  font-size: 10px;
  min-height: 40px;
  padding: 8px;
}
.bloomsy-reminders .primary {
  width: 100%;
}
.bloomsy-task-hint {
  font-size: 10px;
  color: #7c746f;
  line-height: 1.5;
  margin: 9px 0;
}
@media (max-width: 360px) {
  .brand-img {
    width: 178px !important;
  }
  .store-card .store-art.pw-product-art {
    height: 132px;
    min-height: 132px;
  }
  .store-card .pw-store-product-photo {
    height: 112px !important;
    max-height: 112px !important;
  }
  .bloomsy-reminder-fields {
    grid-template-columns: 1fr 1fr;
  }
  .bloomsy-reminder-name strong {
    font-size: 16px;
  }
}

/* BLOOMSY REPAIR · 2026-10-15 · photographic food cards and accessible layout */
.pw-feature-icon,
.pw-food-tiny-photo,
.pw-modal-food-thumb {
  background: #f5e8dc !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ead6c4;
}
.pw-feature-icon img,
.pw-food-tiny-photo img,
.pw-modal-food-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #f3e7db !important;
}
.pw-feature-icon {
  width: 66px !important;
  height: 70px !important;
  flex: 0 0 66px !important;
}
.pw-featured-main {
  min-height: 108px !important;
  padding: 9px !important;
  gap: 9px !important;
  display: flex;
  align-items: center;
}
.pw-feature-info {
  min-width: 0;
  flex: 1;
}
.pw-feature-info b {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.pw-feature-info strong {
  font-size: 11.5px !important;
}
.pw-feature-info small {
  font-size: 10px !important;
}
.pw-feature-plus {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.pw-compact-catalog .pw-food-select-wrap > .p2-food-button {
  min-height: 104px !important;
  overflow: hidden;
  padding: 9px 34px 10px 8px !important;
  gap: 7px !important;
}
.pw-food-tiny-photo {
  width: 59px !important;
  height: 60px !important;
  min-width: 59px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-compact-catalog .p2-food-button strong {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.pw-compact-catalog .pw-food-serving {
  font-size: 10px !important;
  line-height: 1.55 !important;
}
.pw-food-group {
  padding-bottom: 12px;
}
.supp-counter {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
.supp-counter strong {
  font-size: 26px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.supp-counter small {
  display: block;
  max-width: 78px !important;
  font-size: 8px !important;
  font-weight: 750;
  line-height: 1.22 !important;
  margin: 6px auto 0 !important;
  letter-spacing: 0.15px !important;
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
}
.supp-hero {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  min-width: 0;
}
.supp-hero > div:first-child {
  flex: 1;
  min-width: 0;
}
.supp-hero h2 {
  overflow-wrap: break-word;
}
.counter-break {
  display: block;
}
.pw-store-product-photo {
  background: transparent !important;
  mix-blend-mode: multiply;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100%;
}
.store-card .store-art.pw-product-art {
  background: #f1e3d7 !important;
  background-image: none !important;
  border-color: #ead7c6 !important;
  height: 191px !important;
  min-height: 191px !important;
  padding: 7px !important;
}
.store-card .pw-store-product-photo {
  height: 176px !important;
  max-height: 176px !important;
  filter: contrast(1.02);
}
.store-card .store-art.pw-product-art:has(.pw-photo-unavailable) {
  background: #f1e3d7 !important;
}
.store-card .pw-store-reference {
  background: #fdf8f1 !important;
  border: 1px solid #e7d4c5;
  padding: 7px 8px;
  display: grid;
  gap: 3px;
  border-radius: 11px;
}
.store-card .store-price-line {
  display: block !important;
  color: #5e4e49 !important;
  font-size: 10.5px;
  line-height: 1.4;
}
.store-card .store-price-line:first-of-type {
  font-weight: 700;
  color: #5e384e !important;
}
.store-card .store-buy {
  margin-top: auto;
}
.store-card {
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
}
.store-card .pw-store-price-prompt {
  font-size: 10px;
}
.help-highlight {
  outline: 3px solid #c67d91;
  outline-offset: 6px;
  transition: outline-color 0.5s;
}
.sleep-hero-refined {
  min-height: 204px !important;
  position: relative;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  border-radius: 19px;
  border: 1px solid #bba5b7;
  background: radial-gradient(
    circle at 74% 20%,
    #8c829f 0,
    #60516e 28%,
    #40364c 60%,
    #302e49 100%
  ) !important;
  padding: 25px 19px;
  color: #fff;
}
.sleep-hero-refined .sleep-copy {
  position: relative;
  z-index: 2;
  max-width: 220px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: start;
}
.sleep-hero-refined .sleep-copy strong {
  font: 400 29px/1.1 var(--serif);
  color: #fff !important;
  letter-spacing: 0.1px;
}
.sleep-hero-refined .sleep-copy span {
  color: #f6ebef !important;
  font-size: 11px;
  line-height: 1.5;
}
.sleep-hero-refined .sleep-eyebrow {
  letter-spacing: 1.5px;
  font-weight: 750;
  font-size: 9px !important;
  color: #efcfbb !important;
}
.sleep-hero-refined .sleep-moon {
  position: absolute;
  right: 34px;
  top: 5px;
  font-size: 97px !important;
  color: #f6e3b8 !important;
  text-shadow: 0 0 24px #feeec178;
  transform: rotate(-19deg);
  z-index: 1;
}
.sleep-hero-refined .sleep-sparkles {
  position: absolute;
  right: 29px;
  top: 27px;
  color: #fff1d3;
  font-size: 22px;
  opacity: 0.8;
  letter-spacing: 15px;
  z-index: 1;
}
.sleep-hero-refined .sleep-hills {
  position: absolute;
  left: -11%;
  right: -11%;
  bottom: -50px;
  height: 104px;
  opacity: 0.4;
  background: linear-gradient(20deg, #a492a3, #80677f);
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
}
.pw-work-flow {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.pw-work-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
  background: #fff8f2ad;
  border: 1px solid #e9dacf;
  padding: 9px 11px;
}
.pw-work-step b {
  font-size: 9px;
  color: #a35f76;
  min-width: 42px;
  letter-spacing: 0.5px;
  padding-top: 2px;
}
.pw-work-step span {
  font-size: 11px;
  line-height: 1.5;
  color: #63535a;
}
@media (max-width: 390px) {
  .pw-feature-icon {
    width: 50px !important;
    height: 55px !important;
    flex-basis: 50px !important;
  }
  .pw-featured-main {
    padding: 7px !important;
    gap: 5px !important;
  }
  .pw-feature-info b {
    font-size: 11px !important;
  }
  .pw-feature-plus {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
  .pw-food-tiny-photo {
    width: 45px !important;
    min-width: 45px !important;
    height: 49px !important;
  }
  .supp-counter {
    min-width: 88px;
    width: 88px !important;
    height: 88px !important;
  }
  .supp-counter strong {
    font-size: 23px !important;
  }
  .supp-counter small {
    font-size: 7.5px !important;
  }
  .store-card .store-art.pw-product-art {
    height: 162px !important;
    min-height: 162px !important;
  }
  .store-card .pw-store-product-photo {
    height: 148px !important;
    max-height: 148px !important;
  }
}

/* Phase 22 mobile usability: preserve full thumbnails and readable product names */
.pw-featured-main {
  position: relative !important;
  padding: 10px 10px !important;
  align-items: center;
  min-width: 0;
  gap: 8px !important;
}
.pw-feature-info {
  padding-right: 22px;
  min-width: 0 !important;
  flex: 1 1 auto;
}
.pw-feature-info b {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: 11.8px !important;
}
.pw-feature-info small {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.pw-feature-plus {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  font-size: 20px !important;
}
.pw-feature-icon {
  width: 50px !important;
  height: 54px !important;
  flex: 0 0 50px !important;
}
@media (max-width: 380px) {
  .pw-featured-main {
    padding: 7px 5px !important;
    gap: 4px !important;
  }
  .pw-feature-icon {
    width: 43px !important;
    flex-basis: 43px !important;
    height: 49px !important;
  }
  .pw-feature-info {
    padding-right: 17px;
  }
  .pw-feature-info b {
    font-size: 10.5px !important;
  }
  .pw-feature-plus {
    right: 3px;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 17px !important;
  }
  .pw-feature-info strong {
    font-size: 10px !important;
  }
  .pw-feature-info small {
    font-size: 9px !important;
  }
}

/* ===== Phase 24 — Store card restyle (matches approved mockup, 18 Oct 2026) =====
   Visual only. Beige image area matches the product photos' own background (#f1e3d6)
   so each photo blends in seamlessly. Bloomsy branding unchanged. */
#view .store-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#view .store-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 10px 12px !important;
  background: #fffdfa !important;
  border: 1px solid #eadfd4 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 12px rgba(87, 46, 67, 0.05) !important;
}
#view .store-card .store-art.pw-product-art {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: #f1e3d6 !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
#view .store-card .pw-store-product-photo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
#view .store-card .store-category {
  font: 600 10px/1.2 var(--sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #9a8a82 !important;
}
#view .store-card strong {
  font: 700 13px/1.3 var(--sans) !important;
  color: #4a2638 !important;
}
#view .store-card small {
  font: 400 11px/1.35 var(--sans) !important;
  color: #8d7d76 !important;
}
#view .store-card .pw-store-reference,
#view .store-card .pw-store-price-prompt {
  background: #f8f1ea !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #6f5a54 !important;
  font-size: 11px !important;
}
#view .store-card .store-buy,
#view .store-card .store-buy.amway,
#view .store-card .store-buy.food,
#view .store-card .store-buy.nonfood {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: auto !important;
  padding: 0 12px !important;
  background: #6e9367 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font: 700 13px/1.2 var(--sans) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#view .store-card .store-buy.amway {
  white-space: normal !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  padding: 6px 12px !important;
  min-height: 44px !important;
}
#view .store-card .store-buy::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.5 13h-13L4 8Zm5 0V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.5 13h-13L4 8Zm5 0V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
#view .store-card .store-buy:hover {
  background: #5f8459 !important;
}
#view .store-card .store-buy:focus-visible {
  outline: 3px solid #4a2638 !important;
  outline-offset: 2px !important;
}
/* Phase 25 — Amway products keep a clean white photo area (owner's request). */
#view .store-card:has(.store-buy.amway) .store-art.pw-product-art {
  background: #ffffff !important;
  border: 1px solid #efe4da !important;
}

/* Phase 26 — data-safety banner (save failures, repaired data). Functional, not decorative. */
.data-safety-banner {
  position: sticky;
  top: 8px;
  z-index: 40;
  margin: 8px 14px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e3b6a6;
  background: #fff4ef;
  color: #5a2a1f;
  font: 500 13px/1.45 var(--sans);
  box-shadow: 0 4px 16px rgba(90, 42, 31, 0.12);
}
.data-safety-banner[hidden] {
  display: none;
}
.data-safety-banner[data-kind="save-failed"],
.data-safety-banner[data-kind="recovery-blocked"] {
  border-color: #c9665a;
  background: #fde9e4;
}
.data-safety-banner p {
  margin: 0 0 8px;
}
.data-safety-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.data-safety-actions button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #c9665a;
  background: #fff;
  color: #5a2a1f;
  font: 700 13px var(--sans);
  cursor: pointer;
}

/* ===== C2: Account & Privacy card (shown only when an account service is configured) ===== */
.acct-card { margin: 0 0 14px; }
.acct-copy { margin: 6px 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.acct-copy b { color: var(--ink); word-break: break-all; }
.acct-notice, .acct-warn { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; background: var(--paper-2); }
.acct-warn { border-color: #e6b8a8; background: #fff3ee; }
.acct-notice p { margin: 0 0 10px; }
.acct-warn button, .acct-notice button { margin-top: 10px; }
.acct-switches { display: grid; gap: 8px; margin-bottom: 12px; }
.acct-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.acct-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.acct-switch-text { display: grid; gap: 3px; min-width: 0; }
.acct-switch-text b { font-size: 14px; }
.acct-switch-text small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.acct-knob { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background 0.2s; }
.acct-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.2s; }
.acct-switch[aria-checked="true"] .acct-knob { background: var(--sage); }
.acct-switch[aria-checked="true"] .acct-knob::after { transform: translateX(18px); }
.acct-actions { margin-top: 4px; }
.acct-danger { margin-top: 10px; }
.acct-danger > .danger-soft { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 18px;
  border: 1px solid #e3b9b9; background: #fff6f4; color: #a24f4f; font: 700 12px var(--sans); padding: 12px 14px; cursor: pointer; }
.acct-warn > button, .acct-notice > button { display: block; }
.acct-actions { grid-template-columns: 1fr; }
.acct-delete { border: 1px solid #e6b8a8; border-radius: 14px; padding: 12px; background: #fff3ee; font-size: 13.5px; line-height: 1.5; }
.acct-delete p { margin: 0 0 10px; }
.acct-delete label { display: grid; gap: 6px; font-weight: 600; }
.acct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acct-signout { width: 100%; margin-top: 12px; }

/* ===== Profile avatar (initial of the optional name, or the Bloomsy leaf) ===== */
.pw-avatar { margin: auto; width: 69px; height: 69px; border: 1px solid #dbbfa6; border-radius: 50%; display: grid; place-items: center;
  font: italic 39px var(--serif); color: #ad6f63; background: #fff6ed; }
.pw-avatar .i { width: 34px; height: 34px; stroke: #ad6f63; }
.pw-name-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin: 8px 0 12px; }
.pw-name-row label { display: grid; gap: 6px; min-width: 0; }
.pw-name-row button { white-space: nowrap; }

/* ===== FIX 02: Morning / Afternoon / Night supplement doses ===== */
.supp-slot-group { margin: 0 0 12px; }
.supp-slot-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 6px; border-bottom: 1px solid var(--line);
  font: 800 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #9b5470; }
.supp-slot-hint { margin: 6px 2px; font-size: 12px; color: var(--muted); }
.supp-slot-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; padding: 0; border: 0; min-width: 0; }
.supp-slot-pick legend { width: 100%; padding: 0; margin-bottom: 6px; font: 700 12px var(--sans); color: var(--ink); }
.supp-slot-pick label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: 600 12.5px var(--sans); cursor: pointer; }
.supp-slot-pick label:has(input:checked) { border-color: #c98aa0; background: #fbeef2; color: #9b5470; }
.supp-slot-pick input { accent-color: #b9647a; margin: 0; }

/* ===== FIX 05: Sleep screen (navy night card, week chart, one-tap answers) ===== */
.sleep-night { position: relative; overflow: hidden; margin: 0 0 14px; padding: 20px 20px 18px; border-radius: 22px; color: #f6ebe2;
  background: radial-gradient(120% 90% at 85% 0%, #2c4a72 0%, #1a3253 45%, var(--navy) 100%); box-shadow: 0 10px 26px rgba(19, 42, 70, 0.22); }
.sleep-night::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(233, 180, 190, 0.18)); }
.sleep-night-moon { position: absolute; right: 18px; top: 16px; width: 50px; height: 50px; color: #f3dfc6; }
.sleep-night-eyebrow { font: 800 10.5px var(--sans); letter-spacing: 0.14em; color: #e6b8c4; padding-right: 64px; }
.sleep-night-big { font: 400 44px/1.05 var(--serif); margin: 10px 0 4px; }
.sleep-night-big.sleep-night-empty { font-size: 32px; }
.sleep-night-meta { font-size: 13.5px; color: #d9cfd0; }
.sleep-night-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; z-index: 1; }
.sleep-night-chips span { background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 5px 10px; font: 700 11.5px var(--sans); }
.sleep-night-cta { position: relative; z-index: 1; margin-top: 14px; border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  background: #f3dfc6; color: var(--navy); font: 800 13px var(--sans); }
.sleep-week { margin: 0 0 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.sleep-week-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sleep-week-legend { font: 600 10.5px var(--sans); color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sleep-week-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 4px; }
.sleep-bars { position: relative; display: flex; align-items: stretch; gap: 6px; height: 118px; margin-top: 10px; }
.sleep-band { position: absolute; left: 0; right: 0; border-top: 1px dashed #d9c3b5; border-bottom: 1px dashed #d9c3b5;
  background: rgba(135, 150, 125, 0.07); pointer-events: none; }
.sleep-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer; position: relative; z-index: 1; }
.sleep-bar-col .sleep-bar { display: block; border-radius: 7px 7px 3px 3px; }
.sleep-bar-col .sleep-bar-empty { height: 38px; border: 1.5px dashed #d9c3b5; background: none; box-sizing: border-box; }
.sleep-bar-day { display: block; height: 16px; line-height: 16px; font: 700 10.5px var(--sans); color: var(--muted); text-align: center; }
.sleep-bar-col.is-selected .sleep-bar-day { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.sleep-week-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.sleep-week-foot b { color: var(--ink); }
.sleep-week-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.sleep-suggest { margin: -4px 0 6px; font-size: 12px; color: var(--muted); }
.sleep-q { font: 700 13px var(--sans); margin: 14px 0 6px; }
.sleep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sleep-chip { cursor: pointer; }
.sleep-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sleep-chip span { display: inline-block; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 13px var(--sans); }
.sleep-chip input:checked + span { background: #eaf0f7; border-color: #5f7fa6; color: var(--navy); }
.sleep-chip input:focus-visible + span { outline: 2px solid #5f7fa6; outline-offset: 2px; }
.sleep-form .primary { margin-top: 16px; }
.sleep-hist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.sleep-hist-bar { height: 6px; border-radius: 4px; background: #f3e8df; overflow: hidden; min-width: 30px; }
.sleep-hist-bar i { display: block; height: 100%; border-radius: 4px; }