:root {
  --label-gray: #8f8578;
  --label-red: var(--danger);
  --label-orange: #b5651d;
  --label-amber: var(--warn);
  --label-green: var(--ok);
  --label-teal: #0f766e;
  --label-blue: var(--info);
  --label-purple: #6b4c9a;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

.tone-idle { color: var(--muted); }
.tone-active { color: var(--info); }
.tone-paused { color: var(--warn); }
.tone-done { color: var(--ok); }
.tone-error { color: var(--danger); }
.detail { color: var(--muted); font-size: var(--fs-sm); }
.error { color: var(--danger); font-size: var(--fs-sm); }
.notice-ok { color: var(--ok); font-size: var(--fs-sm); }

.settings-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); }
.settings-tabs button { background: none; border: none; padding: var(--sp-2) var(--sp-3); cursor: pointer; font: inherit; color: var(--muted); }
.settings-tabs button.active { color: var(--text); border-bottom: 2px solid var(--accent); }

.connection-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); }
.connection-facts dt { color: var(--muted); }
.connection-problems { list-style: none; padding: 0; margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.connection-problems .level-error { color: var(--danger); }
.connection-problems .level-warn { color: var(--warn); }
.connection-problems .level-info { color: var(--info); }

.quick-reply-list, .team-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-3); }
.quick-reply-list th, .quick-reply-list td, .team-table th, .team-table td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.quick-reply-form, .label-form, .team-form { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 420px; }
.quick-reply-form input, .quick-reply-form textarea, .label-form input, .team-form input, .team-form select {
  font: inherit; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}

dialog.confirm-dialog { border: none; border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--sp-4); max-width: 360px; }
dialog.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog.confirm-dialog .actions { justify-content: flex-end; }
dialog.confirm-danger button.primary { background: var(--danger); color: #fff; border-color: var(--danger); }

.label-swatch-gray { background: var(--label-gray); }
.label-swatch-red { background: var(--label-red); }
.label-swatch-orange { background: var(--label-orange); }
.label-swatch-amber { background: var(--label-amber); }
.label-swatch-green { background: var(--label-green); }
.label-swatch-teal { background: var(--label-teal); }
.label-swatch-blue { background: var(--label-blue); }
.label-swatch-purple { background: var(--label-purple); }
[class^="label-swatch-"] { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-pill); margin-right: var(--sp-1); vertical-align: middle; }

.label-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.label-color-picker { display: flex; gap: var(--sp-1); }
.label-color-picker button { width: 22px; height: 22px; border-radius: var(--r-pill); border: 2px solid transparent; cursor: pointer; }
.label-color-picker button.selected { border-color: var(--focus); }