/* Toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 100;
  background: white; border-bottom: 1px solid var(--border);
  padding: 9px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.toolbar-group { display: flex; gap: 4px; }
.tab-switcher { display: flex; gap: 2px; background: #eff1f5; border-radius: var(--radius); padding: 3px; }
.tab-btn {
  padding: 5px 13px; border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: #666; font-weight: 600; font-size: 12.5px;
}
.tab-btn.active { background: white; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn {
  padding: 5px 13px; border-radius: 6px; cursor: pointer; font-weight: 600;
  font-size: 12.5px; border: 1.5px solid var(--border); background: white; color: #444;
}
.btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.btn.dark { background: #1a1a1a; color: white; border-color: #1a1a1a; }

/* Builder split layout */
.builder-wrap { display: flex; gap: 16px; padding: 16px; max-width: 1200px; margin: 0 auto; }
.editor-panel { width: 380px; flex-shrink: 0; }
.preview-panel { flex: 1; }
.panel-card { background: white; border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.preview-card { background: white; border-radius: 10px; padding: 44px 50px; box-shadow: var(--shadow); }

/* Dashboard */
.dashboard-wrap { padding: 24px; max-width: 1000px; margin: 0 auto; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dashboard-header h1 { margin: 0; font-size: 22px; }
.dashboard-toolbar { display: flex; align-items: center; margin-bottom: 16px; }
.sort-controls { display: flex; align-items: center; gap: 8px; }
.sort-label { font-size: 13px; color: #666; }
.sort-select { font-size: 13px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.profile-card {
  background: white; border-radius: 10px; padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.profile-card-title { font-size: 15px; font-weight: 700; }
.profile-card-position { font-size: 12.5px; color: #666; }
.profile-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.profile-card-date { font-size: 11px; color: #aaa; }
.card-actions { display: flex; gap: 6px; }

/* Status row */
.status-row { display: flex; align-items: center; gap: 8px; }
.status-select {
  font-size: 11.5px; padding: 3px 8px; border-radius: 5px; border: 1.5px solid var(--border);
  cursor: pointer; background: white;
}
.status-date { font-size: 11px; color: #aaa; }

/* Status history */
.status-history { display: flex; flex-direction: column; gap: 3px; margin-top: -2px; }
.status-history-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.status-history-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.status-history-label { color: #555; font-weight: 500; }
.status-history-date { color: #aaa; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: #aaa; font-size: 15px; }