:root{
  --bg:#f4f8f8;
  --surface:#ffffff;
  --surface-2:#f8fbfb;
  --text:#122326;
  --muted:#6d7f82;
  --line:#dfe9e9;
  --brand:#0f766e;
  --brand-2:#14b8a6;
  --brand-3:#dff7f2;
  --danger:#b42318;
  --warning:#b54708;
  --shadow:0 10px 35px rgba(19,54,58,.08);
  --shadow-sm:0 4px 18px rgba(19,54,58,.06);
  --radius:20px;
  --radius-sm:13px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.health-app{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(20,184,166,.08), transparent 26rem),
    radial-gradient(circle at 95% 8%, rgba(15,118,110,.06), transparent 28rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
}
body.health-app a{color:var(--brand);text-decoration:none;transition:.2s ease}
body.health-app a:hover{color:#0b5f59}
body.health-app h1,body.health-app h2,body.health-app h3,body.health-app h4{
  color:#10292b;letter-spacing:-.02em;line-height:1.18
}
body.health-app h1{font-size:clamp(1.8rem,3vw,2.45rem);margin:0 0 1rem}
body.health-app h2{font-size:1.35rem}
body.health-app h3{font-size:1.08rem}

body.health-app > header,
body.health-app header.site-header,
body.health-app nav.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(207,224,224,.9)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8);
}
body.health-app > header > div,
body.health-app header.site-header > div,
body.health-app nav.topbar > div{
  max-width:1120px!important;
  margin:0 auto!important;
  min-height:72px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 24px!important;
}
body.health-app header strong,
body.health-app header .brand,
body.health-app nav .brand{
  font-size:1.15rem;font-weight:800;color:#10292b!important;white-space:nowrap
}
body.health-app header nav,
body.health-app > header nav{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end
}
body.health-app header nav a,
body.health-app > header nav a{
  padding:9px 11px;border-radius:10px;font-size:.9rem;font-weight:650;color:#3a6265!important
}
body.health-app header nav a:hover,
body.health-app header nav a.is-active{
  background:var(--brand-3);color:var(--brand)!important
}
body.health-app header img{
  border-radius:999px;border:3px solid #e1efed;object-fit:cover
}
body.health-app header form button,
body.health-app header .btn-outline{
  min-height:38px;padding:7px 15px!important;background:#fff!important;
  border:1px solid #bdd7d4!important;color:#245f5d!important;border-radius:12px!important
}

body.health-app main,
body.health-app .container,
body.health-app .wrap{
  max-width:1120px!important;margin:0 auto!important;padding-left:24px!important;padding-right:24px!important
}
body.health-app main{padding-top:36px!important;padding-bottom:70px!important}

body.health-app .card,
body.health-app section.card,
body.health-app .panel,
body.health-app .box{
  background:rgba(255,255,255,.95)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
  padding:24px!important;
}
body.health-app .card:hover{box-shadow:var(--shadow)!important}

