: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;
}
.pw-consent > span {
  flex: 1;
  min-width: 0;
  display: block;
}
@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; }

/* ===== FIX 07: Work — brain dump, Today, labels, log, weekly reset ===== */
.pw-work-add textarea#workNewTitle { min-height: 96px; resize: vertical; line-height: 1.5; }
.wk-more { margin: 10px 0 12px; }
.wk-more > summary { cursor: pointer; font: 700 12px/1.4 var(--sans); color: #956478; padding: 6px 0; list-style: none; }
.wk-more > summary::-webkit-details-marker { display: none; }
.wk-more > summary::before { content: "▸ "; }
.wk-more[open] > summary::before { content: "▾ "; }
.wk-today {
  background: linear-gradient(145deg, #fff6f0, #f8e9e0);
  border: 1px solid #ead7cc;
  border-radius: 24px;
  padding: 20px 16px 10px;
  margin: 4px 0 16px;
}
.wk-today h2 { font: 400 26px/1.25 var(--serif); margin: 6px 0; color: #4b3b37; }
.wk-today > p { font: 500 13px/1.65 var(--sans); color: #665a55; margin: 6px 0 10px; }
.wk-task { grid-template-columns: 29px minmax(0, 1fr) auto; }
.wk-today .wk-task { border-top-color: #ecd9ce; }
.wk-open { all: unset; cursor: pointer; display: block; max-width: 100%; }
.wk-open:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 4px; }
.wk-open strong { overflow-wrap: anywhere; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wk-label, .wk-type, .wk-suggested {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--sans); padding: 5px 8px; border-radius: 99px;
  background: #f6ece5; color: #7d665c; max-width: 100%; overflow-wrap: anywhere;
}
.wk-label i, .wk-filter i, .wk-label-row > i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.wk-type { background: #efe9f1; color: #75627c; }
.wk-suggested { background: #e7f0e5; color: #5f7660; }
.wk-step, .wk-note { font: 500 11px/1.55 var(--sans); color: #6f625c; margin: 6px 0 0; overflow-wrap: anywhere; }
.wk-step b, .wk-note b { color: #8e5966; font-weight: 700; }
.wk-pin {
  border: 1px solid #e3cfc3; background: #fffaf6; color: #8e5966; border-radius: 99px;
  font: 700 10px/1 var(--sans); padding: 8px 9px; white-space: nowrap; cursor: pointer;
}
.wk-empty { font: 500 12px/1.6 var(--sans); color: #8a7a73; margin: 8px 0 12px; }
.wk-edit {
  background: #fffaf5; border: 1px solid #ebdbd0; border-radius: 18px; padding: 12px; margin: 4px 0 12px;
}
.wk-edit .pw-label { margin-top: 8px; }
.wk-edit textarea { resize: vertical; }
.wk-row { display: flex; gap: 8px; margin-top: 12px; }
.wk-row > button { flex: 1; }
.wk-doneon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; border-top: 1px dashed #e8d6c7; padding-top: 6px; }
.wk-delete { background: none; border: 0; color: #a4505f; font: 700 12px var(--sans); padding: 12px 0 2px; cursor: pointer; }
.wk-reset { padding: 16px; margin-bottom: 16px; }
.wk-sub { font: 500 12px/1.6 var(--sans); color: #7d706a; margin: 6px 0 8px; }
.wk-reset-row { border-top: 1px solid #efe4dd; padding: 10px 0; }
.wk-reset-row > span { display: block; font: 700 13px/1.45 var(--sans); overflow-wrap: anywhere; }
.wk-reset-row > div { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wk-reset-row button, .wk-label-row button {
  border: 1px solid #e3cfc3; background: #fffaf6; color: #6e5a53; border-radius: 99px;
  font: 700 11px/1 var(--sans); padding: 8px 11px; cursor: pointer;
}
.wk-rest { margin: 0 0 16px; }
.wk-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: #fffaf5; border: 1px solid #ebdbd0; border-radius: 18px; padding: 14px 16px;
  font: 700 14px/1.3 var(--sans); color: #4b3b37; cursor: pointer;
}
.wk-toggle small { font: 700 11px var(--sans); color: #fff; background: #b9647a; border-radius: 99px; padding: 3px 8px; }
.wk-toggle span { margin-left: auto; font: 700 11px var(--sans); color: #956478; }
.wk-labels .wk-toggle { border: 0; padding: 4px 0; background: none; }
.wk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.wk-filter {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e3cfc3; background: #fffaf6;
  color: #6e5a53; border-radius: 99px; font: 700 11px/1 var(--sans); padding: 8px 10px; cursor: pointer; max-width: 100%;
}
.wk-filter small { color: #a08f88; font-weight: 600; }
.wk-filter.active { background: #4b3b37; color: #fff; border-color: #4b3b37; }
.wk-filter.active small { color: #e8d6c7; }
.wk-log { padding: 16px; margin-bottom: 16px; }
.wk-week { font: 500 12px/1.6 var(--sans); color: #665a55; background: #f7efe8; border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.wk-log-day h3 { font: 800 10px/1.4 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: #956478; margin: 14px 0 2px; }
.wk-log-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; }
.wk-log-row span { overflow-wrap: anywhere; }
.wk-log-row .wk-label { font-size: 9px; padding: 4px 7px; }
.wk-letgo span { color: #a2958f; text-decoration: line-through; }
.wk-letgo em { font: 600 10px var(--sans); color: #a2958f; font-style: normal; }
.wk-labels { padding: 14px 16px; margin-bottom: 16px; }
.wk-label-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 82px auto auto; gap: 6px; align-items: center; margin-top: 10px; }
.wk-label-row .text-input { padding: 9px 8px; font-size: 12px; min-width: 0; }
.wk-label-new { grid-template-columns: minmax(0, 1fr) auto; }
.wk-x { color: #a4505f !important; }
@media (max-width: 360px) {
  .wk-label-row { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
  .wk-label-row select { grid-column: 2 / 3; }
  .wk-doneon { grid-template-columns: 1fr; }
}
.wk-log-row span, .wk-log-row .wk-label { text-decoration: none; }
.wk-letgo > span { text-decoration: line-through; }
.wk-row > button { margin: 0; min-height: 46px; padding-top: 0; padding-bottom: 0; }

/* ===== FIX 07b: food card names never split mid-word =====
   The name sat beside the photo with ~70 px left, so "Mozzarella" broke into "Mozzarell / a".
   Photo now sits on top (next to the ··· button) and the name gets the card's full width. */
.pw-compact-catalog .pw-food-select-wrap > .p2-food-button {
  padding: 9px 9px 10px 9px !important;
  justify-content: flex-start;
}
.pw-compact-catalog .p2-food-button strong {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 7px !important;
  width: 100%;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: manual;
}
.pw-compact-catalog .p2-food-button .pw-food-serving {
  overflow-wrap: break-word;
  word-break: normal;
}
.pw-compact-catalog .p2-food-button .pw-food-tiny-photo {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  margin: 0 !important;
}

/* ===== FIX 08: Movement — weekly goals, talk-test effort, calories, quick log ===== */
.mv-card{background:#fffaf5;border:1px solid #ebdbd0;border-radius:22px;padding:16px;margin:0 0 14px;box-shadow:0 4px 14px #946f5b10}
.mv-card h2{font:400 22px/1.25 var(--serif);margin:0 0 4px;color:#4b3b37}
.mv-hero{background:linear-gradient(145deg,#fff6f0,#f8e9e0);border:1px solid #ead7cc;border-radius:24px;padding:18px 16px 8px;margin:4px 0 14px}
.mv-eye{font:800 10px/1.5 var(--sans);letter-spacing:1.6px;color:#956478}
.mv-hero h2{font:400 25px/1.25 var(--serif);margin:6px 0;color:#4b3b37}
.mv-hero p{font:500 13px/1.6 var(--sans);color:#665a55;margin:6px 0 10px}
.mv-sugg{display:flex;align-items:center;gap:10px;border-top:1px solid #ecd9ce;padding:11px 0}
.mv-sugg > span:nth-child(2){min-width:0;flex:1}
.mv-sugg b{display:block;font:700 13px var(--sans);color:#3d3033}
.mv-sugg small{font:600 10.5px/1.4 var(--sans);color:#987b71}
.mv-sugg button{border:1px solid #e3cfc3;background:#fff;color:#8e5966;border-radius:99px;font:700 11px var(--sans);padding:8px 12px;white-space:nowrap;cursor:pointer}
.mv-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none}
.mv-cardio{background:#e7f0e5}.mv-strength{background:#f6e6dc}.mv-gentle{background:#fbeee6}.mv-rest{background:#f3eee9}.mv-other{background:#f1ebe6}
.mv-row{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 6px;gap:8px}
.mv-row b{font:700 13px var(--sans);color:#3d3033}
.mv-row span{font:600 11px var(--sans);color:#8a7a73}
.mv-bigrow{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mv-bigrow span:last-child{font:600 12px var(--sans);color:#8a7a73}
.mv-big{font:400 30px/1 var(--serif);color:#4b3b37}
.mv-bar{height:10px;border-radius:99px;background:#f0e4db;overflow:hidden}
.mv-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#87967d,#a9b59d)}
.mv-small{font:500 11px/1.55 var(--sans);color:#7d706a;margin:8px 0 0}
.mv-fine{font:500 10.5px/1.5 var(--sans);color:#a08f88;margin:4px 2px 0}
.mv-dots{display:flex;gap:8px;align-items:center}
.mv-dots i{width:22px;height:22px;border-radius:50%;border:2px solid #a45d35;display:inline-block}
.mv-dots i.on{background:#a45d35}
.mv-dots span{font:600 12px var(--sans);color:#8a7a73;margin-left:4px}
.mv-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:128px;margin:16px 0 4px;padding-top:8px;border-top:1px dashed #ead7cc}
.mv-col{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;min-width:0}
.mv-col .seg{display:block;width:100%;max-width:26px;border-radius:5px}
.mv-col .mv-zero{height:3px;background:#eadfd7}
.mv-col small{font:700 9.5px var(--sans);color:#8a7a73;margin-top:4px}
.mv-col em{font:600 8.5px var(--sans);color:#a08f88;font-style:normal;min-height:11px}
.mv-col.today small{color:#b9647a}
.mv-col:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:6px}
.mv-col .mv-rest{display:grid;place-items:center;width:100%;max-width:26px;height:22px;border-radius:5px;border:1.5px dashed #c9b5aa;font:700 7px var(--sans);color:#9b8a83;background:none}
.mv-legend{display:flex;gap:12px;flex-wrap:wrap;font:600 10px var(--sans);color:#7d706a;margin-top:8px}
.mv-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}
.mv-legend i.mv-legend-rest{border:1.5px dashed #c9b5aa}
.mv-kcal{margin-top:12px;background:#f7efe8;border-radius:14px;padding:10px 12px;font:500 12px/1.5 var(--sans);color:#665a55}
.mv-kcal b{color:#a45d35}.mv-kcal span{color:#a08f88}
.mv-label{font:700 12px var(--sans);color:#5d4c47;margin:14px 0 8px}
.mv-label span{font-weight:500;color:#a08f88}
.mv-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.mv-chip{border:1px solid #e3cfc3;background:#fffaf6;color:#6e5a53;border-radius:99px;font:700 12px var(--sans);padding:9px 12px;cursor:pointer;max-width:100%;overflow-wrap:break-word}
.mv-chip.on{background:#4b3b37;color:#fff;border-color:#4b3b37}
.mv-unit{font:600 12px var(--sans);color:#8a7a73}
.mv-datechip{position:relative;border-style:dashed;color:#956478}
.mv-datechip.on{border-style:solid;color:#fff}
.mv-datechip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.mv-effort{display:grid;gap:7px}
.mv-eff{all:unset;cursor:pointer;border:1px solid #e3cfc3;background:#fffaf6;border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center}
.mv-eff.on{border:2px solid #87967d;background:#f2f6ef;padding:9px 11px}
.mv-eff b{font:700 12.5px var(--sans);color:#3d3033;display:block}
.mv-eff small{font:500 11px var(--sans);color:#7d706a}
.mv-eff .r{width:16px;height:16px;border-radius:50%;border:2px solid #c9b5aa;flex:none;box-sizing:border-box}
.mv-eff.on .r{border-color:#87967d;background:radial-gradient(#87967d 45%,transparent 50%)}
.mv-eff:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.mv-preview{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 2px;background:#f2f6ef;border-radius:14px;padding:11px 12px}
.mv-preview b{font:700 12.5px var(--sans);color:#3d3033;min-width:0;overflow-wrap:break-word}
.mv-preview span{font:700 11px var(--sans);color:#5f7660;text-align:right}
.mv-save{width:100%;margin-top:14px}
.mv-day h3{font:800 10px/1.4 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:#956478;margin:14px 0 2px}
.mv-entry{display:flex;gap:10px;align-items:center;border-top:1px solid #efe4dd;padding:10px 0}
.mv-entry-main{min-width:0;flex:1}
.mv-entry b{font:700 12.5px var(--sans);color:#3d3033;display:block;overflow-wrap:break-word}
.mv-entry small{font:600 10.5px/1.45 var(--sans);color:#987b71;overflow-wrap:anywhere}
.mv-entry .k{font:700 11px var(--sans);color:#a45d35;white-space:nowrap}
.mv-x{border:0;background:none;color:#b39b93;font-size:18px;padding:0 2px;cursor:pointer}
.mv-tag{font:700 9px var(--sans);padding:3px 7px;border-radius:99px;background:#f6e6dc;color:#a45d35;margin-left:6px;vertical-align:1px}
.mv-toggle{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--sans);color:#5d4c47;border-top:1px solid #efe4dd;margin-top:12px;padding-top:12px}
.mv-switch{width:44px;height:26px;border-radius:99px;background:#e2d3c9;position:relative;border:0;cursor:pointer;flex:none}
.mv-switch:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.mv-switch.on{background:#87967d}.mv-switch.on:after{left:21px}

/* ===== FIX 08b: Work — visible Edit on tasks and log rows ===== */
.wk-task { grid-template-columns: 29px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
.wk-task .wk-pin { grid-column: 3; grid-row: 1; }
.wk-task .wk-editbtn { grid-column: 3; grid-row: 2; align-self: start; }
.wk-editbtn { border: 1px solid #e3cfc3; background: #fffaf6; color: #6e5a53; border-radius: 99px; font: 700 10px/1 var(--sans); padding: 7px 9px; white-space: nowrap; cursor: pointer; }
.wk-task .pw-work-task-body { grid-row: 1 / span 2; }
.wk-task .pw-work-check { grid-row: 1; }
.wk-log-row { grid-template-columns: 26px minmax(0, 1fr) auto 30px; }
.wk-logedit { border: 1px solid #e3cfc3 !important; background: #fffaf6 !important; color: #6e5a53 !important; border-radius: 50%; width: 28px; height: 28px; font-size: 13px; cursor: pointer; }

/* ===== FIX 09: Period tracker ===== */
.pt-strip{display:flex;align-items:center;gap:10px;background:linear-gradient(145deg,#fdf0f2,#f8e3e7);border:1px solid #efd3d9;border-radius:20px;padding:12px 14px;margin:0 0 14px}
.pt-strip-text{min-width:0;flex:1}
.pt-strip b{display:block;font:700 13px var(--sans);color:#3d3033}
.pt-strip small{font:600 11px/1.45 var(--sans);color:#8e6a72}
.pt-btn{border:0;border-radius:99px;padding:10px 13px;font:700 12px var(--sans);color:#fff;background:linear-gradient(90deg,#b9647a,#d0808f);white-space:nowrap;cursor:pointer;flex:none}
.pt-drop{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:18px;flex:none}
.pt-card{background:#fffaf5;border:1px solid #ebdbd0;border-radius:22px;padding:16px;margin:0 0 14px;box-shadow:0 4px 14px #946f5b10}
.pt-card h2{font:400 21px/1.25 var(--serif);margin:4px 0 10px;color:#4b3b37}
.pt-eye{font:800 10px/1.5 var(--sans);letter-spacing:1.6px;color:#956478}
.pt-p{font:500 12px/1.6 var(--sans);color:#665a55;margin:8px 0 0}
.calendar-grid.pt-grid .date.pt-plain{background:#f6eee8}
.calendar-grid.pt-grid .date.pt-per{background:#c96d84;color:#fff;font-weight:700}
.calendar-grid.pt-grid .date.pt-spot{background:#f6eee8}
.calendar-grid.pt-grid .date.pt-pred{background:#fff;box-shadow:inset 0 0 0 2px #d99aaa;color:#a65a6e}
.calendar-grid.pt-grid .date.pt-pred.selected{box-shadow:inset 0 0 0 2px #d99aaa,0 0 0 2px #b36f81}
.pt-dots{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.pt-dots b{width:4px;height:4px;border-radius:50%;background:#fff;display:block}
.pt-spotdot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#c96d84}
.pt-legend{display:flex;flex-wrap:wrap;gap:12px;font:600 10.5px var(--sans);color:#7d706a;margin-top:12px}
.pt-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;box-sizing:border-box}
.pt-legend .l-per{background:#c96d84}.pt-legend .l-spot{background:radial-gradient(#c96d84 35%,#f6eee8 40%)}.pt-legend .l-pred{border:2px solid #d99aaa}.pt-legend .l-today{border:2px solid #c06781}
.pt-label{font:700 12px var(--sans);color:#5d4c47;margin:14px 0 8px}
.pt-label span{font-weight:500;color:#a08f88}
.pt-chips{display:flex;flex-wrap:wrap;gap:7px}
.pt-chip{border:1px solid #e3cfc3;background:#fffaf6;color:#6e5a53;border-radius:99px;font:700 12px var(--sans);padding:9px 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pt-chip.on{background:#4b3b37;color:#fff;border-color:#4b3b37}
.pt-chip .dots{display:inline-flex;gap:2px}.pt-chip .dots b{width:5px;height:5px;border-radius:50%;background:#c96d84;display:block}
.pt-chip.on .dots b{background:#f3c1cd}
.pt-chip.pt-more{border-style:dashed;color:#956478}
.pt-check{all:unset;cursor:pointer;display:flex;gap:10px;align-items:flex-start;border:1px solid #e3cfc3;border-radius:14px;padding:10px 12px;margin-top:10px;font:600 12px/1.45 var(--sans);color:#5d4c47;background:#fffaf6;box-sizing:border-box;width:100%}
.pt-check i{width:18px;height:18px;border-radius:5px;border:2px solid #c9b5aa;flex:none;margin-top:1px;display:grid;place-items:center;font:800 12px var(--sans);font-style:normal;color:#fff;box-sizing:border-box}
.pt-check.on{border-color:#c96d84;background:#fdf0f2}.pt-check.on i{background:#c96d84;border-color:#c96d84}
.pt-check:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.pt-row{display:flex;gap:8px;margin-top:14px}
.pt-row button{flex:1;border-radius:99px;padding:13px 10px;font:700 13px var(--sans);cursor:pointer}
.pt-pri{border:0;color:#fff;background:linear-gradient(90deg,#b9647a,#d0808f)}
.pt-sec{border:1px solid #d9b8c0;background:#fff;color:#8e5966}
.pt-del{background:none;border:0;color:#a4505f;font:700 12px var(--sans);padding:12px 0 0;cursor:pointer}
.pt-big{font:400 25px/1.2 var(--serif);color:#4b3b37;margin-top:4px}
.pt-bar{position:relative;height:12px;border-radius:99px;background:#f0e4db;margin:14px 0 6px}
.pt-bar i{position:absolute;top:0;height:100%;border-radius:99px;background:repeating-linear-gradient(45deg,#e7a9b8,#e7a9b8 6px,#f2c9d3 6px,#f2c9d3 12px)}
.pt-bar em{position:absolute;top:-4px;width:3px;height:20px;background:#4b3b37;border-radius:2px}
.pt-scale{display:flex;justify-content:space-between;gap:6px;font:600 10px var(--sans);color:#8a7a73}
.pt-cyc{display:grid;grid-template-columns:52px minmax(0,1fr) 62px;gap:8px;align-items:center;margin:9px 0;font:600 11px var(--sans);color:#7d706a}
.pt-cyc .track{height:14px;border-radius:99px;background:#f2e8e1;position:relative;overflow:hidden}
.pt-cyc .track i{position:absolute;left:0;top:0;height:100%;background:#c96d84;border-radius:99px}
.pt-cyc .track s{position:absolute;top:0;height:100%;background:#e3d1c6;border-radius:0 99px 99px 0}
.pt-cyc b{font:700 11.5px var(--sans);color:#3d3033;text-align:right}
.pt-cyc.now .track s{background:repeating-linear-gradient(90deg,#e3d1c6,#e3d1c6 4px,transparent 4px,transparent 7px)}
.pt-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.pt-sum div{background:#f7efe8;border-radius:14px;padding:10px 6px;text-align:center}
.pt-sum b{display:block;font:400 20px var(--serif);color:#4b3b37}
.pt-sum small{font:600 10px var(--sans);color:#8a7a73}
.pt-flag{display:flex;gap:12px;background:#fdf6ec;border:1px solid #ecd9b8;border-radius:20px;padding:14px 16px;margin:0 0 14px}
.pt-flag .ic{width:34px;height:34px;border-radius:50%;background:#f4e3c4;display:grid;place-items:center;flex:none;font-size:16px}
.pt-flag b{display:block;font:700 13px var(--sans);color:#5b4632;margin-bottom:3px}
.pt-flag p{font:500 12px/1.55 var(--sans);color:#6d5a47;margin:0}
.pt-mile{background:linear-gradient(145deg,#f3f0f8,#ebe6f3);border:1px solid #ddd5ea;border-radius:22px;padding:16px;margin:0 0 14px}
.pt-mile .pt-eye{color:#6f5d8d}
.pt-mile h2{font:400 22px/1.25 var(--serif);margin:6px 0;color:#3f3550}
.pt-mile p{font:500 12.5px/1.6 var(--sans);color:#5c5268;margin:0}
@media (max-width:360px){.pt-strip{flex-wrap:wrap}.pt-btn{width:100%}}

/* ===== FIX 10: suggested protein goal ===== */
.pg-suggest{margin:12px 0 4px;display:grid;gap:8px}
.pg-sug-row{display:flex;align-items:center;gap:10px;background:#f2f6ef;border-radius:14px;padding:11px 12px}
.pg-sug-row > span{min-width:0;flex:1}
.pg-sug-row b{display:block;font:700 13px var(--sans);color:#3d3033}
.pg-sug-row small{font:600 11px var(--sans);color:#5f7660}
.pg-use{border:0;border-radius:99px;background:#87967d;color:#fff;font:700 12px var(--sans);padding:9px 12px;white-space:nowrap;cursor:pointer}
.pg-ok{font:700 11px var(--sans);color:#5f7660;font-style:normal;white-space:nowrap}
.pg-none{font:600 12px/1.5 var(--sans);color:#7d706a;margin:0;background:#f7efe8;border-radius:14px;padding:11px 12px}
.pg-switch-row{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;border:1px solid #e3cfc3;border-radius:14px;padding:10px 12px;background:#fffaf6;box-sizing:border-box}
.pg-switch-row > span{flex:1;font:700 12.5px var(--sans);color:#3d3033}
.pg-switch-row small{display:block;font:500 11px var(--sans);color:#7d706a;margin-top:2px}
.pg-switch-row:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.pg-switch{width:42px;height:24px;border-radius:99px;background:#e2d3c9;position:relative;flex:none}
.pg-switch:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.pg-switch.on{background:#87967d}.pg-switch.on:after{left:21px}
/* FIX 10: Movement goals */
.mv-goals-btn{margin-top:10px;border:1px solid #e3cfc3;background:#fffaf6;color:#6e5a53;border-radius:99px;font:700 11px var(--sans);padding:8px 12px;cursor:pointer}
.mv-goals{margin-top:10px;background:#f7efe8;border-radius:16px;padding:12px}
.mv-goal-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mv-goal-actions button{flex:1;margin:0;min-width:130px}

/* ===== FIX 11: Today's 3, days this week, milestones, weekly reflection ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bl-card{background:#fffaf5;border:1px solid #ebdbd0;border-radius:22px;padding:16px;margin:0 0 14px;box-shadow:0 4px 14px #946f5b10}
.bl-eye{font:800 10px/1.5 var(--sans);letter-spacing:1.6px;color:#956478}
.bl-top{display:flex;gap:12px;align-items:center}
.bl-flower{width:92px;height:92px;flex:none}
.bl-title{font:400 21px/1.2 var(--serif);color:#4b3b37;margin:2px 0 8px}
.bl-items{display:grid;gap:7px;flex:1;min-width:0}
.bl-item{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:9px;border:1px solid #ecdcd2;background:#fff;border-radius:14px;padding:8px 10px;font:700 12.5px var(--sans);color:#3d3033;width:100%}
.bl-item-text{min-width:0;flex:1}
.bl-item small{display:block;font:600 10.5px var(--sans);color:#987b71;overflow-wrap:break-word}
.bl-item .c{width:20px;height:20px;border-radius:50%;border:2px solid #d8c6bb;flex:none;display:grid;place-items:center;font:800 11px var(--sans);color:#fff;box-sizing:border-box}
.bl-item.done{background:#fbf6f1;color:#7d706a}
.bl-item.done .c{border:0;background:#c96d84}
.bl-item .go{color:#b39b93;font-size:14px}
.bl-item:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.bl-bloom{text-align:center;font:600 12px var(--sans);color:#a0566b;background:#fdf0f2;border-radius:12px;padding:8px;margin-top:10px}
.bl-foot{border-top:1px dashed #ead7cc;margin-top:14px;padding-top:12px;display:grid;gap:10px}
.bl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 12px var(--sans);color:#5d4c47}
.bl-row b{font:700 12.5px var(--sans);color:#3d3033}
.bl-dots{display:flex;gap:5px;align-items:flex-end}
.bl-dot{display:flex;flex-direction:column;align-items:center;gap:3px;font:700 8.5px var(--sans);color:#a08f88}
.bl-dot i{width:14px;height:14px;border-radius:50%;background:#efe4dc;display:block}
.bl-dot i.on{background:#c96d84}
.bl-dot i.fut{background:none;border:1.5px dashed #d8c6bb;box-sizing:border-box}
.bl-dot.today{color:#b9647a}
.bl-mile .bar{flex:1;height:8px;border-radius:99px;background:#f0e4db;overflow:hidden;min-width:40px}
.bl-mile .bar i{display:block;height:100%;background:linear-gradient(90deg,#f0bccb,#c46a82);border-radius:99px}
.bl-next{white-space:nowrap}
.bl-badge{font:800 9.5px var(--sans);letter-spacing:.6px;color:#fff;background:#c46a82;border-radius:99px;padding:4px 8px;white-space:nowrap}
.bl-ref{background:linear-gradient(150deg,#132a46,#24426a);border-radius:24px;padding:18px 16px;margin:0 0 14px;color:#f3e9e1;box-shadow:0 8px 24px #132a4630}
.bl-ref .bl-eye{color:#f0c4cf}
.bl-ref h2{font:400 24px/1.25 var(--serif);margin:6px 0 10px;color:#fff}
.bl-ref ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bl-ref li{display:flex;gap:10px;font:500 13px/1.5 var(--sans);color:#f3e9e1}
.bl-ref li > span{width:26px;height:26px;border-radius:9px;background:#ffffff1a;display:grid;place-items:center;flex:none;font-size:13px}
.bl-ref li.star{background:#ffffff14;border-radius:14px;padding:10px;margin-top:2px}
.bl-ref li.star b{color:#ffd9e2}
.bl-ref .ok{margin-top:14px;border:0;border-radius:99px;padding:11px 18px;font:700 13px var(--sans);background:#f3e9e1;color:#132a46;cursor:pointer}
.bl-ref small{display:block;font:500 10.5px/1.5 var(--sans);color:#b9c4d4;margin-top:10px}
@media (max-width:360px){.bl-flower{width:72px;height:72px}.bl-row{flex-wrap:wrap}}

/* ===== FIX 12: Store tidy-up ===== */
.pw-store-checked{display:block;font:600 10px/1.4 var(--sans);color:#a08f88;margin-top:4px}
.pw-store-status{display:block;font:700 10.5px/1.4 var(--sans);color:#8e5966;background:#fbeef1;border-radius:8px;padding:4px 7px;margin-top:5px}
.pw-product-art .pw-store-illustration.pw-photo-soon,.pw-store-illustration.pw-photo-soon{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;background:#f6ece5 !important;border-radius:inherit;box-shadow:none !important;font-size:0}
.pw-photo-soon svg{width:44px;height:44px}
.pw-photo-soon small{font:700 10.5px var(--sans);color:#9b8079;letter-spacing:.2px}
.pw-product-art .pw-store-illustration.pw-photo-soon{min-height:114px;height:auto !important;align-self:stretch;justify-self:stretch}
.pw-photo-soon svg{width:40px !important;height:40px !important;display:block;flex:none}
#view .store-card .pw-photo-soon small{flex:none;font:700 10.5px/1.3 var(--sans);color:#9b8079;margin:0}

/* ===== FIX 13: first-time setup, About you, periods stopped ===== */
body.su-mode .bottomnav{display:none}
.su{display:flex;flex-direction:column;min-height:calc(100vh - 150px);padding:4px 2px 24px}
.su-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 12px var(--sans);color:var(--muted);min-height:32px}
.su-link{border:0;background:none;font:700 12.5px var(--sans);color:var(--muted);padding:8px 4px;cursor:pointer}
.su-step{font:700 12px var(--sans);color:var(--muted)}
.su-dots{display:flex;gap:6px}.su-dots i{width:22px;height:5px;border-radius:9px;background:#ead9cd}.su-dots i.on{background:var(--rose)}
.su-body{padding-top:22px;flex:1}
.su-eye{font:800 10.5px var(--sans);letter-spacing:1.6px;color:#956478}
.su-h{font:400 30px/1.15 var(--serif);margin:8px 0;color:var(--ink)}
.su-sub{font:500 13.5px/1.55 var(--sans);color:var(--muted);margin:0 0 20px}
.su-input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:15px 16px;font:600 16px var(--sans);color:var(--ink)}
.su-input:focus{outline:2px solid #d99aaa;outline-offset:1px}
.su-kg{display:flex;gap:10px;align-items:center}.su-kg span{font:700 15px var(--sans);color:var(--muted)}
.su-chips{display:flex;flex-wrap:wrap;gap:9px}
.su-chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:11px 16px;font:700 14px var(--sans);color:var(--ink);cursor:pointer}
.su-chip.sel{background:var(--rose);border-color:var(--rose);color:#fff}
.su-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:13px 14px;margin:0 0 9px;font:700 14px var(--sans);color:var(--ink);cursor:pointer}
.su-opt small{display:block;font:500 11.5px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.su-opt.sel{border-color:var(--rose);background:#fdf3f5}
.su-radio{width:20px;height:20px;border-radius:50%;border:2px solid #d8c6bb;flex:none;box-sizing:border-box}
.su-opt.sel .su-radio{border:6px solid var(--rose)}
.su-box{width:20px;height:20px;border-radius:6px;border:2px solid #d8c6bb;flex:none;box-sizing:border-box;display:grid;place-items:center;font:800 12px var(--sans);color:#fff}
.su-opt.sel .su-box{background:var(--rose);border-color:var(--rose)}
.su-foot{display:grid;gap:8px;padding-top:20px}
.su-btn{border:0;border-radius:99px;padding:15px;font:800 14.5px var(--sans);background:var(--navy);color:#fff;cursor:pointer}
.su-ghost{border:0;background:none;font:700 13px var(--sans);color:var(--muted);padding:8px;cursor:pointer}
.su-done{text-align:center}.su-flower{font-size:54px;color:var(--rose);margin:36px 0 6px}
.su-sum{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 16px;text-align:left;margin-top:18px}
.su-sum div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font:600 13px var(--sans)}
.su-sum div:last-child{border:0}.su-sum span{color:var(--muted)}.su-sum b{font-weight:800;text-align:right}
.su-personal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fffaf5;border:1px solid #ebdbd0;border-radius:20px;padding:14px 16px;margin:0 0 14px}
.su-personal-text{flex:1;min-width:180px;font:800 13.5px var(--sans);color:var(--ink)}
.su-personal-text small{display:block;font:600 11.5px/1.45 var(--sans);color:var(--muted);margin-top:3px}
.su-personal-actions{display:flex;gap:8px;align-items:center}
.su-personal-go{border:0;border-radius:99px;padding:10px 16px;font:800 12.5px var(--sans);background:var(--navy);color:#fff;cursor:pointer}
.su-personal-later{border:0;background:none;font:700 12px var(--sans);color:var(--muted);cursor:pointer;padding:8px 4px}
.su-after{background:linear-gradient(150deg,#132a46,#24426a);color:#f3e9e1;border-radius:24px;padding:18px 16px;margin:0 0 14px;box-shadow:0 8px 24px #132a4630}
.su-after .su-eye{color:#f0c4cf}
.su-after h2{font:400 24px/1.2 var(--serif);margin:6px 0;color:#fff}
.su-after p{font:500 12.5px/1.55 var(--sans);margin:0 0 12px;color:#dfe6ef}
.su-pills{display:flex;gap:8px;flex-wrap:wrap}
.su-pills button{border:0;background:#ffffff1f;color:#fff;border-radius:99px;padding:9px 13px;font:700 12px var(--sans);cursor:pointer}
.su-rows{display:grid;margin-top:12px;border-top:1px dashed var(--line)}
.su-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px dashed var(--line);background:none;padding:12px 2px;font:600 13px var(--sans);color:var(--muted);text-align:left;cursor:pointer}
.su-row b{font:800 13px var(--sans);color:var(--ink);text-align:right}
.su-cal-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 14px 12px;margin:14px 0}
.su-cal-card .su-row{color:var(--ink);font-weight:700}
.su-cal-card .su-row:last-child{border-bottom:0}
.su-warn{background:#fbf1ec;border-radius:12px;padding:10px 12px;font:600 11.5px/1.5 var(--sans);color:#7a4f45;margin:10px 0 4px}
.calendar-grid .date .su-logdot{position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--sage)}
.pt-legend .su-l-log{background:var(--sage);width:7px;height:7px}

/* ===== FIX 14: larger text (device setting) ===== */
.tx-row{flex-wrap:wrap}
.tx-seg{display:inline-flex;background:#f3e7de;border-radius:99px;padding:3px;gap:2px}
.tx-opt{border:0;background:none;border-radius:99px;padding:6px 12px;font:700 12px var(--sans);color:#7d6a64;cursor:pointer}
.tx-opt.on{background:#fff;color:var(--rose);box-shadow:0 1px 4px #946f5b26}
body.bl-text-large .phone{zoom:1.2}
body.bl-text-large .daily-grid{grid-template-columns:minmax(0,1fr)}
body.bl-text-large .daily-col{grid-template-rows:none}
body.bl-text-large .daily-grid .tile,body.bl-text-large .feature-row .tile{min-height:78px}
body.bl-text-large .feature-row{grid-template-columns:minmax(0,1fr)}
body.bl-text-large .stats{grid-template-columns:minmax(0,1fr)}
body.bl-text-large .pt-strip{flex-wrap:wrap}
body.bl-text-large .pt-strip .pt-strip-text{flex:1 1 180px}
body.bl-text-large .pt-strip .pt-btn{margin-left:auto}

/* ===== FIX 15: hot flushes, night sweats, monthly check ===== */
.mn-card{background:#fffaf5;border:1px solid #ebdbd0;border-radius:22px;padding:16px;margin:0 0 14px;box-shadow:0 4px 14px #946f5b10}
.mn-eye{font:800 10px/1.5 var(--sans);letter-spacing:1.6px;color:#956478}
.mn-gap{margin-top:12px}
.mn-h{font:400 24px/1.2 var(--serif);margin:4px 0 6px;color:var(--ink)}
.mn-p{font:500 12.5px/1.55 var(--sans);color:var(--muted);margin:6px 0}
.mn-p b{color:var(--ink)}
.mn-big{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.mn-big button{border:0;border-radius:18px;padding:14px 8px;font:800 14px var(--sans);color:#fff;cursor:pointer}
.mn-big small{display:block;font:600 11px var(--sans);opacity:.85;margin-top:3px}
.mn-flush{background:linear-gradient(150deg,#d37b63,#b9647a)}
.mn-sweat{background:linear-gradient(150deg,#3d5a80,#132a46)}
.mn-sheet{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin:0 0 12px}
.mn-sheet h2{font:400 21px/1.2 var(--serif);margin:4px 0}
.mn-lbl{font:800 11px var(--sans);color:#5d4c47;margin:10px 0 4px}
.mn-lbl span{font-weight:600;color:var(--muted)}
.mn-chips{display:flex;flex-wrap:wrap;gap:7px}
.mn-chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 12px;font:700 12px var(--sans);color:var(--ink);cursor:pointer}
.mn-chip.on{background:var(--rose);border-color:var(--rose);color:#fff}
.mn-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.mn-row button{flex:1 1 130px}
.mn-pri{border:0;border-radius:99px;padding:13px;font:800 13.5px var(--sans);background:var(--navy);color:#fff;cursor:pointer}
.mn-sec{border:1.5px solid var(--line);border-radius:99px;padding:12px;font:800 13px var(--sans);background:#fff;color:var(--ink);cursor:pointer}
.mn-today{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:600 12.5px var(--sans);color:var(--muted);padding:10px 2px 2px;border-top:1px dashed var(--line)}
.mn-today b{font:800 13px var(--sans);color:var(--ink)}
.mn-bars{display:flex;align-items:flex-end;gap:4px;height:90px;margin:8px 0 4px}
.mn-bar{flex:1;display:flex;flex-direction:column-reverse;justify-content:flex-start;height:100%;gap:2px;min-width:0}
.mn-bar i{display:block;border-radius:4px 4px 2px 2px}
.mn-bar i.f{background:#e8a593}.mn-bar i.s{background:#7d93b4}
.mn-axis{display:flex;justify-content:space-between;font:700 9.5px var(--sans);color:#a08f88}
.mn-legend{display:flex;gap:14px;font:700 10.5px var(--sans);color:var(--muted);margin-top:6px}
.mn-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.mn-legend i.f{background:#e8a593}.mn-legend i.s{background:#7d93b4}
.mn-insight{background:#f2f6ef;border-radius:12px;padding:9px 11px;font:600 12px/1.5 var(--sans);color:#4f6450;margin:8px 0 0}
.mn-entry{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:0 0 14px;cursor:pointer}
.mn-entry b{display:block;font:800 13.5px var(--sans);color:var(--ink)}
.mn-entry small{display:block;font:600 11.5px var(--sans);color:var(--muted);margin-top:2px}
.mn-tag{flex:none;border-radius:99px;padding:6px 11px;font:800 11.5px var(--sans);background:#eef2ea;color:#4f6450}
.mn-tag.due{background:#fbe9e1;color:#9a4f3a}
.mn-scale-head{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;font:700 9px var(--sans);color:#a08f88;text-align:center;margin-bottom:4px}
.mn-q{border-bottom:1px dashed var(--line);padding:10px 0}
.mn-q b{display:block;font:700 13px var(--sans);color:var(--ink)}
.mn-q small{display:block;font:500 11px/1.4 var(--sans);color:var(--muted);margin:2px 0 7px}
.mn-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.mn-scale button{border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:8px 0;font:800 12px var(--sans);color:var(--ink);cursor:pointer}
.mn-scale button.on{background:var(--rose);border-color:var(--rose);color:#fff}
.mn-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.mn-ring{width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--rose) 0 var(--p),#f1e3da var(--p) 100%);display:grid;place-items:center}
.mn-ring div{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;font:400 28px var(--serif);color:var(--ink)}
.mn-band{display:inline-block;background:#fbe9e1;color:#9a4f3a;border-radius:99px;padding:5px 10px;font:800 11px var(--sans)}
.mn-sub{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mn-sub div{background:#fbf6f1;border-radius:12px;padding:8px 4px;text-align:center;font:600 10px/1.3 var(--sans);color:var(--muted)}
.mn-sub b{display:block;font:800 16px var(--sans);color:var(--ink)}
.mn-trend{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:10px}
.mn-trend div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font:700 9.5px var(--sans);color:#a08f88;min-width:0}
.mn-trend i{display:block;width:100%;background:#d99aaa;border-radius:6px 6px 2px 2px}
.mn-trend b{font:800 11px var(--sans);color:var(--ink);margin:3px 0 1px}

/* ===== FIX 16: My HRT ===== */
.mn-bar.hrt{outline:2px dashed var(--sage);outline-offset:2px;border-radius:4px}
.mn-trend div.hrt i{outline:2px dashed var(--sage);outline-offset:2px}
.mn-legend i.h{background:none;border:2px dashed var(--sage);box-sizing:border-box}
.hr-eye{font:800 10px/1.5 var(--sans);letter-spacing:1.6px;color:#956478}
.hr-gap{margin-top:12px}
.hr-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:0 0 12px}
.hr-item b{display:block;font:800 14px var(--sans);color:var(--ink);margin-top:2px}
.hr-item.hr-done{background:#f2f6ef;border-color:#d7e2d0}
.hr-due{background:linear-gradient(150deg,#132a46,#24426a);color:#f3e9e1;border-radius:22px;padding:16px;margin:0 0 12px}
.hr-due .hr-eye{color:#f0c4cf}
.hr-due h2{font:400 23px/1.2 var(--serif);margin:4px 0;color:#fff}
.hr-due p{font:500 12.5px/1.5 var(--sans);color:#dfe6ef;margin:0}
.hr-sites{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:6px}
.hr-site{border:1.5px solid #ffffff40;background:#ffffff14;color:#fff;border-radius:14px;padding:11px 6px;font:800 12.5px var(--sans);cursor:pointer}
.hr-site small{display:block;font:600 10px var(--sans);opacity:.8;min-height:12px;margin-top:2px}
.hr-site.sug{background:#f3e9e1;color:#132a46;border-color:#f3e9e1}
.hr-site.last{opacity:.6}
.hr-plain{display:block;width:100%;border:0;background:none;font:700 12px var(--sans);color:inherit;opacity:.85;padding:10px 0 0;cursor:pointer;text-decoration:underline}
.hr-stop{color:#9a4f3a;margin-bottom:6px}
.hr-link{border:0;background:none;font:700 12px var(--sans);color:var(--muted);text-decoration:underline;padding:4px 0;cursor:pointer}
.hr-tick{margin-top:10px;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:11px;font:800 13px var(--sans);color:var(--ink);cursor:pointer}
.hr-tick.on{background:var(--sage);border-color:var(--sage);color:#fff}
.hr-hist div{display:flex;justify-content:space-between;gap:10px;font:600 12.5px var(--sans);padding:9px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.hr-hist div:last-child{border:0}
.hr-hist b{color:var(--ink);font-weight:800}
.hr-list .su-row{color:var(--ink);font-weight:700}
.hr-ic{width:24px;text-align:center;font-size:17px;flex:none}
.hr-day{min-width:40px;text-align:center}
.hr-wide{width:100%;margin-top:6px}
.hr-form .su-input{margin-bottom:2px}
.hr-strip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(150deg,#132a46,#24426a);color:#fff;border:0;border-radius:20px;padding:13px 16px;margin:0 0 14px;cursor:pointer}
.hr-strip b{display:block;font:800 13.5px var(--sans)}
.hr-strip small{display:block;font:600 11.5px var(--sans);color:#dfe6ef;margin-top:2px}
.hr-strip span:last-child{margin-left:auto;font-size:18px}

/* ===== FIX 17: check-in + period reminders ===== */
.rm-row{font:600 12.5px/1.5 var(--sans);color:#5d4c47;margin:10px 0 4px}
.rm-row b{color:var(--rose)}
.rm-info{background:#fbf6f1;border-radius:12px;padding:10px 12px;font:600 11.5px/1.6 var(--sans);color:#5d4c47;margin-top:8px}
.rm-info b{color:var(--ink)}
.rm-changed{background:#fbe9e1;color:#7a4f45}
.rm-events{margin:8px 0 10px}
.rm-events div{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px dashed var(--line);font:600 11.5px/1.45 var(--sans);color:var(--muted)}
.rm-events b{font:800 12.5px var(--sans);color:var(--ink)}
.rm-nudge{background:linear-gradient(145deg,#fdf0f2,#f8e3e7);border:1px solid #efd3d9;border-radius:20px;padding:14px 16px;margin:0 0 14px}
.rm-eye{font:800 10px var(--sans);letter-spacing:1.6px;color:#956478}
.rm-nudge h3{font:400 21px/1.2 var(--serif);margin:4px 0;color:var(--ink)}
.rm-nudge p{font:500 12.5px/1.5 var(--sans);color:#7d6a64;margin:0 0 10px}
.rm-btns{display:flex;gap:8px;flex-wrap:wrap}
.rm-btns button{flex:1 1 110px;border:0;border-radius:99px;padding:11px 10px;font:800 12.5px var(--sans);cursor:pointer}
.rm-yes{background:var(--rose);color:#fff}
.rm-no{background:#fff;color:var(--ink);border:1.5px solid var(--line)!important}
.rm-link{display:block;margin:8px auto 0;border:0;background:none;font:700 11.5px var(--sans);color:var(--muted);text-decoration:underline;cursor:pointer}
.rm-checkin{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fffaf5;border:1px solid #ebdbd0;border-radius:20px;padding:13px 16px;margin:0 0 14px;cursor:pointer;font-size:20px;color:var(--rose)}
.rm-checkin b{display:block;font:800 13.5px var(--sans);color:var(--ink)}
.rm-checkin small{display:block;font:600 11.5px var(--sans);color:var(--muted);margin-top:2px}
.rm-checkin span:last-child{margin-left:auto;font-size:18px;color:#b39b93}

/* ===== FIX 18: For my doctor ===== */
.dr-inc{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px dashed var(--line);background:none;padding:10px 2px;font:700 13px var(--sans);color:var(--muted);cursor:pointer;text-align:left}
.dr-inc.on{color:var(--ink)}
.dr-inc b{color:var(--sage)}
.dr-qbox{min-height:76px;resize:vertical;font-size:14px}
.dr-saveq{margin-top:8px;width:100%}
.dr-preview{overflow-x:auto;margin:0 0 14px;border-radius:14px;box-shadow:0 6px 20px #6a4a3a22}
.dr-page{background:#fff;color:#222;font-family:Helvetica,Arial,sans-serif;padding:18px 16px 12px;min-width:0}
.dr-page header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid #132a46;padding-bottom:8px;margin-bottom:10px}
.dr-page h2{font:700 19px Helvetica,Arial,sans-serif;color:#132a46;margin:0}
.dr-page header p{font-size:10.5px;color:#666;margin:3px 0 0}
.dr-who{font-size:11px;line-height:1.5;text-align:right}
.dr-who b{font-size:12.5px}
.dr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.dr-box{border:1px solid #d8d8d8;border-radius:6px;padding:8px 10px;min-width:0}
.dr-box h3{font:700 9.5px Helvetica,Arial,sans-serif;letter-spacing:1.2px;color:#956478;margin:0 0 5px}
.dr-box p{font-size:10.5px;line-height:1.5;margin:3px 0;color:#222}
.dr-box table{width:100%;border-collapse:collapse;font-size:10px}
.dr-box th,.dr-box td{text-align:left;padding:2px 3px;border-bottom:1px solid #eee}
.dr-box th{color:#666;font-weight:600}
.dr-flag{background:#fff4ef;border-left:3px solid #c0563a;padding:4px 7px;color:#7a3b2a!important}
.dr-note{color:#777!important;font-size:9.5px!important}
.dr-wide{grid-column:1/-1}
.dr-q{border:1px dashed #bbb;border-radius:6px;padding:7px 10px}
.dr-empty{grid-column:1/-1;font-size:12px;color:#777}
.dr-bars{display:flex;align-items:flex-end;gap:3px;height:56px;margin:4px 0}
.dr-bars>div{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.dr-col{flex:1;width:100%;display:flex;flex-direction:column-reverse}
.dr-col i{display:block;width:100%;background:#d99aaa}
.dr-col i.s{background:#7d93b4}
.dr-bars>div.mk .dr-col{outline:1.5px dashed #5f7660;outline-offset:1px}
.dr-bars small{font-size:8.5px;color:#666;white-space:nowrap}
.dr-key{display:flex;gap:10px;flex-wrap:wrap;font-size:9px;color:#666;margin-bottom:3px}
.dr-key i{display:inline-block;width:8px;height:8px;background:#d99aaa;margin-right:4px}
.dr-key i.s{background:#7d93b4}.dr-key i.m{background:none;outline:1.5px dashed #5f7660}
.dr-page footer{display:flex;justify-content:space-between;gap:10px;font-size:8.5px;color:#777;border-top:1px solid #ddd;margin-top:10px;padding-top:5px}
@media (max-width:540px){.dr-preview .dr-grid{grid-template-columns:minmax(0,1fr)}}
#drPrint{display:none}
@media print{
  body.dr-printing>*:not(#drPrint){display:none!important}
  body.dr-printing{background:#fff!important}
  body.dr-printing #drPrint{display:block}
  #drPrint .dr-page{width:186mm;margin:0 auto;padding:10mm 0 0;box-shadow:none;zoom:1}
  #drPrint .dr-grid{grid-template-columns:1fr 1fr}
  #drPrint .dr-box{break-inside:avoid}
  @page{size:A4;margin:10mm 12mm}
}

/* ===== FIX 19: Home check-in cleanup + My week ===== */
.feature-row.feature-one{grid-template-columns:minmax(0,1fr)}
.feature-row.feature-one .tile{min-height:84px}
.ck-patterns{display:block;margin:10px 0 0 auto;border:0;background:none;font:700 12px var(--sans);color:var(--rose);cursor:pointer;padding:2px 0}
.bl-ref-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bl-ref-btns .ok{margin-top:0;flex:1 1 120px}
.bl-ref .ok.wk-open{background:#f3e9e1;color:#132a46}
.bl-ref-btns .ok:not(.wk-open){background:none;color:#fff;border:1.5px solid #ffffff55}
.wk-pick{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 8px;margin:0 0 12px;font:800 13px var(--sans);color:var(--ink)}
.wk-pick button{border:0;background:none;font-size:22px;color:#b39b93;width:36px;height:32px;cursor:pointer}
.wk-pick button:disabled{opacity:.3;cursor:default}
.wk-card{background:#fffaf5;border:1px solid #ebdbd0;border-radius:20px;padding:10px 14px;margin:0 0 12px}
.wk-row{display:grid;grid-template-columns:84px minmax(0,1fr) 76px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.wk-row:last-child{border:0}
.wk-head{padding:2px 0 0;border:0;font:700 9.5px var(--sans);color:#a08f88}
.wk-nm{font:800 12.5px var(--sans);color:var(--ink);min-width:0}
.wk-nm small{display:block;font:600 10.5px/1.3 var(--sans);color:var(--muted);margin-top:2px}
.wk-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:end;height:30px;text-align:center}
.wk-head .wk-cells{height:auto}
.wk-col{display:flex;align-items:flex-end;height:100%}
.wk-bar{display:block;width:100%;border-radius:4px 4px 2px 2px;background:#e8b4a6}
.wk-bar.sleep{background:#7d93b4}.wk-bar.move{background:#a9b59d}.wk-bar.protein{background:#d9b48a}.wk-bar.water{background:#9fc0d6}.wk-bar.flush{background:#e8a593}
.wk-bar.none,.wk-bar.fut{height:4px!important;background:#efe4dc}
.wk-bar.fut{background:none;border-top:1.5px dashed #e2d2c7}
.wk-dot{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto;align-self:center;background:#efe4dc}
.wk-dot.good{background:#87967d}.wk-dot.mid{background:#e3b7a3}.wk-dot.low{background:#c98a96}.wk-dot.unsure{background:#cdc3bd}
.wk-dot.period{background:#c96d84}.wk-dot.plight{background:#e3a5b4}.wk-dot.fut{background:none;border:1.5px dashed #e2d2c7;box-sizing:border-box}
.wk-cells .wk-dot{align-self:center}
.wk-vs{font:700 10.5px/1.3 var(--sans);color:var(--muted);text-align:right;min-width:0}
.wk-vs b{display:block;font:800 13px var(--sans);color:var(--ink)}
.wk-vs .up{color:#5f7660}.wk-vs .down{color:#b45e4a}
.wk-hl{background:linear-gradient(150deg,#132a46,#24426a);color:#f3e9e1;border-radius:20px;padding:14px 16px;margin:0 0 10px}
.wk-eye{font:800 10px var(--sans);letter-spacing:1.6px;color:#f0c4cf}
.wk-hl h2{font:400 21px var(--serif);margin:4px 0 8px;color:#fff}
.wk-hl ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wk-hl li{display:flex;gap:9px;font:500 12.5px/1.5 var(--sans)}
.wk-hl li span{width:24px;height:24px;border-radius:8px;background:#ffffff1a;display:grid;place-items:center;flex:none;font-size:12px}
.wk-small b{font:800 13px var(--sans);color:var(--ink)}
.wk-small .mn-p{margin:4px 0}

/* ===== PHASE B1: login details ===== */
.acct-login-box{border-top:1px dashed var(--line);margin-top:12px;padding-top:12px}
.acct-login{display:flex;gap:8px;flex-wrap:wrap}
.acct-login button{flex:1 1 140px}
.acct-form{display:grid;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--paper-2)}
.acct-form p{margin:0;font-size:13.5px}
.acct-form label{display:grid;gap:4px;font:700 12px var(--sans);color:var(--muted)}
/* ===== PHASE B2: cloud sync status ===== */
.acct-sync{border:1px solid var(--line);border-radius:14px;padding:12px;margin:12px 0;background:var(--paper-2)}
.acct-sync .label{margin-bottom:4px}
.acct-sync-line{margin:0 0 10px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.acct-sync-line[data-state="retry"],.acct-sync-line[data-state="error"],.acct-sync-line[data-state="signin"]{color:#9a4a2f}
.acct-sync .acct-warn{margin:0 0 10px}
.acct-sync .acct-warn p{margin:0}
.acct-sync .acct-row{display:flex;flex-wrap:wrap;gap:8px}

/* ===== FIX 21 ===== */
/* Store search: the Phase 24 card style (#view .store-card{display:flex!important}) was beating [hidden] */
#view .store-card[hidden], #view .store-group[hidden], #view .pw-store-featured[hidden] { display: none !important; }
/* back button on inner screens */
.bk-btn{display:inline-flex;align-items:center;gap:4px;margin:6px 0 2px;border:1px solid var(--line,#e2d3d0);background:#fffaf7;border-radius:22px;padding:8px 16px 8px 12px;font:700 14px var(--sans);color:#9b4f6a;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-btn:focus-visible{outline:3px solid #e6b3c0;outline-offset:2px}
/* supplements: a time for each time of day */
.supp-slot-pick.su21{display:grid;gap:8px}
.supp-slot-pick.su21 .supp-slot-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.supp-slot-pick.su21 .supp-slot-row label{margin:0;white-space:nowrap}
.supp-slot-pick.su21 .supp-slot-time{margin:0;min-width:0;width:100%}
.supp-slot-pick.su21 .supp-slot-row:has(input[type=checkbox]:not(:checked)) .supp-slot-time{opacity:.45}
.supp-slot-note{margin:0;font-size:12.5px;color:var(--muted,#7a6670)}
/* reminders: choose days */
.rm-days{margin-top:12px}
.rm-days[hidden]{display:none!important}
.rm-day-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.rm-day{height:40px;border-radius:20px;border:1px solid #e2d3d0;background:#fff;font:700 14px var(--sans);color:#7a6670;cursor:pointer;padding:0}
.rm-day.on{background:#9b4f6a;border-color:#9b4f6a;color:#fff}
.rm-days-note{margin:8px 0 0;font-size:13px;color:var(--muted,#7a6670)}
/* ===== FIX 22: no cycle assumed ===== */
.cycle-card.cy-empty{display:block;padding:20px}
.cycle-card.cy-empty h2{margin:4px 0 6px}
.cycle-card.cy-empty p{margin:0;font-size:14.5px;line-height:1.5}
/* ===== PHASE B3: first upload ===== */
.b3-card h3{font:600 21px var(--serif);color:#5a2f3e;margin:2px 0 6px}
.b3-card p{font-size:14px;line-height:1.5;margin:0 0 8px}
.b3-rows{border-top:1px dashed var(--line,#e2d3d0);margin:8px 0}
.b3-r{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line,#e2d3d0);font-size:13.5px}
.b3-r b{text-align:right}
.b3-r.off,.b3-r.off b{color:#a8969c;font-weight:500}
.b3-tot{display:flex;justify-content:space-between;font:700 14.5px var(--sans);margin:4px 0 10px}
.b3-step{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:7px 0;overflow-wrap:anywhere}
.b3-n{width:22px;height:22px;border-radius:50%;background:#f3dfe5;color:#9b4f6a;font:700 12px var(--sans);display:grid;place-items:center;flex:none}
.b3-n.done{background:#e3eedf;color:#4f7a4a}.b3-n.run{background:#9b4f6a;color:#fff}
.b3-bar{height:10px;border-radius:5px;background:#f0e3e0;overflow:hidden;margin:6px 0}.b3-bar i{display:block;height:100%;background:#9b4f6a;transition:width .3s}
.b3-ok{background:#eef5ec;border:1px solid #cfe0ca;border-radius:14px;padding:12px;font-size:14px;color:#3f6a3a;margin:8px 0}
.b3-small{font-size:12.5px;color:var(--muted,#7a6670)}
.b3-card .primary,.b3-card .secondary{width:100%;margin-top:8px}
/* ===== PHASE B4: phone notifications ===== */
.push-card h3{font:600 21px var(--serif);color:#5a2f3e;margin:2px 0 6px}
.push-card p{font-size:14px;line-height:1.5;margin:0 0 8px}
.push-info{background:#f8eef0;border-radius:14px;padding:10px 12px;font-size:13.5px;margin:8px 0}
.push-ok{background:#eef5ec;border:1px solid #cfe0ca;border-radius:14px;padding:10px 12px;font-size:13.5px;color:#3f6a3a;margin:4px 0 10px;overflow-wrap:anywhere}
.push-small{font-size:12.5px;color:var(--muted,#7a6670);margin-top:8px}
.push-card .primary,.push-card .secondary{width:100%;margin-top:8px}
/* ===== FIX 23: focused Home ===== */
.f23-feel,.f23-pattern,.f23-doc{position:relative;overflow:hidden}
.f23-sun{position:absolute;right:-8px;top:-8px;width:74px;opacity:.35;fill:none;stroke:#d9a35c;stroke-width:1.2;pointer-events:none}
.f23-feel h2,.f23-pattern h2,.f23-doc h2{font:400 24px/1.2 var(--serif);margin:4px 0 12px}
.f23-feel .eyebrow,.f23-doc .eyebrow{color:var(--rose)}
.f23-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.f23-face{border:1px solid var(--line);background:#fffaf6;border-radius:18px;padding:10px 0 8px;display:grid;justify-items:center;gap:4px;font:700 12px var(--sans);color:var(--fg);cursor:pointer}
.f23-face.on{border:2px solid var(--fg);background:var(--bg)}
.f23-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.f23-chip{border-radius:16px;padding:7px 11px;font:600 12.5px var(--sans);background:#fbf2ea;border:1px solid var(--line);color:#5a2f3e;cursor:pointer}
.f23-chip.on{background:#f6e1e6;border-color:#d9a3b2}
.f23-save{width:100%}
.f23-pattern{background:linear-gradient(135deg,#eef3e8,#f7f4ea);border-color:#d6e0cc}
.f23-pattern .eyebrow{color:#5f7a56}.f23-pattern h2{color:#3f5c39;font-size:22px;margin-bottom:6px}.f23-pattern p{margin:0;font-size:13.5px;color:#5d6a57;line-height:1.45}
.f23-pat-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.f23-bars{display:flex;gap:10px;align-items:end}
.f23-bar{display:grid;justify-items:center;gap:4px;font:700 11px var(--sans);color:#4f6a47}.f23-bar b{font:700 15px var(--serif)}.f23-bar span{width:42px;border-radius:10px 10px 4px 4px;display:block}
.f23-small{font-size:12px!important;margin-top:8px!important;color:#7d8a77!important}
.f23-dots{display:flex;gap:6px;margin:4px 0 10px}.f23-dots i{width:22px;height:8px;border-radius:4px;background:#dfe6d8}.f23-dots i.on{background:#87967d}
.f23-doc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;background:linear-gradient(135deg,#f9e9ec,#fbf3ec)}
.f23-doc h2{font-size:22px;margin:3px 0 4px}.f23-doc p{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.f23-doc .secondary{padding:9px 14px}
.f23-head{margin:6px 2px 8px}
.f23-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f23-grid .tile{margin:0;min-width:0}
.f23-water{display:flex;align-items:center;gap:6px;padding-right:10px}
.f23-tile-main{display:flex;align-items:center;gap:inherit;background:none;border:0;padding:0;text-align:left;flex:1;min-width:0;color:inherit;cursor:pointer;font:inherit}
.f23-tile-main>span:last-child{min-width:0}
.f23-plus{flex:none;border:0;border-radius:14px;background:#87967d;color:#fff;font:800 12px var(--sans);padding:8px 8px;cursor:pointer;position:relative;z-index:1}
.f23-add{width:100%;margin:12px 0 14px;border:1.5px dashed #d3a3b2;background:#fffaf6;border-radius:18px;padding:13px;font:700 14px var(--sans);color:#9b4f6a;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.su-bleed{display:block;margin-top:12px;background:none;border:0;color:#f0c4cf;font:700 13.5px var(--sans);padding:0;cursor:pointer;text-decoration:underline}
body.bl-text-large .f23-faces{grid-template-columns:repeat(2,minmax(0,1fr))}
body.bl-text-large .f23-grid{grid-template-columns:minmax(0,1fr)}
body.bl-text-large .f23-pat-row{grid-template-columns:minmax(0,1fr)}
@media (max-width:350px){.f23-pat-row{grid-template-columns:minmax(0,1fr)}.f23-doc{grid-template-columns:minmax(0,1fr)}}
.f23-add{display:block;cursor:default;text-align:left;padding:12px 14px}
.f23-add-head{display:flex;align-items:center;gap:6px;color:#9b4f6a}.f23-add-head b{flex:1}
.f23-add-head .text-btn{font:700 13px var(--sans);color:#9b4f6a;background:none;border:0;cursor:pointer}
.f23-more{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.f23-more button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:7px 11px;font:600 12.5px var(--sans);color:#5a2f3e;cursor:pointer}

/* ===== PHASE C1: AI companion (live) ===== */
.c1-consent h2{font:600 24px var(--serif);color:#5a2f3e;margin:6px 0}
.c1-lab{font:700 12px var(--sans);letter-spacing:.08em;color:#9b4f6a;margin:14px 0 4px}
.c1-li{display:flex;gap:8px;font-size:14px;line-height:1.45;margin:6px 0;color:#5d4a51}.c1-li b{flex:none;width:16px}
.c1-li.yes b{color:#3f6a3a}.c1-li.no b{color:#a0453a}
.c1-notnow{width:100%;margin-top:8px}
.c1-ctx{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font:500 13px var(--sans);color:#6b5860;margin:10px 0;cursor:pointer;min-height:44px;text-align:left}
.c1-ctx b{color:#9b4f6a;font-weight:700;white-space:nowrap}
.c1-ctx-list{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:10px 12px;margin:-4px 0 10px;font-size:13px;line-height:1.5;color:#5d4a51}
.c1-ctx-list p{margin:6px 0 0;color:#8a7880;font-size:12.5px}
.c1-chat .message{white-space:pre-line}
.c1-red{background:#fff3f0;border:1.5px solid #d98b7c;border-radius:16px;padding:12px 13px;margin:0 0 10px;max-width:92%}
.c1-red b{display:block;color:#8a2f22;font-size:14.5px;margin-bottom:4px}.c1-red p{margin:0 0 8px;font-size:13.5px;color:#5d4a51}
.c1-red.urgent{background:#fdeaea;border-color:#c0473a}
.c1-red-acts{display:flex;flex-wrap:wrap;gap:6px}
.c1-mini{display:inline-flex;align-items:center;min-height:40px;border:1px solid #c58ea0;border-radius:18px;padding:6px 12px;font:700 13px var(--sans);color:#9b4f6a;background:#fff;text-decoration:none;cursor:pointer}
.c1-red.urgent .c1-mini{border-color:#c0473a;color:#8a2f22}
.c1-typing{display:flex;gap:5px;align-items:center;width:58px}
.c1-typing span{width:7px;height:7px;border-radius:50%;background:#c9a2ad;animation:c1dot 1.2s infinite}
.c1-typing span:nth-child(2){animation-delay:.2s}.c1-typing span:nth-child(3){animation-delay:.4s}
@keyframes c1dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.c1-typing span{animation:none}}
.c1-limit{background:#f3ece8;border-radius:16px;padding:12px;font-size:14px;line-height:1.45;color:#5d4a51;text-align:center;margin:8px 0}
.c1-err{margin:8px 0}
.c1-foot{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#8a7880;margin:6px 4px 0;min-height:32px}
.c1-foot .text-btn{font:700 13px var(--sans);color:#9b4f6a;background:none;border:0;cursor:pointer;min-height:40px}
body.bl-text-large .c1-ctx{flex-wrap:wrap}
/* ===== PHASE C2: free trial, Keep Bloomsy, purchases ===== */
.c2-pill{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;font:500 13.5px var(--sans);color:#5d4a51;margin:0 0 12px;text-decoration:none;min-height:44px}
.c2-pill b{color:#9b4f6a;font-weight:700;white-space:nowrap}
.c2-free{font-size:13px;line-height:1.45;color:#3f6a3a;background:#eef5ec;border-radius:12px;padding:9px 11px;margin:0 0 12px}
.c2-free a{color:#3f6a3a;font-weight:700}
.c2-lock{position:relative;overflow:hidden;border-radius:20px;margin-bottom:12px}
.c2-blur{filter:blur(3px);opacity:.5;pointer-events:none;user-select:none}
.c2-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:rgba(255,250,247,.84);padding:16px;gap:4px}
.c2-over b{font:600 18px var(--serif);color:#5a2f3e}.c2-over span{font-size:13.5px;line-height:1.4;color:#5d4a51;margin-bottom:6px;max-width:280px}
.c2-mini{display:inline-flex;align-items:center;min-height:44px;border:0;border-radius:22px;padding:8px 18px;font:700 14px var(--sans);background:#9b4f6a;color:#fff;cursor:pointer}
.c2-price{font:400 40px var(--serif);color:#5a2f3e;margin:4px 0 0}.c2-price small{font:600 14px var(--sans);color:#7a6870}
.c2-left{margin:0 0 6px;font-size:14px}.c2-left b{color:#9b4f6a}
.c2-tiers{margin:6px 0 10px}
.c2-tier{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13.5px;color:#7a6870;margin-top:6px;background:#fff}
.c2-tier.on{border:2px solid #9b4f6a;background:#f8eef0;color:#5a2f3e;font-weight:700}.c2-tier.on b{color:#9b4f6a}
.c2-pay{display:flex;gap:8px;margin-top:10px}.c2-pay span{flex:1;text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px;font:700 12.5px var(--sans);color:#5a2f3e;background:#fff}
.c2-ok{background:#eef5ec;border:1px solid #cfe0ca;border-radius:18px;padding:16px;text-align:center;margin-bottom:12px}.c2-ok h2{color:#3f6a3a;font-family:var(--serif)}
.c2-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:9px 0;border-top:1px dashed var(--line)}.c2-row b{color:#5a2f3e;text-align:right}
.c2-mine .primary{width:100%;margin-top:10px}
.c2-restore{font:700 13px var(--sans);color:#9b4f6a;background:none;border:0;cursor:pointer;min-height:40px;text-decoration:underline;padding:0 4px}
.c2-ai-end h2{font-family:var(--serif);color:#5a2f3e}.c2-ai-end .primary{width:100%}
body.bl-text-large .c2-pill,body.bl-text-large .c2-row{flex-wrap:wrap}
.c2-pill{width:100%;cursor:pointer;text-align:left}
.c2-link{background:none;border:0;padding:0 2px;font:700 13px var(--sans);color:inherit;text-decoration:underline;cursor:pointer;min-height:32px}

/* LIVE: "Add Bloomsy to your Home Screen first" card on the welcome screen (phone browsers only) */
.install-card{background:#fff;border:1.5px solid #e4b9c5;border-radius:18px;padding:14px 16px;margin:0 0 16px;text-align:left;font:500 14px/1.5 var(--sans);color:#5d4a51}
.install-card > b{font:600 17px/1.3 var(--serif);color:#5a2f3e;display:inline}
.install-card .install-time{display:inline-block;margin-left:8px;font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#9b4f6a;background:#f8e9ea;border-radius:999px;padding:3px 8px;vertical-align:2px}
.install-card p{margin:8px 0 0}
.install-card .auth-link{margin-top:8px;padding:0;min-height:40px}