:root{color:#eff9ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#020c17;font-family:Arial,Noto Sans TC,PingFang TC,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button{font:inherit;border:0}button:focus-visible{outline-offset:4px;outline:3px solid #e8f44f}.dashboard{background:radial-gradient(circle at 28% 22%,#0cc2aa24,#0000 34%),radial-gradient(circle at 76% 60%,#1768d62e,#0000 34%),#020c17;grid-template-columns:minmax(420px,1fr) minmax(540px,1.03fr);gap:20px;min-height:100vh;padding:20px;display:grid}.camera-area,.signals-area{min-width:0;max-width:100%}.camera-area{grid-template-rows:minmax(360px,1fr) auto auto;gap:18px;display:grid}.camera-frame{background:#071522;border:1px solid #22e8ceb8;border-radius:8px;min-height:360px;position:relative;overflow:hidden;box-shadow:0 0 28px #0ae0c429}.camera-frame video{object-fit:cover;width:100%;height:100%;display:block;transform:scaleX(-1)}.capture-canvas{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.camera-dim{pointer-events:none;background:linear-gradient(#020c1714,#020c175c),#020c171f;position:absolute;inset:0}.face-scan{aspect-ratio:1;opacity:.45;pointer-events:none;border:2px solid #23f6d1d9;border-radius:50%;width:min(54vw,370px);max-width:66%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 32px #23f6d138,0 0 28px #23f6d17a}.face-scan:after{content:"";filter:blur(.2px);border-right:5px solid #23f6d1e6;border-radius:50%;position:absolute;inset:5%}.face-scan.active{opacity:1;animation:2.4s ease-in-out infinite scanPulse}.face-box{z-index:2;pointer-events:none;border:2px solid #e8f44f;border-radius:8px;position:absolute;box-shadow:0 0 0 1px #00000073,0 0 22px #e8f44f70}.camera-placeholder{text-align:center;background:linear-gradient(135deg,#051625f0,#072836c7),repeating-linear-gradient(90deg,#ffffff0a 0 1px,#0000 1px 42px);place-content:center;gap:12px;display:grid;position:absolute;inset:0}.camera-placeholder strong{font-size:clamp(30px,4vw,52px)}.camera-placeholder span{color:#93b9c9;font-size:clamp(18px,2vw,26px)}.connection-pill{z-index:2;color:#dffef8;background:#020c17b8;border:1px solid #21f4d08c;border-radius:999px;padding:8px 12px;font-size:15px;font-weight:800;position:absolute;top:16px;right:16px;box-shadow:0 0 18px #21f4d033}.control-row{align-items:center;gap:14px;display:flex}.action{color:#03111b;cursor:pointer;border-radius:8px;min-width:180px;min-height:54px;padding:12px 24px;font-size:22px;font-weight:800}.primary{background:linear-gradient(135deg,#21f4d0,#4bb7ff);box-shadow:0 0 20px #21f4d047}.secondary{color:#e8f7ff;background:linear-gradient(135deg,#375268,#233647)}.safe-note{color:#8aabbc;overflow-wrap:anywhere;margin:0;font-size:16px}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.status-card{background:linear-gradient(#052133f0,#041724f5);border:1px solid #26d3e861;border-radius:8px;align-content:center;justify-items:center;gap:7px;min-height:112px;padding:14px 10px;display:grid;box-shadow:inset 0 0 24px #1abcd214}.status-card p{color:#d3e1ea;margin:0;font-size:18px;font-weight:700}.status-card strong{color:#20f7ce;font-size:clamp(24px,2.5vw,34px)}.status-icon,.metric-mark{display:inline-block;position:relative}.status-icon{color:#62b7ff;width:30px;height:30px}.user-icon{border:3px solid;border-top-color:#0000;border-radius:50% 50% 42% 42%}.user-icon:before{content:"";border:3px solid;border-radius:50%;width:11px;height:11px;position:absolute;top:-12px;left:8px}.clock-icon{border:3px solid;border-radius:50%}.clock-icon:before,.clock-icon:after{content:"";transform-origin:bottom;background:currentColor;position:absolute;top:7px;left:13px}.clock-icon:before{width:3px;height:9px}.clock-icon:after{width:9px;height:3px;transform:rotate(0)translateY(7px)}.light-icon{background:currentColor;border-radius:50%;width:28px;height:28px;box-shadow:0 0 0 8px #62b7ff26}.signal-icon{background:linear-gradient(0deg,#20f7ce 0 34%,#0000 34%) 0 0/6px 100% no-repeat,linear-gradient(0deg,#20f7ce 0 52%,#0000 52%) 9px 0/6px 100% no-repeat,linear-gradient(0deg,#20f7ce 0 74%,#0000 74%) 18px 0/6px 100% no-repeat,linear-gradient(0deg,#20f7ce 0 92%,#0000 92%) 27px 0/6px 100% no-repeat;width:34px;height:32px}.error-banner{color:#ffd0d0;background:#5c0d17ad;border:1px solid #ff5c5cbf;border-radius:8px;padding:12px 16px}.runtime-line{color:#9dc0ce;flex-wrap:wrap;align-items:center;gap:10px;min-height:36px;font-size:16px;display:flex}.runtime-line span{background:#05213394;border:1px solid #26d3e838;border-radius:999px;padding:6px 10px}.debug-panel{background:#020c179e;border:1px solid #26d3e833;border-radius:8px;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:10px;display:grid}.debug-panel div{background:#052133b8;border-radius:6px;gap:3px;min-width:0;padding:8px 10px;display:grid}.debug-panel span{color:#80a8ba;font-size:13px;font-weight:700}.debug-panel strong{color:#dffef8;text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.signals-area{grid-template-rows:repeat(3,minmax(0,1fr));align-self:start;gap:12px;height:calc(100vh - 40px);min-height:0;display:grid}.signal-card{background:linear-gradient(#041f30e6,#020e19f7),repeating-linear-gradient(90deg,#1ab3d20f 0 1px,#0000 1px 42px);border:1px solid;border-radius:8px;grid-template-columns:minmax(320px,1fr) minmax(190px,.34fr);min-height:0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 34px #ffffff09,0 0 24px #00000038}.signal-card.waiting{opacity:.78}.wave-panel,.metric-stack{min-width:0}.wave-panel{grid-template-rows:auto 1fr;gap:4px;padding:14px 18px 15px;display:grid}.wave-panel h2,.metric-tile p,.metric-tile small,.metric-tile em{margin:0}.wave-panel h2{color:currentColor;text-shadow:0 0 12px color-mix(in srgb, currentColor 45%, transparent);font-size:clamp(18px,1.75vw,24px);line-height:1.1}.chart-content{grid-template-columns:40px 1fr;align-items:center;min-height:96px;display:grid}.axis{color:#d6e5ed;flex-direction:column;justify-content:space-between;align-self:stretch;padding:10px 0 7px;font-size:16px;line-height:1;display:flex}.chart-content svg{color:currentColor;opacity:.96;filter:drop-shadow(0 0 8px);width:100%;height:104px}.chart-content rect{color:#44b9d92e}.metric-stack{border-left:1px solid #b9d7e52e;grid-template-rows:repeat(2,minmax(0,1fr));display:grid;position:relative}.metric-stack:before{content:"";opacity:.9;background:currentColor;width:3px;position:absolute;top:14px;bottom:14px;left:0;box-shadow:0 0 14px}.metric-tile{grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:10px 16px 10px 22px;display:grid;position:relative}.metric-tile+.metric-tile{border-top:1px solid #b9d7e529}.metric-tile p{color:currentColor;font-size:16px;font-weight:700;line-height:1.1}.metric-tile strong{color:currentColor;letter-spacing:0;text-shadow:0 0 14px color-mix(in srgb, currentColor 42%, transparent);margin-top:4px;font-size:clamp(28px,3.1vw,46px);line-height:.98;display:inline-block}.metric-tile small{color:currentColor;margin-left:6px;font-size:15px;font-weight:700}.metric-tile em{color:#90a9b6;margin-top:5px;font-size:12px;font-style:normal;font-weight:700;display:block}.metric-glyph{color:currentColor;width:30px;height:30px;display:inline-block;position:relative}.heart-glyph{background:#ff4c5f;width:24px;height:24px;transform:rotate(45deg)scale(.78)}.heart-glyph:before,.heart-glyph:after{content:"";background:#ff4c5f;border-radius:50%;width:24px;height:24px;position:absolute}.heart-glyph:before{left:-12px}.heart-glyph:after{top:-12px}.hrv-glyph:before{content:"";background:linear-gradient(63deg,#0000 0 39%,currentColor 40% 47%,#0000 48%) 0 8px/13px 18px no-repeat,linear-gradient(117deg,#0000 0 38%,currentColor 39% 47%,#0000 48%) 9px 0/13px 18px no-repeat,linear-gradient(63deg,#0000 0 39%,currentColor 40% 47%,#0000 48%) 18px 8px/13px 18px no-repeat;width:30px;height:18px;position:absolute;top:8px;left:0}.bp-glyph{border:3px solid;border-radius:50%}.bp-glyph:before{content:"";background:currentColor;width:4px;height:16px;position:absolute;top:8px;left:14px;transform:rotate(8deg)}.bp-glyph:after{content:"";border:3px solid;border-left:0;border-radius:0 12px 12px 0;width:8px;height:16px;position:absolute;top:5px;right:-9px}.droplet-glyph{background:currentColor;border-radius:60% 60% 60% 0;transform:rotate(-45deg)scale(.78)}.droplet-glyph:after{content:"";opacity:.82;background:#061a29;border-radius:50%;width:9px;height:16px;position:absolute;top:8px;left:8px}.respiration-glyph{background:linear-gradient(currentColor,currentColor) 0 9px/26px 4px no-repeat,linear-gradient(currentColor,currentColor) 9px 19px/25px 4px no-repeat;border-radius:999px}.respiration-glyph:before,.respiration-glyph:after{content:"";border-top:3px solid;border-bottom:0;border-left:0;border-right:3px solid;border-radius:50%;position:absolute}.respiration-glyph:before{width:12px;height:12px;top:2px;right:5px}.respiration-glyph:after{width:13px;height:13px;top:14px;right:0}.stress-glyph{border:3px solid;border-radius:45% 55% 48% 52%}.stress-glyph:before,.stress-glyph:after{content:"";border:3px solid;border-radius:50%;position:absolute}.stress-glyph:before{border-right:0;width:8px;height:14px;top:5px;left:5px}.stress-glyph:after{border-left:0;width:8px;height:14px;top:5px;right:4px}.mint{color:#21f4d0}.blue{color:#27a9ff}.amber{color:#ffd21c}.pink{color:#ff6b91}.lavender{color:#c996ff}.orange{color:#ffad6b}.cyan{color:#6cf}.yellow{color:#fff06a}.green{color:#39f2c7}.mint .metric-stack:before{color:#ff6b91}.blue .metric-stack:before{color:#6cf}.amber .metric-stack:before{color:#39f2c7}@keyframes scanPulse{0%,to{box-shadow:inset 0 0 28px #23f6d12e,0 0 22px #23f6d16b}50%{box-shadow:inset 0 0 42px #23f6d14d,0 0 42px #23f6d1ad}}@media (width<=1180px){.dashboard{grid-template-columns:1fr}.camera-area{grid-template-rows:minmax(420px,52vh) auto auto}.signals-area{grid-template-rows:none;height:auto}.debug-panel{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=780px){.dashboard{width:100%;max-width:100vw;padding:12px;overflow-x:hidden}.signal-card{grid-template-columns:1fr}.wave-panel{padding:16px 14px 18px}.chart-content{grid-template-columns:36px 1fr}.axis{font-size:15px}.metric-stack{border-top:1px solid #b9d7e524;border-left:0}.metric-stack:before{width:auto;height:3px;inset:0 18px auto}.metric-tile{grid-template-columns:38px minmax(0,1fr);padding:14px 16px}.metric-tile strong{font-size:34px}.status-grid,.debug-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.control-row{flex-direction:column;align-items:stretch}}@media (width<=600px){.status-grid,.debug-panel{grid-template-columns:1fr}}