*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--text-tertiary: #adb5bd;--accent-primary: #2563eb;--accent-primary-hover: #1d4ed8;--accent-success: #059669;--accent-danger: #dc2626;--border-light: #e5e7eb;--border-medium: #d1d5db;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-display: 5rem}body{font-family:var(--font-family);color:var(--text-primary);background:var(--bg-secondary);min-height:100vh;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.hr-monitor{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-md);width:100%;max-width:600px;overflow:hidden}.header{background:var(--bg-primary);border-bottom:1px solid var(--border-light);padding:var(--spacing-md);text-align:center}.header h1{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.main-content{padding:var(--spacing-lg)}.connection-status{padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);border:1px solid var(--border-light)}.connection-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.device-info{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0}.status-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-indicator.connected{background:var(--accent-success);box-shadow:0 0 0 3px #0596691a}.device-name{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battery-level{font-size:var(--text-xs);color:var(--text-tertiary);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:2px}.battery-icon{font-size:14px;line-height:1}.device-info-toggle-inline{background:transparent;border:none;color:var(--text-tertiary);font-size:var(--text-xs);cursor:pointer;padding:0;margin:0;line-height:1;transition:color .2s ease;display:inline-flex;align-items:center}.device-info-toggle-inline:hover{color:var(--accent-primary)}.device-info-toggle-inline:active{transform:scale(.95)}.btn-primary{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-base);font-weight:500;color:#fff;background:var(--accent-primary);border:1px solid var(--accent-primary);border-radius:var(--radius-md);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.btn-primary:hover:not(:disabled){background:var(--accent-primary-hover);border-color:var(--accent-primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-base);font-weight:500;color:var(--text-primary);background:transparent;border:1px solid var(--border-medium);border-radius:var(--radius-md);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.btn-secondary:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--text-secondary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);font-weight:500;color:var(--accent-danger);background:transparent;border:1px solid var(--accent-danger);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;min-height:40px}.btn-danger:hover:not(:disabled){background:var(--accent-danger);color:#fff}.hr-display{text-align:center;padding:var(--spacing-xl) var(--spacing-md);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-light)}.hr-value-container{margin-bottom:var(--spacing-xs)}.hr-value{font-size:var(--text-display);font-weight:600;color:var(--text-primary);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.hr-unit{font-size:var(--text-base);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:var(--spacing-xs)}.device-info-toggle{margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:transparent;border:1px solid var(--border-medium);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .2s ease;width:100%;text-align:left}.device-info-toggle:hover{background:var(--bg-tertiary);border-color:var(--accent-primary);color:var(--accent-primary)}.device-info-toggle:active{transform:translateY(1px)}.device-info-extended{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-light)}.device-info-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--spacing-xs) 0;gap:var(--spacing-md)}.device-info-row:not(:last-child){border-bottom:1px solid var(--border-light)}.device-info-row-label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.device-info-row-value{font-size:var(--text-xs);color:var(--text-primary);font-weight:400;text-align:right;word-break:break-word}.stats-section{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-light)}.stats-title{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.stat-card{background:var(--bg-secondary);border-radius:var(--radius-sm);padding:var(--spacing-md);text-align:center;border:1px solid var(--border-light)}.stat-label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:500;margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}.stat-unit{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:var(--spacing-xs);text-transform:uppercase}.error-message{background:#ffebee;border:2px solid var(--error-color);color:#c62828;padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);font-weight:500}.error-icon{font-size:1.5rem}.error-message a{color:#b71c1c;text-decoration:underline;font-weight:700}.error-message a:hover{color:#7f0000}.info-message{background:#e3f2fd;border:2px solid #2196f3;color:#1565c0;padding:var(--spacing-md);border-radius:var(--radius-md);margin-top:var(--spacing-lg)}.info-message p{margin-bottom:var(--spacing-sm);font-size:.9375rem}.info-message code{background:#1565c01a;padding:2px 6px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:.875rem;color:#0d47a1;font-weight:600}.info-message a{color:#1565c0;text-decoration:underline;font-weight:600;transition:color .2s ease}.info-message a:hover{color:#0d47a1}.hrv-section{padding-top:var(--spacing-lg)}.hrv-section h2{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.05em}.hrv-idle{text-align:center}.hrv-description{color:var(--text-secondary);margin-bottom:var(--spacing-md);font-size:var(--text-sm);line-height:1.5}.hrv-start-btn{width:100%}.hrv-note{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:var(--spacing-sm)}.hrv-testing{text-align:center}.hrv-status{color:var(--accent-primary);font-weight:500;margin-bottom:var(--spacing-md);font-size:var(--text-sm)}.hrv-progress-container{margin-bottom:var(--spacing-md)}.hrv-progress-bar{width:100%;height:6px;background:var(--border-light);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--spacing-sm)}.hrv-progress-fill{height:100%;background:var(--accent-primary);transition:width .3s ease;border-radius:var(--radius-sm)}.hrv-countdown{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-variant-numeric:tabular-nums}.hrv-rr-count{display:flex;justify-content:center;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);font-size:var(--text-sm)}.hrv-label{color:var(--text-secondary)}.hrv-value{font-weight:600;color:var(--accent-primary);font-variant-numeric:tabular-nums}.hrv-stop-btn{width:100%}.hrv-results h3{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.hrv-warning,.hrv-error{padding:var(--spacing-sm);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);font-size:var(--text-sm);line-height:1.5;border:1px solid}.hrv-warning{background:#fefce8;border-color:#facc15;color:#854d0e}.hrv-error{background:#fef2f2;border-color:var(--accent-danger);color:#991b1b}.hrv-metrics-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.hrv-metric{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--border-light);text-align:center}.hrv-metric-label{display:block;font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-xs)}.hrv-metric-value{display:block;font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs);font-variant-numeric:tabular-nums}.hrv-unit{font-size:var(--text-sm);font-weight:400;color:var(--text-secondary)}.hrv-metric-description{display:block;font-size:var(--text-xs);color:var(--text-tertiary)}.hrv-new-test-btn{width:100%}.error-message,.info-message{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:var(--text-sm);line-height:1.6;border:1px solid}.error-message{background:#fef2f2;border-color:var(--accent-danger);color:#991b1b}.info-message{background:var(--bg-secondary);border-color:var(--border-medium);color:var(--text-secondary)}.info-message p{margin-bottom:var(--spacing-sm)}.info-message p:last-child{margin-bottom:0}.info-message code{background:var(--bg-tertiary);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:SF Mono,Monaco,Menlo,monospace}.footer{background:var(--bg-secondary);padding:var(--spacing-md);text-align:center;border-top:1px solid var(--border-light)}.footer p{font-size:var(--text-xs);color:var(--text-tertiary)}@media (min-width: 768px){.app{padding:var(--spacing-xl)}.hr-monitor{max-width:700px}.header h1{font-size:1.5rem}.hr-value{font-size:6rem}.stats-grid{grid-template-columns:repeat(4,1fr)}.hrv-metrics-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.hr-monitor{max-width:800px}.hr-value{font-size:7rem}}@media (max-height: 600px) and (orientation: landscape){.header{padding:var(--spacing-sm)}.main-content{padding:var(--spacing-md)}.hr-display{padding:var(--spacing-lg) var(--spacing-md)}.hr-value{font-size:4rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}