.floating-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.floating-bg__item{position:absolute;display:inline-block;line-height:0;will-change:transform;animation-name:floating-bg-drift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}@keyframes floating-bg-drift{0%{transform:translate(0) rotate(0)}to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}}@media(prefers-reduced-motion:reduce){.floating-bg__item{animation:none}}:root{--primary: #2563eb;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--bg: #f1f5f9;--text: #0f172a;--muted: #64748b;--card: #ffffff;--border: #e2e8f0;--track: #e2e8f0;--shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04)}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:var(--bg);color:var(--text);padding:20px}.container{position:relative;z-index:1;max-width:1200px;margin:0 auto}header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--border);margin-bottom:30px}h1{font-size:28px;font-weight:600;color:var(--text)}.server-info{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center}.server-status{display:flex;align-items:center;gap:10px}.status-indicator{width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px #10b98126}.server-name{font-size:18px;font-weight:600;color:var(--text)}.server-details{color:var(--muted);font-size:14px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.metric-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;box-shadow:var(--shadow)}.metric-title{font-size:16px;color:var(--muted);margin-bottom:15px}.metric-value{font-size:32px;font-weight:700;margin-bottom:10px}.cpu .metric-value{color:var(--primary)}.ram .metric-value{color:var(--warning)}.network .metric-value{color:var(--success)}.progress-bar{height:10px;background:var(--track);border-radius:5px;overflow:hidden;margin-top:10px}.progress{height:100%;border-radius:5px;transition:width .4s ease}.cpu .progress{background:var(--primary)}.ram .progress{background:var(--warning)}.network .progress{background:var(--success)}.chart-container{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:30px;box-shadow:var(--shadow);height:360px}.controls{display:flex;justify-content:center;gap:15px}.btn{padding:12px 24px;border-radius:8px;border:none;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#1d4ed8}.notification{position:fixed;top:20px;right:20px;padding:15px 25px;background:var(--success);color:#fff;border-radius:8px;box-shadow:0 4px 12px #0f172a26;transform:translate(200%);transition:transform .3s ease;z-index:1000}.notification.show{transform:translate(0)}