:root {
  --health-bg: #f5f7fc;
  --health-card: rgba(255, 255, 255, 0.94);
  --health-border: #dbe2ef;
  --health-ink: #111a2e;
  --health-muted: #5e6b85;
  --health-blue: #315cf4;
  --health-purple: #6757f7;
  --health-green: #079453;
  --health-red: #d5394a;
  --health-amber: #f59e0b;
}

.health-demo-page {
  min-width: 320px;
  color: var(--health-ink);
  background:
    radial-gradient(circle at 90% 8%, rgba(97, 126, 255, 0.12), transparent 24rem),
    linear-gradient(180deg, #fbfcff 0, var(--health-bg) 24rem);
}

.health-demo-page .site-header {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.health-demo-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 72px;
}

.demo-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(49, 92, 244, 0.16);
  border-radius: 16px;
  background: rgba(239, 243, 255, 0.88);
  color: #3c4b69;
  font-size: 0.88rem;
}

.demo-disclosure > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.demo-disclosure strong { color: #1c347d; }
.demo-disclosure a { color: #2449d8; font-weight: 800; }
.demo-disclosure-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--health-blue); box-shadow: 0 0 0 5px rgba(49, 92, 244, 0.1); }

.health-app {
  overflow: hidden;
  border: 1px solid rgba(202, 212, 232, 0.88);
  border-radius: 28px;
  background: rgba(247, 249, 254, 0.9);
  box-shadow: 0 34px 90px rgba(38, 52, 86, 0.12);
}

.health-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 26px 30px 18px;
}

.health-logo {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--health-blue);
  background: linear-gradient(145deg, #edf2ff, #e4eaff);
}

.health-logo svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.health-app-heading h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.035em; }
.health-app-heading p { margin: 0; color: var(--health-muted); font-size: 0.9rem; }

.demo-ready-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid #bde6ce;
  border-radius: 999px;
  color: #08773f;
  background: #effcf4;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.demo-ready-status i { width: 7px; height: 7px; border-radius: 50%; background: #10a85b; }

.health-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 660px;
  margin: 0 30px;
  border-bottom: 1px solid var(--health-border);
}

.health-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  color: #43516e;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.health-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 999px 999px 0 0; content: ""; background: var(--health-blue); transform: scaleX(0); transition: transform 180ms ease; }
.health-tab[aria-selected="true"] { color: var(--health-blue); }
.health-tab[aria-selected="true"]::after { transform: scaleX(1); }
.health-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.health-tab:focus-visible, .icon-button:focus-visible, .primary-button:focus-visible, .secondary-button:focus-visible, .dialog-close:focus-visible { outline: 3px solid rgba(49, 92, 244, 0.25); outline-offset: 3px; }

