:root {
  color-scheme: light;
  --ink: #1e3340;
  --deep: #245f52;
  --deep-2: #356f5b;
  --leaf: #8ead73;
  --leaf-soft: #dfead4;
  --paper: #fbf7ec;
  --paper-2: #f5efe1;
  --cream: #fffaf0;
  --sand: #e9dbc3;
  --line: rgba(47, 78, 65, .16);
  --muted: #697c76;
  --sun: #f2d36d;
  --sky: #dbe9ee;
  --shadow: 0 20px 44px rgba(52, 76, 65, .16);
  --sticker-shadow: 0 18px 28px rgba(76, 87, 67, .18), inset 0 1px 0 rgba(255,255,255,.86);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 22% 7%, rgba(191, 215, 198, .52), transparent 22%),
    radial-gradient(circle at 94% 9%, rgba(211, 229, 234, .62), transparent 21%),
    radial-gradient(circle at 55% 95%, rgba(228, 213, 180, .48), transparent 24%),
    linear-gradient(160deg, #f7fbf8 0%, #fbf7ec 46%, #eef6f1 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    linear-gradient(90deg, rgba(63, 87, 71, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(63, 87, 71, .035) 1px, transparent 1px),
    radial-gradient(circle, rgba(60, 82, 70, .06) 1px, transparent 1.2px);
  background-size: 22px 22px, 22px 22px, 9px 9px;
}
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.overlay.hidden { display: none !important; pointer-events: none !important; visibility: hidden !important; }

