:root{--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Courier New", monospace;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}html{scroll-behavior:smooth;font-size:16px}code{font-family:var(--font-mono);color:var(--accent-violet,#a78bfa);background:#4f7df914;border-radius:6px;padding:.15em .4em;font-size:.85em}pre{font-family:var(--font-mono);background:var(--bg-secondary,#0c1128d9);padding:var(--spacing-md);border-radius:var(--radius-md,12px);border:1px solid var(--border-subtle,#ffffff0f);overflow-x:auto}pre code{background:0 0;padding:0}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}select option{color:#eef2ff;background:#0c1128;padding:8px}.container{width:100%;max-width:1400px;padding:0 var(--spacing-md);margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}[data-theme=light]{--bg-primary:#f5f7fb;--bg-secondary:#ffffffe6;--bg-tertiary:#f1f5f9cc;--bg-card:#ffffffd9;--bg-elevated:#fffffff2;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--text-accent:#4f46e5;--border-subtle:#0000000f;--border-default:#0000001a;--border-hover:#4f7df94d;--glass-bg:#ffffffb3;--glass-border:#0000000f;--gradient-card:linear-gradient(145deg, #ffffffe6 0%, #f8fafcf2 100%);--gradient-glow:radial-gradient(ellipse at 50% 0%, #4f7df90f 0%, transparent 60%);--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001a;--shadow-glow-blue:0 0 16px #4f7df91a}[data-theme=light] body{color:#0f172a;background:#f5f7fb}[data-theme=light] ::-webkit-scrollbar-track{background:#f1f5f9}[data-theme=light] ::-webkit-scrollbar-thumb{background:#cbd5e1}[data-theme=light] table{background:#fff;border-color:#e2e8f0}[data-theme=light] th{color:#475569;background:#f8fafc;border-bottom-color:#e2e8f0}[data-theme=light] td{color:#334155;border-bottom-color:#f1f5f9}[data-theme=light] tr:hover td{background:#4f7df908}[data-theme=light] .card,[data-theme=light] .glassmorphism{background:#ffffffd9;border-color:#0000000f;box-shadow:0 1px 3px #0000000f}[data-theme=light] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}[data-theme=light] select option{color:#0f172a;background:#fff}[data-theme=light] code{color:#4f46e5;background:#4f7df90f}@media (width<=768px){html{font-size:14px}.container{padding:0 var(--spacing-sm)}}@media (width<=1024px) and (width>=769px){.container{padding:0 var(--spacing-md)}}:root{--bg-primary:#060918;--bg-secondary:#0c1128d9;--bg-tertiary:#161e38b3;--bg-card:#0e1430bf;--bg-elevated:#121937e6;--text-primary:#eef2ff;--text-secondary:#a0aec7;--text-tertiary:#5e6b82;--text-accent:#7c8fff;--accent-blue:#4f7df9;--accent-indigo:#6366f1;--accent-purple:#8b5cf6;--accent-violet:#a78bfa;--accent-cyan:#22d3ee;--accent-teal:#14b8a6;--accent-green:#10b981;--accent-emerald:#34d399;--accent-amber:#f59e0b;--accent-orange:#f97316;--accent-red:#ef4444;--accent-rose:#f43f5e;--accent-pink:#ec4899;--gradient-brand:linear-gradient(135deg, #4f7df9 0%, #8b5cf6 50%, #ec4899 100%);--gradient-brand-subtle:linear-gradient(135deg, #4f7df926 0%, #8b5cf626 50%, #ec489914 100%);--gradient-card:linear-gradient(145deg, #0e1430cc 0%, #0a0e24f2 100%);--gradient-glow:radial-gradient(ellipse at 50% 0%, #4f7df926 0%, transparent 60%);--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-hover:#4f7df94d;--border-active:#4f7df980;--glass-bg:#0c112899;--glass-border:#ffffff14;--shadow-xs:0 1px 2px #0003;--shadow-sm:0 2px 8px #00000040;--shadow-md:0 4px 16px #0000004d;--shadow-lg:0 8px 32px #00000059;--shadow-xl:0 16px 48px #0006;--shadow-glow-blue:0 0 20px #4f7df940;--shadow-glow-purple:0 0 20px #8b5cf633;--shadow-glow-green:0 0 16px #10b98133;--shadow-glow-red:0 0 16px #ef444433;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-out-back:cubic-bezier(.34, 1.56, .64, 1);--ease-spring:cubic-bezier(.175, .885, .32, 1.275);--duration-fast:.15s;--duration-base:.25s;--duration-slow:.4s;--duration-slower:.6s;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);min-width:320px;min-height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden}#root{background:var(--bg-primary);min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:-.02em;font-weight:700;line-height:1.2}a{color:var(--accent-blue);transition:color var(--duration-fast) ease;font-weight:500;text-decoration:none}a:hover{color:var(--accent-violet)}button{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-indigo) 100%);color:#fff;cursor:pointer;transition:all var(--duration-base) var(--ease-out-expo);border:1px solid #0000;padding:.65em 1.4em;font-family:inherit;font-size:.875rem;font-weight:600;position:relative;overflow:hidden;box-shadow:0 2px 8px #4f7df940}button:after{content:"";opacity:0;transition:opacity var(--duration-fast) ease;background:linear-gradient(135deg,#ffffff1a 0%,#0000 50%);position:absolute;inset:0}button:hover:after{opacity:1}button:hover{transform:translateY(-1px);box-shadow:0 4px 16px #4f7df959}button:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}input,textarea,select{background:var(--bg-secondary);border:1.5px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-sm);transition:all var(--duration-fast) ease;padding:.7em .9em;font-family:inherit;font-size:.875rem}input:focus,textarea:focus,select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #4f7df91f, var(--shadow-glow-blue);background:var(--bg-elevated);outline:none}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#4f7df94d;border:2px solid #0000;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4f7df980}.background-mesh{z-index:-1;background:radial-gradient(80% 50% at 20% 40%,#4f7df914 0%,#0000 50%),radial-gradient(60% 60% at 80% 70%,#8b5cf60f 0%,#0000 50%),radial-gradient(50% 40% at 50% 10%,#22d3ee0a 0%,#0000 50%);animation:30s ease-in-out infinite meshFloat;position:fixed;inset:0}.background-overlay{z-index:-1;background:linear-gradient(#0000 0%,#06091899 100%);position:fixed;inset:0}@keyframes meshFloat{0%,to{opacity:1;transform:translate(0)scale(1)}25%{opacity:.9;transform:translate(15px,-25px)scale(1.02)}50%{opacity:1;transform:translate(-10px,15px)scale(.98)}75%{opacity:.95;transform:translate(20px,10px)scale(1.01)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px #4f7df933}50%{box-shadow:0 0 20px #4f7df966}}@keyframes gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.card,.glassmorphism{background:var(--gradient-card);-webkit-backdrop-filter:blur(16px)saturate(1.2);border:1px solid var(--glass-border);border-radius:var(--radius-xl);transition:all var(--duration-base) var(--ease-out-expo);padding:1.5rem;position:relative}.card:before{content:"";border-radius:inherit;background:var(--gradient-glow);opacity:0;transition:opacity var(--duration-slow) ease;pointer-events:none;position:absolute;inset:0}.card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg), var(--shadow-glow-blue);transform:translateY(-3px)}.card:hover:before{opacity:1}.gradient-text{background:var(--gradient-brand);-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:6s infinite gradient-shift}table{border-collapse:separate;border-spacing:0;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);width:100%;overflow:hidden}th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--border-subtle);background:#06091899;padding:14px 18px;font-size:.75rem;font-weight:600}td{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);transition:background var(--duration-fast) ease;padding:14px 18px;font-size:.875rem}tr:hover td{background:#4f7df90a}tr:last-child td{border-bottom:none}.status-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:6px;padding:4px 12px;font-size:.7rem;font-weight:700;display:inline-flex}.status-online{color:var(--accent-emerald);background:#10b9811f;border:1px solid #10b98133}.status-offline{color:#fca5a5;background:#ef44441f;border:1px solid #ef444433}.status-warning{color:#fcd34d;background:#f59e0b1f;border:1px solid #f59e0b33}.skeleton{background:linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 40%, var(--bg-secondary) 100%);border-radius:var(--radius-sm);background-size:300% 100%;animation:1.8s ease-in-out infinite shimmer}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px;border-radius:4px}.skip-link{background:var(--accent-blue);color:#fff;z-index:10000;border-radius:0 0 8px;padding:8px 16px;font-size:14px;font-weight:600;transition:top .2s;position:absolute;top:-40px;left:0}.skip-link:focus{top:0}::selection{color:#fff;background:#4f7df94d}@media (width<=768px){body{font-size:14px}.card{border-radius:var(--radius-lg);padding:1rem}}@media (width<=480px){body{font-size:13px}}@media print{body{color:#000;background:#fff}.no-print{display:none!important}}