body { background: #0c0c0e; color: #e4e4e7; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; text-align: center; margin: 0; padding: 10px; -webkit-user-select: none; user-select: none; }
.container { max-width: 450px; margin: 0 auto; position: relative; }
.video-container { position: relative; width: 320px; height: 320px; margin: 15px auto 5px auto; border-radius: 50%; overflow: visible; box-shadow: 0 0 25px rgba(0,0,0,0.6); }
.video-mask { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; border: 3px solid #27272a; box-sizing: border-box; }
video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #000; }
#analysis-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; transform: scaleX(-1); }
.progress-svg { position: absolute; top: -5px; left: -5px; width: 330px; height: 330px; pointer-events: none; transform: rotate(-90deg); z-index: 10; }
.progress-circle-bg { fill: none; stroke: rgba(39, 39, 42, 0.4); stroke-width: 4; }
.progress-circle-bar { fill: none; stroke: #ff73b9; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1005; stroke-dashoffset: 1005; transition: stroke-dashoffset 0.1s linear, stroke 0.3s; }
.radar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(255, 115, 185, 0.4); box-sizing: border-box; pointer-events: none; z-index: 5; }
.status-tag { font-size: 14px; color: #ff73b9; font-weight: bold; margin: 8px 0; min-height: 20px; transition: color 0.3s; }
.btn-trigger { background: linear-gradient(135deg, #ff73b9, #fe8dc6); color: #09090b; border: none; padding: 14px; font-size: 16px; border-radius: 30px; font-weight: bold; width: 75%; margin: 0 auto 15px auto; display: block; box-shadow: 0 4px 15px rgba(255,115,185,0.25); transition: all 0.2s; }
.btn-trigger:active { transform: scale(0.97); filter: brightness(0.9); }
.hud-card { background: rgba(24, 24, 27, 0.85); border-radius: 20px; padding: 15px 20px; margin: 10px; border: 1px solid #27272a; text-align: left; backdrop-filter: blur(10px); }
.metric-item { font-size: 15px; margin: 10px 0; color: #e4e4e7; border-bottom: 1px solid #1f1f23; padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.metric-item > span:first-child { flex: 0 0 78px; color: #a1a1aa; }
.metric-item > span:last-child { text-align: right; line-height: 1.45; }
.metric-advice { align-items: flex-start; gap: 12px; }
.metric-advice > span:last-child { flex: 1; white-space: normal; word-break: break-word; }
.value-highlight { color: #ff73b9; font-weight: bold; font-size: 17px; }
#hidden-canvas { display: none; }