/* ======================================================================
 * #11 脱毛周期计算 · 独立视觉：美容仪器周期日历
 * 薄荷青 + 白瓷；部位示意 SVG；周历热力格；脉冲读数条
 * ====================================================================== */
.hr-page {
    --g-accent: #238C87;
    --g-accent-deep: #176A67;
    --g-accent-ink: #125956;
    --g-accent-soft: #E2F4F1;
    --g-accent-2: #C58A4A;
    --g-accent-2-soft: #FAF0E1;
    --hr-mint: #E9F7F4;
    background:
      radial-gradient(780px 360px at 94% -8%, rgba(35, 140, 135, .11), transparent 70%),
      var(--g-bg);
}
:root[data-theme="dark"] .hr-page {
    --g-accent: #6CD6CE;
    --g-accent-deep: #96E7E0;
    --g-accent-ink: #B5F0EB;
    --g-accent-soft: rgba(108, 214, 206, .13);
    --g-accent-2: #E8BE84;
    --g-accent-2-soft: rgba(232, 190, 132, .13);
    --hr-mint: #101F1E;
    background:
      radial-gradient(780px 360px at 94% -8%, rgba(108, 214, 206, .08), transparent 70%),
      var(--g-bg);
}
.hr-page .hero-kicker { background: var(--g-accent-soft); border: 1px dashed var(--g-accent); font-family: var(--g-mono); letter-spacing: .05em; }
.hr-hero { border-bottom: 2px solid var(--g-line-2); }

/* 读数：薄荷卡 + 脉冲条 */
.hr-readout { background: var(--hr-mint); border-color: color-mix(in srgb, var(--g-accent) 30%, var(--g-line)); }
.hr-readout::before { background: linear-gradient(90deg, var(--g-accent), var(--g-accent-2)); }
.hr-readout .lab { color: var(--g-ink-3); font-family: var(--g-mono); letter-spacing: .08em; }
.hr-readout .big { color: var(--g-accent-ink); }
.hr-readout .big em { font-style: normal; font-size: 20px; margin-left: 4px; }
.hr-readout .hint { color: var(--g-ink-3); }
.hr-pulse { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 16px; }
.hr-pulse i { flex: 1; border-radius: 3px 3px 0 0; background: var(--g-accent); opacity: .25; height: 30%; }
.hr-pulse i:nth-child(2n) { height: 55%; opacity: .4; }
.hr-pulse i:nth-child(3n) { height: 92%; opacity: .85; }
.hr-pulse i:nth-child(5n) { height: 70%; opacity: .6; }
.hr-readout-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 650 11.5px var(--g-mono); color: var(--g-ink-3); }
.hr-readout-foot i { flex: 1; height: 1px; background: var(--g-line-2); }

/* 部位选择 */
.hr-form { border-top: 3px solid var(--g-accent); }
.hr-zone-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 14px; }
.hr-zone-fig svg { width: 100%; max-width: 150px; margin: 0 auto; display: block; }
.hr-fig { fill: var(--g-surface); stroke: var(--g-line-2); stroke-width: 1.5; }
.hr-zone { cursor: pointer; transition: fill .15s, stroke .15s; }
.hr-zone:hover { stroke: var(--g-accent); }
.hr-zone.on { fill: var(--g-accent-soft); stroke: var(--g-accent); stroke-width: 2.5; }
.hr-zone-stroke { fill: none; cursor: pointer; stroke-width: 9; stroke-linecap: round; }
.hr-zone-stroke.on { stroke: var(--g-accent); }
.hr-zone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hr-zone-list button {
    padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left;
    background: var(--g-surface-2); border: 1px solid var(--g-line); font-size: 12.5px; font-weight: 700; color: var(--g-ink-2);
}
.hr-zone-list button:hover { border-color: var(--g-accent); }
.hr-zone-list button.on { background: var(--g-accent-soft); border-color: var(--g-accent); color: var(--g-accent-ink); }
.hr-zone-list small { display: block; font: 600 10.5px var(--g-mono); color: var(--g-ink-3); }
.hr-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px dashed var(--g-line); }
.hr-line-lab { min-width: 62px; font-size: 13px; font-weight: 750; color: var(--g-ink-2); }
.hr-line .seg { flex: 1; }
.hr-form .fields { margin-top: 12px; }
.hr-checks { display: grid; gap: 7px; margin-top: 14px; padding: 11px 13px; border-radius: var(--g-r-sm); background: var(--g-surface-2); border: 1px dashed var(--g-line-2); }