body.health-app .grid{gap:16px!important}
body.health-app .stats,
body.health-app .stat-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important
}
body.health-app .stat,
body.health-app .metric,
body.health-app .stats > *{
  background:linear-gradient(180deg,#fff,#fbfdfd)!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  padding:20px!important;box-shadow:var(--shadow-sm)!important
}
body.health-app .stat strong,
body.health-app .metric strong,
body.health-app .stats > * strong{
  display:block;font-size:1.9rem;line-height:1.1;margin-top:5px;color:#0c3737
}
body.health-app .muted,
body.health-app small{color:var(--muted)!important}

body.health-app button,
body.health-app .btn,
body.health-app input[type=submit]{
  appearance:none;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),#11998e);
  color:#fff;font-weight:750;min-height:42px;padding:10px 16px;
  cursor:pointer;box-shadow:0 5px 16px rgba(15,118,110,.16);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
body.health-app button:hover,
body.health-app .btn:hover,
body.health-app input[type=submit]:hover{
  transform:translateY(-1px);filter:saturate(1.06);
  box-shadow:0 8px 20px rgba(15,118,110,.22)
}
body.health-app .btn-secondary{
  background:#fff!important;color:var(--brand)!important;border:1px solid #bad8d4!important;box-shadow:none!important
}
body.health-app .btn-danger{background:#fff1f0!important;color:var(--danger)!important;border:1px solid #fac5c0!important;box-shadow:none!important}

body.health-app input[type=text],
body.health-app input[type=email],
body.health-app input[type=password],
body.health-app input[type=date],
body.health-app input[type=datetime-local],
body.health-app input[type=number],
body.health-app input[type=file],
body.health-app select,
body.health-app textarea{
  width:100%;min-height:46px;border:1px solid #cadbdb;border-radius:12px;
  background:#fff;color:var(--text);padding:10px 13px;font:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s
}
body.health-app textarea{min-height:110px}
body.health-app input:focus,
body.health-app select:focus,
body.health-app textarea:focus{
  border-color:#57bdb3;box-shadow:0 0 0 4px rgba(20,184,166,.11)
}
body.health-app label{font-weight:700;color:#23484a;display:block;margin-bottom:6px}

body.health-app table{
  width:100%;border-collapse:separate!important;border-spacing:0!important;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden
}
body.health-app thead th{
  background:#edf8f6!important;color:#215b58!important;text-transform:none;
  font-size:.82rem;letter-spacing:.01em;font-weight:800;padding:13px 14px!important;
  border-bottom:1px solid #d9e9e7!important;position:sticky;top:72px;z-index:3
}
body.health-app tbody td{
  padding:12px 14px!important;border-bottom:1px solid #edf2f2!important;vertical-align:middle
}
body.health-app tbody tr:nth-child(even){background:#fbfdfd}
body.health-app tbody tr:hover{background:#f2fbf9}
body.health-app tbody tr:last-child td{border-bottom:0!important}
body.health-app .table-wrap{overflow:auto;border-radius:16px}

body.health-app .alert,
body.health-app .notice,
body.health-app .success{
  border:1px solid #b8e8da!important;background:#eafaf4!important;color:#176b57!important;
  border-radius:14px!important;padding:13px 16px!important;margin-bottom:20px!important
}
body.health-app .error{background:#fff0ef!important;color:#9b2820!important;border-color:#f7c8c4!important}

body.health-app .hero-profile{
  display:flex;align-items:center;gap:18px;margin-bottom:22px
}
body.health-app .hero-profile img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;border:4px solid #dbece9;box-shadow:var(--shadow-sm)
}
body.health-app .hero-profile h1{margin:0 0 3px;font-size:clamp(1.7rem,3vw,2.3rem)}
body.health-app .hero-profile p{margin:0;color:var(--muted)}

body.health-app .quick-links a{
  display:flex!important;align-items:center;gap:10px;padding:10px 12px!important;
  border-radius:11px;font-weight:650
}
body.health-app .quick-links a:hover{background:#eef9f7}

body.health-app .badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;
  background:var(--brand-3);color:var(--brand);font-size:.78rem;font-weight:800
}
body.health-app hr{border:0;border-top:1px solid var(--line);margin:20px 0}

body.health-app .progress-track{
  height:8px;background:#e7efef;border-radius:999px;overflow:hidden
}
body.health-app .progress-track > span{
  display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:inherit
}

body.health-app footer{
  max-width:1120px;margin:0 auto;padding:28px 24px 44px;color:#819092;font-size:.85rem
}

/* comparison pages */
body.health-app .comparison-shell{position:relative}
body.health-app .comparison-shell::before{
  content:"";position:absolute;inset:-8px -8px auto; height:100px;
  background:linear-gradient(90deg,rgba(15,118,110,.05),rgba(20,184,166,.02));
  border-radius:24px;z-index:-1
}

/* scrollbars */
body.health-app *{scrollbar-width:thin;scrollbar-color:#a9c8c4 #eef4f4}
body.health-app ::-webkit-scrollbar{height:10px;width:10px}
body.health-app ::-webkit-scrollbar-track{background:#eef4f4}
body.health-app ::-webkit-scrollbar-thumb{background:#a9c8c4;border-radius:20px;border:2px solid #eef4f4}

@media (max-width:900px){
  body.health-app > header > div,
  body.health-app header.site-header > div{align-items:flex-start;padding-top:12px!important;padding-bottom:12px!important}
  body.health-app header nav{gap:2px}
  body.health-app .stats,body.health-app .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:680px){
  body.health-app{font-size:15px}
  body.health-app > header > div,
  body.health-app header.site-header > div{display:block!important}
  body.health-app header nav{margin-top:9px;justify-content:flex-start;overflow:auto;flex-wrap:nowrap;padding-bottom:4px}
  body.health-app header nav a{white-space:nowrap}
  body.health-app main,body.health-app .container,body.health-app .wrap{padding-left:14px!important;padding-right:14px!important}
  body.health-app main{padding-top:22px!important}
  body.health-app .card,body.health-app section.card,body.health-app .panel,body.health-app .box{padding:18px!important;border-radius:16px!important}
  body.health-app .stats,body.health-app .stat-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  body.health-app .stat,body.health-app .metric,body.health-app .stats>*{padding:15px!important}
  body.health-app .stat strong,body.health-app .metric strong,body.health-app .stats>* strong{font-size:1.55rem}
  body.health-app .hero-profile{align-items:flex-start}
  body.health-app .hero-profile img{width:58px;height:58px}
  body.health-app table{font-size:.86rem}
  body.health-app thead th{top:112px}
}