:root {
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-canvas-inset: #f0f2f4;
    --color-fg-default: #1f2328;
    --color-fg-muted: #656d76;
    --color-fg-subtle: #6e7781;
    --color-fg-on-emphasis: #ffffff;
    --color-border-default: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-border-subtle: #eaeef2;
    --color-accent-fg: #8250df;
    --color-accent-emphasis: #8250df;
    --color-accent-subtle: #fbefff;
    --color-accent-muted: rgba(130, 80, 223, .38);
    --color-success-fg: #1a7f37;
    --color-success-subtle: #dafbe1;
    --color-danger-fg: #d1242f;
    --color-danger-subtle: #ffebe9;
    --color-warning-fg: #9a6700;
    --color-warning-subtle: #fff8c5;
    --color-neutral-fg: #6e7781;
    --color-neutral-subtle: #f6f8fa;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 0 rgba(31,35,40,.04);
    --shadow-md: 0 3px 6px rgba(140,149,159,.15);
    --shadow-lg: 0 8px 24px rgba(140,149,159,.2);
    --bg: var(--color-canvas-subtle);
    --surface: var(--color-canvas-default);
    --text: var(--color-fg-default);
    --muted: var(--color-fg-muted);
    --line: var(--color-border-default);
    --accent: var(--color-accent-emphasis);
    --accent-dark: #6639ba;
    --danger: var(--color-danger-fg);
    --success: var(--color-success-fg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--color-canvas-default);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar,
.ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 48px;
    padding: 0 var(--space-6);
    background: var(--color-canvas-default);
    border-bottom: 1px solid var(--color-border-default);
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand,
.ps-header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-fg-default);
    font-size: var(--text-base);
    text-decoration: none;
}
.ps-header-logo svg { color: var(--color-fg-muted); }
.ps-header-logo:hover { text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 16px; }
.topbar form,
.ps-header-actions form { margin: 0; }

.ps-layout {
    display: flex;
    min-height: calc(100vh - 49px);
}
.ps-sidebar {
    flex: 0 0 220px;
    width: 220px;
    padding: var(--space-4) var(--space-3);
    background: var(--color-canvas-subtle);
    border-right: 1px solid var(--color-border-default);
}
.ps-sidebar-section + .ps-sidebar-section {
    margin-top: var(--space-6);
}
.ps-sidebar-label {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
}
.ps-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-fg-default);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}
.ps-sidebar-item:hover {
    background: var(--color-canvas-inset);
    text-decoration: none;
}
.ps-sidebar-item.active {
    color: var(--color-accent-fg);
    background: var(--color-accent-subtle);
    font-weight: 600;
}
.ps-sidebar-item svg { color: var(--color-fg-muted); flex-shrink: 0; }
.ps-sidebar-item.active svg { color: var(--color-accent-fg); }

.page, .public-shell {
    width: min(1100px, calc(100% - 32px));
    margin: var(--space-6) auto;
}
.ps-main {
    flex: 1;
    min-width: 0;
    max-width: 1100px;
    padding: var(--space-6) var(--space-8);
}
.public-shell { width: min(820px, calc(100% - 32px)); }
.share-wrap {
    min-height: 100vh;
}
.share-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    background: var(--color-canvas-default);
    border-bottom: 1px solid var(--color-border-default);
}
.share-logo {
    color: var(--color-fg-default);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;
}
.share-body {
    max-width: 760px;
}
body.public-form-page {
    --page-bg: #f5f7f9;
    --page-glow: var(--color-accent-muted);
    --glass-edge: rgba(255, 255, 255, .72);
    --glass-line: rgba(217, 224, 231, .68);
    --glass-shadow: rgba(15, 23, 42, .14);
    min-height: 100vh;
    background-color: var(--page-bg);
    background:
        radial-gradient(circle at 18% 8%, var(--page-glow), transparent 32%),
        radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--page-bg) 72%, #ffffff 28%), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--page-bg) 92%, #ffffff 8%), color-mix(in srgb, var(--page-bg) 82%, #17202a 18%));
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat;
    background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh;
}
body.public-form-page .public-shell {
    margin-top: 44px;
    margin-bottom: 44px;
}
.landing-page {
    width: min(1180px, calc(100vw - 32px));
    margin-left: calc(50% - min(590px, calc(50vw - 16px)));
}
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 34px;
}
.landing-brand {
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
}
.landing-nav nav,
.landing-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    gap: 44px;
    align-items: center;
    min-height: min(680px, calc(100vh - 112px));
    padding: 44px 0 58px;
}
.landing-kicker {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0;
}
.landing-copy h1 {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
}
.landing-copy p {
    max-width: 560px;
    color: #46515f;
    font-size: 20px;
}
.landing-product {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}
.landing-product-top {
    display: flex;
    gap: 7px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}
