* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0; background: #f6f7f9; color: #1a1a1a;
}
.topnav {
    display: flex; align-items: center; gap: 1.25rem;
    background: #1a1f2e; color: #fff; padding: 0.75rem 1.5rem;
}
.topnav a { color: #cfd6e4; text-decoration: none; }
.topnav a:hover { color: #fff; }
.topnav .brand { font-weight: 700; color: #fff; }
.topnav .spacer { flex: 1; }
.topnav .who { color: #8a93a8; font-size: 0.9rem; }

.container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

.card { background: #fff; border: 1px solid #e2e5ea; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.card.narrow { max-width: 380px; }

h1 { margin-top: 0; }
.muted { color: #6b7280; }

form label { display: block; margin-bottom: 0.9rem; font-size: 0.9rem; color: #374151; }
form input, form select, form textarea {
    width: 100%; padding: 0.5rem; margin-top: 0.3rem;
    border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; font-family: inherit;
}
form textarea.kb-editor { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }
button {
    background: #2563eb; color: #fff; border: none; border-radius: 6px;
    padding: 0.55rem 1.1rem; font-size: 0.95rem; cursor: pointer;
}
button:hover { background: #1d4ed8; }
button.small { padding: 0.3rem 0.7rem; font-size: 0.85rem; background: #6b7280; }
button.small:hover { background: #4b5563; }
a.button-link {
    display: inline-block; background: #2563eb; color: #fff; text-decoration: none;
    border-radius: 6px; padding: 0.55rem 1.1rem; font-size: 0.95rem;
}
a.button-link:hover { background: #1d4ed8; }

.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 0.6rem 0.9rem; border-radius: 6px; }
.success { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.6rem 0.9rem; border-radius: 6px; }

.tool-card { border: 1px solid #e2e5ea; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background: #fafbfc; }
.tool-card .row { display: flex; gap: 0.75rem; }
.tool-card .row label { flex: 1; }
.param-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.6rem; }
.param-row label { margin-bottom: 0; flex: 1; }
.param-row label.checkbox-row { flex: 0 0 auto; white-space: nowrap; }
.param-row button { flex: 0 0 auto; }
.tool-actions, .params-actions { margin-top: 0.5rem; }

table.data { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; background: #fff; }
table.data th, table.data td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid #e5e7eb; font-size: 0.9rem; }
table.data th { background: #f3f4f6; font-weight: 600; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.active, .badge.sent, .badge.live { background: #dcfce7; color: #166534; }
.badge.paused, .badge.dry_run, .badge.pending { background: #fef9c3; color: #854d0e; }
.badge.error, .badge.skipped { background: #fee2e2; color: #991b1b; }

.preview {
    margin-top: 0.3rem; font-size: 0.8rem; font-family: ui-monospace, Menlo, monospace;
    white-space: pre-wrap; max-height: 4.5em; overflow: hidden; color: #6b7280;
}

label.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
label.checkbox-row input { width: auto; margin: 0; }