.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border-radius: var(--radius); border: none; cursor: pointer; font-size: 0.875rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-icon { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.5rem; border-radius: var(--radius); position: relative; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.badge-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--badge-bg); color: #fff; font-size: 0.65rem;
  min-width: 1.1rem; height: 1.1rem; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}
.greeting-banner {
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-chip {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color .15s, transform .15s;
}
.stat-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat-chip-count { font-size: 1.75rem; font-weight: 700; }
.stat-chip-label { font-size: 0.8rem; color: var(--text-secondary); }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); border-radius: var(--radius-lg); overflow: hidden; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); }
.status-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.status-active, .status-open { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.status-draft, .status-new { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info); }
.row-actions { display: flex; gap: 0.25rem; }
.flyout-panel {
  position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
  width: 320px; max-height: 400px; overflow: auto;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 200;
}
.flyout-panel[hidden] { display: none !important; }
.profile-dropdown { display: flex; flex-direction: column; padding: 0.5rem; }
.profile-dropdown a { padding: 0.5rem 0.75rem; color: var(--text-primary); border-radius: var(--radius); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 0.875rem;
}
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.auth-card input { width: 100%; padding: 0.6rem; margin: 0.5rem 0 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); }
@media (max-width: 900px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }