* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #0f1115; color: #e6e6e6; }
#app { max-width: 900px; margin: 0 auto; padding: 32px 20px; }
h1 { font-size: 24px; margin-bottom: 24px; }
.login-box { max-width: 320px; margin: 80px auto; display: flex; flex-direction: column; gap: 12px; }
input { background: #1a1d24; border: 1px solid #2a2e38; color: #e6e6e6; padding: 10px 12px; border-radius: 6px; font-size: 14px; }
button { background: #4f6bff; border: none; color: white; padding: 10px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
button:hover { background: #3d56e0; }
button.secondary { background: #2a2e38; }
.tile { background: #1a1d24; border: 1px solid #2a2e38; border-radius: 10px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.tile .icon { font-size: 28px; }
.tile .info { flex: 1; }
.tile .name { font-weight: 600; font-size: 16px; }
.tile .desc { font-size: 13px; color: #9aa0aa; margin-top: 2px; }
.tile .url { font-size: 12px; color: #6b90ff; margin-top: 4px; word-break: break-all; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.badge.up { background: #143d24; color: #4ade80; }
.badge.down { background: #3d1414; color: #f87171; }
.badge.slow { background: #3d3414; color: #facc15; }
.actions { display: flex; gap: 6px; }
.actions button { padding: 6px 10px; font-size: 12px; }
.error { color: #f87171; font-size: 13px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.notes { font-size: 12px; color: #f5d76e; margin-top: 6px; }
button.danger { background: #7a1f1f; }
button.danger:hover { background: #922424; }
button:disabled { opacity: 0.6; cursor: not-allowed; }