.h5-.h5-page{
  --blue: #2f80ed;
  --green: #21a67a;
  --orange: #f59f00;
  --red: #e5484d;
  --ink: #192235;
  --muted: #7d8797;
  --line: #e8eef7;
  --bg: #f5f7fb;
  background: var(--bg);
}

.container {
  min-height: 100vh;
  padding: 12px 12px 130px;
  box-sizing: border-box;
}

.loading-card,
.card,
.metric-card {
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(31, 49, 77, 0.05);
}

.loading-card {
  padding: 22px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.error-card {
  padding: 24px 15px;
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(31, 49, 77, 0.05);
  text-align: center;
}

.error-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.error-desc {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.retry-btn {
  margin: 14px auto 0;
  width: 130px;
  height: 38px;
  line-height: 38px;
  border-radius: 499.5px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.retry-btn::after {
  border: 0;
}

.report-hero {
  min-height: 130px;
  border-radius: 12px;
  padding: 17px;
  color: #fff;
  background: linear-gradient(135deg, #1f7a8c 0%, #2f80ed 62%, #6c9f43 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 9px 20px rgba(47, 128, 237, 0.22);
}

.eyebrow {
  display: block;
  font-size: 11.5px;
  opacity: 0.82;
}

.hero-title {
  display: block;
  margin-top: 4px;
  font-size: 23px;
  font-weight: 800;
}

.hero-desc {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.95;
}

.score-ring {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.16);
}

.score-num {
  font-size: 22px;
  font-weight: 900;
}

.score-label {
  margin-top: 1px;
  font-size: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}

.metric-card {
  padding: 12px;
}

.metric-label,
.metric-sub,
.section-note,
.alert-time,
.view-row text:last-child {
  color: var(--muted);
}

.metric-label {
  display: block;
  font-size: 11.5px;
}

.metric-value {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.metric-value.ok { color: var(--green); }
.metric-value.warn { color: var(--orange); }
.metric-value.danger { color: var(--red); }

.metric-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.card {
  margin-top: 11px;
  padding: 13px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.section-note {
  font-size: 12px;
}

.week-chart {
  width: 100%;
  height: 180px;
  display: block;
  margin-bottom: 9px;
}

.empty {
  padding: 14px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

.alert-row,
.view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line);
}

.alert-row:first-of-type,
.view-row:first-of-type {
  border-top: 0;
}

.alert-title {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
}

.alert-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.status-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 499.5px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 12px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 5px;
}

.contact-btn {
  margin: 0;
  min-height: 31px;
  padding: 0 10px;
  border-radius: 499.5px;
  background: #f3f8ff;
  color: #1d5fbf;
  font-size: 11.5px;
  line-height: 31px;
}

.contact-btn::after {
  border: 0;
}

.view-row text {
  font-size: 12px;
}

.tip-card {
  margin-bottom: 9px;
}

.tip-row {
  padding: 9px 0;
  border-top: 0.5px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.tip-row:first-of-type {
  border-top: 0;
}

.chart-card{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
}
.insight-card{
  background:#f8fbff;
  border-color:#dce9fb;
}
.insight-row{
  display:flex;
  gap:7px;
  align-items:flex-start;
  padding:9px 0;
  border-top:0.5px solid var(--line);
}
.insight-row:first-of-type{border-top:0;}
.insight-badge{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:499.5px;
  background:#e9f2ff;
  color:var(--blue);
  font-size:10.5px;
  font-weight:700;
}
.insight-text{
  flex:1;
  color:var(--ink);
  font-size:12.5px;
  line-height:1.6;
}
.secondary-card{
  background:#fff;
}

.weekly-card{background:linear-gradient(135deg,#fff8f0,#f4fbff)}
.weekly-summary{display:block;font-size:14px;font-weight:800;line-height:1.7;color:var(--ink)}
.weekly-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.weekly-grid>view{padding:8px 6px;border-radius:9px;background:rgba(255,255,255,.78);border:0.5px solid var(--line)}

.monthly-card{background:linear-gradient(180deg,#fffdf8,#f7fbff)}
.monthly-score{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;margin-bottom:10px}
.monthly-score-num{font-size:29px;font-weight:950;color:#1f7a8c}
.monthly-score-label{margin-left:6px;font-size:12.5px;font-weight:800;color:#21a67a}
.monthly-period{font-size:11px;color:var(--muted)}
.monthly-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:9px}
.monthly-grid>view{padding:9px;border-radius:9px;background:#fff;border:0.5px solid var(--line)}
.m-label{display:block;font-size:11px;color:var(--muted)}
.m-value{display:block;margin-top:4px;font-size:14.5px;font-weight:900;color:var(--ink)}
.care-calendar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:9px 0}
.care-day{height:21px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9.5px;background:#eef2f7;color:#8a95a7}
.care-day.ok{background:#e9f8ef;color:#21a67a}
.care-day.warn{background:#fff4df;color:#c47700}
.calendar-legend{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:7px;color:var(--muted);font-size:11px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#eef2f7}.dot.ok{background:#21a67a}.dot.warn{background:#f59f00}.dot.empty{background:#cbd5e1}
.dot.danger{background:#e5484d}
.report-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.report-actions button{height:36px;line-height:36px;border-radius:10px;background:#e9f2ff;color:#1d5fbf;font-size:12px;font-weight:800}
.report-actions button::after{border:0}

.calendar-card{background:linear-gradient(135deg,#fff8f0,#f6fbff)}
.calendar-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:6px}
.calendar-summary>view{padding:9px;border-radius:10px;background:rgba(255,255,255,.78);border:0.5px solid var(--line)}
.care-day.danger{background:#ffe8ea;color:#e5484d}
.task-card{background:linear-gradient(180deg,#fff,#fff9fb)}
.task-create{display:grid;grid-template-columns:1fr 66px 56px;gap:6px;margin-bottom:7px}
.task-create input{height:34px;padding:0 9px;border-radius:9px;background:#fff;border:0.5px solid var(--line);font-size:12px;box-sizing:border-box}
.task-create button{height:34px;line-height:34px;border-radius:9px;background:#f06f9c;color:#fff;font-size:11.5px;font-weight:800}
.task-create button::after{border:0}
.task-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 0;border-top:0.5px solid var(--line)}
.task-row:first-of-type{border-top:0}
.task-row.done{opacity:.62}
.task-title{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.task-time{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.task-actions{display:flex;gap:4px;flex:0 0 auto}
.task-row button{margin:0;width:52px;height:31px;line-height:31px;border-radius:499.5px;background:#f06f9c;color:#fff;font-size:11.5px;font-weight:800}
.task-row button.light{background:#e9f2ff;color:#1d5fbf}
.task-row button.danger{width:36px;background:#fff0f0;color:#e5484d}
.task-row button::after{border:0}
.alert-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.alert-actions button{margin:0;height:26px;line-height:26px;padding:0 8px;border-radius:499.5px;background:#f3f8ff;color:#1d5fbf;font-size:10.5px}
.alert-actions button::after{border:0}
.alert-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.alert-flow text{height:20px;line-height:20px;text-align:center;border-radius:499.5px;background:#F1F5F9;color:#7A8797;font-size:10px;font-weight:800}
.alert-flow text.active{background:#EAF8EF;color:#228A50}