:root{--bg-color: #0f172a;--card-bg: rgba(30, 41, 59, .7);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #3b82f6;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,.2) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,.2) 0,transparent 50%);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}.dashboard-container{max-width:1600px;margin:0 auto;padding:2rem}.dashboard-header{margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center}.dashboard-title{font-size:2rem;font-weight:700;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.status-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:var(--card-bg);border:1px solid var(--card-border);font-size:.875rem;font-weight:500}.status-indicator{width:8px;height:8px;border-radius:50%}.status-indicator.connected{background-color:var(--success-color);box-shadow:0 0 10px var(--success-color)}.status-indicator.disconnected{background-color:var(--error-color);box-shadow:0 0 10px var(--error-color)}.grid-container{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:1.5rem}.card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:1rem;padding:1.5rem;box-shadow:0 10px 25px -5px #0000004d;transition:transform .2s ease-in-out}.card:hover{transform:translateY(-2px)}.card.full-width{grid-column:1 / -1}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;border-bottom:1px solid var(--card-border);padding-bottom:1rem}.card-title{font-size:1.15rem;font-weight:600}.progress-container{width:100%;height:10px;background:#ffffff1a;border-radius:9999px;overflow:hidden;margin-top:.5rem;margin-bottom:1rem}.progress-bar{height:100%;border-radius:9999px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .5s ease-out}.progress-bar.ram{background:linear-gradient(90deg,#10b981,#34d399)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.stat-box{background:#0003;padding:1rem;border-radius:.75rem;text-align:center}.stat-value{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.data-table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{padding:1rem;color:var(--text-secondary);font-weight:500;font-size:.875rem;border-bottom:1px solid var(--card-border)}.data-table td{padding:1rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.9rem;vertical-align:middle}.data-table tr:hover td{background:#ffffff05}.badge{padding:.25rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:.25rem}.badge.running{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge.exited{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.badge.neutral{background:#ffffff1a;color:#e2e8f0}.app-name{font-weight:600;color:#fff;margin-bottom:.25rem}.app-image{font-size:.75rem;color:var(--text-secondary)}.port-tag{display:inline-block;background:#3b82f633;color:#93c5fd;padding:2px 6px;border-radius:4px;font-size:.75rem;margin:2px;border:1px solid rgba(59,130,246,.3)}.url-link{color:#a78bfa;text-decoration:none;font-size:.8rem}.url-link:hover{text-decoration:underline}.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:.5rem}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width: 1024px){.grid-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.grid-container{grid-template-columns:1fr}}