:root {
  --pf-primary: #3B82F6;
  --pf-primary-hover: #2563EB;
  --pf-accent: #6366F1;
  --pf-bg: #0F172A;
  --pf-surface: #1E293B;
  --pf-subsurface: #334155;
  --pf-text: #F1F5F9;
  --pf-text-secondary: #CBD5F5;
  --pf-text-muted: #94A3B8;
  --pf-border: #334155;
  --pf-success: #22C55E;
  --pf-warning: #F59E0B;
  --pf-error: #dc2626;
  --pf-info: #38BDF8;
  --pf-shadow: 0 8px 24px rgba(2, 6, 23, 0.24);
}

html, body {
  background-color: var(--pf-bg);
  color: var(--pf-text);
}

body.dark {
  background: var(--pf-bg);
  color: var(--pf-text);
}

.pf-text {
  color: var(--pf-text);
}

.pf-text-secondary {
  color: var(--pf-text-secondary);
}

.pf-text-muted {
  color: var(--pf-text-muted);
}

.pf-text-success {
  color: var(--pf-success);
}

.pf-text-error {
  color: var(--pf-error);
}

.pf-text-primary {
  color: var(--pf-primary);
}


.pf-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

.pf-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.pf-grid {
  display: grid;
  gap: 24px;
}

.pf-focus-ring:focus-visible,
.focus-ring:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}

.pf-button {
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  border: 1px solid transparent;
}

.pf-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pf-primary) 50%, transparent);
  outline-offset: 2px;
}

.pf-button:disabled,
.pf-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.pf-button-primary {
  background-color: var(--pf-primary);
  color: #fff;
}

.pf-button-primary:hover:not(:disabled) {
  background-color: var(--pf-primary-hover);
}

.pf-button-secondary {
  background-color: transparent;
  border-color: var(--pf-border);
  color: var(--pf-text-secondary);
}

.pf-button-secondary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--pf-surface) 70%, transparent);
}

.pf-button-danger {
  background: var(--pf-error);
  color: #ffffff;
  border: none;
}

.pf-button-danger:hover:not(:disabled) {
  filter: brightness(1.1);
}

.pf-card {
  background: var(--pf-surface);
  color: var(--pf-text);
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--pf-shadow);
}

.pf-accent-card {
  border: 1px solid var(--pf-accent);
  background: rgba(99, 102, 241, 0.06);
}

.pf-success-card {
  border: 1px solid var(--pf-success);
  background: rgba(34, 197, 94, 0.06);
}

.pf-success-text {
  color: var(--pf-success);
}

.pf-integration-status {
  border-radius: 12px;
  border: 1px solid;
  padding: 16px;
}

.pf-integration-status__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.pf-integration-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 13px;
}

.pf-integration-status__hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.pf-integration-status--success {
  border-color: #6ee7b7;
  background: #ecfdf5;
  color: #047857;
}

.pf-integration-status--error {
  border-color: #fda4af;
  background: #fff1f2;
  color: #be123c;
}

.pf-integration-status--pending {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.dark .pf-integration-status--success {
  border-color: #065f46;
  background: rgba(6, 95, 70, 0.32);
  color: #a7f3d0;
}

.dark .pf-integration-status--error {
  border-color: #9f1239;
  background: rgba(159, 18, 57, 0.3);
  color: #fecdd3;
}

.dark .pf-integration-status--pending {
  border-color: #1e3a8a;
  background: rgba(30, 58, 138, 0.28);
  color: #dbeafe;
}

.pf-price-highlight {
  color: var(--pf-success);
  font-weight: 600;
}

.pf-input {
  border-radius: 8px;
  border: 1px solid var(--pf-border);
  background-color: color-mix(in srgb, var(--pf-bg) 70%, var(--pf-surface));
  color: var(--pf-text);
}

.pf-input:focus {
  outline: 2px solid color-mix(in srgb, var(--pf-primary) 45%, transparent);
  outline-offset: 1px;
}

.pf-input:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.pf-table {
  border-collapse: collapse;
  background: var(--pf-surface);
  color: var(--pf-text);
}

.pf-table thead tr {
  border-bottom: 1px solid var(--pf-border);
}

.pf-table th,
.pf-table td {
  color: var(--pf-text);
}

.pf-table th {
  font-weight: 600;
}

.pf-table tr:hover {
  background: var(--pf-subsurface);
}

body.dark .bg-white,
body.dark .bg-slate-50,
body.dark .bg-slate-100 {
  background: var(--pf-surface) !important;
}

body.dark .text-white,
body.dark .text-slate-100,
body.dark .text-slate-200,
body.dark .text-slate-300 {
  color: var(--pf-text) !important;
}

.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .75rem;
  line-height: 1;
  background-color: color-mix(in srgb, var(--pf-primary) 20%, transparent);
  color: var(--pf-text-secondary);
  border: 1px solid color-mix(in srgb, var(--pf-primary) 45%, transparent);
}

/* Compatibility normalization (Tailwind visual leftovers) */
.bg-primary, .bg-blue-600, .bg-blue-500, .bg-blue-700 { background-color: var(--pf-primary) !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-500:hover, .hover\:bg-blue-700:hover, .hover\:bg-primary:hover { background-color: var(--pf-primary-hover) !important; }
.text-primary, .text-blue-500, .text-blue-400, .text-blue-300 { color: var(--pf-primary) !important; }
.border-primary, .border-primary\/60, .border-blue-500\/70, .border-blue-900\/50 { border-color: var(--pf-primary) !important; }

.bg-slate-900 { background-color: var(--pf-bg) !important; }
.bg-slate-800 { background-color: var(--pf-surface) !important; }
.bg-slate-700, .bg-slate-600 { background-color: var(--pf-subsurface) !important; }
.text-slate-100 { color: var(--pf-text) !important; }
.text-slate-200, .text-slate-300, .text-slate-400 { color: var(--pf-text-secondary) !important; }
.text-slate-500, .text-slate-600 { color: var(--pf-text-muted) !important; }
.border-slate-700, .border-slate-800, .border-slate-600 { border-color: var(--pf-border) !important; }

.bg-emerald-600, .bg-emerald-500, .bg-emerald-700 { background-color: var(--pf-success) !important; }
.bg-amber-600, .bg-amber-500 { background-color: var(--pf-warning) !important; }
.bg-red-600, .bg-red-700, .bg-rose-600, .bg-rose-500 { background-color: var(--pf-error) !important; }