* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.dashboard { max-width: 720px; width: 90%; padding: 2.5rem; }
.header { text-align: center; margin-bottom: 2.5rem; }
.header h1 { font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #00b4d8, #06d6a0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.25rem; }
.header p { color: #64748b; font-size: 0.95rem; }
.card { background: #131926; border: 1px solid #1e293b; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; transition: border-color 0.2s; }
.card:hover { border-color: #00b4d8; }
.icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.icon.server { background: #0e2a3d; color: #00b4d8; }
.icon.storage { background: #0a2e26; color: #06d6a0; }
.icon.db { background: #2a1f0e; color: #f59e0b; }
.icon.lb { background: #1f0e2a; color: #a78bfa; }
.icon.fw { background: #2a0e1f; color: #f472b6; }
.card-content h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
.card-content p { font-size: 0.82rem; color: #64748b; }
.status { margin-left: auto; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #062e22; color: #06d6a0; flex-shrink: 0; }
.footer { text-align: center; margin-top: 2rem; color: #334155; font-size: 0.8rem; }
