.monitor-app{--m-bg:#06142e;--m-panel:#0b2446;--m-text:#edf8ff;--m-muted:#99b2ce;--m-line:#284e73;--m-accent:#32e7bc;background:var(--m-bg);color:var(--m-text);min-height:100vh;padding:28px 4vw 40px;font:700 16px/1.5 Microsoft YaHei,Arial,sans-serif}.monitor-app.monitor-light{--m-bg:#f5f6f8;--m-panel:#fff;--m-text:#172132;--m-muted:#526275;--m-line:#d5dce6;--m-accent:#067b60}.monitor-app *{box-sizing:border-box}.monitor-app button,.monitor-app input{font:inherit}.monitor-app button,.monitor-app nav a,.monitor-toolbar a{border:1px solid var(--m-line);background:var(--m-panel);color:var(--m-text);cursor:pointer;white-space:nowrap;border-radius:10px;padding:10px 14px;text-decoration:none}.monitor-app button:hover,.monitor-app a:hover{border-color:var(--m-accent);color:var(--m-accent)}.monitor-app button:disabled{opacity:.5;cursor:wait}.monitor-app a{color:var(--m-accent)}.monitor-app input{background:var(--m-bg);color:var(--m-text);border:1px solid var(--m-line);border-radius:8px;min-width:0;height:46px;padding:10px 12px}.monitor-app input::placeholder{color:var(--m-muted)}.monitor-app :focus-visible{outline:3px solid var(--m-accent);outline-offset:3px}.monitor-header,.monitor-header nav,.monitor-brand{align-items:center;gap:14px;display:flex}.monitor-header{border-bottom:1px solid var(--m-line);flex-wrap:wrap;justify-content:space-between;padding-bottom:22px}.monitor-header nav{flex-wrap:wrap;gap:8px}.monitor-brand img{border-radius:12px}.monitor-brand strong{letter-spacing:.05em;font-size:24px;display:block}.monitor-brand small{color:var(--m-muted);font-size:14px;display:block}.monitor-title{justify-content:space-between;align-items:center;gap:20px;margin:36px 0 26px;display:flex}.monitor-eyebrow{letter-spacing:.16em;color:var(--m-accent);font-size:14px}.monitor-title h1{margin:8px 0;font-size:clamp(28px,3vw,42px)}.monitor-title p,.monitor-panel p{color:var(--m-muted);margin:6px 0}.monitor-link{white-space:nowrap;color:var(--m-muted);font-size:14px}.monitor-link.connected{color:var(--m-accent)}.monitor-panel{background:var(--m-panel);border:1px solid var(--m-line);border-radius:16px;padding:24px}.monitor-panel h2{margin:0 0 8px;font-size:20px}.monitor-login{max-width:620px;margin:36px auto}.monitor-login form{gap:12px;margin:26px 0;display:grid}.monitor-app .monitor-primary{background:var(--m-accent);color:var(--m-bg);border-color:var(--m-accent)}.monitor-notice{color:var(--m-text);background:#a63a231c;border:1px solid #be654a;border-radius:10px;padding:14px 18px}.monitor-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px;display:grid}.monitor-app .monitor-stat{text-align:left;padding:20px}.monitor-stat span{color:var(--m-muted);font-size:14px;display:block}.monitor-stat strong{color:var(--m-text);margin-top:6px;font-size:34px;display:block}.monitor-stat.selected{outline:2px solid var(--m-accent)}.monitor-stat.training strong{color:#20bb85}.monitor-stat.online strong{color:#d59c23}.monitor-stat.offline strong{color:#f35b72}.monitor-pair{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.monitor-pair form{gap:10px;display:flex}.monitor-pair-code{border-top:1px solid var(--m-line);flex-wrap:wrap;align-items:center;gap:12px;width:100%;padding-top:18px;display:flex}.monitor-pair-code code{background:var(--m-bg);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;max-width:100%;padding:12px;font-size:16px}.monitor-pair-code p{width:100%;font-size:14px}.monitor-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0 18px;display:flex}.monitor-toolbar input{flex:1;max-width:400px}.monitor-toolbar small{color:var(--m-muted);margin-left:auto;font-size:14px}.monitor-wall{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;display:grid}.monitor-device{border:1px solid var(--m-line);background:var(--m-panel);color:var(--m-text);border-top:3px solid #71839a;border-radius:12px;padding:18px}.monitor-device.training{border-top-color:#20bb85}.monitor-device.online{border-top-color:#d59c23}.monitor-device.offline{border-top-color:#f35b72}.monitor-device-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.monitor-device-top small{color:var(--m-muted);font-size:12px}.monitor-device-state{color:#97a5b8;align-items:center;gap:8px;font-size:14px;display:flex}.monitor-device-state i{background:currentColor;border-radius:50%;width:10px;height:10px;display:inline-block}.training .monitor-device-state{color:#20bb85}.online .monitor-device-state{color:#d59c23}.offline .monitor-device-state{color:#f35b72}.training .monitor-device-state i{animation:1.5s ease-in-out infinite monitor-training}.monitor-device h2{overflow-wrap:anywhere;margin:15px 0 2px;font-size:22px}.monitor-device-label{margin:0 0 12px;font-size:16px}.monitor-device-reason{color:var(--m-muted);min-height:42px;font-size:14px}.monitor-device dl{grid-template-columns:80px 1fr;gap:6px;font-size:14px;display:grid}.monitor-device dt{color:var(--m-muted)}.monitor-device dd{overflow-wrap:anywhere;margin:0}.monitor-device-actions{justify-content:space-between;margin-top:18px;display:flex}.monitor-device-actions button{padding:7px 10px;font-size:14px}.monitor-empty{text-align:center;border:1px dashed var(--m-line);color:var(--m-muted);border-radius:14px;padding:60px 20px}.monitor-empty h2{color:var(--m-text)}.monitor-footer{color:var(--m-muted);border-top:1px solid var(--m-line);margin-top:28px;padding:16px 0;font-size:14px}@keyframes monitor-training{50%{opacity:.28;box-shadow:0 0 12px #20bb85}}@media (prefers-reduced-motion:reduce){.training .monitor-device-state i{animation:none}}@media (width<=850px){.monitor-metrics{grid-template-columns:repeat(3,1fr)}.monitor-title{flex-direction:column;align-items:flex-start}.monitor-pair form{flex-wrap:wrap;width:100%}.monitor-pair form input{flex:1}.monitor-app{padding:18px}.monitor-brand strong{font-size:20px}}@media (width<=480px){.monitor-metrics{grid-template-columns:repeat(2,1fr)}.monitor-header nav{font-size:14px}.monitor-wall{grid-template-columns:1fr}.monitor-toolbar input{flex:auto;width:100%}.monitor-toolbar small{margin-left:0}.monitor-app .monitor-stat{padding:14px}}
