* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background: #f3f4f6;
    color: #111827;
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #111827;
    color: #fff;
}
.topbar a { color: #93c5fd; text-decoration: none; }
main { max-width: 860px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 1.4rem; }

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: 320px; }
.login-card h1 { margin-top: 0; }

label { display: block; margin: 10px 0 4px; font-size: .85rem; color: #374151; }
input, select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
}
button, .btn {
    display: inline-block;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn.secondary { background: #6b7280; }
button.link, .link {
    background: none;
    color: #2563eb;
    padding: 4px;
}
.danger { color: #dc2626; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.inline { display: inline; }

.error { color: #b91c1c; background: #fee2e2; padding: 8px 12px; border-radius: 6px; }
.ok    { color: #166534; background: #dcfce7; padding: 8px 12px; border-radius: 6px; }

.node-head { display: flex; gap: 12px; align-items: flex-end; }
.node-head label { flex: 1; }
.field-options { display: none; margin-top: 8px; }
.field-next    { display: none; }
.node-card[data-type="message"] .field-next  { display: block; }
.node-card[data-type="menu"] .field-options  { display: block; }

/* id / label / próximo nó na 1ª linha; descrição e sinônimos na 2ª */
.option-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr 32px;
    gap: 8px;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e5e7eb;
}
.option-row input:nth-of-type(1) { grid-area: 1 / 1; }
.option-row input:nth-of-type(2) { grid-area: 1 / 2; }
.option-row input:nth-of-type(3) { grid-area: 1 / 3; }
.option-row .remove-option       { grid-area: 1 / 4; }
.option-row input:nth-of-type(4) { grid-area: 2 / 1 / auto / 3; }
.option-row input:nth-of-type(5) { grid-area: 2 / 3 / auto / 5; }

@media (max-width: 640px) {
    .option-row { grid-template-columns: 1fr; }
    .option-row input,
    .option-row .remove-option { grid-area: auto; }
}
.actions { display: flex; gap: 12px; margin: 16px 0 40px; }