/* ═══════════════════════════════════════════════════════════════
   HEALTH APP — Standalone mini-app
   Prefix: .happ   Theme: deep crimson / coral
   ═══════════════════════════════════════════════════════════════ */

.happ-shell{
  min-height:100vh;padding:0 0 100px;
  background:linear-gradient(170deg,#1a0a0a 0%,#2a1212 40%,#120808 100%);
  color:#f0e8e0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── back button ─────────────────────────────────── */
.happ-back{
  position:fixed;top:14px;left:14px;z-index:90;
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(42,18,18,.55);backdrop-filter:blur(12px);
  color:#f0e8e0;font-size:18px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ── header ──────────────────────────────────────── */
.happ-header{
  padding:60px 20px 18px;text-align:center;
}
.happ-header h1{
  margin:0;font-size:1.6rem;font-weight:700;color:#f0e8e0;
}
.happ-header p{
  margin:4px 0 0;font-size:.82rem;opacity:.6;
}

/* ── segment control (4 tabs) ────────────────────── */
.happ-seg{
  display:flex;margin:0 16px 16px;
  background:rgba(232,93,93,.1);border-radius:12px;padding:3px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.happ-seg button{
  flex:1;padding:9px 6px;border:none;border-radius:10px;
  font-size:.78rem;font-weight:600;background:transparent;color:rgba(240,232,224,.5);
  cursor:pointer;transition:all .25s;white-space:nowrap;min-width:0;
}
.happ-seg button.active{
  background:rgba(232,93,93,.25);color:#f0e8e0;
  box-shadow:0 2px 8px rgba(232,93,93,.2);
}

/* ── content area ────────────────────────────────── */
.happ-content{padding:0 16px;}

/* ── section label ───────────────────────────────── */
.happ-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(232,93,93,.7);margin:18px 0 8px;
}

/* ── glass card ──────────────────────────────────── */
.happ-card{
  background:rgba(255,255,255,.05);border-radius:16px;
  border:1px solid rgba(232,93,93,.1);
  padding:14px;margin-bottom:12px;
}

/* ── status ring grid ────────────────────────────── */
.happ-rings{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;
  margin-bottom:12px;
}
.happ-ring-item{
  background:rgba(255,255,255,.04);border-radius:14px;
  padding:12px;text-align:center;border:1px solid rgba(232,93,93,.08);
}
.happ-ring-val{font-size:1.1rem;font-weight:700;color:#f0e8e0;}
.happ-ring-lbl{font-size:.7rem;color:rgba(240,232,224,.5);margin-top:2px;}

/* ── measurement row ─────────────────────────────── */
.happ-meas-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.happ-meas-row:last-child{border-bottom:none;}
.happ-meas-label{font-size:.82rem;color:rgba(240,232,224,.6);}
.happ-meas-val{font-size:.95rem;font-weight:600;color:#f0e8e0;}

/* ── profile info rows ───────────────────────────── */
.happ-profile-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.happ-profile-row:last-child{border-bottom:none;}
.happ-profile-key{font-size:.78rem;color:rgba(240,232,224,.5);}
.happ-profile-val{font-size:.82rem;font-weight:600;color:#f0e8e0;}

/* ── KB article row ──────────────────────────────── */
.happ-kb-row{
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;
}
.happ-kb-row:last-child{border-bottom:none;}
.happ-kb-title{font-size:.82rem;font-weight:600;color:#f0e8e0;}
.happ-kb-src{font-size:.7rem;color:rgba(240,232,224,.45);margin-top:2px;}

/* ── adherence ring ──────────────────────────────── */
.happ-adh-hero{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.happ-adh-ring{width:60px;height:60px;flex-shrink:0;}
.happ-adh-text h3{margin:0;font-size:1rem;font-weight:700;color:#f0e8e0;}
.happ-adh-text p{margin:2px 0 0;font-size:.75rem;color:rgba(240,232,224,.5);}

/* ── medication card ─────────────────────────────── */
.happ-med{
  background:rgba(255,255,255,.04);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;
  border:1px solid rgba(232,93,93,.08);
}
.happ-med-head{
  display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;
}
.happ-med-name{font-size:.88rem;font-weight:700;color:#f0e8e0;}
.happ-med-dose{font-size:.72rem;color:rgba(240,232,224,.5);}
.happ-med-badge{
  font-size:.65rem;padding:3px 8px;border-radius:8px;font-weight:600;
}
.happ-med-badge.done{background:rgba(94,126,98,.3);color:#a8d5a0;}
.happ-med-badge.pending{background:rgba(232,93,93,.2);color:#e8a0a0;}

/* pill bar */
.happ-pill-track{
  height:6px;background:rgba(255,255,255,.08);border-radius:3px;margin:8px 0 6px;
  overflow:hidden;
}
.happ-pill-fill{height:100%;border-radius:3px;transition:width .3s;}
.happ-pill-info{font-size:.68rem;color:rgba(240,232,224,.45);}

/* med actions */
.happ-med-actions{
  display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;
}
.happ-med-btn{
  padding:6px 12px;border:none;border-radius:10px;font-size:.72rem;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.happ-med-btn.take{
  background:rgba(232,93,93,.2);color:#e8a0a0;
}
.happ-med-btn.refill{
  background:rgba(212,167,106,.15);color:#d4a76a;
}
.happ-med-btn.remove{
  background:rgba(255,255,255,.06);color:rgba(240,232,224,.4);
}

/* ── weekly adherence grid ───────────────────────── */
.happ-week-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  text-align:center;
}
.happ-week-day{
  padding:8px 0;border-radius:10px;
  background:rgba(255,255,255,.04);
}
.happ-week-day.good{background:rgba(94,126,98,.25);}
.happ-week-day.partial{background:rgba(212,167,106,.2);}
.happ-week-day.missed{background:rgba(232,93,93,.15);}
.happ-week-lbl{font-size:.6rem;color:rgba(240,232,224,.4);display:block;}
.happ-week-pct{font-size:.72rem;font-weight:700;color:#f0e8e0;display:block;margin-top:2px;}

/* ── add medication form ─────────────────────────── */
.happ-form-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border:1px dashed rgba(232,93,93,.2);border-radius:12px;
  background:transparent;color:rgba(232,93,93,.6);
  font-size:.8rem;font-weight:600;cursor:pointer;width:100%;margin-bottom:12px;
}
.happ-form{display:none;margin-bottom:12px;}
.happ-form.open{display:block;}
.happ-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;
}
.happ-form-grid.full{grid-template-columns:1fr;}
.happ-input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(232,93,93,.15);
  background:rgba(255,255,255,.06);color:#f0e8e0;font-size:.82rem;
  box-sizing:border-box;
}
.happ-input::placeholder{color:rgba(240,232,224,.3);}
.happ-input:focus{outline:none;border-color:rgba(232,93,93,.4);}
select.happ-input{appearance:none;}
.happ-submit{
  width:100%;padding:12px;border:none;border-radius:12px;
  background:rgba(232,93,93,.25);color:#f0e8e0;
  font-size:.85rem;font-weight:700;cursor:pointer;
}

/* ── mood picker ─────────────────────────────────── */
.happ-mood-bar{
  display:flex;justify-content:space-around;padding:8px 0;
}
.happ-mood-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;padding:10px 8px;border-radius:14px;
  cursor:pointer;transition:all .25s;color:rgba(240,232,224,.5);
}
.happ-mood-btn:active,.happ-mood-btn.selected{
  background:rgba(232,93,93,.15);color:#f0e8e0;transform:scale(1.1);
}
.happ-mood-emoji{font-size:1.6rem;}
.happ-mood-label{font-size:.65rem;font-weight:600;}
.happ-mood-fb{text-align:center;font-size:.78rem;margin-top:6px;color:rgba(94,126,98,.8);}

/* ── quick form (symptom + measurement) ──────────── */
.happ-qform{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.happ-qform .happ-input{flex:1;min-width:100px;}
.happ-qform select.happ-input{flex:0 0 auto;max-width:120px;}
.happ-qbtn{
  padding:8px 14px;border:none;border-radius:10px;
  background:rgba(232,93,93,.2);color:#e8a0a0;
  font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;
}

/* ── reminder row ────────────────────────────────── */
.happ-reminder{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.happ-reminder:last-child{border-bottom:none;}

/* ── chart container ─────────────────────────────── */
.happ-chart-wrap{
  position:relative;height:200px;margin:8px 0;
}
.happ-chart-wrap canvas{width:100%!important;height:100%!important;}

/* ── compare bar (symptom freq) ──────────────────── */
.happ-bar{
  display:flex;align-items:center;gap:8px;padding:6px 0;
}
.happ-bar-label{flex:0 0 90px;font-size:.78rem;color:rgba(240,232,224,.6);text-align:right;}
.happ-bar-track{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.happ-bar-fill{height:100%;border-radius:4px;background:#e85d5d;}
.happ-bar-val{flex:0 0 30px;font-size:.72rem;font-weight:600;color:#f0e8e0;}

/* ── sparkline container ─────────────────────────── */
.happ-spark{padding:14px;text-align:center;}
.happ-spark-info{font-size:.68rem;color:rgba(240,232,224,.4);margin-top:6px;}

/* ── cycle history row ───────────────────────────── */
.happ-cycle-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.happ-cycle-row:last-child{border-bottom:none;}

/* ── list item ───────────────────────────────────── */
.happ-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.happ-list-item:last-child{border-bottom:none;}

/* ── badge ───────────────────────────────────────── */
.happ-badge{
  font-size:.68rem;padding:3px 8px;border-radius:8px;
  background:rgba(232,93,93,.15);color:#e8a0a0;font-weight:600;
}

/* ── empty state ─────────────────────────────────── */
.happ-empty{
  padding:2.5rem 1rem;text-align:center;
}
.happ-empty-icon{font-size:2.5rem;margin-bottom:10px;opacity:.4;}
.happ-empty-title{font-size:1rem;font-weight:700;color:#f0e8e0;margin-bottom:4px;}
.happ-empty-text{font-size:.78rem;color:rgba(240,232,224,.45);line-height:1.4;}

/* ── toast ───────────────────────────────────────── */
.happ-toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  padding:10px 22px;border-radius:12px;font-size:.82rem;font-weight:600;
  background:rgba(232,93,93,.25);backdrop-filter:blur(14px);color:#f0e8e0;
  opacity:0;transition:all .35s;z-index:200;pointer-events:none;
}
.happ-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.happ-toast.error{background:rgba(200,50,50,.35);}

/* H2 helper classes — replaces per-site inline styles */
.happ-meas-val small{opacity:.5}
.happ-qbtn--small{font-size:.75rem;padding:2px 8px;margin-left:8px}
.happ-input--grow{flex:1;min-width:140px}
.happ-input--narrow{max-width:100px}
.happ-input--narrow-md{max-width:120px}
.happ-input--narrow-lg{max-width:200px}
.happ-input--num{max-width:90px}
.happ-input--num-sm{max-width:80px}
.happ-input--num-grow{flex:1;min-width:120px}
.happ-input--sev{max-width:110px}
.happ-kb-src--muted{color:rgba(232,93,93,.5);margin-top:4px}
.happ-badge-row{display:flex;flex-wrap:wrap;gap:8px}
.happ-badge-card{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 12px;min-width:110px;flex:1}
.happ-badge-card__emoji{font-size:1.2rem}
.happ-badge-card__title{font-weight:600;font-size:.82rem;margin:2px 0}
.happ-badge-card__desc{font-size:.72rem;opacity:.6}
.happ-pill-time{font-size:.72rem;color:#5e7e62;margin-top:6px}
.happ-week-score{text-align:center;font-size:.82rem;font-weight:600;margin-top:10px}
.happ-week-score--ok{color:#5e7e62}
.happ-week-score--warn{color:#b48a3c}
.happ-week-streak{text-align:center;font-size:.88rem;margin-top:6px}
.happ-rem-del-btn{font-size:.7rem;padding:2px 6px;background:#cc6a42}
.happ-empty-msg{opacity:.5;font-size:.85rem}
.happ-devices-intro{font-size:0.8rem;color:var(--text-muted);margin-bottom:10px}
.happ-qform--profile{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.happ-qform--profile[hidden]{display:none}
.happ-qform--reminder{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.happ-qform--reminder[hidden]{display:none}
.happ-device-card{margin-bottom:10px}
.happ-device-card__header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.happ-device-card__icon{font-size:1.5rem}
.happ-device-card__main{flex:1}
.happ-device-card__name{font-weight:600}
.happ-device-card__webhook{display:flex;align-items:center;gap:6px}
.happ-device-card__url{flex:1;padding:5px 8px;border-radius:6px;border:1px solid var(--card-border,#444);background:rgba(255,255,255,.05);color:inherit;font-size:0.75rem;font-family:monospace}
.happ-device-card__copy{padding:5px 10px;font-size:0.75rem;white-space:nowrap}
.happ-device-card__sync{margin-top:6px}
.happ-devices-help{margin-top:12px;padding:10px;background:rgba(51,161,153,.1);border-radius:10px;font-size:0.8rem;color:var(--text-muted)}
.happ-corr-line{font-size:.85rem;margin-bottom:6px}
.happ-corr-line--soft{font-size:.82rem;opacity:.8;margin-bottom:4px}
.happ-corr-r{opacity:.5;font-size:.75rem}
.happ-corr-hint{font-size:.75rem;opacity:.6;margin-bottom:4px}
.happ-pattern-cta-wrap{margin-top:8px}
.happ-pattern-cta{width:100%;padding:10px;font-size:.85rem}