:root {
  --pm-bg: #f4f6fa;
  --pm-surface: #ffffff;
  --pm-text: #182230;
  --pm-muted: #667085;
  --pm-border: #e4e7ec;
  --pm-primary: #635bff;
  --pm-primary-dark: #5148e5;
  --pm-success: #067647;
  --pm-warning: #b54708;
  --pm-danger: #b42318;
  --pm-shadow: 0 12px 30px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100%; color: var(--pm-text); background: var(--pm-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: var(--pm-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.pm-auth-body { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: radial-gradient(circle at top left, rgba(99,91,255,.13), transparent 36%), var(--pm-bg); }
.pm-install-shell { width: 100%; max-width: 920px; }
.pm-auth-card { width: min(100%, 450px); margin: auto; padding: 34px; border: 1px solid var(--pm-border); border-radius: 20px; background: var(--pm-surface); box-shadow: var(--pm-shadow); }
.pm-install-card { width: 100%; }
.pm-brand-mark { display: inline-grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #635bff, #8b5cf6); font-size: 20px; font-weight: 800; box-shadow: 0 8px 18px rgba(99,91,255,.24); }
.pm-kicker { margin: 18px 0 4px; color: var(--pm-primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1, h2, h3 { margin-top: 0; line-height: 1.25; }
.pm-auth-card h1 { margin-bottom: 8px; }
.pm-muted { color: var(--pm-muted); }
.pm-small { font-size: 13px; }

.pm-app { min-height: 100vh; }
.pm-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 250px; padding: 22px 16px; color: #d0d5dd; background: #111827; }
.pm-sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; color: #fff; font-weight: 750; }
.pm-sidebar__brand .pm-brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.pm-nav { display: grid; gap: 5px; }
.pm-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; color: #cbd5e1; font-size: 14px; font-weight: 600; }
.pm-nav a:hover, .pm-nav a.is-active { color: #fff; text-decoration: none; background: rgba(255,255,255,.09); }
.pm-sidebar__footer { position: absolute; right: 16px; bottom: 20px; left: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.pm-sidebar__footer a { color: #cbd5e1; font-size: 13px; }
.pm-sidebar-logout { margin: 5px 0 0; padding: 0; border: 0; color: #cbd5e1; background: transparent; font-size: 13px; cursor: pointer; }
.pm-sidebar-logout:hover { color: #fff; text-decoration: underline; }
.pm-main { min-height: 100vh; margin-left: 250px; }
.pm-topbar { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 30px; border-bottom: 1px solid var(--pm-border); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }
.pm-topbar h1 { margin: 0; font-size: 22px; }
.pm-content { width: min(100%, 1280px); margin: auto; padding: 28px 30px 56px; }
.pm-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.pm-page-heading h2 { margin-bottom: 4px; }
.pm-card { border: 1px solid var(--pm-border); border-radius: 14px; background: var(--pm-surface); box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.pm-card__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--pm-border); }
.pm-card__header h3 { margin: 0; font-size: 16px; }
.pm-card__body { padding: 20px; }
.pm-grid { display: grid; gap: 18px; }
.pm-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.pm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-stat { padding: 20px; }
.pm-stat__label { color: var(--pm-muted); font-size: 13px; font-weight: 650; }
.pm-stat__value { display: block; margin-top: 6px; font-size: 28px; font-weight: 760; letter-spacing: -.03em; }

.pm-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 650; line-height: 1.2; cursor: pointer; transition: .15s ease; }
.pm-button:hover { text-decoration: none; transform: translateY(-1px); }
.pm-button--primary { color: #fff; border-color: var(--pm-primary); background: var(--pm-primary); }
.pm-button--primary:hover { color: #fff; background: var(--pm-primary-dark); }
.pm-button--secondary { color: #344054; border-color: #d0d5dd; background: #fff; }
.pm-button--secondary:hover { color: #101828; background: #f9fafb; }
.pm-button--danger { color: var(--pm-danger); border-color: #fecdca; background: #fff; }
.pm-button--small { min-height: 34px; padding: 7px 11px; font-size: 13px; }
.pm-button--full { width: 100%; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pm-alert { margin: 16px 0; padding: 13px 15px; border: 1px solid; border-radius: 10px; font-size: 14px; }
.pm-alert ul { margin: 8px 0 0; padding-left: 20px; }
.pm-alert--success { color: #05603a; border-color: #abefc6; background: #ecfdf3; }
.pm-alert--error { color: #912018; border-color: #fecdca; background: #fef3f2; }
.pm-alert--warning { color: #93370d; border-color: #fedf89; background: #fffaeb; }

.pm-form { display: grid; gap: 22px; }
.pm-form fieldset { margin: 0; padding: 0; border: 0; }
.pm-form legend { width: 100%; margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--pm-border); font-weight: 720; }
.pm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm-span-2 { grid-column: span 2; }
.pm-form label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 650; }
.pm-form input:not([type="checkbox"]):not([type="radio"]), .pm-form select, .pm-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d0d5dd; border-radius: 8px; color: var(--pm-text); background: #fff; outline: none; }
.pm-form textarea { min-height: 104px; resize: vertical; }
.pm-form input:focus, .pm-form select:focus, .pm-form textarea:focus { border-color: #8d86ff; box-shadow: 0 0 0 3px rgba(99,91,255,.12); }
.pm-form small { color: var(--pm-muted); font-size: 12px; font-weight: 400; }
.pm-check { display: flex !important; grid-column: auto; grid-template-columns: 18px 1fr; align-items: start; gap: 9px !important; }
.pm-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--pm-primary); }
.pm-form-footer { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; gap: 9px; margin: 4px -20px -20px; padding: 15px 20px; border-top: 1px solid var(--pm-border); background: rgba(255,255,255,.95); backdrop-filter: blur(8px); }

.pm-table-wrap { overflow-x: auto; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pm-table th, .pm-table td { padding: 13px 15px; border-bottom: 1px solid var(--pm-border); text-align: left; vertical-align: middle; }
.pm-table th { color: var(--pm-muted); background: #f9fafb; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pm-table tr:last-child td { border-bottom: 0; }
.pm-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.pm-badge--active { color: #05603a; background: #dcfae6; }
.pm-badge--draft { color: #344054; background: #eaecf0; }
.pm-badge--paused { color: #93370d; background: #fef0c7; }
.pm-badge--archived { color: #912018; background: #fee4e2; }

.pm-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 28px; }
.pm-requirement { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 8px; background: #f9fafb; font-size: 13px; }
.pm-requirement.is-ok span { color: var(--pm-success); }
.pm-requirement.is-error span { color: var(--pm-danger); }

.pm-editor-shell { overflow: hidden; border: 1px solid #d0d5dd; border-radius: 10px; }
.pm-editor-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; border-bottom: 1px solid #d0d5dd; background: #f9fafb; }
.pm-editor-toolbar button { min-width: 34px; height: 32px; padding: 4px 9px; border: 1px solid #d0d5dd; border-radius: 6px; color: #344054; background: #fff; cursor: pointer; }
.pm-editor-toolbar button:hover, .pm-editor-toolbar button.is-active { color: var(--pm-primary); border-color: #b7b2ff; background: #f4f3ff; }
.pm-editor-visual { min-height: 330px; padding: 20px; outline: none; background: #fff; }
.pm-editor-visual:focus { box-shadow: inset 0 0 0 2px rgba(99,91,255,.16); }
.pm-editor-source { display: block; width: 100%; min-height: 330px !important; border: 0 !important; border-radius: 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.pm-editor-visual .nfp-button, .pm-preview-canvas .nfp-button { display: inline-flex; padding: 10px 18px; border-radius: 9px; color: #fff; background: #635bff; text-decoration: none; font-weight: 700; }
.pm-editor-visual img { max-width: 100%; height: auto; }

.pm-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.65); }
.pm-modal__card { width: min(100%, 780px); max-height: calc(100vh - 48px); overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(15,23,42,.3); }
.pm-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--pm-border); }
.pm-modal__header h3 { margin: 0; }
.pm-modal__close { border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.pm-preview-stage { padding: 30px; background: #e9edf5; }
.pm-preview-frame { display: block; width: 100%; height: min(640px, 72vh); border: 0; border-radius: 12px; background: #eef1f6; box-shadow: var(--pm-shadow); }

.pm-code { display: block; overflow: auto; padding: 14px; border: 1px solid var(--pm-border); border-radius: 9px; color: #d1e7ff; background: #111827; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.pm-empty { padding: 44px 20px; text-align: center; }
.pm-empty h3 { margin-bottom: 6px; }
.pm-inline-form { display: inline; }
.pm-danger-zone { border-color: #fecdca; }
.pm-totp-secret { padding: 12px; border-radius: 8px; background: #f2f4f7; font: 15px ui-monospace, monospace; word-break: break-all; }

@media (max-width: 980px) {
  .pm-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-sidebar { position: static; width: 100%; }
  .pm-sidebar__footer { position: static; margin-top: 14px; }
  .pm-main { margin-left: 0; }
  .pm-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pm-nav a { justify-content: center; text-align: center; }
}

@media (max-width: 680px) {
  .pm-auth-body { padding: 14px; }
  .pm-auth-card { padding: 24px 20px; }
  .pm-requirements, .pm-form-grid, .pm-grid--2 { grid-template-columns: 1fr; }
  .pm-span-2 { grid-column: auto; }
  .pm-grid--stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pm-content { padding: 20px 14px 40px; }
  .pm-topbar { padding: 13px 16px; }
  .pm-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-page-heading { display: grid; }
  .pm-actions { width: 100%; }
  .pm-page-heading .pm-button { flex: 1; }
}