.health-panel { padding: 24px 30px 32px; }
.health-panel[hidden] { display: none; }
.health-card { border: 1px solid var(--health-border); border-radius: 18px; background: var(--health-card); box-shadow: 0 10px 30px rgba(41, 56, 91, 0.055); }
.health-card h2 { margin: 0; font-size: 1rem; line-height: 1.35; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-subtitle { margin: 5px 0 0; color: var(--health-muted); font-size: 0.78rem; }
.icon-button { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 2px solid #5a6680; border-radius: 50%; color: #35415a; background: transparent; font: inherit; font-size: 0.78rem; font-weight: 900; cursor: pointer; }

.overview-top-grid { display: grid; grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr); gap: 16px; margin-bottom: 16px; }
.risk-card { display: flex; min-height: 338px; flex-direction: column; padding: 22px; }
.risk-gauge { position: relative; width: min(100%, 250px); margin: 16px auto 2px; text-align: center; }
.risk-gauge svg { display: block; width: 100%; overflow: visible; }
.gauge-track, .gauge-value { fill: none; stroke-width: 18; stroke-linecap: round; }
.gauge-track { stroke: #ecf0f6; }
.gauge-value { stroke: url(#unused); stroke: #10a860; stroke-dasharray: 0 100; transition: stroke-dasharray 450ms ease; }
.gauge-needle { stroke: #17223c; stroke-width: 4; stroke-linecap: round; transform-origin: 110px 108px; transition: transform 450ms ease; }
.risk-gauge circle { fill: #17223c; }
.risk-gauge strong { position: absolute; right: 0; bottom: 18px; left: 0; color: var(--health-blue); font-size: 2.65rem; letter-spacing: -0.05em; }
.risk-gauge > span { position: absolute; right: 0; bottom: 0; left: 0; color: #33446c; font-size: 0.75rem; }
.model-range { margin-top: auto; padding: 10px 12px; border-radius: 11px; color: #30405f; background: #f4f7fd; font-size: 0.76rem; text-align: center; }
.model-range span { color: var(--health-blue); }
.card-footnote { margin: 10px 0 0; color: var(--health-muted); font-size: 0.7rem; text-align: center; }

.weekly-card { min-height: 338px; padding: 22px; }
.weekly-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.metric-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--health-blue); background: #eef2ff; font-size: 1.4rem; font-weight: 900; }
.weekly-summary p { margin: 0 0 3px; font-size: 0.82rem; font-weight: 800; }
.weekly-summary strong { display: block; color: var(--health-ink); font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.06em; line-height: 1; }
.weekly-summary span:not(.metric-icon) { display: block; margin-top: 7px; color: var(--health-green); font-size: 0.76rem; font-weight: 700; }

.primary-button, .secondary-button { min-height: 42px; padding: 10px 15px; border-radius: 10px; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.primary-button { border: 1px solid #087b43; color: #fff; background: linear-gradient(180deg, #13a65c, #087f45); box-shadow: 0 8px 20px rgba(8, 127, 69, 0.18); }
.secondary-button { border: 1px solid #ccd6e8; color: #334364; background: #fff; }
.generate-week-button { max-width: 150px; }

.weekly-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 2vw, 20px); height: 190px; margin-top: 18px; padding: 12px 6px 24px; border-bottom: 1px solid #e4e9f3; }
.weekly-bar-column { display: grid; height: 100%; grid-template-rows: 1fr auto; align-items: end; gap: 8px; color: #66728c; font-size: 0.67rem; text-align: center; }
.weekly-bar { width: min(100%, 34px); min-height: 5px; justify-self: center; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #8195ff, #5d7af7); box-shadow: 0 8px 16px rgba(70, 101, 237, 0.12); transition: height 400ms ease; }

.survival-card { margin-bottom: 16px; padding: 22px; }
.chart-legend { display: inline-flex; align-items: center; gap: 7px; color: #67738b; font-size: 0.68rem; }
.chart-legend i { width: 17px; height: 2px; background: var(--health-blue); }
.survival-chart { position: relative; height: 250px; margin: 22px 0 0 42px; }
.survival-chart svg { display: block; width: 100%; height: 210px; overflow: visible; }
.chart-grid line { stroke: #e5eaf3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.survival-area { fill: url(#survival-fill); }
.survival-line { fill: none; stroke: var(--health-blue); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.y-label { position: absolute; left: -42px; color: #6a7690; font-size: 0.66rem; transform: translateY(-50%); }
.y100 { top: 0; }.y75 { top: 52px; }.y50 { top: 105px; }.y25 { top: 157px; }.y0 { top: 210px; }
.x-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #6a7690; font-size: 0.66rem; }

.overview-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.change-card, .meaning-card { min-height: 220px; padding: 22px; }
.insight-heading { display: flex; align-items: flex-start; gap: 12px; }
.insight-heading p { margin: 5px 0 0; color: var(--health-muted); font-size: 0.75rem; }
.insight-icon { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 50%; font-weight: 900; }
.insight-icon.green { color: #078a4a; background: #dcfae9; }.insight-icon.amber { color: #c57a00; background: #fff1cf; }.insight-icon.blue { color: var(--health-blue); background: #e9efff; }
.sparkline { height: 105px; margin-top: 24px; }
.sparkline svg { width: 100%; height: 100%; overflow: visible; }
.sparkline path[data-spark-area] { fill: rgba(69, 105, 247, 0.09); }
.sparkline path[data-spark-line] { fill: none; stroke: var(--health-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sparkline circle { fill: #fff; stroke: var(--health-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.meaning-card > h2 { margin-bottom: 15px; }
.meaning-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.meaning-row p { display: grid; gap: 3px; margin: 0; color: var(--health-muted); font-size: 0.73rem; }
.meaning-row strong { color: var(--health-ink); font-size: 0.78rem; }
.health-note { margin-top: 16px; padding: 15px 18px; border: 1px solid #e0e5f0; border-radius: 14px; color: #53617e; background: rgba(255, 255, 255, 0.72); font-size: 0.75rem; line-height: 1.5; }

.rhythm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr); gap: 16px; }
.hourly-card { min-height: 500px; padding: 22px; }
.hourly-chart { display: grid; grid-template-columns: repeat(24, minmax(4px, 1fr)); align-items: end; gap: clamp(3px, 0.7vw, 9px); height: 350px; margin-top: 24px; padding: 20px 0 0; border-bottom: 1px solid #e4e9f3; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edf0f6 25%); }
.hourly-bar { min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #9b8eff, #6480f6); transition: height 400ms ease; }
.hour-axis { display: flex; justify-content: space-between; margin-top: 10px; color: #68748d; font-size: 0.68rem; }
.active-window-card { display: flex; min-height: 500px; align-items: center; justify-content: center; gap: 16px; padding: 28px; }
.clock-icon { display: grid; flex: 0 0 auto; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: var(--health-purple); background: #f0ecff; font-size: 1.8rem; }
.active-window-card strong { display: block; margin: 10px 0 5px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.active-window-card p { margin: 0; color: var(--health-muted); font-size: 0.76rem; }
.health-info-banner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 15px 18px; border: 1px solid #dbe2f1; border-radius: 14px; color: #53617e; background: rgba(255, 255, 255, 0.7); font-size: 0.76rem; }
.health-info-banner > span { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid var(--health-blue); border-radius: 50%; color: var(--health-blue); font-weight: 900; }
.health-info-banner p { margin: 0; }

.configuration-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 20px 22px; }
.configuration-intro p { margin: 5px 0 0; color: var(--health-muted); font-size: 0.78rem; }
.profile-status { color: var(--health-green); font-size: 0.78rem; font-weight: 800; }
.profile-form { display: grid; gap: 18px; }
.profile-form fieldset { min-width: 0; padding: 18px 20px 20px; }
.profile-form legend { padding: 0 7px; color: var(--health-ink); font-size: 0.95rem; font-weight: 900; }
.form-grid { display: grid; gap: 15px 16px; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid label { display: grid; gap: 7px; min-width: 0; color: #30405f; font-size: 0.72rem; font-weight: 800; }
.form-grid label.span-two { grid-column: span 2; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; min-height: 43px; padding: 9px 12px; border: 1px solid #cdd7e8; border-radius: 9px; color: #14213a; background: #fbfcff; font: inherit; font-size: 0.8rem; }
.form-grid input:focus, .form-grid select:focus { border-color: var(--health-blue); outline: 3px solid rgba(49, 92, 244, 0.1); }
.profile-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-actions p { margin: 0 0 0 4px; color: var(--health-muted); font-size: 0.72rem; }

.health-dialog { width: min(480px, calc(100% - 32px)); padding: 28px; border: 1px solid #d7deed; border-radius: 18px; color: var(--health-ink); background: #fff; box-shadow: 0 30px 80px rgba(24, 34, 59, 0.25); }
.health-dialog::backdrop { background: rgba(16, 25, 48, 0.5); backdrop-filter: blur(4px); }
.health-dialog h2 { margin: 0 44px 10px 0; font-size: 1.2rem; }
.health-dialog p { margin: 0; color: var(--health-muted); font-size: 0.88rem; line-height: 1.65; }
.dialog-close { position: absolute; top: 16px; right: 16px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d9e0ed; border-radius: 50%; color: #39465f; background: #f8f9fc; font-size: 1.3rem; cursor: pointer; }

@media (max-width: 900px) {
  .overview-top-grid, .overview-bottom-grid, .rhythm-grid { grid-template-columns: 1fr; }
  .active-window-card { min-height: 190px; }
  .health-bubble { grid-column: auto; }
}

@media (max-width: 680px) {
  .health-demo-page .site-header { position: static; }
  .health-demo-page .nav { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .health-demo-page .brand-group { width: 100%; justify-content: space-between; gap: 10px; }
  .health-demo-page .brand { font-size: 1.3rem; }
  .health-demo-page .brand::before { width: 8px; height: 8px; }
  .health-demo-page .new-projects-badge { min-height: 38px; padding: 7px 12px; font-size: 0.85rem; }
  .health-demo-page .nav-links { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .health-demo-page .nav-links a { min-height: 36px; padding: 7px 5px; font-size: 0.72rem; }
  .health-demo-shell { width: min(100% - 18px, 1180px); padding-top: 18px; }
  .demo-disclosure { align-items: flex-start; flex-direction: column; gap: 10px; }
  .demo-disclosure > div { align-items: flex-start; flex-wrap: wrap; }
  .health-app { border-radius: 20px; }
  .health-app-header { grid-template-columns: auto 1fr; padding: 20px 16px 14px; }
  .health-logo { width: 42px; height: 42px; }
  .demo-ready-status { grid-column: 1 / -1; width: fit-content; }
  .health-app-heading p { font-size: 0.78rem; }
  .health-tabs { margin: 0 16px; }
  .health-tab { min-height: 52px; padding: 0 4px; font-size: 0.72rem; line-height: 1.15; }
  .health-tab svg { display: none; }
  .health-panel { padding: 16px; }
  .risk-card, .weekly-card, .survival-card, .change-card, .meaning-card, .hourly-card { padding: 18px; }
  .weekly-summary { grid-template-columns: auto 1fr; }
  .generate-week-button { grid-column: 1 / -1; max-width: none; }
  .weekly-chart { gap: 7px; }
  .survival-chart { height: 220px; margin-left: 35px; }
  .survival-chart svg { height: 180px; }
  .y-label { left: -35px; }.y75 { top: 45px; }.y50 { top: 90px; }.y25 { top: 135px; }.y0 { top: 180px; }
  .hourly-card { min-height: 390px; }
  .hourly-chart { height: 260px; gap: 3px; }
  .form-grid.two-columns, .form-grid.three-columns { grid-template-columns: 1fr; }
  .form-grid label.span-two { grid-column: auto; }
  .configuration-intro { align-items: flex-start; flex-direction: column; }
  .profile-actions { align-items: stretch; flex-direction: column; }
  .profile-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-value, .gauge-needle, .weekly-bar, .hourly-bar { transition: none; }
}