.landing-product-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9aa6b2;
}
.landing-product-body {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 360px;
}
.landing-product aside {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: #f8fafc;
}
.landing-product aside strong {
    margin-bottom: 6px;
}
.landing-product aside span {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 10px;
    background: #fff;
    color: #46515f;
    font-size: 13px;
    font-weight: 700;
}
.landing-product main {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 34px;
}
.landing-preview-title,
.landing-preview-line,
.landing-preview-grid div,
.landing-preview-button {
    border-radius: 6px;
    background: #e8eef5;
}
.landing-preview-title {
    width: 48%;
    height: 28px;
    background: #17202a;
}
.landing-preview-line {
    width: 72%;
    height: 14px;
}
.landing-preview-line.wide {
    width: 88%;
}
.landing-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.landing-preview-grid div {
    height: 74px;
}
.landing-preview-button {
    width: 140px;
    height: 42px;
    background: var(--accent);
}
.landing-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding-bottom: 36px;
}
.landing-features article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 18px;
}
.landing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 14px;
}
.landing-feature-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .72;
}
.landing-features h2 {
    font-size: 18px;
    margin-bottom: 8px;
}
.landing-features p {
    margin-bottom: 0;
    font-size: 14px;
}
.not-found-page {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 14px;
    min-height: min(620px, calc(100vh - 72px));
    align-content: center;
    padding: 38px 0;
}
.not-found-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--accent);
    font-size: 34px;
    font-weight: 800;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
}
.not-found-page h1 {
    font-size: 44px;
    margin-bottom: 0;
}
.not-found-page p {
    max-width: 520px;
    margin-bottom: 6px;
    color: #46515f;
    font-size: 18px;
}
.not-found-actions {
    justify-content: center;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}
.section-heading h1 {
    margin: 0 0 4px;
}
.section-heading p {
    margin: 0;
}
.system-health-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.system-health-summary > div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #f8fafc;
}
.system-health-summary strong {
    display: block;
    margin-top: 3px;
}
.status-good {
    color: var(--success);
}
.status-warning {
    color: #b54708;
}
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.heading-row,
.ps-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-default);
}
.ps-page-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-fg-default);
    line-height: 1.25;
    margin: 0 0 var(--space-1);
}
.ps-page-subtitle {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    margin: 0;
}
.heading-row > div { min-width: 0; }
.editor-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}
.editor-meta a {
    display: block;
    max-width: min(620px, 100%);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.status-dot {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    background: #f8fafc;
    color: var(--muted);
    font-weight: 700;
    text-transform: capitalize;
}
.status-published { color: var(--color-success-fg); background: var(--color-success-subtle); border-color: color-mix(in srgb, var(--color-success-fg) 24%, var(--color-border-muted)); }
.status-archived { color: var(--color-warning-fg); background: var(--color-warning-subtle); border-color: color-mix(in srgb, var(--color-warning-fg) 24%, var(--color-border-muted)); }
.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.editor-tabs { margin-bottom: 16px; }
.tab-button {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    min-height: 44px;
}
.tab-button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.editor-actions form { margin: 0; }
.danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.danger-zone h3 {
    margin: 0 0 4px;
    color: var(--danger);
    font-size: 17px;
}
.danger-zone p {
    margin: 0;
}
.danger-zone form {
    margin: 0;
}
h1, h2 {
    margin: 0 0 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}
h1 { font-size: var(--text-lg); }
h2 { font-size: var(--text-md); }
p { color: var(--muted); margin-top: 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}
.section-header h2 { margin-bottom: 4px; }
.section-header p { margin-bottom: 0; }

form.stack, .stack { display: grid; gap: 14px; }
.grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.span { grid-column: 1 / -1; }
label { display: grid; gap: 6px; font-weight: 600; font-size: var(--text-sm); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input[type="checkbox"],
.check input[type="radio"] {
    width: auto;
    min-width: 16px;
    padding: 0;
}
.toggle-check {
    justify-content: flex-start;
    min-height: 44px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--color-canvas-subtle);
}
input, select, textarea {
    width: 100%;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-canvas-default);
    color: var(--color-fg-default);
    font: inherit;
    font-size: var(--text-base);
    box-shadow: inset 0 1px 0 rgba(31,35,40,.04);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent-emphasis);
    outline: 2px solid var(--color-accent-muted);
    outline-offset: -1px;
}
textarea { min-height: 92px; resize: vertical; }

/* ── Guideline form components (Branding.md §6) ── */
.form-group { margin-bottom: var(--space-4); }
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-fg-default);
    margin-bottom: var(--space-1);
}
.form-caption {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    margin-top: var(--space-1);
    margin-bottom: 0;
}
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: 5px var(--space-3);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    line-height: 20px;
    color: var(--color-fg-default);
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    outline: none;
    transition: 80ms ease border-color, 80ms ease box-shadow;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-accent-fg);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    outline: none;
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-input-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: 500;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 16px;
    min-width: 16px;
    min-height: 0;
    height: 16px;
    padding: 0;
    accent-color: var(--color-accent-fg);
    cursor: pointer;
}
.form-check-label { font-size: var(--text-sm); cursor: pointer; }

/* Tables flush inside cards: the card supplies the border */
.card > .table-wrap table,
.card > table { border: 0; border-radius: 0; }

