:root {
  /* Color palette */
  --pf-bg: #0f0f12;
  --pf-surface: #17181c;
  --pf-surface-2: #1f2126;
  --pf-border: #2a2d34;
  --pf-text: #e6e6e6;
  --pf-text-muted: #a7a7aa;
  --pf-primary: #d23b3b;
  --pf-primary-contrast: #ffffff;
  --pf-accent: #5a86ff;
  --pf-success: #21a179;
  --pf-warning: #e3a010;
  --pf-danger: #e24a4a;

  /* Spacing */
  --pf-gap-xs: 4px;
  --pf-gap-sm: 8px;
  --pf-gap-md: 12px;
  --pf-gap-lg: 16px;
  --pf-gap-xl: 24px;

  /* Sizes */
  --pf-input-height: 32px;
  --pf-font-size: 14px;
  --pf-radius: 6px;
}

/* Generic primitives used by Group pages */
.pf-section {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: var(--pf-gap-lg);
  margin-bottom: var(--pf-gap-xl);
  color: var(--pf-text);
}

.pf-h2 { font-size: 18px; margin: 0 0 var(--pf-gap-md); }
.pf-h3 { font-size: 16px; margin: 0 0 var(--pf-gap-md); }

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pf-input-height);
  padding: 0 var(--pf-gap-md);
  border-radius: var(--pf-radius);
  border: 1px solid var(--pf-border);
  background: var(--pf-surface-2);
  color: var(--pf-text);
  cursor: pointer;
}
.pf-btn:disabled { opacity: .6; cursor: default; }
.pf-btn.primary { background: var(--pf-primary); color: var(--pf-primary-contrast); border-color: var(--pf-primary); }
.pf-btn.ghost { background: transparent; }
.pf-btn.danger { background: var(--pf-danger); color: #fff; border-color: var(--pf-danger); }

.pf-input, .pf-select {
  height: var(--pf-input-height);
  background: var(--pf-surface-2);
  border: 1px solid var(--pf-border);
  color: var(--pf-text);
  border-radius: var(--pf-radius);
  padding: 0 var(--pf-gap-md);
}
.pf-input::placeholder { color: var(--pf-text-muted); }

.pf-table { width: 100%; border-collapse: collapse; }
.pf-table th, .pf-table td { border-top: 1px solid var(--pf-border); padding: 8px 10px; vertical-align: middle; }
.pf-table thead th { border-bottom: 1px solid var(--pf-border); color: var(--pf-text-muted); font-weight: 600; }

.pf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--pf-surface-2); border: 1px solid var(--pf-border); color: var(--pf-text); font-size: 12px; }
.pf-badge.success { background: color-mix(in srgb, var(--pf-success) 18%, var(--pf-surface-2)); border-color: color-mix(in srgb, var(--pf-success) 40%, var(--pf-border)); }
.pf-badge.warning { background: color-mix(in srgb, var(--pf-warning) 18%, var(--pf-surface-2)); border-color: color-mix(in srgb, var(--pf-warning) 40%, var(--pf-border)); }

.pf-alert { padding: var(--pf-gap-sm) var(--pf-gap-md); border-radius: var(--pf-radius); border: 1px solid var(--pf-danger); background: color-mix(in srgb, var(--pf-danger) 10%, var(--pf-surface)); color: var(--pf-text); }
.pf-muted { color: var(--pf-text-muted); }

.pf-row { display: flex; flex-wrap: wrap; gap: var(--pf-gap-sm); }
.pf-col { flex: 1 1 0; min-width: 200px; }
.pf-end { margin-left: auto; }

.pf-input-group { display: flex; gap: var(--pf-gap-sm); align-items: center; }

.pf-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); }
/* CCDialogDeclaration provides its own container; local components will style internal buttons/inputs */