* { box-sizing: border-box; font-family: system-ui, -apple-system, monospace; } body { margin: 0; background: #0f172a; color: #e5e7eb; } .container { max-width: 900px; margin: 2rem auto; padding: 1rem; } h1 { margin-bottom: 1.5rem; } .card { background: #020617; border: 1px solid #1e293b; border-radius: 8px; padding: 1.2rem; margin-bottom: 1.2rem; transition: 0.2s ease; } .card:hover { border-color: #334155; } /* Global Banner */ .global-ok { background: #064e3b; padding: 0.8rem; border-radius: 8px; text-align: center; margin-bottom: 1rem; font-weight: bold; } .global-error { background: #7f1d1d; padding: 0.8rem; border-radius: 8px; text-align: center; margin-bottom: 1rem; font-weight: bold; } /* Overview */ .overview { display: flex; justify-content: space-between; margin-bottom: 1rem; } .stat { display: flex; align-items: center; gap: 0.5rem; } .dot { width: 10px; height: 10px; border-radius: 50%; } .green { background: #22c55e; } .red { background: #ef4444; } .yellow { background: #eab308; } /* Buttons */ button { background: #1d4ed8; color: white; border: none; padding: 0.6rem 1rem; border-radius: 6px; cursor: pointer; margin-top: 0.5rem; } button:disabled { background: #475569; cursor: not-allowed; } .toggleLogs { background: transparent; color: #94a3b8; margin-top: 0.5rem; } /* Badges */ .badge { padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: bold; } .badge.ok { background: #166534; color: #dcfce7; } .badge.error { background: #7f1d1d; color: #fee2e2; } .badge.neutral { background: #334155; } /* Logs */ .log-box { background: #111; color: #22c55e; padding: 1rem; height: 250px; overflow-y: auto; border-radius: 8px; margin-top: 0.5rem; font-size: 0.85rem; } .hidden { display: none; } .muted { color: #94a3b8; margin-top: 0.5rem; } /* Mobile */ @media (max-width: 600px) { .overview { flex-direction: column; gap: 0.5rem; } button { width: 100%; } } .quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-top: 1rem; } .link-card { background: #111827; border: 1px solid #1e293b; padding: 1rem; border-radius: 10px; text-align: center; text-decoration: none; color: #e5e7eb; transition: 0.2s ease; font-weight: 500; } .link-card:hover { background: #1e293b; transform: translateY(-3px); } .daily-message { font-size: 1.1rem; font-style: italic; margin-top: 0.5rem; }