/* ── Utility classes (Branding.md §10) ── */
.text-muted { color: var(--color-fg-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.fw-600 { font-weight: 600; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

button, .button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-canvas-default);
    color: var(--color-fg-default);
    padding: 5px 12px;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    min-height: 32px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.primary,
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-fg-on-emphasis);
}
.primary:hover,
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; }
.danger,
.btn-danger {
    border-color: color-mix(in srgb, var(--color-danger-fg) 28%, var(--color-border-default));
    color: var(--color-danger-fg);
    background: var(--color-danger-subtle);
}
.secondary,
.btn-default {
    background: var(--color-canvas-default);
    border-color: var(--color-border-default);
    color: var(--color-fg-default);
    font-weight: 500;
}
.secondary:hover,
.btn-default:hover {
    background: var(--color-canvas-subtle);
    text-decoration: none;
}
.btn-sm { min-height: 28px; padding: 3px 10px; font-size: var(--text-sm); }
.btn-lg { min-height: 40px; padding: 8px 16px; font-size: var(--text-md); }
.btn-block { display: flex; width: 100%; }
.inline-create {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(460px, 100%);
}
.create-form-panel {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}
.create-form-panel h2,
.create-form-panel p {
    margin-bottom: 0;
}
.create-form-panel h2 {
    font-size: 20px;
}
.template-import-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.template-import-panel h2,
.template-import-panel p {
    margin-bottom: 0;
}
.template-import-panel h2 {
    font-size: 20px;
}
.template-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: min(680px, 100%);
}
.list-panel {
    padding: 0;
    overflow: hidden;
}
.list-panel .section-header {
    margin-bottom: 0;
    padding: 18px;
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-canvas-subtle);
}
.list-panel table {
    border: 0;
}
.filter-toolbar {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    min-width: min(520px, 100%);
}
.filter-toolbar label {
    min-width: min(320px, 100%);
}
.compact-filter {
    margin-bottom: 14px;
    padding: 14px;
}
.field-type-picker {
    display: flex;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 24px 10px 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.field-palette-panel {
    position: sticky;
    top: 0;
    z-index: 20;
}
.field-palette-panel.expanded .field-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 2px;
    mask-image: none;
}
.palette-scroll-hint {
    margin: -8px 0 12px;
    color: var(--muted);
    font-size: 13px;
}
.field-palette-panel.expanded .palette-scroll-hint {
    display: none;
}
.field-type-button {
    flex: 0 0 112px;
    align-items: center;
    min-height: 96px;
    font-weight: 700;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 12px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    scroll-snap-align: start;
}
.field-palette-panel.expanded .field-type-button {
    flex-basis: auto;
}
.field-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
}
.field-type-icon img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .72;
}
.field-type-button > span:not(.field-type-icon) {
    font-size: 13px;
}
.field-type-button small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.settings-card {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--color-canvas-subtle);
}
.settings-card h3 {
    margin: 0;
    font-size: 15px;
}
.sms-parameter-list {
    display: grid;
    gap: 10px;
}
.sms-parameter-row {
    display: grid;
    grid-template-columns: minmax(120px, .32fr) minmax(120px, .4fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.sms-parameter-row input[readonly] {
    background: var(--color-canvas-inset);
    color: var(--color-fg-muted);
}
.access-code-settings {
    display: grid;
    gap: 12px;
}
.access-code-settings[hidden] {
    display: none;
}
.datetime-input {
    min-height: 44px;
    color: var(--text);
    color-scheme: light;
}
.appearance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .86fr);
    gap: 18px;
    align-items: start;
}
.appearance-controls {
    align-self: start;
}
.color-control {
    grid-template-columns: 1fr auto auto;
    align-items: center;
}
.color-control input[type="color"] {
    width: 48px;
    min-width: 48px;
    height: 40px;
    padding: 3px;
    border-radius: 8px;
    background: #fff;
}
.color-control span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.color-control.is-disabled {
    opacity: .72;
}
.color-control.is-disabled input[type="color"] {
    cursor: not-allowed;
}
.appearance-preview {
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 10%, rgba(24, 100, 171, .14), transparent 36%),
        linear-gradient(135deg, #edf3f8, #dfe9f1);
}
.appearance-preview-card {
    display: grid;
    gap: var(--preview-item-gap, 12px);
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 18px 44px rgba(15, 23, 42, .14);
    backdrop-filter: blur(14px);
}
.appearance-preview-card h3,
.appearance-preview-card p {
    margin: 0;
}
.appearance-preview-card h3 {
    font-size: 22px;
}

