/* 健康 App */

.hl-body{
  padding:8px 16px 36px;
}
.hl-days{
  display:flex; gap:6px;
  margin:4px 0 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.hl-days::-webkit-scrollbar{ display:none; }
.hl-day{
  flex:0 0 auto;
  width:46px; height:58px;
  border:none; border-radius:14px;
  background:var(--fill);
  color:var(--ink);
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; position:relative;
  cursor:pointer;
}
.hl-day.on{
  background:color-mix(in srgb, #3d9b7a 22%, var(--fill));
  color:#1f6b52;
}
html[data-theme="dark"] .hl-day.on{
  background:color-mix(in srgb, #3d9b7a 28%, var(--fill));
  color:#8fd4b8;
}
.hl-day-w{ font-size:10px; color:var(--gray-2); }
.hl-day.on .hl-day-w{ color:inherit; opacity:.75; }
.hl-day-n{ font-size:15px; font-weight:700; }
.hl-day.dot i{
  position:absolute; bottom:5px;
  width:4px; height:4px; border-radius:50%;
  background:#3d9b7a;
}

.hl-hero{
  background:linear-gradient(145deg, #d8f0e6, #eef8f3 55%, var(--card, var(--fill)));
  border-radius:18px;
  padding:16px 16px 14px;
  margin-bottom:12px;
}
html[data-theme="dark"] .hl-hero{
  background:linear-gradient(145deg, #243832, #1c2420 60%, var(--card, var(--fill)));
}
.hl-hero-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.hl-hero h2{
  margin:0; font-size:18px; font-weight:700;
}
.hl-hero p{
  margin:6px 0 0;
  font-size:12px; line-height:1.45; color:var(--gray-2);
}
.hl-ghost{
  border:none; background:color-mix(in srgb, var(--ink) 6%, transparent);
  color:var(--gray-1); border-radius:999px;
  padding:6px 12px; font-family:inherit; font-size:11.5px; cursor:pointer;
}

.hl-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:12px;
}
.hl-card{
  background:var(--card, var(--fill));
  border-radius:16px;
  padding:12px 12px 10px;
}
.hl-card.wide{ grid-column:1 / -1; }
.hl-card label{
  display:block;
  font-size:11px; font-weight:600; color:var(--gray-2);
  margin-bottom:6px;
}
.hl-card input,
.hl-card textarea{
  width:100%; box-sizing:border-box;
  border:none; border-radius:12px;
  background:var(--bg); color:var(--ink);
  padding:10px 12px;
  font-family:inherit; font-size:15px; font-weight:600;
  outline:none;
}
.hl-card textarea{
  font-size:13px; font-weight:400; resize:vertical; min-height:64px;
}
.hl-goal{
  margin-top:8px;
  font-size:11px; color:var(--gray-2);
}
.hl-bar{
  margin-top:8px; height:6px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  overflow:hidden;
}
.hl-bar > i{
  display:block; height:100%; width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, #3d9b7a, #6bc4a0);
  transition:width .25s ease;
}

.hl-save{
  width:100%; margin-top:4px;
  border:none; border-radius:14px;
  background:#2f8f6e; color:#fff;
  padding:13px 16px;
  font-family:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer;
}
html[data-theme="dark"] .hl-save{ background:#3d9b7a; }

.tool-card.health{ --tc-a:#C8EBD8; --tc-b:#F0FAF5; }
html[data-theme="dark"] .tool-card.health{ --tc-a:#2A4438; --tc-b:#1E2C26; }