/* 周历热力图 */
.hr-calendar { background: var(--hr-mint); }
.hr-lead { font-size: 13px; color: var(--g-ink-2); margin-bottom: 13px; }
.hr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hr-cal-cell {
    aspect-ratio: 1 / 1; border-radius: 7px; display: grid; place-items: center;
    font: 650 10.5px var(--g-mono); color: var(--g-ink-3);
    background: var(--g-surface); border: 1px solid var(--g-line);
}
.hr-cal-cell.on { background: var(--g-accent); border-color: var(--g-accent); color: #fff; font-weight: 800; }
:root[data-theme="dark"] .hr-cal-cell.on { color: #082421; }
.hr-cal-cell.pre { background: var(--g-accent-2-soft); border-color: var(--g-accent-2); color: var(--g-warn); }
.hr-cal-cell.empty { opacity: .35; }
.hr-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 13px; font-size: 11.5px; color: var(--g-ink-3); }
.hr-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hr-cal-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hr-lv-on { background: var(--g-accent); } .hr-lv-off { background: var(--g-surface); border: 1px solid var(--g-line-2); } .hr-lv-pre { background: var(--g-accent-2-soft); border: 1px solid var(--g-accent-2); }

/* 结果 */
.hr-result { border-top: 3px solid var(--g-accent-2); }
.hr-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.hr-summary > div { padding: 11px 8px; border-radius: var(--g-r-sm); background: var(--g-accent-soft); text-align: center; }
.hr-summary span { display: block; font-size: 11px; color: var(--g-ink-3); }
.hr-summary b { display: block; font: 750 17px/1.4 var(--g-mono); color: var(--g-accent-ink); }
.hr-session-list { display: grid; gap: 6px; margin-top: 14px; max-height: 210px; overflow-y: auto; padding-right: 4px; }
.hr-session { display: grid; grid-template-columns: 54px 1fr auto; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 8px; background: var(--g-surface-2); border: 1px solid var(--g-line); font-size: 12px; }
.hr-session b { font-family: var(--g-mono); color: var(--g-accent-ink); }
.hr-session span { color: var(--g-ink-2); }
.hr-session em { font-style: normal; font-family: var(--g-mono); color: var(--g-ink-3); }
.hr-warn { margin-top: 12px; padding: 10px 13px; border-radius: var(--g-r-sm); background: var(--g-warn-soft); color: var(--g-warn); font-size: 12.5px; line-height: 1.8; }
.hr-warn[hidden] { display: none; }

/* 表格 / 提醒 */
.hr-table-card, .hr-rule-card { padding: 0; overflow-x: auto; }
.hr-table-card table, .hr-rule-card table { min-width: 560px; border-radius: 0; }
.hr-table-card tr.hot td, .hr-rule-card tr.hot td { background: var(--g-accent-soft); }
.hr-rule-card td b { color: var(--g-accent-ink); }
.hr-batch-out { margin-top: 14px; overflow-x: auto; }
.hr-batch-out table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hr-batch-out th, .hr-batch-out td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--g-line); white-space: nowrap; }
.hr-batch-out th { background: var(--g-surface-3); font-size: 12px; color: var(--g-ink-2); }
.hr-batch-out tr.bad td { color: var(--g-danger); }
.hr-care .tile { border-bottom: 3px solid var(--g-accent); }

@media (max-width: 900px) {
    .hr-zone-wrap { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .hr-zone-wrap { grid-template-columns: 1fr; }
    .hr-zone-fig svg { max-width: 130px; }
    .hr-line .seg { flex-basis: 100%; }
    .hr-cal-grid { gap: 3px; }
}