.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: var(--text-sm);
}
th, td {
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 9px 12px;
    vertical-align: top;
}
th {
    background: var(--color-canvas-subtle);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
}
.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-actions form { margin: 0; }
.public-link-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.public-link-actions .icon-button img {
    width: 18px;
    height: 18px;
}
.badge {
    display: inline-block;
    border: 1px solid var(--color-border-muted);
    border-radius: 20px;
    padding: 2px 8px;
    background: var(--color-neutral-subtle);
    color: var(--color-neutral-fg);
    font-size: var(--text-xs);
    font-weight: 600;
}
.badge-warning {
    border-color: color-mix(in srgb, var(--color-warning-fg) 24%, var(--color-border-muted));
    background: var(--color-warning-subtle);
    color: var(--color-warning-fg);
}
.badge-danger {
    border-color: color-mix(in srgb, var(--color-danger-fg) 24%, var(--color-border-muted));
    background: var(--color-danger-subtle);
    color: var(--color-danger-fg);
}
.audit-badge {
    font-weight: 700;
}
.audit-badge-info {
    border-color: var(--color-accent-muted);
    background: var(--color-accent-subtle);
    color: var(--color-accent-fg);
}
.audit-badge-success {
    border-color: color-mix(in srgb, var(--color-success-fg) 24%, var(--color-border-muted));
    background: var(--color-success-subtle);
    color: var(--color-success-fg);
}
.audit-badge-danger {
    border-color: color-mix(in srgb, var(--color-danger-fg) 24%, var(--color-border-muted));
    background: var(--color-danger-subtle);
    color: var(--color-danger-fg);
}
.audit-details {
    max-width: 420px;
    color: var(--text);
}
.audit-ip {
    display: inline-block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    color: var(--muted);
}
.pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pagination-current {
    color: var(--text);
    font-weight: 700;
}
.submission-navigator {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.submission-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.submission-jump input {
    width: 92px;
}
.submission-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.submission-actions form {
    margin: 0;
}
.submission-print-area {
    display: none;
}
.submission-print-document {
    color: #17202a;
    background: #fff;
}
.submission-print-header {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d8dee4;
}
.submission-print-logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 56px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 14px;
}
.submission-print-header h1 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.25;
}
.submission-print-header p {
    margin: 0 0 10px;
    color: #526070;
}
.submission-print-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #656d76;
    font-size: 12px;
}
.submission-print-section,
.submission-print-html,
.submission-print-field {
    margin-bottom: 18px;
}
.submission-print-field {
    break-inside: avoid;
}
.submission-print-label {
    margin-bottom: 6px;
    color: #17202a;
    font-size: 13px;
    font-weight: 800;
}
.submission-print-value {
    min-height: 36px;
    padding: 9px 11px;
    border: 1px solid #d8dee4;
    border-radius: 6px;
    background: #f8fafc;
    color: #17202a;
}
.submission-print-html img,
.submission-print-document .field-picture img {
    max-width: 100%;
    height: auto;
}
.submission-print-img-wrap {
    display: inline-grid;
    gap: 4px;
    max-width: 100%;
    vertical-align: top;
}
.submission-print-img-label {
    color: #526070;
    font-size: 12px;
    line-height: 1.35;
}
.button.disabled,
.button[aria-disabled="true"],
.btn.disabled,
.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: .55;
}
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border-default);
    background: var(--color-accent-subtle);
    color: var(--color-accent-fg);
    font-size: var(--text-sm);
}
.license-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--color-warning-fg) 24%, var(--color-border-muted));
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--color-warning-subtle);
    color: var(--color-warning-fg);
}
.license-banner a {
    margin-left: auto;
    font-weight: 700;
}
.license-banner-invalid,
.license-banner-expired {
    background: var(--color-danger-subtle);
    border-color: color-mix(in srgb, var(--color-danger-fg) 24%, var(--color-border-muted));
    color: var(--color-danger-fg);
}
.license-banner-grace {
    background: var(--color-warning-subtle);
    border-color: color-mix(in srgb, var(--color-warning-fg) 24%, var(--color-border-muted));
}
.license-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.license-grid > div {
    display: grid;
    gap: 5px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--color-canvas-subtle);
}
.license-grid code,
.license-claims {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.license-status-active {
    border-color: color-mix(in srgb, var(--color-success-fg) 24%, var(--color-border-muted));
    background: var(--color-success-subtle);
    color: var(--color-success-fg);
}
.license-status-grace {
    border-color: color-mix(in srgb, var(--color-warning-fg) 24%, var(--color-border-muted));
    background: var(--color-warning-subtle);
    color: var(--color-warning-fg);
}
.license-status-invalid,
.license-status-expired {
    border-color: color-mix(in srgb, var(--color-danger-fg) 24%, var(--color-border-muted));
    background: var(--color-danger-subtle);
    color: var(--color-danger-fg);
}
.license-claims {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--color-canvas-subtle);
}
.license-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 18px;
    align-items: start;
}
.license-detail-list,
.license-install-info {
    display: grid;
    gap: 12px;
}
.license-detail-list > div,
.license-install-info > div {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-subtle);
}
.license-detail-list > div:last-child,
.license-install-info > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.license-detail-list span {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
}
.license-install-info code {
    overflow-wrap: anywhere;
    word-break: break-all;
}
.update-release-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--color-canvas-subtle);
}
.update-release-card code {
    overflow-wrap: anywhere;
}
.requirements { display: grid; gap: 8px; margin-bottom: 18px; }
.ok { color: var(--success); font-weight: 700; }
.bad { color: var(--danger); font-weight: 700; }
.item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}
.item, .item .actions, .compact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.field-item { flex-wrap: wrap; }
.field-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}
.field-summary {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 6px;
}
.field-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.field-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}
.field-meta-line span {
    border-right: 1px solid var(--line);
    padding-right: 8px;
}
.field-meta-line span:last-child {
    border-right: 0;
    padding-right: 0;
}
.field-meta-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.field-meta-type img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    opacity: .68;
}
.quick-required {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fafc;
    font-weight: 700;
}
.field-settings {
    flex-basis: 100%;
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    animation: fieldEditorReveal .16s ease-out;
}
.field-item.editor-open {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
.field-editor-tabs {
    margin-bottom: 14px;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.field-editor-tabs .tab-button {
    min-height: 38px;
    white-space: nowrap;
    font-size: 14px;
}
.field-editor-panel {
    width: 100%;
}
.field-editor-panel[hidden] {
    display: none;
}
.field-editor-actions {
    margin-top: 14px;
}
.field-display-rules {
    display: grid;
    gap: 12px;
}
.field-tab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.field-tab-heading small {
    color: var(--muted);
}
.field-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}
.field-option-grid strong {
    grid-column: 1 / -1;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.item form { margin: 0; }
.muted { color: var(--muted); display: block; }
.field-list {
    display: grid;
    gap: 12px;
}
.field-list .field-item {
    margin-bottom: 0;
}
.field-item.dragging {
    opacity: .62;
}
.field-item.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(24, 100, 171, .12);
}
.drag-handle {
    align-self: stretch;
    min-width: 58px;
    min-height: 44px;
    padding: 8px 10px;
    color: var(--muted);
    background: #f8fafc;
    cursor: grab;
    font-size: 13px;
    font-weight: 700;
    flex-direction: column;
    gap: 4px;
}
.drag-handle img {
    display: block;
    width: 18px;
    height: 18px;
    opacity: .66;
    pointer-events: none;
}
.drag-handle:active {
    cursor: grabbing;
}
.drag-handle span {
    font-size: 11px;
}
.icon-button {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    font-size: 18px;
    font-weight: 800;
}
.icon-button img {
    display: block;
    margin: 0 auto;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .48);
}
.modal-panel {
    width: min(720px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}
.qr-modal {
    display: grid;
    gap: 16px;
}
.qr-modal .section-header {
    margin-bottom: 0;
}
.qr-modal-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}
.qr-modal-controls label {
    max-width: 220px;
}
.qr-preview {
    width: min(100%, 520px);
    height: auto;
    justify-self: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.move-field:disabled {
    cursor: not-allowed;
    opacity: .45;
}
@keyframes fieldEditorReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.option-editor {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.option-editor-wrap,
.condition-editor {
    flex-basis: 100%;
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.option-editor-wrap summary,
.condition-editor summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-weight: 700;
}
.option-editor-wrap summary small,
.condition-editor summary small {
    color: var(--muted);
    font-weight: 500;
}
.option-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.option-list {
    display: grid;
    gap: 10px;
}
.option-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.option-row .default-choice { min-height: 40px; }
.logic-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.condition-editor {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}
.condition-editor[open] { gap: 12px; }
.condition-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) minmax(140px, .85fr) minmax(130px, .8fr) minmax(150px, .85fr) auto auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.condition-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.condition-pill form { margin: 0; }
.consent-editor-form {
    display: grid;
    gap: 16px;
}
.consent-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: stretch;
}
.markdown-editor textarea {
    min-height: 420px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.5;
}
.markdown-preview-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #f8fafc;
}
.markdown-content {
    color: var(--text);
    line-height: 1.6;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 0;
}
.markdown-content p,
.markdown-content ul,
.markdown-content ol {
    margin-top: 0;
}
.markdown-preview {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}
.empty-state {
    display: grid;
    gap: 8px;
    text-align: center;
    padding: 42px 18px;
    color: var(--muted);
}
.empty-state h2 {
    margin: 0;
    color: var(--text);
}
.user-list {
    display: grid;
    gap: 12px;
}
.user-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #f8fafc;
}
.user-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.user-card-summary strong,
.user-card-summary small {
    overflow-wrap: anywhere;
}
.user-card-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    text-align: right;
}
.user-card-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.user-card-actions {
    display: flex;
    justify-content: flex-end;
}
.delete-form { margin-top: 24px; }
.field { margin-bottom: var(--field-spacing, 18px); }
.field[hidden] { display: none; }
.field small {
    display: block;
    color: var(--form-description-color, var(--muted));
    font-size: var(--form-description-size, var(--text-sm));
    margin-top: 5px;
}
.field-number {
    display: inline-flex;
    color: var(--form-description-color, var(--muted));
    font-weight: 800;
    margin-right: 2px;
}
.form-consent-gate {
    display: grid;
    gap: 18px;
}
.consent-content {
    max-height: min(58vh, 620px);
    overflow: auto;
    border: 1px solid var(--glass-line, var(--line));
    border-radius: 8px;
    padding: 18px;
    background: color-mix(in srgb, var(--form-bg, #fff) 82%, #ffffff 18%);
}
.consent-actions {
    justify-content: flex-end;
}
.public-form {
    --field-spacing: 18px;
    --field-item-gap: 12px;
    --field-control-padding-y: 10px;
    background: var(--form-bg, var(--surface));
    background: color-mix(in srgb, var(--form-bg, var(--surface)) 78%, transparent);
    border-color: var(--glass-line);
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        inset 1px 0 0 color-mix(in srgb, var(--glass-edge) 74%, transparent),
        0 28px 70px var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(1.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
    color: var(--form-text-color, var(--text));
    font-size: var(--form-text-size, var(--text-base));
}
.public-form.field-spacing-compact { --field-spacing: 10px; }
.public-form.field-spacing-cozy { --field-spacing: 18px; }
.public-form.field-spacing-roomy { --field-spacing: 28px; }
.public-form.field-density-compact {
    --field-item-gap: 8px;
    --field-control-padding-y: 8px;
}
.public-form.field-density-cozy {
    --field-item-gap: 12px;
    --field-control-padding-y: 10px;
}
.public-form.field-density-roomy {
    --field-item-gap: 16px;
    --field-control-padding-y: 14px;
}
.public-form input,
.public-form select,
.public-form textarea {
    padding-top: var(--field-control-padding-y);
    padding-bottom: var(--field-control-padding-y);
    font-size: var(--form-text-size, var(--text-base));
}
.public-form button,
.public-form .button {
    font-size: var(--form-text-size, var(--text-base));
}
.public-form label {
    gap: var(--field-item-gap);
    font-size: var(--form-label-size, var(--text-sm));
}
.public-form h1 {
    color: var(--form-title-color, var(--text));
    font-size: var(--form-title-size, var(--text-lg));
}
.public-form .form-logo {
    display: block;
    max-height: 64px;
    width: auto;
    max-width: 100%;
    margin: 0 auto 10px 0;
    object-fit: contain;
}
@media (max-width: 640px) {
    .public-form .form-logo { max-height: 50px; }
}
.form-logo-preview {
    display: inline-block;
    margin: 4px 0;
}
.form-logo-preview img {
    display: block;
    max-height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    background: #f4f6f8;
    border: 1px solid var(--border, #e1e5ea);
    border-radius: 6px;
    padding: 4px;
}
.public-form > p {
    color: var(--form-description-color, var(--muted));
    font-size: var(--form-description-size, var(--text-base));
}
.public-form label,
.public-form .field > label > span { color: var(--form-label-color, var(--text)); }
.public-form .field-label-text {
    color: var(--form-label-color, var(--text));
    font-size: var(--form-label-size, var(--text-sm));
    font-weight: 800;
}
.public-form .required-mark {
    color: color-mix(in srgb, var(--danger) 76%, var(--form-label-color, var(--text)) 24%);
    font-weight: 900;
}
.public-form .choice-stack .check,
.public-form .field > label > .check,
.public-form .check:not(.consent-check) {
    color: var(--form-text-color, var(--text));
    font-size: var(--form-text-size, var(--text-base));
    font-weight: 500;
}
.public-form .choice-stack .check span,
.public-form .check:not(.consent-check) span:not(.field-label-text) {
    font-weight: 500;
}
.form-branding-footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--glass-line, var(--line)) 82%, transparent);
    color: color-mix(in srgb, var(--form-description-color, var(--muted)) 86%, transparent);
    font-size: .84rem;
    line-height: 1.55;
    text-align: center;
}
.form-branding-footer a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
.form-branding-footer a:hover {
    text-decoration: underline;
}
body.public-form-page.theme-clean,
.public-form.theme-clean {
    --page-bg: #edf3f8;
    --page-glow: rgba(24, 100, 171, .16);
    --form-bg: #ffffff;
    --form-title-color: #17202a;
    --form-description-color: #526070;
    --form-label-color: #233044;
    --form-text-color: #17202a;
}
body.public-form-page.theme-midnight,
.public-form.theme-midnight {
    --page-bg: #101828;
    --page-glow: rgba(96, 165, 250, .2);
    --glass-edge: rgba(255, 255, 255, .18);
    --glass-line: rgba(255, 255, 255, .16);
    --glass-shadow: rgba(2, 6, 23, .48);
    --form-bg: #101828;
    --form-title-color: #f9fafb;
    --form-description-color: #cbd5e1;
    --form-label-color: #e5e7eb;
    --form-text-color: #f8fafc;
}
body.public-form-page.theme-garden,
.public-form.theme-garden {
    --page-bg: #e3f3e8;
    --page-glow: rgba(22, 163, 74, .18);
    --form-bg: #f1f8f3;
    --form-title-color: #14532d;
    --form-description-color: #3f6212;
    --form-label-color: #1f3d2b;
    --form-text-color: #17202a;
}
body.public-form-page.theme-sunrise,
.public-form.theme-sunrise {
    --page-bg: #ffe8d0;
    --page-glow: rgba(234, 88, 12, .2);
    --form-bg: #fff7ed;
    --form-title-color: #7c2d12;
    --form-description-color: #9a3412;
    --form-label-color: #7c2d12;
    --form-text-color: #1f2937;
}
.field-error { color: var(--danger); margin-top: 6px; }
.field-picture {
    display: flex;
    margin-bottom: 10px;
}
.field-picture-left { justify-content: flex-start; }
.field-picture-center { justify-content: center; }
.field-picture-right { justify-content: flex-end; }
.field-picture img {
    display: block;
    max-width: 100%;
    border-radius: 6px;
}
.choice-stack {
    display: grid;
    gap: var(--field-item-gap, 8px);
}
.choice-stack-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 18px;
    row-gap: 8px;
}
.other-choice {
    display: grid;
    grid-template-columns: auto auto minmax(180px, 1fr);
    align-items: center;
}
.other-choice .other-choice-input {
    min-width: 0;
}
.other-select-group {
    display: grid;
    gap: 8px;
}
.subfield-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--field-item-gap, 12px);
}
.list-field {
    display: grid;
    gap: var(--field-item-gap, 10px);
}
.list-items {
    display: grid;
    gap: 8px;
}
.list-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.list-item-row .list-remove {
    min-width: 84px;
}
.list-field .list-add {
    justify-self: start;
}
.email-verify-group {
    display: grid;
    gap: var(--field-item-gap, 12px);
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--form-label-color, var(--line)) 18%, var(--glass-line, var(--line)));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--form-bg, #fff) 86%, #ffffff 14%), color-mix(in srgb, var(--form-bg, #fff) 78%, var(--accent) 8%));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 54%, transparent);
}
.email-address-row,
.email-otp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.email-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.phone-input-row {
    display: grid;
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}
.phone-country-code-input {
    display: flex;
    align-items: stretch;
    margin: 0;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}
