:root{--bg-main: #08080c;--bg-card: #12121e;--bg-card-hover: #181826;--border-color: #222235;--border-hover: #3b3b5c;--text-primary: #f3f3f6;--text-secondary: #9898ab;--text-muted: #5d5d75;--accent-purple: #7c4dff;--accent-purple-glow: rgba(124, 77, 255, .3);--accent-blue: #2979ff;--accent-green: #00e676;--accent-green-glow: rgba(0, 230, 118, .2);--accent-danger: #ff1744;--accent-danger-bg: rgba(255, 23, 68, .08);--font-stack: "Outfit", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-stack);padding:16px;height:100vh;display:flex;flex-direction:column;overflow-x:hidden}#app-container{display:flex;flex-direction:column;height:100%;justify-content:space-between}.app-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border-color);margin-bottom:20px}.brand{display:flex;align-items:center;gap:10px}.logo-icon{width:28px;height:28px;color:var(--accent-purple);filter:drop-shadow(0 0 6px var(--accent-purple-glow))}.brand-text h2{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2}.sub-brand{font-size:11px;color:var(--text-secondary)}.badge-offline{background:#9898ab1a;color:var(--text-secondary);border:1px solid var(--border-color);padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.05em}.badge-online{background:#00e6761a;color:var(--accent-green);border:1px solid rgba(0,230,118,.3);padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.05em;box-shadow:0 0 10px var(--accent-green-glow);animation:badge-pulse 2s infinite alternate}@keyframes badge-pulse{0%{border-color:#00e67633}to{border-color:#00e67699}}.app-content{flex-grow:1;display:flex;flex-direction:column;gap:16px}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:20px;box-shadow:0 8px 24px #0006;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:12px}.card:hover{transform:translateY(-2px);border-color:var(--border-hover);background-color:var(--bg-card-hover)}.active-card{border-color:#7c4dff40}.active-card:hover{border-color:var(--accent-purple);box-shadow:0 8px 30px #7c4dff1a}.card-header-row{display:flex;align-items:center;gap:12px}.icon-circle{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff}.purple-gradient{background:linear-gradient(135deg,var(--accent-purple),#9d70ff);box-shadow:0 4px 10px #7c4dff4d}.green-pulse{background:linear-gradient(135deg,#00b0ff,var(--accent-blue));box-shadow:0 4px 10px #2196f34d;position:relative}.pulse-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:micro-pulse 1.5s infinite}@keyframes micro-pulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}to{transform:scale(.8);opacity:.5}}.card h3{font-size:15px;font-weight:500;letter-spacing:-.01em}.card-description{font-size:13px;color:var(--text-secondary);line-height:1.5}.btn{width:100%;padding:14px 20px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;font-family:var(--font-stack);letter-spacing:-.005em}.btn-primary{background:linear-gradient(135deg,var(--accent-purple),#9c6fff);color:#fff;box-shadow:0 4px 12px #7c4dff33}.btn-primary:hover{opacity:.95;box-shadow:0 6px 16px #7c4dff59}.btn-accent{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));color:#fff;box-shadow:0 4px 12px #2979ff33}.btn-accent:hover{opacity:.95;box-shadow:0 6px 16px #2979ff59}.btn-danger{background:var(--accent-danger);color:#fff;box-shadow:0 4px 12px #ff174433}.btn-danger:hover{background:#ff3d60;box-shadow:0 6px 16px #ff174459}.warning-box{background-color:var(--accent-danger-bg);border-left:3px solid var(--accent-danger);padding:12px 14px;border-radius:0 10px 10px 0;display:flex;gap:10px;margin-top:4px}.warning-icon{font-size:14px;line-height:1.4}.warning-text{font-size:12px;color:#ff8a80;line-height:1.4}.app-footer-branding{text-align:center;padding-top:20px;border-top:1px solid var(--border-color);margin-top:20px}.app-footer-branding p{font-size:11px;color:var(--text-muted)}.brand-highlight{color:var(--text-secondary);font-weight:500}.hidden{display:none!important}