: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}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}.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;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{gap:14px;display:grid}.signal-card{background:linear-gradient(#041f30eb,#020e19f5);border:1px solid;border-radius:12px;min-height:154px;overflow:hidden;box-shadow:inset 0 0 34px #ffffff0a,0 0 24px #00000038}.signal-card.waiting{opacity:.62}.signal-header{background:linear-gradient(90deg,#0b3447bd,#041b2a47);border-bottom:1px solid #ffffff14;align-items:center;gap:14px;height:50px;padding:0 18px;display:flex}.signal-header h2{color:#f5fbff;margin:0;font-size:clamp(20px,2vw,28px)}.signal-header small{color:#a6bdc9;margin-left:auto;font-size:15px;font-weight:700}.signal-dot{width:24px;height:24px;box-shadow:0 0 0 8px color-mix(in srgb, currentColor 18%, transparent), 0 0 16px currentColor;background:currentColor;border-radius:50%;flex:none}.signal-body{grid-template-columns:minmax(260px,1fr) 150px 164px;min-height:104px;display:grid}.chart-box,.metric-block{min-width:0;padding:10px 16px 12px}.chart-box{gap:4px;display:grid}.chart-box p,.metric-block p,.metric-block small{color:#c8d7df;margin:0}.chart-box p{padding-left:46px;font-size:16px}.chart-content{grid-template-columns:40px 1fr;align-items:stretch;min-height:82px;display:grid}.axis{color:#d6e5ed;flex-direction:column;justify-content:space-between;padding:2px 0;font-size:18px;display:flex}.chart-content svg{color:currentColor;opacity:.96;filter:drop-shadow(0 0 8px);width:100%;height:84px}.chart-content rect{color:#689cb029}.metric-block{border-left:1px solid #b9d7e524;grid-template-rows:auto auto auto;grid-template-columns:28px 1fr;align-content:center;column-gap:8px;display:grid}.metric-block p{align-self:center;font-size:20px;font-weight:700}.metric-block strong{color:currentColor;letter-spacing:0;grid-column:1/-1;font-size:clamp(38px,4vw,54px);line-height:.98}.metric-block small{grid-column:1/-1;font-size:20px}.metric-mark{align-self:center;width:24px;height:24px}.heart-mark{background:#ff4c5f;transform:rotate(45deg)scale(.75)}.heart-mark:before,.heart-mark:after{content:"";background:#ff4c5f;border-radius:50%;width:24px;height:24px;position:absolute}.heart-mark:before{left:-12px}.heart-mark:after{top:-12px}.temp-mark{background:currentColor;border-radius:8px;width:11px;height:26px;margin-left:6px}.temp-mark:after{content:"";background:currentColor;border-radius:50%;width:21px;height:21px;position:absolute;bottom:-5px;left:-5px}.mint{color:#21f4d0}.blue{color:#27a9ff}.amber{color:#ffd21c}.violet{color:#a347ff}.amber .metric-block:last-child strong{color:#ff735f}.mint .metric-block:last-child strong,.amber .metric-block:nth-child(2) strong{color:#ffdc4a}@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}.debug-panel{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=780px){.dashboard{padding:12px}.signal-body{grid-template-columns:1fr}.metric-block{border-top:1px solid #b9d7e524;border-left:0;grid-template-columns:28px 1fr}.status-grid,.debug-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.control-row{flex-direction:column;align-items:stretch}}