.phone-country-code-input span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #f8fafc;
    color: var(--muted);
    padding: 0 10px;
    font-weight: 800;
    margin: 0;
}
.phone-country-code-input input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 6px 6px 0;
    margin: 0 0 0 -1px;
}
.email-address-row input[readonly] {
    background: color-mix(in srgb, var(--form-bg, #fff) 72%, #eef2f6 28%);
    border-color: var(--success);
}
.email-confirm-code {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}
.email-confirm-code:hover {
    background: var(--accent-dark);
}
.email-send-code {
    background: color-mix(in srgb, var(--form-bg, #fff) 84%, #ffffff 16%);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-line, var(--line)));
    color: var(--accent);
    font-weight: 700;
}
.email-send-code:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--form-bg, #fff) 90%);
}
.email-change {
    background: color-mix(in srgb, var(--form-bg, #fff) 82%, #ffffff 18%);
    border-color: color-mix(in srgb, var(--form-label-color, var(--line)) 22%, var(--line));
    color: var(--form-label-color, var(--text));
    font-weight: 700;
}
.email-confirm-code:disabled {
    cursor: not-allowed;
    opacity: .55;
}
.email-otp-row input {
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
}
.email-verify-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--form-description-color, var(--muted));
    font-size: 13px;
    font-weight: 600;
}
.email-verify-status::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
    background: color-mix(in srgb, var(--form-bg, #fff) 78%, #ffffff 22%);
    color: var(--muted);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.email-verify-group.is-pending .email-verify-status::before {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    color: var(--accent);
}
.email-verify-group.is-verified {
    border-color: color-mix(in srgb, var(--success) 42%, var(--glass-line, var(--line)));
}
.email-verify-group.is-verified .email-verify-status {
    color: var(--success);
}
.email-verify-group.is-verified .email-verify-status::before {
    content: "✓";
    border-color: color-mix(in srgb, var(--success) 48%, transparent);
    color: var(--success);
    font-family: var(--font-sans);
}
.choice-stack .check,
.consent-check {
    justify-content: flex-start;
    min-height: 0;
}
.rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    width: fit-content;
}
.rating-stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rating-stars label {
    margin: 0;
    color: color-mix(in srgb, var(--form-description-color, var(--muted)) 48%, transparent);
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
}
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked + label,
.rating-stars input:checked ~ label {
    color: #f5b301;
}
.rating-stars label:hover {
    transform: translateY(-1px);
}
.rating-stars input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
.input-prefix {
    display: flex;
    align-items: stretch;
}
.input-prefix span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #f8fafc;
    color: var(--muted);
    padding: 0 12px;
    font-weight: 700;
}
.input-prefix input {
    border-radius: 0 6px 6px 0;
}
.form-section {
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.form-section h2 {
    color: var(--form-label-color, var(--text));
    font-size: var(--form-label-size, 21px);
    margin-bottom: 6px;
}
.form-section p {
    color: var(--form-description-color, var(--muted));
    font-size: var(--form-description-size, var(--text-base));
}
.html-field {
    color: var(--form-text-color, var(--text));
    font-size: var(--form-text-size, var(--text-base));
}
.page-break {
    border: 0;
    border-top: 1px dashed var(--line);
    margin: 8px 0;
}
.form-page {
    display: grid;
    gap: 0;
}
.form-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-line, var(--line));
}
.form-page-actions [data-page-next],
.form-page-actions [data-page-submit] {
    margin-left: auto;
}
.form-page-count {
    color: var(--form-description-color, var(--muted));
    font-size: 13px;
    font-weight: 700;
}
.thanks-actions {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}
.redirect-countdown {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}
.redirect-countdown strong {
    color: var(--text);
}
.signature-field {
    display: grid;
    gap: 10px;
}
.signature-pad {
    width: 100%;
    height: 220px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    touch-action: none;
}

/* ── PortalStar card pattern ── */
.card {
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.card-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-canvas-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-fg-default);
}
.card-body { padding: var(--space-4); }
.card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-default);
    background: var(--color-canvas-subtle);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ── Auth / login pages ── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-canvas-subtle);
    padding: var(--space-6);
}
.auth-box {
    width: 100%;
    max-width: 340px;
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}
.auth-box-wide { max-width: 560px; }
.auth-logo {
    display: block;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-fg-default);
    text-align: center;
    text-decoration: none;
    margin-bottom: var(--space-5);
}
.auth-logo:hover { text-decoration: none; }
.auth-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-fg-default);
    margin: 0 0 var(--space-4);
    line-height: 1.25;
}
.auth-footer {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    text-align: center;
}

