:root{--primary:#10b981;--primary-hover:#059669;--bg-dark:#0f172a;--bg-card:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--danger:#ef4444;--warning:#f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}.app-container{flex-direction:column;min-height:100vh;display:flex}.header{background-color:var(--bg-card);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;box-shadow:0 4px 6px -1px #0000001a}.header h1{background:linear-gradient(90deg,#34d399,#10b981);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.card{background-color:var(--bg-card);border:1px solid #ffffff0d;border-radius:12px;padding:1.5rem;transition:transform .2s;box-shadow:0 10px 15px -3px #0000001a}.card:hover{transform:translateY(-2px)}.btn{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn:hover{background-color:var(--primary-hover)}.btn-danger{background-color:var(--danger)}.btn-danger:hover{background-color:#dc2626}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.device-status{border-radius:999px;padding:.25rem .75rem;font-size:.875rem;font-weight:600;display:inline-block}.status-connected{color:#34d399;background-color:#10b98133}.status-disconnected{color:#f87171;background-color:#ef444433}.status-qr_ready{color:#fbbf24;background-color:#f59e0b33}.status-connecting{color:#60a5fa;background-color:#3b82f633}.input{color:#fff;background-color:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;width:100%;margin-bottom:1rem;padding:.75rem}.input:focus{border-color:var(--primary);outline:none}