.app-shell {
  width: min(100%, 480px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
}
.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 150px;
  height: 150px;
  opacity: .72;
  filter: drop-shadow(0 12px 16px rgba(83, 104, 82, .12));
}
.app-shell::before {
  left: -38px;
  top: 6px;
  background:
    radial-gradient(ellipse at 50% 50%, #8fae81 0 44%, transparent 45%) 16px 20px / 46px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #c7d79b 0 44%, transparent 45%) 54px 44px / 56px 26px no-repeat,
    radial-gradient(ellipse at 50% 50%, #7ea38f 0 44%, transparent 45%) 26px 78px / 54px 26px no-repeat;
  transform: rotate(-30deg);
}
.app-shell::after {
  right: -46px;
  top: 10px;
  background:
    radial-gradient(ellipse at 50% 50%, #789b74 0 44%, transparent 45%) 42px 18px / 42px 22px no-repeat,
    radial-gradient(ellipse at 50% 50%, #abc79b 0 44%, transparent 45%) 18px 52px / 48px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #6f967d 0 44%, transparent 45%) 66px 76px / 46px 24px no-repeat;
  transform: rotate(28deg);
}

.login-screen,
.phone-screen {
  position: relative;
  z-index: 1;
}
.login-screen {
  height: 100%;
  padding: 54px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.leaf-field { position: absolute; inset: 24px 16px auto auto; width: 148px; height: 118px; opacity: .72; }
.leaf-field span {
  position: absolute;
  width: 62px;
  height: 30px;
  border-radius: 100% 8px 100% 8px;
  background: linear-gradient(135deg, #9cbf94, #e2d99c);
  transform: rotate(-19deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.leaf-field span:nth-child(2) { left: 52px; top: 28px; transform: rotate(22deg); background: linear-gradient(135deg, #a8c4cd, #c5d9ab); }
.leaf-field span:nth-child(3) { left: 16px; top: 70px; transform: rotate(13deg); background: linear-gradient(135deg, #dcb985, #a8cfa2); }

.brand-badge {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 28px 28px 28px 10px;
  color: #fffdf4;
  background: linear-gradient(145deg, #244f45, #7ba987);
  font-size: 23px;
  font-weight: 950;
  box-shadow: var(--sticker-shadow);
}
.eyebrow { margin: 0 0 8px; color: var(--deep); font-size: 12px; font-weight: 950; letter-spacing: .05em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 22px 0 12px; font-size: 38px; line-height: 1.06; letter-spacing: .01em; }
h2 { margin-bottom: 8px; font-size: 23px; line-height: 1.22; }
h3 { margin-bottom: 8px; font-size: 17px; }
.lead, .micro-copy, .source-note, .section-head p, .hp-copy p, .suggestion-card p {
  color: var(--muted);
  line-height: 1.55;
}

.login-card,
.compact-panel,
.suggestion-card,
.plan-card,
.weekly-poster,
.overlay-card,
.task-tile {
  background: rgba(255, 252, 242, .88);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
}
.login-card { margin-top: 28px; padding: 22px; border-radius: 30px; }
label { display: block; margin-bottom: 14px; color: var(--deep); font-size: 13px; font-weight: 900; }
input, textarea {
  width: 100%;
  margin-top: 8px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  outline: none;
  color: var(--ink);
  background: rgba(255,255,250,.9);
}
textarea { min-height: 96px; resize: none; line-height: 1.55; }
.login-actions, .action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.primary-btn, .secondary-btn, .text-btn, .small-pill, .icon-btn, .wide-soft-btn, .icon-action {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 15px;
  font-weight: 950;
}
.primary-btn {
  color: #fffdf4;
  background: linear-gradient(135deg, #2c6757, #66997c);
  box-shadow: 0 14px 28px rgba(42, 93, 77, .22);
}
.secondary-btn, .wide-soft-btn {
  color: var(--deep);
  background: rgba(255,255,250,.82);
  border: 1px solid var(--line);
}
.text-btn { color: var(--deep); background: transparent; }

.phone-screen {
  height: 100%;
  padding: max(11px, env(safe-area-inset-top)) 16px calc(108px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.phone-screen::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 84px;
  height: 34px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 70%, rgba(108,143,101,.35) 0 18px, transparent 19px),
    radial-gradient(ellipse at 92% 64%, rgba(231,203,144,.38) 0 22px, transparent 23px);
  opacity: .7;
}
.topbar {
  height: 68px;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mascot-face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 34% 52%, #1e3340 0 3px, transparent 4px),
    radial-gradient(circle at 66% 52%, #1e3340 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 72%, #e5907a 0 9px, transparent 10px),
    radial-gradient(ellipse at 50% 14%, #223845 0 24px, transparent 25px),
    #ffe5ce;
  box-shadow: inset 0 -2px 0 rgba(71,49,37,.12), 0 10px 18px rgba(38,61,52,.14);
  position: relative;
}
.mascot-face::before,
.mascot-face::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 18px;
  top: 4px;
  border-radius: 50%;
  background: #203746;
}
.mascot-face::before { left: 6px; transform: rotate(-26deg); }
.mascot-face::after { right: 7px; transform: rotate(28deg); }
.topbar strong { display: block; font-size: 23px; line-height: 1.04; letter-spacing: .08em; }
.topbar span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.small-pill {
  min-height: 38px;
  color: var(--deep);
  background: rgba(255,255,250,.82);
  border: 1px solid rgba(54, 96, 79, .13);
  box-shadow: 0 10px 20px rgba(49, 76, 66, .1);
  font-size: 12px;
}

.tab-page {
  display: none;
  height: calc(100vh - 68px - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}
.tab-page.active { display: flex; flex-direction: column; gap: 10px; }

.hp-stage {
  min-height: 214px;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: center;
}
.hp-ring {
  width: 146px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffaf0 0 51%, transparent 52%),
    conic-gradient(var(--deep) var(--hp-angle, 0deg), rgba(142, 173, 115, .2) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 22px 42px rgba(36,95,82,.14);
}
.hp-ring::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 22px;
  margin-top: -96px;
  border-radius: 999px;
  background: rgba(238, 211, 122, .8);
  filter: blur(.2px);
}
.hp-ring.uncalibrated {
  background:
    radial-gradient(circle at 50% 50%, #fffaf0 0 51%, transparent 52%),
    conic-gradient(rgba(172,196,205,.35) 0deg, rgba(142,173,115,.18) 360deg);
}
.hp-ring span { font-size: 27px; font-weight: 950; }
.hp-ring small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.hp-copy h2 { font-size: 25px; }

.suggestion-card {
  min-height: 122px;
  padding: 14px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 12px;
  align-items: center;
  background: rgba(255, 252, 242, .92);
}
.suggestion-card strong { display: block; margin-bottom: 5px; font-size: 19px; line-height: 1.25; }
.suggestion-card p { margin: 0; font-size: 12px; }
.sticker {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: block;
  background: linear-gradient(145deg, #f7ebd7, #e0d0b8);
  position: relative;
  box-shadow: var(--sticker-shadow);
}
.battery-sticker::before {
  content: "";
  position: absolute;
  left: 18px; top: 17px;
  width: 27px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(145deg, #a7bd75, #718f50);
  box-shadow: inset -5px -6px 10px rgba(68,90,45,.18), inset 5px 5px 8px rgba(255,255,255,.35);
}
.battery-sticker::after {
  content: "";
  position: absolute;
  left: 26px; top: 27px;
  width: 11px; height: 19px;
  clip-path: polygon(48% 0, 100% 0, 62% 44%, 100% 44%, 34% 100%, 48% 55%, 10% 55%);
  background: #f3dd7d;
  filter: drop-shadow(0 1px 0 rgba(78,84,33,.25));
}

.compact-panel {
  padding: 11px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.ai-dock {
  margin-top: auto;
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px 1fr 64px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border-radius: 26px;
  background: rgba(255,255,250,.91);
  box-shadow: var(--shadow);
}
.xd-avatar {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ai-input {
  height: 50px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  background: #f8f4ea;
  text-align: left;
  font-size: 13px;
}
.icon-action { color: white; background: #245f52; font-size: 13px; }

.section-head { flex: 0 0 auto; padding-top: 4px; }
.section-head h2 { font-size: 23px; margin-bottom: 6px; }
.section-head p { margin-bottom: 0; font-size: 12px; line-height: 1.45; }

.plan-card {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 10px;
  align-items: center;
}
.plan-card span, .plan-card small { display: block; color: var(--muted); font-size: 12px; }
.plan-card strong { display: block; margin: 3px 0; font-size: 16px; }

.task-library {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.task-tile {
  min-height: 0;
  padding: 9px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 252, 242, .92);
}
.task-tile::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 58px;
  height: 58px;
  border-radius: 60% 20% 60% 30%;
  background: rgba(142,173,115,.2);
}
.task-figure {
  height: 54px;
  margin-bottom: 7px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.65) 0 14px, transparent 15px),
    linear-gradient(145deg, #f7ecd8, #dfcfb8);
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 18px rgba(73,88,66,.12);
}
.task-figure::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 24px;
  width: 72px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(145deg, #2b6757, #1f5148);
  transform: rotate(-9deg);
  box-shadow: 0 8px 12px rgba(35,70,56,.17);
}
.task-figure::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, #1d3442 0 11px, transparent 12px),
    #f1c96c;
}
.task-figure span { display: none; }
.task-figure.variant-0::before {
  box-shadow:
    0 8px 12px rgba(35,70,56,.17),
    22px 20px 0 -4px #f7f6ed,
    54px 24px 0 -6px #8ead73;
}
.task-figure.variant-1 { background: linear-gradient(145deg, #e5f1e4, #fbf0cf); }
.task-figure.variant-2 { background: linear-gradient(145deg, #edf4f3, #e7d8be); }
.task-figure.variant-3 { background: linear-gradient(145deg, #f4ead8, #dcebcf); }
.task-tile h3 { margin: 0 0 3px; font-size: 15px; position: relative; z-index: 1; }
.task-tile p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.28; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-tile small { display: block; margin-top: 4px; color: var(--deep); font-size: 10px; line-height: 1.18; font-weight: 900; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wide-soft-btn { flex: 0 0 auto; width: 100%; min-height: 42px; }

.weekly-poster {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  border-radius: 30px;
  color: #fff7dc;
  background:
    radial-gradient(circle at 84% 12%, rgba(241,211,109,.9) 0 16px, transparent 17px),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,.18) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px),
    #24473e;
  background-size: auto, auto, 22px 22px, 22px 22px, auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 42px rgba(28,58,48,.24), inset 0 0 0 1px rgba(255,255,255,.16);
}
.weekly-poster::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 60px;
  height: 170px;
  background:
    radial-gradient(ellipse at 50% 50%, #91b47a 0 42%, transparent 43%) 0 0 / 28px 16px repeat-y;
  opacity: .8;
}
.weekly-poster::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -20px;
  width: 138px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 60%, #f6dfad 0 20px, transparent 21px),
    radial-gradient(ellipse at 40% 14%, #99b779 0 20px, transparent 21px),
    radial-gradient(ellipse at 70% 38%, #789d72 0 20px, transparent 21px);
}
.poster-sun { width: 0; height: 0; }
.weekly-poster span { display: block; margin: 8px 0 8px 40px; color: #e6d9a6; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.weekly-poster strong { display: block; margin-left: 40px; font-size: 30px; line-height: 1.1; color: #fff2c3; }
.weekly-poster p { position: relative; z-index: 1; margin: 12px 0 0 40px; color: #f4ead1; line-height: 1.55; }
.mini-chart {
  height: 104px;
  margin: 20px 0 14px 40px;
  padding: 10px;
  border-radius: 16px;
  display: block;
  background: rgba(255, 247, 222, .9);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
.mini-chart i {
  position: absolute;
  bottom: 16px;
  width: 12px;
  height: 12px !important;
  border-radius: 50%;
  background: #94ad68;
  border: 2px solid #fff6d9;
  z-index: 2;
}
.mini-chart i:nth-child(1) { left: 10%; bottom: 22px; }
.mini-chart i:nth-child(2) { left: 23%; bottom: 28px; }
.mini-chart i:nth-child(3) { left: 36%; bottom: 52px; }
.mini-chart i:nth-child(4) { left: 49%; bottom: 44px; }
.mini-chart i:nth-child(5) { left: 62%; bottom: 34px; }
.mini-chart i:nth-child(6) { left: 75%; bottom: 65px; }
.mini-chart i:nth-child(7) { left: 88%; bottom: 76px; }
.mini-chart::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 6%;
  bottom: 18px;
  height: 70px;
  background:
    linear-gradient(160deg, transparent 0 13%, #7fa065 14% 17%, transparent 18% 30%, #7fa065 31% 34%, transparent 35% 47%, #7fa065 48% 51%, transparent 52% 66%, #7fa065 67% 70%, transparent 71%);
  opacity: .7;
}
.mini-chart::after {
  content: "一   二   三   四   五   六   日";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  color: rgba(36,71,62,.75);
  font-size: 10px;
  letter-spacing: 5px;
}
.report-result { flex: 0 0 auto; font-size: 12px; color: var(--muted); }

.bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(calc(100% - 22px), 458px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 9px;
  border-radius: 30px;
  background: rgba(255, 250, 239, .92);
  box-shadow: 0 18px 60px rgba(24,48,42,.17), inset 0 0 0 1px rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.88);
  transform: translateX(-50%);
}
.bottom-tabs button {
  min-height: 76px;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  gap: 2px;
  font-weight: 950;
}
.bottom-tabs button.active {
  color: #fffaf0;
  background: linear-gradient(145deg, #2d6658, #1f5046);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 20px rgba(36,95,82,.18);
}
.bottom-tabs b { font-size: 13px; line-height: 1; }
.tab-icon {
  width: 58px;
  height: 48px;
  display: block;
  position: relative;
  border-radius: 19px;
  background: linear-gradient(145deg, #f5ead8, #ddccb2);
  box-shadow: var(--sticker-shadow);
}
.bottom-tabs button.active .tab-icon {
  background: linear-gradient(145deg, #f7e8ca, #d3c09f);
}
.tab-icon::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 2px;
  width: 25px;
  height: 36px;
  opacity: .85;
  background:
    radial-gradient(ellipse at 50% 50%, #8ead73 0 45%, transparent 46%) 0 2px / 20px 12px no-repeat,
    radial-gradient(ellipse at 50% 50%, #6f967d 0 45%, transparent 46%) 6px 17px / 22px 13px no-repeat;
  transform: rotate(-22deg);
}
.icon-battery::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 11px;
  width: 21px;
  height: 27px;
  border-radius: 7px;
  background: linear-gradient(145deg, #afc47e, #789557);
  box-shadow: inset -4px -5px 8px rgba(62,81,42,.2), inset 4px 4px 7px rgba(255,255,255,.4);
}
.icon-battery i {
  position: absolute;
  left: 27px;
  top: 20px;
  width: 9px;
  height: 16px;
  clip-path: polygon(45% 0, 100% 0, 60% 45%, 100% 45%, 25% 100%, 42% 58%, 8% 58%);
  background: #f0d46f;
  z-index: 2;
}
.icon-battery::after {
  right: -9px;
  bottom: 0;
}
.icon-pill::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, #fffaf0 0 50%, #9cb66a 50%);
  box-shadow: inset 0 0 0 2px rgba(104,92,64,.18), 0 6px 10px rgba(76,87,67,.14);
}
.icon-paper::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 10px;
  width: 28px;
  height: 32px;
  border-radius: 6px;
  transform: rotate(5deg);
  background:
    linear-gradient(90deg, transparent 0 4px, rgba(120,90,58,.32) 4px 22px, transparent 22px) 7px 9px / 18px 3px no-repeat,
    linear-gradient(90deg, rgba(103,151,127,.5) 0 9px, transparent 9px) 8px 21px / 18px 7px no-repeat,
    #efe4cf;
  box-shadow: inset 0 0 0 2px rgba(111,90,57,.18), 0 7px 10px rgba(76,87,67,.14);
}
.icon-paper i::before {
  content: "NEWS";
  position: absolute;
  left: 18px;
  top: 8px;
  z-index: 3;
  color: #8b7048;
  font-size: 8px;
  font-weight: 950;
  transform: rotate(5deg);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(31,48,43,.38);
  backdrop-filter: blur(10px);
}
.overlay-card {
  width: min(100%, 448px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  padding: 22px;
  border-radius: 30px;
  background: #fffaf0;
}
.overlay-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-weight: 950; }
.icon-btn { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; color: var(--muted); background: rgba(36,95,82,.08); font-size: 24px; }
.survey-track { height: 6px; margin-bottom: 18px; overflow: hidden; border-radius: 999px; background: rgba(36,95,82,.1); }
.survey-track span { display: block; width: var(--survey-progress, 20%); height: 100%; background: linear-gradient(90deg, var(--sun), var(--deep)); }
.choice-list { display: grid; gap: 10px; margin: 16px 0; }
.choice-list button {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 18px;
  text-align: left;
  color: var(--ink);
  background: rgba(255,255,250,.92);
  border: 1px solid var(--line);
  font-weight: 900;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pill-row button {
  min-height: 39px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--deep);
  background: rgba(255,255,250,.9);
  border: 1px solid var(--line);
  font-weight: 900;
}
.pill-row button.active, .choice-list button:active { color: white; background: var(--deep); }
.source-note { margin: 13px 0 0; font-size: 12px; }
.result-illustration {
  height: 104px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 24% 48%, #f0c85c 0 18px, transparent 19px),
    radial-gradient(circle at 70% 52%, #8bbfa4 0 28px, transparent 29px),
    linear-gradient(135deg, #e6f2ec, #fff2c5);
  margin-bottom: 16px;
}
.task-detail-card #taskDetailBody { min-height: 340px; }
.detail-visual {
  height: 150px;
  border-radius: 30px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, #fff4dc, #dcebcf);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.detail-visual::before {
  content: "";
  position: absolute;
  left: 96px; top: 54px;
  width: 98px; height: 31px;
  border-radius: 999px;
  background: #2a6556;
  transform: rotate(-7deg);
  box-shadow: -40px -11px 0 #f2c96a, 58px 14px 0 #93b486;
}
.timer-card { text-align: center; }
.timer-visual {
  width: 218px; height: 218px;
  margin: 18px auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fffaf0 0 54%, transparent 55%),
    conic-gradient(#245f52, #8ead73, #f0c85c, #245f52);
  box-shadow: 0 22px 52px rgba(36,95,82,.16);
}
.timer-visual span { font-size: 52px; font-weight: 950; }
.checkin-card { max-height: calc(100vh - 32px); }
.checkin-card #cardResult {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.checkin-card img {
  width: 100%;
  max-height: min(58vh, 560px);
  object-fit: contain;
  border-radius: 22px;
  display: block;
  border: 0;
  background: transparent;
}
.checkin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.checkin-actions button:disabled { opacity: .72; cursor: wait; }
.checkin-wisdom {
  margin-top: 13px;
  color: #5e7068;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650;
}

@media (max-width: 370px) {
  .phone-screen { padding-inline: 12px; }
  .hp-stage { grid-template-columns: 124px 1fr; min-height: 184px; }
  .hp-ring { width: 122px; }
  .hp-copy h2 { font-size: 22px; }
  .task-library { gap: 8px; }
  .bottom-tabs button { min-height: 70px; }
  .tab-icon { width: 52px; height: 44px; }
}

/* Botanical board fidelity pass: make the H5 feel like the reference visual board,
   not a generic app shell. */
body {
  background:
    radial-gradient(circle at 12% 4%, rgba(183, 209, 215, .58), transparent 18%),
    radial-gradient(circle at 92% 0%, rgba(220, 236, 230, .72), transparent 19%),
    linear-gradient(180deg, #f9fbf6 0%, #fbf7ec 100%);
}
body::before {
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(38, 71, 61, .055) 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(38, 71, 61, .025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(38, 71, 61, .025) 1px, transparent 1px);
  background-size: 10px 10px, 24px 24px, 24px 24px;
}
.phone-screen {
  padding: max(8px, env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, transparent 0 31px, rgba(53, 96, 83, .026) 31px 32px, transparent 32px),
    linear-gradient(180deg, transparent 0 31px, rgba(53, 96, 83, .026) 31px 32px, transparent 32px);
  background-size: 32px 32px;
}
.phone-screen::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 94px;
  width: 118px;
  height: 82px;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(ellipse at 80% 72%, #f3d98d 0 12px, transparent 13px),
    radial-gradient(ellipse at 59% 58%, #fff8df 0 13px, transparent 14px),
    radial-gradient(ellipse at 70% 44%, #f5e6aa 0 13px, transparent 14px),
    radial-gradient(ellipse at 82% 46%, #fff5dc 0 12px, transparent 13px),
    radial-gradient(ellipse at 36% 64%, #90ad73 0 20px, transparent 21px),
    radial-gradient(ellipse at 25% 38%, #789d72 0 17px, transparent 18px);
  filter: drop-shadow(0 8px 10px rgba(80, 94, 70, .13));
}
.app-shell::before {
  left: -24px;
  top: 2px;
  width: 190px;
  height: 132px;
  opacity: .92;
  background:
    linear-gradient(26deg, transparent 48%, rgba(79,113,89,.42) 49% 51%, transparent 52%) 10px 72px / 128px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #7e9f91 0 44%, transparent 45%) 15px 56px / 58px 26px no-repeat,
    radial-gradient(ellipse at 50% 50%, #c8d89e 0 44%, transparent 45%) 55px 34px / 64px 28px no-repeat,
    radial-gradient(ellipse at 50% 50%, #93b083 0 44%, transparent 45%) 83px 72px / 54px 25px no-repeat,
    radial-gradient(ellipse at 50% 50%, #d5e0bd 0 44%, transparent 45%) 114px 52px / 46px 22px no-repeat;
  transform: rotate(-21deg);
}
.app-shell::after {
  right: -30px;
  top: 0;
  width: 190px;
  height: 130px;
  opacity: .9;
  background:
    linear-gradient(144deg, transparent 48%, rgba(79,113,89,.42) 49% 51%, transparent 52%) 46px 58px / 130px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #789b74 0 44%, transparent 45%) 36px 22px / 50px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #abc79b 0 44%, transparent 45%) 74px 45px / 58px 26px no-repeat,
    radial-gradient(ellipse at 50% 50%, #6f967d 0 44%, transparent 45%) 116px 18px / 50px 24px no-repeat,
    radial-gradient(ellipse at 50% 50%, #bfd0a7 0 44%, transparent 45%) 122px 68px / 48px 22px no-repeat;
  transform: rotate(14deg);
}
.topbar {
  height: 122px;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 15px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(36,71,62,.16), transparent);
}
.brand-title {
  gap: 10px;
  justify-content: center;
  text-align: center;
  position: relative;
}
.brand-title > div { min-width: 0; }
.mascot-face {
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border: 3px solid #fffaf0;
  background:
    radial-gradient(circle at 34% 55%, #1e3340 0 2.5px, transparent 3.4px),
    radial-gradient(circle at 66% 55%, #1e3340 0 2.5px, transparent 3.4px),
    radial-gradient(circle at 29% 66%, #f1a396 0 3px, transparent 4px),
    radial-gradient(circle at 71% 66%, #f1a396 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 76%, #c97467 0 6px, transparent 7px),
    radial-gradient(ellipse at 50% 13%, #203746 0 24px, transparent 25px),
    #ffe3ca;
}
.topbar strong {
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: .08em;
  color: #233b49;
  text-shadow: 0 2px 0 rgba(255,255,255,.72);
}
.topbar span {
  color: #6b7f7b;
  font-size: 14px;
  letter-spacing: .02em;
  margin-top: 5px;
}
.small-pill {
  position: absolute;
  right: 0;
  top: 18px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
  background: rgba(255, 252, 242, .72);
}
.tab-page {
  height: calc(100vh - 122px - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.hp-stage {
  min-height: 178px;
  grid-template-columns: 132px 1fr;
  gap: 13px;
}
.hp-ring {
  width: 132px;
  border: 1px solid rgba(255,255,255,.82);
}
.hp-ring span { font-size: 25px; }
.hp-copy h2 { font-size: 23px; }
.hp-copy p { font-size: 14px; line-height: 1.46; }
.suggestion-card {
  min-height: 105px;
  border-radius: 26px;
  grid-template-columns: 72px 1fr;
}
.suggestion-card strong {
  font-size: 18px;
  line-height: 1.26;
}
.compact-panel {
  border-radius: 22px;
  padding: 9px;
}
.ai-dock {
  min-height: 67px;
  border-radius: 24px;
  position: relative;
  z-index: 2;
}
.section-head h2 { font-size: 31px; line-height: 1.05; }
.section-head p { font-size: 14px; }
.plan-card {
  border-radius: 26px;
  padding: 11px 14px;
}
.task-library {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.task-tile {
  border-radius: 26px;
  padding: 9px;
  background:
    radial-gradient(circle at 94% 94%, rgba(139, 174, 115, .22) 0 34px, transparent 35px),
    rgba(255, 252, 242, .94);
}
.task-tile:first-child {
  grid-column: 1 / 3;
  min-height: 136px;
  display: grid;
  grid-template-columns: 42% 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 12px;
}
.task-tile:nth-child(n+4) { display: none; }
.task-tile:first-child h3 {
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: 26px;
  color: var(--deep);
}
.task-tile:first-child p { font-size: 13px; -webkit-line-clamp: 3; }
.task-tile:first-child small { font-size: 12px; -webkit-line-clamp: 3; }
.task-figure {
  height: 58px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.72) 0 18px, transparent 19px),
    radial-gradient(circle at 92% 22%, rgba(147,180,134,.3) 0 26px, transparent 27px),
    linear-gradient(145deg, #f6ead5, #e7f1df);
}
.task-tile:first-child .task-figure {
  grid-row: 1 / 4;
  height: 112px;
  border-radius: 26px;
  margin-bottom: 0;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.76) 0 22px, transparent 23px),
    radial-gradient(circle at 82% 25%, rgba(255,231,159,.45) 0 24px, transparent 25px),
    radial-gradient(ellipse at 20% 80%, rgba(134, 167, 113, .52) 0 36px, transparent 37px),
    linear-gradient(145deg, #eaf6ef, #fff2cd);
}
.task-tile:first-child .task-figure::before {
  left: 45px;
  top: 62px;
  width: 92px;
  height: 18px;
  border-radius: 999px;
  background: #2b6757;
  transform: rotate(-12deg);
  box-shadow:
    -24px 10px 0 -3px #f5f2e7,
    24px 19px 0 -5px #8ead73,
    52px 18px 0 -7px #6f967d;
}
.task-tile:first-child .task-figure::after {
  left: 28px;
  top: 42px;
  width: 34px;
  height: 34px;
  background:
    radial-gradient(ellipse at 50% 48%, #2f4a50 0 14px, transparent 15px),
    radial-gradient(circle at 50% 54%, #f1c96c 0 16px, transparent 17px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.52);
}
.wide-soft-btn { min-height: 39px; }
.weekly-poster {
  border-radius: 30px;
  padding: 20px 20px 18px;
  background:
    radial-gradient(circle at 84% 13%, #f0d15e 0 18px, transparent 19px),
    radial-gradient(circle at 91% 20%, rgba(255,249,209,.8) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.055) 1px, transparent 1px),
    #21483f;
  background-size: auto, auto, 31px 31px, 31px 31px, auto;
}
.weekly-poster strong {
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: 38px;
}
.weekly-poster p {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 246, 207, .15);
}
.mini-chart {
  height: 126px;
  border-radius: 20px;
}
.mini-chart::before {
  background:
    linear-gradient(157deg, transparent 0 12%, #7fa065 13% 16%, transparent 17% 29%, #7fa065 30% 33%, transparent 34% 48%, #7fa065 49% 52%, transparent 53% 66%, #7fa065 67% 70%, transparent 71%),
    linear-gradient(162deg, transparent 0 18%, rgba(127,160,101,.46) 19% 22%, transparent 23% 40%, rgba(127,160,101,.46) 41% 44%, transparent 45% 62%, rgba(127,160,101,.46) 63% 66%, transparent 67%);
}
.bottom-tabs {
  width: min(calc(100% - 26px), 444px);
  padding: 8px 10px;
  border-radius: 32px;
  background: rgba(255, 251, 240, .95);
}
.bottom-tabs button {
  min-height: 78px;
  border-radius: 26px;
}
.tab-icon {
  width: 66px;
  height: 50px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 12px 12px rgba(72, 85, 63, .16));
}
.tab-icon::before,
.tab-icon::after,
.tab-icon i,
.tab-icon i::before,
.tab-icon i::after { box-sizing: border-box; }
.tab-icon::after {
  right: 0;
  bottom: 0;
  width: 66px;
  height: 50px;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 50%, #8ead73 0 45%, transparent 46%) 47px 18px / 22px 12px no-repeat,
    radial-gradient(ellipse at 50% 50%, #6f967d 0 45%, transparent 46%) 44px 31px / 24px 13px no-repeat,
    radial-gradient(ellipse at 50% 50%, #afc99c 0 45%, transparent 46%) 8px 28px / 22px 12px no-repeat,
    linear-gradient(132deg, transparent 42%, rgba(97,128,89,.65) 43% 46%, transparent 47%) 35px 14px / 28px 30px no-repeat;
  transform: none;
  z-index: 1;
}
.tab-icon i {
  position: absolute;
  left: 11px;
  top: 4px;
  width: 45px;
  height: 42px;
  border-radius: 18px;
  background: #fffdf4;
  z-index: 2;
  clip-path: none !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.86),
    inset 0 0 0 1px rgba(100, 84, 58, .12),
    0 10px 18px rgba(70, 76, 57, .12);
}
.icon-battery::before,
.icon-pill::before,
.icon-paper::before { display: none; }
.icon-battery i::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  width: 20px;
  height: 27px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #e7c864 0 5px, transparent 5px) 6px -4px / 9px 9px no-repeat,
    linear-gradient(145deg, #b8cd82, #739251);
  box-shadow: inset -4px -5px 8px rgba(62,81,42,.2), inset 4px 4px 7px rgba(255,255,255,.44);
}
.icon-battery i::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 18px;
  width: 9px;
  height: 16px;
  clip-path: polygon(45% 0, 100% 0, 60% 45%, 100% 45%, 25% 100%, 42% 58%, 8% 58%);
  background: #f0d46f;
  z-index: 5;
}
.icon-pill i::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fffaf0 0 50%, #95af64 50%);
  transform: rotate(-32deg);
  box-shadow: inset 0 0 0 2px rgba(104,92,64,.18), 0 6px 10px rgba(76,87,67,.14);
}
.icon-pill i::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 21px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(118, 91, 52, .18);
  transform: rotate(-32deg);
  z-index: 5;
}
.icon-paper i::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 27px;
  height: 32px;
  border-radius: 7px;
  transform: rotate(5deg);
  background:
    linear-gradient(90deg, rgba(142,112,72,.4), rgba(142,112,72,.4)) 7px 10px / 18px 3px no-repeat,
    linear-gradient(90deg, rgba(103,151,127,.5) 0 9px, transparent 9px 12px, rgba(142,112,72,.25) 12px) 7px 21px / 19px 7px no-repeat,
    #efe4cf;
  box-shadow: inset 0 0 0 2px rgba(111,90,57,.18), 0 7px 10px rgba(76,87,67,.14);
  z-index: 5;
}
.icon-paper i::after {
  content: "NEWS";
  position: absolute;
  left: 13px;
  top: 6px;
  color: #8b7048;
  font-size: 8px;
  font-weight: 950;
  transform: rotate(5deg);
  z-index: 5;
}
.bottom-tabs button.active .tab-icon {
  background: transparent;
  filter: drop-shadow(0 14px 14px rgba(12, 42, 35, .25));
}
.bottom-tabs button.active .tab-icon i {
  background: #fff7df;
}
@media (max-width: 370px) {
  .topbar { height: 112px; }
  .topbar strong { font-size: 30px; }
  .tab-page { height: calc(100vh - 112px - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .hp-stage { min-height: 160px; }
  .suggestion-card { min-height: 98px; }
}

/* Raster asset pass: these are ChatGPT-generated project assets, replacing CSS placeholder drawings. */
.suggestion-card .battery-sticker {
  background: url("/web/assets/tab-battery.webp") center / 128% 128% no-repeat !important;
  box-shadow: none !important;
}
.suggestion-card .battery-sticker::before,
.suggestion-card .battery-sticker::after {
  display: none !important;
}

.task-tile:first-child .task-figure {
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04)),
    url("/web/assets/rest-eyemask-card.webp") center / cover no-repeat !important;
}

/* Final task artwork override: keep this at EOF so older placeholder and
   sticker rules cannot win in the cascade. */
.task-figure::before,
.task-figure::after,
.task-tile:first-child .task-figure::before,
.task-tile:first-child .task-figure::after {
  content: none !important;
  display: none !important;
}

.task-figure {
  overflow: hidden !important;
  background-color: rgba(255, 252, 242, .9) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.task-tile:first-child .task-figure {
  height: 112px !important;
  border-radius: 24px !important;
  background: url("/web/assets/task-eyemask-clean.webp") center 48% / cover no-repeat !important;
}

.task-tile:nth-child(2) .task-figure {
  background: url("/web/assets/task-grounding.webp") center / cover no-repeat !important;
}

.task-tile:nth-child(3) .task-figure {
  background: url("/web/assets/task-neck-release.webp") center / cover no-repeat !important;
}

/* === HP V3 TRUE FINAL OVERRIDE: keep at EOF === */
.phone-screen {
  background:
    url("/web/assets/hp-leaf-frame-v3.webp") center top / 100% 100% no-repeat,
    linear-gradient(180deg, #fffdf8 0%, #fbf7ee 72%, #fffaf1 100%) !important;
  padding: max(8px, env(safe-area-inset-top)) 16px calc(86px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.topbar,
.phone-screen::before,
.phone-screen::after,
.app-shell::before,
.app-shell::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-page {
  height: calc(100vh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.hp-v3-page.tab-page.active {
  gap: 10px !important;
  padding-top: 18px !important;
}

.hp-v3-brand {
  height: 120px !important;
}

.hp-v3-brand img {
  width: 88px !important;
  height: 112px !important;
}

.hp-v3-meter-card {
  min-height: 180px !important;
  padding-top: 14px !important;
  border-radius: 26px !important;
}

.hp-v3-ring.hp-ring {
  width: 126px !important;
  height: 126px !important;
}

.hp-v3-ring #hpValue {
  font-size: 46px !important;
}

.hp-v3-leaf-left {
  width: 166px !important;
  height: 132px !important;
  top: 48px !important;
}

.hp-v3-meter-meta {
  min-height: 40px !important;
  margin-top: 11px !important;
}

.hp-v3-consume-card {
  min-height: 132px !important;
  padding: 15px 18px 12px !important;
  border-radius: 26px !important;
}

.hp-v3-consume-item img {
  width: 34px !important;
  height: 34px !important;
}

.hp-v3-consume-item strong {
  font-size: 11px !important;
}

.hp-v3-task-card {
  min-height: 218px !important;
  padding: 10px 10px 12px !important;
  border-radius: 26px !important;
}

.hp-v3-task-image {
  height: 92px !important;
}

.hp-v3-task-copy {
  padding: 10px 10px 9px !important;
}

.hp-v3-task-copy h2 {
  font-size: 22px !important;
}

.hp-v3-task-copy p {
  font-size: 12px !important;
}

.hp-v3-actions .primary-btn,
.hp-v3-actions .secondary-btn {
  min-height: 42px !important;
}

.bottom-tabs {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  height: 62px !important;
  padding: 7px 10px !important;
  z-index: 20 !important;
}

.bottom-tabs button {
  height: 48px !important;
}

/* HP v3 final lock: must be the last block so old prototype overrides cannot
   leak into the approved first screen. */
.phone-screen {
  background:
    url("/web/assets/hp-leaf-frame-v3.webp") center top / 100% 100% no-repeat,
    linear-gradient(180deg, #fffdf8 0%, #fbf7ee 72%, #fffaf1 100%) !important;
  padding: max(8px, env(safe-area-inset-top)) 16px calc(86px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.topbar,
.phone-screen::before,
.phone-screen::after,
.app-shell::before,
.app-shell::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-page {
  height: calc(100vh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.hp-v3-page.tab-page.active {
  gap: 10px !important;
  padding-top: 18px !important;
}

.hp-v3-brand {
  height: 120px !important;
}

.hp-v3-brand img {
  width: 88px !important;
  height: 112px !important;
}

.hp-v3-meter-card {
  min-height: 180px !important;
  padding-top: 14px !important;
  border-radius: 26px !important;
}

.hp-v3-ring.hp-ring {
  width: 126px !important;
  height: 126px !important;
}

.hp-v3-ring #hpValue {
  font-size: 46px !important;
}

.hp-v3-leaf-left {
  width: 166px !important;
  height: 132px !important;
  top: 48px !important;
}

.hp-v3-meter-meta {
  min-height: 40px !important;
  margin-top: 11px !important;
}

.hp-v3-consume-card {
  min-height: 132px !important;
  padding: 15px 18px 12px !important;
  border-radius: 26px !important;
}

.hp-v3-consume-item img {
  width: 34px !important;
  height: 34px !important;
}

.hp-v3-consume-item strong {
  font-size: 11px !important;
}

.hp-v3-task-card {
  min-height: 218px !important;
  padding: 10px 10px 12px !important;
  border-radius: 26px !important;
}

.hp-v3-task-image {
  height: 92px !important;
}

.hp-v3-task-copy {
  padding: 10px 10px 9px !important;
}

.hp-v3-task-copy h2 {
  font-size: 22px !important;
}

.hp-v3-task-copy p {
  font-size: 12px !important;
}

.hp-v3-actions .primary-btn,
.hp-v3-actions .secondary-btn {
  min-height: 42px !important;
}

.bottom-tabs {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  height: 62px !important;
  padding: 7px 10px !important;
  z-index: 20 !important;
}

.bottom-tabs button {
  height: 48px !important;
}

/* HP first screen v3: asset-led reconstruction from the approved reference. */
.phone-screen {
  background:
    url("/web/assets/hp-leaf-frame-v3.webp") center top / 100% 100% no-repeat,
    linear-gradient(180deg, #fffdf8 0%, #fbf7ee 72%, #fffaf1 100%) !important;
  padding: max(8px, env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom)) !important;
}

.phone-screen::before,
.phone-screen::after,
.app-shell::before,
.app-shell::after,
.topbar {
  content: none !important;
  display: none !important;
}

.tab-page {
  height: calc(100vh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.hp-v3-page.tab-page.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px 0 0 !important;
  overflow: hidden !important;
}

.hp-v3-brand {
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 0 0 auto;
}

.hp-v3-brand img {
  width: 92px;
  height: 116px;
  object-fit: contain;
  display: block;
}

.hp-v3-brand h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  color: #0f1d24;
}

.hp-v3-brand p {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #7e8790;
}

.hp-v3-card {
  flex: 0 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(234, 229, 215, .86);
  background: rgba(255, 255, 252, .82);
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}

.hp-v3-meter-card {
  min-height: 188px;
  padding: 17px 18px 14px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.hp-v3-leaf-left {
  position: absolute;
  right: 4px;
  top: 48px;
  width: 178px;
  height: 140px;
  object-fit: contain;
  pointer-events: none;
}

.hp-v3-ring.hp-ring {
  width: 134px !important;
  height: 134px !important;
  aspect-ratio: 1;
  margin: 0 auto;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fffefa 0 54%, transparent 55%),
    conic-gradient(#24965c 0 var(--hp-angle, 234deg), rgba(232, 234, 221, .88) var(--hp-angle, 234deg) 360deg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hp-v3-ring.hp-ring::before,
.hp-v3-ring.hp-ring::after {
  content: none !important;
  display: none !important;
}

.hp-v3-ring #hpValue {
  font-size: 50px;
  line-height: .92;
  color: #2c965a;
  font-weight: 950;
  letter-spacing: 0;
}

.hp-v3-ring:not(.uncalibrated) #hpValue::after {
  content: "/100";
  margin-left: 4px;
  color: #7c8791;
  font-size: 19px;
  font-weight: 900;
}

.hp-v3-ring #hpStatus {
  margin-top: 8px;
  min-width: 70px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #2a9656;
  background: rgba(239, 244, 232, .95);
  font-size: 15px;
  font-weight: 950;
}

.hp-v3-meter-copy {
  display: none;
}

.hp-v3-meter-meta {
  width: min(92%, 330px);
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  border: 1px solid rgba(220, 222, 211, .9);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: rgba(255, 255, 253, .72);
  z-index: 2;
}

.hp-v3-meter-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e2e31;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.hp-v3-meter-meta span img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.hp-v3-meter-meta span b {
  color: #218d52;
  font-size: 19px;
}

.hp-v3-meter-meta i {
  width: 1px;
  height: 24px;
  background: #b6b9bd;
}

.hp-v3-consume-card {
  min-height: 142px;
  padding: 18px 18px 14px;
}

.hp-v3-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hp-v3-card-head h2 {
  margin: 0;
  color: #121c22;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
}

.hp-v3-detail-btn {
  min-height: 26px;
  padding: 0;
  color: #8b929a;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.hp-v3-consume-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hp-v3-consume-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  border-right: 1px solid rgba(217, 218, 210, .82);
}

.hp-v3-consume-item:last-child { border-right: 0; }

.hp-v3-consume-item img {
  width: 39px;
  height: 39px;
  object-fit: contain;
  display: block;
}

.hp-v3-consume-item strong {
  font-size: 12px;
  line-height: 1.1;
  color: #171f24;
  font-weight: 950;
}

.hp-v3-consume-item span {
  width: 58px;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: #eeece4;
  overflow: hidden;
}

.hp-v3-consume-item span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2b9d56;
}

.hp-v3-consume-item:nth-child(2) span i { background: #ffc30b; }
.hp-v3-consume-item:nth-child(3) span i { background: #ff7417; }
.hp-v3-consume-item:nth-child(4) span i { background: #8962e5; }

.hp-v3-consume-item b {
  color: #111920;
  font-size: 13px;
  font-weight: 950;
}

.hp-v3-task-card {
  min-height: 236px;
  padding: 11px 11px 14px;
}

.hp-v3-task-image {
  width: 100%;
  height: 105px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.hp-v3-task-copy {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px 12px 12px;
}

.hp-v3-task-copy h2 {
  margin: 0 0 5px;
  font-size: 23px;
  line-height: 1.05;
  color: #121c22;
  font-weight: 950;
}

.hp-v3-task-copy p {
  margin: 0;
  color: #78828b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}

.hp-v3-task-copy span,
.hp-v3-task-copy b {
  align-self: start;
  border-radius: 999px;
  padding: 6px 10px;
  color: #229750;
  background: #eef7e9;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.hp-v3-actions.compact-panel {
  display: grid;
  grid-template-columns: .8fr 2fr .8fr;
  gap: 9px;
  margin: 0;
  padding: 0 9px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hp-v3-actions .primary-btn,
.hp-v3-actions .secondary-btn {
  min-height: 48px;
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 16px;
}

.hp-v3-actions .primary-btn {
  background: linear-gradient(90deg, #2b914d, #209148) !important;
}

.hp-v3-actions .secondary-btn {
  color: #111920;
  background: rgba(255,255,255,.75) !important;
  border: 2px solid rgba(166, 194, 150, .78) !important;
}

.hp-v3-hidden-service {
  display: none !important;
}

.bottom-tabs {
  left: 16px !important;
  right: 16px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  height: 64px !important;
  padding: 7px 10px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(231, 226, 211, .9) !important;
  background: rgba(255, 255, 251, .9) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.bottom-tabs button {
  height: 50px !important;
  min-width: 0 !important;
  grid-template-columns: 40px auto !important;
  gap: 5px !important;
  border-radius: 25px !important;
  background: transparent !important;
  color: #48525a !important;
  box-shadow: none !important;
}

.bottom-tabs button.active {
  color: #218a4d !important;
  background: #f0f4e8 !important;
}

.bottom-tabs .tab-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  filter: none !important;
}

.bottom-tabs .tab-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bottom-tabs b {
  font-size: 16px !important;
  font-weight: 950 !important;
}

@media (max-height: 820px) {
  .hp-v3-page.tab-page.active { gap: 8px !important; padding-top: 10px !important; }
  .hp-v3-brand { height: 104px; }
  .hp-v3-brand img { width: 76px; height: 98px; }
  .hp-v3-brand h1 { font-size: 26px; }
  .hp-v3-meter-card { min-height: 168px; padding-top: 12px; }
  .hp-v3-ring.hp-ring { width: 116px !important; height: 116px !important; }
  .hp-v3-ring #hpValue { font-size: 42px; }
  .hp-v3-consume-card { min-height: 128px; padding-top: 14px; }
  .hp-v3-task-card { min-height: 212px; }
  .hp-v3-task-image { height: 86px; }
  .hp-v3-task-copy { padding-block: 10px; }
  .hp-v3-task-copy h2 { font-size: 20px; }
}

/* HP advice icons: user-provided generated assets for each blood-level band. */
.suggestion-card .battery-sticker {
  background: transparent center / contain no-repeat !important;
  border-radius: 22px !important;
}

.suggestion-card .battery-sticker::before,
.suggestion-card .battery-sticker::after {
  content: none !important;
  display: none !important;
}

.suggestion-card .battery-sticker[data-hp-band="uncalibrated"] {
  background-image: url("/web/assets/hp-uncalibrated.webp") !important;
}

.suggestion-card .battery-sticker[data-hp-band="hp-0-20"] {
  background-image: url("/web/assets/hp-0-20.webp") !important;
}

.suggestion-card .battery-sticker[data-hp-band="hp-21-40"] {
  background-image: url("/web/assets/hp-21-40.webp") !important;
}

.suggestion-card .battery-sticker[data-hp-band="hp-41-60"] {
  background-image: url("/web/assets/hp-41-60.webp") !important;
}

.suggestion-card .battery-sticker[data-hp-band="hp-61-80"] {
  background-image: url("/web/assets/hp-61-80.webp") !important;
}

.suggestion-card .battery-sticker[data-hp-band="hp-81-100"] {
  background-image: url("/web/assets/hp-81-100.webp") !important;
}

.toast-notice {
  position: fixed;
  left: 50%;
  bottom: 118px;
  z-index: 1600;
  max-width: min(360px, calc(100vw - 48px));
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(34, 82, 69, 0.94);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast-notice[data-tone="warn"] {
  background: rgba(127, 82, 40, 0.95);
}

.toast-notice.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.compact-actions {
  margin-top: 12px;
}

/* Task artwork v1: replace CSS-drawn placeholders with generated raster
   assets. This also removes the old hero-card sticker. */
.task-figure::before,
.task-figure::after,
.task-tile:first-child .task-figure::before,
.task-tile:first-child .task-figure::after {
  content: none !important;
  display: none !important;
}

.task-figure {
  overflow: hidden !important;
  background-color: rgba(255, 252, 242, .9) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.task-tile:first-child .task-figure {
  height: 112px !important;
  border-radius: 24px !important;
  background: url("/web/assets/task-eyemask-clean.webp") center 48% / cover no-repeat !important;
}

.task-tile:nth-child(2) .task-figure {
  background: url("/web/assets/task-grounding.webp") center / cover no-repeat !important;
}

.task-tile:nth-child(3) .task-figure {
  background: url("/web/assets/task-neck-release.webp") center / cover no-repeat !important;
}

/* Flat interaction pass: remove grey shadows behind buttons, inputs, panels and
   tabs so controls sit cleanly on the watercolor background. */
.phone-screen .compact-panel,
.phone-screen .suggestion-card,
.phone-screen .plan-card,
.phone-screen .task-tile,
.phone-screen .weekly-poster,
.phone-screen .ai-dock,
.phone-screen .primary-btn,
.phone-screen .secondary-btn,
.phone-screen .wide-soft-btn,
.phone-screen .icon-action,
.phone-screen .ai-input,
.phone-screen input,
.phone-screen textarea,
.phone-screen .hp-ring,
.bottom-tabs,
.bottom-tabs button,
.bottom-tabs button.active,
.bottom-tabs .tab-icon,
.bottom-tabs button.active .tab-icon,
.suggestion-card .battery-sticker {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.phone-screen .hp-ring {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8) !important;
}
.task-tile:first-child .task-figure::before {
  display: none !important;
}
.task-tile:first-child .task-figure::after {
  content: "放松一下" !important;
  left: auto !important;
  right: -4px !important;
  top: 9px !important;
  width: 58px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 62% 38% 62% 38% !important;
  background: #9fbe72 !important;
  color: #fffdf4 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  transform: rotate(-10deg) !important;
  box-shadow: 0 6px 10px rgba(75, 99, 61, .18) !important;
}

.weekly-poster {
  background: rgba(255, 252, 242, .72) url("/web/assets/weekly-board-fast-430.webp") center / cover no-repeat !important;
}
.weekly-poster::before,
.weekly-poster::after {
  display: none !important;
}
.weekly-poster > * {
  visibility: hidden !important;
}

.tab-icon {
  background: transparent center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 12px rgba(72, 85, 63, .18)) !important;
}
.tab-icon::before,
.tab-icon::after,
.tab-icon i,
.tab-icon i::before,
.tab-icon i::after {
  display: none !important;
}
.icon-battery { background-image: url("/web/assets/tab-battery.webp") !important; }
.icon-pill { background-image: url("/web/assets/tab-pill.webp") !important; }
.icon-paper { background-image: url("/web/assets/tab-report.webp") !important; }
.bottom-tabs button.active .tab-icon {
  background-color: transparent !important;
  filter: drop-shadow(0 14px 15px rgba(14, 42, 35, .28)) !important;
}

/* User-approved page plate: use the generated board as the shared background
   for the three main H5 tabs. Keep functional content unchanged. */
.phone-screen {
  background: #fbfaf6 url("/web/assets/main-page-bg-v2.webp") center top / 100% 100% no-repeat !important;
}

.phone-screen::before,
.app-shell::before,
.app-shell::after {
  display: none !important;
}

#hpSection,
#taskSection,
#reportSection {
  background: transparent !important;
}

.topbar::after {
  content: none !important;
}

/* The background image already includes the visual header. Keep only enough
   empty space for one subtitle-character gap before each tab's content. */
.topbar {
  height: 80px !important;
  padding: 0 !important;
}

.tab-page {
  height: calc(100vh - 80px - 114px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

@media (max-width: 370px) {
  .topbar {
    height: 80px !important;
  }

  .tab-page {
    height: calc(100vh - 80px - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* Cleanup pass: remove low-fidelity CSS decorations now that real artwork is
   provided by the page background and generated image assets. */
.hp-ring::before,
.phone-screen::after,
.task-tile::after,
.plan-card::after,
.compact-panel::after,
.wide-soft-btn::after,
.section-head::after,
.ai-dock::after {
  content: none !important;
  display: none !important;
}

.task-tile,
.plan-card,
.compact-panel,
.wide-soft-btn,
.ai-dock {
  background-image: none !important;
}

.task-figure {
  background-image: none !important;
}

.task-tile:first-child .task-figure {
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04)),
    url("/web/assets/rest-eyemask-card.webp") center / cover no-repeat !important;
}

/* Final task artwork override: this must remain after the legacy rest-eyemask
   rule above. */
.task-figure::before,
.task-figure::after,
.task-tile:first-child .task-figure::before,
.task-tile:first-child .task-figure::after {
  content: none !important;
  display: none !important;
}

.task-figure {
  overflow: hidden !important;
  background-color: rgba(255, 252, 242, .9) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.task-tile:first-child .task-figure {
  height: 112px !important;
  border-radius: 24px !important;
  background: url("/web/assets/task-eyemask-clean.webp") center 48% / cover no-repeat !important;
}

.task-tile:nth-child(2) .task-figure {
  background: url("/web/assets/task-grounding.webp") center / cover no-repeat !important;
}

.task-tile:nth-child(3) .task-figure {
  background: url("/web/assets/task-neck-release.webp") center / cover no-repeat !important;
}

/* === HP V3 TRUE FINAL OVERRIDE: keep at EOF === */
.phone-screen {
  background:
    url("/web/assets/hp-leaf-frame-v3.webp") center top / 100% 100% no-repeat,
    linear-gradient(180deg, #fffdf8 0%, #fbf7ee 72%, #fffaf1 100%) !important;
  padding: max(8px, env(safe-area-inset-top)) 16px calc(86px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.topbar,
.phone-screen::before,
.phone-screen::after,
.app-shell::before,
.app-shell::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-page {
  height: calc(100vh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.hp-v3-page.tab-page.active {
  gap: 10px !important;
  padding-top: 18px !important;
}

.hp-v3-brand { height: 120px !important; }
.hp-v3-brand img { width: 88px !important; height: 112px !important; }
.hp-v3-meter-card { min-height: 180px !important; padding-top: 14px !important; border-radius: 26px !important; }
.hp-v3-ring.hp-ring { width: 126px !important; height: 126px !important; }
.hp-v3-ring #hpValue { font-size: 46px !important; }
.hp-v3-leaf-left { width: 166px !important; height: 132px !important; top: 48px !important; }
.hp-v3-meter-meta { min-height: 40px !important; margin-top: 11px !important; }
.hp-v3-consume-card { min-height: 132px !important; padding: 15px 18px 12px !important; border-radius: 26px !important; }
.hp-v3-consume-item img { width: 34px !important; height: 34px !important; }
.hp-v3-consume-item strong { font-size: 11px !important; }
.hp-v3-task-card { min-height: 218px !important; padding: 10px 10px 12px !important; border-radius: 26px !important; }
.hp-v3-task-image { height: 92px !important; }
.hp-v3-task-copy { padding: 10px 10px 9px !important; }
.hp-v3-task-copy h2 { font-size: 22px !important; }
.hp-v3-task-copy p { font-size: 12px !important; }
.hp-v3-actions .primary-btn,
.hp-v3-actions .secondary-btn { min-height: 42px !important; }

.bottom-tabs {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  height: 62px !important;
  padding: 7px 10px !important;
  z-index: 20 !important;
}
.bottom-tabs button { height: 48px !important; }

/* === HP V4 reference reconstruction: final screen lock === */
.phone-screen {
  background:
    url("/web/assets/hp-v4-leaf-frame.webp") center top / 100% 100% no-repeat,
    linear-gradient(180deg, #fffef9 0%, #fffaf2 100%) !important;
  padding: max(8px, env(safe-area-inset-top)) 14px calc(86px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.topbar,
.phone-screen::before,
.phone-screen::after,
.app-shell::before,
.app-shell::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-page {
  height: calc(100vh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.hp-v3-page.tab-page.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 0 0 !important;
  overflow: hidden !important;
}

.hp-v3-page *,
.hp-v3-page *::before,
.hp-v3-page *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.hp-v3-brand {
  height: 118px !important;
  min-height: 118px !important;
  flex: 0 0 118px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
}

.hp-v3-brand img {
  width: 86px !important;
  height: 104px !important;
  object-fit: contain !important;
  display: block !important;
}

.hp-v3-brand h1 {
  margin: 0 0 8px !important;
  color: #111b20 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.hp-v3-brand p {
  margin: 0 !important;
  color: #748089 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.hp-v3-card {
  flex: 0 0 auto !important;
  border: 1px solid rgba(236, 231, 218, .78) !important;
  background: rgba(255, 255, 252, .84) !important;
  border-radius: 26px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hp-v3-meter-card {
  position: relative !important;
  min-height: 178px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 10px 14px 14px !important;
}

.hp-v3-meter-copy {
  display: none !important;
}

.hp-v3-leaf-left {
  position: absolute !important;
  right: 4px !important;
  bottom: 30px !important;
  top: auto !important;
  left: auto !important;
  width: 174px !important;
  height: 130px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hp-v3-ring.hp-ring {
  --p: 65%;
  position: relative !important;
  z-index: 2 !important;
  width: 132px !important;
  height: 132px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at center, rgba(255,255,248,.96) 0 54%, transparent 55%),
    conic-gradient(#258d4e 0 var(--p), rgba(228, 230, 218, .72) var(--p) 100%) !important;
  box-shadow: none !important;
}

.hp-v3-ring.hp-ring::before,
.hp-v3-ring.hp-ring::after {
  content: none !important;
  display: none !important;
}

.hp-v3-ring #hpValue {
  color: #278245 !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.hp-v3-ring #hpValue::after {
  content: "/100";
  margin-left: 4px;
  color: #6f7882;
  font-size: 18px;
  font-weight: 900;
}

.hp-v3-ring #hpStatus {
  position: absolute !important;
  left: 50% !important;
  bottom: 26px !important;
  transform: translateX(-50%) !important;
  min-width: 62px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(231, 237, 222, .88) !important;
  color: #2f8b49 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.hp-v3-meter-meta {
  position: relative !important;
  z-index: 2 !important;
  width: min(300px, 88%) !important;
  min-height: 36px !important;
  margin-top: 6px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: 1px solid rgba(224, 222, 209, .86) !important;
  border-radius: 999px !important;
  background: rgba(255,255,252,.9) !important;
  color: #202a2f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.hp-v3-meter-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.hp-v3-meter-meta img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.hp-v3-meter-meta b {
  color: #1b873f !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.hp-v3-meter-meta i {
  width: 1px !important;
  height: 22px !important;
  background: #aeb5ba !important;
  display: block !important;
}

.hp-v3-consume-card {
  min-height: 128px !important;
  padding: 14px 16px 12px !important;
}

.hp-v3-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 10px !important;
}

.hp-v3-card-head h2 {
  margin: 0 !important;
  color: #172127 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

.hp-v3-detail-btn {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #7c8490 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.hp-v3-consume-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.hp-v3-consume-item {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 0 8px !important;
}

.hp-v3-consume-item + .hp-v3-consume-item {
  border-left: 1px solid rgba(223, 222, 212, .72) !important;
}

.hp-v3-consume-item img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

.hp-v3-consume-item strong {
  color: #18252b !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.hp-v3-consume-item span {
  width: 54px !important;
  height: 7px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ece9df !important;
}

.hp-v3-consume-item span i {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #29964f, #45a760) !important;
}

.hp-v3-consume-item:nth-child(2) span i { background: linear-gradient(90deg, #ffc600, #ffd443) !important; }
.hp-v3-consume-item:nth-child(3) span i { background: linear-gradient(90deg, #ff6a1a, #ff9a38) !important; }
.hp-v3-consume-item:nth-child(4) span i { background: linear-gradient(90deg, #7a60df, #9b7cff) !important; }

.hp-v3-consume-item b {
  color: #0d171c !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.hp-v3-task-card {
  min-height: 242px !important;
  padding: 10px 10px 12px !important;
}

.hp-v3-task-image {
  width: 100% !important;
  height: 112px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}

.hp-v3-task-copy {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 10px 4px 10px !important;
}

.hp-v3-task-copy h2 {
  margin: 0 0 6px !important;
  color: #111b20 !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

.hp-v3-task-copy p {
  margin: 0 !important;
  color: #737d86 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

.hp-v3-task-copy span,
.hp-v3-task-copy b {
  align-self: start !important;
  margin-top: 2px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #e5f0de !important;
  color: #268441 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-weight: 950 !important;
}

.hp-v3-actions {
  display: grid !important;
  grid-template-columns: 1fr 2.5fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 46px !important;
}

.hp-v3-actions.hidden,
.hidden {
  display: none !important;
}

.hp-v3-actions .primary-btn,
.hp-v3-actions .secondary-btn {
  min-height: 46px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.hp-v3-actions .primary-btn {
  background: linear-gradient(90deg, #23883f, #2fa053) !important;
  color: #fff !important;
}

.hp-v3-actions .secondary-btn {
  background: rgba(255,255,252,.82) !important;
  color: #132026 !important;
  border: 1px solid #b7cea9 !important;
}

.bottom-tabs {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(15px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
  height: 66px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(235, 229, 213, .86) !important;
  background: rgba(255, 255, 251, .90) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 7px !important;
  z-index: 30 !important;
  overflow: hidden !important;
}

.bottom-tabs button {
  height: 50px !important;
  min-height: 0 !important;
  max-height: 50px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 34px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #414d52 !important;
  box-shadow: none !important;
  filter: none !important;
}

.bottom-tabs button.active {
  height: 50px !important;
  min-height: 0 !important;
  max-height: 50px !important;
  padding: 0 !important;
  background: #edf4e3 !important;
  color: #21833d !important;
}

.bottom-tabs button .tab-icon {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.bottom-tabs button .tab-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.bottom-tabs button b {
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

@media (max-width: 390px) {
  .hp-v3-brand { height: 108px !important; min-height: 108px !important; flex-basis: 108px !important; }
  .hp-v3-meter-card { min-height: 166px !important; }
  .hp-v3-ring.hp-ring { width: 120px !important; height: 120px !important; }
  .hp-v3-leaf-left { width: 150px !important; height: 114px !important; }
  .hp-v3-consume-card { min-height: 122px !important; }
  .hp-v3-task-card { min-height: 224px !important; }
  .hp-v3-task-image { height: 98px !important; }
}

.hidden,
.overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Local preview only: use the provided image as the third tab background. */
.phone-screen[data-active-tab="report"] {
  padding: 0 !important;
  background: url("/web/assets/report-v4-user-bg-fast.webp") center top / cover no-repeat !important;
}

.phone-screen[data-active-tab="report"] .topbar {
  display: none !important;
}

.phone-screen[data-active-tab="report"] .report-v4-page.tab-page.active {
  height: 100dvh !important;
  padding: 0 !important;
  background: transparent !important;
}

.phone-screen[data-active-tab="report"] .report-v4-title,
.phone-screen[data-active-tab="report"] .report-v4-poster,
.phone-screen[data-active-tab="report"] .report-v4-button,
.phone-screen[data-active-tab="report"] .report-result {
  display: none !important;
}

/* === Task overview final lock: scrollable task list + reading detail === */
.task-v4-page.tab-page.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding-top: 4px !important;
}

.task-v4-brand {
  flex: 0 0 86px !important;
}

.task-v4-habit-card {
  flex: 0 0 150px !important;
  min-height: 0 !important;
}

.task-v4-library-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 13px 14px 12px !important;
}

.task-v4-library-card .task-v4-card-head {
  flex: 0 0 auto !important;
}

.task-v4-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 4px 8px 0 !important;
  scroll-snap-type: y proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  min-height: 102px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) 82px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(226, 224, 213, .9) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 252, .94) !important;
  box-shadow: none !important;
  text-align: left !important;
  scroll-snap-align: start !important;
}

.task-v4-grid .task-overview-card::before,
.task-v4-grid .task-overview-card::after {
  content: none !important;
  display: none !important;
}

.task-overview-image {
  width: 116px !important;
  height: 76px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px !important;
  background: #f6f3ea !important;
}

.task-overview-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.task-overview-copy strong {
  color: #111b20 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-overview-copy small {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #18813d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.task-overview-copy small span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(240, 247, 233, .95) !important;
  white-space: nowrap !important;
}

.task-overview-copy small span + span {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-overview-meta {
  display: grid !important;
  justify-items: end !important;
  gap: 9px !important;
}

.task-overview-meta span,
.task-overview-meta b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 68px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.task-overview-meta span {
  color: #1f7e43 !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-overview-meta b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-v4-actions {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(200, 212, 190, .86) !important;
}

.task-detail-card #taskDetailBody {
  min-height: 0 !important;
}

#taskDetailOverlay .task-detail-card .action-row {
  display: none !important;
}

/* === Task detail two-stage FINAL lock === */
.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  grid-template-columns: 116px minmax(0, 1fr) 82px !important;
}

.task-overview-meta {
  display: grid !important;
  justify-items: end !important;
  gap: 9px !important;
}

.task-overview-meta span,
.task-overview-meta b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 68px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.task-overview-meta span {
  color: #1f7e43 !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-overview-meta b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-detail-start-btn {
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 16px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
}

.task-execution-card {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 13px !important;
}

.task-execution-hero {
  width: 100% !important;
  height: min(20dvh, 180px) !important;
  min-height: 132px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  background: #f6f3ea !important;
}

.task-execution-summary {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #314239 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.task-execution-summary strong {
  max-width: 48% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-execution-summary span,
.task-execution-summary b {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-execution-summary b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-execution-timer {
  width: min(56vw, 210px) !important;
  height: min(56vw, 210px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #0f2520 !important;
  background: radial-gradient(circle at 50% 42%, #fffefa 0%, #f4fbec 68%, #e8f4dd 100%) !important;
  border: 1px solid rgba(175, 206, 151, .9) !important;
  box-shadow: 0 18px 42px rgba(74, 111, 73, .14) !important;
  font-size: 52px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
}

.task-execution-progress {
  width: 100% !important;
  height: 10px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(216, 225, 205, .78) !important;
}

.task-execution-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #78b95f, #f1b65c) !important;
  transition: width .3s ease !important;
}

.task-execution-step {
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  color: #476056 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-execution-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.task-execution-actions button {
  min-height: 50px !important;
  border-radius: 999px !important;
}

/* === Task overview controls and readable names === */
.task-v4-card-head {
  position: relative !important;
}

.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  min-height: 108px !important;
}

.task-overview-copy {
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.task-overview-copy strong {
  display: block !important;
  width: 100% !important;
  color: #101c21 !important;
  font-size: 19px !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

.task-info-btn {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(76, 101, 93, .36) !important;
  border-radius: 999px !important;
  color: #526b65 !important;
  background: rgba(255, 255, 252, .82) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.task-info-bubble {
  position: absolute !important;
  top: 36px !important;
  right: 0 !important;
  z-index: 20 !important;
  width: min(278px, 76vw) !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(204, 216, 193, .95) !important;
  border-radius: 18px !important;
  color: #334940 !important;
  background: rgba(255, 255, 252, .98) !important;
  box-shadow: 0 14px 32px rgba(74, 91, 72, .14) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}

.custom-task-card,
.task-browser-card {
  width: min(92vw, 430px) !important;
  max-height: 86dvh !important;
  overflow: hidden !important;
}

.custom-task-form {
  display: grid !important;
  gap: 13px !important;
}

.custom-task-form label {
  display: grid !important;
  gap: 7px !important;
  color: #3e564f !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.custom-task-form input,
.custom-task-form select,
.custom-task-form textarea {
  width: 100% !important;
  border: 1px solid rgba(205, 216, 198, .95) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 252, .96) !important;
  color: #17282a !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 15px !important;
}

.custom-task-form input,
.custom-task-form select {
  min-height: 46px !important;
  padding: 0 13px !important;
}

.custom-task-form textarea {
  min-height: 104px !important;
  padding: 12px 13px !important;
}

.custom-task-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.custom-task-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.custom-task-actions button {
  min-height: 50px !important;
  border-radius: 999px !important;
}

#customTaskError {
  min-height: 18px !important;
  margin: -4px 0 0 !important;
  color: #b84a2e !important;
  font-weight: 800 !important;
}

.task-browser-body {
  max-height: calc(86dvh - 88px) !important;
  overflow-y: auto !important;
  padding: 2px 2px 10px !important;
  -webkit-overflow-scrolling: touch !important;
}

.task-browser-group {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

.task-browser-group h3 {
  margin: 0 !important;
  color: #1a3a31 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

.task-browser-list {
  display: grid !important;
  gap: 10px !important;
}

.task-browser-item {
  width: 100% !important;
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 9px !important;
  border: 1px solid rgba(221, 225, 214, .95) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 252, .96) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.task-browser-item img {
  width: 100px !important;
  height: 68px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  background: #f6f3ea !important;
}

.task-browser-item span {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

.task-browser-item strong {
  color: #111b20 !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.task-browser-item small {
  color: #547065 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

#taskDetailOverlay #prevTaskDetailBtn,
#taskDetailOverlay #nextTaskDetailBtn {
  display: none !important;
}

.task-detail-start-btn {
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 16px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
}

.task-execution-card {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}

.task-execution-hero {
  width: 100% !important;
  height: min(20dvh, 180px) !important;
  min-height: 132px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 22px !important;
  background: #f6f3ea !important;
}

.task-execution-summary {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 4px !important;
}

.task-execution-summary strong {
  min-width: 0 !important;
  color: #111b20 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-execution-summary span,
.task-execution-summary b {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.task-execution-summary span {
  color: #218a4d !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-execution-summary b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-execution-timer {
  display: grid !important;
  place-items: center !important;
  width: 210px !important;
  height: 210px !important;
  margin: 4px auto !important;
  border-radius: 50% !important;
  color: #123128 !important;
  background:
    radial-gradient(circle at 50% 50%, #fffdf7 0 56%, transparent 57%),
    conic-gradient(#228a4d, #95c77f, #f0d46f, #228a4d) !important;
  font-size: 52px !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
}

.task-execution-progress {
  width: 100% !important;
  height: 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(227, 229, 218, .9) !important;
}

.task-execution-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #218a4d, #8fc174) !important;
  transition: width .2s linear !important;
}

.task-execution-step {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  color: #293a40 !important;
  background: rgba(248, 246, 238, .96) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.task-execution-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.task-execution-actions button {
  min-height: 50px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

/* Task overview interaction update: vertical scroll list + reading detail. */
.task-v4-library-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 470px !important;
  overflow: hidden !important;
}

.task-v4-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 4px 12px 0 !important;
  scroll-snap-type: y proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.task-v4-grid::-webkit-scrollbar {
  width: 4px !important;
}

.task-v4-grid::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(33, 138, 77, .25) !important;
}

.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  min-height: 102px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(226, 224, 213, .9) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 252, .92) !important;
  box-shadow: none !important;
  text-align: left !important;
  scroll-snap-align: start !important;
}

.task-v4-grid .task-overview-card::after,
.task-v4-grid .task-overview-card::before {
  content: none !important;
  display: none !important;
}

.task-overview-image {
  width: 116px !important;
  height: 76px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px !important;
  background: #f6f3ea !important;
}

.task-overview-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.task-overview-copy strong {
  color: #111b20 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-overview-copy small {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #18813d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.task-overview-copy small span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(240, 247, 233, .95) !important;
  white-space: nowrap !important;
}

.task-overview-copy small span + span {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-v4-actions {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(200, 212, 190, .86) !important;
}

.task-detail-card {
  width: min(100%, 430px) !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 16px 16px 20px !important;
  border-radius: 30px !important;
  background: rgba(255, 253, 247, .98) !important;
}

.task-detail-card .overlay-top {
  margin-bottom: 12px !important;
}

.task-detail-card .overlay-top span {
  color: #218a4d !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.task-detail-card .action-row {
  display: none !important;
}

.task-detail-hero {
  width: 100% !important;
  height: min(35dvh, 300px) !important;
  min-height: 220px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  background: #f6f3ea !important;
}

.task-detail-summary {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 16px 8px 12px !important;
  text-align: center !important;
}

.task-detail-summary h2 {
  margin: 0 !important;
  color: #111b20 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.task-detail-summary p {
  display: flex !important;
  gap: 10px !important;
  margin: 0 !important;
}

.task-detail-summary span {
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #218a4d !important;
  background: rgba(240, 247, 233, .95) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.task-detail-summary span + span {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-detail-steps {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 10px !important;
  counter-reset: task-step !important;
}

.task-detail-steps li {
  counter-increment: task-step !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  color: #23333d !important;
  background: rgba(248, 246, 238, .96) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

.task-detail-steps li::before {
  content: counter(task-step) !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fffdf6 !important;
  background: #218a4d !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

/* === Final override: three approved image-led pages === */
.phone-screen[data-active-tab="hp"],
.phone-screen[data-active-tab="task"] {
  background:
    url("/web/assets/hp-v4-leaf-frame.webp") center top / 100% 100% no-repeat,
    #fffdf8 !important;
}

.phone-screen[data-active-tab="report"] {
  background:
    url("/web/assets/report-v4-user-bg-fast.webp") center top / cover no-repeat,
    #f7eddc !important;
}

.phone-screen[data-active-tab="report"]::before {
  display: none !important;
}

.hp-v3-ring.hp-ring.uncalibrated #hpValue {
  width: 84px !important;
  max-width: 84px !important;
  text-align: center !important;
  color: #278245 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
}

.hp-v3-ring.hp-ring.uncalibrated #hpValue::after {
  content: none !important;
  display: none !important;
}

.hp-v3-ring.hp-ring.uncalibrated #hpStatus {
  bottom: 30px !important;
  font-size: 12px !important;
}

.task-v4-page.tab-page.active {
  padding: 14px 4px 0 !important;
  gap: 12px !important;
  background: transparent !important;
}

.task-v4-brand {
  height: 116px !important;
  flex: 0 0 116px !important;
}

.task-v4-habit-card {
  min-height: 174px !important;
  padding: 16px 16px 14px !important;
}

.task-v4-library-card {
  min-height: 468px !important;
  padding: 16px !important;
}

.task-v4-grid {
  gap: 12px !important;
}

.task-v4-grid .task-tile,
.task-v4-grid .task-tile:first-child,
.task-v4-grid .task-tile:nth-child(n+4) {
  min-height: 162px !important;
  grid-template-rows: 82px 26px 26px !important;
  align-content: start !important;
  padding: 10px !important;
  border: 1px solid rgba(236, 231, 218, .82) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 252, .9) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.task-v4-grid .task-tile::after,
.task-v4-grid .task-figure::before,
.task-v4-grid .task-figure::after {
  content: none !important;
  display: none !important;
}

.task-v4-grid .task-tile .task-figure,
.task-v4-grid .task-tile:first-child .task-figure,
.task-v4-grid .task-tile:nth-child(2) .task-figure,
.task-v4-grid .task-tile:nth-child(3) .task-figure,
.task-v4-grid .task-tile:nth-child(4) .task-figure {
  height: 82px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.task-v4-grid .task-tile h3 {
  align-self: end !important;
  margin: 0 !important;
  color: #111b20 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.task-v4-grid .task-tile p {
  display: none !important;
}

.task-v4-grid .task-tile small {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #18813d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.task-v4-grid .task-tile small span {
  min-width: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(246, 241, 224, .92) !important;
  white-space: nowrap !important;
}

.task-v4-grid .task-tile small span + span {
  color: #f04d26 !important;
  background: rgba(255, 236, 224, .92) !important;
}

.report-v4-page.tab-page.active {
  background: transparent !important;
}

.report-v4-title {
  height: 132px !important;
  flex: 0 0 132px !important;
  display: grid !important;
  place-items: end center !important;
  padding-bottom: 12px !important;
  color: #2f7a35 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}

.report-v4-poster {
  width: calc(100% - 30px) !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.report-v4-poster #weeklyPosterCopy {
  display: none !important;
}

.report-v4-button {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.94) !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 390px) {
  .task-v4-brand {
    height: 106px !important;
    flex-basis: 106px !important;
  }
  .task-v4-habit-card {
    min-height: 160px !important;
  }
  .task-v4-library-card {
    min-height: 438px !important;
    padding: 14px !important;
  }
  .task-v4-grid .task-tile,
  .task-v4-grid .task-tile:first-child,
  .task-v4-grid .task-tile:nth-child(n+4) {
    min-height: 148px !important;
    grid-template-rows: 70px 24px 25px !important;
  }
  .task-v4-grid .task-tile .task-figure {
    height: 70px !important;
  }
  .task-v4-grid .task-tile h3 {
    font-size: 18px !important;
  }
  .task-v4-grid .task-tile small {
    font-size: 12px !important;
  }
  .report-v4-title {
    height: 116px !important;
    flex-basis: 116px !important;
  }
}

/* === V4 three-tab polish: real asset pages, no fake icon drawing === */
.phone-screen[data-active-tab="hp"],
.phone-screen[data-active-tab="task"] {
  background:
    url("/web/assets/hp-v4-leaf-frame.webp") center top / 100% 100% no-repeat,
    #fffdf8 !important;
}

.phone-screen[data-active-tab="report"] {
  background:
    url("/web/assets/report-v4-user-bg-fast.webp") center top / cover no-repeat,
    #f7eddc !important;
}

.phone-screen[data-active-tab="report"]::before {
  display: none !important;
}

.task-v4-page.tab-page.active {
  padding: 14px 4px 0 !important;
  gap: 12px !important;
}

.task-v4-brand {
  height: 116px !important;
  flex-basis: 116px !important;
}

.task-v4-habit-card {
  min-height: 174px !important;
  padding: 16px 16px 14px !important;
}

.task-v4-library-card {
  min-height: 468px !important;
  padding: 16px !important;
}

.task-v4-grid {
  gap: 12px !important;
}

.task-v4-grid .task-tile,
.task-v4-grid .task-tile:first-child,
.task-v4-grid .task-tile:nth-child(n+4) {
  min-height: 162px !important;
  grid-template-rows: 82px 26px 26px !important;
  align-content: start !important;
  padding: 10px !important;
  border: 1px solid rgba(236, 231, 218, .82) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 252, .9) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.task-v4-grid .task-tile::after {
  content: none !important;
  display: none !important;
}

.task-v4-grid .task-tile .task-figure,
.task-v4-grid .task-tile:first-child .task-figure,
.task-v4-grid .task-tile:nth-child(2) .task-figure,
.task-v4-grid .task-tile:nth-child(3) .task-figure,
.task-v4-grid .task-tile:nth-child(4) .task-figure {
  height: 82px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.task-v4-grid .task-tile h3 {
  align-self: end !important;
  margin: 0 !important;
  color: #111b20 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.task-v4-grid .task-tile p {
  display: none !important;
}

.task-v4-grid .task-tile small {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #18813d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.task-v4-grid .task-tile small span {
  min-width: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(246, 241, 224, .92) !important;
  white-space: nowrap !important;
}

.task-v4-grid .task-tile small span + span {
  color: #f04d26 !important;
  background: rgba(255, 236, 224, .92) !important;
}

.report-v4-page.tab-page.active {
  background: transparent !important;
}

.report-v4-title {
  height: 132px !important;
  flex-basis: 132px !important;
  align-items: end !important;
  color: #2f7a35 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}

.report-v4-poster {
  width: calc(100% - 30px) !important;
  margin-top: 2px !important;
}

.report-v4-button {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.94) !important;
  border: 0 !important;
}

@media (max-width: 390px) {
  .task-v4-brand {
    height: 106px !important;
    flex-basis: 106px !important;
  }
  .task-v4-habit-card {
    min-height: 160px !important;
  }
  .task-v4-library-card {
    min-height: 438px !important;
    padding: 14px !important;
  }
  .task-v4-grid .task-tile,
  .task-v4-grid .task-tile:first-child,
  .task-v4-grid .task-tile:nth-child(n+4) {
    min-height: 148px !important;
    grid-template-rows: 70px 24px 25px !important;
  }
  .task-v4-grid .task-tile .task-figure {
    height: 70px !important;
  }
  .task-v4-grid .task-tile h3 {
    font-size: 18px !important;
  }
  .task-v4-grid .task-tile small {
    font-size: 12px !important;
  }
  .report-v4-title {
    height: 116px !important;
    flex-basis: 116px !important;
  }
}

/* V4 conflict fixes: defeat old prototype task/report rules with higher
   specificity after all legacy blocks. */
.task-v4-grid .task-tile,
.task-v4-grid .task-tile:first-child,
.task-v4-grid .task-tile:nth-child(n+4) {
  grid-column: auto !important;
  min-height: 150px !important;
  display: grid !important;
  grid-template-rows: 76px auto auto !important;
  padding: 10px !important;
  border-radius: 22px !important;
}

.task-v4-grid .task-tile .task-figure,
.task-v4-grid .task-tile:first-child .task-figure,
.task-v4-grid .task-tile:nth-child(2) .task-figure,
.task-v4-grid .task-tile:nth-child(3) .task-figure,
.task-v4-grid .task-tile:nth-child(4) .task-figure {
  height: 76px !important;
  border-radius: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.task-v4-grid .task-tile .task-figure.variant-breath,
.task-v4-grid .task-tile:first-child .task-figure.variant-breath {
  background-image: url("/web/assets/task-v4-card-breath.webp") !important;
}

.task-v4-grid .task-tile .task-figure.variant-neck,
.task-v4-grid .task-tile:first-child .task-figure.variant-neck {
  background-image: url("/web/assets/task-v4-card-neck.webp") !important;
}

.task-v4-grid .task-tile .task-figure.variant-window,
.task-v4-grid .task-tile:first-child .task-figure.variant-window {
  background-image: url("/web/assets/task-v4-card-window.webp") !important;
}

.task-v4-grid .task-tile .task-figure.variant-water,
.task-v4-grid .task-tile:first-child .task-figure.variant-water {
  background-image: url("/web/assets/task-v4-card-water.webp") !important;
}

.report-v4-poster img,
.report-v4-poster #weeklyPosterCopy {
  visibility: visible !important;
}

/* === Task and report V4 reconstruction from approved references === */
.task-v4-page.tab-page.active,
.report-v4-page.tab-page.active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.task-v4-page.tab-page.active {
  gap: 7px !important;
  padding: 6px 0 0 !important;
}

.task-v4-brand {
  height: 104px !important;
  min-height: 104px !important;
  flex: 0 0 104px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 0 9px !important;
}

.task-v4-brand img {
  width: 86px !important;
  height: 104px !important;
  object-fit: contain !important;
  display: block !important;
}

.task-v4-brand h1 {
  margin: 0 0 8px !important;
  color: #111b20 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.task-v4-brand p {
  margin: 0 !important;
  color: #748089 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.task-v4-habit-card,
.task-v4-library-card {
  flex: 0 0 auto !important;
  border: 1px solid rgba(236, 231, 218, .78) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 252, .88) !important;
  box-shadow: none !important;
}

.task-v4-habit-card {
  min-height: 150px !important;
  padding: 12px 16px 10px !important;
}

.task-v4-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.task-v4-card-head h2 {
  margin: 0 !important;
  color: #111b20 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.task-v4-card-head span {
  color: #637487 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.task-v4-edit {
  margin-left: auto !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border: 1px solid #168242 !important;
  border-radius: 999px !important;
  background: rgba(255,255,252,.86) !important;
  color: #168242 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

.task-v4-habit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.task-v4-habit-grid > div {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  padding: 0 8px !important;
}

.task-v4-habit-grid > div + div {
  border-left: 1px solid rgba(223, 222, 212, .72) !important;
}

.task-v4-habit-grid img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

.task-v4-habit-grid b {
  color: #151d22 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.task-v4-habit-grid i {
  display: block !important;
  width: min(72px, 80%) !important;
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ece9df !important;
}

.task-v4-habit-grid em {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #16863d, #2ba457) !important;
}

.task-v4-habit-grid > div:nth-child(2) em { background: linear-gradient(90deg, #ffbb00, #ffd442) !important; }
.task-v4-habit-grid > div:nth-child(3) em { background: linear-gradient(90deg, #7057d9, #9b7cff) !important; }
.task-v4-habit-grid > div:nth-child(4) em { background: linear-gradient(90deg, #16863d, #35a35c) !important; }

.task-v4-habit-grid strong {
  color: #16863d !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.task-v4-library-card {
  min-height: 470px !important;
  padding: 16px !important;
}

.task-v4-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.task-v4-grid .task-tile {
  min-height: 158px !important;
  padding: 10px !important;
  border: 1px solid rgba(236, 231, 218, .82) !important;
  border-radius: 22px !important;
  background: rgba(255,255,252,.88) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: 76px auto auto !important;
  text-align: center !important;
}

.task-v4-grid .task-figure {
  width: 100% !important;
  height: 76px !important;
  border-radius: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.task-v4-grid .task-figure::before,
.task-v4-grid .task-figure::after {
  content: none !important;
  display: none !important;
}

.task-v4-grid .variant-breath { background-image: url("/web/assets/task-v4-card-breath.webp") !important; }
.task-v4-grid .variant-neck { background-image: url("/web/assets/task-v4-card-neck.webp") !important; }
.task-v4-grid .variant-window { background-image: url("/web/assets/task-v4-card-window.webp") !important; }
.task-v4-grid .variant-water { background-image: url("/web/assets/task-v4-card-water.webp") !important; }

.task-v4-grid .task-tile h3 {
  margin: 4px 0 0 !important;
  color: #111b20 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.task-v4-grid .task-tile p,
.task-v4-grid .task-tile small {
  display: none !important;
}

.task-v4-grid .task-tile::after {
  content: "5分钟  +5 HP";
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: #23833f;
  font-size: 13px;
  font-weight: 950;
}

.task-v4-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.task-v4-outline {
  min-height: 44px !important;
  border: 1px solid #b5cfaa !important;
  border-radius: 999px !important;
  background: rgba(255,255,252,.86) !important;
  color: #17813d !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

.report-v4-page.tab-page.active {
  padding: 0 !important;
  justify-content: flex-start !important;
  background: url("/web/assets/report-v4-user-bg-fast.webp") center top / cover no-repeat !important;
}

.report-v4-title {
  height: 118px !important;
  flex: 0 0 118px !important;
  display: grid !important;
  place-items: end center !important;
  padding-bottom: 12px !important;
  color: #2f7a35 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
}

.report-v4-poster {
  width: calc(100% - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.report-v4-poster img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

.report-v4-poster > :not(img):not(#weeklyPosterCopy) {
  display: none !important;
}

.report-v4-poster #weeklyPosterCopy {
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  bottom: 110px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.report-v4-button {
  position: absolute !important;
  left: 40px !important;
  right: 40px !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  color: #237a38 !important;
  box-shadow: none !important;
  z-index: 25 !important;
}

.report-result {
  display: none !important;
}

@media (max-width: 390px) {
  .task-v4-brand { height: 110px !important; flex-basis: 110px !important; }
  .task-v4-habit-card { min-height: 164px !important; }
  .task-v4-library-card { min-height: 448px !important; padding: 14px !important; }
  .task-v4-grid .task-tile { min-height: 150px !important; }
  .task-v4-grid .task-figure { height: 70px !important; }
  .report-v4-title { height: 108px !important; flex-basis: 108px !important; }
}

.hidden,
.overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Local preview only: keep this at EOF so legacy final-lock blocks cannot
   override the user-provided third-screen background. */
.phone-screen[data-active-tab="report"] {
  padding: 0 !important;
  background: url("/web/assets/report-v4-user-bg-fast.webp") center top / cover no-repeat !important;
}

.phone-screen[data-active-tab="report"] .topbar {
  display: none !important;
}

.phone-screen[data-active-tab="report"] .report-v4-page.tab-page.active {
  height: 100dvh !important;
  padding: 0 !important;
  background: transparent !important;
}

.phone-screen[data-active-tab="report"] .report-v4-title,
.phone-screen[data-active-tab="report"] .report-v4-poster,
.phone-screen[data-active-tab="report"] .report-v4-button,
.phone-screen[data-active-tab="report"] .report-result {
  display: none !important;
}

/* === Task overview TRUE EOF lock: scrollable task list + reading detail === */
.task-v4-page.tab-page.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow: hidden !important;
  padding: 6px 0 0 !important;
}

.task-v4-brand {
  flex: 0 0 104px !important;
}

.task-v4-habit-card {
  flex: 0 0 150px !important;
  min-height: 0 !important;
}

.task-v4-library-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 13px 14px 12px !important;
}

.task-v4-library-card .task-v4-card-head {
  flex: 0 0 auto !important;
}

.task-v4-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 4px 8px 0 !important;
  scroll-snap-type: y proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  min-height: 102px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(226, 224, 213, .9) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 252, .94) !important;
  box-shadow: none !important;
  text-align: left !important;
  scroll-snap-align: start !important;
}

.task-v4-grid .task-overview-card::before,
.task-v4-grid .task-overview-card::after {
  content: none !important;
  display: none !important;
}

.task-overview-image {
  width: 116px !important;
  height: 76px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px !important;
  background: #f6f3ea !important;
}

.task-overview-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.task-overview-copy strong {
  color: #111b20 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-overview-copy small {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #18813d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.task-overview-copy small span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(240, 247, 233, .95) !important;
  white-space: nowrap !important;
}

.task-overview-copy small span + span {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-v4-actions {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(200, 212, 190, .86) !important;
}

.task-detail-card #taskDetailBody {
  min-height: 0 !important;
}

#taskDetailOverlay .task-detail-card .action-row {
  display: none !important;
}

/* === Task detail two-stage ABSOLUTE EOF lock === */
.task-v4-grid .task-overview-card,
.task-v4-grid .task-overview-card:first-child,
.task-v4-grid .task-overview-card:nth-child(n+4) {
  grid-template-columns: 116px minmax(0, 1fr) 82px !important;
}

.task-overview-meta {
  display: grid !important;
  justify-items: end !important;
  gap: 9px !important;
}

.task-overview-meta span,
.task-overview-meta b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 68px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.task-overview-meta span {
  color: #1f7e43 !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-overview-meta b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-detail-start-btn {
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 16px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
}

.task-execution-card {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 13px !important;
}

.task-execution-hero {
  width: 100% !important;
  height: min(20dvh, 180px) !important;
  min-height: 132px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  background: #f6f3ea !important;
}

.task-execution-summary {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #314239 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.task-execution-summary strong {
  max-width: 48% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-execution-summary span,
.task-execution-summary b {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(240, 247, 233, .95) !important;
}

.task-execution-summary b {
  color: #ef5a2a !important;
  background: rgba(255, 238, 226, .96) !important;
}

.task-execution-timer {
  width: min(56vw, 210px) !important;
  height: min(56vw, 210px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #0f2520 !important;
  background: radial-gradient(circle at 50% 42%, #fffefa 0%, #f4fbec 68%, #e8f4dd 100%) !important;
  border: 1px solid rgba(175, 206, 151, .9) !important;
  box-shadow: 0 18px 42px rgba(74, 111, 73, .14) !important;
  font-size: 52px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
}

.task-execution-progress {
  width: 100% !important;
  height: 10px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(216, 225, 205, .78) !important;
}

.task-execution-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #78b95f, #f1b65c) !important;
  transition: width .3s ease !important;
}

.task-execution-step {
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  color: #476056 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-execution-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.task-execution-actions button {
  min-height: 50px !important;
  border-radius: 999px !important;
}