/* ผู้พัฒนา ระบบ : นายวิษณุ เสาะสาย · เจ้าพนักงานธุรการ */
#health-connect-panel{--hc-accent:var(--bs-primary,#008c68);position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:520px;container:hc-panel / inline-size;margin-inline:auto;padding:clamp(18px,4vw,30px);border:1px solid #ffffff75;border-radius:28px;background:linear-gradient(145deg,#fffffff5,#f1f7f5f5);color:#183c39;box-shadow:0 24px 65px #001d252b,inset 0 1px 0 #fff;backdrop-filter:blur(16px)}
#health-connect-panel::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;top:-160px;right:-110px;border-radius:50%;background:var(--hc-accent);opacity:.12;filter:blur(35px);pointer-events:none}
#health-connect-panel .hc-heading{position:relative;z-index:2}
#health-connect-panel .hc-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#48635f}
#health-connect-panel .hc-status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #cee3d7;border-radius:99px;background:#edf7f0;color:#276143;font-size:11px;white-space:nowrap}
#health-connect-panel .hc-status>span{width:6px;height:6px;border-radius:50%;background:#36845a;box-shadow:0 0 0 4px #36845a14;animation:hc-status-pulse 3s ease-in-out infinite}
#health-connect-panel .hc-content{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:18px;margin-top:12px}
#health-connect-panel .hc-info{min-width:0}
#health-connect-panel .hc-orbit{position:relative;display:grid;place-items:center;height:220px;min-width:0;margin:0}
#health-connect-panel .hc-scene{position:absolute;inset:0;pointer-events:none}
#health-connect-panel .hc-scene canvas{display:block;width:100%;height:100%}
#health-connect-panel .hc-css-ring{position:absolute;width:min(165px,100%);aspect-ratio:1;height:auto;border:1px dashed var(--hc-accent);opacity:.25;border-radius:50%;transform:rotateX(45deg);animation:hc-orbit-turn 24s linear infinite}
#health-connect-panel .hc-css-ring::before{content:"";position:absolute;inset:22px;border:1px solid var(--hc-accent);border-radius:50%}
#health-connect-panel.hc-webgl .hc-css-ring{visibility:hidden}
#health-connect-panel .hc-emblem{display:grid;place-items:center;z-index:1;width:80px;height:80px;border:1px solid #fff;border-radius:30px;background:linear-gradient(145deg,#fff,#e7f2ee);color:var(--hc-accent);box-shadow:0 15px 40px #143f3520,inset 0 2px 0 #fff;animation:hc-float 6s ease-in-out infinite}
#health-connect-panel .hc-emblem i{font-size:38px;line-height:1}
#health-connect-panel .hc-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;background:#fffffff2;border:1px solid #e2ebe8;border-radius:13px;box-shadow:0 8px 25px #153f3310;color:#294d45;font-size:11px;font-weight:600;animation:hc-float 7s ease-in-out infinite}
#health-connect-panel .hc-tag i{color:var(--hc-accent);font-size:17px}
#health-connect-panel .hc-people{top:8px;left:0;animation-delay:-2s}
#health-connect-panel .hc-hospital{bottom:8px;right:0;animation-delay:-4s}
#health-connect-panel .hc-caption{text-align:left;margin-bottom:14px}
#health-connect-panel .hc-caption strong{font-size:clamp(16px,2vw,19px);font-weight:600;color:#183c39}
#health-connect-panel .hc-caption p{font-size:12px;line-height:1.6;margin:7px 0 0;color:#536d65}
#health-connect-panel .hc-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
#health-connect-panel .hc-metrics>.col-6{width:auto;padding:0;margin:0;min-width:0}
#health-connect-panel .hc-metric{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:center;height:100%;padding:10px;border:1px solid #dae6e0;border-radius:16px;background:#ffffffb8;text-align:left}
#health-connect-panel .hc-metric i{grid-row:span 2;color:var(--hc-accent);font-size:20px}
#health-connect-panel .hc-metric strong{font-size:clamp(22px,2.5vw,27px);line-height:1.25;color:#183c39;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#health-connect-panel .hc-metric small{font-size:11px;color:#536d65;line-height:1.6}
#health-connect-panel .hc-motion{display:block;margin:14px auto 0;padding:5px 10px;border:0;background:transparent;color:#536d65;font:inherit;font-size:11px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#health-connect-panel .hc-motion[hidden]{display:none}
#health-connect-panel .hc-motion:focus-visible{outline:2px solid var(--hc-accent);outline-offset:3px;border-radius:6px}
#health-connect-panel.hc-paused *,#health-connect-panel.hc-paused::before{animation-play-state:paused!important}
@keyframes hc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hc-orbit-turn{to{transform:rotateX(45deg) rotate(360deg)}}
@keyframes hc-status-pulse{50%{box-shadow:0 0 0 7px #36845a08}}
@container hc-panel (max-width:400px){#health-connect-panel .hc-metrics{grid-template-columns:minmax(0,1fr)}#health-connect-panel .hc-content{gap:12px}#health-connect-panel .hc-caption p{font-size:11px}#health-connect-panel .hc-tag{padding:7px;font-size:10px;gap:5px}}
@media(max-width:360px){#health-connect-panel .hc-tag{font-size:11px;padding:8px}#health-connect-panel .hc-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
#health-connect-panel .hc-metrics>.col-6{width:auto;padding:0;margin:0;min-width:0}
#health-connect-panel .hc-metric{padding:12px 8px;column-gap:4px}}
@media(prefers-reduced-motion:reduce){#health-connect-panel *,#health-connect-panel::before{animation:none!important}}