/* ===== buttons ===== */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font:inherit; font-weight:500; line-height:1; cursor:pointer;
  padding:.6rem .9rem; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--surface-2); color:var(--ink-900); transition:background .12s, border-color .12s;
}
.btn:hover { background:#e7ecf2; text-decoration:none; }
.btn-primary { background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--surface); border-color:var(--line-strong); color:var(--ink-900); }
.btn-secondary:hover { background:var(--surface-2); }
.btn-ghost { background:transparent; color:var(--ink-700); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(.95); }
.btn-sm { padding:.4rem .6rem; font-size:var(--text-sm); }
.btn-lg { padding:.75rem 1.1rem; font-size:var(--text-lg); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ===== forms ===== */
.field { display:block; margin:0 0 var(--space-4); }
.field > label { display:block; font-size:var(--text-sm); font-weight:500; color:var(--ink-700); margin-bottom:var(--space-2); }
.field .help { font-size:var(--text-sm); color:var(--ink-500); margin-top:var(--space-2); }
.field .error { font-size:var(--text-sm); color:var(--danger); margin-top:var(--space-2); }
input, select, textarea {
  width:100%; font:inherit; color:var(--ink-900); background:var(--surface);
  padding:.55rem .65rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
textarea { min-height:7rem; resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:0 var(--space-5); }

/* ===== surfaces ===== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:var(--space-6); }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.section-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.toolbar { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5); }

/* ===== tables ===== */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.table { border-collapse:collapse; width:100%; font-size:var(--text-sm); }
.table th { text-align:left; font-weight:600; color:var(--ink-500); background:var(--surface-2); padding:.6rem .75rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:.6rem .75rem; border-bottom:1px solid var(--line); }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--surface-2); }

/* ===== badges / chips ===== */
.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--text-xs); font-weight:600; padding:.2rem .55rem; border-radius:var(--radius-full); background:var(--surface-2); color:var(--ink-700); }
.badge-success { background:var(--success-tint); color:var(--success); }
.badge-warning { background:var(--warning-tint); color:var(--warning); }
.badge-danger  { background:var(--danger-tint);  color:var(--danger); }
.badge-info    { background:var(--info-tint);    color:var(--info); }
.badge-accent  { background:var(--accent-tint);  color:var(--accent); }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border:1px solid var(--line-strong); border-radius:var(--radius-full); font-size:var(--text-sm); }

/* ===== alerts (was .flash) ===== */
.alert { display:flex; align-items:flex-start; gap:var(--space-3); padding:.7rem .9rem; border-radius:var(--radius-sm); margin-bottom:var(--space-4); font-size:var(--text-sm); border:1px solid transparent; }
.alert svg { flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.1rem; }
.alert-error,  .alert.error  { background:var(--danger-tint);  color:var(--danger);  border-color:#f3c9c9; }
.alert-ok,     .alert.ok     { background:var(--success-tint); color:var(--success); border-color:#bbe7c9; }
.alert-warning,.alert.warning{ background:var(--warning-tint); color:var(--warning); border-color:#f3e2bf; }
.alert-info,   .alert.info   { background:var(--info-tint);    color:var(--info);    border-color:#c9dcf7; }

/* ===== empty state ===== */
.empty { text-align:center; padding:var(--space-12) var(--space-6); color:var(--ink-500); }
.empty svg { width:2.5rem; height:2.5rem; margin:0 auto var(--space-3); color:var(--ink-300); }
.empty h3 { color:var(--ink-700); }

/* ===== misc ===== */
.avatar { width:2rem; height:2rem; border-radius:var(--radius-full); background:var(--accent-tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:var(--text-sm); }
.divider { height:1px; background:var(--line); border:0; margin:var(--space-4) 0; }
code.invite { display:block; background:var(--surface-2); padding:var(--space-3); border-radius:var(--radius-sm); word-break:break-all; font-size:var(--text-sm); }