.pf-root {
  --pf-border: color-mix(in srgb, var(--text, #fff) 16%, transparent);
  --pf-muted: color-mix(in srgb, var(--text, #fff) 66%, transparent);
  display: grid;
  gap: 16px;
  padding-bottom: 32px;
}

.pf-hero,
.pf-program-card,
.pf-create-card,
.pf-schedule,
.pf-secret-panel {
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg, #161220) 86%, #80ffe3 5%);
}

.pf-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
}

.pf-hero h2 {
  margin: 2px 0 8px;
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.pf-hero p { margin: 0; color: var(--pf-muted); max-width: 760px; line-height: 1.5; }
.pf-eyebrow { color: #80ffe3 !important; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.pf-schedule {
  display: grid;
  gap: 3px;
  padding: 13px 16px;
  border-color: color-mix(in srgb, #80ffe3 32%, transparent);
}
.pf-schedule span { color: var(--pf-muted); font-size: .82rem; }

.pf-program-list { display: grid; gap: 14px; }
.pf-program-card { padding: 18px; display: grid; gap: 13px; }
.pf-program-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pf-program-head h3 { margin: 0 0 5px; font-size: 1.1rem; }
.pf-program-description { margin: 0; color: var(--pf-muted); line-height: 1.45; }

.pf-status,
.pf-pending,
.pf-source-chip {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--text, #fff) 9%, transparent);
  color: var(--pf-muted);
  text-transform: capitalize;
}
.pf-status.active, .pf-status.saved { background: rgba(74,255,122,.12); color: #7aff9a; }
.pf-status.paused, .pf-status.pending_review, .pf-pending.has-pending { background: rgba(255,209,102,.13); color: #ffd166; }
.pf-status.archived, .pf-status.rejected { background: rgba(255,107,143,.13); color: #ff8ba7; }

.pf-stats { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--pf-muted); font-size: .78rem; }
.pf-endpoint-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-endpoint-row code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #80ffe3; font-size: .75rem; }
.pf-developer-panel { display: grid; gap: 9px; padding: 13px; border: 1px solid color-mix(in srgb, #62d6ff 28%, transparent); border-radius: 14px; background: rgba(98,214,255,.045); }
.pf-developer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-developer-copy { margin: 0; color: var(--pf-muted); font-size: .78rem; line-height: 1.55; overflow-wrap: anywhere; }
.pf-developer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf-developer-note { color: var(--pf-muted); font-size: .72rem; line-height: 1.4; }
.pf-developer-note.has-key { color: #ffd166; }
.pf-source-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-source-chip.youtube { color: #ff9c9c; }
.pf-source-chip.x { color: #a9d7ff; }

.pf-card-actions,
.pf-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pf-primary-btn,
.pf-secondary-btn,
.pf-danger-btn,
.pf-link-btn,
.pf-icon-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  padding: 10px 13px;
}
.pf-primary-btn { background: #80ffe3; color: #10231f; }
.pf-secondary-btn { background: color-mix(in srgb, var(--text, #fff) 10%, transparent); color: var(--text, #fff); }
.pf-danger-btn { background: rgba(255,107,143,.14); color: #ff8ba7; }
.pf-link-btn, .pf-icon-btn { background: transparent; color: #80ffe3; padding-inline: 5px; }
.pf-icon-btn { color: #ff9bae; }
.pf-primary-btn:disabled, .pf-secondary-btn:disabled, .pf-link-btn:disabled { opacity: .45; cursor: default; }

.pf-create-card,
.pf-inline-editor { padding: 16px; }
.pf-form { display: grid; gap: 11px; }
.pf-input,
.pf-select,
.pf-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg, #161220) 90%, white 3%);
  color: var(--text, #fff);
  font: inherit;
  padding: 11px 12px;
}
.pf-textarea { resize: vertical; }
.pf-field-label { margin-top: 4px; color: var(--pf-muted); font-size: .78rem; font-weight: 700; }
.pf-source-rows { display: grid; gap: 8px; }
.pf-source-row { display: grid; grid-template-columns: minmax(110px, .35fr) minmax(160px, 1fr) auto; gap: 8px; align-items: center; }
.pf-source-editor { border: 0; padding: 0; }

.pf-digest-panel { display: grid; gap: 10px; padding-top: 5px; border-top: 1px solid var(--pf-border); }
.pf-digest-card { border: 1px solid var(--pf-border); border-radius: 14px; padding: 13px; display: grid; gap: 10px; background: rgba(0,0,0,.08); }
.pf-digest-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pf-digest-meta, .pf-digest-summary { margin: 0; color: var(--pf-muted); font-size: .8rem; line-height: 1.45; }
.pf-json-preview { display: grid; gap: 9px; border-top: 1px solid var(--pf-border); padding-top: 9px; }
.pf-json-preview summary { color: #80ffe3; cursor: pointer; font-size: .78rem; font-weight: 750; }
.pf-json-preview pre { max-height: 360px; margin: 0; overflow: auto; border: 1px solid var(--pf-border); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.14); color: var(--text, #fff); font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-json-preview .pf-secondary-btn { justify-self: start; }

.pf-banner,
.pf-secret-panel { padding: 13px 15px; line-height: 1.4; }
.pf-banner.error { border: 1px solid rgba(255,107,143,.4); color: #ff9bae; background: rgba(255,107,143,.08); }
.pf-banner.success { border: 1px solid rgba(74,255,122,.35); color: #8dffa6; background: rgba(74,255,122,.08); }
.pf-banner.warn { border: 1px solid rgba(255,209,102,.35); color: #ffd166; background: rgba(255,209,102,.08); }
.pf-secret-panel { display: grid; gap: 8px; border-color: rgba(128,255,227,.48); }
.pf-secret-panel p { margin: 0; color: var(--pf-muted); }
.pf-secret-value { display: block; overflow-wrap: anywhere; color: #80ffe3; user-select: all; }
.pf-empty, .pf-loading { padding: 18px; text-align: center; color: var(--pf-muted); }

@media (max-width: 640px) {
  .pf-hero { align-items: stretch; flex-direction: column; }
  .pf-developer-head { align-items: flex-start; flex-direction: column; }
  .pf-source-row { grid-template-columns: 1fr auto; }
  .pf-source-row .pf-select { grid-column: 1 / -1; }
  .pf-program-head, .pf-digest-head { align-items: flex-start; }
  .pf-card-actions > button { flex: 1 1 42%; }
}