/* ── Alert aliases (PortalStar naming) ── */
.alert-success { background: var(--color-success-subtle); border-color: color-mix(in srgb, var(--color-success-fg) 28%, var(--color-border-muted)); color: var(--color-success-fg); }
.alert-danger  { background: var(--color-danger-subtle);  border-color: color-mix(in srgb, var(--color-danger-fg) 28%, var(--color-border-muted)); color: var(--color-danger-fg); }
.alert-warning { background: var(--color-warning-subtle); border-color: color-mix(in srgb, var(--color-warning-fg) 28%, var(--color-border-muted)); color: var(--color-warning-fg); }
.alert-info    { background: var(--color-accent-subtle);  border-color: color-mix(in srgb, var(--color-accent-fg) 28%, var(--color-border-muted)); color: var(--color-accent-fg); }

/* ── PortalStar stat cards ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.stat-card {
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.stat-card-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: var(--space-1);
}
.stat-card-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-fg-default);
}

/* ── PortalStar table variant ── */
.ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.ps-table th {
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    color: var(--color-fg-muted);
    text-align: left;
    background: var(--color-canvas-subtle);
    border-bottom: 1px solid var(--color-border-default);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.ps-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}
.ps-table tr:last-child td { border-bottom: none; }
.ps-table tr:hover td { background: var(--color-canvas-subtle); }

