:root{--cyan:#0ed3cf;--cyan-deep:#0a9e9b;--cyan-glow:#0ed3cf26;--bg:#070a10;--bg2:#0c1018;--bg3:#1a2235;--surface:#222d42;--text:#e8ecf2;--text2:#8b95a8;--text3:#4a5568;--green:#22c55e;--lime:#84cc16;--yellow:#eab308;--orange:#f97316;--red:#ef4444;--border:#ffffff0f;--font:"DM Sans", sans-serif;--mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.header{border-bottom:1px solid var(--border);background:linear-gradient(135deg,#0f172a,#1a2744);padding:20px 20px 16px}.header-inner{align-items:center;gap:10px;display:flex}.logo{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));color:#0f172a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:900;display:flex}.logo-text h1{color:var(--cyan);letter-spacing:-.03em;font-size:18px;font-weight:900}.logo-text p{color:#64748b;font-size:10px}.content{padding:16px 20px}@media (width>=500px){.content{max-width:420px;margin:0 auto}}.poc-header{border-bottom:1px solid var(--border);background:linear-gradient(135deg,#0f172a,#1a2744);padding:20px 20px 16px}.poc-header-inner{align-items:center;gap:10px;display:flex}.poc-logo{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));color:#0f172a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:900;display:flex}.poc-logo-text h1{color:var(--cyan);letter-spacing:-.03em;font-size:18px;font-weight:900}.poc-logo-text p{color:#64748b;font-size:10px}.poc-content{padding:16px 20px}@media (width>=500px){.poc-content{max-width:420px;margin:0 auto}}.card{border:1px solid var(--border);background:#1e293b80;border-radius:14px;margin-bottom:16px;padding:16px}.label{color:#94a3b8;letter-spacing:.08em;margin-bottom:10px;font-size:11px;font-weight:700}.step{color:#cbd5e1;margin-bottom:8px;font-size:13px;line-height:1.6}.tip{color:var(--cyan);background:#0ed3cf14;border:1px solid #0ed3cf26;border-radius:8px;margin-top:12px;padding:10px 12px;font-size:11px}.btn{cursor:pointer;width:100%;font-size:16px;font-weight:800;font-family:var(--font);letter-spacing:-.01em;border:none;border-radius:14px;padding:16px;transition:opacity .2s}.btn:active{opacity:.8}.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));color:#0f172a}.btn-danger{color:var(--red);background:#ef444426;border:1px solid #ef444466}.btn-export{color:var(--cyan);background:#0ed3cf1a;border:1px solid #0ed3cf4d}.btn:disabled{color:#64748b;cursor:not-allowed;background:#334155}.input-field{width:100%;color:var(--text);font-family:var(--font);background:#0f172a99;border:1px solid #ffffff1a;border-radius:10px;outline:none;padding:10px 12px;font-size:14px}.input-field:focus{border-color:#0ed3cf66}.input-field::placeholder{color:#475569}.toggle-row{justify-content:space-between;align-items:center;padding:10px 0;display:flex}.toggle-label{color:#cbd5e1;font-size:13px}.toggle-sub{color:#64748b;margin-top:2px;font-size:10px}.toggle-switch{flex-shrink:0;width:44px;height:24px;position:relative}.toggle-switch input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute}.toggle-track{background:#334155;border-radius:12px;transition:background .2s;position:absolute;inset:0}.toggle-switch input:checked+.toggle-track{background:var(--cyan)}.toggle-thumb{pointer-events:none;background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle-switch input:checked~.toggle-thumb{transform:translate(20px)}.quality-banner{border-radius:14px;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;display:flex}.qb-title{letter-spacing:.06em;font-size:11px;font-weight:700}.qb-label{margin-top:4px;font-size:22px;font-weight:900}.qb-rms{opacity:.9;font-size:28px;font-weight:900}.qb-unit{opacity:.5;font-size:10px}.stats-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-top:12px;display:grid}.stat{text-align:center;background:#1e293b80;border:1px solid #ffffff0a;border-radius:10px;padding:10px 8px}.stat-label{color:#64748b;letter-spacing:.08em;font-size:8px;font-weight:700}.stat-value{color:#f1f5f9;margin-top:4px;font-size:18px;font-weight:800}.stat-unit{color:#475569;font-size:9px}.graph-container{background:#1e293b66;border:1px solid #ffffff0a;border-radius:12px;margin-top:14px;padding:10px 12px}.graph-header{justify-content:space-between;margin-bottom:6px;display:flex}.graph-header span{font-size:10px}.graph-header .l{color:#94a3b8;letter-spacing:.06em;font-weight:700}.graph-header .r{color:#475569}.graph-inner{background:#0f172a80;border-radius:8px;position:relative;overflow:hidden}.threshold-line{border-top:1px dashed;position:absolute;left:0;right:0}.graph-legend{justify-content:space-between;margin-top:4px;font-size:8px;display:flex}.segment-bar{border-radius:6px;gap:2px;height:24px;display:flex;overflow:hidden}.segment-bar div{opacity:.85;flex:1}.badge{border-radius:6px;margin:0 4px 4px 0;padding:3px 8px;font-size:10px;font-weight:700;display:inline-block}.seg-list{max-height:200px;margin-top:10px;overflow-y:auto}.seg-item{border-bottom:1px solid #ffffff0a;align-items:center;gap:8px;padding:6px 0;display:flex}.seg-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.seg-label{color:#e2e8f0;min-width:70px;font-size:11px;font-weight:600}.seg-meta{color:#64748b;font-size:10px}.tag-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;display:grid}.tag-btn{text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#1e293b80;border:1px solid #ffffff14;border-radius:14px;padding:14px 8px;transition:all .15s}.tag-btn .icon{margin-bottom:4px;font-size:22px}.tag-btn .name{color:#94a3b8;font-size:11px;font-weight:600}.tag-btn.active{background:#eab3081f;border-color:#eab30880}.tag-btn.active .name{color:var(--yellow);font-weight:700}.tag-status{text-align:center;color:#475569;margin-top:8px;font-size:11px}.tag-log-container{max-height:80px;margin-top:8px;overflow-y:auto}.tag-event{color:#64748b;align-items:center;gap:6px;padding:4px 0;font-size:10px;display:flex}.dot,.tag-event .dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.thresholds{background:#1e293b4d;border:1px solid #ffffff0a;border-radius:12px;margin-top:20px;padding:12px 14px}.threshold-row{align-items:center;gap:4px;margin-bottom:2px;display:flex}.threshold-dot{border-radius:50%;width:8px;height:8px}.threshold-text{color:#94a3b8;font-size:10px}.error-box{color:var(--yellow);background:#eab3081a;border:1px solid #eab30840;border-radius:12px;margin-bottom:16px;padding:12px 14px;font-size:12px}.sensor-error{background:#ef44441f;border:1px solid #ef44444d}.sensor-error p{color:var(--red)}.error-title{font-size:13px;font-weight:700}.error-sub{color:#ef444487;margin-top:4px;font-size:11px}.privacy-box{background:#8b5cf614;border:1px solid #8b5cf633;border-radius:12px;margin-bottom:16px;padding:12px 14px}.privacy-box p{color:#a78bfa;font-size:11px;line-height:1.5}.privacy-box .title,.privacy-title{margin-bottom:4px;font-size:12px;font-weight:700}.sensor-error .sub{color:#ef444487;margin-top:4px;font-size:11px}.export-info{color:#475569;text-align:center;margin-top:6px;font-size:10px}.note{color:#475569;margin-top:8px;font-size:9px}