body { font-family: system-ui, sans-serif; margin: 2rem; color: #1a1a1a; background: #fff; }
nav { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; }
nav a { color: #1a1a1a; text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav .logout { margin-left: auto; }
nav .logout button { background: none; border: none; color: #666; cursor: pointer; text-decoration: underline; padding: 0; font: inherit; }
section { margin-bottom: 2.5rem; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
th, td { text-align: left; padding: 0.4rem 0.8rem; border-bottom: 1px solid #eee; }
th { color: #666; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
.kv th { width: 10rem; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-size: 0.85rem; background: #eee; }
.badge.completed, .badge.healthy { background: #d4f4dd; }
.badge.completed_with_failures, .badge.probing { background: #fde6c8; }
.badge.in_progress { background: #d6e8fb; }
.badge.pending { background: #eee; }
.badge.cooldown { background: #fde0e0; }
.error { color: #c0392b; }
.success { color: #1e7e34; background: #d4f4dd; padding: 0.5rem 0.75rem; border-radius: 0.3rem; display: inline-block; }
button:disabled { opacity: 0.55; cursor: wait; }
.htmx-indicator-text { display: none; }
.htmx-request .htmx-indicator-text { display: inline; }
.htmx-request .htmx-indicator-hide { display: none; }
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
.login-box { text-align: center; }
.login-box input { padding: 0.5rem; font-size: 1rem; margin-right: 0.5rem; }
.login-box button { padding: 0.5rem 1rem; font-size: 1rem; }
textarea { display: block; margin-bottom: 0.5rem; font-family: monospace; }
code { background: #f4f4f4; padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-size: 0.9em; }
.hint { color: #666; font-size: 0.9em; }
form label { margin-right: 1rem; }
.toolbar { display: flex; gap: 0.75rem; margin: 0.75rem 0; }
.pagination { display: flex; gap: 1rem; align-items: center; }
button.danger { background: #c0392b; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.3rem; cursor: pointer; margin-top: 1rem; }
button.danger:hover { background: #a93226; }
h2 { margin-top: 2rem; font-size: 1.1rem; }
.hist td { display: flex; align-items: center; gap: 0.5rem; }
.hist-bar-track { width: 8rem; background: #f0f0f0; border-radius: 0.2rem; overflow: hidden; }
.hist-bar { height: 0.9rem; background: #6b9fd6; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.hidden { display: none; }
.modal-box { background: #fff; padding: 2rem; border-radius: 0.5rem; max-width: 90vw; max-height: 90vh; overflow: auto; position: relative; min-width: 24rem; }
.modal-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #666; padding: 0; }
.modal-close:hover { color: #1a1a1a; }
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 200; }
.toast { background: #1e7e34; color: #fff; padding: 0.6rem 1rem; border-radius: 0.3rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s; max-width: 24rem; }
.toast-show { opacity: 1; transform: translateY(0); }
.toast-error { background: #c0392b; }