@media (max-width: 760px) {
    .topbar, .ps-header, .heading-row, .ps-page-header, .item, .inline-create, .create-form-panel, .template-import-panel, .template-actions, .filter-toolbar, .section-header, .field-card-top, .danger-zone { flex-direction: column; align-items: stretch; }
    .topbar nav { flex-wrap: wrap; }
    .ps-header { position: static; padding: var(--space-3) var(--space-4); }
    .ps-layout { display: block; }
    .ps-sidebar {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-default);
    }
    .ps-sidebar-section {
        display: grid;
        gap: var(--space-1);
    }
    .ps-main {
        width: 100%;
        padding: var(--space-4);
    }
    h1 { font-size: 25px; }
    h2 { font-size: 24px; }
    .editor-meta {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    .editor-meta a { grid-column: 1 / -1; }
    .grid-form, .logic-row, .option-row, .condition-row, .field-option-grid, .subfield-grid, .list-item-row, .other-choice, .appearance-layout, .consent-editor-layout, .license-grid, .license-layout, .system-health-summary, .email-address-row, .email-otp-row, .phone-input-row, .sms-parameter-row, .submission-navigator, .user-card-fields { grid-template-columns: 1fr; }
    .field-palette-panel.expanded .field-type-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .condition-pill { flex-direction: column; align-items: stretch; }
    .pagination,
    .pagination > div {
        align-items: stretch;
        flex-direction: column;
    }
    .user-card-summary,
    .user-card-meta {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }
    .user-card-actions {
        justify-content: stretch;
    }
    .user-card-actions .primary {
        width: 100%;
    }
    .license-banner,
    .update-release-card {
        align-items: stretch;
        flex-direction: column;
    }
    .license-banner a {
        margin-left: 0;
    }
    .form-actions, .form-page-actions, .option-toolbar, .editor-actions, .item .actions { flex-direction: column; align-items: stretch; }
    .form-page-actions [data-page-next],
    .form-page-actions [data-page-submit] {
        margin-left: 0;
    }
    .form-page-count {
        text-align: center;
    }
    .drag-handle {
        align-self: flex-start;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .landing-hero,
    .landing-features {
        grid-template-columns: 1fr;
    }
    .landing-hero {
        min-height: 0;
        padding-top: 24px;
        gap: 28px;
    }
    .landing-copy h1 {
        font-size: 48px;
    }
    .landing-product-body {
        grid-template-columns: 1fr;
    }
    .landing-product aside {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .landing-product aside strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .landing-nav,
    .landing-nav nav,
    .landing-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .landing-copy h1 {
        font-size: 40px;
    }
    .landing-copy p {
        font-size: 17px;
    }
    .landing-product main {
        padding: 22px;
    }
    .landing-preview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .page, .public-shell { width: min(100% - 24px, 1180px); }
    .panel { padding: 18px; }
    h1 { font-size: 24px; }
    .field-type-button { padding: 10px; }
    .field-palette-panel.expanded .field-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
    @page {
        margin: 14mm;
    }
    body {
        background: #fff !important;
        color: #17202a !important;
    }
    .ps-header,
    .ps-sidebar,
    .ps-page-header,
    .submission-navigator,
    .panel,
    .card,
    .alert,
    .topbar {
        display: none !important;
    }
    .ps-layout,
    .ps-main,
    .page {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .submission-print-area {
        display: block !important;
    }
    .submission-print-document {
        width: 100%;
        box-shadow: none;
    }
    .submission-print-value,
    .submission-print-header,
    .form-section,
    .page-break {
        border-color: #c9d1d9 !important;
    }
    .submission-print-value {
        background: #f8fafc !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .submission-print-html,
    .submission-print-html * {
        max-width: 100%;
    }
    a[href]::after {
        content: "";
    }
}