*{box-sizing:border-box}body{margin:0;font-family:Microsoft YaHei,Segoe UI,system-ui,sans-serif;background:#1e1e1e;color:#ecf0f1}.app{min-height:100vh;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#2c3e50;border-bottom:2px solid #34495e;position:sticky;top:0;z-index:10}.toolbar h1{font-size:18px;margin:0;color:#ecf0f1}.toolbar-actions{display:flex;align-items:center;gap:15px}.status{font-size:13px}.status.online{color:#2ecc71}.status.offline{color:#e74c3c}.btn{background:#3498db;color:#fff;border:none;border-radius:4px;padding:8px 14px;cursor:pointer;font-size:13px}.btn:hover{background:#2980b9}.btn.sm{padding:5px 10px;font-size:12px}.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;padding:12px;align-content:start}.empty{grid-column:1 / -1;text-align:center;color:#7f8c8d;padding:60px 0;font-size:16px}.card{background:#252525;border:1px solid #34495e;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.card.offline{border-color:#7f8c8d;opacity:.75}.offline-screen{position:relative;background:#1a1a1a;border:2px solid #555;border-radius:4px;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}.offline-screen img{width:100%;height:auto;display:block}.offline-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;color:#e74c3c;font-size:18px;font-weight:700;letter-spacing:2px}.btn.danger{background:#c0392b}.btn.danger:hover{background:#a93226}.screen{position:relative;background:#2b2b2b;border:2px solid #34495e;border-radius:4px;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.screen img{width:100%;height:auto;display:block}.screen-placeholder{color:#95a5a6;font-size:13px}.rec-badge{position:absolute;top:6px;right:6px;background:#e74c3ce6;color:#fff;font-size:11px;padding:2px 6px;border-radius:3px;font-weight:700}.note-label{font-size:13px;padding:2px 4px;color:#bdc3c7}.card-buttons{display:flex;flex-wrap:wrap;gap:5px}.info-label{background:#34495e;color:#fff;font-size:11px;padding:6px;border-radius:3px;text-align:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100}.modal{width:85vw;height:85vh;background:#2c3e50;border-radius:6px;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#34495e;padding:10px 14px;font-size:14px}.modal-body{flex:1;display:flex;align-items:center;justify-content:center;background:#2c3e50;overflow:auto;padding:10px}.modal-body img{max-width:100%;max-height:100%;object-fit:contain}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1e1e1e}.login-box{background:#2c3e50;border:1px solid #34495e;border-radius:8px;padding:40px 36px;width:320px;display:flex;flex-direction:column;gap:16px}.login-box h2{margin:0 0 8px;font-size:20px;text-align:center;color:#ecf0f1}.login-box input{width:100%;padding:10px 12px;background:#1e1e1e;border:1px solid #34495e;border-radius:4px;color:#ecf0f1;font-size:14px;outline:none}.login-box input:focus{border-color:#3498db}.login-box .btn{width:100%;padding:10px;font-size:15px}.login-error{color:#e74c3c;font-size:13px;text-align:center;min-height:18px}.pwd-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:200}.pwd-box{background:#2c3e50;border:1px solid #34495e;border-radius:8px;padding:32px 28px;width:300px;display:flex;flex-direction:column;gap:12px}.pwd-box h3{margin:0 0 4px;font-size:16px;color:#ecf0f1;text-align:center}.pwd-box input{width:100%;padding:9px 11px;background:#1e1e1e;border:1px solid #34495e;border-radius:4px;color:#ecf0f1;font-size:13px;outline:none}.pwd-box input:focus{border-color:#3498db}.pwd-box-actions{display:flex;gap:8px}.pwd-box-actions .btn{flex:1;padding:8px;font-size:13px}
