@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#f4f1ea; --muted:#a7aaa4; --line:#2c302e; --bg:#0c0f0e; --accent:#d8f36b; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 10%, #202a20 0, transparent 34%), var(--bg); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
.shell { width:100%; max-width:960px; margin:0 auto; padding:16px 14px 32px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.brand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800; letter-spacing:-.03em; } .brand-mark { color:var(--accent); font-size:19px; }
.status-pill { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap; } .status-dot { width:7px; height:7px; border-radius:50%; background:#686d68; } .status-pill.connected .status-dot { background:var(--accent); box-shadow:0 0 14px var(--accent); } .status-pill.connected { color:var(--accent); }
.hero { padding:54px 0 38px; } .eyebrow,.card-label { color:var(--accent); font:500 10px/1 DM Mono,monospace; letter-spacing:.13em; }
h1 { font-size:clamp(44px, 13vw, 84px); letter-spacing:-.075em; line-height:.94; margin:16px 0 18px; font-weight:800; } .intro { color:var(--muted); max-width:470px; font-size:15px; line-height:1.6; margin:0 0 24px; }
.connect-button { width:100%; appearance:none; border:0; background:var(--accent); color:#151812; border-radius:999px; padding:16px 20px; font:700 14px Manrope,sans-serif; cursor:pointer; transition:transform .2s, background .2s; } .connect-button:hover { background:#e4fb8c; transform:translateY(-2px); } .connect-button:disabled { opacity:.6; cursor:wait; transform:none; } .button-icon { font-size:18px; vertical-align:-1px; margin-right:6px; } .hint { color:#777d77; font-size:11px; line-height:1.5; margin:12px 4px 0; }
.dashboard { display:grid; grid-template-columns:1fr; gap:12px; } .bpm-card,.side-card,.chart-card { background:linear-gradient(145deg,#1b211e,#121615); border:1px solid var(--line); border-radius:18px; padding:20px; } .bpm-card,.side-card { min-height:190px; } .bpm-card { display:flex; flex-direction:column; justify-content:space-between; }
.bpm-row { display:flex; align-items:baseline; gap:12px; margin:26px 0 16px; } .bpm-value { font-size:clamp(76px, 25vw, 150px); line-height:.8; letter-spacing:-.09em; font-weight:700; } .bpm-unit { color:var(--muted); font:500 12px DM Mono,monospace; } .pulse-line { color:var(--muted); display:flex; align-items:center; gap:9px; font-size:11px; } .pulse-dot { width:7px; height:7px; border-radius:50%; background:#697269; } .bpm-card.live .pulse-dot { background:var(--accent); animation:pulse 1.1s infinite; } .bpm-card.live .pulse-line { color:var(--accent); }
.sensor-name { font-size:21px; font-weight:700; letter-spacing:-.04em; margin-top:22px; } .sensor-meta { color:var(--muted); font-size:12px; margin-top:7px; } .divider { height:1px; background:var(--line); margin:25px 0 20px; }
.chart-card { margin-top:12px; } .chart-heading { display:block; } .chart-heading h2 { font-size:20px; letter-spacing:-.05em; margin:10px 0 0; } .chart-range { color:#777d77; font:10px DM Mono,monospace; margin-top:14px; white-space:nowrap; } .chart-legend { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; }
.chart-wrap { height:190px; margin-top:20px; position:relative; } #ecgChart { width:100%; height:100%; display:block; border-radius:8px; } .chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:#8c6658; font-size:11px; text-align:center; pointer-events:none; } .ecg-card.has-data .chart-empty { display:none; } .medical-note { color:#626862; font-size:10px; line-height:1.5; margin:15px 0 0; }
.monitor-card { margin-top:12px; padding:22px; border:1px solid #39433b; border-radius:20px; background:linear-gradient(145deg,#1d251f,#111513); box-shadow:0 14px 40px rgba(0,0,0,.16); } .monitor-card.is-active { border-color:rgba(216,243,107,.55); } .monitor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; } .monitor-heading h2 { margin:0; font-size:22px; letter-spacing:-.05em; } .monitor-state { color:var(--muted); display:flex; align-items:center; gap:7px; font:10px DM Mono,monospace; } .monitor-dot { width:7px; height:7px; border-radius:50%; background:#606860; } .monitor-state.active { color:var(--accent); } .monitor-state.active .monitor-dot { background:var(--accent); box-shadow:0 0 12px var(--accent); } .monitor-copy { color:var(--muted); font-size:12px; line-height:1.55; margin:12px 0 20px; max-width:560px; } .monitor-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .monitor-controls button,.save-report { min-height:46px; border-radius:12px; padding:10px 12px; font:700 12px Manrope,sans-serif; cursor:pointer; transition:transform .18s,background .18s,border-color .18s; } .monitor-controls button span { margin-right:5px; font-size:10px; } .monitor-start { border:0; background:var(--accent); color:#151812; } .monitor-start:hover:not(:disabled) { background:#e4fb8c; transform:translateY(-1px); } .monitor-stop,.save-report { border:1px solid #4d574d; background:rgba(255,255,255,.02); color:var(--ink); } .monitor-stop:hover:not(:disabled),.save-report:hover { border-color:var(--accent); color:var(--accent); } .monitor-controls button:disabled { opacity:.35; cursor:not-allowed; } .monitor-duration { color:#7e887f; font:10px DM Mono,monospace; margin-top:14px; } .report { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; } .report-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .report-heading h3 { margin:0; font-size:15px; } .save-report { min-height:36px; font-size:11px; } .report-table-wrap { overflow-x:auto; margin-top:12px; border:1px solid var(--line); border-radius:12px; } table { width:100%; border-collapse:collapse; font-size:11px; } th,td { border-bottom:1px solid var(--line); padding:10px 9px; text-align:left; white-space:nowrap; } tr:last-child td { border-bottom:0; } th { color:var(--accent); font:10px DM Mono,monospace; font-weight:500; background:rgba(216,243,107,.03); } td { color:var(--muted); }
footer { color:#626862; text-align:center; font-size:10px; line-height:1.5; margin-top:28px; }
.ecg-analysis-card { margin-top:12px; padding:22px; border:1px solid #39433b; border-radius:20px; background:linear-gradient(145deg,#1d251f,#111513); }
.ecg-analysis-card h2 { margin:10px 0 0; font-size:22px; letter-spacing:-.05em; }
.analysis-intro { color:var(--muted); font-size:12px; line-height:1.6; max-width:720px; margin:12px 0 18px; }
.analysis-grid { display:grid; grid-template-columns:1fr; gap:9px; }
.analysis-item { border:1px solid var(--line); border-radius:13px; padding:13px 14px; background:rgba(255,255,255,.025); }
.analysis-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.analysis-item h3 { margin:0; font-size:13px; letter-spacing:-.02em; }
.analysis-item p { color:var(--muted); font-size:11px; line-height:1.5; margin:8px 0 0; }
.analysis-status { border-radius:999px; padding:4px 7px; font:9px DM Mono,monospace; white-space:nowrap; }
.analysis-status.limited { color:var(--accent); background:rgba(216,243,107,.10); }
.analysis-status.warning { color:#ffbf9e; background:rgba(255,149,105,.12); }
.analysis-status.unavailable { color:#a7aaa4; background:rgba(255,255,255,.07); }
.analysis-alert { margin-top:15px; padding:13px 14px; border:1px solid rgba(255,149,105,.35); border-radius:13px; color:#ffbf9e; font-size:11px; line-height:1.55; background:rgba(255,149,105,.08); }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.8);opacity:1} }
@media (min-width:681px) { .shell { padding:28px 20px 40px; } .topbar { padding-bottom:22px; } .brand { font-size:18px; } .hero { padding:92px 0 62px; max-width:650px; } .intro { font-size:17px; margin-bottom:32px; } .connect-button { width:auto; padding:15px 23px; } .dashboard { grid-template-columns:1fr; gap:16px; } .bpm-card { min-height:250px; padding:28px; } .bpm-value { font-size:clamp(86px,14vw,150px); } .chart-card { padding:28px; border-radius:22px; margin-top:16px; } .chart-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .chart-heading h2 { font-size:22px; } .chart-range { margin-top:3px; } .chart-wrap { height:250px; margin-top:24px; } .analysis-grid { grid-template-columns:1fr 1fr; } .ecg-analysis-card { padding:28px; border-radius:22px; } }