@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@500&family=Orbitron:wght@700&display=swap";:root{--font-racing:"Orbitron", sans-serif;--font-sans:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace;--bg:#121214;--bg-card:#1e1e24;--bg-elevated:#2a2a36;--border:#2a2a36;--border-focus:#ff5722;--text:#9e9eae;--text-h:#f5f5f7;--accent:#ff5722;--accent-hover:#e64a19;--accent-bg:#ff57221a;--accent-border:#ff57224d;--shadow:#00000080 0 10px 30px -5px;--danger:#e53935;--danger-bg:#e539351a;--success:#00e676;--success-bg:#00e6761a;--warning:#ffb300;--warning-bg:#ffb3001a;font-family:var(--font-sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;font-family:var(--font-sans);color:var(--text);margin:0;padding:0;font-weight:400}#root{box-sizing:border-box;flex-direction:column;min-height:100vh;display:flex}.glassmorphism{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.glassmorphism:hover{border-color:var(--accent);box-shadow:0 15px 35px -5px #0009}h1,h2,h3,h4,.brand-text{font-family:var(--font-racing);color:var(--text-h);letter-spacing:.05em;text-transform:uppercase;margin:0;font-weight:700}h1{letter-spacing:.05em;font-size:2.8rem}h2{letter-spacing:.02em;font-size:1.8rem}h3{font-size:1.3rem}p,span,label,input,button,select,textarea{font-family:var(--font-sans);color:var(--text);font-weight:400}p{line-height:1.6}.navbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#0b0c10cc;justify-content:space-between;align-items:center;padding:16px 40px;display:flex;position:sticky;top:0}.nav-links{gap:20px;display:flex}.nav-link{color:var(--text);border-radius:8px;padding:8px 16px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover,.nav-link.active{color:var(--text-h);background:#ffffff0d}.nav-link.active{border-bottom:2px solid var(--accent);border-radius:8px 8px 0 0}.form-group{text-align:left;flex-direction:column;gap:8px;margin-bottom:20px;display:flex}label{color:var(--text-h);font-size:14px;font-weight:500}input,select,textarea{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-h);font-family:var(--font-sans);border-radius:4px;padding:12px 16px;font-size:15px;transition:all .2s}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #ff572233}input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.input-cosa-mono{background-color:var(--bg-elevated);border:1px solid var(--border);color:var(--text-h);font-family:var(--font-mono);box-sizing:border-box;border-radius:4px;width:100%;padding:10px 14px;font-size:1.1rem;transition:border-color .2s}.input-cosa-mono:focus{border-color:var(--accent);outline:none}button,.btn{font-family:var(--font-sans);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary,.btn-cosa-primary{background-color:var(--accent);color:var(--text-h);font-family:var(--font-racing);letter-spacing:.05em;cursor:pointer;border:none;border-radius:4px;padding:12px 24px;font-size:.875rem;font-weight:700;transition:all .2s ease-in-out;box-shadow:0 4px 6px -1px #ff572233}.btn-primary:hover,.btn-cosa-primary:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 8px -1px #ff57224d}.btn-primary:active,.btn-cosa-primary:active{transform:translateY(1px)}.btn-primary:disabled,button:disabled{color:#ffffff4d;box-shadow:none;cursor:not-allowed;background:#ffffff14;transform:none}.btn-secondary{color:var(--text-h);border:1px solid var(--border);background:#ffffff0d;border-radius:4px}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-danger,.btn-cosa-danger{color:var(--danger);font-family:var(--font-sans);border:1px solid var(--danger);cursor:pointer;background-color:#0000;border-radius:4px;padding:10px 20px;font-size:.875rem;font-weight:600;transition:all .2s ease-in-out}.btn-danger:hover,.btn-cosa-danger:hover{background-color:var(--danger);color:var(--text-h)}.device-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:24px;transition:border-color .25s ease-in-out,box-shadow .25s ease-in-out}.device-card:hover{border-color:var(--accent);box-shadow:0 10px 15px -3px #00000080}.device-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.btn-cosa-small{color:var(--text-h);border:1px solid var(--border);cursor:pointer;background:#ffffff0d;border-radius:4px;padding:6px 12px;font-size:12px;transition:all .2s}.btn-cosa-small:hover{background:var(--accent);color:var(--text-h);border-color:var(--accent)}@keyframes credit-flash{0%{background-color:#0000}50%{border-color:var(--success);background-color:#00e67659}to{background-color:#0000}}.credit-flash-active{animation:1.5s ease-in-out credit-flash}@keyframes pulse{0%{opacity:.3;transform:scale(1)}50%{opacity:.1;transform:scale(1.15)}to{opacity:.3;transform:scale(1)}}.pulse-ring{animation:2s ease-in-out infinite pulse}.grid-2{grid-template-columns:1fr 1fr;gap:24px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:24px;display:grid}@media (width<=768px){.grid-2,.grid-3{grid-template-columns:1fr}.navbar{flex-direction:column;gap:16px;padding:16px 20px}}.alert-banner{text-align:left;border-radius:10px;align-items:center;gap:10px;margin-bottom:20px;padding:12px 20px;font-size:14px;font-weight:500;display:flex}.alert-banner.error{background:var(--danger-bg);color:#fca5a5;border:1px solid #ef444433}.alert-banner.success{background:var(--success-bg);color:#a7f3d0;border:1px solid #10b98133}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.status-badge{border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}.status-badge.connected{color:var(--success);background-color:#00e6761a;border:1px solid #00e67633}
